diff --git a/src/interface/request/main/main.ts b/src/interface/request/main/main.ts
index a37a5b0ad..9b9501dbe 100644
--- a/src/interface/request/main/main.ts
+++ b/src/interface/request/main/main.ts
@@ -206,6 +206,7 @@ const menuList = readonly<any[]>([
       },
     ],
   },
+
   {
     key: 7,
     icon: "mdi-account-cancel-outline",
@@ -213,6 +214,44 @@ const menuList = readonly<any[]>([
     label: "พ้นจากราชการ",
     path: "retirement",
     role: "retirement",
+    children: [
+      {
+        key: 7.1,
+        label: "ประกาศเกษียณ",
+        path: "retirement",
+        role: "retirement",
+      },
+      {
+        key: 7.2,
+        label: "ลาออก",
+        path: "resign",
+        role: "retirement",
+      },
+      {
+        key: 7.3,
+        label: "คำสั่งลาออก",
+        path: "resign-order",
+        role: "retirement",
+      },
+      {
+        key: 7.4,
+        label: "Exit interviwe",
+        // path: "",
+        role: "retirement",
+      },
+      {
+        key: 7.5,
+        label: "ถึงแก่กรรม",
+        path: "deceased",
+        role: "retirement",
+      },
+      {
+        key: 7.6,
+        label: "คำสั่งให้ออก ปลดออก ไล่ออก",
+        path: "dismiss-order",
+        role: "retirement",
+      },
+    ],
   },
   {
     key: 8,
diff --git a/src/modules/04_registry/components/Profile.vue b/src/modules/04_registry/components/Profile.vue
index ade292c48..5fa28e74f 100644
--- a/src/modules/04_registry/components/Profile.vue
+++ b/src/modules/04_registry/components/Profile.vue
@@ -153,6 +153,42 @@
           </div>
         </div>
         <q-space />
+
+        <q-btn round flat color="pink-5" icon="mdi-file-eye-outline">
+          <q-tooltip>{{
+            reasonStatus ? "การกลับเข้ารับราชการ" : "การออกจากราชการ"
+          }}</q-tooltip>
+
+          <q-menu transition-show="jump-down" transition-hide="jump-up">
+            <q-list dense style="min-width: 160px">
+              <q-item clickable v-close-popup @click="clickPassaway">
+                <q-item-section style="min-width: 0px" avatar class="q-py-sm">
+                </q-item-section>
+                <q-item-section>ถึงแก่กรรม</q-item-section>
+              </q-item>
+              <q-separator />
+              <q-item clickable v-close-popup @click="clickaddOrder">
+                <q-item-section style="min-width: 0px" avatar class="q-py-sm">
+                </q-item-section>
+                <q-item-section>ให้ออกจากราชการ</q-item-section>
+              </q-item>
+              <q-separator />
+              <q-item clickable v-close-popup @click="clickaddOrder">
+                <q-item-section style="min-width: 0px" avatar class="q-py-sm">
+                </q-item-section>
+                <q-item-section>ปลดออกจากราชการ</q-item-section>
+              </q-item>
+              <q-separator />
+              <q-item clickable v-close-popup @click="clickaddOrder">
+                <q-item-section style="min-width: 0px" avatar class="q-py-sm">
+                </q-item-section>
+                <q-item-section>ไล่ออกจากราชการ</q-item-section>
+              </q-item>
+              <q-separator />
+            </q-list>
+          </q-menu>
+        </q-btn>
+
         <q-btn
           round
           flat
@@ -349,6 +385,41 @@
       </q-card-actions>
     </q-card>
   </q-dialog>
+  <!-- Dialog แนบใบมรณบัตร -->
+  <q-dialog v-model="dialogPassaway" persistent>
+    <q-card style="width: 100vw; max-width: 60vw">
+      <q-card-section class="q-py-sm row">
+        <div class="text-h6">แนบใบมรณบัตร</div>
+        <q-space />
+        <q-btn
+          icon="close"
+          unelevated
+          round
+          dense
+          @click="closePassaway"
+          style="color: #ff8080; background-color: #ffdede"
+        >
+          <q-tooltip>ปิดหน้านี้</q-tooltip>
+        </q-btn>
+      </q-card-section>
+      <q-separator />
+      <q-card-actions align="right">
+        <q-file
+          class="col-xs-12 col-sm-12"
+          outlined
+          dense
+          v-model="filePassaway"
+          label="แนบใบมรณบัตร"
+          hide-bottom-space
+          lazy-rules
+        >
+          <template v-slot:prepend>
+            <q-icon name="attach_file" />
+          </template>
+        </q-file>
+      </q-card-actions>
+    </q-card>
+  </q-dialog>
   <!-- Dialog เลือก เกษียณ -->
   <q-dialog v-model="dialogLeave" persistent>
     <q-card style="width: 600px">
@@ -559,9 +630,11 @@ const dialog = ref<boolean>(false);
 const dialogShort = ref<boolean>(false);
 const dialogLeave = ref<boolean>(false);
 const dialogImage = ref<boolean>(false);
+const dialogPassaway = ref<boolean>(false);
 const loader = ref<boolean>(false); //รอโหลด
 const statusEdit = ref<boolean>(false);
 const activeImage = ref<any | null>(null);
+const filePassaway = ref(null);
 const images = ref<any>([]);
 const profileId = ref<string>(route.params.id.toString());
 const profileType = ref<string>("");
@@ -806,6 +879,10 @@ const closeImage = () => {
   dialogImage.value = false;
 };
 
+const closePassaway = () => {
+  dialogPassaway.value = false;
+};
+
 const closeLeave = () => {
   dialogLeave.value = false;
 };
@@ -818,6 +895,10 @@ const closeKp7Short = () => {
   dialogShort.value = false;
 };
 
+const clickaddOrder = () => {
+  router.push({ name: "addOrder" });
+};
+
 const downloadKP7 = () => {};
 
 const downloadKP7Short = () => {};
@@ -896,6 +977,10 @@ const clickRetire = async () => {
   }
 };
 
+const clickPassaway = async () => {
+  dialogPassaway.value = true;
+};
+
 const Retire = async () => {
   if (reasonStatus.value == true) {
     loaderPage(true);
diff --git a/src/modules/04_registry/router.ts b/src/modules/04_registry/router.ts
index 7f78516ff..18571351a 100644
--- a/src/modules/04_registry/router.ts
+++ b/src/modules/04_registry/router.ts
@@ -4,6 +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"
+  );
 
 export default [
   {
@@ -26,4 +30,14 @@ export default [
       Role: "registry",
     },
   },
+  {
+    path: "/dismiss-order/add",
+    name: "addOrder",
+    component: addOrder,
+    meta: {
+      Auth: true,
+      Key: [7],
+      Role: "registry",
+    },
+  },
 ];
diff --git a/src/modules/05_placement/components/OrderPlacement/ResignOrder.vue b/src/modules/05_placement/components/OrderPlacement/ResignOrder.vue
new file mode 100644
index 000000000..d4ac841a2
--- /dev/null
+++ b/src/modules/05_placement/components/OrderPlacement/ResignOrder.vue
@@ -0,0 +1,791 @@
+<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"
+            />
+            <div>
+              <q-btn
+                size="12px"
+                flat
+                round
+                color="add"
+                icon="mdi-plus"
+                @click="clickAdd"
+              >
+                <q-tooltip>เพิ่มข้อมูล</q-tooltip>
+                <!-- <q-menu>
+                  <q-list style="min-width: 100px">
+                    <q-item clickable @click="clickAdd">
+                      <q-item-section>ลายเซ็นชื่อ (ออฟไลน์)</q-item-section>
+                    </q-item>
+                    <q-item clickable v-close-popup disable>
+                      <q-item-section
+                        >ลายเซ็นอิเล็กทรอนิกส์ (ออนไลน์)</q-item-section
+                      >
+                    </q-item>
+                  </q-list>
+                </q-menu> -->
+              </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-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">
+                  <q-td
+                    key="Order"
+                    :props="props"
+                    @click="redirectToPage(props.row.Order)"
+                  >
+                    {{ props.row.Order }}
+                  </q-td>
+                  <q-td
+                    key="OrderNum"
+                    :props="props"
+                    @click="redirectToPage(props.row.Order)"
+                  >
+                    {{ props.row.OrderNum }}
+                  </q-td>
+                  <q-td
+                    key="OrderType"
+                    :props="props"
+                    @click="redirectToPage(props.row.OrderType)"
+                  >
+                    {{ props.row.OrderType }}
+                  </q-td>
+                  <q-td
+                    key="OrderDate"
+                    :props="props"
+                    @click="redirectToPage(props.row.Order)"
+                  >
+                    {{ props.row.OrderDate }}
+                  </q-td>
+                  <q-td
+                    key="OrderBy"
+                    :props="props"
+                    @click="redirectToPage(props.row.Order)"
+                  >
+                    {{ props.row.OrderBy }}
+                  </q-td>
+                  <q-td
+                    key="Signer"
+                    :props="props"
+                    @click="redirectToPage(props.row.Order)"
+                  >
+                    {{ props.row.Signer }}
+                  </q-td>
+                  <q-td
+                    key="OrderStatus"
+                    :props="props"
+                    @click="redirectToPage(props.row.Order)"
+                  >
+                    {{ props.row.OrderStatus }}
+                  </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>
+              <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({ name: "placementDetail" });
+    router.push(`/placement/order/detail`);
+  };
+  
+  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>
+  
\ No newline at end of file
diff --git a/src/modules/05_placement/components/PersonalList/OrgTree.vue b/src/modules/05_placement/components/PersonalList/OrgTree.vue
index 5d2f99365..5cca4ecb9 100644
--- a/src/modules/05_placement/components/PersonalList/OrgTree.vue
+++ b/src/modules/05_placement/components/PersonalList/OrgTree.vue
@@ -58,6 +58,7 @@ const fetchPublishFile = async () => {
 // โหลดข้อมูลโครงสร้างจาก json
 const treeData = ref<Array<any>>([]);
 const loadTreeData = async () => {
+  expanded.value = [];
   await http
     .get(`${config.s3ClusterUrl}${selectedFile.value}`)
     .then((res: any) => {
@@ -126,20 +127,20 @@ const myFilterMethod = (node: any, filter: string) => {
     // ((node.name && node.name == null) || !node.name) &&
     (node.name && node.name.indexOf(filt) > -1) ||
     (node.organizationName && node.organizationName.indexOf(filt) > -1) ||
-      (node.positionNum && node.positionNum.indexOf(filt) > -1) ||
-      (node.positionName && node.positionName.indexOf(filt) > -1) ||
-      (node.governmentCode &&
-        node.governmentCode.toString().indexOf(filt) > -1) ||
-      (node.agency && node.agency.indexOf(filt) > -1) ||
-      (node.government && node.government.indexOf(filt) > -1) ||
-      (node.department && node.department.indexOf(filt) > -1) ||
-      (node.pile && node.pile.indexOf(filt) > -1) ||
-      (node.organizationShortName &&
-        node.organizationShortName.indexOf(filt) > -1) ||
-      (node.positionSideName && node.positionSideName.indexOf(filt) > -1) ||
-      (node.executivePosition && node.executivePosition.indexOf(filt) > -1) ||
-      (node.executivePositionSide &&
-        node.executivePositionSide.indexOf(filt) > -1) ||
+    (node.positionNum && node.positionNum.indexOf(filt) > -1) ||
+    (node.positionName && node.positionName.indexOf(filt) > -1) ||
+    (node.governmentCode &&
+      node.governmentCode.toString().indexOf(filt) > -1) ||
+    (node.agency && node.agency.indexOf(filt) > -1) ||
+    (node.government && node.government.indexOf(filt) > -1) ||
+    (node.department && node.department.indexOf(filt) > -1) ||
+    (node.pile && node.pile.indexOf(filt) > -1) ||
+    (node.organizationShortName &&
+      node.organizationShortName.indexOf(filt) > -1) ||
+    (node.positionSideName && node.positionSideName.indexOf(filt) > -1) ||
+    (node.executivePosition && node.executivePosition.indexOf(filt) > -1) ||
+    (node.executivePositionSide &&
+      node.executivePositionSide.indexOf(filt) > -1) ||
     (node.positionLevel && node.positionLevel.indexOf(filt) > -1)
   );
 };
@@ -361,8 +362,10 @@ const checkPosition = (val: string) => {
   return num;
 };
 const personal = ref<any>();
+const expanded = ref<string[]>([]);
 
 watch(props, () => {
+  expanded.value = [];
   const dataPersonal = props.personal;
   if (dataPersonal) {
     dataPersonal.map((data: any) => {
@@ -370,29 +373,39 @@ watch(props, () => {
     });
     console.log("personal", personal.value);
   }
-
   // console.log("draft===>", personal.value.draft);
-
-  if (personal.value.draft === true) {
+  
+  if (personal.value && personal.value.draft === false) {
     // const findData = dataRespone.value.find(findByPerson);
     let findData: any = null;
+    console.log(dataRespone.value);
+
     dataRespone.value.map((x: any) => {
       findData = findByPerson(x);
       if (findData != null) {
         console.log("findData===>", findData);
-        selectedPosition(findData)
+        selectedPosition(findData);
+        for (let i = 3; i <= findData.keyId.length; i += 2) {
+          expanded.value.push(findData.keyId.slice(0, i));
+        }
       }
-    })
+    });
     // loadTreeData();
     // selectedPosition(findData.children.children.children)
   }
 });
 
-function findByPerson(element: any) {
+function findByPerson(element: any): any {
   // console.log("searchTree element===>", element)
-  if (element.positionNumId && element.positionLineId === personal.value.positionLineId &&
+  if (
+    element.positionNumId &&
+    element.positionLineId === personal.value.positionLineId &&
     element.positionTypeId === personal.value.positionTypeId &&
-    element.positionNumId === personal.value.posNoId
+    element.positionNumId === personal.value.posNoId &&
+    (element.positionLevelObj === null ||
+      element.positionLevelObj[0].Id === personal.value.positionLevelId) &&
+    (element.positionSideNameObj === null ||
+      element.positionSideNameObj[0].Id === personal.value.positionPathSideId)
   ) {
     return element;
   } else if (element.children) {
@@ -408,153 +421,156 @@ function findByPerson(element: any) {
 </script>
 
 <template>
-                                                        <q-dialog v-model="props.modal" persistent>
-                                                                          <q-card style="width: 900px; max-width: 80vw">
-                                                                        <q-form ref="myFormPosition">
-                                                                          <DialogHeader title="เลือกหน่วยงานที่รับบรรจุ" :close="closeModal" />
-                                                                          <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-7 row">
-                                                                                <q-card flat bordered class="fit q-pa-sm">
-                                                                                  <q-scroll-area visible style="height: 70vh">
-                                                                                    <q-input
-                                                                                      outlined
-                                                                                      dense
-                                                                                      ref="filterRef"
-                                                                                      v-model="search"
-                                                                                      placeholder="ค้นหา"
-                                                                                      class="q-mb-sm"
-                                                                                    >
-                                                                                      <template v-slot:append>
-                                                                                        <q-icon name="mdi-magnify" />
-                                                                                      </template>
-                                                                                    </q-input>
-                                                                                    <div class="q-pa-sm q-gutter-sm">
-                                                                                      <q-tree
-                                                                                        no-transition
-                                                                                        dense
-                                                                                        :nodes="treeData"
-                                                                                        node-key="keyId"
-                                                                                        :filter="search"
-                                                                                        :no-results-label="notFound"
-                                                                                        :no-nodes-label="noData"
-                                                                                        :filter-method="myFilterMethod"
-                                                                                      >
-                                                                                        <template v-slot:header-organization="prop">
-                                                                                          <div class="col">
-                                                                                            <div
-                                                                                              class="row items-center q-px-xs q-pt-xs q-gutter-sm"
-                                                                                            >
-                                                                                              <!--แสดงชื่อแผนก พิมพ์ตัวหนา คลิกแล้วกาง/หุบ Tree-->
-                                                                                              <div class="text-weight-medium">
-                                                                                                {{ prop.node.organizationName }}
-                                                                                              </div>
+  <q-dialog v-model="props.modal" persistent>
+    <q-card style="width: 900px; max-width: 80vw">
+      <q-form ref="myFormPosition">
+        <DialogHeader title="เลือกหน่วยงานที่รับบรรจุ" :close="closeModal" />
+        <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-7 row">
+              <q-card flat bordered class="fit q-pa-sm">
+                <q-scroll-area visible style="height: 70vh">
+                  <q-input
+                    outlined
+                    dense
+                    ref="filterRef"
+                    v-model="search"
+                    placeholder="ค้นหา"
+                    class="q-mb-sm"
+                  >
+                    <template v-slot:append>
+                      <q-icon name="mdi-magnify" />
+                    </template>
+                  </q-input>
+                  <div class="q-pa-sm q-gutter-sm">
+                    <q-tree
+                      no-transition
+                      dense
+                      :nodes="treeData"
+                      node-key="keyId"
+                      :filter="search"
+                      :no-results-label="notFound"
+                      :no-nodes-label="noData"
+                      :filter-method="myFilterMethod"
+                      v-model:expanded="expanded"
+                    >
+                      <template v-slot:header-organization="prop">
+                        <div class="col">
+                          <div
+                            class="row items-center q-px-xs q-pt-xs q-gutter-sm"
+                          >
+                            <!--แสดงชื่อแผนก พิมพ์ตัวหนา คลิกแล้วกาง/หุบ Tree-->
+                            <div class="text-weight-medium">
+                              {{ prop.node.organizationName }}
+                            </div>
 
-                                                                                              <!--แสดง Total Count PositionNum-->
-                                                                                              <!-- <q-badge rounded color="grey-2" text-color="dark"
+                            <!--แสดง Total Count PositionNum-->
+                            <!-- <q-badge rounded color="grey-2" text-color="dark"
                                                             :label="prop.node.totalPositionCount" /> -->
-                                                                                              <q-badge
-                                                                                                v-if="prop.node.totalPositionVacant > 0"
-                                                                                                rounded
-                                                                                                color="red"
-                                                                                                outline
-                                                                                                :label="prop.node.totalPositionVacant"
-                                                                                              />
+                            <q-badge
+                              v-if="prop.node.totalPositionVacant > 0"
+                              rounded
+                              color="red"
+                              outline
+                              :label="prop.node.totalPositionVacant"
+                            />
 
-                                                                                              <q-space />
-                                                                                            </div>
-                                                                                            <div class="col items-center q-px-xs q-pt-xs">
-                                                                                              <div class="text-weight-medium text-grey-7">
-                                                                                                {{ prop.node.governmentCode }}
-                                                                                                {{ prop.node.organizationShortName }}
-                                                                                              </div>
-                                                                                            </div>
-                                                                                          </div>
-                                                                                        </template>
+                            <q-space />
+                          </div>
+                          <div class="col items-center q-px-xs q-pt-xs">
+                            <div class="text-weight-medium text-grey-7">
+                              {{ prop.node.governmentCode }}
+                              {{ prop.node.organizationShortName }}
+                            </div>
+                          </div>
+                        </div>
+                      </template>
 
-                                                                                        <template v-slot:header-person="prop">
-                                                                                          <q-item
-                                                                                            clickable
-                                                                                            :active="selected == prop.node.keyId"
-                                                                                            @click="selectedPosition(prop.node)"
-                                                                                            :disable="prop.node.name != null ||
-                                                                                              checkPosition(prop.node.positionNumId) != -1
-                                                                                              "
-                                                                                            active-class="my-list-link text-primary text-weight-medium"
-                                                                                            class="row items-center text-dark q-py-xs q-pl-sm rounded-borders my-list"
-                                                                                          >
-                                                                                            <img
-                                                                                              v-if="prop.node.avatar == '' ||
-                                                                                                prop.node.avatar ==
-                                                                                                'https://cdn.quasar.dev/img/boy-avatar.png'
-                                                                                                "
-                                                                                              src="@/assets/avatar_user.jpg"
-                                                                                              class="col-xs-1 col-sm-2"
-                                                                                              style="
+                      <template v-slot:header-person="prop">
+                        <q-item
+                          clickable
+                          :active="selected == prop.node.keyId"
+                          @click="selectedPosition(prop.node)"
+                          :disable="
+                            prop.node.name != null ||
+                            checkPosition(prop.node.positionNumId) != -1
+                          "
+                          active-class="my-list-link text-primary text-weight-medium"
+                          class="row items-center text-dark q-py-xs q-pl-sm rounded-borders my-list"
+                        >
+                          <img
+                            v-if="
+                              prop.node.avatar == '' ||
+                              prop.node.avatar ==
+                                'https://cdn.quasar.dev/img/boy-avatar.png'
+                            "
+                            src="@/assets/avatar_user.jpg"
+                            class="col-xs-1 col-sm-2"
+                            style="
                               width: 28px;
                               height: 28px;
                               border-radius: 50%;
                             "
-                                                                                            />
-                                                                                            <img
-                                                                                              v-else
-                                                                                              :src="prop.node.avatar"
-                                                                                              class="col-xs-1 col-sm-2"
-                                                                                              style="
+                          />
+                          <img
+                            v-else
+                            :src="prop.node.avatar"
+                            class="col-xs-1 col-sm-2"
+                            style="
                               width: 28px;
                               height: 28px;
                               border-radius: 50%;
                             "
-                                                                                            />
-                                                                                            <!--=====ตำแหน่งว่าง สีแดง=====-->
-                                                                                            <div
-                                                                                              v-if="prop.node.name == null"
-                                                                                              class="q-px-sm text-weight-medium text-red"
-                                                                                            >
-                                                                                              ว่าง
-                                                                                            </div>
-                                                                                            <!--=====หัวหน้า สีเขียว=====-->
-                                                                                            <div v-else-if="prop.node.positionLeaderFlag">
-                                                                                              <div
-                                                                                                class="q-px-sm text-weight-medium text-primary"
-                                                                                              >
-                                                                                                {{ prop.node.name }}
-                                                                                              </div>
-                                                                                            </div>
-                                                                                            <!--=====ลูกน้อง สีปกติ=====-->
-                                                                                            <div v-else>
-                                                                                              <div class="q-px-sm text-weight-medium">
-                                                                                                {{ prop.node.name }}
-                                                                                              </div>
-                                                                                            </div>
-                                                                                            <!--ต่อท้ายชื่อคน แสดงสีปกติ-->
-                                                                                            <div class="q-pr-sm">
-                                                                                              {{ prop.node.positionName }}
-                                                                                            </div>
-                                                                                            <div class="q-pr-sm">
-                                                                                              {{ prop.node.positionNum }}
-                                                                                            </div>
-                                                                                            <div class="q-pr-sm">
-                                                                                              {{ prop.node.positionLevel }}
-                                                                                            </div>
-                                                                                            <q-icon
-                                                                                              v-if="prop.node.positionLeaderFlag"
-                                                                                              class="q-mr-sm"
-                                                                                              size="15px"
-                                                                                              color="primary"
-                                                                                              name="mdi-bookmark"
-                                                                                            ></q-icon>
+                          />
+                          <!--=====ตำแหน่งว่าง สีแดง=====-->
+                          <div
+                            v-if="prop.node.name == null"
+                            class="q-px-sm text-weight-medium text-red"
+                          >
+                            ว่าง
+                          </div>
+                          <!--=====หัวหน้า สีเขียว=====-->
+                          <div v-else-if="prop.node.positionLeaderFlag">
+                            <div
+                              class="q-px-sm text-weight-medium text-primary"
+                            >
+                              {{ prop.node.name }}
+                            </div>
+                          </div>
+                          <!--=====ลูกน้อง สีปกติ=====-->
+                          <div v-else>
+                            <div class="q-px-sm text-weight-medium">
+                              {{ prop.node.name }}
+                            </div>
+                          </div>
+                          <!--ต่อท้ายชื่อคน แสดงสีปกติ-->
+                          <div class="q-pr-sm">
+                            {{ prop.node.positionName }}
+                          </div>
+                          <div class="q-pr-sm">
+                            {{ prop.node.positionNum }}
+                          </div>
+                          <div class="q-pr-sm">
+                            {{ prop.node.positionLevel }}
+                          </div>
+                          <q-icon
+                            v-if="prop.node.positionLeaderFlag"
+                            class="q-mr-sm"
+                            size="15px"
+                            color="primary"
+                            name="mdi-bookmark"
+                          ></q-icon>
 
-                                                                                            <q-space />
-                                                                                          </q-item>
-                                                                                        </template>
-                                                                                      </q-tree>
-                                                                                    </div>
-                                                                                  </q-scroll-area>
-                                                                                </q-card>
-                                                                              </div>
-                                                                              <div class="col-xs-12 col-sm-5">
+                          <q-space />
+                        </q-item>
+                      </template>
+                    </q-tree>
+                  </div>
+                </q-scroll-area>
+              </q-card>
+            </div>
+            <div class="col-xs-12 col-sm-5">
               <q-card flat bordered class="fit q-pa-sm">
                 <q-scroll-area visible style="height: 70vh">
                   <div class="row col-12 q-col-gutter-xs">
diff --git a/src/modules/05_placement/components/PersonalList/Table.vue b/src/modules/05_placement/components/PersonalList/Table.vue
index d85c9247e..c05d8a671 100644
--- a/src/modules/05_placement/components/PersonalList/Table.vue
+++ b/src/modules/05_placement/components/PersonalList/Table.vue
@@ -195,9 +195,9 @@ const convertContainStatus = (val: string) => {
 };
 const convertDraft = (val: boolean) => {
   switch (val) {
-    case true:
-      return "รอส่งตัว";
     case false:
+      return "รอส่งตัว";
+    case true:
       return "ส่งตัวแล้ว";
     default:
       return "-";
@@ -297,8 +297,8 @@ const saveDeferment = async () => {
               hideLoader();
             });
         })
-        .onCancel(() => {})
-        .onDismiss(() => {});
+        .onCancel(() => { })
+        .onDismiss(() => { });
     }
   });
 };
@@ -338,8 +338,8 @@ const saveDisclaim = async () => {
               hideLoader();
             });
         })
-        .onCancel(() => {})
-        .onDismiss(() => {});
+        .onCancel(() => { })
+        .onDismiss(() => { });
     }
   });
 };
