diff --git a/src/api/probation/api.probation.ts b/src/api/probation/api.probation.ts
new file mode 100644
index 0000000..70954c3
--- /dev/null
+++ b/src/api/probation/api.probation.ts
@@ -0,0 +1,41 @@
+import env from "../index";
+const probation = `${env.API_URI}/probation`;
+const org = `${env.API_URI}/org`;
+const kpiCapacity = `${env.API_URI}/kpi/capacity`;
+
+
+const reportProbation = `${env.API_URI}/report/probation`;
+export default {
+  probationMain:(id:string)=>`${probation}/assign/probation-assign-list?personal_id=${id}`,
+
+
+  orgProfilePlacement: (id: string) => `${org}/profile/placement/${id}`,
+  calculateDate: () => `${probation}/calculate/assign-finish`,
+  newAssign: (personalId: string) =>
+    `${probation}/data-options/new-assign?personal_id=${personalId}`,
+
+  lawOptions: (personalId: string) =>
+    `${probation}/data-options/law?personal_id=${personalId}`,
+  skillOptions: (personalId: string) =>
+    `${probation}/data-options/skill?personal_id=${personalId}`,
+  knowledgeOptions: (personalId: string) =>
+    `${probation}/data-options/knowledge?personal_id=${personalId}`,
+  probationsGetAssign: (assignId: string) =>
+    `${probation}/assign/probation-assign?assign_id=${assignId}`,
+  summarySurveyDetail: (id: string) => `${probation}/survey?assign_id=${id}`,
+  saveEditAssign: (personalId: string) =>
+    `${probation}/assign/probation-assign?id=${personalId}`,
+  saveFinish: (personalId: string) =>
+    `${probation}/assign/probation-assign?personal_id=${personalId}`,
+
+  reportEvaluateResult: (type: string, id: string) =>
+    `${reportProbation}/19/${type}/${id}`,
+  evaluateReportcreate: (id: string) =>
+    `${probation}/evaluate-result/create?assign_id=${id}`,
+  createformReport: (id: string) =>
+    `${probation}/evaluate-result?assign_id=${id}`,
+  reportAssign: (type: string, id: string) =>
+    `${reportProbation}/13/${type}/${id}`,
+  
+  kpiCapacity
+};
diff --git a/src/app.config.ts b/src/app.config.ts
index 5d12307..44b71ec 100644
--- a/src/app.config.ts
+++ b/src/app.config.ts
@@ -11,6 +11,7 @@ import support from "./api/support/api.support";
 import org from "./api/org/api.org";
 import scholarship from "./api/scholarship/api.scholarship";
 import kpi from "./api/KPI/api.kpis";
