diff --git a/src/api/probation/api.probation.ts b/src/api/probation/api.probation.ts
index 803135f..264f145 100644
--- a/src/api/probation/api.probation.ts
+++ b/src/api/probation/api.probation.ts
@@ -39,5 +39,22 @@ export default {
 
   summaryReportDetail: (id: string) => `${probation}/report?assign_id=${id}`,
 
+  formevaluate: (id: string) => `${probation}/evaluate-record?assign_id=${id}`,
+
+  formevaluateRecord: (id: string) =>
+    `${probation}/evaluate-record/create?assign_id=${id}`,
+
+  createformevaluate: (id: string) =>
+    `${probation}/evaluate-record?assign_id=${id}`,
+  editFormEvaluate: (id: string, evaluate_id: string) =>
+    `${probation}/evaluate-record?assign_id=${id}&evaluate_id=${evaluate_id}`,
+
+  formevaluateCommander: (id: string) =>
+    `${probation}/evaluate-record/commander?assign_id=${id}`,
+  formevaluateRecordCommander: (id: string) =>
+    `${probation}/evaluate-record/create/commander?assign_id=${id}`,
+  reportEvaluateRecord1: (type: string, id: string) =>
+    `${reportProbation}/14/${type}/${id}`,
+  
   kpiCapacity
 };