@@ -441,6 +441,10 @@ const validateData = async () => {
   });
 };
 
+const clickCloseSendModal = () => {
+  modaladdlist.value = false
+}
+
 const clickClose = async () => {
   userNote.value = "";
   if (editRow.value == true) {
@@ -537,436 +541,235 @@ const paginationLabel = (start: number, end: number, total: number) => {
 </script>
 <template>
   <q-form ref="myForm">
-    <Table
-      :contain-status="containStatus"
-      :rows="rows"
-      :columns="columns"
-      :filter="filter"
-      :visible-columns="visibleColumns"
-      v-model:inputfilter="filter"
-      v-model:inputvisible="visibleColumns"
-      v-model:editvisible="editvisible"
-      v-model:containfilter="containStatus"
-      @update-modaladdlist="handleModalAddListUpdate"
-      :history="true"
-      :boss="true"
-      :saveNoDraft="true"
-      :role-admin="roleAdmin"
-    >
-      <template #columns="props">
-        <q-tr :props="props">
-          <q-td
-            v-for="col in props.cols"
-            :key="col.name"
-            :props="props"
-            @click="selectData(props.row.personalId)"
-            class="cursor-pointer"
-          >
-            <template v-if="col.name === 'position'">
-              {{ props.rowIndex + 1 }}
-            </template>
-            <template
-              v-else-if="col.name === 'fullName'"
-              class="table_ellipsis"
-            >
-              <div class="row col-12 text-no-wrap items-center">
-                <img
-                  v-if="props.row.avatar == null"
-                  src="@/assets/avatar_user.jpg"
-                  class="col-4 img-info"
-                />
-                <img v-else :src="props.row.avatar" class="col-4 img-info" />
-                <div class="col-4">
-                  <div class="text-weight-medium">{{ props.row.name }}</div>
-                  <div class="text-weight-light">{{ props.row.idCard }}</div>
+      <Table :contain-status="containStatus" :rows="rows" :columns="columns" :filter="filter"
+        :visible-columns="visibleColumns" v-model:inputfilter="filter" v-model:inputvisible="visibleColumns"
+        v-model:editvisible="editvisible" v-model:containfilter="containStatus"
+        @update-modaladdlist="handleModalAddListUpdate" :history="true" :boss="true" :saveNoDraft="true"
+        :role-admin="roleAdmin">
+        <template #columns="props">
+          <q-tr :props="props">
+            <q-td v-for="col in props.cols" :key="col.name" :props="props" @click="selectData(props.row.personalId)"
+              class="cursor-pointer">
+              <template v-if="col.name === 'position'">
+                {{ props.rowIndex + 1 }}
+              </template>
+              <template v-else-if="col.name === 'fullName'" class="table_ellipsis">
+                <div class="row col-12 text-no-wrap items-center">
+                  <img v-if="props.row.avatar == null" src="@/assets/avatar_user.jpg" class="col-4 img-info" />
+                  <img v-else :src="props.row.avatar" class="col-4 img-info" />
+                  <div class="col-4">
+                    <div class="text-weight-medium">{{ props.row.name }}</div>
+                    <div class="text-weight-light">{{ props.row.idCard }}</div>
+                  </div>
                 </div>
-              </div>
-            </template>
-            <template v-else-if="col.name === 'examNumber'">
-              <div class="text-weight-medium">
-                {{ props.row.examNumber !== null ? props.row.examNumber : "-" }}
-              </div>
-            </template>
+              </template>
+              <template v-else-if="col.name === 'examNumber'">
+                <div class="text-weight-medium">
+                  {{ props.row.examNumber !== null ? props.row.examNumber : "-" }}
+                </div>
+              </template>
 
-            <template v-else-if="col.name === 'organizationName'">
-              <div
-                v-if="
-                  props.row.orgName !== null || props.row.positionPath !== null
-                "
-              >
-                <div class="col-4">
-                  <div class="text-weight-medium">
-                    {{ props.row.orgName !== null ? props.row.orgName : "-" }}
-                    {{
-                      props.row.organizationShortName !== null
+              <template v-else-if="col.name === 'organizationName'">
+                <div v-if="props.row.orgName !== null || props.row.positionPath !== null
+                  ">
+                  <div class="col-4">
+                    <div class="text-weight-medium">
+                      {{ props.row.orgName !== null ? props.row.orgName : "-" }}
+                      {{
+                        props.row.organizationShortName !== null
                         ? `(${props.row.organizationShortName})`
                         : ""
-                    }}
-                  </div>
-                  <div class="text-weight-light">
-                    {{
-                      props.row.positionPath !== null
+                      }}
+                    </div>
+                    <div class="text-weight-light">
+                      {{
+                        props.row.positionPath !== null
                         ? props.row.positionPath
                         : "-"
-                    }}
-                    {{
-                      props.row.positionNumber !== null
+                      }}
+                      {{
+                        props.row.positionNumber !== null
                         ? `(${props.row.positionNumber})`
                         : ""
-                    }}
+                      }}
+                    </div>
                   </div>
                 </div>
-              </div>
-              <div v-else>
-                <div class="col-4">
-                  <div class="text-weight-medium">-</div>
+                <div v-else>
+                  <div class="col-4">
+                    <div class="text-weight-medium">-</div>
+                  </div>
                 </div>
-              </div>
-            </template>
-            <template v-else-if="col.name === 'positionCandidate'">
-              <div
-                class="text-weight-medium"
-                v-if="props.row.positionCandidate == null"
-              >
-                -
-              </div>
-              <div class="text-weight-medium" v-else>
-                {{ props.row.positionCandidate }}
-              </div>
-            </template>
-            <template
-              v-else-if="col.name === 'reportingDate' && col.value !== '-'"
-            >
-              <div class="text-weight-medium">
-                {{ props.row.reportingDate }}
-              </div>
-            </template>
-            <template v-else-if="col.name === 'bmaOfficer'">
-              <div class="text-weight-medium">
-                {{ props.row.bmaOfficer !== null ? props.row.bmaOfficer : "-" }}
-              </div>
-            </template>
-            <template v-else-if="col.name === 'draft'">
-              <div class="text-weight-medium">
-                {{ props.row.draft }}
-              </div>
-            </template>
-            <template v-else-if="col.name === 'statusName'">
-              <div class="text-weight-medium">
-                {{ props.row.statusName }}
-              </div>
-            </template>
-          </q-td>
-          <q-td auto-width>
-            <q-btn
-              icon="mdi-dots-vertical"
-              size="12px"
-              color="grey-7"
-              flat
-              round
-              dense
-            >
-              <q-menu transition-show="jump-down" transition-hide="jump-up">
-                <q-list dense style="min-width: 100px">
-                  <q-item
-                    v-if="
-                      (roleAdmin && props.row.statusId === 'UN-CONTAIN') ||
-                      props.row.draft === 'รอส่งตัว'
-                    "
-                    clickable
-                    v-close-popup
-                    @click="openAppointModal(props.row.personalId)"
-                  >
-                    <q-item-section
-                      style="min-width: 0px"
-                      avatar
-                      class="q-py-sm"
-                    >
-                      <q-icon
-                        color="primary"
-                        size="xs"
-                        name="mdi-bookmark-outline"
-                      />
-                    </q-item-section>
-                    <q-item-section>เลือกหน่วยงานที่รับบรรจุ</q-item-section>
-                  </q-item>
-
-                  <q-separator />
-                  <q-item
-                    v-if="roleAdmin && props.row.statusId === 'UN-CONTAIN'"
-                    clickable
-                    v-close-popup
-                    @click="editDetail(props.row, 'deferment')"
-                  >
-                    <q-item-section
-                      style="min-width: 0px"
-                      avatar
-                      class="q-py-sm"
-                    >
-                      <q-icon
-                        color="blue"
-                        size="xs"
-                        name="mdi-account-alert-outline"
-                      />
-                    </q-item-section>
-                    <q-item-section>ขอผ่อนผัน</q-item-section>
-                  </q-item>
-                  <q-item
-                    v-else-if="
-                      props.row.deferment === true &&
-                      props.row.statusId != 'DISCLAIM'
-                    "
-                    clickable
-                    v-close-popup
-                    @click="editDetail(props.row, 'defermentInfo')"
-                  >
-                    <q-item-section
-                      style="min-width: 0px"
-                      avatar
-                      class="q-py-sm"
-                    >
-                      <q-icon
-                        color="blue"
-                        size="xs"
-                        name="mdi-account-details-outline"
-                      />
-                    </q-item-section>
-                    <q-item-section>ข้อมูลการผ่อนผัน</q-item-section>
-                  </q-item>
-                  <q-separator />
-                  <q-item
-                    v-if="
-                      props.row.statusId === 'UN-CONTAIN' ||
-                      props.row.statusId === 'PREPARE-CONTAIN'
-                    "
-                    clickable
-                    v-close-popup
-                    @click="editDetail(props.row, 'disclaim')"
-                  >
-                    <q-item-section
-                      style="min-width: 0px"
-                      avatar
-                      class="q-py-sm"
-                    >
-                      <q-icon
-                        color="pink"
-                        size="xs"
-                        name="mdi-account-cancel-outline"
-                      />
-                    </q-item-section>
-                    <q-item-section>สละสิทธิ์</q-item-section>
-                  </q-item>
-                  <q-item
-                    v-else-if="props.row.statusId === 'DISCLAIM'"
-                    clickable
-                    v-close-popup
-                    @click="editDetail(props.row, 'disclaimInfo')"
-                  >
-                    <q-item-section
-                      style="min-width: 0px"
-                      avatar
-                      class="q-py-sm"
-                    >
-                      <q-icon
-                        color="pink"
-                        size="xs"
-                        name="mdi-account-cancel-outline"
-                      />
-                    </q-item-section>
-                    <q-item-section>ข้อมูลการสละสิทธิ์</q-item-section>
-                  </q-item>
-                </q-list>
-              </q-menu>
-            </q-btn>
-          </q-td>
-        </q-tr>
-      </template>
-    </Table>
-  </q-form>
-
-  <!-- เลือกหน่วยงานที่บรรจุ -->
-  <DialogOrgTree
-    v-model:modal="appointModal"
-    :personalId="personalId"
-    :close="clickCloseModalTree"
-    :personal="personal"
-  />
-
-  <!-- popup ขอผ่อนผัน / สละสิทธิ์ -->
-  <q-form ref="myForm">
-    <DialogCard
-      v-model:Modal="modal"
-      :personal-id="personalId"
-      :close="clickClose"
-      :validate="validateData"
-    />
-  </q-form>
-  <q-dialog v-model="modalDefermentDisclaim" persistent>
-    <q-card style="width: 800px">
-      <q-form ref="myForm">
-        <DialogHeader
-          :title="`${modalDisclaim ? 'สละสิทธิ์' : 'ขอผ่อนผัน'} ชื่อ${Name}`"
-          :close="clickClose"
-        />
-        <q-separator />
-        <q-card-section class="q-p-sm">
-          <div class="col-xs-12 col-sm-12 col-md-12">
-            <q-input
-              :class="getClass(edit)"
-              hide-bottom-space
-              :outlined="edit"
-              dense
-              lazy-rules
-              :rules="[(val) => !!val || 'กรุณากรอกเหตุผล']"
-              :readonly="!edit"
-              :borderless="!edit"
-              v-model="userNote"
-              :label="`${'กรอกเหตุผล'}`"
-              @update:model-value="clickEditRow"
-              type="textarea"
-            />
-            <q-file
-              v-if="getNumFile === 1"
-              v-model="files"
-              dense
-              :label="`${'เลือกไฟล์เอกสารหลักฐาน'}`"
-              outlined
-              use-chips
-              :rules="[(val) => !!val || 'กรุณาเลือกไฟล์เอกสารหลักฐาน']"
-              multiple
-              @update:model-value="clickEditRow"
-              class="q-py-sm"
-            >
-              <template v-slot:prepend>
-                <q-icon name="attach_file" color="primary" />
               </template>
-            </q-file>
-          </div>
-        </q-card-section>
-        <q-separator />
-        <DialogFooter
-          :editvisible="true"
-          :validate="validateData"
-          :save="modalDisclaim ? saveDisclaim : saveDeferment"
-        />
-      </q-form>
-    </q-card>
-  </q-dialog>
+              <template v-else-if="col.name === 'positionCandidate'">
+                <div class="text-weight-medium" v-if="props.row.positionCandidate == null">
+                  -
+                </div>
+                <div class="text-weight-medium" v-else>
+                  {{ props.row.positionCandidate }}
+                </div>
+              </template>
+              <template v-else-if="col.name === 'reportingDate' && col.value !== '-'">
+                <div class="text-weight-medium">
+                  {{ props.row.reportingDate }}
+                </div>
+              </template>
+              <template v-else-if="col.name === 'bmaOfficer'">
+                <div class="text-weight-medium">
+                  {{ props.row.bmaOfficer !== null ? props.row.bmaOfficer : "-" }}
+                </div>
+              </template>
+              <template v-else-if="col.name === 'draft'">
+                <div class="text-weight-medium">
+                  {{ props.row.draft }}
+                </div>
+              </template>
+              <template v-else-if="col.name === 'statusName'">
+                <div class="text-weight-medium">
+                  {{ props.row.statusName }}
+                </div>
+              </template>
+            </q-td>
+            <q-td auto-width>
+              <q-btn icon="mdi-dots-vertical" size="12px" color="grey-7" flat round dense>
+                <q-menu transition-show="jump-down" transition-hide="jump-up">
+                  <q-list dense style="min-width: 100px">
+                    <q-item v-if="(roleAdmin && props.row.statusId === 'UN-CONTAIN') ||
+                      props.row.draft === 'รอส่งตัว'
+                      " clickable v-close-popup @click="openAppointModal(props.row.personalId)">
+                      <q-item-section style="min-width: 0px" avatar class="q-py-sm">
+                        <q-icon color="primary" size="xs" name="mdi-bookmark-outline" />
+                      </q-item-section>
+                      <q-item-section>เลือกหน่วยงานที่รับบรรจุ</q-item-section>
+                    </q-item>
 
-  <!-- dialog ข้อมูลขอผ่อนผัน / สละสิทธิ์ -->
-  <q-dialog v-model="modalwaitInfo" persistent>
-    <q-card style="width: 500px; max-width: 500px">
-      <q-form ref="myForm">
-        <DialogHeader
-          :title="`${modalDisclaim ? 'สละสิทธิ์' : 'ขอผ่อนผัน'} ชื่อ${Name}`"
-          :close="clickClose"
-        />
+                    <q-separator />
+                    <q-item v-if="roleAdmin && props.row.statusId === 'UN-CONTAIN'" clickable v-close-popup
+                      @click="editDetail(props.row, 'deferment')">
+                      <q-item-section style="min-width: 0px" avatar class="q-py-sm">
+                        <q-icon color="blue" size="xs" name="mdi-account-alert-outline" />
+                      </q-item-section>
+                      <q-item-section>ขอผ่อนผัน</q-item-section>
+                    </q-item>
+                    <q-item v-else-if="props.row.deferment === true &&
+                      props.row.statusId != 'DISCLAIM'
+                      " clickable v-close-popup @click="editDetail(props.row, 'defermentInfo')">
+                      <q-item-section style="min-width: 0px" avatar class="q-py-sm">
+                        <q-icon color="blue" size="xs" name="mdi-account-details-outline" />
+                      </q-item-section>
+                      <q-item-section>ข้อมูลการผ่อนผัน</q-item-section>
+                    </q-item>
+                    <q-separator />
+                    <q-item v-if="props.row.statusId === 'UN-CONTAIN' ||
+                      props.row.statusId === 'PREPARE-CONTAIN'
+                      " clickable v-close-popup @click="editDetail(props.row, 'disclaim')">
+                      <q-item-section style="min-width: 0px" avatar class="q-py-sm">
+                        <q-icon color="pink" size="xs" name="mdi-account-cancel-outline" />
+                      </q-item-section>
+                      <q-item-section>สละสิทธิ์</q-item-section>
+                    </q-item>
+                    <q-item v-else-if="props.row.statusId === 'DISCLAIM'" clickable v-close-popup
+                      @click="editDetail(props.row, 'disclaimInfo')">
+                      <q-item-section style="min-width: 0px" avatar class="q-py-sm">
+                        <q-icon color="pink" size="xs" name="mdi-account-cancel-outline" />
+                      </q-item-section>
+                      <q-item-section>ข้อมูลการสละสิทธิ์</q-item-section>
+                    </q-item>
+                  </q-list>
+                </q-menu>
+              </q-btn>
+            </q-td>
+          </q-tr>
+        </template>
+      </Table>
+    </q-form>
+
+    <!-- เลือกหน่วยงานที่บรรจุ -->
+    <DialogOrgTree v-model:modal="appointModal" :personalId="personalId" :close="clickCloseModalTree"
+      :personal="personal" />
+
+    <!-- popup ขอผ่อนผัน / สละสิทธิ์ -->
+    <q-form ref="myForm">
+      <DialogCard v-model:Modal="modal" :personal-id="personalId" :close="clickClose" :validate="validateData" />
+    </q-form>
+    <q-dialog v-model="modalDefermentDisclaim" persistent>
+      <q-card style="width: 800px">
+        <q-form ref="myForm">
+          <DialogHeader :title="`${modalDisclaim ? 'สละสิทธิ์' : 'ขอผ่อนผัน'} ชื่อ${Name}`" :close="clickClose" />
+          <q-separator />
+          <q-card-section class="q-p-sm">
+            <div class="col-xs-12 col-sm-12 col-md-12">
+              <q-input :class="getClass(edit)" hide-bottom-space :outlined="edit" dense lazy-rules
+                :rules="[(val) => !!val || 'กรุณากรอกเหตุผล']" :readonly="!edit" :borderless="!edit" v-model="userNote"
+                :label="`${'กรอกเหตุผล'}`" @update:model-value="clickEditRow" type="textarea" />
+              <q-file v-if="getNumFile === 1" v-model="files" dense :label="`${'เลือกไฟล์เอกสารหลักฐาน'}`" outlined
+                use-chips :rules="[(val) => !!val || 'กรุณาเลือกไฟล์เอกสารหลักฐาน']" multiple
+                @update:model-value="clickEditRow" class="q-py-sm">
+                <template v-slot:prepend>
+                  <q-icon name="attach_file" color="primary" />
+                </template>
+              </q-file>
+            </div>
+          </q-card-section>
+          <q-separator />
+          <DialogFooter :editvisible="true" :validate="validateData" :save="modalDisclaim ? saveDisclaim : saveDeferment" />
+        </q-form>
+      </q-card>
+    </q-dialog>
+
+    <!-- dialog ข้อมูลขอผ่อนผัน / สละสิทธิ์ -->
+    <q-dialog v-model="modalwaitInfo" persistent>
+      <q-card style="width: 500px; max-width: 500px">
+        <q-form ref="myForm">
+          <DialogHeader :title="`${modalDisclaim ? 'สละสิทธิ์' : 'ขอผ่อนผัน'} ชื่อ${Name}`" :close="clickClose" />
+          <q-separator />
+          <q-card-section class="q-p-sm">
+            <div class="row">
+              <div class="col-3 text-grey-7">เหตุผล</div>
+              <div class="col-4">{{ dataInfo.reason }}</div>
+            </div>
+            <div v-if="!modalDisclaim" class="row q-pt-md">
+              <div class="col-3 text-grey-7 q-mt-sm">เอกสารหลักฐาน</div>
+              <div class="col-2 q-mt-sm">
+                <q-btn type="a" :href="dataInfo.reliefDoc" color="primary" flat dense round size="14px" icon="mdi-download"
+                  target="_blank" />
+              </div>
+            </div>
+          </q-card-section>
+          <q-separator />
+        </q-form>
+      </q-card>
+    </q-dialog>
+
+    <!-- dialog เพิ่มรายชื่อ -->
+    <q-dialog v-model="modaladdlist">
+      <q-card style="width: 900px; max-width: 80vw">
+        <DialogHeader title="ส่งรายชื่อไปยังหน่วยงาน" :close="clickCloseSendModal" />
         <q-separator />
-        <q-card-section class="q-p-sm">
-          <div class="row">
-            <div class="col-3 text-grey-7">เหตุผล</div>
-            <div class="col-4">{{ dataInfo.reason }}</div>
-          </div>
-          <div v-if="!modalDisclaim" class="row q-pt-md">
-            <div class="col-3 text-grey-7 q-mt-sm">เอกสารหลักฐาน</div>
-            <div class="col-2 q-mt-sm">
-              <q-btn
-                type="a"
-                :href="dataInfo.reliefDoc"
-                color="primary"
-                flat
-                dense
-                round
-                size="14px"
-                icon="mdi-download"
-                target="_blank"
-              />
+        <q-card-section class="q-pt-none">
+          <div class="row justify-end">
+            <div class="col-5">
+              <q-toolbar style="padding: 0">
+                <q-input borderless outlined dense debounce="300" v-model="filterlistAdd" placeholder="ค้นหา"
+                  style="width: 850px; max-width: auto">
+                  <template v-slot:append>
+                    <q-icon name="search" />
+                  </template>
+                </q-input>
+                <q-select v-model="visibleColumnslist" multiple outlined dense options-dense
+                  :display-value="$q.lang.table.columns" emit-value map-options :options="columns" option-value="name"
+                  options-cover style="min-width: 150px" class="gt-xs q-ml-sm" />
+              </q-toolbar>
             </div>
           </div>
-        </q-card-section>
-        <q-separator />
-      </q-form>
-    </q-card>
-  </q-dialog>
 
-  <!-- dialog เพิ่มรายชื่อ -->
-  <q-dialog v-model="modaladdlist">
-    <q-card style="width: 900px; max-width: 80vw">
-      <q-card-section>
-        
-        <q-toolbar class="q-py-md">
-          <q-toolbar-title class="header-text text-weight-bolder"
-            >ส่งรายชื่อไปยังหน่วยงาน
-          </q-toolbar-title>
-          <q-btn
-            icon="close"
-            unelevated
-            round
-            dense
-            @click="modaladdlist = false"
-            style="color: #ff8080; background-color: #ffdede"
-          />
-        </q-toolbar>
-      </q-card-section>
-      <q-card-section class="q-pt-none">
-        <div class="row justify-end">
-          <div class="col-5">
-            <q-toolbar style="padding: 0">
-              <q-input
-                borderless
-                outlined
-                dense
-                debounce="300"
-                v-model="filterlistAdd"
-                placeholder="ค้นหา"
-                style="width: 850px; max-width: auto"
-              >
-                <template v-slot:append>
-                  <q-icon name="search" />
-                </template>
-              </q-input>
-              <q-select
-                v-model="visibleColumnslist"
-                multiple
-                outlined
-                dense
-                options-dense
-                :display-value="$q.lang.table.columns"
-                emit-value
-                map-options
-                :options="columns"
-                option-value="name"
-                options-cover
-                style="min-width: 150px"
-                class="gt-xs q-ml-sm"
-              />
-            </q-toolbar>
-          </div>
-        </div>
-
-        <q-table
-          flat
-          bordered
-          dense
-          :rows="rowsFilter"
-          :columns="columns"
-          :filter="filterlistAdd"
-          row-key="name"
-          class="custom-header-table"
-          selection="multiple"
-          v-model:selected="selected"
-          :pagination-label="paginationLabel"
-          :visible-columns="visibleColumnslist"
-        >
-          <template v-slot:header-selection="scope">
-            <q-checkbox
-              keep-color
-              color="primary"
-              dense
-              v-model="scope.selected"
-            />
-          </template>
-          <!-- <template v-slot:body-selection="scope">
+          <q-table flat bordered dense :rows="rowsFilter" :columns="columns" :filter="filterlistAdd" row-key="name"
+            class="custom-header-table" selection="multiple" v-model:selected="selected" :pagination-label="paginationLabel"
+            :visible-columns="visibleColumnslist">
+            <template v-slot:header-selection="scope">
+              <q-checkbox keep-color color="primary" dense v-model="scope.selected" />
+            </template>
+            <!-- <template v-slot:body-selection="scope">
             <q-checkbox
               keep-color
               color="primary"
@@ -974,153 +777,112 @@ const paginationLabel = (start: number, end: number, total: number) => {
               v-model="scope.selected"
             />
           </template> -->
-          <template v-slot:body="props">
-            <q-tr :props="props">
-              <q-td>
-                <q-checkbox
-                  keep-color
-                  color="primary"
-                  dense
-                  v-model="props.selected"
-                />
-              </q-td>
-              <q-td
-                v-for="col in props.cols"
-                :key="col.name"
-                :props="props"
-                class="cursor-pointer"
-              >
-                <template v-if="col.name === 'position'">
-                  {{ props.rowIndex + 1 }}
-                </template>
-                <template
-                  v-else-if="col.name === 'fullName'"
-                  class="table_ellipsis"
-                >
-                  <div class="row col-12 text-no-wrap items-center">
-                    <img
-                      v-if="props.row.avatar == null"
-                      src="@/assets/avatar_user.jpg"
-                      class="col-4 img-info"
-                    />
-                    <img
-                      v-else
-                      :src="props.row.avatar"
-                      class="col-4 img-info"
-                    />
-                    <div class="col-4">
-                      <div class="text-weight-medium">{{ props.row.name }}</div>
-                      <div class="text-weight-light">
-                        {{ props.row.idCard }}
+            <template v-slot:body="props">
+              <q-tr :props="props">
+                <q-td>
+                  <q-checkbox keep-color color="primary" dense v-model="props.selected" />
+                </q-td>
+                <q-td v-for="col in props.cols" :key="col.name" :props="props" class="cursor-pointer">
+                  <template v-if="col.name === 'position'">
+                    {{ props.rowIndex + 1 }}
+                  </template>
+                  <template v-else-if="col.name === 'fullName'" class="table_ellipsis">
+                    <div class="row col-12 text-no-wrap items-center">
+                      <img v-if="props.row.avatar == null" src="@/assets/avatar_user.jpg" class="col-4 img-info" />
+                      <img v-else :src="props.row.avatar" class="col-4 img-info" />
+                      <div class="col-4">
+                        <div class="text-weight-medium">{{ props.row.name }}</div>
+                        <div class="text-weight-light">
+                          {{ props.row.idCard }}
+                        </div>
                       </div>
                     </div>
-                  </div>
-                </template>
-                <template v-else-if="col.name === 'examNumber'">
-                  <div class="text-weight-medium">
-                    {{
-                      props.row.examNumber !== null ? props.row.examNumber : "-"
-                    }}
-                  </div>
-                </template>
+                  </template>
+                  <template v-else-if="col.name === 'examNumber'">
+                    <div class="text-weight-medium">
+                      {{
+                        props.row.examNumber !== null ? props.row.examNumber : "-"
+                      }}
+                    </div>
+                  </template>
 
-                <template v-else-if="col.name === 'organizationName'">
-                  <div
-                    v-if="
-                      props.row.orgName !== null ||
+                  <template v-else-if="col.name === 'organizationName'">
+                    <div v-if="props.row.orgName !== null ||
                       props.row.positionPath !== null
-                    "
-                  >
-                    <div class="col-4">
-                      <div class="text-weight-medium">
-                        {{
-                          props.row.orgName !== null ? props.row.orgName : "-"
-                        }}
-                        {{
-                          props.row.organizationShortName !== null
+                      ">
+                      <div class="col-4">
+                        <div class="text-weight-medium">
+                          {{
+                            props.row.orgName !== null ? props.row.orgName : "-"
+                          }}
+                          {{
+                            props.row.organizationShortName !== null
                             ? `(${props.row.organizationShortName})`
                             : ""
-                        }}
-                      </div>
-                      <div class="text-weight-light">
-                        {{
-                          props.row.positionPath !== null
+                          }}
+                        </div>
+                        <div class="text-weight-light">
+                          {{
+                            props.row.positionPath !== null
                             ? props.row.positionPath
                             : "-"
-                        }}
-                        {{
-                          props.row.positionNumber !== null
+                          }}
+                          {{
+                            props.row.positionNumber !== null
                             ? `(${props.row.positionNumber})`
                             : ""
-                        }}
+                          }}
+                        </div>
                       </div>
                     </div>
-                  </div>
-                  <div v-else>
-                    <div class="col-4">
-                      <div class="text-weight-medium">-</div>
+                    <div v-else>
+                      <div class="col-4">
+                        <div class="text-weight-medium">-</div>
+                      </div>
                     </div>
-                  </div>
-                </template>
-                <template v-else-if="col.name === 'positionCandidate'">
-                  <div
-                    class="text-weight-medium"
-                    v-if="props.row.positionCandidate == null"
-                  >
-                    -
-                  </div>
-                  <div class="text-weight-medium" v-else>
-                    {{ props.row.positionCandidate }}
-                  </div>
-                </template>
-                <template
-                  v-else-if="col.name === 'reportingDate' && col.value !== '-'"
-                >
-                  <div class="text-weight-medium">
-                    {{ props.row.reportingDate }}
-                  </div>
-                </template>
-                <template v-else-if="col.name === 'bmaOfficer'">
-                  <div class="text-weight-medium">
-                    {{
-                      props.row.bmaOfficer !== null ? props.row.bmaOfficer : "-"
-                    }}
-                  </div>
-                </template>
-                <template v-else-if="col.name === 'draft'">
-                  <div class="text-weight-medium">
-                    {{ props.row.draft }}
-                  </div>
-                </template>
-                <template v-else-if="col.name === 'statusName'">
-                  <div class="text-weight-medium">
-                    {{ props.row.statusName }}
-                  </div>
-                </template>
-              </q-td>
-            </q-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>
+                  </template>
+                  <template v-else-if="col.name === 'positionCandidate'">
+                    <div class="text-weight-medium" v-if="props.row.positionCandidate == null">
+                      -
+                    </div>
+                    <div class="text-weight-medium" v-else>
+                      {{ props.row.positionCandidate }}
+                    </div>
+                  </template>
+                  <template v-else-if="col.name === 'reportingDate' && col.value !== '-'">
+                    <div class="text-weight-medium">
+                      {{ props.row.reportingDate }}
+                    </div>
+                  </template>
+                  <template v-else-if="col.name === 'bmaOfficer'">
+                    <div class="text-weight-medium">
+                      {{
+                        props.row.bmaOfficer !== null ? props.row.bmaOfficer : "-"
+                      }}
+                    </div>
+                  </template>
+                  <template v-else-if="col.name === 'draft'">
+                    <div class="text-weight-medium">
+                      {{ props.row.draft }}
+                    </div>
+                  </template>
+                  <template v-else-if="col.name === 'statusName'">
+                    <div class="text-weight-medium">
+                      {{ props.row.statusName }}
+                    </div>
+                  </template>
+                </q-td>
+              </q-tr>
+            </template>
+            <template v-slot:pagination="scope">
+              <q-pagination v-model="pagination.page" color="primary" :max="scope.pagesNumber" :max-pages="5" size="sm"
+                boundary-links direction-links></q-pagination>
+            </template>
+          </q-table>
+        </q-card-section>
 
-      <q-card-actions align="right" class="bg-white text-teal">
-        <q-btn
-          flat
-          label="ยืนยันการส่งตัว"
-          @click="savelist"
-          :disable="checkSelected"
-        />
+        <q-card-actions align="right" class="bg-white text-teal">
+          <q-btn label="บันทึก" @click="savelist" :disable="checkSelected" color="public" />
       </q-card-actions>
     </q-card>
   </q-dialog>
diff --git a/src/modules/05_placement/components/probation/AddWork.vue b/src/modules/05_placement/components/probation/AddWork.vue
index 3259cecac..871af71dc 100644
--- a/src/modules/05_placement/components/probation/AddWork.vue
+++ b/src/modules/05_placement/components/probation/AddWork.vue
@@ -1,904 +1,1235 @@
 <template>
-	<div class="q-pb-md">
-		<div class="toptitle text-dark col-12 row items-center">
-			<q-btn
-				icon="mdi-arrow-left"
-				unelevated
-				round
-				dense
-				flat
-				color="primary"
-				class="q-mr-sm"
-				@click="router.go(-1)"
-			/>
-			<div v-if="routeName == 'probationWorkAdd'">
-				เพิ่มแบบมอบหมายงานการทดลองปฏิบัติหน้าที่ราชการ
-			</div>
-			<div v-else>
-				แบบมอบหมายงานการทดลองปฏิบัติหน้าที่ราชการ
-			</div>
-		</div>
-		<q-card bordered class="col-12 text-dark">
-			<div class="row col-12 q-pa-lg">
-				<div class="row col-12 q-gutter-lg">
-					<div class="col-12 row">
-						<div class="col-12 text-top0 items-center">
-							<q-avatar class="bg-grey-2 q-mr-sm" size="28px">1</q-avatar>
-							ผู้ทดลองปฏิบัติหน้าที่ราชการ
-						</div>
-						<div class="col-12 row q-col-gutter-md">
-							<div class="col-xs-12 col-sm-6">
-								<q-input 
-									:readonly="routeName != 'probationWorkAdd'"  
-									dense 
-									borderless 
-									:outlined="routeName == 'probationWorkAdd'" 
-									v-model="name" 
-									label="ชื่อ-สกุล" />
-							</div>
-							<div class="col-xs-12 col-sm-6">
-								<q-input 
-									:readonly="routeName != 'probationWorkAdd'"  
-									dense 
-									borderless 
-									:outlined="routeName == 'probationWorkAdd'" 
-									v-model="position" 
-									label="ตำแหน่ง" />
-							</div>
-						</div>
-					</div>
-					<div class="col-12">
-						<q-separator size="3px" color="grey-2" />
-					</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">2</q-avatar>
-							ผู้ดูแลการทดลองปฏิบัติหน้าที่ราชการ (อาจมีได้มากกว่า 1 คน)
-							<q-btn v-if="routeName == 'probationWorkAdd'" round color="primary" dense icon="mdi-plus" flat class="q-ml-sm" />
-						</div>
-						<div class="col-12 row q-col-gutter-md">
-							<q-select 
-								:options="OPcaretaker1" 
-								class="col-xs-12 col-sm-6" 
-								:readonly="routeName != 'probationWorkAdd'"  
-								dense 
-								borderless 
-								:outlined="routeName == 'probationWorkAdd'" 
-								v-model="caretaker" 
-								label="ผู้ดูแลคนที่ 1" />
-							<q-select 
-								:options="OPcaretaker2" 
-								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>
-					<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>
-							ผลการปฏิบัติงาน</div>
-						<div class="col-12 text-top2 row items-center ">
-							<q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
-							3.1 ชื่องาน / ภารกิจงานที่มอบหมาย (ควรมีมากกว่า 1 ภารกิจงาน)
-							<q-btn v-if="routeName == 'probationWorkAdd'" round color="primary" dense icon="mdi-plus" flat class="q-ml-sm" />
-						</div>
-						<div class="col-12 row q-gutter-md">
-							<q-card 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 
-										:readonly="routeName != 'probationWorkAdd'"  
-										dense 
-										borderless 
-										:outlined="routeName == 'probationWorkAdd'" 
-										class="bg-white" 
-										type="textarea" 
-										v-model="activity1" 
-										label="กิจกรรมของงาน/ขั้นตอนการปฏิบัติงาน(ไม่เกิน10บรรทัด )" />
-									</div>
-									<div class="col-xs-12 col-sm-6">
-										<q-input 
-										:readonly="routeName != 'probationWorkAdd'"  
-										dense 
-										borderless 
-										:outlined="routeName == 'probationWorkAdd'" 
-										class="bg-white" 
-										type="textarea" 
-										v-model="goal1" 
-										label="เป้าหมายในการปฏิบัติงาน(ไม่เกิน10บรรทัด )" />
-									</div>
-								</div>
-							</q-card>
-							<q-card 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 
-											:readonly="routeName != 'probationWorkAdd'"  
-											dense 
-											borderless 
-											:outlined="routeName == 'probationWorkAdd'" 
-											class="bg-white" 
-											type="textarea" 
-											v-model="activity2" 
-											label="กิจกรรมของงาน/ขั้นตอนการปฏิบัติงาน(ไม่เกิน10บรรทัด )" />
-									</div>
-									<div class="col-xs-12 col-sm-6">
-										<q-input 
-											:readonly="routeName != 'probationWorkAdd'" 
-											dense borderless 
-											:outlined="routeName == 'probationWorkAdd'" 
-											class="bg-white" 
-											type="textarea" 
-											v-model="goal2" 
-											label="เป้าหมายในการปฏิบัติงาน(ไม่เกิน10บรรทัด )" />
-									</div>
-								</div>
-							</q-card>
-						</div>
-					</div>
-					<div class="col-12 row">
-						<div class="col-12 text-top2">
-							<q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
-							3.2 ความรู้ความสามารถและทักษะ(ตามที่ก.ก.กําหนด)
-						</div>
-						<q-card bordered flat class="col-12 row q-pa-md bg-grey-1">
-							<div class="row col-12 q-gutter-lg">
-								<div class="col-12 row">
-									<div class="col-12 text-top2 row items-center">
-										ความรู้ความสามารถในการปฏิบัติงาน
-										<q-btn v-if="routeName == 'probationWorkAdd'" round color="primary" dense icon="mdi-plus" flat class="q-ml-sm" />
-									</div>
-									<div class="col-12 row q-col-gutter-sm">
-										<div class="col-12 ">
-											<q-select 
-												:options="OPknowledge" 
-												class="bg-white" 
-												:readonly="routeName != 'probationWorkAdd'" 
-												dense 
-												borderless 
-												:outlined="routeName == 'probationWorkAdd'"
-												v-model="knowledge" 
-												label="ความรู้ความสามารถในการปฏิบัติงาน 1" />
-										</div>
-										<div class="col-12 ">
-											<q-select 
-												:options="OPknowledge" 
-												class="bg-white" 
-												:readonly="routeName != 'probationWorkAdd'"  
-												dense 
-												borderless 
-												:outlined="routeName == 'probationWorkAdd'"
-												v-model="knowledge2" 
-												label="ความรู้ความสามารถในการปฏิบัติงาน 2" />
-											</div>
-										<div class="col-12 ">
-											<q-select 
-												:options="OPknowledge" 
-												class="bg-white" 
-												:readonly="routeName != 'probationWorkAdd'"  
-												dense 
-												borderless 
-												:outlined="routeName == 'probationWorkAdd'"
-												v-model="knowledge3" 
-												label="ความรู้ความสามารถในการปฏิบัติงาน 2" />
-											</div>
-									</div>
-								</div>
-								<div class="col-12 row">
-									<div class="col-12 text-top2 row items-center">
-										ความรู้เรื่องกฎหมายและกฎระเบียบ (ไม่เกิน 20 หัวข้อ)
-										<q-btn v-if="routeName == 'probationWorkAdd'" round color="primary" dense icon="mdi-plus" flat class="q-ml-sm" />
-									</div>
-									<q-card flat bordered class="col-12 q-pa-md"  style="max-height: 500px; overflow-y: scroll">
-										<div class="col-12 row q-pb-sm" v-for="(lawl, index) in listlaw" :key="index" >
-											<q-checkbox :disable="routeName != 'probationWorkAdd'"  :val="lawl.id" dense v-model="law" :label="lawl.label" />
-										</div>
-									</q-card>
-								</div>
-								<div class="col-12 row">
-									<div class="col-12 text-top2">
-										กฎหมายอื่น ๆ ที่เกี่ยวข้องกับการปฏิบัติงาน
-									</div>
-									<div class="col-12 row q-col-gutter-md">
-										<div class="col-12">
-											<q-input 
-												class="bg-white"
-												:readonly="routeName != 'probationWorkAdd'"  
-												dense 
-												borderless 
-												:outlined="routeName == 'probationWorkAdd'"
-												v-model="OtherLaw" 
-											/>
-										</div>
-									</div>
-								</div>
-								<div class="col-12 row">
-									<div class="col-12 text-top2">
-										ทักษะ
-									</div>
-									<div class="col-12 row q-col-gutter-sm">
-										<div class="col-xs-12 col-sm-6">
-											<q-select 
-												:options="OPskill" 
-												class="bg-white" 
-												:readonly="routeName != 'probationWorkAdd'"  
-												dense 
-												borderless 
-												:outlined="routeName == 'probationWorkAdd'" 
-												v-model="skill" 
-												label="ด้านที่ 1" />
-										</div>
-										<div class="col-xs-12 col-sm-6">
-											<q-select 
-												:options="OPskill" 
-												class="bg-white" 
-												:readonly="routeName != 'probationWorkAdd'"  
-												dense 
-												borderless 
-												:outlined="routeName == 'probationWorkAdd'" 
-												v-model="skill2" 
-												label="ด้านที่ 2" />
-										</div>
-										<div class="col-xs-12 col-sm-6">
-											<q-select 
-												:options="OPskill" 
-												class="bg-white" 
-												:readonly="routeName != 'probationWorkAdd'"  
-												dense 
-												borderless 
-												:outlined="routeName == 'probationWorkAdd'"
-												v-model="skill3" 
-												label="ด้านที่ 3" />
-										</div>
-										<div class="col-xs-12 col-sm-6">
-											<q-select 
-												:options="OPskill" 
-												class="bg-white" 
-												:readonly="routeName != 'probationWorkAdd'"  
-												dense 
-												borderless 
-												:outlined="routeName == 'probationWorkAdd'"
-												v-model="skill4" 
-												label="ด้านที่ 4" />
-										</div>
-									</div>
-								</div>
-							</div>
-						</q-card>
-					</div>
+  <div class="q-pb-md">
+    <div class="toptitle text-dark col-12 row items-center">
+      <q-btn
+        icon="mdi-arrow-left"
+        unelevated
+        round
+        dense
+        flat
+        color="primary"
+        class="q-mr-sm"
+        @click="router.go(-1)"
+      />
+      <div v-if="routeName == 'probationWorkAdd'">
+        เพิ่มแบบมอบหมายงานการทดลองปฏิบัติหน้าที่ราชการ
+      </div>
+      <div v-else>แบบมอบหมายงานการทดลองปฏิบัติหน้าที่ราชการ</div>
+    </div>
+    <q-card bordered class="col-12 text-dark">
+      <div class="row col-12 q-pa-lg">
+        <div class="row col-12 q-gutter-lg">
+          <div class="col-12 row">
+            <div class="col-12 text-top0 items-center">
+              <q-avatar class="bg-grey-2 q-mr-sm" size="28px">1</q-avatar>
+              ผู้ทดลองปฏิบัติหน้าที่ราชการ
+            </div>
+            <div class="col-12 row q-col-gutter-md">
+              <div class="col-xs-12 col-sm-6">
+                <q-input
+                  :readonly="routeName != 'probationWorkAdd'"
+                  dense
+                  borderless
+                  :outlined="routeName == 'probationWorkAdd'"
+                  v-model="name"
+                  label="ชื่อ-สกุล"
+                />
+              </div>
+              <div class="col-xs-12 col-sm-6">
+                <q-input
+                  :readonly="routeName != 'probationWorkAdd'"
+                  dense
+                  borderless
+                  :outlined="routeName == 'probationWorkAdd'"
+                  v-model="position"
+                  label="ตำแหน่ง"
+                />
+              </div>
+            </div>
+          </div>
+          <div class="col-12">
+            <q-separator size="3px" color="grey-2" />
+          </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">2</q-avatar>
+              ผู้ดูแลการทดลองปฏิบัติหน้าที่ราชการ (อาจมีได้มากกว่า 1 คน)
+              <q-btn
+                v-if="routeName == 'probationWorkAdd'"
+                round
+                color="primary"
+                dense
+                icon="mdi-plus"
+                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">
-						<div class="col-12 text-top2">
-							<q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
-							3.3 สมรรถนะ (ตามที่ ก.ก. กําหนด)
-						</div>
-						<q-card bordered flat class="col-12 row q-pa-md bg-grey-1">
-							<div class="row col-12 q-gutter-lg">
-								<div class="col-12 row">
-									<div class="col-12 text-top2 ">
-										สมรรถนะหลัก
-									</div>
-									<div class="col-12 row q-col-gutter-sm">
-										<div class="col-xs-12 col-sm-6">
-											<q-select 
-											:options="OPmain" 
-											class="bg-white" 
-											:readonly="routeName != 'probationWorkAdd'"  
-											dense 
-											borderless 
-											:outlined="routeName == 'probationWorkAdd'"
-											v-model="main" 
-											label="ตัวที่ 1" />
-										</div>
-										<div class="col-xs-12 col-sm-6">
-											<q-select 
-											:options="OPmain" 
-											class="bg-white" 
-											:readonly="routeName != 'probationWorkAdd'"  
-											dense 
-											borderless 
-											:outlined="routeName == 'probationWorkAdd'"
-											v-model="main2" 
-											label="ตัวที่ 2" />
-										</div>
-										<div class="col-xs-12 col-sm-6">
-											<q-select 
-												:options="OPmain" 
-												class="bg-white" 
-												:readonly="routeName != 'probationWorkAdd'"  
-												dense 
-												borderless 
-												:outlined="routeName == 'probationWorkAdd'" 
-												v-model="main3" 
-												label="ตัวที่ 3" />
-											</div>
-										<div class="col-xs-12 col-sm-6">
-											<q-select 
-												:options="OPmain" 
-												class="bg-white" 
-												:readonly="routeName != 'probationWorkAdd'"  
-												dense 
-												borderless 
-												:outlined="routeName == 'probationWorkAdd'" 
-												v-model="main4" 
-												label="ตัวที่ 4" />
-										</div>
-										<div class="col-xs-12 col-sm-6">
-											<q-select 
-												:options="OPmain" 
-												class="bg-white" 
-												:readonly="routeName != 'probationWorkAdd'"  
-												dense 
-												borderless 
-												:outlined="routeName == 'probationWorkAdd'"
-												v-model="main5" 
-												label="ตัวที่ 4" />
-										</div>
-									</div>
-								</div>
-								<div class="col-12 row">
-									<div class="col-12 text-top2 ">
-										สมรรถนะประจํากลุ่มงาน
-									</div>
-									<div class="col-12 row q-col-gutter-sm">
-										<div class="col-xs-12 col-sm-6">
-											<q-select 
-												:options="OPgroup" 
-												class="bg-white" 
-												:readonly="routeName != 'probationWorkAdd'"  
-												dense 
-												borderless 
-												:outlined="routeName == 'probationWorkAdd'" 
-												v-model="group" 
-												label="ตัวที่ 1" />
-										</div>
-										<div class="col-xs-12 col-sm-6">
-											<q-select 
-												:options="OPgroup" 
-												class="bg-white" 
-												:readonly="routeName != 'probationWorkAdd'"  
-												dense 
-												borderless 
-												:outlined="routeName == 'probationWorkAdd'" 
-												v-model="group2" 
-												label="ตัวที่ 2" />
-											</div>
-										<div class="col-xs-12 col-sm-6">
-											<q-select 
-												:options="OPgroup" 
-												class="bg-white" 
-												:readonly="routeName != 'probationWorkAdd'"  
-												dense 
-												borderless 
-												:outlined="routeName == 'probationWorkAdd'" 
-												v-model="group3" 
-												label="ตัวที่ 3" />
-										</div>
-									</div>
-								</div>
-							</div>
-						</q-card>
-					</div>
-					
-					<div class="col-12 row">
-						<div class="col-12 text-top2 row items-center">
-							<q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
-							3.4 พฤติกรรมที่จําเป็นสําหรับการปฏิบัติงาน<span class="text-weight-regular q-pl-sm"> ( ได้แก่ ความประพฤติ ความมีคุณธรรมจริยธรรม การรักษาวินัย )</span>
-						</div>
-						<q-card bordered flat class="col-12 row q-pa-md bg-grey-1">
-							<div class="row col-12 q-gutter-lg">
-								<div class="col-12 row">
-									<div class="col-12 text-top2 ">
-										ความประพฤติ ได้แก่
-									</div>
-									<div class="col-12 row q-col-gutter-md">
-										<div class="col-12 column q-ml-md">
-											<li>ให้บริการประชาชนหรือผู้รับบริการด้วยอธัยาศัยดี</li>
-											<li>มีความรับผิดชอบในการปฏิบัติงาน</li>
-											<li>ให้บริการประชาชนหรือผู้รับบริการด้วยความรวดเร็ว เอาใจใส่เป็นมาตรฐานเดียวกัน</li>
-											<li>ตั้งใจปฏิบัติหน้าที่ราชการด้วยความอุตสาหะ ขยันหมั่นเพียร</li>
-										</div>
-									</div>
-								</div>
-								<div class="col-12 row">
-									<div class="col-12 text-top2 ">
-									ความมีคุณธรรมจริยธรรม ได้แก่
-								</div>
-								<div class="col-12 row q-col-gutter-md">
-									<div class="col-12 column q-ml-md">
-										<li>อุทิศตนและเสียสละเวลาในการปฏิบัติงานอย่างเต็มกำลังความสามารถ</li>
-										<li>มีจิตสำนึกที่ดี ปฏิบัติงานด้วยความซื่อสัตย์ สุจริต</li>
-										<li>ยึดมั่นในสถาบันพระมหากษัตริย์ และไม่กระทำการใด ๆ อันจะก่อให้เกิดความเสียหายต่อประเทศชาติ ศาสนา และพระมหากษัตริย์</li>
-									</div>
-								</div>
-								</div>
-								<div class="col-12 row">
-									<div class="col-12 text-top2 ">
-										การรักษาวินัย ได้แก่
-									</div>
-									<div class="col-12 row q-col-gutter-md">
-										<div class="col-12 column q-ml-md">
-											<li>มีความรับผิดชอบในการรักษาเวลาทำงาน</li>
-											<li>แต่งกายในการปฏิบัติงานได้อย่างเหมาะสมกับการเป็นข้าราชการ</li>
-											<li>ไม่กระทำการใด ๆ อันเป็นการเสื่อมเกียรติและศักดิ์ศรีของความเป็นข้าราชการ</li>
-											<li>ไม่กระทำการใด ๆ อันอาจก่อให้เกิดความเสียหายแก่ชื่อเสียงของหน่วยงาน</li>
-											<li>ปฏิบัติหน้าที่อย่างตรงไปตรงมาโดยยึกหลักจรรยาบรรณวิชาชีพ</li>
-										</div>
-									</div>
-								</div>
-							</div>
-						</q-card>
-					</div>
-					
-					<div class="col-12 row">
-						<div class="col-12 text-top2">
-							<q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
-							3.5 อื่น ๆ (ถ้ามี)
-						</div>
-						<div class="col-12 row q-col-gutter-md">
-							<div class="col-12">
-								<q-input 
-								:readonly="routeName != 'probationWorkAdd'"  
-								dense 
-								borderless 
-								:outlined="routeName == 'probationWorkAdd'" 
-								v-model="Other" />
-							</div>
-						</div>
-					</div>
-					<div class="col-12 row">
-						<div class="col-12 text-top2 row items-center">
-							<q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
-							3.6 ผลผลิตของงานที่คาดหวังและตัวชี้วัดความสําเร็จของงาน
-							<q-btn v-if="routeName == 'probationWorkAdd'" round color="primary" dense icon="mdi-plus" flat class="q-ml-sm" />
-						</div>
-						<div class="col-12 row q-gutter-md">
-							<q-card 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 
-											class="bg-white" 
-											type="textarea" 
-											:readonly="routeName != 'probationWorkAdd'"  
-											dense 
-											borderless 
-											:outlined="routeName == 'probationWorkAdd'" 
-											v-model="activity1" 
-											label="ผลผลิตของงานที่คาดหวัง (ไม่เกิน 10 บรรทัด)" />
-										</div>
-										<div class="col-xs-12 col-sm-6">
-											<q-input 
-											class="bg-white" 
-											type="textarea" 
-											:readonly="routeName != 'probationWorkAdd'"  
-											dense 
-											borderless 
-											:outlined="routeName == 'probationWorkAdd'" 
-											v-model="goal1" 
-											label="ตัวชี้วัดความสําเร็จของงาน (ไม่เกิน 10 บรรทัด)" />
-										</div>
-								</div>
-							</q-card>
-						</div>
-					</div>
-					<div class="col-12">
-						<q-separator size="3px" color="grey-2"  />
-					</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">4</q-avatar>
-							การพัฒนาผู้ทดลองปฏิบัติหน้าที่ราชการ
-						</div>
-						<div class="col-12 row">
-							<div class="col-12 text-top2 ">
-								ผู้ทดลองปฏิบัติหน้าที่ราชการต้องเข้าร่วมในการปฐมนิเทศและอบรมหลักสูตรต่าง ๆ ภายในระยะเวลาทดลองปฏิบัติหน้าที่ราชการ ดังนี้
-							</div>
-							<div class="col-12 text-top2 row items-center">
-								<q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
-								4.1 การปฐมนิเทศเพื่อให้มีความรู้เกี่ยวกับหน่วยงาน/ส่วนราชการ
-							</div>
-							<div class="col-12 text-top2 row items-center">
-								<q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
-								4.2 การเรียนรู้ด้วยตนเองเพื่อให้มีความรู้เกี่ยวกับกฎหมายกฎระเบียบแบบแผนของทางราชการ
-							</div>
-							<div class="col-12 text-top2 row items-center">
-								<q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
-								4.3 การอบรมสัมมนาร่วมกันเพื่อปลูกฝังการประพฤติปฏิบัติตนเป็นข้าราชการที่ดี
-							</div>
-							<div class="col-12 text-top2 row items-center">
-								<q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
-								4.4 การอบรมอื่น ๆ ที่หน่วยงานกำหนด (ถ้ามี)
-							</div>
-						</div>
-					</div>
-					<div class="col-12">
-						<q-separator size="3px" color="grey-2"  />
-					</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">5</q-avatar>
-							การประเมินผลการทดลองปฏิบัติหน้าที่ราชการ
-						</div>
-						<div class="col-12 text-top2 row items-center">
-							<q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
-							5.1 ประเมินผลการทดลองปฏิบัติหน้าที่ราชการโดยคณะกรรมการประเมินผลการทดลองปฏิบัติหน้าที่ราชการ
-						</div>
-						<div class="col-12 text-top2 row items-center">
-							<q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
-							5.2 รายละเอียดการประเมินประกอบด้วย 2 ส่วนคือ
-						</div>
-						<div class="col-12 row q-gutter-md">
-							<q-card flat bordered class="col-12 q-pa-md bg-grey-1">
-								<div class="col-12 text-top2 ">
-									การรักษาวินัย ได้แก่
-								</div>
-								<div class="col-12 row q-col-gutter-md">
-									<div class="col-12 column q-ml-md">
-										<li>ความรู้ความสามารถที่ ก.ก. กำหนด</li>
-										<li>ทักษะที่ ก.ก. กำหนด</li>
-										<li>สมรรถนะตามที่ ก.ก. กำหนด</li>
-										<li>ความสามารถในการเรียนรู้งานในตำแหน่ง</li>
-										<li>ความสามารถในการปรับใช้ความรู้กับงานในหน้าที่</li>
-										<li>ความสำเร็จของงานที่ได้รับมอบหมาย</li>
-										<li>อื่นๆ (ถ้ามี) <q-input dense outlined v-model="Other" label="กรอกอื่นๆ" /></li>
-									</div>
-								</div>
-							</q-card>
-						</div>
-					</div>
-					<div class="col-12 row">
-						<div class="col-12 text-top2 row items-center">
-							<q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
-							5.3 ข้อมูลที่ใช้ประกอบการประเมินผลการทดลองปฏิบัติหน้าที่ราชการประกอบด้วย
-						</div>
-						<div class="col-12 row q-gutter-md">
-							<q-card flat bordered class="col-12 q-pa-md bg-grey-1">
-								<div class="col-12 row q-col-gutter-md">
-									<div class="col-12 column q-ml-md">
-										<li>บันทึกผลการทดลองปฏิบัติหน้าที่ราชการของผู้ดูแลการทดลองปฏิบัติหน้าที่ราชการและผู้บังคับบัญา</li>
-										<li>แบบประเมินผลการทดลองปฏิบัติหน้าที่ราชการของผู้บังคับบัญชา</li>
-										<li>รายงานผลการพัฒนาตามที่สำนักงาน ก.ก.กำหนด</li>
-									</div>
-								</div>
-							</q-card>
-						</div>
-					</div>
-					<div class="col-12 row">
-						<div class="col-12 text-top2 row items-center">
-							<q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
-							5.3 สัดส่วนของคะแนนและมาตรฐานการประเมิน
-						</div>
-						<div class="col-12 row q-gutter-md">
-							<q-card flat bordered class="col-12 q-pa-md bg-grey-1">
-								<div class="col-12 row q-col-gutter-md">
-									<div class="col-12 column q-ml-md">
-										<li>สัดส่วนของคะแนนการทดลองปฏิบัติหน้าที่ราชการ</li>
-										<div class="q-pl-lg">ส่วนที่ 1 คะแนนผลสัมฤทธิ์ของการทดลองปฏิบัติหน้าที่ราชการร้อยละ 50</div>
-										<div class="q-pl-lg">ส่วนที่ 2 คะแนนพฤติกรรมของผู้ทดลองปฏิบัติหน้าที่ราชการร้อยละ 50</div>
-										<div class="q-pl-lg">มาตรฐานการประเมินแต่ละส่วนต้องได้คะแนนไม่ต่ำกว่าร้อยละ 60</div>
-										<li>สัดส่วนคะแนนการพัฒนาข้าราชการที่อยู่ระหว่างการทดลองปฏิบัติหน้าที่ราชการ</li>
-										<div class="q-pl-lg">คะแนนรวมของการพัฒนาจะต้องไม่น้อยกว่าร้อยละ 60</div>
-										<div><span style="text-decoration: underline; ">หมายเหตุ</span> ให้นำคะแนนรวมทั้ง 2 ส่วนมารวมกันแล้วต้องได้คะแนนไม่น้อยกว่าร้อยละ 60 จึงถือว่าผ่านการประเมินการทดลองปฏิบัติหน้าที่ราชการ</div>
-									</div>
-								</div>
-							</q-card>
-						</div>
-					</div>
-					<div class="col-12">
-						<q-separator size="3px" color="grey-2"  />
-					</div>
-					<div class="col-12 row">
-						<div class="col-12 text-top0 items-center">
-							การลงชื่อเพื่อมอบหมายงานและรับมอบหมายงานในการทดลองปฏิบัติหน้าที่ราชการ
-						</div>
-						<div class="col-12 row">
-							<div class="col-12 text-top2 row items-center">
-								<q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
-								ผู้ทดลองปฏิบัติหน้าที่ราชการ
-							</div>
-						</div>
-						<div class="col-12 row q-col-gutter-md">
-							<div class="col-xs-12 col-sm-4">
-								<q-input 
-									:readonly="routeName != 'probationWorkAdd'"  
-									dense 
-									borderless 
-									:outlined="routeName == 'probationWorkAdd'" 
-									v-model="name" 
-									label="ชื่อ-สกุล" />
-							</div>
-							<div class="col-xs-12 col-sm-4">
-								<q-input 
-									:readonly="routeName != 'probationWorkAdd'"  
-									dense 
-									borderless 
-									:outlined="routeName == 'probationWorkAdd'" 
-									v-model="position" 
-									label="ตำแหน่ง" />
-							</div>
-							<div class="col-xs-12 col-sm-4">
-								<datepicker
-									menu-class-name="modalfix"
-									v-model="date1"
-									: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
-											:readonly="routeName != 'probationWorkAdd'"  
-											dense 
-											borderless 
-											:outlined="routeName == 'probationWorkAdd'"
-											class="full-width datepicker"
-											:model-value="
-												date1 != null ? date2Thai(date1) : null
-											"
-											label="ลงวันที่"
-										>
-											<template v-slot:prepend>
-											<q-icon
-												name="event"
-												class="cursor-pointer"
-												style="color: var(--q-primary)"
-											>
-											</q-icon>
-											</template>
-										</q-input>
-									</template>
-								</datepicker>
-							</div>
-						</div>
-					</div>
-					<div class="col-12 row">
-						<div class="col-12 text-top2 row items-center">
-							<q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
-							ผู้ดูแลการทดลองปฏิบัติหน้าที่ราชการ
-						</div>
-						<div class="col-12 row q-col-gutter-md">
-							<q-select 
-								:options="OPcaretaker1" 
-								class="col-xs-12 col-sm-8" 
-								:readonly="routeName != 'probationWorkAdd'"  
-								dense 
-								borderless 
-								:outlined="routeName == 'probationWorkAdd'" 
-								v-model="caretaker" 
-								label="ผู้ดูแลคนที่ 1" />
-							<div class="col-xs-12 col-sm-4">
-								<datepicker
-									menu-class-name="modalfix"
-									v-model="date2"
-									: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
-											:readonly="routeName != 'probationWorkAdd'"  
-											dense 
-											borderless 
-											:outlined="routeName == 'probationWorkAdd'"
-											class="full-width datepicker"
-											:model-value="
-												date2 != null ? date2Thai(date2) : null
-											"
-											label="ลงวันที่"
-										>
-											<template v-slot:prepend>
-											<q-icon
-												name="event"
-												class="cursor-pointer"
-												style="color: var(--q-primary)"
-											>
-											</q-icon>
-											</template>
-										</q-input>
-									</template>
-								</datepicker>
-							</div>
-							<q-select 
-								:options="OPcaretaker2" 
-								class="col-xs-12 col-sm-8" 
-								:readonly="routeName != 'probationWorkAdd'"  
-								dense 
-								borderless 
-								:outlined="routeName == 'probationWorkAdd'" 
-								v-model="caretaker2" 
-								label="ผู้ดูแลคนที่ 2" />
-							<div class="col-xs-12 col-sm-4">
-								<datepicker
-									menu-class-name="modalfix"
-									v-model="date3"
-									:locale="'th'"
-									autoApply
-									borderless
-									:enableTimePicker="false"
-									week-start="0"
-									>
-									<template #year="{ year }">
-										{{ year + 543 }}
-									</template>
-									<template #year-overlay-value="{ value }">
-										{{ parseInt(value + 543) }}
-									</template>
-									<template #trigger>
-										<q-input
-											:readonly="routeName != 'probationWorkAdd'"
-											dense 
-s											borderless 
-											:outlined="routeName == 'probationWorkAdd'"
-											class="full-width datepicker"
-											:model-value="
-												date3 != null ? date2Thai(date3) : null
-											"
-											label="ลงวันที่"
-										>
-											<template v-slot:prepend>
-											<q-icon
-												name="event"
-												class="cursor-pointer"
-												style="color: var(--q-primary)"
-											>
-											</q-icon>
-											</template>
-										</q-input>
-									</template>
-								</datepicker>
-							</div>
-						</div>
-					</div>
-					<div class="col-12 row">
-						<div class="col-12 text-top2 row items-center">
-							<q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
-							ผู้บังคับบัญชาผู้มอบหมายงาน
-						</div>
-						<div class="col-12 row q-col-gutter-md">
-							<q-select 
-								:options="OPcaretaker1" 
-								class="col-xs-12 col-sm-8" 
-								:readonly="routeName != 'probationWorkAdd'"  
-								dense 
-								borderless 
-								:outlined="routeName == 'probationWorkAdd'" 
-								v-model="commander" 
-								label="ผู้บังคับบัญชา" />
-							<div class="col-xs-12 col-sm-4">
-								<datepicker
-									menu-class-name="modalfix"
-									v-model="date4"
-									: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
-											:readonly="routeName != 'probationWorkAdd'"  
-											dense 
-											borderless 
-											:outlined="routeName == 'probationWorkAdd'"
-											class="full-width datepicker"
-											:model-value="
-												date4 != null ? date2Thai(date4) : null
-											"
-											label="ลงวันที่"
-										>
-											<template v-slot:prepend>
-											<q-icon
-												name="event"
-												class="cursor-pointer"
-												style="color: var(--q-primary)"
-											>
-											</q-icon>
-											</template>
-										</q-input>
-									</template>
-								</datepicker>
-							</div>
-						</div>
-					</div>
-				</div>
-			</div>
-			<q-separator v-show="routeName == 'probationWorkAdd'" />
-			<div v-show="routeName == 'probationWorkAdd'" class="flex justify-end q-pa-sm q-gutter-sm">
-				<q-btn unelevated label="บันทึก" color="public"/>
-			</div>
-		</q-card>
-	</div>
+            <div class="col-12 row q-col-gutter-md">
+              <q-select
+                v-for="item in caretakerCount"
+                :key="item"
+                :options="getOptions(item)"
+                class="col-xs-12 col-sm-6"
+                :readonly="routeName != 'probationWorkAdd'"
+                dense
+                borderless
+                :outlined="routeName == 'probationWorkAdd'"
+                v-model="caretakers[item - 1]"
+                :label="`ผู้ดูแลคนที่ ${item}`"
+              />
+            </div>
+          </div>
+          <div class="col-12">
+            <q-separator size="3px" color="grey-2" />
+          </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">3</q-avatar>
+              ผลการปฏิบัติงาน
+            </div>
+            <div class="col-12 text-top2 row items-center">
+              <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
+              3.1 ชื่องาน / ภารกิจงานที่มอบหมาย (ควรมีมากกว่า 1 ภารกิจงาน)
+              <q-btn
+                v-if="routeName == 'probationWorkAdd'"
+                round
+                color="primary"
+                dense
+                icon="mdi-plus"
+                flat
+                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">
+              <q-card
+                v-for="item in activityCount"
+                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
+                      :readonly="routeName != 'probationWorkAdd'"
+                      dense
+                      borderless
+                      :outlined="routeName == 'probationWorkAdd'"
+                      class="bg-white"
+                      type="textarea"
+                      v-model="activities[item - 1]"
+                      label="กิจกรรมของงาน/ขั้นตอนการปฏิบัติงาน(ไม่เกิน10บรรทัด )"
+                    />
+                  </div>
+                  <div class="col-xs-12 col-sm-6">
+                    <q-input
+                      :readonly="routeName != 'probationWorkAdd'"
+                      dense
+                      borderless
+                      :outlined="routeName == 'probationWorkAdd'"
+                      class="bg-white"
+                      type="textarea"
+                      v-model="goals[item - 1]"
+                      label="เป้าหมายในการปฏิบัติงาน(ไม่เกิน10บรรทัด )"
+                    />
+                  </div>
+                </div>
+              </q-card>
+            </div>
+          </div>
+          <div class="col-12 row">
+            <div class="col-12 text-top2">
+              <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
+              3.2 ความรู้ความสามารถและทักษะ(ตามที่ก.ก.กําหนด)
+            </div>
+            <q-card bordered flat class="col-12 row q-pa-md bg-grey-1">
+              <div class="row col-12 q-gutter-lg">
+                <div class="col-12 row">
+                  <div class="col-12 text-top2 row items-center">
+                    ความรู้ความสามารถในการปฏิบัติงาน
+                    <q-btn
+                      v-if="routeName == 'probationWorkAdd'"
+                      round
+                      color="primary"
+                      dense
+                      icon="mdi-plus"
+                      flat
+                      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">
+                      <q-select
+                        :options="getOpknowledge(item)"
+                        class="bg-white"
+                        :readonly="routeName != 'probationWorkAdd'"
+                        dense
+                        borderless
+                        :outlined="routeName == 'probationWorkAdd'"
+                        v-model="knowledge[item - 1]"
+                        :label="`ความรู้ความสามารถในการปฏิบัติงาน ${item}`"
+                      />
+                    </div>
+                  </div>
+                </div>
+                <div class="col-12 row">
+                  <div class="col-12 text-top2 row items-center">
+                    ความรู้เรื่องกฎหมายและกฎระเบียบ (ไม่เกิน 20 หัวข้อ)
+                    <!-- <q-btn
+                      v-if="routeName == 'probationWorkAdd'"
+                      round
+                      color="primary"
+                      dense
+                      icon="mdi-plus"
+                      flat
+                      class="q-ml-sm"
+                    /> -->
+                  </div>
+                  <q-card
+                    flat
+                    bordered
+                    class="col-12 q-pa-md"
+                    style="max-height: 500px; overflow-y: scroll"
+                  >
+                    <div class="example-row-column-width">
+                      <div class="row bg-grey-3 q-py-xs">
+                        <div class="col-1 text-center">
+                          <q-checkbox
+                            v-model="val1"
+                            dense
+                            :disable="routeName != 'probationWorkAdd'"
+                          />
+                        </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="col-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
+                            v-model="item.checked"
+                            dense
+                            :disable="routeName != 'probationWorkAdd'"
+                          />
+                        </div>
+
+                        <div class="col-9 q-pl-xl">{{ item.text }}</div>
+                      </div>
+					  <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>
+					  <div
+                        v-for="item in checkList22"
+                        :key="item.id"
+                        class="row q-py-xs borderCheck border_y"
+                      >
+                        <div class="col-1 text-center">
+                          <q-checkbox
+                            v-model="item.checked"
+                            dense
+                            :disable="routeName != 'probationWorkAdd'"
+                          />
+                        </div>
+
+                        <div class="col-9 q-pl-xl">{{ item.text }}</div>
+                      </div>
+					  <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>
+					  <div
+                        v-for="item in checkList23"
+                        :key="item.id"
+                        class="row q-py-xs borderCheck border_y"
+                      >
+                        <div class="col-1 text-center">
+                          <q-checkbox
+                            v-model="item.checked"
+                            dense
+                            :disable="routeName != 'probationWorkAdd'"
+                          />
+                        </div>
+
+                        <div class="col-9 q-pl-xl">{{ item.text }}</div>
+                      </div>
+					  <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>
+					  <div
+                        v-for="item in checkList24"
+                        :key="item.id"
+                        class="row q-py-xs borderCheck border_y"
+                      >
+                        <div class="col-1 text-center">
+                          <q-checkbox
+                            v-model="item.checked"
+                            dense
+                            :disable="routeName != 'probationWorkAdd'"
+                          />
+                        </div>
+
+                        <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"
+                            dense
+                            :disable="routeName != 'probationWorkAdd'"
+                          />
+                        </div>
+                        <div class="col-11">3. กฎหมายอื่นๆ ที่เกี่ยวข้องกับการปฏิบัติงาน</div>
+                      </div>
+                    </div>
+                  </q-card>
+                </div>
+                <div class="col-12 row">
+                  <div class="col-12 text-top2">
+                    กฎหมายอื่น ๆ ที่เกี่ยวข้องกับการปฏิบัติงาน
+                  </div>
+                  <div class="col-12 row q-col-gutter-md">
+                    <div class="col-12">
+                      <q-input
+                        class="bg-white"
+                        :readonly="routeName != 'probationWorkAdd'"
+                        dense
+                        borderless
+                        :outlined="routeName == 'probationWorkAdd'"
+                        v-model="OtherLaw"
+                      />
+                    </div>
+                  </div>
+                </div>
+                <div class="col-12 row">
+                  <div class="col-12 text-top2">ทักษะ</div>
+                  <div class="col-12 row q-col-gutter-sm">
+                    <div class="col-xs-12 col-sm-6">
+                      <q-select
+                        :options="OPskill"
+                        class="bg-white"
+                        :readonly="routeName != 'probationWorkAdd'"
+                        dense
+                        borderless
+                        :outlined="routeName == 'probationWorkAdd'"
+                        v-model="skill"
+                        label="ด้านที่ 1"
+                      />
+                    </div>
+                    <div class="col-xs-12 col-sm-6">
+                      <q-select
+                        :options="OPskill"
+                        class="bg-white"
+                        :readonly="routeName != 'probationWorkAdd'"
+                        dense
+                        borderless
+                        :outlined="routeName == 'probationWorkAdd'"
+                        v-model="skill2"
+                        label="ด้านที่ 2"
+                      />
+                    </div>
+                    <div class="col-xs-12 col-sm-6">
+                      <q-select
+                        :options="OPskill"
+                        class="bg-white"
+                        :readonly="routeName != 'probationWorkAdd'"
+                        dense
+                        borderless
+                        :outlined="routeName == 'probationWorkAdd'"
+                        v-model="skill3"
+                        label="ด้านที่ 3"
+                      />
+                    </div>
+                    <div class="col-xs-12 col-sm-6">
+                      <q-select
+                        :options="OPskill"
+                        class="bg-white"
+                        :readonly="routeName != 'probationWorkAdd'"
+                        dense
+                        borderless
+                        :outlined="routeName == 'probationWorkAdd'"
+                        v-model="skill4"
+                        label="ด้านที่ 4"
+                      />
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </q-card>
+          </div>
+
+          <div class="col-12 row">
+            <div class="col-12 text-top2">
+              <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
+              3.3 สมรรถนะ (ตามที่ ก.ก. กําหนด)
+            </div>
+            <q-card bordered flat class="col-12 row q-pa-md bg-grey-1">
+              <div class="row col-12 q-gutter-lg">
+                <div class="col-12 row">
+                  <div class="col-12 text-top2">สมรรถนะหลัก</div>
+                  <div class="col-12 row q-col-gutter-sm">
+                    <div class="col-xs-12 col-sm-6">
+                      <q-select
+                        :options="OPmain"
+                        class="bg-white"
+                        :readonly="routeName != 'probationWorkAdd'"
+                        dense
+                        borderless
+                        :outlined="routeName == 'probationWorkAdd'"
+                        v-model="main"
+                        label="ตัวที่ 1"
+                      />
+                    </div>
+                    <div class="col-xs-12 col-sm-6">
+                      <q-select
+                        :options="OPmain"
+                        class="bg-white"
+                        :readonly="routeName != 'probationWorkAdd'"
+                        dense
+                        borderless
+                        :outlined="routeName == 'probationWorkAdd'"
+                        v-model="main2"
+                        label="ตัวที่ 2"
+                      />
+                    </div>
+                    <div class="col-xs-12 col-sm-6">
+                      <q-select
+                        :options="OPmain"
+                        class="bg-white"
+                        :readonly="routeName != 'probationWorkAdd'"
+                        dense
+                        borderless
+                        :outlined="routeName == 'probationWorkAdd'"
+                        v-model="main3"
+                        label="ตัวที่ 3"
+                      />
+                    </div>
+                    <div class="col-xs-12 col-sm-6">
+                      <q-select
+                        :options="OPmain"
+                        class="bg-white"
+                        :readonly="routeName != 'probationWorkAdd'"
+                        dense
+                        borderless
+                        :outlined="routeName == 'probationWorkAdd'"
+                        v-model="main4"
+                        label="ตัวที่ 4"
+                      />
+                    </div>
+                    <div class="col-xs-12 col-sm-6">
+                      <q-select
+                        :options="OPmain"
+                        class="bg-white"
+                        :readonly="routeName != 'probationWorkAdd'"
+                        dense
+                        borderless
+                        :outlined="routeName == 'probationWorkAdd'"
+                        v-model="main5"
+                        label="ตัวที่ 4"
+                      />
+                    </div>
+                  </div>
+                </div>
+                <div class="col-12 row">
+                  <div class="col-12 text-top2">สมรรถนะประจํากลุ่มงาน</div>
+                  <div class="col-12 row q-col-gutter-sm">
+                    <div class="col-xs-12 col-sm-6">
+                      <q-select
+                        :options="OPgroup"
+                        class="bg-white"
+                        :readonly="routeName != 'probationWorkAdd'"
+                        dense
+                        borderless
+                        :outlined="routeName == 'probationWorkAdd'"
+                        v-model="group"
+                        label="ตัวที่ 1"
+                      />
+                    </div>
+                    <div class="col-xs-12 col-sm-6">
+                      <q-select
+                        :options="OPgroup"
+                        class="bg-white"
+                        :readonly="routeName != 'probationWorkAdd'"
+                        dense
+                        borderless
+                        :outlined="routeName == 'probationWorkAdd'"
+                        v-model="group2"
+                        label="ตัวที่ 2"
+                      />
+                    </div>
+                    <div class="col-xs-12 col-sm-6">
+                      <q-select
+                        :options="OPgroup"
+                        class="bg-white"
+                        :readonly="routeName != 'probationWorkAdd'"
+                        dense
+                        borderless
+                        :outlined="routeName == 'probationWorkAdd'"
+                        v-model="group3"
+                        label="ตัวที่ 3"
+                      />
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </q-card>
+          </div>
+
+          <div class="col-12 row">
+            <div class="col-12 text-top2 row items-center">
+              <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
+              3.4 พฤติกรรมที่จําเป็นสําหรับการปฏิบัติงาน<span
+                class="text-weight-regular q-pl-sm"
+              >
+                ( ได้แก่ ความประพฤติ ความมีคุณธรรมจริยธรรม การรักษาวินัย )</span
+              >
+            </div>
+            <q-card bordered flat class="col-12 row q-pa-md bg-grey-1">
+              <div class="row col-12 q-gutter-lg">
+                <div class="col-12 row">
+                  <div class="col-12 text-top2">ความประพฤติ ได้แก่</div>
+                  <div class="col-12 row q-col-gutter-md">
+                    <div class="col-12 column q-ml-md">
+                      <li>ให้บริการประชาชนหรือผู้รับบริการด้วยอธัยาศัยดี</li>
+                      <li>มีความรับผิดชอบในการปฏิบัติงาน</li>
+                      <li>
+                        ให้บริการประชาชนหรือผู้รับบริการด้วยความรวดเร็ว
+                        เอาใจใส่เป็นมาตรฐานเดียวกัน
+                      </li>
+                      <li>
+                        ตั้งใจปฏิบัติหน้าที่ราชการด้วยความอุตสาหะ ขยันหมั่นเพียร
+                      </li>
+                    </div>
+                  </div>
+                </div>
+                <div class="col-12 row">
+                  <div class="col-12 text-top2">
+                    ความมีคุณธรรมจริยธรรม ได้แก่
+                  </div>
+                  <div class="col-12 row q-col-gutter-md">
+                    <div class="col-12 column q-ml-md">
+                      <li>
+                        อุทิศตนและเสียสละเวลาในการปฏิบัติงานอย่างเต็มกำลังความสามารถ
+                      </li>
+                      <li>
+                        มีจิตสำนึกที่ดี ปฏิบัติงานด้วยความซื่อสัตย์ สุจริต
+                      </li>
+                      <li>
+                        ยึดมั่นในสถาบันพระมหากษัตริย์ และไม่กระทำการใด ๆ
+                        อันจะก่อให้เกิดความเสียหายต่อประเทศชาติ ศาสนา
+                        และพระมหากษัตริย์
+                      </li>
+                    </div>
+                  </div>
+                </div>
+                <div class="col-12 row">
+                  <div class="col-12 text-top2">การรักษาวินัย ได้แก่</div>
+                  <div class="col-12 row q-col-gutter-md">
+                    <div class="col-12 column q-ml-md">
+                      <li>มีความรับผิดชอบในการรักษาเวลาทำงาน</li>
+                      <li>
+                        แต่งกายในการปฏิบัติงานได้อย่างเหมาะสมกับการเป็นข้าราชการ
+                      </li>
+                      <li>
+                        ไม่กระทำการใด ๆ
+                        อันเป็นการเสื่อมเกียรติและศักดิ์ศรีของความเป็นข้าราชการ
+                      </li>
+                      <li>
+                        ไม่กระทำการใด ๆ
+                        อันอาจก่อให้เกิดความเสียหายแก่ชื่อเสียงของหน่วยงาน
+                      </li>
+                      <li>
+                        ปฏิบัติหน้าที่อย่างตรงไปตรงมาโดยยึกหลักจรรยาบรรณวิชาชีพ
+                      </li>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </q-card>
+          </div>
+
+          <div class="col-12 row">
+            <div class="col-12 text-top2">
+              <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
+              3.5 อื่น ๆ (ถ้ามี)
+            </div>
+            <div class="col-12 row q-col-gutter-md">
+              <div class="col-12">
+                <q-input
+                  :readonly="routeName != 'probationWorkAdd'"
+                  dense
+                  borderless
+                  :outlined="routeName == 'probationWorkAdd'"
+                  v-model="Other"
+                />
+              </div>
+            </div>
+          </div>
+          <div class="col-12 row">
+            <div class="col-12 text-top2 row items-center">
+              <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
+              3.6 ผลผลิตของงานที่คาดหวังและตัวชี้วัดความสําเร็จของงาน
+              <q-btn
+                v-if="routeName == 'probationWorkAdd'"
+                round
+                color="primary"
+                dense
+                icon="mdi-plus"
+                flat
+                class="q-ml-sm"
+				@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">
+                <div class="col-12 row q-col-gutter-sm">
+                  <div class="col-xs-12 col-sm-6">
+                    <q-input
+                      class="bg-white"
+                      type="textarea"
+                      :readonly="routeName != 'probationWorkAdd'"
+                      dense
+                      borderless
+                      :outlined="routeName == 'probationWorkAdd'"
+                      v-model="Productivitys[item-1]"
+                      label="ผลผลิตของงานที่คาดหวัง (ไม่เกิน 10 บรรทัด)"
+                    />
+                  </div>
+                  <div class="col-xs-12 col-sm-6">
+                    <q-input
+                      class="bg-white"
+                      type="textarea"
+                      :readonly="routeName != 'probationWorkAdd'"
+                      dense
+                      borderless
+                      :outlined="routeName == 'probationWorkAdd'"
+                      v-model="goals1[item-1]"
+                      label="ตัวชี้วัดความสําเร็จของงาน (ไม่เกิน 10 บรรทัด)"
+                    />
+                  </div>
+                </div>
+              </q-card>
+            </div>
+          </div>
+          <div class="col-12">
+            <q-separator size="3px" color="grey-2" />
+          </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">4</q-avatar>
+              การพัฒนาผู้ทดลองปฏิบัติหน้าที่ราชการ
+            </div>
+            <div class="col-12 row">
+              <div class="col-12 text-top2">
+                ผู้ทดลองปฏิบัติหน้าที่ราชการต้องเข้าร่วมในการปฐมนิเทศและอบรมหลักสูตรต่าง
+                ๆ ภายในระยะเวลาทดลองปฏิบัติหน้าที่ราชการ ดังนี้
+              </div>
+              <div class="col-12 text-top2 row items-center">
+                <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
+                4.1 การปฐมนิเทศเพื่อให้มีความรู้เกี่ยวกับหน่วยงาน/ส่วนราชการ
+              </div>
+              <div class="col-12 text-top2 row items-center">
+                <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
+                4.2
+                การเรียนรู้ด้วยตนเองเพื่อให้มีความรู้เกี่ยวกับกฎหมายกฎระเบียบแบบแผนของทางราชการ
+              </div>
+              <div class="col-12 text-top2 row items-center">
+                <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
+                4.3
+                การอบรมสัมมนาร่วมกันเพื่อปลูกฝังการประพฤติปฏิบัติตนเป็นข้าราชการที่ดี
+              </div>
+              <div class="col-12 text-top2 row items-center">
+                <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
+                4.4 การอบรมอื่น ๆ ที่หน่วยงานกำหนด (ถ้ามี)
+              </div>
+            </div>
+          </div>
+          <div class="col-12">
+            <q-separator size="3px" color="grey-2" />
+          </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">5</q-avatar>
+              การประเมินผลการทดลองปฏิบัติหน้าที่ราชการ
+            </div>
+            <div class="col-12 text-top2 row items-center">
+              <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
+              5.1
+              ประเมินผลการทดลองปฏิบัติหน้าที่ราชการโดยคณะกรรมการประเมินผลการทดลองปฏิบัติหน้าที่ราชการ
+            </div>
+            <div class="col-12 text-top2 row items-center">
+              <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
+              5.2 รายละเอียดการประเมินประกอบด้วย 2 ส่วนคือ
+            </div>
+            <div class="col-12 row q-gutter-md">
+              <q-card flat bordered class="col-12 q-pa-md bg-grey-1">
+                <div class="col-12 text-top2">การรักษาวินัย ได้แก่</div>
+                <div class="col-12 row q-col-gutter-md">
+                  <div class="col-12 column q-ml-md">
+                    <li>ความรู้ความสามารถที่ ก.ก. กำหนด</li>
+                    <li>ทักษะที่ ก.ก. กำหนด</li>
+                    <li>สมรรถนะตามที่ ก.ก. กำหนด</li>
+                    <li>ความสามารถในการเรียนรู้งานในตำแหน่ง</li>
+                    <li>ความสามารถในการปรับใช้ความรู้กับงานในหน้าที่</li>
+                    <li>ความสำเร็จของงานที่ได้รับมอบหมาย</li>
+                    <li>
+                      อื่นๆ (ถ้ามี)
+                      <q-input
+                        dense
+                        outlined
+                        v-model="Other"
+                        label="กรอกอื่นๆ"
+                      />
+                    </li>
+                  </div>
+                </div>
+              </q-card>
+            </div>
+          </div>
+          <div class="col-12 row">
+            <div class="col-12 text-top2 row items-center">
+              <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
+              5.3
+              ข้อมูลที่ใช้ประกอบการประเมินผลการทดลองปฏิบัติหน้าที่ราชการประกอบด้วย
+            </div>
+            <div class="col-12 row q-gutter-md">
+              <q-card flat bordered class="col-12 q-pa-md bg-grey-1">
+                <div class="col-12 row q-col-gutter-md">
+                  <div class="col-12 column q-ml-md">
+                    <li>
+                      บันทึกผลการทดลองปฏิบัติหน้าที่ราชการของผู้ดูแลการทดลองปฏิบัติหน้าที่ราชการและผู้บังคับบัญา
+                    </li>
+                    <li>
+                      แบบประเมินผลการทดลองปฏิบัติหน้าที่ราชการของผู้บังคับบัญชา
+                    </li>
+                    <li>รายงานผลการพัฒนาตามที่สำนักงาน ก.ก.กำหนด</li>
+                  </div>
+                </div>
+              </q-card>
+            </div>
+          </div>
+          <div class="col-12 row">
+            <div class="col-12 text-top2 row items-center">
+              <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
+              5.3 สัดส่วนของคะแนนและมาตรฐานการประเมิน
+            </div>
+            <div class="col-12 row q-gutter-md">
+              <q-card flat bordered class="col-12 q-pa-md bg-grey-1">
+                <div class="col-12 row q-col-gutter-md">
+                  <div class="col-12 column q-ml-md">
+                    <li>สัดส่วนของคะแนนการทดลองปฏิบัติหน้าที่ราชการ</li>
+                    <div class="q-pl-lg">
+                      ส่วนที่ 1
+                      คะแนนผลสัมฤทธิ์ของการทดลองปฏิบัติหน้าที่ราชการร้อยละ 50
+                    </div>
+                    <div class="q-pl-lg">
+                      ส่วนที่ 2
+                      คะแนนพฤติกรรมของผู้ทดลองปฏิบัติหน้าที่ราชการร้อยละ 50
+                    </div>
+                    <div class="q-pl-lg">
+                      มาตรฐานการประเมินแต่ละส่วนต้องได้คะแนนไม่ต่ำกว่าร้อยละ 60
+                    </div>
+                    <li>
+                      สัดส่วนคะแนนการพัฒนาข้าราชการที่อยู่ระหว่างการทดลองปฏิบัติหน้าที่ราชการ
+                    </li>
+                    <div class="q-pl-lg">
+                      คะแนนรวมของการพัฒนาจะต้องไม่น้อยกว่าร้อยละ 60
+                    </div>
+                    <div>
+                      <span style="text-decoration: underline">หมายเหตุ</span>
+                      ให้นำคะแนนรวมทั้ง 2
+                      ส่วนมารวมกันแล้วต้องได้คะแนนไม่น้อยกว่าร้อยละ 60
+                      จึงถือว่าผ่านการประเมินการทดลองปฏิบัติหน้าที่ราชการ
+                    </div>
+                  </div>
+                </div>
+              </q-card>
+            </div>
+          </div>
+          <div class="col-12">
+            <q-separator size="3px" color="grey-2" />
+          </div>
+          <div class="col-12 row">
+            <div class="col-12 text-top0 items-center">
+              การลงชื่อเพื่อมอบหมายงานและรับมอบหมายงานในการทดลองปฏิบัติหน้าที่ราชการ
+            </div>
+            <div class="col-12 row">
+              <div class="col-12 text-top2 row items-center">
+                <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
+                ผู้ทดลองปฏิบัติหน้าที่ราชการ
+              </div>
+            </div>
+            <div class="col-12 row q-col-gutter-md">
+              <div class="col-xs-12 col-sm-4">
+                <q-input
+                  :readonly="routeName != 'probationWorkAdd'"
+                  dense
+                  borderless
+                  :outlined="routeName == 'probationWorkAdd'"
+                  v-model="name"
+                  label="ชื่อ-สกุล"
+                />
+              </div>
+              <div class="col-xs-12 col-sm-4">
+                <q-input
+                  :readonly="routeName != 'probationWorkAdd'"
+                  dense
+                  borderless
+                  :outlined="routeName == 'probationWorkAdd'"
+                  v-model="position"
+                  label="ตำแหน่ง"
+                />
+              </div>
+              <div class="col-xs-12 col-sm-4">
+                <datepicker
+                  menu-class-name="modalfix"
+                  v-model="date1"
+                  :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
+                      :readonly="routeName != 'probationWorkAdd'"
+                      dense
+                      borderless
+                      :outlined="routeName == 'probationWorkAdd'"
+                      class="full-width datepicker"
+                      :model-value="date1 != null ? date2Thai(date1) : null"
+                      label="ลงวันที่"
+                    >
+                      <template v-slot:prepend>
+                        <q-icon
+                          name="event"
+                          class="cursor-pointer"
+                          style="color: var(--q-primary)"
+                        >
+                        </q-icon>
+                      </template>
+                    </q-input>
+                  </template>
+                </datepicker>
+              </div>
+            </div>
+          </div>
+          <div class="col-12 row">
+            <div class="col-12 text-top2 row items-center">
+              <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
+              ผู้ดูแลการทดลองปฏิบัติหน้าที่ราชการ
+            </div>
+            <div class="col-12 row q-col-gutter-md">
+              <q-select
+                :options="OPcaretaker1"
+                class="col-xs-12 col-sm-8"
+                :readonly="routeName != 'probationWorkAdd'"
+                dense
+                borderless
+                :outlined="routeName == 'probationWorkAdd'"
+                v-model="caretaker"
+                label="ผู้ดูแลคนที่ 1"
+              />
+              <div class="col-xs-12 col-sm-4">
+                <datepicker
+                  menu-class-name="modalfix"
+                  v-model="date2"
+                  :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
+                      :readonly="routeName != 'probationWorkAdd'"
+                      dense
+                      borderless
+                      :outlined="routeName == 'probationWorkAdd'"
+                      class="full-width datepicker"
+                      :model-value="date2 != null ? date2Thai(date2) : null"
+                      label="ลงวันที่"
+                    >
+                      <template v-slot:prepend>
+                        <q-icon
+                          name="event"
+                          class="cursor-pointer"
+                          style="color: var(--q-primary)"
+                        >
+                        </q-icon>
+                      </template>
+                    </q-input>
+                  </template>
+                </datepicker>
+              </div>
+              <q-select
+                :options="OPcaretaker2"
+                class="col-xs-12 col-sm-8"
+                :readonly="routeName != 'probationWorkAdd'"
+                dense
+                borderless
+                :outlined="routeName == 'probationWorkAdd'"
+                v-model="caretaker2"
+                label="ผู้ดูแลคนที่ 2"
+              />
+              <div class="col-xs-12 col-sm-4">
+                <datepicker
+                  menu-class-name="modalfix"
+                  v-model="date3"
+                  :locale="'th'"
+                  autoApply
+                  borderless
+                  :enableTimePicker="false"
+                  week-start="0"
+                >
+                  <template #year="{ year }">
+                    {{ year + 543 }}
+                  </template>
+                  <template #year-overlay-value="{ value }">
+                    {{ parseInt(value + 543) }}
+                  </template>
+                  <template #trigger>
+                    <q-input
+                      :readonly="routeName != 'probationWorkAdd'"
+                      dense
+                      s
+                      borderless
+                      :outlined="routeName == 'probationWorkAdd'"
+                      class="full-width datepicker"
+                      :model-value="date3 != null ? date2Thai(date3) : null"
+                      label="ลงวันที่"
+                    >
+                      <template v-slot:prepend>
+                        <q-icon
+                          name="event"
+                          class="cursor-pointer"
+                          style="color: var(--q-primary)"
+                        >
+                        </q-icon>
+                      </template>
+                    </q-input>
+                  </template>
+                </datepicker>
+              </div>
+            </div>
+          </div>
+          <div class="col-12 row">
+            <div class="col-12 text-top2 row items-center">
+              <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
+              ผู้บังคับบัญชาผู้มอบหมายงาน
+            </div>
+            <div class="col-12 row q-col-gutter-md">
+              <q-select
+                :options="OPcaretaker1"
+                class="col-xs-12 col-sm-8"
+                :readonly="routeName != 'probationWorkAdd'"
+                dense
+                borderless
+                :outlined="routeName == 'probationWorkAdd'"
+                v-model="commander"
+                label="ผู้บังคับบัญชา"
+              />
+              <div class="col-xs-12 col-sm-4">
+                <datepicker
+                  menu-class-name="modalfix"
+                  v-model="date4"
+                  :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
+                      :readonly="routeName != 'probationWorkAdd'"
+                      dense
+                      borderless
+                      :outlined="routeName == 'probationWorkAdd'"
+                      class="full-width datepicker"
+                      :model-value="date4 != null ? date2Thai(date4) : null"
+                      label="ลงวันที่"
+                    >
+                      <template v-slot:prepend>
+                        <q-icon
+                          name="event"
+                          class="cursor-pointer"
+                          style="color: var(--q-primary)"
+                        >
+                        </q-icon>
+                      </template>
+                    </q-input>
+                  </template>
+                </datepicker>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <q-separator v-show="routeName == 'probationWorkAdd'" />
+      <div
+        v-show="routeName == 'probationWorkAdd'"
+        class="flex justify-end q-pa-sm q-gutter-sm"
+      >
+        <q-btn unelevated label="บันทึก" color="public" />
+      </div>
+    </q-card>
+  </div>
 </template>
 <script setup lang="ts">
 import { useRouter } from "vue-router";
 import { ref } from "vue";
 import { useCounterMixin } from "@/stores/mixin";
 // import type { QForm } from "quasar";
-
+const val1 = ref(false);
+const val3 = ref(false);
 const router = useRouter();
 
 const mixin = useCounterMixin();
 const { date2Thai } = mixin;
 
-const routeName = router.currentRoute.value.name
+const routeName = router.currentRoute.value.name;
 
-const name = ref<string>('นายสมคิด ยอดใจ');
-const position = ref<string>('นักจัดการงานทั่วไป');
+const name = ref<string>("นายสมคิด ยอดใจ");
+const position = ref<string>("นักจัดการงานทั่วไป");
 
-const caretaker = ref<string>('นางสาวรัชภรณ์ ภักดี');
-const caretaker2 = ref<string>('');
-const OPcaretaker1 = ['นางสาวรัชภรณ์ ภักดี','นางสาวทวิดา กมลเวชชี'];
-const OPcaretaker2 = ['นางสาวรัชภรณ์ ภักดี','นางสาวทวิดา กมลเวชชี'];
+const caretakerCount = ref<number>(1);
+const caretakerMax = ref<number>(6);
+const caretakers = ref<string[]>(Array(caretakerCount.value).fill(""));
+const caretaker2 = ref<string>("");
+const OPcaretaker = [
+  "นางสาวรัชภรณ์ ภักดี",
+  "นางสาวทวิดา กมลเวชชี",
+  "test1",
+  "test2",
+  "test3",
+  "test4",
+];
+const addCaretaker = () => {
+  caretakerCount.value++;
+};
+const getOptions = (item: number) => {
+  return OPcaretaker;
+};
+const resetCaretakers = () => {
+  caretakerCount.value = 1;
+  caretakers.value = Array(caretakerCount.value).fill("");
+};
+//-----------------(3.1)-----------//
+const activityCount = ref<number>(2);
+const activities = ref<string[]>(Array(activityCount.value).fill(""));
+const goals = ref<string[]>(Array(activityCount.value).fill(""));
 
-const activity1 = ref<string>('');
-const goal1 = ref<string>('');
-const activity2 = ref<string>('');
-const goal2 = ref<string>('');
+const addActivity = () => {
+  activityCount.value++;
+};
+const resetActivity = () => {
+  activityCount.value = 2;
+  activities.value = Array(activityCount.value).fill("");
+  goals.value = Array(activityCount.value).fill("");
+};
+//-----------------(3.2)-----------//
+const knowledgeCount = ref<number>(3);
+const knowledge = ref<string[]>(Array(knowledgeCount.value).fill(""));
+const OPknowledge = ["1", "2", "3", "4"];
+const addKnowledge = () => {
+  knowledgeCount.value++;
+};
+const getOpknowledge = (index: number) => {
+  return OPknowledge;
+};
+const resetKnowledge = () => {
+  knowledgeCount.value = 3;
+  knowledge.value = Array(knowledgeCount.value).fill("");
+};
 
-const knowledge = ref<string>('');
-const knowledge2 = ref<string>('');
-const knowledge3 = ref<string>('');
-const OPknowledge = ['',''];
+const productivityCount = ref<number>(1);
+const Productivitys = ref<string[]>(Array(productivityCount.value).fill(""));
+const goals1 = ref<string[]>(Array(productivityCount.value).fill(""));
 
+const addProductivity = () => {
+	productivityCount.value++;
+};
+const resetProductivity = () => {
+	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 },
+]);
+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 },
+]);
+const checkList23 = ref([
+  { 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 },
+]);
 const law = ref([]);
 const listlaw = [
-  { id: 1, label: 'ความรู้เรื่องกฎหมายและกฎระเบียบ 1' },
-	{ id: 2, label: 'ความรู้เรื่องกฎหมายและกฎระเบียบ 2' },
-	{ id: 3, label: 'ความรู้เรื่องกฎหมายและกฎระเบียบ 3' },
-	{ id: 4, label: 'ความรู้เรื่องกฎหมายและกฎระเบียบ 4' },
-	{ id: 5, label: 'ความรู้เรื่องกฎหมายและกฎระเบียบ 5' }
+  { id: 1, label: "2.1.1 กฎหมายว่าด้วยระเบียบบริหารราชการกรุงเทพมหานคร" },
+  { id: 2, label: "2.1.2 กฎหมายว่าด้วยระเบียบบริหารราชการเเผ่นดิน" },
+  { id: 3, label: "2.1.3 กฎหมายว่าด้วยลักษณะปกครองทองที่" },
+  {
+    id: 4,
+    label:
+      "2.1.4 ระเบียบสำนักนายกรัฐมนตรี ว่าด้วยการรับฟังความคิดเห็นสาธารณะโดยวิธีประชาพิจาร์ณ พ.ศ. ๒๕๓๙",
+  },
+  {
+    id: 5,
+    label:
+      "2.1.5 ระเบียบสำนักนายกรัฐมนตรี ว่าด้วยการสร้างระบบบริหารกิจการบ้านเมืองเเละสังคมที่ดี พ.ศ. ๒๕๔๒",
+  },
+  {
+    id: 5,
+    label:
+      "2.1.6 พระราชกฤษฏีกาว่าด้วยหลักเกณฑ์เเละวิธีการบริหารกิจการบ้านเมืองที่ดี พ.ศ. ๒๕๔๖",
+  },
 ];
