Merge branch 'develop' into working / ปรับ ui เกษียณ

src/api/02_organizational/api.treelist.ts

@@ -10,7 +10,7 @@ import env from "../index";
 const organizationPath = `${env.API_URI_ORG_SERVICE}/Organization/`;
 const postionMasterPath = `${env.API_URI_ORG_SERVICE}/PositionMaster`;
 const organizationPosition = `${env.API_URI_ORG_SERVICE}/OrganizationPosition/`;
-const organizationEmployeePosition = `${env.API_URI_ORG_EMPLOYEE_SERVICE}/organization-employee/`;
+const organizationEmployee = `${env.API_URI_ORG_EMPLOYEE_SERVICE}/organization-employee/`;
 
 const report = `${env.API_URI}/report/organization/`;
 
@@ -84,7 +84,9 @@ export default {
   getPositionNumberIdByOcId: (OcId: string) =>
     `${postionMasterPath}/position-number/Oc/${OcId}`,
 
-  organizationEmployeePosition: `${organizationEmployeePosition}`,
-  organizationEmployeePositionId: (id: string) =>
-    `${organizationEmployeePosition}${id}`,
+  organizationEmployee: `${organizationEmployee}`,
+  organizationEmployeeId: (id: string) => `${organizationEmployee}${id}`,
+
+  organizationEmployeePositionId: (profileId: string) =>
+    `${organizationEmployee}position/${profileId}`,
 };

src/api/06_retirement/api.retirement.ts

@@ -1,6 +1,15 @@
-/**
- * api พ้นจากราชการ
- */
 import env from "../index";
+const retirement = `${env.API_URI}/retirement`
 
-export default {};
+
+export default {
+    profile: (type: string, year: string) => `${retirement}/profile/${type}/${year}`,
+    profileRetire: (retireId: string) => `${retirement}/profile/${retireId}`,
+    listRetire: (retireId: string) => `${retirement}/${retireId}`,
+    createnote: () => `${retirement}/reason`,
+    reasonId: (retireId:string) => `${retirement}/reason/${retireId}`,
+    retirement:(type:string,year:string) => `${retirement}/${type}/${year}`
+    
+
+
+};

src/api/index.ts

@@ -25,6 +25,7 @@ const config = ref<any>({
     API_URI_ORG_TREE:
       "https://s3cluster.frappet.com/bma-ehr-fpt/organization/strueture/tree_20230712_172702.json",
     MEET_URI: "meet.frappet.com",
+    API_RETIREMENT_URI: "https://bma-ehr.frappet.synology.me/api/v1",
   },
   test: {
     API_URI: "http://localhost:5010/api/v1",
@@ -65,6 +66,9 @@ const API_URI_PROFILE_SERVICE = ref<string>(
 const API_PLACEMENT_URI = ref<string>(
   config.value[env.value].API_PLACEMENT_URI
 );
+const API_RETIREMENT_URI = ref<string>(
+  config.value[env.value].API_RETIREMENT_URI
+);
 const API_URI_ORG_TREE = ref<string>(config.value[env.value].API_URI_ORG_TREE);
 
 export default {
@@ -79,4 +83,5 @@ export default {
   API_PLACEMENT_URI: API_PLACEMENT_URI.value,
   API_URI_ORG_TREE: API_URI_ORG_TREE.value,
   MEET_URI: MEET_URI.value,
+  API_RETIREMENT_URI:API_RETIREMENT_URI.value,
 };

src/api/recruiting/api.disable.ts

@@ -1,39 +1,40 @@
 /**
  * api สรรหา
  */
-import env from "../index"
-const disableExam = `${env.API_CANDIDATE_URI}/candidate/disable-exam/`
-const diable_report = `${env.API_URI}/report/exam/`
+import env from "../index";
+const disableExam = `${env.API_CANDIDATE_URI}/candidate/disable-exam/`;
+const diable_report = `${env.API_URI}/report/exam/`;
 
 export default {
-    getDisableCandidates: `${disableExam}candidate`,
-    saveDisableCandidates: `${disableExam}candidate`,
-    deleteDisableCandidates: (id: string) => `${disableExam}candidate/${id}`,
-    getDisableExamDetail: (id: string, examId: string) =>
-        `${disableExam}exam/${id}/${examId}`,
+  getDisableCandidates: `${disableExam}candidate`,
+  saveDisableCandidates: `${disableExam}candidate`,
+  deleteDisableCandidates: (id: string) => `${disableExam}candidate/${id}`,
+  getDisableExamDetail: (id: string, examId: string) =>
+    `${disableExam}exam/${id}/${examId}`,
 
-    saveDisableScores: (id: string) => `${disableExam}score/${id}`,
+  saveDisableScores: (id: string) => `${disableExam}score/${id}`,
 
-    getDisableExamResultById: (id: string) => `${disableExam}exam/${id}`,
+  getDisableExamResultById: (id: string) => `${disableExam}exam/${id}`,
 
-    // จัดการรอบการสอบ
-    saveDisablePeriod: `${disableExam}period`,
-    editDisablePeriod: (id: string) => `${disableExam}period/${id}`,
-    getDisablePeriodById: (id: string) => `${disableExam}period/${id}`,
-    uploadDisableCandidates: (id: string) => `${disableExam}candidate/${id}`,
-    getDisableImportHistory: (id: string) => `${disableExam}history/${id}`,
+  // จัดการรอบการสอบ
+  saveDisablePeriod: `${disableExam}period`,
+  editDisablePeriod: (id: string) => `${disableExam}period/${id}`,
+  getDisablePeriodById: (id: string) => `${disableExam}period/${id}`,
+  uploadDisableCandidates: (id: string) => `${disableExam}candidate/${id}`,
+  getDisableImportHistory: (id: string) => `${disableExam}history/${id}`,
 
-    // รายงาน
-    downloadDisableExamReport: (id: string, examId: string, type: number = 2) =>
-        `${diable_report}certificate/${type}/${id}/${examId}`,
-    downloadDisableScoreReport: (id: string, examId: string) =>
-        `${diable_report}score/${id}/${examId}`,
-    exportDisableExam: (id: string) => `${disableExam}export/exam/${id}`,
-    exportDisablePassExam: (id: string) => `${disableExam}export/pass-exam/${id}`,
-    exportDisablePassResultExam: (id: string) =>
-        `${disableExam}export/pass/${id}`,
+  // รายงาน
+  downloadDisableExamReport: (id: string, examId: string, type: number = 2) =>
+    `${diable_report}certificate/${type}/${id}/${examId}`,
+  downloadDisableScoreReport: (id: string, examId: string) =>
+    `${diable_report}score/${id}/${examId}`,
+  exportDisableExam: (id: string) => `${disableExam}export/exam/${id}`,
+  exportDisablePassExam: (id: string) => `${disableExam}export/pass-exam/${id}`,
+  exportDisablePassResultExam: (id: string) =>
+    `${disableExam}export/pass/${id}`,
 
-    exportDisableCandidateList: (id: string) => `${diable_report}candidate/${id}`,
-    exportDisablePassExamList: (id: string) => `${diable_report}pass/${id}`,
-
-}
+  exportDisableCandidateList: (id: string) => `${diable_report}candidate/${id}`,
+  exportDisablePassExamList: (id: string) => `${diable_report}pass/${id}`,
+  periodDisableToPlacement: (examId: string) =>
+    `${disableExam}placement/${examId}`,
+};

src/api/recruiting/api.period-exam.ts

@@ -83,4 +83,5 @@ export default {
 
   exportExamCandidateList: (id: string) => `${exam_report}candidate-exam/${id}`,
   exportExamPassExamList: (id: string) => `${exam_report}pass-exam/${id}`,
+  periodExamToPlacement: (examId: string) => `${periodExam}placement/${examId}`,
 };

src/api/recruiting/api.recruit.ts

@@ -1,41 +1,44 @@
 /**
  * api สรรหา - สอบแข่งขัน
  */
-import env from "../index"
-const recruit = `${env.API_URI}/recruit/`
-const recruit_report = `${env.API_URI}/report/recruit/`
+import env from "../index";
+const recruit = `${env.API_URI}/recruit/`;
+const recruit_report = `${env.API_URI}/report/recruit/`;
 
 export default {
-    getCandidates: `${recruit}candidate`,
-    saveCandidates: `${recruit}candidate`,
-    deleteCandidates: (id: string) => `${recruit}candidate/${id}`,
-    getExamDetail: (id: string, examId: string) => `${recruit}exam/${id}/${examId}`,
+  getCandidates: `${recruit}candidate`,
+  saveCandidates: `${recruit}candidate`,
+  deleteCandidates: (id: string) => `${recruit}candidate/${id}`,
+  getExamDetail: (id: string, examId: string) =>
+    `${recruit}exam/${id}/${examId}`,
 
-    saveScores: (id: string) => `${recruit}score/${id}`,
+  saveScores: (id: string) => `${recruit}score/${id}`,
 
-    getExamResultById: (id: string) => `${recruit}exam/${id}`,
+  getExamResultById: (id: string) => `${recruit}exam/${id}`,
 
-    // จัดการรอบการสอบ
-    savePeriod: `${recruit}period`,
-    editPeriod: (id: string) => `${recruit}period/${id}`,
-    getPeriodById: (id: string) => `${recruit}period/${id}`,
-    uploadCandidates: (id: string) => `${recruit}candidate/${id}`,
-    getImportHistory: (id: string) => `${recruit}history/${id}`,
+  // จัดการรอบการสอบ
+  savePeriod: `${recruit}period`,
+  editPeriod: (id: string) => `${recruit}period/${id}`,
+  getPeriodById: (id: string) => `${recruit}period/${id}`,
+  uploadCandidates: (id: string) => `${recruit}candidate/${id}`,
+  getImportHistory: (id: string) => `${recruit}history/${id}`,
 
-    //upload
-    periodRecruitDoc: (examId: string) => `${recruit}doc/${examId}`,
-    periodRecruitImg: (examId: string) => `${recruit}img/${examId}`,
-    periodDeleteDoc: (docId: string) => `${recruit}doc/${docId}`,
-    periodDeleteImg: (docId: string) => `${recruit}img/${docId}`,
+  //upload
+  periodRecruitDoc: (examId: string) => `${recruit}doc/${examId}`,
+  periodRecruitImg: (examId: string) => `${recruit}img/${examId}`,
+  periodDeleteDoc: (docId: string) => `${recruit}doc/${docId}`,
+  periodDeleteImg: (docId: string) => `${recruit}img/${docId}`,
 
-    // รายงาน
-    downloadExamReport: (id: string, examId: string, type: number = 2) => `${recruit_report}certificate/${type}/${id}/${examId}`,
-    downloadScoreReport: (id: string, examId: string) => `${recruit_report}score/${id}/${examId}`,
-    exportExam: (id: string) => `${recruit}export/exam/${id}`,
-    exportPassExam: (id: string) => `${recruit}export/pass-exam/${id}`,
-    exportPassResultExam: (id: string) => `${recruit}export/pass/${id}`,
+  // รายงาน
+  downloadExamReport: (id: string, examId: string, type: number = 2) =>
+    `${recruit_report}certificate/${type}/${id}/${examId}`,
+  downloadScoreReport: (id: string, examId: string) =>
+    `${recruit_report}score/${id}/${examId}`,
+  exportExam: (id: string) => `${recruit}export/exam/${id}`,
+  exportPassExam: (id: string) => `${recruit}export/pass-exam/${id}`,
+  exportPassResultExam: (id: string) => `${recruit}export/pass/${id}`,
 
-    exportCandidateList: (id: string) => `${recruit_report}candidate/${id}`,
-    exportPassExamList: (id: string) => `${recruit_report}pass/${id}`,
-
-}
+  exportCandidateList: (id: string) => `${recruit_report}candidate/${id}`,
+  exportPassExamList: (id: string) => `${recruit_report}pass/${id}`,
+  periodRecruitToPlacement: (examId: string) => `${recruit}placement/${examId}`,
+};

src/api/registry/api.profile.ts

@@ -180,4 +180,5 @@ export default {
     `${profile}changeName/history/${profileId}`,
 
   profileCitizenId: (citizenId: string) => `${profile}citizenId/${citizenId}`,
+  profileEmployeeIn: `${profile}information/employee`,
 };

src/interface/request/main/main.ts

@@ -204,6 +204,24 @@ const menuList = readonly<any[]>([
         path: "probation",
         role: "probation",
       },
+      {
+        key: 6.4,
+        label: "รายการคำขอโอน" /* */,
+        path: "transfer",
+        role: "placement",
+      },
+      {
+        key: 6.5,
+        label: "รายการรับโอน" /* */,
+        path: "receive",
+        role: "placement",
+      },
+      {
+        key: 6.6,
+        label: "คำสั่งช่วยราชการ/ส่งตัวกลับ" /* */,
+        path: "repatriation-order",
+        role: "placement",
+      },
     ],
   },
 
@@ -235,7 +253,7 @@ const menuList = readonly<any[]>([
       },
       {
         key: 7.4,
-        label: "Exit interviwe",
+        label: "Exit interview",
         // path: "",
         role: "retirement",
       },

src/modules/02_organizational/views/MainTreeEmployee.vue

@@ -908,7 +908,7 @@ onMounted(async () => {
 const fetchData = async () => {
   loaderPage(true);
   await http
-    .get(config.API.organizationEmployeePosition)
+    .get(config.API.organizationEmployee)
     .then((res) => {
       let data = res.data.result;
       rows.value = [];
@@ -1311,7 +1311,7 @@ const saveData = async () => {
   modal.value = false;
   loaderPage(true);
   await http
-    .post(config.API.organizationEmployeePosition, {
+    .post(config.API.organizationEmployee, {
       organizationOrganizationId: organizationOrganizationId.value,
       organizationShortNameId: organizationGovernmentCode.value,
       organizationTypeId: organizationTypeId.value,
@@ -1363,7 +1363,7 @@ const editData = async () => {
   modal.value = false;
   loaderPage(true);
   await http
-    .put(config.API.organizationEmployeePositionId(id.value), {
+    .put(config.API.organizationEmployeeId(id.value), {
       organizationOrganizationId: organizationOrganizationId.value,
       organizationShortNameId: organizationGovernmentCode.value,
       organizationTypeId: organizationTypeId.value,
@@ -1428,7 +1428,7 @@ const clickDelete = (id: string) => {
 const deleteData = async (id: string) => {
   loaderPage(true);
   await http
-    .delete(config.API.organizationEmployeePositionId(id))
+    .delete(config.API.organizationEmployeeId(id))
     .then((res) => {
       success($q, "ลบข้อมูลสำเร็จ");
     })

src/modules/03_recruiting/components/Career.vue

@@ -468,6 +468,7 @@ const saveData = async () => {
       messageError($q, e);
     })
     .finally(async () => {
+      modal.value = false;
       await fetchData();
     });
 };
@@ -493,6 +494,7 @@ const editData = async () => {
       messageError($q, e);
     })
     .finally(async () => {
+      modal.value = false;
       await fetchData();
     });
 };

src/modules/03_recruiting/components/Education.vue

@@ -497,6 +497,7 @@ const saveData = async () => {
       messageError($q, e);
     })
     .finally(async () => {
+      modal.value = false;
       await fetchData();
     });
 };

src/modules/03_recruiting/components/TableCandidate.vue

@@ -58,6 +58,17 @@
           </q-list>
         </q-menu>
       </q-btn>
+      <q-btn
+        size="md"
+        icon="mdi-content-save-move-outline"
+        round
+        flat
+        color="indigo"
+        v-if="statusPayment && setSeat == true"
+        @click="candidateToPlacement"
+      >
+        <q-tooltip>บรรจุผู้ผ่านการคัดเลือก</q-tooltip>
+      </q-btn>
       <q-space />
       <div class="items-center" style="display: flex">
         <!-- ค้นหาข้อความใน table -->
@@ -137,7 +148,7 @@
 </template>
 <script setup lang="ts">
 import { ref, useAttrs } from "vue";
-import { useRoute } from "vue-router";
+import { useRoute, useRouter } from "vue-router";
 import { useDataStore } from "@/stores/data";
 import { useCounterMixin } from "@/stores/mixin";
 import http from "@/plugins/http";
@@ -145,6 +156,7 @@ import config from "@/app.config";
 import { useQuasar } from "quasar";
 
 const route = useRoute();
+const router = useRouter();
 const dataStore = useDataStore();
 const { loaderPage } = dataStore;
 const mixin = useCounterMixin();
@@ -277,6 +289,34 @@ const uploadFile = async () => {
   }
 };
 
+const candidateToPlacement = async () => {
+  $q.dialog({
+    title: "ยืนยันการนำผู้ผ่านคัดเลือกเข้าสู่ระบบบรรจุ",
+    message: "ต้องการนำผู้ผ่านคัดเลือกเข้าสู่ระบบบรรจุใช่หรือไม่?",
+    cancel: {
+      flat: true,
+      color: "negative",
+    },
+    persistent: true,
+  })
+    .onOk(async () => {
+      await http
+        .get(config.API.periodExamToPlacement(examId.value))
+        .then((res) => {
+          success($q, "นำผู้ผ่านคัดเลือกเข้าสู่ระบบบรรจุ");
+        })
+        .catch((e) => {
+          messageError($q, e);
+        })
+        .finally(async () => {
+          loaderPage(false);
+          router.go(-1);
+        });
+    })
+    .onCancel(() => {})
+    .onDismiss(() => {});
+};
+
 const uploadDataSeat = async () => {
   loaderPage(true);
   const formData = new FormData();

src/modules/03_recruiting/views/01_compete/Detail.vue

@@ -13,6 +13,17 @@
     />
     รายชื่อผู้สมัครสอบแข่งขัน {{ name }} ครั้งที่ {{ round }}/{{ year }}
     <q-space />
+    <q-btn
+      size="md"
+      icon="mdi-content-save-move-outline"
+      round
+      flat
+      color="indigo"
+      v-if="rows.length > 0"
+      @click="candidateToPlacement"
+    >
+      <q-tooltip>บรรจุผู้ผ่านการคัดเลือกผู้พิการ</q-tooltip>
+    </q-btn>
     <q-btn class="bg-teal-1" icon="mdi-download" round color="primary" flat>
       <q-tooltip>ดาวน์โหลดไฟล์</q-tooltip>
       <q-menu>
@@ -122,7 +133,7 @@ const router = useRouter();
 const route = useRoute();
 const { loaderPage } = dataStore;
 const mixin = useCounterMixin();
-const { messageError } = mixin;
+const { messageError, success } = mixin;
 const year = ref<string>("");
 const round = ref<string>("");
 const name = ref<string>("");
@@ -440,10 +451,12 @@ const fetchData = async () => {
       notpass.value = header.notpass;
 
       // period information
-      name.value = period.name;
-      round.value = period.order as string;
-      year.value =
-        period.year >= 2500 ? period.year : ((period.year + 543) as string);
+      if (period != null) {
+        name.value = period.name;
+        round.value = period.order;
+        year.value =
+          period.year >= 2500 ? period.year : ((period.year + 543) as string);
+      }
 
       const data = res.data.result.data;
       if (data.length > 0) {
@@ -464,6 +477,35 @@ const fetchData = async () => {
       loaderPage(false);
     });
 };
+
+const candidateToPlacement = async () => {
+  $q.dialog({
+    title: "ยืนยันการนำผู้ผ่านสอบแข่งขันเข้าสู่ระบบบรรจุ",
+    message: "ต้องการนำผู้ผ่านสอบแข่งขันเข้าสู่ระบบบรรจุใช่หรือไม่?",
+    cancel: {
+      flat: true,
+      color: "negative",
+    },
+    persistent: true,
+  })
+    .onOk(async () => {
+      loaderPage(true);
+      await http
+        .get(config.API.periodRecruitToPlacement(importId.value))
+        .then((res) => {
+          success($q, "นำผู้ผ่านสอบแข่งขันเข้าสู่ระบบบรรจุ");
+        })
+        .catch((e) => {
+          messageError($q, e);
+        })
+        .finally(async () => {
+          loaderPage(false);
+          router.go(-1);
+        });
+    })
+    .onCancel(() => {})
+    .onDismiss(() => {});
+};
 </script>
 
 <style></style>

src/modules/03_recruiting/views/02_qualify/DisableDetail.vue

@@ -13,6 +13,17 @@
     />
     รายชื่อผู้สมัครสอบรอบ {{ name }} ครั้งที่ {{ round }}/{{ year }}
     <q-space />
+    <q-btn
+      size="md"
+      icon="mdi-content-save-move-outline"
+      round
+      flat
+      color="indigo"
+      v-if="rows.length > 0"
+      @click="candidateToPlacement"
+    >
+      <q-tooltip>บรรจุผู้ผ่านการคัดเลือกผู้พิการ</q-tooltip>
+    </q-btn>
     <q-btn class="bg-teal-1" icon="mdi-download" round color="primary" flat>
       <q-tooltip>ดาวน์โหลดไฟล์</q-tooltip>
       <q-menu>
@@ -129,7 +140,7 @@ const pass = ref<number>(0);
 const notpass = ref<number>(0);
 const importId = ref<string>(route.params.id as string); // Period Import Id
 const mixin = useCounterMixin();
-const { messageError } = mixin;
+const { messageError, success } = mixin;
 const filter = ref<string>(""); //search data table
 const visibleColumns = ref<String[]>([
   "examID",
@@ -419,6 +430,35 @@ const fetchData = async () => {
       loaderPage(false);
     });
 };
+
+const candidateToPlacement = async () => {
+  $q.dialog({
+    title: "ยืนยันการนำผู้ผ่านคัดเลือกคนพิการเข้าสู่ระบบบรรจุ",
+    message: "ต้องการนำผู้ผ่านคัดเลือกคนพิการเข้าสู่ระบบบรรจุใช่หรือไม่?",
+    cancel: {
+      flat: true,
+      color: "negative",
+    },
+    persistent: true,
+  })
+    .onOk(async () => {
+      loaderPage(true);
+      await http
+        .get(config.API.periodDisableToPlacement(importId.value))
+        .then((res) => {
+          success($q, "นำผู้ผ่านคัดเลือกคนพิการเข้าสู่ระบบบรรจุ");
+        })
+        .catch((e) => {
+          messageError($q, e);
+        })
+        .finally(async () => {
+          loaderPage(false);
+          router.go(-1);
+        });
+    })
+    .onCancel(() => {})
+    .onDismiss(() => {});
+};
 </script>
 
 <style></style>

src/modules/03_recruiting/views/02_qualify/manageDetail.vue

@@ -456,7 +456,7 @@ const columns = ref<QTableProps["columns"]>([
   {
     name: "registerDate",
     align: "left",
-    label: "วันเและเวลาที่สมัคร",
+    label: "วันและเวลาที่สมัคร",
     sortable: true,
     field: "registerDate",
     headerStyle: "font-size: 14px; min-width: 200px",
@@ -515,7 +515,7 @@ const fetchData = async () => {
           avatar: r.profileImg != null ? r.profileImg.detail : "",
           citizenId: r.citizenId,
           number: r.number,
-          registerDate: r.registerDate,
+          registerDate: date2Thai(r.registerDate),
           examIdenNumber: r.examIdenNumber,
           seatNumber: r.seatNumber,
           resultC: r.resultC,

src/modules/04_registry/components/Profile.vue

@@ -154,10 +154,10 @@
         </div>
         <q-space />
 
-        <q-btn round flat color="pink-5" icon="mdi-file-eye-outline">
-          <q-tooltip>{{
+        <q-btn round flat color="pink-5" icon="mdi-file-document">
+          <!-- <q-tooltip>{{
             reasonStatus ? "การกลับเข้ารับราชการ" : "การออกจากราชการ"
-          }}</q-tooltip>
+          }}</q-tooltip> -->
 
           <q-menu transition-show="jump-down" transition-hide="jump-up">
             <q-list dense style="min-width: 160px">
@@ -896,7 +896,7 @@ const closeKp7Short = () => {
 };
 
 const clickaddOrder = () => {
-  router.push({ name: "addOrder" });
+  router.push("/dismiss-order/add");
 };
 
 const downloadKP7 = () => {};

src/modules/04_registry/components/TableProfile.vue

@@ -304,6 +304,77 @@
                       class="col-3"
                     />
                   </div>
+                  <div
+                    :class="
+                      $q.screen.lt.md
+                        ? ' row col-12 q-col-gutter-xs'
+                        : 'no-wrap row col-12 q-col-gutter-xs'
+                    "
+                  >
+                    <datepicker
+                      class="col-2"
+                      menu-class-name="modalfix"
+                      :model-value="reportYear"
+                      :locale="'th'"
+                      autoApply
+                      year-picker
+                      :enableTimePicker="false"
+                      @update:model-value="updateReportYear"
+                      clearable
+                    >
+                      <template #year="{ year }">{{ year + 543 }}</template>
+                      <template #year-overlay-value="{ value }">{{
+                        parseInt(value + 543)
+                      }}</template>
+                      <template #trigger>
+                        <q-input
+                          class="inputgreen cursor-pointer q-mb-sm"
+                          hide-bottom-space
+                          outlined
+                          dense
+                          lazy-rules
+                          borderless
+                          :model-value="
+                            reportYear == null ? null : reportYear + 543
+                          "
+                          :label="`${'ปีงบประมาณ'}`"
+                          clearable
+                          @clear="clearReportDate"
+                        >
+                          <!-- <template v-slot:prepend>
+                            <q-icon
+                              name="event"
+                              class="cursor-pointer"
+                              style="color: var(--q-primary)"
+                            >
+                            </q-icon>
+                          </template> -->
+                        </q-input>
+                      </template>
+                    </datepicker>
+                    <q-input
+                      clearable
+                      dense
+                      outlined
+                      lazy-rules
+                      :model-value="reportNo"
+                      hide-bottom-space
+                      label="เลขที่คำสั่ง"
+                      @update:model-value="updateReportNo"
+                      class="col-3"
+                    />
+                    <q-input
+                      clearable
+                      dense
+                      outlined
+                      lazy-rules
+                      :model-value="reportType"
+                      hide-bottom-space
+                      label="ประเภทคำสั่ง"
+                      @update:model-value="updateReportType"
+                      class="col-3"
+                    />
+                  </div>
                   <div class="col-12 row items-center">
                     <q-toggle
                       dense
@@ -423,6 +494,9 @@ const props = defineProps({
   employeePosition: String,
   employeeLevel: String,
   posNo: String,
+  reportYear: Number || null,
+  reportNo: String,
+  reportType: String,
   isTab: {
     type: Boolean,
     default: true,
@@ -460,6 +534,9 @@ const emit = defineEmits([
   "update:employeePosition",
   "update:employeeLevel",
   "update:posNo",
+  "update:reportYear",
+  "update:reportNo",
+  "update:reportType",
 ]);
 
 const updateInput = (value: string | number | null) => {
@@ -508,6 +585,15 @@ const updateEmployeeLevel = (value: string | number | null) => {
 const updatePosNo = (value: string | number | null) => {
   emit("update:posNo", value);
 };
+const updateReportYear = (value: string | number | null) => {
+  emit("update:reportYear", value);
+};
+const updateReportNo = (value: string | number | null) => {
+  emit("update:reportNo", value);
+};
+const updateReportType = (value: string | number | null) => {
+  emit("update:reportType", value);
+};
 // const updateProfileType = (value: string | number | null) => {
 //   emit("update:profileType", value);
 // };
@@ -515,6 +601,9 @@ const updatePosNo = (value: string | number | null) => {
 const clearDate = () => {
   emit("update:retireYear", null);
 };
+const clearReportDate = () => {
+  emit("update:reportYear", null);
+};
 
 const clickSearchPanel = () => {
   emit("update:retireYear", null);

src/modules/04_registry/router.ts

@@ -4,10 +4,10 @@
 
 const Main = () => import("@/modules/04_registry/views/Main.vue");
 const Detail = () => import("@/modules/04_registry/components/Profile.vue");
-const addOrder = () =>
-  import(
-    "@/modules/05_placement/components/OrderPlacement/addOrderPlacement.vue"
-  );
+// const addOrder = () =>
+//   import(
+//     "@/modules/05_placement/components/OrderPlacement/addOrderPlacement.vue"
+//   );
 
 export default [
   {
@@ -30,14 +30,14 @@ export default [
       Role: "registry",
     },
   },
-  {
-    path: "/dismiss-order/add",
-    name: "addOrder",
-    component: addOrder,
-    meta: {
-      Auth: true,
-      Key: [7],
-      Role: "registry",
-    },
-  },
+  // {
+  //   path: "/dismiss-order/add",
+  //   name: "addOrder",
+  //   component: addOrder,
+  //   meta: {
+  //     Auth: true,
+  //     Key: [7],
+  //     Role: "registry",
+  //   },
+  // },
 ];

src/modules/05_placement/components/PersonalList/Detail.vue

@@ -6,15 +6,15 @@ import cardTop from "@/modules/05_placement/components/PersonalList/StatCard.vue
 import keycloak from "@/plugins/keycloak";
 import http from "@/plugins/http";
 import config from "@/app.config";
-import { useCounterMixin } from "@/stores/mixin"
-import { useQuasar } from "quasar"
+import { useCounterMixin } from "@/stores/mixin";
+import { useQuasar } from "quasar";
 import { usePlacementDataStore } from "@/modules/05_placement/store";
 
 const DataStore = usePlacementDataStore();
 
-const $q = useQuasar
-const mixin = useCounterMixin()
-const { messageError, showLoader, hideLoader } = mixin
+const $q = useQuasar;
+const mixin = useCounterMixin();
+const { messageError, showLoader, hideLoader } = mixin;
 let roleAdmin = ref<boolean>(false);
 const router = useRouter();
 const route = useRoute();
@@ -53,7 +53,7 @@ const getStat = async () => {
     })
     .catch((e) => {
       messageError($q, e);
-    })
+    });
 };
 
 onMounted(async () => {
@@ -65,14 +65,15 @@ onMounted(async () => {
     roleAdmin.value = await keycloak.tokenParsed.role.includes("placement1");
   }
 
-  await getStat()
+  await getStat();
 
-  examData.value = await DataStore.DataMainOrig.find((x: any) => x.id == examId);
-
-  title.value = examData.value.examRound;
-  round.value = examData.value.examOrder;
-  year.value = examData.value.fiscalYear;
+  examData.value = await DataStore.DataMainOrig.find(
+    (x: any) => x.id == examId
+  );
 
+  title.value = examData.value == null ? null : examData.value.examRound;
+  round.value = examData.value == null ? null : examData.value.examOrder;
+  year.value = examData.value == null ? null : examData.value.fiscalYear;
 });
 
 const fetchPlacementData = async () => {
@@ -93,18 +94,48 @@ const fetchPlacementData = async () => {
 <template>
   <div class="col-xs-12 col-sm-12 col-md-8 col-lg-8 row">
     <div class="toptitle">
-      <q-btn icon="mdi-arrow-left" unelevated round dense flat color="primary" class="q-mr-sm" @click="router.go(-1)" />
+      <q-btn
+        icon="mdi-arrow-left"
+        unelevated
+        round
+        dense
+        flat
+        color="primary"
+        class="q-mr-sm"
+        @click="router.go(-1)"
+      />
       รายชื่อผู้สอบในรอบ {{ title }} ครั้งที่ {{ round }} ปี {{ year }}
     </div>
     <q-card bordered class="q-py-sm row col-12">
       <div class="col-12 row bg-white">
         <div class="fit q-px-md q-py-sm">
           <div class="row col-12 q-col-gutter-md fit">
-            <cardTop :amount="stat.total" label="จำนวนทั้งหมด" color="#016987" />
-            <cardTop v-if="roleAdmin" :amount="stat.unContain" label="จำนวนที่ยังไม่บรรจุ" color="#02A998" />
-            <cardTop :amount="stat.prepareContain" label="จำนวนที่เตรียมบรรจุ" color="#2EA0FF" />
-            <cardTop :amount="stat.contain" label="จำนวนที่บรรจุแล้ว" color="#4154B3" />
-            <cardTop :amount="stat.disclaim" label="จำนวนที่สละสิทธิ์" color="#FF5C5F" />
+            <cardTop
+              :amount="stat.total"
+              label="จำนวนทั้งหมด"
+              color="#016987"
+            />
+            <cardTop
+              v-if="roleAdmin"
+              :amount="stat.unContain"
+              label="จำนวนที่ยังไม่บรรจุ"
+              color="#02A998"
+            />
+            <cardTop
+              :amount="stat.prepareContain"
+              label="จำนวนที่เตรียมบรรจุ"
+              color="#2EA0FF"
+            />
+            <cardTop
+              :amount="stat.contain"
+              label="จำนวนที่บรรจุแล้ว"
+              color="#4154B3"
+            />
+            <cardTop
+              :amount="stat.disclaim"
+              label="จำนวนที่สละสิทธิ์"
+              color="#FF5C5F"
+            />
           </div>
         </div>
       </div>
@@ -112,7 +143,11 @@ const fetchPlacementData = async () => {
   </div>
   <q-card flat bordered class="col-12 q-mt-sm q-pt-sm">
     <div>
-      <AddTablePosition :statCard="getStat" class="q-pa-none" @get-stat="getStat" />
+      <AddTablePosition
+        :statCard="getStat"
+        class="q-pa-none"
+        @get-stat="getStat"
+      />
     </div>
   </q-card>
 </template>

src/modules/05_placement/components/PersonalList/OrgTree.vue

@@ -105,10 +105,10 @@ const fetchplacementPosition = async () => {
 const search = ref<string>("");
 //reset Tree Filter
 const filterRef = ref<any>(null);
-const resetFilter = () => {
-  search.value = "";
-  filterRef.value.focus();
-};
+// const resetFilter = () => {
+//   search.value = "";
+//   filterRef.value.focus();
+// };
 
 const props = defineProps({
   personalId: String,
@@ -155,6 +155,8 @@ const validateData = async () => {
 };
 
 const saveAppoint = async () => {
+  console.log("save", dataForm);
+
   myFormPosition.value.validate().then(async (result: boolean) => {
     if (result) {
       const dataAppoint = await {
@@ -170,8 +172,7 @@ const saveAppoint = async () => {
         // mouthSalaryAmount: dataForm.mouthSalaryAmount,
         // positionSalaryAmount: dataForm.positionSalaryAmount,
       };
-      // console.log("save appoint===>", dataAppoint);
-
+      console.log("save appoint===>", dataAppoint);
       showLoader();
       await http
         .post(config.API.placementPass(), dataAppoint)
@@ -184,7 +185,10 @@ const saveAppoint = async () => {
         })
         .finally(async () => {
           await closeAndClear();
-          await resetFilter();
+          // await resetFilter();
+          await fetchPublishFile();
+          await loadTreeData();
+          await fetchplacementPosition();
           hideLoader();
         });
     }
@@ -273,8 +277,9 @@ const positionLevelOptions = ref<Object[]>([
 ]);
 
 const selectedPosition = async (data: any) => {
+  console.log("selecteds", data);
   if (data.name == null && selected.value != data.keyId) {
-    console.log("selecteds", data);
+    // console.log("selecteds", data);
 
     editDataStatus.value = true;
     selected.value = data.keyId;
@@ -299,9 +304,9 @@ const selectedPosition = async (data: any) => {
 
     // positionPathSide Options
     let positionPathSideArr: any = [];
-    if (data.positionSideNameObj != null) {
+    if (data.positionSideNameObj && data.positionSideNameObj != null) {
       data.positionSideNameObj.map((x: any) => {
-        positionLevelsArr.push({
+        positionPathSideArr.push({
           label: x.Name,
           value: x.Id,
         });
@@ -345,6 +350,7 @@ const selectedPosition = async (data: any) => {
         positionLevelsArr.length > 1 || positionLevelsArr.length == 0
           ? ""
           : positionLevelsArr[0].value;
+      dataForm.positionLevelId = data.positionLevelObj[0].Id;
     }
   } else if (selected.value == data.keyId) {
     selected.value = "";
@@ -355,6 +361,7 @@ const selectedPosition = async (data: any) => {
     dataForm.positionPathSideId = "";
     dataForm.positionTypeId = "";
   }
+  console.log("dataForm", dataForm);
 };
 
 const checkPosition = (val: string) => {
@@ -374,14 +381,14 @@ watch(props, () => {
     console.log("personal", personal.value);
   }
   // console.log("draft===>", personal.value.draft);
-  
+
   if (personal.value && personal.value.draft === false) {
     // const findData = dataRespone.value.find(findByPerson);
     let findData: any = null;
-    console.log(dataRespone.value);
-
     dataRespone.value.map((x: any) => {
       findData = findByPerson(x);
+      console.log(findData);
+
       if (findData != null) {
         console.log("findData===>", findData);
         selectedPosition(findData);
@@ -403,9 +410,7 @@ function findByPerson(element: any): any {
     element.positionTypeId === personal.value.positionTypeId &&
     element.positionNumId === personal.value.posNoId &&
     (element.positionLevelObj === null ||
-      element.positionLevelObj[0].Id === personal.value.positionLevelId) &&
-    (element.positionSideNameObj === null ||
-      element.positionSideNameObj[0].Id === personal.value.positionPathSideId)
+      element.positionLevelObj[0].Id === personal.value.positionLevelId)
   ) {
     return element;
   } else if (element.children) {

src/modules/05_placement/components/PersonalList/Table.vue

@@ -232,7 +232,10 @@ const getTable = async () => {
             organizationShortName: data.organizationShortName,
             positionNumber: data.positionNumber,
             positionPath: data.positionPath,
-            reportingDate: dateText(new Date(data.reportingDate)),
+            reportingDate:
+              data.reportingDate == null
+                ? null
+                : dateText(new Date(data.reportingDate)),
             examNumber: data.examNumber,
             bmaOfficer: convertBmaOfficer(data.bmaOfficer),
             statusId: data.statusId,
@@ -297,8 +300,8 @@ const saveDeferment = async () => {
               hideLoader();
             });
         })
-        .onCancel(() => { })
-        .onDismiss(() => { });
+        .onCancel(() => {})
+        .onDismiss(() => {});
     }
   });
 };
@@ -338,8 +341,8 @@ const saveDisclaim = async () => {
               hideLoader();
             });
         })
-        .onCancel(() => { })
-        .onDismiss(() => { });
+        .onCancel(() => {})
+        .onDismiss(() => {});
     }
   });
 };
@@ -442,8 +445,8 @@ const validateData = async () => {
 };
 
 const clickCloseSendModal = () => {
-  modaladdlist.value = false
-}
+  modaladdlist.value = false;
+};
 
 const clickClose = async () => {
   userNote.value = "";
@@ -466,11 +469,26 @@ const clickClose = async () => {
     modal.value = false;
   }
 };
-
+const displayAdd = ref<boolean>(true);
 onMounted(async () => {
   if (keycloak.tokenParsed != null) {
     roleAdmin.value = await keycloak.tokenParsed.role.includes("placement1");
-    console.log("roleAdmin===>", roleAdmin);
+    console.log("roleAdmin===>", roleAdmin.value);
+    if (roleAdmin.value === false) {
+      displayAdd.value = false;
+      visibleColumns.value = [
+        "position",
+        "fullName",
+        "examNumber",
+        "idCard",
+        "positionNumber",
+        "organizationName",
+        "reportingDate",
+        "bmaOfficer",
+        "statusName",
+        "positionCandidate",
+      ];
+    }
   }
   await getTable();
 });
@@ -541,235 +559,426 @@ const paginationLabel = (start: number, end: number, total: number) => {
 </script>
 <template>
   <q-form ref="myForm">
-      <Table :contain-status="containStatus" :rows="rows" :columns="columns" :filter="filter"
-        :visible-columns="visibleColumns" v-model:inputfilter="filter" v-model:inputvisible="visibleColumns"
-        v-model:editvisible="editvisible" v-model:containfilter="containStatus"
-        @update-modaladdlist="handleModalAddListUpdate" :history="true" :boss="true" :saveNoDraft="true"
-        :role-admin="roleAdmin">
-        <template #columns="props">
-          <q-tr :props="props">
-            <q-td v-for="col in props.cols" :key="col.name" :props="props" @click="selectData(props.row.personalId)"
-              class="cursor-pointer">
-              <template v-if="col.name === 'position'">
-                {{ props.rowIndex + 1 }}
-              </template>
-              <template v-else-if="col.name === 'fullName'" class="table_ellipsis">
-                <div class="row col-12 text-no-wrap items-center">
-                  <img v-if="props.row.avatar == null" src="@/assets/avatar_user.jpg" class="col-4 img-info" />
-                  <img v-else :src="props.row.avatar" class="col-4 img-info" />
-                  <div class="col-4">
-                    <div class="text-weight-medium">{{ props.row.name }}</div>
-                    <div class="text-weight-light">{{ props.row.idCard }}</div>
-                  </div>
+    <Table
+      :contain-status="containStatus"
+      :rows="rows"
+      :columns="columns"
+      :filter="filter"
+      :visible-columns="visibleColumns"
+      v-model:inputfilter="filter"
+      v-model:inputvisible="visibleColumns"
+      v-model:editvisible="editvisible"
+      v-model:containfilter="containStatus"
+      @update-modaladdlist="handleModalAddListUpdate"
+      :history="true"
+      :boss="true"
+      :saveNoDraft="true"
+      :role-admin="roleAdmin"
+      :displayAdd="displayAdd"
+    >
+      <template #columns="props">
+        <q-tr :props="props">
+          <q-td
+            v-for="col in props.cols"
+            :key="col.name"
+            :props="props"
+            @click="selectData(props.row.personalId)"
+            class="cursor-pointer"
+          >
+            <template v-if="col.name === 'position'">
+              {{ props.rowIndex + 1 }}
+            </template>
+            <template
+              v-else-if="col.name === 'fullName'"
+              class="table_ellipsis"
+            >
+              <div class="row col-12 text-no-wrap items-center">
+                <img
+                  v-if="props.row.avatar == null"
+                  src="@/assets/avatar_user.jpg"
+                  class="col-4 img-info"
+                />
+                <img v-else :src="props.row.avatar" class="col-4 img-info" />
+                <div class="col-4">
+                  <div class="text-weight-medium">{{ props.row.name }}</div>
+                  <div class="text-weight-light">{{ props.row.idCard }}</div>
                 </div>
-              </template>
-              <template v-else-if="col.name === 'examNumber'">
-                <div class="text-weight-medium">
-                  {{ props.row.examNumber !== null ? props.row.examNumber : "-" }}
-                </div>
-              </template>
+              </div>
+            </template>
+            <template v-else-if="col.name === 'examNumber'">
+              <div class="text-weight-medium">
+                {{ props.row.examNumber !== null ? props.row.examNumber : "-" }}
+              </div>
+            </template>
 
-              <template v-else-if="col.name === 'organizationName'">
-                <div v-if="props.row.orgName !== null || props.row.positionPath !== null
-                  ">
-                  <div class="col-4">
-                    <div class="text-weight-medium">
-                      {{ props.row.orgName !== null ? props.row.orgName : "-" }}
-                      {{
-                        props.row.organizationShortName !== null
+            <template v-else-if="col.name === 'organizationName'">
+              <div
+                v-if="
+                  props.row.orgName !== null || props.row.positionPath !== null
+                "
+              >
+                <div class="col-4">
+                  <div class="text-weight-medium">
+                    {{ props.row.orgName !== null ? props.row.orgName : "-" }}
+                    {{
+                      props.row.organizationShortName !== null
                         ? `(${props.row.organizationShortName})`
                         : ""
-                      }}
-                    </div>
-                    <div class="text-weight-light">
-                      {{
-                        props.row.positionPath !== null
+                    }}
+                  </div>
+                  <div class="text-weight-light">
+                    {{
+                      props.row.positionPath !== null
                         ? props.row.positionPath
                         : "-"
-                      }}
-                      {{
-                        props.row.positionNumber !== null
+                    }}
+                    {{
+                      props.row.positionNumber !== null
                         ? `(${props.row.positionNumber})`
                         : ""
-                      }}
-                    </div>
+                    }}
                   </div>
                 </div>
-                <div v-else>
-                  <div class="col-4">
-                    <div class="text-weight-medium">-</div>
-                  </div>
-                </div>
-              </template>
-              <template v-else-if="col.name === 'positionCandidate'">
-                <div class="text-weight-medium" v-if="props.row.positionCandidate == null">
-                  -
-                </div>
-                <div class="text-weight-medium" v-else>
-                  {{ props.row.positionCandidate }}
-                </div>
-              </template>
-              <template v-else-if="col.name === 'reportingDate' && col.value !== '-'">
-                <div class="text-weight-medium">
-                  {{ props.row.reportingDate }}
-                </div>
-              </template>
-              <template v-else-if="col.name === 'bmaOfficer'">
-                <div class="text-weight-medium">
-                  {{ props.row.bmaOfficer !== null ? props.row.bmaOfficer : "-" }}
-                </div>
-              </template>
-              <template v-else-if="col.name === 'draft'">
-                <div class="text-weight-medium">
-                  {{ props.row.draft }}
-                </div>
-              </template>
-              <template v-else-if="col.name === 'statusName'">
-                <div class="text-weight-medium">
-                  {{ props.row.statusName }}
-                </div>
-              </template>
-            </q-td>
-            <q-td auto-width>
-              <q-btn icon="mdi-dots-vertical" size="12px" color="grey-7" flat round dense>
-                <q-menu transition-show="jump-down" transition-hide="jump-up">
-                  <q-list dense style="min-width: 100px">
-                    <q-item v-if="(roleAdmin && props.row.statusId === 'UN-CONTAIN') ||
-                      props.row.draft === 'รอส่งตัว'
-                      " clickable v-close-popup @click="openAppointModal(props.row.personalId)">
-                      <q-item-section style="min-width: 0px" avatar class="q-py-sm">
-                        <q-icon color="primary" size="xs" name="mdi-bookmark-outline" />
-                      </q-item-section>
-                      <q-item-section>เลือกหน่วยงานที่รับบรรจุ</q-item-section>
-                    </q-item>
-
-                    <q-separator />
-                    <q-item v-if="roleAdmin && props.row.statusId === 'UN-CONTAIN'" clickable v-close-popup
-                      @click="editDetail(props.row, 'deferment')">
-                      <q-item-section style="min-width: 0px" avatar class="q-py-sm">
-                        <q-icon color="blue" size="xs" name="mdi-account-alert-outline" />
-                      </q-item-section>
-                      <q-item-section>ขอผ่อนผัน</q-item-section>
-                    </q-item>
-                    <q-item v-else-if="props.row.deferment === true &&
-                      props.row.statusId != 'DISCLAIM'
-                      " clickable v-close-popup @click="editDetail(props.row, 'defermentInfo')">
-                      <q-item-section style="min-width: 0px" avatar class="q-py-sm">
-                        <q-icon color="blue" size="xs" name="mdi-account-details-outline" />
-                      </q-item-section>
-                      <q-item-section>ข้อมูลการผ่อนผัน</q-item-section>
-                    </q-item>
-                    <q-separator />
-                    <q-item v-if="props.row.statusId === 'UN-CONTAIN' ||
-                      props.row.statusId === 'PREPARE-CONTAIN'
-                      " clickable v-close-popup @click="editDetail(props.row, 'disclaim')">
-                      <q-item-section style="min-width: 0px" avatar class="q-py-sm">
-                        <q-icon color="pink" size="xs" name="mdi-account-cancel-outline" />
-                      </q-item-section>
-                      <q-item-section>สละสิทธิ์</q-item-section>
-                    </q-item>
-                    <q-item v-else-if="props.row.statusId === 'DISCLAIM'" clickable v-close-popup
-                      @click="editDetail(props.row, 'disclaimInfo')">
-                      <q-item-section style="min-width: 0px" avatar class="q-py-sm">
-                        <q-icon color="pink" size="xs" name="mdi-account-cancel-outline" />
-                      </q-item-section>
-                      <q-item-section>ข้อมูลการสละสิทธิ์</q-item-section>
-                    </q-item>
-                  </q-list>
-                </q-menu>
-              </q-btn>
-            </q-td>
-          </q-tr>
-        </template>
-      </Table>
-    </q-form>
-
-    <!-- เลือกหน่วยงานที่บรรจุ -->
-    <DialogOrgTree v-model:modal="appointModal" :personalId="personalId" :close="clickCloseModalTree"
-      :personal="personal" />
-
-    <!-- popup ขอผ่อนผัน / สละสิทธิ์ -->
-    <q-form ref="myForm">
-      <DialogCard v-model:Modal="modal" :personal-id="personalId" :close="clickClose" :validate="validateData" />
-    </q-form>
-    <q-dialog v-model="modalDefermentDisclaim" persistent>
-      <q-card style="width: 800px">
-        <q-form ref="myForm">
-          <DialogHeader :title="`${modalDisclaim ? 'สละสิทธิ์' : 'ขอผ่อนผัน'} ชื่อ${Name}`" :close="clickClose" />
-          <q-separator />
-          <q-card-section class="q-p-sm">
-            <div class="col-xs-12 col-sm-12 col-md-12">
-              <q-input :class="getClass(edit)" hide-bottom-space :outlined="edit" dense lazy-rules
-                :rules="[(val) => !!val || 'กรุณากรอกเหตุผล']" :readonly="!edit" :borderless="!edit" v-model="userNote"
-                :label="`${'กรอกเหตุผล'}`" @update:model-value="clickEditRow" type="textarea" />
-              <q-file v-if="getNumFile === 1" v-model="files" dense :label="`${'เลือกไฟล์เอกสารหลักฐาน'}`" outlined
-                use-chips :rules="[(val) => !!val || 'กรุณาเลือกไฟล์เอกสารหลักฐาน']" multiple
-                @update:model-value="clickEditRow" class="q-py-sm">
-                <template v-slot:prepend>
-                  <q-icon name="attach_file" color="primary" />
-                </template>
-              </q-file>
-            </div>
-          </q-card-section>
-          <q-separator />
-          <DialogFooter :editvisible="true" :validate="validateData" :save="modalDisclaim ? saveDisclaim : saveDeferment" />
-        </q-form>
-      </q-card>
-    </q-dialog>
-
-    <!-- dialog ข้อมูลขอผ่อนผัน / สละสิทธิ์ -->
-    <q-dialog v-model="modalwaitInfo" persistent>
-      <q-card style="width: 500px; max-width: 500px">
-        <q-form ref="myForm">
-          <DialogHeader :title="`${modalDisclaim ? 'สละสิทธิ์' : 'ขอผ่อนผัน'} ชื่อ${Name}`" :close="clickClose" />
-          <q-separator />
-          <q-card-section class="q-p-sm">
-            <div class="row">
-              <div class="col-3 text-grey-7">เหตุผล</div>
-              <div class="col-4">{{ dataInfo.reason }}</div>
-            </div>
-            <div v-if="!modalDisclaim" class="row q-pt-md">
-              <div class="col-3 text-grey-7 q-mt-sm">เอกสารหลักฐาน</div>
-              <div class="col-2 q-mt-sm">
-                <q-btn type="a" :href="dataInfo.reliefDoc" color="primary" flat dense round size="14px" icon="mdi-download"
-                  target="_blank" />
               </div>
-            </div>
-          </q-card-section>
-          <q-separator />
-        </q-form>
-      </q-card>
-    </q-dialog>
+              <div v-else>
+                <div class="col-4">
+                  <div class="text-weight-medium">-</div>
+                </div>
+              </div>
+            </template>
+            <template v-else-if="col.name === 'positionCandidate'">
+              <div
+                class="text-weight-medium"
+                v-if="props.row.positionCandidate == null"
+              >
+                -
+              </div>
+              <div class="text-weight-medium" v-else>
+                {{ props.row.positionCandidate }}
+              </div>
+            </template>
+            <template
+              v-else-if="col.name === 'reportingDate' && col.value !== '-'"
+            >
+              <div class="text-weight-medium">
+                {{ props.row.reportingDate }}
+              </div>
+            </template>
+            <template v-else-if="col.name === 'bmaOfficer'">
+              <div class="text-weight-medium">
+                {{ props.row.bmaOfficer !== null ? props.row.bmaOfficer : "-" }}
+              </div>
+            </template>
+            <template v-else-if="col.name === 'draft'">
+              <div class="text-weight-medium">
+                {{ props.row.draft }}
+              </div>
+            </template>
+            <template v-else-if="col.name === 'statusName'">
+              <div class="text-weight-medium">
+                {{ props.row.statusName }}
+              </div>
+            </template>
+          </q-td>
+          <q-td auto-width>
+            <q-btn
+              icon="mdi-dots-vertical"
+              size="12px"
+              color="grey-7"
+              flat
+              round
+              dense
+            >
+              <q-menu transition-show="jump-down" transition-hide="jump-up">
+                <q-list dense style="min-width: 100px">
+                  <q-item
+                    v-if="
+                      (roleAdmin && props.row.statusId === 'UN-CONTAIN') ||
+                      props.row.draft === 'รอส่งตัว'
+                    "
+                    clickable
+                    v-close-popup
+                    @click="openAppointModal(props.row.personalId)"
+                  >
+                    <q-item-section
+                      style="min-width: 0px"
+                      avatar
+                      class="q-py-sm"
+                    >
+                      <q-icon
+                        color="primary"
+                        size="xs"
+                        name="mdi-bookmark-outline"
+                      />
+                    </q-item-section>
+                    <q-item-section>เลือกหน่วยงานที่รับบรรจุ</q-item-section>
+                  </q-item>
 
-    <!-- dialog เพิ่มรายชื่อ -->
-    <q-dialog v-model="modaladdlist">
-      <q-card style="width: 900px; max-width: 80vw">
-        <DialogHeader title="ส่งรายชื่อไปยังหน่วยงาน" :close="clickCloseSendModal" />
+                  <q-separator />
+                  <q-item
+                    v-if="roleAdmin && props.row.statusId === 'UN-CONTAIN'"
+                    clickable
+                    v-close-popup
+                    @click="editDetail(props.row, 'deferment')"
+                  >
+                    <q-item-section
+                      style="min-width: 0px"
+                      avatar
+                      class="q-py-sm"
+                    >
+                      <q-icon
+                        color="blue"
+                        size="xs"
+                        name="mdi-account-alert-outline"
+                      />
+                    </q-item-section>
+                    <q-item-section>ขอผ่อนผัน</q-item-section>
+                  </q-item>
+                  <q-item
+                    v-else-if="
+                      props.row.deferment === true &&
+                      props.row.statusId != 'DISCLAIM'
+                    "
+                    clickable
+                    v-close-popup
+                    @click="editDetail(props.row, 'defermentInfo')"
+                  >
+                    <q-item-section
+                      style="min-width: 0px"
+                      avatar
+                      class="q-py-sm"
+                    >
+                      <q-icon
+                        color="blue"
+                        size="xs"
+                        name="mdi-account-details-outline"
+                      />
+                    </q-item-section>
+                    <q-item-section>ข้อมูลการผ่อนผัน</q-item-section>
+                  </q-item>
+                  <q-separator />
+                  <q-item
+                    v-if="
+                      props.row.statusId === 'UN-CONTAIN' ||
+                      props.row.statusId === 'PREPARE-CONTAIN'
+                    "
+                    clickable
+                    v-close-popup
+                    @click="editDetail(props.row, 'disclaim')"
+                  >
+                    <q-item-section
+                      style="min-width: 0px"
+                      avatar
+                      class="q-py-sm"
+                    >
+                      <q-icon
+                        color="pink"
+                        size="xs"
+                        name="mdi-account-cancel-outline"
+                      />
+                    </q-item-section>
+                    <q-item-section>สละสิทธิ์</q-item-section>
+                  </q-item>
+                  <q-item
+                    v-else-if="props.row.statusId === 'DISCLAIM'"
+                    clickable
+                    v-close-popup
+                    @click="editDetail(props.row, 'disclaimInfo')"
+                  >
+                    <q-item-section
+                      style="min-width: 0px"
+                      avatar
+                      class="q-py-sm"
+                    >
+                      <q-icon
+                        color="pink"
+                        size="xs"
+                        name="mdi-account-cancel-outline"
+                      />
+                    </q-item-section>
+                    <q-item-section>ข้อมูลการสละสิทธิ์</q-item-section>
+                  </q-item>
+                </q-list>
+              </q-menu>
+            </q-btn>
+          </q-td>
+        </q-tr>
+      </template>
+    </Table>
+  </q-form>
+
+  <!-- เลือกหน่วยงานที่บรรจุ -->
+  <DialogOrgTree
+    v-model:modal="appointModal"
+    :personalId="personalId"
+    :close="clickCloseModalTree"
+    :personal="personal"
+  />
+
+  <!-- popup ขอผ่อนผัน / สละสิทธิ์ -->
+  <q-form ref="myForm">
+    <DialogCard
+      v-model:Modal="modal"
+      :personal-id="personalId"
+      :close="clickClose"
+      :validate="validateData"
+    />
+  </q-form>
+  <q-dialog v-model="modalDefermentDisclaim" persistent>
+    <q-card style="width: 800px">
+      <q-form ref="myForm">
+        <DialogHeader
+          :title="`${modalDisclaim ? 'สละสิทธิ์' : 'ขอผ่อนผัน'} ชื่อ${Name}`"
+          :close="clickClose"
+        />
         <q-separator />
-        <q-card-section class="q-pt-none">
-          <div class="row justify-end">
-            <div class="col-5">
-              <q-toolbar style="padding: 0">
-                <q-input borderless outlined dense debounce="300" v-model="filterlistAdd" placeholder="ค้นหา"
-                  style="width: 850px; max-width: auto">
-                  <template v-slot:append>
-                    <q-icon name="search" />
-                  </template>
-                </q-input>
-                <q-select v-model="visibleColumnslist" multiple outlined dense options-dense
-                  :display-value="$q.lang.table.columns" emit-value map-options :options="columns" option-value="name"
-                  options-cover style="min-width: 150px" class="gt-xs q-ml-sm" />
-              </q-toolbar>
+        <q-card-section class="q-p-sm">
+          <div class="col-xs-12 col-sm-12 col-md-12">
+            <q-input
+              :class="getClass(edit)"
+              hide-bottom-space
+              :outlined="edit"
+              dense
+              lazy-rules
+              :rules="[(val) => !!val || 'กรุณากรอกเหตุผล']"
+              :readonly="!edit"
+              :borderless="!edit"
+              v-model="userNote"
+              :label="`${'กรอกเหตุผล'}`"
+              @update:model-value="clickEditRow"
+              type="textarea"
+            />
+            <q-file
+              v-if="getNumFile === 1"
+              v-model="files"
+              dense
+              :label="`${'เลือกไฟล์เอกสารหลักฐาน'}`"
+              outlined
+              use-chips
+              :rules="[(val) => !!val || 'กรุณาเลือกไฟล์เอกสารหลักฐาน']"
+              multiple
+              @update:model-value="clickEditRow"
+              class="q-py-sm"
+            >
+              <template v-slot:prepend>
+                <q-icon name="attach_file" color="primary" />
+              </template>
+            </q-file>
+          </div>
+        </q-card-section>
+        <q-separator />
+        <DialogFooter
+          :editvisible="true"
+          :validate="validateData"
+          :save="modalDisclaim ? saveDisclaim : saveDeferment"
+        />
+      </q-form>
+    </q-card>
+  </q-dialog>
+
+  <!-- dialog ข้อมูลขอผ่อนผัน / สละสิทธิ์ -->
+  <q-dialog v-model="modalwaitInfo" persistent>
+    <q-card style="width: 500px; max-width: 500px">
+      <q-form ref="myForm">
+        <DialogHeader
+          :title="`${modalDisclaim ? 'สละสิทธิ์' : 'ขอผ่อนผัน'} ชื่อ${Name}`"
+          :close="clickClose"
+        />
+        <q-separator />
+        <q-card-section class="q-p-sm">
+          <div class="row">
+            <div class="col-3 text-grey-7">เหตุผล</div>
+            <div class="col-4">{{ dataInfo.reason }}</div>
+          </div>
+          <div v-if="!modalDisclaim" class="row q-pt-md">
+            <div class="col-3 text-grey-7 q-mt-sm">เอกสารหลักฐาน</div>
+            <div class="col-2 q-mt-sm">
+              <q-btn
+                type="a"
+                :href="dataInfo.reliefDoc"
+                color="primary"
+                flat
+                dense
+                round
+                size="14px"
+                icon="mdi-download"
+                target="_blank"
+              />
             </div>
           </div>
+        </q-card-section>
+        <q-separator />
+      </q-form>
+    </q-card>
+  </q-dialog>
 
-          <q-table flat bordered dense :rows="rowsFilter" :columns="columns" :filter="filterlistAdd" row-key="name"
-            class="custom-header-table" selection="multiple" v-model:selected="selected" :pagination-label="paginationLabel"
-            :visible-columns="visibleColumnslist">
-            <template v-slot:header-selection="scope">
-              <q-checkbox keep-color color="primary" dense v-model="scope.selected" />
-            </template>
-            <!-- <template v-slot:body-selection="scope">
+  <!-- dialog เพิ่มรายชื่อ -->
+  <q-dialog v-model="modaladdlist">
+    <q-card style="width: 900px; max-width: 80vw">
+      <DialogHeader
+        title="ส่งรายชื่อไปยังหน่วยงาน"
+        :close="clickCloseSendModal"
+      />
+      <q-separator />
+      <q-card-section class="q-pt-none">
+        <div class="row justify-end">
+          <div class="col-5">
+            <q-toolbar style="padding: 0">
+              <q-input
+                borderless
+                outlined
+                dense
+                debounce="300"
+                v-model="filterlistAdd"
+                placeholder="ค้นหา"
+                style="width: 850px; max-width: auto"
+              >
+                <template v-slot:append>
+                  <q-icon name="search" />
+                </template>
+              </q-input>
+              <q-select
+                v-model="visibleColumnslist"
+                multiple
+                outlined
+                dense
+                options-dense
+                :display-value="$q.lang.table.columns"
+                emit-value
+                map-options
+                :options="columns"
+                option-value="name"
+                options-cover
+                style="min-width: 150px"
+                class="gt-xs q-ml-sm"
+              />
+            </q-toolbar>
+          </div>
+        </div>
+
+        <q-table
+          flat
+          bordered
+          dense
+          :rows="rowsFilter"
+          :columns="columns"
+          :filter="filterlistAdd"
+          row-key="name"
+          class="custom-header-table"
+          selection="multiple"
+          v-model:selected="selected"
+          :pagination-label="paginationLabel"
+          :visible-columns="visibleColumnslist"
+        >
+          <template v-slot:header-selection="scope">
+            <q-checkbox
+              keep-color
+              color="primary"
+              dense
+              v-model="scope.selected"
+            />
+          </template>
+          <!-- <template v-slot:body-selection="scope">
             <q-checkbox
               keep-color
               color="primary"
@@ -777,112 +986,153 @@ const paginationLabel = (start: number, end: number, total: number) => {
               v-model="scope.selected"
             />
           </template> -->
-            <template v-slot:body="props">
-              <q-tr :props="props">
-                <q-td>
-                  <q-checkbox keep-color color="primary" dense v-model="props.selected" />
-                </q-td>
-                <q-td v-for="col in props.cols" :key="col.name" :props="props" class="cursor-pointer">
-                  <template v-if="col.name === 'position'">
-                    {{ props.rowIndex + 1 }}
-                  </template>
-                  <template v-else-if="col.name === 'fullName'" class="table_ellipsis">
-                    <div class="row col-12 text-no-wrap items-center">
-                      <img v-if="props.row.avatar == null" src="@/assets/avatar_user.jpg" class="col-4 img-info" />
-                      <img v-else :src="props.row.avatar" class="col-4 img-info" />
-                      <div class="col-4">
-                        <div class="text-weight-medium">{{ props.row.name }}</div>
-                        <div class="text-weight-light">
-                          {{ props.row.idCard }}
-                        </div>
+          <template v-slot:body="props">
+            <q-tr :props="props">
+              <q-td>
+                <q-checkbox
+                  keep-color
+                  color="primary"
+                  dense
+                  v-model="props.selected"
+                />
+              </q-td>
+              <q-td
+                v-for="col in props.cols"
+                :key="col.name"
+                :props="props"
+                class="cursor-pointer"
+              >
+                <template v-if="col.name === 'position'">
+                  {{ props.rowIndex + 1 }}
+                </template>
+                <template
+                  v-else-if="col.name === 'fullName'"
+                  class="table_ellipsis"
+                >
+                  <div class="row col-12 text-no-wrap items-center">
+                    <img
+                      v-if="props.row.avatar == null"
+                      src="@/assets/avatar_user.jpg"
+                      class="col-4 img-info"
+                    />
+                    <img
+                      v-else
+                      :src="props.row.avatar"
+                      class="col-4 img-info"
+                    />
+                    <div class="col-4">
+                      <div class="text-weight-medium">{{ props.row.name }}</div>
+                      <div class="text-weight-light">
+                        {{ props.row.idCard }}
                       </div>
                     </div>
-                  </template>
-                  <template v-else-if="col.name === 'examNumber'">
-                    <div class="text-weight-medium">
-                      {{
-                        props.row.examNumber !== null ? props.row.examNumber : "-"
-                      }}
-                    </div>
-                  </template>
+                  </div>
+                </template>
+                <template v-else-if="col.name === 'examNumber'">
+                  <div class="text-weight-medium">
+                    {{
+                      props.row.examNumber !== null ? props.row.examNumber : "-"
+                    }}
+                  </div>
+                </template>
 
-                  <template v-else-if="col.name === 'organizationName'">
-                    <div v-if="props.row.orgName !== null ||
+                <template v-else-if="col.name === 'organizationName'">
+                  <div
+                    v-if="
+                      props.row.orgName !== null ||
                       props.row.positionPath !== null
-                      ">
-                      <div class="col-4">
-                        <div class="text-weight-medium">
-                          {{
-                            props.row.orgName !== null ? props.row.orgName : "-"
-                          }}
-                          {{
-                            props.row.organizationShortName !== null
+                    "
+                  >
+                    <div class="col-4">
+                      <div class="text-weight-medium">
+                        {{
+                          props.row.orgName !== null ? props.row.orgName : "-"
+                        }}
+                        {{
+                          props.row.organizationShortName !== null
                             ? `(${props.row.organizationShortName})`
                             : ""
-                          }}
-                        </div>
-                        <div class="text-weight-light">
-                          {{
-                            props.row.positionPath !== null
+                        }}
+                      </div>
+                      <div class="text-weight-light">
+                        {{
+                          props.row.positionPath !== null
                             ? props.row.positionPath
                             : "-"
-                          }}
-                          {{
-                            props.row.positionNumber !== null
+                        }}
+                        {{
+                          props.row.positionNumber !== null
                             ? `(${props.row.positionNumber})`
                             : ""
-                          }}
-                        </div>
+                        }}
                       </div>
                     </div>
-                    <div v-else>
-                      <div class="col-4">
-                        <div class="text-weight-medium">-</div>
-                      </div>
+                  </div>
+                  <div v-else>
+                    <div class="col-4">
+                      <div class="text-weight-medium">-</div>
                     </div>
-                  </template>
-                  <template v-else-if="col.name === 'positionCandidate'">
-                    <div class="text-weight-medium" v-if="props.row.positionCandidate == null">
-                      -
-                    </div>
-                    <div class="text-weight-medium" v-else>
-                      {{ props.row.positionCandidate }}
-                    </div>
-                  </template>
-                  <template v-else-if="col.name === 'reportingDate' && col.value !== '-'">
-                    <div class="text-weight-medium">
-                      {{ props.row.reportingDate }}
-                    </div>
-                  </template>
-                  <template v-else-if="col.name === 'bmaOfficer'">
-                    <div class="text-weight-medium">
-                      {{
-                        props.row.bmaOfficer !== null ? props.row.bmaOfficer : "-"
-                      }}
-                    </div>
-                  </template>
-                  <template v-else-if="col.name === 'draft'">
-                    <div class="text-weight-medium">
-                      {{ props.row.draft }}
-                    </div>
-                  </template>
-                  <template v-else-if="col.name === 'statusName'">
-                    <div class="text-weight-medium">
-                      {{ props.row.statusName }}
-                    </div>
-                  </template>
-                </q-td>
-              </q-tr>
-            </template>
-            <template v-slot:pagination="scope">
-              <q-pagination v-model="pagination.page" color="primary" :max="scope.pagesNumber" :max-pages="5" size="sm"
-                boundary-links direction-links></q-pagination>
-            </template>
-          </q-table>
-        </q-card-section>
+                  </div>
+                </template>
+                <template v-else-if="col.name === 'positionCandidate'">
+                  <div
+                    class="text-weight-medium"
+                    v-if="props.row.positionCandidate == null"
+                  >
+                    -
+                  </div>
+                  <div class="text-weight-medium" v-else>
+                    {{ props.row.positionCandidate }}
+                  </div>
+                </template>
+                <template
+                  v-else-if="col.name === 'reportingDate' && col.value !== '-'"
+                >
+                  <div class="text-weight-medium">
+                    {{ props.row.reportingDate }}
+                  </div>
+                </template>
+                <template v-else-if="col.name === 'bmaOfficer'">
+                  <div class="text-weight-medium">
+                    {{
+                      props.row.bmaOfficer !== null ? props.row.bmaOfficer : "-"
+                    }}
+                  </div>
+                </template>
+                <template v-else-if="col.name === 'draft'">
+                  <div class="text-weight-medium">
+                    {{ props.row.draft }}
+                  </div>
+                </template>
+                <template v-else-if="col.name === 'statusName'">
+                  <div class="text-weight-medium">
+                    {{ props.row.statusName }}
+                  </div>
+                </template>
+              </q-td>
+            </q-tr>
+          </template>
+          <template v-slot:pagination="scope">
+            <q-pagination
+              v-model="pagination.page"
+              color="primary"
+              :max="scope.pagesNumber"
+              :max-pages="5"
+              size="sm"
+              boundary-links
+              direction-links
+            ></q-pagination>
+          </template>
+        </q-table>
+      </q-card-section>
 
-        <q-card-actions align="right" class="bg-white text-teal">
-          <q-btn label="บันทึก" @click="savelist" :disable="checkSelected" color="public" />
+      <q-card-actions align="right" class="bg-white text-teal">
+        <q-btn
+          label="บันทึก"
+          @click="savelist"
+          :disable="checkSelected"
+          color="public"
+        />
       </q-card-actions>
     </q-card>
   </q-dialog>

src/modules/05_placement/components/PersonalList/TableDetail.vue

@@ -19,7 +19,7 @@ const props = defineProps({
   },
   personalId: {
     type: String,
-    default: ""
+    default: "",
   },
   validate: {
     type: Function,
@@ -27,8 +27,7 @@ const props = defineProps({
   },
 });
 
-const rows = ref<any[]>([
-]);
+const rows = ref<any[]>([]);
 //--------------------(แปลงวันที่เป็นไทย)------------------------------------//
 // const graduationDate = new Date(graduationExample);
 // rows.value[0].graduation = date2Thai(graduationDate, false, false);
@@ -81,7 +80,6 @@ const myForm = ref<any>([]);
 const personalForm = ref<any>([]);
 const selection = ref<any>([]);
 
-
 const $q = useQuasar();
 
 function isRequired(val: any): boolean | string {
@@ -166,21 +164,22 @@ const close = async () => {
   rows.value = [];
 };
 const putpersonalForm = async () => {
-  await http
-    .put(
-      config.API.putProperty("0a846508-4932-40de-9a9e-5b519492217c"),
-      personalForm.value.isProperty
-    )
-    .then((res) => {
-      success($q, res.data.message);
-    })
-    .catch((e) => {
-      console.log(e);
-    })
-    .finally(() => {
-      props.close();
-      props.validate();
-    });
+  props.close();
+  // await http
+  //   .put(
+  //     config.API.putProperty("0a846508-4932-40de-9a9e-5b519492217c"),
+  //     personalForm.value.isProperty
+  //   )
+  //   .then((res) => {
+  //     success($q, res.data.message);
+  //   })
+  //   .catch((e) => {
+  //     console.log(e);
+  //   })
+  //   .finally(() => {
+  //     props.close();
+  //     props.validate();
+  //   });
 };
 </script>
 <template>
@@ -188,7 +187,10 @@ const putpersonalForm = async () => {
     <q-card style="max-width: 100%; width: 80%">
       <q-form ref="myForm">
         <div class="row">
-          <DialogHeader :title="`รายละเอียดของ ${personalForm.fullName}`" @click="close" />
+          <DialogHeader
+            :title="`รายละเอียดของ ${personalForm.fullName}`"
+            @click="close"
+          />
         </div>
         <q-separator />
 
@@ -197,10 +199,13 @@ const putpersonalForm = async () => {
             <q-card bordered class="card-panding">
               <div class="row items-center q-pa-xs header-text">
                 ข้อมูลทั่วไป
-                    <span v-if="personalForm.bmaOfficer != null" class="check-officer">
-                      <q-icon name="mdi-check" />
-                      {{ formBmaofficer(personalForm.bmaOfficer) }}
-                    </span>
+                <span
+                  v-if="personalForm.bmaOfficer != null"
+                  class="check-officer"
+                >
+                  <q-icon name="mdi-check" />
+                  {{ formBmaofficer(personalForm.bmaOfficer) }}
+                </span>
               </div>
               <div class="row q-pa-xs">
                 <div class="col-3 header-sub-text">
@@ -244,8 +249,18 @@ const putpersonalForm = async () => {
           <div class="contanier-box-mini">
             <q-card bordered class="card-panding">
               <div class="row items-center q-pa-xs header-text">การศึกษา</div>
-              <q-table ref="table" :rows="rows" :columns="columns" flat bordered class="custom-header-table"
-                virtual-scroll :virtual-scroll-sticky-size-start="48" dense hide-bottom>
+              <q-table
+                ref="table"
+                :rows="rows"
+                :columns="columns"
+                flat
+                bordered
+                class="custom-header-table"
+                virtual-scroll
+                :virtual-scroll-sticky-size-start="48"
+                dense
+                hide-bottom
+              >
               </q-table>
             </q-card>
           </div>
@@ -320,19 +335,24 @@ const putpersonalForm = async () => {
           <div class="contanier-box-mini">
             <q-card bordered class="card-panding">
               <div class="col-12 row items-center q-pa-sm header-text">
-                การคัดกรองคุณสมบัติ
+                เอกสารเพิ่มเติม
               </div>
-              <div v-for="(item, index) of personalForm.isProperty" :key="index" class="q-pa-sm">
+              <!-- <div v-for="(item, index) of personalForm.isProperty" :key="index" class="q-pa-sm">
                 <q-checkbox size="xs" v-model="item.value" :val="item.value" :label="item.name" keep-color color="teal"
                   :rules="[isRequired]" class="checkbox-group" />
                 <q-separator />
-              </div>
+              </div> -->
             </q-card>
           </div>
         </div>
         <q-separator />
         <div>
-          <DialogFooter @click="ClickSave" :model="props.Modal" :editvisible="save" :validate="validateData" />
+          <DialogFooter
+            @click="ClickSave"
+            :model="props.Modal"
+            :editvisible="save"
+            :validate="validateData"
+          />
         </div>
       </q-form>
     </q-card>

src/modules/05_placement/components/PersonalList/TableView.vue

@@ -10,7 +10,14 @@
         @update:model-value="updateContain"
       />
       <div>
-        <q-btn flat round color="primary" icon="mdi-account-arrow-right" @click="updateModaladdlist" />
+        <q-btn
+          flat
+          round
+          color="primary"
+          icon="mdi-account-arrow-right"
+          @click="updateModaladdlist"
+          v-if="displayAdd"
+        />
       </div>
       <q-space />
       <div class="items-center" style="display: flex">
@@ -109,6 +116,7 @@ const props = defineProps({
   editvisible: Boolean,
   titleText: String,
   modaladdlist: Boolean,
+  displayAdd: Boolean,
   optionsFilter: {
     type: Array,
     defualt: [],

src/modules/05_placement/components/RepatriationOrder/AddOrder.vue

@@ -0,0 +1,91 @@
+<template>
+  <div class="toptitle text-dark 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>
+  <q-card flat bordered class="col-12 q-my-sm q-mt-sm">
+    <q-stepper
+      v-model="step"
+      ref="stepper"
+      color="primary"
+      animated
+      class="step"
+      header-class="bg-grey-1"
+    >
+      <q-step
+        :name="1"
+        title="รายละเอียดการออกคำสั่ง"
+        prefix="1"
+        :done="step > 1"
+        :header-nav="step > 1"
+      />
+      <q-step
+        :name="2"
+        title="เลือกรายชื่อส่งสำเนาคำสั่ง"
+        prefix="2"
+        :done="step > 2"
+        :header-nav="step > 2"
+      />
+      <q-step
+        :name="3"
+        title="รายละเอียดคำสั่งและแนบท้าย"
+        prefix="3"
+        :header-nav="step > 3"
+      />
+      <template v-slot:message>
+        <step01 v-if="step === 1" :next="nextStep" :previous="previousStep" />
+        <step02 v-if="step === 2" :next="nextStep" :previous="previousStep" />
+        <step03 v-if="step === 3" :next="nextStep" :previous="previousStep" />
+      </template>
+    </q-stepper>
+  </q-card>
+</template>
+<script setup lang="ts">
+import { useRouter } from "vue-router";
+import { ref, defineAsyncComponent } from "vue";
+import type { QStepper } from "quasar";
+
+const step01 = defineAsyncComponent(
+  () => import("@/modules/05_placement/components/RepatriationOrder/step01.vue")
+);
+const step02 = defineAsyncComponent(
+  () => import("@/modules/05_placement/components/RepatriationOrder/step02.vue")
+);
+const step03 = defineAsyncComponent(
+  () => import("@/modules/05_placement/components/RepatriationOrder/step03.vue")
+);
+
+const router = useRouter();
+const step = ref<number>(1);
+const stepper = ref<QStepper>();
+
+const nextStep = () => {
+  stepper.value!.next();
+};
+
+const previousStep = () => {
+  stepper.value!.previous();
+};
+</script>
+<style>
+.q-stepper--horizontal .q-stepper__step-inner {
+  padding: 0px;
+}
+.step .q-stepper__tab--done .q-stepper__title,
+.step .q-stepper__tab--active .q-stepper__title {
+  color: #35473c !important;
+  font-weight: 500;
+}
+.step .q-stepper__header--standard-labels .q-stepper__tab {
+  min-height: 60px;
+}
+</style>

src/modules/05_placement/components/RepatriationOrder/List.vue

@@ -0,0 +1,740 @@
+<template>
+  <div class="toptitle text-dark col-12 row items-center">
+    รายการคำสั่งช่วยราชการ/ส่งตัวกลับ
+  </div>
+  <div>
+    <q-card flat bordered class="col-12 q-mt-sm q-pa-md">
+      <div class="row q-col-gutter-sm">
+        <div class="row col-12 q-col-gutter-sm">
+          <q-select
+            class="col-xs-12 col-sm-3 col-md-2"
+            v-model="fiscalyear"
+            label="ปีงบประมาณ"
+            dense
+            emit-value
+            map-options
+            :options="fiscalyearOP"
+            option-value="id"
+            option-label="name"
+            lazy-rules
+            hide-bottom-space
+            :readonly="false"
+            :borderless="false"
+            :outlined="true"
+            :hide-dropdown-icon="false"
+            @update:model-value="searchFilterTable"
+          />
+          <q-space />
+          <q-input
+            class="col-xs-12 col-sm-3 col-md-2"
+            standout
+            dense
+            v-model="filterKeyword"
+            ref="filterRef"
+            outlined
+            debounce="300"
+            placeholder="ค้นหา"
+          >
+            <template v-slot:append>
+              <q-icon v-if="filterKeyword == ''" name="search" />
+              <q-icon
+                v-if="filterKeyword !== ''"
+                name="clear"
+                class="cursor-pointer"
+                @click="resetFilter"
+              />
+            </template>
+          </q-input>
+          <q-select
+            v-model="visibleColumns"
+            multiple
+            outlined
+            dense
+            options-dense
+            :display-value="$q.lang.table.columns"
+            emit-value
+            map-options
+            :options="columns"
+            option-value="name"
+            options-cover
+            style="min-width: 150px"
+            class="col-xs-12 col-sm-3 col-md-2"
+          />
+        </div>
+        <div class="col-12">
+          <q-card bordered class="col-12 filter-card q-pa-sm">
+            <div class="row col-12 q-col-gutter-sm">
+              <q-select
+                class="col-xs-12 col-sm-3 col-md-2"
+                v-model="OrderType"
+                label="ประเภท"
+                dense
+                emit-value
+                map-options
+                option-label="name"
+                :options="OrderTypeOption"
+                option-value="id"
+                lazy-rules
+                hide-bottom-space
+                :readonly="false"
+                :borderless="false"
+                :outlined="true"
+                :hide-dropdown-icon="false"
+                @update:model-value="searchFilterTable"
+              />
+              <q-select
+                class="col-xs-12 col-sm-3 col-md-2"
+                v-model="OrderStatus"
+                label="สถานะ"
+                dense
+                emit-value
+                map-options
+                option-label="name"
+                :options="OrderStatusOption"
+                option-value="id"
+                lazy-rules
+                hide-bottom-space
+                :readonly="false"
+                :borderless="false"
+                :outlined="true"
+                :hide-dropdown-icon="false"
+                @update:model-value="searchFilterTable"
+              />
+            </div>
+          </q-card>
+        </div>
+        <div class="col-12">
+          <q-table
+            ref="table"
+            :columns="columns"
+            :rows="UpdataData"
+            :filter="filterKeyword"
+            row-key="Order"
+            flat
+            bordered
+            :paging="true"
+            dense
+            class="custom-header-table"
+            v-bind="attrs"
+            :visible-columns="visibleColumns"
+            :pagination-label="paginationLabel"
+            v-model:pagination="pagination"
+          >
+            <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-th auto-width />
+              </q-tr>
+            </template>
+            <template v-slot:body="props">
+              <q-tr
+                :props="props"
+                class="cursor-pointer"
+                @click="redirectToPage(props.row.Order)"
+              >
+                <q-td key="Order" :props="props">
+                  {{ props.row.Order }}
+                </q-td>
+                <q-td key="OrderNum" :props="props">
+                  {{ props.row.OrderNum }}
+                </q-td>
+                <q-td key="OrderType" :props="props">
+                  {{ props.row.OrderType }}
+                </q-td>
+                <q-td key="OrderDate" :props="props">
+                  {{ props.row.OrderDate }}
+                </q-td>
+                <q-td key="OrderBy" :props="props">
+                  {{ props.row.OrderBy }}
+                </q-td>
+                <q-td key="Signer" :props="props">
+                  {{ props.row.Signer }}
+                </q-td>
+                <q-td key="OrderStatus" :props="props">
+                  {{ props.row.OrderStatus }}
+                </q-td>
+                <q-td auto-width>
+                  <q-btn
+                    dense
+                    size="12px"
+                    flat
+                    round
+                    color="red"
+                    @click.stop="clickDelete(props.row.id)"
+                    icon="mdi-delete"
+                  >
+                  </q-btn>
+                </q-td>
+              </q-tr>
+            </template>
+            <template v-slot:pagination="scope">
+              <q-pagination
+                v-model="pagination.page"
+                active-color="primary"
+                color="dark"
+                :max="scope.pagesNumber"
+                :max-pages="5"
+                size="sm"
+                boundary-links
+                direction-links
+              ></q-pagination>
+            </template>
+          </q-table>
+        </div>
+      </div>
+    </q-card>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { onMounted, reactive, ref, useAttrs, computed } from "vue";
+import type { QTableProps } from "quasar";
+import type { FormOrderPlacementMainData } from "@/modules/05_placement/interface/request/Main";
+import type { DataOption } from "@/modules/05_placement/interface/index/Main";
+import { useCounterMixin } from "@/stores/mixin";
+import { useOrderPlacementDataStore } from "@/modules/05_placement/store";
+import router from "@/router";
+import { useQuasar } from "quasar";
+
+const $q = useQuasar(); //ใช้ noti quasar
+const DataStore = useOrderPlacementDataStore();
+const pagination = ref({
+  sortBy: "desc",
+  descending: false,
+  page: 1,
+  rowsPerPage: 10,
+});
+
+const mixin = useCounterMixin();
+const { dateText } = mixin;
+
+// แปลงเวลา ค.ศ ให้เป็น พ.ศ
+const textDate = (value: Date) => {
+  return dateText(value);
+};
+
+const visibleColumns = ref<string[]>([
+  "Order",
+  "OrderType",
+  "OrderNum",
+  "OrderDate",
+  "OrderBy",
+  "Signer",
+  "OrderStatus",
+]); //ค้นหา คอลัมน์ คอลัมน์ที่แสดง
+
+// หัวตาราง
+const columns = ref<QTableProps["columns"]>([
+  {
+    name: "Order",
+    align: "left",
+    label: "คำสั่ง",
+    sortable: true,
+    field: "Order",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "OrderNum",
+    align: "left",
+    label: "เลขที่คำสั่ง",
+    sortable: true,
+    field: "OrderNum",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "OrderType",
+    align: "left",
+    label: "ประเภท",
+    sortable: false,
+    field: "OrderType",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "OrderDate",
+    align: "left",
+    label: "สั่ง ณ วันที่/วันที่คำสั่งมีผล",
+    sortable: true,
+    field: "OrderDate",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "OrderBy",
+    align: "left",
+    label: "คำสั่งโดย",
+    sortable: true,
+    field: "OrderBy",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "Signer",
+    align: "left",
+    label: "ผู้ลงนาม",
+    sortable: false,
+    field: "Signer",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "OrderStatus",
+    align: "center",
+    label: "สถานะคำสั่ง",
+    sortable: false,
+    field: "OrderStatus",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "fiscalYear",
+    align: "left",
+    label: "ปีงบประมาณ",
+    sortable: true,
+    field: "fiscalYear",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+]);
+
+// ข้อมูลตาราง (จำลอง)
+const rows = ref<FormOrderPlacementMainData[]>([
+  {
+    Order: "คำสั่งแต่งตั้งผู้สอบแข่งขันได้",
+    OrderNum: "1/2565",
+    fiscalYear: 2565,
+    OrderDate: "30 พ.ค. 2565",
+    OrderBy: "สำนักงาน กทม.",
+    Signer: "นาม สมคิด ยอดใจ ",
+    OrderStatus: "จัดทำร่างคำสั่ง",
+    OrderType: "คำสั่งย้าย",
+  },
+
+  {
+    Order: "คำสั่งแต่งตั้งผู้สอบแข่งขันได้",
+    OrderNum: "1/2565",
+    fiscalYear: 2565,
+    OrderDate: "30 พ.ค. 2565",
+    OrderBy: "สำนักงาน กทม.",
+    Signer: "นาม สมคิด ยอดใจ ",
+    OrderStatus: "จัดทำร่างคำสั่ง",
+    OrderType: "คำสั่งบรรจุและแต่งตั้ง",
+  },
+  {
+    Order: "คำสั่งแต่งตั้งผู้สอบแข่งขันได้",
+    OrderNum: "1/2564",
+    fiscalYear: 2564,
+    OrderDate: "30 พ.ค. 2564",
+    OrderBy: "สำนักงาน กทม.",
+    Signer: "นาม สมคิด ยอดใจ ",
+    OrderStatus: "บัญชีแนบท้าย",
+    OrderType: "คำสั่งบรรจุและแต่งตั้ง",
+  },
+  {
+    Order: "คำสั่งแต่งตั้งผู้สอบแข่งขันได้",
+    OrderNum: "1/2564",
+    fiscalYear: 2564,
+    OrderDate: "30 พ.ค. 2564",
+    OrderBy: "สำนักงาน กทม.",
+    Signer: "นาม สมคิด ยอดใจ ",
+    OrderStatus: "บัญชีแนบท้าย",
+    OrderType: "คำสั่งย้าย",
+  },
+  {
+    Order: "คำสั่งแต่งตั้งผู้สอบแข่งขันได้",
+    OrderNum: "1/2564",
+    fiscalYear: 2564,
+    OrderDate: "30 พ.ค. 2564",
+    OrderBy: "สำนักงาน กทม.",
+    Signer: "นาม สมคิด ยอดใจ ",
+    OrderStatus: "ส่งสำเนาคำสั่ง",
+    OrderType: "คำสั่งย้าย",
+  },
+  {
+    Order: "คำสั่งแต่งตั้งผู้สอบแข่งขันได้",
+    OrderNum: "1/2564",
+    fiscalYear: 2564,
+    OrderDate: "30 พ.ค. 2564",
+    OrderBy: "สำนักงาน กทม.",
+    Signer: "นาม สมคิด ยอดใจ ",
+    OrderStatus: "ส่งสำเนาคำสั่ง",
+    OrderType: "คำสั่งบรรจุและแต่งตั้ง",
+  },
+  {
+    Order: "คำสั่งแต่งตั้งผู้สอบแข่งขันได้",
+    OrderNum: "1/2566",
+    fiscalYear: 2566,
+    OrderDate: "30 พ.ค. 2566",
+    OrderBy: "สำนักงาน กทม.",
+    Signer: "นาม สมคิด ยอดใจ ",
+    OrderStatus: "รอลงนาม",
+    OrderType: "คำสั่งบรรจุและแต่งตั้ง",
+  },
+  {
+    Order: "คำสั่งแต่งตั้งผู้สอบแข่งขันได้",
+    OrderNum: "1/2566",
+    fiscalYear: 2566,
+    OrderDate: "30 พ.ค. 2566",
+    OrderBy: "สำนักงาน กทม.",
+    Signer: "นาม สมคิด ยอดใจ ",
+    OrderStatus: "ออกคำสั่งแล้ว",
+    OrderType: "คำสั่งแต่งตั้ง",
+  },
+  {
+    Order: "คำสั่งแต่งตั้งผู้สอบแข่งขันได้",
+    OrderNum: "1/2565",
+    fiscalYear: 2565,
+    OrderDate: "30 พ.ค. 2565",
+    OrderBy: "สำนักงาน กทม.",
+    Signer: "นาม สมคิด ยอดใจ ",
+    OrderStatus: "ออกคำสั่งแล้ว",
+    OrderType: "คำสั่งบรรจุและแต่งตั้ง",
+  },
+  {
+    Order: "คำสั่งแต่งตั้งผู้สอบแข่งขันได้",
+    OrderNum: "1/2566",
+    fiscalYear: 2566,
+    OrderDate: "30 พ.ค. 2566",
+    OrderBy: "สำนักงาน กทม.",
+    Signer: "นาม สมคิด ยอดใจ ",
+    OrderStatus: "ออกคำสั่งแล้ว",
+    OrderType: "คำสั่งแต่งตั้ง",
+  },
+  {
+    Order: "คำสั่งแต่งตั้งผู้สอบแข่งขันได้",
+    OrderNum: "1/2566",
+    fiscalYear: 2566,
+    OrderDate: "30 พ.ค. 2566",
+    OrderBy: "สำนักงาน กทม.",
+    Signer: "นาม สมคิด ยอดใจ ",
+    OrderStatus: "ออกคำสั่งแล้ว",
+    OrderType: "คำสั่งย้าย",
+  },
+
+  {
+    Order: "คำสั่งแต่งตั้งผู้สอบแข่งขันได้",
+    OrderNum: "1/2564",
+    fiscalYear: 2564,
+    OrderDate: "30 พ.ค. 2564",
+    OrderBy: "สำนักงาน กทม.",
+    Signer: "นาม สมคิด ยอดใจ ",
+    OrderStatus: "ออกคำสั่งแล้ว",
+    OrderType: "คำสั่งแต่งตั้ง",
+  },
+
+  {
+    Order: "คำสั่งแต่งตั้งผู้สอบแข่งขันได้",
+    OrderNum: "1/2566",
+    fiscalYear: 2566,
+    OrderDate: "30 พ.ค. 2566",
+    OrderBy: "สำนักงาน กทม.",
+    Signer: "นาม สมคิด ยอดใจ ",
+    OrderStatus: "ออกคำสั่งแล้ว",
+    OrderType: "คำสั่งแต่งตั้ง",
+  },
+]);
+// const OrderStatusOption = [
+//   "ทั้งหมด",
+//   "ยังไม่ได้บรรจุ",
+//   "บรรจุแล้ว",
+//   "ยังไม่ได้ออกคำสั่ง",
+// ];
+
+let OriginalData = ref<FormOrderPlacementMainData[]>([]);
+let UpdataData = ref<FormOrderPlacementMainData[]>([]);
+
+onMounted(async () => {
+  await OriginalDataFetch();
+  fiscalYearFilter();
+  searchFilterTable();
+  OrderStatusFilter();
+  OrderTypeFilter();
+});
+
+const OriginalDataFetch = async () => {
+  // API
+  // await http
+  //   .get(config.API.// ตัวอย่าง)
+  //   .then((res: any) => {
+  //   })
+  //   .catch((e: any) => {
+  //     messageError($q, e);
+  //   })
+  //   .finally(async () => {
+  //   });
+  await DataStore.DataMainOrder(rows.value);
+  OriginalData.value = await DataStore.DataMainOrigOrder;
+  UpdataData.value = OriginalData.value;
+};
+
+// ดูรายการหน้าต่อไป
+const redirectToPage = (id?: number) => {
+  router.push(`/repatriation-order/add`);
+};
+
+const clickDelete = (id: string) => {
+  $q.dialog({
+    title: "ยืนยันการลบข้อมูล",
+    message: "ต้องการลบข้อมูลนี้ใช่หรือไม่?",
+    cancel: {
+      flat: true,
+      color: "negative",
+    },
+    persistent: true,
+  })
+    .onOk(async () => {
+      //   await deleteData(id);
+    })
+    .onCancel(() => {})
+    .onDismiss(() => {});
+};
+
+// const deleteData = async (id: string) => {
+//   loaderPage(true);
+//   await http
+//     .delete(config.API.orderReplace(id))
+//     .then((res) => {
+//       success($q, "ลบข้อมูลสำเร็จ");
+//     })
+//     .catch((e) => {
+//       messageError($q, e);
+//     })
+//     .finally(async () => {
+//       loaderPage(false);
+//       await fetchData();
+//     });
+// };
+
+const clickAdd = () => {
+  router.push({ name: "OrderplacementDetail" });
+};
+
+// const viewDetail = (id: string, status: string) => {
+//   if (status == "checkPayment") {
+//     router.push(`${route.fullPath}/payment/${id}`);
+//   } else {
+//     router.push(`${route.fullPath}/profile/${id}`);
+//   }
+// };
+
+// เลือกปีงบประมาณ
+const fiscalyear = ref<number | null>(0);
+const fiscalyearOP = reactive<DataOption[]>([{ id: 0, name: "ทั้งหมด" }]);
+const addedfiscalYearValues: number[] = [];
+const fiscalYearFilter = async () => {
+  // API
+  // await http
+  //   .get(config.API.// ตัวอย่าง)
+  //   .then((res: any) => {
+  //    DataStore.DataMainYearSet(rows.value);
+  //    fiscalyearOP.value = DataStore.DataMainYearGet;
+  //   })
+  //   .catch((e: any) => {
+  //     messageError($q, e);
+  //   })
+  //   .finally(async () => {
+  //   });
+  for (let data of OriginalData.value) {
+    const year = data.fiscalYear;
+    console.log(year);
+
+    if (fiscalyear.value === null || year > fiscalyear.value) {
+      fiscalyear.value = year;
+    }
+
+    if (!addedfiscalYearValues.includes(year)) {
+      fiscalyearOP.push({ id: year, name: year.toString() });
+      addedfiscalYearValues.push(year);
+    }
+  }
+};
+
+const OrderType = ref<string>("");
+const OrderTypeOption = reactive<DataOption[]>([{ id: 0, name: "ทั้งหมด" }]);
+const addedOrderTypeValues: string[] = [];
+const OrderTypeFilter = async () => {
+  // API
+  // await http
+  //   .get(config.API.// ตัวอย่าง)
+  //   .then((res: any) => {
+  //    DataStore.DataMainYearSet(rows.value);
+  //    fiscalyearOP.value = DataStore.DataMainYearGet;
+  //   })
+  //   .catch((e: any) => {
+  //     messageError($q, e);
+  //   })
+  //   .finally(async () => {
+  //   });
+  for (let data of OriginalData.value) {
+    const OrderTypeValue = data.OrderType;
+    console.log(OrderTypeValue);
+
+    // if (OrderTypeValue === null || OrderType > OrderTypeValue) {
+    //   OrderTypeValue = OrderType;
+    // }
+    if (!addedOrderTypeValues.includes(OrderTypeValue)) {
+      OrderTypeOption.push({
+        // id: OrderTypeValue ?? 0,
+        id: OrderTypeOption.length,
+        name: OrderTypeValue,
+      });
+      addedOrderTypeValues.push(OrderTypeValue);
+    }
+    // if (!addedOrderTypeValues.includes(OrderTypeValue)) {
+    //   OrderTypeOption.push({
+    //     id: OrderTypeValue,
+    //     name: OrderTypeValue.toString(),
+    //   });
+    //   addedOrderTypeValues.push(OrderTypeValue);
+    // }
+  }
+};
+const OrderStatus = ref<string>("");
+const OrderStatusText = ref<FormOrderPlacementMainData[]>(
+  DataStore.DataMainOrigOrder
+);
+const OrderStatusOption = reactive<DataOption[]>([{ id: 1, name: "ทั้งหมด" }]);
+const addedOrderStatusValues: string[] = [];
+const OrderStatusFilter = async () => {
+  // API
+  // await http
+  //   .get(config.API.// ตัวอย่าง)
+  //   .then((res: any) => {
+  //    DataStore.DataMainYearSet(rows.value);
+  //    fiscalyearOP.value = DataStore.DataMainYearGet;
+  //   })
+  //   .catch((e: any) => {
+  //     messageError($q, e);
+  //   })
+  //   .finally(async () => {
+  //   });
+  for (let data of OriginalData.value) {
+    const OrderStatusValue = data.OrderStatus;
+    console.log(OrderStatusValue);
+
+    if (
+      OrderStatusValue === null ||
+      parseInt(OrderStatusValue) > parseInt(OrderStatusValue)
+    ) {
+      OrderStatus.value = OrderStatusValue;
+    }
+
+    if (!addedOrderStatusValues.includes(OrderStatusValue)) {
+      OrderStatusOption.push({
+        // id: OrderStatusValue,
+        id: OrderStatusOption.length,
+        name: OrderStatusValue,
+      });
+      addedOrderStatusValues.push(OrderStatusValue);
+    }
+  }
+};
+
+// เลือกปีงบประมาณตาม API
+const searchfiscalyear = () => {
+  console.log("Input value changed:", fiscalyear.value);
+  // API
+  // await http
+  //   .get(config.API.// ตัวอย่าง)
+  //   .then((res: any) => {
+  //   })
+  //   .catch((e: any) => {
+  //     messageError($q, e);
+  //   })
+  //   .finally(async () => {
+  //   });
+};
+
+// ค้นหาในตาราง
+const filterKeyword = ref<string>("");
+const filterRef = ref<any>(null);
+const resetFilter = () => {
+  filterKeyword.value = "";
+  filterRef.value.focus();
+};
+
+const attrs = ref<any>(useAttrs());
+
+const searchFilterTable = async () => {
+  // console.log('Input value changed:', examTime.value, examType.value, expiredAccount.value);
+  await DataStore.DataUpdateOrder(
+    OrderType.value,
+    OrderStatus.value,
+    fiscalyear.value
+  );
+  UpdataData.value = DataStore.DataMainUpdateOrder;
+};
+//   UpdataData.value = DataStore.DataMainUpdate;
+// console.log("Input value changed:", OrderStatus.value, OrderType.value);
+
+const paging = ref<boolean>(true);
+const paginationLabel = (start: string, end: string, total: string) => {
+  if (paging.value == true) return " " + start + "-" + end + " ใน " + total;
+  else return start + "-" + end + " ใน " + total;
+};
+</script>
+
+<style lang="scss" scope>
+.filter-card {
+  background-color: #f1f1f1b0;
+}
+
+.toggle-expired-account {
+  font-size: 12px;
+  font-weight: 400;
+  font-size: 15px;
+  line-height: 150%;
+  color: #35373c;
+}
+
+.icon-color {
+  color: #4154b3;
+}
+
+.custom-header-table {
+  max-height: 64vh;
+
+  .q-table tr:nth-child(odd) td {
+    background: white;
+  }
+
+  .q-table tr:nth-child(even) td {
+    background: #f8f8f8;
+  }
+
+  .q-table thead tr {
+    background: #ecebeb;
+  }
+
+  .q-table thead tr th {
+    position: sticky;
+    z-index: 1;
+  }
+
+  /* this will be the loading indicator */
+  .q-table thead tr:last-child th {
+    /* height of all previous header rows */
+    top: 48px;
+  }
+
+  .q-table thead tr:first-child th {
+    top: 0;
+  }
+}
+</style>

src/modules/05_placement/components/RepatriationOrder/step01.vue

@@ -0,0 +1,353 @@
+<template>
+  <div style="max-height: 68vh; overflow-y: scroll">
+    <q-form ref="myForm" class="q-pa-md">
+      <div class="row col-12 q-col-gutter-x-lg q-col-gutter-y-md">
+        <div class="col-xs-12 col-md-6">
+          <selector
+            :class="getClass(true)"
+            outlined
+            dense
+            lazy-rules
+            v-model="typeOrder"
+            :rules="[(val:string) => !!val || `${'กรุณาเลือกประเภทคำสั่ง'}`]"
+            hide-bottom-space
+            :label="`${'ประเภทคำสั่ง'}`"
+            @update:modelValue="clickEditRow"
+            emit-value
+            map-options
+            option-label="name"
+            :options="typeOrderOption"
+            option-value="id"
+            use-input
+            input-debounce="0"
+            @filter="(inputValue:string,
+                      doneFn:Function) => filterSelector(inputValue, doneFn,'typeOrderOption'
+                      ) "
+          />
+        </div>
+
+        <div class="col-xs-12 col-md-6">
+          <q-input
+            :class="getClass(true)"
+            outlined
+            dense
+            lazy-rules
+            v-model="nameOrder"
+            :rules="[(val) => !!val || `${'กรุณากรอกคำสั่งเรื่อง'}`]"
+            :label="`${'คำสั่งเรื่อง'}`"
+            @update:modelValue="clickEditRow"
+            hide-bottom-space
+          />
+        </div>
+
+        <div class="row col-xs-7 col-md-3 q-col-gutter-x-xs">
+          <div class="col-6">
+            <q-input
+              :class="getClass(true)"
+              outlined
+              dense
+              lazy-rules
+              v-model="command"
+              :rules="[(val) => !!val || `${'กรุณากรอกคำสั่ง'}`]"
+              :label="`${'คำสั่ง'}`"
+              @update:modelValue="clickEditRow"
+              hide-bottom-space
+              type="number"
+            />
+          </div>
+          <label class="col-1 flex justify-center items-center text-bold"
+            >/</label
+          >
+          <div class="col-5">
+            <datepicker
+              v-model="dateYear"
+              :locale="'th'"
+              autoApply
+              year-picker
+              :enableTimePicker="false"
+              @update:modelValue="clickEditRow"
+            >
+              <template #year="{ year }">{{ year + 543 }}</template>
+              <template #year-overlay-value="{ value }">{{
+                parseInt(value + 543)
+              }}</template>
+              <template #trigger>
+                <q-input
+                  :model-value="dateYear + 543"
+                  :rules="[(val) => !!val || `${'กรุณากรอก พ.ศ.'}`]"
+                  :label="`${'พ.ศ.'}`"
+                  dense
+                  outlined
+                >
+                </q-input>
+              </template>
+            </datepicker>
+          </div>
+        </div>
+        <div class="col-xs-5 col-md-3">
+          <datepicker
+            menu-class-name="modalfix"
+            v-model="dateCommand"
+            :locale="'th'"
+            autoApply
+            borderless
+            :enableTimePicker="false"
+            week-start="0"
+          >
+            <template #year="{ year }">
+              {{ year + 543 }}
+            </template>
+            <template #year-overlay-value="{ value }">
+              {{ parseInt(value + 543) }}
+            </template>
+            <template #trigger>
+              <q-input
+                outlined
+                dense
+                class="full-width datepicker"
+                :model-value="
+                  dateCommand != null ? date2Thai(dateCommand) : 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-xs-12 col-md-6">
+          <selector
+            :class="getClass(true)"
+            outlined
+            dense
+            lazy-rules
+            v-model="byOrder"
+            :rules="[(val:string) => !!val || `${'กรุณาเลือกคำสั่งโดย'}`]"
+            hide-bottom-space
+            :label="`${'คำสั่งโดย'}`"
+            @update:modelValue="clickEditRow"
+            emit-value
+            map-options
+            option-label="name"
+            :options="byOrderOption"
+            option-value="id"
+            use-input
+            input-debounce="0"
+            @filter="(inputValue:string,
+                      doneFn:Function) => filterSelector(inputValue, doneFn,'byOrderOption'
+                      ) "
+          />
+        </div>
+        <div class="col-xs-12 col-md-6">
+          <!-- :readonly="!edit"
+                :borderless="!edit" -->
+          <q-input
+            :class="getClass(true)"
+            outlined
+            dense
+            lazy-rules
+            v-model="nameCommand"
+            :rules="[(val) => !!val || `${'กรุณากรอกผู้มีอำนาจลงนาม'}`]"
+            :label="`${'ผู้มีอำนาจลงนาม'}`"
+            @update:modelValue="clickEditRow"
+            hide-bottom-space
+          />
+        </div>
+        <div class="col-xs-12 col-md-6">
+          <!-- :readonly="!edit"
+                :borderless="!edit" -->
+          <q-input
+            :class="getClass(true)"
+            outlined
+            dense
+            lazy-rules
+            v-model="positionCommand"
+            :rules="[(val) => !!val || `${'กรุณากรอกตำแหน่งผู้มีอำนาจลงนาม'}`]"
+            :label="`${'ตำแหน่งผู้มีอำนาจลงนาม'}`"
+            @update:modelValue="clickEditRow"
+            hide-bottom-space
+          />
+        </div>
+        <div class="col-12">
+          <q-separator />
+        </div>
+        <div class="col-xs-12 col-md-6">
+          <selector
+            :class="getClass(true)"
+            outlined
+            dense
+            lazy-rules
+            v-model="test"
+            :rules="[(val:string) => !!val || `${'กรุณาเลือกรอบการสอบ'}`]"
+            hide-bottom-space
+            :label="`${'ชื่อ-นามสกุล'}`"
+            @update:modelValue="clickEditRow"
+            emit-value
+            map-options
+            option-label="name"
+            :options="testOption"
+            option-value="id"
+            use-input
+            input-debounce="0"
+            @filter="(inputValue:string,
+                      doneFn:Function) => filterSelector(inputValue, doneFn,'testOption'
+                      ) "
+          />
+        </div>
+      </div>
+    </q-form>
+  </div>
+  <q-separator />
+  <div class="flex justify-end q-pa-sm q-gutter-sm">
+    <q-btn unelevated label="บันทึก" color="public" @click="submit"> </q-btn>
+  </div>
+</template>
+<script setup lang="ts">
+import { ref } from "vue";
+import type { DataOption } from "@/modules/05_placement/interface/index/Main";
+import { useCounterMixin } from "@/stores/mixin";
+import type { QForm } from "quasar";
+
+const mixin = useCounterMixin();
+const { date2Thai } = mixin;
+
+const props = defineProps({
+  next: {
+    type: Function,
+    default: () => console.log("not function"),
+  },
+  previous: {
+    type: Function,
+    default: () => console.log("not function"),
+  },
+});
+const next = () => props.next();
+const previous = () => props.previous();
+
+const myForm = ref<QForm>();
+
+const editRow = ref<boolean>(false);
+
+const nameOrder = ref<string>("");
+const nameCommand = ref<string>("");
+const positionCommand = ref<string>("");
+const dateYear = ref<number>(new Date().getFullYear());
+const command = ref<string>("");
+const dateCommand = ref<Date>(new Date());
+// const dateRegister = ref<Date>(new Date());
+// const dateAnnounce = ref<Date>(new Date());
+
+const typeOrder = ref<string>("ช่วยราชการ");
+const typeOrderOption = ref<DataOption[]>(['ส่งตัวกลับ',"ส่งตัวกลับ"]);
+const typeOrderOptionFilter = ref<DataOption[]>([]);
+
+const byOrder = ref<string>("");
+const byOrderOption = ref<DataOption[]>([]);
+const byOrderOptionFilter = ref<DataOption[]>([]);
+
+// const register = ref<string>("");
+const registerOption = ref<DataOption[]>([]);
+const registerOptionFilter = ref<DataOption[]>([]);
+
+// const announce = ref<string>("");
+const announceOption = ref<DataOption[]>([]);
+const announceOptionFilter = ref<DataOption[]>([]);
+
+// const position = ref<string>("");
+const positionOption = ref<DataOption[]>([]);
+const positionOptionFilter = ref<DataOption[]>([]);
+
+const test = ref<string>("นายก ข");
+const testOption = ref<DataOption[]>([]);
+const testOptionFilter = ref<DataOption[]>([]);
+
+const clickEditRow = () => (editRow.value = true);
+
+const filterSelector = (val: any, update: Function, filtername: string) => {
+  switch (filtername) {
+    case "typeOrderOption":
+      update(() => {
+        typeOrderOption.value = typeOrderOptionFilter.value.filter(
+          (v: DataOption) => v.name!.indexOf(val) > -1
+        );
+      });
+      break;
+    case "byOrderOption":
+      update(() => {
+        byOrderOption.value = byOrderOptionFilter.value.filter(
+          (v: DataOption) => v.name!.indexOf(val) > -1
+        );
+      });
+      break;
+
+    case "registerOption":
+      update(() => {
+        registerOption.value = registerOptionFilter.value.filter(
+          (v: DataOption) => v.name!.indexOf(val) > -1
+        );
+      });
+      break;
+
+    case "announceOption":
+      update(() => {
+        announceOption.value = announceOptionFilter.value.filter(
+          (v: DataOption) => v.name!.indexOf(val) > -1
+        );
+      });
+      break;
+
+    case "positionOption":
+      update(() => {
+        positionOption.value = positionOptionFilter.value.filter(
+          (v: DataOption) => v.name!.indexOf(val) > -1
+        );
+      });
+      break;
+    case "testOption":
+      update(() => {
+        testOption.value = testOptionFilter.value.filter(
+          (v: DataOption) => v.name!.indexOf(val) > -1
+        );
+      });
+      break;
+    default:
+      break;
+  }
+};
+
+const submit = async () => {
+  next();
+  //   await myForm.value!.validate().then((result: boolean) => {
+  //     if (result) {
+  //       next();
+  //     }
+  //   });
+};
+
+/**
+ * class จัดรูปแบบแสดงระหว่างข้อมูลที่แก้ไขหรือแสดงเฉยๆ
+ * @param val ข้อมูล input สำหรับแก้ไขหรือไม่
+ */
+const getClass = (val: boolean) => {
+  return {
+    "full-width inputgreen cursor-pointer": val,
+    "full-width cursor-pointer": !val,
+  };
+};
+</script>
+<style>
+.q-field--with-bottom {
+  padding-bottom: 0px;
+}
+</style>

src/modules/05_placement/components/RepatriationOrder/step02.vue

@@ -0,0 +1,684 @@
+<template>
+  <div>
+    <div class="q-py-md q-pl-md" style="height: 68vh; overflow-y: scroll">
+      <div class="col-12 row q-py-sm items-center">
+        <q-btn flat round color="primary" @click="clickAdd" icon="mdi-plus">
+          <q-tooltip>เพิ่มข้อมูล</q-tooltip>
+        </q-btn>
+        <q-space />
+        <div class="items-center" style="display: flex">
+          <!-- ค้นหาข้อความใน table -->
+          <q-input
+            standout
+            dense
+            v-model="filter"
+            ref="filterRef"
+            outlined
+            debounce="300"
+            placeholder="ค้นหา"
+            style="max-width: 200px"
+            class="q-ml-sm"
+          >
+            <template v-slot:append>
+              <q-icon v-if="filter == ''" name="search" />
+              <q-icon
+                v-if="filter !== ''"
+                name="clear"
+                class="cursor-pointer"
+                @click="resetFilter"
+              />
+            </template>
+          </q-input>
+          <!-- แสดงคอลัมน์ใน table -->
+          <q-select
+            v-model="visibleColumns"
+            :display-value="$q.lang.table.columns"
+            multiple
+            outlined
+            dense
+            :options="columns"
+            options-dense
+            option-value="name"
+            map-options
+            emit-value
+            style="min-width: 150px"
+            class="gt-xs q-ml-sm"
+          />
+        </div>
+      </div>
+      <d-table
+        :rows="rows"
+        :columns="columns"
+        :visible-columns="visibleColumns"
+        :filter="filter"
+        row-key="name"
+      >
+        <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-th auto-width />
+          </q-tr>
+        </template>
+        <template v-slot:body="props">
+          <q-tr :props="props" class="cursor-pointer">
+            <q-td key="no" :props="props">
+              {{ props.rowIndex + 1 }}
+            </q-td>
+            <q-td key="idcard" :props="props">
+              {{ props.row.idcard }}
+            </q-td>
+            <q-td key="name" :props="props">
+              {{ props.row.name }}
+            </q-td>
+            <q-td key="position" :props="props">
+              {{ props.row.position }}
+            </q-td>
+            <q-td key="agency" :props="props">
+              {{ props.row.agency }}
+            </q-td>
+            <q-td key="send" :props="props">
+              <q-select
+                :class="getClass(true)"
+                hide-bottom-space
+                multiple
+                :outlined="true"
+                dense
+                lazy-rules
+                v-model="props.row.mutiselect"
+                :rules="[(val:any) => !!val || `${'กรุณาเลือกช่องทางการส่งสำเนา'}`,(val:any) => val.length > 0 || `${'กรุณาเลือกช่องทางการส่งสำเนา'}`]"
+                :label="`${'เลือกช่องทางการส่งสำเนา'}`"
+                emit-value
+                map-options
+                option-label="name"
+                :options="optionSelect"
+                option-value="id"
+                input-debounce="0"
+                color="primary"
+              >
+                <template v-slot:no-option>
+                  <q-item>
+                    <q-item-section class="text-black">
+                      ไม่พบข้อมูลที่ค้นหา
+                    </q-item-section>
+                  </q-item>
+                </template>
+              </q-select>
+            </q-td>
+            <q-td auto-width>
+              <q-btn
+                dense
+                size="12px"
+                flat
+                round
+                color="red"
+                @click="clickDelete(props.row.id)"
+                icon="mdi-delete"
+              >
+                <q-tooltip>ลบข้อมูล</q-tooltip>
+              </q-btn>
+            </q-td>
+          </q-tr>
+        </template>
+      </d-table>
+    </div>
+    <q-separator />
+    <div class="flex justify-end q-pa-sm q-gutter-sm">
+      <q-btn
+        dense
+        outline
+        color="primary"
+        icon="chevron_left"
+        @click="previous"
+        class="q-pr-md"
+        label="เลือกรายชื่อ"
+      >
+      </q-btn>
+      <q-btn
+        dense
+        unelevated
+        label="บันทึก"
+        color="public"
+        @click="next"
+        class="q-px-md"
+        ><!-- icon="mdi-content-save-outline"
+        <q-tooltip>บันทึก</q-tooltip> -->
+      </q-btn>
+      <!-- <q-btn flat round color="primary" icon="chevron_right" @click="next">
+        <q-tooltip>ต่อไป</q-tooltip>
+      </q-btn> -->
+    </div>
+  </div>
+
+  <q-dialog v-model="modal" persistent full-width>
+    <q-card>
+      <q-form ref="myForm">
+        <DialogHeader tittle="เลือกรายชื่อตามหน่วยงาน" :close="clickClose" />
+        <q-separator />
+        <q-card-section class="q-pa-sm bg-grey-1">
+          <div class="row col-12 q-col-gutter-sm">
+            <div class="col-xs-12 col-sm-5 row">
+              <q-card flat bordered class="fit q-pa-sm">
+                <q-scroll-area visible style="height: 70vh">
+                  <q-input
+                    outlined
+                    dense
+                    v-model="search"
+                    placeholder="ค้นหา"
+                    class="q-mb-sm"
+                  >
+                    <template v-slot:append>
+                      <q-icon name="mdi-magnify" />
+                    </template>
+                  </q-input>
+                  <q-tree
+                    :nodes="nodesTree"
+                    dense
+                    node-key="id"
+                    v-model:selected="selected"
+                    v-model:expanded="expanded"
+                    no-selection-unset
+                    selected-color="primary"
+                    @update:selected="onSelected"
+                    default-expand-all
+                  />
+                </q-scroll-area>
+              </q-card>
+            </div>
+            <div class="col-xs-12 col-sm-7">
+              <div class="col-12 row q-py-sm items-center">
+                <q-space />
+                <div class="items-center" style="display: flex">
+                  <q-input
+                    standout
+                    dense
+                    v-model="filterModal"
+                    ref="filterRef"
+                    outlined
+                    debounce="300"
+                    placeholder="ค้นหา"
+                    style="max-width: 200px"
+                    class="q-ml-sm"
+                  >
+                    <template v-slot:append>
+                      <q-icon v-if="filterModal == ''" name="search" />
+                      <q-icon
+                        v-if="filterModal !== ''"
+                        name="clear"
+                        class="cursor-pointer"
+                        @click="resetFilter"
+                      />
+                    </template>
+                  </q-input>
+
+                  <q-select
+                    v-model="visibleColumnsModal"
+                    :display-value="$q.lang.table.columns"
+                    multiple
+                    outlined
+                    dense
+                    :options="columnsModal"
+                    options-dense
+                    option-value="name"
+                    map-options
+                    emit-value
+                    style="min-width: 150px"
+                    class="gt-xs q-ml-sm"
+                  />
+                </div>
+              </div>
+              <d-table
+                :rows="rowsModal"
+                :columns="columnsModal"
+                :visible-columns="visibleColumnsModal"
+                :filter="filterModal"
+                row-key="name"
+                selection="multiple"
+                v-model:selected="selectedModal"
+              >
+                <template v-slot:header-selection="scope">
+                  <q-checkbox
+                    keep-color
+                    color="primary"
+                    dense
+                    v-model="scope.selected"
+                  />
+                </template>
+
+                <template v-slot:body-selection="scope">
+                  <!-- <q-checkbox
+                    keep-color
+                    color="primary"
+                    dense
+                    :model-value="scope.selected"
+                    @update:model-value="
+                      (val, evt) => {
+                        Object.getOwnPropertyDescriptor(scope, 'selected').set(
+                          val,
+                          evt
+                        );
+                      }
+                    "
+                  /> -->
+                  <q-checkbox
+                    keep-color
+                    color="primary"
+                    dense
+                    v-model="scope.selected"
+                  />
+                </template>
+
+                <template v-slot:body-cell="props">
+                  <q-td :props="props">
+                    <div v-if="props.col.name == 'no'">
+                      {{ props.rowIndex + 1 }}
+                    </div>
+
+                    <div v-else>
+                      {{ props.value }}
+                    </div>
+                  </q-td>
+                </template>
+              </d-table>
+            </div>
+          </div>
+        </q-card-section>
+        <q-separator />
+        <q-card-actions align="right">
+          <q-btn
+            flat
+            round
+            color="public"
+            icon="mdi-content-save-outline"
+            @click="clickClose"
+          >
+            <q-tooltip>บันทึก</q-tooltip>
+          </q-btn>
+        </q-card-actions>
+      </q-form>
+    </q-card>
+  </q-dialog>
+</template>
+<script setup lang="ts">
+import { ref, onMounted } from "vue";
+import { useQuasar } from "quasar";
+import { useCounterMixin } from "@/stores/mixin";
+import DialogHeader from "@/modules/04_registry/components/DialogHeader.vue";
+import type { QInput, QForm } from "quasar";
+import type { treeTab } from "@/modules/05_placement/interface/index/Main";
+import http from "@/plugins/http";
+import config from "@/app.config";
+import type { QTableProps } from "quasar";
+
+const props = defineProps({
+  next: {
+    type: Function,
+    default: () => console.log("not function"),
+  },
+  previous: {
+    type: Function,
+    default: () => console.log("not function"),
+  },
+});
+
+const next = () => props.next();
+const previous = () => props.previous();
+
+const $q = useQuasar();
+const mixin = useCounterMixin(); //เรียกฟังก์ชันกลาง
+const { dialogMessage, messageError, showLoader, hideLoader } = mixin;
+
+const myForm = ref<QForm>();
+const filterRef = ref<QInput>();
+const filter = ref<string>("");
+const mutiselect = ref([]);
+const modal = ref<boolean>(false);
+const search = ref<string>("");
+const expanded = ref<string[]>([]);
+const selected = ref<string>("");
+const nodesTree = ref<treeTab[]>([]);
+const send = ref<String[]>([]);
+const selectedModal = ref([]);
+const test = ref([]);
+const filterModal = ref<string>("");
+const visibleColumnsModal = ref<String[]>(["no", "idcard", "name"]);
+const columnsModal = ref<QTableProps["columns"]>([
+  { name: "no", align: "left", label: "ลำดับ", field: "no", sortable: true },
+  {
+    name: "idcard",
+    align: "left",
+    label: "เลขประจำตัวประชาชน",
+    field: "idcard",
+    sortable: true,
+  },
+  {
+    name: "name",
+    align: "left",
+    label: "ชื่อ-สกุล",
+    field: "name",
+    sortable: true,
+  },
+]);
+
+const rowsModal = [
+  {
+    no: "0ac56905-1a74-4606-a120-233340adde95",
+    name: "นางนัทธ์ เหล่าสกุล",
+    idcard: "9158455632145",
+    educate: "",
+  },
+  {
+    no: "0de607a0-b094-4a6d-9e30-979343ab5e53",
+    name: "นางขรรค์ จันทรสมบัติ",
+    idcard: "8558455632126",
+    educate: "",
+  },
+  {
+    no: "93ca7366-2a35-4f94-a331-9c23c9ea78d3",
+    name: "นางโอภาส จรัสวงศ์",
+    idcard: "8158455635425",
+    educate: "",
+  },
+  {
+    no: "d3777c19-2bd0-42df-90ce-c3eeeee55ac6",
+    name: "นางธิญา หงษ์ทอง",
+    idcard: "4558455632145",
+    educate: "",
+  },
+  {
+    no: "1ccead6f-a851-4291-b3ab-a20757ecddbd",
+    name: "นางธนวิทย์ พิกุลเทพ",
+    idcard: "5542455632145",
+    educate: "",
+  },
+  {
+    no: "1ccead6f-a851-4291-b3ab-a20757ecddbd",
+    name: "นางหนึ่ง สตาภิรมย์",
+    idcard: "7448455632145",
+    educate: "",
+  },
+  {
+    no: "1ccead6f-a851-4291-b3ab-a20757ecddbd",
+    name: "นางสัจพร คมคาย",
+    idcard: "1236455632145",
+    educate: "",
+  },
+  {
+    no: "1ccead6f-a851-4291-b3ab-a20757ecddbd",
+    name: "นางตุลยากร ปรีดาศิริกุล",
+    idcard: "1523455632145",
+    educate: "",
+  },
+  {
+    no: "1ccead6f-a851-4291-b3ab-a20757ecddbd",
+    name: "นางบัลลังค์ จิรวาณิชย์",
+    idcard: "1258455632145",
+    educate: "",
+  },
+  {
+    no: "1ccead6f-a851-4291-b3ab-a20757ecddbd",
+    name: "นางคมคาย เรืองรังสรรค์",
+    idcard: "8548455632145",
+    educate: "",
+  },
+  {
+    no: "1ccead6f-a851-4291-b3ab-a20757ecddbd",
+    name: "นางพรทิพา คมคาย",
+    idcard: "6598455632145",
+    educate: "",
+  },
+];
+
+const paginationModal = ref({
+  sortBy: "desc",
+  descending: false,
+  page: 1,
+  rowsPerPage: 10,
+});
+const pagination = ref({
+  sortBy: "desc",
+  descending: false,
+  page: 1,
+  rowsPerPage: 10,
+});
+const optionSelect = ref<any>([
+  { id: 1, name: "อีเมล" },
+  { id: 2, name: "กล่องข้อความ" },
+]);
+
+const visibleColumns = ref<String[]>([
+  "no",
+  "idcard",
+  "name",
+  "position",
+  "agency",
+  "send",
+]);
+const columns = ref<QTableProps["columns"]>([
+  { name: "no", align: "left", label: "ลำดับ", field: "no", sortable: true },
+  {
+    name: "idcard",
+    align: "left",
+    label: "เลขประจำตัวประชาชน",
+    field: "idcard",
+    sortable: true,
+  },
+  {
+    name: "name",
+    align: "left",
+    label: "ชื่อ-สกุล",
+    field: "name",
+    sortable: true,
+  },
+  {
+    name: "position",
+    align: "left",
+    label: "ตำแหน่ง",
+    field: "position",
+    sortable: true,
+  },
+  {
+    name: "agency",
+    align: "left",
+    label: "หน่วยงาน",
+    field: "agency",
+    sortable: true,
+  },
+  {
+    name: "send",
+    align: "left",
+    label: "ช่องทางการส่งสำเนา",
+    field: "send",
+    sortable: true,
+  },
+]);
+
+const rows = ref([
+  {
+    no: "0ac56905-1a74-4606-a120-233340adde95",
+    name: "นางนัทธ์ เหล่าสกุล",
+    idcard: "9158455632145",
+    send: "",
+    position: "ผู้อำนวยการ",
+    agency: "กลุ่มงานช่วยบริหาร",
+    mutiselect: [],
+  },
+  {
+    no: "0de607a0-b094-4a6d-9e30-979343ab5e53",
+    name: "นางขรรค์ จันทรสมบัติ",
+    idcard: "8558455632126",
+    send: "",
+    position: "นักจัดการทั่วไป",
+    agency: "กลุ่มงานช่วยบริหาร",
+    mutiselect: [],
+  },
+  {
+    no: "93ca7366-2a35-4f94-a331-9c23c9ea78d3",
+    name: "นางโอภาส จรัสวงศ์",
+    idcard: "8158455635425",
+    send: "",
+    position: "นักจัดการทั่วไป",
+    agency: "กลุ่มงานช่วยบริหาร",
+    mutiselect: [],
+  },
+  {
+    no: "d3777c19-2bd0-42df-90ce-c3eeeee55ac6",
+    name: "นางธิญา หงษ์ทอง",
+    idcard: "4558455632145",
+    send: "",
+    position: "นักจัดการทั่วไป",
+    agency: "กลุ่มงานช่วยบริหาร",
+    mutiselect: [],
+  },
+  {
+    no: "1ccead6f-a851-4291-b3ab-a20757ecddbd",
+    name: "นางธนวิทย์ พิกุลเทพ",
+    idcard: "5542455632145",
+    send: "",
+    position: "นักจัดการทั่วไป",
+    agency: "กลุ่มงานช่วยบริหาร",
+    mutiselect: [],
+  },
+  {
+    no: "1ccead6f-a851-4291-b3ab-a20757ecddbd",
+    name: "นางหนึ่ง สตาภิรมย์",
+    idcard: "7448455632145",
+    send: "",
+    position: "นิติกร",
+    agency: "กลุ่มงานนิติกร",
+    mutiselect: [],
+  },
+  {
+    no: "1ccead6f-a851-4291-b3ab-a20757ecddbd",
+    name: "นางสัจพร คมคาย",
+    idcard: "1236455632145",
+    send: "",
+    position: "นิติกร",
+    agency: "กลุ่มงานนิติกร",
+    mutiselect: [],
+  },
+  {
+    no: "1ccead6f-a851-4291-b3ab-a20757ecddbd",
+    name: "นางตุลยากร ปรีดาศิริกุล",
+    idcard: "1523455632145",
+    send: "",
+    position: "นิติกร",
+    agency: "กลุ่มงานนิติกร",
+    mutiselect: [],
+  },
+  {
+    no: "1ccead6f-a851-4291-b3ab-a20757ecddbd",
+    name: "นางบัลลังค์ จิรวาณิชย์",
+    idcard: "1258455632145",
+    send: "",
+    position: "นิติกร",
+    agency: "กลุ่มงานนิติกร",
+    mutiselect: [],
+  },
+  {
+    no: "1ccead6f-a851-4291-b3ab-a20757ecddbd",
+    name: "นางคมคาย เรืองรังสรรค์",
+    idcard: "8548455632145",
+    send: "",
+    position: "นิติกร",
+    agency: "กลุ่มงานนิติกร",
+    mutiselect: [],
+  },
+  {
+    no: "1ccead6f-a851-4291-b3ab-a20757ecddbd",
+    name: "นางพรทิพา คมคาย",
+    idcard: "6598455632145",
+    send: "",
+    position: "นิติกร",
+    agency: "กลุ่มงานนิติกร",
+    mutiselect: [],
+  },
+]);
+
+onMounted(async () => {
+  await nodeTree();
+});
+
+const paginationLabel = (start: number, end: number, total: number) => {
+  //   if (props.paging == true)
+  //     return " " + start + " ใน " + end + " จากจำนวน " + total + " รายการ";
+  //   else
+  return start + "-" + end + " ใน " + total;
+};
+
+const resetFilter = () => {
+  // reset ค่าที่ค้นหาเมื่อกดปุ่ม X ในกล่องค้นหา
+  filter.value = "";
+  filterRef.value!.focus();
+};
+
+const getClass = (val: boolean) => {
+  return {
+    "full-width inputgreen cursor-pointer": val,
+    "full-width cursor-pointer": !val,
+  };
+};
+
+const clickClose = async () => {
+  //   if (editRow.value == true) {
+  //   dialogMessage(
+  //     $q,
+  //     "ข้อมูลมีการแก้ไข",
+  //     "ยืนยันที่จะปิดโดยไม่บันทึกใช่หรือไม่?",
+  //     "mdi-help-circle-outline",
+  //     "ตกลง",
+  //     "orange",
+  //     () => (modal.value = false),
+  //     undefined
+  //   );
+  //   } else {
+  modal.value = false;
+  //     next.value = false;
+  //     previous.value = false;
+  //   }
+};
+
+const clickAdd = () => {
+  modal.value = true;
+};
+
+const clickDelete = (id: string) => {
+  dialogMessage(
+    $q,
+    "ยืนยันการลบข้อมูล",
+    "ต้องการลบข้อมูลนี้ใช่หรือไม่?",
+    "mdi-help-circle-outline",
+    "ตกลง",
+    "red",
+    () => deleteData(id),
+    undefined
+  );
+};
+
+const nodeTree = async () => {
+  showLoader();
+  await http
+    .get(config.API.profileOrganizRoot)
+    .then((res: any) => {
+      const data = res.data.result;
+      nodesTree.value = data;
+      if (data.length > 0) {
+        expanded.value = [data[0].id];
+      }
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+};
+
+const onSelected = async (id: string) => {
+  //   await fetchPositionNumber(id);
+};
+
+const deleteData = async (id: string) => {};
+</script>
+<style lang="scss"></style>

src/modules/05_placement/components/RepatriationOrder/step03.vue

@@ -0,0 +1,580 @@
+<template>
+  <div>
+    <div style="min-height: 70vh">
+      <q-splitter
+        v-model="splitterModel"
+        style="height: 70vh"
+        @update:model-value="onchangePage"
+      >
+        <template v-slot:before>
+          <div class="space">
+            <div @click="setTab('main')" :class="getClass(tab == 'main')">
+              <div class="q-pr-sm">คำสั่ง</div>
+              <q-btn
+                size="12px"
+                flat
+                dense
+                icon="mdi-download"
+                :disable="tab !== 'main'"
+                :color="tab !== 'main' ? 'grey' : 'add'"
+              >
+                <q-tooltip>ดาวน์โหลด</q-tooltip>
+                <q-menu>
+                  <q-list style="min-width: 150px">
+                    <q-item clickable v-close-popup>
+                      <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>
+                      <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 @click="setTab('second')" :class="getClass(tab == 'second')">
+              <div class="q-pr-sm">เอกสารแนบท้าย</div>
+              <q-btn
+                size="12px"
+                flat
+                dense
+                :color="tab !== 'second' ? 'grey' : 'add'"
+                icon="mdi-download"
+                :disable="tab !== 'second'"
+              >
+                <q-tooltip>ดาวน์โหลด</q-tooltip>
+                <q-menu>
+                  <q-list style="min-width: 150px">
+                    <q-item clickable v-close-popup>
+                      <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>
+                      <q-item-section avatar
+                        ><q-icon color="green-7" name="mdi-file-excel"
+                      /></q-item-section>
+                      <q-item-section>ไฟล์ .xls</q-item-section>
+                    </q-item>
+                  </q-list>
+                </q-menu>
+              </q-btn>
+            </div>
+            <q-space />
+            <q-btn
+              class="text-dark"
+              flat
+              dense
+              icon="mdi-fullscreen"
+              color="add"
+              @click="dialog = true"
+            />
+          </div>
+          <q-separator style="margin-top: -1px; z-index: 1" />
+          <q-card bordered class="card-pdf q-ma-md q-pa-md">
+            <div class="justify-between items-center align-center q-pb-sm row">
+              <q-btn
+                class="text-dark bg-grey-4"
+                flat
+                dense
+                @click="page = page > 1 ? page - 1 : page"
+              >
+                <q-icon name="mdi-chevron-left" />
+              </q-btn>
+
+              <span class="body-2 grey--text">
+                หน้าที่ {{ page }} จาก {{ numOfPages }}
+              </span>
+
+              <q-btn
+                class="text-dark bg-grey-4"
+                flat
+                dense
+                @click="page = page < numOfPages ? page + 1 : page"
+              >
+                <q-icon name="mdi-chevron-right" />
+              </q-btn>
+            </div>
+            <div class="pdfWidth">
+              <VuePDF ref="vuePDFRef" :pdf="pdfSrc" :page="page" fit-parent />
+              <!-- <VuePdf :key="page" :src="pdfSrc" :page="page" /> -->
+            </div>
+            <div class="justify-between items-center align-center q-pt-sm row">
+              <q-btn
+                class="text-dark bg-grey-4"
+                flat
+                dense
+                @click="page = page > 1 ? page - 1 : page"
+              >
+                <q-icon name="mdi-chevron-left" />
+              </q-btn>
+
+              <span class="body-2 grey--text">
+                หน้าที่ {{ page }} จาก {{ numOfPages }}
+              </span>
+
+              <q-btn
+                class="text-dark bg-grey-4"
+                flat
+                dense
+                @click="page = page < numOfPages ? page + 1 : page"
+              >
+                <q-icon name="mdi-chevron-right" />
+              </q-btn>
+            </div>
+          </q-card>
+        </template>
+
+        <template v-slot:separator>
+          <q-avatar
+            color="primary"
+            text-color="white"
+            size="30px"
+            icon="drag_indicator"
+          />
+        </template>
+
+        <template v-slot:after>
+          <q-form ref="myForm">
+            <div class="q-pa-md q-gutter-y-md">
+              <fieldset class="border q-px-lg q-py-md">
+                <legend class="text-header q-px-sm">อัปโหลดไฟล์</legend>
+                <div class="q-gutter-y-md q-mb-md">
+                  <div>
+                    <label class="text-file">คำสั่ง</label>
+                    <q-file
+                      outlined
+                      dense
+                      v-model="fileOrder"
+                      label="เลือกไฟล์คำสั่ง"
+                      hide-bottom-space
+                      lazy-rules
+                      :rules="[(val) => val || 'กรุณาเลือกไฟล์เอกสารแนบท้าย']"
+                    >
+                      <template v-slot:prepend>
+                        <q-icon name="attach_file" />
+                      </template>
+                    </q-file>
+                  </div>
+                  <div>
+                    <label class="text-file">เอกสารแนบท้าย</label>
+                    <q-file
+                      outlined
+                      dense
+                      v-model="fileTailer"
+                      label="เลือกไฟล์เอกสารแนบท้าย"
+                      hide-bottom-space
+                      lazy-rules
+                      :rules="[(val) => val || 'กรุณาเลือกไฟล์เอกสารแนบท้าย']"
+                    >
+                      <template v-slot:prepend>
+                        <q-icon name="attach_file" />
+                      </template>
+                    </q-file>
+                  </div>
+                </div>
+              </fieldset>
+
+              <fieldset class="border q-px-lg q-py-md">
+                <legend class="text-header q-px-sm">รายละเอียด</legend>
+                <div class="q-gutter-y-md q-mb-md">
+                  <div>
+                    <label class="text-file">เลขที่คำสั่ง</label>
+                    <q-input
+                      :outlined="true"
+                      dense
+                      lazy-rules
+                      :readonly="!true"
+                      :borderless="!true"
+                      v-model="order"
+                      :rules="[(val) => !!val || `${'กรุณากรอกเลขที่คำสั่ง'}`]"
+                      hide-bottom-space
+                      :label="`${'เลขที่คำสั่ง'}`"
+                    />
+                  </div>
+                  <div>
+                    <label class="text-file">ปีที่ออกคำสั่ง</label>
+                    <datepicker
+                      menu-class-name="modalfix"
+                      v-model="years"
+                      :locale="'th'"
+                      autoApply
+                      year-picker
+                      :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
+                          lazy-rules
+                          :model-value="years + 543"
+                          :rules="[
+                            (val) => !!val || `${'กรุณาเลือกปีที่ออกคำสั่ง'}`,
+                          ]"
+                          hide-bottom-space
+                          :label="`${'ปีที่ออกคำสั่ง'}`"
+                        >
+                          <template v-slot:prepend>
+                            <q-icon
+                              name="event"
+                              class="cursor-pointer"
+                              style="color: var(--q-grey)"
+                            >
+                            </q-icon>
+                          </template>
+                        </q-input>
+                      </template>
+                    </datepicker>
+                  </div>
+                  <div>
+                    <label class="text-file">วันที่ลงนาม</label>
+                    <datepicker
+                      menu-class-name="modalfix"
+                      v-model="date"
+                      :locale="'th'"
+                      autoApply
+                      borderless
+                      :enableTimePicker="false"
+                      week-start="0"
+                    >
+                      <template #year="{ year }">
+                        {{ year + 543 }}
+                      </template>
+                      <template #year-overlay-value="{ value }">
+                        {{ parseInt(value + 543) }}
+                      </template>
+                      <template #trigger>
+                        <q-input
+                          outlined
+                          dense
+                          class="full-width datepicker"
+                          hide-bottom-space
+                          :model-value="date != null ? date2Thai(date) : null"
+                          :label="`${'วันที่มีผลออกคำสั่ง'}`"
+                          :rules="[
+                            (val) =>
+                              !!val || `${'กรุณาเลือกวันที่มีผลออกคำสั่ง'}`,
+                          ]"
+                        >
+                          <template v-slot:prepend>
+                            <q-icon
+                              name="event"
+                              class="cursor-pointer"
+                              style="color: var(--q-grey)"
+                            >
+                            </q-icon>
+                          </template>
+                        </q-input>
+                      </template>
+                    </datepicker>
+                  </div>
+                </div>
+              </fieldset>
+              <div class="flex justify-around">
+                <q-btn
+                  unelevated
+                  label="ออกคำสั่ง"
+                  :color="validateForm() ? 'public' : 'grey'"
+                  :disable="!validateForm()"
+                />
+                <q-btn
+                  class="text-dark"
+                  unelevated
+                  label="ส่งไปลงนาม"
+                  color="grey"
+                  disable
+                />
+              </div>
+            </div>
+          </q-form>
+        </template>
+      </q-splitter>
+    </div>
+    <q-separator />
+    <div class="flex justify-end q-pa-sm q-gutter-sm">
+      <q-btn
+        dense
+        outline
+        color="primary"
+        icon="chevron_left"
+        @click="previous"
+        class="q-pr-md"
+        label="เลือกรายชื่อส่งสำเนา"
+      >
+      </q-btn>
+      <q-btn
+        unelevated
+        label="บันทึก"
+        :color="validateForm() ? 'public' : 'grey'"
+        :disable="!validateForm()"
+        @click="save"
+      >
+      </q-btn>
+
+      <!-- <q-btn flat round color="primary" icon="chevron_right" @click="next">
+          <q-tooltip>ต่อไป</q-tooltip>
+        </q-btn> -->
+    </div>
+
+    <q-dialog
+      v-model="dialog"
+      persistent
+      :maximized="true"
+      transition-show="slide-up"
+      transition-hide="slide-down"
+    >
+      <q-card class="bg-white text-white">
+        <!-- <q-bar>
+            <q-space />
+  
+            <q-btn dense flat icon="close" v-close-popup>
+              <q-tooltip>ปิดหน้าต่าง</q-tooltip>
+            </q-btn>
+          </q-bar> -->
+
+        <div class="flex justify-end items-center align-center q-mr-md q-mt-sm">
+          <q-btn
+            icon="close"
+            unelevated
+            round
+            dense
+            style="color: #ff8080; background-color: #ffdede"
+            size="12px"
+            v-close-popup
+          />
+        </div>
+        <q-card-section bordered class="card-pdf q-ma-md q-pa-md">
+          <div class="justify-between items-center align-center q-pb-sm row">
+            <q-btn
+              class="text-dark bg-grey-4"
+              flat
+              dense
+              @click="page = page > 1 ? page - 1 : page"
+            >
+              <q-icon name="mdi-chevron-left" />
+            </q-btn>
+
+            <span class="body-2 grey--text text-black">
+              หน้าที่ {{ page }} จาก {{ numOfPages }}
+            </span>
+
+            <q-btn
+              class="text-dark bg-grey-4"
+              flat
+              dense
+              @click="page = page < numOfPages ? page + 1 : page"
+            >
+              <q-icon name="mdi-chevron-right" />
+            </q-btn>
+          </div>
+          <div class="pdfWidth">
+            <VuePDF
+              ref="vuePDFRef"
+              :pdf="pdfSrc"
+              :page="page"
+              fit-parent
+              :scale="0.1"
+            />
+            <!-- <VuePdf :key="page" :src="pdfSrc" :page="page" /> -->
+          </div>
+          <div class="justify-between items-center align-center q-pt-sm row">
+            <q-btn
+              class="text-dark bg-grey-4"
+              flat
+              dense
+              @click="page = page > 1 ? page - 1 : page"
+            >
+              <q-icon name="mdi-chevron-left" />
+            </q-btn>
+
+            <span class="body-2 grey--text text-black">
+              หน้าที่ {{ page }} จาก {{ numOfPages }}
+            </span>
+
+            <q-btn
+              class="text-dark bg-grey-4"
+              flat
+              dense
+              @click="page = page < numOfPages ? page + 1 : page"
+            >
+              <q-icon name="mdi-chevron-right" />
+            </q-btn>
+          </div>
+        </q-card-section>
+      </q-card>
+    </q-dialog>
+  </div>
+</template>
+<script setup lang="ts">
+import { ref, onMounted, onUnmounted, computed } from "vue";
+import { VuePDF, usePDF } from "@tato30/vue-pdf";
+import type { PDFDocumentLoadingTask } from "pdfjs-dist/types/src/display/api";
+import type { QForm } from "quasar";
+import { useCounterMixin } from "@/stores/mixin";
+
+const mixin = useCounterMixin();
+const { date2Thai } = mixin;
+
+const dialog = ref<boolean>(false);
+
+// onUnmounted(() => {
+//   window.removeEventListener("resize", (e: any) => {
+//     myEventHandler(e);
+//   });
+// });
+
+onMounted(async () => {
+  //   window.addEventListener("resize", (e: any) => {
+  //     myEventHandler(e);
+  //   });
+
+  const pdfData = usePDF("/src/assets/05_modules.pdf");
+
+  setTimeout(() => {
+    pdfSrc.value = pdfData.pdf.value;
+    numOfPages.value = pdfData.pages.value;
+  }, 1000);
+});
+
+// const myEventHandler = (e: any) => {
+//   console.log("e", e.target.innerWidth);
+//   if (vuePDFRef !== null) {
+//     vuePDFRef.value.reload();
+//   }
+// };
+
+const pdfSrc = ref<PDFDocumentLoadingTask | undefined>();
+const numOfPages = ref<number>(0);
+const page = ref<number>(1);
+const vuePDFRef = ref<any>(null);
+
+const myForm = ref<QForm | null>(null);
+
+const props = defineProps({
+  next: {
+    type: Function,
+    default: () => console.log("not function"),
+  },
+  previous: {
+    type: Function,
+    default: () => console.log("not function"),
+  },
+});
+
+const next = () => props.next();
+const previous = () => props.previous();
+
+const splitterModel = ref<number>(70);
+const tab = ref<string>("main");
+const fileOrder = ref<any>(null);
+const fileTailer = ref<any>(null);
+
+const order = ref<string>("");
+const years = ref<number>(new Date().getFullYear());
+const date = ref<Date>(new Date());
+
+const onchangePage = (val: any) => {
+  //   console.log(val);
+  if (vuePDFRef !== null) {
+    vuePDFRef.value.reload();
+  }
+};
+
+const save = () => {
+  if (myForm.value !== null) {
+    myForm.value!.validate().then((success: Boolean) => {
+      if (success) {
+        // yay, models are correct
+      }
+    });
+  }
+};
+
+const validateForm = () => {
+  return (
+    fileOrder.value !== null &&
+    fileOrder.value !== null &&
+    order.value.trim() !== ""
+  );
+};
+
+const getClass = (val: boolean) => {
+  return {
+    "card-header-active q-px-lg q-py-md cursor-pointer": val,
+    "card-header q-px-lg q-py-md cursor-pointer": !val,
+  };
+};
+
+const setTab = (val: string) => {
+  tab.value = val;
+  page.value = 1;
+};
+</script>
+<style lang="scss" scoped>
+.border {
+  border-radius: 10px;
+  border: 1px solid #e9eaec;
+}
+.text-header {
+  color: #34373c;
+  font-size: 1rem;
+  font-weight: 300;
+}
+
+.text-file {
+  padding-top: 5px;
+  color: #34373c;
+  font-weight: 500;
+}
+
+.space {
+  background-color: #e9eaec61;
+  display: flex;
+  z-index: 3;
+}
+
+.card-header {
+  margin-top: 5px;
+  background-color: transparent;
+  padding: 2px !important;
+  border-radius: 10px 10px 0px 0px;
+  width: 200px;
+  display: flex;
+  justify-content: center;
+  font-weight: normal;
+  align-items: center;
+}
+
+.card-header-active {
+  margin-top: 5px;
+  margin-left: -1px;
+  background-color: white;
+  padding: 2px !important;
+  border-radius: 10px 10px 0px 0px;
+  border: 1px solid #e9eaec;
+  width: 200px;
+  display: flex;
+  justify-content: center;
+  border-bottom-style: none;
+  font-weight: 600;
+  align-items: center;
+}
+
+.card-pdf {
+  border-radius: 10px;
+  border: 1px solid #e9eaec;
+  background-color: #e9eaec61;
+  //   height: 60vh;
+}
+</style>

src/modules/05_placement/components/Transfer/transferMain.vue

@@ -0,0 +1,591 @@
+<script setup lang="ts">
+import { ref, computed } from "vue";
+import type { QTableProps } from "quasar";
+import { useQuasar } from "quasar";
+import { useRouter } from "vue-router";
+import DialogFooter from "@/modules/05_placement/components/PersonalList/DialogFooter.vue";
+import DialogHeader from "@/modules/05_placement/components/PersonalList/DialogHeader.vue";
+
+const selected = ref([]);
+const checkSelected = computed(() => {
+  if (selected.value.length === 0) {
+    return true;
+  }
+});
+const clickClose = () => {
+  modal.value = false;
+};
+
+const $q = useQuasar();
+const modal = ref<boolean>(false);
+const popup = () => {
+  modal.value = true;
+};
+const router = useRouter();
+const pagination = ref({
+  sortBy: "desc",
+  descending: false,
+  page: 1,
+  rowsPerPage: 10,
+});
+const paging = ref<boolean>(true);
+const paginationLabel = (start: string, end: string, total: string) => {
+  if (paging.value == true) return " " + start + "-" + end + " ใน " + total;
+  else return start + "-" + end + " ใน " + total;
+};
+const visibleColumns = ref<string[]>([
+  "no",
+  "fullname",
+  "position",
+  "positionLevel",
+  "oc",
+  "agency",
+  "status",
+]);
+const visibleColumns2 = ref<string[]>([
+  "no",
+  "fullname",
+  "position",
+  "positionLevel",
+  "oc",
+  "agency",
+  "status",
+]); //ค้นหา คอลัมน์ คอลัมน์ที่แสดง
+const filterKeyword = ref<string>("");
+const filterKeyword2 = ref<string>("");
+const filterRef = ref<any>(null);
+const resetFilter = () => {
+  filterKeyword.value = "";
+  filterKeyword2.value = "";
+  filterRef.value.focus();
+};
+
+// const nextPage = (id:string) => {
+//   router.push("/retirement/resign/"+id);
+// };
+const rows = ref<any>([
+  {
+    personalId: "08db721d-add6-47b0-8a13-5f45d106e8d1",
+    fullname: "นางสาวอย พชช",
+    position: "นักบริหาร",
+    positionLevel: "ต้น",
+    oc: "สำนักงานคณะกรรมการข้าราชการกรุงเทพมหานคร",
+    agency: "กลุ่มงานกุมารเวชกรรม",
+    status: "รออนุมัติ",
+  },
+  {
+    personalId: "08db721d-adf2-4842-8056-1abb1539356e",
+    fullname: "นางสาววญ สพ",
+    position: "นักจัดการงานทั่วไป",
+    positionLevel: "ปฏิบัติการ",
+    oc: "กลุ่มงานช่วยนักบริหาร",
+    agency: "กลุ่มงานข้อมูลเมือง",
+    status: "รออนุมัติ",
+  },
+  {
+    personalId: "08db721d-ae3d-4b8c-8cf0-b86b5a2ed8bb",
+    fullname: "นางสาววญ สพ",
+    position: "นักจัดการงานทั่วไป",
+    positionLevel: "ปฏิบัติการ",
+    oc: "กลุ่มงานช่วยนักบริหาร",
+    agency: "กลุ่มงานข้อมูลเมือง",
+    status: "รออนุมัติ",
+  },
+  {
+    personalId: "08db721d-afde-4ed4-8bc6-f0ad83e61c4d",
+    fullname: "นางสาววญ สพ",
+    position: "นักจัดการงานทั่วไป",
+    positionLevel: "ปฏิบัติการ",
+    oc: "กลุ่มงานช่วยนักบริหาร",
+    agency: "กลุ่มงานข้อมูลเมือง",
+    status: "รออนุมัติ",
+  },
+  {
+    personalId: "08db721d-b24e-45d7-8a65-3f28ef4948a4",
+    fullname: "นางสาววญ สพ",
+    position: "นักจัดการงานทั่วไป",
+    positionLevel: "ปฏิบัติการ",
+    oc: "กลุ่มงานช่วยนักบริหาร",
+    agency: "กลุ่มงานข้อมูลเมือง",
+    status: "รออนุมัติ",
+  },
+]);
+const rows2 = ref<any>([
+  {
+    personalId: "0a846508-4932-40de-9a9e-5b519492217c",
+    fullname: "นางสาวอย พชช",
+    position: "นักบริหาร",
+    positionLevel: "ต้น",
+    oc: "สำนักงานคณะกรรมการข้าราชการกรุงเทพมหานคร",
+    agency: "กลุ่มงานกุมารเวชกรรม",
+    status: "รออนุมัติ",
+  },
+  {
+    personalId: "08db721d-add6-47b0-8a13-5f45d106e8d1",
+    fullname: "นางสาววญ สพ",
+    position: "นักจัดการงานทั่วไป",
+    positionLevel: "ปฏิบัติการ",
+    oc: "กลุ่มงานช่วยนักบริหาร",
+    agency: "กลุ่มงานข้อมูลเมือง",
+    status: "รออนุมัติ",
+  },
+  {
+    personalId: "08db721d-adf2-4842-8056-1abb1539356e",
+    fullname: "นางสาววญ สพ",
+    position: "นักจัดการงานทั่วไป",
+    positionLevel: "ปฏิบัติการ",
+    oc: "กลุ่มงานช่วยนักบริหาร",
+    agency: "กลุ่มงานข้อมูลเมือง",
+    status: "รออนุมัติ",
+  },
+  {
+    personalId: "08db721d-adff-47b0-8762-41cd5c991001",
+    fullname: "นางสาววญ สพ",
+    position: "นักจัดการงานทั่วไป",
+    positionLevel: "ปฏิบัติการ",
+    oc: "กลุ่มงานช่วยนักบริหาร",
+    agency: "กลุ่มงานข้อมูลเมือง",
+    status: "รออนุมัติ",
+  },
+  {
+    personalId: "08db721d-ae22-424d-8f4a-87ba30cc3ee7",
+    fullname: "นางสาววญ สพ",
+    position: "นักจัดการงานทั่วไป",
+    positionLevel: "ปฏิบัติการ",
+    oc: "กลุ่มงานช่วยนักบริหาร",
+    agency: "กลุ่มงานข้อมูลเมือง",
+    status: "รออนุมัติ",
+  },
+]);
+const columns = ref<QTableProps["columns"]>([
+  {
+    name: "no",
+    align: "left",
+    label: "ลำดับ",
+    sortable: true,
+    field: "no",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "fullname",
+    align: "left",
+    label: "ชื่อ-นามสกุล",
+    sortable: true,
+    field: "fullname",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "position",
+    align: "left",
+    label: "ตำแหน่งในสายงาน",
+    sortable: true,
+    field: "position",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "positionLevel",
+    align: "left",
+    label: "ระดับ",
+    sortable: true,
+    field: "positionLevel",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "oc",
+    align: "left",
+    label: "สังกัด",
+    sortable: true,
+    field: "oc",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "agency",
+    align: "left",
+    label: "หน่วยงานที่ขอโอนไป",
+    sortable: true,
+    field: "agency",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "status",
+    align: "left",
+    label: "สถานะ",
+    sortable: true,
+    field: "status",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+]);
+const columns2 = ref<QTableProps["columns"]>([
+  {
+    name: "no",
+    align: "left",
+    label: "ลำดับ",
+    sortable: true,
+    field: "no",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "fullname",
+    align: "left",
+    label: "ชื่อ-นามสกุล",
+    sortable: true,
+    field: "fullname",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "position",
+    align: "left",
+    label: "ตำแหน่งในสายงาน",
+    sortable: true,
+    field: "position",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "positionLevel",
+    align: "left",
+    label: "ระดับ",
+    sortable: true,
+    field: "positionLevel",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "oc",
+    align: "left",
+    label: "สังกัด",
+    sortable: true,
+    field: "oc",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "agency",
+    align: "left",
+    label: "หน่วยงานที่ขอโอนไป",
+    sortable: true,
+    field: "agency",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "status",
+    align: "left",
+    label: "สถานะ",
+    sortable: true,
+    field: "status",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+]);
+</script>
+<template>
+  <div class="toptitle text-dark col-12 row items-center">รายการขอโอน</div>
+  <q-card flat bordered class="col-12 q-mt-sm">
+    <q-separator />
+    <div class="row q-pa-md">
+      <div class="col-12">
+        <div class="row col-12">
+          <q-btn
+            @click="popup()"
+            size="14px"
+            flat
+            round
+            color="add"
+            icon="mdi-account-arrow-right"
+          >
+            <q-tooltip>ส่งไปออกคำสั่งโอนออก</q-tooltip>
+          </q-btn>
+
+          <q-space />
+          <q-input
+            class="col-xs-12 col-sm-3 col-md-2"
+            standout
+            dense
+            v-model="filterKeyword"
+            ref="filterRef"
+            outlined
+            debounce="300"
+            placeholder="ค้นหา"
+          >
+            <template v-slot:append>
+              <q-icon v-if="filterKeyword == ''" name="search" />
+              <q-icon
+                v-if="filterKeyword !== ''"
+                name="clear"
+                class="cursor-pointer"
+                @click="resetFilter"
+              />
+            </template>
+          </q-input>
+
+          <q-select
+            v-model="visibleColumns"
+            multiple
+            outlined
+            dense
+            options-dense
+            :display-value="$q.lang.table.columns"
+            emit-value
+            map-options
+            :options="columns"
+            option-value="name"
+            options-cover
+            style="min-width: 150px"
+            class="col-xs-12 col-sm-3 col-md-2 q-ml-sm"
+          />
+        </div>
+
+        <div class="col-12 q-pt-sm">
+          <q-table
+            ref="table"
+            :columns="columns"
+            :rows="rows"
+            :filter="filterKeyword"
+            row-key="fullname"
+            flat
+            bordered
+            :paging="true"
+            dense
+            class="custom-header-table"
+            :visible-columns="visibleColumns"
+            :pagination-label="paginationLabel"
+            v-model:pagination="pagination"
+          >
+            <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-slot:body="props">
+              <q-tr
+                :props="props"
+                class="cursor-pointer"
+                @click="router.push(`/transfer/${props.row.personalId}`)"
+              >
+                <q-td key="no" :props="props">
+                  {{ props.rowIndex + 1 }}
+                </q-td>
+                <q-td key="fullname" :props="props">
+                  {{ props.row.fullname }}
+                </q-td>
+                <q-td key="position" :props="props">
+                  {{ props.row.position }}
+                </q-td>
+                <q-td key="positionLevel" :props="props">
+                  {{ props.row.positionLevel }}
+                </q-td>
+                <q-td key="oc" :props="props">
+                  {{ props.row.oc }}
+                </q-td>
+                <q-td key="agency" :props="props">
+                  {{ props.row.agency }}
+                </q-td>
+                <q-td key="status" :props="props">
+                  {{ props.row.status }}
+                </q-td>
+              </q-tr>
+            </template>
+            <template v-slot:pagination="scope">
+              <q-pagination
+                v-model="pagination.page"
+                active-color="primary"
+                color="primary"
+                :max="scope.pagesNumber"
+                :max-pages="5"
+                size="sm"
+                boundary-links
+                direction-links
+              ></q-pagination>
+            </template>
+          </q-table>
+        </div>
+      </div>
+    </div>
+  </q-card>
+
+  <q-dialog v-model="modal">
+    <q-card style="width: 1200px; max-width: 80vw">
+      <DialogHeader title="ส่งไปออกคำสั่งโอนออก" :close="clickClose" />
+      <q-separator />
+      <q-card-section class="q-pt-none">
+        <div class="row justify-end">
+          <div class="col-5">
+            <q-toolbar style="padding: 0">
+              <q-input
+                borderless
+                outlined
+                dense
+                debounce="300"
+                v-model="filterKeyword2"
+                placeholder="ค้นหา"
+                style="width: 850px; max-width: auto"
+              >
+              <template v-slot:append>
+              <q-icon v-if="filterKeyword2 == ''" name="search" />
+              <q-icon
+                v-if="filterKeyword2 !== ''"
+                name="clear"
+                class="cursor-pointer"
+                @click="resetFilter"
+              />
+            </template>
+              </q-input>
+              <q-select
+                v-model="visibleColumns2"
+                multiple
+                outlined
+                dense
+                options-dense
+                :display-value="$q.lang.table.columns"
+                emit-value
+                map-options
+                :options="columns2"
+                option-value="name"
+                options-cover
+                style="min-width: 150px"
+                class="gt-xs q-ml-sm"
+              />
+            </q-toolbar>
+          </div>
+        </div>
+
+        <q-table
+          ref="tableRef"
+          :columns="columns2"
+          :rows="rows2"
+          :filter="filterKeyword2"
+          row-key="personalId"
+          flat
+          bordered
+          :paging="true"
+          dense
+          class="custom-header-table"
+          :visible-columns="visibleColumns2"
+          :pagination-label="paginationLabel"
+          selection="multiple"
+          v-model:pagination="pagination"
+          v-model:selected="selected"
+
+        >
+
+        <template v-slot:header-selection="scope">
+            <q-checkbox
+              keep-color
+              color="primary"
+              dense
+              v-model="scope.selected"
+            />
+          </template>
+          <!-- <template v-slot:body-selection="scope">
+            <q-checkbox
+              keep-color
+              color="primary"
+              dense
+              v-model="scope.selected"
+            />
+          </template> -->
+          <template v-slot:body="props">
+            <q-tr
+              :props="props"
+              class="cursor-pointer"
+            >
+              <q-td>
+                <q-checkbox
+                  keep-color
+                  color="primary"
+                  dense
+                  v-model="props.selected"
+                />
+              </q-td>
+              <q-td key="no" :props="props">
+                {{ props.rowIndex + 1 }}
+              </q-td>
+              <q-td key="fullname" :props="props">
+                {{ props.row.fullname }}
+              </q-td>
+              <q-td key="position" :props="props">
+                {{ props.row.position }}
+              </q-td>
+              <q-td key="positionLevel" :props="props">
+                {{ props.row.positionLevel }}
+              </q-td>
+              <q-td key="oc" :props="props">
+                {{ props.row.oc }}
+              </q-td>
+              <q-td key="agency" :props="props">
+                {{ props.row.agency }}
+              </q-td>
+              <q-td key="status" :props="props">
+                {{ props.row.status }}
+              </q-td>
+            </q-tr>
+          </template>
+          <template v-slot:pagination="scope">
+            <q-pagination
+              v-model="pagination.page"
+              color="primary"
+              :max="scope.pagesNumber"
+              :max-pages="5"
+              size="sm"
+              boundary-links
+              direction-links
+            ></q-pagination>
+          </template>
+        </q-table>
+      </q-card-section>
+
+      <q-card-actions align="right" class="bg-white text-teal">
+        <q-btn
+          label="บันทึก"
+          @click=""
+          :disable="checkSelected"
+          color="public"
+        />
+      </q-card-actions>
+    </q-card>
+  </q-dialog>
+</template>
+<style scoped lang="scss">
+.custom-header-table {
+  max-height: 64vh;
+
+  .q-table tr:nth-child(odd) td {
+    background: white;
+  }
+
+  .q-table tr:nth-child(even) td {
+    background: #f8f8f8;
+  }
+
+  .q-table thead tr {
+    background: #ecebeb;
+  }
+
+  .q-table thead tr th {
+    position: sticky;
+    z-index: 1;
+  }
+
+  /* this will be the loading indicator */
+  .q-table thead tr:last-child th {
+    /* height of all previous header rows */
+    top: 48px;
+  }
+
+  .q-table thead tr:first-child th {
+    top: 0;
+  }
+}
+</style>

src/modules/05_placement/components/Transfer/transferRegistry.vue

@@ -0,0 +1,230 @@
+<template>
+  <div class="toptitle text-dark 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)"
+    />
+    รายละเอียดการขอโอนของ {{ name }}
+  </div>
+  <q-card bordered class="row col-12 text-dark">
+    <div class="bg-grey-1 q-pa-sm col-12 row items-center text-primary">
+      <div class="q-pl-sm text-weight-bold text-subtitle2">{{ name }}</div>
+      <q-space />
+      <q-btn
+        outline
+        color="blue"
+        dense
+        icon-right="mdi-open-in-new"
+        class="q-px-sm"
+        label="ดูข้อมูลทะเบียนประวัติ"
+        @click="router.push(`/registry/${personId}`)"
+      />
+    </div>
+    <div class="col-12"><q-separator /></div>
+    <div class="row col-12 q-pa-md">
+      <div class="col-12 row bg-white q-col-gutter-md">
+        <div class="col-xs-3 col-sm-2 col-md-1 row">
+          <q-img src="@/assets/avatar_user.jpg" />
+        </div>
+        <div class="col-xs-6 col-sm-3 row items-center">
+          <div class="col-12 q-pl-md">
+            <div class="col-12 text-top">ตำแหน่งในสายงาน</div>
+            <div class="col-12 text-detail">{{ position }}</div>
+          </div>
+        </div>
+        <div class="col-xs-6 col-sm-3 row items-center">
+          <div class="col-12">
+            <div class="col-12 text-top">ระดับ</div>
+            <div class="col-12 text-detail">{{ level }}</div>
+          </div>
+        </div>
+        <div class="col-xs-6 col-sm-3 row items-center">
+          <div class="col-12">
+            <div class="col-12 text-top">สังกัด</div>
+            <div class="col-12 text-detail">{{ institution }}</div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </q-card>
+
+  <q-card bordered class="row col-12 text-dark q-mt-sm">
+    <div class="bg-grey-1 q-pa-sm col-12 row items-center text-primary">
+      <div class="q-pl-sm text-weight-bold text-dark">ข้อมูลการขอโอน</div>
+      <q-space />
+      <q-btn
+        outline
+        color="primary"
+        dense
+        icon-right="arrow_forward"
+        class="q-px-sm"
+        label="ส่งคำร้องไปยัง สกจ."
+      />
+    </div>
+    <div class="col-12"><q-separator /></div>
+    <div class="row col-12 q-pa-md">
+      <div class="col-12 row bg-white q-col-gutter-md">
+        <div class="col-xs-6 col-sm-3 row items-center">
+          <div class="col-12">
+            <div class="col-12 text-top">หน่วยงานที่ขอโอนไป</div>
+            <div class="col-12 text-detail">{{ organization }}</div>
+          </div>
+        </div>
+        <div class="col-xs-6 col-sm-3 row items-center">
+          <div class="col-12">
+            <div class="col-12 text-top">เหตุผลที่ลาออกจากราชการ</div>
+            <div class="col-12 text-detail">{{ reason }}</div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </q-card>
+
+  <q-card bordered class="row col-12 text-dark q-mt-sm">
+    <div class="bg-grey-1 q-pa-sm col-12 row items-center text-primary">
+      <div class="q-pl-sm text-weight-bold text-dark">เอกสารเพิ่มเติม</div>
+    </div>
+    <div class="col-12"><q-separator /></div>
+    <div class="col-12">
+      <q-table
+        flat
+        bordered
+        :rows="rows"
+        :columns="columns"
+        row-key="name"
+        hide-header
+        hide-bottom
+      >
+        <template v-slot:body="props">
+          <q-tr :props="props" class="cursor-pointer">
+            <q-td key="no" :props="props">
+              {{ props.rowIndex + 1 }}
+            </q-td>
+            <q-td key="noteTitle" :props="props">
+              {{ props.row.noteTitle }}
+            </q-td>
+            <q-td key="btnMicrosoft" :props="props">
+              <q-btn flat
+								dense
+								round
+                color="red" 
+                icon="picture_as_pdf">
+                <q-tooltip>ไฟล์ PDF</q-tooltip>
+              </q-btn>
+              <q-btn flat
+								dense
+								round
+                color="blue" 
+                icon="mdi-file-word">
+                <q-tooltip>ไฟล์ WORD</q-tooltip>
+              </q-btn>
+            </q-td>
+          </q-tr>
+        </template>
+      </q-table>
+    </div>
+  </q-card>
+</template>
+<script setup lang="ts">
+import { useRouter } from "vue-router";
+import { ref } from "vue";
+import { useRoute } from "vue-router";
+
+const router = useRouter();
+const name = ref<string>("นายสมคิด ยอดใจ");
+const position = ref<string>("นักจัดการงานทั่วไป");
+const level = ref<string>("ชำนาญการพิเศษ");
+const institution = ref<string>("ฝ่ายบริหารงานทั่วไป");
+const status = ref<string>("อยู่ระหว่างการทดลองงาน");
+const organization = ref<string>("ก.ก.");
+const reason = ref<string>("เพราะxxx");
+const route = useRoute();
+const personId = route.params.id;
+const rows = [
+  {
+    noteTitle: "ชื่อเอกสาร",
+  },
+  {
+    noteTitle: "ชื่อเอกสาร",
+  },
+];
+const columns = [
+  {
+    name: "no",
+    align: "left",
+    label: "ลำดับ",
+    sortable: true,
+    field: "no",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "noteTitle",
+    align: "left",
+    label: "ชื่อ-นามสกุล",
+    sortable: true,
+    field: "noteTitle",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "btnMicrosoft",
+    align: "right",
+    label: "ปุ่ม",
+    sortable: true,
+    field: "btnMicrosoft",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+];
+</script>
+<style lang="scss" scope>
+.q-img {
+  border-radius: 5px;
+  height: 70px;
+}
+.text-top {
+  color: gray;
+  font-weight: 400;
+  padding-bottom: 3px;
+}
+.text-detail {
+  font-weight: 500;
+}
+.custom-header-table {
+  max-height: 64vh;
+
+  .q-table tr:nth-child(odd) td {
+    background: white;
+  }
+
+  .q-table tr:nth-child(even) td {
+    background: #f8f8f8;
+  }
+
+  .q-table thead tr {
+    background: #ecebeb;
+  }
+
+  .q-table thead tr th {
+    position: sticky;
+    z-index: 1;
+  }
+
+  /* this will be the loading indicator */
+  .q-table thead tr:last-child th {
+    /* height of all previous header rows */
+    top: 48px;
+  }
+
+  .q-table thead tr:first-child th {
+    top: 0;
+  }
+}
+</style>

src/modules/05_placement/components/probation/FormAssign.vue

@@ -10,13 +10,17 @@
         color="primary"
         class="q-mr-sm"
         @click="router.go(-1)"
+        v-if="routeName == 'probationWorkAdd'"
       />
       <div v-if="routeName == 'probationWorkAdd'">
         เพิ่มแบบมอบหมายงานการทดลองปฏิบัติหน้าที่ราชการ
       </div>
       <div v-else>แบบมอบหมายงานการทดลองปฏิบัติหน้าที่ราชการ</div>
     </div>
-    <q-card bordered class="col-12 text-dark">
+    <q-card
+      :bordered="routeName == 'probationWorkAdd'"
+      class="col-12 text-dark"
+    >
       <div class="row col-12 q-pa-lg">
         <div class="row col-12 q-gutter-lg">
           <div class="col-12 row">
@@ -45,6 +49,73 @@
                   label="ตำแหน่ง"
                 />
               </div>
+              <div class="col-12 text-top0 items-center">
+                ระยะเวลาการทดลองปฎิบัติหน้าที่ราชการ
+              </div>
+              <div class="col-xs-12 col-sm-6">
+                <datepicker
+              menu-class-name="modalfix"
+              v-model="dateExam"
+              :locale="'th'"
+              autoApply
+              borderless
+              :enableTimePicker="false"
+              week-start="0"
+            >
+              <template #year="{ year }">
+                {{ year + 543 }}
+              </template>
+              <template #year-overlay-value="{ value }">
+                {{ parseInt(value + 543) }}
+              </template>
+              <template #trigger>
+                <q-input
+                 
+                  dense
+                  class="full-width datepicker q-mb-md"
+                  :model-value="dateExam != null ? date2Thai(dateExam) : null"
+                  :label="`${'ตั้งเเต่วันที่'}`"
+                  clearable
+                  @clear="clearDateExam"
+                >
+
+                </q-input>
+              </template>
+            </datepicker>
+              </div>
+              
+              <div class="col-xs-12 col-sm-6">
+                <datepicker
+              menu-class-name="modalfix"
+              v-model="dateExam2"
+              :locale="'th'"
+              autoApply
+              borderless
+              :enableTimePicker="false"
+              week-start="0"
+            >
+              <template #year="{ year }">
+                {{ year + 543 }}
+              </template>
+              <template #year-overlay-value="{ value }">
+                {{ parseInt(value + 543) }}
+              </template>
+              <template #trigger>
+                <q-input
+                 
+                  dense
+                  class="full-width datepicker q-mb-md"
+                  :model-value="dateExam2 != null ? date2Thai(dateExam2) : null"
+                  :label="`${'ถึงวันที่'}`"
+                  clearable
+                  @clear="clearDateExam2"
+                >
+
+                </q-input>
+              </template>
+            </datepicker>
+              </div>
+              
             </div>
           </div>
           <div class="col-12">
@@ -54,7 +125,7 @@
             <div class="col-12 text-top0 items-center">
               <q-avatar class="bg-grey-2 q-mr-sm" size="28px">2</q-avatar>
               ผู้ดูแลการทดลองปฏิบัติหน้าที่ราชการ (อาจมีได้มากกว่า 1 คน)
-              <q-btn
+              <!-- <q-btn
                 v-if="routeName == 'probationWorkAdd'"
                 round
                 color="primary"
@@ -63,41 +134,36 @@
                 flat
                 class="q-ml-sm"
                 @click="addCaretaker"
-              />
-              <q-btn
-                v-if="caretakerCount > 1 && routeName == 'probationWorkAdd'"
-                round
-                color="red"
-                dense
-                icon="undo"
-                flat
-                class="q-ml-sm"
-                @click="resetCaretakers"
-                ><q-tooltip>รีเช็ต</q-tooltip></q-btn
-              >
-              <q-chip color="primary" text-color="white" icon="flag_circle">
-                {{ caretakerCount }}
-              </q-chip>
+              /> -->
             </div>
 
             <div class="col-12 row q-col-gutter-md">
               <q-select
-                v-for="item in caretakerCount"
-                :key="item"
-                :options="getOptions(item)"
+                :options="OPcaretaker"
                 class="col-xs-12 col-sm-6"
                 :readonly="routeName != 'probationWorkAdd'"
                 dense
                 borderless
                 :outlined="routeName == 'probationWorkAdd'"
-                v-model="caretakers[item - 1]"
-                :label="`ผู้ดูแลคนที่ ${item}`"
+                v-model="caretaker1"
+                :label="`ผู้ดูแลคนที่ 1`"
+              />
+              <q-select
+                :options="OPcaretaker"
+                class="col-xs-12 col-sm-6"
+                :readonly="routeName != 'probationWorkAdd'"
+                dense
+                borderless
+                :outlined="routeName == 'probationWorkAdd'"
+                v-model="caretaker2"
+                :label="`ผู้ดูแลคนที่ 2`"
               />
             </div>
           </div>
           <div class="col-12">
             <q-separator size="3px" color="grey-2" />
           </div>
+          <!-- 3.1 -->
           <div class="col-12 row">
             <div class="col-12 text-top0 items-center">
               <q-avatar class="bg-grey-2 q-mr-sm" size="28px">3</q-avatar>
@@ -116,24 +182,11 @@
                 class="q-ml-sm"
                 @click="addActivity"
               />
-              <q-btn
-                v-if="activityCount > 2 && routeName == 'probationWorkAdd'"
-                round
-                color="red"
-                dense
-                icon="undo"
-                flat
-                class="q-ml-sm"
-                @click="resetActivity"
-                ><q-tooltip>รีเช็ต</q-tooltip></q-btn
-              >
-              <q-chip color="primary" text-color="white" icon="flag_circle">
-                {{ activityCount }}
-              </q-chip>
             </div>
-            <div class="col-12 row q-gutter-md">
+            <div class="col-12 row q-gutter-sm">
               <q-card
-                v-for="item in activityCount"
+                v-for="(item, index) in activityArray"
+                :key="index"
                 flat
                 bordered
                 class="col-12 q-pa-sm bg-grey-1"
@@ -147,11 +200,11 @@
                       :outlined="routeName == 'probationWorkAdd'"
                       class="bg-white"
                       type="textarea"
-                      v-model="activities[item - 1]"
+                      v-model="activities[index]"
                       label="กิจกรรมของงาน/ขั้นตอนการปฏิบัติงาน(ไม่เกิน10บรรทัด )"
                     />
                   </div>
-                  <div class="col-xs-12 col-sm-6">
+                  <div class="col-xs-12 col-sm-5">
                     <q-input
                       :readonly="routeName != 'probationWorkAdd'"
                       dense
@@ -159,14 +212,28 @@
                       :outlined="routeName == 'probationWorkAdd'"
                       class="bg-white"
                       type="textarea"
-                      v-model="goals[item - 1]"
+                      v-model="goals[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)"
+                    />
+                  </div>
                 </div>
               </q-card>
             </div>
           </div>
+          <!-- 3.2 -->
           <div class="col-12 row">
             <div class="col-12 text-top2">
               <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
@@ -187,29 +254,12 @@
                       class="q-ml-sm"
                       @click="addKnowledge"
                     />
-                    <q-btn
-                      v-if="
-                        knowledgeCount > 3 && routeName == 'probationWorkAdd'
-                      "
-                      round
-                      color="red"
-                      dense
-                      icon="undo"
-                      flat
-                      class="q-ml-sm"
-                      @click="resetKnowledge"
-                      ><q-tooltip>รีเช็ต</q-tooltip></q-btn
-                    >
-                    <q-chip
-                      color="primary"
-                      text-color="white"
-                      icon="flag_circle"
-                    >
-                      {{ knowledgeCount }}
-                    </q-chip>
                   </div>
-                  <div class="col-12 row q-col-gutter-sm">
-                    <div v-for="item in knowledgeCount" class="col-12">
+                  <div
+                    v-for="(item, index) in knowledgeArray"
+                    class="col-12 row q-col-gutter-sm"
+                  >
+                    <div class="col-11 q-my-xs">
                       <q-select
                         :options="getOpknowledge(item)"
                         class="bg-white"
@@ -217,12 +267,25 @@
                         dense
                         borderless
                         :outlined="routeName == 'probationWorkAdd'"
-                        v-model="knowledge[item - 1]"
-                        :label="`ความรู้ความสามารถในการปฏิบัติงาน ${item}`"
+                        v-model="knowledge[index]"
+                        :label="`ความรู้ความสามารถในการปฏิบัติงาน ${index + 1}`"
+                      />
+                    </div>
+                    <div
+                      class="col-xs-12 col-sm-1 flex justify-center items-center"
+                    >
+                      <q-btn
+                        v-if="index > 2"
+                        flat
+                        round
+                        color="red"
+                        icon="mdi-trash-can-outline"
+                        @click="deleteknowledge(index)"
                       />
                     </div>
                   </div>
                 </div>
+
                 <div class="col-12 row">
                   <div class="col-12 text-top2 row items-center">
                     ความรู้เรื่องกฎหมายและกฎระเบียบ (ไม่เกิน 20 หัวข้อ)
@@ -251,22 +314,21 @@
                             :disable="routeName != 'probationWorkAdd'"
                           />
                         </div>
-                        <div class="col-2 ">1. รัฐธรรมนูญ</div>
+                        <div class="col-2">1. รัฐธรรมนูญ</div>
                       </div>
 
                       <div class="row q-mt-xs bg-grey-3 q-py-xs">
                         <div class="col-1"></div>
                         <div class="col-2">2.กฎหมายปกครอง</div>
                       </div>
-                      <div class="row bg-grey-2 q-py-xs borderCheck ">
+                      <div class="row bg-grey-2 q-py-xs borderCheck">
                         <div class="col-1"></div>
-                        <div class="col-10  q-pl-md ">2.1 ทำงานได้</div>
+                        <div class="col-10 q-pl-md">2.1 ทำงานได้</div>
                       </div>
                       <div
                         v-for="item in checkList21"
                         :key="item.id"
                         class="row q-py-xs borderCheck border_y"
-						
                       >
                         <div class="col-1 text-center">
                           <q-checkbox
@@ -278,11 +340,13 @@
 
                         <div class="col-9 q-pl-xl">{{ item.text }}</div>
                       </div>
-					  <div class="row bg-grey-2 q-py-xs borderCheck">
+                      <div class="row bg-grey-2 q-py-xs borderCheck">
                         <div class="col-1"></div>
-                        <div class="col-10  q-pl-md">2.2 ด้านการปฏิบัติราชการ</div>
+                        <div class="col-10 q-pl-md">
+                          2.2 ด้านการปฏิบัติราชการ
+                        </div>
                       </div>
-					  <div
+                      <div
                         v-for="item in checkList22"
                         :key="item.id"
                         class="row q-py-xs borderCheck border_y"
@@ -297,11 +361,13 @@
 
                         <div class="col-9 q-pl-xl">{{ item.text }}</div>
                       </div>
-					  <div class="row bg-grey-2 q-py-xs borderCheck">
+                      <div class="row bg-grey-2 q-py-xs borderCheck">
                         <div class="col-1"></div>
-                        <div class="col-10  q-pl-md">2.3 ด้านการบริหารทรัพยากรบุคคล</div>
+                        <div class="col-10 q-pl-md">
+                          2.3 ด้านการบริหารทรัพยากรบุคคล
+                        </div>
                       </div>
-					  <div
+                      <div
                         v-for="item in checkList23"
                         :key="item.id"
                         class="row q-py-xs borderCheck border_y"
@@ -316,11 +382,13 @@
 
                         <div class="col-9 q-pl-xl">{{ item.text }}</div>
                       </div>
-					  <div class="row bg-grey-2 q-py-xs borderCheck">
+                      <div class="row bg-grey-2 q-py-xs borderCheck">
                         <div class="col-1"></div>
-                        <div class="col-10  q-pl-md">2.4 ด้านการบริหารงบประมาณและการคลัง</div>
+                        <div class="col-10 q-pl-md">
+                          2.4 ด้านการบริหารงบประมาณและการคลัง
+                        </div>
                       </div>
-					  <div
+                      <div
                         v-for="item in checkList24"
                         :key="item.id"
                         class="row q-py-xs borderCheck border_y"
@@ -335,15 +403,25 @@
 
                         <div class="col-9 q-pl-xl">{{ item.text }}</div>
                       </div>
-					  <div class="row q-mt-xs bg-grey-3 q-py-xs">
-                        <div class="col-1 text-center">
-                          <q-checkbox
-                            v-model="val3"
+                      <div class="row q-mt-xs bg-grey-3 q-py-xs">
+                        <div class="col-1 text-center"></div>
+                        <div class="col-11">
+                          3. กฎหมายอื่นๆ ที่เกี่ยวข้องกับการปฏิบัติงาน
+                        </div>
+                      </div>
+                      <div class="row border_y borderCheck">
+                        <div class="col-1 text-center"></div>
+                        <div class="q-py-sm col-10" style="min-width: 300px">
+                          <q-input
+                            hide-bottom-space
                             dense
-                            :disable="routeName != 'probationWorkAdd'"
+                            outlined
+                            lazy-rules
+                            v-model="ruleNote"
+                            :label="`${'กรอกกฎหมายอื่นๆ'}`"
+                            type="textarea"
                           />
                         </div>
-                        <div class="col-11">3. กฎหมายอื่นๆ ที่เกี่ยวข้องกับการปฏิบัติงาน</div>
                       </div>
                     </div>
                   </q-card>
@@ -641,25 +719,16 @@
                 icon="mdi-plus"
                 flat
                 class="q-ml-sm"
-				@click="addProductivity"
+                @click="addProductivity"
               />
-			  <q-btn
-                v-if="productivityCount > 1 && routeName == 'probationWorkAdd'"
-                round
-                color="red"
-                dense
-                icon="undo"
-                flat
-                class="q-ml-sm"
-                @click="resetProductivity"
-                ><q-tooltip>รีเช็ต</q-tooltip></q-btn
-              >
-              <q-chip color="primary" text-color="white" icon="flag_circle">
-                {{ productivityCount }}
-              </q-chip>
             </div>
             <div class="col-12 row q-gutter-md">
-              <q-card v-for="item in productivityCount" flat bordered class="col-12 q-pa-sm bg-grey-1">
+              <q-card
+                v-for="(item, index) in productivityCount"
+                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
@@ -669,11 +738,11 @@
                       dense
                       borderless
                       :outlined="routeName == 'probationWorkAdd'"
-                      v-model="Productivitys[item-1]"
+                      v-model="Productivitys[index]"
                       label="ผลผลิตของงานที่คาดหวัง (ไม่เกิน 10 บรรทัด)"
                     />
                   </div>
-                  <div class="col-xs-12 col-sm-6">
+                  <div class="col-xs-12 col-sm-5">
                     <q-input
                       class="bg-white"
                       type="textarea"
@@ -681,10 +750,22 @@
                       dense
                       borderless
                       :outlined="routeName == 'probationWorkAdd'"
-                      v-model="goals1[item-1]"
+                      v-model="goals1[index]"
                       label="ตัวชี้วัดความสําเร็จของงาน (ไม่เกิน 10 บรรทัด)"
                     />
                   </div>
+                  <div
+                    v-if="index > 0"
+                    class="col-xs-12 col-sm-1 flex justify-center items-center"
+                  >
+                    <q-btn
+                      flat
+                      round
+                      color="red"
+                      icon="mdi-trash-can-outline"
+                      @click="deleteProductivitys(index)"
+                    />
+                  </div>
                 </div>
               </q-card>
             </div>
@@ -1073,24 +1154,34 @@
 </template>
 <script setup lang="ts">
 import { useRouter } from "vue-router";
-import { ref } from "vue";
+import { ref, computed } from "vue";
 import { useCounterMixin } from "@/stores/mixin";
 // import type { QForm } from "quasar";
 const val1 = ref(false);
 const val3 = ref(false);
 const router = useRouter();
-
+const test = ref<string>('')
+const ruleNote = ref<string>("");
 const mixin = useCounterMixin();
 const { date2Thai } = mixin;
+const dateExam = ref<Date | null>(null);
+const dateExam2 = ref<Date | null>(null);
+const clearDateExam = () => {
+  dateExam.value = null;
+};
+const clearDateExam2 = () => {
+  dateExam2.value = null;
+};
 
 const routeName = router.currentRoute.value.name;
 
 const name = ref<string>("นายสมคิด ยอดใจ");
 const position = ref<string>("นักจัดการงานทั่วไป");
 
-const caretakerCount = ref<number>(1);
+const caretakerCount = ref<number>(2);
 const caretakerMax = ref<number>(6);
-const caretakers = ref<string[]>(Array(caretakerCount.value).fill(""));
+
+const caretaker1 = ref<string>("");
 const caretaker2 = ref<string>("");
 const OPcaretaker = [
   "นางสาวรัชภรณ์ ภักดี",
@@ -1107,7 +1198,7 @@ const getOptions = (item: number) => {
   return OPcaretaker;
 };
 const resetCaretakers = () => {
-  caretakerCount.value = 1;
+  caretakerCount.value = 2;
   caretakers.value = Array(caretakerCount.value).fill("");
 };
 //-----------------(3.1)-----------//
@@ -1118,6 +1209,16 @@ const goals = ref<string[]>(Array(activityCount.value).fill(""));
 const addActivity = () => {
   activityCount.value++;
 };
+const deleteactivity = (item: number) => {
+  activities.value.splice(item, 1);
+  goals.value.splice(item, 1);
+  if (activityCount.value > 2) {
+    activityCount.value--;
+  }
+};
+const activityArray = computed(() => {
+  return Array(activityCount.value).fill("");
+});
 const resetActivity = () => {
   activityCount.value = 2;
   activities.value = Array(activityCount.value).fill("");
@@ -1128,63 +1229,184 @@ const knowledgeCount = ref<number>(3);
 const knowledge = ref<string[]>(Array(knowledgeCount.value).fill(""));
 const OPknowledge = ["1", "2", "3", "4"];
 const addKnowledge = () => {
-  knowledgeCount.value++;
+  if (knowledgeCount.value < 6) {
+    knowledgeCount.value++;
+  }
 };
+const knowledgeArray = computed(() => {
+  return Array(knowledgeCount.value).fill("");
+});
 const getOpknowledge = (index: number) => {
   return OPknowledge;
 };
-const resetKnowledge = () => {
-  knowledgeCount.value = 3;
-  knowledge.value = Array(knowledgeCount.value).fill("");
+const deleteknowledge = (item: number) => {
+  knowledge.value.splice(item, 1);
+  if (knowledgeCount.value > 3) {
+    knowledgeCount.value--;
+  }
 };
 
 const productivityCount = ref<number>(1);
 const Productivitys = ref<string[]>(Array(productivityCount.value).fill(""));
 const goals1 = ref<string[]>(Array(productivityCount.value).fill(""));
-
+const deleteProductivitys = (item: number) => {
+  Productivitys.value.splice(item, 1);
+  goals1.value.splice(item, 1);
+  if (productivityCount.value > 1) {
+    productivityCount.value--;
+  }
+};
 const addProductivity = () => {
-	productivityCount.value++;
+  productivityCount.value++;
 };
 const resetProductivity = () => {
-	productivityCount.value = 1;
+  productivityCount.value = 1;
   Productivitys.value = Array(productivityCount.value).fill("");
   goals1.value = Array(productivityCount.value).fill("");
 };
 const checkList21 = ref([
-  { id: 1, text: '2.1.1 กฎหมายว่าด้วยระเบียบบริหารราชการกรุงเทพมหานคร', checked: false },
-  { id: 2, text: '2.1.2 กฎหมายว่าด้วยระเบียบบริหารราชการแผ่นดิน', checked: false },
-  { id: 3, text: '2.1.3 กฎหมายว่าด้วยลักษณะปกครองทองที่', checked: false },
-  { id: 4, text: '2.1.4 ระเบียบสำนักนายกรัฐมนตรี ว่าด้วยการรับฟังความคิดเห็นสาธารณะโดยวิธีประชาพิจารณ์ พ.ศ. ๒๕๓๙', checked: false },
-  { id: 5, text: '2.1.5 ระเบียบสำนักนายกรัฐมนตรี ว่าด้วยการสร้างระบบบริหารกิจการบ้านเมืองและสังคมที่ดี พ.ศ. ๒๕๔๒', checked: false },
-  { id: 6, text: '2.1.6 พระราชกฤษฏีกาว่าด้วยหลักเกณฑ์และวิธีการบริหารกิจการบ้านเมืองที่ดี พ.ศ. ๒๕๔๖', checked: false },
+  {
+    id: 1,
+    text: "2.1.1 กฎหมายว่าด้วยระเบียบบริหารราชการกรุงเทพมหานคร",
+    checked: false,
+  },
+  {
+    id: 2,
+    text: "2.1.2 กฎหมายว่าด้วยระเบียบบริหารราชการแผ่นดิน",
+    checked: false,
+  },
+  { id: 3, text: "2.1.3 กฎหมายว่าด้วยลักษณะปกครองทองที่", checked: false },
+  {
+    id: 4,
+    text: "2.1.4 ระเบียบสำนักนายกรัฐมนตรี ว่าด้วยการรับฟังความคิดเห็นสาธารณะโดยวิธีประชาพิจารณ์ พ.ศ. ๒๕๓๙",
+    checked: false,
+  },
+  {
+    id: 5,
+    text: "2.1.5 ระเบียบสำนักนายกรัฐมนตรี ว่าด้วยการสร้างระบบบริหารกิจการบ้านเมืองและสังคมที่ดี พ.ศ. ๒๕๔๒",
+    checked: false,
+  },
+  {
+    id: 6,
+    text: "2.1.6 พระราชกฤษฏีกาว่าด้วยหลักเกณฑ์และวิธีการบริหารกิจการบ้านเมืองที่ดี พ.ศ. ๒๕๔๖",
+    checked: false,
+  },
 ]);
 const checkList22 = ref([
-  { id: 1, text: '2.2.1 ระเบียบกรุงเทพมหานครว่าด้วยวิธีปฏิบัติงานสารบรรณ พ.ศ.๒๕๔๖', checked: false },
-  { id: 2, text: '2.2.2 กฎหมายว่าด้วยวิธีปฏิบัติราชการทางปกครอง', checked: false },
-  { id: 3, text: '2.2.3 กฎหมายว่าด้วยความรับผิดทางละเมิดของเจ้าหน้าที่', checked: false },
-  { id: 4, text: '2.2.4 กฎหมายว่าด้วยการข้อมูลข่าวสารของทางราชการ', checked: false },
-  { id: 5, text: '2.2.5 ระเบียบสำนักนายกรัฐมนตรีว่าด้วยงานสารบรรณ พ.ศ.๒๕๒๖', checked: false },
-  { id: 6, text: '2.2.6 ระเบียบว่าด้วยการรักษาความลับของทางราชการ พ.ศ.๒๕๔๔', checked: false },
+  {
+    id: 1,
+    text: "2.2.1 ระเบียบกรุงเทพมหานครว่าด้วยวิธีปฏิบัติงานสารบรรณ พ.ศ.๒๕๔๖",
+    checked: false,
+  },
+  {
+    id: 2,
+    text: "2.2.2 กฎหมายว่าด้วยวิธีปฏิบัติราชการทางปกครอง",
+    checked: false,
+  },
+  {
+    id: 3,
+    text: "2.2.3 กฎหมายว่าด้วยความรับผิดทางละเมิดของเจ้าหน้าที่",
+    checked: false,
+  },
+  {
+    id: 4,
+    text: "2.2.4 กฎหมายว่าด้วยการข้อมูลข่าวสารของทางราชการ",
+    checked: false,
+  },
+  {
+    id: 5,
+    text: "2.2.5 ระเบียบสำนักนายกรัฐมนตรีว่าด้วยงานสารบรรณ พ.ศ.๒๕๒๖",
+    checked: false,
+  },
+  {
+    id: 6,
+    text: "2.2.6 ระเบียบว่าด้วยการรักษาความลับของทางราชการ พ.ศ.๒๕๔๔",
+    checked: false,
+  },
 ]);
 const checkList23 = ref([
-  { id: 1, text: '2.3.1กฎหมายว่าด้วยระเบียบข้าราชการกรุงเทพมหานครและบุคลากรกรุงเทพมหานคร/กฎ ก.ก./หลักเกณฑ์ วิธีการ/มติ ก.ก. ที่เกี่ยวข้อง', checked: false },
-  { id: 2, text: '2.3.2 กฎหมายว่าด้วยระเบียบข้าราชการพลเรือนและกฎ ก.พ. ที่เกี่ยวข้อง', checked: false },
+  {
+    id: 1,
+    text: "2.3.1กฎหมายว่าด้วยระเบียบข้าราชการกรุงเทพมหานครและบุคลากรกรุงเทพมหานคร/กฎ ก.ก./หลักเกณฑ์ วิธีการ/มติ ก.ก. ที่เกี่ยวข้อง",
+    checked: false,
+  },
+  {
+    id: 2,
+    text: "2.3.2 กฎหมายว่าด้วยระเบียบข้าราชการพลเรือนและกฎ ก.พ. ที่เกี่ยวข้อง",
+    checked: false,
+  },
 ]);
 const checkList24 = ref([
-  { id: 1, text: '2.4.1 ข้อบัญญัติกรุงเทพมหานคร เรื่อง วิธีการงบประมาณ พ.ศ.๒๕๒๙ ซึ่งแก้ไขเพิ่มเติมโดย(ฉบับที่๒)พ.ศ.๒๕๓๓ และ(ฉบับที่๓)พ.ศ.๒๕๓๖', checked: false },
-  { id: 2, text: '2.4.2 ระเบียบกรุงเทพมหานครว่าด้วยการรับเงิน การเบิกจ่ายเงิน การเก็บรักษาเงิน การนำส่งเงินและการตรวจเงิน(ฉบับที่๘) พ.ศ.๒๕๔๔ (ฉบับที่๙)พ.ศ.๒๕๔๘', checked: false },
-  { id: 3, text: '2.4.3 ระเบียบกรุงเทพมหานครว่าด้วยค่าใช้จ่ายในการฝึกอบรบ พ.ศ.๒๕๔๑', checked: false },
-  { id: 4, text: '2.4.4 พระราชบัญญัติวิธีการงบประมาณ พ.ศ.๒๕๐๒', checked: false },
-  { id: 5, text: '2.4.5 ระเบียบคณะกรรมการการตรวจเงินแผ่นดินว่าด้วยวินัยทางงบประมาณและการคลัง พ.ศ.๒๕๔๔', checked: false },
-  { id: 6, text: '2.4.6 กฎหมายว่าด้วยความผิดเกี่ยวกับการเสนอราคาต่อหน่วยของรัฐ', checked: false },
-  { id: 7, text: '2.4.7 พระราชกฤษฎีกาการจ่ายเงินเดือน เงินปี บำเหน็จ บำนาญ และเงินอื่นในลักษณะเดียวกัน พ.ศ.๒๕๓๕', checked: false },
-  { id: 8, text: '2.4.8 พระราชกฤษฎีกาค่าใช้จ่ายในการเดินทางไปราชการ พ.ศ.๒๕๒๖', checked: false },
-  { id: 9, text: '2.4.9 ระเบียบกระทรวงการคลังว่าด้วยการเบิกจ่ายเบี้ยเลี้ยงเดินทาง และค่าเช่าที่พักในการเดินทางไปราชการ พ.ศ.๒๕๓๔ (ฉบับที่๙) พ.ศ.๒๕๔๔', checked: false },
-  { id: 10, text: '2.4.10 ระเบียบสำนักนายกรัฐมนตรีว่าด้วยการพัสดุ พ.ศ.๒๕๓๕ (ฉบับที่๒) พ.ศ.๒๕๓๘ (ฉบับที่๓) พ.ศ.๒๕๓๙ (ฉบับที่๔) พ.ศ.๒๕๔๑ (ฉบับที่๕) พ.ศ.๒๕๔๒ (ฉบับที่๖) พ.ศ.๒๕๔๔', checked: false },
-  { id: 11, text: '2.4.11 ระเบียบกระทรวงการคลัง ว่าด้วยค่าใช้จ่ายในการฝึกอบรมของส่วนราชการ พ.ศ.๒๕๔๕', checked: false },
-  { id: 12, text: '2.4.12 ระเบียบกระทรวงการคลัง ว่าด้วยการเบิกค่าใช้จ่ายเกี่ยวกับการรักษาพยาบาลข้าราชการผู้ได้รับอันตราย หรือการป่วยเจ็บเพราะเหตุปฏิบัติราชการ พ.ศ.๒๕๔๗', checked: false },
-  { id: 13, text: '2.4.13 ระเบียบกระทรวงการคลัง ว่าด้วยการเบิกเงินสวัสดิการเกี่ยวกับการศึกษาบุตร พ.ศ.๒๕๔๗', checked: false },
-  { id: 14, text: '2.4.14 ประกาศกระทรวงการคลัง เรื่อง หลักเกณฑ์การจัดหาพัสดุ โดยการประมูลด้วยระบบอิเล็กทรอนิกส์ (e-Auction) พ.ศ.๒๕๔๘', checked: false },
+  {
+    id: 1,
+    text: "2.4.1 ข้อบัญญัติกรุงเทพมหานคร เรื่อง วิธีการงบประมาณ พ.ศ.๒๕๒๙ ซึ่งแก้ไขเพิ่มเติมโดย(ฉบับที่๒)พ.ศ.๒๕๓๓ และ(ฉบับที่๓)พ.ศ.๒๕๓๖",
+    checked: false,
+  },
+  {
+    id: 2,
+    text: "2.4.2 ระเบียบกรุงเทพมหานครว่าด้วยการรับเงิน การเบิกจ่ายเงิน การเก็บรักษาเงิน การนำส่งเงินและการตรวจเงิน(ฉบับที่๘) พ.ศ.๒๕๔๔ (ฉบับที่๙)พ.ศ.๒๕๔๘",
+    checked: false,
+  },
+  {
+    id: 3,
+    text: "2.4.3 ระเบียบกรุงเทพมหานครว่าด้วยค่าใช้จ่ายในการฝึกอบรบ พ.ศ.๒๕๔๑",
+    checked: false,
+  },
+  {
+    id: 4,
+    text: "2.4.4 พระราชบัญญัติวิธีการงบประมาณ พ.ศ.๒๕๐๒",
+    checked: false,
+  },
+  {
+    id: 5,
+    text: "2.4.5 ระเบียบคณะกรรมการการตรวจเงินแผ่นดินว่าด้วยวินัยทางงบประมาณและการคลัง พ.ศ.๒๕๔๔",
+    checked: false,
+  },
+  {
+    id: 6,
+    text: "2.4.6 กฎหมายว่าด้วยความผิดเกี่ยวกับการเสนอราคาต่อหน่วยของรัฐ",
+    checked: false,
+  },
+  {
+    id: 7,
+    text: "2.4.7 พระราชกฤษฎีกาการจ่ายเงินเดือน เงินปี บำเหน็จ บำนาญ และเงินอื่นในลักษณะเดียวกัน พ.ศ.๒๕๓๕",
+    checked: false,
+  },
+  {
+    id: 8,
+    text: "2.4.8 พระราชกฤษฎีกาค่าใช้จ่ายในการเดินทางไปราชการ พ.ศ.๒๕๒๖",
+    checked: false,
+  },
+  {
+    id: 9,
+    text: "2.4.9 ระเบียบกระทรวงการคลังว่าด้วยการเบิกจ่ายเบี้ยเลี้ยงเดินทาง และค่าเช่าที่พักในการเดินทางไปราชการ พ.ศ.๒๕๓๔ (ฉบับที่๙) พ.ศ.๒๕๔๔",
+    checked: false,
+  },
+  {
+    id: 10,
+    text: "2.4.10 ระเบียบสำนักนายกรัฐมนตรีว่าด้วยการพัสดุ พ.ศ.๒๕๓๕ (ฉบับที่๒) พ.ศ.๒๕๓๘ (ฉบับที่๓) พ.ศ.๒๕๓๙ (ฉบับที่๔) พ.ศ.๒๕๔๑ (ฉบับที่๕) พ.ศ.๒๕๔๒ (ฉบับที่๖) พ.ศ.๒๕๔๔",
+    checked: false,
+  },
+  {
+    id: 11,
+    text: "2.4.11 ระเบียบกระทรวงการคลัง ว่าด้วยค่าใช้จ่ายในการฝึกอบรมของส่วนราชการ พ.ศ.๒๕๔๕",
+    checked: false,
+  },
+  {
+    id: 12,
+    text: "2.4.12 ระเบียบกระทรวงการคลัง ว่าด้วยการเบิกค่าใช้จ่ายเกี่ยวกับการรักษาพยาบาลข้าราชการผู้ได้รับอันตราย หรือการป่วยเจ็บเพราะเหตุปฏิบัติราชการ พ.ศ.๒๕๔๗",
+    checked: false,
+  },
+  {
+    id: 13,
+    text: "2.4.13 ระเบียบกระทรวงการคลัง ว่าด้วยการเบิกเงินสวัสดิการเกี่ยวกับการศึกษาบุตร พ.ศ.๒๕๔๗",
+    checked: false,
+  },
+  {
+    id: 14,
+    text: "2.4.14 ประกาศกระทรวงการคลัง เรื่อง หลักเกณฑ์การจัดหาพัสดุ โดยการประมูลด้วยระบบอิเล็กทรอนิกส์ (e-Auction) พ.ศ.๒๕๔๘",
+    checked: false,
+  },
 ]);
 const law = ref([]);
 const listlaw = [
@@ -1237,12 +1459,12 @@ const date3 = ref<Date>(new Date());
 const date4 = ref<Date>(new Date());
 </script>
 <style lang="scss" scoped>
-.border_y{
-	border-left:1px solid #d8d8d8 ;
-	border-right:1px solid #d8d8d8 ;
+.border_y {
+  border-left: 1px solid #d8d8d8;
+  border-right: 1px solid #d8d8d8;
 }
-.borderCheck{
-	border-bottom: 1px solid #d8d8d8;
+.borderCheck {
+  border-bottom: 1px solid #d8d8d8;
 }
 .text-top2 {
   font-weight: 500;
@@ -1260,4 +1482,8 @@ const date4 = ref<Date>(new Date());
   padding-bottom: 5px;
   color: #02a998;
 }
+.bin {
+  align-items: center;
+  justify-content: center;
+}
 </style>

src/modules/05_placement/components/probation/FormEvaluation.vue

@@ -0,0 +1,131 @@
+<!-- card ข้อมูลส่วนตัว -->
+<template>
+  <div class="q-pb-md">
+    <!-- <div class="toptitle text-dark 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 class="col-12 text-dark">
+      <div class="row col-12 q-gutter-lg q-pa-lg">
+        <div class="col-12 row">
+          <div class="col-12 text-top0 row items-center">
+            <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
+            วันเริ่มทดลองปฎิบัติหน้าที่ราชการ ตั้งแต่วันที่
+            <span class="text-black q-px-sm">{{ date2Thai(dateToday) }}</span>
+            ถึงวันที
+            <span class="text-black q-px-sm">{{ date2Thai(dateEnd) }}</span>
+          </div>
+          <div class="col-12 text-top0 row items-center">
+            <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
+            การทดลองปฏิบัติหน้าที่ราชการมีผล ดังนี้
+            <span class="text-black q-px-sm">{{ "ครั้งที่" + period }}</span>
+            ระหว่างวันที่
+            <span class="text-black q-px-sm">{{ date2Thai(dateToday) }}</span>
+            ถึงวันที่
+            <span class="text-black q-px-sm">{{ date2Thai(dateEnd) }}</span>
+          </div>
+          <div class="col-12 q-pt-md">
+            <q-separator size="3px" color="grey-2" />
+          </div>
+        </div>
+        <!--------------------- 1 --------------------->
+        <FormEva1 />
+        <div class="col-12">
+          <q-separator size="3px" color="grey-2" />
+        </div>
+
+        <!--------------------- 2 --------------------->
+        <FormEva2 />
+        <div class="col-12">
+          <q-separator size="3px" color="grey-2" />
+        </div>
+
+        <!--------------------- 3 --------------------->
+        <FormEva3 />
+        <div class="col-12">
+          <q-separator size="3px" color="grey-2" />
+        </div>
+        <!--------------------- ผู้บังคับบัญชาผู้มอบหมายงาน --------------------->
+        <FormEvaOrder />
+      </div>
+
+      <q-separator />
+      <div class="flex justify-end q-px-sm q-pt-sm">
+        <q-footer class="bg-white q-px-lg q-py-sm flex justify-end">
+          <q-btn
+            dense
+            class="q-px-md"
+            unelevated
+            label="บันทึก"
+            color="public"
+          />
+        </q-footer>
+      </div>
+    </div>
+  </div>
+</template>
+<script setup lang="ts">
+import { ref, defineAsyncComponent } from "vue";
+import { useCounterMixin } from "@/stores/mixin";
+import { useRoute } from "vue-router";
+import { useQuasar } from "quasar";
+import router from "@/router";
+
+const FormEva1 = defineAsyncComponent(
+  () => import("@/modules/05_placement/components/probation/form/formEva1.vue")
+);
+const FormEva2 = defineAsyncComponent(
+  () => import("@/modules/05_placement/components/probation/form/formEva2.vue")
+);
+const FormEva3 = defineAsyncComponent(
+  () => import("@/modules/05_placement/components/probation/form/formEva3.vue")
+);
+const FormEvaOrder = defineAsyncComponent(
+  () =>
+    import("@/modules/05_placement/components/probation/form/formEvaOrder.vue")
+);
+
+const $q = useQuasar();
+
+const mixin = useCounterMixin();
+const { date2Thai } = mixin;
+const dateToday = ref<Date>(new Date("10-10-2023"));
+const dateEnd = ref<Date>(new Date("12-10-2023"));
+const period = ref<number>(1);
+
+const onSubmit = () => {
+  $q.notify({
+    color: "green-4",
+    textColor: "white",
+    icon: "cloud_done",
+    message: "ส่งแบบประเมินเเล้ว",
+  });
+};
+
+const onReset = () => {
+  router.push({ name: "probation" });
+};
+</script>
+
+<style lang="scss" scoped>
+.text-top2 {
+  font-weight: 500;
+  padding-bottom: 8px;
+  color: rgb(70, 68, 68);
+}
+
+.text-top0 {
+  font-weight: 600;
+  padding-bottom: 8px;
+  color: rgb(70, 68, 68);
+}
+</style>

src/modules/05_placement/components/probation/FormEvaluation/Footer.vue

@@ -0,0 +1,83 @@
+<template>
+  <div class="row col-12 q-gutter-lg no-margin">
+    <div class="col-12 row">
+      <div class="col-12 text-top2 row items-center">
+        ผู้บังคับบัญชาผู้มอบหมายงาน
+      </div>
+      <div class="col-12 row q-col-gutter-md">
+        <q-select
+          class="col-xs-12 col-sm-8"
+          dense
+          v-model="Autherise"
+          outlined
+          :options="option"
+          label="ผู้บังคับบัญชา"
+        />
+        <div class="col-xs-12 col-sm-4">
+          <datepicker
+            menu-class-name="modalfix"
+            v-model="dateAutherise"
+            :locale="'th'"
+            autoApply
+            borderless
+            :enableTimePicker="false"
+            week-start="0"
+          >
+            <template #year="{ year }">
+              {{ year + 543 }}
+            </template>
+            <template #year-overlay-value="{ value }">
+              {{ parseInt(value + 543) }}
+            </template>
+            <template #trigger>
+              <q-input
+                outlined
+                dense
+                class="full-width datepicker col-3"
+                :model-value="
+                  dateAutherise != null ? date2Thai(dateAutherise) : null
+                "
+                :label="`${'ลงวันที่'}`"
+                :rules="[(val) => !!val || `${'กรุณาเลือกลงวันที่'}`]"
+              >
+                <template v-slot:prepend>
+                  <q-icon
+                    name="event"
+                    class="cursor-pointer"
+                    style="color: var(--q-primary)"
+                  >
+                  </q-icon>
+                </template>
+              </q-input>
+            </template>
+          </datepicker>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script setup lang="ts">
+import { ref } from "vue";
+import { useCounterMixin } from "@/stores/mixin";
+
+const mixin = useCounterMixin();
+const { date2Thai } = mixin;
+const Autherise = ref<any>(null);
+
+const dateAutherise = ref<any>(new Date());
+
+const option = ref<any>(["นาย ภูริณัฐ บุญขาว", "นาย พงศกร วรารักษ์"]);
+</script>
+<style lang="scss" scoped>
+.text-top2 {
+  font-weight: 500;
+  padding-bottom: 8px;
+  color: rgb(70, 68, 68);
+}
+
+.text-top0 {
+  font-weight: 600;
+  padding-bottom: 8px;
+  color: rgb(70, 68, 68);
+}
+</style>

src/modules/05_placement/components/probation/FormEvaluation/FormEvaluate.vue

@@ -0,0 +1,369 @@
+<script setup lang="ts">
+import { ref, defineAsyncComponent } from "vue";
+import { useQuasar } from "quasar";
+import { useProbationDataStore } from "@/modules/05_placement/store";
+import { useCounterMixin } from "@/stores/mixin";
+
+const Part2 = defineAsyncComponent(
+  () =>
+    import(
+      "@/modules/05_placement/components/probation/FormEvaluation/SubForm/Part2.vue"
+    )
+);
+const Part3 = defineAsyncComponent(
+  () =>
+    import(
+      "@/modules/05_placement/components/probation/FormEvaluation/SubForm/Part3.vue"
+    )
+);
+const Footer = defineAsyncComponent(
+  () =>
+    import(
+      "@/modules/05_placement/components/probation/FormEvaluation/Footer.vue"
+    )
+);
+
+const $q = useQuasar();
+const probationStore = useProbationDataStore();
+const { ratingColors } = probationStore;
+
+const list1_1 = [
+  { id: "1", label: "ผลผลิตของงานที่คาดหวัง 1" },
+  { id: "2", label: "ผลผลิตของงานที่คาดหวัง 2" },
+  { id: "3", label: "ผลผลิตของงานที่คาดหวัง 3" },
+  { id: "4", label: "ผลผลิตของงานที่คาดหวัง 4" },
+  { id: "5", label: "ผลผลิตของงานที่คาดหวัง 5" },
+];
+const list1_2 = [
+  { id: "1", label: "ผลผลิตของงานที่เกิดขึ้น 1" },
+  { id: "2", label: "ผลผลิตของงานที่เกิดขึ้น 2" },
+  { id: "3", label: "ผลผลิตของงานที่เกิดขึ้น 3" },
+  { id: "4", label: "ผลผลิตของงานที่เกิดขึ้น 4" },
+  { id: "5", label: "ผลผลิตของงานที่เกิดขึ้น 5" },
+];
+
+const etc_text = ref<any>(null);
+const text2_1 = ref<string>("");
+
+const model = ref<any>(0);
+const model1 = ref<any>(0);
+const model1_2 = ref<any>(0);
+const model1_3 = ref<any>(0);
+const model1_4 = ref<any>(0);
+const model1_5 = ref<any>(0);
+const model1_6 = ref<any>(0);
+const modelEtc = ref<any>(0);
+const etc = ref<any>(false);
+
+const mixin = useCounterMixin();
+const { date2Thai } = mixin;
+const dateToday = ref<Date>(new Date("10-10-2023"));
+const dateEnd = ref<Date>(new Date("12-10-2023"));
+const period = ref<number>(1);
+</script>
+
+<template>
+  <div class="row col-12 q-gutter-lg no-margin">
+
+    <div class="col-12 row">
+      <div class="col-12 text-top0 row items-center">
+        <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
+        วันเริ่มทดลองปฎิบัติหน้าที่ราชการ ตั้งแต่วันที่
+        <span class="text-black q-px-sm">{{ date2Thai(dateToday) }}</span>
+        ถึงวันที
+        <span class="text-black q-px-sm">{{ date2Thai(dateEnd) }}</span>
+      </div>
+      <div class="col-12 text-top0 row items-center">
+        <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
+        <span class="text-black q-px-sm">{{ "ครั้งที่" + period }}</span>
+        ระหว่างวันที่
+        <span class="text-black q-px-sm">{{ date2Thai(dateToday) }}</span>
+        ถึงวันที่
+        <span class="text-black q-px-sm">{{ date2Thai(dateEnd) }}</span>
+      </div>
+      <div class="col-12 q-pt-md">
+        <q-separator size="3px" color="grey-2" />
+      </div>
+    </div>
+
+    <div class="col-12 row">
+      <div class="col-12 text-top0 items-center">
+        <q-avatar class="bg-grey-2 q-mr-sm" size="28px">1</q-avatar>
+        ผลสัมฤทธิ์ของการทดลองปฏิบัติบัติหน้าที่ราชการ
+      </div>
+    </div>
+    <div class="col-12 row no-margin">
+      <q-card class="text-top0 col-12 q-pa-sm q-pl-lg">
+        <q-list dense>
+          <q-item dense tag="label" v-ripple>
+            <q-item-section>
+              <q-item-label>
+                <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
+                1.1. ความรู้ความสามารถ</q-item-label>
+            </q-item-section>
+            <q-item-section side>
+              <q-rating v-model="model1_2" max="5" size="sm" color="grey" :color-selected="ratingColors"
+                label="ระดับการประเมินพฤติกรรม">
+                <template v-slot:tip-1>
+                  <q-tooltip>ต่ำกว่าความคาดหวังมาก</q-tooltip>
+                </template>
+                <template v-slot:tip-2>
+                  <q-tooltip>ต่ำกว่าความคาดหวังค่อนข้างมาก</q-tooltip>
+                </template>
+                <template v-slot:tip-3>
+                  <q-tooltip>เป็นไปตามความคาดหวัง</q-tooltip>
+                </template>
+                <template v-slot:tip-4>
+                  <q-tooltip>สูงว่าความคาดหวังค่อนข้างมาก</q-tooltip>
+                </template>
+                <template v-slot:tip-5>
+                  <q-tooltip>สูงกว่าความคาดหวังมาก</q-tooltip>
+                </template>
+              </q-rating>
+            </q-item-section>
+          </q-item>
+        </q-list>
+      </q-card>
+
+      <q-card class="text-top0 col-12 q-pa-sm q-pl-lg">
+        <q-list dense>
+          <q-item dense tag="label" v-ripple>
+            <q-item-section>
+              <q-item-label>
+                <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
+                1.2. ทักษะ</q-item-label>
+            </q-item-section>
+            <q-item-section side>
+              <q-rating v-model="model1_2" max="5" size="sm" color="grey" :color-selected="ratingColors"
+                label="ระดับการประเมินพฤติกรรม">
+                <template v-slot:tip-1>
+                  <q-tooltip>ต่ำกว่าความคาดหวังมาก</q-tooltip>
+                </template>
+                <template v-slot:tip-2>
+                  <q-tooltip>ต่ำกว่าความคาดหวังค่อนข้างมาก</q-tooltip>
+                </template>
+                <template v-slot:tip-3>
+                  <q-tooltip>เป็นไปตามความคาดหวัง</q-tooltip>
+                </template>
+                <template v-slot:tip-4>
+                  <q-tooltip>สูงว่าความคาดหวังค่อนข้างมาก</q-tooltip>
+                </template>
+                <template v-slot:tip-5>
+                  <q-tooltip>สูงกว่าความคาดหวังมาก</q-tooltip>
+                </template>
+              </q-rating>
+            </q-item-section>
+          </q-item>
+        </q-list>
+      </q-card>
+
+      <q-card class="text-top0 col-12 q-pa-sm q-pl-lg">
+        <q-list dense>
+          <q-item dense tag="label" v-ripple>
+            <q-item-section>
+              <q-item-label>
+                <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
+                1.3. สมมรถนะ</q-item-label>
+            </q-item-section>
+            <q-item-section side>
+              <q-rating v-model="model1_2" max="5" size="sm" color="grey" :color-selected="ratingColors"
+                label="ระดับการประเมินพฤติกรรม">
+                <template v-slot:tip-1>
+                  <q-tooltip>ต่ำกว่าความคาดหวังมาก</q-tooltip>
+                </template>
+                <template v-slot:tip-2>
+                  <q-tooltip>ต่ำกว่าความคาดหวังค่อนข้างมาก</q-tooltip>
+                </template>
+                <template v-slot:tip-3>
+                  <q-tooltip>เป็นไปตามความคาดหวัง</q-tooltip>
+                </template>
+                <template v-slot:tip-4>
+                  <q-tooltip>สูงว่าความคาดหวังค่อนข้างมาก</q-tooltip>
+                </template>
+                <template v-slot:tip-5>
+                  <q-tooltip>สูงกว่าความคาดหวังมาก</q-tooltip>
+                </template>
+              </q-rating>
+            </q-item-section>
+          </q-item>
+        </q-list>
+      </q-card>
+
+      <q-card class="text-top0 col-12 q-pa-sm q-pl-lg">
+        <q-list dense>
+          <q-item dense tag="label" v-ripple>
+            <q-item-section>
+              <q-item-label>
+                <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
+                1.4. ความสามารถในการเรียนรู้งาน</q-item-label>
+            </q-item-section>
+            <q-item-section side>
+              <q-rating v-model="model1_2" max="5" size="sm" color="grey" :color-selected="ratingColors"
+                label="ระดับการประเมินพฤติกรรม">
+                <template v-slot:tip-1>
+                  <q-tooltip>ต่ำกว่าความคาดหวังมาก</q-tooltip>
+                </template>
+                <template v-slot:tip-2>
+                  <q-tooltip>ต่ำกว่าความคาดหวังค่อนข้างมาก</q-tooltip>
+                </template>
+                <template v-slot:tip-3>
+                  <q-tooltip>เป็นไปตามความคาดหวัง</q-tooltip>
+                </template>
+                <template v-slot:tip-4>
+                  <q-tooltip>สูงว่าความคาดหวังค่อนข้างมาก</q-tooltip>
+                </template>
+                <template v-slot:tip-5>
+                  <q-tooltip>สูงกว่าความคาดหวังมาก</q-tooltip>
+                </template>
+              </q-rating>
+            </q-item-section>
+          </q-item>
+        </q-list>
+      </q-card>
+
+      <q-card class="text-top0 col-12 q-pa-sm q-mt-sm q-pl-lg">
+        <q-list dense>
+          <q-item dense tag="label" v-ripple>
+            <q-item-section>
+              <q-item-label>
+                <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
+                1.5. ความสามารถในการปรับใช้ความรู้กับงานในหน้าที่</q-item-label>
+            </q-item-section>
+            <q-item-section side>
+              <q-rating v-model="model1_2" max="5" size="sm" color="grey" :color-selected="ratingColors"
+                label="ระดับการประเมินพฤติกรรม">
+                <template v-slot:tip-1>
+                  <q-tooltip>ต่ำกว่าความคาดหวังมาก</q-tooltip>
+                </template>
+                <template v-slot:tip-2>
+                  <q-tooltip>ต่ำกว่าความคาดหวังค่อนข้างมาก</q-tooltip>
+                </template>
+                <template v-slot:tip-3>
+                  <q-tooltip>เป็นไปตามความคาดหวัง</q-tooltip>
+                </template>
+                <template v-slot:tip-4>
+                  <q-tooltip>สูงว่าความคาดหวังค่อนข้างมาก</q-tooltip>
+                </template>
+                <template v-slot:tip-5>
+                  <q-tooltip>สูงกว่าความคาดหวังมาก</q-tooltip>
+                </template>
+              </q-rating>
+            </q-item-section>
+          </q-item>
+        </q-list>
+      </q-card>
+
+      <q-card class="text-top0 col-12 q-pa-sm q-pl-lg">
+        <q-list dense>
+          <q-item dense tag="label" v-ripple>
+            <q-item-section>
+              <q-item-label>
+                <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
+                1.6. ความสำเร็จของงานที่ได้รับมอบหมาย</q-item-label>
+            </q-item-section>
+            <q-item-section side>
+              <q-rating v-model="model1_2" max="5" size="sm" color="grey" :color-selected="ratingColors"
+                label="ระดับการประเมินพฤติกรรม">
+                <template v-slot:tip-1>
+                  <q-tooltip>ต่ำกว่าความคาดหวังมาก</q-tooltip>
+                </template>
+                <template v-slot:tip-2>
+                  <q-tooltip>ต่ำกว่าความคาดหวังค่อนข้างมาก</q-tooltip>
+                </template>
+                <template v-slot:tip-3>
+                  <q-tooltip>เป็นไปตามความคาดหวัง</q-tooltip>
+                </template>
+                <template v-slot:tip-4>
+                  <q-tooltip>สูงว่าความคาดหวังค่อนข้างมาก</q-tooltip>
+                </template>
+                <template v-slot:tip-5>
+                  <q-tooltip>สูงกว่าความคาดหวังมาก</q-tooltip>
+                </template>
+              </q-rating>
+            </q-item-section>
+          </q-item>
+        </q-list>
+      </q-card>
+
+      <q-card class="text-top0 col-12 q-pa-sm q-pl-lg">
+        <q-list dense>
+          <q-item dense tag="label" v-ripple>
+            <q-item-section>
+              <q-item-label>
+                <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
+                1.7 อื่นๆ
+                <q-checkbox class="q-ml-sm" dense v-model="etc" /></q-item-label>
+            </q-item-section>
+          </q-item>
+        </q-list>
+      </q-card>
+
+      <q-card v-if="etc" class="text-top0 col-12 q-pa-sm q-mt-sm q-pl-lg">
+        <q-list dense>
+          <q-item dense tag="label" v-ripple>
+            <q-item-section class="q-ml-md">
+              <q-item-label>
+                <q-input v-model="etc_text" label="กรอกอื่นๆ" dense lazy-rules autogrow hide-bottom-space outlined
+                  class="bg-white" :rules="[
+                    (val) => (val && val.length > 0) || 'กรุณากรอกข้อความ',
+                  ]" />
+              </q-item-label>
+            </q-item-section>
+            <q-item-section side>
+              <q-rating v-model="modelEtc" max="5" size="sm" color="grey" :color-selected="ratingColors"
+                label="ระดับการประเมินพฤติกรรม">
+                <template v-slot:tip-1>
+                  <q-tooltip>ต่ำกว่าความคาดหวังมาก</q-tooltip>
+                </template>
+                <template v-slot:tip-2>
+                  <q-tooltip>ต่ำกว่าความคาดหวังค่อนข้างมาก</q-tooltip>
+                </template>
+                <template v-slot:tip-3>
+                  <q-tooltip>เป็นไปตามความคาดหวัง</q-tooltip>
+                </template>
+                <template v-slot:tip-4>
+                  <q-tooltip>สูงว่าความคาดหวังค่อนข้างมาก</q-tooltip>
+                </template>
+                <template v-slot:tip-5>
+                  <q-tooltip>สูงกว่าความคาดหวังมาก</q-tooltip>
+                </template>
+              </q-rating>
+            </q-item-section>
+          </q-item>
+        </q-list>
+      </q-card>
+
+    </div>
+
+    <!-- Part 2 -->
+    <Part2 />
+
+    <!-- Part 3 -->
+    <Part3 />
+
+    <!-- Footer -->
+    <Footer />
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.text-top2 {
+  font-weight: 500;
+  padding-bottom: 8px;
+  color: rgb(70, 68, 68);
+}
+
+.text-top0 {
+  font-weight: 600;
+  padding-bottom: 8px;
+  color: rgb(70, 68, 68);
+}
+
+.q-rating__icon {
+  text-shadow: transparent !important;
+}
+
+.q-card {
+  box-shadow: 0px 0px 0px 0px !important;
+}
+</style>

src/modules/05_placement/components/probation/FormEvaluation/FormReport.vue

@@ -0,0 +1,369 @@
+<script setup lang="ts">
+import { ref, defineAsyncComponent } from "vue";
+import { useQuasar } from "quasar";
+import { useProbationDataStore } from "@/modules/05_placement/store";
+import { useCounterMixin } from "@/stores/mixin";
+
+const Part2 = defineAsyncComponent(
+  () =>
+    import(
+      "@/modules/05_placement/components/probation/FormEvaluation/SubForm/Part2.vue"
+    )
+);
+const Part3 = defineAsyncComponent(
+  () =>
+    import(
+      "@/modules/05_placement/components/probation/FormEvaluation/SubForm/Part3.vue"
+    )
+);
+const Footer = defineAsyncComponent(
+  () =>
+    import(
+      "@/modules/05_placement/components/probation/FormEvaluation/Footer.vue"
+    )
+);
+
+const $q = useQuasar();
+const probationStore = useProbationDataStore();
+const { ratingColors } = probationStore;
+
+const list1_1 = [
+  { id: "1", label: "ผลผลิตของงานที่คาดหวัง 1" },
+  { id: "2", label: "ผลผลิตของงานที่คาดหวัง 2" },
+  { id: "3", label: "ผลผลิตของงานที่คาดหวัง 3" },
+  { id: "4", label: "ผลผลิตของงานที่คาดหวัง 4" },
+  { id: "5", label: "ผลผลิตของงานที่คาดหวัง 5" },
+];
+const list1_2 = [
+  { id: "1", label: "ผลผลิตของงานที่เกิดขึ้น 1" },
+  { id: "2", label: "ผลผลิตของงานที่เกิดขึ้น 2" },
+  { id: "3", label: "ผลผลิตของงานที่เกิดขึ้น 3" },
+  { id: "4", label: "ผลผลิตของงานที่เกิดขึ้น 4" },
+  { id: "5", label: "ผลผลิตของงานที่เกิดขึ้น 5" },
+];
+
+const etc_text = ref<any>(null);
+const text2_1 = ref<string>("");
+
+const model = ref<any>(0);
+const model1 = ref<any>(0);
+const model1_2 = ref<any>(0);
+const model1_3 = ref<any>(0);
+const model1_4 = ref<any>(0);
+const model1_5 = ref<any>(0);
+const model1_6 = ref<any>(0);
+const modelEtc = ref<any>(0);
+const etc = ref<any>(false);
+
+const mixin = useCounterMixin();
+const { date2Thai } = mixin;
+const dateToday = ref<Date>(new Date("10-10-2023"));
+const dateEnd = ref<Date>(new Date("12-10-2023"));
+const period = ref<number>(1);
+</script>
+
+<template>
+  <div class="row col-12 q-gutter-lg no-margin">
+
+    <div class="col-12 row">
+      <div class="col-12 text-top0 row items-center">
+        <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
+        วันเริ่มทดลองปฎิบัติหน้าที่ราชการ ตั้งแต่วันที่
+        <span class="text-black q-px-sm">{{ date2Thai(dateToday) }}</span>
+        ถึงวันที
+        <span class="text-black q-px-sm">{{ date2Thai(dateEnd) }}</span>
+      </div>
+      <div class="col-12 text-top0 row items-center">
+        <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
+        <span class="text-black q-px-sm">{{ "ครั้งที่" + period }}</span>
+        ระหว่างวันที่
+        <span class="text-black q-px-sm">{{ date2Thai(dateToday) }}</span>
+        ถึงวันที่
+        <span class="text-black q-px-sm">{{ date2Thai(dateEnd) }}</span>
+      </div>
+      <div class="col-12 q-pt-md">
+        <q-separator size="3px" color="grey-2" />
+      </div>
+    </div>
+
+    <div class="col-12 row">
+      <div class="col-12 text-top0 items-center">
+        <q-avatar class="bg-grey-2 q-mr-sm" size="28px">1</q-avatar>
+        ผลสัมฤทธิ์ของการทดลองปฏิบัติบัติหน้าที่ราชการ
+      </div>
+    </div>
+    <div class="col-12 row no-margin">
+      <q-card class="text-top0 col-12 q-pa-sm q-pl-lg">
+        <q-list dense>
+          <q-item dense tag="label" v-ripple>
+            <q-item-section>
+              <q-item-label>
+                <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
+                1.1. ความรู้ความสามารถ</q-item-label>
+            </q-item-section>
+            <q-item-section side>
+              <q-rating v-model="model1_2" max="5" size="sm" color="grey" :color-selected="ratingColors"
+                label="ระดับการประเมินพฤติกรรม">
+                <template v-slot:tip-1>
+                  <q-tooltip>ต่ำกว่าความคาดหวังมาก</q-tooltip>
+                </template>
+                <template v-slot:tip-2>
+                  <q-tooltip>ต่ำกว่าความคาดหวังค่อนข้างมาก</q-tooltip>
+                </template>
+                <template v-slot:tip-3>
+                  <q-tooltip>เป็นไปตามความคาดหวัง</q-tooltip>
+                </template>
+                <template v-slot:tip-4>
+                  <q-tooltip>สูงว่าความคาดหวังค่อนข้างมาก</q-tooltip>
+                </template>
+                <template v-slot:tip-5>
+                  <q-tooltip>สูงกว่าความคาดหวังมาก</q-tooltip>
+                </template>
+              </q-rating>
+            </q-item-section>
+          </q-item>
+        </q-list>
+      </q-card>
+
+      <q-card class="text-top0 col-12 q-pa-sm q-pl-lg">
+        <q-list dense>
+          <q-item dense tag="label" v-ripple>
+            <q-item-section>
+              <q-item-label>
+                <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
+                1.2. ทักษะ</q-item-label>
+            </q-item-section>
+            <q-item-section side>
+              <q-rating v-model="model1_2" max="5" size="sm" color="grey" :color-selected="ratingColors"
+                label="ระดับการประเมินพฤติกรรม">
+                <template v-slot:tip-1>
+                  <q-tooltip>ต่ำกว่าความคาดหวังมาก</q-tooltip>
+                </template>
+                <template v-slot:tip-2>
+                  <q-tooltip>ต่ำกว่าความคาดหวังค่อนข้างมาก</q-tooltip>
+                </template>
+                <template v-slot:tip-3>
+                  <q-tooltip>เป็นไปตามความคาดหวัง</q-tooltip>
+                </template>
+                <template v-slot:tip-4>
+                  <q-tooltip>สูงว่าความคาดหวังค่อนข้างมาก</q-tooltip>
+                </template>
+                <template v-slot:tip-5>
+                  <q-tooltip>สูงกว่าความคาดหวังมาก</q-tooltip>
+                </template>
+              </q-rating>
+            </q-item-section>
+          </q-item>
+        </q-list>
+      </q-card>
+
+      <q-card class="text-top0 col-12 q-pa-sm q-pl-lg">
+        <q-list dense>
+          <q-item dense tag="label" v-ripple>
+            <q-item-section>
+              <q-item-label>
+                <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
+                1.3. สมมรถนะ</q-item-label>
+            </q-item-section>
+            <q-item-section side>
+              <q-rating v-model="model1_2" max="5" size="sm" color="grey" :color-selected="ratingColors"
+                label="ระดับการประเมินพฤติกรรม">
+                <template v-slot:tip-1>
+                  <q-tooltip>ต่ำกว่าความคาดหวังมาก</q-tooltip>
+                </template>
+                <template v-slot:tip-2>
+                  <q-tooltip>ต่ำกว่าความคาดหวังค่อนข้างมาก</q-tooltip>
+                </template>
+                <template v-slot:tip-3>
+                  <q-tooltip>เป็นไปตามความคาดหวัง</q-tooltip>
+                </template>
+                <template v-slot:tip-4>
+                  <q-tooltip>สูงว่าความคาดหวังค่อนข้างมาก</q-tooltip>
+                </template>
+                <template v-slot:tip-5>
+                  <q-tooltip>สูงกว่าความคาดหวังมาก</q-tooltip>
+                </template>
+              </q-rating>
+            </q-item-section>
+          </q-item>
+        </q-list>
+      </q-card>
+
+      <q-card class="text-top0 col-12 q-pa-sm q-pl-lg">
+        <q-list dense>
+          <q-item dense tag="label" v-ripple>
+            <q-item-section>
+              <q-item-label>
+                <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
+                1.4. ความสามารถในการเรียนรู้งาน</q-item-label>
+            </q-item-section>
+            <q-item-section side>
+              <q-rating v-model="model1_2" max="5" size="sm" color="grey" :color-selected="ratingColors"
+                label="ระดับการประเมินพฤติกรรม">
+                <template v-slot:tip-1>
+                  <q-tooltip>ต่ำกว่าความคาดหวังมาก</q-tooltip>
+                </template>
+                <template v-slot:tip-2>
+                  <q-tooltip>ต่ำกว่าความคาดหวังค่อนข้างมาก</q-tooltip>
+                </template>
+                <template v-slot:tip-3>
+                  <q-tooltip>เป็นไปตามความคาดหวัง</q-tooltip>
+                </template>
+                <template v-slot:tip-4>
+                  <q-tooltip>สูงว่าความคาดหวังค่อนข้างมาก</q-tooltip>
+                </template>
+                <template v-slot:tip-5>
+                  <q-tooltip>สูงกว่าความคาดหวังมาก</q-tooltip>
+                </template>
+              </q-rating>
+            </q-item-section>
+          </q-item>
+        </q-list>
+      </q-card>
+
+      <q-card class="text-top0 col-12 q-pa-sm q-mt-sm q-pl-lg">
+        <q-list dense>
+          <q-item dense tag="label" v-ripple>
+            <q-item-section>
+              <q-item-label>
+                <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
+                1.5. ความสามารถในการปรับใช้ความรู้กับงานในหน้าที่</q-item-label>
+            </q-item-section>
+            <q-item-section side>
+              <q-rating v-model="model1_2" max="5" size="sm" color="grey" :color-selected="ratingColors"
+                label="ระดับการประเมินพฤติกรรม">
+                <template v-slot:tip-1>
+                  <q-tooltip>ต่ำกว่าความคาดหวังมาก</q-tooltip>
+                </template>
+                <template v-slot:tip-2>
+                  <q-tooltip>ต่ำกว่าความคาดหวังค่อนข้างมาก</q-tooltip>
+                </template>
+                <template v-slot:tip-3>
+                  <q-tooltip>เป็นไปตามความคาดหวัง</q-tooltip>
+                </template>
+                <template v-slot:tip-4>
+                  <q-tooltip>สูงว่าความคาดหวังค่อนข้างมาก</q-tooltip>
+                </template>
+                <template v-slot:tip-5>
+                  <q-tooltip>สูงกว่าความคาดหวังมาก</q-tooltip>
+                </template>
+              </q-rating>
+            </q-item-section>
+          </q-item>
+        </q-list>
+      </q-card>
+
+      <q-card class="text-top0 col-12 q-pa-sm q-pl-lg">
+        <q-list dense>
+          <q-item dense tag="label" v-ripple>
+            <q-item-section>
+              <q-item-label>
+                <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
+                1.6. ความสำเร็จของงานที่ได้รับมอบหมาย</q-item-label>
+            </q-item-section>
+            <q-item-section side>
+              <q-rating v-model="model1_2" max="5" size="sm" color="grey" :color-selected="ratingColors"
+                label="ระดับการประเมินพฤติกรรม">
+                <template v-slot:tip-1>
+                  <q-tooltip>ต่ำกว่าความคาดหวังมาก</q-tooltip>
+                </template>
+                <template v-slot:tip-2>
+                  <q-tooltip>ต่ำกว่าความคาดหวังค่อนข้างมาก</q-tooltip>
+                </template>
+                <template v-slot:tip-3>
+                  <q-tooltip>เป็นไปตามความคาดหวัง</q-tooltip>
+                </template>
+                <template v-slot:tip-4>
+                  <q-tooltip>สูงว่าความคาดหวังค่อนข้างมาก</q-tooltip>
+                </template>
+                <template v-slot:tip-5>
+                  <q-tooltip>สูงกว่าความคาดหวังมาก</q-tooltip>
+                </template>
+              </q-rating>
+            </q-item-section>
+          </q-item>
+        </q-list>
+      </q-card>
+
+      <q-card class="text-top0 col-12 q-pa-sm q-pl-lg">
+        <q-list dense>
+          <q-item dense tag="label" v-ripple>
+            <q-item-section>
+              <q-item-label>
+                <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
+                1.7 อื่นๆ
+                <q-checkbox class="q-ml-sm" dense v-model="etc" /></q-item-label>
+            </q-item-section>
+          </q-item>
+        </q-list>
+      </q-card>
+
+      <q-card v-if="etc" class="text-top0 col-12 q-pa-sm q-mt-sm q-pl-lg">
+        <q-list dense>
+          <q-item dense tag="label" v-ripple>
+            <q-item-section class="q-ml-md">
+              <q-item-label>
+                <q-input v-model="etc_text" label="กรอกอื่นๆ" dense lazy-rules autogrow hide-bottom-space outlined
+                  class="bg-white" :rules="[
+                    (val) => (val && val.length > 0) || 'กรุณากรอกข้อความ',
+                  ]" />
+              </q-item-label>
+            </q-item-section>
+            <q-item-section side>
+              <q-rating v-model="modelEtc" max="5" size="sm" color="grey" :color-selected="ratingColors"
+                label="ระดับการประเมินพฤติกรรม">
+                <template v-slot:tip-1>
+                  <q-tooltip>ต่ำกว่าความคาดหวังมาก</q-tooltip>
+                </template>
+                <template v-slot:tip-2>
+                  <q-tooltip>ต่ำกว่าความคาดหวังค่อนข้างมาก</q-tooltip>
+                </template>
+                <template v-slot:tip-3>
+                  <q-tooltip>เป็นไปตามความคาดหวัง</q-tooltip>
+                </template>
+                <template v-slot:tip-4>
+                  <q-tooltip>สูงว่าความคาดหวังค่อนข้างมาก</q-tooltip>
+                </template>
+                <template v-slot:tip-5>
+                  <q-tooltip>สูงกว่าความคาดหวังมาก</q-tooltip>
+                </template>
+              </q-rating>
+            </q-item-section>
+          </q-item>
+        </q-list>
+      </q-card>
+
+    </div>
+
+    <!-- Part 2 -->
+    <Part2 />
+
+    <!-- Part 3 -->
+    <Part3 />
+
+    <!-- Footer -->
+    <Footer />
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.text-top2 {
+  font-weight: 500;
+  padding-bottom: 8px;
+  color: rgb(70, 68, 68);
+}
+
+.text-top0 {
+  font-weight: 600;
+  padding-bottom: 8px;
+  color: rgb(70, 68, 68);
+}
+
+.q-rating__icon {
+  text-shadow: transparent !important;
+}
+
+.q-card {
+  box-shadow: 0px 0px 0px 0px !important;
+}
+</style>

src/modules/05_placement/components/probation/FormEvaluation/FormSaveResult.vue

@@ -0,0 +1,469 @@
+<script setup lang="ts">
+import { ref, defineAsyncComponent } from "vue";
+import { useQuasar } from "quasar";
+import { useProbationDataStore } from "@/modules/05_placement/store";
+import { useCounterMixin } from "@/stores/mixin";
+
+const Part2 = defineAsyncComponent(
+  () =>
+    import(
+      "@/modules/05_placement/components/probation/FormEvaluation/SubForm/Part2.vue"
+    )
+);
+const Part3 = defineAsyncComponent(
+  () =>
+    import(
+      "@/modules/05_placement/components/probation/FormEvaluation/SubForm/Part3.vue"
+    )
+);
+const Footer = defineAsyncComponent(
+  () =>
+    import(
+      "@/modules/05_placement/components/probation/FormEvaluation/Footer.vue"
+    )
+);
+const $q = useQuasar();
+const probationStore = useProbationDataStore();
+const { ratingColors } = probationStore;
+
+const list1_1 = [
+  { id: "1", label: "ผลผลิตของงานที่คาดหวัง 1" },
+  { id: "2", label: "ผลผลิตของงานที่คาดหวัง 2" },
+  { id: "3", label: "ผลผลิตของงานที่คาดหวัง 3" },
+  { id: "4", label: "ผลผลิตของงานที่คาดหวัง 4" },
+  { id: "5", label: "ผลผลิตของงานที่คาดหวัง 5" },
+];
+const list1_2 = [
+  { id: "1", label: "ผลผลิตของงานที่เกิดขึ้น 1" },
+  { id: "2", label: "ผลผลิตของงานที่เกิดขึ้น 2" },
+  { id: "3", label: "ผลผลิตของงานที่เกิดขึ้น 3" },
+  { id: "4", label: "ผลผลิตของงานที่เกิดขึ้น 4" },
+  { id: "5", label: "ผลผลิตของงานที่เกิดขึ้น 5" },
+];
+
+const etc_text = ref<any>(null);
+const text2_1 = ref<string>("");
+
+const model = ref<any>(0);
+const model1 = ref<any>(0);
+const model1_2 = ref<any>(0);
+const model1_3 = ref<any>(0);
+const model1_4 = ref<any>(0);
+const model1_5 = ref<any>(0);
+const model1_6 = ref<any>(0);
+const modelEtc = ref<any>(0);
+const text2_2 = ref<string>("");
+const etc = ref<any>(false);
+
+const mixin = useCounterMixin();
+const { date2Thai } = mixin;
+const dateToday = ref<Date>(new Date("10-10-2023"));
+const dateEnd = ref<Date>(new Date("12-10-2023"));
+const period = ref<number>(1);
+</script>
+
+<template>
+  <div class="row col-12 q-gutter-lg no-margin">
+    <div class="col-12 row">
+      <div class="col-12 text-top0 row items-center">
+        <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
+        วันเริ่มทดลองปฎิบัติหน้าที่ราชการ ตั้งแต่วันที่
+        <span class="text-black q-px-sm">{{ date2Thai(dateToday) }}</span>
+        ถึงวันที
+        <span class="text-black q-px-sm">{{ date2Thai(dateEnd) }}</span>
+      </div>
+      <div class="col-12 text-top0 row items-center">
+        <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
+        <span class="text-black q-px-sm">{{ "ครั้งที่" + period }}</span>
+        ระหว่างวันที่
+        <span class="text-black q-px-sm">{{ date2Thai(dateToday) }}</span>
+        ถึงวันที่
+        <span class="text-black q-px-sm">{{ date2Thai(dateEnd) }}</span>
+      </div>
+      <div class="col-12 q-pt-md">
+        <q-separator size="3px" color="grey-2" />
+      </div>
+    </div>
+
+    <div class="col-12 row">
+      <div class="col-12 text-top0 items-center">
+        <q-avatar class="bg-grey-2 q-mr-sm" size="28px">1</q-avatar>
+        ผลสัมฤทธิ์ของการทดลองปฏิบัติบัติหน้าที่ราชการ
+      </div>
+      <div class="col-12 text-top0 row items-center q-pl-lg">
+        <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
+        1.1 ความสำเร็จของงานที่ได้รับมอบหมาย
+      </div>
+      <div class="col-xs-12 col-sm-11 col-md-10 offset-md-1 text-top2">
+        1.ผลผลิตของงานที่คาดหวัง
+      </div>
+      <q-card flat bordered class="col-xs-12 col-sm-11 col-md-10 offset-md-1 q-pa-sm bg-grey-1">
+        <q-list dense v-for="(list, i) in list1_1" :key="i">
+          <q-item dense tag="label" v-ripple>
+            <q-item-section>
+              <q-item-label>{{ list.label }}</q-item-label>
+            </q-item-section>
+            <q-item-section side>
+              <q-rating v-model="model" :val="list.id" max="5" size="sm" color="grey" :color-selected="ratingColors"
+                label="ระดับการประเมินพฤติกรรม">
+                <template v-slot:tip-1>
+                  <q-tooltip>ต่ำกว่าความคาดหวังมาก</q-tooltip>
+                </template>
+                <template v-slot:tip-2>
+                  <q-tooltip>ต่ำกว่าความคาดหวังค่อนข้างมาก</q-tooltip>
+                </template>
+                <template v-slot:tip-3>
+                  <q-tooltip>เป็นไปตามความคาดหวัง</q-tooltip>
+                </template>
+                <template v-slot:tip-4>
+                  <q-tooltip>สูงว่าความคาดหวังค่อนข้างมาก</q-tooltip>
+                </template>
+                <template v-slot:tip-5>
+                  <q-tooltip>สูงกว่าความคาดหวังมาก</q-tooltip>
+                </template>
+              </q-rating>
+            </q-item-section>
+          </q-item>
+          <q-separator class="q-my-xs" v-if="i + 1 < list1_1.length" />
+        </q-list>
+      </q-card>
+    </div>
+    <div class="col-12 row">
+      <div class="col-12 text-top0 row items-center q-pl-lg">
+        <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
+        1.2 ความสำเร็จของงานที่ได้รับมอบหมาย
+      </div>
+      <div class="col-xs-12 col-sm-11 col-md-10 offset-md-1 text-top2">
+        1.ผลผลิตของงานที่เกิดขึ้น
+      </div>
+      <q-card flat bordered class="col-xs-12 col-sm-11 col-md-10 offset-md-1 q-pa-sm bg-grey-1">
+        <q-list dense v-for="(list, i) in list1_2" :key="i">
+          <q-item dense tag="label" v-ripple>
+            <q-item-section>
+              <!-- <q-item-label>{{ list.label }}</q-item-label> -->
+              <q-input outlined dense v-model="text2_1" class="col-xs-12 col-sm-11 col-md-10 offset-md-1" lazy-rules
+                type="textarea" label="ผลผลิตของงานที่เกิดขึ้นจริง" hide-bottom-space :row="1" />
+            </q-item-section>
+            <q-item-section side>
+              <q-rating v-model="model1" :val="list.id" max="5" size="sm" color="grey" :color-selected="ratingColors"
+                label="ระดับการประเมินพฤติกรรม">
+                <template v-slot:tip-1>
+                  <q-tooltip>ต่ำกว่าความคาดหวังมาก</q-tooltip>
+                </template>
+                <template v-slot:tip-2>
+                  <q-tooltip>ต่ำกว่าความคาดหวังค่อนข้างมาก</q-tooltip>
+                </template>
+                <template v-slot:tip-3>
+                  <q-tooltip>เป็นไปตามความคาดหวัง</q-tooltip>
+                </template>
+                <template v-slot:tip-4>
+                  <q-tooltip>สูงว่าความคาดหวังค่อนข้างมาก</q-tooltip>
+                </template>
+                <template v-slot:tip-5>
+                  <q-tooltip>สูงกว่าความคาดหวังมาก</q-tooltip>
+                </template>
+              </q-rating>
+            </q-item-section>
+          </q-item>
+          <q-separator class="q-my-xs" v-if="i + 1 < list1_2.length" />
+        </q-list>
+      </q-card>
+    </div>
+
+    <div class="col-12 row">
+      <q-card class="text-top0 col-12 q-pa-sm q-pl-lg">
+        <q-list dense>
+          <q-item dense tag="label" v-ripple>
+            <q-item-section>
+              <q-item-label>
+                <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
+                1.2. ความรู้ความสามารถ</q-item-label>
+            </q-item-section>
+            <q-item-section side>
+              <q-rating v-model="model1_2" max="5" size="sm" color="grey" :color-selected="ratingColors"
+                label="ระดับการประเมินพฤติกรรม">
+                <template v-slot:tip-1>
+                  <q-tooltip>ต่ำกว่าความคาดหวังมาก</q-tooltip>
+                </template>
+                <template v-slot:tip-2>
+                  <q-tooltip>ต่ำกว่าความคาดหวังค่อนข้างมาก</q-tooltip>
+                </template>
+                <template v-slot:tip-3>
+                  <q-tooltip>เป็นไปตามความคาดหวัง</q-tooltip>
+                </template>
+                <template v-slot:tip-4>
+                  <q-tooltip>สูงว่าความคาดหวังค่อนข้างมาก</q-tooltip>
+                </template>
+                <template v-slot:tip-5>
+                  <q-tooltip>สูงกว่าความคาดหวังมาก</q-tooltip>
+                </template>
+              </q-rating>
+            </q-item-section>
+          </q-item>
+        </q-list>
+      </q-card>
+
+      <q-card class="text-top0 col-12 q-pa-sm q-pl-lg">
+        <q-list dense>
+          <q-item dense tag="label" v-ripple>
+            <q-item-section>
+              <q-item-label>
+                <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
+                1.2. ทักษะ</q-item-label>
+            </q-item-section>
+            <q-item-section side>
+              <q-rating v-model="model1_2" max="5" size="sm" color="grey" :color-selected="ratingColors"
+                label="ระดับการประเมินพฤติกรรม">
+                <template v-slot:tip-1>
+                  <q-tooltip>ต่ำกว่าความคาดหวังมาก</q-tooltip>
+                </template>
+                <template v-slot:tip-2>
+                  <q-tooltip>ต่ำกว่าความคาดหวังค่อนข้างมาก</q-tooltip>
+                </template>
+                <template v-slot:tip-3>
+                  <q-tooltip>เป็นไปตามความคาดหวัง</q-tooltip>
+                </template>
+                <template v-slot:tip-4>
+                  <q-tooltip>สูงว่าความคาดหวังค่อนข้างมาก</q-tooltip>
+                </template>
+                <template v-slot:tip-5>
+                  <q-tooltip>สูงกว่าความคาดหวังมาก</q-tooltip>
+                </template>
+              </q-rating>
+            </q-item-section>
+          </q-item>
+        </q-list>
+      </q-card>
+
+      <q-card class="text-top0 col-12 q-pa-sm q-pl-lg">
+        <q-list dense>
+          <q-item dense tag="label" v-ripple>
+            <q-item-section>
+              <q-item-label>
+                <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
+                1.4. สมมรถนะ</q-item-label>
+            </q-item-section>
+            <q-item-section side>
+              <q-rating v-model="model1_2" max="5" size="sm" color="grey" :color-selected="ratingColors"
+                label="ระดับการประเมินพฤติกรรม">
+                <template v-slot:tip-1>
+                  <q-tooltip>ต่ำกว่าความคาดหวังมาก</q-tooltip>
+                </template>
+                <template v-slot:tip-2>
+                  <q-tooltip>ต่ำกว่าความคาดหวังค่อนข้างมาก</q-tooltip>
+                </template>
+                <template v-slot:tip-3>
+                  <q-tooltip>เป็นไปตามความคาดหวัง</q-tooltip>
+                </template>
+                <template v-slot:tip-4>
+                  <q-tooltip>สูงว่าความคาดหวังค่อนข้างมาก</q-tooltip>
+                </template>
+                <template v-slot:tip-5>
+                  <q-tooltip>สูงกว่าความคาดหวังมาก</q-tooltip>
+                </template>
+              </q-rating>
+            </q-item-section>
+          </q-item>
+        </q-list>
+      </q-card>
+
+      <q-card class="text-top0 col-12 q-pa-sm q-pl-lg">
+        <q-list dense>
+          <q-item dense tag="label" v-ripple>
+            <q-item-section>
+              <q-item-label>
+                <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
+                1.5. ความสามารถในการเรียนรู้งาน</q-item-label>
+            </q-item-section>
+            <q-item-section side>
+              <q-rating v-model="model1_2" max="5" size="sm" color="grey" :color-selected="ratingColors"
+                label="ระดับการประเมินพฤติกรรม">
+                <template v-slot:tip-1>
+                  <q-tooltip>ต่ำกว่าความคาดหวังมาก</q-tooltip>
+                </template>
+                <template v-slot:tip-2>
+                  <q-tooltip>ต่ำกว่าความคาดหวังค่อนข้างมาก</q-tooltip>
+                </template>
+                <template v-slot:tip-3>
+                  <q-tooltip>เป็นไปตามความคาดหวัง</q-tooltip>
+                </template>
+                <template v-slot:tip-4>
+                  <q-tooltip>สูงว่าความคาดหวังค่อนข้างมาก</q-tooltip>
+                </template>
+                <template v-slot:tip-5>
+                  <q-tooltip>สูงกว่าความคาดหวังมาก</q-tooltip>
+                </template>
+              </q-rating>
+            </q-item-section>
+          </q-item>
+        </q-list>
+      </q-card>
+
+      <q-card class="text-top0 col-12 q-pa-sm q-pl-lg">
+        <q-list dense>
+          <q-item dense tag="label" v-ripple>
+            <q-item-section>
+              <q-item-label>
+                <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
+                1.6. ความสามารถในการปรับใช้ความรู้กับงานในหน้าที่</q-item-label>
+            </q-item-section>
+            <q-item-section side>
+              <q-rating v-model="model1_2" max="5" size="sm" color="grey" :color-selected="ratingColors"
+                label="ระดับการประเมินพฤติกรรม">
+                <template v-slot:tip-1>
+                  <q-tooltip>ต่ำกว่าความคาดหวังมาก</q-tooltip>
+                </template>
+                <template v-slot:tip-2>
+                  <q-tooltip>ต่ำกว่าความคาดหวังค่อนข้างมาก</q-tooltip>
+                </template>
+                <template v-slot:tip-3>
+                  <q-tooltip>เป็นไปตามความคาดหวัง</q-tooltip>
+                </template>
+                <template v-slot:tip-4>
+                  <q-tooltip>สูงว่าความคาดหวังค่อนข้างมาก</q-tooltip>
+                </template>
+                <template v-slot:tip-5>
+                  <q-tooltip>สูงกว่าความคาดหวังมาก</q-tooltip>
+                </template>
+              </q-rating>
+            </q-item-section>
+          </q-item>
+        </q-list>
+      </q-card>
+
+      <q-card class="text-top0 col-12 q-pa-sm q-pl-lg">
+        <q-list dense>
+          <q-item dense tag="label" v-ripple>
+            <q-item-section>
+              <q-item-label>
+                <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
+                1.7. ความสำเร็จของงานที่ได้รับมอบหมาย</q-item-label>
+            </q-item-section>
+            <q-item-section side>
+              <q-rating v-model="model1_2" max="5" size="sm" color="grey" :color-selected="ratingColors"
+                label="ระดับการประเมินพฤติกรรม">
+                <template v-slot:tip-1>
+                  <q-tooltip>ต่ำกว่าความคาดหวังมาก</q-tooltip>
+                </template>
+                <template v-slot:tip-2>
+                  <q-tooltip>ต่ำกว่าความคาดหวังค่อนข้างมาก</q-tooltip>
+                </template>
+                <template v-slot:tip-3>
+                  <q-tooltip>เป็นไปตามความคาดหวัง</q-tooltip>
+                </template>
+                <template v-slot:tip-4>
+                  <q-tooltip>สูงว่าความคาดหวังค่อนข้างมาก</q-tooltip>
+                </template>
+                <template v-slot:tip-5>
+                  <q-tooltip>สูงกว่าความคาดหวังมาก</q-tooltip>
+                </template>
+              </q-rating>
+            </q-item-section>
+          </q-item>
+        </q-list>
+      </q-card>
+
+      <q-card class="text-top0 col-12 q-pa-sm q-pl-lg">
+        <q-list dense>
+          <q-item dense tag="label" v-ripple>
+            <q-item-section>
+              <q-item-label>
+                <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
+                1.8 อื่นๆ
+                <q-checkbox class="q-ml-sm" dense v-model="etc" /></q-item-label>
+            </q-item-section>
+          </q-item>
+        </q-list>
+      </q-card>
+
+      <q-card v-if="etc" class="text-top0 col-12 q-pa-sm q-mt-sm q-pl-lg">
+        <q-list dense>
+          <q-item dense tag="label" v-ripple>
+            <q-item-section class="q-ml-md">
+              <q-item-label>
+                <q-input v-model="etc_text" label="กรอกอื่นๆ" dense lazy-rules autogrow hide-bottom-space outlined
+                  class="bg-white" :rules="[
+                    (val) => (val && val.length > 0) || 'กรุณากรอกข้อความ',
+                  ]" />
+              </q-item-label>
+            </q-item-section>
+            <q-item-section side>
+              <q-rating v-model="modelEtc" max="5" size="sm" color="grey" :color-selected="ratingColors"
+                label="ระดับการประเมินพฤติกรรม">
+                <template v-slot:tip-1>
+                  <q-tooltip>ต่ำกว่าความคาดหวังมาก</q-tooltip>
+                </template>
+                <template v-slot:tip-2>
+                  <q-tooltip>ต่ำกว่าความคาดหวังค่อนข้างมาก</q-tooltip>
+                </template>
+                <template v-slot:tip-3>
+                  <q-tooltip>เป็นไปตามความคาดหวัง</q-tooltip>
+                </template>
+                <template v-slot:tip-4>
+                  <q-tooltip>สูงว่าความคาดหวังค่อนข้างมาก</q-tooltip>
+                </template>
+                <template v-slot:tip-5>
+                  <q-tooltip>สูงกว่าความคาดหวังมาก</q-tooltip>
+                </template>
+              </q-rating>
+            </q-item-section>
+          </q-item>
+        </q-list>
+      </q-card>
+
+    </div>
+
+    <div class="row col-12 q-gutter-lg no-margin">
+      <div class="col-12 row">
+        <div class="col-12 text-top0 row items-center q-pl-lg">
+          <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
+          จุดเด่น (ไม่เกิน 5 บรรทัด)
+        </div>
+        <q-input outlined dense v-model="text2_1" class="col-xs-12 col-sm-11 col-md-10 offset-md-1" lazy-rules
+          type="textarea" label="กรอกจุดเด่น" hide-bottom-space :row="5"
+          :rules="[(val) => (val && val.length > 0) || 'กรุณากรอกข้อความ']" />
+      </div>
+      <div class="col-12 row">
+        <div class="col-12 text-top0 row items-center q-pl-lg">
+          <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
+          สิ่งที่ควรปรับปรุง (ไม่เกิน 5 บรรทัด)
+        </div>
+        <q-input outlined dense v-model="text2_2" class="col-xs-12 col-sm-11 col-md-10 offset-md-1" lazy-rules
+          type="textarea" hide-bottom-space label="กรอกสิ่งที่ควรปรับปรุง" :row="5"
+          :rules="[(val) => (val && val.length > 0) || 'กรุณากรอกข้อความ']" />
+      </div>
+    </div>
+
+    <!-- Part 2 -->
+    <Part2 />
+
+    <!-- Part 3 -->
+    <Part3 />
+
+    <!-- Footer -->
+    <Footer />
+
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.text-top2 {
+  font-weight: 500;
+  padding-bottom: 8px;
+  color: rgb(70, 68, 68);
+}
+
+.text-top0 {
+  font-weight: 600;
+  padding-bottom: 8px;
+  color: rgb(70, 68, 68);
+}
+
+.q-rating__icon {
+  text-shadow: transparent !important;
+}
+
+.q-card {
+  box-shadow: 0px 0px 0px 0px !important;
+}
+</style>

src/modules/05_placement/components/probation/FormEvaluation/Header.vue

@@ -0,0 +1,115 @@
+<script setup lang="ts">
+import { ref, watch } from "vue";
+const tabHead = ref<string>("save1");
+
+const props = defineProps({
+  changeTab: {
+    type: Function,
+    default() {
+      return 'Default function'
+    }
+  }
+})
+
+watch(tabHead, () => {
+  props.changeTab(tabHead.value)
+});
+</script>
+
+<template>
+      <q-header class="bg-grey-1">
+    <div class="bg-grey-1">
+      <div class="col-12 row q-gutter-x-md items-center">
+        <q-tabs
+          dense
+          v-model="tabHead"
+          active-class="text-primary text-weight-medium"
+          indicator-color="grey-1"
+          class="text-grey-7"
+        >
+          <q-tab name="save1" label="บันทึกผลครั้งที่ 1" />
+          <q-btn
+            size="12px"
+            flat
+            dense
+            icon="mdi-download"
+            :disable="tabHead !== 'save1'"
+            :color="tabHead !== 'save1' ? 'grey' : 'add'"
+          >
+            <q-tooltip>ดาวน์โหลด</q-tooltip>
+            <q-menu>
+              <q-list style="min-width: 150px">
+                <q-item clickable v-close-popup>
+                  <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>
+                  <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-tab name="save2" label="บันทึกผลครั้งที่ 2" />
+          <q-btn
+            size="12px"
+            flat
+            dense
+            icon="mdi-download"
+            :disable="tabHead !== 'save2'"
+            :color="tabHead !== 'save2' ? 'grey' : 'add'"
+          >
+            <q-tooltip>ดาวน์โหลด</q-tooltip>
+            <q-menu>
+              <q-list style="min-width: 150px">
+                <q-item clickable v-close-popup>
+                  <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>
+                  <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-tab name="save3" label="บันทึกผลครั้งที่ 3" />
+            <q-btn size="12px" flat dense icon="mdi-download" :disable="tab !== 'save3'"
+                :color="tab !== 'save3' ? 'grey' : 'add'">
+                <q-tooltip>ดาวน์โหลด</q-tooltip>
+                <q-menu>
+                    <q-list style="min-width: 150px">
+                        <q-item clickable v-close-popup>
+                            <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>
+                            <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-tabs>
+        <div>
+          <q-btn color="blue" flat dense icon="mdi-plus">
+            <q-tooltip> เพิ่มบันทึกผลการทดลอง </q-tooltip>
+          </q-btn>
+        </div>
+      </div>
+      <q-separator />
+    </div>
+  </q-header>
+
+</template>

src/modules/05_placement/components/probation/FormEvaluation/SubForm/Part1.vue

@@ -0,0 +1,432 @@
+<script setup lang="ts">
+import { ref, defineAsyncComponent } from "vue";
+
+import { useQuasar } from "quasar";
+
+import { useProbationDataStore } from "@/modules/05_placement/store";
+
+const PartHighlightImprove = defineAsyncComponent(
+  () =>
+    import(
+      "@/modules/05_placement/components/probation/FormEvaluation/SubForm/PartHighlightImprove.vue"
+    )
+);
+
+const $q = useQuasar();
+const probationStore = useProbationDataStore();
+const { ratingColors } = probationStore;
+
+const list1_1 = [
+  { id: "1", label: "ผลผลิตของงานที่คาดหวัง 1" },
+  { id: "2", label: "ผลผลิตของงานที่คาดหวัง 2" },
+  { id: "3", label: "ผลผลิตของงานที่คาดหวัง 3" },
+  { id: "4", label: "ผลผลิตของงานที่คาดหวัง 4" },
+  { id: "5", label: "ผลผลิตของงานที่คาดหวัง 5" },
+];
+const list1_2 = [
+  { id: "1", label: "ผลผลิตของงานที่เกิดขึ้น 1" },
+  { id: "2", label: "ผลผลิตของงานที่เกิดขึ้น 2" },
+  { id: "3", label: "ผลผลิตของงานที่เกิดขึ้น 3" },
+  { id: "4", label: "ผลผลิตของงานที่เกิดขึ้น 4" },
+  { id: "5", label: "ผลผลิตของงานที่เกิดขึ้น 5" },
+];
+
+const etc_text = ref<any>(null);
+const text2_1 = ref<string>("");
+
+const model = ref<any>(0);
+const model1 = ref<any>(0);
+const model1_2 = ref<any>(0);
+const model1_3 = ref<any>(0);
+const model1_4 = ref<any>(0);
+const model1_5 = ref<any>(0);
+const model1_6 = ref<any>(0);
+const modelEtc = ref<any>(0);
+const etc = ref<any>(false);
+</script>
+
+<template>
+  <div class="row col-12 q-gutter-lg no-margin">
+    <div class="col-12 row">
+      <div class="col-12 text-top0 items-center">
+        <q-avatar class="bg-grey-2 q-mr-sm" size="28px">1</q-avatar>
+        ผลสัมฤทธิ์ของการทดลองปฏิบัติบัติหน้าที่ราชการ
+      </div>
+      <div class="col-12 text-top0 row items-center q-pl-lg">
+        <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
+        1.1 ความสำเร็จของงานที่ได้รับมอบหมาย
+      </div>
+      <div class="col-xs-12 col-sm-11 col-md-10 offset-md-1 text-top2">
+        1.ผลผลิตของงานที่คาดหวัง
+      </div>
+      <q-card
+        flat
+        bordered
+        class="col-xs-12 col-sm-11 col-md-10 offset-md-1 q-pa-sm bg-grey-1"
+      >
+        <q-list dense v-for="(list, i) in list1_1" :key="i">
+          <q-item dense tag="label" v-ripple>
+            <q-item-section>
+              <q-item-label>{{ list.label }}</q-item-label>
+            </q-item-section>
+            <q-item-section side>
+              <q-rating
+                v-model="model"
+                :val="list.id"
+                max="5"
+                size="sm"
+                color="grey"
+                :color-selected="ratingColors"
+                label="ระดับการประเมินพฤติกรรม"
+              >
+                <template v-slot:tip-1>
+                  <q-tooltip>ต่ำกว่าความคาดหวังมาก</q-tooltip>
+                </template>
+                <template v-slot:tip-2>
+                  <q-tooltip>ต่ำกว่าความคาดหวังค่อนข้างมาก</q-tooltip>
+                </template>
+                <template v-slot:tip-3>
+                  <q-tooltip>เป็นไปตามความคาดหวัง</q-tooltip>
+                </template>
+                <template v-slot:tip-4>
+                  <q-tooltip>สูงว่าความคาดหวังค่อนข้างมาก</q-tooltip>
+                </template>
+                <template v-slot:tip-5>
+                  <q-tooltip>สูงกว่าความคาดหวังมาก</q-tooltip>
+                </template>
+              </q-rating>
+            </q-item-section>
+          </q-item>
+          <q-separator class="q-my-xs" v-if="i + 1 < list1_1.length" />
+        </q-list>
+      </q-card>
+    </div>
+    <div class="col-12 row">
+      <div class="col-12 text-top0 row items-center q-pl-lg">
+        <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
+        1.2 ความสำเร็จของงานที่ได้รับมอบหมาย
+      </div>
+      <div class="col-xs-12 col-sm-11 col-md-10 offset-md-1 text-top2">
+        1.ผลผลิตของงานที่เกิดขึ้น
+      </div>
+      <q-card
+        flat
+        bordered
+        class="col-xs-12 col-sm-11 col-md-10 offset-md-1 q-pa-sm bg-grey-1"
+      >
+        <q-list dense v-for="(list, i) in list1_2" :key="i">
+          <q-item dense tag="label" v-ripple>
+            <q-item-section>
+              <!-- <q-item-label>{{ list.label }}</q-item-label> -->
+              <q-input
+                outlined
+                dense
+                v-model="text2_1"
+                class="col-xs-12 col-sm-11 col-md-10 offset-md-1"
+                lazy-rules
+                type="textarea"
+                label="ผลผลิตของงานที่เกิดขึ้นจริง"
+                hide-bottom-space
+                :row="1"
+              />
+            </q-item-section>
+            <q-item-section side>
+              <q-rating
+                v-model="model1"
+                :val="list.id"
+                max="5"
+                size="sm"
+                color="grey"
+                :color-selected="ratingColors"
+                label="ระดับการประเมินพฤติกรรม"
+              >
+                <template v-slot:tip-1>
+                  <q-tooltip>ต่ำกว่าความคาดหวังมาก</q-tooltip>
+                </template>
+                <template v-slot:tip-2>
+                  <q-tooltip>ต่ำกว่าความคาดหวังค่อนข้างมาก</q-tooltip>
+                </template>
+                <template v-slot:tip-3>
+                  <q-tooltip>เป็นไปตามความคาดหวัง</q-tooltip>
+                </template>
+                <template v-slot:tip-4>
+                  <q-tooltip>สูงว่าความคาดหวังค่อนข้างมาก</q-tooltip>
+                </template>
+                <template v-slot:tip-5>
+                  <q-tooltip>สูงกว่าความคาดหวังมาก</q-tooltip>
+                </template>
+              </q-rating>
+            </q-item-section>
+          </q-item>
+          <q-separator class="q-my-xs" v-if="i + 1 < list1_2.length" />
+        </q-list>
+      </q-card>
+    </div>
+
+    <div class="col-12 row">
+      <q-card class="text-top0 col-12 q-pa-sm q-pl-lg">
+        <q-list dense>
+          <q-item dense tag="label" v-ripple>
+            <q-item-section>
+              <q-item-label>
+                <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
+                1.2. ความรู้ความสามารถ</q-item-label>
+            </q-item-section>
+            <q-item-section side>
+              <q-rating v-model="model1_2" max="5" size="sm" color="grey" :color-selected="ratingColors"
+                label="ระดับการประเมินพฤติกรรม">
+                <template v-slot:tip-1>
+                  <q-tooltip>ต่ำกว่าความคาดหวังมาก</q-tooltip>
+                </template>
+                <template v-slot:tip-2>
+                  <q-tooltip>ต่ำกว่าความคาดหวังค่อนข้างมาก</q-tooltip>
+                </template>
+                <template v-slot:tip-3>
+                  <q-tooltip>เป็นไปตามความคาดหวัง</q-tooltip>
+                </template>
+                <template v-slot:tip-4>
+                  <q-tooltip>สูงว่าความคาดหวังค่อนข้างมาก</q-tooltip>
+                </template>
+                <template v-slot:tip-5>
+                  <q-tooltip>สูงกว่าความคาดหวังมาก</q-tooltip>
+                </template>
+              </q-rating>
+            </q-item-section>
+          </q-item>
+        </q-list>
+      </q-card>
+
+      <q-card class="text-top0 col-12 q-pa-sm q-pl-lg">
+        <q-list dense>
+          <q-item dense tag="label" v-ripple>
+            <q-item-section>
+              <q-item-label>
+                <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
+                1.2. ทักษะ</q-item-label>
+            </q-item-section>
+            <q-item-section side>
+              <q-rating v-model="model1_2" max="5" size="sm" color="grey" :color-selected="ratingColors"
+                label="ระดับการประเมินพฤติกรรม">
+                <template v-slot:tip-1>
+                  <q-tooltip>ต่ำกว่าความคาดหวังมาก</q-tooltip>
+                </template>
+                <template v-slot:tip-2>
+                  <q-tooltip>ต่ำกว่าความคาดหวังค่อนข้างมาก</q-tooltip>
+                </template>
+                <template v-slot:tip-3>
+                  <q-tooltip>เป็นไปตามความคาดหวัง</q-tooltip>
+                </template>
+                <template v-slot:tip-4>
+                  <q-tooltip>สูงว่าความคาดหวังค่อนข้างมาก</q-tooltip>
+                </template>
+                <template v-slot:tip-5>
+                  <q-tooltip>สูงกว่าความคาดหวังมาก</q-tooltip>
+                </template>
+              </q-rating>
+            </q-item-section>
+          </q-item>
+        </q-list>
+      </q-card>
+
+      <q-card class="text-top0 col-12 q-pa-sm q-pl-lg">
+        <q-list dense>
+          <q-item dense tag="label" v-ripple>
+            <q-item-section>
+              <q-item-label>
+                <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
+                1.4. สมมรถนะ</q-item-label>
+            </q-item-section>
+            <q-item-section side>
+              <q-rating v-model="model1_2" max="5" size="sm" color="grey" :color-selected="ratingColors"
+                label="ระดับการประเมินพฤติกรรม">
+                <template v-slot:tip-1>
+                  <q-tooltip>ต่ำกว่าความคาดหวังมาก</q-tooltip>
+                </template>
+                <template v-slot:tip-2>
+                  <q-tooltip>ต่ำกว่าความคาดหวังค่อนข้างมาก</q-tooltip>
+                </template>
+                <template v-slot:tip-3>
+                  <q-tooltip>เป็นไปตามความคาดหวัง</q-tooltip>
+                </template>
+                <template v-slot:tip-4>
+                  <q-tooltip>สูงว่าความคาดหวังค่อนข้างมาก</q-tooltip>
+                </template>
+                <template v-slot:tip-5>
+                  <q-tooltip>สูงกว่าความคาดหวังมาก</q-tooltip>
+                </template>
+              </q-rating>
+            </q-item-section>
+          </q-item>
+        </q-list>
+      </q-card>
+
+      <q-card class="text-top0 col-12 q-pa-sm q-pl-lg">
+        <q-list dense>
+          <q-item dense tag="label" v-ripple>
+            <q-item-section>
+              <q-item-label>
+                <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
+                1.5. ความสามารถในการเรียนรู้งาน</q-item-label>
+            </q-item-section>
+            <q-item-section side>
+              <q-rating v-model="model1_2" max="5" size="sm" color="grey" :color-selected="ratingColors"
+                label="ระดับการประเมินพฤติกรรม">
+                <template v-slot:tip-1>
+                  <q-tooltip>ต่ำกว่าความคาดหวังมาก</q-tooltip>
+                </template>
+                <template v-slot:tip-2>
+                  <q-tooltip>ต่ำกว่าความคาดหวังค่อนข้างมาก</q-tooltip>
+                </template>
+                <template v-slot:tip-3>
+                  <q-tooltip>เป็นไปตามความคาดหวัง</q-tooltip>
+                </template>
+                <template v-slot:tip-4>
+                  <q-tooltip>สูงว่าความคาดหวังค่อนข้างมาก</q-tooltip>
+                </template>
+                <template v-slot:tip-5>
+                  <q-tooltip>สูงกว่าความคาดหวังมาก</q-tooltip>
+                </template>
+              </q-rating>
+            </q-item-section>
+          </q-item>
+        </q-list>
+      </q-card>
+
+      <q-card class="text-top0 col-12 q-pa-sm q-pl-lg">
+        <q-list dense>
+          <q-item dense tag="label" v-ripple>
+            <q-item-section>
+              <q-item-label>
+                <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
+                1.6. ความสามารถในการปรับใช้ความรู้กับงานในหน้าที่</q-item-label>
+            </q-item-section>
+            <q-item-section side>
+              <q-rating v-model="model1_2" max="5" size="sm" color="grey" :color-selected="ratingColors"
+                label="ระดับการประเมินพฤติกรรม">
+                <template v-slot:tip-1>
+                  <q-tooltip>ต่ำกว่าความคาดหวังมาก</q-tooltip>
+                </template>
+                <template v-slot:tip-2>
+                  <q-tooltip>ต่ำกว่าความคาดหวังค่อนข้างมาก</q-tooltip>
+                </template>
+                <template v-slot:tip-3>
+                  <q-tooltip>เป็นไปตามความคาดหวัง</q-tooltip>
+                </template>
+                <template v-slot:tip-4>
+                  <q-tooltip>สูงว่าความคาดหวังค่อนข้างมาก</q-tooltip>
+                </template>
+                <template v-slot:tip-5>
+                  <q-tooltip>สูงกว่าความคาดหวังมาก</q-tooltip>
+                </template>
+              </q-rating>
+            </q-item-section>
+          </q-item>
+        </q-list>
+      </q-card>
+
+      <q-card class="text-top0 col-12 q-pa-sm q-pl-lg">
+        <q-list dense>
+          <q-item dense tag="label" v-ripple>
+            <q-item-section>
+              <q-item-label>
+                <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
+                1.7. ความสำเร็จของงานที่ได้รับมอบหมาย</q-item-label>
+            </q-item-section>
+            <q-item-section side>
+              <q-rating v-model="model1_2" max="5" size="sm" color="grey" :color-selected="ratingColors"
+                label="ระดับการประเมินพฤติกรรม">
+                <template v-slot:tip-1>
+                  <q-tooltip>ต่ำกว่าความคาดหวังมาก</q-tooltip>
+                </template>
+                <template v-slot:tip-2>
+                  <q-tooltip>ต่ำกว่าความคาดหวังค่อนข้างมาก</q-tooltip>
+                </template>
+                <template v-slot:tip-3>
+                  <q-tooltip>เป็นไปตามความคาดหวัง</q-tooltip>
+                </template>
+                <template v-slot:tip-4>
+                  <q-tooltip>สูงว่าความคาดหวังค่อนข้างมาก</q-tooltip>
+                </template>
+                <template v-slot:tip-5>
+                  <q-tooltip>สูงกว่าความคาดหวังมาก</q-tooltip>
+                </template>
+              </q-rating>
+            </q-item-section>
+          </q-item>
+        </q-list>
+      </q-card>
+
+      <q-card class="text-top0 col-12 q-pa-sm q-pl-lg">
+        <q-list dense>
+          <q-item dense tag="label" v-ripple>
+            <q-item-section>
+              <q-item-label>
+                <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
+                1.8 อื่นๆ
+                <q-checkbox class="q-ml-sm" dense v-model="etc" /></q-item-label>
+            </q-item-section>
+          </q-item>
+        </q-list>
+      </q-card>
+
+      <q-card v-if="etc" class="text-top0 col-12 q-pa-sm q-mt-sm q-pl-lg">
+        <q-list dense>
+          <q-item dense tag="label" v-ripple>
+            <q-item-section class="q-ml-md">
+              <q-item-label>
+                <q-input v-model="etc_text" label="กรอกอื่นๆ" dense lazy-rules autogrow hide-bottom-space outlined
+                  class="bg-white" :rules="[
+                    (val) => (val && val.length > 0) || 'กรุณากรอกข้อความ',
+                  ]" />
+              </q-item-label>
+            </q-item-section>
+            <q-item-section side>
+              <q-rating v-model="modelEtc" max="5" size="sm" color="grey" :color-selected="ratingColors"
+                label="ระดับการประเมินพฤติกรรม">
+                <template v-slot:tip-1>
+                  <q-tooltip>ต่ำกว่าความคาดหวังมาก</q-tooltip>
+                </template>
+                <template v-slot:tip-2>
+                  <q-tooltip>ต่ำกว่าความคาดหวังค่อนข้างมาก</q-tooltip>
+                </template>
+                <template v-slot:tip-3>
+                  <q-tooltip>เป็นไปตามความคาดหวัง</q-tooltip>
+                </template>
+                <template v-slot:tip-4>
+                  <q-tooltip>สูงว่าความคาดหวังค่อนข้างมาก</q-tooltip>
+                </template>
+                <template v-slot:tip-5>
+                  <q-tooltip>สูงกว่าความคาดหวังมาก</q-tooltip>
+                </template>
+              </q-rating>
+            </q-item-section>
+          </q-item>
+        </q-list>
+      </q-card>
+
+    </div>
+
+    <PartHighlightImprove />
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.text-top2 {
+  font-weight: 500;
+  padding-bottom: 8px;
+  color: rgb(70, 68, 68);
+}
+
+.text-top0 {
+  font-weight: 600;
+  padding-bottom: 8px;
+  color: rgb(70, 68, 68);
+}
+
+.q-rating__icon {
+  text-shadow: transparent !important;
+}
+.q-card {
+    box-shadow: 0px 0px 0px 0px !important;
+}
+</style>

src/modules/05_placement/components/probation/FormEvaluation/SubForm/Part1Template2.vue

@@ -0,0 +1,312 @@
+<template>
+  <div class="row col-12 q-gutter-lg no-margin">
+    <div class="col-12 row">
+      <div class="col-12 text-top0 items-center">
+        <q-avatar class="bg-grey-2 q-mr-sm" size="28px">1</q-avatar>
+        ผลสัมฤทธิ์ของการทดลองปฏิบัติบัติหน้าที่ราชการ
+      </div>
+    </div>
+    <div class="col-12 row no-margin">
+      <q-card class="text-top0 col-12 q-pa-sm q-pl-lg">
+        <q-list dense>
+          <q-item dense tag="label" v-ripple>
+            <q-item-section>
+              <q-item-label>
+                <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
+                1.1. ความรู้ความสามารถ</q-item-label>
+            </q-item-section>
+            <q-item-section side>
+              <q-rating v-model="model1_2" max="5" size="sm" color="grey" :color-selected="ratingColors"
+                label="ระดับการประเมินพฤติกรรม">
+                <template v-slot:tip-1>
+                  <q-tooltip>ต่ำกว่าความคาดหวังมาก</q-tooltip>
+                </template>
+                <template v-slot:tip-2>
+                  <q-tooltip>ต่ำกว่าความคาดหวังค่อนข้างมาก</q-tooltip>
+                </template>
+                <template v-slot:tip-3>
+                  <q-tooltip>เป็นไปตามความคาดหวัง</q-tooltip>
+                </template>
+                <template v-slot:tip-4>
+                  <q-tooltip>สูงว่าความคาดหวังค่อนข้างมาก</q-tooltip>
+                </template>
+                <template v-slot:tip-5>
+                  <q-tooltip>สูงกว่าความคาดหวังมาก</q-tooltip>
+                </template>
+              </q-rating>
+            </q-item-section>
+          </q-item>
+        </q-list>
+      </q-card>
+
+      <q-card class="text-top0 col-12 q-pa-sm q-pl-lg">
+        <q-list dense>
+          <q-item dense tag="label" v-ripple>
+            <q-item-section>
+              <q-item-label>
+                <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
+                1.2. ทักษะ</q-item-label>
+            </q-item-section>
+            <q-item-section side>
+              <q-rating v-model="model1_2" max="5" size="sm" color="grey" :color-selected="ratingColors"
+                label="ระดับการประเมินพฤติกรรม">
+                <template v-slot:tip-1>
+                  <q-tooltip>ต่ำกว่าความคาดหวังมาก</q-tooltip>
+                </template>
+                <template v-slot:tip-2>
+                  <q-tooltip>ต่ำกว่าความคาดหวังค่อนข้างมาก</q-tooltip>
+                </template>
+                <template v-slot:tip-3>
+                  <q-tooltip>เป็นไปตามความคาดหวัง</q-tooltip>
+                </template>
+                <template v-slot:tip-4>
+                  <q-tooltip>สูงว่าความคาดหวังค่อนข้างมาก</q-tooltip>
+                </template>
+                <template v-slot:tip-5>
+                  <q-tooltip>สูงกว่าความคาดหวังมาก</q-tooltip>
+                </template>
+              </q-rating>
+            </q-item-section>
+          </q-item>
+        </q-list>
+      </q-card>
+
+      <q-card class="text-top0 col-12 q-pa-sm q-pl-lg">
+        <q-list dense>
+          <q-item dense tag="label" v-ripple>
+            <q-item-section>
+              <q-item-label>
+                <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
+                1.3. สมมรถนะ</q-item-label>
+            </q-item-section>
+            <q-item-section side>
+              <q-rating v-model="model1_2" max="5" size="sm" color="grey" :color-selected="ratingColors"
+                label="ระดับการประเมินพฤติกรรม">
+                <template v-slot:tip-1>
+                  <q-tooltip>ต่ำกว่าความคาดหวังมาก</q-tooltip>
+                </template>
+                <template v-slot:tip-2>
+                  <q-tooltip>ต่ำกว่าความคาดหวังค่อนข้างมาก</q-tooltip>
+                </template>
+                <template v-slot:tip-3>
+                  <q-tooltip>เป็นไปตามความคาดหวัง</q-tooltip>
+                </template>
+                <template v-slot:tip-4>
+                  <q-tooltip>สูงว่าความคาดหวังค่อนข้างมาก</q-tooltip>
+                </template>
+                <template v-slot:tip-5>
+                  <q-tooltip>สูงกว่าความคาดหวังมาก</q-tooltip>
+                </template>
+              </q-rating>
+            </q-item-section>
+          </q-item>
+        </q-list>
+      </q-card>
+
+      <q-card class="text-top0 col-12 q-pa-sm q-pl-lg">
+        <q-list dense>
+          <q-item dense tag="label" v-ripple>
+            <q-item-section>
+              <q-item-label>
+                <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
+                1.4. ความสามารถในการเรียนรู้งาน</q-item-label>
+            </q-item-section>
+            <q-item-section side>
+              <q-rating v-model="model1_2" max="5" size="sm" color="grey" :color-selected="ratingColors"
+                label="ระดับการประเมินพฤติกรรม">
+                <template v-slot:tip-1>
+                  <q-tooltip>ต่ำกว่าความคาดหวังมาก</q-tooltip>
+                </template>
+                <template v-slot:tip-2>
+                  <q-tooltip>ต่ำกว่าความคาดหวังค่อนข้างมาก</q-tooltip>
+                </template>
+                <template v-slot:tip-3>
+                  <q-tooltip>เป็นไปตามความคาดหวัง</q-tooltip>
+                </template>
+                <template v-slot:tip-4>
+                  <q-tooltip>สูงว่าความคาดหวังค่อนข้างมาก</q-tooltip>
+                </template>
+                <template v-slot:tip-5>
+                  <q-tooltip>สูงกว่าความคาดหวังมาก</q-tooltip>
+                </template>
+              </q-rating>
+            </q-item-section>
+          </q-item>
+        </q-list>
+      </q-card>
+
+      <q-card class="text-top0 col-12 q-pa-sm q-mt-sm q-pl-lg">
+        <q-list dense>
+          <q-item dense tag="label" v-ripple>
+            <q-item-section>
+              <q-item-label>
+                <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
+                1.5. ความสามารถในการปรับใช้ความรู้กับงานในหน้าที่</q-item-label>
+            </q-item-section>
+            <q-item-section side>
+              <q-rating v-model="model1_2" max="5" size="sm" color="grey" :color-selected="ratingColors"
+                label="ระดับการประเมินพฤติกรรม">
+                <template v-slot:tip-1>
+                  <q-tooltip>ต่ำกว่าความคาดหวังมาก</q-tooltip>
+                </template>
+                <template v-slot:tip-2>
+                  <q-tooltip>ต่ำกว่าความคาดหวังค่อนข้างมาก</q-tooltip>
+                </template>
+                <template v-slot:tip-3>
+                  <q-tooltip>เป็นไปตามความคาดหวัง</q-tooltip>
+                </template>
+                <template v-slot:tip-4>
+                  <q-tooltip>สูงว่าความคาดหวังค่อนข้างมาก</q-tooltip>
+                </template>
+                <template v-slot:tip-5>
+                  <q-tooltip>สูงกว่าความคาดหวังมาก</q-tooltip>
+                </template>
+              </q-rating>
+            </q-item-section>
+          </q-item>
+        </q-list>
+      </q-card>
+
+      <q-card class="text-top0 col-12 q-pa-sm q-pl-lg">
+        <q-list dense>
+          <q-item dense tag="label" v-ripple>
+            <q-item-section>
+              <q-item-label>
+                <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
+                1.6. ความสำเร็จของงานที่ได้รับมอบหมาย</q-item-label>
+            </q-item-section>
+            <q-item-section side>
+              <q-rating v-model="model1_2" max="5" size="sm" color="grey" :color-selected="ratingColors"
+                label="ระดับการประเมินพฤติกรรม">
+                <template v-slot:tip-1>
+                  <q-tooltip>ต่ำกว่าความคาดหวังมาก</q-tooltip>
+                </template>
+                <template v-slot:tip-2>
+                  <q-tooltip>ต่ำกว่าความคาดหวังค่อนข้างมาก</q-tooltip>
+                </template>
+                <template v-slot:tip-3>
+                  <q-tooltip>เป็นไปตามความคาดหวัง</q-tooltip>
+                </template>
+                <template v-slot:tip-4>
+                  <q-tooltip>สูงว่าความคาดหวังค่อนข้างมาก</q-tooltip>
+                </template>
+                <template v-slot:tip-5>
+                  <q-tooltip>สูงกว่าความคาดหวังมาก</q-tooltip>
+                </template>
+              </q-rating>
+            </q-item-section>
+          </q-item>
+        </q-list>
+      </q-card>
+
+      <q-card class="text-top0 col-12 q-pa-sm q-pl-lg">
+        <q-list dense>
+          <q-item dense tag="label" v-ripple>
+            <q-item-section>
+              <q-item-label>
+                <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
+                1.7 อื่นๆ
+                <q-checkbox class="q-ml-sm" dense v-model="etc" /></q-item-label>
+            </q-item-section>
+          </q-item>
+        </q-list>
+      </q-card>
+
+      <q-card v-if="etc" class="text-top0 col-12 q-pa-sm q-mt-sm q-pl-lg">
+        <q-list dense>
+          <q-item dense tag="label" v-ripple>
+            <q-item-section class="q-ml-md">
+              <q-item-label>
+                <q-input v-model="etc_text" label="กรอกอื่นๆ" dense lazy-rules autogrow hide-bottom-space outlined
+                  class="bg-white" :rules="[
+                    (val) => (val && val.length > 0) || 'กรุณากรอกข้อความ',
+                  ]" />
+              </q-item-label>
+            </q-item-section>
+            <q-item-section side>
+              <q-rating v-model="modelEtc" max="5" size="sm" color="grey" :color-selected="ratingColors"
+                label="ระดับการประเมินพฤติกรรม">
+                <template v-slot:tip-1>
+                  <q-tooltip>ต่ำกว่าความคาดหวังมาก</q-tooltip>
+                </template>
+                <template v-slot:tip-2>
+                  <q-tooltip>ต่ำกว่าความคาดหวังค่อนข้างมาก</q-tooltip>
+                </template>
+                <template v-slot:tip-3>
+                  <q-tooltip>เป็นไปตามความคาดหวัง</q-tooltip>
+                </template>
+                <template v-slot:tip-4>
+                  <q-tooltip>สูงว่าความคาดหวังค่อนข้างมาก</q-tooltip>
+                </template>
+                <template v-slot:tip-5>
+                  <q-tooltip>สูงกว่าความคาดหวังมาก</q-tooltip>
+                </template>
+              </q-rating>
+            </q-item-section>
+          </q-item>
+        </q-list>
+      </q-card>
+
+    </div>
+  </div>
+</template>
+<script setup lang="ts">
+import { ref, defineAsyncComponent } from "vue";
+
+import { useQuasar } from "quasar";
+
+import { useProbationDataStore } from "@/modules/05_placement/store";
+
+const $q = useQuasar();
+const probationStore = useProbationDataStore();
+const { ratingColors } = probationStore;
+
+const list1_1 = [
+  { id: "1", label: "ผลผลิตของงานที่คาดหวัง 1" },
+  { id: "2", label: "ผลผลิตของงานที่คาดหวัง 2" },
+  { id: "3", label: "ผลผลิตของงานที่คาดหวัง 3" },
+  { id: "4", label: "ผลผลิตของงานที่คาดหวัง 4" },
+  { id: "5", label: "ผลผลิตของงานที่คาดหวัง 5" },
+];
+const list1_2 = [
+  { id: "1", label: "ผลผลิตของงานที่เกิดขึ้น 1" },
+  { id: "2", label: "ผลผลิตของงานที่เกิดขึ้น 2" },
+  { id: "3", label: "ผลผลิตของงานที่เกิดขึ้น 3" },
+  { id: "4", label: "ผลผลิตของงานที่เกิดขึ้น 4" },
+  { id: "5", label: "ผลผลิตของงานที่เกิดขึ้น 5" },
+];
+
+const etc_text = ref<any>(null);
+const text2_1 = ref<string>("");
+
+const model = ref<any>(0);
+const model1 = ref<any>(0);
+const model1_2 = ref<any>(0);
+const model1_3 = ref<any>(0);
+const model1_4 = ref<any>(0);
+const model1_5 = ref<any>(0);
+const model1_6 = ref<any>(0);
+const modelEtc = ref<any>(0);
+const etc = ref<any>(false);
+</script>
+
+<style lang="scss" scoped>
+.text-top2 {
+  font-weight: 500;
+  padding-bottom: 8px;
+  color: rgb(70, 68, 68);
+}
+
+.text-top0 {
+  font-weight: 600;
+  padding-bottom: 8px;
+  color: rgb(70, 68, 68);
+}
+
+.q-rating__icon {
+  text-shadow: transparent !important;
+}
+.q-card {
+    box-shadow: 0px 0px 0px 0px !important;
+}
+</style>

src/modules/05_placement/components/probation/FormEvaluation/SubForm/Part2.vue

@@ -0,0 +1,289 @@
+<template>
+  <div class="row col-12 q-gutter-lg no-margin">
+    <div class="col-12 row">
+      <div class="col-12 text-top0 items-center">
+        <q-avatar class="bg-grey-2 q-mr-sm" size="28px">2</q-avatar>
+        พฤติกรรมของผู้ทดลองปฏิบัติบัติหน้าที่ราชการ
+      </div>
+      <div class="col-12 text-top0 row items-center q-pl-lg">
+        <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
+        2.1 ความประพฤติ
+      </div>
+      <q-card
+        flat
+        bordered
+        class="col-xs-12 col-sm-11 col-md-10 offset-md-1 q-pa-sm bg-grey-1"
+      >
+        <q-list dense v-for="(list, i) in list2_1" :key="i">
+          <q-item dense tag="label" v-ripple>
+            <q-item-section>
+              <q-item-label>{{ list.label }}</q-item-label>
+            </q-item-section>
+            <q-item-section side>
+              <q-rating
+                v-model="model"
+                :val="list.id"
+                max="5"
+                size="sm"
+                color="grey"
+                :color-selected="ratingColors"
+                label="ระดับการประเมินพฤติกรรม"
+              >
+                <template v-slot:tip-1>
+                  <q-tooltip>ต่ำกว่าความคาดหวังมาก</q-tooltip>
+                </template>
+                <template v-slot:tip-2>
+                  <q-tooltip>ต่ำกว่าความคาดหวังค่อนข้างมาก</q-tooltip>
+                </template>
+                <template v-slot:tip-3>
+                  <q-tooltip>เป็นไปตามความคาดหวัง</q-tooltip>
+                </template>
+                <template v-slot:tip-4>
+                  <q-tooltip>สูงว่าความคาดหวังค่อนข้างมาก</q-tooltip>
+                </template>
+                <template v-slot:tip-5>
+                  <q-tooltip>สูงกว่าความคาดหวังมาก</q-tooltip>
+                </template>
+              </q-rating>
+            </q-item-section>
+          </q-item>
+          <q-separator class="q-my-xs" v-if="i + 1 < list2_1.length" />
+        </q-list>
+      </q-card>
+    </div>
+    <div class="col-12 row">
+      <div class="col-12 text-top0 row items-center q-pl-lg">
+        <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
+        2.2 ความมีคุณธรรมจริยธรรม
+      </div>
+      <q-card
+        flat
+        bordered
+        class="col-xs-12 col-sm-11 col-md-10 offset-md-1 q-pa-sm bg-grey-1"
+      >
+        <q-list dense v-for="(list, i) in list2_2" :key="i">
+          <q-item dense tag="label" v-ripple>
+            <q-item-section>
+              <q-item-label>{{ list.label }}</q-item-label>
+            </q-item-section>
+            <q-item-section side>
+              <q-rating
+                v-model="model"
+                :val="list.id"
+                max="5"
+                size="sm"
+                color="grey"
+                :color-selected="ratingColors"
+                label="ระดับการประเมินพฤติกรรม"
+              >
+                <template v-slot:tip-1>
+                  <q-tooltip>ต่ำกว่าความคาดหวังมาก</q-tooltip>
+                </template>
+                <template v-slot:tip-2>
+                  <q-tooltip>ต่ำกว่าความคาดหวังค่อนข้างมาก</q-tooltip>
+                </template>
+                <template v-slot:tip-3>
+                  <q-tooltip>เป็นไปตามความคาดหวัง</q-tooltip>
+                </template>
+                <template v-slot:tip-4>
+                  <q-tooltip>สูงว่าความคาดหวังค่อนข้างมาก</q-tooltip>
+                </template>
+                <template v-slot:tip-5>
+                  <q-tooltip>สูงกว่าความคาดหวังมาก</q-tooltip>
+                </template>
+              </q-rating>
+            </q-item-section>
+          </q-item>
+          <q-separator class="q-my-xs" v-if="i + 1 < list2_2.length" />
+        </q-list>
+      </q-card>
+    </div>
+    <div class="col-12 row">
+      <div class="col-12 text-top0 row items-center q-pl-lg">
+        <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
+        2.3 การรักษาวินัย
+      </div>
+      <q-card
+        flat
+        bordered
+        class="col-xs-12 col-sm-11 col-md-10 offset-md-1 q-pa-sm bg-grey-1"
+      >
+        <q-list dense v-for="(list, i) in list2_3" :key="i">
+          <q-item dense tag="label" v-ripple>
+            <q-item-section>
+              <q-item-label>{{ list.label }}</q-item-label>
+            </q-item-section>
+            <q-item-section side>
+              <q-rating
+                v-model="model"
+                :val="list.id"
+                max="5"
+                size="sm"
+                color="grey"
+                :color-selected="ratingColors"
+                label="ระดับการประเมินพฤติกรรม"
+              >
+                <template v-slot:tip-1>
+                  <q-tooltip>ต่ำกว่าความคาดหวังมาก</q-tooltip>
+                </template>
+                <template v-slot:tip-2>
+                  <q-tooltip>ต่ำกว่าความคาดหวังค่อนข้างมาก</q-tooltip>
+                </template>
+                <template v-slot:tip-3>
+                  <q-tooltip>เป็นไปตามความคาดหวัง</q-tooltip>
+                </template>
+                <template v-slot:tip-4>
+                  <q-tooltip>สูงว่าความคาดหวังค่อนข้างมาก</q-tooltip>
+                </template>
+                <template v-slot:tip-5>
+                  <q-tooltip>สูงกว่าความคาดหวังมาก</q-tooltip>
+                </template>
+              </q-rating>
+            </q-item-section>
+          </q-item>
+          <q-separator class="q-my-xs" v-if="i + 1 < list2_3.length" />
+        </q-list>
+      </q-card>
+    </div>
+    <div class="col-12 row">
+      <div class="col-12 text-top0 row items-center q-pl-lg">
+        <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
+        2.4 อื่นๆ
+        <q-checkbox class="q-ml-sm" dense v-model="etc_4" />
+      </div>
+      <q-card
+        v-if="etc_4"
+        flat
+        bordered
+        class="col-xs-12 col-sm-11 col-md-10 offset-md-1 q-pa-sm bg-grey-1"
+      >
+        <q-list dense>
+          <q-item dense tag="label" v-ripple>
+            <q-item-section>
+              <q-item-label>
+                <q-input
+                  v-model="etc_text2"
+                  label="กรอกอื่นๆ"
+                  dense
+                  lazy-rules
+                  autogrow
+                  hide-bottom-space
+                  outlined
+                  class="bg-white"
+                  :rules="[
+                    (val) => (val && val.length > 0) || 'กรุณากรอกข้อความ',
+                  ]"
+                />
+              </q-item-label>
+            </q-item-section>
+            <q-item-section side>
+              <q-rating
+                v-model="modelEtc"
+                max="5"
+                size="sm"
+                color="grey"
+                :color-selected="ratingColors"
+                label="ระดับการประเมินพฤติกรรม"
+              >
+                <template v-slot:tip-1>
+                  <q-tooltip>ต่ำกว่าความคาดหวังมาก</q-tooltip>
+                </template>
+                <template v-slot:tip-2>
+                  <q-tooltip>ต่ำกว่าความคาดหวังค่อนข้างมาก</q-tooltip>
+                </template>
+                <template v-slot:tip-3>
+                  <q-tooltip>เป็นไปตามความคาดหวัง</q-tooltip>
+                </template>
+                <template v-slot:tip-4>
+                  <q-tooltip>สูงว่าความคาดหวังค่อนข้างมาก</q-tooltip>
+                </template>
+                <template v-slot:tip-5>
+                  <q-tooltip>สูงกว่าความคาดหวังมาก</q-tooltip>
+                </template>
+              </q-rating>
+            </q-item-section>
+          </q-item>
+        </q-list>
+      </q-card>
+    </div>
+    <FormComment />
+  </div>
+</template>
+<script setup lang="ts">
+import { ref, defineAsyncComponent } from "vue";
+
+import { useQuasar } from "quasar";
+
+import { useProbationDataStore } from "@/modules/05_placement/store";
+const FormComment = defineAsyncComponent(
+  () =>
+    import(
+      "@/modules/05_placement/components/probation/form/formEvacomment.vue"
+    )
+);
+const probationStore = useProbationDataStore();
+const { ratingColors } = probationStore;
+
+const list2_1 = [
+  { id: "1", label: "ให้บริการประชาชนหรือผู้รับบริการด้วยอัธยาศัยดี" },
+  { id: "2", label: "มีความรับผิดชอบในการปฏิบัติบัติงาน" },
+  {
+    id: "3",
+    label:
+      "ให้บริการประชาชนหรือผู้รับบริการด้วยความรวดเร็ว เอาใจใส่เป็นมาตรฐานเดียวกัน",
+  },
+  {
+    id: "4",
+    label: "ตั้งใจปฏิบัติบัติหน้าที่ราชการด้วยความอุตสาหะ ขยันหมั่นเพียร",
+  },
+];
+const list2_2 = [
+  {
+    id: "1",
+    label: "อุทิศตนและเสียสละเวลาในการปฏิบัติบัติงานอย่างเต็มกำลังความสามารถ",
+  },
+  { id: "2", label: "มีจิตสำนึกที่ดี ปฏิบัติบัติงานด้วยความซื่อสัตย์ สุจริต" },
+  {
+    id: "3",
+    label:
+      "ยึดมั่นในสถาบันบัพระมหากษัตริย์ และไม่กระทำการใด ๆ อันจะก่อให้เกิดความเสียหายต่อประเทศชาติ",
+  },
+];
+
+const list2_3 = [
+  { id: "1", label: "มีความรับรัผิดชอบในการรักษาเวลาทำงาน" },
+  {
+    id: "2",
+    label: "แต่งกายในการปฏิบัติบัติงานได้อย่างเหมาะสมกับการเป็นข้าราชการ",
+  },
+  {
+    id: "3",
+    label: "ไม่กระทำการใด ๆ อันอาจก่อให้เกิดความเสียหายแก่ชื่อเสียงของหน่วยงาน",
+  },
+  {
+    id: "4",
+    label:
+      "ไม่กระทำการใด ๆ อันเป็นการเสื่อมเกียรติและศักดิ์ศรีของความเป็นข้าราชการ",
+  },
+  {
+    id: "5",
+    label: "ปฏิบัติบัติหน้าที่อย่างตรงไปตรงมาโดยยึกหลักจรรยาบรรณวิชาชีพ",
+  },
+];
+
+const etc_text2 = ref<any>(null);
+const modelEtc = ref<any>(0);
+const etc_4 = ref<any>(false);
+const model = ref<any>(0);
+</script>
+<style lang="scss" scoped>
+.text-top0 {
+  font-weight: 600;
+  padding-bottom: 8px;
+  color: rgb(70, 68, 68);
+}
+
+.q-rating__icon {
+  text-shadow: transparent !important;
+}
+</style>

src/modules/05_placement/components/probation/FormEvaluation/SubForm/Part3.vue

@@ -0,0 +1,131 @@
+<script setup lang="ts">
+import { ref } from "vue";
+const radio_1 = ref<any>(null);
+const radio_2 = ref<any>(null);
+const radio_3 = ref<any>(null);
+const radio_4 = ref<any>(null);
+</script>
+
+<template>
+  <div class="row col-12 q-gutter-lg no-margin">
+    <div class="col-12 row justify-center">
+      <div class="col-12 text-top0 items-center">
+        <q-avatar class="bg-grey-2 q-mr-sm" size="28px">3</q-avatar>
+        การพัฒนาผู้ทดลองปฏิบัติบัติหน้าที่ราชการ
+      </div>
+      <q-card
+        flat
+        bordered
+        class="col-xs-12 col-sm-11 col-md-11 q-pa-sm bg-grey-1"
+      >
+        <q-list dense>
+          <q-item dense tag="label" v-ripple>
+            <q-item-section>
+              <q-item-label>1. การปฐมนิเทศ</q-item-label>
+            </q-item-section>
+            <q-item-section side>
+              <div class="row">
+                <q-radio
+                  checked-icon="task_alt"
+                  unchecked-icon="panorama_fish_eye"
+                  v-model="radio_1"
+                  val="1"
+                  label="ดำเนินการเเล้ว"
+                />
+                <q-radio
+                  checked-icon="task_alt"
+                  unchecked-icon="panorama_fish_eye"
+                  v-model="radio_1"
+                  val="0"
+                  label=" ยังไม่ได้ดำเนินการ"
+                />
+              </div>
+            </q-item-section>
+          </q-item>
+          <q-separator class="q-my-xs" />
+          <q-item dense tag="label" v-ripple>
+            <q-item-section>
+              <q-item-label>2. การเรียนรู้ด้วยตนเอง</q-item-label>
+            </q-item-section>
+            <q-item-section side>
+              <div class="row">
+                <q-radio
+                  checked-icon="task_alt"
+                  unchecked-icon="panorama_fish_eye"
+                  v-model="radio_2"
+                  val="1"
+                  label="ดำเนินการเเล้ว"
+                />
+                <q-radio
+                  checked-icon="task_alt"
+                  unchecked-icon="panorama_fish_eye"
+                  v-model="radio_2"
+                  val="0"
+                  label=" ยังไม่ได้ดำเนินการ"
+                />
+              </div>
+            </q-item-section>
+          </q-item>
+          <q-separator class="q-my-xs" />
+          <q-item dense tag="label" v-ripple>
+            <q-item-section>
+              <q-item-label>3. การอบรมสัมนาร่วมกัน</q-item-label>
+            </q-item-section>
+            <q-item-section side>
+              <div class="row">
+                <q-radio
+                  checked-icon="task_alt"
+                  unchecked-icon="panorama_fish_eye"
+                  v-model="radio_3"
+                  val="1"
+                  label="ดำเนินการเเล้ว"
+                />
+                <q-radio
+                  checked-icon="task_alt"
+                  unchecked-icon="panorama_fish_eye"
+                  v-model="radio_3"
+                  val="0"
+                  label=" ยังไม่ได้ดำเนินการ"
+                />
+              </div>
+            </q-item-section>
+          </q-item>
+          <q-separator class="q-my-xs" />
+          <q-item dense tag="label" v-ripple>
+            <q-item-section>
+              <q-item-label
+                >4. การอบรมอื่น ๆ ตามที่หน่วยงานกำหนด (ถ้ามี)</q-item-label
+              >
+            </q-item-section>
+            <q-item-section side>
+              <div class="row">
+                <q-radio
+                  checked-icon="task_alt"
+                  unchecked-icon="panorama_fish_eye"
+                  v-model="radio_4"
+                  val="1"
+                  label="ดำเนินการเเล้ว"
+                />
+                <q-radio
+                  checked-icon="task_alt"
+                  unchecked-icon="panorama_fish_eye"
+                  v-model="radio_4"
+                  val="0"
+                  label=" ยังไม่ได้ดำเนินการ"
+                />
+              </div>
+            </q-item-section>
+          </q-item>
+        </q-list>
+      </q-card>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.text-top0 {
+  font-weight: 600;
+  padding-bottom: 8px;
+  color: rgb(70, 68, 68);
+}
+</style>

src/modules/05_placement/components/probation/FormEvaluation/SubForm/PartHighlightImprove.vue

@@ -0,0 +1,45 @@
+<template>
+  <div class="row col-12 q-gutter-lg no-margin">
+    <div class="col-12 row">
+      <div class="col-12 text-top0 row items-center q-pl-lg">
+        <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
+        จุดเด่น (ไม่เกิน 5 บรรทัด)
+      </div>
+      <q-input
+        outlined
+        dense
+        v-model="text2_1"
+        class="col-xs-12 col-sm-11 col-md-10 offset-md-1"
+        lazy-rules
+        type="textarea"
+        label="กรอกจุดเด่น"
+        hide-bottom-space
+        :row="5"
+        :rules="[(val) => (val && val.length > 0) || 'กรุณากรอกข้อความ']"
+      />
+    </div>
+    <div class="col-12 row">
+      <div class="col-12 text-top0 row items-center q-pl-lg">
+        <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
+        สิ่งที่ควรปรับปรุง (ไม่เกิน 5 บรรทัด)
+      </div>
+      <q-input
+        outlined
+        dense
+        v-model="text2_2"
+        class="col-xs-12 col-sm-11 col-md-10 offset-md-1"
+        lazy-rules
+        type="textarea"
+        hide-bottom-space
+        label="กรอกสิ่งที่ควรปรับปรุง"
+        :row="5"
+        :rules="[(val) => (val && val.length > 0) || 'กรุณากรอกข้อความ']"
+      />
+    </div>
+  </div>
+</template>
+<script setup lang="ts">
+import { ref } from "vue";
+const text2_1 = ref<string>("");
+const text2_2 = ref<string>("");
+</script>

src/modules/05_placement/components/probation/FormEvaluation/Template1.vue

@@ -0,0 +1,31 @@
+<script setup lang="ts">
+import { ref, defineAsyncComponent } from "vue";
+
+const tab = ref<string>("save1");
+const changeTab = (tabVal: string) => {
+  tab.value = tabVal
+}
+
+const Header = defineAsyncComponent(
+  () => import("@/modules/05_placement/components/probation/FormEvaluation/Header.vue")
+);
+const FormSaveResult = defineAsyncComponent(
+  () => import("@/modules/05_placement/components/probation/FormEvaluation/FormSaveResult.vue")
+)
+</script>  
+
+<template>
+  <Header :change-tab="changeTab" />
+
+  <q-page-container>
+    <q-tab-panels v-model="tab" animated>
+      <q-tab-panel name="save1">
+        <FormSaveResult />
+      </q-tab-panel>
+
+      <q-tab-panel name="save2">
+        <FormSaveResult />
+      </q-tab-panel>
+    </q-tab-panels>
+  </q-page-container>
+</template>

src/modules/05_placement/components/probation/FormEvaluation/Template2.vue

@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import { ref, defineAsyncComponent } from "vue";
+const tab = ref<string>("save1");
+const changeTab = (tabVal: string) => {
+  tab.value = tabVal
+}
+const Header = defineAsyncComponent(
+  () => import("@/modules/05_placement/components/probation/FormEvaluation/Header.vue")
+);
+const FormEvaluate = defineAsyncComponent(
+  () => import("@/modules/05_placement/components/probation/FormEvaluation/FormEvaluate.vue")
+)
+</script>  
+
+<template>
+  <Header :change-tab="changeTab" />
+
+  <q-page-container>
+    <q-tab-panels v-model="tab" animated>
+      <q-tab-panel name="save1">
+        <FormEvaluate />
+      </q-tab-panel>
+
+      <q-tab-panel name="save2">
+        <FormEvaluate />
+      </q-tab-panel>
+    </q-tab-panels>
+  </q-page-container>
+</template>

src/modules/05_placement/components/probation/FormEvaluation/Template3.vue

@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import { ref, defineAsyncComponent } from "vue";
+const tab = ref<string>("save1");
+const changeTab = (tabVal: string) => {
+  tab.value = tabVal
+}
+
+const Header = defineAsyncComponent(
+  () => import("@/modules/05_placement/components/probation/FormEvaluation/Header.vue")
+);
+const FormReport = defineAsyncComponent(
+  () => import("@/modules/05_placement/components/probation/FormEvaluation/FormReport.vue")
+)
+</script>
+
+<template>
+  <Header :change-tab="changeTab" />
+
+  <q-page-container>
+    <q-tab-panels v-model="tab" animated>
+      <q-tab-panel name="save1">
+        <FormReport />
+      </q-tab-panel>
+
+      <q-tab-panel name="save2">
+        <FormReport />
+      </q-tab-panel>
+    </q-tab-panels>
+  </q-page-container>
+</template>

src/modules/05_placement/components/probation/MainDetail.vue

@@ -1,5 +1,36 @@
+<script setup lang="ts">
+import { useRouter } from "vue-router";
+import { ref, defineAsyncComponent } from "vue";
+
+const ProbationFormAssign = defineAsyncComponent(
+  () => import("@/modules/05_placement/components/probation/FormAssign.vue")
+);
+const TabsTemplate1 = defineAsyncComponent(
+  () => import("@/modules/05_placement/components/probation/FormEvaluation/Template1.vue")
+);
+const TabsTemplate2 = defineAsyncComponent(
+  () => import("@/modules/05_placement/components/probation/FormEvaluation/Template2.vue")
+);
+const TabsTemplate3 = defineAsyncComponent(
+  () => import("@/modules/05_placement/components/probation/FormEvaluation/Template3.vue")
+);
+// const Tabs2 = defineAsyncComponent(
+//   () => import("@/modules/05_placement/components/probation/tabs/tabs2.vue")
+// );
+const Tabs3 = defineAsyncComponent(
+  () => import("@/modules/05_placement/components/probation/tabs/tabs3.vue")
+);
+const Tabs4 = defineAsyncComponent(
+  () => import("@/modules/05_placement/components/probation/tabs/tabs4.vue")
+);
+
+const router = useRouter();
+const drawer = ref<boolean>(true);
+const activeTab = ref<string>("tab1");
+</script>
+
 <template>
-	<!-- <div class="toptitle text-dark col-12 row items-center">จัดการบัญชี 2</div> -->
+  <!-- <div class="toptitle text-dark col-12 row items-center">จัดการบัญชี 2</div> -->
   <q-card flat bordered class="col-12">
     <q-layout
       view="hHh Lpr lff"
@@ -7,42 +38,61 @@
       class="shadow-2 rounded-borders page-relative"
       style="height: 82vh"
     >
-			<q-header class="bg-grey-1">
-				<q-toolbar>
-					<div class="text-h6 text-weight-medium text-dark col-12 row items-center q-py-md">
-						<q-btn
-							icon="mdi-arrow-left"
-							unelevated
-							round
-							dense
-							flat
-							color="primary"
-							class="q-mr-sm"
-							@click="router.go(-1)"
-						/>
-							บันทึกผลการทดลองปฏิบัติหน้าที่ราชการของ นายสมคิด ยอดใจ
-					</div>
-				</q-toolbar>
-				<q-separator/>
-			</q-header>
-			<q-drawer
+      <q-header class="bg-grey-1">
+        <q-toolbar>
+          <div
+            class="text-h6 text-weight-medium text-dark col-12 row items-center q-py-md"
+          >
+            <q-btn
+              icon="mdi-arrow-left"
+              unelevated
+              round
+              dense
+              flat
+              color="primary"
+              class="q-mr-sm"
+              @click="router.go(-1)"
+            />
+            การทดลองปฏิบัติหน้าที่ราชการของ นายสมคิด ยอดใจ
+          </div>
+        </q-toolbar>
+        <q-separator />
+      </q-header>
+      <q-drawer
         v-model="drawer"
         show-if-above
-
-				:width="150"
+        :width="150"
         :breakpoint="500"
-				class="bg-grey-1"
+        class="bg-grey-1"
         bordered
       >
         <q-scroll-area class="fit" :horizontal-thumb-style="{ opacity: 0 }">
           <q-list class="text-grey-7">
-            <q-item 
-							dense
-							active
-							class="q-py-sm"
-							active-class="text-primary bg-teal-1 text-weight-medium"
-							clickable 
-							v-ripple>
+            <q-item
+              active-class="text-primary bg-teal-1 text-weight-medium"
+              clickable
+              class="q-py-sm"
+              dense
+              v-ripple
+              :active="activeTab == 'tab1'"
+              @click="activeTab = 'tab1'"
+            >
+              <q-item-section avatar style="min-width: 40px">
+                <q-icon size="18px" name="mdi-file" />
+              </q-item-section>
+
+              <q-item-section> แบบมอบหมายงาน</q-item-section>
+            </q-item>
+
+            <q-item
+              dense
+              class="q-py-sm"
+              active-class="text-primary bg-teal-1 text-weight-medium"
+              clickable
+              v-ripple
+              :active="activeTab == 'tab2'"
+              @click="activeTab = 'tab2'"
+            >
               <q-item-section avatar style="min-width: 40px">
                 <q-icon size="18px" name="mdi-file-edit" />
               </q-item-section>
@@ -52,12 +102,15 @@
               </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>
+            <q-item
+              active-class="text-primary bg-teal-1 text-weight-medium"
+              clickable
+              class="q-py-sm"
+              dense
+              v-ripple
+              :active="activeTab == 'tab3'"
+              @click="activeTab = 'tab3'"
+            >
               <q-item-section avatar style="min-width: 40px">
                 <q-icon size="18px" name="mdi-file-star" />
               </q-item-section>
@@ -67,67 +120,53 @@
               </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>
+            <q-item
+              active-class="text-primary bg-teal-1 text-weight-medium"
+              clickable
+              class="q-py-sm"
+              dense
+              v-ripple
+              :active="activeTab == 'tab4'"
+              @click="activeTab = 'tab4'"
+            >
               <q-item-section avatar style="min-width: 40px">
                 <q-icon size="18px" name="mdi-file-chart" />
               </q-item-section>
 
               <q-item-section>
-                รายการ
+                รายงานการประเมินผล
               </q-item-section>
             </q-item>
           </q-list>
         </q-scroll-area>
       </q-drawer>
       <q-page-container>
-				<q-layout
-					view="hHh Lpr lff"
-					container
-					style="height: 72vh"
-				>
-					<q-header class="bg-grey-1">
-							<div class="bg-grey-1">
-									<div class="col-12 row q-gutter-x-md items-center">
-										<q-tabs dense v-model="tab" active-class="text-primary text-weight-medium" indicator-color="grey-1" class="text-grey-7">
-											<q-tab name="save1" label="บันทึกผลครั้งที่ 1" />
-											<q-tab name="save2" label="บันทึกผลครั้งที่ 2" />
-											<q-tab name="save3" label="บันทึกผลครั้งที่ 3" />
-										</q-tabs>
-										<div>
-											<q-btn color="blue" flat dense icon="mdi-plus">
-												<q-tooltip>
-													เพิ่มบันทึกผลการทดลอง
-												</q-tooltip>
-											</q-btn>
-										</div>
-									</div>
-								<q-separator/>
-							</div>
-						</q-header>
-						<q-page-container>
-							<div class="col-12 row">
-								<Form />
-							</div>
-						</q-page-container>
-					</q-layout>
-    	</q-page-container>
-    </q-layout>
-	</q-card>
-</template>
-<script setup lang="ts">
-import { useRouter } from "vue-router";
-import { ref } from "vue";
-import Form from "@/modules/05_placement/components/probation/form.vue";
+        <q-layout view="hHh Lpr lFf" container style="height: 72vh">
+          <q-tab-panels
+            v-model="activeTab"
+            animated
+            class="shadow-2 rounded-borders"
+            vertical
+          >
+            <q-tab-panel name="tab1">
+              <ProbationFormAssign />
+            </q-tab-panel>
+
+            <q-tab-panel name="tab2"> <TabsTemplate1 /></q-tab-panel>
+
+            <q-tab-panel name="tab3">
+              <TabsTemplate2 />
+            </q-tab-panel>
+            <q-tab-panel name="tab4">
+              <TabsTemplate3 />
+            </q-tab-panel>
+          </q-tab-panels>
+        </q-layout>
+      </q-page-container>
+    </q-layout>
+  </q-card>
+</template>
 
-const router = useRouter();
-const drawer = ref<boolean>(true);
-const	tab = ref('save1');
-</script>
 <style lang="scss" scope>
 .btn-absolute {
   z-index: 50;
@@ -135,7 +174,8 @@ const	tab = ref('save1');
   left: 200px;
   top: 10px;
 }
+
 .btnShadow {
   box-shadow: 0 1px 2px rgb(0 0 0 / 10%), 3px 3px 7px 1px rgba(95, 95, 95, 0.15) !important;
 }
-</style>
+</style>

src/modules/05_placement/components/probation/ProbationDetail.vue

@@ -1,183 +1,207 @@
 <template>
-    <div class="toptitle text-dark 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)"
-        />
-        รายละเอียดงานที่ได้รับมอบหมายของ {{ name }}
-				
+  <div class="toptitle text-dark 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)"
+    />
+    รายละเอียดงานที่ได้รับมอบหมายของ {{ name }}
+  </div>
+  <q-card bordered class="row col-12 text-dark">
+    <div class="bg-grey-1 q-pa-sm col-12 row items-center text-primary">
+      <div class="q-pl-sm text-weight-bold text-subtitle2">{{ name }}</div>
+      <q-space />
+      <q-btn
+        outline
+        color="blue"
+        dense
+        icon-right="mdi-open-in-new"
+        class="q-px-sm"
+        label="ดูข้อมูลทะเบียนประวัติ"
+      />
     </div>
-    <q-card bordered class="row col-12 text-dark">
-			<div class="bg-grey-1 q-pa-sm col-12 row items-center text-primary">
-				<div class="q-pl-sm text-weight-bold text-subtitle2">{{ name }}</div>
-				<q-space />
-				<q-btn outline color="blue" dense icon-right="mdi-open-in-new" class="q-px-sm" label="ดูข้อมูลทะเบียนประวัติ" />
-			</div>
-			<div class="col-12"><q-separator/></div>
-			<div class="row col-12 q-pa-md">
-				<div class="col-12 row bg-white q-col-gutter-md">
-					<div class="col-xs-3 col-sm-2 col-md-1 row ">
-						<q-img src="@/assets/avatar_user.jpg" />
-					</div>
-					<div class="col-xs-6 col-sm-3 row items-center">
-						<div class="col-12 q-pl-md">
-							<div class="col-12 text-top">ตำแหน่งในสายงาน</div>
-							<div class="col-12 text-detail">{{position}}</div>
-						</div>
-					</div>
-					<div class="col-xs-6 col-sm-2 row items-center">
-						<div class="col-12">
-							<div class="col-12 text-top">ระดับ</div>
-							<div class="col-12 text-detail">{{level}}</div>
-						</div>
-					</div>
-					<div class="col-xs-6 col-sm-3 row items-center">
-						<div class="col-12">
-							<div class="col-12 text-top">สังกัด</div>
-							<div class="col-12 text-detail">{{institution}}</div>
-						</div>
-					</div>
-					<div class="col-xs-6 col-sm-3 row items-center">
-						<div class="col-12">
-							<div class="col-12 text-top">สถานะการทดลองงาน</div>
-							<div class="col-12 text-detail">
-								<q-icon size="20px" v-if="status == 'อยู่ระหว่างการทดลองงาน'" name="mdi-timer-sand" color="deep-orange" />
-								<q-icon size="20px" v-else-if="status == 'ไม่ผ่านการทดลอง'" name="mdi-close" color="red" />
-								<q-icon size="20px" v-else name="mdi-check" color="teal" />
-								{{ status }}
-							</div>
-						</div>
-					</div>
-				</div>
-			</div>
-    </q-card>
+    <div class="col-12"><q-separator /></div>
+    <div class="row col-12 q-pa-md">
+      <div class="col-12 row bg-white q-col-gutter-md">
+        <div class="col-xs-3 col-sm-2 col-md-1 row">
+          <q-img src="@/assets/avatar_user.jpg" />
+        </div>
+        <div class="col-xs-6 col-sm-3 row items-center">
+          <div class="col-12 q-pl-md">
+            <div class="col-12 text-top">ตำแหน่งในสายงาน</div>
+            <div class="col-12 text-detail">{{ position }}</div>
+          </div>
+        </div>
+        <div class="col-xs-6 col-sm-2 row items-center">
+          <div class="col-12">
+            <div class="col-12 text-top">ระดับ</div>
+            <div class="col-12 text-detail">{{ level }}</div>
+          </div>
+        </div>
+        <div class="col-xs-6 col-sm-3 row items-center">
+          <div class="col-12">
+            <div class="col-12 text-top">สังกัด</div>
+            <div class="col-12 text-detail">{{ institution }}</div>
+          </div>
+        </div>
+        <div class="col-xs-6 col-sm-3 row items-center">
+          <div class="col-12">
+            <div class="col-12 text-top">สถานะการทดลองงาน</div>
+            <div class="col-12 text-detail">
+              <q-icon
+                size="20px"
+                v-if="status == 'อยู่ระหว่างการทดลองงาน'"
+                name="mdi-timer-sand"
+                color="deep-orange"
+              />
+              <q-icon
+                size="20px"
+                v-else-if="status == 'ไม่ผ่านการทดลอง'"
+                name="mdi-close"
+                color="red"
+              />
+              <q-icon size="20px" v-else name="mdi-check" color="teal" />
+              {{ status }}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </q-card>
   <q-card flat bordered class="col-12 q-mt-sm q-pa-md">
-		<div class="row q-col-gutter-sm">
-			<div class="row col-12 q-col-gutter-sm">
-				<div>
-					<q-btn @click="router.push(`/probation/work/add`)" size="12px" flat round color="add" icon="mdi-plus">
-						<q-tooltip>เพิ่มงานที่ได้รับมอบหมาย</q-tooltip>
-					</q-btn>
-				</div>
-				<q-space />
-				<q-input
-					class="col-xs-12 col-sm-3 col-md-2"
-					standout
-					dense
-					v-model="filterKeyword"
-					ref="filterRef"
-					outlined
-					debounce="300"
-					placeholder="ค้นหา"
-				>
-					<template v-slot:append>
-						<q-icon v-if="filterKeyword == ''" name="search" />
-						<q-icon
-							v-if="filterKeyword !== ''"
-							name="clear"
-							class="cursor-pointer"
-							@click="resetFilter"
-						/>
-					</template>
-				</q-input>
+    <div class="row q-col-gutter-sm">
+      <div class="row col-12 q-col-gutter-sm">
+        <div>
+          <q-btn
+            @click="router.push(`/probation/add`)"
+            size="12px"
+            flat
+            round
+            color="add"
+            icon="mdi-plus"
+          >
+            <q-tooltip>เพิ่มงานที่ได้รับมอบหมาย</q-tooltip>
+          </q-btn>
+        </div>
+        <q-space />
+        <q-input
+          class="col-xs-12 col-sm-3 col-md-2"
+          standout
+          dense
+          v-model="filterKeyword"
+          ref="filterRef"
+          outlined
+          debounce="300"
+          placeholder="ค้นหา"
+        >
+          <template v-slot:append>
+            <q-icon v-if="filterKeyword == ''" name="search" />
+            <q-icon
+              v-if="filterKeyword !== ''"
+              name="clear"
+              class="cursor-pointer"
+              @click="resetFilter"
+            />
+          </template>
+        </q-input>
 
-				<q-select
-					v-model="visibleColumns"
-					multiple
-					outlined
-					dense
-					options-dense
-					:display-value="$q.lang.table.columns"
-					emit-value
-					map-options
-					:options="columns"
-					option-value="name"
-					options-cover
-					style="min-width: 150px"
-					class="col-xs-12 col-sm-3 col-md-2"
-				/>
-			</div>
-			<div class="col-12">
-				<q-table
-					ref="table"
-					:columns="columns"
-					:rows="rows"
-					:filter="filterKeyword"
-					row-key="Order"
-					flat
-					bordered
-					:paging="true"
-					dense
-					class="custom-header-table"
-					v-bind="attrs"
-					:visible-columns="visibleColumns"
-					:pagination-label="paginationLabel"
-					v-model:pagination="pagination"
-				>
-					<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-th auto-width />
-						</q-tr>
-					</template>
-					<template v-slot:body="props">
-						<q-tr :props="props" class="cursor-pointer" @click="router.push(`/probation/form`)">
-							<q-td
-								v-for="col in props.cols"
-								:key="col.name"
-								:props="props"
-							>
-								<div v-if="col.name == 'no'">
-									{{ props.rowIndex + 1 }}
-								</div>
-								<div v-else>
-									{{ col.value }}
-								</div>
-							</q-td>
-							<q-td auto-width>
+        <q-select
+          v-model="visibleColumns"
+          multiple
+          outlined
+          dense
+          options-dense
+          :display-value="$q.lang.table.columns"
+          emit-value
+          map-options
+          :options="columns"
+          option-value="name"
+          options-cover
+          style="min-width: 150px"
+          class="col-xs-12 col-sm-3 col-md-2"
+        />
+      </div>
+      <div class="col-12">
+        <q-table
+          ref="table"
+          :columns="columns"
+          :rows="rows"
+          :filter="filterKeyword"
+          row-key="Order"
+          flat
+          bordered
+          :paging="true"
+          dense
+          class="custom-header-table"
+          v-bind="attrs"
+          :visible-columns="visibleColumns"
+          :pagination-label="paginationLabel"
+          v-model:pagination="pagination"
+        >
+          <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-th auto-width />
+            </q-tr>
+          </template>
+          <template v-slot:body="props">
+            <q-tr
+              :props="props"
+              class="cursor-pointer"
+              @click="clickSelect(props.row.no)"
+            >
+              <q-td v-for="col in props.cols" :key="col.name" :props="props">
+                <div v-if="col.name == 'no'">
+                  {{ props.rowIndex + 1 }}
+                </div>
+                <div v-else>
+                  {{ col.value }}
+                </div>
+              </q-td>
+              <!-- <q-td auto-width>
 								<q-btn flat dense size="12px" round color="blue" icon="mdi-file-download-outline">
 									<q-tooltip> ดาวน์โหลด .Docx</q-tooltip>
 								</q-btn>
-							</q-td>
-						</q-tr>
-					</template>
-					<template v-slot:pagination="scope">
-						<q-pagination
-							v-model="pagination.page"
-							active-color="primary"
-							color="dark"
-							:max="scope.pagesNumber"
-							:max-pages="5"
-							size="sm"
-							boundary-links
-							direction-links
-						></q-pagination>
-					</template>
-				</q-table>
-			</div>
-		</div>   
-  </q-card>    
+							</q-td> -->
+            </q-tr>
+          </template>
+          <template v-slot:pagination="scope">
+            <q-pagination
+              v-model="pagination.page"
+              active-color="primary"
+              color="dark"
+              :max="scope.pagesNumber"
+              :max-pages="5"
+              size="sm"
+              boundary-links
+              direction-links
+            ></q-pagination>
+          </template>
+        </q-table>
+      </div>
+    </div>
+  </q-card>
 </template>
 <script setup lang="ts">
-import { useRouter } from "vue-router";
+import { useRouter, useRoute } from "vue-router";
 import { ref, useAttrs } from "vue";
 import type { QTableProps } from "quasar";
 import type { FormProbationDetail } from "@/modules/05_placement/interface/request/Main";
 const router = useRouter();
+const route = useRoute();
 
-const name = ref<string>('นายสมคิด ยอดใจ')
-const position = ref<string>('นักจัดการงานทั่วไป')
-const level = ref<string>('ชำนาญการพิเศษ')
-const institution = ref<string>('ฝ่ายบริหารงานทั่วไป')
-const status = ref<string>('อยู่ระหว่างการทดลองงาน')
+const name = ref<string>("นายสมคิด ยอดใจ");
+const position = ref<string>("นักจัดการงานทั่วไป");
+const level = ref<string>("ชำนาญการพิเศษ");
+const institution = ref<string>("ฝ่ายบริหารงานทั่วไป");
+const status = ref<string>("อยู่ระหว่างการทดลองงาน");
 
 const pagination = ref({
   sortBy: "desc",
@@ -189,7 +213,7 @@ const pagination = ref({
 const visibleColumns = ref<string[]>([
   "no",
   "startDate",
-	"endDete",
+  "endDete",
   "intendant",
   "commander",
 ]); //ค้นหา คอลัมน์ คอลัมน์ที่แสดง
@@ -214,7 +238,7 @@ const columns = ref<QTableProps["columns"]>([
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
-	{
+  {
     name: "endDete",
     align: "left",
     label: "ถึงวันที่",
@@ -223,7 +247,7 @@ const columns = ref<QTableProps["columns"]>([
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
-	{
+  {
     name: "intendant",
     align: "left",
     label: "ผู้ดูแล",
@@ -232,7 +256,7 @@ const columns = ref<QTableProps["columns"]>([
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
-	{
+  {
     name: "commander",
     align: "left",
     label: "ผู้บังคับบัญชา",
@@ -240,35 +264,39 @@ const columns = ref<QTableProps["columns"]>([
     field: "commander",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
-  }
+  },
 ]);
 
 // ข้อมูลตาราง (จำลอง)
 const rows = ref<FormProbationDetail[]>([
   {
-		no: "1",
-		startDate: "09 ก.ย. 2566",
-		endDete: "20 ต.ค. 2566",
-  	intendant: "นางสาวรัชภรณ์ ภักดี",
-  	commander: "นายนภัทร  วันดี"
-	},
-	{
-		no: "2",
-		startDate: "09 ก.ย. 2566",
-		endDete: "20 ต.ค. 2566",
-  	intendant: "นางสาวทวิดา กมลเวชชี",
-  	commander: "นางพิศ โพธิ์ดำ"
-	},
-	{
-		no: "3",
-		startDate: "09 ก.ย. 2566",
-		endDete: "20 ต.ค. 2566",
-  	intendant: "นางสาวทวิดา กมลเวชชี",
-  	commander: "นายนภัทร  วันดี"
-	},
+    no: "1",
+    startDate: "09 ก.ย. 2566",
+    endDete: "20 ต.ค. 2566",
+    intendant: "นางสาวรัชภรณ์ ภักดี",
+    commander: "นายนภัทร  วันดี",
+  },
+  {
+    no: "2",
+    startDate: "25 ต.ค. 2566",
+    endDete: "24 ม.ค. 2567",
+    intendant: "นางสาวทวิดา กมลเวชชี",
+    commander: "นางพิศ โพธิ์ดำ",
+  },
+  // {
+  // 	no: "3",
+  // 	startDate: "09 ก.ย. 2566",
+  // 	endDete: "20 ต.ค. 2566",
+  // intendant: "นางสาวทวิดา กมลเวชชี",
+  // commander: "นายนภัทร  วันดี"
+  // },
 ]);
 
-const clickAdd = () => {
+const clickAdd = () => {};
+
+const clickSelect = (id: string) => {
+  //   console.log(route.fullPath);
+  router.push(`${route.fullPath}/${id}`);
 };
 
 // ค้นหาในตาราง
@@ -290,16 +318,15 @@ const paginationLabel = (start: string, end: string, total: string) => {
 <style lang="scss" scope>
 .q-img {
   border-radius: 5px;
-	height: 70px;
+  height: 70px;
 }
-.text-top{
-	color: gray;
-	font-weight: 400;
-	padding-bottom: 3px;
+.text-top {
+  color: gray;
+  font-weight: 400;
+  padding-bottom: 3px;
 }
-.text-detail{
-	font-weight: 500;
-
+.text-detail {
+  font-weight: 500;
 }
 .custom-header-table {
   max-height: 64vh;
@@ -331,4 +358,4 @@ const paginationLabel = (start: string, end: string, total: string) => {
     top: 0;
   }
 }
-</style>
+</style>

src/modules/05_placement/components/probation/form.vue

@@ -1,950 +0,0 @@
-<!-- card ข้อมูลส่วนตัว -->
-<template>
-	<div class="q-pb-md">
-		<!-- <div class="toptitle text-dark 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 class="col-12 text-dark">
-			<div class="row col-12 q-pa-lg">
-				<div class="row col-12 q-gutter-lg">
-					<div class="col-12 row">
-						<div class="col-12 text-top0 row items-center ">
-							<q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
-							วันเริ่มทดลองปฎิบัติหน้าที่ราชการ ตั้งแต่วันที่
-							<span class="text-black q-px-sm">{{date2Thai(dateToday)}}</span> 
-							ถึงวันที 
-							<span class="text-black q-px-sm">{{date2Thai(dateEnd)}}</span>
-						</div>
-						<div class="col-12 text-top0 row items-center">
-							<q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
-							การทดลองปฏิบัติหน้าที่ราชการมีผล ดังนี้
-							<span class="text-black q-px-sm">{{ "ครั้งที่" + period }}</span>
-							ระหว่างวันที่
-							<span class="text-black q-px-sm">{{ date2Thai(dateToday)}}</span>
-							ถึงวันที่
-							<span class="text-black q-px-sm">{{date2Thai(dateEnd)}}</span>
-						</div>
-						<div class="col-12 q-pt-md">
-							<q-separator size="3px" color="grey-2" />
-						</div>
-					</div>
-					
-					<div class="col-12 row">
-						<div class="col-12 text-top0 items-center">
-							<q-avatar class="bg-grey-2 q-mr-sm" size="28px">1</q-avatar>
-							ผลสัมฤทธิ์ของการทดลองปฏิบัติบัติหน้าที่ราชการ
-						</div>
-						<div class="col-12 text-top0 row items-center q-pl-lg">
-							<q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
-							1.1 ความสำเร็จของงานที่ได้รับมอบหมาย
-						</div>
-						<div class="col-xs-12 col-sm-11 col-md-10  offset-md-1 text-top2">
-							1.ผลผลิตของงานที่คาดหวัง
-						</div>
-						<q-card flat bordered class="col-xs-12 col-sm-11 col-md-10  offset-md-1 q-pa-sm bg-grey-1">
-							<q-list dense v-for="(list,i) in list1_1" :key="i">
-								<q-item dense tag="label" v-ripple>
-									<q-item-section>
-										<q-item-label>{{ list.label }}</q-item-label>
-									</q-item-section>
-									<q-item-section side >
-										<q-rating
-											v-model="model"
-											:val="list.id"
-											max="5"
-											size="sm"
-											color="grey"
-											:color-selected="ratingColors"
-											label="ระดับการประเมินพฤติกรรม"
-										>
-											<template v-slot:tip-1>
-												<q-tooltip>ปรับปรุง</q-tooltip>
-											</template>
-											<template v-slot:tip-2>
-												<q-tooltip>พอใช้</q-tooltip>
-											</template>
-											<template v-slot:tip-3>
-												<q-tooltip>ปานกลาง</q-tooltip>
-											</template>
-											<template v-slot:tip-4>
-												<q-tooltip>ดี</q-tooltip>
-											</template>
-											<template v-slot:tip-5>
-												<q-tooltip>ดีมาก</q-tooltip>
-											</template>
-										</q-rating>
-									</q-item-section>
-								</q-item>
-								<q-separator class="q-my-xs" v-if="i + 1 < list1_1.length"  />
-							</q-list>
-						</q-card>
-					</div>
-					<div class="col-12 row">
-						<div class="col-12 text-top0 row items-center q-pl-lg">
-							<q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
-							1.1 ความสำเร็จของงานที่ได้รับมอบหมาย
-						</div>
-						<div class="col-xs-12 col-sm-11 col-md-10  offset-md-1 text-top2">
-							1.ผลผลิตของงานที่เกิดขึ้น
-						</div>
-						<q-card flat bordered class="col-xs-12 col-sm-11 col-md-10  offset-md-1 q-pa-sm bg-grey-1">
-							<q-list dense v-for="(list,i) in list1_2" :key="i">
-								<q-item dense tag="label" v-ripple>
-									<q-item-section>
-										<q-item-label>{{ list.label }}</q-item-label>
-									</q-item-section>
-									<q-item-section side >
-										<q-rating
-											v-model="model1"
-											:val="list.id"
-											max="5"
-											size="sm"
-											color="grey"
-											:color-selected="ratingColors"
-											label="ระดับการประเมินพฤติกรรม"
-										>
-											<template v-slot:tip-1>
-												<q-tooltip>ปรับปรุง</q-tooltip>
-											</template>
-											<template v-slot:tip-2>
-												<q-tooltip>พอใช้</q-tooltip>
-											</template>
-											<template v-slot:tip-3>
-												<q-tooltip>ปานกลาง</q-tooltip>
-											</template>
-											<template v-slot:tip-4>
-												<q-tooltip>ดี</q-tooltip>
-											</template>
-											<template v-slot:tip-5>
-												<q-tooltip>ดีมาก</q-tooltip>
-											</template>
-										</q-rating>
-									</q-item-section>
-								</q-item>
-								<q-separator class="q-my-xs" v-if="i + 1 < list1_2.length"  />
-							</q-list>
-						</q-card>
-					</div>
-					<div class="col-12 row">
-						<div class="col-12 text-top0 row items-center q-pl-lg">
-							<q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
-							1.2 ความรู้ความสามารถ
-						</div>
-						<q-card flat bordered class="col-xs-12 col-sm-11 col-md-10  offset-md-1 q-pa-sm bg-grey-1">
-							<q-list dense>
-								<q-item dense tag="label" v-ripple>
-									<q-item-section>
-										<q-item-label>ความรู้ความสามารถ</q-item-label>
-									</q-item-section>
-									<q-item-section side >
-										<q-rating
-											v-model="model1_2"
-											max="5"
-											size="sm"
-											color="grey"
-											:color-selected="ratingColors"
-											label="ระดับการประเมินพฤติกรรม"
-										>
-											<template v-slot:tip-1>
-												<q-tooltip>ปรับปรุง</q-tooltip>
-											</template>
-											<template v-slot:tip-2>
-												<q-tooltip>พอใช้</q-tooltip>
-											</template>
-											<template v-slot:tip-3>
-												<q-tooltip>ปานกลาง</q-tooltip>
-											</template>
-											<template v-slot:tip-4>
-												<q-tooltip>ดี</q-tooltip>
-											</template>
-											<template v-slot:tip-5>
-												<q-tooltip>ดีมาก</q-tooltip>
-											</template>
-										</q-rating>
-									</q-item-section>
-								</q-item>
-							</q-list>
-						</q-card>
-					</div>
-					<div class="col-12 row">
-						<div class="col-12 text-top0 row items-center q-pl-lg">
-							<q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
-							1.3 ทักษะ
-						</div>
-						<q-card flat bordered class="col-xs-12 col-sm-11 col-md-10  offset-md-1 q-pa-sm bg-grey-1">
-							<q-list dense>
-								<q-item dense tag="label" v-ripple>
-									<q-item-section>
-										<q-item-label>ทักษะ</q-item-label>
-									</q-item-section>
-									<q-item-section side >
-										<q-rating
-											v-model="model1_3"
-											max="5"
-											size="sm"
-											color="grey"
-											:color-selected="ratingColors"
-											label="ระดับการประเมินพฤติกรรม"
-										>
-											<template v-slot:tip-1>
-												<q-tooltip>ปรับปรุง</q-tooltip>
-											</template>
-											<template v-slot:tip-2>
-												<q-tooltip>พอใช้</q-tooltip>
-											</template>
-											<template v-slot:tip-3>
-												<q-tooltip>ปานกลาง</q-tooltip>
-											</template>
-											<template v-slot:tip-4>
-												<q-tooltip>ดี</q-tooltip>
-											</template>
-											<template v-slot:tip-5>
-												<q-tooltip>ดีมาก</q-tooltip>
-											</template>
-										</q-rating>
-									</q-item-section>
-								</q-item>
-							</q-list>
-						</q-card>
-					</div>
-					<div class="col-12 row">
-						<div class="col-12 text-top0 row items-center q-pl-lg">
-							<q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
-							1.4 สมรรถนะ
-						</div>
-						<q-card flat bordered class="col-xs-12 col-sm-11 col-md-10  offset-md-1 q-pa-sm bg-grey-1">
-							<q-list dense>
-								<q-item dense tag="label" v-ripple>
-									<q-item-section>
-										<q-item-label>สมรรถนะ</q-item-label>
-									</q-item-section>
-									<q-item-section side >
-										<q-rating
-											v-model="model1_4"
-											max="5"
-											size="sm"
-											color="grey"
-											:color-selected="ratingColors"
-											label="ระดับการประเมินพฤติกรรม"
-										>
-											<template v-slot:tip-1>
-												<q-tooltip>ปรับปรุง</q-tooltip>
-											</template>
-											<template v-slot:tip-2>
-												<q-tooltip>พอใช้</q-tooltip>
-											</template>
-											<template v-slot:tip-3>
-												<q-tooltip>ปานกลาง</q-tooltip>
-											</template>
-											<template v-slot:tip-4>
-												<q-tooltip>ดี</q-tooltip>
-											</template>
-											<template v-slot:tip-5>
-												<q-tooltip>ดีมาก</q-tooltip>
-											</template>
-										</q-rating>
-									</q-item-section>
-								</q-item>
-							</q-list>
-						</q-card>
-					</div>
-					<div class="col-12 row">
-						<div class="col-12 text-top0 row items-center q-pl-lg">
-							<q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
-							1.5 ความสามารถในการเรียนรู้งาน
-						</div>
-						<q-card flat bordered class="col-xs-12 col-sm-11 col-md-10  offset-md-1 q-pa-sm bg-grey-1">
-							<q-list dense>
-								<q-item dense tag="label" v-ripple>
-									<q-item-section>
-										<q-item-label>ความสามารถในการเรียนรู้งาน</q-item-label>
-									</q-item-section>
-									<q-item-section side >
-										<q-rating
-											v-model="model1_5"
-											max="5"
-											size="sm"
-											color="grey"
-											:color-selected="ratingColors"
-											label="ระดับการประเมินพฤติกรรม"
-										>
-											<template v-slot:tip-1>
-												<q-tooltip>ปรับปรุง</q-tooltip>
-											</template>
-											<template v-slot:tip-2>
-												<q-tooltip>พอใช้</q-tooltip>
-											</template>
-											<template v-slot:tip-3>
-												<q-tooltip>ปานกลาง</q-tooltip>
-											</template>
-											<template v-slot:tip-4>
-												<q-tooltip>ดี</q-tooltip>
-											</template>
-											<template v-slot:tip-5>
-												<q-tooltip>ดีมาก</q-tooltip>
-											</template>
-										</q-rating>
-									</q-item-section>
-								</q-item>
-							</q-list>
-						</q-card>
-					</div>
-					<div class="col-12 row">
-						<div class="col-12 text-top0 row items-center q-pl-lg">
-							<q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
-							1.6 ความสามารถในการปรับใช้ความรู้กับงานในหน้าที่
-						</div>
-						<q-card flat bordered class="col-xs-12 col-sm-11 col-md-10  offset-md-1 q-pa-sm bg-grey-1">
-							<q-list dense>
-								<q-item dense tag="label" v-ripple>
-									<q-item-section>
-										<q-item-label>ความสามารถในการปรับใช้ความรู้กับงานในหน้าที่</q-item-label>
-									</q-item-section>
-									<q-item-section side >
-										<q-rating
-											v-model="model1_6"
-											max="5"
-											size="sm"
-											color="grey"
-											:color-selected="ratingColors"
-											label="ระดับการประเมินพฤติกรรม"
-										>
-											<template v-slot:tip-1>
-												<q-tooltip>ปรับปรุง</q-tooltip>
-											</template>
-											<template v-slot:tip-2>
-												<q-tooltip>พอใช้</q-tooltip>
-											</template>
-											<template v-slot:tip-3>
-												<q-tooltip>ปานกลาง</q-tooltip>
-											</template>
-											<template v-slot:tip-4>
-												<q-tooltip>ดี</q-tooltip>
-											</template>
-											<template v-slot:tip-5>
-												<q-tooltip>ดีมาก</q-tooltip>
-											</template>
-										</q-rating>
-									</q-item-section>
-								</q-item>
-							</q-list>
-						</q-card>
-					</div>
-					<div class="col-12 row">
-						<div class="col-12 text-top0 row items-center q-pl-lg">
-							<q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
-							1.7 อื่นๆ 
-							<q-checkbox class="q-ml-sm" dense v-model="etc" />
-						</div>
-						<q-card  v-if="etc" flat bordered class="col-xs-12 col-sm-11 col-md-10  offset-md-1 q-pa-sm bg-grey-1">
-							<q-list dense>
-								<q-item dense tag="label" v-ripple>
-									<q-item-section>
-										<q-item-label>
-											<q-input
-												v-model="etc_text"
-												label="กรอกอื่นๆ"
-												dense
-												lazy-rules
-												autogrow
-												hide-bottom-space
-												outlined
-												class="bg-white"
-												:rules="[(val) => (val && val.length > 0) || 'กรุณากรอกข้อความ']"
-											/>
-										</q-item-label>
-									</q-item-section>
-									<q-item-section side >
-										<q-rating
-											v-model="modelEtc"
-											max="5"
-											size="sm"
-											color="grey"
-											:color-selected="ratingColors"
-											label="ระดับการประเมินพฤติกรรม"
-										>
-											<template v-slot:tip-1>
-												<q-tooltip>ปรับปรุง</q-tooltip>
-											</template>
-											<template v-slot:tip-2>
-												<q-tooltip>พอใช้</q-tooltip>
-											</template>
-											<template v-slot:tip-3>
-												<q-tooltip>ปานกลาง</q-tooltip>
-											</template>
-											<template v-slot:tip-4>
-												<q-tooltip>ดี</q-tooltip>
-											</template>
-											<template v-slot:tip-5>
-												<q-tooltip>ดีมาก</q-tooltip>
-											</template>
-										</q-rating>
-									</q-item-section>
-								</q-item>
-							</q-list>
-						</q-card>
-					</div>
-					<div class="col-12 row">
-						<div class="col-12 text-top0 row items-center q-pl-lg">
-							<q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
-							จุดเด่น (ไม่เกิน 5 บรรทัด)
-						</div>
-						<q-input
-							outlined
-							dense
-							v-model="text2_1"
-							class="col-xs-12 col-sm-11 col-md-10 offset-md-1"
-							lazy-rules
-							type="textarea"
-							label="กรอกจุดเด่น"
-							hide-bottom-space
-							:row="5"
-							:rules="[(val) => (val && val.length > 0) || 'กรุณากรอกข้อความ']"
-						/>
-					</div>
-					<div class="col-12 row">
-						<div class="col-12 text-top0 row items-center q-pl-lg">
-							<q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
-							สิ่งที่ควรปรับปรุง (ไม่เกิน 5 บรรทัด)
-						</div>
-						<q-input
-							outlined
-							dense
-							v-model="text2_2"
-							class="col-xs-12 col-sm-11 col-md-10 offset-md-1"
-							lazy-rules
-							type="textarea"
-							hide-bottom-space
-							label="กรอกสิ่งที่ควรปรับปรุง"
-							:row="5"
-							:rules="[(val) => (val && val.length > 0) || 'กรุณากรอกข้อความ']"
-						/>
-					</div>
-
-					<div class="col-12">
-						<q-separator size="3px" color="grey-2" />
-					</div>
-
-					<!-- 2 -->
-					<div class="col-12 row">
-						<div class="col-12 text-top0 items-center">
-							<q-avatar class="bg-grey-2 q-mr-sm" size="28px">2</q-avatar>
-							พฤติกรรมของผู้ทดลองปฏิบัติบัติหน้าที่ราชการ
-						</div>
-						<div class="col-12 text-top0 row items-center q-pl-lg">
-							<q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
-							2.1 ความประพฤติ
-						</div>
-						<q-card flat bordered class="col-xs-12 col-sm-11 col-md-10  offset-md-1 q-pa-sm bg-grey-1">
-							<q-list dense v-for="(list,i) in list2_1" :key="i">
-								<q-item dense tag="label" v-ripple>
-									<q-item-section>
-										<q-item-label>{{ list.label }}</q-item-label>
-									</q-item-section>
-									<q-item-section side >
-										<q-rating
-											v-model="model"
-											:val="list.id"
-											max="5"
-											size="sm"
-											color="grey"
-											:color-selected="ratingColors"
-											label="ระดับการประเมินพฤติกรรม"
-										>
-											<template v-slot:tip-1>
-												<q-tooltip>ปรับปรุง</q-tooltip>
-											</template>
-											<template v-slot:tip-2>
-												<q-tooltip>พอใช้</q-tooltip>
-											</template>
-											<template v-slot:tip-3>
-												<q-tooltip>ปานกลาง</q-tooltip>
-											</template>
-											<template v-slot:tip-4>
-												<q-tooltip>ดี</q-tooltip>
-											</template>
-											<template v-slot:tip-5>
-												<q-tooltip>ดีมาก</q-tooltip>
-											</template>
-										</q-rating>
-									</q-item-section>
-								</q-item>
-								<q-separator class="q-my-xs" v-if="i + 1 < list2_1.length"  />
-							</q-list>
-						</q-card>
-					</div>
-					<div class="col-12 row">
-						<div class="col-12 text-top0 row items-center q-pl-lg">
-							<q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
-							2.2 ความมีคุณธรรมจริยธรรม
-						</div>
-						<q-card flat bordered class="col-xs-12 col-sm-11 col-md-10  offset-md-1 q-pa-sm bg-grey-1">
-							<q-list dense v-for="(list,i) in list2_2" :key="i">
-								<q-item dense tag="label" v-ripple>
-									<q-item-section>
-										<q-item-label>{{ list.label }}</q-item-label>
-									</q-item-section>
-									<q-item-section side >
-										<q-rating
-											v-model="model"
-											:val="list.id"
-											max="5"
-											size="sm"
-											color="grey"
-											:color-selected="ratingColors"
-											label="ระดับการประเมินพฤติกรรม"
-										>
-											<template v-slot:tip-1>
-												<q-tooltip>ปรับปรุง</q-tooltip>
-											</template>
-											<template v-slot:tip-2>
-												<q-tooltip>พอใช้</q-tooltip>
-											</template>
-											<template v-slot:tip-3>
-												<q-tooltip>ปานกลาง</q-tooltip>
-											</template>
-											<template v-slot:tip-4>
-												<q-tooltip>ดี</q-tooltip>
-											</template>
-											<template v-slot:tip-5>
-												<q-tooltip>ดีมาก</q-tooltip>
-											</template>
-										</q-rating>
-									</q-item-section>
-								</q-item>
-								<q-separator class="q-my-xs" v-if="i + 1 < list2_2.length"  />
-							</q-list>
-						</q-card>
-					</div>
-					<div class="col-12 row">
-						<div class="col-12 text-top0 row items-center q-pl-lg">
-							<q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
-							2.3 การรักษาวินัย
-						</div>
-						<q-card flat bordered class="col-xs-12 col-sm-11 col-md-10  offset-md-1 q-pa-sm bg-grey-1">
-							<q-list dense v-for="(list,i) in list2_3" :key="i">
-								<q-item dense tag="label" v-ripple>
-									<q-item-section>
-										<q-item-label>{{ list.label }}</q-item-label>
-									</q-item-section>
-									<q-item-section side >
-										<q-rating
-											v-model="model"
-											:val="list.id"
-											max="5"
-											size="sm"
-											color="grey"
-											:color-selected="ratingColors"
-											label="ระดับการประเมินพฤติกรรม"
-										>
-											<template v-slot:tip-1>
-												<q-tooltip>ปรับปรุง</q-tooltip>
-											</template>
-											<template v-slot:tip-2>
-												<q-tooltip>พอใช้</q-tooltip>
-											</template>
-											<template v-slot:tip-3>
-												<q-tooltip>ปานกลาง</q-tooltip>
-											</template>
-											<template v-slot:tip-4>
-												<q-tooltip>ดี</q-tooltip>
-											</template>
-											<template v-slot:tip-5>
-												<q-tooltip>ดีมาก</q-tooltip>
-											</template>
-										</q-rating>
-									</q-item-section>
-								</q-item>
-								<q-separator class="q-my-xs" v-if="i + 1 < list2_3.length"  />
-							</q-list>
-						</q-card>
-					</div>
-					<div class="col-12 row">
-						<div class="col-12 text-top0 row items-center q-pl-lg">
-							<q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
-							2.4 อื่นๆ 
-							<q-checkbox class="q-ml-sm" dense v-model="etc_4" />
-						</div>
-						<q-card  v-if="etc_4" flat bordered class="col-xs-12 col-sm-11 col-md-10  offset-md-1 q-pa-sm bg-grey-1">
-							<q-list dense>
-								<q-item dense tag="label" v-ripple>
-									<q-item-section>
-										<q-item-label>
-											<q-input
-												v-model="etc_text2"
-												label="กรอกอื่นๆ"
-												dense
-												lazy-rules
-												autogrow
-												hide-bottom-space
-												outlined
-												class="bg-white"
-												:rules="[(val) => (val && val.length > 0) || 'กรุณากรอกข้อความ']"
-											/>
-										</q-item-label>
-									</q-item-section>
-									<q-item-section side >
-										<q-rating
-											v-model="modelEtc"
-											max="5"
-											size="sm"
-											color="grey"
-											:color-selected="ratingColors"
-											label="ระดับการประเมินพฤติกรรม"
-										>
-											<template v-slot:tip-1>
-												<q-tooltip>ปรับปรุง</q-tooltip>
-											</template>
-											<template v-slot:tip-2>
-												<q-tooltip>พอใช้</q-tooltip>
-											</template>
-											<template v-slot:tip-3>
-												<q-tooltip>ปานกลาง</q-tooltip>
-											</template>
-											<template v-slot:tip-4>
-												<q-tooltip>ดี</q-tooltip>
-											</template>
-											<template v-slot:tip-5>
-												<q-tooltip>ดีมาก</q-tooltip>
-											</template>
-										</q-rating>
-									</q-item-section>
-								</q-item>
-							</q-list>
-						</q-card>
-					</div>
-					<div class="col-12 row">
-						<div class="col-12 text-top0 row items-center q-pl-lg">
-							<q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
-							จุดเด่น (ไม่เกิน 5 บรรทัด)
-						</div>
-						<q-input
-							outlined
-							dense
-							v-model="text3_1"
-							class="col-xs-12 col-sm-11 col-md-10 offset-md-1"
-							lazy-rules
-							type="textarea"
-							label="กรอกจุดเด่น"
-							hide-bottom-space
-							:row="5"
-							:rules="[(val) => (val && val.length > 0) || 'กรุณากรอกข้อความ']"
-						/>
-					</div>
-					<div class="col-12 row">
-						<div class="col-12 text-top0 row items-center q-pl-lg">
-							<q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
-							สิ่งที่ควรปรับปรุง (ไม่เกิน 5 บรรทัด)
-						</div>
-						<q-input
-							outlined
-							dense
-							v-model="text3_2"
-							class="col-xs-12 col-sm-11 col-md-10 offset-md-1"
-							lazy-rules
-							type="textarea"
-							hide-bottom-space
-							label="กรอกสิ่งที่ควรปรับปรุง"
-							:row="5"
-							:rules="[(val) => (val && val.length > 0) || 'กรุณากรอกข้อความ']"
-						/>
-					</div>
-
-					<div class="col-12">
-						<q-separator size="3px" color="grey-2" />
-					</div>
-
-					<!-- 3 -->
-					<div class="col-12 row justify-center">
-						<div class="col-12 text-top0 items-center">
-							<q-avatar class="bg-grey-2 q-mr-sm" size="28px">3</q-avatar>
-							การพัฒนาผู้ทดลองปฏิบัติบัติหน้าที่ราชการ
-						</div>
-						<q-card flat bordered class="col-xs-12 col-sm-11 col-md-11 q-pa-sm bg-grey-1">
-							<q-list dense>
-								<q-item dense tag="label" v-ripple>
-									<q-item-section>
-										<q-item-label>1. การปฐมนิเทศ</q-item-label>
-									</q-item-section>
-									<q-item-section side >
-										<div class="row">
-											<q-radio
-												checked-icon="task_alt"
-												unchecked-icon="panorama_fish_eye"
-												v-model="radio_1"
-												val="1"
-												label="ดำเนินการเเล้ว"
-											/>
-											<q-radio
-												checked-icon="task_alt"
-												unchecked-icon="panorama_fish_eye"
-												v-model="radio_1"
-												val="0"
-												label=" ยังไม่ได้ดำเนินการ"
-											/>
-										</div>
-									</q-item-section>
-								</q-item>
-								<q-separator class="q-my-xs"/>
-								<q-item dense tag="label" v-ripple>
-									<q-item-section>
-										<q-item-label>2. การเรียนรู้ด้วยตนเอง</q-item-label>
-									</q-item-section>
-									<q-item-section side >
-										<div class="row">
-											<q-radio
-												checked-icon="task_alt"
-												unchecked-icon="panorama_fish_eye"
-												v-model="radio_2"
-												val="1"
-												label="ดำเนินการเเล้ว"
-											/>
-											<q-radio
-												checked-icon="task_alt"
-												unchecked-icon="panorama_fish_eye"
-												v-model="radio_2"
-												val="0"
-												label=" ยังไม่ได้ดำเนินการ"
-											/>
-										</div>
-									</q-item-section>
-								</q-item>
-								<q-separator class="q-my-xs"/>
-								<q-item dense tag="label" v-ripple>
-									<q-item-section>
-										<q-item-label>3. การอบรมสัมนาร่วมกัน</q-item-label>
-									</q-item-section>
-									<q-item-section side >
-										<div class="row">
-											<q-radio
-												checked-icon="task_alt"
-												unchecked-icon="panorama_fish_eye"
-												v-model="radio_3"
-												val="1"
-												label="ดำเนินการเเล้ว"
-											/>
-											<q-radio
-												checked-icon="task_alt"
-												unchecked-icon="panorama_fish_eye"
-												v-model="radio_3"
-												val="0"
-												label=" ยังไม่ได้ดำเนินการ"
-											/>
-										</div>
-									</q-item-section>
-								</q-item>
-								<q-separator class="q-my-xs"/>
-								<q-item dense tag="label" v-ripple>
-									<q-item-section>
-										<q-item-label>4. การอบรมอื่น ๆ ตามที่หน่วยงานกำหนด (ถ้ามี)</q-item-label>
-									</q-item-section>
-									<q-item-section side >
-										<div class="row">
-											<q-radio
-												checked-icon="task_alt"
-												unchecked-icon="panorama_fish_eye"
-												v-model="radio_4"
-												val="1"
-												label="ดำเนินการเเล้ว"
-											/>
-											<q-radio
-												checked-icon="task_alt"
-												unchecked-icon="panorama_fish_eye"
-												v-model="radio_4"
-												val="0"
-												label=" ยังไม่ได้ดำเนินการ"
-											/>
-										</div>
-									</q-item-section>
-								</q-item>
-							</q-list>
-						</q-card>
-					</div>
-
-					<div class="col-12">
-						<q-separator size="3px" color="grey-2" />
-					</div>
-
-					<div class="col-12 row">
-						<div class="col-12 text-top2 row items-center">
-							ผู้บังคับบัญชาผู้มอบหมายงาน
-						</div>
-						<div class="col-12 row q-col-gutter-md">
-							<q-select 
-								class="col-xs-12 col-sm-8" 
-								dense 
-								v-model="Autherise"
-								outlined
-          						:options="option"
-								label="ผู้บังคับบัญชา" />
-							<div class="col-xs-12 col-sm-4">
-								<datepicker
-									menu-class-name="modalfix"
-									v-model="dateAutherise"
-									:locale="'th'"
-									autoApply
-									borderless
-									:enableTimePicker="false"
-									week-start="0"
-								>
-									<template #year="{ year }">
-									{{ year + 543 }}
-									</template>
-									<template #year-overlay-value="{ value }">
-									{{ parseInt(value + 543) }}
-									</template>
-									<template #trigger>
-									<q-input
-										outlined
-										dense
-										class="full-width datepicker col-3"
-										:model-value="
-										dateAutherise != null ? date2Thai(dateAutherise) : null
-										"
-										:label="`${'ลงวันที่'}`"
-										:rules="[(val) => !!val || `${'กรุณาเลือกลงวันที่'}`]"
-									>
-										<template v-slot:prepend>
-										<q-icon
-											name="event"
-											class="cursor-pointer"
-											style="color: var(--q-primary)"
-										>
-										</q-icon>
-										</template>
-									</q-input>
-									</template>
-								</datepicker>
-							</div>
-						</div>
-					</div>
-				</div>
-			</div>
-			<q-separator />
-			<div class="flex justify-end q-px-sm q-pt-sm">
-				<q-btn dense class="q-px-md" unelevated label="บันทึก" color="public"/>
-			</div>
-		</div>
-	</div>
-</template>
-<script setup lang="ts">
-import { ref } from "vue";
-import { useCounterMixin } from "@/stores/mixin";
-import { useRoute } from "vue-router";
-import { useQuasar } from "quasar";
-import router from "@/router";
-
-const $q = useQuasar();
-const ratingColors = [ 'light-blue-3', 'light-blue-6', 'blue', 'blue-9', 'blue-10' ];
-const list1_1 = [
-	{id: '1', label: 'ผลผลิตของงานที่คาดหวัง 1'},
-	{id: '2', label: 'ผลผลิตของงานที่คาดหวัง 2'},
-	{id: '3', label: 'ผลผลิตของงานที่คาดหวัง 3'},
-	{id: '4', label: 'ผลผลิตของงานที่คาดหวัง 4'},
-	{id: '5', label: 'ผลผลิตของงานที่คาดหวัง 5'}
-];
-const list1_2 = [
-	{id: '1', label: 'ผลผลิตของงานที่เกิดขึ้น 1'},
-	{id: '2', label: 'ผลผลิตของงานที่เกิดขึ้น 2'},
-	{id: '3', label: 'ผลผลิตของงานที่เกิดขึ้น 3'},
-	{id: '4', label: 'ผลผลิตของงานที่เกิดขึ้น 4'},
-	{id: '5', label: 'ผลผลิตของงานที่เกิดขึ้น 5'}
-];
-
-const list2_1 = [
-	{id: '1', label: 'ให้บริการประชาชนหรือผู้รับบริการด้วยอัธยาศัยดี'},
-	{id: '2', label: 'มีความรับผิดชอบในการปฏิบัติบัติงาน'},
-	{id: '3', label: 'ให้บริการประชาชนหรือผู้รับบริการด้วยความรวดเร็ว เอาใจใส่เป็นมาตรฐานเดียวกัน'},
-	{id: '4', label: 'ตั้งใจปฏิบัติบัติหน้าที่ราชการด้วยความอุตสาหะ ขยันหมั่นเพียร'},
-];
-const list2_2 = [
-	{id: '1', label: 'อุทิศตนและเสียสละเวลาในการปฏิบัติบัติงานอย่างเต็มกำลังความสามารถ'},
-	{id: '2', label: 'มีจิตสำนึกที่ดี ปฏิบัติบัติงานด้วยความซื่อสัตย์ สุจริต'},
-	{id: '3', label: 'ยึดมั่นในสถาบันบัพระมหากษัตริย์ และไม่กระทำการใด ๆ อันจะก่อให้เกิดความเสียหายต่อประเทศชาติ'},
-];
-
-const list2_3 = [
-	{id: '1', label: 'มีความรับรัผิดชอบในการรักษาเวลาทำงาน'},
-	{id: '2', label: 'แต่งกายในการปฏิบัติบัติงานได้อย่างเหมาะสมกับการเป็นข้าราชการ'},
-	{id: '3', label: 'ไม่กระทำการใด ๆ อันอาจก่อให้เกิดความเสียหายแก่ชื่อเสียงของหน่วยงาน'},
-	{id: '4', label: 'ไม่กระทำการใด ๆ อันเป็นการเสื่อมเกียรติและศักดิ์ศรีของความเป็นข้าราชการ'},
-	{id: '5', label: 'ปฏิบัติบัติหน้าที่อย่างตรงไปตรงมาโดยยึกหลักจรรยาบรรณวิชาชีพ'}
-];
-
-const etc_text = ref<any>(null);
-const etc_text2 = ref<any>(null);
-
-const text3_1 = ref<any>(null);
-const text3_2 = ref<any>(null);
-const mixin = useCounterMixin();
-const { date2Thai } = mixin;
-const dateToday = ref<Date>(new Date("10-10-2023"));
-const dateEnd = ref<Date>(new Date("12-10-2023"));
-const period = ref<number>(1);
-
-const Autherise = ref<any>(null);
-
-const model = ref<any>(0);
-const model1 = ref<any>(0);
-const model1_2 = ref<any>(0);
-const model1_3 = ref<any>(0);
-const model1_4 = ref<any>(0);
-const model1_5 = ref<any>(0);
-const model1_6 = ref<any>(0);
-const modelEtc = ref<any>(0);
-const dateAutherise = ref<any>(new Date());
-const etc = ref<any>(false);
-const etc_4 = ref<any>(false);
-const radio_1 = ref<any>(null);
-const radio_2 = ref<any>(null);
-const radio_3 = ref<any>(null);
-const radio_4 = ref<any>(null);
-const option = ref<any>(["นาย ภูริณัฐ บุญขาว", "นาย พงศกร วรารักษ์"]);
-const text2_1 = ref<string>('');
-const text2_2 = ref<string>('');
-
-const onSubmit = () => {
-  $q.notify({
-    color: "green-4",
-    textColor: "white",
-    icon: "cloud_done",
-    message: "ส่งแบบประเมินเเล้ว",
-  });
-};
-
-const onReset = () => {
-  router.push({ name: "probation" });
-};
-</script>
-
-<style lang="scss" scoped>
-.text-top2{
-	font-weight: 500;
-	padding-bottom: 8px;
-   color: rgb(70, 68, 68);
-}
-.text-top0{
-	font-weight: 600;
-	padding-bottom: 8px;
-    color: rgb(70, 68, 68);
-}
-.text-Hd{
-	font-weight: 600;
-    font-size: 1rem;
-    padding-bottom: 5px;
-    color: #02A998;
-}
-.q-rating__icon{
-	text-shadow: transparent !important;
-}
-</style>

src/modules/05_placement/components/probation/form/formEva1.vue

@@ -0,0 +1,472 @@
+<template>
+  <div class="row col-12 q-gutter-lg no-margin">
+    <div class="col-12 row">
+      <div class="col-12 text-top0 items-center">
+        <q-avatar class="bg-grey-2 q-mr-sm" size="28px">1</q-avatar>
+        ผลสัมฤทธิ์ของการทดลองปฏิบัติบัติหน้าที่ราชการ
+      </div>
+      <div class="col-12 text-top0 row items-center q-pl-lg">
+        <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
+        1.1 ความสำเร็จของงานที่ได้รับมอบหมาย
+      </div>
+      <div class="col-xs-12 col-sm-11 col-md-10 offset-md-1 text-top2">
+        1.ผลผลิตของงานที่คาดหวัง
+      </div>
+      <q-card
+        flat
+        bordered
+        class="col-xs-12 col-sm-11 col-md-10 offset-md-1 q-pa-sm bg-grey-1"
+      >
+        <q-list dense v-for="(list, i) in list1_1" :key="i">
+          <q-item dense tag="label" v-ripple>
+            <q-item-section>
+              <q-item-label>{{ list.label }}</q-item-label>
+            </q-item-section>
+            <q-item-section side>
+              <q-rating
+                v-model="model"
+                :val="list.id"
+                max="5"
+                size="sm"
+                color="grey"
+                :color-selected="ratingColors"
+                label="ระดับการประเมินพฤติกรรม"
+              >
+                <template v-slot:tip-1>
+                  <q-tooltip>ต่ำกว่าความคาดหวังมาก</q-tooltip>
+                </template>
+                <template v-slot:tip-2>
+                  <q-tooltip>ต่ำกว่าความคาดหวังค่อนข้างมาก</q-tooltip>
+                </template>
+                <template v-slot:tip-3>
+                  <q-tooltip>เป็นไปตามความคาดหวัง</q-tooltip>
+                </template>
+                <template v-slot:tip-4>
+                  <q-tooltip>สูงว่าความคาดหวังค่อนข้างมาก</q-tooltip>
+                </template>
+                <template v-slot:tip-5>
+                  <q-tooltip>สูงกว่าความคาดหวังมาก</q-tooltip>
+                </template>
+              </q-rating>
+            </q-item-section>
+          </q-item>
+          <q-separator class="q-my-xs" v-if="i + 1 < list1_1.length" />
+        </q-list>
+      </q-card>
+    </div>
+    <div class="col-12 row">
+      <div class="col-12 text-top0 row items-center q-pl-lg">
+        <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
+        1.1 ความสำเร็จของงานที่ได้รับมอบหมาย
+      </div>
+      <div class="col-xs-12 col-sm-11 col-md-10 offset-md-1 text-top2">
+        1.ผลผลิตของงานที่เกิดขึ้น
+      </div>
+      <q-card
+        flat
+        bordered
+        class="col-xs-12 col-sm-11 col-md-10 offset-md-1 q-pa-sm bg-grey-1"
+      >
+        <q-list dense v-for="(list, i) in list1_2" :key="i">
+          <q-item dense tag="label" v-ripple>
+            <q-item-section>
+              <!-- <q-item-label>{{ list.label }}</q-item-label> -->
+              <q-input
+                outlined
+                dense
+                v-model="text2_1"
+                class="col-xs-12 col-sm-11 col-md-10 offset-md-1"
+                lazy-rules
+                type="textarea"
+                label="ผลผลิตของงานที่เกิดขึ้นจริง"
+                hide-bottom-space
+                :row="1"
+              />
+            </q-item-section>
+            <q-item-section side>
+              <q-rating
+                v-model="model1"
+                :val="list.id"
+                max="5"
+                size="sm"
+                color="grey"
+                :color-selected="ratingColors"
+                label="ระดับการประเมินพฤติกรรม"
+              >
+                <template v-slot:tip-1>
+                  <q-tooltip>ต่ำกว่าความคาดหวังมาก</q-tooltip>
+                </template>
+                <template v-slot:tip-2>
+                  <q-tooltip>ต่ำกว่าความคาดหวังค่อนข้างมาก</q-tooltip>
+                </template>
+                <template v-slot:tip-3>
+                  <q-tooltip>เป็นไปตามความคาดหวัง</q-tooltip>
+                </template>
+                <template v-slot:tip-4>
+                  <q-tooltip>สูงว่าความคาดหวังค่อนข้างมาก</q-tooltip>
+                </template>
+                <template v-slot:tip-5>
+                  <q-tooltip>สูงกว่าความคาดหวังมาก</q-tooltip>
+                </template>
+              </q-rating>
+            </q-item-section>
+          </q-item>
+          <q-separator class="q-my-xs" v-if="i + 1 < list1_2.length" />
+        </q-list>
+      </q-card>
+    </div>
+    <div class="col-12 row">
+      <div class="col-12 text-top0 row items-center q-pl-lg">
+        <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
+        1.2 ความรู้ความสามารถ
+      </div>
+      <q-card
+        flat
+        bordered
+        class="col-xs-12 col-sm-11 col-md-10 offset-md-1 q-pa-sm bg-grey-1"
+      >
+        <q-list dense>
+          <q-item dense tag="label" v-ripple>
+            <q-item-section>
+              <q-item-label>ความรู้ความสามารถ</q-item-label>
+            </q-item-section>
+            <q-item-section side>
+              <q-rating
+                v-model="model1_2"
+                max="5"
+                size="sm"
+                color="grey"
+                :color-selected="ratingColors"
+                label="ระดับการประเมินพฤติกรรม"
+              >
+                <template v-slot:tip-1>
+                  <q-tooltip>ต่ำกว่าความคาดหวังมาก</q-tooltip>
+                </template>
+                <template v-slot:tip-2>
+                  <q-tooltip>ต่ำกว่าความคาดหวังค่อนข้างมาก</q-tooltip>
+                </template>
+                <template v-slot:tip-3>
+                  <q-tooltip>เป็นไปตามความคาดหวัง</q-tooltip>
+                </template>
+                <template v-slot:tip-4>
+                  <q-tooltip>สูงว่าความคาดหวังค่อนข้างมาก</q-tooltip>
+                </template>
+                <template v-slot:tip-5>
+                  <q-tooltip>สูงกว่าความคาดหวังมาก</q-tooltip>
+                </template>
+              </q-rating>
+            </q-item-section>
+          </q-item>
+        </q-list>
+      </q-card>
+    </div>
+    <div class="col-12 row">
+      <div class="col-12 text-top0 row items-center q-pl-lg">
+        <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
+        1.3 ทักษะ
+      </div>
+      <q-card
+        flat
+        bordered
+        class="col-xs-12 col-sm-11 col-md-10 offset-md-1 q-pa-sm bg-grey-1"
+      >
+        <q-list dense>
+          <q-item dense tag="label" v-ripple>
+            <q-item-section>
+              <q-item-label>ทักษะ</q-item-label>
+            </q-item-section>
+            <q-item-section side>
+              <q-rating
+                v-model="model1_3"
+                max="5"
+                size="sm"
+                color="grey"
+                :color-selected="ratingColors"
+                label="ระดับการประเมินพฤติกรรม"
+              >
+                <template v-slot:tip-1>
+                  <q-tooltip>ต่ำกว่าความคาดหวังมาก</q-tooltip>
+                </template>
+                <template v-slot:tip-2>
+                  <q-tooltip>ต่ำกว่าความคาดหวังค่อนข้างมาก</q-tooltip>
+                </template>
+                <template v-slot:tip-3>
+                  <q-tooltip>เป็นไปตามความคาดหวัง</q-tooltip>
+                </template>
+                <template v-slot:tip-4>
+                  <q-tooltip>สูงว่าความคาดหวังค่อนข้างมาก</q-tooltip>
+                </template>
+                <template v-slot:tip-5>
+                  <q-tooltip>สูงกว่าความคาดหวังมาก</q-tooltip>
+                </template>
+              </q-rating>
+            </q-item-section>
+          </q-item>
+        </q-list>
+      </q-card>
+    </div>
+    <div class="col-12 row">
+      <div class="col-12 text-top0 row items-center q-pl-lg">
+        <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
+        1.4 สมรรถนะ
+      </div>
+      <q-card
+        flat
+        bordered
+        class="col-xs-12 col-sm-11 col-md-10 offset-md-1 q-pa-sm bg-grey-1"
+      >
+        <q-list dense>
+          <q-item dense tag="label" v-ripple>
+            <q-item-section>
+              <q-item-label>สมรรถนะ</q-item-label>
+            </q-item-section>
+            <q-item-section side>
+              <q-rating
+                v-model="model1_4"
+                max="5"
+                size="sm"
+                color="grey"
+                :color-selected="ratingColors"
+                label="ระดับการประเมินพฤติกรรม"
+              >
+                <template v-slot:tip-1>
+                  <q-tooltip>ต่ำกว่าความคาดหวังมาก</q-tooltip>
+                </template>
+                <template v-slot:tip-2>
+                  <q-tooltip>ต่ำกว่าความคาดหวังค่อนข้างมาก</q-tooltip>
+                </template>
+                <template v-slot:tip-3>
+                  <q-tooltip>เป็นไปตามความคาดหวัง</q-tooltip>
+                </template>
+                <template v-slot:tip-4>
+                  <q-tooltip>สูงว่าความคาดหวังค่อนข้างมาก</q-tooltip>
+                </template>
+                <template v-slot:tip-5>
+                  <q-tooltip>สูงกว่าความคาดหวังมาก</q-tooltip>
+                </template>
+              </q-rating>
+            </q-item-section>
+          </q-item>
+        </q-list>
+      </q-card>
+    </div>
+    <div class="col-12 row">
+      <div class="col-12 text-top0 row items-center q-pl-lg">
+        <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
+        1.5 ความสามารถในการเรียนรู้งาน
+      </div>
+      <q-card
+        flat
+        bordered
+        class="col-xs-12 col-sm-11 col-md-10 offset-md-1 q-pa-sm bg-grey-1"
+      >
+        <q-list dense>
+          <q-item dense tag="label" v-ripple>
+            <q-item-section>
+              <q-item-label>ความสามารถในการเรียนรู้งาน</q-item-label>
+            </q-item-section>
+            <q-item-section side>
+              <q-rating
+                v-model="model1_5"
+                max="5"
+                size="sm"
+                color="grey"
+                :color-selected="ratingColors"
+                label="ระดับการประเมินพฤติกรรม"
+              >
+                <template v-slot:tip-1>
+                  <q-tooltip>ต่ำกว่าความคาดหวังมาก</q-tooltip>
+                </template>
+                <template v-slot:tip-2>
+                  <q-tooltip>ต่ำกว่าความคาดหวังค่อนข้างมาก</q-tooltip>
+                </template>
+                <template v-slot:tip-3>
+                  <q-tooltip>เป็นไปตามความคาดหวัง</q-tooltip>
+                </template>
+                <template v-slot:tip-4>
+                  <q-tooltip>สูงว่าความคาดหวังค่อนข้างมาก</q-tooltip>
+                </template>
+                <template v-slot:tip-5>
+                  <q-tooltip>สูงกว่าความคาดหวังมาก</q-tooltip>
+                </template>
+              </q-rating>
+            </q-item-section>
+          </q-item>
+        </q-list>
+      </q-card>
+    </div>
+    <div class="col-12 row">
+      <div class="col-12 text-top0 row items-center q-pl-lg">
+        <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
+        1.6 ความสามารถในการปรับใช้ความรู้กับงานในหน้าที่
+      </div>
+      <q-card
+        flat
+        bordered
+        class="col-xs-12 col-sm-11 col-md-10 offset-md-1 q-pa-sm bg-grey-1"
+      >
+        <q-list dense>
+          <q-item dense tag="label" v-ripple>
+            <q-item-section>
+              <q-item-label
+                >ความสามารถในการปรับใช้ความรู้กับงานในหน้าที่</q-item-label
+              >
+            </q-item-section>
+            <q-item-section side>
+              <q-rating
+                v-model="model1_6"
+                max="5"
+                size="sm"
+                color="grey"
+                :color-selected="ratingColors"
+                label="ระดับการประเมินพฤติกรรม"
+              >
+                <template v-slot:tip-1>
+                  <q-tooltip>ต่ำกว่าความคาดหวังมาก</q-tooltip>
+                </template>
+                <template v-slot:tip-2>
+                  <q-tooltip>ต่ำกว่าความคาดหวังค่อนข้างมาก</q-tooltip>
+                </template>
+                <template v-slot:tip-3>
+                  <q-tooltip>เป็นไปตามความคาดหวัง</q-tooltip>
+                </template>
+                <template v-slot:tip-4>
+                  <q-tooltip>สูงว่าความคาดหวังค่อนข้างมาก</q-tooltip>
+                </template>
+                <template v-slot:tip-5>
+                  <q-tooltip>สูงกว่าความคาดหวังมาก</q-tooltip>
+                </template>
+              </q-rating>
+            </q-item-section>
+          </q-item>
+        </q-list>
+      </q-card>
+    </div>
+    <div class="col-12 row">
+      <div class="col-12 text-top0 row items-center q-pl-lg">
+        <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
+        1.7 อื่นๆ
+        <q-checkbox class="q-ml-sm" dense v-model="etc" />
+      </div>
+      <q-card
+        v-if="etc"
+        flat
+        bordered
+        class="col-xs-12 col-sm-11 col-md-10 offset-md-1 q-pa-sm bg-grey-1"
+      >
+        <q-list dense>
+          <q-item dense tag="label" v-ripple>
+            <q-item-section>
+              <q-item-label>
+                <q-input
+                  v-model="etc_text"
+                  label="กรอกอื่นๆ"
+                  dense
+                  lazy-rules
+                  autogrow
+                  hide-bottom-space
+                  outlined
+                  class="bg-white"
+                  :rules="[
+                    (val) => (val && val.length > 0) || 'กรุณากรอกข้อความ',
+                  ]"
+                />
+              </q-item-label>
+            </q-item-section>
+            <q-item-section side>
+              <q-rating
+                v-model="modelEtc"
+                max="5"
+                size="sm"
+                color="grey"
+                :color-selected="ratingColors"
+                label="ระดับการประเมินพฤติกรรม"
+              >
+                <template v-slot:tip-1>
+                  <q-tooltip>ต่ำกว่าความคาดหวังมาก</q-tooltip>
+                </template>
+                <template v-slot:tip-2>
+                  <q-tooltip>ต่ำกว่าความคาดหวังค่อนข้างมาก</q-tooltip>
+                </template>
+                <template v-slot:tip-3>
+                  <q-tooltip>เป็นไปตามความคาดหวัง</q-tooltip>
+                </template>
+                <template v-slot:tip-4>
+                  <q-tooltip>สูงว่าความคาดหวังค่อนข้างมาก</q-tooltip>
+                </template>
+                <template v-slot:tip-5>
+                  <q-tooltip>สูงกว่าความคาดหวังมาก</q-tooltip>
+                </template>
+              </q-rating>
+            </q-item-section>
+          </q-item>
+        </q-list>
+      </q-card>
+    </div>
+    <FormComment />
+  </div>
+</template>
+<script setup lang="ts">
+import { ref, defineAsyncComponent } from "vue";
+
+import { useQuasar } from "quasar";
+
+import { useProbationDataStore } from "@/modules/05_placement/store";
+
+const FormComment = defineAsyncComponent(
+  () =>
+    import(
+      "@/modules/05_placement/components/probation/form/formEvacomment.vue"
+    )
+);
+
+const $q = useQuasar();
+const probationStore = useProbationDataStore();
+const { ratingColors } = probationStore;
+
+const list1_1 = [
+  { id: "1", label: "ผลผลิตของงานที่คาดหวัง 1" },
+  { id: "2", label: "ผลผลิตของงานที่คาดหวัง 2" },
+  { id: "3", label: "ผลผลิตของงานที่คาดหวัง 3" },
+  { id: "4", label: "ผลผลิตของงานที่คาดหวัง 4" },
+  { id: "5", label: "ผลผลิตของงานที่คาดหวัง 5" },
+];
+const list1_2 = [
+  { id: "1", label: "ผลผลิตของงานที่เกิดขึ้น 1" },
+  { id: "2", label: "ผลผลิตของงานที่เกิดขึ้น 2" },
+  { id: "3", label: "ผลผลิตของงานที่เกิดขึ้น 3" },
+  { id: "4", label: "ผลผลิตของงานที่เกิดขึ้น 4" },
+  { id: "5", label: "ผลผลิตของงานที่เกิดขึ้น 5" },
+];
+
+const etc_text = ref<any>(null);
+const text2_1 = ref<string>("");
+
+const model = ref<any>(0);
+const model1 = ref<any>(0);
+const model1_2 = ref<any>(0);
+const model1_3 = ref<any>(0);
+const model1_4 = ref<any>(0);
+const model1_5 = ref<any>(0);
+const model1_6 = ref<any>(0);
+const modelEtc = ref<any>(0);
+const etc = ref<any>(false);
+</script>
+
+<style lang="scss" scoped>
+.text-top2 {
+  font-weight: 500;
+  padding-bottom: 8px;
+  color: rgb(70, 68, 68);
+}
+
+.text-top0 {
+  font-weight: 600;
+  padding-bottom: 8px;
+  color: rgb(70, 68, 68);
+}
+
+.q-rating__icon {
+  text-shadow: transparent !important;
+}
+</style>

src/modules/05_placement/components/probation/form/formEva2.vue

@@ -0,0 +1,289 @@
+<template>
+  <div class="row col-12 q-gutter-lg no-margin">
+    <div class="col-12 row">
+      <div class="col-12 text-top0 items-center">
+        <q-avatar class="bg-grey-2 q-mr-sm" size="28px">2</q-avatar>
+        พฤติกรรมของผู้ทดลองปฏิบัติบัติหน้าที่ราชการ
+      </div>
+      <div class="col-12 text-top0 row items-center q-pl-lg">
+        <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
+        2.1 ความประพฤติ
+      </div>
+      <q-card
+        flat
+        bordered
+        class="col-xs-12 col-sm-11 col-md-10 offset-md-1 q-pa-sm bg-grey-1"
+      >
+        <q-list dense v-for="(list, i) in list2_1" :key="i">
+          <q-item dense tag="label" v-ripple>
+            <q-item-section>
+              <q-item-label>{{ list.label }}</q-item-label>
+            </q-item-section>
+            <q-item-section side>
+              <q-rating
+                v-model="model"
+                :val="list.id"
+                max="5"
+                size="sm"
+                color="grey"
+                :color-selected="ratingColors"
+                label="ระดับการประเมินพฤติกรรม"
+              >
+                <template v-slot:tip-1>
+                  <q-tooltip>ต่ำกว่าความคาดหวังมาก</q-tooltip>
+                </template>
+                <template v-slot:tip-2>
+                  <q-tooltip>ต่ำกว่าความคาดหวังค่อนข้างมาก</q-tooltip>
+                </template>
+                <template v-slot:tip-3>
+                  <q-tooltip>เป็นไปตามความคาดหวัง</q-tooltip>
+                </template>
+                <template v-slot:tip-4>
+                  <q-tooltip>สูงว่าความคาดหวังค่อนข้างมาก</q-tooltip>
+                </template>
+                <template v-slot:tip-5>
+                  <q-tooltip>สูงกว่าความคาดหวังมาก</q-tooltip>
+                </template>
+              </q-rating>
+            </q-item-section>
+          </q-item>
+          <q-separator class="q-my-xs" v-if="i + 1 < list2_1.length" />
+        </q-list>
+      </q-card>
+    </div>
+    <div class="col-12 row">
+      <div class="col-12 text-top0 row items-center q-pl-lg">
+        <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
+        2.2 ความมีคุณธรรมจริยธรรม
+      </div>
+      <q-card
+        flat
+        bordered
+        class="col-xs-12 col-sm-11 col-md-10 offset-md-1 q-pa-sm bg-grey-1"
+      >
+        <q-list dense v-for="(list, i) in list2_2" :key="i">
+          <q-item dense tag="label" v-ripple>
+            <q-item-section>
+              <q-item-label>{{ list.label }}</q-item-label>
+            </q-item-section>
+            <q-item-section side>
+              <q-rating
+                v-model="model"
+                :val="list.id"
+                max="5"
+                size="sm"
+                color="grey"
+                :color-selected="ratingColors"
+                label="ระดับการประเมินพฤติกรรม"
+              >
+                <template v-slot:tip-1>
+                  <q-tooltip>ต่ำกว่าความคาดหวังมาก</q-tooltip>
+                </template>
+                <template v-slot:tip-2>
+                  <q-tooltip>ต่ำกว่าความคาดหวังค่อนข้างมาก</q-tooltip>
+                </template>
+                <template v-slot:tip-3>
+                  <q-tooltip>เป็นไปตามความคาดหวัง</q-tooltip>
+                </template>
+                <template v-slot:tip-4>
+                  <q-tooltip>สูงว่าความคาดหวังค่อนข้างมาก</q-tooltip>
+                </template>
+                <template v-slot:tip-5>
+                  <q-tooltip>สูงกว่าความคาดหวังมาก</q-tooltip>
+                </template>
+              </q-rating>
+            </q-item-section>
+          </q-item>
+          <q-separator class="q-my-xs" v-if="i + 1 < list2_2.length" />
+        </q-list>
+      </q-card>
+    </div>
+    <div class="col-12 row">
+      <div class="col-12 text-top0 row items-center q-pl-lg">
+        <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
+        2.3 การรักษาวินัย
+      </div>
+      <q-card
+        flat
+        bordered
+        class="col-xs-12 col-sm-11 col-md-10 offset-md-1 q-pa-sm bg-grey-1"
+      >
+        <q-list dense v-for="(list, i) in list2_3" :key="i">
+          <q-item dense tag="label" v-ripple>
+            <q-item-section>
+              <q-item-label>{{ list.label }}</q-item-label>
+            </q-item-section>
+            <q-item-section side>
+              <q-rating
+                v-model="model"
+                :val="list.id"
+                max="5"
+                size="sm"
+                color="grey"
+                :color-selected="ratingColors"
+                label="ระดับการประเมินพฤติกรรม"
+              >
+                <template v-slot:tip-1>
+                  <q-tooltip>ต่ำกว่าความคาดหวังมาก</q-tooltip>
+                </template>
+                <template v-slot:tip-2>
+                  <q-tooltip>ต่ำกว่าความคาดหวังค่อนข้างมาก</q-tooltip>
+                </template>
+                <template v-slot:tip-3>
+                  <q-tooltip>เป็นไปตามความคาดหวัง</q-tooltip>
+                </template>
+                <template v-slot:tip-4>
+                  <q-tooltip>สูงว่าความคาดหวังค่อนข้างมาก</q-tooltip>
+                </template>
+                <template v-slot:tip-5>
+                  <q-tooltip>สูงกว่าความคาดหวังมาก</q-tooltip>
+                </template>
+              </q-rating>
+            </q-item-section>
+          </q-item>
+          <q-separator class="q-my-xs" v-if="i + 1 < list2_3.length" />
+        </q-list>
+      </q-card>
+    </div>
+    <div class="col-12 row">
+      <div class="col-12 text-top0 row items-center q-pl-lg">
+        <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
+        2.4 อื่นๆ
+        <q-checkbox class="q-ml-sm" dense v-model="etc_4" />
+      </div>
+      <q-card
+        v-if="etc_4"
+        flat
+        bordered
+        class="col-xs-12 col-sm-11 col-md-10 offset-md-1 q-pa-sm bg-grey-1"
+      >
+        <q-list dense>
+          <q-item dense tag="label" v-ripple>
+            <q-item-section>
+              <q-item-label>
+                <q-input
+                  v-model="etc_text2"
+                  label="กรอกอื่นๆ"
+                  dense
+                  lazy-rules
+                  autogrow
+                  hide-bottom-space
+                  outlined
+                  class="bg-white"
+                  :rules="[
+                    (val) => (val && val.length > 0) || 'กรุณากรอกข้อความ',
+                  ]"
+                />
+              </q-item-label>
+            </q-item-section>
+            <q-item-section side>
+              <q-rating
+                v-model="modelEtc"
+                max="5"
+                size="sm"
+                color="grey"
+                :color-selected="ratingColors"
+                label="ระดับการประเมินพฤติกรรม"
+              >
+                <template v-slot:tip-1>
+                  <q-tooltip>ต่ำกว่าความคาดหวังมาก</q-tooltip>
+                </template>
+                <template v-slot:tip-2>
+                  <q-tooltip>ต่ำกว่าความคาดหวังค่อนข้างมาก</q-tooltip>
+                </template>
+                <template v-slot:tip-3>
+                  <q-tooltip>เป็นไปตามความคาดหวัง</q-tooltip>
+                </template>
+                <template v-slot:tip-4>
+                  <q-tooltip>สูงว่าความคาดหวังค่อนข้างมาก</q-tooltip>
+                </template>
+                <template v-slot:tip-5>
+                  <q-tooltip>สูงกว่าความคาดหวังมาก</q-tooltip>
+                </template>
+              </q-rating>
+            </q-item-section>
+          </q-item>
+        </q-list>
+      </q-card>
+    </div>
+    <FormComment />
+  </div>
+</template>
+<script setup lang="ts">
+import { ref, defineAsyncComponent } from "vue";
+
+import { useQuasar } from "quasar";
+
+import { useProbationDataStore } from "@/modules/05_placement/store";
+const FormComment = defineAsyncComponent(
+  () =>
+    import(
+      "@/modules/05_placement/components/probation/form/formEvacomment.vue"
+    )
+);
+const probationStore = useProbationDataStore();
+const { ratingColors } = probationStore;
+
+const list2_1 = [
+  { id: "1", label: "ให้บริการประชาชนหรือผู้รับบริการด้วยอัธยาศัยดี" },
+  { id: "2", label: "มีความรับผิดชอบในการปฏิบัติบัติงาน" },
+  {
+    id: "3",
+    label:
+      "ให้บริการประชาชนหรือผู้รับบริการด้วยความรวดเร็ว เอาใจใส่เป็นมาตรฐานเดียวกัน",
+  },
+  {
+    id: "4",
+    label: "ตั้งใจปฏิบัติบัติหน้าที่ราชการด้วยความอุตสาหะ ขยันหมั่นเพียร",
+  },
+];
+const list2_2 = [
+  {
+    id: "1",
+    label: "อุทิศตนและเสียสละเวลาในการปฏิบัติบัติงานอย่างเต็มกำลังความสามารถ",
+  },
+  { id: "2", label: "มีจิตสำนึกที่ดี ปฏิบัติบัติงานด้วยความซื่อสัตย์ สุจริต" },
+  {
+    id: "3",
+    label:
+      "ยึดมั่นในสถาบันบัพระมหากษัตริย์ และไม่กระทำการใด ๆ อันจะก่อให้เกิดความเสียหายต่อประเทศชาติ",
+  },
+];
+
+const list2_3 = [
+  { id: "1", label: "มีความรับรัผิดชอบในการรักษาเวลาทำงาน" },
+  {
+    id: "2",
+    label: "แต่งกายในการปฏิบัติบัติงานได้อย่างเหมาะสมกับการเป็นข้าราชการ",
+  },
+  {
+    id: "3",
+    label: "ไม่กระทำการใด ๆ อันอาจก่อให้เกิดความเสียหายแก่ชื่อเสียงของหน่วยงาน",
+  },
+  {
+    id: "4",
+    label:
+      "ไม่กระทำการใด ๆ อันเป็นการเสื่อมเกียรติและศักดิ์ศรีของความเป็นข้าราชการ",
+  },
+  {
+    id: "5",
+    label: "ปฏิบัติบัติหน้าที่อย่างตรงไปตรงมาโดยยึกหลักจรรยาบรรณวิชาชีพ",
+  },
+];
+
+const etc_text2 = ref<any>(null);
+const modelEtc = ref<any>(0);
+const etc_4 = ref<any>(false);
+const model = ref<any>(0);
+</script>
+<style lang="scss" scoped>
+.text-top0 {
+  font-weight: 600;
+  padding-bottom: 8px;
+  color: rgb(70, 68, 68);
+}
+
+.q-rating__icon {
+  text-shadow: transparent !important;
+}
+</style>

src/modules/05_placement/components/probation/form/formEva3.vue

@@ -0,0 +1,130 @@
+<template>
+  <div class="row col-12 q-gutter-lg no-margin">
+    <div class="col-12 row justify-center">
+      <div class="col-12 text-top0 items-center">
+        <q-avatar class="bg-grey-2 q-mr-sm" size="28px">3</q-avatar>
+        การพัฒนาผู้ทดลองปฏิบัติบัติหน้าที่ราชการ
+      </div>
+      <q-card
+        flat
+        bordered
+        class="col-xs-12 col-sm-11 col-md-11 q-pa-sm bg-grey-1"
+      >
+        <q-list dense>
+          <q-item dense tag="label" v-ripple>
+            <q-item-section>
+              <q-item-label>1. การปฐมนิเทศ</q-item-label>
+            </q-item-section>
+            <q-item-section side>
+              <div class="row">
+                <q-radio
+                  checked-icon="task_alt"
+                  unchecked-icon="panorama_fish_eye"
+                  v-model="radio_1"
+                  val="1"
+                  label="ดำเนินการเเล้ว"
+                />
+                <q-radio
+                  checked-icon="task_alt"
+                  unchecked-icon="panorama_fish_eye"
+                  v-model="radio_1"
+                  val="0"
+                  label=" ยังไม่ได้ดำเนินการ"
+                />
+              </div>
+            </q-item-section>
+          </q-item>
+          <q-separator class="q-my-xs" />
+          <q-item dense tag="label" v-ripple>
+            <q-item-section>
+              <q-item-label>2. การเรียนรู้ด้วยตนเอง</q-item-label>
+            </q-item-section>
+            <q-item-section side>
+              <div class="row">
+                <q-radio
+                  checked-icon="task_alt"
+                  unchecked-icon="panorama_fish_eye"
+                  v-model="radio_2"
+                  val="1"
+                  label="ดำเนินการเเล้ว"
+                />
+                <q-radio
+                  checked-icon="task_alt"
+                  unchecked-icon="panorama_fish_eye"
+                  v-model="radio_2"
+                  val="0"
+                  label=" ยังไม่ได้ดำเนินการ"
+                />
+              </div>
+            </q-item-section>
+          </q-item>
+          <q-separator class="q-my-xs" />
+          <q-item dense tag="label" v-ripple>
+            <q-item-section>
+              <q-item-label>3. การอบรมสัมนาร่วมกัน</q-item-label>
+            </q-item-section>
+            <q-item-section side>
+              <div class="row">
+                <q-radio
+                  checked-icon="task_alt"
+                  unchecked-icon="panorama_fish_eye"
+                  v-model="radio_3"
+                  val="1"
+                  label="ดำเนินการเเล้ว"
+                />
+                <q-radio
+                  checked-icon="task_alt"
+                  unchecked-icon="panorama_fish_eye"
+                  v-model="radio_3"
+                  val="0"
+                  label=" ยังไม่ได้ดำเนินการ"
+                />
+              </div>
+            </q-item-section>
+          </q-item>
+          <q-separator class="q-my-xs" />
+          <q-item dense tag="label" v-ripple>
+            <q-item-section>
+              <q-item-label
+                >4. การอบรมอื่น ๆ ตามที่หน่วยงานกำหนด (ถ้ามี)</q-item-label
+              >
+            </q-item-section>
+            <q-item-section side>
+              <div class="row">
+                <q-radio
+                  checked-icon="task_alt"
+                  unchecked-icon="panorama_fish_eye"
+                  v-model="radio_4"
+                  val="1"
+                  label="ดำเนินการเเล้ว"
+                />
+                <q-radio
+                  checked-icon="task_alt"
+                  unchecked-icon="panorama_fish_eye"
+                  v-model="radio_4"
+                  val="0"
+                  label=" ยังไม่ได้ดำเนินการ"
+                />
+              </div>
+            </q-item-section>
+          </q-item>
+        </q-list>
+      </q-card>
+    </div>
+  </div>
+</template>
+<script setup lang="ts">
+import { ref } from "vue";
+const radio_1 = ref<any>(null);
+const radio_2 = ref<any>(null);
+const radio_3 = ref<any>(null);
+const radio_4 = ref<any>(null);
+</script>
+
+<style lang="scss" scoped>
+.text-top0 {
+  font-weight: 600;
+  padding-bottom: 8px;
+  color: rgb(70, 68, 68);
+}
+</style>

src/modules/05_placement/components/probation/form/formEvaOrder.vue

@@ -0,0 +1,83 @@
+<template>
+  <div class="row col-12 q-gutter-lg no-margin">
+    <div class="col-12 row">
+      <div class="col-12 text-top2 row items-center">
+        ผู้บังคับบัญชาผู้มอบหมายงาน
+      </div>
+      <div class="col-12 row q-col-gutter-md">
+        <q-select
+          class="col-xs-12 col-sm-8"
+          dense
+          v-model="Autherise"
+          outlined
+          :options="option"
+          label="ผู้บังคับบัญชา"
+        />
+        <div class="col-xs-12 col-sm-4">
+          <datepicker
+            menu-class-name="modalfix"
+            v-model="dateAutherise"
+            :locale="'th'"
+            autoApply
+            borderless
+            :enableTimePicker="false"
+            week-start="0"
+          >
+            <template #year="{ year }">
+              {{ year + 543 }}
+            </template>
+            <template #year-overlay-value="{ value }">
+              {{ parseInt(value + 543) }}
+            </template>
+            <template #trigger>
+              <q-input
+                outlined
+                dense
+                class="full-width datepicker col-3"
+                :model-value="
+                  dateAutherise != null ? date2Thai(dateAutherise) : null
+                "
+                :label="`${'ลงวันที่'}`"
+                :rules="[(val) => !!val || `${'กรุณาเลือกลงวันที่'}`]"
+              >
+                <template v-slot:prepend>
+                  <q-icon
+                    name="event"
+                    class="cursor-pointer"
+                    style="color: var(--q-primary)"
+                  >
+                  </q-icon>
+                </template>
+              </q-input>
+            </template>
+          </datepicker>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script setup lang="ts">
+import { ref } from "vue";
+import { useCounterMixin } from "@/stores/mixin";
+
+const mixin = useCounterMixin();
+const { date2Thai } = mixin;
+const Autherise = ref<any>(null);
+
+const dateAutherise = ref<any>(new Date());
+
+const option = ref<any>(["นาย ภูริณัฐ บุญขาว", "นาย พงศกร วรารักษ์"]);
+</script>
+<style lang="scss" scoped>
+.text-top2 {
+  font-weight: 500;
+  padding-bottom: 8px;
+  color: rgb(70, 68, 68);
+}
+
+.text-top0 {
+  font-weight: 600;
+  padding-bottom: 8px;
+  color: rgb(70, 68, 68);
+}
+</style>

src/modules/05_placement/components/probation/form/formEvacomment.vue

@@ -0,0 +1,45 @@
+<template>
+  <div class="row col-12 q-gutter-lg no-margin">
+    <div class="col-12 row">
+      <div class="col-12 text-top0 row items-center q-pl-lg">
+        <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
+        จุดเด่น (ไม่เกิน 5 บรรทัด)
+      </div>
+      <q-input
+        outlined
+        dense
+        v-model="text2_1"
+        class="col-xs-12 col-sm-11 col-md-10 offset-md-1"
+        lazy-rules
+        type="textarea"
+        label="กรอกจุดเด่น"
+        hide-bottom-space
+        :row="5"
+        :rules="[(val) => (val && val.length > 0) || 'กรุณากรอกข้อความ']"
+      />
+    </div>
+    <div class="col-12 row">
+      <div class="col-12 text-top0 row items-center q-pl-lg">
+        <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
+        สิ่งที่ควรปรับปรุง (ไม่เกิน 5 บรรทัด)
+      </div>
+      <q-input
+        outlined
+        dense
+        v-model="text2_2"
+        class="col-xs-12 col-sm-11 col-md-10 offset-md-1"
+        lazy-rules
+        type="textarea"
+        hide-bottom-space
+        label="กรอกสิ่งที่ควรปรับปรุง"
+        :row="5"
+        :rules="[(val) => (val && val.length > 0) || 'กรุณากรอกข้อความ']"
+      />
+    </div>
+  </div>
+</template>
+<script setup lang="ts">
+import { ref } from "vue";
+const text2_1 = ref<string>("");
+const text2_2 = ref<string>("");
+</script>

src/modules/05_placement/components/probation/tabs/tabs2.vue

@@ -0,0 +1,116 @@
+<template>
+  <q-header class="bg-grey-1">
+    <div class="bg-grey-1">
+      <div class="col-12 row q-gutter-x-md items-center">
+        <q-tabs
+          dense
+          v-model="tab"
+          active-class="text-primary text-weight-medium"
+          indicator-color="grey-1"
+          class="text-grey-7"
+        >
+          <q-tab name="save1" label="บันทึกผลครั้งที่ 1" />
+          <q-btn
+            size="12px"
+            flat
+            dense
+            icon="mdi-download"
+            :disable="tab !== 'save1'"
+            :color="tab !== 'save1' ? 'grey' : 'add'"
+          >
+            <q-tooltip>ดาวน์โหลด</q-tooltip>
+            <q-menu>
+              <q-list style="min-width: 150px">
+                <q-item clickable v-close-popup>
+                  <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>
+                  <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-tab name="save2" label="บันทึกผลครั้งที่ 2" />
+          <q-btn
+            size="12px"
+            flat
+            dense
+            icon="mdi-download"
+            :disable="tab !== 'save2'"
+            :color="tab !== 'save2' ? 'grey' : 'add'"
+          >
+            <q-tooltip>ดาวน์โหลด</q-tooltip>
+            <q-menu>
+              <q-list style="min-width: 150px">
+                <q-item clickable v-close-popup>
+                  <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>
+                  <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-tab name="save3" label="บันทึกผลครั้งที่ 3" />
+                        <q-btn size="12px" flat dense icon="mdi-download" :disable="tab !== 'save3'"
+                            :color="tab !== 'save3' ? 'grey' : 'add'">
+                            <q-tooltip>ดาวน์โหลด</q-tooltip>
+                            <q-menu>
+                                <q-list style="min-width: 150px">
+                                    <q-item clickable v-close-popup>
+                                        <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>
+                                        <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-tabs>
+        <div>
+          <q-btn color="blue" flat dense icon="mdi-plus">
+            <q-tooltip> เพิ่มบันทึกผลการทดลอง </q-tooltip>
+          </q-btn>
+        </div>
+      </div>
+      <q-separator />
+    </div>
+  </q-header>
+
+  <q-page-container>
+    <q-tab-panels v-model="tab" animated>
+      <q-tab-panel name="save1">
+        <Form />
+      </q-tab-panel>
+
+      <q-tab-panel name="save2">
+        <Form />
+      </q-tab-panel>
+    </q-tab-panels>
+  </q-page-container>
+</template>
+<script setup lang="ts">
+import { ref, defineAsyncComponent } from "vue";
+
+const Form = defineAsyncComponent(
+  () => import("@/modules/05_placement/components/probation/FormEvaluation.vue")
+);
+const tab = ref<string>("save1");
+</script>

src/modules/05_placement/components/probation/tabs/tabs3.vue

@@ -0,0 +1,116 @@
+<template>
+  <q-header class="bg-grey-1">
+    <div class="bg-grey-1">
+      <div class="col-12 row q-gutter-x-md items-center">
+        <q-tabs
+          dense
+          v-model="tab"
+          active-class="text-primary text-weight-medium"
+          indicator-color="grey-1"
+          class="text-grey-7"
+        >
+          <q-tab name="save1" label="บันทึกผลครั้งที่ 1" />
+          <q-btn
+            size="12px"
+            flat
+            dense
+            icon="mdi-download"
+            :disable="tab !== 'save1'"
+            :color="tab !== 'save1' ? 'grey' : 'add'"
+          >
+            <q-tooltip>ดาวน์โหลด</q-tooltip>
+            <q-menu>
+              <q-list style="min-width: 150px">
+                <q-item clickable v-close-popup>
+                  <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>
+                  <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-tab name="save2" label="บันทึกผลครั้งที่ 2" />
+          <q-btn
+            size="12px"
+            flat
+            dense
+            icon="mdi-download"
+            :disable="tab !== 'save2'"
+            :color="tab !== 'save2' ? 'grey' : 'add'"
+          >
+            <q-tooltip>ดาวน์โหลด</q-tooltip>
+            <q-menu>
+              <q-list style="min-width: 150px">
+                <q-item clickable v-close-popup>
+                  <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>
+                  <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-tab name="save3" label="บันทึกผลครั้งที่ 3" />
+                          <q-btn size="12px" flat dense icon="mdi-download" :disable="tab !== 'save3'"
+                              :color="tab !== 'save3' ? 'grey' : 'add'">
+                              <q-tooltip>ดาวน์โหลด</q-tooltip>
+                              <q-menu>
+                                  <q-list style="min-width: 150px">
+                                      <q-item clickable v-close-popup>
+                                          <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>
+                                          <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-tabs>
+        <div>
+          <q-btn color="blue" flat dense icon="mdi-plus">
+            <q-tooltip> เพิ่มบันทึกผลการทดลอง </q-tooltip>
+          </q-btn>
+        </div>
+      </div>
+      <q-separator />
+    </div>
+  </q-header>
+
+  <q-page-container>
+    <q-tab-panels v-model="tab" animated>
+      <q-tab-panel name="save1">
+        <Form />
+      </q-tab-panel>
+
+      <q-tab-panel name="save2">
+        <Form />
+      </q-tab-panel>
+    </q-tab-panels>
+  </q-page-container>
+</template>
+<script setup lang="ts">
+import { ref, defineAsyncComponent } from "vue";
+
+const Form = defineAsyncComponent(
+  () => import("@/modules/05_placement/components/probation/FormEvaluation.vue")
+);
+const tab = ref<string>("save1");
+</script>

src/modules/05_placement/components/probation/tabs/tabs4.vue

@@ -0,0 +1,116 @@
+<template>
+  <q-header class="bg-grey-1">
+    <div class="bg-grey-1">
+      <div class="col-12 row q-gutter-x-md items-center">
+        <q-tabs
+          dense
+          v-model="tab"
+          active-class="text-primary text-weight-medium"
+          indicator-color="grey-1"
+          class="text-grey-7"
+        >
+          <q-tab name="save1" label="บันทึกผลครั้งที่ 1" />
+          <q-btn
+            size="12px"
+            flat
+            dense
+            icon="mdi-download"
+            :disable="tab !== 'save1'"
+            :color="tab !== 'save1' ? 'grey' : 'add'"
+          >
+            <q-tooltip>ดาวน์โหลด</q-tooltip>
+            <q-menu>
+              <q-list style="min-width: 150px">
+                <q-item clickable v-close-popup>
+                  <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>
+                  <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-tab name="save2" label="บันทึกผลครั้งที่ 2" />
+          <q-btn
+            size="12px"
+            flat
+            dense
+            icon="mdi-download"
+            :disable="tab !== 'save2'"
+            :color="tab !== 'save2' ? 'grey' : 'add'"
+          >
+            <q-tooltip>ดาวน์โหลด</q-tooltip>
+            <q-menu>
+              <q-list style="min-width: 150px">
+                <q-item clickable v-close-popup>
+                  <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>
+                  <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-tab name="save3" label="บันทึกผลครั้งที่ 3" />
+                          <q-btn size="12px" flat dense icon="mdi-download" :disable="tab !== 'save3'"
+                              :color="tab !== 'save3' ? 'grey' : 'add'">
+                              <q-tooltip>ดาวน์โหลด</q-tooltip>
+                              <q-menu>
+                                  <q-list style="min-width: 150px">
+                                      <q-item clickable v-close-popup>
+                                          <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>
+                                          <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-tabs>
+        <div>
+          <q-btn color="blue" flat dense icon="mdi-plus">
+            <q-tooltip> เพิ่มบันทึกผลการทดลอง </q-tooltip>
+          </q-btn>
+        </div>
+      </div>
+      <q-separator />
+    </div>
+  </q-header>
+
+  <q-page-container>
+    <q-tab-panels v-model="tab" animated>
+      <q-tab-panel name="save1">
+        <Form />
+      </q-tab-panel>
+
+      <q-tab-panel name="save2">
+        <Form />
+      </q-tab-panel>
+    </q-tab-panels>
+  </q-page-container>
+</template>
+<script setup lang="ts">
+import { ref, defineAsyncComponent } from "vue";
+
+const Form = defineAsyncComponent(
+  () => import("@/modules/05_placement/components/probation/FormEvaluation.vue")
+);
+const tab = ref<string>("save1");
+</script>

src/modules/05_placement/router.ts

@@ -20,21 +20,32 @@ const detailOrderReplace = () =>
   import(
     "@/modules/05_placement/components/OrderPlacement/detailOrderPlacement.vue"
   );
+
+// ระบบทดลองงาน
 const mainProbation = () =>
   import("@/modules/05_placement/components/probation/MainProbation.vue");
 
 const probationDetail = () =>
   import("@/modules/05_placement/components/probation/ProbationDetail.vue");
 
-const probationForm = () =>
+const probationFormEvaluation = () =>
   import("@/modules/05_placement/components/probation/MainDetail.vue");
 
 const probationWorkAdd = () =>
   import("@/modules/05_placement/components/probation/MainDetail.vue");
-  const probationWorkAdd2 = () =>
-  import("@/modules/05_placement/components/probation/AddWork.vue");
-  const resignOrder = () =>
-  import("@/modules/05_placement/components/OrderPlacement/ResignOrder.vue");
+const probationFormAssign = () =>
+  import("@/modules/05_placement/components/probation/FormAssign.vue");
+const transfer = () =>
+  import("@/modules/05_placement/components/Transfer/transferMain.vue");
+const transferbyId = () =>
+  import("@/modules/05_placement/components/Transfer/transferRegistry.vue");
+
+// คำสั่งช่วยราชการ/ส่งตัวกลับ
+const RepatriationOrder = () =>
+  import("@/modules/05_placement/components/RepatriationOrder/List.vue");
+const RepatriationOrderAdd = () =>
+  import("@/modules/05_placement/components/RepatriationOrder/AddOrder.vue");
+
 export default [
   {
     path: "/placement",
@@ -117,9 +128,9 @@ export default [
     },
   },
   {
-    path: "/probation/form",
+    path: "/probation/detail/:id/:form",
     name: "probationForm",
-    component: probationForm,
+    component: probationFormEvaluation,
     meta: {
       Auth: true,
       Key: [6.3],
@@ -149,20 +160,50 @@ export default [
   {
     path: "/probation/add",
     name: "probationWorkAdd",
-    component: probationWorkAdd2,
+    component: probationFormAssign,
     meta: {
       Auth: true,
       Key: [6.3],
       Role: "placement",
     },
-  },  
+  },
   {
-    path: "/placement/resign-order",
-    name: "ResignOrderplacement",
-    component: resignOrder,
+    path: "/transfer",
+    name: "transfer",
+    component: transfer,
     meta: {
       Auth: true,
-      Key: [6.2],
+      Key: [6.4],
+      Role: "placement",
+    },
+  },
+  {
+    path: "/transfer/:id",
+    name: "transfer-id",
+    component: transferbyId,
+    meta: {
+      Auth: true,
+      Key: [6.4],
+      Role: "placement",
+    },
+  },
+  {
+    path: "/repatriation-order",
+    name: "repatriation-order",
+    component: RepatriationOrder,
+    meta: {
+      Auth: true,
+      Key: [6.6],
+      Role: "placement",
+    },
+  },
+  {
+    path: "/repatriation-order/add",
+    name: "repatriation-order-add",
+    component: RepatriationOrderAdd,
+    meta: {
+      Auth: true,
+      Key: [6.6],
       Role: "placement",
     },
   },

src/modules/05_placement/store.ts

@@ -281,3 +281,17 @@ export const useOrderPlacementDataStore = defineStore("placementOrder", () => {
     DataMainOrder,
   };
 });
+
+export const useProbationDataStore = defineStore("probationDataStore", () => {
+  const ratingColors = ref<string[]>([
+    "light-blue-3",
+    "light-blue-6",
+    "blue",
+    "blue-9",
+    "blue-10",
+  ]);
+
+  return {
+    ratingColors,
+  };
+});

src/modules/06_retirement/components/DismissOrder/AddOrder.vue

@@ -0,0 +1,91 @@
+<template>
+  <div class="toptitle text-dark 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>
+  <q-card flat bordered class="col-12 q-my-sm q-mt-sm">
+    <q-stepper
+      v-model="step"
+      ref="stepper"
+      color="primary"
+      animated
+      class="step"
+      header-class="bg-grey-1"
+    >
+      <q-step
+        :name="1"
+        title="รายละเอียดการออกคำสั่ง"
+        prefix="1"
+        :done="step > 1"
+        :header-nav="step > 1"
+      />
+      <q-step
+        :name="2"
+        title="เลือกรายชื่อส่งสำเนาคำสั่ง"
+        prefix="2"
+        :done="step > 2"
+        :header-nav="step > 2"
+      />
+      <q-step
+        :name="3"
+        title="รายละเอียดคำสั่งและแนบท้าย"
+        prefix="3"
+        :header-nav="step > 3"
+      />
+      <template v-slot:message>
+        <step01 v-if="step === 1" :next="nextStep" :previous="previousStep" />
+        <step02 v-if="step === 2" :next="nextStep" :previous="previousStep" />
+        <step03 v-if="step === 3" :next="nextStep" :previous="previousStep" />
+      </template>
+    </q-stepper>
+  </q-card>
+</template>
+<script setup lang="ts">
+import { useRouter } from "vue-router";
+import { ref, defineAsyncComponent } from "vue";
+import type { QStepper } from "quasar";
+
+const step01 = defineAsyncComponent(
+  () => import("@/modules/06_retirement/components/DismissOrder/step01.vue")
+);
+const step02 = defineAsyncComponent(
+  () => import("@/modules/06_retirement/components/DismissOrder/step02.vue")
+);
+const step03 = defineAsyncComponent(
+  () => import("@/modules/06_retirement/components/DismissOrder/step03.vue")
+);
+
+const router = useRouter();
+const step = ref<number>(1);
+const stepper = ref<QStepper>();
+
+const nextStep = () => {
+  stepper.value!.next();
+};
+
+const previousStep = () => {
+  stepper.value!.previous();
+};
+</script>
+<style>
+.q-stepper--horizontal .q-stepper__step-inner {
+  padding: 0px;
+}
+.step .q-stepper__tab--done .q-stepper__title,
+.step .q-stepper__tab--active .q-stepper__title {
+  color: #35473c !important;
+  font-weight: 500;
+}
+.step .q-stepper__header--standard-labels .q-stepper__tab {
+  min-height: 60px;
+}
+</style>

src/modules/06_retirement/components/DismissOrder/DismissOrder.vue

@@ -0,0 +1,740 @@
+<template>
+  <div class="toptitle text-dark col-12 row items-center">
+    คำสั่งให้ออก ปลดออก ไล่ออก
+  </div>
+  <div>
+    <q-card flat bordered class="col-12 q-mt-sm q-pa-md">
+      <div class="row q-col-gutter-sm">
+        <div class="row col-12 q-col-gutter-sm">
+          <q-select
+            class="col-xs-12 col-sm-3 col-md-2"
+            v-model="fiscalyear"
+            label="ปีงบประมาณ"
+            dense
+            emit-value
+            map-options
+            :options="fiscalyearOP"
+            option-value="id"
+            option-label="name"
+            lazy-rules
+            hide-bottom-space
+            :readonly="false"
+            :borderless="false"
+            :outlined="true"
+            :hide-dropdown-icon="false"
+            @update:model-value="searchFilterTable"
+          />
+          <q-space />
+          <q-input
+            class="col-xs-12 col-sm-3 col-md-2"
+            standout
+            dense
+            v-model="filterKeyword"
+            ref="filterRef"
+            outlined
+            debounce="300"
+            placeholder="ค้นหา"
+          >
+            <template v-slot:append>
+              <q-icon v-if="filterKeyword == ''" name="search" />
+              <q-icon
+                v-if="filterKeyword !== ''"
+                name="clear"
+                class="cursor-pointer"
+                @click="resetFilter"
+              />
+            </template>
+          </q-input>
+          <q-select
+            v-model="visibleColumns"
+            multiple
+            outlined
+            dense
+            options-dense
+            :display-value="$q.lang.table.columns"
+            emit-value
+            map-options
+            :options="columns"
+            option-value="name"
+            options-cover
+            style="min-width: 150px"
+            class="col-xs-12 col-sm-3 col-md-2"
+          />
+        </div>
+        <div class="col-12">
+          <q-card bordered class="col-12 filter-card q-pa-sm">
+            <div class="row col-12 q-col-gutter-sm">
+              <q-select
+                class="col-xs-12 col-sm-3 col-md-2"
+                v-model="OrderType"
+                label="ประเภท"
+                dense
+                emit-value
+                map-options
+                option-label="name"
+                :options="OrderTypeOption"
+                option-value="id"
+                lazy-rules
+                hide-bottom-space
+                :readonly="false"
+                :borderless="false"
+                :outlined="true"
+                :hide-dropdown-icon="false"
+                @update:model-value="searchFilterTable"
+              />
+              <q-select
+                class="col-xs-12 col-sm-3 col-md-2"
+                v-model="OrderStatus"
+                label="สถานะ"
+                dense
+                emit-value
+                map-options
+                option-label="name"
+                :options="OrderStatusOption"
+                option-value="id"
+                lazy-rules
+                hide-bottom-space
+                :readonly="false"
+                :borderless="false"
+                :outlined="true"
+                :hide-dropdown-icon="false"
+                @update:model-value="searchFilterTable"
+              />
+            </div>
+          </q-card>
+        </div>
+        <div class="col-12">
+          <q-table
+            ref="table"
+            :columns="columns"
+            :rows="UpdataData"
+            :filter="filterKeyword"
+            row-key="Order"
+            flat
+            bordered
+            :paging="true"
+            dense
+            class="custom-header-table"
+            v-bind="attrs"
+            :visible-columns="visibleColumns"
+            :pagination-label="paginationLabel"
+            v-model:pagination="pagination"
+          >
+            <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-th auto-width />
+              </q-tr>
+            </template>
+            <template v-slot:body="props">
+              <q-tr
+                :props="props"
+                class="cursor-pointer"
+                @click="redirectToPage(props.row.Order)"
+              >
+                <q-td key="Order" :props="props">
+                  {{ props.row.Order }}
+                </q-td>
+                <q-td key="OrderNum" :props="props">
+                  {{ props.row.OrderNum }}
+                </q-td>
+                <q-td key="OrderType" :props="props">
+                  {{ props.row.OrderType }}
+                </q-td>
+                <q-td key="OrderDate" :props="props">
+                  {{ props.row.OrderDate }}
+                </q-td>
+                <q-td key="OrderBy" :props="props">
+                  {{ props.row.OrderBy }}
+                </q-td>
+                <q-td key="Signer" :props="props">
+                  {{ props.row.Signer }}
+                </q-td>
+                <q-td key="OrderStatus" :props="props">
+                  {{ props.row.OrderStatus }}
+                </q-td>
+                <q-td auto-width>
+                  <q-btn
+                    dense
+                    size="12px"
+                    flat
+                    round
+                    color="red"
+                    @click.stop="clickDelete(props.row.id)"
+                    icon="mdi-delete"
+                  >
+                  </q-btn>
+                </q-td>
+              </q-tr>
+            </template>
+            <template v-slot:pagination="scope">
+              <q-pagination
+                v-model="pagination.page"
+                active-color="primary"
+                color="dark"
+                :max="scope.pagesNumber"
+                :max-pages="5"
+                size="sm"
+                boundary-links
+                direction-links
+              ></q-pagination>
+            </template>
+          </q-table>
+        </div>
+      </div>
+    </q-card>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { onMounted, reactive, ref, useAttrs, computed } from "vue";
+import type { QTableProps } from "quasar";
+import type { FormOrderPlacementMainData } from "@/modules/05_placement/interface/request/Main";
+import type { DataOption } from "@/modules/05_placement/interface/index/Main";
+import { useCounterMixin } from "@/stores/mixin";
+import { useOrderPlacementDataStore } from "@/modules/05_placement/store";
+import router from "@/router";
+import { useQuasar } from "quasar";
+
+const $q = useQuasar(); //ใช้ noti quasar
+const DataStore = useOrderPlacementDataStore();
+const pagination = ref({
+  sortBy: "desc",
+  descending: false,
+  page: 1,
+  rowsPerPage: 10,
+});
+
+const mixin = useCounterMixin();
+const { dateText } = mixin;
+
+// แปลงเวลา ค.ศ ให้เป็น พ.ศ
+const textDate = (value: Date) => {
+  return dateText(value);
+};
+
+const visibleColumns = ref<string[]>([
+  "Order",
+  "OrderType",
+  "OrderNum",
+  "OrderDate",
+  "OrderBy",
+  "Signer",
+  "OrderStatus",
+]); //ค้นหา คอลัมน์ คอลัมน์ที่แสดง
+
+// หัวตาราง
+const columns = ref<QTableProps["columns"]>([
+  {
+    name: "Order",
+    align: "left",
+    label: "คำสั่ง",
+    sortable: true,
+    field: "Order",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "OrderNum",
+    align: "left",
+    label: "เลขที่คำสั่ง",
+    sortable: true,
+    field: "OrderNum",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "OrderType",
+    align: "left",
+    label: "ประเภท",
+    sortable: false,
+    field: "OrderType",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "OrderDate",
+    align: "left",
+    label: "สั่ง ณ วันที่/วันที่คำสั่งมีผล",
+    sortable: true,
+    field: "OrderDate",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "OrderBy",
+    align: "left",
+    label: "คำสั่งโดย",
+    sortable: true,
+    field: "OrderBy",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "Signer",
+    align: "left",
+    label: "ผู้ลงนาม",
+    sortable: false,
+    field: "Signer",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "OrderStatus",
+    align: "center",
+    label: "สถานะคำสั่ง",
+    sortable: false,
+    field: "OrderStatus",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "fiscalYear",
+    align: "left",
+    label: "ปีงบประมาณ",
+    sortable: true,
+    field: "fiscalYear",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+]);
+
+// ข้อมูลตาราง (จำลอง)
+const rows = ref<FormOrderPlacementMainData[]>([
+  {
+    Order: "คำสั่งแต่งตั้งผู้สอบแข่งขันได้",
+    OrderNum: "1/2565",
+    fiscalYear: 2565,
+    OrderDate: "30 พ.ค. 2565",
+    OrderBy: "สำนักงาน กทม.",
+    Signer: "นาม สมคิด ยอดใจ ",
+    OrderStatus: "จัดทำร่างคำสั่ง",
+    OrderType: "คำสั่งย้าย",
+  },
+
+  {
+    Order: "คำสั่งแต่งตั้งผู้สอบแข่งขันได้",
+    OrderNum: "1/2565",
+    fiscalYear: 2565,
+    OrderDate: "30 พ.ค. 2565",
+    OrderBy: "สำนักงาน กทม.",
+    Signer: "นาม สมคิด ยอดใจ ",
+    OrderStatus: "จัดทำร่างคำสั่ง",
+    OrderType: "คำสั่งบรรจุและแต่งตั้ง",
+  },
+  {
+    Order: "คำสั่งแต่งตั้งผู้สอบแข่งขันได้",
+    OrderNum: "1/2564",
+    fiscalYear: 2564,
+    OrderDate: "30 พ.ค. 2564",
+    OrderBy: "สำนักงาน กทม.",
+    Signer: "นาม สมคิด ยอดใจ ",
+    OrderStatus: "บัญชีแนบท้าย",
+    OrderType: "คำสั่งบรรจุและแต่งตั้ง",
+  },
+  {
+    Order: "คำสั่งแต่งตั้งผู้สอบแข่งขันได้",
+    OrderNum: "1/2564",
+    fiscalYear: 2564,
+    OrderDate: "30 พ.ค. 2564",
+    OrderBy: "สำนักงาน กทม.",
+    Signer: "นาม สมคิด ยอดใจ ",
+    OrderStatus: "บัญชีแนบท้าย",
+    OrderType: "คำสั่งย้าย",
+  },
+  {
+    Order: "คำสั่งแต่งตั้งผู้สอบแข่งขันได้",
+    OrderNum: "1/2564",
+    fiscalYear: 2564,
+    OrderDate: "30 พ.ค. 2564",
+    OrderBy: "สำนักงาน กทม.",
+    Signer: "นาม สมคิด ยอดใจ ",
+    OrderStatus: "ส่งสำเนาคำสั่ง",
+    OrderType: "คำสั่งย้าย",
+  },
+  {
+    Order: "คำสั่งแต่งตั้งผู้สอบแข่งขันได้",
+    OrderNum: "1/2564",
+    fiscalYear: 2564,
+    OrderDate: "30 พ.ค. 2564",
+    OrderBy: "สำนักงาน กทม.",
+    Signer: "นาม สมคิด ยอดใจ ",
+    OrderStatus: "ส่งสำเนาคำสั่ง",
+    OrderType: "คำสั่งบรรจุและแต่งตั้ง",
+  },
+  {
+    Order: "คำสั่งแต่งตั้งผู้สอบแข่งขันได้",
+    OrderNum: "1/2566",
+    fiscalYear: 2566,
+    OrderDate: "30 พ.ค. 2566",
+    OrderBy: "สำนักงาน กทม.",
+    Signer: "นาม สมคิด ยอดใจ ",
+    OrderStatus: "รอลงนาม",
+    OrderType: "คำสั่งบรรจุและแต่งตั้ง",
+  },
+  {
+    Order: "คำสั่งแต่งตั้งผู้สอบแข่งขันได้",
+    OrderNum: "1/2566",
+    fiscalYear: 2566,
+    OrderDate: "30 พ.ค. 2566",
+    OrderBy: "สำนักงาน กทม.",
+    Signer: "นาม สมคิด ยอดใจ ",
+    OrderStatus: "ออกคำสั่งแล้ว",
+    OrderType: "คำสั่งแต่งตั้ง",
+  },
+  {
+    Order: "คำสั่งแต่งตั้งผู้สอบแข่งขันได้",
+    OrderNum: "1/2565",
+    fiscalYear: 2565,
+    OrderDate: "30 พ.ค. 2565",
+    OrderBy: "สำนักงาน กทม.",
+    Signer: "นาม สมคิด ยอดใจ ",
+    OrderStatus: "ออกคำสั่งแล้ว",
+    OrderType: "คำสั่งบรรจุและแต่งตั้ง",
+  },
+  {
+    Order: "คำสั่งแต่งตั้งผู้สอบแข่งขันได้",
+    OrderNum: "1/2566",
+    fiscalYear: 2566,
+    OrderDate: "30 พ.ค. 2566",
+    OrderBy: "สำนักงาน กทม.",
+    Signer: "นาม สมคิด ยอดใจ ",
+    OrderStatus: "ออกคำสั่งแล้ว",
+    OrderType: "คำสั่งแต่งตั้ง",
+  },
+  {
+    Order: "คำสั่งแต่งตั้งผู้สอบแข่งขันได้",
+    OrderNum: "1/2566",
+    fiscalYear: 2566,
+    OrderDate: "30 พ.ค. 2566",
+    OrderBy: "สำนักงาน กทม.",
+    Signer: "นาม สมคิด ยอดใจ ",
+    OrderStatus: "ออกคำสั่งแล้ว",
+    OrderType: "คำสั่งย้าย",
+  },
+
+  {
+    Order: "คำสั่งแต่งตั้งผู้สอบแข่งขันได้",
+    OrderNum: "1/2564",
+    fiscalYear: 2564,
+    OrderDate: "30 พ.ค. 2564",
+    OrderBy: "สำนักงาน กทม.",
+    Signer: "นาม สมคิด ยอดใจ ",
+    OrderStatus: "ออกคำสั่งแล้ว",
+    OrderType: "คำสั่งแต่งตั้ง",
+  },
+
+  {
+    Order: "คำสั่งแต่งตั้งผู้สอบแข่งขันได้",
+    OrderNum: "1/2566",
+    fiscalYear: 2566,
+    OrderDate: "30 พ.ค. 2566",
+    OrderBy: "สำนักงาน กทม.",
+    Signer: "นาม สมคิด ยอดใจ ",
+    OrderStatus: "ออกคำสั่งแล้ว",
+    OrderType: "คำสั่งแต่งตั้ง",
+  },
+]);
+// const OrderStatusOption = [
+//   "ทั้งหมด",
+//   "ยังไม่ได้บรรจุ",
+//   "บรรจุแล้ว",
+//   "ยังไม่ได้ออกคำสั่ง",
+// ];
+
+let OriginalData = ref<FormOrderPlacementMainData[]>([]);
+let UpdataData = ref<FormOrderPlacementMainData[]>([]);
+
+onMounted(async () => {
+  await OriginalDataFetch();
+  fiscalYearFilter();
+  searchFilterTable();
+  OrderStatusFilter();
+  OrderTypeFilter();
+});
+
+const OriginalDataFetch = async () => {
+  // API
+  // await http
+  //   .get(config.API.// ตัวอย่าง)
+  //   .then((res: any) => {
+  //   })
+  //   .catch((e: any) => {
+  //     messageError($q, e);
+  //   })
+  //   .finally(async () => {
+  //   });
+  await DataStore.DataMainOrder(rows.value);
+  OriginalData.value = await DataStore.DataMainOrigOrder;
+  UpdataData.value = OriginalData.value;
+};
+
+// ดูรายการหน้าต่อไป
+const redirectToPage = (id?: number) => {
+  router.push(`/dismiss-order/add`);
+};
+
+const clickDelete = (id: string) => {
+  $q.dialog({
+    title: "ยืนยันการลบข้อมูล",
+    message: "ต้องการลบข้อมูลนี้ใช่หรือไม่?",
+    cancel: {
+      flat: true,
+      color: "negative",
+    },
+    persistent: true,
+  })
+    .onOk(async () => {
+      //   await deleteData(id);
+    })
+    .onCancel(() => {})
+    .onDismiss(() => {});
+};
+
+// const deleteData = async (id: string) => {
+//   loaderPage(true);
+//   await http
+//     .delete(config.API.orderReplace(id))
+//     .then((res) => {
+//       success($q, "ลบข้อมูลสำเร็จ");
+//     })
+//     .catch((e) => {
+//       messageError($q, e);
+//     })
+//     .finally(async () => {
+//       loaderPage(false);
+//       await fetchData();
+//     });
+// };
+
+const clickAdd = () => {
+  router.push({ name: "OrderplacementDetail" });
+};
+
+// const viewDetail = (id: string, status: string) => {
+//   if (status == "checkPayment") {
+//     router.push(`${route.fullPath}/payment/${id}`);
+//   } else {
+//     router.push(`${route.fullPath}/profile/${id}`);
+//   }
+// };
+
+// เลือกปีงบประมาณ
+const fiscalyear = ref<number | null>(0);
+const fiscalyearOP = reactive<DataOption[]>([{ id: 0, name: "ทั้งหมด" }]);
+const addedfiscalYearValues: number[] = [];
+const fiscalYearFilter = async () => {
+  // API
+  // await http
+  //   .get(config.API.// ตัวอย่าง)
+  //   .then((res: any) => {
+  //    DataStore.DataMainYearSet(rows.value);
+  //    fiscalyearOP.value = DataStore.DataMainYearGet;
+  //   })
+  //   .catch((e: any) => {
+  //     messageError($q, e);
+  //   })
+  //   .finally(async () => {
+  //   });
+  for (let data of OriginalData.value) {
+    const year = data.fiscalYear;
+    console.log(year);
+
+    if (fiscalyear.value === null || year > fiscalyear.value) {
+      fiscalyear.value = year;
+    }
+
+    if (!addedfiscalYearValues.includes(year)) {
+      fiscalyearOP.push({ id: year, name: year.toString() });
+      addedfiscalYearValues.push(year);
+    }
+  }
+};
+
+const OrderType = ref<string>("");
+const OrderTypeOption = reactive<DataOption[]>([{ id: 0, name: "ทั้งหมด" }]);
+const addedOrderTypeValues: string[] = [];
+const OrderTypeFilter = async () => {
+  // API
+  // await http
+  //   .get(config.API.// ตัวอย่าง)
+  //   .then((res: any) => {
+  //    DataStore.DataMainYearSet(rows.value);
+  //    fiscalyearOP.value = DataStore.DataMainYearGet;
+  //   })
+  //   .catch((e: any) => {
+  //     messageError($q, e);
+  //   })
+  //   .finally(async () => {
+  //   });
+  for (let data of OriginalData.value) {
+    const OrderTypeValue = data.OrderType;
+    console.log(OrderTypeValue);
+
+    // if (OrderTypeValue === null || OrderType > OrderTypeValue) {
+    //   OrderTypeValue = OrderType;
+    // }
+    if (!addedOrderTypeValues.includes(OrderTypeValue)) {
+      OrderTypeOption.push({
+        // id: OrderTypeValue ?? 0,
+        id: OrderTypeOption.length,
+        name: OrderTypeValue,
+      });
+      addedOrderTypeValues.push(OrderTypeValue);
+    }
+    // if (!addedOrderTypeValues.includes(OrderTypeValue)) {
+    //   OrderTypeOption.push({
+    //     id: OrderTypeValue,
+    //     name: OrderTypeValue.toString(),
+    //   });
+    //   addedOrderTypeValues.push(OrderTypeValue);
+    // }
+  }
+};
+const OrderStatus = ref<string>("");
+const OrderStatusText = ref<FormOrderPlacementMainData[]>(
+  DataStore.DataMainOrigOrder
+);
+const OrderStatusOption = reactive<DataOption[]>([{ id: 1, name: "ทั้งหมด" }]);
+const addedOrderStatusValues: string[] = [];
+const OrderStatusFilter = async () => {
+  // API
+  // await http
+  //   .get(config.API.// ตัวอย่าง)
+  //   .then((res: any) => {
+  //    DataStore.DataMainYearSet(rows.value);
+  //    fiscalyearOP.value = DataStore.DataMainYearGet;
+  //   })
+  //   .catch((e: any) => {
+  //     messageError($q, e);
+  //   })
+  //   .finally(async () => {
+  //   });
+  for (let data of OriginalData.value) {
+    const OrderStatusValue = data.OrderStatus;
+    console.log(OrderStatusValue);
+
+    if (
+      OrderStatusValue === null ||
+      parseInt(OrderStatusValue) > parseInt(OrderStatusValue)
+    ) {
+      OrderStatus.value = OrderStatusValue;
+    }
+
+    if (!addedOrderStatusValues.includes(OrderStatusValue)) {
+      OrderStatusOption.push({
+        // id: OrderStatusValue,
+        id: OrderStatusOption.length,
+        name: OrderStatusValue,
+      });
+      addedOrderStatusValues.push(OrderStatusValue);
+    }
+  }
+};
+
+// เลือกปีงบประมาณตาม API
+const searchfiscalyear = () => {
+  console.log("Input value changed:", fiscalyear.value);
+  // API
+  // await http
+  //   .get(config.API.// ตัวอย่าง)
+  //   .then((res: any) => {
+  //   })
+  //   .catch((e: any) => {
+  //     messageError($q, e);
+  //   })
+  //   .finally(async () => {
+  //   });
+};
+
+// ค้นหาในตาราง
+const filterKeyword = ref<string>("");
+const filterRef = ref<any>(null);
+const resetFilter = () => {
+  filterKeyword.value = "";
+  filterRef.value.focus();
+};
+
+const attrs = ref<any>(useAttrs());
+
+const searchFilterTable = async () => {
+  // console.log('Input value changed:', examTime.value, examType.value, expiredAccount.value);
+  await DataStore.DataUpdateOrder(
+    OrderType.value,
+    OrderStatus.value,
+    fiscalyear.value
+  );
+  UpdataData.value = DataStore.DataMainUpdateOrder;
+};
+//   UpdataData.value = DataStore.DataMainUpdate;
+// console.log("Input value changed:", OrderStatus.value, OrderType.value);
+
+const paging = ref<boolean>(true);
+const paginationLabel = (start: string, end: string, total: string) => {
+  if (paging.value == true) return " " + start + "-" + end + " ใน " + total;
+  else return start + "-" + end + " ใน " + total;
+};
+</script>
+
+<style lang="scss" scope>
+.filter-card {
+  background-color: #f1f1f1b0;
+}
+
+.toggle-expired-account {
+  font-size: 12px;
+  font-weight: 400;
+  font-size: 15px;
+  line-height: 150%;
+  color: #35373c;
+}
+
+.icon-color {
+  color: #4154b3;
+}
+
+.custom-header-table {
+  max-height: 64vh;
+
+  .q-table tr:nth-child(odd) td {
+    background: white;
+  }
+
+  .q-table tr:nth-child(even) td {
+    background: #f8f8f8;
+  }
+
+  .q-table thead tr {
+    background: #ecebeb;
+  }
+
+  .q-table thead tr th {
+    position: sticky;
+    z-index: 1;
+  }
+
+  /* this will be the loading indicator */
+  .q-table thead tr:last-child th {
+    /* height of all previous header rows */
+    top: 48px;
+  }
+
+  .q-table thead tr:first-child th {
+    top: 0;
+  }
+}
+</style>

src/modules/06_retirement/components/DismissOrder/step01.vue

@@ -0,0 +1,353 @@
+<template>
+  <div style="max-height: 68vh; overflow-y: scroll">
+    <q-form ref="myForm" class="q-pa-md">
+      <div class="row col-12 q-col-gutter-x-lg q-col-gutter-y-md">
+        <div class="col-xs-12 col-md-6">
+          <selector
+            :class="getClass(true)"
+            outlined
+            dense
+            lazy-rules
+            v-model="typeOrder"
+            :rules="[(val:string) => !!val || `${'กรุณาเลือกประเภทคำสั่ง'}`]"
+            hide-bottom-space
+            :label="`${'ประเภทคำสั่ง'}`"
+            @update:modelValue="clickEditRow"
+            emit-value
+            map-options
+            option-label="name"
+            :options="typeOrderOption"
+            option-value="id"
+            use-input
+            input-debounce="0"
+            @filter="(inputValue:string,
+                      doneFn:Function) => filterSelector(inputValue, doneFn,'typeOrderOption'
+                      ) "
+          />
+        </div>
+
+        <div class="col-xs-12 col-md-6">
+          <q-input
+            :class="getClass(true)"
+            outlined
+            dense
+            lazy-rules
+            v-model="nameOrder"
+            :rules="[(val) => !!val || `${'กรุณากรอกคำสั่งเรื่อง'}`]"
+            :label="`${'คำสั่งเรื่อง'}`"
+            @update:modelValue="clickEditRow"
+            hide-bottom-space
+          />
+        </div>
+
+        <div class="row col-xs-7 col-md-3 q-col-gutter-x-xs">
+          <div class="col-6">
+            <q-input
+              :class="getClass(true)"
+              outlined
+              dense
+              lazy-rules
+              v-model="command"
+              :rules="[(val) => !!val || `${'กรุณากรอกคำสั่ง'}`]"
+              :label="`${'คำสั่ง'}`"
+              @update:modelValue="clickEditRow"
+              hide-bottom-space
+              type="number"
+            />
+          </div>
+          <label class="col-1 flex justify-center items-center text-bold"
+            >/</label
+          >
+          <div class="col-5">
+            <datepicker
+              v-model="dateYear"
+              :locale="'th'"
+              autoApply
+              year-picker
+              :enableTimePicker="false"
+              @update:modelValue="clickEditRow"
+            >
+              <template #year="{ year }">{{ year + 543 }}</template>
+              <template #year-overlay-value="{ value }">{{
+                parseInt(value + 543)
+              }}</template>
+              <template #trigger>
+                <q-input
+                  :model-value="dateYear + 543"
+                  :rules="[(val) => !!val || `${'กรุณากรอก พ.ศ.'}`]"
+                  :label="`${'พ.ศ.'}`"
+                  dense
+                  outlined
+                >
+                </q-input>
+              </template>
+            </datepicker>
+          </div>
+        </div>
+        <div class="col-xs-5 col-md-3">
+          <datepicker
+            menu-class-name="modalfix"
+            v-model="dateCommand"
+            :locale="'th'"
+            autoApply
+            borderless
+            :enableTimePicker="false"
+            week-start="0"
+          >
+            <template #year="{ year }">
+              {{ year + 543 }}
+            </template>
+            <template #year-overlay-value="{ value }">
+              {{ parseInt(value + 543) }}
+            </template>
+            <template #trigger>
+              <q-input
+                outlined
+                dense
+                class="full-width datepicker"
+                :model-value="
+                  dateCommand != null ? date2Thai(dateCommand) : 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-xs-12 col-md-6">
+          <selector
+            :class="getClass(true)"
+            outlined
+            dense
+            lazy-rules
+            v-model="byOrder"
+            :rules="[(val:string) => !!val || `${'กรุณาเลือกคำสั่งโดย'}`]"
+            hide-bottom-space
+            :label="`${'คำสั่งโดย'}`"
+            @update:modelValue="clickEditRow"
+            emit-value
+            map-options
+            option-label="name"
+            :options="byOrderOption"
+            option-value="id"
+            use-input
+            input-debounce="0"
+            @filter="(inputValue:string,
+                      doneFn:Function) => filterSelector(inputValue, doneFn,'byOrderOption'
+                      ) "
+          />
+        </div>
+        <div class="col-xs-12 col-md-6">
+          <!-- :readonly="!edit"
+                :borderless="!edit" -->
+          <q-input
+            :class="getClass(true)"
+            outlined
+            dense
+            lazy-rules
+            v-model="nameCommand"
+            :rules="[(val) => !!val || `${'กรุณากรอกผู้มีอำนาจลงนาม'}`]"
+            :label="`${'ผู้มีอำนาจลงนาม'}`"
+            @update:modelValue="clickEditRow"
+            hide-bottom-space
+          />
+        </div>
+        <div class="col-xs-12 col-md-6">
+          <!-- :readonly="!edit"
+                :borderless="!edit" -->
+          <q-input
+            :class="getClass(true)"
+            outlined
+            dense
+            lazy-rules
+            v-model="positionCommand"
+            :rules="[(val) => !!val || `${'กรุณากรอกตำแหน่งผู้มีอำนาจลงนาม'}`]"
+            :label="`${'ตำแหน่งผู้มีอำนาจลงนาม'}`"
+            @update:modelValue="clickEditRow"
+            hide-bottom-space
+          />
+        </div>
+        <div class="col-12">
+          <q-separator />
+        </div>
+        <div class="col-xs-12 col-md-6">
+          <selector
+            :class="getClass(true)"
+            outlined
+            dense
+            lazy-rules
+            v-model="test"
+            :rules="[(val:string) => !!val || `${'กรุณาเลือกรอบการสอบ'}`]"
+            hide-bottom-space
+            :label="`${'ชื่อ-นามสกุล'}`"
+            @update:modelValue="clickEditRow"
+            emit-value
+            map-options
+            option-label="name"
+            :options="testOption"
+            option-value="id"
+            use-input
+            input-debounce="0"
+            @filter="(inputValue:string,
+                      doneFn:Function) => filterSelector(inputValue, doneFn,'testOption'
+                      ) "
+          />
+        </div>
+      </div>
+    </q-form>
+  </div>
+  <q-separator />
+  <div class="flex justify-end q-pa-sm q-gutter-sm">
+    <q-btn unelevated label="บันทึก" color="public" @click="submit"> </q-btn>
+  </div>
+</template>
+<script setup lang="ts">
+import { ref } from "vue";
+import type { DataOption } from "@/modules/05_placement/interface/index/Main";
+import { useCounterMixin } from "@/stores/mixin";
+import type { QForm } from "quasar";
+
+const mixin = useCounterMixin();
+const { date2Thai } = mixin;
+
+const props = defineProps({
+  next: {
+    type: Function,
+    default: () => console.log("not function"),
+  },
+  previous: {
+    type: Function,
+    default: () => console.log("not function"),
+  },
+});
+const next = () => props.next();
+const previous = () => props.previous();
+
+const myForm = ref<QForm>();
+
+const editRow = ref<boolean>(false);
+
+const nameOrder = ref<string>("ปลดออก นายก");
+const nameCommand = ref<string>("");
+const positionCommand = ref<string>("");
+const dateYear = ref<number>(new Date().getFullYear());
+const command = ref<string>("");
+const dateCommand = ref<Date>(new Date());
+// const dateRegister = ref<Date>(new Date());
+// const dateAnnounce = ref<Date>(new Date());
+
+const typeOrder = ref<string>("ปลดออก");
+const typeOrderOption = ref<DataOption[]>([]);
+const typeOrderOptionFilter = ref<DataOption[]>([]);
+
+const byOrder = ref<string>("");
+const byOrderOption = ref<DataOption[]>([]);
+const byOrderOptionFilter = ref<DataOption[]>([]);
+
+// const register = ref<string>("");
+const registerOption = ref<DataOption[]>([]);
+const registerOptionFilter = ref<DataOption[]>([]);
+
+// const announce = ref<string>("");
+const announceOption = ref<DataOption[]>([]);
+const announceOptionFilter = ref<DataOption[]>([]);
+
+// const position = ref<string>("");
+const positionOption = ref<DataOption[]>([]);
+const positionOptionFilter = ref<DataOption[]>([]);
+
+const test = ref<string>("นายก ข");
+const testOption = ref<DataOption[]>([]);
+const testOptionFilter = ref<DataOption[]>([]);
+
+const clickEditRow = () => (editRow.value = true);
+
+const filterSelector = (val: any, update: Function, filtername: string) => {
+  switch (filtername) {
+    case "typeOrderOption":
+      update(() => {
+        typeOrderOption.value = typeOrderOptionFilter.value.filter(
+          (v: DataOption) => v.name!.indexOf(val) > -1
+        );
+      });
+      break;
+    case "byOrderOption":
+      update(() => {
+        byOrderOption.value = byOrderOptionFilter.value.filter(
+          (v: DataOption) => v.name!.indexOf(val) > -1
+        );
+      });
+      break;
+
+    case "registerOption":
+      update(() => {
+        registerOption.value = registerOptionFilter.value.filter(
+          (v: DataOption) => v.name!.indexOf(val) > -1
+        );
+      });
+      break;
+
+    case "announceOption":
+      update(() => {
+        announceOption.value = announceOptionFilter.value.filter(
+          (v: DataOption) => v.name!.indexOf(val) > -1
+        );
+      });
+      break;
+
+    case "positionOption":
+      update(() => {
+        positionOption.value = positionOptionFilter.value.filter(
+          (v: DataOption) => v.name!.indexOf(val) > -1
+        );
+      });
+      break;
+    case "testOption":
+      update(() => {
+        testOption.value = testOptionFilter.value.filter(
+          (v: DataOption) => v.name!.indexOf(val) > -1
+        );
+      });
+      break;
+    default:
+      break;
+  }
+};
+
+const submit = async () => {
+  next();
+  //   await myForm.value!.validate().then((result: boolean) => {
+  //     if (result) {
+  //       next();
+  //     }
+  //   });
+};
+
+/**
+ * class จัดรูปแบบแสดงระหว่างข้อมูลที่แก้ไขหรือแสดงเฉยๆ
+ * @param val ข้อมูล input สำหรับแก้ไขหรือไม่
+ */
+const getClass = (val: boolean) => {
+  return {
+    "full-width inputgreen cursor-pointer": val,
+    "full-width cursor-pointer": !val,
+  };
+};
+</script>
+<style>
+.q-field--with-bottom {
+  padding-bottom: 0px;
+}
+</style>

src/modules/06_retirement/components/DismissOrder/step02.vue

@@ -0,0 +1,684 @@
+<template>
+  <div>
+    <div class="q-py-md q-pl-md" style="height: 68vh; overflow-y: scroll">
+      <div class="col-12 row q-py-sm items-center">
+        <q-btn flat round color="primary" @click="clickAdd" icon="mdi-plus">
+          <q-tooltip>เพิ่มข้อมูล</q-tooltip>
+        </q-btn>
+        <q-space />
+        <div class="items-center" style="display: flex">
+          <!-- ค้นหาข้อความใน table -->
+          <q-input
+            standout
+            dense
+            v-model="filter"
+            ref="filterRef"
+            outlined
+            debounce="300"
+            placeholder="ค้นหา"
+            style="max-width: 200px"
+            class="q-ml-sm"
+          >
+            <template v-slot:append>
+              <q-icon v-if="filter == ''" name="search" />
+              <q-icon
+                v-if="filter !== ''"
+                name="clear"
+                class="cursor-pointer"
+                @click="resetFilter"
+              />
+            </template>
+          </q-input>
+          <!-- แสดงคอลัมน์ใน table -->
+          <q-select
+            v-model="visibleColumns"
+            :display-value="$q.lang.table.columns"
+            multiple
+            outlined
+            dense
+            :options="columns"
+            options-dense
+            option-value="name"
+            map-options
+            emit-value
+            style="min-width: 150px"
+            class="gt-xs q-ml-sm"
+          />
+        </div>
+      </div>
+      <d-table
+        :rows="rows"
+        :columns="columns"
+        :visible-columns="visibleColumns"
+        :filter="filter"
+        row-key="name"
+      >
+        <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-th auto-width />
+          </q-tr>
+        </template>
+        <template v-slot:body="props">
+          <q-tr :props="props" class="cursor-pointer">
+            <q-td key="no" :props="props">
+              {{ props.rowIndex + 1 }}
+            </q-td>
+            <q-td key="idcard" :props="props">
+              {{ props.row.idcard }}
+            </q-td>
+            <q-td key="name" :props="props">
+              {{ props.row.name }}
+            </q-td>
+            <q-td key="position" :props="props">
+              {{ props.row.position }}
+            </q-td>
+            <q-td key="agency" :props="props">
+              {{ props.row.agency }}
+            </q-td>
+            <q-td key="send" :props="props">
+              <q-select
+                :class="getClass(true)"
+                hide-bottom-space
+                multiple
+                :outlined="true"
+                dense
+                lazy-rules
+                v-model="props.row.mutiselect"
+                :rules="[(val:any) => !!val || `${'กรุณาเลือกช่องทางการส่งสำเนา'}`,(val:any) => val.length > 0 || `${'กรุณาเลือกช่องทางการส่งสำเนา'}`]"
+                :label="`${'เลือกช่องทางการส่งสำเนา'}`"
+                emit-value
+                map-options
+                option-label="name"
+                :options="optionSelect"
+                option-value="id"
+                input-debounce="0"
+                color="primary"
+              >
+                <template v-slot:no-option>
+                  <q-item>
+                    <q-item-section class="text-black">
+                      ไม่พบข้อมูลที่ค้นหา
+                    </q-item-section>
+                  </q-item>
+                </template>
+              </q-select>
+            </q-td>
+            <q-td auto-width>
+              <q-btn
+                dense
+                size="12px"
+                flat
+                round
+                color="red"
+                @click="clickDelete(props.row.id)"
+                icon="mdi-delete"
+              >
+                <q-tooltip>ลบข้อมูล</q-tooltip>
+              </q-btn>
+            </q-td>
+          </q-tr>
+        </template>
+      </d-table>
+    </div>
+    <q-separator />
+    <div class="flex justify-end q-pa-sm q-gutter-sm">
+      <q-btn
+        dense
+        outline
+        color="primary"
+        icon="chevron_left"
+        @click="previous"
+        class="q-pr-md"
+        label="เลือกรายชื่อ"
+      >
+      </q-btn>
+      <q-btn
+        dense
+        unelevated
+        label="บันทึก"
+        color="public"
+        @click="next"
+        class="q-px-md"
+        ><!-- icon="mdi-content-save-outline"
+        <q-tooltip>บันทึก</q-tooltip> -->
+      </q-btn>
+      <!-- <q-btn flat round color="primary" icon="chevron_right" @click="next">
+        <q-tooltip>ต่อไป</q-tooltip>
+      </q-btn> -->
+    </div>
+  </div>
+
+  <q-dialog v-model="modal" persistent full-width>
+    <q-card>
+      <q-form ref="myForm">
+        <DialogHeader tittle="เลือกรายชื่อตามหน่วยงาน" :close="clickClose" />
+        <q-separator />
+        <q-card-section class="q-pa-sm bg-grey-1">
+          <div class="row col-12 q-col-gutter-sm">
+            <div class="col-xs-12 col-sm-5 row">
+              <q-card flat bordered class="fit q-pa-sm">
+                <q-scroll-area visible style="height: 70vh">
+                  <q-input
+                    outlined
+                    dense
+                    v-model="search"
+                    placeholder="ค้นหา"
+                    class="q-mb-sm"
+                  >
+                    <template v-slot:append>
+                      <q-icon name="mdi-magnify" />
+                    </template>
+                  </q-input>
+                  <q-tree
+                    :nodes="nodesTree"
+                    dense
+                    node-key="id"
+                    v-model:selected="selected"
+                    v-model:expanded="expanded"
+                    no-selection-unset
+                    selected-color="primary"
+                    @update:selected="onSelected"
+                    default-expand-all
+                  />
+                </q-scroll-area>
+              </q-card>
+            </div>
+            <div class="col-xs-12 col-sm-7">
+              <div class="col-12 row q-py-sm items-center">
+                <q-space />
+                <div class="items-center" style="display: flex">
+                  <q-input
+                    standout
+                    dense
+                    v-model="filterModal"
+                    ref="filterRef"
+                    outlined
+                    debounce="300"
+                    placeholder="ค้นหา"
+                    style="max-width: 200px"
+                    class="q-ml-sm"
+                  >
+                    <template v-slot:append>
+                      <q-icon v-if="filterModal == ''" name="search" />
+                      <q-icon
+                        v-if="filterModal !== ''"
+                        name="clear"
+                        class="cursor-pointer"
+                        @click="resetFilter"
+                      />
+                    </template>
+                  </q-input>
+
+                  <q-select
+                    v-model="visibleColumnsModal"
+                    :display-value="$q.lang.table.columns"
+                    multiple
+                    outlined
+                    dense
+                    :options="columnsModal"
+                    options-dense
+                    option-value="name"
+                    map-options
+                    emit-value
+                    style="min-width: 150px"
+                    class="gt-xs q-ml-sm"
+                  />
+                </div>
+              </div>
+              <d-table
+                :rows="rowsModal"
+                :columns="columnsModal"
+                :visible-columns="visibleColumnsModal"
+                :filter="filterModal"
+                row-key="name"
+                selection="multiple"
+                v-model:selected="selectedModal"
+              >
+                <template v-slot:header-selection="scope">
+                  <q-checkbox
+                    keep-color
+                    color="primary"
+                    dense
+                    v-model="scope.selected"
+                  />
+                </template>
+
+                <template v-slot:body-selection="scope">
+                  <!-- <q-checkbox
+                    keep-color
+                    color="primary"
+                    dense
+                    :model-value="scope.selected"
+                    @update:model-value="
+                      (val, evt) => {
+                        Object.getOwnPropertyDescriptor(scope, 'selected').set(
+                          val,
+                          evt
+                        );
+                      }
+                    "
+                  /> -->
+                  <q-checkbox
+                    keep-color
+                    color="primary"
+                    dense
+                    v-model="scope.selected"
+                  />
+                </template>
+
+                <template v-slot:body-cell="props">
+                  <q-td :props="props">
+                    <div v-if="props.col.name == 'no'">
+                      {{ props.rowIndex + 1 }}
+                    </div>
+
+                    <div v-else>
+                      {{ props.value }}
+                    </div>
+                  </q-td>
+                </template>
+              </d-table>
+            </div>
+          </div>
+        </q-card-section>
+        <q-separator />
+        <q-card-actions align="right">
+          <q-btn
+            flat
+            round
+            color="public"
+            icon="mdi-content-save-outline"
+            @click="clickClose"
+          >
+            <q-tooltip>บันทึก</q-tooltip>
+          </q-btn>
+        </q-card-actions>
+      </q-form>
+    </q-card>
+  </q-dialog>
+</template>
+<script setup lang="ts">
+import { ref, onMounted } from "vue";
+import { useQuasar } from "quasar";
+import { useCounterMixin } from "@/stores/mixin";
+import DialogHeader from "@/modules/04_registry/components/DialogHeader.vue";
+import type { QInput, QForm } from "quasar";
+import type { treeTab } from "@/modules/05_placement/interface/index/Main";
+import http from "@/plugins/http";
+import config from "@/app.config";
+import type { QTableProps } from "quasar";
+
+const props = defineProps({
+  next: {
+    type: Function,
+    default: () => console.log("not function"),
+  },
+  previous: {
+    type: Function,
+    default: () => console.log("not function"),
+  },
+});
+
+const next = () => props.next();
+const previous = () => props.previous();
+
+const $q = useQuasar();
+const mixin = useCounterMixin(); //เรียกฟังก์ชันกลาง
+const { dialogMessage, messageError, showLoader, hideLoader } = mixin;
+
+const myForm = ref<QForm>();
+const filterRef = ref<QInput>();
+const filter = ref<string>("");
+const mutiselect = ref([]);
+const modal = ref<boolean>(false);
+const search = ref<string>("");
+const expanded = ref<string[]>([]);
+const selected = ref<string>("");
+const nodesTree = ref<treeTab[]>([]);
+const send = ref<String[]>([]);
+const selectedModal = ref([]);
+const test = ref([]);
+const filterModal = ref<string>("");
+const visibleColumnsModal = ref<String[]>(["no", "idcard", "name"]);
+const columnsModal = ref<QTableProps["columns"]>([
+  { name: "no", align: "left", label: "ลำดับ", field: "no", sortable: true },
+  {
+    name: "idcard",
+    align: "left",
+    label: "เลขประจำตัวประชาชน",
+    field: "idcard",
+    sortable: true,
+  },
+  {
+    name: "name",
+    align: "left",
+    label: "ชื่อ-สกุล",
+    field: "name",
+    sortable: true,
+  },
+]);
+
+const rowsModal = [
+  {
+    no: "0ac56905-1a74-4606-a120-233340adde95",
+    name: "นางนัทธ์ เหล่าสกุล",
+    idcard: "9158455632145",
+    educate: "",
+  },
+  {
+    no: "0de607a0-b094-4a6d-9e30-979343ab5e53",
+    name: "นางขรรค์ จันทรสมบัติ",
+    idcard: "8558455632126",
+    educate: "",
+  },
+  {
+    no: "93ca7366-2a35-4f94-a331-9c23c9ea78d3",
+    name: "นางโอภาส จรัสวงศ์",
+    idcard: "8158455635425",
+    educate: "",
+  },
+  {
+    no: "d3777c19-2bd0-42df-90ce-c3eeeee55ac6",
+    name: "นางธิญา หงษ์ทอง",
+    idcard: "4558455632145",
+    educate: "",
+  },
+  {
+    no: "1ccead6f-a851-4291-b3ab-a20757ecddbd",
+    name: "นางธนวิทย์ พิกุลเทพ",
+    idcard: "5542455632145",
+    educate: "",
+  },
+  {
+    no: "1ccead6f-a851-4291-b3ab-a20757ecddbd",
+    name: "นางหนึ่ง สตาภิรมย์",
+    idcard: "7448455632145",
+    educate: "",
+  },
+  {
+    no: "1ccead6f-a851-4291-b3ab-a20757ecddbd",
+    name: "นางสัจพร คมคาย",
+    idcard: "1236455632145",
+    educate: "",
+  },
+  {
+    no: "1ccead6f-a851-4291-b3ab-a20757ecddbd",
+    name: "นางตุลยากร ปรีดาศิริกุล",
+    idcard: "1523455632145",
+    educate: "",
+  },
+  {
+    no: "1ccead6f-a851-4291-b3ab-a20757ecddbd",
+    name: "นางบัลลังค์ จิรวาณิชย์",
+    idcard: "1258455632145",
+    educate: "",
+  },
+  {
+    no: "1ccead6f-a851-4291-b3ab-a20757ecddbd",
+    name: "นางคมคาย เรืองรังสรรค์",
+    idcard: "8548455632145",
+    educate: "",
+  },
+  {
+    no: "1ccead6f-a851-4291-b3ab-a20757ecddbd",
+    name: "นางพรทิพา คมคาย",
+    idcard: "6598455632145",
+    educate: "",
+  },
+];
+
+const paginationModal = ref({
+  sortBy: "desc",
+  descending: false,
+  page: 1,
+  rowsPerPage: 10,
+});
+const pagination = ref({
+  sortBy: "desc",
+  descending: false,
+  page: 1,
+  rowsPerPage: 10,
+});
+const optionSelect = ref<any>([
+  { id: 1, name: "อีเมล" },
+  { id: 2, name: "กล่องข้อความ" },
+]);
+
+const visibleColumns = ref<String[]>([
+  "no",
+  "idcard",
+  "name",
+  "position",
+  "agency",
+  "send",
+]);
+const columns = ref<QTableProps["columns"]>([
+  { name: "no", align: "left", label: "ลำดับ", field: "no", sortable: true },
+  {
+    name: "idcard",
+    align: "left",
+    label: "เลขประจำตัวประชาชน",
+    field: "idcard",
+    sortable: true,
+  },
+  {
+    name: "name",
+    align: "left",
+    label: "ชื่อ-สกุล",
+    field: "name",
+    sortable: true,
+  },
+  {
+    name: "position",
+    align: "left",
+    label: "ตำแหน่ง",
+    field: "position",
+    sortable: true,
+  },
+  {
+    name: "agency",
+    align: "left",
+    label: "หน่วยงาน",
+    field: "agency",
+    sortable: true,
+  },
+  {
+    name: "send",
+    align: "left",
+    label: "ช่องทางการส่งสำเนา",
+    field: "send",
+    sortable: true,
+  },
+]);
+
+const rows = ref([
+  {
+    no: "0ac56905-1a74-4606-a120-233340adde95",
+    name: "นางนัทธ์ เหล่าสกุล",
+    idcard: "9158455632145",
+    send: "",
+    position: "ผู้อำนวยการ",
+    agency: "กลุ่มงานช่วยบริหาร",
+    mutiselect: [],
+  },
+  {
+    no: "0de607a0-b094-4a6d-9e30-979343ab5e53",
+    name: "นางขรรค์ จันทรสมบัติ",
+    idcard: "8558455632126",
+    send: "",
+    position: "นักจัดการทั่วไป",
+    agency: "กลุ่มงานช่วยบริหาร",
+    mutiselect: [],
+  },
+  {
+    no: "93ca7366-2a35-4f94-a331-9c23c9ea78d3",
+    name: "นางโอภาส จรัสวงศ์",
+    idcard: "8158455635425",
+    send: "",
+    position: "นักจัดการทั่วไป",
+    agency: "กลุ่มงานช่วยบริหาร",
+    mutiselect: [],
+  },
+  {
+    no: "d3777c19-2bd0-42df-90ce-c3eeeee55ac6",
+    name: "นางธิญา หงษ์ทอง",
+    idcard: "4558455632145",
+    send: "",
+    position: "นักจัดการทั่วไป",
+    agency: "กลุ่มงานช่วยบริหาร",
+    mutiselect: [],
+  },
+  {
+    no: "1ccead6f-a851-4291-b3ab-a20757ecddbd",
+    name: "นางธนวิทย์ พิกุลเทพ",
+    idcard: "5542455632145",
+    send: "",
+    position: "นักจัดการทั่วไป",
+    agency: "กลุ่มงานช่วยบริหาร",
+    mutiselect: [],
+  },
+  {
+    no: "1ccead6f-a851-4291-b3ab-a20757ecddbd",
+    name: "นางหนึ่ง สตาภิรมย์",
+    idcard: "7448455632145",
+    send: "",
+    position: "นิติกร",
+    agency: "กลุ่มงานนิติกร",
+    mutiselect: [],
+  },
+  {
+    no: "1ccead6f-a851-4291-b3ab-a20757ecddbd",
+    name: "นางสัจพร คมคาย",
+    idcard: "1236455632145",
+    send: "",
+    position: "นิติกร",
+    agency: "กลุ่มงานนิติกร",
+    mutiselect: [],
+  },
+  {
+    no: "1ccead6f-a851-4291-b3ab-a20757ecddbd",
+    name: "นางตุลยากร ปรีดาศิริกุล",
+    idcard: "1523455632145",
+    send: "",
+    position: "นิติกร",
+    agency: "กลุ่มงานนิติกร",
+    mutiselect: [],
+  },
+  {
+    no: "1ccead6f-a851-4291-b3ab-a20757ecddbd",
+    name: "นางบัลลังค์ จิรวาณิชย์",
+    idcard: "1258455632145",
+    send: "",
+    position: "นิติกร",
+    agency: "กลุ่มงานนิติกร",
+    mutiselect: [],
+  },
+  {
+    no: "1ccead6f-a851-4291-b3ab-a20757ecddbd",
+    name: "นางคมคาย เรืองรังสรรค์",
+    idcard: "8548455632145",
+    send: "",
+    position: "นิติกร",
+    agency: "กลุ่มงานนิติกร",
+    mutiselect: [],
+  },
+  {
+    no: "1ccead6f-a851-4291-b3ab-a20757ecddbd",
+    name: "นางพรทิพา คมคาย",
+    idcard: "6598455632145",
+    send: "",
+    position: "นิติกร",
+    agency: "กลุ่มงานนิติกร",
+    mutiselect: [],
+  },
+]);
+
+onMounted(async () => {
+  await nodeTree();
+});
+
+const paginationLabel = (start: number, end: number, total: number) => {
+  //   if (props.paging == true)
+  //     return " " + start + " ใน " + end + " จากจำนวน " + total + " รายการ";
+  //   else
+  return start + "-" + end + " ใน " + total;
+};
+
+const resetFilter = () => {
+  // reset ค่าที่ค้นหาเมื่อกดปุ่ม X ในกล่องค้นหา
+  filter.value = "";
+  filterRef.value!.focus();
+};
+
+const getClass = (val: boolean) => {
+  return {
+    "full-width inputgreen cursor-pointer": val,
+    "full-width cursor-pointer": !val,
+  };
+};
+
+const clickClose = async () => {
+  //   if (editRow.value == true) {
+  //   dialogMessage(
+  //     $q,
+  //     "ข้อมูลมีการแก้ไข",
+  //     "ยืนยันที่จะปิดโดยไม่บันทึกใช่หรือไม่?",
+  //     "mdi-help-circle-outline",
+  //     "ตกลง",
+  //     "orange",
+  //     () => (modal.value = false),
+  //     undefined
+  //   );
+  //   } else {
+  modal.value = false;
+  //     next.value = false;
+  //     previous.value = false;
+  //   }
+};
+
+const clickAdd = () => {
+  modal.value = true;
+};
+
+const clickDelete = (id: string) => {
+  dialogMessage(
+    $q,
+    "ยืนยันการลบข้อมูล",
+    "ต้องการลบข้อมูลนี้ใช่หรือไม่?",
+    "mdi-help-circle-outline",
+    "ตกลง",
+    "red",
+    () => deleteData(id),
+    undefined
+  );
+};
+
+const nodeTree = async () => {
+  showLoader();
+  await http
+    .get(config.API.profileOrganizRoot)
+    .then((res: any) => {
+      const data = res.data.result;
+      nodesTree.value = data;
+      if (data.length > 0) {
+        expanded.value = [data[0].id];
+      }
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+};
+
+const onSelected = async (id: string) => {
+  //   await fetchPositionNumber(id);
+};
+
+const deleteData = async (id: string) => {};
+</script>
+<style lang="scss"></style>

src/modules/06_retirement/components/DismissOrder/step03.vue

@@ -0,0 +1,580 @@
+<template>
+  <div>
+    <div style="min-height: 70vh">
+      <q-splitter
+        v-model="splitterModel"
+        style="height: 70vh"
+        @update:model-value="onchangePage"
+      >
+        <template v-slot:before>
+          <div class="space">
+            <div @click="setTab('main')" :class="getClass(tab == 'main')">
+              <div class="q-pr-sm">คำสั่ง</div>
+              <q-btn
+                size="12px"
+                flat
+                dense
+                icon="mdi-download"
+                :disable="tab !== 'main'"
+                :color="tab !== 'main' ? 'grey' : 'add'"
+              >
+                <q-tooltip>ดาวน์โหลด</q-tooltip>
+                <q-menu>
+                  <q-list style="min-width: 150px">
+                    <q-item clickable v-close-popup>
+                      <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>
+                      <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 @click="setTab('second')" :class="getClass(tab == 'second')">
+              <div class="q-pr-sm">เอกสารแนบท้าย</div>
+              <q-btn
+                size="12px"
+                flat
+                dense
+                :color="tab !== 'second' ? 'grey' : 'add'"
+                icon="mdi-download"
+                :disable="tab !== 'second'"
+              >
+                <q-tooltip>ดาวน์โหลด</q-tooltip>
+                <q-menu>
+                  <q-list style="min-width: 150px">
+                    <q-item clickable v-close-popup>
+                      <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>
+                      <q-item-section avatar
+                        ><q-icon color="green-7" name="mdi-file-excel"
+                      /></q-item-section>
+                      <q-item-section>ไฟล์ .xls</q-item-section>
+                    </q-item>
+                  </q-list>
+                </q-menu>
+              </q-btn>
+            </div>
+            <q-space />
+            <q-btn
+              class="text-dark"
+              flat
+              dense
+              icon="mdi-fullscreen"
+              color="add"
+              @click="dialog = true"
+            />
+          </div>
+          <q-separator style="margin-top: -1px; z-index: 1" />
+          <q-card bordered class="card-pdf q-ma-md q-pa-md">
+            <div class="justify-between items-center align-center q-pb-sm row">
+              <q-btn
+                class="text-dark bg-grey-4"
+                flat
+                dense
+                @click="page = page > 1 ? page - 1 : page"
+              >
+                <q-icon name="mdi-chevron-left" />
+              </q-btn>
+
+              <span class="body-2 grey--text">
+                หน้าที่ {{ page }} จาก {{ numOfPages }}
+              </span>
+
+              <q-btn
+                class="text-dark bg-grey-4"
+                flat
+                dense
+                @click="page = page < numOfPages ? page + 1 : page"
+              >
+                <q-icon name="mdi-chevron-right" />
+              </q-btn>
+            </div>
+            <div class="pdfWidth">
+              <VuePDF ref="vuePDFRef" :pdf="pdfSrc" :page="page" fit-parent />
+              <!-- <VuePdf :key="page" :src="pdfSrc" :page="page" /> -->
+            </div>
+            <div class="justify-between items-center align-center q-pt-sm row">
+              <q-btn
+                class="text-dark bg-grey-4"
+                flat
+                dense
+                @click="page = page > 1 ? page - 1 : page"
+              >
+                <q-icon name="mdi-chevron-left" />
+              </q-btn>
+
+              <span class="body-2 grey--text">
+                หน้าที่ {{ page }} จาก {{ numOfPages }}
+              </span>
+
+              <q-btn
+                class="text-dark bg-grey-4"
+                flat
+                dense
+                @click="page = page < numOfPages ? page + 1 : page"
+              >
+                <q-icon name="mdi-chevron-right" />
+              </q-btn>
+            </div>
+          </q-card>
+        </template>
+
+        <template v-slot:separator>
+          <q-avatar
+            color="primary"
+            text-color="white"
+            size="30px"
+            icon="drag_indicator"
+          />
+        </template>
+
+        <template v-slot:after>
+          <q-form ref="myForm">
+            <div class="q-pa-md q-gutter-y-md">
+              <fieldset class="border q-px-lg q-py-md">
+                <legend class="text-header q-px-sm">อัปโหลดไฟล์</legend>
+                <div class="q-gutter-y-md q-mb-md">
+                  <div>
+                    <label class="text-file">คำสั่ง</label>
+                    <q-file
+                      outlined
+                      dense
+                      v-model="fileOrder"
+                      label="เลือกไฟล์คำสั่ง"
+                      hide-bottom-space
+                      lazy-rules
+                      :rules="[(val) => val || 'กรุณาเลือกไฟล์เอกสารแนบท้าย']"
+                    >
+                      <template v-slot:prepend>
+                        <q-icon name="attach_file" />
+                      </template>
+                    </q-file>
+                  </div>
+                  <div>
+                    <label class="text-file">เอกสารแนบท้าย</label>
+                    <q-file
+                      outlined
+                      dense
+                      v-model="fileTailer"
+                      label="เลือกไฟล์เอกสารแนบท้าย"
+                      hide-bottom-space
+                      lazy-rules
+                      :rules="[(val) => val || 'กรุณาเลือกไฟล์เอกสารแนบท้าย']"
+                    >
+                      <template v-slot:prepend>
+                        <q-icon name="attach_file" />
+                      </template>
+                    </q-file>
+                  </div>
+                </div>
+              </fieldset>
+
+              <fieldset class="border q-px-lg q-py-md">
+                <legend class="text-header q-px-sm">รายละเอียด</legend>
+                <div class="q-gutter-y-md q-mb-md">
+                  <div>
+                    <label class="text-file">เลขที่คำสั่ง</label>
+                    <q-input
+                      :outlined="true"
+                      dense
+                      lazy-rules
+                      :readonly="!true"
+                      :borderless="!true"
+                      v-model="order"
+                      :rules="[(val) => !!val || `${'กรุณากรอกเลขที่คำสั่ง'}`]"
+                      hide-bottom-space
+                      :label="`${'เลขที่คำสั่ง'}`"
+                    />
+                  </div>
+                  <div>
+                    <label class="text-file">ปีที่ออกคำสั่ง</label>
+                    <datepicker
+                      menu-class-name="modalfix"
+                      v-model="years"
+                      :locale="'th'"
+                      autoApply
+                      year-picker
+                      :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
+                          lazy-rules
+                          :model-value="years + 543"
+                          :rules="[
+                            (val) => !!val || `${'กรุณาเลือกปีที่ออกคำสั่ง'}`,
+                          ]"
+                          hide-bottom-space
+                          :label="`${'ปีที่ออกคำสั่ง'}`"
+                        >
+                          <template v-slot:prepend>
+                            <q-icon
+                              name="event"
+                              class="cursor-pointer"
+                              style="color: var(--q-grey)"
+                            >
+                            </q-icon>
+                          </template>
+                        </q-input>
+                      </template>
+                    </datepicker>
+                  </div>
+                  <div>
+                    <label class="text-file">วันที่ลงนาม</label>
+                    <datepicker
+                      menu-class-name="modalfix"
+                      v-model="date"
+                      :locale="'th'"
+                      autoApply
+                      borderless
+                      :enableTimePicker="false"
+                      week-start="0"
+                    >
+                      <template #year="{ year }">
+                        {{ year + 543 }}
+                      </template>
+                      <template #year-overlay-value="{ value }">
+                        {{ parseInt(value + 543) }}
+                      </template>
+                      <template #trigger>
+                        <q-input
+                          outlined
+                          dense
+                          class="full-width datepicker"
+                          hide-bottom-space
+                          :model-value="date != null ? date2Thai(date) : null"
+                          :label="`${'วันที่มีผลออกคำสั่ง'}`"
+                          :rules="[
+                            (val) =>
+                              !!val || `${'กรุณาเลือกวันที่มีผลออกคำสั่ง'}`,
+                          ]"
+                        >
+                          <template v-slot:prepend>
+                            <q-icon
+                              name="event"
+                              class="cursor-pointer"
+                              style="color: var(--q-grey)"
+                            >
+                            </q-icon>
+                          </template>
+                        </q-input>
+                      </template>
+                    </datepicker>
+                  </div>
+                </div>
+              </fieldset>
+              <div class="flex justify-around">
+                <q-btn
+                  unelevated
+                  label="ออกคำสั่ง"
+                  :color="validateForm() ? 'public' : 'grey'"
+                  :disable="!validateForm()"
+                />
+                <q-btn
+                  class="text-dark"
+                  unelevated
+                  label="ส่งไปลงนาม"
+                  color="grey"
+                  disable
+                />
+              </div>
+            </div>
+          </q-form>
+        </template>
+      </q-splitter>
+    </div>
+    <q-separator />
+    <div class="flex justify-end q-pa-sm q-gutter-sm">
+      <q-btn
+        dense
+        outline
+        color="primary"
+        icon="chevron_left"
+        @click="previous"
+        class="q-pr-md"
+        label="เลือกรายชื่อส่งสำเนา"
+      >
+      </q-btn>
+      <q-btn
+        unelevated
+        label="บันทึก"
+        :color="validateForm() ? 'public' : 'grey'"
+        :disable="!validateForm()"
+        @click="save"
+      >
+      </q-btn>
+
+      <!-- <q-btn flat round color="primary" icon="chevron_right" @click="next">
+          <q-tooltip>ต่อไป</q-tooltip>
+        </q-btn> -->
+    </div>
+
+    <q-dialog
+      v-model="dialog"
+      persistent
+      :maximized="true"
+      transition-show="slide-up"
+      transition-hide="slide-down"
+    >
+      <q-card class="bg-white text-white">
+        <!-- <q-bar>
+            <q-space />
+  
+            <q-btn dense flat icon="close" v-close-popup>
+              <q-tooltip>ปิดหน้าต่าง</q-tooltip>
+            </q-btn>
+          </q-bar> -->
+
+        <div class="flex justify-end items-center align-center q-mr-md q-mt-sm">
+          <q-btn
+            icon="close"
+            unelevated
+            round
+            dense
+            style="color: #ff8080; background-color: #ffdede"
+            size="12px"
+            v-close-popup
+          />
+        </div>
+        <q-card-section bordered class="card-pdf q-ma-md q-pa-md">
+          <div class="justify-between items-center align-center q-pb-sm row">
+            <q-btn
+              class="text-dark bg-grey-4"
+              flat
+              dense
+              @click="page = page > 1 ? page - 1 : page"
+            >
+              <q-icon name="mdi-chevron-left" />
+            </q-btn>
+
+            <span class="body-2 grey--text text-black">
+              หน้าที่ {{ page }} จาก {{ numOfPages }}
+            </span>
+
+            <q-btn
+              class="text-dark bg-grey-4"
+              flat
+              dense
+              @click="page = page < numOfPages ? page + 1 : page"
+            >
+              <q-icon name="mdi-chevron-right" />
+            </q-btn>
+          </div>
+          <div class="pdfWidth">
+            <VuePDF
+              ref="vuePDFRef"
+              :pdf="pdfSrc"
+              :page="page"
+              fit-parent
+              :scale="0.1"
+            />
+            <!-- <VuePdf :key="page" :src="pdfSrc" :page="page" /> -->
+          </div>
+          <div class="justify-between items-center align-center q-pt-sm row">
+            <q-btn
+              class="text-dark bg-grey-4"
+              flat
+              dense
+              @click="page = page > 1 ? page - 1 : page"
+            >
+              <q-icon name="mdi-chevron-left" />
+            </q-btn>
+
+            <span class="body-2 grey--text text-black">
+              หน้าที่ {{ page }} จาก {{ numOfPages }}
+            </span>
+
+            <q-btn
+              class="text-dark bg-grey-4"
+              flat
+              dense
+              @click="page = page < numOfPages ? page + 1 : page"
+            >
+              <q-icon name="mdi-chevron-right" />
+            </q-btn>
+          </div>
+        </q-card-section>
+      </q-card>
+    </q-dialog>
+  </div>
+</template>
+<script setup lang="ts">
+import { ref, onMounted, onUnmounted, computed } from "vue";
+import { VuePDF, usePDF } from "@tato30/vue-pdf";
+import type { PDFDocumentLoadingTask } from "pdfjs-dist/types/src/display/api";
+import type { QForm } from "quasar";
+import { useCounterMixin } from "@/stores/mixin";
+
+const mixin = useCounterMixin();
+const { date2Thai } = mixin;
+
+const dialog = ref<boolean>(false);
+
+// onUnmounted(() => {
+//   window.removeEventListener("resize", (e: any) => {
+//     myEventHandler(e);
+//   });
+// });
+
+onMounted(async () => {
+  //   window.addEventListener("resize", (e: any) => {
+  //     myEventHandler(e);
+  //   });
+
+  const pdfData = usePDF("/src/assets/05_modules.pdf");
+
+  setTimeout(() => {
+    pdfSrc.value = pdfData.pdf.value;
+    numOfPages.value = pdfData.pages.value;
+  }, 1000);
+});
+
+// const myEventHandler = (e: any) => {
+//   console.log("e", e.target.innerWidth);
+//   if (vuePDFRef !== null) {
+//     vuePDFRef.value.reload();
+//   }
+// };
+
+const pdfSrc = ref<PDFDocumentLoadingTask | undefined>();
+const numOfPages = ref<number>(0);
+const page = ref<number>(1);
+const vuePDFRef = ref<any>(null);
+
+const myForm = ref<QForm | null>(null);
+
+const props = defineProps({
+  next: {
+    type: Function,
+    default: () => console.log("not function"),
+  },
+  previous: {
+    type: Function,
+    default: () => console.log("not function"),
+  },
+});
+
+const next = () => props.next();
+const previous = () => props.previous();
+
+const splitterModel = ref<number>(70);
+const tab = ref<string>("main");
+const fileOrder = ref<any>(null);
+const fileTailer = ref<any>(null);
+
+const order = ref<string>("");
+const years = ref<number>(new Date().getFullYear());
+const date = ref<Date>(new Date());
+
+const onchangePage = (val: any) => {
+  //   console.log(val);
+  if (vuePDFRef !== null) {
+    vuePDFRef.value.reload();
+  }
+};
+
+const save = () => {
+  if (myForm.value !== null) {
+    myForm.value!.validate().then((success: Boolean) => {
+      if (success) {
+        // yay, models are correct
+      }
+    });
+  }
+};
+
+const validateForm = () => {
+  return (
+    fileOrder.value !== null &&
+    fileOrder.value !== null &&
+    order.value.trim() !== ""
+  );
+};
+
+const getClass = (val: boolean) => {
+  return {
+    "card-header-active q-px-lg q-py-md cursor-pointer": val,
+    "card-header q-px-lg q-py-md cursor-pointer": !val,
+  };
+};
+
+const setTab = (val: string) => {
+  tab.value = val;
+  page.value = 1;
+};
+</script>
+<style lang="scss" scoped>
+.border {
+  border-radius: 10px;
+  border: 1px solid #e9eaec;
+}
+.text-header {
+  color: #34373c;
+  font-size: 1rem;
+  font-weight: 300;
+}
+
+.text-file {
+  padding-top: 5px;
+  color: #34373c;
+  font-weight: 500;
+}
+
+.space {
+  background-color: #e9eaec61;
+  display: flex;
+  z-index: 3;
+}
+
+.card-header {
+  margin-top: 5px;
+  background-color: transparent;
+  padding: 2px !important;
+  border-radius: 10px 10px 0px 0px;
+  width: 200px;
+  display: flex;
+  justify-content: center;
+  font-weight: normal;
+  align-items: center;
+}
+
+.card-header-active {
+  margin-top: 5px;
+  margin-left: -1px;
+  background-color: white;
+  padding: 2px !important;
+  border-radius: 10px 10px 0px 0px;
+  border: 1px solid #e9eaec;
+  width: 200px;
+  display: flex;
+  justify-content: center;
+  border-bottom-style: none;
+  font-weight: 600;
+  align-items: center;
+}
+
+.card-pdf {
+  border-radius: 10px;
+  border: 1px solid #e9eaec;
+  background-color: #e9eaec61;
+  //   height: 60vh;
+}
+</style>

src/modules/06_retirement/components/ListRetirement/AddList.vue

@@ -1,13 +1,31 @@
 <script setup lang="ts">
-import { ref } from "vue";
+import { ref, watch } from "vue";
+import http from "@/plugins/http";
+import config from "@/app.config";
 import { useCounterMixin } from "@/stores/mixin";
 import { useQuasar } from "quasar";
+import { useRoute } from "vue-router";
 
 const $q = useQuasar(); //ใช้ noti quasar
 const mixin = useCounterMixin();
-const {} = mixin;
+const { messageError, success, showLoader, hideLoader } = mixin;
+const route = useRoute();
+
+const type_params = route.params.type;
+const id = route.params.id;
+const props = defineProps({
+  retireld: String,
+  listId: String,
+  UpdateListId: {
+		type: Function,
+		default: () => console.log("UpdateListId"),
+	},
+});
 
 const modal = ref<boolean>(false);
+const retireld = ref<any>();
+const type = ref<any>();
+const listId = ref(props.listId);
 
 const columns = ref<any["columns"]>([
   {
@@ -39,10 +57,10 @@ const columns = ref<any["columns"]>([
     align: "left",
   },
   {
-    name: "affiliation",
+    name: "organizationOrganization",
     required: true,
     label: "สังกัด",
-    field: "affiliation",
+    field: "organizationOrganization",
     align: "left",
   },
   {
@@ -54,51 +72,125 @@ const columns = ref<any["columns"]>([
   },
 ]);
 const rows = ref<any>([
-  {
-    fullname: "นายใจดี  ยอดใจ",
-    position: "นักวิชาการพัสดุ",
-    level: "ปฎิบัติการ",
-    affiliation: "กลุ่มงานโครงสร้างและอัตรากำลัง ๒",
-  },
-  {
-    fullname: "นายจักกริน  บัณฑิต",
-    position: "นักวิชาการพัสดุ",
-    level: "ปฎิบัติการ",
-    affiliation: "กลุ่มงานโครงสร้างและอัตรากำลัง ๒",
-  },
-  {
-    fullname: "นายจักกริน  บัณฑิต",
-    position: "นักวิชาการพัสดุ",
-    level: "ปฎิบัติการ",
-    affiliation: "กลุ่มงานโครงสร้างและอัตรากำลัง ๒",
-  },
-  {
-    fullname: "นายจักกริน  บัณฑิต",
-    position: "นักวิชาการพัสดุ",
-    level: "ปฎิบัติการ",
-    affiliation: "กลุ่มงานโครงสร้างและอัตรากำลัง ๒",
-  },
-  {
-    fullname: "นายจักกริน  บัณฑิต",
-    position: "นักวิชาการพัสดุ",
-    level: "ปฎิบัติการ",
-    affiliation: "กลุ่มงานโครงสร้างและอัตรากำลัง ๒",
-  },
-  {
-    fullname: "นายจักกริน  บัณฑิต",
-    position: "นักวิชาการพัสดุ",
-    level: "ปฎิบัติการ",
-    affiliation: "กลุ่มงานโครงสร้างและอัตรากำลัง ๒",
-  },
-  {
-    fullname: "นายจักกริน  บัณฑิต",
-    position: "นักวิชาการพัสดุ",
-    level: "ปฎิบัติการ",
-    affiliation: "กลุ่มงานโครงสร้างและอัตรากำลัง ๒",
-  },
+  // {
+  //   fullname: "นายใจดี  ยอดใจ",
+  //   position: "นักวิชาการพัสดุ",
+  //   level: "ปฎิบัติการ",
+  //   affiliation: "กลุ่มงานโครงสร้างและอัตรากำลัง ๒",
+  // },
+  // {
+  //   fullname: "นายจักกริน  บัณฑิต",
+  //   position: "นักวิชาการพัสดุ",
+  //   level: "ปฎิบัติการ",
+  //   affiliation: "กลุ่มงานโครงสร้างและอัตรากำลัง ๒",
+  // },
+  // {
+  //   fullname: "นายจักกริน  บัณฑิต",
+  //   position: "นักวิชาการพัสดุ",
+  //   level: "ปฎิบัติการ",
+  //   affiliation: "กลุ่มงานโครงสร้างและอัตรากำลัง ๒",
+  // },
+  // {
+  //   fullname: "นายจักกริน  บัณฑิต",
+  //   position: "นักวิชาการพัสดุ",
+  //   level: "ปฎิบัติการ",
+  //   affiliation: "กลุ่มงานโครงสร้างและอัตรากำลัง ๒",
+  // },
+  // {
+  //   fullname: "นายจักกริน  บัณฑิต",
+  //   position: "นักวิชาการพัสดุ",
+  //   level: "ปฎิบัติการ",
+  //   affiliation: "กลุ่มงานโครงสร้างและอัตรากำลัง ๒",
+  // },
+  // {
+  //   fullname: "นายจักกริน  บัณฑิต",
+  //   position: "นักวิชาการพัสดุ",
+  //   level: "ปฎิบัติการ",
+  //   affiliation: "กลุ่มงานโครงสร้างและอัตรากำลัง ๒",
+  // },
+  // {
+  //   fullname: "นายจักกริน  บัณฑิต",
+  //   position: "นักวิชาการพัสดุ",
+  //   level: "ปฎิบัติการ",
+  //   affiliation: "กลุ่มงานโครงสร้างและอัตรากำลัง ๒",
+  // },
 ]);
 const filter = ref<string>("");
-const clickAdd = () => {
+watch(modal, () => {
+  // console.log(props);
+
+  if (modal.value === true) {
+    retireld.value = props.retireld;
+    if (type_params === "officer") {
+      type.value = type_params;
+    } else type.value = "all";
+
+    fecthlistRetire();
+  }
+});
+const updateListData = (retireld: string, pId: string) => {
+    props.UpdateListId(retireld, pId);
+};
+const fecthlistRetire = async () => {
+  showLoader();
+  await http
+    .get(config.API.profileOrganizRoot)
+    .then((res) => {
+      const id = res.data.result[0].id;
+      // console.log(id);
+      if (id !== "") {
+        findlist(id);
+      }
+    })
+    .catch((e) => {
+      messageError($q, e);
+    });
+};
+
+const findlist = async (id: string) => {
+  let data = [{}];
+  if (type.value === "officer") {
+    data = [{ criteriaType: "is_retire", criteriaValue: "false" }];
+  } else if (type.value === "all") {
+    // console.log("all");
+    data = [
+      { criteriaType: "is_retire", criteriaValue: "false" },
+      { criteriaType: "employee_class", criteriaValue: "perm" },
+    ];
+  }
+  // console.log(data);
+
+  await http
+    .post(config.API.profileSearchNewOcIdType(id, type.value), {
+      criterias: data,
+    })
+    .then((res) => {
+      // console.log(res.data.result);
+      rows.value = res.data.result.map((e: any) => ({
+        id: e.id,
+        fullname: e.fullname,
+        position: e.position,
+        level: e.positionEmployeeLevel,
+        organizationOrganization: e.oc,
+      }));
+    })
+    .catch((e) => {
+      console.log(e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+};
+const clickAdd = (props: any) => {
+  // console.log("props===>",props.row.id)
+  if (retireld.value == undefined) {
+    retireld.value = id;
+  }
+
+  let data: any = props.row.id;
+
+  console.log("retireld & profileId",retireld.value, data);
+
   $q.dialog({
     title: "ยืนยันการเพิ่มข้อมูล",
     message: "ต้องการเพิ่มข้อมูลนี้ใช่หรือไม่?",
@@ -109,7 +201,20 @@ const clickAdd = () => {
     persistent: true,
   })
     .onOk(async () => {
-      console.log("เพิ่มข้อมูล");
+      // console.log("เพิ่มข้อมูล");
+      await http
+        .put(config.API.profileRetire(retireld.value), { profileId: data })
+        .then((res) => {
+          success($q, "เพิ่มข้อมูลสำเร็จ");
+          updateListData(retireld.value, data);
+        })
+        .catch((e) => {
+          messageError($q, e);
+        })
+        .finally(() => {
+          // fecthlistRetire();
+          modal.value = false;
+        });
     })
     .onCancel(() => {})
     .onDismiss(() => {});
@@ -135,7 +240,9 @@ const paginationLabel = (start: number, end: number, total: number) => {
     icon="mdi-plus"
     size="md"
     @click="modal = true"
-  ></q-btn>
+  >
+    <q-tooltip>เพิ่มรายชื่อ</q-tooltip></q-btn
+  >
 
   <q-dialog v-model="modal">
     <q-card style="width: 850px; max-width: 80vw" class="q-px-sm q-pb-md">
@@ -194,6 +301,9 @@ const paginationLabel = (start: number, end: number, total: number) => {
           <template v-slot:body="props">
             <q-tr :props="props" class="cursor-pointer">
               <q-td>{{ props.rowIndex + 1 }}</q-td>
+              <!-- <q-td key="order" :props="props">
+                {{ props.row.order }}
+              </q-td> -->
               <q-td key="fullname" :props="props">
                 {{ props.row.fullname }}
               </q-td>
@@ -201,16 +311,17 @@ const paginationLabel = (start: number, end: number, total: number) => {
                 {{ props.row.position }}
               </q-td>
               <q-td key="level" :props="props">{{ props.row.level }}</q-td>
-              <q-td key="affiliation" :props="props">
-                {{ props.row.affiliation }}
+              <q-td key="organizationOrganization" :props="props">
+                {{ props.row.organizationOrganization }}
               </q-td>
 
               <q-td>
                 <q-btn
                   outline
+                  :props="props"
                   label="เพิ่ม"
                   class="text-teal-5"
-                  @click="clickAdd"
+                  @click="clickAdd(props)"
                 />
               </q-td>
             </q-tr>

src/modules/06_retirement/components/ListRetirement/TableList.vue

@@ -1,31 +1,110 @@
 <script setup lang="ts">
-import { ref } from "vue";
+import { ref, onMounted, computed, watch } from "vue";
 import AddList from "../ListRetirement/AddList.vue";
 import { useCounterMixin } from "@/stores/mixin";
 import { useQuasar } from "quasar";
+import { useRoute } from "vue-router";
+import http from "@/plugins/http";
+import config from "@/app.config";
+import { useRouter } from "vue-router";
 
+const router = useRouter();
+const route = useRoute();
 const $q = useQuasar(); //ใช้ noti quasar
 const mixin = useCounterMixin();
-const {} = mixin;
+const { showLoader, hideLoader, messageError, success } = mixin;
+const type_params = route.params.type;
+const year_params = route.params.year;
+const retireld_params = route.params.id;
 
+const modalNote = ref<boolean>(false);
+const note = ref<string>("");
+const retireProfileId = ref<string>("");
+const retireld = ref<string>();
+const profileId = ref<string>("");
+
+onMounted(() => {
+  // console.log(route.params);
+  if (retireld_params === undefined) {
+    fecthlistprofile(type_params, year_params);
+  } else {
+    fecthlist(retireld_params);
+  }
+});
+
+const fecthlistprofile = async (type: any, year: any) => {
+  showLoader();
+  await http
+    .get(config.API.profile(type, year))
+    .then((res: any) => {
+      // console.log(res);
+      retireld.value = res.data.result.id;
+      rows.value = res.data.result.profile.map((e: any) => ({
+        id: e.id,
+        order: e.order,
+        fixname: e.prefix,
+        name: e.fullName,
+        organizationOrganization: e.organizationOrganization,
+        positionType: e.positionType,
+        position: e.position,
+        positionNumber: e.posNoEmployee,
+        positionLavel: e.positionEmployeeLevel,
+        bureau: e.oc,
+      }));
+    })
+    .catch((e: any) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+};
+const fecthlist = async (id: any) => {
+  showLoader();
+  await http
+    .get(config.API.listRetire(id))
+    .then((res: any) => {
+      // retireld.value = res.data.result.id;
+      rows.value = res.data.result.map((e: any) => ({
+        id: e.id,
+        profileId: e.profileId,
+        order: e.order,
+        fixname: e.prefix,
+        name: e.fullName,
+        organizationOrganization: e.organizationOrganization,
+        positionType: e.positionType,
+        position: e.position,
+        positionNumber: e.posNoEmployee,
+        positionLavel: e.positionEmployeeLevel,
+        bureau: e.oc,
+      }));
+      // console.log(rows.value);
+    })
+    .catch((e: any) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+};
 const columns = ref<any["columns"]>([
   {
-    name: "index",
+    name: "order",
     required: true,
     label: "ลำดับ",
-    field: "index",
+    field: "order",
     align: "left",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
-  {
+  /* {
     name: "fixname",
     align: "left",
     label: "คำนำหน้านาม",
     field: "fixname",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
-  },
+  }, */
   {
     name: "name",
     align: "left",
@@ -35,10 +114,10 @@ const columns = ref<any["columns"]>([
     style: "font-size: 14px",
   },
   {
-    name: "brand",
+    name: "organizationOrganization",
     align: "left",
     label: "สังกัด",
-    field: "brand",
+    field: "organizationOrganization",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
@@ -52,11 +131,11 @@ const columns = ref<any["columns"]>([
     style: "font-size: 14px",
   },
   {
-    name: "positionManager",
+    name: "position",
     align: "left",
     label: "ตำแหน่ง ",
     sublabel: "ทางการบริหาร",
-    field: "positionManager",
+    field: "position",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
@@ -104,6 +183,12 @@ const columns = ref<any["columns"]>([
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
+  {
+    name: "note",
+    align: "left",
+    label: "",
+    field: "",
+  },
   {
     name: "button",
     align: "left",
@@ -112,59 +197,62 @@ const columns = ref<any["columns"]>([
   },
 ]);
 const rows = ref<any>([
-  {
-    fixname: "นางสาว",
-    name: "รัชภรณ์ ภัคดี",
-    brand: "ฝ่ายบริหารทั่วไป",
-    positionType: "บริหาร",
-    positionManager: "จัดการทั่วไป",
-    positionLavel: "ชำนาญการ",
-    positionNumber: "กบห.2",
-    govGroup: "ฝ่ายบริหารทั่วไป",
-    govOffice: "ฝ่ายบริหารทั่วไป",
-    bureau: "บริหาร",
-  },
-  {
-    fixname: "นางสาว",
-    name: "รัชภรณ์ ภัคดี",
-    brand: "ฝ่ายบริหารทั่วไป",
-    positionType: "บริหาร",
-    positionManager: "จัดการทั่วไป",
-    positionLavel: "ชำนาญการ",
-    positionNumber: "กบห.2",
-    govGroup: "ฝ่ายบริหารทั่วไป",
-    govOffice: "ฝ่ายบริหารทั่วไป",
-    bureau: "บริหาร",
-  },
-  {
-    fixname: "นางสาว",
-    name: "รัชภรณ์ ภัคดี",
-    brand: "ฝ่ายบริหารทั่วไป",
-    positionType: "บริหาร",
-    positionManager: "จัดการทั่วไป",
-    positionLavel: "ชำนาญการ",
-    positionNumber: "กบห.2",
-    govGroup: "ฝ่ายบริหารทั่วไป",
-    govOffice: "ฝ่ายบริหารทั่วไป",
-    bureau: "บริหาร",
-  },
+  // {
+  //   fixname: "นางสาว",
+  //   name: "รัชภรณ์ ภัคดี",
+  //   brand: "ฝ่ายบริหารทั่วไป",
+  //   positionType: "บริหาร",
+  //   positionManager: "จัดการทั่วไป",
+  //   positionLavel: "ชำนาญการ",
+  //   positionNumber: "กบห.2",
+  //   govGroup: "ฝ่ายบริหารทั่วไป",
+  //   govOffice: "ฝ่ายบริหารทั่วไป",
+  //   bureau: "บริหาร",
+  // },
+  // {
+  //   fixname: "นางสาว",
+  //   name: "รัชภรณ์ ภัคดี",
+  //   brand: "ฝ่ายบริหารทั่วไป",
+  //   positionType: "บริหาร",
+  //   positionManager: "จัดการทั่วไป",
+  //   positionLavel: "ชำนาญการ",
+  //   positionNumber: "กบห.2",
+  //   govGroup: "ฝ่ายบริหารทั่วไป",
+  //   govOffice: "ฝ่ายบริหารทั่วไป",
+  //   bureau: "บริหาร",
+  // },
+  // {
+  //   fixname: "นางสาว",
+  //   name: "รัชภรณ์ ภัคดี",
+  //   brand: "ฝ่ายบริหารทั่วไป",
+  //   positionType: "บริหาร",
+  //   positionManager: "จัดการทั่วไป",
+  //   positionLavel: "ชำนาญการ",
+  //   positionNumber: "กบห.2",
+  //   govGroup: "ฝ่ายบริหารทั่วไป",
+  //   govOffice: "ฝ่ายบริหารทั่วไป",
+  //   bureau: "บริหาร",
+  // },
 ]);
 const visibleColumns = ref<any>([
+  "order",
   "fixname",
   "name",
-  "brand",
+  "organizationOrganization",
   "positionType",
-  "positionManager",
+  "position",
   "positionLavel",
   "positionNumber",
   "govGroup",
   "govOffice",
   "bureau",
+  "note",
   "button",
 ]);
 const filter = ref<string>("");
 
-const clickDelete = () => {
+const clickDelete = (prop: any) => {
+  // console.log(prop.id);
   $q.dialog({
     title: "ยืนยันการลบข้อมูล",
     message: "ต้องการลบข้อมูลนี้ใช่หรือไม่?",
@@ -175,7 +263,19 @@ const clickDelete = () => {
     persistent: true,
   })
     .onOk(async () => {
-      console.log("ลบข้อมูล");
+      await http
+        .delete(config.API.profileRetire(prop.id))
+        .then(() => {
+          success($q, "ลบข้อมูลสำเร็จ");
+        })
+        .catch((e) => {
+          messageError($q, e);
+        })
+        .finally(() => {
+          if (retireld_params === undefined) {
+            fecthlistprofile(type_params, year_params);
+          } else fecthlist(retireld_params);
+        });
     })
     .onCancel(() => {})
     .onDismiss(() => {});
@@ -183,6 +283,105 @@ const clickDelete = () => {
 const backHistory = () => {
   window.history.back();
 };
+const fetchReason = async (val: string) => {
+  await http
+    .get(config.API.reasonId(val))
+    .then((res: any) => {
+      // console.log(res.data.result);
+
+      note.value = res.data.result.reason;
+      retireProfileId.value = res.data.result.id;
+    })
+    .catch((e: any) => {
+      messageError($q, e);
+    });
+};
+const saveNote = () => {
+  $q.dialog({
+    title: "ยืนยันการบันทึกข้อมูลข้อมูล",
+    message: "ต้องการบันทึกข้อมูลนี้ใช่หรือไม่?",
+    cancel: {
+      flat: true,
+      color: "negative",
+    },
+    persistent: true,
+  })
+    .onOk(async () => {
+      // console.log("บันทึกข้อมูล");
+      await http
+        .post(config.API.createnote(), {
+          retireProfileId: retireProfileId.value,
+          reason: note.value,
+        })
+        .then(() => {
+          success($q, "บันทึกข้อมูลสำเร็จ");
+        })
+        .catch((e) => {
+          messageError($q, e);
+        })
+        .finally(() => {
+          fecthlist(retireld_params);
+          modalNote.value = false;
+        });
+    })
+    .onCancel(() => {})
+    .onDismiss(() => {});
+};
+const visibleNote = computed(() => {
+  if (note.value === "" || note.value === undefined) {
+    return true;
+  }
+});
+
+const UpdateListId = (retireld: string, pId: string) => {
+  profileId.value = pId
+  fecthlist(retireld)
+  console.log("profileId",profileId.value);
+
+};
+// const saveList = () => {
+//   $q.dialog({
+//     title: "ยืนยันกาบันทึกข้อมูล",
+//     message: "ต้องการบันทึกข้อมูลนี้ใช่หรือไม่?",
+//     cancel: {
+//       flat: true,
+//       color: "negative",
+//     },
+//     persistent: true,
+//   })
+//     .onOk(async () => {
+//       const retireld = "1233444";
+//       await http
+//         .post(config.API.listRetire("123"), { retireld: retireld })
+//         .then(() => {
+//           success($q, "บันทึกข้อมูลสำเร็จ");
+//         })
+//         .catch((e) => {
+//           messageError($q, e);
+//         })
+//         .finally(() => {
+//           fecthlist();
+//         });
+//     })
+//     .onCancel(() => {})
+//     .onDismiss(() => {});
+// };
+// const classrow = (prop: any) => {
+//   if (profileId.value!=='' && prop.profileId === profileId.value) {
+//     return "color: #26a69a;";
+//   } else return "";
+// };
+const paging = ref<boolean>(true);
+const pagination = ref({
+  sortBy: "order",
+  descending: false,
+  page: 1,
+  rowsPerPage: 10,
+});
+const paginationLabel = (start: number, end: number, total: number) => {
+  if (paging.value == true) return " " + start + "-" + end + " ใน " + total;
+  else return start + "-" + end + " ใน " + total;
+};
 </script>
 
 <template>
@@ -201,8 +400,38 @@ const backHistory = () => {
   </div>
   <div>
     <q-card class="col-12 q-pa-md">
-      <q-toolbar>
-        <AddList />
+      <div class="row col-12 q-pb-sm">
+        <AddList
+          :retireld="retireld"
+          :profile-id="profileId"
+          :UpdateListId="UpdateListId"
+        />
+        <!-- <q-btn flat round color="blue-12" icon="save" @click="saveList">
+          <q-tooltip>บันทึกข้อมูล</q-tooltip>
+        </q-btn> -->
+        <q-btn color="primary" flat round icon="download">
+          <q-menu>
+            <q-list style="min-width: 100px">
+              <q-item clickable>
+                <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>
+                <q-item-section avatar>
+                  <q-icon color="green" name="mdi-file-excel" />
+                </q-item-section>
+                <q-item-section>ไฟล .xls</q-item-section>
+              </q-item>
+            </q-list>
+          </q-menu>
+          <q-tooltip>ดาวน์โหลดไฟล์</q-tooltip>
+        </q-btn>
+        <q-btn flat round color="light-blue" icon="upload">
+          <q-tooltip>อัพโหลดไฟล์</q-tooltip>
+        </q-btn>
+
         <q-space />
         <q-tabs shrink>
           <q-input
@@ -235,20 +464,22 @@ const backHistory = () => {
             class="gt-xs q-ml-sm"
           />
         </q-tabs>
-      </q-toolbar>
+      </div>
 
-      <div class="q-pa-md">
+      <div>
         <q-table
           flat
+          dense
           bordered
           :rows="rows"
           :columns="columns"
           row-key="name"
           class="custom-header-table"
-          hide-bottom
           :filter="filter"
           :visible-columns="visibleColumns"
           no-data-label="ไม่มีข้อมูล"
+          :pagination-label="paginationLabel"
+          v-model:pagination="pagination"
         >
           <template v-slot:header="props">
             <q-tr :props="props">
@@ -263,16 +494,22 @@ const backHistory = () => {
             </q-tr>
           </template>
           <template v-slot:body="props">
-            <q-tr :props="props" class="cursor-pointer">
-              <q-td>{{ props.rowIndex + 1 }}</q-td>
-              <q-td key="fixname" :props="props">{{ props.row.fixname }}</q-td>
-              <q-td key="name" :props="props">{{ props.row.name }}</q-td>
-              <q-td key="brand" :props="props">{{ props.row.brand }}</q-td>
+            <q-tr
+              :props="props"
+              class="cursor-pointer"
+              :style="props.row.profileId === profileId && 'color: #26a69a;'"
+            >
+              <q-td key="order" :props="props">{{ props.row.order }} </q-td>
+              <!-- <q-td key="fixname" :props="props">{{ props.row.fixname }}</q-td> -->
+              <q-td key="name" :props="props">{{ props.row.fixname + props.row.name }}</q-td>
+              <q-td class="table_ellipsis" key="organizationOrganization" :props="props">{{
+                props.row.organizationOrganization
+              }}</q-td>
               <q-td key="positionType" :props="props">{{
                 props.row.positionType
               }}</q-td>
-              <q-td key="positionManager" :props="props">{{
-                props.row.positionManager
+              <q-td key="position" :props="props">{{
+                props.row.position
               }}</q-td>
               <q-td key="positionLavel" :props="props">{{
                 props.row.positionLavel
@@ -286,30 +523,102 @@ const backHistory = () => {
               <q-td key="govOffice" :props="props">{{
                 props.row.govOffice
               }}</q-td>
-              <q-td key="bureau" :props="props">{{ props.row.bureau }}</q-td>
+              <q-td class="table_ellipsis" key="bureau" :props="props">{{ props.row.bureau }}</q-td>
+              <q-td>
+                <!-- <q-btn
+                  :props="props"
+                  flat
+                  round
+                  class="text-teal-5"
+                  icon="mdi-note"
+                  dense
+                  v-if="retireld_params !== undefined"
+                  @click="
+                    fetchReason(props.row.id), (modalNote = true), (note = '')
+                  "
+                >
+                  <q-tooltip>โน้ต</q-tooltip></q-btn
+                > -->
+                <q-btn
+                  flat
+                  round
+                  color="blue"
+                  dense
+                  icon="mdi-file-account"
+                  @click="router.push(`/registry/${props.row.profileId}`)"
+                >
+                  <q-tooltip>ดูข้อมูลทะเบียนประวัติ</q-tooltip>
+                </q-btn>
+              </q-td>
               <q-td>
                 <q-btn
                   flat
                   round
                   class="text-red-14"
                   icon="mdi-delete"
-                  size="md"
-                  @click="clickDelete"
-                />
-                <q-btn
-                  flat
-                  round
-                  class="text-teal-5"
-                  icon="mdi-eye"
-                  size="md"
-                />
+                  dense
+                  @click="clickDelete(props.row)"
+                  ><q-tooltip>ลบข้อมูล</q-tooltip></q-btn
+                >
               </q-td>
             </q-tr>
           </template>
+          <template v-slot:pagination="scope">
+            <q-pagination
+              v-model="pagination.page"
+              color="primary"
+              :max="scope.pagesNumber"
+              :max-pages="5"
+              size="sm"
+              boundary-links
+              direction-links
+            ></q-pagination>
+          </template>
         </q-table>
       </div>
     </q-card>
   </div>
+
+  <!-- note -->
+  <q-dialog v-model="modalNote">
+    <q-card style="width: 700px; max-width: 80vw">
+      <q-card-section class="q-pt-none">
+        <q-toolbar class="q-py-md">
+          <q-toolbar-title class="header-text text-weight-bolder"
+            >กรอกเหตุผล
+          </q-toolbar-title>
+          <q-btn
+            icon="close"
+            unelevated
+            round
+            dense
+            @click="modalNote = false"
+            style="color: #ff8080; background-color: #ffdede"
+          />
+        </q-toolbar>
+      </q-card-section>
+      <q-card-section class="q-pt-none">
+        <q-input
+          outlined
+          dense
+          lazy-rules
+          v-model="note"
+          :rules="[(val) => !!val || 'กรุณากรอกเหตุผล']"
+          :label="`${'กรอกเหตุผล'}`"
+          type="textarea"
+        />
+      </q-card-section>
+
+      <q-card-actions align="right">
+        <q-btn
+          label="บักทึก"
+          color="secondary"
+          @click="saveNote"
+          :disable="visibleNote"
+        />
+      </q-card-actions>
+    </q-card>
+  </q-dialog>
 </template>
 
 <style lang="scss" scope>
@@ -339,4 +648,7 @@ const backHistory = () => {
     top: 0;
   }
 }
+.q-btn-dropdown__arrow {
+  display: none;
+}
 </style>

src/modules/06_retirement/components/resign/Deceased.vue

@@ -0,0 +1,268 @@
+<script setup lang="ts">
+import { ref } from "vue";
+import type { QTableProps } from "quasar";
+import { useRouter } from "vue-router";
+// const router = useRouter();
+const pagination = ref({
+    sortBy: "desc",
+    descending: false,
+    page: 1,
+    rowsPerPage: 10,
+  });
+  const paging = ref<boolean>(true);
+  const paginationLabel = (start: string, end: string, total: string) => {
+    if (paging.value == true) return " " + start + "-" + end + " ใน " + total;
+    else return start + "-" + end + " ใน " + total;
+  };
+const visibleColumns = ref<string[]>([ "prefix", "fullname", "positionType", "position", "positionLevel", "positionExecutive", "oc"]); //ค้นหา คอลัมน์ คอลัมน์ที่แสดง
+const filterKeyword = ref<string>("");
+const filterRef = ref<any>(null);
+const resetFilter = () => {
+  filterKeyword.value = "";
+  filterRef.value.focus();
+};
+
+// const nextPage = (id:string) => {
+//   router.push("/retirement/resign/"+id);
+// };
+const rows = ref<any>([
+  { personalId:"0a846508-4932-40de-9a9e-5b519492217c",prefix: "นางสาว", fullname: "นางสาวอย พชช", positionType: "บริหาร", position: "นักบริหาร", positionLevel: "ต้น", positionExecutive: "ผู้ช่วยหัวหน้าสำนักงาน", oc: "สำนักงานคณะกรรมการข้าราชการกรุงเทพมหานคร"},
+  { personalId:"0a846508-4932-40de-9a9e-5b519492227c",prefix: "นางสาว", fullname: "นางสาววญ สพ", positionType: "วิชาการ", position: "นักจัดการงานทั่วไป", positionLevel: "ปฏิบัติการ", positionExecutive: "-", oc: "กลุ่มงานช่วยนักบริหาร"},
+]);
+const columns = ref<QTableProps["columns"]>([
+  {
+    name: "prefix",
+    align: "left",
+    label: "คำนำหน้า",
+    sortable: true,
+    field: "prefix",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "fullname",
+    align: "left",
+    label: "ชื่อ-นามสกุล",
+    sortable: true,
+    field: "fullname",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "positionType",
+    align: "left",
+    label: "ตำแหน่งประเภท",
+    sortable: true,
+    field: "positionType",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "position",
+    align: "left",
+    label: "ตำแหน่งในสายงาน",
+    sortable: true,
+    field: "position",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "positionLevel",
+    align: "left",
+    label: "ระดับ",
+    sortable: true,
+    field: "positionLevel",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "positionExecutive",
+    align: "left",
+    label: "ตำแหน่งทางการบริหาร",
+    sortable: true,
+    field: "positionExecutive",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "oc",
+    align: "left",
+    label: "สังกัด",
+    sortable: true,
+    field: "oc",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+
+]);
+</script>
+<template>
+  <div class="toptitle text-dark col-12 row items-center">รายการบันทึกเวียนแจ้งการถึงแก่กรรม</div>
+  <q-card flat bordered class="col-12 q-mt-sm">
+    <q-separator />
+    <div class="col-12 row q-pa-md">
+      <div class="row col-12">
+        <div class="row col-12 q-col-gutter-sm">
+          <!-- <q-select
+            v-model="fiscalyear"
+            label="ปีงบประมาณ"
+            dense
+            emit-value
+            map-options
+            :options="fiscalyearOP"
+            option-value="id"
+            option-label="name"
+            lazy-rules
+            hide-bottom-space
+            :readonly="false"
+            :borderless="false"
+            :outlined="true"
+            :hide-dropdown-icon="false"
+            style="min-width: 150px"
+            @update:model-value="searchFilterTable"
+          /> -->
+
+          <q-space />
+
+          <q-input
+            class="col-xs-12 col-sm-3 col-md-2"
+            standout
+            dense
+            v-model="filterKeyword"
+            ref="filterRef"
+            outlined
+            debounce="300"
+            placeholder="ค้นหา"
+          >
+            <template v-slot:append>
+              <q-icon v-if="filterKeyword == ''" name="search" />
+              <q-icon
+                v-if="filterKeyword !== ''"
+                name="clear"
+                class="cursor-pointer"
+                @click="resetFilter"
+              />
+            </template>
+          </q-input>
+
+          <q-select
+            v-model="visibleColumns"
+            multiple
+            outlined
+            dense
+            options-dense
+            :display-value="$q.lang.table.columns"
+            emit-value
+            map-options
+            :options="columns"
+            option-value="name"
+            options-cover
+            style="min-width: 150px"
+            class="col-xs-12 col-sm-3 col-md-2"
+          />
+        </div>
+        <div class="col-12 q-pt-sm">
+          <q-table
+            ref="table"
+            :columns="columns"
+            :rows="rows"
+            :filter="filterKeyword"
+            row-key="fullname"
+            flat
+            bordered
+            :paging="true"
+            dense
+            class="custom-header-table"
+            :visible-columns="visibleColumns"
+            :pagination-label="paginationLabel"
+              v-model:pagination="pagination"
+          >
+          
+            <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-slot:body="props">
+              <q-tr :props="props" class="cursor-pointer">
+                <!-- <q-td key="no" :props="props">
+                  {{ props.rowIndex + 1 }}
+                </q-td> -->
+                <q-td key="prefix" :props="props">
+                  {{ props.row.prefix }}
+                </q-td>
+                <q-td key="fullname" :props="props">
+                  {{ props.row.fullname }}
+                </q-td>
+                <q-td key="positionType" :props="props">
+                  {{ props.row.positionType }}
+                </q-td>
+                <q-td key="position" :props="props">
+                  {{ props.row.position }}
+                </q-td>
+                <q-td key="positionLevel" :props="props">
+                  {{ props.row.positionLevel }}
+                </q-td>
+                <q-td key="positionExecutive" :props="props">
+                  {{ props.row.positionExecutive }}
+                </q-td>
+                <q-td key="oc" :props="props">
+                  {{ props.row.oc }}
+                </q-td>
+
+
+              </q-tr>
+            </template>
+            <template v-slot:pagination="scope">
+              <q-pagination
+                v-model="pagination.page"
+                active-color="primary"
+                color="primary"
+                :max="scope.pagesNumber"
+                :max-pages="5"
+                size="sm"
+                boundary-links
+                direction-links
+              ></q-pagination>
+            </template>
+          </q-table>
+        </div>
+      </div>
+    </div>
+  </q-card>
+</template>
+<style scoped lang="scss">
+  .custom-header-table {
+    max-height: 64vh;
+  
+    .q-table tr:nth-child(odd) td {
+      background: white;
+    }
+  
+    .q-table tr:nth-child(even) td {
+      background: #f8f8f8;
+    }
+  
+    .q-table thead tr {
+      background: #ecebeb;
+    }
+  
+    .q-table thead tr th {
+      position: sticky;
+      z-index: 1;
+    }
+  
+    /* this will be the loading indicator */
+    .q-table thead tr:last-child th {
+      /* height of all previous header rows */
+      top: 48px;
+    }
+  
+    .q-table thead tr:first-child th {
+      top: 0;
+    }
+  }
+</style>

src/modules/06_retirement/components/resign/Resign.vue

@@ -0,0 +1,278 @@
+<script setup lang="ts">
+import { ref } from "vue";
+import type { QTableProps } from "quasar";
+import { useRouter } from "vue-router";
+const router = useRouter();
+const pagination = ref({
+    sortBy: "desc",
+    descending: false,
+    page: 1,
+    rowsPerPage: 10,
+  });
+  const paging = ref<boolean>(true);
+  const paginationLabel = (start: string, end: string, total: string) => {
+    if (paging.value == true) return " " + start + "-" + end + " ใน " + total;
+    else return start + "-" + end + " ใน " + total;
+  };
+const visibleColumns = ref<string[]>([ "prefix", "fullname", "positionType", "position", "positionLevel", "positionExecutive", "oc", "status",]); //ค้นหา คอลัมน์ คอลัมน์ที่แสดง
+const filterKeyword = ref<string>("");
+const filterRef = ref<any>(null);
+const resetFilter = () => {
+  filterKeyword.value = "";
+  filterRef.value.focus();
+};
+
+// const nextPage = (id:string) => {
+//   router.push("/retirement/resign/"+id);
+// };
+const rows = ref<any>([
+  { personalId:"0a846508-4932-40de-9a9e-5b519492217c",prefix: "นางสาว", fullname: "นางสาวอย พชช", positionType: "บริหาร", position: "นักบริหาร", positionLevel: "ต้น", positionExecutive: "ผู้ช่วยหัวหน้าสำนักงาน", oc: "สำนักงานคณะกรรมการข้าราชการกรุงเทพมหานคร", status: "ยื่นลาออก",},
+  { personalId:"0a846508-4932-40de-9a9e-5b519492227c",prefix: "นางสาว", fullname: "นางสาววญ สพ", positionType: "วิชาการ", position: "นักจัดการงานทั่วไป", positionLevel: "ปฏิบัติการ", positionExecutive: "-", oc: "กลุ่มงานช่วยนักบริหาร", status: "ยื่นลาออก",},
+]);
+const columns = ref<QTableProps["columns"]>([
+  {
+    name: "prefix",
+    align: "left",
+    label: "คำนำหน้า",
+    sortable: true,
+    field: "prefix",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "fullname",
+    align: "left",
+    label: "ชื่อ-นามสกุล",
+    sortable: true,
+    field: "fullname",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "positionType",
+    align: "left",
+    label: "ตำแหน่งประเภท",
+    sortable: true,
+    field: "positionType",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "position",
+    align: "left",
+    label: "ตำแหน่งในสายงาน",
+    sortable: true,
+    field: "position",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "positionLevel",
+    align: "left",
+    label: "ระดับ",
+    sortable: true,
+    field: "positionLevel",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "positionExecutive",
+    align: "left",
+    label: "ตำแหน่งทางการบริหาร",
+    sortable: true,
+    field: "positionExecutive",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "oc",
+    align: "left",
+    label: "สังกัด",
+    sortable: true,
+    field: "oc",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "status",
+    align: "left",
+    label: "สถานะ",
+    sortable: true,
+    field: "status",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+]);
+</script>
+<template>
+  <div class="toptitle text-dark col-12 row items-center">รายการลาออก</div>
+  <q-card flat bordered class="col-12 q-mt-sm">
+    <q-separator />
+    <div class="col-12 row q-pa-md">
+      <div class="row col-12">
+        <div class="row col-12 q-col-gutter-sm">
+          <!-- <q-select
+            v-model="fiscalyear"
+            label="ปีงบประมาณ"
+            dense
+            emit-value
+            map-options
+            :options="fiscalyearOP"
+            option-value="id"
+            option-label="name"
+            lazy-rules
+            hide-bottom-space
+            :readonly="false"
+            :borderless="false"
+            :outlined="true"
+            :hide-dropdown-icon="false"
+            style="min-width: 150px"
+            @update:model-value="searchFilterTable"
+          /> -->
+
+          <q-space />
+
+          <q-input
+            class="col-xs-12 col-sm-3 col-md-2"
+            standout
+            dense
+            v-model="filterKeyword"
+            ref="filterRef"
+            outlined
+            debounce="300"
+            placeholder="ค้นหา"
+          >
+            <template v-slot:append>
+              <q-icon v-if="filterKeyword == ''" name="search" />
+              <q-icon
+                v-if="filterKeyword !== ''"
+                name="clear"
+                class="cursor-pointer"
+                @click="resetFilter"
+              />
+            </template>
+          </q-input>
+
+          <q-select
+            v-model="visibleColumns"
+            multiple
+            outlined
+            dense
+            options-dense
+            :display-value="$q.lang.table.columns"
+            emit-value
+            map-options
+            :options="columns"
+            option-value="name"
+            options-cover
+            style="min-width: 150px"
+            class="col-xs-12 col-sm-3 col-md-2"
+          />
+        </div>
+        <div class="col-12 q-pt-sm">
+          <q-table
+            ref="table"
+            :columns="columns"
+            :rows="rows"
+            :filter="filterKeyword"
+            row-key="fullname"
+            flat
+            bordered
+            :paging="true"
+            dense
+            class="custom-header-table"
+            :visible-columns="visibleColumns"
+            :pagination-label="paginationLabel"
+              v-model:pagination="pagination"
+          >
+          
+            <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-th auto-width />
+              </q-tr>
+            </template>
+            <template v-slot:body="props">
+              <q-tr :props="props" class="cursor-pointer" @click=" router.push(`/retirement/resign/${props.rowIndex + 1}`)">
+                <!-- <q-td key="no" :props="props">
+                  {{ props.rowIndex + 1 }}
+                </q-td> -->
+                <q-td key="prefix" :props="props">
+                  {{ props.row.prefix }}
+                </q-td>
+                <q-td key="fullname" :props="props">
+                  {{ props.row.fullname }}
+                </q-td>
+                <q-td key="positionType" :props="props">
+                  {{ props.row.positionType }}
+                </q-td>
+                <q-td key="position" :props="props">
+                  {{ props.row.position }}
+                </q-td>
+                <q-td key="positionLevel" :props="props">
+                  {{ props.row.positionLevel }}
+                </q-td>
+                <q-td key="positionExecutive" :props="props">
+                  {{ props.row.positionExecutive }}
+                </q-td>
+                <q-td key="oc" :props="props">
+                  {{ props.row.oc }}
+                </q-td>
+                <q-td key="status" :props="props">
+                  {{ props.row.status }}
+                </q-td>
+
+              </q-tr>
+            </template>
+            <template v-slot:pagination="scope">
+              <q-pagination
+                v-model="pagination.page"
+                active-color="primary"
+                color="primary"
+                :max="scope.pagesNumber"
+                :max-pages="5"
+                size="sm"
+                boundary-links
+                direction-links
+              ></q-pagination>
+            </template>
+          </q-table>
+        </div>
+      </div>
+    </div>
+  </q-card>
+</template>
+<style scoped lang="scss">
+  .custom-header-table {
+    max-height: 64vh;
+  
+    .q-table tr:nth-child(odd) td {
+      background: white;
+    }
+  
+    .q-table tr:nth-child(even) td {
+      background: #f8f8f8;
+    }
+  
+    .q-table thead tr {
+      background: #ecebeb;
+    }
+  
+    .q-table thead tr th {
+      position: sticky;
+      z-index: 1;
+    }
+  
+    /* this will be the loading indicator */
+    .q-table thead tr:last-child th {
+      /* height of all previous header rows */
+      top: 48px;
+    }
+  
+    .q-table thead tr:first-child th {
+      top: 0;
+    }
+  }
+</style>

src/modules/06_retirement/components/resign/ResignByid.vue

@@ -0,0 +1,390 @@
+<template>
+    <div class="toptitle text-dark 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)"
+        />
+        รายละเอียดการลาออกของ {{ name }}
+				
+    </div>
+    <q-card bordered class="row col-12 text-dark">
+			<div class="bg-grey-1 q-pa-sm col-12 row items-center text-primary">
+				<div class="q-pl-sm text-weight-bold text-subtitle2">{{ name }}</div>
+				<q-space />
+				<q-btn outline color="blue" dense icon-right="mdi-open-in-new" class="q-px-sm" label="ดูข้อมูลทะเบียนประวัติ" />
+			</div>
+			<div class="col-12"><q-separator/></div>
+			<div class="row col-12 q-pa-md">
+				<div class="col-12 row bg-white q-col-gutter-md">
+					<div class="col-xs-3 col-sm-2 col-md-1 row ">
+						<q-img src="@/assets/avatar_user.jpg" />
+					</div>
+					<div class="col-xs-6 col-sm-3 row items-center">
+						<div class="col-12 q-pl-md">
+							<div class="col-12 text-top">ตำแหน่งในสายงาน</div>
+							<div class="col-12 text-detail">{{position}}</div>
+						</div>
+					</div>
+					<div class="col-xs-6 col-sm-2 row items-center">
+						<div class="col-12">
+							<div class="col-12 text-top">ระดับ</div>
+							<div class="col-12 text-detail">{{level}}</div>
+						</div>
+					</div>
+					<div class="col-xs-6 col-sm-3 row items-center">
+						<div class="col-12">
+							<div class="col-12 text-top">สังกัด</div>
+							<div class="col-12 text-detail">{{institution}}</div>
+						</div>
+					</div>
+					<div class="col-xs-6 col-sm-3 row items-center">
+						<div class="col-12">
+							<div class="col-12 text-top">สถานะการทดลองงาน</div>
+							<div class="col-12 text-detail">
+								<q-icon size="20px" v-if="status == 'อยู่ระหว่างการทดลองงาน'" name="mdi-timer-sand" color="deep-orange" />
+								<q-icon size="20px" v-else-if="status == 'ไม่ผ่านการทดลอง'" name="mdi-close" color="red" />
+								<q-icon size="20px" v-else name="mdi-check" color="teal" />
+								{{ status }}
+							</div>
+						</div>
+					</div>
+				</div>
+			</div>
+    </q-card>
+
+	<q-card bordered class="row col-12 text-dark q-mt-sm">
+			<div class="bg-grey-1 q-pa-sm col-12 row items-center text-primary">
+				<div class="q-pl-sm text-weight-bold text-dark">ข้อมูลการลาออก</div>
+				<q-space />
+				<div class="q-gutter-x-sm">
+					<q-btn outline color="primary" dense icon-right="check" class="q-px-sm" label="อนุมัติ" @click="popUp('pass')" />
+					<q-btn outline color="red" dense icon-right="close" class="q-px-sm" label="ยับยั้ง" @click="popUp('passNot')"/>
+
+				</div>
+				
+			</div>
+			<div class="col-12"><q-separator/></div>
+			<div class="row col-12 q-pa-md">
+				<div class="col-12 row bg-white q-col-gutter-md">
+					<div class="col-xs-6 col-sm-3 row items-center">
+						<div class="col-12 ">
+							<div class="col-12 text-top">สถานที่ยื่นขอลาออกจากราชการ</div>
+							<div class="col-12 text-detail">{{location}}</div>
+						</div>
+					</div>
+					<div class="col-xs-6 col-sm-3 row items-center">
+						<div class="col-12">
+							<div class="col-12 text-top">วันที่ยื่นขอลาออกจากราชการ</div>
+							<div class="col-12 text-detail">{{filingDate}}</div>
+						</div>
+					</div>
+					<div class="col-xs-6 col-sm-3 row items-center">
+						<div class="col-12 ">
+							<div class="col-12 text-top">เหตุผลที่ลาออกจากราชการ</div>
+							<div class="col-12 text-detail">{{reason}}</div>
+						</div>
+					</div>
+					<div class="col-xs-6 col-sm-3 row items-center">
+						<div class="col-12">
+							<div class="col-12 text-top">วันที่ขอลาออกจากราชการ</div>
+							<div class="col-12 text-detail">{{requestDate}}</div>
+						</div>
+					</div>
+				</div>
+			</div>
+    </q-card>
+
+	<q-dialog v-model="modalPass" persistent>
+    <q-card style="width: 800px">
+      <q-form ref="myForm">
+        <DialogHeader
+          :title="`${modalPass ? 'อนุมัติ' : 'ยับยั้ง'}`"
+          :close="clickClose"
+        />
+        <q-separator />
+        <q-card-section class="q-p-sm">
+          <div class="col-xs-12 col-sm-12 col-md-12">
+            <q-input
+              hide-bottom-space
+              dense
+              lazy-rules
+			  outlined 
+              :rules="[(val) => !!val || 'กรุณากรอกเหตุผล']"
+              v-model="userNote"
+              :label="`${'กรอกเหตุผล'}`"
+              type="textarea"
+            />
+          </div>
+        </q-card-section>
+        <q-separator />
+        <DialogFooter
+          :editvisible="true"
+          :save="modalPass ? savePass : savePassNot"
+        />
+      </q-form>
+    </q-card>
+  </q-dialog>
+  	<q-dialog v-model="modalPassNot" persistent>
+    <q-card style="width: 800px">
+      <q-form ref="myForm">
+        <DialogHeader
+          :title="`${modalPass ? 'อนุมัติ' : 'ยับยั้ง'}`"
+          :close="clickClose"
+        />
+        <q-separator />
+        <q-card-section class="q-p-sm">
+          <div class="col-xs-12 col-sm-12 col-md-12">
+            <q-input
+              hide-bottom-space
+              dense
+			  outlined 
+              lazy-rules
+              :rules="[(val) => !!val || 'กรุณากรอกเหตุผล']"
+              v-model="userNote"
+              :label="`${'กรอกเหตุผล'}`"
+              type="textarea"
+            />
+          </div>
+        </q-card-section>
+        <q-separator />
+        <DialogFooter
+          :editvisible="true"
+          :save="modalPass ? savePass : savePassNot"
+        />
+      </q-form>
+    </q-card>
+  </q-dialog>
+</template>
+<script setup lang="ts">
+import { useRouter } from "vue-router";
+import { useQuasar, QForm } from "quasar";
+import { ref, useAttrs } from "vue";
+import type { QTableProps } from "quasar";
+import type { FormProbationDetail } from "@/modules/05_placement/interface/request/Main";
+import DialogFooter from "@/modules/05_placement/components/PersonalList/DialogFooter.vue";
+import DialogHeader from "@/modules/05_placement/components/PersonalList/DialogHeader.vue";
+const router = useRouter();
+const userNote = ref<string>("");
+const name = ref<string>('นายสมคิด ยอดใจ')
+const position = ref<string>('นักจัดการงานทั่วไป')
+const level = ref<string>('ชำนาญการพิเศษ')
+const institution = ref<string>('ฝ่ายบริหารงานทั่วไป')
+const status = ref<string>('อยู่ระหว่างการทดลองงาน')
+const edit = ref<boolean>(true)
+const location = ref<string>('ที่ทำงาน') 
+const filingDate = ref<string>('21 ก.ค. 2566')
+const reason = ref<string>('เพราะxxx') 
+const requestDate = ref<string>('21 ธ.ค. 2566')
+	const $q = useQuasar();
+const modalPass = ref<boolean>(false);
+const modalPassNot = ref<boolean>(false);
+const pagination = ref({
+  sortBy: "desc",
+  descending: false,
+  page: 1,
+  rowsPerPage: 10,
+});
+
+const visibleColumns = ref<string[]>([
+  "no",
+  "startDate",
+	"endDete",
+  "intendant",
+  "commander",
+]); //ค้นหา คอลัมน์ คอลัมน์ที่แสดง
+
+// หัวตาราง
+const columns = ref<QTableProps["columns"]>([
+  {
+    name: "no",
+    align: "left",
+    label: "ลำดับ",
+    sortable: true,
+    field: "no",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "startDate",
+    align: "left",
+    label: "ตั้งแต่วันที่",
+    sortable: true,
+    field: "startDate",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+	{
+    name: "endDete",
+    align: "left",
+    label: "ถึงวันที่",
+    sortable: true,
+    field: "endDete",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+	{
+    name: "intendant",
+    align: "left",
+    label: "ผู้ดูแล",
+    sortable: true,
+    field: "intendant",
+    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",
+  }
+]);
+
+// ข้อมูลตาราง (จำลอง)
+const rows = ref<FormProbationDetail[]>([
+  {
+		no: "1",
+		startDate: "09 ก.ย. 2566",
+		endDete: "20 ต.ค. 2566",
+  	intendant: "นางสาวรัชภรณ์ ภักดี",
+  	commander: "นายนภัทร  วันดี"
+	},
+	{
+		no: "2",
+		startDate: "09 ก.ย. 2566",
+		endDete: "20 ต.ค. 2566",
+  	intendant: "นางสาวทวิดา กมลเวชชี",
+  	commander: "นางพิศ โพธิ์ดำ"
+	},
+	{
+		no: "3",
+		startDate: "09 ก.ย. 2566",
+		endDete: "20 ต.ค. 2566",
+  	intendant: "นางสาวทวิดา กมลเวชชี",
+  	commander: "นายนภัทร  วันดี"
+	},
+]);
+
+const clickAdd = () => {
+};
+
+// ค้นหาในตาราง
+const filterKeyword = ref<string>("");
+const filterRef = ref<any>(null);
+const resetFilter = () => {
+  filterKeyword.value = "";
+  filterRef.value.focus();
+};
+
+const attrs = ref<any>(useAttrs());
+
+const paging = ref<boolean>(true);
+const paginationLabel = (start: string, end: string, total: string) => {
+  if (paging.value == true) return " " + start + "-" + end + " ใน " + total;
+  else return start + "-" + end + " ใน " + total;
+};
+const popUp = (action: "pass" | "passNot" ) => {
+  if (action === "pass") {
+    modalPass.value = true;
+  } else if (action === "passNot") {
+    modalPassNot.value = true;
+  } 
+};
+const clickClose = () =>{
+  userNote.value = ""
+	modalPass.value = false
+	modalPassNot.value = false
+}
+const savePass = () =>{
+
+	$q.dialog({
+        title: "ยืนยันการขอลาออก",
+        message: "ต้องการยืนยันการขอลาออกข้อมูลนี้ใช่หรือไม่ ?",
+        cancel: {
+          flat: true,
+          const: "negative",
+        },
+        persistent: true,
+      })
+        .onOk(() => {
+          modalPass.value = false
+          console.log('----MSG---- :',userNote.value)
+          console.log('passSave (close)')
+          userNote.value = ""
+        }).onCancel(() => {})
+        .onDismiss(() => {});
+}
+
+const savePassNot = () => {
+  $q.dialog({
+        title: "ยืนยันการขอลาออก",
+        message: "ต้องการยืนยันการขอลาออกข้อมูลนี้ใช่หรือไม่ ?",
+        cancel: {
+          flat: true,
+          const: "negative",
+        },
+        persistent: true,
+      })
+        .onOk(() => {
+          modalPass.value = false
+          console.log('----MSG---- :',userNote.value)
+          console.log('passSaveNot (close)')
+          userNote.value = ""
+        }).onCancel(() => {})
+        .onDismiss(() => {});
+}
+
+</script>
+<style lang="scss" scope>
+.q-img {
+  border-radius: 5px;
+	height: 70px;
+}
+.text-top{
+	color: gray;
+	font-weight: 400;
+	padding-bottom: 3px;
+}
+.text-detail{
+	font-weight: 500;
+
+}
+.custom-header-table {
+  max-height: 64vh;
+
+  .q-table tr:nth-child(odd) td {
+    background: white;
+  }
+
+  .q-table tr:nth-child(even) td {
+    background: #f8f8f8;
+  }
+
+  .q-table thead tr {
+    background: #ecebeb;
+  }
+
+  .q-table thead tr th {
+    position: sticky;
+    z-index: 1;
+  }
+
+  /* this will be the loading indicator */
+  .q-table thead tr:last-child th {
+    /* height of all previous header rows */
+    top: 48px;
+  }
+
+  .q-table thead tr:first-child th {
+    top: 0;
+  }
+}
+</style>

src/modules/06_retirement/interface/index/Main.ts

@@ -1 +1,4 @@
-export type {};
+interface Pagination {
+    rowsPerPage: number;
+  }
+export type {Pagination};

src/modules/06_retirement/interface/response/Main.ts

@@ -1 +1,8 @@
-export type {};
+interface resMain{
+id:string;
+createdAt:Date;
+year:string;
+round:number;
+total:number;
+}
+export type {resMain};

src/modules/06_retirement/router.ts

@@ -4,8 +4,12 @@
 
 const Main = () => import("@/modules/06_retirement/views/Main.vue");
 const Listretirement = () => import("@/modules/06_retirement/components/ListRetirement/TableList.vue")
-
-
+const resignOrder = () => import("@/modules/06_retirement/components/resign/ResignOrder.vue");
+const resign = () => import("@/modules/06_retirement/components/resign/Resign.vue");
+const resignByid = () => import("@/modules/06_retirement/components/resign/ResignByid.vue")
+const deceased = () => import("@/modules/06_retirement/components/resign/Deceased.vue")
+const dismissOrder = () => import("@/modules/06_retirement/components/DismissOrder/DismissOrder.vue")
+const addOrder = () => import("@/modules/06_retirement/components/DismissOrder/AddOrder.vue")
 export default [
   {
     path: "/retirement",
@@ -18,8 +22,8 @@ export default [
     },
   },
   {
-    path: "/retirement/list",
-    name: "retirement/list",
+    path: "/retirement/list/:type/:year",
+    name: "retirement/list/",
     component: Listretirement,
     meta: {
       Auth: true,
@@ -27,4 +31,75 @@ export default [
       Role: "retirement",
     },
   },
+  {
+    path: "/retirement/listretire/:id/:type",
+    name: "retirement/list/id/type",
+    component: Listretirement,
+    meta: {
+      Auth: true,
+      Key: [7.1],
+      Role: "retirement",
+    },
+  },
+  {
+    path: "/retirement/resign",
+    name: "resign",
+    component: resign,
+    meta: {
+      Auth: true,
+      Key: [7.2],
+      Role: "retirement",
+    },
+  },
+  {
+    path: "/retirement/resign/:id",
+    name: "resignbyid",
+    component: resignByid,
+    meta: {
+      Auth: true,
+      Key: [7.3],
+      Role: "retirement",
+    },
+  },
+  {
+    path: "/retirement/resign-order",
+    name: "resign-order",
+    component: resignOrder,
+    meta: {
+      Auth: true,
+      Key: [7.4],
+      Role: "retirement",
+    },
+  },
+  {
+    path: "/deceased",
+    name: "deceased",
+    component: deceased,
+    meta: {
+      Auth: true,
+      Key: [7.5],
+      Role: "retirement",
+    },
+  },
+  {
+    path: "/dismiss-order",
+    name: "dismiss-order",
+    component: dismissOrder,
+    meta: {
+      Auth: true,
+      Key: [7.6],
+      Role: "retirement",
+    },
+  },
+  {
+    path: "/dismiss-order/add",
+    name: "dismiss-order-add",
+    component: addOrder,
+    meta: {
+      Auth: true,
+      Key: [7.7],
+      Role: "retirement",
+    },
+  },
+
 ];

src/modules/06_retirement/views/Main.vue

@@ -13,8 +13,12 @@
         indicator-color="primary"
         align="left"
       >
-        <q-tab name="samun" label="ขรก.กทม.สามัญ" />
-        <q-tab name="employee" label="ลูกจ้างประจำ" />
+        <q-tab name="officer" label="ขรก.กทม.สามัญ" @click="type = 'officer'" />
+        <q-tab
+          name="employee"
+          label="ลูกจ้างประจำ"
+          @click="type = 'employee'"
+        />
       </q-tabs>
     </div>
     <q-separator />
@@ -27,7 +31,7 @@
             dense
             emit-value
             map-options
-            :options="fiscalyearOP"
+            :options="yearOptions"
             option-value="id"
             option-label="name"
             lazy-rules
@@ -37,7 +41,6 @@
             :outlined="true"
             :hide-dropdown-icon="false"
             style="min-width: 150px"
-            @update:model-value="searchFilterTable"
           />
           <div>
             <q-btn
@@ -48,7 +51,7 @@
               color="add"
               icon="mdi-plus"
             >
-              <q-tooltip>เพิ่มผู้ทดลองปฏิบัติหน้าที่ราชการ</q-tooltip>
+              <q-tooltip>เพิ่ม</q-tooltip>
             </q-btn>
             <!-- <q-menu>
               <q-list style="min-width: 100px">
@@ -126,7 +129,11 @@
               </q-tr>
             </template>
             <template v-slot:body="props">
-              <q-tr :props="props" class="cursor-pointer" @click="nextPage">
+              <q-tr
+                :props="props"
+                class="cursor-pointer"
+                @click="nextPage(props.row)"
+              >
                 <q-td key="no" :props="props">
                   {{ props.rowIndex + 1 }}
                 </q-td>
@@ -134,9 +141,9 @@
                   {{ props.row.Date }}
                 </q-td>
                 <q-td key="retireNumber" :props="props">
-                  {{ props.row.retireNumber }}
+                  {{ props.row.total }}
                 </q-td>
-                <q-td auto-width>
+                <!-- <q-td auto-width>
                   <q-btn
                     dense
                     size="12px"
@@ -148,7 +155,7 @@
                   >
                     <q-tooltip>ลบข้อมูล</q-tooltip>
                   </q-btn>
-                </q-td>
+                </q-td> -->
               </q-tr>
             </template>
             <template v-slot:pagination="scope">
@@ -171,7 +178,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, useAttrs } from "vue";
+import { onMounted, ref, useAttrs, reactive, watch } from "vue";
 import type { QTableProps } from "quasar";
 import type {
   FormMainProbation,
@@ -179,7 +186,14 @@ import type {
 } from "@/modules/05_placement/interface/request/Main";
 import { useQuasar } from "quasar";
 import { useRouter } from "vue-router";
+import http from "@/plugins/http";
+import config from "@/app.config";
+import { useCounterMixin } from "@/stores/mixin";
+import type { resMain } from "@/modules/06_retirement/interface/response/Main";
+const yearOptions = reactive<any[]>([]);
 
+const mixin = useCounterMixin();
+const { messageError, date2Thai, showLoader, hideLoader } = mixin;
 const router = useRouter();
 const $q = useQuasar(); //ใช้ noti quasar
 const modal = ref<boolean>(false);
@@ -190,6 +204,7 @@ const pagination = ref({
   rowsPerPage: 10,
 });
 
+const type = ref<string>("officer");
 const visibleColumns = ref<string[]>(["no", "Date", "retireNumber"]); //ค้นหา คอลัมน์ คอลัมน์ที่แสดง
 
 // หัวตาราง
@@ -224,31 +239,41 @@ const columns = ref<QTableProps["columns"]>([
 ]);
 
 // ข้อมูลตาราง (จำลอง)
-const rows = ref<any>([
-  {
-    no: "1",
-    Date: "2022-9-31 ",
-    retireNumber: "5",
-  },
-  {
-    no: "1",
-    Date: "2022-9-15 ",
-    retireNumber: "7",
-  },
-  {
-    no: "1",
-    Date: "2022-8-31 ",
-    retireNumber: "15",
-  },
-  {
-    no: "1",
-    Date: "2022-9-25 ",
-    retireNumber: "20",
-  },
-]);
-const tab = ref<any>("samun");
+const currentYear = new Date().getFullYear();
+const rows = ref<resMain[]>([]);
+const tab = ref<any>("officer");
 const visibleColumns2 = ref<string[]>(["no", "name", "retireNumber"]);
+const getYear = () => {
+  yearOptions.length = 0;
+  yearOptions.push(currentYear + 543);
+  // console.log(yearOptions);
+  get(type.value, currentYear);
+  fiscalyear.value = currentYear + 543;
+};
+const get = async (type: string, year: any) => {
+  await http
+    .get(config.API.retirement(type, year))
+    .then((res) => {
+      // console.log(res);
 
+      rows.value = [];
+      let data = res.data.result;
+      rows.value = data.map((items: resMain) => ({
+        id: items.id,
+        Date: date2Thai(items.createdAt),
+        year: items.year,
+        retireNumber: items.round,
+        total: items.total,
+      }));
+    })
+    .catch((e) => {})
+    .finally(() => {
+      hideLoader();
+    });
+};
+onMounted(() => {
+  getYear();
+});
 // หัวตาราง2
 const columns2 = ref<QTableProps["columns"]>([
   {
@@ -274,7 +299,7 @@ const columns2 = ref<QTableProps["columns"]>([
     align: "left",
     label: "จำนวนผู้เกษียณ",
     sortable: true,
-    field: "position",
+    field: "total",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
@@ -319,34 +344,71 @@ const rows2 = ref<FormMainProbation2[]>([
   },
 ]);
 
-const clickDelete = (id: string) => {
+// const clickDelete = (id: string) => {
+//   $q.dialog({
+//     title: "ยืนยันการลบข้อมูล",
+//     message: "ต้องการลบข้อมูลนี้ใช่หรือไม่?",
+//     cancel: {
+//       flat: true,
+//       color: "negative",
+//     },
+//     persistent: true,
+//   })
+//     .onOk(async () => {})
+//     .onCancel(() => {})
+//     .onDismiss(() => {});
+// };
+
+const clickAdd = () => {
+  //   modal.value = true;
   $q.dialog({
-    title: "ยืนยันการลบข้อมูล",
-    message: "ต้องการลบข้อมูลนี้ใช่หรือไม่?",
+    title: 'เพิ่มประกาศ',
+    message: 'เลือกประกาศที่ต้องการเพิ่มข้อมูล',
+    options: {
+      type: 'radio',
+      model: 'opt1',
+      // inline: true
+      items: [
+        { label: 'ประกาศแก้ไข (เพิ่มคนเกษียณ)', value: 'opt1'},
+        { label: 'ประกาศแก้ไข (เฉพาะราย)', value: 'opt2' },
+        { label: 'ประกาศยกเลิก', value: 'opt3' }
+      ]
+    },
+    cancel: {
+      flat: true,
+      color: "negative",
+    },
+    persistent: true,
+    }).onOk(data => {
+      router.push(`/retirement/list/${type.value}/${currentYear}`);
+    }).onCancel(() => {
+    }).onDismiss(() => {
+    })
+  /* $q.dialog({
+    title: "ยืนยันการเพิ่มข้อมูลประกาศเกษียณ",
+    message: "ต้องการเพิ่มข้อมูลประกาศเกษียณใช่หรือไม่?",
     cancel: {
       flat: true,
       color: "negative",
     },
     persistent: true,
   })
-    .onOk(async () => {})
+    .onOk(async () => {
+      router.push(`/retirement/list/${type.value}/${currentYear}`);
+    })
     .onCancel(() => {})
-    .onDismiss(() => {});
-};
-
-const clickAdd = () => {
-  //   modal.value = true;
-  router.push("/retirement/list");
+    .onDismiss(() => {}); */
 };
 const clickClose = async () => {
   modal.value = false;
 };
-const fiscalyear = ref(["2566"]);
+const fiscalyear = ref<number>();
 const fiscalyearOP = ref<any>([
   { id: 1, name: "ทั้งหมด" },
   { id: 2, name: "2565" },
   { id: 3, name: "2565" },
 ]);
+
 // ค้นหาในตาราง
 const filterKeyword = ref<string>("");
 const filterRef = ref<any>(null);
@@ -369,9 +431,15 @@ const paginationLabel = (start: string, end: string, total: string) => {
   if (paging.value == true) return " " + start + "-" + end + " ใน " + total;
   else return start + "-" + end + " ใน " + total;
 };
-const nextPage = () => {
-  router.push("/retirement/list");
+const nextPage = (prop: any) => {
+  // console.log(prop.id);
+
+  router.push(`/retirement/listretire/${prop.id}/${type.value}`);
 };
+
+watch(type, () => {
+  get(type.value, currentYear);
+});
 </script>
 
 <style lang="scss" scope>

src/modules/08_registryEmployee/response/Main.ts

@@ -1 +1,50 @@
-export type {};
+interface ObjectNameId {
+  id: string;
+  name: string;
+}
+interface employeePosition {
+  id: string;
+  agency: string;
+  conditionNote: string;
+  department: string;
+  government: string;
+  isActive: boolean;
+  isCondition: boolean;
+  isDirector: boolean;
+  organizationUserNote: string;
+  qualification: string;
+  pile: string;
+  posNo: string;
+  positionCondition: string;
+  positionMasterUserNote: string;
+  organizationOrder: string;
+  organizationFaxId: string;
+  organizationLevelId: string;
+  organizationOrganizationId: string;
+  organizationTelExternalId: string;
+  organizationTelInternalId: string;
+  organizationTypeId: string;
+  positionEmployeeStatusId: string;
+  positionEmployeeLineId: string;
+  positionEmployeePositionId: string;
+  organizationAgencyId: string;
+  organizationGovernmentAgencyId: string;
+  organizationShortNameId: string;
+  organizationFaxName: string;
+  organizationLevelName: string;
+  organizationOrganizationName: string;
+  organizationTelExternalName: string;
+  organizationTelInternalName: string;
+  organizationTypeName: string;
+  positionEmployeeStatusName: string;
+  positionEmployeeLineName: string;
+  positionEmployeePositionName: string;
+  organizationAgencyName: string;
+  organizationGovernmentAgencyName: string;
+  organizationShortNameName: string;
+  positionEmployeeLevels: ObjectNameId[];
+  positionEmployeePositionSides: ObjectNameId[];
+  use: boolean;
+}
+
+export type { employeePosition };

src/modules/08_registryEmployee/views/Detail.vue

@@ -12,74 +12,6 @@
           :statusAdd="true"
         />
       </div>
-      <div id="government" name="16" class="row col-12">
-        <!-- <Government v-model:statusEdit="statusEdit" :statusAdd="true" /> -->
-      </div>
-      <div id="address" name="17" class="row col-12">
-        <Address v-model:statusEdit="statusEdit" :statusAdd="true" />
-      </div>
-      <div id="family" name="18" class="row col-12">
-        <Family v-model:statusEdit="statusEdit" :statusAdd="true" />
-      </div>
-      <div id="certicate" name="15" class="row col-12">
-        <Certicate
-          v-model:statusEdit="statusEdit"
-          :statusAdd="true"
-          profileType="employee"
-        />
-      </div>
-      <div id="education" name="2" class="row col-12 q-mt-md">
-        <EducationVue v-model:statusEdit="statusEdit" :statusAdd="true" />
-      </div>
-      <div id="training" name="3" class="row col-12 q-mt-md">
-        <TrainVue v-model:statusEdit="statusEdit" :statusAdd="true" />
-      </div>
-      <div id="insignia" name="4" class="row col-12 q-mt-md">
-        <InsigniaVue v-model:statusEdit="statusEdit" :statusAdd="true" />
-      </div>
-      <div id="coined" name="5" class="row col-12 q-mt-md">
-        <CoinedVue
-          v-model:statusEdit="statusEdit"
-          :statusAdd="true"
-          profileType="employee"
-        />
-      </div>
-      <div id="assessment" name="6" class="row col-12 q-mt-md">
-        <AssessmentVue
-          v-model:statusEdit="statusEdit"
-          :statusAdd="true"
-          profileType="employee"
-        />
-      </div>
-      <div id="position" name="7" class="row col-12 q-mt-md">
-        <!-- <SalaryVue
-          v-model:statusEdit="statusEdit" :statusAdd="true"
-          v-if="profileType === 'officer'"
-        /> -->
-
-        <SalaryEmployeeVue v-model:statusEdit="statusEdit" :statusAdd="true" />
-      </div>
-      <div id="rule" name="8" class="row col-12 q-mt-md">
-        <DisciplineVue v-model:statusEdit="statusEdit" :statusAdd="true" />
-      </div>
-      <div id="leave" name="9" class="row col-12 q-mt-md">
-        <LeaveVue v-model:statusEdit="statusEdit" :statusAdd="true" />
-      </div>
-      <div id="talent" name="10" class="row col-12 q-mt-md">
-        <TalentVue v-model:statusEdit="statusEdit" :statusAdd="true" />
-      </div>
-      <div id="work" name="11" class="row col-12 q-mt-md">
-        <WorkVue v-model:statusEdit="statusEdit" :statusAdd="true" />
-      </div>
-      <div id="record" name="12" class="row col-12 q-mt-md">
-        <RecordVue v-model:statusEdit="statusEdit" :statusAdd="true" />
-      </div>
-      <div id="other" name="13" class="row col-12 q-mt-md">
-        <OtherVue v-model:statusEdit="statusEdit" :statusAdd="true" />
-      </div>
-      <div id="document" name="14" class="row col-12 q-my-md">
-        <DocumentVue v-model:statusEdit="statusEdit" :statusAdd="true" />
-      </div>
     </div>
     <q-page-sticky
       position="top"
@@ -152,9 +84,7 @@
             <div class="text-bold q-pb-xs text-name">
               เพิ่มข้อมูลทะเบียนประวัติ
             </div>
-            <div class="text-bold q-pb-xs text-sub">
-              ลูกจ้างชั่วคราว
-            </div>
+            <div class="text-bold q-pb-xs text-sub">ลูกจ้างชั่วคราว</div>
           </div>
         </div>
         <q-space />
@@ -512,26 +442,7 @@ import { useDataStore } from "@/stores/data";
 import { useRoute, useRouter } from "vue-router";
 import { useCounterMixin } from "@/stores/mixin";
 import { useQuasar } from "quasar";
-import EducationVue from "@/modules/04_registry/components/Education.vue";
-import TrainVue from "@/modules/04_registry/components/Train.vue";
-import InsigniaVue from "@/modules/04_registry/components/Insignia.vue";
-import CoinedVue from "@/modules/04_registry/components/Coin.vue";
-import AssessmentVue from "@/modules/04_registry/components/Assessment.vue";
-import SalaryVue from "@/modules/04_registry/components/Salary.vue";
-import SalaryEmployeeVue from "@/modules/04_registry/components/SalaryEmployee.vue";
-import DisciplineVue from "@/modules/04_registry/components/Discipline.vue";
-import LeaveVue from "@/modules/04_registry/components/Leave.vue";
-import TalentVue from "@/modules/04_registry/components/Talent.vue";
-import WorkVue from "@/modules/04_registry/components/Work.vue";
-import RecordVue from "@/modules/04_registry/components/Record.vue";
-import OtherVue from "@/modules/04_registry/components/Other.vue";
-import DocumentVue from "@/modules/04_registry/components/Document.vue";
-import Certicate from "@/modules/04_registry/components/Information/Certicate.vue";
-import Information from "@/modules/04_registry/components/Information/Information.vue";
-import Government from "@/modules/04_registry/components/Information/Government.vue";
-import Address from "@/modules/04_registry/components/Information/Address.vue";
-import Family from "@/modules/04_registry/components/Information/Family.vue";
-import OldName from "@/modules/04_registry/components/Information/OldName.vue";
+import Information from "@/modules/08_registryEmployee/views/information.vue";
 import type { DataOption } from "@/modules/04_registry/interface/index/Main";
 import http from "@/plugins/http";
 import config from "@/app.config";
@@ -547,12 +458,6 @@ const imageUrl = ref<any>(null);
 const inputImage = ref<any>(null);
 const fullname = ref<string>("");
 const position = ref<string>("นักจัดการงานทั่วไป");
-const pdfSrc = ref<string>("");
-const pdfCurrentPage = ref<number>();
-const pdfTotalPage = ref<number>();
-const pdfSrcShort = ref<string>("");
-const pdfCurrentPageShort = ref<number>();
-const pdfTotalPageShort = ref<number>();
 const dialog = ref<boolean>(false);
 const dialogShort = ref<boolean>(false);
 const dialogLeave = ref<boolean>(false);
@@ -851,19 +756,6 @@ const clickKp7 = async () => {
   //     });
 };
 
-const downloadFilePDF = async (res: string, fileName: string) => {
-  const link = document.createElement("a");
-  //   link.href = window.URL.createObjectURL(new Blob([res]));
-  link.href = window.URL.createObjectURL(
-    new Blob([res], {
-      type: "application/vnd.ms-excel",
-    })
-  );
-  link.setAttribute("download", fileName);
-  document.body.appendChild(link);
-  link.click();
-};
-
 const clickKp7Short = async () => {
   if (profileId.value !== "") {
     window.open(config.API.profileKp7ShortId(profileId.value));
@@ -884,71 +776,6 @@ const clickKp7Short = async () => {
   //       loaderPage(false);
   //     });
 };
-
-const clickRetire = async () => {
-  if (reasonStatus.value == true) {
-    dialogMessage(
-      $q,
-      "โปรดยืนยัน",
-      "ต้องการย้ายข้อมูลจากพ้นราชการไปถือครองใช่หรือไม่",
-      "info",
-      undefined,
-      "primary",
-      Retire,
-      undefined,
-      false
-    );
-  } else {
-    leaveDate.value = new Date();
-    leaveDetail.value = "";
-    leaveNumberOrder.value = "";
-    leaveDateOrder.value = new Date();
-    reason.value = "";
-    dialogLeave.value = true;
-  }
-};
-
-const Retire = async () => {
-  if (profileId.value !== "") {
-    if (reasonStatus.value == true) {
-      loaderPage(true);
-      await http
-        .put(config.API.profileReactive(profileId.value))
-        .then((res) => {
-          if (res.data) {
-            dialogLeave.value = false;
-          }
-        })
-        .catch((e) => {
-          messageError($q, e);
-        })
-        .finally(() => {
-          router.push("/registry");
-        });
-    } else {
-      loaderPage(true);
-      await http
-        .put(config.API.profileDeactive(profileId.value), {
-          leaveDate: dateToISO(leaveDate.value),
-          leaveDetail: leaveDetail.value,
-          leaveNumberOrder: leaveNumberOrder.value,
-          leaveDateOrder: dateToISO(leaveDateOrder.value),
-          reason: reason.value,
-        })
-        .then((res) => {
-          if (res.data) {
-            dialogLeave.value = false;
-          }
-        })
-        .catch((e) => {
-          messageError($q, e);
-        })
-        .finally(() => {
-          router.push("/registry");
-        });
-    }
-  }
-};
 </script>
 <style>
 .image-size-default {

src/modules/08_registryEmployee/views/Main.vue

@@ -195,7 +195,42 @@
     </div>
   </q-card>
   <q-dialog v-model="modal" persistent>
-    <q-card flat bordered class="col-12 q-mt-sm q-pt-sm q-pa-md"> </q-card>
+    <q-card style="width: 70vw; max-width: 70vw">
+      <DialogHeader tittle="กำหนดตำแหน่ง" :close="modalOpenClose" />
+      <q-separator />
+      <q-card-section class="q-pa-sm">
+        <d-table
+          :rows="rowsPosition"
+          :columns="columnsPosition"
+          row-key="id"
+          selection="single"
+          v-model:selected="selectedPosition"
+          :visible-columns="visibleColumnsPosition"
+        >
+          <template v-slot:body-selection="scope">
+            <q-checkbox
+              keep-color
+              color="primary"
+              dense
+              v-model="scope.selected"
+            />
+          </template>
+        </d-table>
+      </q-card-section>
+      <q-separator />
+      <q-card-actions align="right">
+        <q-btn
+          dense
+          unelevated
+          label="บันทึก"
+          color="public"
+          @click="checkSave"
+          class="q-px-md"
+          ><!-- icon="mdi-content-save-outline"
+        <q-tooltip>บันทึก</q-tooltip> -->
+        </q-btn>
+      </q-card-actions>
+    </q-card>
   </q-dialog>
 </template>
 
@@ -212,7 +247,7 @@ import {
   FormRegistryEmployee,
   ResponseEmployeeTemp,
 } from "@/modules/08_registryEmployee/request/Main.ts";
-import { useDataStore } from "@/stores/data";
+import DialogHeader from "@/modules/04_registry/components/DialogHeader.vue";
 
 const props = defineProps({
   next: {
@@ -227,16 +262,23 @@ const props = defineProps({
 
 const $q = useQuasar();
 const mixin = useCounterMixin(); //เรียกฟังก์ชันกลาง
-const { typeRetire, success, messageError, showLoader, hideLoader, date2Thai } =
-  mixin;
-const dataStore = useDataStore();
-const { loaderPage } = dataStore;
+const {
+  typeRetire,
+  success,
+  messageError,
+  showLoader,
+  hideLoader,
+  date2Thai,
+  dialogMessage,
+} = mixin;
+
 const router = useRouter();
 const myForm = ref<QForm>();
 const filterRef = ref<QInput>();
 const filter = ref<string>("");
 const selected = ref<string>("");
 const modal = ref<boolean>(false);
+const id = ref<string>("");
 const visibleColumnsModal = ref<String[]>(["no", "positionNum", "name"]);
 const columnsModal = [
   { name: "no", align: "left", label: "ลำดับ", field: "no", sortable: true },
@@ -529,10 +571,258 @@ const columns = ref<QTableProps["columns"]>([
   },
 ]);
 const rows = ref<FormRegistryEmployee[]>([]);
+
+const selectedPosition = ref<any[]>([]);
+const visibleColumnsPosition = ref<String[]>([
+  "organizationOrganizationName",
+  "organizationAgencyName",
+  "organizationGovernmentAgencyName",
+  "organizationShortNameName",
+  "organizationTypeName",
+  "organizationLevelName",
+  "positionEmployeeLineName",
+  "positionEmployeePositionName",
+  "posNo",
+]);
+
+const columnsPosition = ref<QTableProps["columns"]>([
+  {
+    name: "organizationOrganizationName",
+    align: "left",
+    label: "หน่วยงาน",
+    sortable: true,
+    field: "organizationOrganizationName",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "organizationAgencyName",
+    align: "left",
+    label: "รหัสหน่วยงาน",
+    sortable: true,
+    field: "organizationAgencyName",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "organizationGovernmentAgencyName",
+    align: "left",
+    label: "รหัสส่วนราชการ",
+    sortable: true,
+    field: "organizationGovernmentAgencyName",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "organizationShortNameName",
+    align: "left",
+    label: "ชื่อย่อหน่วยงาน",
+    sortable: true,
+    field: "organizationShortNameName",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "organizationTypeName",
+    align: "left",
+    label: "ประเภทหน่วยงาน",
+    sortable: true,
+    field: "organizationTypeName",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "organizationLevelName",
+    align: "left",
+    label: "ระดับหน่วยงาน",
+    sortable: true,
+    field: "organizationLevelName",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "positionEmployeeLineName",
+    align: "left",
+    label: "สายงาน",
+    sortable: true,
+    field: "positionEmployeeLineName",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "positionEmployeePositionName",
+    align: "left",
+    label: "ตำแหน่ง",
+    sortable: true,
+    field: "positionEmployeePositionName",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "posNo",
+    align: "left",
+    label: "เลขที่ตำแหน่ง",
+    sortable: true,
+    field: "posNo",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+]);
+const rowsPosition = ref<any>([]);
+
 onMounted(async () => {
   await nodeTree();
 });
 
+const checkNull = (text: string) =>
+  text == null
+    ? ""
+    : text == "00000000-0000-0000-0000-000000000000"
+    ? ""
+    : text;
+
+const getPosition = async (id: string) => {
+  showLoader();
+  await http
+    .get(config.API.organizationEmployeePositionId(id))
+    .then((res) => {
+      const { result } = res.data;
+      let data: any[] = [];
+      result.map((r: any) => {
+        data.push({
+          id: checkNull(r.id),
+          agency: checkNull(r.agency),
+          conditionNote: checkNull(r.conditionNote),
+          department: checkNull(r.department),
+          government: checkNull(r.government),
+          isActive: r.isActive,
+          isCondition: r.isCondition,
+          isDirector: r.isDirector,
+          organizationUserNote: checkNull(r.organizationUserNote),
+          qualification: checkNull(r.qualification),
+          pile: checkNull(r.pile),
+          posNo: checkNull(r.posNo),
+          positionCondition: checkNull(r.positionCondition),
+          positionMasterUserNote: checkNull(r.positionMasterUserNote),
+          organizationOrder: checkNull(r.organizationOrder),
+          organizationFaxId: checkNull(r.organizationFaxId),
+          organizationLevelId: checkNull(r.organizationLevelId),
+          organizationOrganizationId: checkNull(r.organizationOrganizationId),
+          organizationTelExternalId: checkNull(r.organizationTelExternalId),
+          organizationTelInternalId: checkNull(r.organizationTelInternalId),
+          organizationTypeId: checkNull(r.organizationTypeId),
+          positionEmployeeStatusId: checkNull(r.positionEmployeeStatusId),
+          positionEmployeeLineId: checkNull(r.positionEmployeeLineId),
+          positionEmployeePositionId: checkNull(r.positionEmployeePositionId),
+          organizationAgencyId: checkNull(r.organizationAgencyId),
+          organizationGovernmentAgencyId: checkNull(
+            r.organizationGovernmentAgencyId
+          ),
+          organizationShortNameId: checkNull(r.organizationShortNameId),
+          organizationFaxName: checkNull(r.organizationFaxName),
+          organizationLevelName: checkNull(r.organizationLevelName),
+          organizationOrganizationName: checkNull(
+            r.organizationOrganizationName
+          ),
+          organizationTelExternalName: checkNull(r.organizationTelExternalName),
+          organizationTelInternalName: checkNull(r.organizationTelInternalName),
+          organizationTypeName: checkNull(r.organizationTypeName),
+          positionEmployeeStatusName: checkNull(r.positionEmployeeStatusName),
+          positionEmployeeLineName: checkNull(r.positionEmployeeLineName),
+          positionEmployeePositionName: checkNull(
+            r.positionEmployeePositionName
+          ),
+          organizationAgencyName: checkNull(r.organizationAgencyName),
+          organizationGovernmentAgencyName: checkNull(
+            r.organizationGovernmentAgencyName
+          ),
+          organizationShortNameName: checkNull(r.organizationShortNameName),
+          positionEmployeeLevels: r.positionEmployeeLevels,
+          positionEmployeePositionSides: r.positionEmployeePositionSides,
+          use: r.use,
+        });
+      });
+
+      const index = data.findIndex((r: any) => r.use == true);
+      if (index >= 0) {
+        selectedPosition.value = [data[index]];
+      }
+
+      rowsPosition.value = data;
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+};
+
+const checkSave = async () => {
+  if (selectedPosition.value.length == 0) {
+    dialogMessage(
+      $q,
+      "ไม่สามารถบันทึกข้อมูลได้",
+      "กรุณาเลือกตำแหน่ง",
+      "warning",
+      undefined,
+      "orange",
+      undefined,
+      undefined,
+      true
+    );
+    return;
+  } else {
+    await savePosition();
+  }
+};
+
+const savePosition = async () => {
+  showLoader();
+  const data = {
+    organizationEmployeeId: selectedPosition.value[0].id,
+  };
+  await http
+    .put(config.API.organizationEmployeePositionId(id.value), data)
+    .then((res) => {
+      success($q, "บันทึกข้อมูลสำเร็จ");
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(async () => {
+      await nodeTree();
+      modalOpenClose();
+    });
+};
+
+const modalOpenClose = () => {
+  modal.value = !modal.value;
+  if (!modal.value) {
+    selectedPosition.value = [];
+    rowsPosition.value = [];
+    id.value = "";
+  }
+};
+
 const next = (id: string) => {
   router.push(`/registryEmployee/${id}`);
 };
@@ -583,7 +873,10 @@ const clickAdd = () => {
   //   router.push(`/placement/detail`);
 };
 
-const editDetail = (id: string) => {
+const editDetail = async (row: any) => {
+  await getPosition(row.id);
+  console.log(row);
+  id.value = row.id;
   modal.value = true;
 };
 
@@ -598,7 +891,7 @@ const clickDelete = (id: string) => {
     persistent: true,
   })
     .onOk(async () => {
-      loaderPage(true);
+      showLoader();
       await http
         .delete(config.API.profileInforId(id))
         .then((res) => {
@@ -609,7 +902,7 @@ const clickDelete = (id: string) => {
           messageError($q, e);
         })
         .finally(() => {
-          loaderPage(false);
+          hideLoader();
         });
     })
     .onCancel(() => {})
@@ -649,7 +942,7 @@ const showEmployeeTemp = async () => {
   });
 
   if (selected.value == null || selected.value == "") return;
-  loaderPage(true);
+  showLoader();
   await http
     .post(config.API.searchProfileByOcId(selected.value, "all"), {
       criterias: cirteria,
@@ -691,7 +984,7 @@ const showEmployeeTemp = async () => {
       messageError($q, e);
     })
     .finally(() => {
-      loaderPage(false);
+      hideLoader();
     });
 };
 

src/stores/mixin.ts

@@ -312,6 +312,8 @@ export const useCounterMixin = defineStore("mixin", () => {
   }
 
   const messageError = (q: any, e: any = "") => {
+    // q.dialog.hide();
+    console.log("e.response", e.response);
     if (e.response !== undefined) {
       if (e.response.data.status !== undefined) {
         if (e.response.data.status == 401) {

src/views/MainLayout.vue

@@ -68,7 +68,7 @@ const options = ref<optionType[]>([
  * ให้แสดง แทปด้านขวา เมื่อเข้าหน้า รายละเอียดทะเบียนประวัติ
  */
 const tabScroll = () => {
-  return route.name == "registryDetail" || route.name == "registryEmployeeAdd";
+  return route.name == "registryDetail";
 };
 
 /**
@@ -157,10 +157,7 @@ const updateScroll = (position: number) => {
  * ให้แสดง แทปด้านขวา เมื่อเข้าหน้า รายละเอียดทะเบียนประวัติ และ rightActive เท่ากับ true
  */
 const activeBtn = () => {
-  return (
-    (route.name == "registryDetail" || route.name == "registryEmployeeAdd") &&
-    rightActive.value
-  );
+  return route.name == "registryDetail" && rightActive.value;
 };
 
 /**
@@ -225,8 +222,7 @@ const myEventHandler = (e: any, setSCroll: boolean) => {
 const activeMenu = (path: string) => {
   if (path == "dashboard" && route.fullPath == "/") return true;
 
-  if (path == "registry" && route.fullPath.includes("registryEmployee"))
-    return false;
+  if (path == "registry" && route.fullPath == "/") return false;
   const bool = route.fullPath.includes(path);
   return bool;
 };