diff --git a/src/modules/01_dashboard/views/Dashboard.vue b/src/modules/01_dashboard/views/Dashboard.vue
index 793ca98..11f8bfc 100644
--- a/src/modules/01_dashboard/views/Dashboard.vue
+++ b/src/modules/01_dashboard/views/Dashboard.vue
@@ -106,14 +106,14 @@ const items = ref<any>([
     path: "/scholarship",
     active: false,
   },
-  {
-    icon: "mdi-school",
-    title: "ทดลองงาน",
-    sub: "รายการงานที่ได้รับมอบหมาย",
-    color: "teal-2",
-    path: "/probation",
-    active: false,
-  },
+  // {
+  //   icon: "mdi-school",
+  //   title: "ทดลองงาน",
+  //   sub: "รายการงานที่ได้รับมอบหมาย",
+  //   color: "teal-2",
+  //   path: "/probation",
+  //   active: false,
+  // },
 ]);
 onMounted(async () => {
   await fetchlistInbox(1);
diff --git a/src/modules/11_probation/component/02_RecordCareker.vue b/src/modules/11_probation/component/02_RecordCareker.vue
index b2c8a7d..00d5e5b 100644
--- a/src/modules/11_probation/component/02_RecordCareker.vue
+++ b/src/modules/11_probation/component/02_RecordCareker.vue
@@ -1,14 +1,64 @@
 <script setup lang="ts">
 import { useQuasar } from "quasar";
-import { ref } from "vue";
-import { useRouter } from "vue-router";
+import { ref, onMounted, defineAsyncComponent } from "vue";
+import { useRoute, useRouter } from "vue-router";
+import { useCounterMixin } from "@/stores/mixin";
 
+import http from "@/plugins/http";
+import config from "@/app.config";
+
+import { useProbationStore } from "@/modules/11_probation/store/probation";
+
+const ResultPage = defineAsyncComponent(
+  () => import("@/modules/11_probation/component/editPage/01_result.vue")
+);
+const evaluate = ref<any>([]);
+const store = useProbationStore();
 const router = useRouter();
+const route = useRoute();
 const $q = useQuasar();
 const mode = ref<any>($q.screen.gt.xs);
+const mixin = useCounterMixin();
+const { showLoader, hideLoader, messageError, dialogConfirm, success } = mixin;
+
+const id = ref<string>(route.params.id as string);
+const profileId = ref<string>(route.params.profileId as string);
+
+const fullname = ref<string>("");
+const dataArrayNumber = ref<number>();
+/** get ข้อมูล มอบหมาย
+ * @param id person id
+ */
+async function fecthAssign(id: string) {
+  showLoader();
+  await http
+    .get(config.API.formevaluate(id))
+    .then(async (res: any) => {
+      await store.fecthdataAssign(res.data.data);
+      evaluate.value = res.data.data.evaluate;
+      fullname.value = res.data.data.experimentee
+        ? res.data.data.experimentee.name
+        : "";
+      dataArrayNumber.value = 1;
+    })
+    .catch((e: any) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+function addData() {
+  router.push(`/probation/detail/addresult/${profileId.value}/${id.value}`);
+}
+
+onMounted(async () => {
+  await fecthAssign(id.value);
+});
 </script>
 <template>
-    <div v-if="!$q.screen.gt.xs" class="col-xs-12 col-sm-12 col-md-11">
+  <div v-if="!$q.screen.gt.xs" class="col-xs-12 col-sm-12 col-md-11">
     <div class="toptitle text-white col-12 row items-center">
       <q-btn
         icon="mdi-arrow-left"
@@ -23,5 +73,32 @@ const mode = ref<any>($q.screen.gt.xs);
       <div>แบบบันทึกผล (ผู้ดูแล)</div>
     </div>
   </div>
-  
+  <div :class="`row q-my-sm ${$q.screen.gt.xs ? '' : 'mobileClass'}`">
+    <div class="col-12 q-gutter-md" v-if="store.tabs.length == 0">
+      <div class="flex justify-center items-center q-my-md q-gutter-md">
+        <q-btn
+          outline
+          color="primary"
+          label="สร้างแบบบันทึกผล"
+          @click="addData"
+        />
+      </div>
+    </div>
+    <div v-else>
+
+        <ResultPage
+          :fullname="fullname"
+          v-model:dataArrayNumber="dataArrayNumber"
+          :fecthAssign="fecthAssign"
+          :data="evaluate.find((x: any) => x.no === dataArrayNumber)"
+        />
+
+    </div>
+  </div>
 </template>
+<style scoped>
+.mobileClass {
+  background-color: #fff;
+  border-radius: 10px;
+}
+</style>
diff --git a/src/modules/11_probation/component/03_RecordCommander.vue b/src/modules/11_probation/component/03_RecordCommander.vue
index 5059f8f..182f861 100644
--- a/src/modules/11_probation/component/03_RecordCommander.vue
+++ b/src/modules/11_probation/component/03_RecordCommander.vue
@@ -1,11 +1,65 @@
 <script setup lang="ts">
 import { useQuasar } from "quasar";
-import { ref } from "vue";
-import { useRouter } from "vue-router";
+import { ref,defineAsyncComponent,onMounted } from "vue";
 
+import { useProbationStore } from "@/modules/11_probation/store/probation";
+import { useRoute, useRouter } from "vue-router";
+import { useCounterMixin } from "@/stores/mixin";
+
+import http from "@/plugins/http";
+import config from "@/app.config";
+
+
+
+const mixin = useCounterMixin();
+const { showLoader, hideLoader, messageError, dialogConfirm, success } = mixin;
+const Evaluacommander = defineAsyncComponent(
+  () => import("@/modules/11_probation/component/editPage/02_evaluacommander.vue")
+);
 const router = useRouter();
+const route = useRoute();
+
+const dataArrayNumber = ref<number>();
+const fullname = ref<string>("");
+const id = ref<string>(route.params.id as string);
+const profileId = ref<string>(route.params.profileId as string);
+
+const store = useProbationStore();
 const $q = useQuasar();
 const mode = ref<any>($q.screen.gt.xs);
+
+
+function addData() {
+  router.push(`/probation/detail/addevaluacommander/${profileId.value}/${id.value}`);
+}
+
+/**
+ * get data
+ * @param id person id 
+ */
+ async function fecthAssign(id: string){
+  showLoader();
+  await http
+    .get(config.API.formevaluateCommander(id))
+    .then(async (res: any) => {
+      await store.fecthdataAssign(res.data.data);
+      fullname.value = res.data.data.experimentee
+        ? res.data.data.experimentee.name
+        : "";
+      dataArrayNumber.value = 1;
+    })
+    .catch((e: any) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+};
+
+onMounted(async () => {
+  await fecthAssign(id.value);
+});
+
 </script>
 <template>
     <div v-if="!$q.screen.gt.xs" class="col-xs-12 col-sm-12 col-md-11">
@@ -23,5 +77,29 @@ const mode = ref<any>($q.screen.gt.xs);
       <div>แบบบันทึกผล (ผู้บังคับบัญชา)</div>
     </div>
   </div>
-  
+  <div :class="`row q-my-sm ${$q.screen.gt.xs ? '' : 'mobileClass'}`">
+    <div class="col-12 q-gutter-md" v-if="store.tabs.length == 0">
+      <div class="flex justify-center items-center q-my-md q-gutter-md">
+        <q-btn
+          outline
+          color="primary"
+          label="สร้างแบบบันทึกผล"
+          @click="addData"
+        />
+      </div>
+    </div>
+    <div v-else>
+
+        <Evaluacommander
+
+        />
+
+    </div>
+  </div>
 </template>
+<style scoped>
+.mobileClass {
+  background-color: #fff;
+  border-radius: 10px;
+}
+</style>
\ No newline at end of file
diff --git a/src/modules/11_probation/component/04_EvaluateCommander.vue b/src/modules/11_probation/component/04_EvaluateCommander.vue
index 7082784..411ec94 100644
--- a/src/modules/11_probation/component/04_EvaluateCommander.vue
+++ b/src/modules/11_probation/component/04_EvaluateCommander.vue
@@ -1,11 +1,28 @@
 <script setup lang="ts">
 import { useQuasar } from "quasar";
-import { ref } from "vue";
-import { useRouter } from "vue-router";
+import { ref,defineAsyncComponent } from "vue";
+
+import { useProbationStore } from "@/modules/11_probation/store/probation";
+import { useRoute, useRouter } from "vue-router";
+
+const Evalua = defineAsyncComponent(
+  () => import("@/modules/11_probation/component/editPage/03_evalua.vue")
+);
 
 const router = useRouter();
+const route = useRoute();
+
+const id = ref<string>(route.params.id as string);
+const profileId = ref<string>(route.params.profileId as string);
+const store = useProbationStore();
+
 const $q = useQuasar();
 const mode = ref<any>($q.screen.gt.xs);
+
+function addData() {
+  router.push(`/probation/detail/addevalua/${profileId.value}/${id.value}`);
+}
+
 </script>
 <template>
     <div v-if="!$q.screen.gt.xs" class="col-xs-12 col-sm-12 col-md-11">
@@ -23,5 +40,29 @@ const mode = ref<any>($q.screen.gt.xs);
       <div>แบบประเมินผล (ผู้บังคับบัญชา)</div>
     </div>
   </div>
-  
+  <div :class="`row q-my-sm ${$q.screen.gt.xs ? '' : 'mobileClass'}`">
+    <div class="col-12 q-gutter-md" v-if="store.tabs.length == 0">
+      <div class="flex justify-center items-center q-my-md q-gutter-md">
+        <q-btn
+          outline
+          color="primary"
+          label="สร้างแบบประเมิน"
+          @click="addData"
+        />
+      </div>
+    </div>
+    <div v-else>
+
+        <Evalua
+
+        />
+
+    </div>
+  </div>
 </template>
+<style scoped>
+.mobileClass {
+  background-color: #fff;
+  border-radius: 10px;
+}
+</style>
\ No newline at end of file
diff --git a/src/modules/11_probation/component/05_EvaluateChairman.vue b/src/modules/11_probation/component/05_EvaluateChairman.vue
index 7fcd2c3..6930b5f 100644
--- a/src/modules/11_probation/component/05_EvaluateChairman.vue
+++ b/src/modules/11_probation/component/05_EvaluateChairman.vue
@@ -1,11 +1,26 @@
 <script setup lang="ts">
 import { useQuasar } from "quasar";
-import { ref } from "vue";
-import { useRouter } from "vue-router";
+import { ref,defineAsyncComponent } from "vue";
+import { useRoute, useRouter } from "vue-router";
+import { useProbationStore } from "@/modules/11_probation/store/probation";
+
+const Evaluascore = defineAsyncComponent(
+  () => import("@/modules/11_probation/component/editPage/04_evaluascore.vue")
+);
 
 const router = useRouter();
+const route = useRoute();
+
+const id = ref<string>(route.params.id as string);
+const profileId = ref<string>(route.params.profileId as string);
+
+const store = useProbationStore();
 const $q = useQuasar();
 const mode = ref<any>($q.screen.gt.xs);
+
+function addData() {
+  router.push(`/probation/detail/addevaluascore/${profileId.value}/${id.value}`);
+}
 </script>
 <template>
     <div v-if="!$q.screen.gt.xs" class="col-xs-12 col-sm-12 col-md-11">
@@ -23,5 +38,28 @@ const mode = ref<any>($q.screen.gt.xs);
       <div>แบบประเมินผล (คณะกรรมการ)</div>
     </div>
   </div>
-  
+  <div :class="`row q-my-sm ${$q.screen.gt.xs ? '' : 'mobileClass'}`">
+    <div class="col-12 q-gutter-md" v-if="store.tabs.length == 0">
+      <div class="flex justify-center items-center q-my-md q-gutter-md">
+        <q-btn
+          outline
+          color="primary"
+          label="สร้างแบบประเมิน"
+          @click="addData"
+        />
+      </div>
+    </div>
+    <div v-else>
+
+        <Evaluascore
+        />
+
+    </div>
+  </div>
 </template>
+<style scoped>
+.mobileClass {
+  background-color: #fff;
+  border-radius: 10px;
+}
+</style>
\ No newline at end of file
diff --git a/src/modules/11_probation/component/08_SurveyComment.vue b/src/modules/11_probation/component/08_SurveyComment.vue
index 0a4ca85..2ebeff7 100644
--- a/src/modules/11_probation/component/08_SurveyComment.vue
+++ b/src/modules/11_probation/component/08_SurveyComment.vue
@@ -225,7 +225,9 @@ onMounted(() => {
         <div class="col-12">
           <q-separator size="3px" color="grey-2" />
         </div>
-        <Criterion />
+
+          <Criterion />
+
         <div class="col-12" align="right">
           <q-btn label="บันทึก" color="secondary" type="submit" v-if="!status"
             ><q-tooltip>บันทึกข้อมูล</q-tooltip></q-btn
diff --git a/src/modules/11_probation/component/Criterion.vue b/src/modules/11_probation/component/Criterion.vue
index e21d339..1dad1ee 100644
--- a/src/modules/11_probation/component/Criterion.vue
+++ b/src/modules/11_probation/component/Criterion.vue
@@ -1,56 +1,335 @@
 <template>
-    <div class="col-12 row q-pb-sm">
-        <div class="col-12 text-top0 items-center q-pa-md">
-        เกณฑ์การประเมินความคาดหวัง
-        </div>
-        <div class="q-gutter-sm row">
-            <div class="col-12 row">
-                <div class="col-2 row justify-center">
-                <i class="q-icon notranslate material-icons q-rating__icon q-rating__icon--active text-light-blue-3" aria-hidden="true" role="presentation">grade</i>
-                </div>
-                <div class="q-pl-md col-3">ต่ำกว่าความคาดหวังมาก</div>
-                <div class="q-pl-md">หมายถึง มีคะแนนเฉลี่ยที่ระดับ 1</div>
-            </div>
-            <div class="col-12 row">
-                <div class="col-2 row justify-center">
-                <i class="q-icon notranslate material-icons q-rating__icon q-rating__icon--active text-light-blue-3" aria-hidden="true" role="presentation">grade</i>
-                <i class="q-icon notranslate material-icons q-rating__icon q-rating__icon--active text-light-blue-6" aria-hidden="true" role="presentation">grade</i>
-                </div>
-                <div class="q-pl-md col-3">ต่ำกว่าความคาดหวังค่อนข้างมาก</div>
-                <div class="q-pl-md">หมายถึง มีคะแนนเฉลี่ยที่ระดับ 2</div>
-            </div>
-            <div class="col-12 row">
-                <div class="col-2 row justify-center">
-                <i class="q-icon notranslate material-icons q-rating__icon q-rating__icon--active text-light-blue-3" aria-hidden="true" role="presentation">grade</i>
-                <i class="q-icon notranslate material-icons q-rating__icon q-rating__icon--active text-light-blue-6" aria-hidden="true" role="presentation">grade</i>
-                <i class="q-icon notranslate material-icons q-rating__icon q-rating__icon--active text-blue" aria-hidden="true" role="presentation">grade</i>
-                </div>
-                <div class="q-pl-md col-3">เป็นไปตามความคาดหวัง</div>
-                <div class="q-pl-md">หมายถึง มีคะแนนเฉลี่ยที่ระดับ 3</div>
-            </div>
-            <div class="col-12 row">
-                <div class="col-2 row justify-center">
-                <i class="q-icon notranslate material-icons q-rating__icon q-rating__icon--active text-light-blue-3" aria-hidden="true" role="presentation">grade</i>
-                <i class="q-icon notranslate material-icons q-rating__icon q-rating__icon--active text-light-blue-6" aria-hidden="true" role="presentation">grade</i>
-                <i class="q-icon notranslate material-icons q-rating__icon q-rating__icon--active text-blue" aria-hidden="true" role="presentation">grade</i>
-                <i class="q-icon notranslate material-icons q-rating__icon q-rating__icon--active text-blue-9" aria-hidden="true" role="presentation">grade</i>
-                </div>
-                <div class="q-pl-md col-3">สูงว่าความคาดหวังค่อนข้างมาก</div>
-                <div class="q-pl-md">หมายถึง มีคะแนนเฉลี่ยที่ระดับ 4</div>
-            </div>
-            <div class="col-12 row">
-                <div class="col-2 row justify-center">
-                <i class="q-icon notranslate material-icons q-rating__icon q-rating__icon--active text-light-blue-3" aria-hidden="true" role="presentation">grade</i>
-                <i class="q-icon notranslate material-icons q-rating__icon q-rating__icon--active text-light-blue-6" aria-hidden="true" role="presentation">grade</i>
-                <i class="q-icon notranslate material-icons q-rating__icon q-rating__icon--active text-blue" aria-hidden="true" role="presentation">grade</i>
-                <i class="q-icon notranslate material-icons q-rating__icon q-rating__icon--active text-blue-9" aria-hidden="true" role="presentation">grade</i>
-                <i class="q-icon notranslate material-icons q-rating__icon q-rating__icon--active text-blue-10" aria-hidden="true" role="presentation">grade</i>
-                </div>
-                <div class="q-pl-md col-3">สูงกว่าความคาดหวังมาก</div>
-                <div class="q-pl-md">หมายถึง มีคะแนนเฉลี่ยที่ระดับ 5</div>
-            </div>
-        </div>
+  <div class="col-12 row q-pb-sm">
+    <div class="col-12 text-top0 items-center q-pa-md">
+      เกณฑ์การประเมินความคาดหวัง
     </div>
+    <div v-if="$q.screen.gt.xs" class="q-gutter-sm row">
+      <div class="col-12 row">
+        <div class="col-2 row justify-center">
+          <i
+            class="q-icon notranslate material-icons q-rating__icon q-rating__icon--active text-light-blue-3"
+            aria-hidden="true"
+            role="presentation"
+            >grade</i
+          >
+        </div>
+        <div class="q-pl-md col-3">ต่ำกว่าความคาดหวังมาก</div>
+        <div class="q-pl-md col-7">หมายถึง มีคะแนนเฉลี่ยที่ระดับ 1</div>
+      </div>
+      <div class="col-12 row">
+        <div class="col-2 row justify-center">
+          <i
+            class="q-icon notranslate material-icons q-rating__icon q-rating__icon--active text-light-blue-3"
+            aria-hidden="true"
+            role="presentation"
+            >grade</i
+          >
+          <i
+            class="q-icon notranslate material-icons q-rating__icon q-rating__icon--active text-light-blue-6"
+            aria-hidden="true"
+            role="presentation"
+            >grade</i
+          >
+        </div>
+        <div class="q-pl-md col-3">ต่ำกว่าความคาดหวังค่อนข้างมาก</div>
+        <div class="q-pl-md col-7">หมายถึง มีคะแนนเฉลี่ยที่ระดับ 2</div>
+      </div>
+      <div class="col-12 row">
+        <div class="col-2 row justify-center">
+          <i
+            class="q-icon notranslate material-icons q-rating__icon q-rating__icon--active text-light-blue-3"
+            aria-hidden="true"
+            role="presentation"
+            >grade</i
+          >
+          <i
+            class="q-icon notranslate material-icons q-rating__icon q-rating__icon--active text-light-blue-6"
+            aria-hidden="true"
+            role="presentation"
+            >grade</i
+          >
+          <i
+            class="q-icon notranslate material-icons q-rating__icon q-rating__icon--active text-blue"
+            aria-hidden="true"
+            role="presentation"
+            >grade</i
+          >
+        </div>
+        <div class="q-pl-md col-3">เป็นไปตามความคาดหวัง</div>
+        <div class="q-pl-md col-7">หมายถึง มีคะแนนเฉลี่ยที่ระดับ 3</div>
+      </div>
+      <div class="col-12 row">
+        <div class="col-2 row justify-center">
+          <i
+            class="q-icon notranslate material-icons q-rating__icon q-rating__icon--active text-light-blue-3"
+            aria-hidden="true"
+            role="presentation"
+            >grade</i
+          >
+          <i
+            class="q-icon notranslate material-icons q-rating__icon q-rating__icon--active text-light-blue-6"
+            aria-hidden="true"
+            role="presentation"
+            >grade</i
+          >
+          <i
+            class="q-icon notranslate material-icons q-rating__icon q-rating__icon--active text-blue"
+            aria-hidden="true"
+            role="presentation"
+            >grade</i
+          >
+          <i
+            class="q-icon notranslate material-icons q-rating__icon q-rating__icon--active text-blue-9"
+            aria-hidden="true"
+            role="presentation"
+            >grade</i
+          >
+        </div>
+        <div class="q-pl-md col-3">สูงว่าความคาดหวังค่อนข้างมาก</div>
+        <div class="q-pl-md col-7">หมายถึง มีคะแนนเฉลี่ยที่ระดับ 4</div>
+      </div>
+      <div class="col-12 row">
+        <div class="col-2 row justify-center">
+          <i
+            class="q-icon notranslate material-icons q-rating__icon q-rating__icon--active text-light-blue-3"
+            aria-hidden="true"
+            role="presentation"
+            >grade</i
+          >
+          <i
+            class="q-icon notranslate material-icons q-rating__icon q-rating__icon--active text-light-blue-6"
+            aria-hidden="true"
+            role="presentation"
+            >grade</i
+          >
+          <i
+            class="q-icon notranslate material-icons q-rating__icon q-rating__icon--active text-blue"
+            aria-hidden="true"
+            role="presentation"
+            >grade</i
+          >
+          <i
+            class="q-icon notranslate material-icons q-rating__icon q-rating__icon--active text-blue-9"
+            aria-hidden="true"
+            role="presentation"
+            >grade</i
+          >
+          <i
+            class="q-icon notranslate material-icons q-rating__icon q-rating__icon--active text-blue-10"
+            aria-hidden="true"
+            role="presentation"
+            >grade</i
+          >
+        </div>
+        <div class="q-pl-md col-3">สูงกว่าความคาดหวังมาก</div>
+        <div class="q-pl-md col-7">หมายถึง มีคะแนนเฉลี่ยที่ระดับ 5</div>
+      </div>
+    </div>
+    <div v-else class="col-12">
+      <div class="row q-col-gutter-sm">
+        <div class="col-12">
+          <q-card bordered style="border-radius: 20px;">
+            <div class="q-pa-sm text-center bg-blue-1">
+              <span class="text-weight-medium">
+                <i
+                  class="q-icon notranslate material-icons q-rating__icon q-rating__icon--active text-light-blue-3"
+                  aria-hidden="true"
+                  role="presentation"
+                  >grade</i
+                ></span
+              >
+            </div>
+            <q-separator />
+            <q-card-section class="q-pa-none">
+              <q-list >
+                <q-item class="q-pa-none text-center">
+                  <q-item-section>
+                    <q-item-label>ต่ำกว่าความคาดหวังมาก</q-item-label>
+                  </q-item-section>
+                  <q-separator color="grey-3" vertical />
+                  <q-item-section class="q-ma-none">
+                    <q-item-label>มีคะแนนเฉลี่ยที่ระดับ 1</q-item-label>
+                  </q-item-section>
+                </q-item>
+              </q-list>
+            </q-card-section>
+          </q-card>
+        </div>
+        <div class="col-12">
+          <q-card bordered style="border-radius: 20px;">
+            <div class="q-pa-sm text-center bg-blue-1">
+              <span class="text-weight-medium">
+                <i
+            class="q-icon notranslate material-icons q-rating__icon q-rating__icon--active text-light-blue-3"
+            aria-hidden="true"
+            role="presentation"
+            >grade</i
+          >
+          <i
+            class="q-icon notranslate material-icons q-rating__icon q-rating__icon--active text-light-blue-6"
+            aria-hidden="true"
+            role="presentation"
+            >grade</i
+          ></span
+              >
+            </div>
+            <q-separator />
+            <q-card-section class="q-pa-none">
+              <q-list >
+                <q-item class="q-pa-none text-center">
+                  <q-item-section>
+                    <q-item-label>ต่ำกว่าความคาดหวังค่อนข้างมาก</q-item-label>
+                  </q-item-section>
+                  <q-separator color="grey-3" vertical />
+                  <q-item-section class="q-ma-none">
+                    <q-item-label>มีคะแนนเฉลี่ยที่ระดับ 2</q-item-label>
+                  </q-item-section>
+                </q-item>
+              </q-list>
+            </q-card-section>
+          </q-card>
+        </div>
+        <div class="col-12">
+          <q-card bordered style="border-radius: 20px;">
+            <div class="q-pa-sm text-center bg-blue-1">
+              <span class="text-weight-medium">
+                <i
+            class="q-icon notranslate material-icons q-rating__icon q-rating__icon--active text-light-blue-3"
+            aria-hidden="true"
+            role="presentation"
+            >grade</i
+          >
+          <i
+            class="q-icon notranslate material-icons q-rating__icon q-rating__icon--active text-light-blue-6"
+            aria-hidden="true"
+            role="presentation"
+            >grade</i
+          >
+          <i
+            class="q-icon notranslate material-icons q-rating__icon q-rating__icon--active text-blue"
+            aria-hidden="true"
+            role="presentation"
+            >grade</i
+          ></span
+              >
+            </div>
+            <q-separator />
+            <q-card-section class="q-pa-none">
+              <q-list >
+                <q-item class="q-pa-none text-center">
+                  <q-item-section>
+                    <q-item-label>เป็นไปตามความคาดหวัง</q-item-label>
+                  </q-item-section>
+                  <q-separator color="grey-3" vertical />
+                  <q-item-section class="q-ma-none">
+                    <q-item-label>มีคะแนนเฉลี่ยที่ระดับ 3</q-item-label>
+                  </q-item-section>
+                </q-item>
+              </q-list>
+            </q-card-section>
+          </q-card>
+        </div>
+        <div class="col-12">
+          <q-card bordered style="border-radius: 20px;">
+            <div class="q-pa-sm text-center bg-blue-1">
+              <span class="text-weight-medium">
+                <i
+            class="q-icon notranslate material-icons q-rating__icon q-rating__icon--active text-light-blue-3"
+            aria-hidden="true"
+            role="presentation"
+            >grade</i
+          >
+          <i
+            class="q-icon notranslate material-icons q-rating__icon q-rating__icon--active text-light-blue-6"
+            aria-hidden="true"
+            role="presentation"
+            >grade</i
+          >
+          <i
+            class="q-icon notranslate material-icons q-rating__icon q-rating__icon--active text-blue"
+            aria-hidden="true"
+            role="presentation"
+            >grade</i
+          >
+          <i
+            class="q-icon notranslate material-icons q-rating__icon q-rating__icon--active text-blue-9"
+            aria-hidden="true"
+            role="presentation"
+            >grade</i
+          ></span
+              >
+            </div>
+            <q-separator />
+            <q-card-section class="q-pa-none">
+              <q-list >
+                <q-item class="q-pa-none text-center">
+                  <q-item-section>
+                    <q-item-label>สูงว่าความคาดหวังค่อนข้างมาก</q-item-label>
+                  </q-item-section>
+                  <q-separator color="grey-3" vertical />
+                  <q-item-section class="q-ma-none">
+                    <q-item-label>มีคะแนนเฉลี่ยที่ระดับ 4</q-item-label>
+                  </q-item-section>
+                </q-item>
+              </q-list>
+            </q-card-section>
+          </q-card>
+        </div>
+        <div class="col-12">
+          <q-card bordered style="border-radius: 20px;">
+            <div class="q-pa-sm text-center bg-blue-1">
+              <span class="text-weight-medium">
+                <i
+            class="q-icon notranslate material-icons q-rating__icon q-rating__icon--active text-light-blue-3"
+            aria-hidden="true"
+            role="presentation"
+            >grade</i
+          >
+          <i
+            class="q-icon notranslate material-icons q-rating__icon q-rating__icon--active text-light-blue-6"
+            aria-hidden="true"
+            role="presentation"
+            >grade</i
+          >
+          <i
+            class="q-icon notranslate material-icons q-rating__icon q-rating__icon--active text-blue"
+            aria-hidden="true"
+            role="presentation"
+            >grade</i
+          >
+          <i
+            class="q-icon notranslate material-icons q-rating__icon q-rating__icon--active text-blue-9"
+            aria-hidden="true"
+            role="presentation"
+            >grade</i
+          >
+          <i
+            class="q-icon notranslate material-icons q-rating__icon q-rating__icon--active text-blue-10"
+            aria-hidden="true"
+            role="presentation"
+            >grade</i
+          ></span
+              >
+            </div>
+            <q-separator />
+            <q-card-section class="q-pa-none">
+              <q-list >
+                <q-item class="q-pa-none text-center">
+                  <q-item-section>
+                    <q-item-label>สูงกว่าความคาดหวังมาก</q-item-label>
+                  </q-item-section>
+                  <q-separator color="grey-3" vertical />
+                  <q-item-section class="q-ma-none">
+                    <q-item-label>มีคะแนนเฉลี่ยที่ระดับ 5</q-item-label>
+                  </q-item-section>
+                </q-item>
+              </q-list>
+            </q-card-section>
+          </q-card>
+        </div>
+      </div>
+    </div>
+  </div>
 </template>
 <style lang="scss" scoped>
 .text-top0 {
@@ -58,4 +337,4 @@
   padding-bottom: 8px;
   color: rgb(70, 68, 68);
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/modules/11_probation/component/Header.vue b/src/modules/11_probation/component/Header.vue
new file mode 100644
index 0000000..c245f98
--- /dev/null
+++ b/src/modules/11_probation/component/Header.vue
@@ -0,0 +1,110 @@
+<script setup lang="ts">
+import { ref, watch } from "vue";
+
+const tabHead = ref<string>("save1");
+
+/** รับค่ามาจากหน้าหลัก */
+const props = defineProps({
+  FileDownload: {
+    type: Function,
+    default() {
+      return "Default function";
+    },
+  },
+  loop: {
+    type: Number,
+  },
+  addData: {
+    type: Function,
+    default() {
+      return "Default function";
+    },
+  },
+  changeTab: {
+    type: Function,
+    default() {
+      return "Default function";
+    },
+  },
+});
+
+/** เรียกใช้ฟังชั่นจากหน้าหลัก */
+function downloadFile(type: string){
+  props.FileDownload(type);
+};
+
+watch(tabHead, () => {
+  props.changeTab(tabHead.value);
+});
+
+/** ไปยัง step ต่อไป */
+function nextPage(){
+  if (props.loop !== undefined) {
+    if (props.loop < 3) {
+      props.addData();
+    }
+  }
+};
+</script>
+
+<template>
+  <q-header class="bg-grey-1">
+    <div class="bg-grey-1">
+      <div class="col-12 row q-gutter-x-md items-center">
+        <q-tabs
+          dense
+          v-model="tabHead"
+          active-class="text-primary text-weight-medium"
+          indicator-color="grey-1"
+          class="text-grey-7"
+        >
+          <q-tab v-for="(i, j) in loop" :name="`save${i}`" :key="j">
+            <div class="row col-12 items-center">
+              <div class="q-mr-sm">ครั้งที่{{ i }}</div>
+              <q-btn
+                size="12px"
+                flat
+                dense
+                icon="mdi-download"
+                :disable="tabHead !== 'save' + i"
+                :color="tabHead !== 'save' + i ? 'grey' : 'add'"
+              >
+                <q-tooltip>ดาวน์โหลด</q-tooltip>
+                <q-menu>
+                  <q-list style="min-width: 150px">
+                    <q-item
+                      clickable
+                      v-close-popup
+                      @click="downloadFile('pdf')"
+                    >
+                      <q-item-section avatar
+                        ><q-icon color="red" name="mdi-file-pdf"
+                      /></q-item-section>
+                      <q-item-section>ไฟล์ .PDF</q-item-section>
+                    </q-item>
+                    <q-item
+                      clickable
+                      v-close-popup
+                      @click="downloadFile('docx')"
+                    >
+                      <q-item-section avatar
+                        ><q-icon color="blue" name="mdi-file-word"
+                      /></q-item-section>
+                      <q-item-section>ไฟล์ .docx</q-item-section>
+                    </q-item>
+                  </q-list>
+                </q-menu>
+              </q-btn>
+            </div>
+          </q-tab>
+        </q-tabs>
+        <div>
+          <q-btn color="blue" flat dense icon="mdi-plus" @click="nextPage">
+            <q-tooltip> เพิ่ม </q-tooltip>
+          </q-btn>
+        </div>
+      </div>
+      <q-separator />
+    </div>
+  </q-header>
+</template>
diff --git a/src/modules/11_probation/component/addPage/01_addresult.vue b/src/modules/11_probation/component/addPage/01_addresult.vue
new file mode 100644
index 0000000..2f1af91
--- /dev/null
+++ b/src/modules/11_probation/component/addPage/01_addresult.vue
@@ -0,0 +1,2249 @@
+<script setup lang="ts">
+import { ref, onMounted, computed, watch } from "vue";
+import { useRoute, useRouter } from "vue-router";
+
+import http from "@/plugins/http";
+import config from "@/app.config";
+import { useCounterMixin } from "@/stores/mixin";
+
+import Criterion from "@/modules/11_probation/component/Criterion.vue";
+
+import { useProbationStore } from "@/modules/11_probation/store/probation";
+import { useQuasar } from "quasar";
+
+const $q = useQuasar();
+const store = useProbationStore();
+const dateAutherise = ref<any>(new Date());
+const behavior_improve_desc = ref<string>("");
+const mixin = useCounterMixin();
+const {
+  showLoader,
+  hideLoader,
+  messageError,
+  dialogConfirm,
+  success,
+  date2Thai,
+  dialogMessageNotify,
+  dateToISO,
+} = mixin;
+const route = useRoute();
+const router = useRouter();
+
+const id = ref<string>(route.params.id as string);
+const profileId = ref<string>(route.params.profileId as string);
+
+const person = ref<any>([]);
+const assign = ref<any>([]);
+const evaluate_no = ref<string>("");
+const start_date = ref<Date>(new Date());
+const date_finish = ref<Date>(new Date());
+const round = ref<number>();
+const checkArray = ref<number>(0);
+const option = ref<any>([]);
+const Autherise = ref<any>(null);
+const list1_1 = ref<any>([]);
+const list1_2 = [{ id: "", label: "" }];
+const evaluate_expenct_level = ref<any>([]);
+const evaluate_ouptut = ref<any>([]);
+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 achievement_strength_desc = ref<string>("");
+const achievement_improve_desc = ref<string>("");
+const behavio_orther = ref<any>({ text: "", level: 0 });
+const etc2 = ref<any>(false);
+
+const orientation = ref<any>(null);
+const self_learning = ref<any>(null);
+const training_seminar = ref<any>(null);
+const other_training = ref<any>(null);
+
+const ArrayCountbotton = [orientation, self_learning, training_seminar];
+
+const conduct_level = ref<any>([]);
+const moral_level = ref<any>([]);
+const discipline_level = ref<any>([]);
+const behavior_strength_desc = ref<string>("");
+const list2_1 = store.behavior_no1;
+const list2_2 = store.behavior_no2;
+const list2_3 = store.behavior_no3;
+const variablesToWatch = [
+  knowledge_level,
+  skill_level,
+  competency_level,
+  learn_level,
+  apply_level,
+  success_level,
+];
+
+const lengthconduct = computed(() => {
+  return conduct_level.value.filter((item: number) => item !== 0).length;
+});
+const lengthmoral_level = computed(() => {
+  return moral_level.value.filter((item: number) => item !== 0).length;
+});
+const lengthdiscipline_level = computed(() => {
+  return discipline_level.value.filter((item: number) => item !== 0).length;
+});
+const alerts = Array(20)
+  .fill(null)
+  .map(() => ref<boolean>(false));
+
+//rules
+const behavio_strengthRules = [
+  (val: any) => (val && val.length > 0) || "กรุณากรอกข้อมูลจุดเด่น",
+];
+const behavio_strengthRef = ref<any>(null);
+const achievement_strengthRef = ref<any>(null);
+const achievement_strengthRules = [
+  (val: any) => (val && val.length > 0) || "กรุณากรอกข้อมูลจุดเด่น",
+];
+const evaluate_ouptutRules = [
+  (val: any) => (val && val.length > 0) || "กรุณากรอกเหตุผลที่เกิดขึ้น",
+];
+const lengthevaluate_expenct_level = computed(() => {
+  return evaluate_expenct_level.value.filter(
+    (item: any) => item.level !== undefined && item.level !== 0
+  ).length;
+});
+const lengthevaluate_ouptut = computed(() => {
+  return evaluate_ouptut.value.filter(
+    (item: any) => item.level !== undefined && item.level !== 0
+  ).length;
+});
+/**
+ * get ข้อมูล ลง ตัวแปร
+ * @param id personal id
+ */
+async function fecthFormdata(id: string) {
+  showLoader();
+  await http
+    .get(config.API.formevaluateRecord(id))
+    .then((res: any) => {
+      evaluate_no.value = res.data.data.evaluate_no;
+      start_date.value = res.data.data.start_date;
+      date_finish.value = res.data.data.end_date;
+      round.value = res.data.data.evaluate_no;
+
+      person.value = res.data.data.person;
+      assign.value = res.data.data.assign;
+      option.value.push(res.data.data.director);
+      Autherise.value = res.data.data.director;
+
+      list1_1.value = res.data.data.assign_output;
+      res.data.data.assign_output.forEach((e: any) => {
+        list1_2.push({ id: "", label: "" });
+      });
+      evaluate_expenct_level.value = res.data.data.assign_output.map(
+        (e: any) => ({
+          id: e.id,
+          labal: e.output_desc,
+        })
+      );
+      evaluate_ouptut.value = res.data.data.assign_output.map((e: any) => ({
+        id: e.id,
+        text: "",
+      }));
+      checkArray.value = list1_1.value.length;
+    })
+    .catch((e: any) => {})
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+/** return class เมื่อ true */
+function getBordered(i: boolean) {
+  return {
+    border_custom: i,
+  };
+}
+
+/** อัปเดต ข้อมูล */
+function putformData() {
+  const data = {
+    evaluate_no: evaluate_no.value,
+    start_date: start_date.value,
+    date_finish: date_finish.value,
+    evaluate_expenct_level: evaluate_expenct_level.value,
+    evaluate_ouptut: evaluate_ouptut.value,
+    knowledge_level: knowledge_level.value,
+    skill_level: skill_level.value,
+    competency_level: competency_level.value,
+    learn_level: learn_level.value,
+    apply_level: apply_level.value,
+    success_level: success_level.value,
+    achievement_other: achievement_other.value,
+    achievement_strength_desc: achievement_strength_desc.value,
+    achievement_improve_desc: achievement_improve_desc.value,
+    conduct1_level: conduct_level.value[0],
+    conduct2_level: conduct_level.value[1],
+    conduct3_level: conduct_level.value[2],
+    conduct4_level: conduct_level.value[3],
+    moral1_level: moral_level.value[0],
+    moral2_level: moral_level.value[1],
+    moral3_level: moral_level.value[2],
+    discipline1_level: discipline_level.value[0],
+    discipline2_level: discipline_level.value[1],
+    discipline3_level: discipline_level.value[2],
+    discipline4_level: discipline_level.value[3],
+    discipline5_level: discipline_level.value[4],
+    behavio_orther: behavio_orther.value,
+    behavior_strength_desc: behavior_strength_desc.value,
+    behavior_improve_desc: behavior_improve_desc.value,
+    orientation: Number(orientation.value),
+    self_learning: Number(self_learning.value),
+    training_seminar: Number(training_seminar.value),
+    other_training: Number(other_training.value),
+    assessor_dated: dateToISO(dateAutherise.value),
+  };
+  dialogConfirm($q, async () => await saveformdata(data));
+}
+
+/** เช็คค่าว่าง ก่อน save */
+function savaForm() {
+  achievement_strengthRef.value.validate();
+  behavio_strengthRef.value.validate();
+
+  let hasError = false;
+
+  if (
+    lengthevaluate_expenct_level.value !==
+      evaluate_expenct_level.value.length ||
+    lengthevaluate_ouptut.value !== evaluate_ouptut.value.length ||
+    knowledge_level.value === 0 ||
+    skill_level.value === 0 ||
+    competency_level.value === 0 ||
+    learn_level.value === 0 ||
+    apply_level.value === 0 ||
+    success_level.value === 0 ||
+    achievement_strength_desc.value === "" ||
+    lengthconduct.value !== 4 ||
+    lengthmoral_level.value !== 3 ||
+    lengthdiscipline_level.value !== 5 ||
+    behavior_strength_desc.value === "" ||
+    orientation.value === null ||
+    self_learning.value === null ||
+    training_seminar.value === null
+  ) {
+    hasError = true;
+  } else if (
+    (etc.value == true &&
+      (achievement_other.value.text === undefined ||
+        achievement_other.value.text == "" ||
+        achievement_other.value.level == undefined ||
+        achievement_other.value.level === 0)) ||
+    (etc2.value == true &&
+      (behavio_orther.value.text === "" ||
+        behavio_orther.value.text == undefined ||
+        behavio_orther.value.level === undefined ||
+        behavio_orther.value.level == 0))
+  ) {
+    hasError = true;
+  }
+
+  if (hasError === true) {
+    variablesToWatch.forEach((item, index) => {
+      if (item.value === 0) {
+        alerts[index + 2].value = true;
+      }
+    });
+    if (
+      lengthevaluate_expenct_level.value !== evaluate_expenct_level.value.length
+    ) {
+      alerts[0].value = true;
+    }
+    if (lengthevaluate_ouptut.value !== evaluate_ouptut.value.length) {
+      alerts[1].value = true;
+    }
+    if (lengthconduct.value !== 4) {
+      alerts[8].value = true;
+    }
+    if (lengthmoral_level.value !== 3) {
+      alerts[9].value = true;
+    }
+    if (lengthdiscipline_level.value !== 5) {
+      alerts[10].value = true;
+    }
+    ArrayCountbotton.forEach((item, index) => {
+      if (item.value === null) {
+        alerts[index + 11].value = true;
+      }
+    });
+
+    dialogMessageNotify($q, "กรุณากรอกข้อมูลให้ครบ");
+  } else {
+    putformData();
+  }
+}
+
+/**
+ * save ข้อมูล
+ * @param data  ข้อมูลที่ได้จาก ฟังชั่น putformData
+ */
+async function saveformdata(data: any) {
+  await http
+    .post(config.API.createformevaluate(id.value), data)
+    .then(() => {
+      success($q, "บันทึกสำเร็จ");
+      router.push(`/probation/detail/${profileId.value}/${id.value}`);
+    })
+    .catch((e: any) => {
+      messageError($q, e);
+    });
+}
+
+variablesToWatch.forEach((variable, index) => {
+  watch(variable, (item: any) => {
+    if (item !== 0) {
+      alerts[index + 2].value = false;
+    }
+  });
+});
+
+ArrayCountbotton.forEach((variable, index) => {
+  watch(variable, (item: any) => {
+    if (item !== null) {
+      alerts[index + 11].value = false;
+    }
+  });
+});
+
+watch(lengthevaluate_expenct_level, (newLength) => {
+  if (newLength === evaluate_expenct_level.value.length) {
+    alerts[0].value = false;
+  }
+});
+
+watch(lengthevaluate_ouptut, (newLength) => {
+  if (newLength === evaluate_ouptut.value.length) {
+    alerts[1].value = false;
+  }
+});
+
+watch(lengthconduct, (newLength) => {
+  if (newLength === 4) {
+    alerts[8].value = false;
+  }
+});
+
+watch(lengthmoral_level, (newLength) => {
+  if (newLength === 3) {
+    alerts[9].value = false;
+  }
+});
+
+watch(lengthdiscipline_level, (newLength) => {
+  if (newLength === 5) {
+    alerts[10].value = false;
+  }
+});
+
+onMounted(async () => {
+  await fecthFormdata(id.value);
+});
+</script>
+<template>
+  <div class="col-xs-12 col-sm-12 col-md-11">
+    <div class="toptitle text-white col-12 row items-center">
+      <q-btn
+        icon="mdi-arrow-left"
+        unelevated
+        round
+        dense
+        flat
+        color="primary"
+        class="q-mr-sm"
+        @click="router.go(-1)"
+      />
+      <div>การทดลองปฏิบัติหน้าที่ราชการ</div>
+    </div>
+  </div>
+  <q-card bordered>
+    <q-card-section class="q-pa-md">
+      <div class="row text-weight-medium">
+        <div class="col-12 text-grey-7 text-bold">
+          <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
+          ผู้ทดลองปฏิบัติหน้าที่ราชการ {{ person.name ? person.name : "-" }}
+        </div>
+        <div class="col-12">
+          <span class="text-grey-7 text-weight-bold q-pl-lg"
+            >ตำแหน่งในสายงาน</span
+          >
+          {{ person.positionName ? person.positionName : "-" }}
+        </div>
+        <div class="col-12">
+          <span class="text-grey-7 text-weight-bold q-pl-lg">ระดับตำแหน่ง</span>
+          {{ person.positionLevelName ? person.positionLevelName : "-" }}
+        </div>
+        <div class="col-12">
+          <span class="text-grey-7 text-weight-bold q-pl-lg">สังกัด</span>
+          {{ person.Oc ? person.Oc : "-" }}
+        </div>
+
+        <div class="col-12 text-weight-bold row items-center text-grey-7">
+          <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
+          การทดลองปฎิบัติหน้าที่ราชการ<span class="text-primary q-pr-sm">{{
+            "ครั้งที่ " + assign.round_no
+          }}</span>
+          ตั้งแต่วันที่
+          <span class="text-black q-px-sm">{{
+            date2Thai(assign.date_start)
+          }}</span>
+          ถึงวันที่
+          <span class="text-black q-px-sm">{{
+            date2Thai(assign.date_finish)
+          }}</span>
+        </div>
+
+        <div class="col-12 text-weight-bold row items-center text-grey-7">
+          <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
+          บันทึกผล<span class="text-primary q-pr-sm">{{
+            "ครั้งที่ " + round
+          }}</span>
+        </div>
+      </div>
+
+      <div class="row q-col-gutter-sm">
+        <div class="col-12 col-sm-6">
+          <datepicker
+            menu-class-name="modalfix"
+            v-model="start_date"
+            :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
+                hide-bottom-space
+                class="full-width datepicker col-3"
+                :model-value="start_date != null ? date2Thai(start_date) : 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 class="col-12 col-sm-6">
+          <datepicker
+            menu-class-name="modalfix"
+            v-model="date_finish"
+            :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
+                hide-bottom-space
+                dense
+                class="full-width datepicker col-3"
+                :model-value="
+                  date_finish != null ? date2Thai(date_finish) : null
+                "
+                :label="`${'ถึงวันที่'}`"
+                :rules="[(val) => !!val || `${'กรุณาเลือกวันที่'}`]"
+              >
+                <template v-slot:prepend>
+                  <q-icon
+                    name="event"
+                    class="cursor-pointer"
+                    style="color: var(--q-primary)"
+                  >
+                  </q-icon>
+                </template>
+              </q-input>
+            </template>
+          </datepicker>
+        </div>
+        <div class="col-12">
+          <q-separator size="3px" color="grey-2" />
+        </div>
+
+        <Criterion />
+
+        <div class="col-12">
+          <q-separator size="3px" color="grey-2" />
+        </div>
+        <div class="col-12 text-weight-medium">
+          <q-avatar class="bg-grey-2 q-mr-sm" size="28px">1</q-avatar>
+          ผลสัมฤทธิ์ของการทดลองปฏิบัติบัติหน้าที่ราชการ
+        </div>
+        <div class="col-12">
+          <div class="row q-col-gutter-sm">
+            <div class="col-12 text-weight-medium q-pl-lg">
+              <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
+              1.1 ความสำเร็จของงานที่ได้รับมอบหมาย
+            </div>
+            <div
+              class="col-xs-12 col-sm-11 col-md-10 offset-sm-1 offset-md-1 text-weight-medium text-dark"
+            >
+              ผลผลิตของงานที่คาดหวัง
+            </div>
+
+            <div class="col-xs-12 col-sm-10 col-md-10 offset-sm-1 offset-md-1">
+              <q-card
+                flat
+                bordered
+                :class="[' q-pa-sm bg-grey-1', getBordered(alerts[0].value)]"
+              >
+                <q-list dense v-for="(list, i) in list1_1" :key="i">
+                  <q-item dense tag="label" v-ripple>
+                    <q-item-section>
+                      <q-item-label>{{ list.output_desc }}</q-item-label>
+                    </q-item-section>
+                    <q-item-section side>
+                      <q-rating
+                        v-model="evaluate_expenct_level[i].level"
+                        :val="list.id"
+                        max="5"
+                        size="sm"
+                        color="grey"
+                        :color-selected="store.ratingColors"
+                        label="ระดับการประเมินพฤติกรรม"
+                      >
+                        <template v-slot:tip-1>
+                          <q-tooltip>ต่ำกว่าความคาดหวังมาก (1)</q-tooltip>
+                        </template>
+                        <template v-slot:tip-2>
+                          <q-tooltip
+                            >ต่ำกว่าความคาดหวังค่อนข้างมาก (2)</q-tooltip
+                          >
+                        </template>
+                        <template v-slot:tip-3>
+                          <q-tooltip>เป็นไปตามความคาดหวัง (3)</q-tooltip>
+                        </template>
+                        <template v-slot:tip-4>
+                          <q-tooltip
+                            >สูงว่าความคาดหวังค่อนข้างมาก (4)</q-tooltip
+                          >
+                        </template>
+                        <template v-slot:tip-5>
+                          <q-tooltip>สูงกว่าความคาดหวังมาก (5)</q-tooltip>
+                        </template>
+                      </q-rating>
+                    </q-item-section>
+                  </q-item>
+                  <q-separator class="q-my-xs" v-if="i + 1 < list1_1.length" />
+                </q-list>
+              </q-card>
+            </div>
+            <div
+              class="col-xs-12 col-sm-11 col-md-10 offset-sm-1 offset-md-1 text-weight-medium text-dark"
+            >
+              ผลผลิตของงานที่เกิดขึ้นจริง
+            </div>
+            <div
+              v-if="$q.screen.gt.xs"
+              class="col-xs-12 col-sm-10 col-md-10 offset-sm-1 offset-md-1"
+            >
+              <q-card
+                flat
+                bordered
+                :class="['q-pa-sm bg-grey-1', getBordered(alerts[0].value)]"
+              >
+                <q-list dense v-for="(list, i) in list1_2" :key="i">
+                  <q-item dense tag="label" v-ripple v-if="i < checkArray">
+                    <q-item-section>
+                      <!-- <q-item-label>{{ list.label }}</q-item-label> -->
+                      <q-input
+                        outlined
+                        dense
+                        v-model="evaluate_ouptut[i].text"
+                        lazy-rules
+                        autogrow
+                        label="ผลผลิตของงานที่เกิดขึ้นจริง"
+                        hide-bottom-space
+                        :row="1"
+                        :rules="evaluate_ouptutRules"
+                      />
+                    </q-item-section>
+                    <q-item-section side>
+                      <q-rating
+                        v-model="evaluate_ouptut[i].level"
+                        :val="list.id"
+                        max="5"
+                        size="sm"
+                        color="grey"
+                        :color-selected="store.ratingColors"
+                        label="ระดับการประเมินพฤติกรรม"
+                      >
+                        <template v-slot:tip-1>
+                          <q-tooltip>ต่ำกว่าความคาดหวังมาก (1)</q-tooltip>
+                        </template>
+                        <template v-slot:tip-2>
+                          <q-tooltip
+                            >ต่ำกว่าความคาดหวังค่อนข้างมาก (2)</q-tooltip
+                          >
+                        </template>
+                        <template v-slot:tip-3>
+                          <q-tooltip>เป็นไปตามความคาดหวัง (3)</q-tooltip>
+                        </template>
+                        <template v-slot:tip-4>
+                          <q-tooltip
+                            >สูงว่าความคาดหวังค่อนข้างมาก (4)</q-tooltip
+                          >
+                        </template>
+                        <template v-slot:tip-5>
+                          <q-tooltip>สูงกว่าความคาดหวังมาก (5)</q-tooltip>
+                        </template>
+                      </q-rating>
+                    </q-item-section>
+                  </q-item>
+                  <!-- <q-separator class="q-my-xs" v-if="i + 1 < list1_2.length" /> -->
+                </q-list>
+              </q-card>
+            </div>
+            <div
+              v-else
+              class="col-xs-12 col-sm-10 col-md-10 offset-sm-1 offset-md-1"
+            >
+              <q-card
+                flat
+                bordered
+                :class="['q-pa-sm bg-grey-1', getBordered(alerts[0].value)]"
+              >
+                <q-list dense v-for="(list, i) in list1_2" :key="i">
+                  <q-item dense tag="label" v-ripple v-if="i < checkArray">
+                    <q-item-section>
+                      <!-- <q-item-label>{{ list.label }}</q-item-label> -->
+                      <q-input
+                        outlined
+                        dense
+                        v-model="evaluate_ouptut[i].text"
+                        lazy-rules
+                        autogrow
+                        label="ผลผลิตของงานที่เกิดขึ้นจริง"
+                        hide-bottom-space
+                        :row="1"
+                        :rules="evaluate_ouptutRules"
+                      />
+                    </q-item-section>
+                  </q-item>
+                  <q-item dense tag="label" v-ripple v-if="i < checkArray">
+                    <q-item-section>
+                      <q-rating
+                        class="justify-center"
+                        v-model="evaluate_ouptut[i].level"
+                        :val="list.id"
+                        max="5"
+                        size="sm"
+                        color="grey"
+                        :color-selected="store.ratingColors"
+                        label="ระดับการประเมินพฤติกรรม"
+                      >
+                        <template v-slot:tip-1>
+                          <q-tooltip>ต่ำกว่าความคาดหวังมาก (1)</q-tooltip>
+                        </template>
+                        <template v-slot:tip-2>
+                          <q-tooltip
+                            >ต่ำกว่าความคาดหวังค่อนข้างมาก (2)</q-tooltip
+                          >
+                        </template>
+                        <template v-slot:tip-3>
+                          <q-tooltip>เป็นไปตามความคาดหวัง (3)</q-tooltip>
+                        </template>
+                        <template v-slot:tip-4>
+                          <q-tooltip
+                            >สูงว่าความคาดหวังค่อนข้างมาก (4)</q-tooltip
+                          >
+                        </template>
+                        <template v-slot:tip-5>
+                          <q-tooltip>สูงกว่าความคาดหวังมาก (5)</q-tooltip>
+                        </template>
+                      </q-rating>
+                    </q-item-section>
+                  </q-item>
+                  <!-- <q-separator class="q-my-xs" v-if="i + 1 < list1_2.length" /> -->
+                </q-list>
+              </q-card>
+            </div>
+
+            <div v-if="$q.screen.gt.xs" class="col-12 col-sm-11">
+              <q-card class="text-weight-medium">
+                <q-list dense>
+                  <q-item
+                    dense
+                    tag="label"
+                    v-ripple
+                    :class="getBordered(alerts[2].value)"
+                  >
+                    <q-item-section>
+                      <q-item-label>
+                        <q-icon
+                          name="mdi-label"
+                          color="grey-4"
+                          class="q-pr-sm"
+                        />
+                        1.2. ความรู้ความสามารถ</q-item-label
+                      >
+                    </q-item-section>
+                    <q-item-section side>
+                      <q-rating
+                        v-model="knowledge_level"
+                        max="5"
+                        size="sm"
+                        color="grey"
+                        :color-selected="store.ratingColors"
+                        label="ระดับการประเมินพฤติกรรม"
+                      >
+                        <template v-slot:tip-1>
+                          <q-tooltip>ต่ำกว่าความคาดหวังมาก (1)</q-tooltip>
+                        </template>
+                        <template v-slot:tip-2>
+                          <q-tooltip
+                            >ต่ำกว่าความคาดหวังค่อนข้างมาก (2)</q-tooltip
+                          >
+                        </template>
+                        <template v-slot:tip-3>
+                          <q-tooltip>เป็นไปตามความคาดหวัง (3)</q-tooltip>
+                        </template>
+                        <template v-slot:tip-4>
+                          <q-tooltip
+                            >สูงว่าความคาดหวังค่อนข้างมาก (4)</q-tooltip
+                          >
+                        </template>
+                        <template v-slot:tip-5>
+                          <q-tooltip>สูงกว่าความคาดหวังมาก (5)</q-tooltip>
+                        </template>
+                      </q-rating>
+                    </q-item-section>
+                  </q-item>
+                </q-list>
+              </q-card>
+            </div>
+            <div v-else class="col-12 col-sm-11">
+              <q-card
+                bordered
+                class="text-weight-medium"
+                :class="getBordered(alerts[2].value)"
+                style="border-radius: 20px"
+              >
+                <q-list dense>
+                  <q-item dense v-ripple>
+                    <q-item-section>
+                      <q-item-label class="text-start">
+                        1.2. ความรู้ความสามารถ</q-item-label
+                      >
+                    </q-item-section>
+                  </q-item>
+                  <q-separator />
+                  <q-item>
+                    <q-item-section>
+                      <q-rating
+                        class="justify-center"
+                        v-model="knowledge_level"
+                        max="5"
+                        size="sm"
+                        color="grey"
+                        :color-selected="store.ratingColors"
+                        label="ระดับการประเมินพฤติกรรม"
+                      >
+                        <template v-slot:tip-1>
+                          <q-tooltip>ต่ำกว่าความคาดหวังมาก (1)</q-tooltip>
+                        </template>
+                        <template v-slot:tip-2>
+                          <q-tooltip
+                            >ต่ำกว่าความคาดหวังค่อนข้างมาก (2)</q-tooltip
+                          >
+                        </template>
+                        <template v-slot:tip-3>
+                          <q-tooltip>เป็นไปตามความคาดหวัง (3)</q-tooltip>
+                        </template>
+                        <template v-slot:tip-4>
+                          <q-tooltip
+                            >สูงว่าความคาดหวังค่อนข้างมาก (4)</q-tooltip
+                          >
+                        </template>
+                        <template v-slot:tip-5>
+                          <q-tooltip>สูงกว่าความคาดหวังมาก (5)</q-tooltip>
+                        </template>
+                      </q-rating>
+                    </q-item-section>
+                  </q-item>
+                </q-list>
+              </q-card>
+            </div>
+
+            <div v-if="$q.screen.gt.xs" class="col-12 col-sm-11">
+              <q-card class="text-weight-medium">
+                <q-list dense>
+                  <q-item
+                    dense
+                    tag="label"
+                    v-ripple
+                    :class="getBordered(alerts[3].value)"
+                  >
+                    <q-item-section>
+                      <q-item-label>
+                        <q-icon
+                          name="mdi-label"
+                          color="grey-4"
+                          class="q-pr-sm"
+                        />
+                        1.3. ทักษะ</q-item-label
+                      >
+                    </q-item-section>
+                    <q-item-section side>
+                      <q-rating
+                        v-model="skill_level"
+                        max="5"
+                        size="sm"
+                        color="grey"
+                        :color-selected="store.ratingColors"
+                        label="ระดับการประเมินพฤติกรรม"
+                      >
+                        <template v-slot:tip-1>
+                          <q-tooltip>ต่ำกว่าความคาดหวังมาก (1)</q-tooltip>
+                        </template>
+                        <template v-slot:tip-2>
+                          <q-tooltip
+                            >ต่ำกว่าความคาดหวังค่อนข้างมาก (2)</q-tooltip
+                          >
+                        </template>
+                        <template v-slot:tip-3>
+                          <q-tooltip>เป็นไปตามความคาดหวัง (3)</q-tooltip>
+                        </template>
+                        <template v-slot:tip-4>
+                          <q-tooltip
+                            >สูงว่าความคาดหวังค่อนข้างมาก (4)</q-tooltip
+                          >
+                        </template>
+                        <template v-slot:tip-5>
+                          <q-tooltip>สูงกว่าความคาดหวังมาก (5)</q-tooltip>
+                        </template>
+                      </q-rating>
+                    </q-item-section>
+                  </q-item>
+                </q-list>
+              </q-card>
+            </div>
+            <div v-else class="col-12 col-sm-11">
+              <q-card
+                bordered
+                class="text-weight-medium"
+                :class="getBordered(alerts[3].value)"
+                style="border-radius: 20px"
+              >
+                <q-list dense>
+                  <q-item dense v-ripple>
+                    <q-item-section>
+                      <q-item-label class="text-start">
+                        1.3. ทักษะ</q-item-label
+                      >
+                    </q-item-section>
+                  </q-item>
+                  <q-separator />
+                  <q-item>
+                    <q-item-section>
+                      <q-rating
+                        class="justify-center"
+                        v-model="skill_level"
+                        max="5"
+                        size="sm"
+                        color="grey"
+                        :color-selected="store.ratingColors"
+                        label="ระดับการประเมินพฤติกรรม"
+                      >
+                        <template v-slot:tip-1>
+                          <q-tooltip>ต่ำกว่าความคาดหวังมาก (1)</q-tooltip>
+                        </template>
+                        <template v-slot:tip-2>
+                          <q-tooltip
+                            >ต่ำกว่าความคาดหวังค่อนข้างมาก (2)</q-tooltip
+                          >
+                        </template>
+                        <template v-slot:tip-3>
+                          <q-tooltip>เป็นไปตามความคาดหวัง (3)</q-tooltip>
+                        </template>
+                        <template v-slot:tip-4>
+                          <q-tooltip
+                            >สูงว่าความคาดหวังค่อนข้างมาก (4)</q-tooltip
+                          >
+                        </template>
+                        <template v-slot:tip-5>
+                          <q-tooltip>สูงกว่าความคาดหวังมาก (5)</q-tooltip>
+                        </template>
+                      </q-rating>
+                    </q-item-section>
+                  </q-item>
+                </q-list>
+              </q-card>
+            </div>
+
+            <div v-if="$q.screen.gt.xs" class="col-12 col-sm-11">
+              <q-card class="text-weight-medium">
+                <q-list dense>
+                  <q-item
+                    dense
+                    tag="label"
+                    v-ripple
+                    :class="getBordered(alerts[4].value)"
+                  >
+                    <q-item-section>
+                      <q-item-label>
+                        <q-icon
+                          name="mdi-label"
+                          color="grey-4"
+                          class="q-pr-sm"
+                        />
+                        1.4. สมมรถนะ</q-item-label
+                      >
+                    </q-item-section>
+                    <q-item-section side>
+                      <q-rating
+                        v-model="competency_level"
+                        max="5"
+                        size="sm"
+                        color="grey"
+                        :color-selected="store.ratingColors"
+                        label="ระดับการประเมินพฤติกรรม"
+                      >
+                        <template v-slot:tip-1>
+                          <q-tooltip>ต่ำกว่าความคาดหวังมาก (1)</q-tooltip>
+                        </template>
+                        <template v-slot:tip-2>
+                          <q-tooltip
+                            >ต่ำกว่าความคาดหวังค่อนข้างมาก (2)</q-tooltip
+                          >
+                        </template>
+                        <template v-slot:tip-3>
+                          <q-tooltip>เป็นไปตามความคาดหวัง (3)</q-tooltip>
+                        </template>
+                        <template v-slot:tip-4>
+                          <q-tooltip
+                            >สูงว่าความคาดหวังค่อนข้างมาก (4)</q-tooltip
+                          >
+                        </template>
+                        <template v-slot:tip-5>
+                          <q-tooltip>สูงกว่าความคาดหวังมาก (5)</q-tooltip>
+                        </template>
+                      </q-rating>
+                    </q-item-section>
+                  </q-item>
+                </q-list>
+              </q-card>
+            </div>
+            <div v-else class="col-12 col-sm-11">
+              <q-card
+                bordered
+                class="text-weight-medium"
+                :class="getBordered(alerts[4].value)"
+                style="border-radius: 20px"
+              >
+                <q-list dense>
+                  <q-item dense v-ripple>
+                    <q-item-section>
+                      <q-item-label class="text-start">
+                        1.4. สมมรถนะ</q-item-label
+                      >
+                    </q-item-section>
+                  </q-item>
+                  <q-separator />
+                  <q-item>
+                    <q-item-section>
+                      <q-rating
+                        class="justify-center"
+                        v-model="competency_level"
+                        max="5"
+                        size="sm"
+                        color="grey"
+                        :color-selected="store.ratingColors"
+                        label="ระดับการประเมินพฤติกรรม"
+                      >
+                        <template v-slot:tip-1>
+                          <q-tooltip>ต่ำกว่าความคาดหวังมาก (1)</q-tooltip>
+                        </template>
+                        <template v-slot:tip-2>
+                          <q-tooltip
+                            >ต่ำกว่าความคาดหวังค่อนข้างมาก (2)</q-tooltip
+                          >
+                        </template>
+                        <template v-slot:tip-3>
+                          <q-tooltip>เป็นไปตามความคาดหวัง (3)</q-tooltip>
+                        </template>
+                        <template v-slot:tip-4>
+                          <q-tooltip
+                            >สูงว่าความคาดหวังค่อนข้างมาก (4)</q-tooltip
+                          >
+                        </template>
+                        <template v-slot:tip-5>
+                          <q-tooltip>สูงกว่าความคาดหวังมาก (5)</q-tooltip>
+                        </template>
+                      </q-rating>
+                    </q-item-section>
+                  </q-item>
+                </q-list>
+              </q-card>
+            </div>
+
+            <div v-if="$q.screen.gt.xs" class="col-12 col-sm-11">
+              <q-card class="text-weight-medium">
+                <q-list dense>
+                  <q-item
+                    dense
+                    tag="label"
+                    v-ripple
+                    :class="getBordered(alerts[5].value)"
+                  >
+                    <q-item-section>
+                      <q-item-label>
+                        <q-icon
+                          name="mdi-label"
+                          color="grey-4"
+                          class="q-pr-sm"
+                        />
+                        1.5. ความสามารถในการเรียนรู้งาน</q-item-label
+                      >
+                    </q-item-section>
+                    <q-item-section side>
+                      <q-rating
+                        v-model="learn_level"
+                        max="5"
+                        size="sm"
+                        color="grey"
+                        :color-selected="store.ratingColors"
+                        label="ระดับการประเมินพฤติกรรม"
+                      >
+                        <template v-slot:tip-1>
+                          <q-tooltip>ต่ำกว่าความคาดหวังมาก (1)</q-tooltip>
+                        </template>
+                        <template v-slot:tip-2>
+                          <q-tooltip
+                            >ต่ำกว่าความคาดหวังค่อนข้างมาก (2)</q-tooltip
+                          >
+                        </template>
+                        <template v-slot:tip-3>
+                          <q-tooltip>เป็นไปตามความคาดหวัง (3)</q-tooltip>
+                        </template>
+                        <template v-slot:tip-4>
+                          <q-tooltip
+                            >สูงว่าความคาดหวังค่อนข้างมาก (4)</q-tooltip
+                          >
+                        </template>
+                        <template v-slot:tip-5>
+                          <q-tooltip>สูงกว่าความคาดหวังมาก (5)</q-tooltip>
+                        </template>
+                      </q-rating>
+                    </q-item-section>
+                  </q-item>
+                </q-list>
+              </q-card>
+            </div>
+            <div v-else class="col-12 col-sm-11">
+              <q-card
+                bordered
+                class="text-weight-medium"
+                :class="getBordered(alerts[5].value)"
+                style="border-radius: 20px"
+              >
+                <q-list dense>
+                  <q-item dense v-ripple>
+                    <q-item-section>
+                      <q-item-label class="text-start">
+                        1.5. ความสามารถในการเรียนรู้งาน</q-item-label
+                      >
+                    </q-item-section>
+                  </q-item>
+                  <q-separator />
+                  <q-item>
+                    <q-item-section>
+                      <q-rating
+                        class="justify-center"
+                        v-model="learn_level"
+                        max="5"
+                        size="sm"
+                        color="grey"
+                        :color-selected="store.ratingColors"
+                        label="ระดับการประเมินพฤติกรรม"
+                      >
+                        <template v-slot:tip-1>
+                          <q-tooltip>ต่ำกว่าความคาดหวังมาก (1)</q-tooltip>
+                        </template>
+                        <template v-slot:tip-2>
+                          <q-tooltip
+                            >ต่ำกว่าความคาดหวังค่อนข้างมาก (2)</q-tooltip
+                          >
+                        </template>
+                        <template v-slot:tip-3>
+                          <q-tooltip>เป็นไปตามความคาดหวัง (3)</q-tooltip>
+                        </template>
+                        <template v-slot:tip-4>
+                          <q-tooltip
+                            >สูงว่าความคาดหวังค่อนข้างมาก (4)</q-tooltip
+                          >
+                        </template>
+                        <template v-slot:tip-5>
+                          <q-tooltip>สูงกว่าความคาดหวังมาก (5)</q-tooltip>
+                        </template>
+                      </q-rating>
+                    </q-item-section>
+                  </q-item>
+                </q-list>
+              </q-card>
+            </div>
+
+            <div v-if="$q.screen.gt.xs" class="col-12 col-sm-11">
+              <q-card class="text-weight-medium">
+                <q-list dense>
+                  <q-item
+                    dense
+                    tag="label"
+                    v-ripple
+                    :class="getBordered(alerts[6].value)"
+                  >
+                    <q-item-section>
+                      <q-item-label>
+                        <q-icon
+                          name="mdi-label"
+                          color="grey-4"
+                          class="q-pr-sm"
+                        />
+                        1.6.
+                        ความสามารถในการปรับใช้ความรู้กับงานในหน้าที่</q-item-label
+                      >
+                    </q-item-section>
+                    <q-item-section side>
+                      <q-rating
+                        v-model="apply_level"
+                        max="5"
+                        size="sm"
+                        color="grey"
+                        :color-selected="store.ratingColors"
+                        label="ระดับการประเมินพฤติกรรม"
+                      >
+                        <template v-slot:tip-1>
+                          <q-tooltip>ต่ำกว่าความคาดหวังมาก (1)</q-tooltip>
+                        </template>
+                        <template v-slot:tip-2>
+                          <q-tooltip
+                            >ต่ำกว่าความคาดหวังค่อนข้างมาก (2)</q-tooltip
+                          >
+                        </template>
+                        <template v-slot:tip-3>
+                          <q-tooltip>เป็นไปตามความคาดหวัง (3)</q-tooltip>
+                        </template>
+                        <template v-slot:tip-4>
+                          <q-tooltip
+                            >สูงว่าความคาดหวังค่อนข้างมาก (4)</q-tooltip
+                          >
+                        </template>
+                        <template v-slot:tip-5>
+                          <q-tooltip>สูงกว่าความคาดหวังมาก (5)</q-tooltip>
+                        </template>
+                      </q-rating>
+                    </q-item-section>
+                  </q-item>
+                </q-list>
+              </q-card>
+            </div>
+            <div v-else class="col-12 col-sm-11">
+              <q-card
+                bordered
+                class="text-weight-medium"
+                :class="getBordered(alerts[6].value)"
+                style="border-radius: 20px"
+              >
+                <q-list dense>
+                  <q-item dense v-ripple>
+                    <q-item-section>
+                      <q-item-label class="text-start">
+                        1.6.
+                        ความสามารถในการปรับใช้ความรู้กับงานในหน้าที่</q-item-label
+                      >
+                    </q-item-section>
+                  </q-item>
+                  <q-separator />
+                  <q-item>
+                    <q-item-section>
+                      <q-rating
+                        class="justify-center"
+                        v-model="apply_level"
+                        max="5"
+                        size="sm"
+                        color="grey"
+                        :color-selected="store.ratingColors"
+                        label="ระดับการประเมินพฤติกรรม"
+                      >
+                        <template v-slot:tip-1>
+                          <q-tooltip>ต่ำกว่าความคาดหวังมาก (1)</q-tooltip>
+                        </template>
+                        <template v-slot:tip-2>
+                          <q-tooltip
+                            >ต่ำกว่าความคาดหวังค่อนข้างมาก (2)</q-tooltip
+                          >
+                        </template>
+                        <template v-slot:tip-3>
+                          <q-tooltip>เป็นไปตามความคาดหวัง (3)</q-tooltip>
+                        </template>
+                        <template v-slot:tip-4>
+                          <q-tooltip
+                            >สูงว่าความคาดหวังค่อนข้างมาก (4)</q-tooltip
+                          >
+                        </template>
+                        <template v-slot:tip-5>
+                          <q-tooltip>สูงกว่าความคาดหวังมาก (5)</q-tooltip>
+                        </template>
+                      </q-rating>
+                    </q-item-section>
+                  </q-item>
+                </q-list>
+              </q-card>
+            </div>
+
+            <div v-if="$q.screen.gt.xs" class="col-12 col-sm-11">
+              <q-card class="text-weight-medium">
+                <q-list dense>
+                  <q-item
+                    dense
+                    tag="label"
+                    v-ripple
+                    :class="getBordered(alerts[7].value)"
+                  >
+                    <q-item-section>
+                      <q-item-label>
+                        <q-icon
+                          name="mdi-label"
+                          color="grey-4"
+                          class="q-pr-sm"
+                        />
+                        1.7. ความสำเร็จของงานที่ได้รับมอบหมาย</q-item-label
+                      >
+                    </q-item-section>
+                    <q-item-section side>
+                      <q-rating
+                        v-model="success_level"
+                        max="5"
+                        size="sm"
+                        color="grey"
+                        :color-selected="store.ratingColors"
+                        label="ระดับการประเมินพฤติกรรม"
+                      >
+                        <template v-slot:tip-1>
+                          <q-tooltip>ต่ำกว่าความคาดหวังมาก (1)</q-tooltip>
+                        </template>
+                        <template v-slot:tip-2>
+                          <q-tooltip
+                            >ต่ำกว่าความคาดหวังค่อนข้างมาก (2)</q-tooltip
+                          >
+                        </template>
+                        <template v-slot:tip-3>
+                          <q-tooltip>เป็นไปตามความคาดหวัง (3)</q-tooltip>
+                        </template>
+                        <template v-slot:tip-4>
+                          <q-tooltip
+                            >สูงว่าความคาดหวังค่อนข้างมาก (4)</q-tooltip
+                          >
+                        </template>
+                        <template v-slot:tip-5>
+                          <q-tooltip>สูงกว่าความคาดหวังมาก (5)</q-tooltip>
+                        </template>
+                      </q-rating>
+                    </q-item-section>
+                  </q-item>
+                </q-list>
+              </q-card>
+            </div>
+            <div v-else class="col-12 col-sm-11">
+              <q-card
+                bordered
+                class="text-weight-medium"
+                :class="getBordered(alerts[7].value)"
+                style="border-radius: 20px"
+              >
+                <q-list dense>
+                  <q-item dense v-ripple>
+                    <q-item-section>
+                      <q-item-label class="text-start">
+                        1.7. ความสำเร็จของงานที่ได้รับมอบหมาย</q-item-label
+                      >
+                    </q-item-section>
+                  </q-item>
+                  <q-separator />
+                  <q-item>
+                    <q-item-section>
+                      <q-rating
+                        class="justify-center"
+                        v-model="success_level"
+                        max="5"
+                        size="sm"
+                        color="grey"
+                        :color-selected="store.ratingColors"
+                        label="ระดับการประเมินพฤติกรรม"
+                      >
+                        <template v-slot:tip-1>
+                          <q-tooltip>ต่ำกว่าความคาดหวังมาก (1)</q-tooltip>
+                        </template>
+                        <template v-slot:tip-2>
+                          <q-tooltip
+                            >ต่ำกว่าความคาดหวังค่อนข้างมาก (2)</q-tooltip
+                          >
+                        </template>
+                        <template v-slot:tip-3>
+                          <q-tooltip>เป็นไปตามความคาดหวัง (3)</q-tooltip>
+                        </template>
+                        <template v-slot:tip-4>
+                          <q-tooltip
+                            >สูงว่าความคาดหวังค่อนข้างมาก (4)</q-tooltip
+                          >
+                        </template>
+                        <template v-slot:tip-5>
+                          <q-tooltip>สูงกว่าความคาดหวังมาก (5)</q-tooltip>
+                        </template>
+                      </q-rating>
+                    </q-item-section>
+                  </q-item>
+                </q-list>
+              </q-card>
+            </div>
+
+            <div v-if="$q.screen.gt.xs" class="col-12 col-sm-11">
+              <q-card class="text-weight-medium">
+                <q-list dense>
+                  <q-item dense tag="label" v-ripple>
+                    <q-item-section>
+                      <q-item-label>
+                        <q-icon
+                          name="mdi-label"
+                          color="grey-4"
+                          class="q-pr-sm" />
+                        1.8 อื่นๆ<q-checkbox
+                          class="q-ml-sm"
+                          dense
+                          v-model="etc"
+                          @click="
+                            (achievement_other.text = ''),
+                              (achievement_other.level = 0)
+                          "
+                      /></q-item-label>
+                    </q-item-section>
+                  </q-item>
+                </q-list>
+              </q-card>
+              <div class="row">
+                <div
+                  v-if="etc"
+                  class="col-xs-12 col-sm-10 col-md-11 offset-sm-1 offset-md-1"
+                >
+                  <q-card flat bordered :class="'q-pa-sm bg-grey-1'">
+                    <q-list dense>
+                      <q-item dense tag="label" v-ripple>
+                        <q-item-section>
+                          <!-- <q-item-label>{{ list.label }}</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-section>
+                        <q-item-section side>
+                          <q-rating
+                            v-model="achievement_other.level"
+                            max="5"
+                            size="sm"
+                            color="grey"
+                            :color-selected="store.ratingColors"
+                            label="ระดับการประเมินพฤติกรรม"
+                          >
+                            <template v-slot:tip-1>
+                              <q-tooltip>ต่ำกว่าความคาดหวังมาก (1)</q-tooltip>
+                            </template>
+                            <template v-slot:tip-2>
+                              <q-tooltip
+                                >ต่ำกว่าความคาดหวังค่อนข้างมาก (2)</q-tooltip
+                              >
+                            </template>
+                            <template v-slot:tip-3>
+                              <q-tooltip>เป็นไปตามความคาดหวัง (3)</q-tooltip>
+                            </template>
+                            <template v-slot:tip-4>
+                              <q-tooltip
+                                >สูงว่าความคาดหวังค่อนข้างมาก (4)</q-tooltip
+                              >
+                            </template>
+                            <template v-slot:tip-5>
+                              <q-tooltip>สูงกว่าความคาดหวังมาก (5)</q-tooltip>
+                            </template>
+                          </q-rating>
+                        </q-item-section>
+                      </q-item>
+                      <!-- <q-separator class="q-my-xs" v-if="i + 1 < list1_2.length" /> -->
+                    </q-list>
+                  </q-card>
+                </div>
+              </div>
+            </div>
+
+            <div
+              v-else
+              class="col-xs-12 col-sm-10 col-md-10 offset-sm-1 offset-md-1"
+            >
+              <div class="q-pb-sm text-weight-medium text-dark">
+                <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
+                1.8 อื่นๆ<q-checkbox
+                  class="q-ml-sm"
+                  dense
+                  v-model="etc"
+                  @click="
+                    (achievement_other.text = ''), (achievement_other.level = 0)
+                  "
+                />
+              </div>
+              <q-card v-if="etc" flat bordered :class="'q-pa-sm bg-grey-1'">
+                <q-list dense>
+                  <q-item dense tag="label" v-ripple>
+                    <q-item-section>
+                      <!-- <q-item-label>{{ list.label }}</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-section>
+                  </q-item>
+                  <q-item dense tag="label" v-ripple>
+                    <q-item-section>
+                      <q-rating
+                        class="justify-center"
+                        v-model="achievement_other.level"
+                        max="5"
+                        size="sm"
+                        color="grey"
+                        :color-selected="store.ratingColors"
+                        label="ระดับการประเมินพฤติกรรม"
+                      >
+                        <template v-slot:tip-1>
+                          <q-tooltip>ต่ำกว่าความคาดหวังมาก (1)</q-tooltip>
+                        </template>
+                        <template v-slot:tip-2>
+                          <q-tooltip
+                            >ต่ำกว่าความคาดหวังค่อนข้างมาก (2)</q-tooltip
+                          >
+                        </template>
+                        <template v-slot:tip-3>
+                          <q-tooltip>เป็นไปตามความคาดหวัง (3)</q-tooltip>
+                        </template>
+                        <template v-slot:tip-4>
+                          <q-tooltip
+                            >สูงว่าความคาดหวังค่อนข้างมาก (4)</q-tooltip
+                          >
+                        </template>
+                        <template v-slot:tip-5>
+                          <q-tooltip>สูงกว่าความคาดหวังมาก (5)</q-tooltip>
+                        </template>
+                      </q-rating>
+                    </q-item-section>
+                  </q-item>
+                  <!-- <q-separator class="q-my-xs" v-if="i + 1 < list1_2.length" /> -->
+                </q-list>
+              </q-card>
+            </div>
+          </div>
+        </div>
+        <div class="col-12">
+          <div class="row justify-center q-mb-sm">
+            <div
+              class="col-12 text-top0 row items-center q-pl-md text-weight-medium text-dark"
+            >
+              <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
+              จุดเด่น (ไม่เกิน 5 บรรทัด)
+            </div>
+            <div class="col-xs-12 col-sm-11 col-md-10">
+              <q-input
+                outlined
+                dense
+                v-model="achievement_strength_desc"
+                lazy-rules
+                type="textarea"
+                label="กรอกจุดเด่น"
+                hide-bottom-space
+                :row="5"
+                :rules="achievement_strengthRules"
+                ref="achievement_strengthRef"
+              />
+            </div>
+          </div>
+          <div class="row justify-center q-mb-sm text-weight-medium text-dark">
+            <div class="col-12 text-top0 row items-center q-pl-md">
+              <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
+              สิ่งที่ควรปรับปรุง (ไม่เกิน 5 บรรทัด)
+            </div>
+            <q-input
+              outlined
+              dense
+              v-model="achievement_improve_desc"
+              class="col-xs-12 col-sm-11 col-md-10"
+              type="textarea"
+              hide-bottom-space
+              label="กรอกสิ่งที่ควรปรับปรุง"
+              :row="5"
+            />
+          </div>
+        </div>
+
+        <div class="col-12 text-weight-medium">
+          <q-avatar class="bg-grey-2 q-mr-sm" size="28px">2</q-avatar>
+          พฤติกรรมของผู้ทดลองปฏิบัติบัติหน้าที่ราชการ
+        </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.1 ความประพฤติ
+          </div>
+
+          <q-card
+            flat
+            bordered
+            :class="[
+              'col-xs-12 col-sm-11 col-md-10 offset-md-1 q-pa-sm bg-grey-1',
+              getBordered(alerts[8].value),
+            ]"
+          >
+            <q-list dense v-for="(list, i) in list2_1" :key="i">
+              <q-item dense tag="label" v-ripple>
+                <q-item-section>
+                  <q-item-label>{{ list.label }}</q-item-label>
+                </q-item-section>
+                <q-item-section side>
+                  <q-rating
+                    v-model="conduct_level[i]"
+                    :val="list.id"
+                    max="5"
+                    size="sm"
+                    color="grey"
+                    :color-selected="store.ratingColors"
+                    label="ระดับการประเมินพฤติกรรม"
+                  >
+                    <template v-slot:tip-1>
+                      <q-tooltip>ต่ำกว่าความคาดหวังมาก (1)</q-tooltip>
+                    </template>
+                    <template v-slot:tip-2>
+                      <q-tooltip>ต่ำกว่าความคาดหวังค่อนข้างมาก (2)</q-tooltip>
+                    </template>
+                    <template v-slot:tip-3>
+                      <q-tooltip>เป็นไปตามความคาดหวัง (3)</q-tooltip>
+                    </template>
+                    <template v-slot:tip-4>
+                      <q-tooltip>สูงว่าความคาดหวังค่อนข้างมาก (4)</q-tooltip>
+                    </template>
+                    <template v-slot:tip-5>
+                      <q-tooltip>สูงกว่าความคาดหวังมาก (5)</q-tooltip>
+                    </template>
+                  </q-rating>
+                </q-item-section>
+              </q-item>
+              <q-separator class="q-my-xs" v-if="i + 1 < list2_1.length" />
+            </q-list>
+          </q-card>
+        </div>
+
+        <div class="col-12 row">
+          <div class="col-12 text-top0 row items-center q-pl-lg">
+            <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
+            2.2 ความมีคุณธรรมจริยธรรม
+          </div>
+          <q-card
+            flat
+            bordered
+            :class="[
+              'col-xs-12 col-sm-11 col-md-10 offset-md-1 q-pa-sm bg-grey-1',
+              getBordered(alerts[9].value),
+            ]"
+          >
+            <q-list dense v-for="(list, i) in list2_2" :key="i">
+              <q-item dense tag="label" v-ripple>
+                <q-item-section>
+                  <q-item-label>{{ list.label }}</q-item-label>
+                </q-item-section>
+                <q-item-section side>
+                  <q-rating
+                    v-model="moral_level[i]"
+                    :val="list.id"
+                    max="5"
+                    size="sm"
+                    color="grey"
+                    :color-selected="store.ratingColors"
+                    label="ระดับการประเมินพฤติกรรม"
+                  >
+                    <template v-slot:tip-1>
+                      <q-tooltip>ต่ำกว่าความคาดหวังมาก (1)</q-tooltip>
+                    </template>
+                    <template v-slot:tip-2>
+                      <q-tooltip>ต่ำกว่าความคาดหวังค่อนข้างมาก (2)</q-tooltip>
+                    </template>
+                    <template v-slot:tip-3>
+                      <q-tooltip>เป็นไปตามความคาดหวัง (3)</q-tooltip>
+                    </template>
+                    <template v-slot:tip-4>
+                      <q-tooltip>สูงว่าความคาดหวังค่อนข้างมาก (4)</q-tooltip>
+                    </template>
+                    <template v-slot:tip-5>
+                      <q-tooltip>สูงกว่าความคาดหวังมาก (5)</q-tooltip>
+                    </template>
+                  </q-rating>
+                </q-item-section>
+              </q-item>
+              <q-separator class="q-my-xs" v-if="i + 1 < list2_2.length" />
+            </q-list>
+          </q-card>
+        </div>
+
+        <div class="col-12 row">
+          <div class="col-12 text-top0 row items-center q-pl-lg">
+            <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
+            2.3 การรักษาวินัย
+          </div>
+          <q-card
+            flat
+            bordered
+            :class="[
+              'col-xs-12 col-sm-11 col-md-10 offset-md-1 q-pa-sm bg-grey-1',
+              getBordered(alerts[10].value),
+            ]"
+          >
+            <q-list dense v-for="(list, i) in list2_3" :key="i">
+              <q-item dense tag="label" v-ripple>
+                <q-item-section>
+                  <q-item-label>{{ list.label }}</q-item-label>
+                </q-item-section>
+                <q-item-section side>
+                  <q-rating
+                    v-model="discipline_level[i]"
+                    :val="list.id"
+                    max="5"
+                    size="sm"
+                    color="grey"
+                    :color-selected="store.ratingColors"
+                    label="ระดับการประเมินพฤติกรรม"
+                  >
+                    <template v-slot:tip-1>
+                      <q-tooltip>ต่ำกว่าความคาดหวังมาก (1)</q-tooltip>
+                    </template>
+                    <template v-slot:tip-2>
+                      <q-tooltip>ต่ำกว่าความคาดหวังค่อนข้างมาก (2)</q-tooltip>
+                    </template>
+                    <template v-slot:tip-3>
+                      <q-tooltip>เป็นไปตามความคาดหวัง (3)</q-tooltip>
+                    </template>
+                    <template v-slot:tip-4>
+                      <q-tooltip>สูงว่าความคาดหวังค่อนข้างมาก (4)</q-tooltip>
+                    </template>
+                    <template v-slot:tip-5>
+                      <q-tooltip>สูงกว่าความคาดหวังมาก (5)</q-tooltip>
+                    </template>
+                  </q-rating>
+                </q-item-section>
+              </q-item>
+              <q-separator class="q-my-xs" v-if="i + 1 < list2_3.length" />
+            </q-list>
+          </q-card>
+        </div>
+
+        <div v-if="$q.screen.gt.xs" class="col-12 col-sm-11">
+          <q-card class="text-weight-medium">
+            <q-list dense>
+              <q-item dense tag="label" v-ripple>
+                <q-item-section>
+                  <q-item-label class="q-pl-sm">
+                    <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-item-label>
+                </q-item-section>
+              </q-item>
+            </q-list>
+          </q-card>
+          <div class="row">
+            <div
+              v-if="etc2"
+              class="col-xs-12 col-sm-10 col-md-11 offset-sm-1 offset-md-1"
+            >
+              <q-card flat bordered :class="'q-pa-sm bg-grey-1'">
+                <q-list dense>
+                  <q-item dense tag="label" v-ripple>
+                    <q-item-section>
+                      <!-- <q-item-label>{{ list.label }}</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-section>
+                    <q-item-section side>
+                      <q-rating
+                        v-model="behavio_orther.level"
+                        max="5"
+                        size="sm"
+                        color="grey"
+                        :color-selected="store.ratingColors"
+                        label="ระดับการประเมินพฤติกรรม"
+                      >
+                        <template v-slot:tip-1>
+                          <q-tooltip>ต่ำกว่าความคาดหวังมาก (1)</q-tooltip>
+                        </template>
+                        <template v-slot:tip-2>
+                          <q-tooltip
+                            >ต่ำกว่าความคาดหวังค่อนข้างมาก (2)</q-tooltip
+                          >
+                        </template>
+                        <template v-slot:tip-3>
+                          <q-tooltip>เป็นไปตามความคาดหวัง (3)</q-tooltip>
+                        </template>
+                        <template v-slot:tip-4>
+                          <q-tooltip
+                            >สูงว่าความคาดหวังค่อนข้างมาก (4)</q-tooltip
+                          >
+                        </template>
+                        <template v-slot:tip-5>
+                          <q-tooltip>สูงกว่าความคาดหวังมาก (5)</q-tooltip>
+                        </template>
+                      </q-rating>
+                    </q-item-section>
+                  </q-item>
+                  <!-- <q-separator class="q-my-xs" v-if="i + 1 < list1_2.length" /> -->
+                </q-list>
+              </q-card>
+            </div>
+          </div>
+        </div>
+
+        <div
+          v-else
+          class="col-xs-12 col-sm-10 col-md-10 offset-sm-1 offset-md-1"
+        >
+          <div class="q-pb-sm text-weight-medium text-dark">
+            <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
+            2.4 อื่นๆ<q-checkbox
+              class="q-ml-sm"
+              dense
+              v-model="etc2"
+              @click="(behavio_orther.text = ''), (behavio_orther.level = 0)"
+            />
+          </div>
+          <q-card v-if="etc2" flat bordered :class="'q-pa-sm bg-grey-1'">
+            <q-list dense>
+              <q-item dense tag="label" v-ripple>
+                <q-item-section>
+                  <!-- <q-item-label>{{ list.label }}</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-section>
+              </q-item>
+              <q-item dense tag="label" v-ripple>
+                <q-item-section>
+                  <q-rating
+                    class="justify-center"
+                    v-model="behavio_orther.level"
+                    max="5"
+                    size="sm"
+                    color="grey"
+                    :color-selected="store.ratingColors"
+                    label="ระดับการประเมินพฤติกรรม"
+                  >
+                    <template v-slot:tip-1>
+                      <q-tooltip>ต่ำกว่าความคาดหวังมาก (1)</q-tooltip>
+                    </template>
+                    <template v-slot:tip-2>
+                      <q-tooltip>ต่ำกว่าความคาดหวังค่อนข้างมาก (2)</q-tooltip>
+                    </template>
+                    <template v-slot:tip-3>
+                      <q-tooltip>เป็นไปตามความคาดหวัง (3)</q-tooltip>
+                    </template>
+                    <template v-slot:tip-4>
+                      <q-tooltip>สูงว่าความคาดหวังค่อนข้างมาก (4)</q-tooltip>
+                    </template>
+                    <template v-slot:tip-5>
+                      <q-tooltip>สูงกว่าความคาดหวังมาก (5)</q-tooltip>
+                    </template>
+                  </q-rating>
+                </q-item-section>
+              </q-item>
+              <!-- <q-separator class="q-my-xs" v-if="i + 1 < list1_2.length" /> -->
+            </q-list>
+          </q-card>
+        </div>
+
+        <div class="col-12">
+          <div class="row justify-center q-mb-sm">
+            <div
+              class="col-12 text-top0 row items-center q-pl-lg text-weight-medium text-dark"
+            >
+              <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
+              จุดเด่น (ไม่เกิน 5 บรรทัด)
+            </div>
+            <div class="col-xs-12 col-sm-11 col-md-10">
+              <q-input
+                outlined
+                dense
+                v-model="behavior_strength_desc"
+                class="col-xs-12 col-sm-11 col-md-10"
+                lazy-rules
+                type="textarea"
+                label="กรอกจุดเด่น"
+                hide-bottom-space
+                :row="5"
+                :rules="behavio_strengthRules"
+                ref="behavio_strengthRef"
+              />
+            </div>
+          </div>
+          <div class="row justify-center q-mb-sm text-weight-medium text-dark">
+            <div class="col-12 text-top0 row items-center q-pl-lg">
+              <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
+              สิ่งที่ควรปรับปรุง (ไม่เกิน 5 บรรทัด)
+            </div>
+            <q-input
+              outlined
+              dense
+              v-model="behavior_improve_desc"
+              class="col-xs-12 col-sm-11 col-md-10"
+              type="textarea"
+              hide-bottom-space
+              label="กรอกสิ่งที่ควรปรับปรุง"
+              :row="5"
+            />
+          </div>
+        </div>
+
+        <div class="col-12 text-weight-medium">
+          <q-avatar class="bg-grey-2 q-mr-sm" size="28px">3</q-avatar>
+          การพัฒนาผู้ทดลองปฏิบัติบัติหน้าที่ราชการ
+        </div>
+
+        <div class="col-12">
+          <q-card
+            flat
+            bordered
+            class="col-xs-12 col-sm-11 col-md-11 q-pa-sm bg-grey-1"
+          >
+            <q-list v-if="$q.screen.gt.xs" dense>
+              <q-item
+                dense
+                tag="label"
+                v-ripple
+                :class="getBordered(alerts[11].value)"
+              >
+                <q-item-section>
+                  <q-item-label>1. การปฐมนิเทศ</q-item-label>
+                </q-item-section>
+                <q-item-section side>
+                  <div class="row">
+                    <q-radio
+                      checked-icon="task_alt"
+                      unchecked-icon="panorama_fish_eye"
+                      v-model="orientation"
+                      val="1"
+                      label="ดำเนินการเเล้ว"
+                    />
+                    <q-radio
+                      checked-icon="task_alt"
+                      unchecked-icon="panorama_fish_eye"
+                      v-model="orientation"
+                      val="0"
+                      label=" ยังไม่ได้ดำเนินการ"
+                    />
+                  </div>
+                </q-item-section>
+              </q-item>
+
+              <q-separator class="q-my-xs" />
+
+              <q-item
+                dense
+                tag="label"
+                v-ripple
+                :class="getBordered(alerts[12].value)"
+              >
+                <q-item-section>
+                  <q-item-label>2. การเรียนรู้ด้วยตนเอง</q-item-label>
+                </q-item-section>
+
+                <q-item-section side>
+                  <div class="row">
+                    <q-radio
+                      checked-icon="task_alt"
+                      unchecked-icon="panorama_fish_eye"
+                      v-model="self_learning"
+                      val="1"
+                      label="ดำเนินการเเล้ว"
+                    />
+                    <q-radio
+                      checked-icon="task_alt"
+                      unchecked-icon="panorama_fish_eye"
+                      v-model="self_learning"
+                      val="0"
+                      label=" ยังไม่ได้ดำเนินการ"
+                    />
+                  </div>
+                </q-item-section>
+              </q-item>
+
+              <q-separator class="q-my-xs" />
+              <q-item
+                dense
+                tag="label"
+                v-ripple
+                :class="getBordered(alerts[13].value)"
+              >
+                <q-item-section>
+                  <q-item-label>3. การอบรมสัมนาร่วมกัน</q-item-label>
+                </q-item-section>
+                <q-item-section side>
+                  <div class="row">
+                    <q-radio
+                      checked-icon="task_alt"
+                      unchecked-icon="panorama_fish_eye"
+                      v-model="training_seminar"
+                      val="1"
+                      label="ดำเนินการเเล้ว"
+                    />
+                    <q-radio
+                      checked-icon="task_alt"
+                      unchecked-icon="panorama_fish_eye"
+                      v-model="training_seminar"
+                      val="0"
+                      label=" ยังไม่ได้ดำเนินการ"
+                    />
+                  </div>
+                </q-item-section>
+              </q-item>
+
+              <q-separator class="q-my-xs" />
+
+              <q-item dense tag="label" v-ripple>
+                <q-item-section>
+                  <q-item-label
+                    >4. การอบรมอื่น ๆ ตามที่หน่วยงานกำหนด (ถ้ามี)</q-item-label
+                  >
+                </q-item-section>
+                <q-item-section side>
+                  <div class="row">
+                    <q-radio
+                      checked-icon="task_alt"
+                      unchecked-icon="panorama_fish_eye"
+                      v-model="other_training"
+                      val="1"
+                      label="ดำเนินการเเล้ว"
+                    />
+                    <q-radio
+                      checked-icon="task_alt"
+                      unchecked-icon="panorama_fish_eye"
+                      v-model="other_training"
+                      val="0"
+                      label=" ยังไม่ได้ดำเนินการ"
+                    />
+                  </div>
+                </q-item-section>
+              </q-item>
+            </q-list>
+
+            <div v-else>
+              <q-list
+                dense
+                :class="[getBordered(alerts[11].value), 'item-custom']"
+              >
+                <q-item dense>
+                  <q-item-section>
+                    <q-item-label>1. การปฐมนิเทศ</q-item-label>
+                  </q-item-section>
+                </q-item>
+                <q-separator />
+                <q-item
+                  dense
+                  tag="label"
+                  style="
+                    padding-left: 0 !important;
+                    padding-right: 0 !important;
+                  "
+                >
+                  <q-item-section>
+                    <q-radio
+                      checked-icon="task_alt"
+                      unchecked-icon="panorama_fish_eye"
+                      v-model="orientation"
+                      val="1"
+                      label="ดำเนินการเเล้ว"
+                    />
+                  </q-item-section>
+                  <q-item-section>
+                    <q-radio
+                      checked-icon="task_alt"
+                      unchecked-icon="panorama_fish_eye"
+                      v-model="orientation"
+                      val="0"
+                      label=" ยังไม่ได้ดำเนินการ"
+                    />
+                  </q-item-section>
+                </q-item>
+              </q-list>
+              <q-separator class="q-my-xs" />
+              <q-list dense :class="[getBordered(alerts[11].value), 'item-custom']">
+                <q-item dense>
+                  <q-item-section>
+                    <q-item-label>2. การเรียนรู้ด้วยตนเอง</q-item-label>
+                  </q-item-section>
+                </q-item>
+                <q-separator />
+                <q-item
+                  dense
+                  tag="label"
+                  style="
+                    padding-left: 0 !important;
+                    padding-right: 0 !important;
+                  "
+                >
+                  <q-item-section>
+                    <q-radio
+                      checked-icon="task_alt"
+                      unchecked-icon="panorama_fish_eye"
+                      v-model="self_learning"
+                      val="1"
+                      label="ดำเนินการเเล้ว"
+                    />
+                  </q-item-section>
+                  <q-item-section>
+                    <q-radio
+                      checked-icon="task_alt"
+                      unchecked-icon="panorama_fish_eye"
+                      v-model="self_learning"
+                      val="0"
+                      label=" ยังไม่ได้ดำเนินการ"
+                    />
+                  </q-item-section>
+                </q-item>
+              </q-list>
+              <q-separator class="q-my-xs" />
+              <q-list dense :class="[getBordered(alerts[11].value), 'item-custom']">
+                <q-item dense>
+                  <q-item-section>
+                    <q-item-label>3. การอบรมสัมนาร่วมกัน</q-item-label>
+                  </q-item-section>
+                </q-item>
+                <q-separator />
+                <q-item
+                  dense
+                  tag="label"
+                  style="
+                    padding-left: 0 !important;
+                    padding-right: 0 !important;
+                  "
+                >
+                  <q-item-section>
+                    <q-radio
+                      checked-icon="task_alt"
+                      unchecked-icon="panorama_fish_eye"
+                      v-model="training_seminar"
+                      val="1"
+                      label="ดำเนินการเเล้ว"
+                    />
+                  </q-item-section>
+                  <q-item-section>
+                    <q-radio
+                      checked-icon="task_alt"
+                      unchecked-icon="panorama_fish_eye"
+                      v-model="training_seminar"
+                      val="0"
+                      label=" ยังไม่ได้ดำเนินการ"
+                    />
+                  </q-item-section>
+                </q-item>
+              </q-list>
+              <q-separator class="q-my-xs" />
+              <q-list dense :class="'item-custom'">
+                <q-item dense>
+                  <q-item-section>
+                    <q-item-label
+                      >4. การอบรมอื่น ๆ ตามที่หน่วยงานกำหนด
+                      (ถ้ามี)</q-item-label
+                    >
+                  </q-item-section>
+                </q-item>
+                <q-separator />
+                <q-item
+                  dense
+                  tag="label"
+                  style="
+                    padding-left: 0 !important;
+                    padding-right: 0 !important;
+                  "
+                >
+                  <q-item-section>
+                    <q-radio
+                      checked-icon="task_alt"
+                      unchecked-icon="panorama_fish_eye"
+                      v-model="other_training"
+                      val="1"
+                      label="ดำเนินการเเล้ว"
+                    />
+                  </q-item-section>
+                  <q-item-section>
+                    <q-radio
+                      checked-icon="task_alt"
+                      unchecked-icon="panorama_fish_eye"
+                      v-model="other_training"
+                      val="0"
+                      label=" ยังไม่ได้ดำเนินการ"
+                    />
+                  </q-item-section>
+                </q-item>
+              </q-list>
+            </div>
+          </q-card>
+        </div>
+
+        <div class="col-12">
+          <div class="row justify-center">
+            <div class="col-xs-12 col-sm-11">
+              <div class="col-12 text-weight-medium items-center">
+                ผู้บังคับบัญชา/ผู้มอบหมายงาน
+              </div>
+              <div class="col-12 row q-col-gutter-sm">
+                <q-select
+                  class="col-xs-12 col-sm-8"
+                  dense
+                  v-model="Autherise"
+                  outlined
+                  :options="option"
+                  label="ผู้บังคับบัญชา"
+                  option-label="label"
+                  disable
+                />
+                <div class="col-xs-12 col-sm-4">
+                  <datepicker
+                    menu-class-name="modalfix"
+                    v-model="dateAutherise"
+                    :locale="'th'"
+                    autoApply
+                    borderless
+                    :enableTimePicker="false"
+                    week-start="0"
+                  >
+                    <template #year="{ year }">
+                      {{ year + 543 }}
+                    </template>
+                    <template #year-overlay-value="{ value }">
+                      {{ parseInt(value + 543) }}
+                    </template>
+                    <template #trigger>
+                      <q-input
+                        outlined
+                        dense
+                        hide-bottom-space
+                        class="full-width datepicker col-3"
+                        :model-value="
+                          dateAutherise != null
+                            ? date2Thai(dateAutherise)
+                            : null
+                        "
+                        :label="`${'ลงวันที่'}`"
+                        :rules="[(val) => !!val || `${'กรุณาเลือกลงวันที่'}`]"
+                      >
+                        <template v-slot:prepend>
+                          <q-icon
+                            name="event"
+                            class="cursor-pointer"
+                            style="color: var(--q-primary)"
+                          >
+                          </q-icon>
+                        </template>
+                      </q-input>
+                    </template>
+                  </datepicker>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </q-card-section>
+    <q-card-actions align="right" class="bg-white text-teal">
+      <q-btn label="บันทึก" color="secondary" @click="savaForm" />
+    </q-card-actions>
+  </q-card>
+</template>
+<style scoped>
+.border_custom {
+  border: 2px solid #c10015;
+  border-radius: 5px;
+}
+.item-custom {
+  border: 1px #ededed solid;
+  border-radius: 5px;
+  background-color: #fff;
+}
+</style>
diff --git a/src/modules/11_probation/component/addPage/02_addevaluacommander.vue b/src/modules/11_probation/component/addPage/02_addevaluacommander.vue
new file mode 100644
index 0000000..9c7149b
--- /dev/null
+++ b/src/modules/11_probation/component/addPage/02_addevaluacommander.vue
@@ -0,0 +1,1776 @@
+<script setup lang="ts">
+import { ref, onMounted, watch, computed } from "vue";
+import { useQuasar } from "quasar";
+import { useProbationStore } from "@/modules/11_probation/store/probation";
+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/11_probation/component/Criterion.vue";
+
+const $q = useQuasar();
+const route = useRoute();
+const router = useRouter();
+const probationStore = useProbationStore();
+const mixin = useCounterMixin();
+const {
+  date2Thai,
+  success,
+  notifyError,
+  dateToISO,
+  messageError,
+  dialogConfirm,
+  dialogMessageNotify,
+} = mixin;
+
+const { ratingColors } = probationStore;
+const id = ref<string>(route.params.id as string);
+const profileId = ref<string>(route.params.profileId as string);
+
+const person = ref<any>([]);
+const assign = ref<any>([]);
+const evaluate_no = ref<string>("");
+const start_date = ref<Date>(new Date());
+const date_finish = ref<Date>(new Date());
+const round = ref<number>();
+const list1_1 = ref<any>([]);
+const list1_2 = [{ id: "", label: "" }];
+
+const list2_1 = probationStore.behavior_no1;
+const list2_2 = probationStore.behavior_no2;
+const list2_3 = probationStore.behavior_no3;
+
+const option = ref<any>([]);
+const achievement_strengthRef = ref<any>(null);
+const achievement_inproveRef = ref<any>(null);
+const behavio_strengthRef = ref<any>(null);
+const behavio_inproveRef = ref<any>(null);
+const dateToday = ref<Date>(new Date("10-10-2023"));
+const dateEnd = ref<Date>(new Date("12-10-2023"));
+const period = ref<number>(1);
+
+// part 1
+const evaluate_expenct_level = ref<any>([]);
+
+const evaluate_ouptut = ref<any>([]);
+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 achievement_strength_desc = ref<string>("");
+const achievement_improve_desc = ref<string>("");
+// part 2
+const conduct_level = ref<any>([]);
+const moral_level = ref<any>([]);
+const discipline_level = ref<any>([]);
+const etc2 = ref<any>(false); // checkBox 2.4
+const behavio_orther = ref<any>({ text: "", level: 0 });
+const behavior_strength_desc = ref<string>("");
+const behavior_improve_desc = ref<string>("");
+// part 3
+const orientation = ref<any>(null);
+const self_learning = ref<any>(null);
+const training_seminar = ref<any>(null);
+const other_training = ref<any>(null);
+// footer
+const Autherise = ref<any>(null);
+const dateAutherise = ref<any>(new Date());
+const checkArray = ref<number>(0);
+
+const alerts = Array(20)
+  .fill(null)
+  .map(() => ref<boolean>(false));
+
+//rules
+const evaluate_ouptutRules = [
+  (val: any) => (val && val.length > 0) || "กรุณากรอกเหตุผลที่เกิดขึ้น",
+];
+
+const achievement_strengthRules = [
+  (val: any) => (val && val.length > 0) || "กรุณากรอกข้อมูลจุดเด่น",
+];
+
+const achievement_inproveRules = [
+  (val: any) => (val && val.length > 0) || "กรุณากรอกข้อมูลสิ่งที่ควรปรับปรุง",
+];
+
+const behavio_strengthRules = [
+  (val: any) => (val && val.length > 0) || "กรุณากรอกข้อมูลจุดเด่น",
+];
+
+const behavio_inproveRules = [
+  (val: any) => (val && val.length > 0) || "กรุณากรอกข้อมูลสิ่งที่ควรปรับปรุง",
+];
+const lengthconduct = computed(() => {
+  return conduct_level.value.filter((item: number) => item !== 0).length;
+});
+const lengthmoral_level = computed(() => {
+  return moral_level.value.filter((item: number) => item !== 0).length;
+});
+const lengthdiscipline_level = computed(() => {
+  return discipline_level.value.filter((item: number) => item !== 0).length;
+});
+const lengthevaluate_expenct_level = computed(() => {
+  return evaluate_expenct_level.value.filter(
+    (item: any) => item.level !== undefined && item.level !== 0
+  ).length;
+});
+const lengthevaluate_ouptut = computed(() => {
+  return evaluate_ouptut.value.filter(
+    (item: any) => item.level !== undefined && item.level !== 0
+  ).length;
+});
+const variablesToWatch = [
+  knowledge_level,
+  skill_level,
+  competency_level,
+  learn_level,
+  apply_level,
+  success_level,
+];
+const ArrayCountbotton = [orientation, self_learning, training_seminar];
+
+/** เช็คข้อมูลก่อน save */
+function savaForm() {
+  achievement_strengthRef.value.validate();
+  behavio_strengthRef.value.validate();
+
+  let hasError = false;
+  if (
+    lengthevaluate_expenct_level.value !==
+      evaluate_expenct_level.value.length ||
+    lengthevaluate_ouptut.value !== evaluate_ouptut.value.length ||
+    knowledge_level.value === 0 ||
+    skill_level.value === 0 ||
+    competency_level.value === 0 ||
+    learn_level.value === 0 ||
+    apply_level.value === 0 ||
+    success_level.value === 0 ||
+    achievement_strength_desc.value === "" ||
+    lengthconduct.value !== 4 ||
+    lengthmoral_level.value !== 3 ||
+    lengthdiscipline_level.value !== 5 ||
+    behavior_strength_desc.value === "" ||
+    orientation.value === null ||
+    self_learning.value === null ||
+    training_seminar.value === null
+  ) {
+    hasError = true;
+  } else if (
+    (etc.value == true &&
+      (achievement_other.value.text === undefined ||
+        achievement_other.value.text == "" ||
+        achievement_other.value.level == undefined ||
+        achievement_other.value.level === 0)) ||
+    (etc2.value == true &&
+      (behavio_orther.value.text === "" ||
+        behavio_orther.value.text == undefined ||
+        behavio_orther.value.level === undefined ||
+        behavio_orther.value.level == 0))
+  ) {
+    hasError = true;
+  }
+
+  if (hasError === true) {
+    variablesToWatch.forEach((item, index) => {
+      if (item.value === 0) {
+        alerts[index + 2].value = true;
+      }
+    });
+    if (
+      lengthevaluate_expenct_level.value !== evaluate_expenct_level.value.length
+    ) {
+      alerts[0].value = true;
+    }
+    if (lengthevaluate_ouptut.value !== evaluate_ouptut.value.length) {
+      alerts[1].value = true;
+    }
+    if (lengthconduct.value !== 4) {
+      alerts[8].value = true;
+    }
+    if (lengthmoral_level.value !== 3) {
+      alerts[9].value = true;
+    }
+    if (lengthdiscipline_level.value !== 5) {
+      alerts[10].value = true;
+    }
+    ArrayCountbotton.forEach((item, index) => {
+      if (item.value === null) {
+        alerts[index + 11].value = true;
+      }
+    });
+    dialogMessageNotify($q, "กรุณากรอกข้อมูลให้ครบ");
+  } else {
+    putformData();
+  }
+}
+
+/**
+ * get data เก็ฐในตัวแปร
+ * @param id person id
+ */
+async function fecthFormdata(id: string) {
+  await http
+    .get(config.API.formevaluateRecordCommander(id))
+    .then((res: any) => {
+      evaluate_no.value = res.data.data.evaluate_no;
+      start_date.value = res.data.data.start_date;
+      date_finish.value = res.data.data.end_date;
+      round.value = res.data.data.evaluate_no;
+
+      person.value = res.data.data.person;
+      assign.value = res.data.data.assign;
+      option.value.push(res.data.data.director);
+      Autherise.value = res.data.data.director;
+
+      list1_1.value = res.data.data.assign_output;
+      res.data.data.assign_output.forEach((e: any) => {
+        list1_2.push({ id: "", label: "" });
+      });
+      evaluate_expenct_level.value = res.data.data.assign_output.map(
+        (e: any) => ({
+          id: e.id,
+          labal: e.output_desc,
+        })
+      );
+      evaluate_ouptut.value = res.data.data.assign_output.map((e: any) => ({
+        id: e.id,
+        text: "",
+      }));
+      checkArray.value = list1_1.value.length;
+    })
+    .catch((e: any) => {});
+}
+
+/** ยืนยัน save ข้อมูล */
+function putformData() {
+  const data = {
+    evaluate_no: evaluate_no.value,
+    start_date: start_date.value,
+    date_finish: date_finish.value,
+    evaluate_expenct_level: evaluate_expenct_level.value,
+    evaluate_ouptut: evaluate_ouptut.value,
+    knowledge_level: knowledge_level.value,
+    skill_level: skill_level.value,
+    competency_level: competency_level.value,
+    learn_level: learn_level.value,
+    apply_level: apply_level.value,
+    success_level: success_level.value,
+    achievement_other: achievement_other.value,
+    achievement_strength_desc: achievement_strength_desc.value,
+    achievement_improve_desc: achievement_improve_desc.value,
+    conduct1_level: conduct_level.value[0],
+    conduct2_level: conduct_level.value[1],
+    conduct3_level: conduct_level.value[2],
+    conduct4_level: conduct_level.value[3],
+    moral1_level: moral_level.value[0],
+    moral2_level: moral_level.value[1],
+    moral3_level: moral_level.value[2],
+    discipline1_level: discipline_level.value[0],
+    discipline2_level: discipline_level.value[1],
+    discipline3_level: discipline_level.value[2],
+    discipline4_level: discipline_level.value[3],
+    discipline5_level: discipline_level.value[4],
+    behavio_orther: behavio_orther.value,
+    behavior_strength_desc: behavior_strength_desc.value,
+    behavior_improve_desc: behavior_improve_desc.value,
+    orientation: Number(orientation.value),
+    self_learning: Number(self_learning.value),
+    training_seminar: Number(training_seminar.value),
+    other_training: Number(other_training.value),
+    assessor_dated: dateToISO(dateAutherise.value),
+  };
+  dialogConfirm($q, async () => await saveformdata(data));
+}
+
+/** ฟังชั่น save
+ * @param data ข้อมูลที่ save
+ */
+async function saveformdata(data: any) {
+  await http
+    .post(config.API.formevaluateCommander(id.value), data)
+    .then(() => {
+      success($q, "บันทึกสำเร็จ");
+      router.push(`/probation/detail/${profileId.value}/${id.value}`);
+    })
+    .catch((e: any) => {
+      messageError($q, e);
+    });
+}
+
+variablesToWatch.forEach((variable, index) => {
+  watch(variable, (item: any) => {
+    if (item !== 0) {
+      alerts[index + 2].value = false;
+    }
+  });
+});
+
+ArrayCountbotton.forEach((variable, index) => {
+  watch(variable, (item: any) => {
+    if (item !== null) {
+      alerts[index + 11].value = false;
+    }
+  });
+});
+
+watch(lengthevaluate_expenct_level, (newLength) => {
+  if (newLength === evaluate_expenct_level.value.length) {
+    alerts[0].value = false;
+  }
+});
+
+watch(lengthevaluate_ouptut, (newLength) => {
+  if (newLength === evaluate_ouptut.value.length) {
+    alerts[1].value = false;
+  }
+});
+
+watch(lengthconduct, (newLength) => {
+  if (newLength === 4) {
+    alerts[8].value = false;
+  }
+});
+
+watch(lengthmoral_level, (newLength) => {
+  if (newLength === 3) {
+    alerts[9].value = false;
+  }
+});
+
+watch(lengthdiscipline_level, (newLength) => {
+  if (newLength === 5) {
+    alerts[10].value = false;
+  }
+});
+
+/**
+ * ฟังชั่น class
+ * @param i true/false
+ */
+function getBordered(i: boolean) {
+  return {
+    border_custom: i,
+  };
+}
+
+onMounted(async () => {
+  await fecthFormdata(id.value);
+});
+</script>
+
+<template>
+  <div class="col-xs-12 col-sm-12 col-md-11">
+    <div class="toptitle text-white col-12 row items-center">
+      <q-btn
+        icon="mdi-arrow-left"
+        unelevated
+        round
+        dense
+        flat
+        color="primary"
+        class="q-mr-sm"
+        @click="router.go(-1)"
+      />
+      <div>การทดลองปฏิบัติหน้าที่ราชการ</div>
+    </div>
+  </div>
+  <q-card bordered>
+    <q-card-section class="q-pa-md">
+      <div class="row q-col-gutter-sm">
+        <div class="col-12">
+          <div class="col-12 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.positionName }}
+            </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>
+
+          <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">{{
+              "ครั้งที่ " + assign.round_no
+            }}</span>
+            ตั้งแต่วันที่
+            <span class="text-black q-px-sm">{{
+              date2Thai(assign.date_start)
+            }}</span>
+            ถึงวันที่
+            <span class="text-black q-px-sm">{{
+              date2Thai(assign.date_finish)
+            }}</span>
+          </div>
+
+          <div class="col-12 text-top0 row items-center">
+            <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
+            บันทึกผล<span class="text-primary q-pr-sm">{{
+              "ครั้งที่ " + round
+            }}</span>
+          </div>
+
+          <div class="col-12 text-top0 row items-top q-col-gutter-sm">
+            <div class="col-12 col-sm-6">
+              <datepicker
+                menu-class-name="modalfix"
+                v-model="start_date"
+                :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
+                    hide-bottom-space
+                    class="full-width datepicker col-3"
+                    :model-value="
+                      start_date != null ? date2Thai(start_date) : 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 class="col-12 col-sm-6">
+              <datepicker
+                menu-class-name="modalfix"
+                v-model="date_finish"
+                :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
+                    hide-bottom-space
+                    class="full-width datepicker col-3"
+                    :model-value="
+                      date_finish != null ? date2Thai(date_finish) : null
+                    "
+                    :label="`${'ถึงวันที่'}`"
+                    :rules="[(val) => !!val || `${'กรุณาเลือกวันที่'}`]"
+                  >
+                    <template v-slot:prepend>
+                      <q-icon
+                        name="event"
+                        class="cursor-pointer"
+                        style="color: var(--q-primary)"
+                      >
+                      </q-icon>
+                    </template>
+                  </q-input>
+                </template>
+              </datepicker>
+            </div>
+          </div>
+
+          <div class="col-12">
+            <q-separator size="3px" color="grey-2" />
+          </div>
+          <Criterion />
+          <div class="col-12 q-pt-md">
+            <q-separator size="3px" color="grey-2" />
+          </div>
+        </div>
+
+        <div class="col-12">
+          <div class="row justify-center">
+            <div class="col-12 text-top0 items-center">
+              <q-avatar class="bg-grey-2 q-mr-sm" size="28px">1</q-avatar>
+              ผลสัมฤทธิ์ของการทดลองปฏิบัติบัติหน้าที่ราชการ
+            </div>
+            <div class="col-12 text-top0 row items-center q-pl-lg">
+              <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
+              1.1 ความสำเร็จของงานที่ได้รับมอบหมาย
+            </div>
+            <div class="col-xs-12 col-sm-11 col-md-11 text-top2">
+              ผลผลิตของงานที่คาดหวัง
+            </div>
+            <q-card
+              flat
+              bordered
+              :class="[
+                'col-xs-12 col-sm-11 col-md-11 q-pa-sm bg-grey-1',
+                getBordered(alerts[0].value),
+              ]"
+            >
+              <q-list dense v-for="(list, i) in list1_1" :key="i">
+                <q-item dense tag="label" v-ripple>
+                  <q-item-section>
+                    <q-item-label>{{ list.output_desc }}</q-item-label>
+                  </q-item-section>
+                  <q-item-section side>
+                    <q-rating
+                      v-model="evaluate_expenct_level[i].level"
+                      :val="list.id"
+                      max="5"
+                      size="sm"
+                      color="grey"
+                      :color-selected="ratingColors"
+                      label="ระดับการประเมินพฤติกรรม"
+                    >
+                      <template v-slot:tip-1>
+                        <q-tooltip>ต่ำกว่าความคาดหวังมาก (1)</q-tooltip>
+                      </template>
+                      <template v-slot:tip-2>
+                        <q-tooltip>ต่ำกว่าความคาดหวังค่อนข้างมาก (2)</q-tooltip>
+                      </template>
+                      <template v-slot:tip-3>
+                        <q-tooltip>เป็นไปตามความคาดหวัง (3)</q-tooltip>
+                      </template>
+                      <template v-slot:tip-4>
+                        <q-tooltip>สูงว่าความคาดหวังค่อนข้างมาก (4)</q-tooltip>
+                      </template>
+                      <template v-slot:tip-5>
+                        <q-tooltip>สูงกว่าความคาดหวังมาก (5)</q-tooltip>
+                      </template>
+                    </q-rating>
+                  </q-item-section>
+                </q-item>
+                <q-separator class="q-my-xs" v-if="i + 1 < list1_1.length" />
+              </q-list>
+            </q-card>
+          </div>
+        </div>
+
+        <div class="col-12">
+          <div class="row justify-center">
+            <div class="col-xs-12 col-sm-11 col-md-11 text-top2">
+              ผลผลิตของงานที่เกิดขึ้นจริง
+            </div>
+            <q-card
+              v-if="$q.screen.gt.xs"
+              flat
+              bordered
+              :class="[
+                'col-xs-12 col-sm-11 col-md-11 q-pa-sm bg-grey-1',
+                getBordered(alerts[1].value),
+              ]"
+            >
+              <q-list dense v-for="(list, i) in list1_2" :key="i">
+                <q-item dense tag="label" v-ripple v-if="i < checkArray">
+                  <q-item-section>
+                    <q-input
+                      outlined
+                      dense
+                      v-model="evaluate_ouptut[i].text"
+                      lazy-rules
+                      autogrow
+                      label="ผลผลิตของงานที่เกิดขึ้นจริง"
+                      hide-bottom-space
+                      :row="1"
+                      :rules="evaluate_ouptutRules"
+                    />
+                  </q-item-section>
+                  <q-item-section side>
+                    <q-rating
+                      v-model="evaluate_ouptut[i].level"
+                      :val="list.id"
+                      max="5"
+                      size="sm"
+                      color="grey"
+                      :color-selected="ratingColors"
+                      label="ระดับการประเมินพฤติกรรม"
+                    >
+                      <template v-slot:tip-1>
+                        <q-tooltip>ต่ำกว่าความคาดหวังมาก (1)</q-tooltip>
+                      </template>
+                      <template v-slot:tip-2>
+                        <q-tooltip>ต่ำกว่าความคาดหวังค่อนข้างมาก (2)</q-tooltip>
+                      </template>
+                      <template v-slot:tip-3>
+                        <q-tooltip>เป็นไปตามความคาดหวัง (3)</q-tooltip>
+                      </template>
+                      <template v-slot:tip-4>
+                        <q-tooltip>สูงว่าความคาดหวังค่อนข้างมาก (4)</q-tooltip>
+                      </template>
+                      <template v-slot:tip-5>
+                        <q-tooltip>สูงกว่าความคาดหวังมาก (5)</q-tooltip>
+                      </template>
+                    </q-rating>
+                  </q-item-section>
+                </q-item>
+              </q-list>
+            </q-card>
+            <q-card
+              v-else
+              flat
+              bordered
+              :class="[
+                'col-12 q-pa-sm bg-grey-1',
+                getBordered(alerts[1].value),
+              ]"
+            >
+              <q-list dense v-for="(list, i) in list1_2" :key="i">
+                <q-item
+                  dense
+                  tag="label"
+                  v-ripple
+                  v-if="i < checkArray"
+                  style="padding: 0"
+                >
+                  <q-item-section>
+                    <q-item-label>
+                      <q-input
+                        outlined
+                        dense
+                        v-model="evaluate_ouptut[i].text"
+                        lazy-rules
+                        autogrow
+                        label="ผลผลิตของงานที่เกิดขึ้นจริง"
+                        hide-bottom-space
+                        :row="1"
+                        :rules="evaluate_ouptutRules"
+                      />
+                    </q-item-label>
+                    <q-item-label class="text-center q-pb-sm">
+                      <q-rating
+                        v-model="evaluate_ouptut[i].level"
+                        :val="list.id"
+                        max="5"
+                        size="sm"
+                        color="grey"
+                        :color-selected="ratingColors"
+                        label="ระดับการประเมินพฤติกรรม"
+                      >
+                        <template v-slot:tip-1>
+                          <q-tooltip>ต่ำกว่าความคาดหวังมาก (1)</q-tooltip>
+                        </template>
+                        <template v-slot:tip-2>
+                          <q-tooltip
+                            >ต่ำกว่าความคาดหวังค่อนข้างมาก (2)</q-tooltip
+                          >
+                        </template>
+                        <template v-slot:tip-3>
+                          <q-tooltip>เป็นไปตามความคาดหวัง (3)</q-tooltip>
+                        </template>
+                        <template v-slot:tip-4>
+                          <q-tooltip
+                            >สูงว่าความคาดหวังค่อนข้างมาก (4)</q-tooltip
+                          >
+                        </template>
+                        <template v-slot:tip-5>
+                          <q-tooltip>สูงกว่าความคาดหวังมาก (5)</q-tooltip>
+                        </template>
+                      </q-rating>
+                    </q-item-label>
+                  </q-item-section>
+                </q-item>
+              </q-list>
+            </q-card>
+          </div>
+        </div>
+
+        <div class="col-12">
+          <div :class="`row  ${$q.screen.gt.xs ? 'q-pl-sm' : ''}`">
+            <q-card class="text-top0 col-xs-12 col-sm-11">
+              <q-list dense>
+                <q-item
+                  dense
+                  tag="label"
+                  v-ripple
+                  :class="getBordered(alerts[2].value)"
+                  :style="$q.screen.gt.xs ? '' : 'padding: 5px;'"
+                >
+                  <q-item-section>
+                    <q-item-label>
+                      <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
+                      1.2. ความรู้ความสามารถ</q-item-label
+                    >
+                  </q-item-section>
+                  <q-item-section side>
+                    <q-rating
+                      v-model="knowledge_level"
+                      max="5"
+                      size="sm"
+                      color="grey"
+                      :color-selected="ratingColors"
+                      label="ระดับการประเมินพฤติกรรม"
+                    >
+                      <template v-slot:tip-1>
+                        <q-tooltip>ต่ำกว่าความคาดหวังมาก (1)</q-tooltip>
+                      </template>
+                      <template v-slot:tip-2>
+                        <q-tooltip>ต่ำกว่าความคาดหวังค่อนข้างมาก (2)</q-tooltip>
+                      </template>
+                      <template v-slot:tip-3>
+                        <q-tooltip>เป็นไปตามความคาดหวัง (3)</q-tooltip>
+                      </template>
+                      <template v-slot:tip-4>
+                        <q-tooltip>สูงว่าความคาดหวังค่อนข้างมาก (4)</q-tooltip>
+                      </template>
+                      <template v-slot:tip-5>
+                        <q-tooltip>สูงกว่าความคาดหวังมาก (5)</q-tooltip>
+                      </template>
+                    </q-rating>
+                  </q-item-section>
+                </q-item>
+              </q-list>
+            </q-card>
+
+            <q-card class="text-top0 col-xs-12 col-sm-11">
+              <q-list dense>
+                <q-item
+                  dense
+                  tag="label"
+                  v-ripple
+                  :class="getBordered(alerts[3].value)"
+                  :style="$q.screen.gt.xs ? '' : 'padding: 5px;'"
+                >
+                  <q-item-section>
+                    <q-item-label>
+                      <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
+                      1.3. ทักษะ</q-item-label
+                    >
+                  </q-item-section>
+                  <q-item-section side>
+                    <q-rating
+                      v-model="skill_level"
+                      max="5"
+                      size="sm"
+                      color="grey"
+                      :color-selected="ratingColors"
+                      label="ระดับการประเมินพฤติกรรม"
+                    >
+                      <template v-slot:tip-1>
+                        <q-tooltip>ต่ำกว่าความคาดหวังมาก (1)</q-tooltip>
+                      </template>
+                      <template v-slot:tip-2>
+                        <q-tooltip>ต่ำกว่าความคาดหวังค่อนข้างมาก (2)</q-tooltip>
+                      </template>
+                      <template v-slot:tip-3>
+                        <q-tooltip>เป็นไปตามความคาดหวัง (3)</q-tooltip>
+                      </template>
+                      <template v-slot:tip-4>
+                        <q-tooltip>สูงว่าความคาดหวังค่อนข้างมาก (4)</q-tooltip>
+                      </template>
+                      <template v-slot:tip-5>
+                        <q-tooltip>สูงกว่าความคาดหวังมาก (5)</q-tooltip>
+                      </template>
+                    </q-rating>
+                  </q-item-section>
+                </q-item>
+              </q-list>
+            </q-card>
+
+            <q-card class="text-top0 col-xs-12 col-sm-11">
+              <q-list dense>
+                <q-item
+                  dense
+                  tag="label"
+                  v-ripple
+                  :class="getBordered(alerts[4].value)"
+                  :style="$q.screen.gt.xs ? '' : 'padding: 5px;'"
+                >
+                  <q-item-section>
+                    <q-item-label>
+                      <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
+                      1.4. สมมรถนะ</q-item-label
+                    >
+                  </q-item-section>
+                  <q-item-section side>
+                    <q-rating
+                      v-model="competency_level"
+                      max="5"
+                      size="sm"
+                      color="grey"
+                      :color-selected="ratingColors"
+                      label="ระดับการประเมินพฤติกรรม"
+                    >
+                      <template v-slot:tip-1>
+                        <q-tooltip>ต่ำกว่าความคาดหวังมาก (1)</q-tooltip>
+                      </template>
+                      <template v-slot:tip-2>
+                        <q-tooltip>ต่ำกว่าความคาดหวังค่อนข้างมาก (2)</q-tooltip>
+                      </template>
+                      <template v-slot:tip-3>
+                        <q-tooltip>เป็นไปตามความคาดหวัง (3)</q-tooltip>
+                      </template>
+                      <template v-slot:tip-4>
+                        <q-tooltip>สูงว่าความคาดหวังค่อนข้างมาก (4)</q-tooltip>
+                      </template>
+                      <template v-slot:tip-5>
+                        <q-tooltip>สูงกว่าความคาดหวังมาก (5)</q-tooltip>
+                      </template>
+                    </q-rating>
+                  </q-item-section>
+                </q-item>
+              </q-list>
+            </q-card>
+
+            <q-card class="text-top0 col-xs-12 col-sm-11">
+              <q-list dense>
+                <q-item
+                  dense
+                  tag="label"
+                  v-ripple
+                  :class="getBordered(alerts[5].value)"
+                  :style="$q.screen.gt.xs ? '' : 'padding: 5px;'"
+                >
+                  <q-item-section>
+                    <q-item-label>
+                      <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
+                      1.5. ความสามารถในการเรียนรู้งาน</q-item-label
+                    >
+                  </q-item-section>
+                  <q-item-section side>
+                    <q-rating
+                      v-model="learn_level"
+                      max="5"
+                      size="sm"
+                      color="grey"
+                      :color-selected="ratingColors"
+                      label="ระดับการประเมินพฤติกรรม"
+                    >
+                      <template v-slot:tip-1>
+                        <q-tooltip>ต่ำกว่าความคาดหวังมาก (1)</q-tooltip>
+                      </template>
+                      <template v-slot:tip-2>
+                        <q-tooltip>ต่ำกว่าความคาดหวังค่อนข้างมาก (2)</q-tooltip>
+                      </template>
+                      <template v-slot:tip-3>
+                        <q-tooltip>เป็นไปตามความคาดหวัง (3)</q-tooltip>
+                      </template>
+                      <template v-slot:tip-4>
+                        <q-tooltip>สูงว่าความคาดหวังค่อนข้างมาก (4)</q-tooltip>
+                      </template>
+                      <template v-slot:tip-5>
+                        <q-tooltip>สูงกว่าความคาดหวังมาก (5)</q-tooltip>
+                      </template>
+                    </q-rating>
+                  </q-item-section>
+                </q-item>
+              </q-list>
+            </q-card>
+
+            <q-card class="text-top0 col-xs-12 col-sm-11">
+              <q-list dense>
+                <q-item
+                  dense
+                  tag="label"
+                  v-ripple
+                  :class="getBordered(alerts[6].value)"
+                  :style="$q.screen.gt.xs ? '' : 'padding: 5px;'"
+                >
+                  <q-item-section>
+                    <q-item-label>
+                      <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
+                      1.6.
+                      ความสามารถในการปรับใช้ความรู้กับงานในหน้าที่</q-item-label
+                    >
+                  </q-item-section>
+                  <q-item-section side>
+                    <q-rating
+                      v-model="apply_level"
+                      max="5"
+                      size="sm"
+                      color="grey"
+                      :color-selected="ratingColors"
+                      label="ระดับการประเมินพฤติกรรม"
+                    >
+                      <template v-slot:tip-1>
+                        <q-tooltip>ต่ำกว่าความคาดหวังมาก (1)</q-tooltip>
+                      </template>
+                      <template v-slot:tip-2>
+                        <q-tooltip>ต่ำกว่าความคาดหวังค่อนข้างมาก (2)</q-tooltip>
+                      </template>
+                      <template v-slot:tip-3>
+                        <q-tooltip>เป็นไปตามความคาดหวัง (3)</q-tooltip>
+                      </template>
+                      <template v-slot:tip-4>
+                        <q-tooltip>สูงว่าความคาดหวังค่อนข้างมาก (4)</q-tooltip>
+                      </template>
+                      <template v-slot:tip-5>
+                        <q-tooltip>สูงกว่าความคาดหวังมาก (5)</q-tooltip>
+                      </template>
+                    </q-rating>
+                  </q-item-section>
+                </q-item>
+              </q-list>
+            </q-card>
+
+            <q-card class="text-top0 col-xs-12 col-sm-11">
+              <q-list dense>
+                <q-item
+                  dense
+                  tag="label"
+                  v-ripple
+                  :class="getBordered(alerts[7].value)"
+                  :style="$q.screen.gt.xs ? '' : 'padding: 5px;'"
+                >
+                  <q-item-section>
+                    <q-item-label>
+                      <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
+                      1.7. ความสำเร็จของงานที่ได้รับมอบหมาย</q-item-label
+                    >
+                  </q-item-section>
+                  <q-item-section side>
+                    <q-rating
+                      v-model="success_level"
+                      max="5"
+                      size="sm"
+                      color="grey"
+                      :color-selected="ratingColors"
+                      label="ระดับการประเมินพฤติกรรม"
+                    >
+                      <template v-slot:tip-1>
+                        <q-tooltip>ต่ำกว่าความคาดหวังมาก (1)</q-tooltip>
+                      </template>
+                      <template v-slot:tip-2>
+                        <q-tooltip>ต่ำกว่าความคาดหวังค่อนข้างมาก (2)</q-tooltip>
+                      </template>
+                      <template v-slot:tip-3>
+                        <q-tooltip>เป็นไปตามความคาดหวัง (3)</q-tooltip>
+                      </template>
+                      <template v-slot:tip-4>
+                        <q-tooltip>สูงว่าความคาดหวังค่อนข้างมาก (4)</q-tooltip>
+                      </template>
+                      <template v-slot:tip-5>
+                        <q-tooltip>สูงกว่าความคาดหวังมาก (5)</q-tooltip>
+                      </template>
+                    </q-rating>
+                  </q-item-section>
+                </q-item>
+              </q-list>
+            </q-card>
+
+            <q-card class="text-top0 col-xs-12 col-sm-11">
+              <q-list dense>
+                <q-item
+                  dense
+                  tag="label"
+                  v-ripple
+                  :style="$q.screen.gt.xs ? '' : 'padding: 5px;'"
+                >
+                  <q-item-section>
+                    <q-item-label>
+                      <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
+                      1.8 อื่นๆ
+                      <q-checkbox
+                        class="q-ml-sm"
+                        dense
+                        v-model="etc"
+                        @click="
+                          (achievement_other.text = ''),
+                            (achievement_other.level = 0)
+                        "
+                    /></q-item-label>
+                  </q-item-section>
+                </q-item>
+              </q-list>
+            </q-card>
+
+            <q-card
+              v-if="etc"
+              :class="`text-top0 col-xs-12 col-sm-11 ${
+                $q.screen.gt.xs ? 'q-pl-lg' : ''
+              }`"
+            >
+              <q-list v-if="$q.screen.gt.xs" dense>
+                <q-item dense tag="label" v-ripple>
+                  <q-item-section class="q-ml-md">
+                    <q-item-label>
+                      <q-input
+                        v-model="achievement_other.text"
+                        label="กรอกอื่นๆ"
+                        dense
+                        lazy-rules
+                        autogrow
+                        hide-bottom-space
+                        outlined
+                        class="bg-white"
+                        :rules="[
+                          (val) =>
+                            (val && val.length > 0) || 'กรุณากรอกข้อความ',
+                        ]"
+                      />
+                    </q-item-label>
+                  </q-item-section>
+                  <q-item-section side>
+                    <q-rating
+                      v-model="achievement_other.level"
+                      max="5"
+                      size="sm"
+                      color="grey"
+                      :color-selected="ratingColors"
+                      label="ระดับการประเมินพฤติกรรม"
+                    >
+                      <template v-slot:tip-1>
+                        <q-tooltip>ต่ำกว่าความคาดหวังมาก (1)</q-tooltip>
+                      </template>
+                      <template v-slot:tip-2>
+                        <q-tooltip>ต่ำกว่าความคาดหวังค่อนข้างมาก (2)</q-tooltip>
+                      </template>
+                      <template v-slot:tip-3>
+                        <q-tooltip>เป็นไปตามความคาดหวัง (3)</q-tooltip>
+                      </template>
+                      <template v-slot:tip-4>
+                        <q-tooltip>สูงว่าความคาดหวังค่อนข้างมาก (4)</q-tooltip>
+                      </template>
+                      <template v-slot:tip-5>
+                        <q-tooltip>สูงกว่าความคาดหวังมาก (5)</q-tooltip>
+                      </template>
+                    </q-rating>
+                  </q-item-section>
+                </q-item>
+              </q-list>
+              <q-list v-else dense>
+                <q-item dense tag="label" v-ripple style="padding: 0">
+                  <q-item-section>
+                    <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-label class="text-center">
+                      <q-rating
+                        v-model="achievement_other.level"
+                        max="5"
+                        size="sm"
+                        color="grey"
+                        :color-selected="ratingColors"
+                        label="ระดับการประเมินพฤติกรรม"
+                      >
+                        <template v-slot:tip-1>
+                          <q-tooltip>ต่ำกว่าความคาดหวังมาก (1)</q-tooltip>
+                        </template>
+                        <template v-slot:tip-2>
+                          <q-tooltip
+                            >ต่ำกว่าความคาดหวังค่อนข้างมาก (2)</q-tooltip
+                          >
+                        </template>
+                        <template v-slot:tip-3>
+                          <q-tooltip>เป็นไปตามความคาดหวัง (3)</q-tooltip>
+                        </template>
+                        <template v-slot:tip-4>
+                          <q-tooltip
+                            >สูงว่าความคาดหวังค่อนข้างมาก (4)</q-tooltip
+                          >
+                        </template>
+                        <template v-slot:tip-5>
+                          <q-tooltip>สูงกว่าความคาดหวังมาก (5)</q-tooltip>
+                        </template>
+                      </q-rating>
+                    </q-item-label>
+                  </q-item-section>
+                </q-item>
+              </q-list>
+            </q-card>
+          </div>
+        </div>
+
+        <div class="col-12 no-margin">
+          <div class="col-12 row">
+            <div class="col-12 text-top0 row items-center q-pl-lg">
+              <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
+              จุดเด่น (ไม่เกิน 5 บรรทัด)
+            </div>
+            <q-input
+              outlined
+              dense
+              v-model="achievement_strength_desc"
+              class="col-xs-12 col-sm-11 col-md-10 offset-md-1"
+              lazy-rules
+              type="textarea"
+              label="กรอกจุดเด่น"
+              hide-bottom-space
+              :row="5"
+              :rules="achievement_strengthRules"
+              ref="achievement_strengthRef"
+            />
+          </div>
+          <div class="col-12 row">
+            <div class="col-12 text-top0 row items-center q-pl-lg">
+              <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
+              สิ่งที่ควรปรับปรุง (ไม่เกิน 5 บรรทัด)
+            </div>
+            <q-input
+              outlined
+              dense
+              v-model="achievement_improve_desc"
+              class="col-xs-12 col-sm-11 col-md-10 offset-md-1"
+              type="textarea"
+              hide-bottom-space
+              label="กรอกสิ่งที่ควรปรับปรุง"
+              :row="5"
+            />
+          </div>
+        </div>
+
+        <!-- Part 2 -->
+        <!-- <Part2 /> -->
+        <div class="col-12 no-margin">
+          <div class="col-12 row">
+            <div class="col-12 text-top0 items-center">
+              <q-avatar class="bg-grey-2 q-mr-sm" size="28px">2</q-avatar>
+              พฤติกรรมของผู้ทดลองปฏิบัติบัติหน้าที่ราชการ
+            </div>
+            <div class="col-12 text-top0 row items-center q-pl-lg">
+              <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
+              2.1 ความประพฤติ
+            </div>
+
+            <q-card
+              flat
+              bordered
+              :class="[
+                'col-xs-12 col-sm-11 col-md-10 offset-md-1 q-pa-sm bg-grey-1',
+                getBordered(alerts[8].value),
+              ]"
+            >
+              <q-list dense v-for="(list, i) in list2_1" :key="i">
+                <q-item dense tag="label" v-ripple>
+                  <q-item-section>
+                    <q-item-label>{{ list.label }}</q-item-label>
+                  </q-item-section>
+                  <q-item-section side>
+                    <q-rating
+                      v-model="conduct_level[i]"
+                      :val="list.id"
+                      max="5"
+                      size="sm"
+                      color="grey"
+                      :color-selected="ratingColors"
+                      label="ระดับการประเมินพฤติกรรม"
+                    >
+                      <template v-slot:tip-1>
+                        <q-tooltip>ต่ำกว่าความคาดหวังมาก (1)</q-tooltip>
+                      </template>
+                      <template v-slot:tip-2>
+                        <q-tooltip>ต่ำกว่าความคาดหวังค่อนข้างมาก (2)</q-tooltip>
+                      </template>
+                      <template v-slot:tip-3>
+                        <q-tooltip>เป็นไปตามความคาดหวัง (3)</q-tooltip>
+                      </template>
+                      <template v-slot:tip-4>
+                        <q-tooltip>สูงว่าความคาดหวังค่อนข้างมาก (4)</q-tooltip>
+                      </template>
+                      <template v-slot:tip-5>
+                        <q-tooltip>สูงกว่าความคาดหวังมาก (5)</q-tooltip>
+                      </template>
+                    </q-rating>
+                  </q-item-section>
+                </q-item>
+                <q-separator class="q-my-xs" v-if="i + 1 < list2_1.length" />
+              </q-list>
+            </q-card>
+          </div>
+
+          <div class="col-12 row">
+            <div class="col-12 text-top0 row items-center q-pl-lg">
+              <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
+              2.2 ความมีคุณธรรมจริยธรรม
+            </div>
+            <q-card
+              flat
+              bordered
+              :class="[
+                'col-xs-12 col-sm-11 col-md-10 offset-md-1 q-pa-sm bg-grey-1',
+                getBordered(alerts[9].value),
+              ]"
+            >
+              <q-list dense v-for="(list, i) in list2_2" :key="i">
+                <q-item dense tag="label" v-ripple>
+                  <q-item-section>
+                    <q-item-label>{{ list.label }}</q-item-label>
+                  </q-item-section>
+                  <q-item-section side>
+                    <q-rating
+                      v-model="moral_level[i]"
+                      :val="list.id"
+                      max="5"
+                      size="sm"
+                      color="grey"
+                      :color-selected="ratingColors"
+                      label="ระดับการประเมินพฤติกรรม"
+                    >
+                      <template v-slot:tip-1>
+                        <q-tooltip>ต่ำกว่าความคาดหวังมาก (1)</q-tooltip>
+                      </template>
+                      <template v-slot:tip-2>
+                        <q-tooltip>ต่ำกว่าความคาดหวังค่อนข้างมาก (2)</q-tooltip>
+                      </template>
+                      <template v-slot:tip-3>
+                        <q-tooltip>เป็นไปตามความคาดหวัง (3)</q-tooltip>
+                      </template>
+                      <template v-slot:tip-4>
+                        <q-tooltip>สูงว่าความคาดหวังค่อนข้างมาก (4)</q-tooltip>
+                      </template>
+                      <template v-slot:tip-5>
+                        <q-tooltip>สูงกว่าความคาดหวังมาก (5)</q-tooltip>
+                      </template>
+                    </q-rating>
+                  </q-item-section>
+                </q-item>
+                <q-separator class="q-my-xs" v-if="i + 1 < list2_2.length" />
+              </q-list>
+            </q-card>
+          </div>
+
+          <div class="col-12 row">
+            <div class="col-12 text-top0 row items-center q-pl-lg">
+              <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
+              2.3 การรักษาวินัย
+            </div>
+            <q-card
+              flat
+              bordered
+              :class="[
+                'col-xs-12 col-sm-11 col-md-10 offset-md-1 q-pa-sm bg-grey-1',
+                getBordered(alerts[10].value),
+              ]"
+            >
+              <q-list dense v-for="(list, i) in list2_3" :key="i">
+                <q-item dense tag="label" v-ripple>
+                  <q-item-section>
+                    <q-item-label>{{ list.label }}</q-item-label>
+                  </q-item-section>
+                  <q-item-section side>
+                    <q-rating
+                      v-model="discipline_level[i]"
+                      :val="list.id"
+                      max="5"
+                      size="sm"
+                      color="grey"
+                      :color-selected="ratingColors"
+                      label="ระดับการประเมินพฤติกรรม"
+                    >
+                      <template v-slot:tip-1>
+                        <q-tooltip>ต่ำกว่าความคาดหวังมาก (1)</q-tooltip>
+                      </template>
+                      <template v-slot:tip-2>
+                        <q-tooltip>ต่ำกว่าความคาดหวังค่อนข้างมาก (2)</q-tooltip>
+                      </template>
+                      <template v-slot:tip-3>
+                        <q-tooltip>เป็นไปตามความคาดหวัง (3)</q-tooltip>
+                      </template>
+                      <template v-slot:tip-4>
+                        <q-tooltip>สูงว่าความคาดหวังค่อนข้างมาก (4)</q-tooltip>
+                      </template>
+                      <template v-slot:tip-5>
+                        <q-tooltip>สูงกว่าความคาดหวังมาก (5)</q-tooltip>
+                      </template>
+                    </q-rating>
+                  </q-item-section>
+                </q-item>
+                <q-separator class="q-my-xs" v-if="i + 1 < list2_3.length" />
+              </q-list>
+            </q-card>
+          </div>
+
+          <div class="col-12 row">
+            <div class="col-12 text-top0 row items-center q-pl-lg">
+              <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
+              2.4 อื่นๆ
+              <q-checkbox
+                class="q-ml-sm"
+                dense
+                v-model="etc2"
+                @click="(behavio_orther.text = ''), (behavio_orther.level = 0)"
+              />
+            </div>
+            <q-card
+              v-if="etc2"
+              flat
+              bordered
+              class="col-xs-12 col-sm-11 col-md-10 offset-md-1 q-pa-sm bg-grey-1"
+            >
+              <q-list dense>
+                <q-item dense tag="label" v-ripple>
+                  <q-item-section>
+                    <q-item-label>
+                      <q-input
+                        v-model="behavio_orther.text"
+                        label="กรอกอื่นๆ"
+                        dense
+                        lazy-rules
+                        autogrow
+                        hide-bottom-space
+                        outlined
+                        class="bg-white"
+                        :rules="[
+                          (val) =>
+                            (val && val.length > 0) || 'กรุณากรอกข้อความ',
+                        ]"
+                      />
+                    </q-item-label>
+                  </q-item-section>
+                  <q-item-section side>
+                    <q-rating
+                      v-model="behavio_orther.level"
+                      max="5"
+                      size="sm"
+                      color="grey"
+                      :color-selected="ratingColors"
+                      label="ระดับการประเมินพฤติกรรม"
+                    >
+                      <template v-slot:tip-1>
+                        <q-tooltip>ต่ำกว่าความคาดหวังมาก (1)</q-tooltip>
+                      </template>
+                      <template v-slot:tip-2>
+                        <q-tooltip>ต่ำกว่าความคาดหวังค่อนข้างมาก (2)</q-tooltip>
+                      </template>
+                      <template v-slot:tip-3>
+                        <q-tooltip>เป็นไปตามความคาดหวัง (3)</q-tooltip>
+                      </template>
+                      <template v-slot:tip-4>
+                        <q-tooltip>สูงว่าความคาดหวังค่อนข้างมาก (4)</q-tooltip>
+                      </template>
+                      <template v-slot:tip-5>
+                        <q-tooltip>สูงกว่าความคาดหวังมาก (5)</q-tooltip>
+                      </template>
+                    </q-rating>
+                  </q-item-section>
+                </q-item>
+              </q-list>
+            </q-card>
+          </div>
+
+          <!-- <FormComment /> -->
+          <div class="col-12 no-margin">
+            <div class="col-12 row">
+              <div class="col-12 text-top0 row items-center q-pl-lg">
+                <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
+                จุดเด่น (ไม่เกิน 5 บรรทัด)
+              </div>
+              <q-input
+                outlined
+                dense
+                v-model="behavior_strength_desc"
+                class="col-xs-12 col-sm-11 col-md-10 offset-md-1"
+                lazy-rules
+                type="textarea"
+                label="กรอกจุดเด่น"
+                hide-bottom-space
+                :row="5"
+                :rules="behavio_strengthRules"
+                ref="behavio_strengthRef"
+              />
+            </div>
+            <div class="col-12 row">
+              <div class="col-12 text-top0 row items-center q-pl-lg">
+                <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
+                สิ่งที่ควรปรับปรุง (ไม่เกิน 5 บรรทัด)
+              </div>
+              <q-input
+                outlined
+                dense
+                v-model="behavior_improve_desc"
+                class="col-xs-12 col-sm-11 col-md-10 offset-md-1"
+                type="textarea"
+                hide-bottom-space
+                label="กรอกสิ่งที่ควรปรับปรุง"
+                :row="5"
+              />
+            </div>
+          </div>
+        </div>
+
+        <!-- Part 3 -->
+        <!-- <Part3 /> -->
+        <div class="col-12 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 v-if="$q.screen.gt.xs" dense>
+                <q-item
+                  dense
+                  tag="label"
+                  v-ripple
+                  :class="getBordered(alerts[11].value)"
+                >
+                  <q-item-section>
+                    <q-item-label>1. การปฐมนิเทศ</q-item-label>
+                  </q-item-section>
+                  <q-item-section side>
+                    <div class="row">
+                      <q-radio
+                        checked-icon="task_alt"
+                        unchecked-icon="panorama_fish_eye"
+                        v-model="orientation"
+                        val="1"
+                        label="ดำเนินการเเล้ว"
+                      />
+                      <q-radio
+                        checked-icon="task_alt"
+                        unchecked-icon="panorama_fish_eye"
+                        v-model="orientation"
+                        val="0"
+                        label=" ยังไม่ได้ดำเนินการ"
+                      />
+                    </div>
+                  </q-item-section>
+                </q-item>
+                
+                <q-separator class="q-my-xs" />
+                <q-item
+                  dense
+                  tag="label"
+                  v-ripple
+                  :class="getBordered(alerts[12].value)"
+                >
+                  <q-item-section>
+                    <q-item-label>2. การเรียนรู้ด้วยตนเอง</q-item-label>
+                  </q-item-section>
+                  <q-item-section side>
+                    <div class="row">
+                      <q-radio
+                        checked-icon="task_alt"
+                        unchecked-icon="panorama_fish_eye"
+                        v-model="self_learning"
+                        val="1"
+                        label="ดำเนินการเเล้ว"
+                      />
+                      <q-radio
+                        checked-icon="task_alt"
+                        unchecked-icon="panorama_fish_eye"
+                        v-model="self_learning"
+                        val="0"
+                        label=" ยังไม่ได้ดำเนินการ"
+                      />
+                    </div>
+                  </q-item-section>
+                </q-item>
+                <q-separator class="q-my-xs" />
+                <q-item
+                  dense
+                  tag="label"
+                  v-ripple
+                  :class="getBordered(alerts[13].value)"
+                >
+                  <q-item-section>
+                    <q-item-label>3. การอบรมสัมนาร่วมกัน</q-item-label>
+                  </q-item-section>
+                  <q-item-section side>
+                    <div class="row">
+                      <q-radio
+                        checked-icon="task_alt"
+                        unchecked-icon="panorama_fish_eye"
+                        v-model="training_seminar"
+                        val="1"
+                        label="ดำเนินการเเล้ว"
+                      />
+                      <q-radio
+                        checked-icon="task_alt"
+                        unchecked-icon="panorama_fish_eye"
+                        v-model="training_seminar"
+                        val="0"
+                        label=" ยังไม่ได้ดำเนินการ"
+                      />
+                    </div>
+                  </q-item-section>
+                </q-item>
+                <q-separator class="q-my-xs" />
+                <q-item dense tag="label" v-ripple>
+                  <q-item-section>
+                    <q-item-label
+                      >4. การอบรมอื่น ๆ ตามที่หน่วยงานกำหนด
+                      (ถ้ามี)</q-item-label
+                    >
+                  </q-item-section>
+                  <q-item-section side>
+                    <div class="row">
+                      <q-radio
+                        checked-icon="task_alt"
+                        unchecked-icon="panorama_fish_eye"
+                        v-model="other_training"
+                        val="1"
+                        label="ดำเนินการเเล้ว"
+                      />
+                      <q-radio
+                        checked-icon="task_alt"
+                        unchecked-icon="panorama_fish_eye"
+                        v-model="other_training"
+                        val="0"
+                        label=" ยังไม่ได้ดำเนินการ"
+                      />
+                    </div>
+                  </q-item-section>
+                </q-item>
+              </q-list>
+              <div v-else class="">
+                
+              </div>
+              <q-list dense>
+                <q-item
+                  dense
+                  tag="label"
+                  v-ripple
+                  :class="getBordered(alerts[11].value)"
+                >
+                  <q-item-section>
+                    <q-item-label>1. การปฐมนิเทศ</q-item-label>
+                  </q-item-section>
+                  <q-item-section side>
+                    <div class="row">
+                      <q-radio
+                        checked-icon="task_alt"
+                        unchecked-icon="panorama_fish_eye"
+                        v-model="orientation"
+                        val="1"
+                        label="ดำเนินการเเล้ว"
+                      />
+                      <q-radio
+                        checked-icon="task_alt"
+                        unchecked-icon="panorama_fish_eye"
+                        v-model="orientation"
+                        val="0"
+                        label=" ยังไม่ได้ดำเนินการ"
+                      />
+                    </div>
+                  </q-item-section>
+                </q-item>
+                
+                <q-separator class="q-my-xs" />
+                <q-item
+                  dense
+                  tag="label"
+                  v-ripple
+                  :class="getBordered(alerts[12].value)"
+                >
+                  <q-item-section>
+                    <q-item-label>2. การเรียนรู้ด้วยตนเอง</q-item-label>
+                  </q-item-section>
+                  <q-item-section side>
+                    <div class="row">
+                      <q-radio
+                        checked-icon="task_alt"
+                        unchecked-icon="panorama_fish_eye"
+                        v-model="self_learning"
+                        val="1"
+                        label="ดำเนินการเเล้ว"
+                      />
+                      <q-radio
+                        checked-icon="task_alt"
+                        unchecked-icon="panorama_fish_eye"
+                        v-model="self_learning"
+                        val="0"
+                        label=" ยังไม่ได้ดำเนินการ"
+                      />
+                    </div>
+                  </q-item-section>
+                </q-item>
+                <q-separator class="q-my-xs" />
+                <q-item
+                  dense
+                  tag="label"
+                  v-ripple
+                  :class="getBordered(alerts[13].value)"
+                >
+                  <q-item-section>
+                    <q-item-label>3. การอบรมสัมนาร่วมกัน</q-item-label>
+                  </q-item-section>
+                  <q-item-section side>
+                    <div class="row">
+                      <q-radio
+                        checked-icon="task_alt"
+                        unchecked-icon="panorama_fish_eye"
+                        v-model="training_seminar"
+                        val="1"
+                        label="ดำเนินการเเล้ว"
+                      />
+                      <q-radio
+                        checked-icon="task_alt"
+                        unchecked-icon="panorama_fish_eye"
+                        v-model="training_seminar"
+                        val="0"
+                        label=" ยังไม่ได้ดำเนินการ"
+                      />
+                    </div>
+                  </q-item-section>
+                </q-item>
+                <q-separator class="q-my-xs" />
+                <q-item dense tag="label" v-ripple>
+                  <q-item-section>
+                    <q-item-label
+                      >4. การอบรมอื่น ๆ ตามที่หน่วยงานกำหนด
+                      (ถ้ามี)</q-item-label
+                    >
+                  </q-item-section>
+                  <q-item-section side>
+                    <div class="row">
+                      <q-radio
+                        checked-icon="task_alt"
+                        unchecked-icon="panorama_fish_eye"
+                        v-model="other_training"
+                        val="1"
+                        label="ดำเนินการเเล้ว"
+                      />
+                      <q-radio
+                        checked-icon="task_alt"
+                        unchecked-icon="panorama_fish_eye"
+                        v-model="other_training"
+                        val="0"
+                        label=" ยังไม่ได้ดำเนินการ"
+                      />
+                    </div>
+                  </q-item-section>
+                </q-item>
+              </q-list>
+            </q-card>
+          </div>
+        </div>
+
+        <!-- Footer -->
+        <!-- <Footer /> -->
+        <div class="col-12 no-margin justify-center">
+          <div class="col-xs-12 col-sm-11">
+            <div class="col-12 text-top2 row items-center">
+              ผู้บังคับบัญชา/ผู้มอบหมายงาน
+            </div>
+            <div class="col-12 row q-col-gutter-md">
+              <q-select
+                class="col-xs-12 col-sm-8"
+                dense
+                v-model="Autherise"
+                outlined
+                :options="option"
+                option-label="label"
+                label="ผู้บังคับบัญชา"
+                disable
+              />
+              <div class="col-xs-12 col-sm-4">
+                <datepicker
+                  menu-class-name="modalfix"
+                  v-model="dateAutherise"
+                  :locale="'th'"
+                  autoApply
+                  borderless
+                  :enableTimePicker="false"
+                  week-start="0"
+                >
+                  <template #year="{ year }">
+                    {{ year + 543 }}
+                  </template>
+                  <template #year-overlay-value="{ value }">
+                    {{ parseInt(value + 543) }}
+                  </template>
+                  <template #trigger>
+                    <q-input
+                      outlined
+                      dense
+                      class="full-width datepicker col-3"
+                      :model-value="
+                        dateAutherise != null ? date2Thai(dateAutherise) : null
+                      "
+                      :label="`${'ลงวันที่'}`"
+                      :rules="[(val) => !!val || `${'กรุณาเลือกลงวันที่'}`]"
+                    >
+                      <template v-slot:prepend>
+                        <q-icon
+                          name="event"
+                          class="cursor-pointer"
+                          style="color: var(--q-primary)"
+                        >
+                        </q-icon>
+                      </template>
+                    </q-input>
+                  </template>
+                </datepicker>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="col-12">
+          <q-separator size="3px" color="grey-2" />
+        </div>
+        <!-- <Footer /> -->
+        <div class="row col-12">
+          <q-space />
+          <q-btn label="บันทึก" color="secondary" @click="savaForm" />
+        </div>
+      </div>
+    </q-card-section>
+  </q-card>
+</template>
+
+<style lang="scss" scoped>
+.text-top2 {
+  font-weight: 500;
+  padding-bottom: 8px;
+  color: rgb(70, 68, 68);
+}
+
+.text-top0 {
+  font-weight: 600;
+  padding-bottom: 8px;
+  color: rgb(70, 68, 68);
+}
+
+.q-rating__icon {
+  text-shadow: transparent !important;
+}
+
+.q-card {
+  box-shadow: 0px 0px 0px 0px !important;
+}
+.border_custom {
+  border: 2px solid #c10015;
+  border-radius: 5px;
+  // color: #c10015;
+}
+</style>
diff --git a/src/modules/11_probation/component/addPage/03_addevalua.vue b/src/modules/11_probation/component/addPage/03_addevalua.vue
new file mode 100644
index 0000000..8c88131
--- /dev/null
+++ b/src/modules/11_probation/component/addPage/03_addevalua.vue
@@ -0,0 +1,3 @@
+<template>
+    03
+</template>
\ No newline at end of file
diff --git a/src/modules/11_probation/component/addPage/04_addevaluascore.vue b/src/modules/11_probation/component/addPage/04_addevaluascore.vue
new file mode 100644
index 0000000..722fbb0
--- /dev/null
+++ b/src/modules/11_probation/component/addPage/04_addevaluascore.vue
@@ -0,0 +1,3 @@
+<template>
+    04
+</template>
\ No newline at end of file
diff --git a/src/modules/11_probation/component/editPage/01_result.vue b/src/modules/11_probation/component/editPage/01_result.vue
new file mode 100644
index 0000000..a3b2fdc
--- /dev/null
+++ b/src/modules/11_probation/component/editPage/01_result.vue
@@ -0,0 +1,2369 @@
+<script setup lang="ts">
+import { ref, onMounted, computed, watch, defineAsyncComponent } from "vue";
+import { useRoute, useRouter } from "vue-router";
+
+import http from "@/plugins/http";
+import config from "@/app.config";
+import { useCounterMixin } from "@/stores/mixin";
+
+import Criterion from "@/modules/11_probation/component/Criterion.vue";
+
+import { useProbationStore } from "@/modules/11_probation/store/probation";
+import { useQuasar } from "quasar";
+
+const Header = defineAsyncComponent(
+  () => import("@/modules/11_probation/component/Header.vue")
+);
+const evaluate_id = ref<string>("");
+const dataArr = ref<any>();
+const dataArrayNumber = defineModel<Number>("dataArrayNumber");
+const fullname = defineModel<string>("fullname");
+
+const selectOp = computed(() => {
+  return store.tabs.map((i: any) => ({
+    id: i.id,
+    name: `ครั้งที่${i.no}`,
+    nameEn: `save${i.no}`,
+  }));
+});
+const props = defineProps({
+  fecthAssign: Function,
+  data: Object,
+});
+const status = ref<boolean>(false);
+
+const $q = useQuasar();
+const store = useProbationStore();
+const dateAutherise = ref<any>(new Date());
+const behavior_improve_desc = ref<string>("");
+const mixin = useCounterMixin();
+const {
+  showLoader,
+  hideLoader,
+  messageError,
+  dialogConfirm,
+  success,
+  date2Thai,
+  dialogMessageNotify,
+  dateToISO,
+} = mixin;
+const route = useRoute();
+const router = useRouter();
+
+const id = ref<string>(route.params.id as string);
+const profileId = ref<string>(route.params.profileId as string);
+
+const person = ref<any>([]);
+const assign = ref<any>([]);
+const evaluate_no = ref<string>("");
+const start_date = ref<Date>(new Date());
+const date_finish = ref<Date>(new Date());
+const round = ref<number>();
+const checkArray = ref<number>(0);
+const option = ref<any>([]);
+const Autherise = ref<any>(null);
+const list1_1 = ref<any>([]);
+const list1_2 = [
+  { id: "", label: "" },
+  { id: "", label: "" },
+  { id: "", label: "" },
+  { id: "", label: "" },
+  { id: "", label: "" },
+  { id: "", label: "" },
+  { id: "", label: "" },
+  { id: "", label: "" },
+  { id: "", label: "" },
+  { id: "", label: "" },
+];
+const evaluate_expenct_level = ref<any>([]);
+const evaluate_ouptut = ref<any>([]);
+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 achievement_strength_desc = ref<string>("");
+const achievement_improve_desc = ref<string>("");
+const behavio_orther = ref<any>({ text: "", level: 0 });
+const etc2 = ref<any>(false);
+
+const orientation = ref<any>(null);
+const self_learning = ref<any>(null);
+const training_seminar = ref<any>(null);
+const other_training = ref<any>(null);
+
+const ArrayCountbotton = [orientation, self_learning, training_seminar];
+
+const conduct_level = ref<any>([]);
+const moral_level = ref<any>([]);
+const discipline_level = ref<any>([]);
+const behavior_strength_desc = ref<string>("");
+const list2_1 = store.behavior_no1;
+const list2_2 = store.behavior_no2;
+const list2_3 = store.behavior_no3;
+const variablesToWatch = [
+  knowledge_level,
+  skill_level,
+  competency_level,
+  learn_level,
+  apply_level,
+  success_level,
+];
+
+const lengthconduct = computed(() => {
+  return conduct_level.value.filter((item: number) => item !== 0).length;
+});
+const lengthmoral_level = computed(() => {
+  return moral_level.value.filter((item: number) => item !== 0).length;
+});
+const lengthdiscipline_level = computed(() => {
+  return discipline_level.value.filter((item: number) => item !== 0).length;
+});
+const alerts = Array(20)
+  .fill(null)
+  .map(() => ref<boolean>(false));
+
+//rules
+const behavio_strengthRules = [
+  (val: any) => (val && val.length > 0) || "กรุณากรอกข้อมูลจุดเด่น",
+];
+const behavio_strengthRef = ref<any>(null);
+const achievement_strengthRef = ref<any>(null);
+const achievement_strengthRules = [
+  (val: any) => (val && val.length > 0) || "กรุณากรอกข้อมูลจุดเด่น",
+];
+const evaluate_ouptutRules = [
+  (val: any) => (val && val.length > 0) || "กรุณากรอกเหตุผลที่เกิดขึ้น",
+];
+const lengthevaluate_expenct_level = computed(() => {
+  return evaluate_expenct_level.value.filter(
+    (item: any) => item.level !== undefined && item.level !== 0
+  ).length;
+});
+const lengthevaluate_ouptut = computed(() => {
+  return evaluate_ouptut.value.filter(
+    (item: any) => item.level !== undefined && item.level !== 0
+  ).length;
+});
+
+/** get data */
+async function fecthFormdata(id: string) {
+  await http
+    .get(config.API.formevaluateRecord(id))
+    .then(async (res: any) => {
+      await store.fecthAssignoutput(res.data.data);
+      await fectFormfull();
+    })
+    .catch((e: any) => {})
+    .finally(() => {});
+}
+
+/** get form รอบ */
+async function fecthFormRound() {
+  try {
+    let data = await dataArr.value;
+    console.log("🚀 ~ fecthFormRound ~ data:", data);
+    evaluate_id.value = data.id;
+    start_date.value = data.date_start;
+    date_finish.value = data.date_finish;
+    knowledge_level.value = data.knowledge_level;
+    skill_level.value = data.skill_level;
+    competency_level.value = data.competency_level;
+    learn_level.value = data.learn_level;
+    apply_level.value = data.apply_level;
+    achievement_other.value.text = data.achievement_other_desc;
+    achievement_other.value.level = data.achievement_other_level;
+    achievement_strength_desc.value = data.achievement_strength_desc;
+    achievement_improve_desc.value = data.achievement_improve_desc;
+    conduct_level.value[0] = data.conduct1_level;
+    conduct_level.value[1] = data.conduct2_level;
+    conduct_level.value[2] = data.conduct3_level;
+    conduct_level.value[3] = data.conduct4_level;
+    moral_level.value[0] = data.moral1_level;
+    moral_level.value[1] = data.moral2_level;
+    moral_level.value[2] = data.moral3_level;
+    discipline_level.value[0] = data.discipline1_level;
+    discipline_level.value[1] = data.discipline2_level;
+    discipline_level.value[2] = data.discipline3_level;
+    discipline_level.value[3] = data.discipline4_level;
+    discipline_level.value[4] = data.discipline5_level;
+    behavio_orther.value.text = data.behavior_other_desc;
+    behavio_orther.value.level = data.behavior_other_level;
+    behavior_strength_desc.value = data.behavior_strength_desc;
+    behavior_improve_desc.value = data.behavior_improve_desc;
+    orientation.value = data.orientation.toString();
+    self_learning.value = data.self_learning.toString();
+    training_seminar.value = data.training_seminar.toString();
+    other_training.value = data.other_training.toString();
+    dateAutherise.value = data.assessor_dated;
+    if (
+      data.achievement_other_desc !== "" &&
+      data.achievement_other_level !== null
+    ) {
+      etc.value = true;
+    } else etc.value = false;
+    if (data.behavior_other_desc !== "" && data.behavior_other_level !== null) {
+      etc2.value = true;
+    } else etc2.value = false;
+    if (data.achievements) {
+      await data.achievements.map((e: any, index: number) => {
+        evaluate_expenct_level.value[index].level = e.evaluate_expect_level;
+        evaluate_ouptut.value[index].text = e.evaluate_output_desc;
+        evaluate_ouptut.value[index].level = e.evaluate_output_level;
+      });
+    }
+
+    status.value = false;
+  } catch (error) {
+    hideLoader();
+  }
+}
+
+/** get form */
+async function fectFormfull() {
+  Autherise.value = store.director;
+  list1_1.value = store.assignOutput;
+  evaluate_expenct_level.value = await store.assignOutput.map((e: any) => ({
+    id: e.id,
+    labal: e.output_desc,
+  }));
+  evaluate_ouptut.value = await store.assignOutput.map((e: any) => ({
+    id: e.id,
+  }));
+  checkArray.value = list1_1.value.length;
+  await fecthFormRound();
+}
+
+/** return class เมื่อ true */
+function getBordered(i: boolean) {
+  return {
+    border_custom: i,
+  };
+}
+
+/** อัปเดต ข้อมูล */
+function putformData() {
+  const data = {
+    evaluate_no: evaluate_no.value,
+    start_date: start_date.value,
+    date_finish: date_finish.value,
+    evaluate_expenct_level: evaluate_expenct_level.value,
+    evaluate_ouptut: evaluate_ouptut.value,
+    knowledge_level: knowledge_level.value,
+    skill_level: skill_level.value,
+    competency_level: competency_level.value,
+    learn_level: learn_level.value,
+    apply_level: apply_level.value,
+    success_level: success_level.value,
+    achievement_other: achievement_other.value,
+    achievement_strength_desc: achievement_strength_desc.value,
+    achievement_improve_desc: achievement_improve_desc.value,
+    conduct1_level: conduct_level.value[0],
+    conduct2_level: conduct_level.value[1],
+    conduct3_level: conduct_level.value[2],
+    conduct4_level: conduct_level.value[3],
+    moral1_level: moral_level.value[0],
+    moral2_level: moral_level.value[1],
+    moral3_level: moral_level.value[2],
+    discipline1_level: discipline_level.value[0],
+    discipline2_level: discipline_level.value[1],
+    discipline3_level: discipline_level.value[2],
+    discipline4_level: discipline_level.value[3],
+    discipline5_level: discipline_level.value[4],
+    behavio_orther: behavio_orther.value,
+    behavior_strength_desc: behavior_strength_desc.value,
+    behavior_improve_desc: behavior_improve_desc.value,
+    orientation: Number(orientation.value),
+    self_learning: Number(self_learning.value),
+    training_seminar: Number(training_seminar.value),
+    other_training: Number(other_training.value),
+    assessor_dated: dateToISO(dateAutherise.value),
+  };
+  dialogConfirm($q, async () => await editData(data));
+}
+
+/** เช็คค่าว่าง ก่อน save */
+function savaForm() {
+  achievement_strengthRef.value.validate();
+  behavio_strengthRef.value.validate();
+
+  let hasError = false;
+
+  if (
+    lengthevaluate_expenct_level.value !==
+      evaluate_expenct_level.value.length ||
+    lengthevaluate_ouptut.value !== evaluate_ouptut.value.length ||
+    knowledge_level.value === 0 ||
+    skill_level.value === 0 ||
+    competency_level.value === 0 ||
+    learn_level.value === 0 ||
+    apply_level.value === 0 ||
+    success_level.value === 0 ||
+    achievement_strength_desc.value === "" ||
+    lengthconduct.value !== 4 ||
+    lengthmoral_level.value !== 3 ||
+    lengthdiscipline_level.value !== 5 ||
+    behavior_strength_desc.value === "" ||
+    orientation.value === null ||
+    self_learning.value === null ||
+    training_seminar.value === null
+  ) {
+    hasError = true;
+  } else if (
+    (etc.value == true &&
+      (achievement_other.value.text === undefined ||
+        achievement_other.value.text == "" ||
+        achievement_other.value.level == undefined ||
+        achievement_other.value.level === 0)) ||
+    (etc2.value == true &&
+      (behavio_orther.value.text === "" ||
+        behavio_orther.value.text == undefined ||
+        behavio_orther.value.level === undefined ||
+        behavio_orther.value.level == 0))
+  ) {
+    hasError = true;
+  }
+
+  if (hasError === true) {
+    variablesToWatch.forEach((item, index) => {
+      if (item.value === 0) {
+        alerts[index + 2].value = true;
+      }
+    });
+    if (
+      lengthevaluate_expenct_level.value !== evaluate_expenct_level.value.length
+    ) {
+      alerts[0].value = true;
+    }
+    if (lengthevaluate_ouptut.value !== evaluate_ouptut.value.length) {
+      alerts[1].value = true;
+    }
+    if (lengthconduct.value !== 4) {
+      alerts[8].value = true;
+    }
+    if (lengthmoral_level.value !== 3) {
+      alerts[9].value = true;
+    }
+    if (lengthdiscipline_level.value !== 5) {
+      alerts[10].value = true;
+    }
+    ArrayCountbotton.forEach((item, index) => {
+      if (item.value === null) {
+        alerts[index + 11].value = true;
+      }
+    });
+
+    dialogMessageNotify($q, "กรุณากรอกข้อมูลให้ครบ");
+  } else {
+    putformData();
+  }
+}
+
+/**
+ * แก้ไขข้อมูล
+ * @param data ข้อมูลที่อัปเดต
+ */
+async function editData(data: any) {
+  await http
+    .put(config.API.editFormEvaluate(id.value, evaluate_id.value), data)
+    .then((res: any) => {
+      status.value = false;
+      success($q, "บันทึกสำเร็จ");
+    })
+    .catch((e: any) => {
+      messageError($q, e);
+    });
+}
+
+variablesToWatch.forEach((variable, index) => {
+  watch(variable, (item: any) => {
+    if (item !== 0) {
+      alerts[index + 2].value = false;
+    }
+  });
+});
+
+ArrayCountbotton.forEach((variable, index) => {
+  watch(variable, (item: any) => {
+    if (item !== null) {
+      alerts[index + 11].value = false;
+    }
+  });
+});
+
+watch(lengthevaluate_expenct_level, (newLength) => {
+  if (newLength === evaluate_expenct_level.value.length) {
+    alerts[0].value = false;
+  }
+});
+
+watch(lengthevaluate_ouptut, (newLength) => {
+  if (newLength === evaluate_ouptut.value.length) {
+    alerts[1].value = false;
+  }
+});
+
+watch(lengthconduct, (newLength) => {
+  if (newLength === 4) {
+    alerts[8].value = false;
+  }
+});
+
+watch(lengthmoral_level, (newLength) => {
+  if (newLength === 3) {
+    alerts[9].value = false;
+  }
+});
+
+watch(lengthdiscipline_level, (newLength) => {
+  if (newLength === 5) {
+    alerts[10].value = false;
+  }
+});
+
+function edit() {
+  status.value = true;
+}
+
+function cancel() {
+  status.value = false;
+  props.fecthAssign?.(id.value);
+}
+
+const evaluate_no1 = ref<number>(1);
+const dataRole = ref<string>("mentor");
+const tab = ref<string>("save1");
+/**
+ * เปลี่ยน tab
+ * @param tabVal type
+ */
+function changeTab(tabVal: string) {
+  showLoader();
+
+  tab.value = tabVal;
+  dataArrayNumber.value = Number(tabVal.charAt(4));
+  setTimeout(() => {
+    hideLoader();
+  }, 100);
+}
+
+/** download file */
+async function FileDownload(type: string) {
+  let numTab = store.evaluate.find((e: any) => e.no === dataArrayNumber.value);
+  //ผู้ดูเเล
+  if (dataRole.value == "mentor") {
+    showLoader();
+    await http
+      .get(config.API.reportEvaluateRecord1(type, numTab.id), {
+        responseType: "blob",
+      })
+      .then(async (res) => {
+        downloadFile(
+          res,
+          `แบบบันทึกผล(ผู้ดูเเล)_${fullname.value}_ครั้งที่${numTab.no}.${type}`
+        );
+      })
+      .catch((e) => {
+        messageError($q, e);
+      })
+      .finally(() => {
+        hideLoader();
+      });
+  } else {
+    //ผุ้บังคับ
+    showLoader();
+    await http
+      .get(config.API.reportEvaluateRecord1(type, numTab.id), {
+        responseType: "blob",
+      })
+      .then(async (res) => {
+        downloadFile(
+          res,
+          `แบบบันทึกผล(ผู้บังคับบัญชา)_${fullname.value}_ครั้งที่${numTab.no}.${type}`
+        );
+      })
+      .catch((e) => {
+        messageError($q, e);
+      })
+      .finally(() => {
+        hideLoader();
+      });
+  }
+}
+
+/** convert file */
+function downloadFile(response: any, filename: string) {
+  const link = document.createElement("a");
+  var fileName = filename;
+  link.href = window.URL.createObjectURL(new Blob([response.data]));
+  link.setAttribute("download", fileName);
+  document.body.appendChild(link);
+  link.click();
+  document.body.removeChild(link);
+}
+
+function addData() {
+  router.push(`/probation/detail/addresult/${profileId.value}/${id.value}`);
+}
+
+/** เช็คค่า props */
+watch(props, async () => {
+  evaluate_no1.value = Number(tab.value.charAt(4));
+  dataArr.value = await props.data;
+  fectFormfull();
+});
+
+onMounted(async () => {
+  evaluate_no1.value = Number(tab.value.charAt(4));
+  dataArr.value = await props.data;
+  await fecthFormdata(id.value);
+});
+</script>
+<template>
+  <Header
+    v-if="store.tabs.length > 0 && $q.screen.gt.xs"
+    :change-tab="changeTab"
+    :add-data="addData"
+    :loop="store.tabs.length"
+    :FileDownload="FileDownload"
+  />
+  <div
+    v-if="!$q.screen.gt.xs"
+    class="bg-grey-2 q-pa-sm"
+    style="border-radius: 10px 10px 0 0"
+  >
+    <q-toolbar class="q-pa-none">
+      <q-select
+        dense
+        bg-color="white"
+        v-model="tab"
+        outlined
+        option-label="name"
+        option-value="nameEn"
+        :options="selectOp"
+        emit-value
+        map-options
+        @update:model-value="changeTab"
+        style="width: 70%"
+      >
+      </q-select>
+      <q-space />
+      <q-btn flat rounded dense icon="mdi-download" color="add">
+        <q-tooltip>ดาวน์โหลด</q-tooltip>
+        <q-menu>
+          <q-list style="min-width: 150px">
+            <q-item clickable v-close-popup @click="FileDownload('pdf')">
+              <q-item-section avatar
+                ><q-icon color="red" name="mdi-file-pdf"
+              /></q-item-section>
+              <q-item-section>ไฟล์ .PDF</q-item-section>
+            </q-item>
+            <q-item clickable v-close-popup @click="FileDownload('docx')">
+              <q-item-section avatar
+                ><q-icon color="blue" name="mdi-file-word"
+              /></q-item-section>
+              <q-item-section>ไฟล์ .docx</q-item-section>
+            </q-item>
+          </q-list>
+        </q-menu>
+      </q-btn>
+      <q-btn color="blue" rounded flat dense icon="mdi-plus" @click="addData">
+        <q-tooltip> เพิ่ม </q-tooltip>
+      </q-btn>
+    </q-toolbar>
+  </div>
+  <div :class="`row ${$q.screen.gt.xs ? 'q-pa-md' : 'mobileClass q-pa-sm'}`">
+    <div
+      :class="`toptitle text-dark col-12 row items-center ${
+        $q.screen.gt.xs ? 'q-mt-md' : ''
+      }`"
+    >
+      <div>แบบบันทึกผล (ผู้ดูเเล)</div>
+      <div v-if="status == false">
+        <q-btn
+          dense
+          flat
+          round
+          color="primary"
+          @click="edit()"
+          icon="mdi-pencil-outline"
+        >
+          <q-tooltip>แก้ไขข้อมูล</q-tooltip>
+        </q-btn>
+      </div>
+      <div v-else>
+        <q-btn dense flat round color="red" @click="cancel()" icon="mdi-undo">
+          <q-tooltip>ยกเลิก</q-tooltip>
+        </q-btn>
+        <q-btn
+          dense
+          flat
+          round
+          class="q-ml-md"
+          color="public"
+          @click="savaForm()"
+          icon="mdi-content-save-outline"
+        >
+          <q-tooltip>บันทึกข้อมูล</q-tooltip>
+        </q-btn>
+      </div>
+    </div>
+    <div class="row text-weight-medium">
+      <div class="col-12 text-grey-7 text-bold">
+        <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
+        ผู้ทดลองปฏิบัติหน้าที่ราชการ {{ store.person.name ? store.person.name : "-" }}
+      </div>
+      <div class="col-12">
+        <span class="text-grey-7 text-weight-bold q-pl-lg"
+          >ตำแหน่งในสายงาน</span
+        >
+        {{ store.person.positionName ? store.person.positionName : "-" }}
+      </div>
+      <div class="col-12">
+        <span class="text-grey-7 text-weight-bold q-pl-lg">ระดับตำแหน่ง</span>
+        {{ store.person.positionLevelName ? store.person.positionLevelName : "-" }}
+      </div>
+      <div class="col-12">
+        <span class="text-grey-7 text-weight-bold q-pl-lg">สังกัด</span>
+        {{ store.person.Oc ? store.person.Oc : "-" }}
+      </div>
+
+      <div class="col-12 text-weight-bold row items-center text-grey-7">
+        <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
+        การทดลองปฎิบัติหน้าที่ราชการ<span class="text-primary q-pr-sm">{{
+          "ครั้งที่ " + store.assign.round_no
+        }}</span>
+        ตั้งแต่วันที่
+        <span class="text-black q-px-sm">{{
+          date2Thai(store.assign.date_start)
+        }}</span>
+        ถึงวันที่
+        <span class="text-black q-px-sm">{{
+          date2Thai(store.assign.date_finish)
+        }}</span>
+      </div>
+
+      <div class="col-12 text-weight-bold row items-center text-grey-7">
+        <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
+        บันทึกผล<span class="text-primary q-pr-sm">{{
+          "ครั้งที่ " + evaluate_no1
+        }}</span>
+        ระหว่างวันที่
+        <span class="text-black q-px-sm">
+          {{ date2Thai(start_date) }}
+        </span>
+        ถึงวันที่
+        <span class="text-black q-px-sm">
+          {{ date2Thai(date_finish) }}
+        </span>
+      </div>
+    </div>
+
+    <div class="row q-col-gutter-sm">
+      <div class="col-12">
+        <q-separator size="3px" color="grey-2" />
+      </div>
+
+      <Criterion />
+
+      <div class="col-12">
+        <q-separator size="3px" color="grey-2" />
+      </div>
+      <div class="col-12 text-weight-medium">
+        <q-avatar class="bg-grey-2 q-mr-sm" size="28px">1</q-avatar>
+        ผลสัมฤทธิ์ของการทดลองปฏิบัติบัติหน้าที่ราชการ
+      </div>
+      <div class="col-12">
+        <div class="row q-col-gutter-sm">
+          <div class="col-12 text-weight-medium q-pl-lg">
+            <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
+            1.1 ความสำเร็จของงานที่ได้รับมอบหมาย
+          </div>
+          <div
+            class="col-xs-12 col-sm-11 col-md-10 offset-sm-1 offset-md-1 text-weight-medium text-dark"
+          >
+            ผลผลิตของงานที่คาดหวัง
+          </div>
+
+          <div class="col-xs-12 col-sm-10 col-md-10 offset-sm-1 offset-md-1">
+            <q-card
+              flat
+              bordered
+              :class="[' q-pa-sm bg-grey-1', getBordered(alerts[0].value)]"
+            >
+              <q-list
+                dense
+                v-for="(list, i) in evaluate_expenct_level"
+                :key="i"
+              >
+                <q-item dense tag="label" v-ripple>
+                  <q-item-section>
+                    <q-item-label>{{ list.labal }}</q-item-label>
+                  </q-item-section>
+                  <q-item-section side>
+                    <q-rating
+                      :disable="!status"
+                      v-model="evaluate_expenct_level[i].level"
+                      :val="list.id"
+                      max="5"
+                      size="sm"
+                      color="grey"
+                      :color-selected="store.ratingColors"
+                      label="ระดับการประเมินพฤติกรรม"
+                    >
+                      <template v-slot:tip-1>
+                        <q-tooltip>ต่ำกว่าความคาดหวังมาก (1)</q-tooltip>
+                      </template>
+                      <template v-slot:tip-2>
+                        <q-tooltip>ต่ำกว่าความคาดหวังค่อนข้างมาก (2)</q-tooltip>
+                      </template>
+                      <template v-slot:tip-3>
+                        <q-tooltip>เป็นไปตามความคาดหวัง (3)</q-tooltip>
+                      </template>
+                      <template v-slot:tip-4>
+                        <q-tooltip>สูงว่าความคาดหวังค่อนข้างมาก (4)</q-tooltip>
+                      </template>
+                      <template v-slot:tip-5>
+                        <q-tooltip>สูงกว่าความคาดหวังมาก (5)</q-tooltip>
+                      </template>
+                    </q-rating>
+                  </q-item-section>
+                </q-item>
+                <q-separator class="q-my-xs" v-if="i + 1 < list1_1.length" />
+              </q-list>
+            </q-card>
+          </div>
+          <div
+            class="col-xs-12 col-sm-11 col-md-10 offset-sm-1 offset-md-1 text-weight-medium text-dark"
+          >
+            ผลผลิตของงานที่เกิดขึ้นจริง
+          </div>
+          <div
+            v-if="$q.screen.gt.xs"
+            class="col-xs-12 col-sm-10 col-md-10 offset-sm-1 offset-md-1"
+          >
+            <q-card
+              flat
+              bordered
+              :class="['q-pa-sm bg-grey-1', getBordered(alerts[0].value)]"
+            >
+              <q-list dense v-for="(list, i) in list1_2" :key="i">
+                <q-item dense tag="label" v-ripple v-if="i < checkArray">
+                  <q-item-section>
+                    <!-- <q-item-label>{{ list.label }}</q-item-label> -->
+                    <q-input
+                      :disable="!status"
+                      outlined
+                      dense
+                      v-model="evaluate_ouptut[i].text"
+                      lazy-rules
+                      autogrow
+                      label="ผลผลิตของงานที่เกิดขึ้นจริง"
+                      hide-bottom-space
+                      :row="1"
+                      :rules="evaluate_ouptutRules"
+                    />
+                  </q-item-section>
+                  <q-item-section side>
+                    <q-rating
+                      :disable="!status"
+                      v-model="evaluate_ouptut[i].level"
+                      :val="list.id"
+                      max="5"
+                      size="sm"
+                      color="grey"
+                      :color-selected="store.ratingColors"
+                      label="ระดับการประเมินพฤติกรรม"
+                    >
+                      <template v-slot:tip-1>
+                        <q-tooltip>ต่ำกว่าความคาดหวังมาก (1)</q-tooltip>
+                      </template>
+                      <template v-slot:tip-2>
+                        <q-tooltip>ต่ำกว่าความคาดหวังค่อนข้างมาก (2)</q-tooltip>
+                      </template>
+                      <template v-slot:tip-3>
+                        <q-tooltip>เป็นไปตามความคาดหวัง (3)</q-tooltip>
+                      </template>
+                      <template v-slot:tip-4>
+                        <q-tooltip>สูงว่าความคาดหวังค่อนข้างมาก (4)</q-tooltip>
+                      </template>
+                      <template v-slot:tip-5>
+                        <q-tooltip>สูงกว่าความคาดหวังมาก (5)</q-tooltip>
+                      </template>
+                    </q-rating>
+                  </q-item-section>
+                </q-item>
+                <!-- <q-separator class="q-my-xs" v-if="i + 1 < list1_2.length" /> -->
+              </q-list>
+            </q-card>
+          </div>
+          <div
+            v-else
+            class="col-xs-12 col-sm-10 col-md-10 offset-sm-1 offset-md-1"
+          >
+            <q-card
+              flat
+              bordered
+              :class="['q-pa-sm bg-grey-1', getBordered(alerts[0].value)]"
+            >
+              <q-list dense v-for="(list, i) in list1_2" :key="i">
+                <q-item dense tag="label" v-ripple v-if="i < checkArray">
+                  <q-item-section>
+                    <!-- <q-item-label>{{ list.label }}</q-item-label> -->
+                    <q-input
+                      :disable="!status"
+                      outlined
+                      dense
+                      v-model="evaluate_ouptut[i].text"
+                      lazy-rules
+                      autogrow
+                      label="ผลผลิตของงานที่เกิดขึ้นจริง"
+                      hide-bottom-space
+                      :row="1"
+                      :rules="evaluate_ouptutRules"
+                    />
+                  </q-item-section>
+                </q-item>
+                <q-item dense tag="label" v-ripple v-if="i < checkArray">
+                  <q-item-section>
+                    <q-rating
+                      :disable="!status"
+                      class="justify-center"
+                      v-model="evaluate_ouptut[i].level"
+                      :val="list.id"
+                      max="5"
+                      size="sm"
+                      color="grey"
+                      :color-selected="store.ratingColors"
+                      label="ระดับการประเมินพฤติกรรม"
+                    >
+                      <template v-slot:tip-1>
+                        <q-tooltip>ต่ำกว่าความคาดหวังมาก (1)</q-tooltip>
+                      </template>
+                      <template v-slot:tip-2>
+                        <q-tooltip>ต่ำกว่าความคาดหวังค่อนข้างมาก (2)</q-tooltip>
+                      </template>
+                      <template v-slot:tip-3>
+                        <q-tooltip>เป็นไปตามความคาดหวัง (3)</q-tooltip>
+                      </template>
+                      <template v-slot:tip-4>
+                        <q-tooltip>สูงว่าความคาดหวังค่อนข้างมาก (4)</q-tooltip>
+                      </template>
+                      <template v-slot:tip-5>
+                        <q-tooltip>สูงกว่าความคาดหวังมาก (5)</q-tooltip>
+                      </template>
+                    </q-rating>
+                  </q-item-section>
+                </q-item>
+                <!-- <q-separator class="q-my-xs" v-if="i + 1 < list1_2.length" /> -->
+              </q-list>
+            </q-card>
+          </div>
+
+          <div v-if="$q.screen.gt.xs" class="col-12 col-sm-11">
+            <q-card class="text-weight-medium">
+              <q-list dense>
+                <q-item
+                  dense
+                  tag="label"
+                  v-ripple
+                  :class="getBordered(alerts[2].value)"
+                >
+                  <q-item-section>
+                    <q-item-label>
+                      <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
+                      1.2. ความรู้ความสามารถ</q-item-label
+                    >
+                  </q-item-section>
+                  <q-item-section side>
+                    <q-rating
+                      :disable="!status"
+                      v-model="knowledge_level"
+                      max="5"
+                      size="sm"
+                      color="grey"
+                      :color-selected="store.ratingColors"
+                      label="ระดับการประเมินพฤติกรรม"
+                    >
+                      <template v-slot:tip-1>
+                        <q-tooltip>ต่ำกว่าความคาดหวังมาก (1)</q-tooltip>
+                      </template>
+                      <template v-slot:tip-2>
+                        <q-tooltip>ต่ำกว่าความคาดหวังค่อนข้างมาก (2)</q-tooltip>
+                      </template>
+                      <template v-slot:tip-3>
+                        <q-tooltip>เป็นไปตามความคาดหวัง (3)</q-tooltip>
+                      </template>
+                      <template v-slot:tip-4>
+                        <q-tooltip>สูงว่าความคาดหวังค่อนข้างมาก (4)</q-tooltip>
+                      </template>
+                      <template v-slot:tip-5>
+                        <q-tooltip>สูงกว่าความคาดหวังมาก (5)</q-tooltip>
+                      </template>
+                    </q-rating>
+                  </q-item-section>
+                </q-item>
+              </q-list>
+            </q-card>
+          </div>
+          <div v-else class="col-12 col-sm-11">
+            <q-card
+              bordered
+              class="text-weight-medium"
+              :class="getBordered(alerts[2].value)"
+              style="border-radius: 20px"
+            >
+              <q-list dense>
+                <q-item dense v-ripple>
+                  <q-item-section>
+                    <q-item-label class="text-start">
+                      1.2. ความรู้ความสามารถ</q-item-label
+                    >
+                  </q-item-section>
+                </q-item>
+                <q-separator />
+                <q-item>
+                  <q-item-section>
+                    <q-rating
+                      :disable="!status"
+                      class="justify-center"
+                      v-model="knowledge_level"
+                      max="5"
+                      size="sm"
+                      color="grey"
+                      :color-selected="store.ratingColors"
+                      label="ระดับการประเมินพฤติกรรม"
+                    >
+                      <template v-slot:tip-1>
+                        <q-tooltip>ต่ำกว่าความคาดหวังมาก (1)</q-tooltip>
+                      </template>
+                      <template v-slot:tip-2>
+                        <q-tooltip>ต่ำกว่าความคาดหวังค่อนข้างมาก (2)</q-tooltip>
+                      </template>
+                      <template v-slot:tip-3>
+                        <q-tooltip>เป็นไปตามความคาดหวัง (3)</q-tooltip>
+                      </template>
+                      <template v-slot:tip-4>
+                        <q-tooltip>สูงว่าความคาดหวังค่อนข้างมาก (4)</q-tooltip>
+                      </template>
+                      <template v-slot:tip-5>
+                        <q-tooltip>สูงกว่าความคาดหวังมาก (5)</q-tooltip>
+                      </template>
+                    </q-rating>
+                  </q-item-section>
+                </q-item>
+              </q-list>
+            </q-card>
+          </div>
+
+          <div v-if="$q.screen.gt.xs" class="col-12 col-sm-11">
+            <q-card class="text-weight-medium">
+              <q-list dense>
+                <q-item
+                  dense
+                  tag="label"
+                  v-ripple
+                  :class="getBordered(alerts[3].value)"
+                >
+                  <q-item-section>
+                    <q-item-label>
+                      <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
+                      1.3. ทักษะ</q-item-label
+                    >
+                  </q-item-section>
+                  <q-item-section side>
+                    <q-rating
+                      :disable="!status"
+                      v-model="skill_level"
+                      max="5"
+                      size="sm"
+                      color="grey"
+                      :color-selected="store.ratingColors"
+                      label="ระดับการประเมินพฤติกรรม"
+                    >
+                      <template v-slot:tip-1>
+                        <q-tooltip>ต่ำกว่าความคาดหวังมาก (1)</q-tooltip>
+                      </template>
+                      <template v-slot:tip-2>
+                        <q-tooltip>ต่ำกว่าความคาดหวังค่อนข้างมาก (2)</q-tooltip>
+                      </template>
+                      <template v-slot:tip-3>
+                        <q-tooltip>เป็นไปตามความคาดหวัง (3)</q-tooltip>
+                      </template>
+                      <template v-slot:tip-4>
+                        <q-tooltip>สูงว่าความคาดหวังค่อนข้างมาก (4)</q-tooltip>
+                      </template>
+                      <template v-slot:tip-5>
+                        <q-tooltip>สูงกว่าความคาดหวังมาก (5)</q-tooltip>
+                      </template>
+                    </q-rating>
+                  </q-item-section>
+                </q-item>
+              </q-list>
+            </q-card>
+          </div>
+          <div v-else class="col-12 col-sm-11">
+            <q-card
+              bordered
+              class="text-weight-medium"
+              :class="getBordered(alerts[3].value)"
+              style="border-radius: 20px"
+            >
+              <q-list dense>
+                <q-item dense v-ripple>
+                  <q-item-section>
+                    <q-item-label class="text-start"> 1.3. ทักษะ</q-item-label>
+                  </q-item-section>
+                </q-item>
+                <q-separator />
+                <q-item>
+                  <q-item-section>
+                    <q-rating
+                      :disable="!status"
+                      class="justify-center"
+                      v-model="skill_level"
+                      max="5"
+                      size="sm"
+                      color="grey"
+                      :color-selected="store.ratingColors"
+                      label="ระดับการประเมินพฤติกรรม"
+                    >
+                      <template v-slot:tip-1>
+                        <q-tooltip>ต่ำกว่าความคาดหวังมาก (1)</q-tooltip>
+                      </template>
+                      <template v-slot:tip-2>
+                        <q-tooltip>ต่ำกว่าความคาดหวังค่อนข้างมาก (2)</q-tooltip>
+                      </template>
+                      <template v-slot:tip-3>
+                        <q-tooltip>เป็นไปตามความคาดหวัง (3)</q-tooltip>
+                      </template>
+                      <template v-slot:tip-4>
+                        <q-tooltip>สูงว่าความคาดหวังค่อนข้างมาก (4)</q-tooltip>
+                      </template>
+                      <template v-slot:tip-5>
+                        <q-tooltip>สูงกว่าความคาดหวังมาก (5)</q-tooltip>
+                      </template>
+                    </q-rating>
+                  </q-item-section>
+                </q-item>
+              </q-list>
+            </q-card>
+          </div>
+
+          <div v-if="$q.screen.gt.xs" class="col-12 col-sm-11">
+            <q-card class="text-weight-medium">
+              <q-list dense>
+                <q-item
+                  dense
+                  tag="label"
+                  v-ripple
+                  :class="getBordered(alerts[4].value)"
+                >
+                  <q-item-section>
+                    <q-item-label>
+                      <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
+                      1.4. สมมรถนะ</q-item-label
+                    >
+                  </q-item-section>
+                  <q-item-section side>
+                    <q-rating
+                      :disable="!status"
+                      v-model="competency_level"
+                      max="5"
+                      size="sm"
+                      color="grey"
+                      :color-selected="store.ratingColors"
+                      label="ระดับการประเมินพฤติกรรม"
+                    >
+                      <template v-slot:tip-1>
+                        <q-tooltip>ต่ำกว่าความคาดหวังมาก (1)</q-tooltip>
+                      </template>
+                      <template v-slot:tip-2>
+                        <q-tooltip>ต่ำกว่าความคาดหวังค่อนข้างมาก (2)</q-tooltip>
+                      </template>
+                      <template v-slot:tip-3>
+                        <q-tooltip>เป็นไปตามความคาดหวัง (3)</q-tooltip>
+                      </template>
+                      <template v-slot:tip-4>
+                        <q-tooltip>สูงว่าความคาดหวังค่อนข้างมาก (4)</q-tooltip>
+                      </template>
+                      <template v-slot:tip-5>
+                        <q-tooltip>สูงกว่าความคาดหวังมาก (5)</q-tooltip>
+                      </template>
+                    </q-rating>
+                  </q-item-section>
+                </q-item>
+              </q-list>
+            </q-card>
+          </div>
+          <div v-else class="col-12 col-sm-11">
+            <q-card
+              bordered
+              class="text-weight-medium"
+              :class="getBordered(alerts[4].value)"
+              style="border-radius: 20px"
+            >
+              <q-list dense>
+                <q-item dense v-ripple>
+                  <q-item-section>
+                    <q-item-label class="text-start">
+                      1.4. สมมรถนะ</q-item-label
+                    >
+                  </q-item-section>
+                </q-item>
+                <q-separator />
+                <q-item>
+                  <q-item-section>
+                    <q-rating
+                      :disable="!status"
+                      class="justify-center"
+                      v-model="competency_level"
+                      max="5"
+                      size="sm"
+                      color="grey"
+                      :color-selected="store.ratingColors"
+                      label="ระดับการประเมินพฤติกรรม"
+                    >
+                      <template v-slot:tip-1>
+                        <q-tooltip>ต่ำกว่าความคาดหวังมาก (1)</q-tooltip>
+                      </template>
+                      <template v-slot:tip-2>
+                        <q-tooltip>ต่ำกว่าความคาดหวังค่อนข้างมาก (2)</q-tooltip>
+                      </template>
+                      <template v-slot:tip-3>
+                        <q-tooltip>เป็นไปตามความคาดหวัง (3)</q-tooltip>
+                      </template>
+                      <template v-slot:tip-4>
+                        <q-tooltip>สูงว่าความคาดหวังค่อนข้างมาก (4)</q-tooltip>
+                      </template>
+                      <template v-slot:tip-5>
+                        <q-tooltip>สูงกว่าความคาดหวังมาก (5)</q-tooltip>
+                      </template>
+                    </q-rating>
+                  </q-item-section>
+                </q-item>
+              </q-list>
+            </q-card>
+          </div>
+
+          <div v-if="$q.screen.gt.xs" class="col-12 col-sm-11">
+            <q-card class="text-weight-medium">
+              <q-list dense>
+                <q-item
+                  dense
+                  tag="label"
+                  v-ripple
+                  :class="getBordered(alerts[5].value)"
+                >
+                  <q-item-section>
+                    <q-item-label>
+                      <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
+                      1.5. ความสามารถในการเรียนรู้งาน</q-item-label
+                    >
+                  </q-item-section>
+                  <q-item-section side>
+                    <q-rating
+                      :disable="!status"
+                      v-model="learn_level"
+                      max="5"
+                      size="sm"
+                      color="grey"
+                      :color-selected="store.ratingColors"
+                      label="ระดับการประเมินพฤติกรรม"
+                    >
+                      <template v-slot:tip-1>
+                        <q-tooltip>ต่ำกว่าความคาดหวังมาก (1)</q-tooltip>
+                      </template>
+                      <template v-slot:tip-2>
+                        <q-tooltip>ต่ำกว่าความคาดหวังค่อนข้างมาก (2)</q-tooltip>
+                      </template>
+                      <template v-slot:tip-3>
+                        <q-tooltip>เป็นไปตามความคาดหวัง (3)</q-tooltip>
+                      </template>
+                      <template v-slot:tip-4>
+                        <q-tooltip>สูงว่าความคาดหวังค่อนข้างมาก (4)</q-tooltip>
+                      </template>
+                      <template v-slot:tip-5>
+                        <q-tooltip>สูงกว่าความคาดหวังมาก (5)</q-tooltip>
+                      </template>
+                    </q-rating>
+                  </q-item-section>
+                </q-item>
+              </q-list>
+            </q-card>
+          </div>
+          <div v-else class="col-12 col-sm-11">
+            <q-card
+              bordered
+              class="text-weight-medium"
+              :class="getBordered(alerts[5].value)"
+              style="border-radius: 20px"
+            >
+              <q-list dense>
+                <q-item dense v-ripple>
+                  <q-item-section>
+                    <q-item-label class="text-start">
+                      1.5. ความสามารถในการเรียนรู้งาน</q-item-label
+                    >
+                  </q-item-section>
+                </q-item>
+                <q-separator />
+                <q-item>
+                  <q-item-section>
+                    <q-rating
+                      :disable="!status"
+                      class="justify-center"
+                      v-model="learn_level"
+                      max="5"
+                      size="sm"
+                      color="grey"
+                      :color-selected="store.ratingColors"
+                      label="ระดับการประเมินพฤติกรรม"
+                    >
+                      <template v-slot:tip-1>
+                        <q-tooltip>ต่ำกว่าความคาดหวังมาก (1)</q-tooltip>
+                      </template>
+                      <template v-slot:tip-2>
+                        <q-tooltip>ต่ำกว่าความคาดหวังค่อนข้างมาก (2)</q-tooltip>
+                      </template>
+                      <template v-slot:tip-3>
+                        <q-tooltip>เป็นไปตามความคาดหวัง (3)</q-tooltip>
+                      </template>
+                      <template v-slot:tip-4>
+                        <q-tooltip>สูงว่าความคาดหวังค่อนข้างมาก (4)</q-tooltip>
+                      </template>
+                      <template v-slot:tip-5>
+                        <q-tooltip>สูงกว่าความคาดหวังมาก (5)</q-tooltip>
+                      </template>
+                    </q-rating>
+                  </q-item-section>
+                </q-item>
+              </q-list>
+            </q-card>
+          </div>
+
+          <div v-if="$q.screen.gt.xs" class="col-12 col-sm-11">
+            <q-card class="text-weight-medium">
+              <q-list dense>
+                <q-item
+                  dense
+                  tag="label"
+                  v-ripple
+                  :class="getBordered(alerts[6].value)"
+                >
+                  <q-item-section>
+                    <q-item-label>
+                      <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
+                      1.6.
+                      ความสามารถในการปรับใช้ความรู้กับงานในหน้าที่</q-item-label
+                    >
+                  </q-item-section>
+                  <q-item-section side>
+                    <q-rating
+                      :disable="!status"
+                      v-model="apply_level"
+                      max="5"
+                      size="sm"
+                      color="grey"
+                      :color-selected="store.ratingColors"
+                      label="ระดับการประเมินพฤติกรรม"
+                    >
+                      <template v-slot:tip-1>
+                        <q-tooltip>ต่ำกว่าความคาดหวังมาก (1)</q-tooltip>
+                      </template>
+                      <template v-slot:tip-2>
+                        <q-tooltip>ต่ำกว่าความคาดหวังค่อนข้างมาก (2)</q-tooltip>
+                      </template>
+                      <template v-slot:tip-3>
+                        <q-tooltip>เป็นไปตามความคาดหวัง (3)</q-tooltip>
+                      </template>
+                      <template v-slot:tip-4>
+                        <q-tooltip>สูงว่าความคาดหวังค่อนข้างมาก (4)</q-tooltip>
+                      </template>
+                      <template v-slot:tip-5>
+                        <q-tooltip>สูงกว่าความคาดหวังมาก (5)</q-tooltip>
+                      </template>
+                    </q-rating>
+                  </q-item-section>
+                </q-item>
+              </q-list>
+            </q-card>
+          </div>
+          <div v-else class="col-12 col-sm-11">
+            <q-card
+              bordered
+              class="text-weight-medium"
+              :class="getBordered(alerts[6].value)"
+              style="border-radius: 20px"
+            >
+              <q-list dense>
+                <q-item dense v-ripple>
+                  <q-item-section>
+                    <q-item-label class="text-start">
+                      1.6.
+                      ความสามารถในการปรับใช้ความรู้กับงานในหน้าที่</q-item-label
+                    >
+                  </q-item-section>
+                </q-item>
+                <q-separator />
+                <q-item>
+                  <q-item-section>
+                    <q-rating
+                      :disable="!status"
+                      class="justify-center"
+                      v-model="apply_level"
+                      max="5"
+                      size="sm"
+                      color="grey"
+                      :color-selected="store.ratingColors"
+                      label="ระดับการประเมินพฤติกรรม"
+                    >
+                      <template v-slot:tip-1>
+                        <q-tooltip>ต่ำกว่าความคาดหวังมาก (1)</q-tooltip>
+                      </template>
+                      <template v-slot:tip-2>
+                        <q-tooltip>ต่ำกว่าความคาดหวังค่อนข้างมาก (2)</q-tooltip>
+                      </template>
+                      <template v-slot:tip-3>
+                        <q-tooltip>เป็นไปตามความคาดหวัง (3)</q-tooltip>
+                      </template>
+                      <template v-slot:tip-4>
+                        <q-tooltip>สูงว่าความคาดหวังค่อนข้างมาก (4)</q-tooltip>
+                      </template>
+                      <template v-slot:tip-5>
+                        <q-tooltip>สูงกว่าความคาดหวังมาก (5)</q-tooltip>
+                      </template>
+                    </q-rating>
+                  </q-item-section>
+                </q-item>
+              </q-list>
+            </q-card>
+          </div>
+
+          <!-- <div v-if="$q.screen.gt.xs" class="col-12 col-sm-11">
+          <q-card class="text-weight-medium">
+            <q-list dense>
+              <q-item
+                dense
+                tag="label"
+                v-ripple
+                :class="getBordered(alerts[7].value)"
+              >
+                <q-item-section>
+                  <q-item-label>
+                    <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
+                    1.7. ความสำเร็จของงานที่ได้รับมอบหมาย</q-item-label
+                  >
+                </q-item-section>
+                <q-item-section side>
+                  <q-rating
+                    v-model="success_level"
+                    max="5"
+                    size="sm"
+                    color="grey"
+                    :color-selected="store.ratingColors"
+                    label="ระดับการประเมินพฤติกรรม"
+                  >
+                    <template v-slot:tip-1>
+                      <q-tooltip>ต่ำกว่าความคาดหวังมาก (1)</q-tooltip>
+                    </template>
+                    <template v-slot:tip-2>
+                      <q-tooltip>ต่ำกว่าความคาดหวังค่อนข้างมาก (2)</q-tooltip>
+                    </template>
+                    <template v-slot:tip-3>
+                      <q-tooltip>เป็นไปตามความคาดหวัง (3)</q-tooltip>
+                    </template>
+                    <template v-slot:tip-4>
+                      <q-tooltip>สูงว่าความคาดหวังค่อนข้างมาก (4)</q-tooltip>
+                    </template>
+                    <template v-slot:tip-5>
+                      <q-tooltip>สูงกว่าความคาดหวังมาก (5)</q-tooltip>
+                    </template>
+                  </q-rating>
+                </q-item-section>
+              </q-item>
+            </q-list>
+          </q-card>
+        </div>
+        <div v-else class="col-12 col-sm-11">
+          <q-card
+            bordered
+            class="text-weight-medium"
+            :class="getBordered(alerts[7].value)"
+            style="border-radius: 20px"
+          >
+            <q-list dense>
+              <q-item dense v-ripple>
+                <q-item-section>
+                  <q-item-label class="text-start">
+                    1.7. ความสำเร็จของงานที่ได้รับมอบหมาย</q-item-label
+                  >
+                </q-item-section>
+              </q-item>
+              <q-separator />
+              <q-item>
+                <q-item-section>
+                  <q-rating
+                    class="justify-center"
+                    v-model="success_level"
+                    max="5"
+                    size="sm"
+                    color="grey"
+                    :color-selected="store.ratingColors"
+                    label="ระดับการประเมินพฤติกรรม"
+                  >
+                    <template v-slot:tip-1>
+                      <q-tooltip>ต่ำกว่าความคาดหวังมาก (1)</q-tooltip>
+                    </template>
+                    <template v-slot:tip-2>
+                      <q-tooltip>ต่ำกว่าความคาดหวังค่อนข้างมาก (2)</q-tooltip>
+                    </template>
+                    <template v-slot:tip-3>
+                      <q-tooltip>เป็นไปตามความคาดหวัง (3)</q-tooltip>
+                    </template>
+                    <template v-slot:tip-4>
+                      <q-tooltip>สูงว่าความคาดหวังค่อนข้างมาก (4)</q-tooltip>
+                    </template>
+                    <template v-slot:tip-5>
+                      <q-tooltip>สูงกว่าความคาดหวังมาก (5)</q-tooltip>
+                    </template>
+                  </q-rating>
+                </q-item-section>
+              </q-item>
+            </q-list>
+          </q-card>
+        </div> -->
+
+          <div v-if="$q.screen.gt.xs" class="col-12 col-sm-11">
+            <q-card class="text-weight-medium">
+              <q-list dense>
+                <q-item dense tag="label" v-ripple>
+                  <q-item-section>
+                    <q-item-label>
+                      <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
+                      1.7 อื่นๆ<q-checkbox
+                        class="q-ml-sm"
+                        dense
+                        :disable="!status"
+                        v-model="etc"
+                        @click="
+                          (achievement_other.text = ''),
+                            (achievement_other.level = 0)
+                        "
+                    /></q-item-label>
+                  </q-item-section>
+                </q-item>
+              </q-list>
+            </q-card>
+            <div class="row">
+              <div
+                v-if="etc"
+                class="col-xs-12 col-sm-10 col-md-11 offset-sm-1 offset-md-1"
+              >
+                <q-card flat bordered :class="'q-pa-sm bg-grey-1'">
+                  <q-list dense>
+                    <q-item dense tag="label" v-ripple>
+                      <q-item-section>
+                        <!-- <q-item-label>{{ list.label }}</q-item-label> -->
+                        <q-input
+                          :disable="!status"
+                          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-section>
+                      <q-item-section side>
+                        <q-rating
+                          :disable="!status"
+                          v-model="achievement_other.level"
+                          max="5"
+                          size="sm"
+                          color="grey"
+                          :color-selected="store.ratingColors"
+                          label="ระดับการประเมินพฤติกรรม"
+                        >
+                          <template v-slot:tip-1>
+                            <q-tooltip>ต่ำกว่าความคาดหวังมาก (1)</q-tooltip>
+                          </template>
+                          <template v-slot:tip-2>
+                            <q-tooltip
+                              >ต่ำกว่าความคาดหวังค่อนข้างมาก (2)</q-tooltip
+                            >
+                          </template>
+                          <template v-slot:tip-3>
+                            <q-tooltip>เป็นไปตามความคาดหวัง (3)</q-tooltip>
+                          </template>
+                          <template v-slot:tip-4>
+                            <q-tooltip
+                              >สูงว่าความคาดหวังค่อนข้างมาก (4)</q-tooltip
+                            >
+                          </template>
+                          <template v-slot:tip-5>
+                            <q-tooltip>สูงกว่าความคาดหวังมาก (5)</q-tooltip>
+                          </template>
+                        </q-rating>
+                      </q-item-section>
+                    </q-item>
+                    <!-- <q-separator class="q-my-xs" v-if="i + 1 < list1_2.length" /> -->
+                  </q-list>
+                </q-card>
+              </div>
+            </div>
+          </div>
+
+          <div
+            v-else
+            class="col-xs-12 col-sm-10 col-md-10 offset-sm-1 offset-md-1"
+          >
+            <div class="q-pb-sm text-weight-medium text-dark">
+              <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
+              1.8 อื่นๆ<q-checkbox
+                :disable="!status"
+                class="q-ml-sm"
+                dense
+                v-model="etc"
+                @click="
+                  (achievement_other.text = ''), (achievement_other.level = 0)
+                "
+              />
+            </div>
+            <q-card v-if="etc" flat bordered :class="'q-pa-sm bg-grey-1'">
+              <q-list dense>
+                <q-item dense tag="label" v-ripple>
+                  <q-item-section>
+                    <!-- <q-item-label>{{ list.label }}</q-item-label> -->
+                    <q-input
+                      :disable="!status"
+                      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-section>
+                </q-item>
+                <q-item dense tag="label" v-ripple>
+                  <q-item-section>
+                    <q-rating
+                      :disable="!status"
+                      class="justify-center"
+                      v-model="achievement_other.level"
+                      max="5"
+                      size="sm"
+                      color="grey"
+                      :color-selected="store.ratingColors"
+                      label="ระดับการประเมินพฤติกรรม"
+                    >
+                      <template v-slot:tip-1>
+                        <q-tooltip>ต่ำกว่าความคาดหวังมาก (1)</q-tooltip>
+                      </template>
+                      <template v-slot:tip-2>
+                        <q-tooltip>ต่ำกว่าความคาดหวังค่อนข้างมาก (2)</q-tooltip>
+                      </template>
+                      <template v-slot:tip-3>
+                        <q-tooltip>เป็นไปตามความคาดหวัง (3)</q-tooltip>
+                      </template>
+                      <template v-slot:tip-4>
+                        <q-tooltip>สูงว่าความคาดหวังค่อนข้างมาก (4)</q-tooltip>
+                      </template>
+                      <template v-slot:tip-5>
+                        <q-tooltip>สูงกว่าความคาดหวังมาก (5)</q-tooltip>
+                      </template>
+                    </q-rating>
+                  </q-item-section>
+                </q-item>
+                <!-- <q-separator class="q-my-xs" v-if="i + 1 < list1_2.length" /> -->
+              </q-list>
+            </q-card>
+          </div>
+        </div>
+      </div>
+      <div class="col-12">
+        <div class="row justify-center q-mb-sm">
+          <div
+            class="col-12 text-top0 row items-center q-pl-md text-weight-medium text-dark"
+          >
+            <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
+            จุดเด่น (ไม่เกิน 5 บรรทัด)
+          </div>
+          <div class="col-xs-12 col-sm-11 col-md-10">
+            <q-input
+              :disable="!status"
+              outlined
+              dense
+              v-model="achievement_strength_desc"
+              lazy-rules
+              type="textarea"
+              label="กรอกจุดเด่น"
+              hide-bottom-space
+              :row="5"
+              :rules="achievement_strengthRules"
+              ref="achievement_strengthRef"
+            />
+          </div>
+        </div>
+        <div class="row justify-center q-mb-sm text-weight-medium text-dark">
+          <div class="col-12 text-top0 row items-center q-pl-md">
+            <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
+            สิ่งที่ควรปรับปรุง (ไม่เกิน 5 บรรทัด)
+          </div>
+          <q-input
+            :disable="!status"
+            outlined
+            dense
+            v-model="achievement_improve_desc"
+            class="col-xs-12 col-sm-11 col-md-10"
+            type="textarea"
+            hide-bottom-space
+            label="กรอกสิ่งที่ควรปรับปรุง"
+            :row="5"
+          />
+        </div>
+      </div>
+
+      <div class="col-12 text-weight-medium">
+        <q-avatar class="bg-grey-2 q-mr-sm" size="28px">2</q-avatar>
+        พฤติกรรมของผู้ทดลองปฏิบัติบัติหน้าที่ราชการ
+      </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.1 ความประพฤติ
+        </div>
+
+        <q-card
+          flat
+          bordered
+          :class="[
+            'col-xs-12 col-sm-11 col-md-10 offset-md-1 q-pa-sm bg-grey-1',
+            getBordered(alerts[8].value),
+          ]"
+        >
+          <q-list dense v-for="(list, i) in list2_1" :key="i">
+            <q-item dense tag="label" v-ripple>
+              <q-item-section>
+                <q-item-label>{{ list.label }}</q-item-label>
+              </q-item-section>
+              <q-item-section side>
+                <q-rating
+                  :disable="!status"
+                  v-model="conduct_level[i]"
+                  :val="list.id"
+                  max="5"
+                  size="sm"
+                  color="grey"
+                  :color-selected="store.ratingColors"
+                  label="ระดับการประเมินพฤติกรรม"
+                >
+                  <template v-slot:tip-1>
+                    <q-tooltip>ต่ำกว่าความคาดหวังมาก (1)</q-tooltip>
+                  </template>
+                  <template v-slot:tip-2>
+                    <q-tooltip>ต่ำกว่าความคาดหวังค่อนข้างมาก (2)</q-tooltip>
+                  </template>
+                  <template v-slot:tip-3>
+                    <q-tooltip>เป็นไปตามความคาดหวัง (3)</q-tooltip>
+                  </template>
+                  <template v-slot:tip-4>
+                    <q-tooltip>สูงว่าความคาดหวังค่อนข้างมาก (4)</q-tooltip>
+                  </template>
+                  <template v-slot:tip-5>
+                    <q-tooltip>สูงกว่าความคาดหวังมาก (5)</q-tooltip>
+                  </template>
+                </q-rating>
+              </q-item-section>
+            </q-item>
+            <q-separator class="q-my-xs" v-if="i + 1 < list2_1.length" />
+          </q-list>
+        </q-card>
+      </div>
+
+      <div class="col-12 row">
+        <div class="col-12 text-top0 row items-center q-pl-lg">
+          <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
+          2.2 ความมีคุณธรรมจริยธรรม
+        </div>
+        <q-card
+          flat
+          bordered
+          :class="[
+            'col-xs-12 col-sm-11 col-md-10 offset-md-1 q-pa-sm bg-grey-1',
+            getBordered(alerts[9].value),
+          ]"
+        >
+          <q-list dense v-for="(list, i) in list2_2" :key="i">
+            <q-item dense tag="label" v-ripple>
+              <q-item-section>
+                <q-item-label>{{ list.label }}</q-item-label>
+              </q-item-section>
+              <q-item-section side>
+                <q-rating
+                  :disable="!status"
+                  v-model="moral_level[i]"
+                  :val="list.id"
+                  max="5"
+                  size="sm"
+                  color="grey"
+                  :color-selected="store.ratingColors"
+                  label="ระดับการประเมินพฤติกรรม"
+                >
+                  <template v-slot:tip-1>
+                    <q-tooltip>ต่ำกว่าความคาดหวังมาก (1)</q-tooltip>
+                  </template>
+                  <template v-slot:tip-2>
+                    <q-tooltip>ต่ำกว่าความคาดหวังค่อนข้างมาก (2)</q-tooltip>
+                  </template>
+                  <template v-slot:tip-3>
+                    <q-tooltip>เป็นไปตามความคาดหวัง (3)</q-tooltip>
+                  </template>
+                  <template v-slot:tip-4>
+                    <q-tooltip>สูงว่าความคาดหวังค่อนข้างมาก (4)</q-tooltip>
+                  </template>
+                  <template v-slot:tip-5>
+                    <q-tooltip>สูงกว่าความคาดหวังมาก (5)</q-tooltip>
+                  </template>
+                </q-rating>
+              </q-item-section>
+            </q-item>
+            <q-separator class="q-my-xs" v-if="i + 1 < list2_2.length" />
+          </q-list>
+        </q-card>
+      </div>
+
+      <div class="col-12 row">
+        <div class="col-12 text-top0 row items-center q-pl-lg">
+          <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
+          2.3 การรักษาวินัย
+        </div>
+        <q-card
+          flat
+          bordered
+          :class="[
+            'col-xs-12 col-sm-11 col-md-10 offset-md-1 q-pa-sm bg-grey-1',
+            getBordered(alerts[10].value),
+          ]"
+        >
+          <q-list dense v-for="(list, i) in list2_3" :key="i">
+            <q-item dense tag="label" v-ripple>
+              <q-item-section>
+                <q-item-label>{{ list.label }}</q-item-label>
+              </q-item-section>
+              <q-item-section side>
+                <q-rating
+                  :disable="!status"
+                  v-model="discipline_level[i]"
+                  :val="list.id"
+                  max="5"
+                  size="sm"
+                  color="grey"
+                  :color-selected="store.ratingColors"
+                  label="ระดับการประเมินพฤติกรรม"
+                >
+                  <template v-slot:tip-1>
+                    <q-tooltip>ต่ำกว่าความคาดหวังมาก (1)</q-tooltip>
+                  </template>
+                  <template v-slot:tip-2>
+                    <q-tooltip>ต่ำกว่าความคาดหวังค่อนข้างมาก (2)</q-tooltip>
+                  </template>
+                  <template v-slot:tip-3>
+                    <q-tooltip>เป็นไปตามความคาดหวัง (3)</q-tooltip>
+                  </template>
+                  <template v-slot:tip-4>
+                    <q-tooltip>สูงว่าความคาดหวังค่อนข้างมาก (4)</q-tooltip>
+                  </template>
+                  <template v-slot:tip-5>
+                    <q-tooltip>สูงกว่าความคาดหวังมาก (5)</q-tooltip>
+                  </template>
+                </q-rating>
+              </q-item-section>
+            </q-item>
+            <q-separator class="q-my-xs" v-if="i + 1 < list2_3.length" />
+          </q-list>
+        </q-card>
+      </div>
+
+      <div v-if="$q.screen.gt.xs" class="col-12 col-sm-11">
+        <q-card class="text-weight-medium">
+          <q-list dense>
+            <q-item dense tag="label" v-ripple>
+              <q-item-section>
+                <q-item-label class="q-pl-sm">
+                  <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
+                  2.4 อื่นๆ<q-checkbox
+                    :disable="!status"
+                    class="q-ml-sm"
+                    dense
+                    v-model="etc2"
+                    @click="
+                      (behavio_orther.text = ''), (behavio_orther.level = 0)
+                    "
+                /></q-item-label>
+              </q-item-section>
+            </q-item>
+          </q-list>
+        </q-card>
+        <div class="row">
+          <div
+            v-if="etc2"
+            class="col-xs-12 col-sm-10 col-md-11 offset-sm-1 offset-md-1"
+          >
+            <q-card flat bordered :class="'q-pa-sm bg-grey-1'">
+              <q-list dense>
+                <q-item dense tag="label" v-ripple>
+                  <q-item-section>
+                    <!-- <q-item-label>{{ list.label }}</q-item-label> -->
+                    <q-input
+                      :disable="!status"
+                      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-section>
+                  <q-item-section side>
+                    <q-rating
+                      :disable="!status"
+                      v-model="behavio_orther.level"
+                      max="5"
+                      size="sm"
+                      color="grey"
+                      :color-selected="store.ratingColors"
+                      label="ระดับการประเมินพฤติกรรม"
+                    >
+                      <template v-slot:tip-1>
+                        <q-tooltip>ต่ำกว่าความคาดหวังมาก (1)</q-tooltip>
+                      </template>
+                      <template v-slot:tip-2>
+                        <q-tooltip>ต่ำกว่าความคาดหวังค่อนข้างมาก (2)</q-tooltip>
+                      </template>
+                      <template v-slot:tip-3>
+                        <q-tooltip>เป็นไปตามความคาดหวัง (3)</q-tooltip>
+                      </template>
+                      <template v-slot:tip-4>
+                        <q-tooltip>สูงว่าความคาดหวังค่อนข้างมาก (4)</q-tooltip>
+                      </template>
+                      <template v-slot:tip-5>
+                        <q-tooltip>สูงกว่าความคาดหวังมาก (5)</q-tooltip>
+                      </template>
+                    </q-rating>
+                  </q-item-section>
+                </q-item>
+                <!-- <q-separator class="q-my-xs" v-if="i + 1 < list1_2.length" /> -->
+              </q-list>
+            </q-card>
+          </div>
+        </div>
+      </div>
+
+      <div v-else class="col-xs-12 col-sm-10 col-md-10 offset-sm-1 offset-md-1">
+        <div class="q-pb-sm text-weight-medium text-dark">
+          <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
+          2.4 อื่นๆ<q-checkbox
+            :disable="!status"
+            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="'q-pa-sm bg-grey-1'">
+          <q-list dense>
+            <q-item dense tag="label" v-ripple>
+              <q-item-section>
+                <!-- <q-item-label>{{ list.label }}</q-item-label> -->
+                <q-input
+                  :disable="!status"
+                  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-section>
+            </q-item>
+            <q-item dense tag="label" v-ripple>
+              <q-item-section>
+                <q-rating
+                  :disable="!status"
+                  class="justify-center"
+                  v-model="behavio_orther.level"
+                  max="5"
+                  size="sm"
+                  color="grey"
+                  :color-selected="store.ratingColors"
+                  label="ระดับการประเมินพฤติกรรม"
+                >
+                  <template v-slot:tip-1>
+                    <q-tooltip>ต่ำกว่าความคาดหวังมาก (1)</q-tooltip>
+                  </template>
+                  <template v-slot:tip-2>
+                    <q-tooltip>ต่ำกว่าความคาดหวังค่อนข้างมาก (2)</q-tooltip>
+                  </template>
+                  <template v-slot:tip-3>
+                    <q-tooltip>เป็นไปตามความคาดหวัง (3)</q-tooltip>
+                  </template>
+                  <template v-slot:tip-4>
+                    <q-tooltip>สูงว่าความคาดหวังค่อนข้างมาก (4)</q-tooltip>
+                  </template>
+                  <template v-slot:tip-5>
+                    <q-tooltip>สูงกว่าความคาดหวังมาก (5)</q-tooltip>
+                  </template>
+                </q-rating>
+              </q-item-section>
+            </q-item>
+            <!-- <q-separator class="q-my-xs" v-if="i + 1 < list1_2.length" /> -->
+          </q-list>
+        </q-card>
+      </div>
+
+      <div class="col-12">
+        <div class="row justify-center q-mb-sm">
+          <div
+            class="col-12 text-top0 row items-center q-pl-lg text-weight-medium text-dark"
+          >
+            <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
+            จุดเด่น (ไม่เกิน 5 บรรทัด)
+          </div>
+          <div class="col-xs-12 col-sm-11 col-md-10">
+            <q-input
+              :disable="!status"
+              outlined
+              dense
+              v-model="behavior_strength_desc"
+              class="col-xs-12 col-sm-11 col-md-10"
+              lazy-rules
+              type="textarea"
+              label="กรอกจุดเด่น"
+              hide-bottom-space
+              :row="5"
+              :rules="behavio_strengthRules"
+              ref="behavio_strengthRef"
+            />
+          </div>
+        </div>
+        <div class="row justify-center q-mb-sm text-weight-medium text-dark">
+          <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
+            :disable="!status"
+            outlined
+            dense
+            v-model="behavior_improve_desc"
+            class="col-xs-12 col-sm-11 col-md-10"
+            type="textarea"
+            hide-bottom-space
+            label="กรอกสิ่งที่ควรปรับปรุง"
+            :row="5"
+          />
+        </div>
+      </div>
+
+      <div class="col-12 text-weight-medium">
+        <q-avatar class="bg-grey-2 q-mr-sm" size="28px">3</q-avatar>
+        การพัฒนาผู้ทดลองปฏิบัติบัติหน้าที่ราชการ
+      </div>
+
+      <div class="col-12">
+        <q-card
+          flat
+          bordered
+          class="col-xs-12 col-sm-11 col-md-11 q-pa-sm bg-grey-1"
+        >
+          <q-list v-if="$q.screen.gt.xs" dense>
+            <q-item
+              dense
+              tag="label"
+              v-ripple
+              :class="getBordered(alerts[11].value)"
+            >
+              <q-item-section>
+                <q-item-label>1. การปฐมนิเทศ</q-item-label>
+              </q-item-section>
+              <q-item-section side>
+                <div class="row">
+                  <q-radio
+                    :disable="!status"
+                    checked-icon="task_alt"
+                    unchecked-icon="panorama_fish_eye"
+                    v-model="orientation"
+                    val="1"
+                    label="ดำเนินการเเล้ว"
+                  />
+                  <q-radio
+                    :disable="!status"
+                    checked-icon="task_alt"
+                    unchecked-icon="panorama_fish_eye"
+                    v-model="orientation"
+                    val="0"
+                    label=" ยังไม่ได้ดำเนินการ"
+                  />
+                </div>
+              </q-item-section>
+            </q-item>
+
+            <q-separator class="q-my-xs" />
+
+            <q-item
+              dense
+              tag="label"
+              v-ripple
+              :class="getBordered(alerts[12].value)"
+            >
+              <q-item-section>
+                <q-item-label>2. การเรียนรู้ด้วยตนเอง</q-item-label>
+              </q-item-section>
+
+              <q-item-section side>
+                <div class="row">
+                  <q-radio
+                    :disable="!status"
+                    checked-icon="task_alt"
+                    unchecked-icon="panorama_fish_eye"
+                    v-model="self_learning"
+                    val="1"
+                    label="ดำเนินการเเล้ว"
+                  />
+                  <q-radio
+                    :disable="!status"
+                    checked-icon="task_alt"
+                    unchecked-icon="panorama_fish_eye"
+                    v-model="self_learning"
+                    val="0"
+                    label=" ยังไม่ได้ดำเนินการ"
+                  />
+                </div>
+              </q-item-section>
+            </q-item>
+
+            <q-separator class="q-my-xs" />
+            <q-item
+              dense
+              tag="label"
+              v-ripple
+              :class="getBordered(alerts[13].value)"
+            >
+              <q-item-section>
+                <q-item-label>3. การอบรมสัมนาร่วมกัน</q-item-label>
+              </q-item-section>
+              <q-item-section side>
+                <div class="row">
+                  <q-radio
+                    :disable="!status"
+                    checked-icon="task_alt"
+                    unchecked-icon="panorama_fish_eye"
+                    v-model="training_seminar"
+                    val="1"
+                    label="ดำเนินการเเล้ว"
+                  />
+                  <q-radio
+                    :disable="!status"
+                    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
+                    :disable="!status"
+                    checked-icon="task_alt"
+                    unchecked-icon="panorama_fish_eye"
+                    v-model="other_training"
+                    val="1"
+                    label="ดำเนินการเเล้ว"
+                  />
+                  <q-radio
+                    :disable="!status"
+                    checked-icon="task_alt"
+                    unchecked-icon="panorama_fish_eye"
+                    v-model="other_training"
+                    val="0"
+                    label=" ยังไม่ได้ดำเนินการ"
+                  />
+                </div>
+              </q-item-section>
+            </q-item>
+          </q-list>
+
+          <div v-else>
+            <q-list
+              dense
+              :class="[getBordered(alerts[11].value), 'item-custom']"
+            >
+              <q-item dense>
+                <q-item-section>
+                  <q-item-label>1. การปฐมนิเทศ</q-item-label>
+                </q-item-section>
+              </q-item>
+              <q-separator />
+              <q-item
+                dense
+                tag="label"
+                style="padding-left: 0 !important; padding-right: 0 !important"
+              >
+                <q-item-section>
+                  <q-radio
+                    :disable="!status"
+                    checked-icon="task_alt"
+                    unchecked-icon="panorama_fish_eye"
+                    v-model="orientation"
+                    val="1"
+                    label="ดำเนินการเเล้ว"
+                  />
+                </q-item-section>
+                <q-item-section>
+                  <q-radio
+                    :disable="!status"
+                    checked-icon="task_alt"
+                    unchecked-icon="panorama_fish_eye"
+                    v-model="orientation"
+                    val="0"
+                    label=" ยังไม่ได้ดำเนินการ"
+                  />
+                </q-item-section>
+              </q-item>
+            </q-list>
+            <q-separator class="q-my-xs" />
+            <q-list
+              dense
+              :class="[getBordered(alerts[11].value), 'item-custom']"
+            >
+              <q-item dense>
+                <q-item-section>
+                  <q-item-label>2. การเรียนรู้ด้วยตนเอง</q-item-label>
+                </q-item-section>
+              </q-item>
+              <q-separator />
+              <q-item
+                dense
+                tag="label"
+                style="padding-left: 0 !important; padding-right: 0 !important"
+              >
+                <q-item-section>
+                  <q-radio
+                    :disable="!status"
+                    checked-icon="task_alt"
+                    unchecked-icon="panorama_fish_eye"
+                    v-model="self_learning"
+                    val="1"
+                    label="ดำเนินการเเล้ว"
+                  />
+                </q-item-section>
+                <q-item-section>
+                  <q-radio
+                    :disable="!status"
+                    checked-icon="task_alt"
+                    unchecked-icon="panorama_fish_eye"
+                    v-model="self_learning"
+                    val="0"
+                    label=" ยังไม่ได้ดำเนินการ"
+                  />
+                </q-item-section>
+              </q-item>
+            </q-list>
+            <q-separator class="q-my-xs" />
+            <q-list
+              dense
+              :class="[getBordered(alerts[11].value), 'item-custom']"
+            >
+              <q-item dense>
+                <q-item-section>
+                  <q-item-label>3. การอบรมสัมนาร่วมกัน</q-item-label>
+                </q-item-section>
+              </q-item>
+              <q-separator />
+              <q-item
+                dense
+                tag="label"
+                style="padding-left: 0 !important; padding-right: 0 !important"
+              >
+                <q-item-section>
+                  <q-radio
+                    :disable="!status"
+                    checked-icon="task_alt"
+                    unchecked-icon="panorama_fish_eye"
+                    v-model="training_seminar"
+                    val="1"
+                    label="ดำเนินการเเล้ว"
+                  />
+                </q-item-section>
+                <q-item-section>
+                  <q-radio
+                    :disable="!status"
+                    checked-icon="task_alt"
+                    unchecked-icon="panorama_fish_eye"
+                    v-model="training_seminar"
+                    val="0"
+                    label=" ยังไม่ได้ดำเนินการ"
+                  />
+                </q-item-section>
+              </q-item>
+            </q-list>
+            <q-separator class="q-my-xs" />
+            <q-list dense :class="'item-custom'">
+              <q-item dense>
+                <q-item-section>
+                  <q-item-label
+                    >4. การอบรมอื่น ๆ ตามที่หน่วยงานกำหนด (ถ้ามี)</q-item-label
+                  >
+                </q-item-section>
+              </q-item>
+              <q-separator />
+              <q-item
+                dense
+                tag="label"
+                style="padding-left: 0 !important; padding-right: 0 !important"
+              >
+                <q-item-section>
+                  <q-radio
+                    :disable="!status"
+                    checked-icon="task_alt"
+                    unchecked-icon="panorama_fish_eye"
+                    v-model="other_training"
+                    val="1"
+                    label="ดำเนินการเเล้ว"
+                  />
+                </q-item-section>
+                <q-item-section>
+                  <q-radio
+                    :disable="!status"
+                    checked-icon="task_alt"
+                    unchecked-icon="panorama_fish_eye"
+                    v-model="other_training"
+                    val="0"
+                    label=" ยังไม่ได้ดำเนินการ"
+                  />
+                </q-item-section>
+              </q-item>
+            </q-list>
+          </div>
+        </q-card>
+      </div>
+
+      <div class="col-12">
+        <div class="row justify-center">
+          <div class="col-xs-12 col-sm-11">
+            <div class="col-12 text-weight-medium items-center">
+              ผู้บังคับบัญชา/ผู้มอบหมายงาน
+            </div>
+            <div class="col-12 row q-col-gutter-sm">
+              <q-select
+                class="col-xs-12 col-sm-8"
+                dense
+                v-model="Autherise"
+                outlined
+                :options="option"
+                label="ผู้บังคับบัญชา"
+                option-label="label"
+                disable
+              />
+              <div class="col-xs-12 col-sm-4">
+                <datepicker
+                  menu-class-name="modalfix"
+                  v-model="dateAutherise"
+                  :locale="'th'"
+                  autoApply
+                  borderless
+                  :enableTimePicker="false"
+                  week-start="0"
+                >
+                  <template #year="{ year }">
+                    {{ year + 543 }}
+                  </template>
+                  <template #year-overlay-value="{ value }">
+                    {{ parseInt(value + 543) }}
+                  </template>
+                  <template #trigger>
+                    <q-input
+                      :disable="!status"
+                      outlined
+                      dense
+                      hide-bottom-space
+                      class="full-width datepicker col-3"
+                      :model-value="
+                        dateAutherise != null ? date2Thai(dateAutherise) : null
+                      "
+                      :label="`${'ลงวันที่'}`"
+                      :rules="[(val) => !!val || `${'กรุณาเลือกลงวันที่'}`]"
+                    >
+                      <template v-slot:prepend>
+                        <q-icon
+                          name="event"
+                          class="cursor-pointer"
+                          style="color: var(--q-primary)"
+                        >
+                        </q-icon>
+                      </template>
+                    </q-input>
+                  </template>
+                </datepicker>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<style scoped>
+.border_custom {
+  border: 2px solid #c10015;
+  border-radius: 5px;
+}
+.item-custom {
+  border: 1px #ededed solid;
+  border-radius: 5px;
+  background-color: #fff;
+}
+
+.mobileClass {
+  background-color: #fff;
+  border-radius: 10px;
+}
+</style>
diff --git a/src/modules/11_probation/component/editPage/02_evaluacommander.vue b/src/modules/11_probation/component/editPage/02_evaluacommander.vue
new file mode 100644
index 0000000..d904cdd
--- /dev/null
+++ b/src/modules/11_probation/component/editPage/02_evaluacommander.vue
@@ -0,0 +1,3 @@
+<template>
+    02
+</template>
\ No newline at end of file
diff --git a/src/modules/11_probation/component/editPage/03_evalua.vue b/src/modules/11_probation/component/editPage/03_evalua.vue
new file mode 100644
index 0000000..8c88131
--- /dev/null
+++ b/src/modules/11_probation/component/editPage/03_evalua.vue
@@ -0,0 +1,3 @@
+<template>
+    03
+</template>
\ No newline at end of file
diff --git a/src/modules/11_probation/component/editPage/04_evaluascore.vue b/src/modules/11_probation/component/editPage/04_evaluascore.vue
new file mode 100644
index 0000000..722fbb0
--- /dev/null
+++ b/src/modules/11_probation/component/editPage/04_evaluascore.vue
@@ -0,0 +1,3 @@
+<template>
+    04
+</template>
\ No newline at end of file
diff --git a/src/modules/11_probation/pages/detailPage.vue b/src/modules/11_probation/pages/detailPage.vue
index e87ad25..e1fb542 100644
--- a/src/modules/11_probation/pages/detailPage.vue
+++ b/src/modules/11_probation/pages/detailPage.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref } from "vue";
+import { ref,onMounted } from "vue";
 import { useRoute, useRouter } from "vue-router";
 import { useProbationStore } from "@/modules/11_probation/store/probation";
 
@@ -12,6 +12,7 @@ import EvaluateResult from "@/modules/11_probation/component/06_EvaluateResult.v
 import EvaluateReport from "@/modules/11_probation/component/07_EvaluateReport.vue";
 import SurveyComment from "@/modules/11_probation/component/08_SurveyComment.vue";
 
+
 const drawer = ref<boolean>(true);
 const activeTab = ref<string>("tab1");
 const store = useProbationStore();
@@ -34,6 +35,18 @@ function onMobile(type: string) {
   router.push(`/probation/${type}/${profileId.value}/${id.value}`);
 }
 
+/** ปุ่มกลับ */
+function clickBack(){
+  router.push(`/probation`);
+  store.mainTab = "tab1";
+};
+
+/** เมื่อเริ่มโหลดหน้า ให้ tab เป็น tab1 */
+onMounted(() => {
+  if (store.mainTab) {
+    activeTab.value = store.mainTab;
+  } else activeTab.value = "tab1";
+});
 </script>
 <template>
   <div class="col-xs-12 col-sm-12 col-md-11">
@@ -46,7 +59,7 @@ function onMobile(type: string) {
         flat
         color="primary"
         class="q-mr-sm"
-        @click="router.go(-1)"
+        @click="clickBack()"
       />
       <div>การทดลองปฏิบัติหน้าที่ราชการ</div>
     </div>
@@ -192,7 +205,7 @@ function onMobile(type: string) {
             <q-tab-panel name="tab1">
               <Assign />
             </q-tab-panel>
-            <q-tab-panel name="tab2">
+            <q-tab-panel name="tab2" class="q-pa-none">
               <RecordCareker />
             </q-tab-panel>
             <q-tab-panel name="tab3">
@@ -291,4 +304,6 @@ function onMobile(type: string) {
 .borderRadius{
   border-radius: 20px!important;
 }
+
+
 </style>
diff --git a/src/modules/11_probation/router.ts b/src/modules/11_probation/router.ts
index 8552638..f88c5d1 100644
--- a/src/modules/11_probation/router.ts
+++ b/src/modules/11_probation/router.ts
@@ -12,6 +12,12 @@ const probationEvaluateChairman = () => import('@/modules/11_probation/component
 const probationEvaluateResult = () => import('@/modules/11_probation/component/06_EvaluateResult.vue')
 const probationEvaluateReport = () => import('@/modules/11_probation/component/07_EvaluateReport.vue')
 const probationSurveyComment = () => import('@/modules/11_probation/component/08_SurveyComment.vue')
+
+const probationAddresult = () => import('@/modules/11_probation/component/addPage/01_addresult.vue')
+const probationAddevaluacommander = () => import('@/modules/11_probation/component/addPage/02_addevaluacommander.vue')
+const probationAddevalua = () => import('@/modules/11_probation/component/addPage/03_addevalua.vue')
+const probationAddevaluascore = () => import('@/modules/11_probation/component/addPage/04_addevaluascore.vue')
+
 export default [
   {
     path: "/probation",
@@ -113,5 +119,42 @@ export default [
       Key: [11],
     },
   },
+/////////////////////////////////////////////////
 
+{
+  path: "/probation/detail/addresult/:profileId/:id",
+  name: "probationAddresult",
+  component: probationAddresult,
+  meta: {
+    Auth: true,
+    Key: [11],
+  },
+},
+{
+  path: "/probation/detail/addevaluacommander/:profileId/:id",
+  name: "probationAddevaluacommander",
+  component: probationAddevaluacommander,
+  meta: {
+    Auth: true,
+    Key: [11],
+  },
+},
+{
+  path: "/probation/detail/addevalua/:profileId/:id",
+  name: "probationAddevalua",
+  component: probationAddevalua,
+  meta: {
+    Auth: true,
+    Key: [11],
+  },
+},
+{
+  path: "/probation/detail/addevaluascore/:profileId/:id",
+  name: "probationAddevaluascore",
+  component: probationAddevaluascore,
+  meta: {
+    Auth: true,
+    Key: [11],
+  },
+},
 ];
diff --git a/src/modules/11_probation/store/probation.ts b/src/modules/11_probation/store/probation.ts
index f840dec..2f46d37 100644
--- a/src/modules/11_probation/store/probation.ts
+++ b/src/modules/11_probation/store/probation.ts
@@ -1,20 +1,103 @@
 import { defineStore } from "pinia";
 import { ref } from "vue";
 
+export const useProbationStore = defineStore("probationStore", () => {
+  const profileId = ref<string>("");
+  const mainTab = ref<string>("");
 
-export const useProbationStore = defineStore(
-  "probationStore",
-  () => {
-    const profileId = ref<string>('')
-    const mainTab = ref<string>('')
-    const ratingColors = ref<string[]>([
-        "light-blue-3",
-        "light-blue-6",
-        "blue",
-        "blue-9",
-        "blue-10",
-      ]);
+  const activeTab = ref<string>("tab1");
+  const assign = ref<any>([]);
+  const evaluate = ref<any>([]);
+  const tabs = ref<any>([]);
 
-    return { mainTab,ratingColors,profileId };
+  const assignOutput = ref<any>([]);
+  const director = ref<any>([]);
+  const person = ref<any>([]);
+
+  const behavior_no1 = [
+    { id: "1", label: "ให้บริการประชาชนหรือผู้รับบริการด้วยอัธยาศัยดี" },
+    { id: "2", label: "มีความรับผิดชอบในการปฏิบัติบัติงาน" },
+    {
+      id: "3",
+      label:
+        "ให้บริการประชาชนหรือผู้รับบริการด้วยความรวดเร็ว เอาใจใส่เป็นมาตรฐานเดียวกัน",
+    },
+    {
+      id: "4",
+      label: "ตั้งใจปฏิบัติบัติหน้าที่ราชการด้วยความอุตสาหะ ขยันหมั่นเพียร",
+    },
+  ];
+  const behavior_no2 = [
+    {
+      id: "1",
+      label: "อุทิศตนและเสียสละเวลาในการปฏิบัติบัติงานอย่างเต็มกำลังความสามารถ",
+    },
+    {
+      id: "2",
+      label: "มีจิตสำนึกที่ดี ปฏิบัติบัติงานด้วยความซื่อสัตย์ สุจริต",
+    },
+    {
+      id: "3",
+      label:
+        "ยึดมั่นในสถาบันบัพระมหากษัตริย์ และไม่กระทำการใด ๆ อันจะก่อให้เกิดความเสียหายต่อประเทศชาติ",
+    },
+  ];
+  const behavior_no3 = [
+    { id: "1", label: "มีความรับรัผิดชอบในการรักษาเวลาทำงาน" },
+    {
+      id: "2",
+      label: "แต่งกายในการปฏิบัติบัติงานได้อย่างเหมาะสมกับการเป็นข้าราชการ",
+    },
+    {
+      id: "3",
+      label:
+        "ไม่กระทำการใด ๆ อันอาจก่อให้เกิดความเสียหายแก่ชื่อเสียงของหน่วยงาน",
+    },
+    {
+      id: "4",
+      label:
+        "ไม่กระทำการใด ๆ อันเป็นการเสื่อมเกียรติและศักดิ์ศรีของความเป็นข้าราชการ",
+    },
+    {
+      id: "5",
+      label: "ปฏิบัติบัติหน้าที่อย่างตรงไปตรงมาโดยยึดหลักจรรยาบรรณวิชาชีพ",
+    },
+  ];
+  const ratingColors = ref<string[]>([
+    "light-blue-3",
+    "light-blue-6",
+    "blue",
+    "blue-9",
+    "blue-10",
+  ]);
+
+  async function fecthdataAssign(data: any) {
+    assign.value = await data.assign;
+    evaluate.value = await data.evaluate;
+    tabs.value = await data.evaluate;
   }
-);
+
+  function fecthAssignoutput(data: any) {
+    assignOutput.value = data.assign_output;
+    director.value = data.director;
+    person.value = data.person;
+  }
+
+  return {
+    mainTab,
+    ratingColors,
+    profileId,
+    fecthdataAssign,
+    tabs,
+    activeTab,
+    behavior_no1,
+    behavior_no2,
+    behavior_no3,
+    fecthAssignoutput,
+    assignOutput,
+    assign,
+    director,
+    person,
+    evaluate,
+  };
+});