-const OtherLaw = ref<string>('');
+const OtherLaw = ref<string>("");
 
-const skill = ref<string>('ความรู้ความสามารถด้าน 1');
-const skill2 = ref<string>('ความรู้ความสามารถด้าน 2');
-const skill3 = ref<string>('ความรู้ความสามารถด้าน 3');
-const skill4 = ref<string>('ความรู้ความสามารถด้าน 4');
-const OPskill = [''];
+const skill = ref<string>("ความรู้ความสามารถด้าน 1");
+const skill2 = ref<string>("ความรู้ความสามารถด้าน 2");
+const skill3 = ref<string>("ความรู้ความสามารถด้าน 3");
+const skill4 = ref<string>("ความรู้ความสามารถด้าน 4");
+const OPskill = [""];
 
-const main = ref<string>('คุณธรรมจริยธรรม')
-const main2 = ref<string>('การให้บริการที่ดี')
-const main3 = ref<string>('การมุ่งผลสัมฤทธิ์')
-const main4 = ref<string>('ทํางานเป็นทีม')
-const main5 = ref<string>('การสั่งสมความเชี่ยวชาญในอาชีพ')
-const OPmain = [''];
+const main = ref<string>("คุณธรรมจริยธรรม");
+const main2 = ref<string>("การให้บริการที่ดี");
+const main3 = ref<string>("การมุ่งผลสัมฤทธิ์");
+const main4 = ref<string>("ทํางานเป็นทีม");
+const main5 = ref<string>("การสั่งสมความเชี่ยวชาญในอาชีพ");
+const OPmain = [""];
 