+import probation from "./api/probation/api.probation";
 
 const API = {
   ...testtest,
@@ -23,6 +24,7 @@ const API = {
   ...org,
   ...scholarship,
   ...kpi,
+  ...probation,
 };
 
 export default {
diff --git a/src/components/TableD.vue b/src/components/TableD.vue
index 86a2ffd..4caa94a 100644
--- a/src/components/TableD.vue
+++ b/src/components/TableD.vue
@@ -108,5 +108,9 @@ const paginationLabel = (start: string, end: string, total: string) => {
   .q-table thead tr:first-child th {
     top: 0;
   }
+  .q-table__middle{
+    margin-bottom: 0!important;
+    min-height: 0px!important;
+  }
 }
 </style>
diff --git a/src/modules/01_dashboard/views/Dashboard.vue b/src/modules/01_dashboard/views/Dashboard.vue
index e0111e4..d10b6cc 100644
--- a/src/modules/01_dashboard/views/Dashboard.vue
+++ b/src/modules/01_dashboard/views/Dashboard.vue
@@ -106,6 +106,14 @@ const items = ref<any>([
     path: "/scholarship",
     active: false,
   },
+  {
+    icon: "mdi-school",
+    title: "ทดลองงาน",
+    sub: "รายการงานที่ได้รับมอบหมาย",
+    color: "teal-2",
+    path: "/probation",
+    active: false,
+  },
 ]);
 onMounted(async () => {
   await fetchlistInbox(1);
@@ -430,7 +438,7 @@ const thaiOptions: Intl.DateTimeFormatOptions = {
     @update:modal="updateModalDetail"
   />
 </template>
-<style>
+<style scoped>
 .my-menu-notread {
   color: #1bb19b;
   background: #ebf9f7 !important;
diff --git a/src/modules/10_registry/tabs/01_information.vue b/src/modules/10_registry/tabs/01_information.vue
index ecb666b..5fb30d4 100644
--- a/src/modules/10_registry/tabs/01_information.vue
+++ b/src/modules/10_registry/tabs/01_information.vue
@@ -38,7 +38,7 @@ const router = useRouter();
     <Ability />
   </div>
 </template>
-<style>
+<style scoped>
 .mobileClass {
   background-color: #fff;
   border-radius: 10px;
diff --git a/src/modules/10_registry/tabs/02_government.vue b/src/modules/10_registry/tabs/02_government.vue
index 21816ea..98080a6 100644
--- a/src/modules/10_registry/tabs/02_government.vue
+++ b/src/modules/10_registry/tabs/02_government.vue
@@ -35,7 +35,7 @@ const router = useRouter();
     <Duty />
   </div>
 </template>
-<style>
+<style scoped>
 .mobileClass {
   background-color: #fff;
   border-radius: 10px;
diff --git a/src/modules/10_registry/tabs/03_salary.vue b/src/modules/10_registry/tabs/03_salary.vue
index 1812c09..4c30f6b 100644
--- a/src/modules/10_registry/tabs/03_salary.vue
+++ b/src/modules/10_registry/tabs/03_salary.vue
@@ -32,7 +32,7 @@ const router = useRouter();
 
   </div>
 </template>
-<style>
+<style scoped>
 .mobileClass {
   background-color: #fff;
   border-radius: 10px;
diff --git a/src/modules/10_registry/tabs/04_Achievement.vue b/src/modules/10_registry/tabs/04_Achievement.vue
index 7fc598d..4788487 100644
--- a/src/modules/10_registry/tabs/04_Achievement.vue
+++ b/src/modules/10_registry/tabs/04_Achievement.vue
@@ -35,7 +35,7 @@ const router = useRouter();
     <Assessments />
   </div>
 </template>
-<style>
+<style scoped>
 .mobileClass {
   background-color: #fff;
   border-radius: 10px;
diff --git a/src/modules/10_registry/tabs/05_other.vue b/src/modules/10_registry/tabs/05_other.vue
index cb3618b..6f06b39 100644
--- a/src/modules/10_registry/tabs/05_other.vue
+++ b/src/modules/10_registry/tabs/05_other.vue
@@ -30,7 +30,7 @@ const router = useRouter();
     <File />
   </div>
 </template>
-<style>
+<style scoped>
 .mobileClass {
   background-color: #fff;
   border-radius: 10px;
diff --git a/src/modules/11_probation/component/01_Assign.vue b/src/modules/11_probation/component/01_Assign.vue
new file mode 100644
index 0000000..6790df5
--- /dev/null
+++ b/src/modules/11_probation/component/01_Assign.vue
@@ -0,0 +1,2869 @@
+<script setup lang="ts">
+import { useQuasar } from "quasar";
+import { ref, reactive, computed, watch, onMounted } from "vue";
+import { useRoute, useRouter } from "vue-router";
+import { useCounterMixin } from "@/stores/mixin";
+import http from "@/plugins/http";
+import config from "@/app.config";
+
+import type {
+  MonthOption,
+  CheckboxItem,
+} from "@/modules/11_probation/interface/index/assign";
+
+const OPchairmanFn = ref<any>([]);
+const OPcommanderFn = ref<any>([]);
+const Other5 = ref<string>("");
+const Other = ref<string>("");
+const OtherLaw = ref<string>("");
+const other5_no1_desc = ref<string>("");
+const other_desc = ref<object>({});
+const other4_desc = ref<string>();
+const knowledgeCount = ref<number>(3);
+const knowledge = ref<any[]>([]);
+const commander = ref<any>("");
+const chairman = ref<any>("");
+const mixin = useCounterMixin();
+const { date2Thai, dateToISO, hideLoader, messageError,dialogConfirm,showLoader ,success} = mixin;
+const date_start = ref<Date>();
+const group = ref<any | null>(null);
+const group2 = ref<any | null>(null);
+const group3 = ref<any | null>(null);
+const router = useRouter();
+const route = useRoute();
+const main = ref<any>();
+const productivityCount = ref<number>(1);
+const output_desc = ref<string[]>(Array(productivityCount.value).fill(""));
+const indicator_desc = ref<string[]>(Array(productivityCount.value).fill(""));
+const main2 = ref<any>();
+const main3 = ref<any>();
+const main4 = ref<any>();
+const main5 = ref<any>();
+const date1 = ref<any>();
+const date2 = ref<any>();
+const date3 = ref<any>();
+const date4 = ref<any>();
+const checkRule = ref<CheckboxItem[]>([]);
+const id = ref<string>(route.params.id as string);
+const profileId = ref<string>(route.params.profileId as string);
+const activityCount = ref<number>(2);
+const routeName = router.currentRoute.value.name;
+const isDatePicker2Readonly = computed(() => {
+  return date_start.value === undefined;
+});
+const activityArray = computed(() => {
+  return Array(activityCount.value).fill("");
+});
+const knowledgeArray = computed(() => {
+  return Array(knowledgeCount.value).fill("");
+});
+const ProductivityArray = computed(() => {
+  return Array(productivityCount.value).fill("");
+});
+const skill = ref<any>();
+const skill2 = ref<any>();
+const skill3 = ref<any>();
+const skill4 = ref<any>();
+const goal_desc = ref<string[]>(Array(activityCount.value).fill(""));
+const activity_desc = ref<string[]>(Array(activityCount.value).fill(""));
+
+const editStatus = ref<boolean>(routeName == "probationAdd" ? true : false);
+const $q = useQuasar();
+const mode = ref<any>($q.screen.gt.xs);
+
+const monthSelect = ref<any>();
+const fullname = ref<string>("");
+const position = ref<string>("");
+const date_finish = ref<any>();
+
+const monthOp: MonthOption[] = [];
+
+const caretaker1 = ref<any>("");
+const caretaker2 = ref<any>("");
+const optionCaretaker2 = ref<any>([]);
+const optionCaretaker = ref<any>([]);
+const OPmain = ref<
+  Array<{ id: number; naem: string; description: string; level: string }>
+>([]);
+const OPgroup = ref<
+  Array<{ id: number; title: string; description: string; level: number }>
+>([]);
+const OPcomputer = ref<
+  Array<{ id: number; title: string; level: number; level_description: string }>
+>([]);
+const OPenglish = ref<
+  Array<{ id: number; title: string; level: number; level_description: string }>
+>([]);
+const OPinfomation = ref<
+  Array<{ id: number; title: string; level: number; level_description: string }>
+>([]);
+const OPresourse = ref<
+  Array<{ id: number; title: string; level: number; level_description: string }>
+>([]);
+const OPknowledge = ref<
+  Array<{ id: number; title: number; description: string; level: string }>
+>([]);
+const OPcaretaker = ref<
+  Array<{
+    id: string;
+    prefix: string;
+    firstName: string;
+    lastName: string;
+    name: string;
+    citizenId: number;
+    isDirector: boolean;
+    position: string;
+    positionLevel: string;
+  }>[]
+>([]);
+const OPcommander = ref<
+  Array<{
+    id: string;
+    prefix: string;
+    firstName: string;
+    lastName: string;
+    name: string;
+    citizenId: number;
+    isDirector: boolean;
+    position: string;
+    positionLevel: string;
+  }>[]
+>([]);
+const OPchairman = ref<
+  Array<{
+    id: string;
+    prefix: string;
+    firstName: string;
+    lastName: string;
+    name: string;
+    citizenId: number;
+    isDirector: boolean;
+    position: string;
+    positionLevel: string;
+  }>[]
+>([]);
+
+/** reset ค่าวันที่สิ้นสุด */
+function clearDateExam2() {
+  date_finish.value = undefined;
+}
+
+function edit() {
+  editStatus.value = true;
+}
+function cancel() {
+  editStatus.value = false;
+  getAssign();
+}
+
+function onSubmit() {
+  console.log(111);
+}
+
+/** ฟังชั่นส่ง วันที่ไปคำนวณ */
+async function postDateTime() {
+  await http
+    .post(config.API.calculateDate(), {
+      month: monthSelect.value !== null ? parseInt(monthSelect.value) : null,
+      start_date: dateToISO(date_start.value as Date),
+    })
+    .then(async (res) => {
+      const result = res.data;
+      date_finish.value = result.finish_date;
+    })
+    .catch((e) => {})
+    .finally(async () => {
+      hideLoader();
+    });
+}
+
+/** เช็ค จำนวนเดือน เเละ วันที่เริ่ม ไม่เท่ากับ undefined*/
+watch(
+  () => [monthSelect.value, date_start.value],
+  () => {
+    if (monthSelect.value !== undefined && date_start.value !== undefined) {
+      postDateTime();
+    }
+  }
+);
+
+/** get ข้อมูล */
+async function getUser() {
+  await http
+    .get(config.API.orgProfilePlacement(profileId.value))
+    .then((res: any) => {
+      const data = res.data.result;
+
+      OPcaretaker.value = data.caregiver.map((item: any) => ({
+        id: item.id,
+        name: item.prefix + item.firstName + " " + item.lastName,
+        label: item.position
+          ? `${item.prefix} ${item.firstName} ${item.lastName} (${
+              item.position
+            }${
+              item.posLevel && item.posType
+                ? ", " + item.posType + ": " + item.posLevel
+                : ""
+            })`
+          : `${item.prefix} ${item.firstName} ${item.lastName}`,
+        citizenId: item.citizenId,
+        isDirector: item.isDirector,
+        posLevel: item.posLevel,
+        posType: item.posType,
+        position: item.position,
+      }));
+
+      OPcommander.value = data.commander.map((item: any) => ({
+        id: item.id,
+        name: item.prefix + item.firstName + " " + item.lastName,
+        label: item.position
+          ? `${item.prefix} ${item.firstName} ${item.lastName} (${
+              item.position
+            }${
+              item.posLevel && item.posType
+                ? ", " + item.posType + ": " + item.posLevel
+                : ""
+            })`
+          : `${item.prefix} ${item.firstName} ${item.lastName}`,
+        citizenId: item.citizenId,
+        posLevel: item.posLevel,
+        posType: item.posType,
+        position: item.position,
+      }));
+
+      OPchairman.value = data.chairman.map((item: any) => ({
+        id: item.id,
+        name: item.prefix + item.firstName + " " + item.lastName,
+        label: item.position
+          ? `${item.prefix} ${item.firstName} ${item.lastName} (${
+              item.position
+            }${
+              item.posLevel && item.posType
+                ? ", " + item.posType + ": " + item.posLevel
+                : ""
+            })`
+          : `${item.prefix} ${item.firstName} ${item.lastName}`,
+        citizenId: item.citizenId,
+        posLevel: item.posLevel,
+        posType: item.posType,
+        position: item.position,
+      }));
+    });
+}
+
+/**
+ *ดึงข้อมูลที่ได้รับมอบหมาย
+ * @param id personal id
+ */
+async function getAssignNew(id: string) {
+  await http.get(config.API.newAssign(id)).then((res: any) => {
+    const data = res.data.data;
+
+    const monthOption = {
+      value: data.assign_month,
+      label: `${data.assign_month} เดือน`,
+    };
+    monthOp.push(monthOption);
+    monthSelect.value = `${data.assign_month} เดือน`;
+    fullname.value =
+      data.person.prefixName +
+      data.person.firstName +
+      " " +
+      data.person.lastName;
+    position.value = data.person.positionName;
+  });
+}
+
+/**
+ * ฟิลเตอร์ผู้ดูเเลตาม ที่กรอก
+ * @param val รับค่า input
+ * @param update fn
+ */
+function filterFnCaretaker(val: string, update: any) {
+  if (val == "") {
+    update(() => {
+      optionCaretaker.value = filtermantor(OPcaretaker.value, [
+        caretaker2.value,
+      ]);
+    });
+  } else {
+    update(() => {
+      optionCaretaker.value = filtermantor(OPcaretaker.value, [
+        caretaker2.value,
+      ]).filter((e: any) => e.name.search(val) !== -1);
+    });
+  }
+}
+
+/**
+ * ฟังก์ชันกรองข้อมูล
+ * @param options อาร์เรย์ข้อมูลที่จะถูกกรอง
+ * @param excludedGroups อาร์เรย์ของกลุ่มที่ไม่ต้องการรวม
+ * @returns {any[]} อาร์เรย์ข้อมูลที่ผ่านการกรอง
+ */
+function filtermantor(options: any[], excludedGroups: any[]) {
+  return options.filter(
+    (item) => !excludedGroups.some((group) => group && group.id === item.id)
+  );
+}
+
+/**
+ * ฟิลเตอร์ผู้ดูเเลตาม ที่กรอก
+ * @param val รับค่า input
+ * @param update fn
+ */
+
+function filterFnCaretaker2(val: string, update: any) {
+  if (val == "") {
+    update(() => {
+      optionCaretaker2.value = filtermantor(OPcaretaker.value, [
+        caretaker1.value,
+      ]);
+    });
+  } else {
+    update(() => {
+      optionCaretaker2.value = filtermantor(OPcaretaker.value, [
+        caretaker1.value,
+      ]).filter((e: any) => e.name.search(val) !== -1);
+    });
+  }
+}
+
+/** เพิ่ม ผลการปฏิบัติงาน*/
+function addActivity() {
+  activityCount.value++;
+}
+
+/**
+ * ลบ ผลการปฏิบัติงาน
+ * @param item ตำเเหน่งของตัวที่ลบ เป็นตัวเลข
+ */
+function deleteactivity(item: number) {
+  activity_desc.value.splice(item, 1);
+  goal_desc.value.splice(item, 1);
+  if (activityCount.value > 2) {
+    activityCount.value--;
+  }
+}
+
+/**
+ * get ข้อมูล ความรู้เรื่องกฎหมายและกฎระเบียบ
+ * @param id personal id
+ */
+async function getLaw(id: string) {
+  await http.get(config.API.lawOptions(id)).then((res: any) => {
+    checkRule.value = res.data.data;
+  });
+}
+
+/**
+ * get ข้อมูล ทักษะ
+ * @param id personal id
+ */
+async function getSkill(id: string) {
+  await http.get(config.API.skillOptions(id)).then((res: any) => {
+    const skillData = res.data.data;
+    OPcomputer.value = [skillData.computer];
+    OPenglish.value = [skillData.english];
+    OPinfomation.value = [skillData.information];
+    OPresourse.value = [skillData.resourse];
+    skill.value = skillData.computer;
+    skill2.value = skillData.english;
+    skill3.value = skillData.information;
+    skill4.value = skillData.resourse;
+  });
+}
+
+/**
+ * get ข้อมูล ความรู้ความสามารถในการปฏิบัติงาน
+ * @param id personal id
+ */
+async function getKnowledge(id: string) {
+  await http.get(config.API.knowledgeOptions(id)).then((res: any) => {
+    OPknowledge.value = res.data.data;
+  });
+}
+
+/**
+ * get ข้อมูล สมรรถนะหลัก
+ * @param id personal id
+ */
+const assign_competencyMain = ref<any>();
+async function getcompetency(id: string) {
+  http
+    .get(config.API.kpiCapacity + `/head`)
+    .then((res) => {
+      const data = res.data.result;
+      assign_competencyMain.value = data;
+      main.value = data[0];
+      main2.value = data[1];
+      main3.value = data[2];
+      main4.value = data[3];
+      main5.value = data[4];
+      console.log(main.value);
+    })
+    .catch((err) => {
+      messageError($q, err);
+    });
+  // await http.get(config.API.competencyOptions(id)).then((res: any) => {
+  //   const data = res.data.data;
+
+  //   console.log(data);
+
+  //   OPmain.value = data;
+  //   main.value = data[0];
+  //   main2.value = data[1];
+  //   main3.value = data[2];
+  //   main4.value = data[3];
+  //   main5.value = data[4];
+  // });
+}
+
+/**
+ * get ข้อมูล สมรรถนะประจํากลุ่มงาน
+ * @param id personal id
+ */
+const assign_competencyGroupMain = ref<any>();
+async function getCompetencyGroup(id: string) {
+  console.log(position.value);
+  http
+    .get(config.API.kpiCapacity + `/group?positionName=${position.value}`)
+    .then((res) => {
+      const data = res.data.result;
+      assign_competencyGroupMain.value = data;
+
+      OPgroup.value = data;
+      group.value = data[0];
+      group2.value = data[1];
+      group3.value = data[2];
+    })
+    .catch((err) => {
+      messageError($q, err);
+    });
+
+  // await http.get(config.API.competencyGroupOptions(id)).then((res: any) => {
+  //   const data = res.data.data;
+  //   OPgroup.value = data;
+  //   group.value = data[0];
+  //   group2.value = data[1];
+  //   group3.value = data[2];
+  // });
+}
+
+/** get ข้อมูลรายการมอบหมาย */
+async function getAssign() {
+  await http.get(config.API.probationsGetAssign(id.value)).then((res) => {
+    editStatus.value = false;
+    const data = res.data.data;
+    fullname.value = data.profile.name;
+    position.value = data.profile.positionName;
+    date_start.value = data.assign.date_start;
+    date_finish.value = data.assign.date_finish;
+    date1.value = data.assign.experimenter_dated;
+    if (data.mentors.length > 1) {
+      date2.value = data.mentors[0].dated;
+      caretaker1.value = data.mentors[0];
+      date3.value = data.mentors[1].dated;
+      caretaker2.value = data.mentors[1];
+    } else {
+      date2.value = data.mentors[0].dated;
+      caretaker1.value = data.mentors[0];
+    }
+
+    date4.value = data.commander.dated;
+    activity_desc.value = data.jobs.map((job: any) => job.activity_desc);
+    goal_desc.value = data.jobs.map((job: any) => job.goal_desc);
+    activityCount.value = data.jobs.length;
+
+    chairman.value = data.chairman;
+    commander.value = data.commander;
+    knowledge.value = data.knowledges.map((id: any) => id.id);
+    knowledgeCount.value = data.knowledges.length;
+    other_desc.value = data.assign.other_desc;
+    other4_desc.value = data.assign.other4_desc;
+    other5_no1_desc.value = data.assign.other5_no1_desc;
+
+    const skills = data.skills.map((skills: any) => ({
+      id: skills.id,
+      title: skills.title,
+      level: skills.level,
+      level_description: skills.description,
+    }));
+    [skill.value, skill2.value, skill3.value, skill4.value] = skills;
+
+    main.value = data.competencys[0];
+    main2.value = data.competencys[1];
+    main3.value = data.competencys[2];
+    main4.value = data.competencys[3];
+    main5.value = data.competencys[4];
+
+    group.value = data.competency_groups[0];
+    group2.value = data.competency_groups[1];
+    group3.value = data.competency_groups[2];
+
+    output_desc.value = data.outputs.map((output: any) => output.output_desc);
+    indicator_desc.value = data.outputs.map(
+      (output: any) => output.indicator_desc
+    );
+    productivityCount.value = data.outputs.length;
+
+    checkRule.value = data.laws.map((law: any) => ({
+      id: law.id,
+      checked: law.selected,
+      description: law.description,
+      status_select: law.status_select,
+    }));
+  });
+}
+
+/** เพิ่มความรู้ความสามารถ โดย สูงสุดที่ 6 item */
+function addKnowledge() {
+  if (knowledgeCount.value < 6) {
+    knowledgeCount.value++;
+  }
+}
+
+/**
+ * ลบ ความรู้ความสามารถ
+ * @param item ตำเเหน่งของตัวที่ลบ เป็นตัวเลข
+ */
+function deleteknowledge(item: number) {
+  knowledge.value.splice(item, 1);
+  if (knowledgeCount.value > 3) {
+    knowledgeCount.value--;
+  }
+}
+
+/**
+ * ฟังก์ชันกรองข้อมูล
+ * @param options อาร์เรย์ข้อมูลที่จะถูกกรอง
+ * @param excludedGroups อาร์เรย์ของกลุ่มที่ไม่ต้องการรวม
+ * @returns {any[]} อาร์เรย์ข้อมูลที่ผ่านการกรอง
+ */
+function filterMain(options: any[], excludedGroups: any[]) {
+  return options.filter(
+    (item) => !excludedGroups.some((group) => group && group.id === item.id)
+  );
+}
+
+/**
+ * ฟังก์ชันกรองข้อมูล
+ * @param options อาร์เรย์ข้อมูลที่จะถูกกรอง
+ * @param excludedGroups อาร์เรย์ของกลุ่มที่ไม่ต้องการรวม
+ * @returns {any[]} อาร์เรย์ข้อมูลที่ผ่านการกรอง
+ */
+function filterData(options: any[], excludedGroups: any[]) {
+  return options.filter(
+    (item) => !excludedGroups.some((group) => group && group.id === item.id)
+  );
+}
+
+/** เพิ่ม ผลผลิตของงาน*/
+function addProductivity() {
+  productivityCount.value++;
+}
+
+/**
+ * ลบ ผลผลิตของงาน
+ * @param item ตำเเหน่งของตัวที่ลบ เป็นตัวเลข
+ */
+function deleteProductivitys(item: number) {
+  output_desc.value.splice(item, 1);
+  indicator_desc.value.splice(item, 1);
+  if (productivityCount.value > 1) {
+    productivityCount.value--;
+  }
+}
+
+/**
+ * ฟิลเตอร์ผู้ดูเเลตาม ที่กรอก
+ * @param val รับค่า input
+ * @param update fn
+ */
+
+function filterFnCommander(val: string, update: any) {
+  if (val == "") {
+    update(() => {
+      OPcommanderFn.value = OPcommander.value;
+    });
+  } else {
+    update(() => {
+      OPcommanderFn.value = OPcommander.value.filter(
+        (e: any) => e.name.search(val) !== -1
+      );
+    });
+  }
+}
+
+/**
+ * ฟิลเตอร์ผู้ดูเเลตาม ที่กรอก
+ * @param val รับค่า input
+ * @param update fn
+ */
+
+function filterFnChairman(val: string, update: any) {
+  if (val == "") {
+    update(() => {
+      OPchairmanFn.value = OPchairman.value;
+    });
+  } else {
+    update(() => {
+      OPchairmanFn.value = OPchairman.value.filter(
+        (e: any) => e.name.search(val) !== -1
+      );
+    });
+  }
+}
+
+/**
+ * pop up confirm
+ * @param id personal id
+ */
+ function saveEdit(id: string) {
+  dialogConfirm($q, async () => await dataEdit(id));
+}
+
+/**
+ * เช็คข้อมูลก่อนบันทึก
+ * @param id personal id
+ */
+ async function saveData(id: string) {
+  dialogConfirm($q, async () => await DataSave(id));
+
+}
+
+/**
+ * update edit
+ * @param id personal id
+ */
+ async function dataEdit(id: string) {
+  // await myForm.value.validate().then((result: boolean) => {
+  //   if (result) {
+      showLoader();
+      const data = putDataEdit(id);
+      http
+        .put(config.API.saveEditAssign(id), data)
+        .then(() => {})
+        .catch(() => {})
+        .finally(async () => {
+          editStatus.value = false;
+          getAssign();
+          hideLoader();
+        });
+    // } else {
+    //   dialogMessageNotify($q, "กรุณากรอกข้อมูลให้ครบ");
+    // }
+  // });
+}
+
+/** ฟังชั่น อัพเดต ข้อมูลที่จะส่ง
+ * @param id personal
+ */
+ function putDataEdit(id: string) {
+  const GUID = profileId.value;
+  const assign_job = activityArray.value.map((item, index) => {
+    const activityDesc = activity_desc.value[index]?.trim();
+    const goalDesc = goal_desc.value[index]?.trim();
+
+    if (activityDesc !== "" && goalDesc !== "") {
+      return {
+        activity_desc: activityDesc,
+        goal_desc: goalDesc,
+      };
+    } else {
+      return null;
+    }
+  });
+
+  const know_ledge = knowledge.value.map((item) => ({
+    level: item ? item.level : null,
+  }));
+
+  const Productivity_assign = ProductivityArray.value.map((item, index) => {
+    const outputDesc = output_desc.value[index]?.trim();
+    const indicatorDesc = indicator_desc.value[index]?.trim();
+
+    if (outputDesc !== "" && indicatorDesc !== "") {
+      return {
+        output_desc: outputDesc,
+        indicator_desc: indicatorDesc,
+      };
+    } else {
+      return null;
+    }
+  });
+
+  const allGroup = [];
+  if (group.value) allGroup.push({ level: group.value.level });
+  if (group2.value) allGroup.push({ level: group2.value.level });
+  if (group3.value) allGroup.push({ level: group3.value.level });
+
+  const allSkills = [];
+  if (skill.value) allSkills.push({ level: skill.value.level });
+  if (skill2.value) allSkills.push({ level: skill2.value.level });
+  if (skill3.value) allSkills.push({ level: skill3.value.level });
+  if (skill4.value) allSkills.push({ level: skill4.value.level });
+
+  const allCompetency = [];
+  if (main.value) allCompetency.push(main.value);
+  if (main2.value) allCompetency.push(main2.value);
+  if (main3.value) allCompetency.push(main3.value);
+  if (main4.value) allCompetency.push(main4.value);
+  if (main5.value) allCompetency.push(main5.value);
+
+  const assign_director = [
+    {
+      personal_id:
+        caretaker1.value.id != null
+          ? caretaker1.value.id
+          : caretaker1.value.personal_id,
+      role: "mentor",
+      name: caretaker1.value.name,
+      position: caretaker1.value.position,
+      posType: caretaker1.value.posType,
+      posLevel: caretaker1.value.posLevel,
+      dated:
+        date2.value instanceof Date
+          ? dateToISO(date2.value)
+          : dateToISO(new Date(date2.value)),
+    },
+    {
+      personal_id:
+        commander.value.id != null
+          ? commander.value.id
+          : commander.value.personal_id,
+      role: "commander",
+      name: commander.value.name,
+      position: commander.value.position,
+      posType: commander.value.posType,
+      posLevel: commander.value.posLevel,
+      dated:
+        date4.value instanceof Date
+          ? dateToISO(date4.value)
+          : dateToISO(new Date(date4.value)),
+    },
+    {
+      personal_id:
+        chairman.value.id != null
+          ? chairman.value.id
+          : chairman.value.personal_id,
+      role: "chairman",
+      name: chairman.value.name,
+      position: chairman.value.position,
+      posType: chairman.value.posType,
+      posLevel: chairman.value.posLevel,
+    },
+  ];
+
+  if (caretaker2.value) {
+    assign_director.push({
+      personal_id:
+        caretaker2.value.id != null
+          ? caretaker2.value.id
+          : caretaker2.value.personal_id,
+      name: caretaker2.value.name,
+      position: caretaker2.value.position,
+      posType: caretaker2.value.posType,
+      posLevel: caretaker2.value.posLevel,
+      role: "mentor",
+      dated:
+        date3.value instanceof Date
+          ? dateToISO(date3.value)
+          : dateToISO(new Date(date3.value)),
+    });
+  }
+  const data = {
+    personal_id: GUID,
+    fullname: fullname.value,
+    position: position.value,
+    monthSelect:
+      monthSelect.value !== null ? parseInt(monthSelect.value) : null,
+    date_start:
+      date_start.value instanceof Date
+        ? dateToISO(date_start.value)
+        : new Date(),
+    date_finish:
+      date_finish.value instanceof Date
+        ? dateToISO(date_finish.value)
+        : dateToISO(new Date(date_finish.value)),
+    assign_knowledges: know_ledge,
+    assign_jobs: assign_job.filter((item) => item !== null),
+    other_desc: OtherLaw.value,
+    assign_skill: allSkills,
+    assign_competency: assign_competencyMain.value,
+    assign_competency_group: assign_competencyGroupMain.value,
+    other4_desc: Other.value,
+    other5_no1_desc: Other5.value,
+    assign_outputs: Productivity_assign.filter((item) => item !== null),
+    assign_director: assign_director,
+    experimenter_dated:
+      date1.value instanceof Date ? dateToISO(date1.value) : new Date(),
+    assign_law: checkRule.value
+      .filter((item) => item.checked === 1)
+      .map((item) => ({
+        id: item.id,
+        checked: item.checked,
+      })),
+  };
+  return data;
+}
+
+/** ฟังชั่น สร้างข้อมูลที่จะส่ง
+ * @param id personal
+ */
+ function putData(id: string) {
+  const GUID = profileId.value;
+  const assign_job = activityArray.value.map((item, index) => {
+    const activityDesc = activity_desc.value[index]?.trim();
+    const goalDesc = goal_desc.value[index]?.trim();
+
+    if (activityDesc !== "" && goalDesc !== "") {
+      return {
+        activity_desc: activityDesc,
+        goal_desc: goalDesc,
+      };
+    } else {
+      return null;
+    }
+  });
+  const know_ledge = knowledge.value.map((item) => ({
+    level: item ? item.level : null,
+  }));
+
+  const Productivity_assign = ProductivityArray.value.map((item, index) => {
+    const outputDesc = output_desc.value[index]?.trim();
+    const indicatorDesc = indicator_desc.value[index]?.trim();
+
+    if (outputDesc !== "" && indicatorDesc !== "") {
+      return {
+        output_desc: outputDesc,
+        indicator_desc: indicatorDesc,
+      };
+    } else {
+      return null;
+    }
+  });
+
+  const allGroup = [];
+  if (group.value) allGroup.push({ level: group.value.level });
+  if (group2.value) allGroup.push({ level: group2.value.level });
+  if (group3.value) allGroup.push({ level: group3.value.level });
+
+  const allSkills = [];
+  if (skill.value) allSkills.push({ level: skill.value.level });
+  if (skill2.value) allSkills.push({ level: skill2.value.level });
+  if (skill3.value) allSkills.push({ level: skill3.value.level });
+  if (skill4.value) allSkills.push({ level: skill4.value.level });
+
+  const allCompetency = assign_competencyMain.value;
+
+  const assign_director = [
+    {
+      personal_id: caretaker1.value.id,
+      name: caretaker1.value.name,
+      position: caretaker1.value.position,
+      posType: caretaker1.value.posType,
+      posLevel: caretaker1.value.posLevel,
+      role: "mentor",
+      dated:
+        date2.value instanceof Date
+          ? dateToISO(date2.value)
+          : dateToISO(new Date(date2.value)),
+    },
+    {
+      personal_id: commander.value.id,
+      role: "commander",
+      name: commander.value.name,
+      position: commander.value.position,
+      posType: commander.value.posType,
+      posLevel: commander.value.posLevel,
+      dated:
+        date4.value instanceof Date
+          ? dateToISO(date4.value)
+          : dateToISO(new Date(date4.value)),
+    },
+    {
+      personal_id: chairman.value.id,
+      role: "chairman",
+      name: chairman.value.name,
+      position: chairman.value.position,
+      posType: chairman.value.posType,
+      posLevel: chairman.value.posLevel,
+    },
+  ];
+
+  if (caretaker2.value) {
+    assign_director.push({
+      personal_id: caretaker2.value.id,
+      name: caretaker2.value.name,
+      position: caretaker2.value.position,
+      posType: caretaker2.value.posType,
+      posLevel: caretaker2.value.posLevel,
+      role: "mentor",
+      dated:
+        date3.value instanceof Date
+          ? dateToISO(date3.value)
+          : dateToISO(new Date(date3.value)),
+    });
+  }
+  const data = {
+    personalId: GUID,
+    fullname: fullname.value,
+    position: position.value,
+    monthSelect:
+      monthSelect.value !== null ? parseInt(monthSelect.value) : null,
+    date_start:
+      date_start.value instanceof Date
+        ? dateToISO(date_start.value)
+        : new Date(),
+    date_finish:
+      date_finish.value instanceof Date
+        ? dateToISO(date_finish.value)
+        : dateToISO(new Date(date_finish.value)),
+
+    assign_knowledges: know_ledge,
+    assign_jobs: assign_job.filter((item) => item !== null),
+    other_desc: OtherLaw.value,
+    assign_skill: allSkills,
+    assign_competency: assign_competencyMain.value,
+    assign_competency_group: assign_competencyGroupMain.value,
+    other4_desc: Other.value,
+    other5_no1_desc: Other5.value,
+    assign_outputs: Productivity_assign.filter((item) => item !== null),
+
+    assign_director: assign_director,
+    experimenter_dated:
+      date1.value instanceof Date ? dateToISO(date1.value) : new Date(),
+
+    assign_law: checkRule.value
+      .filter((item) => item.checked === 1)
+      .map((item) => ({
+        id: item.id,
+        checked: item.checked,
+      })),
+  };
+  return data;
+}
+
+/**
+ * บันทึก
+ * @param id personal id
+ */
+ async function DataSave(id: string) {
+  const data = putData(id);
+  await http
+    .post(config.API.saveFinish(id), data)
+    .then(() => {
+      router.push(`/probation/detail/${profileId.value}/${id}`);
+      success($q, "บันทึกข้อมูลสำเร็จ");
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+/**
+ * download file
+ * @param type type file
+ */
+ async function clickdownloadFile(type: string) {
+  showLoader();
+  await http
+    .get(config.API.reportAssign(type, id.value), {
+      responseType: "blob",
+    })
+    .then((res) => {
+      downloadFile(
+        res,
+        `แบบมอบหมายงานการทดลองปฏิบัติหน้าที่ราชการ-${fullname.value}.${type}`
+      );
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+/**
+ * download file
+ * @param response ไฟล์
+ * @param filename ชื่อไฟล์
+ */
+ 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);
+}
+
+onMounted(async () => {
+  await showLoader()
+  await getUser();
+  await getAssignNew(profileId.value);
+  await getLaw(profileId.value);
+  await getSkill(profileId.value);
+  await getKnowledge(profileId.value);
+  await getcompetency(profileId.value);
+  await getCompetencyGroup(profileId.value);
+  if (id.value !== undefined) {
+    await getAssign();
+  }
+  await hideLoader()
+});
+</script>
+<template>
+  <div v-if="!$q.screen.gt.xs" class="col-xs-12 col-sm-12 col-md-11">
+    <div
+      v-if="routeName !== 'probationAdd'"
+      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-form greedy @submit.prevent @validation-success="id !== undefined ? saveEdit(id) : saveData(profileId)">
+    <div
+      :class="
+        $q.screen.gt.xs
+          ? `row q-col-gutter-y-md q-col-gutter-x-sm`
+          : routeName == 'probationAdd'
+          ? `row q-col-gutter-y-md q-col-gutter-x-sm`
+          : `row q-col-gutter-y-md q-col-gutter-x-sm mobileClass q-mt-sm `
+      "
+    >
+      <div
+        v-if="routeName !== 'probationAdd'"
+        class="col-12 row items-center q-col-gutter-x-sm"
+      >
+        <span class="text-weight-bold text-dark text-body1"
+          >แบบมอบหมายงานการทดลองปฏิบัติหน้าที่ราชการ</span
+        >
+        <div v-if="!editStatus">
+          <q-btn
+            v-if="!editStatus"
+            round
+            flat
+            dense
+            icon="mdi-download"
+            color="primary"
+          >
+            <q-tooltip>ดาวน์โหลด</q-tooltip>
+            <q-menu>
+              <q-list style="min-width: 150px">
+                <q-item
+                  clickable
+                  v-close-popup
+                  @click="clickdownloadFile('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="clickdownloadFile('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
+            flat
+            icon="edit"
+            dense
+            color="edit"
+            round
+            @click="edit"
+          >
+        <q-tooltip>แก้ไขข้อมูล</q-tooltip></q-btn>
+        </div>
+        <div v-else>
+          <q-btn
+            flat
+            icon="mdi-undo"
+            dense
+            color="red"
+            round
+            @click="cancel"
+          ><q-tooltip>ยกเลิก</q-tooltip></q-btn>
+          <q-btn
+            flat
+            icon="mdi-content-save-outline"
+            dense
+            color="public"
+            round
+            type="submit"
+          ><q-tooltip>บันทึกข้อมูล</q-tooltip></q-btn>
+        </div>
+      </div>
+
+      <div class="col-12 text-weight-bold text-dark items-center">
+        <q-avatar class="bg-grey-2 q-mr-sm" size="28px">1</q-avatar>
+        ผู้ทดลองปฏิบัติหน้าที่ราชการ
+      </div>
+
+      <div class="col-12 col-sm-6">
+        <q-input
+          hide-bottom-space
+          readonly
+          dense
+          borderless
+          outlined
+          v-model="fullname"
+          label="ชื่อ-นามสกุล"
+          bg-color="white"
+        />
+      </div>
+      <div class="col-12 col-sm-6">
+        <q-input
+          hide-bottom-space
+          readonly
+          dense
+          borderless
+          outlined
+          v-model="position"
+          label="ตำแหน่ง"
+          bg-color="white"
+        />
+      </div>
+
+      <div class="col-12 text-weight-bold text-dark items-center">
+        ระยะเวลาการทดลองปฏิบัติหน้าที่ราชการ
+      </div>
+
+      <div class="col-xs-12 col-sm-4">
+        <q-select
+          :rules="[(val) => !!val || 'กรุณาเลือกระยะเวลา']"
+          hide-bottom-space
+          :options="monthOp"
+          :readonly="editStatus != true"
+          dense
+          borderless
+          option-label="label"
+          option-value="value"
+          :outlined="editStatus == true"
+          v-model="monthSelect"
+          :label="`ระยะเวลา (เดือน)`"
+          bg-color="white"
+        />
+      </div>
+      <div class="col-xs-12 col-sm-4">
+        <datepicker
+          menu-class-name="modalfix"
+          v-model="date_start"
+          :locale="'th'"
+          autoApply
+          borderless
+          :enableTimePicker="false"
+          week-start="0"
+          :readonly="editStatus != true"
+        >
+          <template #year="{ year }">
+            {{ year + 543 }}
+          </template>
+          <template #year-overlay-value="{ value }">
+            {{ parseInt(value + 543) }}
+          </template>
+          <template #trigger>
+            <q-input
+              dense
+              borderless
+              :readonly="editStatus != true"
+              :outlined="editStatus == true"
+              :rules="[(val) => !!val || 'กรุณาเลือกวันที่']"
+              hide-bottom-space
+              class="full-width datepicker"
+              :model-value="
+                date_start != null ? date2Thai(date_start) : undefined
+              "
+              :label="`${'ตั้งเเต่วันที่'}`"
+              bg-color="white"
+            >
+            </q-input>
+          </template>
+        </datepicker>
+      </div>
+      <div class="col-xs-12 col-sm-4">
+        <datepicker
+          menu-class-name="modalfix"
+          v-model="date_finish"
+          :locale="'th'"
+          autoApply
+          borderless
+          :readonly="isDatePicker2Readonly || editStatus != true"
+          :enableTimePicker="false"
+          week-start="0"
+        >
+          <template #year="{ year }">
+            {{ year + 543 }}
+          </template>
+          <template #year-overlay-value="{ value }">
+            {{ parseInt(value + 543) }}
+          </template>
+          <template #trigger>
+            <q-input
+              hide-bottom-space
+              dense
+              borderless
+              :outlined="editStatus == true"
+              readonly
+              class="full-width datepicker"
+              :model-value="
+                date_finish != null ? date2Thai(date_finish) : undefined
+              "
+              :label="`${'ถึงวันที่'}`"
+              clearable
+              bg-color="white"
+              @clear="clearDateExam2"
+            >
+            </q-input>
+          </template>
+        </datepicker>
+      </div>
+      <div class="col-12">
+        <q-separator size="3px" color="grey-2" />
+      </div>
+      <div class="col-12 text-weight-bold text-dark items-center">
+        <q-avatar class="bg-grey-2 q-mr-sm" size="28px">2</q-avatar>
+        ผู้ดูแลการทดลองปฏิบัติหน้าที่ราชการ (อาจมีได้มากกว่า 1 คน)
+      </div>
+      <div class="col-xs-12 col-sm-6">
+        <q-select
+          :rules="[(val) => !!val || 'กรุณาเลือกผู้ดูเเล']"
+          option-value="id"
+          :options="optionCaretaker"
+          :readonly="editStatus != true"
+          dense
+          hide-bottom-space
+          borderless
+          :outlined="editStatus == true"
+          v-model="caretaker1"
+          :label="`ผู้ดูแลคนที่ 1`"
+          option-label="label"
+          @filter="filterFnCaretaker"
+          use-input
+          behavior="menu"
+          bg-color="white"
+        >
+          <template v-slot:no-option>
+            <q-item>
+              <q-item-section class="text-grey"> ไม่มีข้อมูล </q-item-section>
+            </q-item>
+          </template>
+        </q-select>
+      </div>
+
+      <div class="col-xs-12 col-sm-6">
+        <q-select
+          clearable
+          :options="optionCaretaker2"
+          option-value="id"
+          option-label="label"
+          hide-bottom-space
+          :readonly="editStatus != true"
+          dense
+          borderless
+          :outlined="editStatus == true"
+          v-model="caretaker2"
+          :label="`ผู้ดูแลคนที่ 2`"
+          @filter="filterFnCaretaker2"
+          use-input
+          behavior="menu"
+          bg-color="white"
+        >
+          <template v-slot:no-option>
+            <q-item>
+              <q-item-section class="text-grey"> ไม่มีข้อมูล </q-item-section>
+            </q-item>
+          </template>
+        </q-select>
+      </div>
+
+      <div class="col-12">
+        <q-separator size="3px" color="grey-2" />
+      </div>
+
+      <div class="col-12 text-weight-bold text-dark items-center">
+        <q-avatar class="bg-grey-2 q-mr-sm" size="28px">3</q-avatar>
+        ผลการปฏิบัติงาน
+      </div>
+
+      <div class="col-12 text-top2 row items-center no-wrap">
+        <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
+        3.1 ชื่องาน / ภารกิจงานที่มอบหมาย (ควรมีมากกว่า 1 ภารกิจงาน)
+        <q-btn
+          v-if="editStatus == true"
+          round
+          color="primary"
+          dense
+          icon="mdi-plus"
+          flat
+          class="q-ml-sm"
+          @click="addActivity"
+        />
+      </div>
+      <div class="col-12 row q-gutter-sm">
+        <q-card
+          v-for="(item, index) in activityArray"
+          :key="index"
+          flat
+          bordered
+          class="col-12 q-pa-sm bg-grey-1"
+        >
+          <div class="col-12 row q-col-gutter-sm">
+            <div class="col-xs-12 col-sm-6">
+              <q-input
+                :rules="index < 2 ? [(val) => !!val || 'กรุณากรอกข้อมูล'] : []"
+                hide-bottom-space
+                :readonly="editStatus != true"
+                dense
+                borderless
+                :outlined="editStatus == true"
+                class="bg-white"
+                type="textarea"
+                v-model="activity_desc[index]"
+                label="กิจกรรมของงาน/ขั้นตอนการปฏิบัติงาน(ไม่เกิน10บรรทัด )"
+              />
+            </div>
+            <div class="col-xs-12 col-sm-5">
+              <q-input
+                :rules="index < 2 ? [(val) => !!val || 'กรุณากรอกข้อมูล'] : []"
+                hide-bottom-space
+                :readonly="editStatus != true"
+                dense
+                borderless
+                :outlined="editStatus == true"
+                class="bg-white"
+                type="textarea"
+                v-model="goal_desc[index]"
+                label="เป้าหมายในการปฏิบัติงาน(ไม่เกิน10บรรทัด )"
+              />
+            </div>
+            <!-- delete -->
+            <div
+              v-if="index > 1"
+              class="col-xs-12 col-sm-1 flex justify-center items-center"
+            >
+              <q-btn
+                flat
+                round
+                color="red"
+                icon="mdi-trash-can-outline"
+                @click="deleteactivity(index)"
+                v-if="editStatus == true"
+              />
+            </div>
+          </div>
+        </q-card>
+      </div>
+
+      <div class="col-12 text-weight-bold text-dark">
+        <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
+        3.2 ความรู้ความสามารถและทักษะ(ตามที่ก.ก.กําหนด)
+      </div>
+
+      <div class="col-12">
+        <q-card bordered flat class="q-pa-sm bg-grey-1 row q-col-gutter-y-md">
+          <div class="col-12">
+            <div class="col-12 text-top2 row items-center">
+              ความรู้ความสามารถในการปฏิบัติงาน
+              <q-btn
+                v-if="editStatus == true"
+                round
+                color="primary"
+                dense
+                icon="mdi-plus"
+                flat
+                class="q-ml-sm"
+                @click="addKnowledge"
+              />
+            </div>
+            <div
+              v-for="(item, index) in knowledgeArray"
+              :key="index"
+              class="col-12 row q-col-gutter-sm"
+            >
+              <div class="col-xs-12 col-sm-11 q-my-xs">
+                <q-select
+                  :option-label="(item) => `${item.title}-${item.description}`"
+                  option-value="id"
+                  map-options
+                  :rules="
+                    index < 3 ? [(val) => !!val || 'กรุณาเลือกความสามารถ'] : []
+                  "
+                  hide-bottom-space
+                  :options="OPknowledge"
+                  class="bg-white"
+                  :readonly="editStatus != true"
+                  dense
+                  borderless
+                  :outlined="editStatus == true"
+                  v-model="knowledge[index]"
+                  :label="`ความรู้ความสามารถในการปฏิบัติงาน ${index + 1}`"
+                />
+              </div>
+              <div
+                v-if="index > 2"
+                class="col-xs-12 col-sm-1 flex justify-center items-center"
+              >
+                <q-btn
+                  v-if="editStatus == true"
+                  flat
+                  round
+                  color="red"
+                  icon="mdi-trash-can-outline"
+                  @click="deleteknowledge(index)"
+                />
+              </div>
+            </div>
+          </div>
+
+          <div class="col-12">
+            <div class="col-12 text-top2 row items-center">
+              ความรู้เรื่องกฎหมายและกฎระเบียบ (ไม่เกิน 20 หัวข้อ)
+            </div>
+            <q-card
+              flat
+              bordered
+              class="col-12"
+              style="max-height: 500px; overflow-y: scroll"
+            >
+              <div class="example-row-column-width">
+                <div class="bg-grey-3 q-py-xs">
+                  <div
+                    class="row"
+                    v-for="(item, index) in checkRule"
+                    :key="item.id"
+                  >
+                    <div
+                      v-if="index === 0"
+                      :class="`${
+                        $q.screen.gt.xs
+                          ? 'col-1 text-center'
+                          : 'col-2 text-center'
+                      } `"
+                    >
+                      <q-checkbox
+                        :true-value="1"
+                        :false-value="0"
+                        v-if="item.status_select === 1"
+                        v-model="item.checked"
+                        dense
+                        :disable="editStatus != true"
+                      />
+                    </div>
+                    <div
+                      v-if="index === 0"
+                      :class="`${$q.screen.gt.xs ? 'col-11' : 'col-10'}`"
+                    >
+                      {{ item.description }}
+                    </div>
+                  </div>
+                </div>
+                <div v-for="(item, index) in checkRule" :key="item.id">
+                  <div
+                    v-if="index === 1"
+                    class="row bg-grey-2 q-py-xs borderCheck"
+                  >
+                    <div
+                      :class="`${$q.screen.gt.xs ? 'col-1' : 'col-2'}`"
+                    ></div>
+                    <div class="col-10">
+                      {{ item.description }}
+                    </div>
+                  </div>
+                </div>
+                <div v-for="(item, index) in checkRule" :key="item.id">
+                  <div
+                    v-if="index === 2"
+                    class="row bg-grey-2 q-py-xs borderCheck"
+                  >
+                    <div
+                      :class="`${$q.screen.gt.xs ? 'col-1' : 'col-2'}`"
+                    ></div>
+                    <div
+                      :class="`col-10 ${
+                        $q.screen.gt.xs ? 'q-pl-md' : 'q-pl-sm'
+                      }`"
+                    >
+                      {{ item.description }}
+                    </div>
+                  </div>
+                  <div
+                    v-else-if="index > 2 && index < 9"
+                    class="row borderCheck border_y q-py-xs items-center"
+                  >
+                    <div
+                      :class="`${
+                        $q.screen.gt.xs
+                          ? 'col-1 text-center'
+                          : 'col-2 text-center'
+                      } `"
+                    >
+                      <q-checkbox
+                        :true-value="1"
+                        :false-value="0"
+                        v-model="item.checked"
+                        dense
+                        :disable="editStatus != true"
+                      />
+                    </div>
+
+                    <div
+                      :class="`${
+                        $q.screen.gt.xs ? 'q-pl-xl col-9 ' : 'q-pl-md col-9'
+                      }`"
+                    >
+                      {{ item.description }}
+                    </div>
+                  </div>
+                </div>
+                <div v-for="(item, index) in checkRule" :key="item.id">
+                  <div
+                    v-if="index === 9"
+                    class="row bg-grey-2 q-py-xs borderCheck"
+                  >
+                    <div
+                      :class="`${$q.screen.gt.xs ? 'col-1' : 'col-2'}`"
+                    ></div>
+                    <div
+                      :class="`col-10 ${
+                        $q.screen.gt.xs ? 'q-pl-md' : 'q-pl-sm'
+                      }`"
+                    >
+                      {{ item.description }}
+                    </div>
+                  </div>
+                  <div
+                    v-else-if="index > 9 && index < 16"
+                    class="row borderCheck border_y q-py-xs"
+                  >
+                    <div
+                      :class="`${
+                        $q.screen.gt.xs
+                          ? 'col-1 text-center'
+                          : 'col-2 text-center'
+                      } `"
+                    >
+                      <q-checkbox
+                        :true-value="1"
+                        :false-value="0"
+                        v-model="item.checked"
+                        dense
+                        :disable="editStatus != true"
+                      />
+                    </div>
+                    <div
+                      :class="`${
+                        $q.screen.gt.xs ? 'q-pl-xl col-9 ' : 'q-pl-md col-9'
+                      }`"
+                    >
+                      {{ item.description }}
+                    </div>
+                  </div>
+                </div>
+
+                <div v-for="(item, index) in checkRule" :key="item.id">
+                  <div
+                    v-if="index === 16"
+                    class="row bg-grey-2 q-py-xs borderCheck"
+                  >
+                    <div
+                      :class="`${$q.screen.gt.xs ? 'col-1' : 'col-2'}`"
+                    ></div>
+                    <div
+                      :class="`col-10 ${
+                        $q.screen.gt.xs ? 'q-pl-md' : 'q-pl-sm'
+                      }`"
+                    >
+                      {{ item.description }}
+                    </div>
+                  </div>
+
+                  <div
+                    v-else-if="index > 16 && index < 19"
+                    class="row borderCheck border_y q-py-xs"
+                  >
+                    <div
+                      :class="`${
+                        $q.screen.gt.xs
+                          ? 'col-1 text-center'
+                          : 'col-2 text-center'
+                      } `"
+                    >
+                      <q-checkbox
+                        :true-value="1"
+                        :false-value="0"
+                        v-model="item.checked"
+                        dense
+                        :disable="editStatus != true"
+                      />
+                    </div>
+                    <div
+                      :class="`${
+                        $q.screen.gt.xs ? 'q-pl-xl col-9 ' : 'q-pl-md col-9'
+                      }`"
+                    >
+                      {{ item.description }}
+                    </div>
+                  </div>
+                </div>
+
+                <div v-for="(item, index) in checkRule" :key="item.id">
+                  <div
+                    v-if="index === 19"
+                    class="row bg-grey-2 q-py-xs borderCheck"
+                  >
+                    <div
+                      :class="`${$q.screen.gt.xs ? 'col-1' : 'col-2'}`"
+                    ></div>
+                    <div
+                      :class="`col-10 ${
+                        $q.screen.gt.xs ? 'q-pl-md' : 'q-pl-sm'
+                      }`"
+                    >
+                      {{ item.description }}
+                    </div>
+                  </div>
+                  <div
+                    v-else-if="index > 19 && index < 30"
+                    class="row borderCheck border_y q-py-xs"
+                  >
+                    <div
+                      :class="`${
+                        $q.screen.gt.xs
+                          ? 'col-1 text-center'
+                          : 'col-2 text-center'
+                      } `"
+                    >
+                      <q-checkbox
+                        :true-value="1"
+                        :false-value="0"
+                        v-model="item.checked"
+                        dense
+                        :disable="editStatus != true"
+                      />
+                    </div>
+                    <div
+                      :class="`${
+                        $q.screen.gt.xs ? 'q-pl-xl col-9 ' : 'q-pl-md col-9'
+                      }`"
+                    >
+                      {{ item.description }}
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </q-card>
+          </div>
+
+          <div class="col-12">
+            <div class="col-12 text-top2">
+              กฎหมายอื่น ๆ ที่เกี่ยวข้องกับการปฏิบัติงาน
+            </div>
+            <div class="col-12 row q-col-gutter-md">
+              <div class="col-12">
+                <q-input
+                  class="bg-white"
+                  :readonly="editStatus != true"
+                  dense
+                  borderless
+                  :outlined="editStatus == true"
+                  v-model="OtherLaw"
+                  type="textarea"
+                />
+              </div>
+            </div>
+          </div>
+
+          <div class="col-12">
+            <div class="col-12 text-top2">ทักษะ</div>
+            <div class="col-12 row q-col-gutter-sm">
+              <div class="col-xs-12 col-sm-6">
+                <q-select
+                  :option-label="
+                    (item) => `${item.title} - ${item.level_description}`
+                  "
+                  option-value="id"
+                  hide-bottom-space
+                  :rules="[(val) => !!val || 'กรุณาเลือกความรู้ความสามารถ']"
+                  :options="OPcomputer"
+                  class="bg-white"
+                  :readonly="editStatus != true"
+                  dense
+                  borderless
+                  map-options
+                  :outlined="editStatus == true"
+                  v-model="skill"
+                  label="ด้านที่ 1"
+                >
+                  <template v-slot:selected-item="scope">
+                    <div class="ellipsis-2-lines">
+                      {{ scope.opt.title }} -
+                      {{ scope.opt.level_description }}
+                    </div>
+                  </template></q-select
+                >
+              </div>
+
+              <div class="col-xs-12 col-sm-6">
+                <q-select
+                  ellipsis-2-lines
+                  :option-label="
+                    (item) => `${item.title} - ${item.level_description}`
+                  "
+                  option-value="id"
+                  map-options
+                  hide-bottom-space
+                  :rules="[(val) => !!val || 'กรุณาเลือกความรู้ความสามารถ']"
+                  :options="OPenglish"
+                  class="bg-white"
+                  :readonly="editStatus != true"
+                  dense
+                  borderless
+                  :outlined="editStatus == true"
+                  v-model="skill2"
+                  label="ด้านที่ 2"
+                >
+                  <template v-slot:selected-item="scope">
+                    <div class="ellipsis-2-lines">
+                      {{ scope.opt.title }} -
+                      {{ scope.opt.level_description }}
+                    </div>
+                  </template></q-select
+                >
+              </div>
+
+              <div class="col-xs-12 col-sm-6">
+                <q-select
+                  :option-label="
+                    (item) => `${item.title} - ${item.level_description}`
+                  "
+                  option-value="id"
+                  hide-bottom-space
+                  :rules="[(val) => !!val || 'กรุณาเลือกความรู้ความสามารถ']"
+                  :options="OPinfomation"
+                  class="bg-white"
+                  :readonly="editStatus != true"
+                  dense
+                  map-options
+                  borderless
+                  :outlined="editStatus == true"
+                  v-model="skill3"
+                  label="ด้านที่ 3"
+                >
+                  <template v-slot:selected-item="scope">
+                    <div class="ellipsis-2-lines">
+                      {{ scope.opt.title }} -
+                      {{ scope.opt.level_description }}
+                    </div>
+                  </template></q-select
+                >
+              </div>
+
+              <div class="col-xs-12 col-sm-6">
+                <q-select
+                  :option-label="
+                    (item) => `${item.title} - ${item.level_description}`
+                  "
+                  option-value="id"
+                  hide-bottom-space
+                  :rules="[(val) => !!val || 'กรุณาเลือกความรู้ความสามารถ']"
+                  :options="OPresourse"
+                  class="bg-white"
+                  :readonly="editStatus != true"
+                  dense
+                  map-options
+                  borderless
+                  :outlined="editStatus == true"
+                  v-model="skill4"
+                  label="ด้านที่ 4"
+                >
+                  <template v-slot:selected-item="scope">
+                    <div class="ellipsis-2-lines">
+                      {{ scope.opt.title }} -
+                      {{ scope.opt.level_description }}
+                    </div>
+                  </template></q-select
+                >
+              </div>
+            </div>
+          </div>
+        </q-card>
+      </div>
+
+      <div class="col-12 text-weight-bold text-dark">
+        <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
+        3.3 สมรรถนะ (ตามที่ ก.ก. กําหนด)
+      </div>
+      <div class="col-12">
+        <q-card bordered flat class="q-pa-md bg-grey-1">
+          <div class="row q-col-gutter-sm">
+            <div class="col-12 text-top2">สมรรถนะหลัก</div>
+
+            <div class="col-xs-12 col-sm-6">
+              <q-select
+                :options-html="true"
+                :option-label="
+                  (item) => `${item.name} - ระดับ:๑  ${item.description}`
+                "
+                option-value="id"
+                hide-bottom-space
+                :rules="[(val) => !!val || 'กรุณาเลือกสมรรถนะ']"
+                :options="filterMain(OPmain, [main2, main3, main4, main5])"
+                class="bg-white"
+                :readonly="editStatus != true"
+                dense
+                borderless
+                map-options
+                :outlined="editStatus == true"
+                v-model="main"
+                label="ตัวที่ 1"
+              >
+                <!-- <template v-slot:selected-item="scope">
+                  <div class="ellipsis-2-lines">
+                    {{ scope.opt.title }} -
+                    {{ scope.opt.description }}
+                  </div>
+                </template> -->
+              </q-select>
+            </div>
+
+            <div class="col-xs-12 col-sm-6">
+              <q-select
+                :options-html="true"
+                :option-label="
+                  (item) => `${item.name} - ระดับ:๑  ${item.description}`
+                "
+                option-value="id"
+                hide-bottom-space
+                :rules="[(val) => !!val || 'กรุณาเลือกสมรรถนะ']"
+                :options="filterMain(OPmain, [main, main3, main4, main5])"
+                class="bg-white"
+                :readonly="editStatus != true"
+                dense
+                borderless
+                map-options
+                :outlined="editStatus == true"
+                v-model="main2"
+                label="ตัวที่ 2"
+              >
+                <!-- <template v-slot:selected-item="scope">
+                  <div class="ellipsis-2-lines">
+                    {{ scope.opt.title }} -
+                    {{ scope.opt.description }}
+                  </div>
+                </template> -->
+              </q-select>
+            </div>
+
+            <div class="col-xs-12 col-sm-6">
+              <q-select
+                :options-html="true"
+                :option-label="
+                  (item) => `${item.name} - ระดับ:๑  ${item.description}`
+                "
+                option-value="id"
+                hide-bottom-space
+                :rules="[(val) => !!val || 'กรุณาเลือกสมรรถนะ']"
+                :options="filterMain(OPmain, [main, main2, main4, main5])"
+                class="bg-white"
+                :readonly="editStatus != true"
+                dense
+                map-options
+                borderless
+                :outlined="editStatus == true"
+                v-model="main3"
+                label="ตัวที่ 3"
+              >
+                <!-- <template v-slot:selected-item="scope">
+                  <div class="ellipsis-2-lines">
+                    {{ scope.opt.title }} -
+                    {{ scope.opt.description }}
+                  </div>
+                </template> -->
+              </q-select>
+            </div>
+
+            <div class="col-xs-12 col-sm-6">
+              <q-select
+                :options-html="true"
+                :option-label="
+                  (item) => `${item.name} - ระดับ:๑  ${item.description}`
+                "
+                option-value="id"
+                hide-bottom-space
+                :rules="[(val) => !!val || 'กรุณาเลือกสมรรถนะ']"
+                :options="filterMain(OPmain, [main, main2, main3, main5])"
+                class="bg-white"
+                :readonly="editStatus != true"
+                dense
+                borderless
+                map-options
+                :outlined="editStatus == true"
+                v-model="main4"
+                label="ตัวที่ 4"
+              >
+                <!-- <template v-slot:selected-item="scope">
+                  <div class="ellipsis-2-lines">
+                    {{ scope.opt.title }} -
+                    {{ scope.opt.description }}
+                  </div>
+                </template> -->
+              </q-select>
+            </div>
+            <div class="col-xs-12 col-sm-6">
+              <q-select
+                hide-bottom-space
+                :rules="[(val) => !!val || 'กรุณาเลือกสมรรถนะ']"
+                :options="filterMain(OPmain, [main, main2, main3, main4])"
+                :options-html="true"
+                :option-label="
+                  (item) => `${item.name} - ระดับ:๑  ${item.description}`
+                "
+                option-value="id"
+                class="bg-white"
+                :readonly="editStatus != true"
+                dense
+                map-options
+                borderless
+                :outlined="editStatus == true"
+                v-model="main5"
+                label="ตัวที่ 5"
+              >
+                <!-- <template v-slot:selected-item="scope">
+                              <div class="ellipsis-2-lines">
+                                {{ scope.opt.title }} -
+                                {{ scope.opt.description }}
+                              </div>
+                            </template> -->
+              </q-select>
+            </div>
+            <div class="col-12 text-top2">สมรรถนะประจํากลุ่มงาน</div>
+
+            <div class="col-xs-12 col-sm-6">
+              <q-select
+                :options-html="true"
+                :option-label="
+                  (item) => `${item.name} - ระดับ:๒  ${item.description}`
+                "
+                option-value="id"
+                hide-bottom-space
+                :rules="[(val) => !!val || 'กรุณาเลือกสมรรถนะประจํากลุ่มงาน']"
+                :options="filterData(OPgroup, [group2, group3])"
+                class="bg-white"
+                :readonly="editStatus != true"
+                dense
+                borderless
+                map-options
+                :outlined="editStatus == true"
+                v-model="group"
+                label="ตัวที่ 1"
+              >
+                <!-- <template v-slot:selected-item="scope">
+                            <div class="ellipsis-2-lines">
+                              {{ scope.opt.title }} -
+                              {{ scope.opt.description }}
+                            </div>
+                          </template> -->
+              </q-select>
+            </div>
+
+            <div class="col-xs-12 col-sm-6">
+              <q-select
+                :options-html="true"
+                :option-label="
+                  (item) => `${item.name} - ระดับ:๒  ${item.description}`
+                "
+                option-value="id"
+                hide-bottom-space
+                :rules="[(val) => !!val || 'กรุณาเลือกสมรรถนะประจํากลุ่มงาน']"
+                :options="filterData(OPgroup, [group, group3])"
+                class="bg-white"
+                :readonly="editStatus != true"
+                dense
+                borderless
+                map-options
+                :outlined="editStatus == true"
+                v-model="group2"
+                label="ตัวที่ 2"
+              >
+                <!-- <template v-slot:selected-item="scope">
+                            <div class="ellipsis-2-lines">
+                              {{ scope.opt.title }} -
+                              {{ scope.opt.description }}
+                            </div>
+                          </template> -->
+              </q-select>
+            </div>
+
+            <div class="col-xs-12 col-sm-6">
+              <q-select
+                :options-html="true"
+                :option-label="
+                  (item) => `${item.name} - ระดับ:๒  ${item.description}`
+                "
+                option-value="id"
+                map-options
+                hide-bottom-space
+                :rules="[(val) => !!val || 'กรุณาเลือกสมรรถนะประจํากลุ่มงาน']"
+                :options="filterData(OPgroup, [group, group2])"
+                class="bg-white"
+                :readonly="editStatus != true"
+                dense
+                borderless
+                :outlined="editStatus == true"
+                v-model="group3"
+                label="ตัวที่ 3"
+              >
+                <!-- <template v-slot:selected-item="scope">
+                            <div class="ellipsis-2-lines">
+                              {{ scope.opt.title }} -
+                              {{ scope.opt.description }}
+                            </div>
+                          </template> -->
+              </q-select>
+            </div>
+          </div>
+        </q-card>
+      </div>
+
+      <div class="col-12 row">
+        <div class="col-12 text-weight-bold text-dark row items-center">
+          <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
+          3.4 พฤติกรรมที่จําเป็นสําหรับการปฏิบัติงาน<span
+            class="text-weight-regular q-pl-sm"
+          >
+            ( ได้แก่ ความประพฤติ ความมีคุณธรรมจริยธรรม การรักษาวินัย )</span
+          >
+        </div>
+        <q-card bordered flat class="col-12 row q-pa-md bg-grey-1">
+          <div class="row col-12 q-gutter-lg">
+            <div class="col-12 row">
+              <div class="col-12 text-top2">ความประพฤติ ได้แก่</div>
+              <div class="col-12 row q-col-gutter-md">
+                <div class="col-12 column q-ml-md">
+                  <li>ให้บริการประชาชนหรือผู้รับบริการด้วยอธัยาศัยดี</li>
+                  <li>มีความรับผิดชอบในการปฏิบัติงาน</li>
+                  <li>
+                    ให้บริการประชาชนหรือผู้รับบริการด้วยความรวดเร็ว
+                    เอาใจใส่เป็นมาตรฐานเดียวกัน
+                  </li>
+                  <li>
+                    ตั้งใจปฏิบัติหน้าที่ราชการด้วยความอุตสาหะ ขยันหมั่นเพียร
+                  </li>
+                </div>
+              </div>
+            </div>
+            <div class="col-12 row">
+              <div class="col-12 text-top2">ความมีคุณธรรมจริยธรรม ได้แก่</div>
+              <div class="col-12 row q-col-gutter-md">
+                <div class="col-12 column q-ml-md">
+                  <li>
+                    อุทิศตนและเสียสละเวลาในการปฏิบัติงานอย่างเต็มกำลังความสามารถ
+                  </li>
+                  <li>มีจิตสำนึกที่ดี ปฏิบัติงานด้วยความซื่อสัตย์ สุจริต</li>
+                  <li>
+                    ยึดมั่นในสถาบันพระมหากษัตริย์ และไม่กระทำการใด ๆ
+                    อันจะก่อให้เกิดความเสียหายต่อประเทศชาติ ศาสนา
+                    และพระมหากษัตริย์
+                  </li>
+                </div>
+              </div>
+            </div>
+            <div class="col-12 row">
+              <div class="col-12 text-top2">การรักษาวินัย ได้แก่</div>
+              <div class="col-12 row q-col-gutter-md">
+                <div class="col-12 column q-ml-md">
+                  <li>มีความรับผิดชอบในการรักษาเวลาทำงาน</li>
+                  <li>
+                    แต่งกายในการปฏิบัติงานได้อย่างเหมาะสมกับการเป็นข้าราชการ
+                  </li>
+                  <li>
+                    ไม่กระทำการใด ๆ
+                    อันเป็นการเสื่อมเกียรติและศักดิ์ศรีของความเป็นข้าราชการ
+                  </li>
+                  <li>
+                    ไม่กระทำการใด ๆ
+                    อันอาจก่อให้เกิดความเสียหายแก่ชื่อเสียงของหน่วยงาน
+                  </li>
+                  <li>
+                    ปฏิบัติหน้าที่อย่างตรงไปตรงมาโดยยึกหลักจรรยาบรรณวิชาชีพ
+                  </li>
+                </div>
+              </div>
+            </div>
+          </div>
+        </q-card>
+      </div>
+
+      <div class="col-12 row">
+        <div class="col-12 text-weight-bold text-dark">
+          <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
+          3.5 อื่น ๆ (ถ้ามี)
+        </div>
+        <div class="col-12">
+          <q-input
+            :readonly="editStatus != true"
+            dense
+            borderless
+            :outlined="editStatus == true"
+            v-model="Other"
+            bg-color="white"
+          />
+        </div>
+      </div>
+
+      <div class="col-12 row">
+        <div class="col-12 text-weight-bold text-dark row items-center">
+          <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
+          3.6 ผลผลิตของงานที่คาดหวังและตัวชี้วัดความสําเร็จของงาน
+          <q-btn
+            v-if="editStatus == true"
+            round
+            color="primary"
+            dense
+            icon="mdi-plus"
+            flat
+            class="q-ml-sm"
+            @click="addProductivity"
+          />
+        </div>
+        <div class="col-12 row q-gutter-md">
+          <q-card
+            v-for="(item, index) in ProductivityArray"
+            :key="index"
+            flat
+            bordered
+            class="col-12 q-pa-sm bg-grey-1"
+          >
+            <div class="col-12 row q-col-gutter-sm">
+              <div class="col-xs-12 col-sm-6">
+                <q-input
+                  hide-bottom-space
+                  :rules="
+                    index < 1 ? [(val) => !!val || 'กรุณากรอกข้อมูล'] : []
+                  "
+                  type="textarea"
+                  :readonly="editStatus != true"
+                  dense
+                  borderless
+                  :outlined="editStatus == true"
+                  v-model="output_desc[index]"
+                  label="ผลผลิตของงานที่คาดหวัง (ไม่เกิน 10 บรรทัด)"
+                  bg-color="white"
+                />
+              </div>
+
+              <div class="col-xs-12 col-sm-5">
+                <q-input
+                  :rules="
+                    index < 1 ? [(val) => !!val || 'กรุณากรอกข้อมูล'] : []
+                  "
+                  hide-bottom-space
+                  bg-color="white"
+                  type="textarea"
+                  :readonly="editStatus != true"
+                  dense
+                  borderless
+                  :outlined="editStatus == true"
+                  v-model="indicator_desc[index]"
+                  label="ตัวชี้วัดความสําเร็จของงาน (ไม่เกิน 10 บรรทัด)"
+                />
+              </div>
+
+              <div
+                v-if="index > 0"
+                class="col-xs-12 col-sm-1 flex justify-center items-center"
+              >
+                <q-btn
+                  flat
+                  v-if="editStatus == true"
+                  round
+                  color="red"
+                  icon="mdi-trash-can-outline"
+                  @click="deleteProductivitys(index)"
+                />
+              </div>
+            </div>
+          </q-card>
+        </div>
+      </div>
+
+      <div class="col-12">
+        <q-separator size="3px" color="grey-2" />
+      </div>
+      <div class="col-12 row q-col-gutter-y-sm">
+        <div class="col-12 text-weight-bold text-dark items-center">
+          <q-avatar class="bg-grey-2 q-mr-sm" size="28px">4</q-avatar>
+          การพัฒนาผู้ทดลองปฏิบัติหน้าที่ราชการ
+        </div>
+
+        <div class="col-12 text-top2">
+          ผู้ทดลองปฏิบัติหน้าที่ราชการต้องเข้าร่วมในการปฐมนิเทศและอบรมหลักสูตรต่าง
+          ๆ ภายในระยะเวลาทดลองปฏิบัติหน้าที่ราชการ ดังนี้
+        </div>
+        <div class="col-12 text-top2 items-center">
+          <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
+          4.1 การปฐมนิเทศเพื่อให้มีความรู้เกี่ยวกับหน่วยงาน/ส่วนราชการ
+        </div>
+        <div class="col-12 text-top2 items-center">
+          <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
+          4.2
+          การเรียนรู้ด้วยตนเองเพื่อให้มีความรู้เกี่ยวกับกฎหมายกฎระเบียบแบบแผนของทางราชการ
+        </div>
+        <div class="col-12 text-top2 items-center">
+          <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
+          4.3
+          การอบรมสัมมนาร่วมกันเพื่อปลูกฝังการประพฤติปฏิบัติตนเป็นข้าราชการที่ดี
+        </div>
+        <div class="col-12 text-top2 items-center">
+          <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
+          4.4 การอบรมอื่น ๆ ที่หน่วยงานกำหนด (ถ้ามี)
+        </div>
+      </div>
+      <div class="col-12">
+        <q-separator size="3px" color="grey-2" />
+      </div>
+
+      <div class="col-12 row q-col-gutter-y-sm">
+        <div class="col-12 text-weight-bold text-dark items-center">
+          <q-avatar class="bg-grey-2 q-mr-sm" size="28px">5</q-avatar>
+          การประเมินผลการทดลองปฏิบัติหน้าที่ราชการ
+        </div>
+        <div class="col-12 text-top2 items-center">
+          <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
+          5.1
+          ประเมินผลการทดลองปฏิบัติหน้าที่ราชการโดยคณะกรรมการประเมินผลการทดลองปฏิบัติหน้าที่ราชการ
+        </div>
+        <div class="col-12 text-top2 items-center">
+          <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
+          5.2 รายละเอียดการประเมินประกอบด้วย 2 ส่วนคือ
+        </div>
+        <div class="col-12">
+          <q-card flat bordered class="q-pa-sm bg-grey-1">
+            <div class="row q-col-gutter-y-sm">
+              <div class="col-12 text-top2">การรักษาวินัย ได้แก่</div>
+              <div class="col-12">
+                <div class="column q-ml-md">
+                  <li>ความรู้ความสามารถที่ ก.ก. กำหนด</li>
+                  <li>ทักษะที่ ก.ก. กำหนด</li>
+                  <li>สมรรถนะตามที่ ก.ก. กำหนด</li>
+                  <li>ความสามารถในการเรียนรู้งานในตำแหน่ง</li>
+                  <li>ความสามารถในการปรับใช้ความรู้กับงานในหน้าที่</li>
+                  <li>ความสำเร็จของงานที่ได้รับมอบหมาย</li>
+                  <li>อื่นๆ (ถ้ามี)</li>
+                </div>
+              </div>
+              <div class="col-12">
+                <q-input
+                  :readonly="editStatus != true"
+                  dense
+                  borderless
+                  :outlined="editStatus == true"
+                  v-model="Other5"
+                  label="กรอกอื่นๆ"
+                  bg-color="white"
+                />
+              </div>
+            </div>
+          </q-card>
+        </div>
+      </div>
+
+      <div class="col-12 row">
+        <div class="col-12 text-top2 items-center">
+          <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
+          5.3
+          ข้อมูลที่ใช้ประกอบการประเมินผลการทดลองปฏิบัติหน้าที่ราชการประกอบด้วย
+        </div>
+        <div class="col-12">
+          <q-card flat bordered class="q-pa-sm bg-grey-1">
+            <div class="column q-ml-md">
+              <li>
+                บันทึกผลการทดลองปฏิบัติหน้าที่ราชการของผู้ดูแลการทดลองปฏิบัติหน้าที่ราชการและผู้บังคับบัญา
+              </li>
+              <li>แบบประเมินผลการทดลองปฏิบัติหน้าที่ราชการของผู้บังคับบัญชา</li>
+              <li>รายงานผลการพัฒนาตามที่สำนักงาน ก.ก.กำหนด</li>
+            </div>
+          </q-card>
+        </div>
+      </div>
+
+      <div class="col-12 row">
+        <div class="col-12 text-top2 items-center">
+          <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
+          5.4 สัดส่วนของคะแนนและมาตรฐานการประเมิน
+        </div>
+        <div class="col-12">
+          <q-card flat bordered class="q-pa-sm bg-grey-1">
+            <div class="q-col-gutter-md">
+              <div class="q-ml-md">
+                <li>สัดส่วนของคะแนนการทดลองปฏิบัติหน้าที่ราชการ</li>
+                <div class="q-pl-lg">
+                  ส่วนที่ 1 คะแนนผลสัมฤทธิ์ของการทดลองปฏิบัติหน้าที่ราชการร้อยละ
+                  50
+                </div>
+                <div class="q-pl-lg">
+                  ส่วนที่ 2 คะแนนพฤติกรรมของผู้ทดลองปฏิบัติหน้าที่ราชการร้อยละ
+                  50
+                </div>
+                <div class="q-pl-lg">
+                  มาตรฐานการประเมินแต่ละส่วนต้องได้คะแนนไม่ต่ำกว่าร้อยละ 60
+                </div>
+                <li>
+                  สัดส่วนคะแนนการพัฒนาข้าราชการที่อยู่ระหว่างการทดลองปฏิบัติหน้าที่ราชการ
+                </li>
+                <div class="q-pl-lg">
+                  คะแนนรวมของการพัฒนาจะต้องไม่น้อยกว่าร้อยละ 60
+                </div>
+                <div>
+                  <span style="text-decoration: underline">หมายเหตุ</span>
+                  ให้นำคะแนนรวมทั้ง 2
+                  ส่วนมารวมกันแล้วต้องได้คะแนนไม่น้อยกว่าร้อยละ 60
+                  จึงถือว่าผ่านการประเมินการทดลองปฏิบัติหน้าที่ราชการ
+                </div>
+              </div>
+            </div>
+          </q-card>
+        </div>
+      </div>
+
+      <div class="col-12">
+        <q-separator size="3px" color="grey-2" />
+      </div>
+
+      <div class="col-12 row q-col-gutter-y-sm">
+        <div class="col-12 text-weight-bold text-dark items-center">
+          การลงชื่อเพื่อมอบหมายงานและรับมอบหมายงานในการทดลองปฏิบัติหน้าที่ราชการ
+        </div>
+        <div class="col-12">
+          <div class="col-12 text-top2 items-center">
+            <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
+            ผู้ทดลองปฏิบัติหน้าที่ราชการ
+          </div>
+        </div>
+        <div class="col-12">
+          <div class="row q-col-gutter-sm">
+            <div class="col-xs-12 col-sm-4">
+              <q-input
+                :readonly="editStatus != true"
+                dense
+                borderless
+                :outlined="editStatus == true"
+                v-model="fullname"
+                label="ชื่อ-นามสกุล"
+                bg-color="white"
+              />
+            </div>
+
+            <div class="col-xs-12 col-sm-4">
+              <q-input
+                :readonly="editStatus != true"
+                dense
+                borderless
+                :outlined="editStatus == true"
+                v-model="position"
+                label="ตำแหน่ง"
+                bg-color="white"
+              />
+            </div>
+
+            <div class="col-xs-12 col-sm-4">
+              <datepicker
+                menu-class-name="modalfix"
+                v-model="date1"
+                :locale="'th'"
+                autoApply
+                :readonly="editStatus != true"
+                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
+                    hide-bottom-space
+                    :rules="[(val) => !!val || 'กรุณาเลือกวันที่']"
+                    :readonly="editStatus != true"
+                    dense
+                    borderless
+                    :outlined="editStatus == true"
+                    class="full-width datepicker"
+                    :model-value="date1 != null ? date2Thai(date1) : null"
+                    label="ลงวันที่"
+                    bg-color="white"
+                  >
+                    <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">
+        <div class="row q-col-gutter-sm">
+          <div class="col-12 text-top2 items-center">
+            <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
+            ผู้ดูแลการทดลองปฏิบัติหน้าที่ราชการ
+          </div>
+          <div class="col-xs-12 col-sm-8">
+            <q-select
+              v-if="editStatus == true"
+              :options="optionCaretaker"
+              option-label="label"
+              :readonly="editStatus != true"
+              dense
+              borderless
+              :outlined="editStatus == true"
+              v-model="caretaker1"
+              label="ผู้ดูแลคนที่ 1"
+              @filter="filterFnCaretaker"
+              use-input
+              behavior="menu"
+              bg-color="white"
+            >
+              <template v-slot:no-option>
+                <q-item>
+                  <q-item-section class="text-grey">
+                    ไม่มีข้อมูล
+                  </q-item-section>
+                </q-item>
+              </template>
+            </q-select>
+            <q-select
+              v-else
+              :options="optionCaretaker"
+              option-value="id"
+              option-label="label"
+              class="col-xs-12 col-sm-8"
+              :readonly="!editStatus"
+              dense
+              borderless
+              :outlined="editStatus"
+              v-model="caretaker1"
+              label="ผู้ดูแลคนที่ 1"
+              @filter="filterFnCaretaker"
+              use-input
+              behavior="menu"
+              bg-color="white"
+            >
+              <template v-slot:no-option>
+                <q-item>
+                  <q-item-section class="text-grey">
+                    ไม่มีข้อมูล
+                  </q-item-section>
+                </q-item>
+              </template>
+            </q-select>
+          </div>
+
+          <div class="col-xs-12 col-sm-4">
+            <datepicker
+              menu-class-name="modalfix"
+              v-model="date2"
+              :locale="'th'"
+              autoApply
+              borderless
+              :enableTimePicker="false"
+              :readonly="editStatus != true"
+              week-start="0"
+            >
+              <template #year="{ year }">
+                {{ year + 543 }}
+              </template>
+              <template #year-overlay-value="{ value }">
+                {{ parseInt(value + 543) }}
+              </template>
+              <template #trigger>
+                <q-input
+                  hide-bottom-space
+                  :rules="[(val) => !!val || 'กรุณาเลือกวันที่']"
+                  :readonly="editStatus != true"
+                  dense
+                  borderless
+                  :outlined="editStatus == true"
+                  class="full-width datepicker"
+                  :model-value="date2 != null ? date2Thai(date2) : null"
+                  label="ลงวันที่"
+                  bg-color="white"
+                >
+                  <template v-slot:prepend>
+                    <q-icon
+                      name="event"
+                      class="cursor-pointer"
+                      style="color: var(--q-primary)"
+                    >
+                    </q-icon>
+                  </template>
+                </q-input>
+              </template>
+            </datepicker>
+          </div>
+
+          <q-select
+            clearable
+            v-if="editStatus == true"
+            :options="optionCaretaker2"
+            option-label="label"
+            class="col-xs-12 col-sm-8"
+            :readonly="editStatus != true"
+            dense
+            borderless
+            :outlined="editStatus == true"
+            v-model="caretaker2"
+            label="ผู้ดูแลคนที่ 2"
+            @filter="filterFnCaretaker2"
+            use-input
+            behavior="menu"
+            bg-color="white"
+            ><template v-slot:no-option>
+              <q-item>
+                <q-item-section class="text-grey"> ไม่มีข้อมูล </q-item-section>
+              </q-item>
+            </template>
+          </q-select>
+
+          <q-select
+            clearable
+            v-else
+            :options="optionCaretaker2"
+            option-value="id"
+            option-label="label"
+            class="col-xs-12 col-sm-8"
+            :readonly="!editStatus"
+            dense
+            borderless
+            :outlined="editStatus"
+            v-model="caretaker2"
+            label="ผู้ดูแลคนที่ 2"
+            @filter="filterFnCaretaker2"
+            use-input
+            behavior="menu"
+            bg-color="white"
+          >
+            <template v-slot:no-option>
+              <q-item>
+                <q-item-section class="text-grey"> ไม่มีข้อมูล </q-item-section>
+              </q-item>
+            </template>
+          </q-select>
+
+          <div class="col-xs-12 col-sm-4">
+            <datepicker
+              menu-class-name="modalfix"
+              v-model="date3"
+              :locale="'th'"
+              autoApply
+              borderless
+              :enableTimePicker="false"
+              week-start="0"
+              :readonly="editStatus != true || !caretaker2"
+            >
+              <template #year="{ year }">
+                {{ year + 543 }}
+              </template>
+              <template #year-overlay-value="{ value }">
+                {{ parseInt(value + 543) }}
+              </template>
+              <template #trigger>
+                <q-input
+                  hide-bottom-space
+                  :disable="!caretaker2"
+                  :readonly="editStatus != true"
+                  dense
+                  :rules="
+                    caretaker2 ? [(val) => !!val || 'กรุณาเลือกวันที่'] : []
+                  "
+                  borderless
+                  :outlined="editStatus == true"
+                  class="full-width datepicker"
+                  :model-value="caretaker2 != null ? date2Thai(date3) : null"
+                  label="ลงวันที่"
+                  bg-color="white"
+                >
+                  <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 class="col-12">
+        <div class="row q-col-gutter-sm">
+          <div class="col-12 text-top2 items-center">
+            <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
+            ผู้บังคับบัญชาผู้มอบหมายงาน
+          </div>
+
+          <div class="col-12">
+            <div class="row q-col-gutter-sm">
+              <q-select
+                v-if="editStatus == true"
+                :options="OPcommanderFn"
+                option-label="label"
+                class="col-xs-12 col-sm-8"
+                :readonly="editStatus != true"
+                dense
+                borderless
+                :rules="[(val) => !!val || 'กรุณาเลือกผู้บังคับบัญชา']"
+                :outlined="editStatus == true"
+                v-model="commander"
+                hide-bottom-space
+                label="ผู้บังคับบัญชา"
+                use-input
+                behavior="menu"
+                @filter="filterFnCommander"
+                bg-color="white"
+              >
+                <template v-slot:no-option>
+                  <q-item>
+                    <q-item-section class="text-grey">
+                      ไม่มีข้อมูล
+                    </q-item-section>
+                  </q-item>
+                </template>
+              </q-select>
+
+              <q-select
+                v-else
+                :options="OPcommanderFn"
+                option-value="id"
+                option-label="label"
+                class="col-xs-12 col-sm-8"
+                :readonly="!editStatus"
+                dense
+                :rules="[(val) => !!val || 'กรุณาเลือกผู้บังคับบัญชา']"
+                borderless
+                hide-bottom-space
+                :outlined="editStatus"
+                v-model="commander"
+                label="ผู้บังคับบัญชา"
+                use-input
+                behavior="menu"
+                @filter="filterFnCommander"
+                bg-color="white"
+              >
+                <template v-slot:no-option>
+                  <q-item>
+                    <q-item-section class="text-grey">
+                      ไม่มีข้อมูล
+                    </q-item-section>
+                  </q-item>
+                </template>
+              </q-select>
+
+              <div class="col-xs-12 col-sm-4">
+                <datepicker
+                  menu-class-name="modalfix"
+                  v-model="date4"
+                  :locale="'th'"
+                  autoApply
+                  borderless
+                  :readonly="editStatus != true"
+                  :enableTimePicker="false"
+                  week-start="0"
+                >
+                  <template #year="{ year }">
+                    {{ year + 543 }}
+                  </template>
+                  <template #year-overlay-value="{ value }">
+                    {{ parseInt(value + 543) }}
+                  </template>
+                  <template #trigger>
+                    <q-input
+                      hide-bottom-space
+                      :rules="[(val) => !!val || 'กรุณาเลือกวันที่']"
+                      :readonly="editStatus != true"
+                      dense
+                      borderless
+                      :outlined="editStatus == true"
+                      class="full-width datepicker"
+                      :model-value="date4 != null ? date2Thai(date4) : null"
+                      label="ลงวันที่"
+                      bg-color="white"
+                    >
+                      <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 class="col-12">
+        <div class="row q-col-gutter-y-sm">
+          <div class="col-12 text-top2 row items-center">
+            <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
+            ประธานกรรมการ
+          </div>
+          <div class="col-12">
+            <div class="row q-col-gutter-sm">
+              <q-select
+                v-if="editStatus == true"
+                :options="OPchairmanFn"
+                option-label="label"
+                class="col-xs-12 col-sm-8"
+                :readonly="editStatus != true"
+                dense
+                borderless
+                :outlined="editStatus == true"
+                v-model="chairman"
+                label="ประธานกรรมการ"
+                :rules="[(val) => !!val || 'กรุณาเลือก ประธานกรรมการ']"
+                use-input
+                behavior="menu"
+                @filter="filterFnChairman"
+                bg-color="white"
+              >
+                <template v-slot:no-option>
+                  <q-item>
+                    <q-item-section class="text-grey">
+                      ไม่มีข้อมูล
+                    </q-item-section>
+                  </q-item>
+                </template>
+              </q-select>
+
+              <q-select
+                v-else
+                :options="OPchairmanFn"
+                option-value="id"
+                option-label="label"
+                class="col-xs-12 col-sm-8"
+                :readonly="!editStatus"
+                dense
+                borderless
+                :outlined="editStatus"
+                v-model="chairman"
+                :rules="[(val) => !!val || 'กรุณาเลือก ประธานกรรมการ']"
+                label="ประธานกรรมการ"
+                use-input
+                behavior="menu"
+                @filter="filterFnChairman"
+                bg-color="white"
+              >
+                <template v-slot:no-option>
+                  <q-item>
+                    <q-item-section class="text-grey">
+                      ไม่มีข้อมูล
+                    </q-item-section>
+                  </q-item>
+                </template>
+              </q-select>
+            </div>
+          </div>
+        </div>
+        <div v-if="routeName == 'probationAdd'" class="full-width" align="right">
+          <q-btn label="บันทึก" color="secondary" type="submit"
+            ><q-tooltip>บันทึกข้อมูล</q-tooltip></q-btn
+          >
+        </div>
+      </div>
+    </div>
+  </q-form>
+</template>
+<style scoped>
+.mobileClass {
+  background-color: #fff;
+  border-radius: 10px;
+  padding-right: 16px;
+  padding-bottom: 16px;
+  margin-left: 0px;
+}
+
+.border_y {
+  border-left: 1px solid #d8d8d8;
+  border-right: 1px solid #d8d8d8;
+}
+
+.borderCheck {
+  border-bottom: 1px solid #d8d8d8;
+}
+
+.text-top2 {
+  font-weight: 500;
+  color: rgb(70, 68, 68);
+}
+
+.text-top0 {
+  font-weight: 600;
+  padding-bottom: 8px;
+  color: rgb(70, 68, 68);
+}
+
+.text-Hd {
+  font-weight: 600;
+  font-size: 1rem;
+  padding-bottom: 5px;
+  color: #02a998;
+}
+
+.bin {
+  align-items: center;
+  justify-content: center;
+}
+
+.q-item span {
+  white-space: normal;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+</style>
diff --git a/src/modules/11_probation/component/02_RecordCareker.vue b/src/modules/11_probation/component/02_RecordCareker.vue
new file mode 100644
index 0000000..b2c8a7d
--- /dev/null
+++ b/src/modules/11_probation/component/02_RecordCareker.vue
@@ -0,0 +1,27 @@
+<script setup lang="ts">
+import { useQuasar } from "quasar";
+import { ref } from "vue";
+import { useRouter } from "vue-router";
+
+const router = useRouter();
+const $q = useQuasar();
+const mode = ref<any>($q.screen.gt.xs);
+</script>
+<template>
+    <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"
+        unelevated
+        round
+        dense
+        flat
+        color="primary"
+        class="q-mr-sm"
+        @click="router.go(-1)"
+      />
+      <div>แบบบันทึกผล (ผู้ดูแล)</div>
+    </div>
+  </div>
+  
+</template>
diff --git a/src/modules/11_probation/component/03_RecordCommander.vue b/src/modules/11_probation/component/03_RecordCommander.vue
new file mode 100644
index 0000000..5059f8f
--- /dev/null
+++ b/src/modules/11_probation/component/03_RecordCommander.vue
@@ -0,0 +1,27 @@
+<script setup lang="ts">
+import { useQuasar } from "quasar";
+import { ref } from "vue";
+import { useRouter } from "vue-router";
+
+const router = useRouter();
+const $q = useQuasar();
+const mode = ref<any>($q.screen.gt.xs);
+</script>
+<template>
+    <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"
+        unelevated
+        round
+        dense
+        flat
+        color="primary"
+        class="q-mr-sm"
+        @click="router.go(-1)"
+      />
+      <div>แบบบันทึกผล (ผู้บังคับบัญชา)</div>
+    </div>
+  </div>
+  
+</template>
diff --git a/src/modules/11_probation/component/04_EvaluateCommander.vue b/src/modules/11_probation/component/04_EvaluateCommander.vue
new file mode 100644
index 0000000..7082784
--- /dev/null
+++ b/src/modules/11_probation/component/04_EvaluateCommander.vue
@@ -0,0 +1,27 @@
+<script setup lang="ts">
+import { useQuasar } from "quasar";
+import { ref } from "vue";
+import { useRouter } from "vue-router";
+
+const router = useRouter();
+const $q = useQuasar();
+const mode = ref<any>($q.screen.gt.xs);
+</script>
+<template>
+    <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"
+        unelevated
+        round
+        dense
+        flat
+        color="primary"
+        class="q-mr-sm"
+        @click="router.go(-1)"
+      />
+      <div>แบบประเมินผล (ผู้บังคับบัญชา)</div>
+    </div>
+  </div>
+  
+</template>
diff --git a/src/modules/11_probation/component/05_EvaluateChairman.vue b/src/modules/11_probation/component/05_EvaluateChairman.vue
new file mode 100644
index 0000000..7fcd2c3
--- /dev/null
+++ b/src/modules/11_probation/component/05_EvaluateChairman.vue
@@ -0,0 +1,27 @@
+<script setup lang="ts">
+import { useQuasar } from "quasar";
+import { ref } from "vue";
+import { useRouter } from "vue-router";
+
+const router = useRouter();
+const $q = useQuasar();
+const mode = ref<any>($q.screen.gt.xs);
+</script>
+<template>
+    <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"
+        unelevated
+        round
+        dense
+        flat
+        color="primary"
+        class="q-mr-sm"
+        @click="router.go(-1)"
+      />
+      <div>แบบประเมินผล (คณะกรรมการ)</div>
+    </div>
+  </div>
+  
+</template>
diff --git a/src/modules/11_probation/component/06_EvaluateResult.vue b/src/modules/11_probation/component/06_EvaluateResult.vue
new file mode 100644
index 0000000..6cb3397
--- /dev/null
+++ b/src/modules/11_probation/component/06_EvaluateResult.vue
@@ -0,0 +1,735 @@
+<script setup lang="ts">
+import { useQuasar } from "quasar";
+import { ref, onMounted } from "vue";
+import { useRoute, useRouter } from "vue-router";
+
+import { useCounterMixin } from "@/stores/mixin";
+import http from "@/plugins/http";
+import config from "@/app.config";
+
+const assign = ref<any>([]);
+const person = ref<any>([]);
+const fullname = ref<string>("");
+const mentors = ref<any>([]);
+const date_start = ref<Date>(new Date());
+const date_finish = ref<Date>();
+const develop = ref<number>();
+const result = ref<number>();
+const director_id = ref<any>(null);
+const director_id2 = ref<any>(null);
+const director_id3 = ref<any>(null);
+const reson52 = ref<string>("");
+const ID = ref<string>("");
+const reson = ref<string>("");
+const director1_dated = ref<any>("");
+const director2_dated = ref<any>("");
+const chairman_dated = ref<Date>();
+const action = ref<string>("add");
+const expand_month = ref<string>();
+
+const commander = ref<any>([]);
+const optionDirector = ref<any>([]);
+
+const mixin = useCounterMixin();
+const {
+  showLoader,
+  hideLoader,
+  messageError,
+  dialogConfirm,
+  success,
+  date2Thai,
+} = mixin;
+const $q = useQuasar();
+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 mode = ref<any>($q.screen.gt.xs);
+const status = ref<boolean>(true);
+
+const options = ref<any>([
+  { value: 1, label: "พัฒนาครบ 3 ส่วน" },
+  { value: 2, label: "พัฒนาไม่ครบ 3 ส่วน" },
+]);
+const optionsResult = ref<any>([
+  { value: 1, label: "ไม่ต่ำกว่ามาตรฐานที่กำหนด เห็นควรให้รับราชการต่อ" },
+  { value: 2, label: "ต่ำกว่ามาตรฐานที่กำหนด เห็นควรให้ออกจากราชการ" },
+  {
+    value: 3,
+    label: "เห็นควรให้ขยายระยะเวลาทดลองปฏิบัติหน้าที่ราชการต่อไปอีก",
+  },
+]);
+
+function onSubmit() {
+  dialogConfirm($q, async () => await postData("post"));
+}
+
+
+/** post/put  data
+ * @param action post put
+ */
+ async function postData(action: string) {
+  const data = await {
+    start_date: date_start.value,
+    date_finish: date_finish.value,
+    develop_complete: develop.value,
+    pass_result: result.value,
+    reson: reson.value,
+    chairman_dated: chairman_dated.value,
+    director1_dated: director1_dated.value,
+    director2_dated: director2_dated.value,
+    expand_month: expand_month.value,
+  };
+  if (action === "post") {
+    await http
+      .post(config.API.createformReport(id.value), data)
+      .then(() => {
+        success($q, "บันทึกสำเร็จ");
+        router.push(`/probation/detail/${profileId.value}/${id.value}`);
+      })
+      .catch((e: any) => {
+        messageError($q, e);
+      })
+      .finally(() => {
+        status.value = false;
+        fecthResult(id.value);
+      });
+  } else if (action === "put") {
+    await http
+      .put(config.API.createformReport(id.value), data)
+      .then(() => {
+        success($q, "บันทึกสำเร็จ");
+        router.push(`/probation/detail/${profileId.value}/${id.value}`);
+      })
+      .catch((e: any) => {
+        messageError($q, e);
+      })
+      .finally(() => {
+        status.value = false;
+        fecthResult(id.value);
+      });
+  }
+}
+
+/** แปลง val เป็นตัวหนังสือ
+ * @param val ตัวเลข
+ */
+async function changeReson52(val: number) {
+  switch (val) {
+    case 1:
+      reson52.value = "เห็นควรให้รับราชการต่อไป";
+      break;
+    case 2:
+      reson52.value = "เห็นควรให้ออกจากราชการ";
+      break;
+    case 3:
+      reson52.value = `เห็นควรให้ขยายเวลาทดลองปฏิบัตหิน้าท่ีราชการต่อไปอีก ${expand_month.value} เดือน`;
+      break;
+
+    default:
+      break;
+  }
+}
+
+/** แปลงรหัสไฟล์ */
+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);
+}
+
+/**
+ * ดาว์โหลดไฟล์
+ * @param type docx/pdf
+ */
+async function clickdownloadFile(type: string) {
+  showLoader();
+  await http
+    .get(config.API.reportEvaluateResult(type, id.value), {
+      responseType: "blob",
+    })
+    .then((res) => {
+      downloadFile(res, `แบบรายงานการประเมินฯ_${fullname.value}.${type}`);
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+/** get ข้อมูลรายการมอยหมาย เก็บไว้ตัวแปร
+ * @param id personal id
+ */
+async function fecthAssign(id: string) {
+  showLoader();
+  await http
+    .get(config.API.evaluateReportcreate(id))
+    .then(async(res) => {
+      assign.value = res.data.data.assign;
+      person.value = res.data.data.person;
+      mentors.value = res.data.data.mentors;
+      date_start.value = res.data.data.assign.date_start;
+      date_finish.value = res.data.data.assign.date_finish;
+
+      if (
+        res.data.data.result.develop_complete != null &&
+        res.data.data.result.evaluate_result != null
+      ) {
+        develop.value = res.data.data.result.develop_complete;
+        result.value = res.data.data.result.evaluate_result;
+        await changeReson52(Number(res.data.data.result.evaluate_result));
+      }
+
+      director_id.value = res.data.data.chairman;
+      director_id2.value = res.data.data.commander;
+      if (mentors.value.length != 0) {
+        director_id3.value = mentors.value[0];
+      }
+      commander.value = res.data.data.commander;
+      optionDirector.value = mentors.value;
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+/** get ข้อมูล เก็บไว้ตัวแปร
+ * @param id personal id
+ */
+const fecthResult = async (id: string) => {
+  await http
+    .get(config.API.createformReport(id))
+    .then(async (res: any) => {
+      if (res.data.data != null) {
+        const data = await res.data.data.evaluate;
+        ID.value = data.id;
+        date_start.value = data.date_start;
+        date_finish.value = data.date_finish;
+        develop.value = await Number(data.develop_complete);
+        result.value = await Number(data.pass_result);
+        reson.value = await data.reson;
+        chairman_dated.value = await data.chairman_dated;
+        director1_dated.value = await data.director1_dated;
+        director2_dated.value = await data.director2_dated;
+        status.value = false;
+        action.value = "edit";
+        expand_month.value = data.expand_month;
+        await changeReson52(Number(data.pass_result));
+      }
+    })
+    .catch((e) => {});
+};
+
+/** ผลการประเมินการทดลองปฏิบัติหน้าที่ราชการ  */
+async function selectResult() {
+  if (result.value !== 3) {
+    expand_month.value = "";
+  }
+
+  await changeReson52(Number(result.value));
+}
+
+onMounted(async () => {
+  await fecthAssign(id.value);
+  await fecthResult(id.value);
+});
+</script>
+<template>
+  <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"
+        unelevated
+        round
+        dense
+        flat
+        color="primary"
+        class="q-mr-sm"
+        @click="router.go(-1)"
+      />
+      <div>แบบรายงานการประเมิน ฯ</div>
+    </div>
+  </div>
+  <div :class="`${$q.screen.gt.xs ? '' : 'mobileClass'}`">
+    <div class="col-12">
+      <span class="toptitle text-dark">แบบรายงานการประเมินฯ</span>
+      <q-btn
+        v-if="!status"
+        size="12px"
+        flat
+        dense
+        round
+        icon="mdi-download"
+        color="primary"
+      >
+        <q-tooltip>ดาวน์โหลด</q-tooltip>
+        <q-menu>
+          <q-list style="min-width: 150px">
+            <q-item clickable v-close-popup @click="clickdownloadFile('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="clickdownloadFile('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>
+    <div class="row q-my-sm q-col-gutter-y-sm">
+      <div class="col-12 text-dark text-weight-medium">
+        <div class="col-12 row items-center q-col-gutter-y-xs">
+          <div class="col-12">
+            <q-icon name="mdi-label" color="grey-4" />
+            <span class="text-grey-6 q-pl-sm"
+              >ผู้ทดลองปฏิบัติหน้าที่ราชการ</span
+            >
+            <span class="text-dark q-pl-sm">{{ person.name }}</span>
+          </div>
+
+          <div class="col-12 q-pl-md">
+            <span class="text-grey-6 q-pl-sm">ตำแหน่งในสายงาน</span>
+            <span class="text-dark q-pl-sm">{{ person.PositionLineName }}</span>
+          </div>
+          <div class="col-12 q-pl-md">
+            <span class="text-grey-6 q-pl-sm">ระดับ</span>
+            <span class="text-dark q-pl-sm">
+              {{ person.PositionLevelName }}</span
+            >
+          </div>
+          <div class="col-12 q-pl-md">
+            <span class="text-grey-6 q-pl-sm">สังกัด</span>
+            <span class="text-dark q-pl-sm">{{ person.Oc }}</span>
+          </div>
+        </div>
+      </div>
+
+      <div class="col-12 text-dark text-weight-medium row items-center">
+        <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
+        ประเมินผล
+        <span class="text-primary q-pr-sm"> ครั้งที่ 1 </span>
+      </div>
+
+      <div class="col-12 text-dark row text-weight-medium 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>
+      </div>
+      <div class="col-12">
+        <q-form
+          greedy
+          @submit.prevent
+          @validation-success="onSubmit"
+          class="full-width"
+        >
+          <div class="row q-col-gutter-sm">
+            <div class="col-12 col-sm-6">
+              <datepicker
+                menu-class-name="modalfix"
+                v-model="date_start"
+                :locale="'th'"
+                autoApply
+                borderless
+                :readonly="!status"
+                :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
+                    :disable="!status"
+                    class="full-width datepicker"
+                    :model-value="
+                      date_start != null ? date2Thai(date_start) : 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
+                :readonly="!status"
+                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
+                    :disable="!status"
+                    class="full-width datepicker"
+                    :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 col-sm-6">
+              <q-select
+                :rules="[
+                  (val) =>
+                    !!val ||
+                    'กรุณาเลือกการพัฒนาในระหว่างทดลองปฏิบัติหน้าที่ราชการ',
+                ]"
+                hide-bottom-space
+                :options="options"
+                dense
+                borderless
+                :disable="!status"
+                emit-value
+                map-options
+                option-label="label"
+                option-value="value"
+                outlined
+                v-model="develop"
+                label="การพัฒนาในระหว่างทดลองปฏิบัติหน้าที่ราชการ"
+                use-input
+                ><template v-slot:no-option>
+                  <q-item>
+                    <q-item-section class="text-grey">
+                      ไม่มีข้อมูล
+                    </q-item-section>
+                  </q-item>
+                </template>
+              </q-select>
+            </div>
+            <div :class="`col-12 col-sm-6`">
+              <q-select
+                :rules="[
+                  (val) =>
+                    !!val ||
+                    'กรุณาเลือกผลการประเมินการทดลองปฏิบัติหน้าที่ราชการ',
+                ]"
+                hide-bottom-space
+                :options="optionsResult"
+                :disable="!status"
+                dense
+                borderless
+                emit-value
+                map-options
+                option-label="label"
+                option-value="value"
+                outlined
+                v-model="result"
+                class="selectPt"
+                label="ผลการประเมินการทดลองปฏิบัติหน้าที่ราชการ"
+                @update:model-value="selectResult"
+                use-input
+                ><template v-slot:no-option>
+                  <q-item>
+                    <q-item-section class="text-grey">
+                      ไม่มีข้อมูล
+                    </q-item-section>
+                  </q-item>
+                </template>
+              </q-select>
+            </div>
+            <div
+              v-if="result == 3"
+              :class="`col-12  ${result == 3 ? 'offset-sm-6 col-sm-6' : ''}`"
+            >
+              <q-input
+                outlined
+                hide-bottom-space
+                dense
+                v-model="expand_month"
+                label="จำนวนเดือน"
+                :rules="[(val) => !!val || 'กรุณากรอกจำนวนเดือน']"
+                type="number"
+              />
+            </div>
+            <div class="col-12 col-sm-6">
+              <q-input
+                hide-bottom-space
+                dense
+                borderless
+                outlined
+                :disable="!status"
+                class="bg-white"
+                type="textarea"
+                v-model="reson"
+                lazy-rules
+                label="เหตุผล"
+                :rules="[
+                  (val) => (!!val && val.length > 0) || 'กรุณาระบุเหตุผล',
+                ]"
+              />
+            </div>
+            <div class="col-12 col-sm-6">
+              <q-input
+                hide-bottom-space
+                dense
+                borderless
+                outlined
+                readonly
+                class="bg-white"
+                type="textarea"
+                v-model="reson52"
+                lazy-rules
+                label="ความเห็นของผู้มีอํานาจสั่งบรรจุตามมาตรา 52"
+                :rules="[
+                  (val) => (!!val && val.length > 0) || 'กรุณาความเห็นของผู้มีอํานาจสั่งบรรจุตามมาตรา 52',
+                ]"
+              />
+            </div>
+            <div class="col-12">
+              <q-separator size="3px" color="grey-2" />
+            </div>
+            <div class="col-12 text-dark text-weight-medium">
+              ประธานคณะกรรมการประเมินผลการปฏิบัติหน้าที่ราชการ/ผู้มีอํานาจสั่งบรรจุตามมาตรา
+              52
+            </div>
+            <div class="col-12">
+              <div class="row q-col-gutter-sm">
+                <div class="col-12 col-sm-8">
+                  <q-select
+                    dense
+                    v-model="director_id"
+                    outlined
+                    :options="commander"
+                    label="ชื่อ-นามสกุล"
+                    option-label="label"
+                    disable
+                  />
+                </div>
+                <div class="col-12 col-sm-4">
+                  <datepicker
+                    menu-class-name="modalfix"
+                    v-model="chairman_dated"
+                    :locale="'th'"
+                    :readonly="!status"
+                    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
+                        :disable="!status"
+                        :model-value="
+                          chairman_dated != null
+                            ? date2Thai(chairman_dated)
+                            : 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 class="col-12 text-dark text-weight-medium">คณะกรรมการ</div>
+            <div class="col-12">
+              <div class="row q-col-gutter-sm">
+                <div class="col-12 col-sm-8">
+                  <q-select
+                    dense
+                    v-model="director_id2"
+                    outlined
+                    label="ชื่อ-นามสกุล"
+                    disable
+                    :options="optionDirector"
+                    option-label="label"
+                  />
+                </div>
+                <div class="col-12 col-sm-4">
+                  <datepicker
+                    menu-class-name="modalfix"
+                    v-model="director1_dated"
+                    :locale="'th'"
+                    autoApply
+                    borderless
+                    :readonly="!status"
+                    :enableTimePicker="false"
+                    week-start="0"
+                  >
+                    <template #year="{ year }">
+                      {{ year + 543 }}
+                    </template>
+                    <template #year-overlay-value="{ value }">
+                      {{ parseInt(value + 543) }}
+                    </template>
+                    <template #trigger>
+                      <q-input
+                        outlined
+                        dense
+                        hide-bottom-space
+                        :disable="!status"
+                        :model-value="
+                          director1_dated != null
+                            ? date2Thai(director1_dated)
+                            : null
+                        "
+                        :label="`${'ลงวันที่'}`"
+                        :rules="[(val) => !!val || `${'กรุณาเลือกลงวันที่'}`]"
+                      >
+                        <template v-slot:prepend>
+                          <q-icon
+                            name="event"
+                            class="cursor-pointer"
+                            style="color: var(--q-primary)"
+                          >
+                          </q-icon>
+                        </template>
+                      </q-input>
+                    </template>
+                  </datepicker>
+                </div>
+              </div>
+            </div>
+            <div class="col-12 text-dark text-weight-medium">คณะกรรมการ</div>
+            <div class="col-12">
+              <div class="row q-col-gutter-sm">
+                <div class="col-12 col-sm-8">
+                  <q-select
+                    dense
+                    v-model="director_id3"
+                    outlined
+                    label="ชื่อ-นามสกุล"
+                    :options="optionDirector"
+                    disable
+                    option-label="label"
+                  />
+                </div>
+                <div class="col-12 col-sm-4">
+                  <datepicker
+                    menu-class-name="modalfix"
+                    v-model="director2_dated"
+                    :locale="'th'"
+                    autoApply
+                    :readonly="!status"
+                    borderless
+                    :enableTimePicker="false"
+                    week-start="0"
+                  >
+                    <template #year="{ year }">
+                      {{ year + 543 }}
+                    </template>
+                    <template #year-overlay-value="{ value }">
+                      {{ parseInt(value + 543) }}
+                    </template>
+                    <template #trigger>
+                      <q-input
+                        outlined
+                        dense
+                        :disable="!status"
+                        hide-bottom-space
+                        :model-value="
+                          director2_dated != null
+                            ? date2Thai(director2_dated)
+                            : null
+                        "
+                        :label="`${'ลงวันที่'}`"
+                        :rules="[(val) => !!val || `${'กรุณาเลือกลงวันที่'}`]"
+                      >
+                        <template v-slot:prepend>
+                          <q-icon
+                            name="event"
+                            class="cursor-pointer"
+                            style="color: var(--q-primary)"
+                          >
+                          </q-icon>
+                        </template>
+                      </q-input>
+                    </template>
+                  </datepicker>
+                </div>
+              </div>
+            </div>
+            
+          <div class="col-12" align="right" v-if="action == 'add'">
+            <q-btn label="บันทึก" color="secondary" type="submit"
+            ><q-tooltip>บันทึกข้อมูล</q-tooltip></q-btn
+          >
+
+          </div>
+          </div>
+        </q-form>
+      </div>
+    </div>
+  </div>
+</template>
+<style scoped>
+.mobileClass {
+  background-color: #fff;
+  border-radius: 10px;
+  padding: 10px;
+}
+</style>
diff --git a/src/modules/11_probation/component/07_EvaluateReport.vue b/src/modules/11_probation/component/07_EvaluateReport.vue
new file mode 100644
index 0000000..726be63
--- /dev/null
+++ b/src/modules/11_probation/component/07_EvaluateReport.vue
@@ -0,0 +1,27 @@
+<script setup lang="ts">
+import { useQuasar } from "quasar";
+import { ref } from "vue";
+import { useRouter } from "vue-router";
+
+const router = useRouter();
+const $q = useQuasar();
+const mode = ref<any>($q.screen.gt.xs);
+</script>
+<template>
+    <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"
+        unelevated
+        round
+        dense
+        flat
+        color="primary"
+        class="q-mr-sm"
+        @click="router.go(-1)"
+      />
+      <div>ผลการประเมินการ ฯ</div>
+    </div>
+  </div>
+  
+</template>
diff --git a/src/modules/11_probation/component/08_SurveyComment.vue b/src/modules/11_probation/component/08_SurveyComment.vue
new file mode 100644
index 0000000..0a4ca85
--- /dev/null
+++ b/src/modules/11_probation/component/08_SurveyComment.vue
@@ -0,0 +1,262 @@
+<script setup lang="ts">
+import { useQuasar } from "quasar";
+import { onMounted, ref, watch } from "vue";
+import { useRoute, useRouter } from "vue-router";
+import { useCounterMixin } from "@/stores/mixin";
+
+import Criterion from "@/modules/11_probation/component/Criterion.vue";
+import http from "@/plugins/http";
+import config from "@/app.config";
+import { useProbationStore } from "@/modules/11_probation/store/probation";
+
+const borderCustom = ref<boolean>(false);
+const store = useProbationStore();
+const router = useRouter();
+const route = useRoute();
+
+const status = ref<boolean>(false);
+const mixin = useCounterMixin();
+const { showLoader, hideLoader, messageError, dialogConfirm,success } = mixin;
+const id = ref<string>(route.params.id as string);
+const $q = useQuasar();
+const mode = ref<any>($q.screen.gt.xs);
+
+const answer1 = ref<string>("");
+const answer2 = ref<string>("");
+const answer3 = ref<number>(0);
+
+function onSubmit() {
+  if (answer3.value == 0) {
+    borderCustom.value = true;
+  } else {
+    dialogConfirm($q, () => {
+      http
+        .post(config.API.summarySurveyDetail(id.value), {
+          answer1: answer1.value,
+          answer2: answer2.value,
+          answer3: answer3.value,
+        })
+        .then((res) => {
+          success($q, "บันทึกสำเร็จ");
+          getData()
+        }).catch((e)=>{
+          messageError($q,e)
+        }).finally(()=>{
+
+        })
+    });
+  }
+}
+
+function getData() {
+  showLoader();
+  http
+    .get(config.API.summarySurveyDetail(id.value))
+    .then((res) => {
+      const data = res.data.data;
+      if (data !== null) {
+        answer1.value = data.answer1;
+        answer2.value = data.answer2;
+        answer3.value = data.answer3;
+        status.value = true;
+      }
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+/** ถ้าเป็น 0 ใส่ class */
+watch(answer3, () => {
+  if (answer3.value !== 0) {
+    borderCustom.value = false;
+  }
+});
+
+onMounted(() => {
+  borderCustom.value = false;
+  getData();
+});
+</script>
+<template>
+  <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"
+        unelevated
+        round
+        dense
+        flat
+        color="primary"
+        class="q-mr-sm"
+        @click="router.go(-1)"
+      />
+      <div>แบบสํารวจความคิดเห็น</div>
+    </div>
+  </div>
+  <div :class="`row q-my-sm ${$q.screen.gt.xs ? '' : 'mobileClass'}`">
+    <q-form
+      greedy
+      @submit.prevent
+      @validation-success="onSubmit"
+      class="full-width"
+    >
+      <div class="row q-col-gutter-sm">
+        <div class="col-12">
+          <span class="toptitle text-dark"
+            >แบบสํารวจความคิดเห็นการทดลองปฏิบัติหน้าที่ราชการ</span
+          >
+        </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">
+          <q-input
+            :disable="status"
+            label="ความคิดเห็น"
+            bg-color="white"
+            dense
+            borderless
+            outlined
+            v-model="answer1"
+            type="textarea"
+            :rules="[(val: string) => !!val || `${'กรุณากรอกความคิดเห็น'}`]"
+          />
+        </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">
+          <q-input
+            :disable="status"
+            label="ความคิดเห็น"
+            bg-color="white"
+            dense
+            borderless
+            outlined
+            v-model="answer2"
+            type="textarea"
+            :rules="[(val: string) => !!val || `${'กรุณากรอกความคิดเห็น'}`]"
+          />
+        </div>
+
+        <div
+          v-if="$q.screen.gt.xs"
+          :class="`col-12 row text-weight-medium items-center ${
+            borderCustom ? 'border_custom' : ''
+          }`"
+        >
+          <q-avatar class="bg-grey-2 q-mr-sm" size="28px">3</q-avatar>
+          ความพึงพอใจกับการทดลองปฏิบัติหน้าที่ราชการของคุณอยู่ในระดับใด
+          <q-space />
+
+          <q-rating
+            :disable="status"
+            v-model="answer3"
+            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>
+        </div>
+
+        <div v-else class="col-12 text-weight-medium">
+          <div class="col-12 row no-wrap text-weight-medium">
+            <q-avatar class="bg-grey-2 q-mr-sm" size="28px">3</q-avatar>
+            ความพึงพอใจกับการทดลองปฏิบัติหน้าที่ราชการของคุณอยู่ในระดับใด
+          </div>
+
+          <div
+            :class="`col-12 text-center q-pa-sm q-mt-sm ${
+              borderCustom ? 'border_customMR' : 'border_customM'
+            }`"
+          >
+            <q-rating
+              :disable="status"
+              v-model="answer3"
+              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>
+          </div>
+        </div>
+        <div class="col-12">
+          <q-separator size="3px" color="grey-2" />
+        </div>
+        <Criterion />
+        <div class="col-12" align="right">
+          <q-btn label="บันทึก" color="secondary" type="submit" v-if="!status"
+            ><q-tooltip>บันทึกข้อมูล</q-tooltip></q-btn
+          >
+        </div>
+      </div>
+    </q-form>
+  </div>
+</template>
+<style scoped>
+.mobileClass {
+  background-color: #fff;
+  border-radius: 10px;
+  padding: 10px;
+}
+
+.border_custom {
+  border: 2px solid #c10015;
+  border-radius: 5px;
+  color: #c10015;
+  padding: 10px;
+}
+
+.border_customM {
+  border: 1px solid #ededed;
+  border-radius: 20px;
+}
+
+.border_customMR {
+  border: 2px solid #c10015;
+  border-radius: 20px;
+  padding: 10px;
+}
+</style>
diff --git a/src/modules/11_probation/component/Criterion.vue b/src/modules/11_probation/component/Criterion.vue
new file mode 100644
index 0000000..e21d339
--- /dev/null
+++ b/src/modules/11_probation/component/Criterion.vue
@@ -0,0 +1,61 @@
+<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>
+</template>
+<style lang="scss" scoped>
+.text-top0 {
+  font-weight: 600;
+  padding-bottom: 8px;
+  color: rgb(70, 68, 68);
+}
+</style>
\ No newline at end of file
diff --git a/src/modules/11_probation/interface/index/assign.ts b/src/modules/11_probation/interface/index/assign.ts
new file mode 100644
index 0000000..cbc724b
--- /dev/null
+++ b/src/modules/11_probation/interface/index/assign.ts
@@ -0,0 +1,13 @@
+interface MonthOption {
+  value: number;
+  label: string;
+}
+interface CheckboxItem {
+  id: number;
+  parent_id: number;
+  description: string;
+  status_select: number;
+  checked: number;
+}
+
+export type { MonthOption, CheckboxItem };
diff --git a/src/modules/11_probation/interface/index/main.ts b/src/modules/11_probation/interface/index/main.ts
new file mode 100644
index 0000000..e8c32f7
--- /dev/null
+++ b/src/modules/11_probation/interface/index/main.ts
@@ -0,0 +1,13 @@
+interface ListMain {
+  id: string
+  round_no: number;
+  date_start: string
+  date_finish: string
+  mentors: string
+  commander: string
+  chairman: string
+}
+
+export type {
+    ListMain
+}
\ No newline at end of file
diff --git a/src/modules/11_probation/pages/addPage.vue b/src/modules/11_probation/pages/addPage.vue
new file mode 100644
index 0000000..f5ae724
--- /dev/null
+++ b/src/modules/11_probation/pages/addPage.vue
@@ -0,0 +1,41 @@
+<script setup lang="ts">
+import { useRouter } from "vue-router";
+
+/** component */
+import Assign from '@/modules/11_probation/component/01_Assign.vue'
+
+
+const router = useRouter();
+
+</script>
+<template>
+  <div class="col-xs-12 col-sm-12 col-md-11">
+    <div class="toptitle text-white col-12 row items-center no-wrap">
+      <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 class="q-pa-md">
+  <Assign/>
+</q-card>
+
+</template>
+<style scoped>
+.mobileClass {
+  background-color: #fff;
+  border-radius: 10px;
+  padding: 10px;
+}
+
+
+
+</style>
diff --git a/src/modules/11_probation/pages/detailPage.vue b/src/modules/11_probation/pages/detailPage.vue
new file mode 100644
index 0000000..e87ad25
--- /dev/null
+++ b/src/modules/11_probation/pages/detailPage.vue
@@ -0,0 +1,294 @@
+<script setup lang="ts">
+import { ref } from "vue";
+import { useRoute, useRouter } from "vue-router";
+import { useProbationStore } from "@/modules/11_probation/store/probation";
+
+import Assign from "@/modules/11_probation/component/01_Assign.vue";
+import RecordCareker from "@/modules/11_probation/component/02_RecordCareker.vue";
+import RecordCommander from "@/modules/11_probation/component/03_RecordCommander.vue";
+import EvaluateCommander from "@/modules/11_probation/component/04_EvaluateCommander.vue";
+import EvaluateChairman from "@/modules/11_probation/component/05_EvaluateChairman.vue";
+import EvaluateResult from "@/modules/11_probation/component/06_EvaluateResult.vue";
+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();
+const router = useRouter();
+const route = useRoute();
+
+const id = ref<string>(route.params.id as string)
+const profileId = ref<string>(route.params.profileId as string)
+
+/**
+ * เปลี่ยน tab เมนู
+ * @param tab กำหนด tab
+ */
+function changeTab(tab: string) {
+  store.mainTab = tab;
+  activeTab.value = store.mainTab;
+}
+
+function onMobile(type: string) {
+  router.push(`/probation/${type}/${profileId.value}/${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 :class='!$q.screen.gt.xs ? `borderRadius`:``'>
+    <q-layout
+      v-if="$q.screen.gt.xs"
+      view="hHh Lpr lff"
+      container
+      class="shadow-2 rounded-borders page-relative"
+      style="height: 82vh"
+    >
+      <q-header class="bg-grey-1"> </q-header>
+      <q-drawer
+        v-model="drawer"
+        show-if-above
+        :width="150"
+        :breakpoint="500"
+        class="bg-grey-1"
+        bordered
+      >
+        <q-scroll-area class="fit" :horizontal-thumb-style="{ opacity: '0' }">
+          <q-list class="text-grey-9">
+            <q-item
+              active-class="text-primary bg-teal-1 text-weight-medium"
+              clickable
+              class="q-py-sm"
+              dense
+              v-ripple
+              :active="activeTab == 'tab1'"
+              @click="changeTab('tab1')"
+            >
+              <q-item-section>แบบมอบหมายงาน ฯ</q-item-section>
+            </q-item>
+
+            <q-item
+              dense
+              class="q-py-sm"
+              active-class="text-primary bg-teal-1 text-weight-medium"
+              clickable
+              v-ripple
+              :active="activeTab == 'tab2'"
+              @click="changeTab('tab2')"
+            >
+              <q-item-section>
+                แบบบันทึกผล
+                <br />
+                <div class="text-caption text-grey-7">(ผู้ดูแล)</div>
+              </q-item-section>
+            </q-item>
+            <q-item
+              dense
+              class="q-py-sm"
+              active-class="text-primary bg-teal-1 text-weight-medium"
+              clickable
+              v-ripple
+              :active="activeTab == 'tab3'"
+              @click="changeTab('tab3')"
+            >
+              <q-item-section>
+                แบบบันทึกผล
+                <br />
+                <div class="text-caption text-grey-7">(ผู้บังคับบัญชา)</div>
+              </q-item-section>
+            </q-item>
+
+            <q-item
+              active-class="text-primary bg-teal-1 text-weight-medium"
+              clickable
+              class="q-py-sm"
+              dense
+              v-ripple
+              :active="activeTab == 'tab4'"
+              @click="changeTab('tab4')"
+            >
+              <q-item-section>
+                แบบประเมินผล<br />
+                <div class="text-caption text-grey-7">(ผู้บังคับบัญชา)</div>
+              </q-item-section>
+            </q-item>
+
+            <q-item
+              active-class="text-primary bg-teal-1 text-weight-medium"
+              clickable
+              class="q-py-sm"
+              dense
+              v-ripple
+              :active="activeTab == 'tab5'"
+              @click="changeTab('tab5')"
+            >
+              <q-item-section>
+                แบบประเมินผล<br />
+                <div class="text-caption text-grey-7">(คณะกรรมการ)</div>
+              </q-item-section>
+            </q-item>
+
+            <q-item
+              active-class="text-primary bg-teal-1 text-weight-medium"
+              clickable
+              class="q-py-sm"
+              dense
+              v-ripple
+              :active="activeTab == 'tab6'"
+              @click="changeTab('tab6')"
+            >
+              <q-item-section> แบบรายงาน<br />การประเมินฯ </q-item-section>
+            </q-item>
+
+            <q-item
+              active-class="text-primary bg-teal-1 text-weight-medium"
+              clickable
+              class="q-py-sm"
+              dense
+              v-ripple
+              :active="activeTab == 'tab7'"
+              @click="changeTab('tab7')"
+            >
+              <q-item-section> ผลการประเมินการ ฯ </q-item-section>
+            </q-item>
+
+            <q-item
+              active-class="text-primary bg-teal-1 text-weight-medium"
+              clickable
+              class="q-py-sm"
+              dense
+              v-ripple
+              :active="activeTab == 'tab8'"
+              @click="changeTab('tab8')"
+            >
+              <q-item-section> แบบสํารวจ<br />ความคิดเห็น </q-item-section>
+            </q-item>
+          </q-list>
+        </q-scroll-area>
+      </q-drawer>
+      <q-page-container>
+        <q-layout view="hHh Lpr lFf" container style="height: 82vh">
+          <q-tab-panels
+            v-model="activeTab"
+            animated
+            class="shadow-2 rounded-borders"
+            vertical
+          >
+            <q-tab-panel name="tab1">
+              <Assign />
+            </q-tab-panel>
+            <q-tab-panel name="tab2">
+              <RecordCareker />
+            </q-tab-panel>
+            <q-tab-panel name="tab3">
+              <RecordCommander />
+            </q-tab-panel>
+            <q-tab-panel name="tab4">
+              <EvaluateCommander />
+            </q-tab-panel>
+            <q-tab-panel name="tab5">
+              <EvaluateChairman />
+            </q-tab-panel>
+            <q-tab-panel name="tab6">
+              <EvaluateResult />
+            </q-tab-panel>
+            <q-tab-panel name="tab7">
+              <EvaluateReport />
+            </q-tab-panel>
+            <q-tab-panel name="tab8">
+              <SurveyComment />
+            </q-tab-panel>
+
+          </q-tab-panels>
+        </q-layout>
+      </q-page-container>
+    </q-layout>
+    <q-list v-else separator>
+      <q-item clickable v-ripple @click="onMobile('assign-work')" style="border-radius: 20px 20px 0 0;">
+        <q-item-section>แบบมอบหมายงาน ฯ</q-item-section>
+        <q-item-section avatar>
+          <q-avatar text-color="info" icon="mdi-chevron-right" />
+        </q-item-section>
+      </q-item>
+      <q-item clickable v-ripple @click="onMobile('record-careker')">
+        <q-item-section>
+          <q-item-label>แบบบันทึกผล</q-item-label>
+          <q-item-label class="text-grey-6">(ผู้ดูแล)</q-item-label>
+        </q-item-section>
+        <q-item-section avatar>
+          <q-avatar text-color="info" icon="mdi-chevron-right" />
+        </q-item-section>
+      </q-item>
+      <q-item clickable v-ripple @click="onMobile('record-commander')">
+        <q-item-section>
+          <q-item-label>แบบบันทึกผล</q-item-label>
+          <q-item-label class="text-grey-6">(ผู้บังคับบัญชา)</q-item-label>
+        </q-item-section>
+        <q-item-section avatar>
+          <q-avatar text-color="info" icon="mdi-chevron-right" />
+        </q-item-section>
+      </q-item>
+      <q-item clickable v-ripple @click="onMobile('evaluate-commander')">
+        <q-item-section>
+          <q-item-label>แบบประเมินผล</q-item-label>
+          <q-item-label class="text-grey-6">(ผู้บังคับบัญชา)</q-item-label>
+        </q-item-section>
+        <q-item-section avatar>
+          <q-avatar text-color="info" icon="mdi-chevron-right" />
+        </q-item-section>
+      </q-item>
+      <q-item clickable v-ripple @click="onMobile('evaluate-chairman')">
+        <q-item-section>
+          <q-item-label>แบบประเมินผล</q-item-label>
+          <q-item-label class="text-grey-6">(คณะกรรมการ)</q-item-label>
+        </q-item-section>
+        <q-item-section avatar>
+          <q-avatar text-color="info" icon="mdi-chevron-right" />
+        </q-item-section>
+      </q-item>
+      <q-item clickable v-ripple @click="onMobile('evaluate-result')">
+        <q-item-section>แบบรายงานการประเมิน ฯ</q-item-section>
+        <q-item-section avatar>
+          <q-avatar text-color="info" icon="mdi-chevron-right" />
+        </q-item-section>
+      </q-item>
+      <q-item clickable v-ripple @click="onMobile('evaluate-report')">
+        <q-item-section>ผลการประเมินการ ฯ</q-item-section>
+        <q-item-section avatar>
+          <q-avatar text-color="info" icon="mdi-chevron-right" />
+        </q-item-section>
+      </q-item>
+      <q-item clickable v-ripple @click="onMobile('survey-comment')" style="border-radius: 0 0 20px 20px;">
+        <q-item-section>แบบสํารวจความคิดเห็น</q-item-section>
+        <q-item-section avatar>
+          <q-avatar text-color="info" icon="mdi-chevron-right" />
+        </q-item-section>
+      </q-item>
+    </q-list>
+  </q-card>
+</template>
+<style scoped>
+.text_left .q-tabs__content .q-tab {
+  justify-content: start;
+  padding-left: 20px;
+}
+
+.borderRadius{
+  border-radius: 20px!important;
+}
+</style>
diff --git a/src/modules/11_probation/router.ts b/src/modules/11_probation/router.ts
new file mode 100644
index 0000000..8552638
--- /dev/null
+++ b/src/modules/11_probation/router.ts
@@ -0,0 +1,117 @@
+// registry
+const probationPage = () => import("@/modules/11_probation/views/main.vue");
+
+const probationAdd = () => import("@/modules/11_probation/pages/addPage.vue");
+const probationDetailPage = () => import("@/modules/11_probation/pages/detailPage.vue");
+
+const probationAssign = () => import('@/modules/11_probation/component/01_Assign.vue')
+const probationRecordCareker = () => import('@/modules/11_probation/component/02_RecordCareker.vue')
+const probationRecordCommander = () => import('@/modules/11_probation/component/03_RecordCommander.vue')
+const probationEvaluateCommander = () => import('@/modules/11_probation/component/04_EvaluateCommander.vue')
+const probationEvaluateChairman = () => import('@/modules/11_probation/component/05_EvaluateChairman.vue')
+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')
+export default [
+  {
+    path: "/probation",
+    name: "probationMain",
+    component: probationPage,
+    meta: {
+      Auth: true,
+      Key: [11],
+    },
+  },
+  {
+    path: "/probation/add/:profileId",
+    name: "probationAdd",
+    component: probationAdd,
+    meta: {
+      Auth: true,
+      Key: [11],
+    },
+  },
+  {
+    path: "/probation/detail/:profileId/:id",
+    name: "probationDetail",
+    component: probationDetailPage,
+    meta: {
+      Auth: true,
+      Key: [11],
+    },
+  },
+  {
+    path: "/probation/assign-work/:profileId/:id",
+    name: "probationAssign",
+    component: probationAssign,
+    meta: {
+      Auth: true,
+      Key: [11],
+    },
+  },
+//////////////////////////////////////////////////
+  {
+    path: "/probation/record-careker/:profileId/:id",
+    name: "probationRecordCareker",
+    component: probationRecordCareker,
+    meta: {
+      Auth: true,
+      Key: [11],
+    },
+  },
+  {
+    path: "/probation/record-commander/:profileId/:id",
+    name: "probationRecordCommander",
+    component: probationRecordCommander,
+    meta: {
+      Auth: true,
+      Key: [11],
+    },
+  },
+  {
+    path: "/probation/evaluate-commander/:profileId/:id",
+    name: "probationEvaluateCommander",
+    component: probationEvaluateCommander,
+    meta: {
+      Auth: true,
+      Key: [11],
+    },
+  },
+  {
+    path: "/probation/evaluate-chairman/:profileId/:id",
+    name: "probationEvaluateChairman",
+    component: probationEvaluateChairman,
+    meta: {
+      Auth: true,
+      Key: [11],
+    },
+  },
+  {
+    path: "/probation/evaluate-result/:profileId/:id",
+    name: "probationEvaluateResult",
+    component: probationEvaluateResult,
+    meta: {
+      Auth: true,
+      Key: [11],
+    },
+  },
+  {
+    path: "/probation/evaluate-report/:profileId/:id",
+    name: "probationEvaluateReport",
+    component: probationEvaluateReport,
+    meta: {
+      Auth: true,
+      Key: [11],
+    },
+  },
+  {
+    path: "/probation/survey-comment/:profileId/:id",
+    name: "probationSurveyComment",
+    component: probationSurveyComment,
+    meta: {
+      Auth: true,
+      Key: [11],
+    },
+  },
+
+];
diff --git a/src/modules/11_probation/store/probation.ts b/src/modules/11_probation/store/probation.ts
new file mode 100644
index 0000000..f840dec
--- /dev/null
+++ b/src/modules/11_probation/store/probation.ts
@@ -0,0 +1,20 @@
+import { defineStore } from "pinia";
+import { ref } from "vue";
+
+
+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",
+      ]);
+
+    return { mainTab,ratingColors,profileId };
+  }
+);
diff --git a/src/modules/11_probation/views/main.vue b/src/modules/11_probation/views/main.vue
new file mode 100644
index 0000000..3cc14dc
--- /dev/null
+++ b/src/modules/11_probation/views/main.vue
@@ -0,0 +1,430 @@
+<script setup lang="ts">
+import avatar from "@/assets/avatar_user.jpg";
+import { ref, reactive, onMounted } from "vue";
+import { useCounterMixin } from "@/stores/mixin";
+import keycloak from "@/plugins/keycloak";
+
+import { useRouter } from "vue-router";
+
+import http from "@/plugins/http";
+import config from "@/app.config";
+import { useQuasar, type QTableProps } from "quasar";
+
+import type { ListMain } from "@/modules/11_probation/interface/index/main";
+
+const profileId = ref<string>("");
+const rows = ref<ListMain[]>([]);
+const $q = useQuasar();
+const mixin = useCounterMixin();
+const {
+  messageError,
+  dialogConfirm,
+  findOrgName,
+  showLoader,
+  hideLoader,
+  date2Thai,
+} = mixin;
+
+const filter = ref<string>("");
+const mode = ref<any>($q.screen.gt.xs);
+const profileImg = ref<string>("");
+const router = useRouter();
+const formData = reactive<any>({
+  prefix: "",
+  firstName: "",
+  lastName: "",
+  position: "",
+  posExecutiveName: "",
+  posTypeName: "",
+  posLevelName: "",
+  org: "",
+});
+const sizeImg = ref<string>("");
+
+/** ข้อมูลที่เเสดงในตาราง */
+const visibleColumns = ref<string[]>([
+  "no",
+  "date_start",
+  "date_finish",
+  "mentors",
+  "commander",
+]);
+
+/** หัวตาราง */
+const columns = ref<QTableProps["columns"]>([
+  {
+    name: "no",
+    align: "left",
+    label: "ลำดับ",
+    sortable: false,
+    field: "no",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "date_start",
+    align: "left",
+    label: "ตั้งแต่วันที่",
+    sortable: true,
+    field: "date_start",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    format: (v) => date2Thai(v),
+  },
+  {
+    name: "date_finish",
+    align: "left",
+    label: "ถึงวันที่",
+    sortable: true,
+    field: "date_finish",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    format: (v) => date2Thai(v),
+  },
+  {
+    name: "mentors",
+    align: "left",
+    label: "ผู้ดูแล",
+    sortable: true,
+    field: "mentors",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "commander",
+    align: "left",
+    label: "ผู้บังคับบัญชา",
+    sortable: true,
+    field: "commander",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+]);
+
+function onResize(size: any) {
+  const width = size.width > 100 ? 100 : size.width;
+  sizeImg.value = `${width}px`;
+}
+
+function onMobile(type: string) {
+  router.push(`/registry/${type}`);
+}
+
+function getMain() {
+  showLoader();
+  http
+    .get(config.API.profilePosition())
+    .then(async (res) => {
+      const data = res.data.result;
+      formData.prefix = data.prefix;
+      formData.firstName = data.firstName;
+      formData.lastName = data.lastName;
+      formData.position = data.position;
+
+      formData.posTypeName = data.posTypeName;
+      formData.posExecutiveName = data.posExecutiveName;
+      formData.posLevelName = data.posLevelName;
+      formData.org = findOrgName(data);
+      profileId.value = data.profileId;
+      if (data.avatarName) {
+        getImg(data.profileId, data.avatarName);
+      } else {
+        profileImg.value = avatar;
+      }
+      await getList(data.profileId);
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+function getList(id: string) {
+  http
+    .get(config.API.probationMain(id))
+    .then((res) => {
+      const data = res.data.data
+      rows.value = data;
+    })
+    .catch((e) => {})
+    .finally(() => {});
+}
+function getImg(id: string, pathName: string) {
+  http
+    .get(config.API.fileByFile("ทะเบียนประวัติ", "โปรไฟล์", id, pathName))
+    .then((res) => {
+      profileImg.value = res.data.downloadUrl;
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {});
+}
+
+function onDetail(id: string) {
+  router.push(`/probation/detail/${profileId.value}/${id}`);
+}
+
+onMounted(async () => {
+
+  await getMain();
+});
+</script>
+<template>
+  <div class="row justify-center">
+    <div class="col-xs-12 col-sm-12 col-md-11">
+      <div class="toptitle text-white col-12 row items-center">
+        รายละเอียดงานที่ได้รับมอบหมาย
+      </div>
+      <div class="row q-col-gutter-md">
+        <div v-if="$q.screen.gt.xs" class="col-12">
+          <q-card>
+            <div class="bg-grey-1 row q-pa-sm items-center">
+              <span class="text-teal text-weight-bold text-body2">{{
+                formData.firstName
+                  ? `${formData.prefix}${formData.firstName} ${formData.lastName}`
+                  : "-"
+              }}</span>
+            </div>
+            <q-resize-observer @resize="onResize" />
+            <q-card-section class="q-pa-md">
+              <div class="row">
+                <div class="col-2 text-center self-center">
+                  <q-avatar :size="sizeImg" rounded>
+                    <img
+                      :src="profileImg"
+                      style="border-radius: 10px; object-fit: cover"
+                    />
+                  </q-avatar>
+                </div>
+                <div class="col-10 column justify-center no-wrap">
+                  <div class="row text-grey-6">
+                    <div class="col-4">ตำแหน่งในสายงาน</div>
+                    <div class="col-4">ระดับ</div>
+                    <div class="col-4">สังกัด</div>
+                  </div>
+                  <div class="row">
+                    <div class="col-4">
+                      {{ formData.position ? formData.position : "-" }}
+                    </div>
+                    <div class="col-4">
+                      {{ formData.posLevelName ? formData.posLevelName : "-" }}
+                    </div>
+                    <div class="col-4">
+                      {{ formData.org ? formData.org : "-" }}
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </q-card-section>
+          </q-card>
+        </div>
+        <div v-else class="col-12">
+          <q-card bordered>
+            <div class="bg-grey-1 row q-pa-sm items-center">
+              <span class="text-teal text-weight-bold text-body2">{{
+                formData.firstName
+                  ? `${formData.prefix}${formData.firstName} ${formData.lastName}`
+                  : "-"
+              }}</span>
+            </div>
+            <q-resize-observer @resize="onResize" />
+            <q-card-section>
+              <div class="text-center q-mt-md">
+                <q-avatar :size="sizeImg" rounded>
+                  <img
+                    :src="profileImg"
+                    style="border-radius: 10px; object-fit: cover"
+                  />
+                </q-avatar>
+              </div>
+            </q-card-section>
+
+            <q-list class="q-mt-md">
+              <q-item>
+                <q-item-section>
+                  <q-item-label class="text-grey-6"
+                    >ตำแหน่งในสายงาน</q-item-label
+                  >
+                  <q-item-label>{{
+                    formData.position ? formData.position : "-"
+                  }}</q-item-label>
+                </q-item-section>
+              </q-item>
+              <q-item>
+                <q-item-section>
+                  <q-item-label class="text-grey-6">ระดับ</q-item-label>
+                  <q-item-label>{{
+                    formData.posLevelName ? formData.posLevelName : "-"
+                  }}</q-item-label>
+                </q-item-section>
+              </q-item>
+              <q-item>
+                <q-item-section>
+                  <q-item-label class="text-grey-6">สังกัด</q-item-label>
+                  <q-item-label>{{
+                    formData.org ? formData.org : "-"
+                  }}</q-item-label>
+                </q-item-section>
+              </q-item>
+            </q-list>
+          </q-card>
+        </div>
+        <div class="col-12 row">
+          <q-card bordered class="col-12 q-pa-md">
+            <div class="row">
+              <q-btn
+                @click="router.push(`/probation/add/${profileId}`)"
+                size="12px"
+                flat
+                round
+                color="add"
+                icon="mdi-plus"
+              >
+                <q-tooltip>เพิ่มงานที่ได้รับมอบหมาย</q-tooltip>
+              </q-btn>
+              <q-space />
+              <q-input
+                class="inputgreen"
+                outlined
+                dense
+                v-model="filter"
+                label="ค้นหา"
+                :style="mode ? `max-width: 200px`:`max-width: 150px`"
+              >
+                <template v-slot:append>
+                  <q-icon
+                    v-if="filter !== ''"
+                    name="clear"
+                    class="cursor-pointer"
+                    @click="filter = ''"
+                  />
+                  <q-icon
+                    v-else
+                    name="search"
+                    class="cursor-pointer"
+                    @click="filter = ''"
+                  />
+                </template>
+              </q-input>
+              <q-select
+                v-if="$q.screen.gt.xs"
+                class="q-ml-sm"
+                dense
+                multiple
+                outlined
+                emit-value
+                map-options
+                options-cover
+                options-dense
+                option-value="name"
+                style="min-width: 150px"
+                v-model="visibleColumns"
+                :options="columns"
+                :display-value="$q.lang.table.columns"
+              />
+            </div>
+            <div class="q-mt-sm">
+              <d-table
+                flat
+                dense
+                bordered
+                ref="table"
+                virtual-scroll
+                :rows="rows"
+                :columns="columns"
+                :grid="!$q.screen.gt.xs"
+                :filter="filter"
+                :rows-per-page-options="[10, 25, 50, 100]"
+                :visible-columns="visibleColumns"
+                :virtual-scroll-sticky-size-start="48"
+              >
+                <template v-slot:header="props">
+                  <q-tr :props="props">
+                    <q-th
+                      v-for="col in props.cols"
+                      :key="col.name"
+                      :props="props"
+                    >
+                      <span class="text-weight-medium">{{ col.label }}</span>
+                    </q-th>
+                  </q-tr>
+                </template>
+
+                <template v-if="$q.screen.gt.xs" v-slot:body="props">
+                  <q-tr :props="props" class="cursor-pointer">
+                    <q-td v-for="(col, index) in props.cols" :key="col.name" @click="onDetail(props.row.id)">
+                      <div v-if="col.name == 'no'">
+                        {{ props.rowIndex + 1 }}
+                      </div>
+                      <div v-else-if="col.name == 'status'">
+                        {{ props.row.status ? props.row.status : "-" }}
+                      </div>
+                      <div v-else>
+                        {{ col.value ? col.value : "-" }}
+                      </div>
+                    </q-td>
+                  </q-tr>
+                </template>
+                <template v-else v-slot:item="props">
+                  <div class="q-mb-xs col-xs-12 col-sm-6 col-md-4 col-lg-3">
+                    <q-card bordered flat>
+                      <q-list dense class="q-mt-lg relative-position">
+                        <q-btn
+                          icon="info"
+                          color="info"
+                          flat
+                          dense
+                          round
+                          size="14px"
+                          class="absolute_button"
+                          @click="onDetail(props.row.id)"
+                        >
+                          <q-tooltip>ประวัติแก้ไขตำแหน่ง/เงินเดือน</q-tooltip>
+                        </q-btn>
+                        <q-item v-for="col in props.cols" :key="col.name">
+                          <q-item-section class="fix_top">
+                            <q-item-label
+                              class="text-grey-6 text-weight-medium"
+                              >{{ col.label }}</q-item-label
+                            >
+                          </q-item-section>
+                          <q-item-section class="fix_top">
+                            <q-item-label
+                              class="text-dark text-weight-medium"
+                              >{{ col.value ? col.value : "-" }}</q-item-label
+                            >
+                          </q-item-section>
+                        </q-item>
+                      </q-list>
+                    </q-card>
+                  </div>
+                </template>
+                <template v-slot:no-data>
+                  <div
+                    class="full-width row flex-center bg-grey-3 q-pa-md rounded-borders text-body2 text-weight-medium"
+                  >
+                    <span> ไม่พบข้อมูลตำแหน่ง/เงินเดือน </span>
+                  </div>
+                </template>
+              </d-table>
+            </div>
+          </q-card>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<style scoped>
+.absolute_button {
+  position: absolute;
+  right: 5px;
+  top: -20px;
+}
+
+.fix_top {
+  justify-content: start !important;
+}
+</style>
diff --git a/src/router/index.ts b/src/router/index.ts
index 200dd87..86a2395 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -13,7 +13,8 @@ import ModuAppealComplain from "@/modules/07_appealComplain/router";
 import ModuleSupport from "@/modules/00_support/router";
 import ModuleKPI from "@/modules/08_KPI/router";
 import ModuleScholarship from "@/modules/09_scholarship/router";
-import Moduleregistry from "@/modules/10_registry/router";
+import ModuleRegistry from "@/modules/10_registry/router";
+import ModuleProbation from "@/modules/11_probation/router";
 // TODO: ใช้หรือไม่?
 import keycloak from "@/plugins/keycloak";
 
@@ -52,7 +53,8 @@ const router = createRouter({
         ...ModuleSupport,
         ...ModuleKPI,
         ...ModuleScholarship,
-        ...Moduleregistry
+        ...ModuleRegistry,
+        ...ModuleProbation
       ],
     },
   ],
diff --git a/src/stores/mixin.ts b/src/stores/mixin.ts
index a1bfb6e..a803414 100644
--- a/src/stores/mixin.ts
+++ b/src/stores/mixin.ts
@@ -997,6 +997,42 @@ export const useCounterMixin = defineStore("mixin", () => {
     return "";
   }
 
+  function findOrgName(obj: any) {
+    if (obj) {
+      let name =
+        obj.child4 != null && obj.child3 != null
+          ? obj.child4 + "/"
+          : obj.child4 != null
+          ? obj.child4
+          : "";
+
+      name +=
+        obj.child3 != null && obj.child2 != null
+          ? obj.child3 + "/"
+          : obj.child3 !== null
+          ? obj.child3
+          : "";
+
+      name +=
+        obj.child2 != null && obj.child1 != null
+          ? obj.child2 + "/"
+          : obj.child2 != null
+          ? obj.child2
+          : "";
+
+      name +=
+        obj.child1 != null && obj.root != null
+          ? obj.child1 + "/"
+          : obj.child1 != null
+          ? obj.child1
+          : "";
+      name += obj.root != null ? obj.root : "";
+      return name == "" ? "-" : name;
+    } else {
+      return "";
+    }
+  }
+
   return {
     calAge,
     date2Thai,
@@ -1031,5 +1067,6 @@ export const useCounterMixin = defineStore("mixin", () => {
     dialogMessageNotify,
     arabicNumberToText,
     calculateDurationYmd,
+    findOrgName,
   };
 });