Merge branch 'develop' into anandadev

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

@@ -455,7 +455,7 @@ const columns = ref<QTableProps["columns"]>([
   {
     name: "registerDate",
     align: "left",
-    label: "วันเและเวลาที่สมัคร",
+    label: "วันและเวลาที่สมัคร",
     sortable: true,
     field: "registerDate",
     headerStyle: "font-size: 14px; min-width: 200px",
@@ -514,7 +514,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/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,

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/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,171 +1,181 @@
-<template>
-	<!-- <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" container 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 v-model="drawer" show-if-above :width="150" :breakpoint="500" class="bg-grey-1" bordered>
-				<q-scroll-area class="fit" :horizontal-thumb-style="{ opacity: 0 }">
-					<q-list class="text-grey-7">
-						<q-item active-class="text-primary bg-teal-1 text-weight-medium" clickable class="q-py-sm" dense
-							v-ripple>
-							<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 active class="q-py-sm" active-class="text-primary bg-teal-1 text-weight-medium"
-							clickable v-ripple>
-							<q-item-section avatar style="min-width: 40px">
-								<q-icon size="18px" name="mdi-file-edit" />
-							</q-item-section>
-
-							<q-item-section>
-								บันทึกผลการทดลองปฏิบัติหน้าที่ราชการ
-							</q-item-section>
-						</q-item>
-
-						<q-item active-class="text-primary bg-teal-1 text-weight-medium" clickable class="q-py-sm" dense
-							v-ripple>
-							<q-item-section avatar style="min-width: 40px">
-								<q-icon size="18px" name="mdi-file-star" />
-							</q-item-section>
-
-							<q-item-section>
-								ประเมินผลการทดลองปฏิบัติหน้าที่ราชการ
-							</q-item-section>
-						</q-item>
-
-						<q-item active-class="text-primary bg-teal-1 text-weight-medium" clickable class="q-py-sm" dense
-							v-ripple>
-							<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-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>
-						<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/FormEvaluation.vue";
+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 tab = ref('save1');
+const activeTab = ref<string>("tab1");
 </script>
+
+<template>
+  <!-- <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"
+      container
+      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
+        v-model="drawer"
+        show-if-above
+        :width="150"
+        :breakpoint="500"
+        class="bg-grey-1"
+        bordered
+      >
+        <q-scroll-area class="fit" :horizontal-thumb-style="{ opacity: 0 }">
+          <q-list class="text-grey-7">
+            <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>
+
+              <q-item-section>
+                บันทึกผล
+              </q-item-section>
+            </q-item>
+
+            <q-item
+              active-class="text-primary bg-teal-1 text-weight-medium"
+              clickable
+              class="q-py-sm"
+              dense
+              v-ripple
+              :active="activeTab == 'tab3'"
+              @click="activeTab = 'tab3'"
+            >
+              <q-item-section avatar style="min-width: 40px">
+                <q-icon size="18px" name="mdi-file-star" />
+              </q-item-section>
+
+              <q-item-section>
+                ประเมินผล
+              </q-item-section>
+            </q-item>
+
+            <q-item
+              active-class="text-primary bg-teal-1 text-weight-medium"
+              clickable
+              class="q-py-sm"
+              dense
+              v-ripple
+              :active="activeTab == '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-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>
+
 <style lang="scss" scope>
 .btn-absolute {
-	z-index: 50;
-	position: absolute;
-	left: 200px;
-	top: 10px;
+  z-index: 50;
+  position: absolute;
+  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;
+  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,274 +1,302 @@
 <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/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-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",
-	descending: false,
-	page: 1,
-	rowsPerPage: 10,
+  sortBy: "desc",
+  descending: false,
+  page: 1,
+  rowsPerPage: 10,
 });
 
 const visibleColumns = ref<string[]>([
-	"no",
-	"startDate",
-	"endDete",
-	"intendant",
-	"commander",
+  "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",
-	}
+  {
+    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: "25 ต.ค. 2566",
-		endDete: "24 ม.ค. 2567",
-		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/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

@@ -21,7 +21,7 @@ const detailOrderReplace = () =>
     "@/modules/05_placement/components/OrderPlacement/detailOrderPlacement.vue"
   );
 
-  // ระบบทดลองงาน
+// ระบบทดลองงาน
 const mainProbation = () =>
   import("@/modules/05_placement/components/probation/MainProbation.vue");
 
@@ -33,127 +33,178 @@ const probationFormEvaluation = () =>
 
 const probationWorkAdd = () =>
   import("@/modules/05_placement/components/probation/MainDetail.vue");
-  const probationFormAssign = () =>
-    import("@/modules/05_placement/components/probation/FormAssign.vue");
-  export default [
-    {
-      path: "/placement",
-      name: "placement",
-      component: PlacementMain,
-      meta: {
-        Auth: true,
-        Key: [6.1],
-        Role: "placement",
-      },
+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",
+    name: "placement",
+    component: PlacementMain,
+    meta: {
+      Auth: true,
+      Key: [6.1],
+      Role: "placement",
     },
-    {
-      path: "/placement/personal-list/:examId",
-      name: "placementDetail",
-      component: PlacementDetail,
-      meta: {
-        Auth: true,
-        Key: [6.1],
-        Role: "placement",
-      },
+  },
+  {
+    path: "/placement/personal-list/:examId",
+    name: "placementDetail",
+    component: PlacementDetail,
+    meta: {
+      Auth: true,
+      Key: [6.1],
+      Role: "placement",
     },
-    {
-      path: "/placement/personal-detail/:personalId",
-      name: "PlacementPersonalDetail",
-      component: PlacementPersonalDetail,
-      meta: {
-        Auth: true,
-        Key: [6.1],
-        Role: "placement",
-      },
+  },
+  {
+    path: "/placement/personal-detail/:personalId",
+    name: "PlacementPersonalDetail",
+    component: PlacementPersonalDetail,
+    meta: {
+      Auth: true,
+      Key: [6.1],
+      Role: "placement",
     },
-    {
-      path: "/placement/order",
-      name: "Orderplacement",
-      component: MainOrderPlacement,
-      meta: {
-        Auth: true,
-        Key: [6.2],
-        Role: "placement",
-      },
+  },
+  {
+    path: "/placement/order",
+    name: "Orderplacement",
+    component: MainOrderPlacement,
+    meta: {
+      Auth: true,
+      Key: [6.2],
+      Role: "placement",
     },
-    {
-      path: "/placement/order/detail",
-      name: "OrderplacementDetail",
-      component: detailOrderReplace,
-      meta: {
-        Auth: true,
-        Key: [6.2],
-        Role: "placement",
-      },
+  },
+  {
+    path: "/placement/order/detail",
+    name: "OrderplacementDetail",
+    component: detailOrderReplace,
+    meta: {
+      Auth: true,
+      Key: [6.2],
+      Role: "placement",
     },
-    {
-      path: "/placement/addOrderPlacement",
-      name: "addOrderPlacement",
-      component: addOrderPlacement,
-      meta: {
-        Auth: true,
-        Key: [6.2],
-        Role: "placement",
-      },
+  },
+  {
+    path: "/placement/addOrderPlacement",
+    name: "addOrderPlacement",
+    component: addOrderPlacement,
+    meta: {
+      Auth: true,
+      Key: [6.2],
+      Role: "placement",
     },
-    {
-      path: "/probation",
-      name: "probation",
-      component: mainProbation,
-      meta: {
-        Auth: true,
-        Key: [6.3],
-        Role: "placement",
-      },
+  },
+  {
+    path: "/probation",
+    name: "probation",
+    component: mainProbation,
+    meta: {
+      Auth: true,
+      Key: [6.3],
+      Role: "placement",
     },
-    {
-      path: "/probation/detail/:id",
-      name: "probationDetail",
-      component: probationDetail,
-      meta: {
-        Auth: true,
-        Key: [6.3],
-        Role: "placement",
-      },
+  },
+  {
+    path: "/probation/detail/:id",
+    name: "probationDetail",
+    component: probationDetail,
+    meta: {
+      Auth: true,
+      Key: [6.3],
+      Role: "placement",
     },
-    {
-      path: "/probation/form",
-      name: "probationForm",
-      component: probationFormEvaluation,
-      meta: {
-        Auth: true,
-        Key: [6.3],
-        Role: "placement",
-      },
+  },
+  {
+    path: "/probation/detail/:id/:form",
+    name: "probationForm",
+    component: probationFormEvaluation,
+    meta: {
+      Auth: true,
+      Key: [6.3],
+      Role: "placement",
     },
-    {
-      path: "/probation/work/add",
-      name: "probationWorkAdd",
-      component: probationWorkAdd,
-      meta: {
-        Auth: true,
-        Key: [6.3],
-        Role: "placement",
-      },
+  },
+  {
+    path: "/probation/work/add",
+    name: "probationWorkAdd",
+    component: probationWorkAdd,
+    meta: {
+      Auth: true,
+      Key: [6.3],
+      Role: "placement",
     },
-    {
-      path: "/probation/work/:id",
-      name: "probationWork",
-      component: probationWorkAdd,
-      meta: {
-        Auth: true,
-        Key: [6.3],
-        Role: "placement",
-      },
+  },
+  {
+    path: "/probation/work/:id",
+    name: "probationWork",
+    component: probationWorkAdd,
+    meta: {
+      Auth: true,
+      Key: [6.3],
+      Role: "placement",
     },
-    {
-      path: "/probation/add",
-      name: "probationWorkAdd",
-      component: probationFormAssign,
-      meta: {
-        Auth: true,
-        Key: [6.3],
-        Role: "placement",
-      },
+  },
+  {
+    path: "/probation/add",
+    name: "probationWorkAdd",
+    component: probationFormAssign,
+    meta: {
+      Auth: true,
+      Key: [6.3],
+      Role: "placement",
     },
-  ];
+  },
+  {
+    path: "/transfer",
+    name: "transfer",
+    component: transfer,
+    meta: {
+      Auth: true,
+      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/DismissOrder.vue

@@ -485,7 +485,7 @@ const OriginalDataFetch = async () => {
 
 // ดูรายการหน้าต่อไป
 const redirectToPage = (id?: number) => {
-  router.push(`/retirement/dismiss-order/add`);
+  router.push(`/dismiss-order/add`);
 };
 
 const clickDelete = (id: string) => {

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

@@ -4,12 +4,28 @@ 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 { messageError, success } = 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"]>([
   {
@@ -41,10 +57,10 @@ const columns = ref<any["columns"]>([
     align: "left",
   },
   {
-    name: "affiliation",
+    name: "organizationOrganization",
     required: true,
     label: "สังกัด",
-    field: "affiliation",
+    field: "organizationOrganization",
     align: "left",
   },
   {
@@ -56,66 +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>("");
 watch(modal, () => {
+  // console.log(props);
+
   if (modal.value === true) {
-    fecthProfile();
+    retireld.value = props.retireld;
+    if (type_params === "officer") {
+      type.value = type_params;
+    } else type.value = "all";
+
+    fecthlistRetire();
   }
 });
-const fecthProfile = async () => {
+const updateListData = (retireld: string, pId: string) => {
+    props.UpdateListId(retireld, pId);
+};
+const fecthlistRetire = async () => {
+  showLoader();
   await http
-    .get(config.API.getprofileRetire("1234"))
+    .get(config.API.profileOrganizRoot)
     .then((res) => {
-      console.log(res);
+      const id = res.data.result[0].id;
+      // console.log(id);
+      if (id !== "") {
+        findlist(id);
+      }
     })
     .catch((e) => {
       messageError($q, e);
     });
 };
-const clickAdd = () => {
+
+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: "ต้องการเพิ่มข้อมูลนี้ใช่หรือไม่?",
@@ -126,17 +201,19 @@ const clickAdd = () => {
     persistent: true,
   })
     .onOk(async () => {
-      console.log("เพิ่มข้อมูล");
+      // console.log("เพิ่มข้อมูล");
       await http
-        .put(config.API.profileRetire("123"))
-        .then(() => {
+        .put(config.API.profileRetire(retireld.value), { profileId: data })
+        .then((res) => {
           success($q, "เพิ่มข้อมูลสำเร็จ");
+          updateListData(retireld.value, data);
         })
         .catch((e) => {
           messageError($q, e);
         })
         .finally(() => {
-          fecthProfile();
+          // fecthlistRetire();
+          modal.value = false;
         });
     })
     .onCancel(() => {})
@@ -224,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>
@@ -231,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

@@ -11,21 +11,72 @@ const route = useRoute();
 const $q = useQuasar(); //ใช้ noti quasar
 const mixin = useCounterMixin();
 const { showLoader, hideLoader, messageError, success } = mixin;
-const no = route.params.id;
+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(no);
-  fecthlist();
-  console.log(visibleNote.value);
+  // console.log(route.params);
+  if (retireld_params === undefined) {
+    fecthlistprofile(type_params, year_params);
+  } else {
+    fecthlist(retireld_params);
+  }
 });
-const fecthlist = async () => {
+
+const fecthlistprofile = async (type: any, year: any) => {
   showLoader();
   await http
-    .get(config.API.profile("emplayee", 2023))
+    .get(config.API.profile(type, year))
     .then((res: any) => {
-      console.log(res);
+      // 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);
@@ -36,10 +87,10 @@ const fecthlist = async () => {
 };
 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",
@@ -61,10 +112,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",
   },
@@ -78,11 +129,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",
   },
@@ -144,49 +195,50 @@ 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",
@@ -198,7 +250,7 @@ const visibleColumns = ref<any>([
 const filter = ref<string>("");
 
 const clickDelete = (prop: any) => {
-  console.log(prop);
+  // console.log(prop.id);
   $q.dialog({
     title: "ยืนยันการลบข้อมูล",
     message: "ต้องการลบข้อมูลนี้ใช่หรือไม่?",
@@ -210,7 +262,7 @@ const clickDelete = (prop: any) => {
   })
     .onOk(async () => {
       await http
-        .delete(config.API.profileRetire("123"))
+        .delete(config.API.profileRetire(prop.id))
         .then(() => {
           success($q, "ลบข้อมูลสำเร็จ");
         })
@@ -218,7 +270,9 @@ const clickDelete = (prop: any) => {
           messageError($q, e);
         })
         .finally(() => {
-          fecthlist();
+          if (retireld_params === undefined) {
+            fecthlistprofile(type_params, year_params);
+          } else fecthlist(retireld_params);
         });
     })
     .onCancel(() => {})
@@ -227,26 +281,20 @@ const clickDelete = (prop: any) => {
 const backHistory = () => {
   window.history.back();
 };
-watch(modalNote, () => {
-  if (modalNote.value === true) {
-    fetchReason();
-  }
-});
-const fetchReason = async () => {
+const fetchReason = async (val: string) => {
   await http
-    .get(config.API.reasonId("123"))
+    .get(config.API.reasonId(val))
     .then((res: any) => {
-      console.log(res);
+      // console.log(res.data.result);
+
+      note.value = res.data.result.reason;
+      retireProfileId.value = res.data.result.id;
     })
     .catch((e: any) => {
       messageError($q, e);
-    })
-    .finally(() => {
-      hideLoader();
     });
 };
 const saveNote = () => {
-  console.log(note.value);
   $q.dialog({
     title: "ยืนยันการบันทึกข้อมูลข้อมูล",
     message: "ต้องการบันทึกข้อมูลนี้ใช่หรือไม่?",
@@ -257,17 +305,21 @@ const saveNote = () => {
     persistent: true,
   })
     .onOk(async () => {
-      console.log("บันทึกข้อมูล");
+      // console.log("บันทึกข้อมูล");
       await http
-        .post(config.API.createnote(), note.value)
+        .post(config.API.createnote(), {
+          retireProfileId: retireProfileId.value,
+          reason: note.value,
+        })
         .then(() => {
-          success($q, "บันทึกข้อมูล");
+          success($q, "บันทึกข้อมูลสำเร็จ");
         })
         .catch((e) => {
           messageError($q, e);
         })
         .finally(() => {
-          fecthlist();
+          fecthlist(retireld_params);
+          modalNote.value = false;
         });
     })
     .onCancel(() => {})
@@ -278,6 +330,56 @@ const visibleNote = computed(() => {
     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>
@@ -297,10 +399,14 @@ const visibleNote = computed(() => {
   <div>
     <q-card class="col-12 q-pa-md">
       <q-toolbar>
-        <AddList />
-        <q-btn flat round color="blue-12" icon="save">
+        <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> -->
         <q-btn color="primary" flat round icon="download">
           <q-menu>
             <q-list style="min-width: 100px">
@@ -366,10 +472,11 @@ const visibleNote = computed(() => {
           :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">
@@ -384,16 +491,22 @@ const visibleNote = computed(() => {
             </q-tr>
           </template>
           <template v-slot:body="props">
-            <q-tr :props="props" class="cursor-pointer">
-              <q-td>{{ props.rowIndex + 1 }}</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.name }}</q-td>
-              <q-td key="brand" :props="props">{{ props.row.brand }}</q-td>
+              <q-td 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
@@ -416,8 +529,10 @@ const visibleNote = computed(() => {
                   class="text-teal-5"
                   icon="mdi-note"
                   size="md"
-                  v-if="no !== undefined"
-                  @click="(modalNote = true), (note = '')"
+                  v-if="retireld_params !== undefined"
+                  @click="
+                    fetchReason(props.row.id), (modalNote = true), (note = '')
+                  "
                 >
                   <q-tooltip>โน้ต</q-tooltip></q-btn
                 >
@@ -435,6 +550,17 @@ const visibleNote = computed(() => {
               </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>

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

@@ -2,7 +2,7 @@
 import { ref } from "vue";
 import type { QTableProps } from "quasar";
 import { useRouter } from "vue-router";
-const router = useRouter();
+// const router = useRouter();
 const pagination = ref({
     sortBy: "desc",
     descending: false,
@@ -187,7 +187,7 @@ const columns = ref<QTableProps["columns"]>([
               </q-tr>
             </template>
             <template v-slot:body="props">
-              <q-tr :props="props" class="cursor-pointer" @click=" router.push(`/retirement/resign/${props.rowIndex + 1}`)">
+              <q-tr :props="props" class="cursor-pointer">
                 <!-- <q-td key="no" :props="props">
                   {{ props.rowIndex + 1 }}
                 </q-td> -->

src/modules/06_retirement/router.ts

@@ -22,8 +22,8 @@ export default [
     },
   },
   {
-    path: "/retirement/list",
-    name: "retirement/list",
+    path: "/retirement/list/:type/:year",
+    name: "retirement/list/",
     component: Listretirement,
     meta: {
       Auth: true,
@@ -32,8 +32,8 @@ export default [
     },
   },
   {
-    path: "/retirement/list/:id",
-    name: "retirement/list/id",
+    path: "/retirement/listretire/:id/:type",
+    name: "retirement/list/id/type",
     component: Listretirement,
     meta: {
       Auth: true,
@@ -92,7 +92,7 @@ export default [
     },
   },
   {
-    path: "retirement/dismiss-order/add",
+    path: "/dismiss-order/add",
     name: "dismiss-order-add",
     component: addOrder,
     meta: {

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

@@ -13,8 +13,12 @@
         indicator-color="primary"
         align="left"
       >
-        <q-tab name="samun" label="ขรก.กทม.สามัญ" @click="get('officer')"/>
-        <q-tab name="employee" label="ลูกจ้างประจำ" @click="get('employee')"/>
+        <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">
@@ -138,7 +141,7 @@
                   {{ props.row.Date }}
                 </q-td>
                 <q-td key="retireNumber" :props="props">
-                  {{ props.row.retireNumber }}
+                  {{ props.row.total }}
                 </q-td>
                 <!-- <q-td auto-width>
                   <q-btn
@@ -175,7 +178,7 @@
 </template>
 
 <script setup lang="ts">
-import { onMounted, ref, useAttrs } from "vue";
+import { onMounted, ref, useAttrs, reactive, watch } from "vue";
 import type { QTableProps } from "quasar";
 import type {
   FormMainProbation,
@@ -185,11 +188,12 @@ 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'
+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 mixin = useCounterMixin();
+const { messageError, date2Thai, showLoader, hideLoader } = mixin;
 const router = useRouter();
 const $q = useQuasar(); //ใช้ noti quasar
 const modal = ref<boolean>(false);
@@ -200,6 +204,7 @@ const pagination = ref({
   rowsPerPage: 10,
 });
 
+const type = ref<string>("officer");
 const visibleColumns = ref<string[]>(["no", "Date", "retireNumber"]); //ค้นหา คอลัมน์ คอลัมน์ที่แสดง
 
 // หัวตาราง
@@ -234,35 +239,41 @@ const columns = ref<QTableProps["columns"]>([
 ]);
 
 // ข้อมูลตาราง (จำลอง)
+const currentYear = new Date().getFullYear();
 const rows = ref<resMain[]>([]);
-const tab = ref<any>("samun");
+const tab = ref<any>("officer");
 const visibleColumns2 = ref<string[]>(["no", "name", "retireNumber"]);
-const get = async(type:string) =>{
-
+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))
-  .then((res)=>{
-    let data = res.data.result
-    console.log(data)
-     rows.value = data.map((items:resMain) =>({
-      id:items.id,
-      Date:date2Thai(items.createdAt),
-      year:items.year,
-      retireNumber:items.round,
-      total:items.total
-    }))
-    
-  }).catch((e) => {
-      messageError($q, e);
-    })
-    .finally(() => {
-      hideLoader()
-    });
+    .get(config.API.retirement(type, year))
+    .then((res) => {
+      // console.log(res);
 
-}
-onMounted(()=>{
-  get
-})
+      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"]>([
   {
@@ -288,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",
   },
@@ -333,34 +344,49 @@ 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: "ต้องการเพิ่มข้อมูลประกาศเกษียณใช่หรือไม่?",
     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");
 };
 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);
@@ -383,9 +409,15 @@ const paginationLabel = (start: string, end: string, total: string) => {
   if (paging.value == true) return " " + start + "-" + end + " ใน " + total;
   else return start + "-" + end + " ใน " + total;
 };
-const nextPage = (val: any) => {
-  router.push(`/retirement/list/${val.no}`);
+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>