-const group = ref<string>('')
-const group2 = ref<string>('')
-const group3 = ref<string>('')
-const OPgroup = [''];
+const group = ref<string>("");
+const group2 = ref<string>("");
+const group3 = ref<string>("");
+const OPgroup = [""];
 
-const Other = ref<string>('');
+const Other = ref<string>("");
 
-const commander = ref<string>('')
+const commander = ref<string>("");
 
 const date1 = ref<Date>(new Date());
 const date2 = ref<Date>(new Date());
@@ -906,21 +1237,27 @@ const date3 = ref<Date>(new Date());
 const date4 = ref<Date>(new Date());
 </script>
 <style lang="scss" scoped>
-.text-top2{
-	font-weight: 500;
-	padding-bottom: 8px;
-   color: rgb(70, 68, 68);
+.border_y{
+	border-left:1px solid #d8d8d8 ;
+	border-right:1px solid #d8d8d8 ;
 }
-.text-top0{
-	font-weight: 600;
-	padding-bottom: 8px;
-    color: rgb(70, 68, 68);
+.borderCheck{
+	border-bottom: 1px solid #d8d8d8;
 }
-.text-Hd{
-	font-weight: 600;
-    font-size: 1rem;
-    padding-bottom: 5px;
-    color: #02A998;
+.text-top2 {
+  font-weight: 500;
+  padding-bottom: 8px;
+  color: rgb(70, 68, 68);
 }
-
-</style>
\ No newline at end of file
+.text-top0 {
+  font-weight: 600;
+  padding-bottom: 8px;
+  color: rgb(70, 68, 68);
+}
+.text-Hd {
+  font-weight: 600;
+  font-size: 1rem;
+  padding-bottom: 5px;
+  color: #02a998;
+}
+</style>
diff --git a/src/modules/05_placement/router.ts b/src/modules/05_placement/router.ts
index 16cd8670c..8861854ec 100644
--- a/src/modules/05_placement/router.ts
+++ b/src/modules/05_placement/router.ts
@@ -30,7 +30,11 @@ const probationForm = () =>
   import("@/modules/05_placement/components/probation/MainDetail.vue");
 
 const probationWorkAdd = () =>
+  import("@/modules/05_placement/components/probation/MainDetail.vue");
+  const probationWorkAdd2 = () =>
   import("@/modules/05_placement/components/probation/AddWork.vue");
+  const resignOrder = () =>
+  import("@/modules/05_placement/components/OrderPlacement/ResignOrder.vue");
 export default [
   {
     path: "/placement",
@@ -142,4 +146,24 @@ export default [
       Role: "placement",
     },
   },
+  {
+    path: "/probation/add",
+    name: "probationWorkAdd",
+    component: probationWorkAdd2,
+    meta: {
+      Auth: true,
+      Key: [6.3],
+      Role: "placement",
+    },
+  },  
+  {
+    path: "/placement/resign-order",
+    name: "ResignOrderplacement",
+    component: resignOrder,
+    meta: {
+      Auth: true,
+      Key: [6.2],
+      Role: "placement",
+    },
+  },
 ];
diff --git a/src/views/MainLayout.vue b/src/views/MainLayout.vue
index ef5b9d5d2..f75b39507 100644
--- a/src/views/MainLayout.vue
+++ b/src/views/MainLayout.vue
@@ -719,6 +719,7 @@ if (keycloak.tokenParsed != null) {
                   menuItem.key == 3 ||
                   menuItem.key == 5 ||
                   menuItem.key == 6 ||
+                  menuItem.key == 7 ||
                   menuItem.key == 8
                 "
               >
@@ -942,11 +943,11 @@ if (keycloak.tokenParsed != null) {
 .expan2 .q-item {
   padding-left: 10%;
 }
-.subLabel{
-	white-space: nowrap; 
-	width: 160px; 
-	overflow: hidden;
-	text-overflow: ellipsis; 
+.subLabel {
+  white-space: nowrap;
+  width: 160px;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 .font-400 {
   font-weight: 400;