From 72d5720c0a5de0a8ef38d3e8d8b2054819a03282 Mon Sep 17 00:00:00 2001
From: Tanyalak <tanyalak@frappet.com>
Date: Thu, 29 Jun 2023 18:02:50 +0700
Subject: [PATCH 1/3] =?UTF-8?q?=E0=B8=9B=E0=B8=A3=E0=B8=B1=E0=B8=9A=20css?=
 =?UTF-8?q?=20=E0=B9=80=E0=B8=9E=E0=B8=B4=E0=B9=88=E0=B8=A1=E0=B9=80?=
 =?UTF-8?q?=E0=B8=95=E0=B8=B4=E0=B8=A1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/TableCandidate.vue             |   3 +-
 .../views/02_qualify/PeriodAdd.vue            | 177 +++++++++---------
 .../views/02_qualify/manageDetail.vue         |  18 +-
 .../04_registry/components/Profile.vue        |  10 +-
 .../components/pass/TableDetail.vue           |  16 +-
 5 files changed, 112 insertions(+), 112 deletions(-)

diff --git a/src/modules/03_recruiting/components/TableCandidate.vue b/src/modules/03_recruiting/components/TableCandidate.vue
index e454070d0..55f53c355 100644
--- a/src/modules/03_recruiting/components/TableCandidate.vue
+++ b/src/modules/03_recruiting/components/TableCandidate.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="q-px-md q-pb-md">
-    <div class="col-12 row q-py-sm items-center">
+    <div class="col-12 row q-py-sm  q-gutter-sm items-center">
       <span class="text-subtitle1">{{ titleText }}</span>
       <q-select
         dense
@@ -23,7 +23,6 @@
         use-chips
         multiple
         v-if="statusPayment"
-        class="q-pl-sm"
       >
         <template v-slot:prepend>
           <q-icon name="attach_file" color="blue" />
diff --git a/src/modules/03_recruiting/views/02_qualify/PeriodAdd.vue b/src/modules/03_recruiting/views/02_qualify/PeriodAdd.vue
index d9795e581..0112f7120 100644
--- a/src/modules/03_recruiting/views/02_qualify/PeriodAdd.vue
+++ b/src/modules/03_recruiting/views/02_qualify/PeriodAdd.vue
@@ -21,18 +21,19 @@
   <q-card flat bordered class="col-12 q-my-sm q-pt-sm">
     <q-form ref="myForm">
       <q-card-section class="q-pa-md">
-        <div class="col-xs-12 col-sm-8 items-top q-pb-md">
+        <div class="col-xs-12 col-sm-8 items-top q-pb-md" v-if="!edit">
           <q-toggle
             v-model="announcementExam"
             :false-value="true"
             :true-value="false"
             color="primary"
+            dense
+            class="text-weight-medium text-dark"
             label="ประกาศข่าวทั่วไป"
-            v-if="!edit"
           />
         </div>
         <div class="col-12 row items-top q-col-gutter-x-sm">
-          <div class="col-xs-12 col-sm-6 col-sm-5">
+          <div class="col-xs-12 col-sm-6 col-sm-8">
             <q-input
               outlined
               v-model="name"
@@ -69,7 +70,7 @@
               ]"
             ></q-input>
           </div>
-          <div class="col-xs-12 col-sm-4 col-md-1" v-if="announcementExam">
+          <div class="col-xs-12 col-sm-4 col-md-2" v-if="announcementExam">
             <datepicker
               menu-class-name="modalfix"
               v-model="yearly"
@@ -104,45 +105,7 @@
               </template>
             </datepicker>
           </div>
-          <div class="col-xs-12 col-sm-3 col-md-3" v-if="announcementExam">
-            <datepicker
-              menu-class-name="modalfix"
-              v-model="dateExam"
-              :locale="'th'"
-              autoApply
-              borderless
-              :enableTimePicker="false"
-              week-start="0"
-            >
-              <template #year="{ year }">
-                {{ year + 543 }}
-              </template>
-              <template #year-overlay-value="{ value }">
-                {{ parseInt(value + 543) }}
-              </template>
-              <template #trigger>
-                <q-input
-                  outlined
-                  dense
-                  class="full-width datepicker q-mb-md"
-                  :model-value="dateExam != null ? date2Thai(dateExam) : null"
-                  :label="`${'วันที่สอบ'}`"
-                  clearable
-                  @clear="clearDateExam"
-                >
-                  <template v-slot:prepend>
-                    <q-icon
-                      name="event"
-                      class="cursor-pointer"
-                      style="color: var(--q-primary)"
-                    >
-                    </q-icon>
-                  </template>
-                </q-input>
-              </template>
-            </datepicker>
-          </div>
-          <div class="col-xs-12 col-sm-3 col-md-3">
+          <div class="col-xs-12 col-sm-3 col-md-4">
             <datepicker
               menu-class-name="modalfix"
               v-model="dateAnnouncement"
@@ -163,7 +126,7 @@
                 <q-input
                   outlined
                   dense
-                  class="full-width datepicker q-mb-md"
+                  class="full-width datepicker "
                   :model-value="dateThaiRange(dateAnnouncement)"
                   :label="`${'วันที่ประกาศ'}`"
                   :rules="[(val) => !!val || `${'กรุณาเลือกวันที่ประกาศ'}`]"
@@ -180,7 +143,7 @@
               </template>
             </datepicker>
           </div>
-          <div class="col-xs-12 col-sm-3 col-md-3" v-if="announcementExam">
+          <div class="col-xs-12 col-sm-3 col-md-4" v-if="announcementExam">
             <datepicker
               menu-class-name="modalfix"
               v-model="dateRegister"
@@ -202,7 +165,7 @@
                 <q-input
                   outlined
                   dense
-                  class="full-width datepicker q-mb-md"
+                  class="full-width datepicker "
                   :model-value="dateThaiRange(dateRegister)"
                   :label="`${'วันที่สมัคร'}`"
                   clearable
@@ -220,7 +183,7 @@
               </template>
             </datepicker>
           </div>
-          <div class="col-xs-12 col-sm-3 col-md-3" v-if="announcementExam">
+          <div class="col-xs-12 col-sm-3 col-md-4" v-if="announcementExam">
             <datepicker
               menu-class-name="modalfix"
               v-model="datePayment"
@@ -241,7 +204,7 @@
                 <q-input
                   outlined
                   dense
-                  class="full-width datepicker q-mb-md"
+                  class="full-width datepicker "
                   :model-value="dateThaiRange(datePayment)"
                   :label="`${'วันที่ชำระเงิน'}`"
                   clearable
@@ -259,7 +222,7 @@
               </template>
             </datepicker>
           </div>
-          <div class="col-xs-12 col-sm-3 col-md-3" v-if="announcementExam">
+          <div class="col-xs-12 col-sm-2 col-md-2" v-if="announcementExam">
             <datepicker
               menu-class-name="modalfix"
               v-model="dateAnnounce"
@@ -279,7 +242,7 @@
                 <q-input
                   outlined
                   dense
-                  class="full-width datepicker q-mb-md"
+                  class="full-width datepicker "
                   :model-value="
                     dateAnnounce != null ? date2Thai(dateAnnounce) : null
                   "
@@ -299,7 +262,45 @@
               </template>
             </datepicker>
           </div>
-          <div class="col-xs-12 col-sm-3 col-md-3">
+          <div class="col-xs-12 col-sm-2 col-md-2" v-if="announcementExam">
+            <datepicker
+              menu-class-name="modalfix"
+              v-model="dateExam"
+              :locale="'th'"
+              autoApply
+              borderless
+              :enableTimePicker="false"
+              week-start="0"
+            >
+              <template #year="{ year }">
+                {{ year + 543 }}
+              </template>
+              <template #year-overlay-value="{ value }">
+                {{ parseInt(value + 543) }}
+              </template>
+              <template #trigger>
+                <q-input
+                  outlined
+                  dense
+                  class="full-width datepicker "
+                  :model-value="dateExam != null ? date2Thai(dateExam) : null"
+                  :label="`${'วันที่สอบ'}`"
+                  clearable
+                  @clear="clearDateExam"
+                >
+                  <template v-slot:prepend>
+                    <q-icon
+                      name="event"
+                      class="cursor-pointer"
+                      style="color: var(--q-primary)"
+                    >
+                    </q-icon>
+                  </template>
+                </q-input>
+              </template>
+            </datepicker>
+          </div>
+          <div class="col-xs-12 col-sm-6 col-md-6">
             <selector
               outlined
               v-model="category"
@@ -315,43 +316,41 @@
               :rules="[(val:any) => !!val || `${'กรุณาเลือกสังกัด'}`]"
             ></selector>
           </div>
-          <div class="col-12" v-if="announcementExam">
-            <div class="row q-col-gutter-x-sm">
-              <div class="col-xs-12 col-sm-6 col-md-6">
-                <selector
-                  outlined
-                  v-model="organizationShortName"
-                  :options="governmentCodeOption"
-                  label="รหัสส่วนราชการ"
-                  clearable
-                  option-value="id"
-                  option-label="name"
-                  dense
-                  lazy-rules
-                  :rules="[(val:any) => !!val || `${'กรุณาเลือกรหัสส่วนราชการ'}`]"
-                  @update:model-value="(value:any) => selectGovernmentCode(value)"
-                ></selector>
-              </div>
-              <div class="col-xs-12 col-sm-6 col-md-6">
-                <selector
-                  outlined
-                  v-model="organizationName"
-                  :options="organizationNameOptions"
-                  label="หน่วยงาน"
-                  clearable
-                  option-value="id"
-                  option-label="name"
-                  dense
-                  lazy-rules
-                  :rules="[(val:any) => !!val || `${'กรุณาเลือกหน่วยงาน'}`]"
-                  @update:model-value="(value:any) => selectOrganization(value)"
-                ></selector>
-              </div>
-            </div>
-            <div class="col-12 q-mb-sm">
-              <q-separator size="5px" color="grey-2" />
-            </div>
-            <q-form ref="myFormPosition">
+          <div class="col-xs-12 col-sm-4 col-md-2" v-if="announcementExam">
+            <selector
+              outlined
+              v-model="organizationShortName"
+              :options="governmentCodeOption"
+              label="รหัสส่วนราชการ"
+              clearable
+              option-value="id"
+              option-label="name"
+              dense
+              lazy-rules
+              :rules="[(val:any) => !!val || `${'กรุณาเลือกรหัสส่วนราชการ'}`]"
+              @update:model-value="(value:any) => selectGovernmentCode(value)"
+            ></selector>
+          </div>
+          <div class="col-xs-12 col-sm-6 col-md-6" v-if="announcementExam">
+            <selector
+              outlined
+              v-model="organizationName"
+              :options="organizationNameOptions"
+              label="หน่วยงาน"
+              clearable
+              option-value="id"
+              option-label="name"
+              dense
+              lazy-rules
+              :rules="[(val:any) => !!val || `${'กรุณาเลือกหน่วยงาน'}`]"
+              @update:model-value="(value:any) => selectOrganization(value)"
+            ></selector>
+          </div>
+          <div class="col-12 q-mb-sm">
+            <q-separator size="5px" color="grey-2" />
+          </div>
+          <div class="col-12 row" v-if="announcementExam">
+            <q-form ref="myFormPosition" class="col-12">
               <ProfileTable
                 :rows="rowsPosition"
                 :columns="columnsPosition"
@@ -473,7 +472,7 @@
             <div class="text-bold text-subtitle2 q-pb-md">
               เลือกวีธีการชำระเงิน
             </div>
-            <div class="row col-12 q-gutter-y-md q-mb-md">
+            <div class="row col-12 q-gutter-y-md ">
               <q-list dense bordered class="col-12 rounded-borders">
                 <q-item tag="label" v-ripple class="q-pa-md">
                   <q-radio
diff --git a/src/modules/03_recruiting/views/02_qualify/manageDetail.vue b/src/modules/03_recruiting/views/02_qualify/manageDetail.vue
index 800c3553b..51f2aadb4 100644
--- a/src/modules/03_recruiting/views/02_qualify/manageDetail.vue
+++ b/src/modules/03_recruiting/views/02_qualify/manageDetail.vue
@@ -34,13 +34,13 @@
   <q-slide-transition>
     <q-card class="row col-12 q-mb-sm" v-show="visible">
       <div class="col-12 row">
-        <div class="q-py-md row col-12 no-wrap">
+        <div class="q-pb-md q-pt-sm row col-12 no-wrap">
           <!-- การ์ดแสดงจำนวนข้อมูล -->
-          <div class="col-12 row">
-            <div class="text-grey-7 row text-weight-medium col-12 q-pl-md">
-              สรุปจำนวนผู้สมัครคัดเลือก
+          <div class="col-12 row q-px-md ">
+            <div class="row items-center col-12 q-gutter-sm q-pb-sm">
+              <div class="text-weight-medium">สรุปจำนวนผู้สมัครคัดเลือก</div>
               <datepicker
-                class="q-pl-sm"
+                class="col-xs-12 col-sm-5 col-md-4"
                 v-model="dateFilter"
                 :locale="'th'"
                 autoApply
@@ -58,9 +58,9 @@
                   <q-input
                     class="full-width inputgreen cursor-pointer"
                     hide-bottom-space
-                    outlined
                     dense
-                    label="วันที่"
+                    prefix="วันที่"
+                    borderless
                     lazy-rules
                     :model-value="dateThaiRange(dateFilter)"
                   >
@@ -75,8 +75,10 @@
                   </q-input>
                 </template>
               </datepicker>
+              <q-space />
               <q-btn
                 size="md"
+                dense
                 icon="mdi-download"
                 round
                 flat
@@ -110,7 +112,7 @@
                 <q-tooltip>ดาวน์โหลดรายชื่อผู้สอบแข่งขันได้</q-tooltip>
               </q-btn>
             </div>
-            <div class="row col-12 q-col-gutter-md fit q-pa-md">
+            <div class="row col-12 q-col-gutter-md">
               <div
                 style="width: 25%"
                 v-for="(num, index) in dataNum"
diff --git a/src/modules/04_registry/components/Profile.vue b/src/modules/04_registry/components/Profile.vue
index 2877cb921..4a06fdaff 100644
--- a/src/modules/04_registry/components/Profile.vue
+++ b/src/modules/04_registry/components/Profile.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="col-12 row">
     <div class="row col-12" style="padding-top: 80px">
-      <div id="information" name="1" class="row col-12 information">
+      <div id="information" name="1" class="row col-12 information q-mt-sm">
         <!-- <Informationvue
           v-model:statusEdit="statusEdit"
           :profileType="profileType"
@@ -11,16 +11,16 @@
           :fetchDataProfile="fetchData"
         />
       </div>
-      <div id="government" name="16" class="row col-12 q-mt-md">
+      <div id="government" name="16" class="row col-12">
         <Government v-model:statusEdit="statusEdit" />
       </div>
-      <div id="address" name="17" class="row col-12 q-mt-md">
+      <div id="address" name="17" class="row col-12">
         <Address v-model:statusEdit="statusEdit" />
       </div>
-      <div id="family" name="18" class="row col-12 q-mt-md">
+      <div id="family" name="18" class="row col-12">
         <Family v-model:statusEdit="statusEdit" />
       </div>
-      <div id="certicate" name="15" class="row col-12 q-mt-md">
+      <div id="certicate" name="15" class="row col-12">
         <Certicate v-model:statusEdit="statusEdit" :profileType="profileType" />
       </div>
       <div id="education" name="2" class="row col-12 q-mt-md">
diff --git a/src/modules/05_placement/components/pass/TableDetail.vue b/src/modules/05_placement/components/pass/TableDetail.vue
index b4250883a..5bbc0a5c0 100644
--- a/src/modules/05_placement/components/pass/TableDetail.vue
+++ b/src/modules/05_placement/components/pass/TableDetail.vue
@@ -60,7 +60,7 @@ const clickSave = async () => {
                                     <div class="q-pb-md">
                                         เลขที่ประจำตัวประชาชน
                                     </div>
-                                    <div class="q-pb-md">
+                                    <div>
                                         วัน/เดือน/ปีเกิด
                                     </div>
                                 </div>
@@ -68,7 +68,7 @@ const clickSave = async () => {
                                     <div class="q-pb-md">
                                         {{ props.getdetail.profileID }}
                                     </div>
-                                    <div class="q-pb-md">
+                                    <div>
                                         {{ props.getdetail.dateOfBirth }}
                                     </div>
                                 </div>
@@ -76,7 +76,7 @@ const clickSave = async () => {
                                     <div class="q-pb-md">
                                         ชื่อ-นามสกุล
                                     </div>
-                                    <div class="q-pb-md">
+                                    <div>
                                         เพศ
                                     </div>
                                 </div>
@@ -84,7 +84,7 @@ const clickSave = async () => {
                                     <div class="q-pb-md">
                                         {{ props.getdetail.fullName }}
                                     </div>
-                                    <div class="q-pb-md">
+                                    <div>
                                         {{ props.getdetail.gender }}
                                     </div>
                                 </div>
@@ -116,7 +116,7 @@ const clickSave = async () => {
                                     <div class="q-pb-md">
                                         สถานศึกษา
                                     </div>
-                                    <div class="q-pb-md">
+                                    <div>
                                         สาขาวิชาเอก
                                     </div>
                                 </div>
@@ -124,7 +124,7 @@ const clickSave = async () => {
                                     <div class="q-pb-md">
                                         {{ props.getdetail.university }}
                                     </div>
-                                    <div class="q-pb-md">
+                                    <div>
                                         {{ props.getdetail.major }}
                                     </div>
                                 </div>
@@ -132,7 +132,7 @@ const clickSave = async () => {
                                     <div class="q-pb-md">
                                         วุฒิการศึกษา
                                     </div>
-                                    <div class="q-pb-md">
+                                    <div>
                                         อื่นๆ
                                     </div>
                                 </div>
@@ -140,7 +140,7 @@ const clickSave = async () => {
                                     <div class="q-pb-md">
                                         {{ props.getdetail.degree ? props.getdetail.degree : '-' }}
                                     </div>
-                                    <div class="q-pb-md">
+                                    <div>
                                         {{ props.getdetail.remark ? props.getdetail.remark : '-' }}
                                     </div>
                                 </div>

From 5800f9cf17472e4178422497675924dbcc65d157 Mon Sep 17 00:00:00 2001
From: Thanit Konmek <thanit@frappet.com>
Date: Fri, 30 Jun 2023 08:29:38 +0700
Subject: [PATCH 2/3] =?UTF-8?q?step3=20=E0=B8=AD=E0=B8=AD=E0=B8=81?=
 =?UTF-8?q?=E0=B8=84=E0=B8=B3=E0=B8=AA=E0=B8=B1=E0=B9=88=E0=B8=87?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/OrderPlacement/step/step02.vue |  26 +-
 .../components/OrderPlacement/step/step03.vue | 685 +++++++++++++++++-
 .../components/OrderPlacement/step/step04.vue |   5 +-
 .../05_placement/interface/index/Main.ts      |  19 +-
 4 files changed, 718 insertions(+), 17 deletions(-)

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

From e6544f702aaf7889bcf60204de81d4252f0dd94b Mon Sep 17 00:00:00 2001
From: setthawutttty <stw.ttty@gmail.com>
Date: Fri, 30 Jun 2023 09:15:47 +0700
Subject: [PATCH 3/3] =?UTF-8?q?validate=20statcard=20dropdown=20=20Paginat?=
 =?UTF-8?q?ion=20=E0=B8=A3=E0=B8=B2=E0=B8=A2=E0=B8=8A=E0=B8=B7=E0=B9=88?=
 =?UTF-8?q?=E0=B8=AD=E0=B8=9C=E0=B8=B9=E0=B9=89=E0=B8=AA=E0=B8=AD=E0=B8=9A?=
 =?UTF-8?q?=E0=B8=9C=E0=B9=88=E0=B8=B2=E0=B8=99?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/modules/05_placement/components/Main.vue  |  396 +++--
 .../05_placement/components/pass/Detail.vue   |   85 +-
 .../05_placement/components/pass/StatCard.vue |   43 +
 .../05_placement/components/pass/Table.vue    | 1568 ++++++++---------
 .../components/pass/TableDetail.vue           |  568 +++---
 .../components/pass/TableView.vue             |   35 +-
 6 files changed, 1455 insertions(+), 1240 deletions(-)
 create mode 100644 src/modules/05_placement/components/pass/StatCard.vue

diff --git a/src/modules/05_placement/components/Main.vue b/src/modules/05_placement/components/Main.vue
index ea93fa279..c4180bdfe 100644
--- a/src/modules/05_placement/components/Main.vue
+++ b/src/modules/05_placement/components/Main.vue
@@ -1,13 +1,13 @@
 <script setup lang="ts">
-import { onMounted, reactive, ref, useAttrs } from 'vue';
-import type { QTableProps } from 'quasar';
+import { onMounted, reactive, ref, useAttrs } from "vue";
+import type { QTableProps } from "quasar";
 import type { FormPlacementMainData } from "@/modules/05_placement/interface/request/Main";
 import type { DataOption } from "@/modules/05_placement/interface/index/Main";
 import { useCounterMixin } from "@/stores/mixin";
 import { usePlacementDataStore } from "@/modules/05_placement/store";
-import router from '@/router';
+import router from "@/router";
 
-const DataStore = usePlacementDataStore()
+const DataStore = usePlacementDataStore();
 
 const mixin = useCounterMixin();
 const { dateText } = mixin;
@@ -90,55 +90,60 @@ const columns = ref<QTableProps["columns"]>([
     sort: (a: string, b: string) =>
       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
-
 ]);
 
 // ข้อมูลตาราง (จำลอง)
-const rows = ref<FormPlacementMainData[]>([{
-  id: 1,
-  examRound: "การสอบแข่งขันเพื่อรับบุคคลทั่วไปเข้ารับราชการ ส่วนการจัดการทั่วไป",
-  examOrder: 3,
-  fiscalYear: 2023,
-  numberofCandidates: 8,
-  examType: 1,
-  accountExpirationDate: "2023-02-28T14:47:04.1785384Z"
-},
-{
-  id: 2,
-  examRound: "การสอบแข่งขันเพื่อรับบุคคลทั่วไปเข้ารับราชการ ส่วนการจัดการทั่วไป",
-  examOrder: 2,
-  fiscalYear: 2023,
-  numberofCandidates: 12,
-  examType: 1,
-  accountExpirationDate: "2023-02-28T14:47:04.1785384Z"
-},
-{
-  id: 3,
-  examRound: "การสอบแข่งขันเพื่อรับบุคคลทั่วไปเข้ารับราชการ ส่วนการจัดการทั่วไป",
-  examOrder: 2,
-  fiscalYear: 2023,
-  numberofCandidates: 20,
-  examType: 1,
-  accountExpirationDate: "2023-01-31T14:47:04.1785384Z"
-},
-{
-  id: 4,
-  examRound: "การสอบแข่งขันเพื่อรับบุคคลทั่วไปเข้ารับราชการ ส่วนการจัดการทั่วไป",
-  examOrder: 2,
-  fiscalYear: 2022,
-  numberofCandidates: 16,
-  examType: 2,
-  accountExpirationDate: "2023-11-30T14:47:04.1785384Z"
-},
-{
-  id: 5,
-  examRound: "การสอบแข่งขันเพื่อรับบุคคลทั่วไปเข้ารับราชการ ส่วนการจัดการทั่วไป",
-  examOrder: 1,
-  fiscalYear: 2021,
-  numberofCandidates: 20,
-  examType: 2,
-  accountExpirationDate: "2024-05-21T14:47:04.1785384Z",
-},
+const rows = ref<FormPlacementMainData[]>([
+  {
+    id: 1,
+    examRound:
+      "การสอบแข่งขันเพื่อรับบุคคลทั่วไปเข้ารับราชการ ส่วนการจัดการทั่วไป",
+    examOrder: 3,
+    fiscalYear: 2023,
+    numberofCandidates: 8,
+    examType: 1,
+    accountExpirationDate: "2023-02-28T14:47:04.1785384Z",
+  },
+  {
+    id: 2,
+    examRound:
+      "การสอบแข่งขันเพื่อรับบุคคลทั่วไปเข้ารับราชการ ส่วนการจัดการทั่วไป",
+    examOrder: 2,
+    fiscalYear: 2023,
+    numberofCandidates: 12,
+    examType: 1,
+    accountExpirationDate: "2023-02-28T14:47:04.1785384Z",
+  },
+  {
+    id: 3,
+    examRound:
+      "การสอบแข่งขันเพื่อรับบุคคลทั่วไปเข้ารับราชการ ส่วนการจัดการทั่วไป",
+    examOrder: 2,
+    fiscalYear: 2023,
+    numberofCandidates: 20,
+    examType: 1,
+    accountExpirationDate: "2023-01-31T14:47:04.1785384Z",
+  },
+  {
+    id: 4,
+    examRound:
+      "การสอบแข่งขันเพื่อรับบุคคลทั่วไปเข้ารับราชการ ส่วนการจัดการทั่วไป",
+    examOrder: 2,
+    fiscalYear: 2022,
+    numberofCandidates: 16,
+    examType: 2,
+    accountExpirationDate: "2023-11-30T14:47:04.1785384Z",
+  },
+  {
+    id: 5,
+    examRound:
+      "การสอบแข่งขันเพื่อรับบุคคลทั่วไปเข้ารับราชการ ส่วนการจัดการทั่วไป",
+    examOrder: 1,
+    fiscalYear: 2021,
+    numberofCandidates: 20,
+    examType: 2,
+    accountExpirationDate: "2024-05-21T14:47:04.1785384Z",
+  },
 ]);
 
 let OriginalData = ref<FormPlacementMainData[]>([]);
@@ -155,19 +160,19 @@ const OriginalDataFetch = async () => {
   //   })
   //   .finally(async () => {
   //   });
-  await DataStore.DataMain(rows.value)
-  OriginalData.value = await DataStore.DataMainOrig
-  UpdataData.value = OriginalData.value
-}
+  await DataStore.DataMain(rows.value);
+  OriginalData.value = await DataStore.DataMainOrig;
+  UpdataData.value = OriginalData.value;
+};
 
 onMounted(async () => {
-  await OriginalDataFetch()
-  fiscalYearFilter()
-  examTimeFilter()
-  examTypeFilter()
-  await expiredAccountFilter()
-  searchFilterTable()
-})
+  await OriginalDataFetch();
+  fiscalYearFilter();
+  examTimeFilter();
+  examTypeFilter();
+  await expiredAccountFilter();
+  searchFilterTable();
+});
 
 // ดูรายการสอบแข่งขัน หน้าต่อไป
 const redirectToPage = (id?: number) => {
@@ -177,7 +182,7 @@ const redirectToPage = (id?: number) => {
 
 // เลือกปีงบประมาณ
 const fiscalyear = ref<number | null>(0);
-const fiscalyearOP = reactive<DataOption[]>([{ id: 0, name: 'ทั้งหมด' }]);
+const fiscalyearOP = reactive<DataOption[]>([{ id: 0, name: "ทั้งหมด" }]);
 const addedfiscalYearValues: number[] = [];
 const fiscalYearFilter = async () => {
   // API
@@ -204,11 +209,11 @@ const fiscalYearFilter = async () => {
       addedfiscalYearValues.push(year);
     }
   }
-}
+};
 
 // เลือกปีงบประมาณตาม API
 const searchfiscalyear = () => {
-  console.log('Input value changed:', fiscalyear.value);
+  console.log("Input value changed:", fiscalyear.value);
   // API
   // await http
   //   .get(config.API.// ตัวอย่าง)
@@ -230,7 +235,15 @@ const resetFilter = () => {
 };
 
 const attrs = ref<any>(useAttrs());
-const visibleColumns = ref<string[]>(['id', 'examRound', 'examOrder', 'fiscalYear', 'numberofCandidates', 'examType', 'accountExpirationDate']) //ค้นหา คอลัมน์ คอลัมน์ที่แสดง
+const visibleColumns = ref<string[]>([
+  "id",
+  "examRound",
+  "examOrder",
+  "fiscalYear",
+  "numberofCandidates",
+  "examType",
+  "accountExpirationDate",
+]); //ค้นหา คอลัมน์ คอลัมน์ที่แสดง
 
 // ครั้งที่สอบ
 const examTime = ref<number | null>(null);
@@ -242,7 +255,7 @@ const examTimeFilter = async () => {
     }
   }
   examTimeOP.value.sort((a, b) => a - b); // เรียงลำดับ
-}
+};
 
 // ประเภทการสอบ
 const examType = ref<number | null>(0);
@@ -259,12 +272,16 @@ const examTypeFilter = async () => {
       addedexamTypeValues.push(2);
     }
   }
-}
+};
 
 const searchFilterTable = async () => {
   // console.log('Input value changed:', examTime.value, examType.value, expiredAccount.value);
-  await DataStore.DataUpdateMain(examTime.value, examType.value, expiredAccount.value);
-  UpdataData.value = DataStore.DataMainUpdate
+  await DataStore.DataUpdateMain(
+    examTime.value,
+    examType.value,
+    expiredAccount.value
+  );
+  UpdataData.value = DataStore.DataMainUpdate;
 };
 
 // บัญชีหมดอายุ
@@ -273,7 +290,7 @@ const expiredAccountFilter = async () => {
   const currentDate = new Date();
   const updatedRows = OriginalData.value.map((data) => {
     let expirationDate = new Date(data.accountExpirationDate);
-    let isExpired = expirationDate < currentDate 
+    let isExpired = expirationDate < currentDate;
 
     return { ...data, isExpired };
   });
@@ -281,81 +298,188 @@ const expiredAccountFilter = async () => {
 };
 
 const paging = ref<boolean>(true);
+  const pagination = ref({
+  sortBy: "desc",
+  descending: false,
+  page: 1,
+  rowsPerPage: 10,
+});
 const paginationLabel = (start: string, end: string, total: string) => {
-  if (paging.value == true)
-    return " " + start + "-" + end + " ใน " + total;
+  if (paging.value == true) return " " + start + "-" + end + " ใน " + total;
   else return start + "-" + end + " ใน " + total;
 };
-
 </script>
 
 <template>
   <div class="toptitle text-dark col-12 row items-center">
     รายการสอบแข่งขัน / คัดเลือก
   </div>
-    <q-card flat bordered class="col-12 q-mt-sm q-pa-md">
-      <div class="row q-col-gutter-md">
-        <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 clearable 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="searchfiscalyear" />
-            <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 class="col-xs-12 col-sm-3 col-md-2" 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 />
-        </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="examTime" label="ครั้งที่" dense clearable emit-value map-options :options="examTimeOP"
-                option-value="id" option-label="name" lazy-rules hide-bottom-space :readonly="false" :borderless="false"
-                :outlined="true" :hide-dropdown-icon="false" @update:model-value="searchFilterTable" />
-              <q-select class="col-xs-12 col-sm-3 col-md-2" v-model="examType" label="ประเภทการสอบ" dense clearable emit-value map-options option-label="name"
-                :options="examTypeOP" option-value="id" lazy-rules hide-bottom-space :readonly="false" :borderless="false"
-                :outlined="true" :hide-dropdown-icon="false" @update:model-value="searchFilterTable" />
-              <q-toggle class="col-xs-12 col-sm-5 col-md-5 toggle-expired-account" v-model="expiredAccount" color="blue" label="แสดงบัญชีหมดอายุ"
-                @update:model-value="searchFilterTable" />
-            </div>
-          </q-card>
-        </div>
-        <div class="col-12">
-          <q-table ref="table" :columns="columns" :rows="UpdataData" :filter="filterKeyword" row-key="id" flat bordered
-            dense class="custom-header-table" v-bind="attrs" :visible-columns="visibleColumns"
-            :pagination-label="paginationLabel">
-            <template v-slot:body="props">
-              <q-tr :props="props" class="cursor-pointer" @click="redirectToPage(props.row.id)">
-                <q-td key="id" :props="props">
-                  {{ props.row.id }}
-                </q-td>
-                <q-td key="examRound" :props="props">
-                  {{ props.row.examRound }}
-                </q-td>
-                <q-td key="examOrder" :props="props">
-                  {{ props.row.examOrder }}
-                </q-td>
-                <q-td key="fiscalYear" :props="props">
-                  {{ props.row.fiscalYear + 543 }}
-                </q-td>
-                <q-td key="numberofCandidates" :props="props">
-                  {{ props.row.numberofCandidates }}
-                </q-td>
-                <q-td key="examType" :props="props">
-                  {{ props.row.examType == 1 ? 'คัดเลือก' : 'สอบแข่งขัน' }}
-                </q-td>
-                <q-td key="accountExpirationDate" :props="props">
-                  {{ textDate(props.row.accountExpirationDate) }}
-                </q-td>
-              </q-tr>
-            </template>
-          </q-table>
-        </div>
+  <q-card flat bordered class="col-12 q-mt-sm q-pa-md">
+    <div class="row q-col-gutter-md">
+      <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="searchfiscalyear"
+        />
+        <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
+          class="col-xs-12 col-sm-3 col-md-2"
+          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
+        />
       </div>
-    </q-card>
+      <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="examTime"
+              label="ครั้งที่"
+              dense
+              emit-value
+              map-options
+              :options="examTimeOP"
+              option-value="id"
+              option-label="name"
+              lazy-rules
+              hide-bottom-space
+              :readonly="false"
+              :borderless="false"
+              :outlined="true"
+              :hide-dropdown-icon="false"
+              @update:model-value="searchFilterTable"
+            />
+            <q-select
+              class="col-xs-12 col-sm-3 col-md-2"
+              v-model="examType"
+              label="ประเภทการสอบ"
+              dense
+              emit-value
+              map-options
+              option-label="name"
+              :options="examTypeOP"
+              option-value="id"
+              lazy-rules
+              hide-bottom-space
+              :readonly="false"
+              :borderless="false"
+              :outlined="true"
+              :hide-dropdown-icon="false"
+              @update:model-value="searchFilterTable"
+            />
+            <q-toggle
+              class="col-xs-12 col-sm-5 col-md-5 toggle-expired-account"
+              v-model="expiredAccount"
+              color="blue"
+              label="แสดงบัญชีหมดอายุ"
+              @update:model-value="searchFilterTable"
+            />
+          </div>
+        </q-card>
+      </div>
+      <div class="col-12">
+        <q-table
+          ref="table"
+          :columns="columns"
+          :rows="UpdataData"
+          :filter="filterKeyword"
+          row-key="id"
+          flat
+          bordered
+          dense
+          class="custom-header-table"
+          v-bind="attrs"
+          :visible-columns="visibleColumns"
+          :pagination-label="paginationLabel"
+          v-model:pagination="pagination"
+        >
+          <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>
+          <template v-slot:body="props">
+            <q-tr
+              :props="props"
+              class="cursor-pointer"
+              @click="redirectToPage(props.row.id)"
+            >
+              <q-td key="id" :props="props">
+                {{ props.row.id }}
+              </q-td>
+              <q-td key="examRound" :props="props">
+                {{ props.row.examRound }}
+              </q-td>
+              <q-td key="examOrder" :props="props">
+                {{ props.row.examOrder }}
+              </q-td>
+              <q-td key="fiscalYear" :props="props">
+                {{ props.row.fiscalYear + 543 }}
+              </q-td>
+              <q-td key="numberofCandidates" :props="props">
+                {{ props.row.numberofCandidates }}
+              </q-td>
+              <q-td key="examType" :props="props">
+                {{ props.row.examType == 1 ? "คัดเลือก" : "สอบแข่งขัน" }}
+              </q-td>
+              <q-td key="accountExpirationDate" :props="props">
+                {{ textDate(props.row.accountExpirationDate) }}
+              </q-td>
+            </q-tr>
+          </template>
+        </q-table>
+      </div>
+    </div>
+  </q-card>
 </template>
 
 <style lang="scss" scope>
@@ -368,7 +492,7 @@ const paginationLabel = (start: string, end: string, total: string) => {
   font-weight: 400;
   font-size: 15px;
   line-height: 150%;
-  color: #35373C;
+  color: #35373c;
 }
 
 .icon-color {
diff --git a/src/modules/05_placement/components/pass/Detail.vue b/src/modules/05_placement/components/pass/Detail.vue
index 122a1e035..a64bd4527 100644
--- a/src/modules/05_placement/components/pass/Detail.vue
+++ b/src/modules/05_placement/components/pass/Detail.vue
@@ -1,81 +1,51 @@
 <script setup lang="ts">
-import { reactive, ref } from "vue";
-import { useQuasar } from "quasar";
+import { ref } from "vue";
 import { defineAsyncComponent } from "@vue/runtime-core";
 import { useRouter } from "vue-router";
-const $q = useQuasar();
+import cardTop from "@/modules/05_placement/components/pass/StatCard.vue";
+
 const router = useRouter();
 const year = ref<string>("2566");
 const round = ref<string>("1");
 const title = ref<string>("การสอบแข่งขันเพื่อรับบุคคลทั่วไปเข้ารับราชการ");
-  const sizeCard = (val: number) => {
-  if (val === 5) {
-    return "width:15%;";
-  } 
-};
-const itemTop = reactive([
-  {
-    id: 1,
-    num: 7,
-    title: "จำนวนทั้งหมด",
-    color: "#016987",
-  },
-  {
-    id: 2,
-    num: 1,
-    title: "ยังไม่บรรจุ",
-    color: "#02A998",
-  },
-  {
-    id: 3,
-    num: 5,
-    title: "เตรียมบรรจุ",
-    color: "#2EA0FF",
-  },
-  {
-    id: 4,
-    num: 1,
-    title: "บรรจุเเล้ว",
-    color: "#4154B3",
-  },
-  {
-    id: 5,
-    num: 0,
-    title: "สละสิทธิ์",
-    color: "#FF5C5F",
-  },
-]);
 const AddTablePosition = defineAsyncComponent(
   () => import("@/modules/05_placement/components/pass/Table.vue")
 );
+const stat = ref<any>({
+  total: 5,
+  unContain: 1,
+  prepareContain: 3,
+  contain: 1,
+  disclaim: 0,
+});
 </script>
-
 <template>
   <div class="col-xs-12 col-sm-12 col-md-8 col-lg-8 row">
     <div class="toptitle">
-      <q-btn icon="mdi-arrow-left" unelevated round dense flat color="primary" class="q-mr-sm" @click="router.go(-1)" />
+      <q-btn
+        icon="mdi-arrow-left"
+        unelevated
+        round
+        dense
+        flat
+        color="primary"
+        class="q-mr-sm"
+        @click="router.go(-1)"
+      />
       รายชื่อผู้สอบในรอบ {{ title }} ครั้งที่ {{ round }} ปี {{ year }}
     </div>
-
-    <q-card bordered class="q-py-sm row col-12">  
+    <q-card bordered class="q-py-sm row col-12">
       <div class="col-12 row bg-white">
         <div class="fit q-px-md q-py-sm">
           <div class="row col-12 q-col-gutter-md fit">
-            <div class="" v-for="item in itemTop" :key="item.id" :style="$q.screen.lt.md ? '' : sizeCard(5)" :class="$q.screen.lt.sm ? 'col-4' : ''">
-              <div class="q-card q-card--bordered q-card--flat no-shadow row fit cardNum items-center q-px-sm">
-                <div class="col-12 row items-center q-pa-sm">
-                  <div class="col-12 text-h5 text-weight-bold" :style="{ color: item.color }">
-                    {{ item.num }}
-                  </div>
-                  <div class="col-12 text-dark ellipsis">
-                    {{ item.title }}
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
+          <cardTop :amount="stat.total" label="จำนวนทั้งหมด" color="#016987" />
+          <cardTop :amount="stat.unContain" label="จำนวนที่ยังไม่บรรจุ" color="#02A998" />
+          <cardTop :amount="stat.prepareContain" label="จำนวนที่เตรียมบรรจุ" color="#2EA0FF" />
+          <cardTop :amount="stat.contain" label="จำนวนที่บรรจุแล้ว" color="#4154B3" />
+          <cardTop :amount="stat.disclaim" label="จำนวนที่สละสิทธิ์" color="#FF5C5F" />
         </div>
       </div>
+      </div>
     </q-card>
   </div>
   <q-card flat bordered class="col-12 q-mt-sm q-pt-sm">
@@ -88,7 +58,6 @@ const AddTablePosition = defineAsyncComponent(
 <style lang="scss">
 .cardNum {
   border-radius: 5px;
-  /* border-left: 3px solid #016987 !important; */
   padding-left: 8px;
 }
 </style>
diff --git a/src/modules/05_placement/components/pass/StatCard.vue b/src/modules/05_placement/components/pass/StatCard.vue
new file mode 100644
index 000000000..67ddb48bc
--- /dev/null
+++ b/src/modules/05_placement/components/pass/StatCard.vue
@@ -0,0 +1,43 @@
+<script setup lang="ts">
+const sizeCard = (val: number) => {
+  if (val === 5) {
+    return "width:15%;";
+  }
+};
+const props = defineProps({
+  color: {
+    type: String,
+    default: "",
+  },
+  label: {
+    type: String,
+    default: "",
+  },
+  amount: {
+    type: Number,
+    default: 0,
+  },
+});
+</script>
+<template>
+  <div
+    :style="$q.screen.lt.md ? '' : sizeCard(5)"
+    :class="$q.screen.lt.sm ? 'col-4' : ''"
+  >
+    <div
+      class="q-card q-card--bordered q-card--flat no-shadow row fit cardNum items-center q-px-sm"
+    >
+      <div class="col-12 row items-center q-pa-sm">
+        <div
+          class="col-12 text-h5 text-weight-bold"
+          :style="{ color: props.color }"
+        >
+          {{ props.amount }}
+        </div>
+        <div class="col-12 text-dark ellipsis">
+          {{ props.label }}
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/src/modules/05_placement/components/pass/Table.vue b/src/modules/05_placement/components/pass/Table.vue
index afa581879..ad9a9fe28 100644
--- a/src/modules/05_placement/components/pass/Table.vue
+++ b/src/modules/05_placement/components/pass/Table.vue
@@ -1,76 +1,80 @@
 <script setup lang="ts">
-import { ref, reactive, onMounted } from "vue";
-import Table from "@/modules/05_placement/components/pass/TableView.vue";
+import { ref, onMounted } from "vue";
 import { useQuasar, QForm } from "quasar";
-import type { TableName } from "@/modules/05_placement/interface/request/placement";
-import { usePlacementDataStore } from "@/modules/05_placement/store";
 import type { QTableProps } from "quasar";
-import type {
-  treeTab,
-  DataOption,
-} from "@/modules/05_placement/interface/index/Main";
-import DialogHeader from "@/modules/05_placement/components/pass/DialogHeader.vue";
-import DialogFooter from "@/modules/05_placement/components/pass/DialogFooter.vue";
-import DialogCard from "@/modules/05_placement/components/pass/TableDetail.vue";
 import { useCounterMixin } from "@/stores/mixin";
+import { usePlacementDataStore } from "@/modules/05_placement/store";
+import Table from "@/modules/05_placement/components/pass/TableView.vue";
+import DialogCard from "@/modules/05_placement/components/pass/TableDetail.vue";
+import DialogFooter from "@/modules/05_placement/components/pass/DialogFooter.vue";
+import DialogHeader from "@/modules/05_placement/components/pass/DialogHeader.vue";
+import type { TableName } from "@/modules/05_placement/interface/request/placement";
+import type { treeTab, DataOption } from "@/modules/05_placement/interface/index/Main";
+
 import http from "@/plugins/http";
 import config from "@/app.config";
-const clickAction = ref<string>();
-const ocId = ref<string>();
-const posNoOptionsFilter = ref<DataOption[]>([]);
-const selected = ref<string>("");
-const posNoId = ref<string>();
-const amount = ref<number | null>(null);
-const search = ref<string>("");
-const positionSalaryAmount = ref<number | null>(null);
-const positionExecutiveId = ref<string>();
-const positionLevelId = ref<string>();
-const date = ref<Date>(new Date());
-const expanded = ref<string[]>([]);
-const mixin = useCounterMixin(); //เรียกฟังก์ชันกลาง
-const editvisible = ref<boolean>(true);
-const myForm = ref<QForm | null>(null);
-const positionLineId = ref<string>();
-const positionId = ref<string>();
-const edit = ref<boolean>(false);
-const positionTypeId = ref<string>();
-const visibleColumns = ref<String[]>([]);
-const store = usePlacementDataStore();
-const filter = ref<string>("");
-const mouthSalaryAmount = ref<number | null>(null);
-const { placementData } = store;
-const positionPathSideId = ref<string>();
-const editRow = ref<boolean>(false); //เช็คมีการแก้ไขข้อมูล
+
+const edit = ref<boolean>(true);
 const modal = ref<boolean>(false); //modal add detail
-const modal_right = ref<boolean>(false); //modal add detail
-const modalwaitInfo = ref<boolean>(false); //modal add detail
+const editRow = ref<boolean>(false); //เช็คมีการแก้ไขข้อมูล
 const modalEdit = ref<boolean>(false); //modal ที่แสดงใช้สำหรับแก้ไขหรือไม่
-const Name = ref<string>();
-const posNoOptions = ref<DataOption[]>([]);
-const nodesTree = ref<treeTab[]>([]);
-const salaryRef = ref<string>();
+const editvisible = ref<boolean>(true);
+const modal_right = ref<boolean>(false); //modal add detail
+const checkValidate = ref<boolean>(false);
+const modalwaitInfo = ref<boolean>(false); //modal add detail
+
 const positionMasterUserNote = ref<string>();
-const refSelected = ref<DataOption | null>(null);
-const $q = useQuasar(); // show dialog
+const positionExecutiveId = ref<string>();
+const visibleColumns = ref<String[]>([]);
+const positionPathSideId = ref<string>();
+const positionLevelId = ref<string>();
+const positionLineId = ref<string>();
+const positionTypeId = ref<string>();
+const expanded = ref<string[]>([]);
+const clickAction = ref<string>();
 const salaryClass = ref<string>();
+const selected = ref<string>("");
+const positionId = ref<string>();
+const salaryRef = ref<string>();
+const search = ref<string>("");
+const filter = ref<string>("");
+const posNoId = ref<string>();
+const amount = ref<string>();
+const Name = ref<string>();
+const ocId = ref<string>();
+
+const posNoOptions = ref<DataOption[]>([]);
 const positionOptions = ref<DataOption[]>([]);
+const posNoOptionsFilter = ref<DataOption[]>([]);
+const refSelected = ref<DataOption | null>(null);
 const positionLineOptions = ref<DataOption[]>([]);
 const positionSideOptions = ref<DataOption[]>([]);
 const positionTypeOptions = ref<DataOption[]>([]);
-const positionLevelOptions = ref<DataOption[]>([]);
-const positionExecutiveOptions = ref<DataOption[]>([]);
-const positionExecutiveSideOptions = ref<DataOption[]>([]);
 const positionOptionsFilter = ref<DataOption[]>([]);
+const positionExecutiveOptions = ref<DataOption[]>([]);
 const positionLineOptionsFilter = ref<DataOption[]>([]);
 const positionSideOptionsFilter = ref<DataOption[]>([]);
 const positionTypeOptionsFilter = ref<DataOption[]>([]);
 const positionLevelOptionsFilter = ref<DataOption[]>([]);
+const positionExecutiveSideOptions = ref<DataOption[]>([]);
 const positionExecutiveOptionsFilter = ref<DataOption[]>([]);
 const positionExecutiveSideOptionsFilter = ref<DataOption[]>([]);
+
+const myForm = ref<any>();
+const mouthSalaryAmount = ref<any>();
+const positionSalaryAmount = ref<any>();
+
+
+const files = ref<any>(null);
+const date = ref<Date>(new Date());
+const mixin = useCounterMixin(); //เรียกฟังก์ชันกลาง
+const store = usePlacementDataStore();
+const { placementData } = store;
+const nodesTree = ref<treeTab[]>([]);
+const $q = useQuasar(); // show dialog
+const positionLevelOptions = ref<any[]>([]);
 const { date2Thai, success, dateToISO, messageError, showLoader, hideLoader } =
   mixin;
-const files = ref<File[]>([]);
-
 const fetchPosition = async () => {
   showLoader();
   await http
@@ -144,18 +148,20 @@ const fetchPosition = async () => {
           name: r.name.toString(),
         });
       });
-      positionLevelOptions.value = optionPositionLevels;
-      positionLevelOptionsFilter.value = optionPositionLevels;
+
+      positionLevelOptions.value = optionPositionLevels.map((item: any) => {
+        //   {lebal:item.id,
+        //   value:item.name
+        // }
+      });
+      // positionLevelOptionsFilter.value = optionPositionLevels;
     })
     .catch((e: any) => {})
     .finally(() => {
       hideLoader();
     });
 };
-const clickEditRowRef = () => {
-  editRow.value = true;
-  salaryRef.value = refSelected.value?.name;
-};
+
 const fetchOrganization = async (id: string) => {
   if (selected.value != "") {
     showLoader();
@@ -173,67 +179,7 @@ const fetchOrganization = async (id: string) => {
       });
   }
 };
-const templateDetail = async () => {
-  await fetchOrganization(selected.value);
 
-  salaryClass.value = "";
-
-  if (ocId.value != "") {
-    salaryClass.value = salaryClass.value + `สังกัด${ocId.value} `;
-  }
-
-  const positionF = positionOptions.value.filter(
-    (r: DataOption) => r.id == positionId.value
-  );
-  if (positionF.length > 0) {
-    salaryClass.value = salaryClass.value + `ตำแหน่ง${positionF[0].name} `;
-  }
-
-  const posNoF = posNoOptions.value.filter(
-    (r: DataOption) => r.id == posNoId.value
-  );
-  if (posNoF.length > 0) {
-    salaryClass.value = salaryClass.value + `เลขที่ตำแหน่ง${posNoF[0].name} `;
-  }
-
-  const positionLineF = positionLineOptions.value.filter(
-    (r: DataOption) => r.id == positionLineId.value
-  );
-  if (positionLineF.length > 0) {
-    salaryClass.value = salaryClass.value + `สายงาน${positionLineF[0].name} `;
-  }
-
-  const positionPathSideF = positionSideOptions.value.filter(
-    (r: DataOption) => r.id == positionPathSideId.value
-  );
-  if (positionPathSideF.length > 0) {
-    salaryClass.value =
-      salaryClass.value + `ด้าน/สาขา${positionPathSideF[0].name} `;
-  }
-
-  const positionTypeF = positionTypeOptions.value.filter(
-    (r: DataOption) => r.id == positionTypeId.value
-  );
-  if (positionTypeF.length > 0) {
-    salaryClass.value =
-      salaryClass.value + `ประเภทตำแหน่ง${positionTypeF[0].name} `;
-  }
-
-  const positionLevelF = positionLevelOptions.value.filter(
-    (r: DataOption) => r.id == positionLevelId.value
-  );
-  if (positionLevelF.length > 0) {
-    salaryClass.value = salaryClass.value + `ระดับ${positionLevelF[0].name} `;
-  }
-
-  const positionExecutiveF = positionExecutiveOptions.value.filter(
-    (r: DataOption) => r.id == positionExecutiveId.value
-  );
-  if (positionExecutiveF.length > 0) {
-    salaryClass.value =
-      salaryClass.value + `ตำแหน่งทางการบริหาร${positionExecutiveF[0].name} `;
-  }
-};
 const appointModal = ref<boolean>(false);
 
 const nodeTree = async () => {
@@ -265,38 +211,72 @@ const appoint = ref<any>({
   Major: "",
   PositionLevel: "",
 });
-
-const saveAppoint = () => {
-  const dataAppoint = {
-    date: date.value,
-    posNoId: posNoId.value,
-    positionId: positionId.value,
-    positionPathSideId: positionPathSideId.value,
-    positionTypeId: positionTypeId.value,
-    positionLineId: positionLineId.value,
-    positionLevelId: positionLevelId.value,
-    amount: amount.value,
-    positionSalaryAmount: positionSalaryAmount.value,
-    mouthSalaryAmount: mouthSalaryAmount.value,
-    salaryClass: salaryClass.value,
-    refSelected: refSelected.value,
-    salaryRef: salaryRef.value,
-  };
-  console.log("save appoint===>", dataAppoint);
+const saveAppoint = async () => {
+  myForm.value.validate().then(async (result: boolean) => {
+    if (result) {
+      if (appointModal.value) {
+        const dataAppoint = {
+          date: date.value,
+          posNoId: posNoId.value,
+          positionId: positionId.value,
+          positionPathSideId: positionPathSideId.value,
+          positionTypeId: positionTypeId.value,
+          positionLineId: positionLineId.value,
+          positionLevelId: positionLevelId.value,
+          amount: amount.value,
+          positionSalaryAmount: positionSalaryAmount.value,
+          mouthSalaryAmount: mouthSalaryAmount.value,
+          // salaryClass: salaryClass.value,
+          // refSelected: refSelected.value,
+          // salaryRef: salaryRef.value,
+        };
+        console.log("save appoint===>", dataAppoint);
+        positionTypeId.value = "";
+        positionLineId.value = "";
+        positionLevelId.value = "";
+        amount.value = "";
+        positionSalaryAmount.value = "";
+        positionPathSideId.value = "";
+        positionId.value = "";
+        posNoId.value = "";
+        mouthSalaryAmount.value = "";
+        appointModal.value = false;
+      }
+    } else {
+      // await saveData();
+    }
+  });
 };
 
-const savePostpone = () => {
-  const dataPost = { note: positionMasterUserNote.value, files: files };
-  console.log("save postpone===>", dataPost);
-  positionMasterUserNote.value = "";
-  modal_right.value = false;
+const savePostpone = async () => {
+  myForm.value.validate().then(async (result: boolean) => {
+    if (result) {
+      if (modal_right.value) {
+        const dataPost = { note: positionMasterUserNote.value, files: files };
+        console.log("save postpone===>", dataPost);
+        positionMasterUserNote.value = "";
+        modal_right.value = false;
+        files.value = null;
+      } else {
+        // await saveData();
+      }
+    }
+  });
 };
+const saveDisclaim = async () => {
+  myForm.value.validate().then(async (result: boolean) => {
+    if (result) {
+      if (modal_right.value) {
+        const dataPost = { note: positionMasterUserNote.value };
+        console.log("save disclaim===>", dataPost);
+        positionMasterUserNote.value = "";
+        modal_right.value = false;
 
-const saveDisclaim = () => {
-  const dataPost = { note: positionMasterUserNote.value };
-  console.log("save disclaim===>", dataPost);
-  positionMasterUserNote.value = "";
-  modal_right.value = false;
+      } else {
+        // await saveData();
+      }
+    }
+  });
 };
 
 const clickEditRow = () => {
@@ -958,79 +938,19 @@ const refOptionsFilter = ref<DataOption[]>([
 ]);
 const itemtest = ref<object>({});
 
-// const clickCancel = async () => {
-//   editvisible.value = false;
-// };
-
 const openAppointModal = (value: any) => {
   appointModal.value = true;
-  editRow.value = true;
-};
-const filterSelector = (val: any, update: Function, filtername: string) => {
-  switch (filtername) {
-    case "1":
-      update(() => {
-        posNoOptions.value = posNoOptionsFilter.value.filter(
-          (v: DataOption) => v.name.indexOf(val) > -1
-        );
-      });
-      break;
-    case "2":
-      update(() => {
-        positionOptions.value = positionOptionsFilter.value.filter(
-          (v: DataOption) => v.name.indexOf(val) > -1
-        );
-      });
-      break;
-    case "3":
-      update(() => {
-        positionSideOptions.value = positionSideOptionsFilter.value.filter(
-          (v: DataOption) => v.name.indexOf(val) > -1
-        );
-      });
-      break;
-    case "4":
-      update(() => {
-        positionTypeOptions.value = positionTypeOptionsFilter.value.filter(
-          (v: DataOption) => v.name.indexOf(val) > -1
-        );
-      });
-      break;
-    case "5":
-      update(() => {
-        positionLineOptions.value = positionLineOptionsFilter.value.filter(
-          (v: DataOption) => v.name.indexOf(val) > -1
-        );
-      });
-      break;
-    case "6":
-      update(() => {
-        positionLevelOptions.value = positionLevelOptionsFilter.value.filter(
-          (v: DataOption) => v.name.indexOf(val) > -1
-        );
-      });
-      break;
-    case "7":
-      update(() => {
-        positionExecutiveOptions.value =
-          positionExecutiveOptionsFilter.value.filter(
-            (v: DataOption) => v.name.indexOf(val) > -1
-          );
-      });
-      break;
-    case "8":
-      update(() => {
-        refOptions.value = refOptionsFilter.value.filter(
-          (v: DataOption) => v.name.indexOf(val) > -1
-        );
-      });
-      break;
-
-    default:
-      break;
-  }
+  editRow.value = false;
 };
 
+const validateData = async () => {
+  checkValidate.value = true;
+  await myForm.value.validate().then((result: boolean) => {
+    if (result == false) {
+      checkValidate.value = false;
+    }
+  });
+};
 const posNoF = posNoOptions.value.filter(
   (r: DataOption) => r.id == posNoId.value
 );
@@ -1046,9 +966,20 @@ const clickClose = async () => {
       ok: "ยืนยัน",
       persistent: true,
     }).onOk(async () => {
+      positionTypeId.value = "";
+      positionLineId.value = "";
+      positionLevelId.value = "";
+      amount.value = "";
+      positionSalaryAmount.value = "";
+      positionPathSideId.value = "";
+      positionId.value = "";
+      posNoId.value = "";
+      positionMasterUserNote.value = "";
+      mouthSalaryAmount.value = "";
       modal_right.value = false;
       modalwaitInfo.value = false;
       modal.value = false;
+      files.value = null;
       appointModal.value = false;
     });
   } else {
@@ -1109,7 +1040,11 @@ const listKeyId = (data: any) => {
   positionTypeId.value = node.positionType;
   positionLineId.value = node.organizationName;
   positionLevelId.value = node.positionLevel;
-  return node.keyId;
+  positionLevelOptions.value = node.positionLevel.split(",");
+  return {
+    keyId: node.keyId,
+    optionsLevel: positionLevelOptions.value,
+  };
 };
 </script>
 <template>
@@ -1121,610 +1056,673 @@ const listKeyId = (data: any) => {
       :visible-columns="visibleColumns"
       v-model:inputfilter="filter"
       v-model:inputvisible="visibleColumns"
-        v-model:editvisible="editvisible"
-        :history="true"
-        :boss="true"
-        :saveNoDraft="true"
-        :add="save"
-      >
-        <template #columns="props">
-          <q-tr :props="props">
-            <q-icon
-              class="q-mr-sm"
-              size="15px"
-              color="primary"
-              name="mdi-bookmark"
-              v-if="props.row.isDirector"
-            ></q-icon>
+      v-model:editvisible="editvisible"
+      :history="true"
+      :boss="true"
+      :saveNoDraft="true"
+      :add="save"
+    >
+      <template #columns="props">
+        <q-tr :props="props">
+          <q-icon
+            class="q-mr-sm"
+            size="15px"
+            color="primary"
+            name="mdi-bookmark"
+            v-if="props.row.isDirector"
+          ></q-icon>
 
-            <q-td
-              v-for="col in props.cols"
-              :key="col.name"
-              :props="props"
-              @click="selectData(props.row)"
-              class="cursor-pointer"
-            >
-              <div v-if="col.name == 'Name'" class="table_ellipsis">
-                {{ col.value }}
-                <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.fullName }}
-                    </div>
-                    <div class="text-weight-light">
-                      {{ props.row.profileID }}
-                    </div>
+          <q-td
+            v-for="col in props.cols"
+            :key="col.name"
+            :props="props"
+            @click="selectData(props.row)"
+            class="cursor-pointer"
+          >
+            <div v-if="col.name == 'Name'" class="table_ellipsis">
+              {{ col.value }}
+              <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.fullName }}
+                  </div>
+                  <div class="text-weight-light">
+                    {{ props.row.profileID }}
                   </div>
                 </div>
               </div>
-              <div v-else-if="col.name == 'Unit'" class="table_ellipsis">
-                <div
-                  v-if="props.row.Status == 'ยังไม่บรรจุ' ||
-                    props.row.Status == 'สละสิทธิ์'
-                    "
-                >
-                  -
-                </div>
-                <div v-else>
-                  {{ props.row.UnitGroup }}
-                  <p>{{ col.value }}</p>
-                </div>
-              </div>
+            </div>
+            <div v-else-if="col.name == 'Unit'" class="table_ellipsis">
               <div
-                v-else-if="col.name == 'ReportingDate' && col.value != '-'"
-                class="table_ellipsis"
+                v-if="
+                  props.row.Status == 'ยังไม่บรรจุ' ||
+                  props.row.Status == 'สละสิทธิ์'
+                "
               >
-                {{ mixin.date2Thai(col.value) }}
+                -
               </div>
-              <div v-else class="table_ellipsis">
-                {{ col.value }}
+              <div v-else>
+                {{ props.row.UnitGroup }}
+                <p>{{ col.value }}</p>
               </div>
-            </q-td>
-            <q-td auto-width>
-              <q-btn
-                v-if="props.row.Status !== 'สละสิทธิ์' &&
-                  props.row.Status !== 'บรรจุเเล้ว'
-                  "
-                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="props.row.Status === 'ยังไม่บรรจุ'"
-                      clickable
-                      v-close-popup
-                      @click="openAppointModal"
+            </div>
+            <div
+              v-else-if="col.name == 'ReportingDate' && col.value != '-'"
+              class="table_ellipsis"
+            >
+              {{ mixin.date2Thai(col.value) }}
+            </div>
+            <div v-else class="table_ellipsis">
+              {{ col.value }}
+            </div>
+          </q-td>
+          <q-td auto-width>
+            <q-btn
+              v-if="
+                props.row.Status !== 'สละสิทธิ์' &&
+                props.row.Status !== 'บรรจุเเล้ว'
+              "
+              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="props.row.Status === 'ยังไม่บรรจุ'"
+                    clickable
+                    v-close-popup
+                    @click="openAppointModal"
+                  >
+                    <q-item-section
+                      style="min-width: 0px"
+                      avatar
+                      class="q-py-sm"
                     >
-                      <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="props.row.Status === 'ยังไม่บรรจุ'"
-                      clickable
-                      v-close-popup
-                      @click="editDetail(props.row, 'wait')"
+                      <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="props.row.Status === 'ยังไม่บรรจุ'"
+                    clickable
+                    v-close-popup
+                    @click="editDetail(props.row, 'wait')"
+                  >
+                    <q-item-section
+                      style="min-width: 0px"
+                      avatar
+                      class="q-py-sm"
                     >
-                      <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.Status === 'ขอผ่อนผัน'"
-                      clickable
-                      v-close-popup
-                      @click="editDetail(props.row, 'waitInfo')"
+                      <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.Status === 'ขอผ่อนผัน'"
+                    clickable
+                    v-close-popup
+                    @click="editDetail(props.row, 'waitInfo')"
+                  >
+                    <q-item-section
+                      style="min-width: 0px"
+                      avatar
+                      class="q-py-sm"
                     >
-                      <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.Status === 'ยังไม่บรรจุ' ||
-                        props.row.Status === 'เตรียมบรรจุ'
-                        "
-                      clickable
-                      v-close-popup
-                      @click="editDetail(props.row, 'cancel')"
+                      <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.Status === 'ยังไม่บรรจุ' ||
+                      props.row.Status === 'เตรียมบรรจุ'
+                    "
+                    clickable
+                    v-close-popup
+                    @click="editDetail(props.row, 'cancel')"
+                  >
+                    <q-item-section
+                      style="min-width: 0px"
+                      avatar
+                      class="q-py-sm"
                     >
-                      <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>
+                      <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>
 
-    <q-dialog v-model="appointModal" persistent full-width>
-      <q-card>
-        <q-form ref="myForm">
-          <DialogHeader title="เลือกหน่วยงานที่รับบรรจุ" :close="clickClose" />
-          <q-separator />
-          <q-card-section class="q-pa-sm bg-grey-1">
-            <div class="row col-12 q-col-gutter-sm">
-              <div class="col-xs-12 col-sm-6 row">
-                <q-card flat bordered class="fit q-pa-sm">
-                  <q-scroll-area visible style="height: 70vh">
-                    <q-input
-                      outlined
-                      dense
-                      v-model="search"
-                      placeholder="ค้นหา"
-                      class="q-mb-sm"
-                    >
-                      <template v-slot:append>
-                        <q-icon name="mdi-magnify" />
-                      </template>
-                    </q-input>
-                    <q-tree
-                      no-transition
-                      ref="qtreeEdit"
-                      :nodes="nodesTree"
-                      node-key="keyId"
-                      @lazy-load="onLazyLoad"
-                      dense
-                    >
-                      <!--organization บรรทัดแสดงชื่อหน่วยงาน & ปุ่ม + -->
-                      <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"
-                              :label="prop.node.totalPositionCount"
-                            />
-                            <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>
-                      <template v-slot:header-person="prop">
-                        <q-item
-                          clickable
-                          :active="clickAction === prop.node.keyId"
-                          @click="
-                            clickAction =
-                            prop.node.name == `ว่าง` ||
-                              prop.node.name == `N/A` ||
-                              prop.node.name == null
-                              ? listKeyId(prop)
-                              : ''
-                            "
-                          active-class="my-list-link text-primary text-weight-medium"
-                          :class="prop.node.name == `ว่าง` ||
-                              prop.node.name == `N/A` ||
-                              prop.node.name == null
-                              ? 'row items-center text-dark q-py-xs q-pl-sm rounded-borders my-list'
-                              : 'row items-center text-dark q-py-xs q-pl-sm rounded-borders my-list disabled'
-                            "
+  <q-dialog v-model="appointModal" persistent full-width>
+    <q-card>
+      <q-form ref="myForm">
+        <DialogHeader title="เลือกหน่วยงานที่รับบรรจุ" :close="clickClose" />
+        <q-separator />
+        <q-card-section class="q-pa-sm bg-grey-1">
+          <div class="row col-12 q-col-gutter-sm">
+            <div class="col-xs-12 col-sm-6 row">
+              <q-card flat bordered class="fit q-pa-sm">
+                <q-scroll-area visible style="height: 70vh">
+                  <q-input
+                    outlined
+                    dense
+                    v-model="search"
+                    placeholder="ค้นหา"
+                    class="q-mb-sm"
+                  >
+                    <template v-slot:append>
+                      <q-icon name="mdi-magnify" />
+                    </template>
+                  </q-input>
+                  <q-tree
+                    no-transition
+                    ref="qtreeEdit"
+                    :nodes="nodesTree"
+                    node-key="keyId"
+                    @lazy-load="onLazyLoad"
+                    dense
+                  >
+                    <!--organization บรรทัดแสดงชื่อหน่วยงาน & ปุ่ม + -->
+                    <template v-slot:header-organization="prop">
+                      <div class="col">
+                        <div
+                          class="row items-center q-px-xs q-pt-xs q-gutter-sm"
                         >
-                          <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%"
+                          <!--แสดงชื่อแผนก พิมพ์ตัวหนา คลิกแล้วกาง/หุบ Tree-->
+                          <div class="text-weight-medium">
+                            {{ prop.node.organizationName }}
+                          </div>
+
+                          <!--แสดง Total Count PositionNum-->
+                          <q-badge
+                            rounded
+                            color="grey-2"
+                            text-color="dark"
+                            :label="prop.node.totalPositionCount"
                           />
-                          <img
-                            v-else
-                            :src="prop.node.avatar"
-                            class="col-xs-1 col-sm-2"
-                            style="width: 28px; height: 28px; border-radius: 50%"
+                          <q-badge
+                            v-if="prop.node.totalPositionVacant > 0"
+                            rounded
+                            color="red"
+                            outline
+                            :label="prop.node.totalPositionVacant"
                           />
-                          <!--=====ตำแหน่งว่าง สีแดง=====-->
-                          <div
-                            v-if="prop.node.name == `ว่าง` ||
-                              prop.node.name == `N/A` ||
-                              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>
-                  </q-scroll-area>
-                </q-card>
-              </div>
-              <div class="col-xs-12 col-sm-6">
-                <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">
-                      <div class="col-xs-12 col-sm-12 col-md-12"></div>
-                      <div class="col-xs-6 col-sm-6 col-md-6">
-                        <datepicker
-                          menu-class-name="modalfix"
-                          :readonly="!edit"
-                          v-model="date"
-                          :locale="'th'"
-                          autoApply
-                          :enableTimePicker="false"
-                          @update:modelValue="clickEditRow"
-                          week-start="0"
+                        </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="clickAction === prop.node.keyId"
+                        @click="
+                          clickAction =
+                            prop.node.name == `ว่าง` ||
+                            prop.node.name == `N/A` ||
+                            prop.node.name == null
+                              ? listKeyId(prop)
+                              : ''
+                        "
+                        active-class="my-list-link text-primary text-weight-medium"
+                        :class="
+                          prop.node.name == `ว่าง` ||
+                          prop.node.name == `N/A` ||
+                          prop.node.name == null
+                            ? 'row items-center text-dark q-py-xs q-pl-sm rounded-borders my-list'
+                            : 'row items-center text-dark q-py-xs q-pl-sm rounded-borders my-list disabled'
+                        "
+                      >
+                        <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="width: 28px; height: 28px; border-radius: 50%"
+                        />
+                        <!--=====ตำแหน่งว่าง สีแดง=====-->
+                        <div
+                          v-if="
+                            prop.node.name == `ว่าง` ||
+                            prop.node.name == `N/A` ||
+                            prop.node.name == null
+                          "
+                          class="q-px-sm text-weight-medium text-red"
                         >
-                          <template #year="{ year }">{{ year + 543 }}</template>
-                          <template #year-overlay-value="{ value }">{{
-                            parseInt(value + 543)
-                          }}</template>
-                          <template #trigger>
-                            <q-input
-                              :class="getClass(edit)"
-                              :outlined="edit"
-                              dense
-                              lazy-rules
-                              :borderless="!edit"
-                              :model-value="date2Thai(date)"
-                              :rules="[
+                          ว่าง
+                        </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>
+                </q-scroll-area>
+              </q-card>
+            </div>
+            <div class="col-xs-12 col-sm-6">
+              <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">
+                    <div class="col-xs-12 col-sm-12 col-md-12"></div>
+                    <div class="col-xs-6 col-sm-6 col-md-6">
+                      <datepicker
+                        menu-class-name="modalfix"
+                        :readonly="!edit"
+                        v-model="date"
+                        :locale="'th'"
+                        autoApply
+                        :enableTimePicker="false"
+                        @update:modelValue="clickEditRow"
+                        week-start="0"
+                      >
+                        <template #year="{ year }">{{ year + 543 }}</template>
+                        <template #year-overlay-value="{ value }">{{
+                          parseInt(value + 543)
+                        }}</template>
+                        <template #trigger>
+                          <q-input
+                            :class="getClass(edit)"
+                            :outlined="edit"
+                            dense
+                            lazy-rules
+                            :borderless="!edit"
+                            :model-value="date2Thai(date)"
+                            :rules="[
                                 (val: string) =>
                                   !!val ||
                                   `${'วันที่รายงานตัว'}`,
                               ]"
-                              :label="`${'วันที่รายงานตัว'}`"
-                              hide-bottom-space
-                            >
-                              <template v-slot:prepend>
-                                <q-icon
-                                  name="event"
-                                  class="cursor-pointer"
-                                  :style="edit
-                                      ? 'color: var(--q-primary)'
-                                      : 'color: var(--q-grey)'
-                                    "
-                                >
-                                </q-icon>
-                              </template>
-                            </q-input>
-                          </template>
-                        </datepicker>
-                      </div>
-                      <div class="col-xs-6 col-sm-6 col-md-6">
-                        <q-input
-                          disable
-                          standout
-                          readonly
-                          class="custom-input"
-                          dense
-                          lazy-rules
-                          v-model="posNoId"
-                          :label="`${'เลขที่ตำแหน่ง'}`"
-                        />
-                      </div>
-                      <div class="col-xs-6 col-sm-6 col-md-6">
-                        <q-input
-                          disable
-                          readonly
-                          class="custom-input"
-                          standout
-                          dense
-                          lazy-rules
-                          v-model="positionId"
-                          :label="`${'ตำแหน่ง'}`"
-                        />
-                      </div>
-                      <div class="col-xs-6 col-sm-6 col-md-6">
-                        <q-input
-                          disable
-                          readonly
-                          class="custom-input"
-                          standout
-                          dense
-                          lazy-rules
-                          v-model="positionPathSideId"
-                          :label="`${'ด้าน/สาขา'}`"
-                        />
-                      </div>
-                      <div class="col-xs-6 col-sm-6 col-md-6">
-                        <q-input
-                          disable
-                          readonly
-                          class="custom-input"
-                          standout
-                          dense
-                          lazy-rules
-                          v-model="positionTypeId"
-                          :label="`${'ประเภทตำแหน่ง'}`"
-                        />
-                      </div>
-                      <div class="col-xs-6 col-sm-6 col-md-6">
-                        <q-input
-                          disable
-                          readonly
-                          class="custom-input"
-                          standout
-                          dense
-                          lazy-rules
-                          v-model="positionLineId"
-                          :label="`${'สายงาน'}`"
-                        />
-                      </div>
-                      <div class="col-xs-6 col-sm-6 col-md-6">
-                        <q-input
-                          disable
-                          readonly
-                          class="custom-input"
-                          standout
-                          dense
-                          lazy-rules
-                          v-model="positionLevelId"
-                          :label="`${'ระดับ'}`"
-                        />
-                      </div>
-                      <div class="col-xs-6 col-sm-6 col-md-6"></div>
-                      <div class="col-xs-4 col-sm-4 col-md-4">
-                        <q-input
-                          :class="getClass(edit)"
-                          :outlined="edit"
-                          dense
-                          lazy-rules
-                          :readonly="!edit"
-                          :borderless="!edit"
-                          v-model="amount"
-                          :rules="[(val: string) => !!val || `${'กรุณากรอกเงินเดือน'}`]"
-                          :label="`${'เงินเดือน'}`"
-                          @update:modelValue="clickEditRow"
-                          type="number"
-                          hide-bottom-space
-                        />
-                      </div>
-                      <div class="col-xs-4 col-sm-4 col-md-4">
-                        <q-input
-                          :class="getClass(edit)"
-                          :outlined="edit"
-                          dense
-                          lazy-rules
-                          :readonly="!edit"
-                          :borderless="!edit"
-                          v-model="positionSalaryAmount"
-                          :rules="[
-                            (val: string) => !!val || `${'กรุณากรอกเงินประจำตำแหน่ง'}`,
-                          ]"
-                          :label="`${'เงินประจำตำแหน่ง'}`"
-                          @update:modelValue="clickEditRow"
-                          type="number"
-                          hide-bottom-space
-                        />
-                      </div>
-                      <div class="col-xs-4 col-sm-4 col-md-4">
-                        <q-input
-                          :class="getClass(edit)"
-                          :outlined="edit"
-                          dense
-                          lazy-rules
-                          :readonly="!edit"
-                          :borderless="!edit"
-                          v-model="mouthSalaryAmount"
-                          :rules="[
-                            (val) =>
-                              !!val || `${'กรุณากรอกเงินค่าตอบแทนรายเดือน'}`,
-                          ]"
-                          :label="`${'เงินค่าตอบแทนรายเดือน'}`"
-                          @update:modelValue="clickEditRow"
-                          type="number"
-                          hide-bottom-space
-                        />
-                      </div>
-                      <div class="col-xs-12 col-sm-12 col-md-12">
-                        <q-input
-                          :class="getClass(edit)"
-                          :outlined="edit"
-                          dense
-                          lazy-rules
-                          :readonly="!edit"
-                          :borderless="!edit"
-                          v-model="salaryClass"
-                          :rules="[
+                            :label="`${'วันที่รายงานตัว'}`"
+                            hide-bottom-space
+                          >
+                            <template v-slot:prepend>
+                              <q-icon
+                                name="event"
+                                class="cursor-pointer"
+                                :style="
+                                  edit
+                                    ? 'color: var(--q-primary)'
+                                    : 'color: var(--q-grey)'
+                                "
+                              >
+                              </q-icon>
+                            </template>
+                          </q-input>
+                        </template>
+                      </datepicker>
+                    </div>
+                    <q-space />
+                    <div class="col-xs-6 col-sm-6 col-md-6">
+                      <q-input
+                        disable
+                        standout
+                        readonly
+                        class="custom-input"
+                        dense
+                        lazy-rules
+                        v-model="posNoId"
+                        :label="`${'เลขที่ตำแหน่ง'}`"
+                      />
+                    </div>
+                    <div class="col-xs-6 col-sm-6 col-md-6">
+                      <q-input
+                        disable
+                        readonly
+                        class="custom-input"
+                        standout
+                        dense
+                        lazy-rules
+                        v-model="positionId"
+                        :label="`${'ตำแหน่ง'}`"
+                      />
+                    </div>
+                    <div class="col-xs-6 col-sm-6 col-md-6">
+                      <q-select
+                        :class="getClass(edit)"
+                        :outlined="edit"
+                        :readonly="!edit"
+                        class="custom-input"
+                        standout
+                        dense
+                        hide-bottom-space
+                        lazy-rules
+                        v-model="positionPathSideId"
+                        :rules="[(val:string) => !!val || `${'ด้าน/สาขา'}`]"
+                        :label="`${'ด้าน/สาขา'}`"
+                      />
+                    </div>
+                    <!-- :rules="[(val:string) => !!val || `${'กรุณาเลือกด้าน/สาขา'}`]" -->
+
+                    <div class="col-xs-6 col-sm-6 col-md-6">
+                      <q-input
+                        disable
+                        readonly
+                        class="custom-input"
+                        standout
+                        dense
+                        lazy-rules
+                        v-model="positionTypeId"
+                        :label="`${'ประเภทตำแหน่ง'}`"
+                      />
+                    </div>
+                    <div class="col-xs-6 col-sm-6 col-md-6">
+                      <q-input
+                        disable
+                        readonly
+                        class="custom-input"
+                        standout
+                        dense
+                        lazy-rules
+                        v-model="positionLineId"
+                        :label="`${'สายงาน'}`"
+                      />
+                    </div>
+                    <div class="col-xs-6 col-sm-6 col-md-6">
+                      <q-select
+                        :class="getClass(edit)"
+                        :outlined="edit"
+                        :readonly="!edit"
+                        class="custom-input"
+                        standout
+                        dense
+                        lazy-rules
+                        :options="positionLevelOptions"
+                        v-model="positionLevelId"
+                        :label="`${'ระดับ'}`"
+                        hide-bottom-space
+                        :rules="[(val:string) => !!val || `${'กรุณาเลือกระดับ'}`]"
+                        emit-value
+                        map-options
+                      />
+                    </div>
+                    <div class="col-sx-12 col-sm-12 col-md-12">
+                      <q-separator inset size="2px" class="q-my-md" />
+                    </div>
+                    <div class="col-xs-6 col-sm-6 col-md-6">
+                      <q-input
+                        :class="getClass(edit)"
+                        :outlined="edit"
+                        dense
+                        lazy-rules
+                        :readonly="!edit"
+                        :borderless="!edit"
+                        v-model="amount"
+                        :rules="[(val) => !!val || `${'กรุณากรอกเงินเดือน'}`]"
+                        :label="`${'เงินเดือน'}`"
+                        @update:modelValue="clickEditRow"
+                        type="number"
+                        hide-bottom-space
+                      />
+                    </div>
+
+                    <div class="col-xs-6 col-sm-6 col-md-6">
+                      <q-input
+                        :class="getClass(edit)"
+                        :outlined="edit"
+                        dense
+                        lazy-rules
+                        :readonly="!edit"
+                        :borderless="!edit"
+                        v-model="positionSalaryAmount"
+                        :rules="[
+                          (val) => !!val || `${'กรุณากรอกเงินประจำตำแหน่ง'}`,
+                        ]"
+                        :label="`${'เงินประจำตำแหน่ง'}`"
+                        @update:modelValue="clickEditRow"
+                        type="number"
+                        hide-bottom-space
+                      />
+                    </div>
+
+                    <div class="col-xs-6 col-sm-6 col-md-6">
+                      <q-input
+                        :class="getClass(edit)"
+                        :outlined="edit"
+                        dense
+                        lazy-rules
+                        :readonly="!edit"
+                        :borderless="!edit"
+                        v-model="mouthSalaryAmount"
+                        :rules="[
+                          (val) =>
+                            !!val || `${'กรุณากรอกเงินค่าตอบแทนรายเดือน'}`,
+                        ]"
+                        :label="`${'เงินค่าตอบแทนรายเดือน'}`"
+                        @update:modelValue="clickEditRow"
+                        type="number"
+                        hide-bottom-space
+                      />
+                    </div>
+                    <!-- <div class="col-xs-12 col-sm-12 col-md-12">
+                      <q-input
+                        :class="getClass(edit)"
+                        :outlined="edit"
+                        dense
+                        lazy-rules
+                        :readonly="!edit"
+                        :borderless="!edit"
+                        v-model="salaryClass"
+                        :rules="[
                             (val: string) =>
                               !!val || `${'กรุณากรอกตำแหน่ง (รายละเอียด)'}`,
                           ]"
-                          :label="`${'ตำแหน่ง (รายละเอียด)'}`"
-                          @update:modelValue="clickEditRow"
-                          hide-bottom-space
-                          autogrow
-                        >
-                          <template v-slot:append>
-                            <q-btn
-                              color="info"
-                              flat
-                              dense
-                              round
-                              size="14px"
-                              icon="mdi-plus"
-                              @click="templateDetail"
-                              :disable="!edit"
-                            />
-                          </template>
-                        </q-input>
-                      </div>
+                        :label="`${'ตำแหน่ง (รายละเอียด)'}`"
+                        @update:modelValue="clickEditRow"
+                        hide-bottom-space
+                        autogrow
+                      >
+                        <template v-slot:append>
+                          <q-btn
+                            color="info"
+                            flat
+                            dense
+                            round
+                            size="14px"
+                            icon="mdi-plus"
+                            @click="templateDetail"
+                            :disable="!edit"
+                          />
+                        </template>
+                      </q-input>
+                    </div>
 
-                      <div class="row col-xs-12 col-sm-12 col-md-12">
-                        <selector
-                          :class="getClass(edit)"
-                          :outlined="edit"
-                          dense
-                          lazy-rules
-                          :readonly="!edit"
-                          :borderless="!edit"
-                          v-model="refSelected"
-                          :label="`${'ต้นแบบเอกสารอ้างอิง'}`"
-                          @update:modelValue="clickEditRowRef"
-                          option-label="name"
-                          :options="refOptions"
-                          option-value="id"
-                          hide-bottom-space
-                          use-input
-                          input-debounce="0"
-                          @filter="(inputValue: any,
+                    <div class="row col-xs-12 col-sm-12 col-md-12">
+                      <selector
+                        :class="getClass(edit)"
+                        :outlined="edit"
+                        dense
+                        lazy-rules
+                        :readonly="!edit"
+                        :borderless="!edit"
+                        v-model="refSelected"
+                        :label="`${'ต้นแบบเอกสารอ้างอิง'}`"
+                        @update:modelValue="clickEditRowRef"
+                        option-label="name"
+                        :options="refOptions"
+                        option-value="id"
+                        hide-bottom-space
+                        use-input
+                        input-debounce="0"
+                        @filter="(inputValue: any,
                             doneFn: Function) => filterSelector(inputValue, doneFn, '8'
                             )"
-                        />
-                      </div>
-                      <div class="col-xs-12 col-sm-12 col-md-12">
-                        <q-input
-                          :class="getClass(edit)"
-                          :outlined="edit"
-                          dense
-                          lazy-rules
-                          :readonly="!edit"
-                          :borderless="!edit"
-                          v-model="salaryRef"
-                          :rules="[
+                      />
+                    </div>
+                    <div class="col-xs-12 col-sm-12 col-md-12">
+                      <q-input
+                        :class="getClass(edit)"
+                        :outlined="edit"
+                        dense
+                        lazy-rules
+                        :readonly="!edit"
+                        :borderless="!edit"
+                        v-model="salaryRef"
+                        :rules="[
                             (val: string) => !!val || `${'กรุณากรอกเอกสารอ้างอิง'}`,
                           ]"
-                          :label="`${'เอกสารอ้างอิง'}`"
-                          @update:modelValue="clickEditRow"
-                          type="textarea"
-                          hide-bottom-space
-                        />
-                      </div>
-                    </div>
-                  </q-scroll-area>
-                </q-card>
-              </div>
+                        :label="`${'เอกสารอ้างอิง'}`"
+                        @update:modelValue="clickEditRow"
+                        type="textarea"
+                        hide-bottom-space
+                      />
+                    </div> -->
+                  </div>
+                </q-scroll-area>
+              </q-card>
             </div>
-          </q-card-section>
+          </div>
+        </q-card-section>
 
-          <q-separator />
-          <DialogFooter
-            v-model:editvisible="edit"
-            v-model:modalEdit="modalEdit"
-            :save="saveAppoint"
-          />
-        </q-form>
-      </q-card>
-    </q-dialog>
+        <q-separator />
+        <DialogFooter
+          v-model:editvisible="edit"
+          :validate="validateData"
+          v-model:modalEdit="modalEdit"
+          :save="saveAppoint"
+        />
+      </q-form>
+    </q-card>
+  </q-dialog>
+  <q-form ref="myForm">
+    <DialogCard
+      v-model:Modal="modal"
+      :getdetail="itemtest"
+      :close="clickClose"
+      :validate="validateData"
+    />
+  </q-form>
+  <q-dialog v-model="modal_right" persistent>
+    <q-card style="width: 800px">
+      <q-form ref="myForm">
+        <!-- :title="`${modalEdit ? 'แก้ไข' : 'สร้าง'}รายละเอียดของ...`" -->
+        <DialogHeader
+          :title="`${modalEdit ? 'ขอผ่อนผัน' : 'สละสิทธิ์'} ชื่อ${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="positionMasterUserNote"
+              :label="`${'กรอกเหตุผล'}`"
+              @update:modelValue="clickEditRow"
+              type="textarea"
+            />
+            <q-file
+              v-model="files"
+              dense
+              :label="`${'เลือกไฟล์เอกสารหลักฐาน'}`"
+              outlined
+              use-chips
+              :rules="[(val) => !!val || `${'กรุณาเลือกไฟล์เอกสารหลักฐาน'}`]"
+              multiple
+              @update:modelValue="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
+          v-model:editvisible="edit"
+          v-model:modalEdit="modalEdit"
+          :validate="validateData"
+          :save="modalEdit ? savePostpone : saveDisclaim"
+        />
+      </q-form>
+    </q-card>
+  </q-dialog>
 
-    <DialogCard v-model:Modal="modal" :getdetail="itemtest" :close="clickClose" />
-
-    <q-dialog v-model="modal_right" persistent>
-      <q-card style="width: 800px">
-        <q-form ref="myForm">
-          <!-- :title="`${modalEdit ? 'แก้ไข' : 'สร้าง'}รายละเอียดของ...`" -->
-          <DialogHeader
-            :title="`${modalEdit ? 'ขอผ่อนผัน' : 'สละสิทธิ์'} ชื่อ${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
-                :readonly="!edit"
-                :borderless="!edit"
-                v-model="positionMasterUserNote"
-                :label="`${'กรอกเหตุผล'}`"
-                @update:modelValue="clickEditRow"
-                type="textarea"
-              />
-              <q-file
-                v-if="getNumFile == 1"
-                v-model="files"
-                dense
-                :label="'เลือกไฟล์เอกสารหลักฐาน'"
-                outlined
-                use-chips
-                multiple
-                class="q-py-sm"
-              >
-                <template v-slot:prepend>
-                  <q-icon name="attach_file" color="primary" />
-                </template>
-              </q-file>
-              <!-- :rules="[(val) => !!val || `${'กรุณากรอกเงื่อนไขตำแหน่ง'}`]" -->
-            </div>
-          </q-card-section>
-          <q-separator />
-          <DialogFooter
-            v-model:editvisible="edit"
-            v-model:modalEdit="modalEdit"
-            :save="modalEdit ? savePostpone : saveDisclaim"
-          />
-        </q-form>
-      </q-card>
-    </q-dialog>
-
-    <!-- dialog ขอผ่อนผัน / สละสิทธิ์ -->
+  <!-- dialog ขอผ่อนผัน / สละสิทธิ์ -->
   <q-dialog v-model="modalwaitInfo" persistent>
     <q-card style="width: 500px; max-width: 500px">
       <q-form ref="myForm">
@@ -1779,4 +1777,4 @@ const listKeyId = (data: any) => {
   object-fit: cover;
   margin-right: 10px;
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/modules/05_placement/components/pass/TableDetail.vue b/src/modules/05_placement/components/pass/TableDetail.vue
index b4250883a..d9d36723b 100644
--- a/src/modules/05_placement/components/pass/TableDetail.vue
+++ b/src/modules/05_placement/components/pass/TableDetail.vue
@@ -1,309 +1,377 @@
 <script setup lang="ts">
-import { ref } from "vue";
+import { ref, computed } from "vue";
 import DialogHeader from "@/modules/05_placement/components/pass/DialogHeader.vue";
+import { useQuasar } from 'quasar'
 import DialogFooter from "@/modules/05_placement/components/pass/DialogFooter.vue";
 import type { CheckboxItem } from "@/modules/05_placement/interface/index/Main";
-
+import { useCounterMixin } from "@/stores/mixin";
+const mixin = useCounterMixin(); //เรียกฟังก์ชันกลาง
+const modal = ref<boolean>();
+  const { success } = mixin;
 const save = ref<boolean>(true);
 const props = defineProps({
-    Modal: Boolean,
-    close: {
-        type: Function,
-        default: () => console.log("not function"),
-    },
-    getdetail: {
-        type: Object,
-        required: true
-    }
+  Modal: Boolean,
+  close: {
+    type: Function,
+    default: () => console.log("not function"),
+  },
+  getdetail: {
+    type: Object,
+    required: true,
+  },
+  validate: {
+    type: Function,
+    default: () => console.log("not function"),
+  },
 });
-
-
-
-const selection = ref([]);
+const myForm = ref<any>();
+const checkValidate = ref<boolean>(false);
+const selection = ref<number[]>([]);
 const checkboxItems: CheckboxItem[] = [
-    { id: 1, label: 'ไม่เป็นผู้ดำรงตำแหน่งทางการเมือง' },
-    { id: 2, label: 'ไม่เป็นคนไร้ความสามารถ คนเสมือนไร้ความสามารถ คนวิกลจริตหรือจิตฟั่นเฟือน ไม่สมประกอบหรือเป็นโรคตามที่กำหนดในกฎ ก.พ.' },
-    { id: 3, label: 'ไม่เป็นผู้อยู่ในระหว่างถูกสั่งพักราชการหรือถูกสั่งให้ออกจากราชการไว้ก่อนตามพระราชบัญญัตินี้ หรือตามกฎหมายอื่น' },
-    { id: 4, label: 'ไม่เป็นผู้บกพร่องในศีลธรรมอันดีจนเป็นที่รังเกียจของสังคม' },
-    { id: 5, label: 'ไม่เป็นกรรมการหรือผู้ดำรงตำแหน่งที่รับผิดชอบในการบริหารพรรคการเมือง หรือเจ้าหน้าที่ในพรรคการเมือง' },
-    { id: 6, label: 'ไม่เป็นบุคคลล้มละลาย' },
-    { id: 7, label: 'ไม่เป็นผู้เคยต้องรับโทษจำคุกโดยคำพิพากษาถึงที่สุดให้จำคุกเพราะกระทำความผิดทางอาญา เว้นแต่เป็นโทษสำหรับความผิดที่ใด้กระทำโดยประมาทหรือความผิดลหุโทษ' },
-    { id: 8, label: 'ไม่เป็นผู้เคยถูกลงโทษให้ออก ปลดออก หรือไล่ออกจากรัฐวิสาหกิจ หรือ หน่วยงานอื่นของรัฐ' },
-    { id: 9, label: 'เป็นผู้เคยถูลงโทษให้ออก หรือปลดออก เพราะกระทำผิตวินัยตามพระราชบัญญัตินี้ หรือตามกฎหมายอื่น' },
-    { id: 10, label: 'เป็นผู้เคยถูกลงโทษไล่ออก เพราะกระทำผิดวินัยตามพระราชบัญญัตินี้ หรือตามกฎหมายอื่น' },
-    { id: 11, label: 'เป็นผู้เคยกระทำการทุจริตในการสอบเข้ารับราชการ หรือเข้าปฏิบัติงานใน หน่วยงานของรัฐ' },
+  { id: 1, label: "ไม่เป็นผู้ดำรงตำแหน่งทางการเมือง" },
+  {
+    id: 2,
+    label:
+      "ไม่เป็นคนไร้ความสามารถ คนเสมือนไร้ความสามารถ คนวิกลจริตหรือจิตฟั่นเฟือน ไม่สมประกอบหรือเป็นโรคตามที่กำหนดในกฎ ก.พ.",
+  },
+  {
+    id: 3,
+    label:
+      "ไม่เป็นผู้อยู่ในระหว่างถูกสั่งพักราชการหรือถูกสั่งให้ออกจากราชการไว้ก่อนตามพระราชบัญญัตินี้ หรือตามกฎหมายอื่น",
+  },
+  { id: 4, label: "ไม่เป็นผู้บกพร่องในศีลธรรมอันดีจนเป็นที่รังเกียจของสังคม" },
+  {
+    id: 5,
+    label:
+      "ไม่เป็นกรรมการหรือผู้ดำรงตำแหน่งที่รับผิดชอบในการบริหารพรรคการเมือง หรือเจ้าหน้าที่ในพรรคการเมือง",
+  },
+  { id: 6, label: "ไม่เป็นบุคคลล้มละลาย" },
+  {
+    id: 7,
+    label:
+      "ไม่เป็นผู้เคยต้องรับโทษจำคุกโดยคำพิพากษาถึงที่สุดให้จำคุกเพราะกระทำความผิดทางอาญา เว้นแต่เป็นโทษสำหรับความผิดที่ใด้กระทำโดยประมาทหรือความผิดลหุโทษ",
+  },
+  {
+    id: 8,
+    label:
+      "ไม่เป็นผู้เคยถูกลงโทษให้ออก ปลดออก หรือไล่ออกจากรัฐวิสาหกิจ หรือ หน่วยงานอื่นของรัฐ",
+  },
+  {
+    id: 9,
+    label:
+      "เป็นผู้เคยถูลงโทษให้ออก หรือปลดออก เพราะกระทำผิตวินัยตามพระราชบัญญัตินี้ หรือตามกฎหมายอื่น",
+  },
+  {
+    id: 10,
+    label:
+      "เป็นผู้เคยถูกลงโทษไล่ออก เพราะกระทำผิดวินัยตามพระราชบัญญัตินี้ หรือตามกฎหมายอื่น",
+  },
+  {
+    id: 11,
+    label:
+      "เป็นผู้เคยกระทำการทุจริตในการสอบเข้ารับราชการ หรือเข้าปฏิบัติงานใน หน่วยงานของรัฐ",
+  },
 ];
+const $q = useQuasar()
+function isRequired(val: any): boolean | string {
+  return !!val || "กรุณาเลือกไฟล์เอกสารหลักฐาน";
+}
+const validateData = () => {
+  const selectedIds = selection.value;
+  const selectedItems = checkboxItems.filter((item) =>
+    selectedIds.includes(item.id)
+  );
 
-const clickSave = async () => {
-    console.log(selection.value)
+  return (
+    selectedItems.length > 0 && selectedItems.length === selectedIds.length
+  );
 };
 
+const ClickSave = () => {
+  const isValid = validateData();
+  if (isValid) {
+    console.log(selection.value);
+    console.log("rerer", props.Modal);
+    props.close();
+    props.validate();
+    selection.value = [];
+  } else {
+    success($q, "กรอกให้ครบ");
+  }
+};
+
+const close = async () => {
+  props.close();
+  selection.value = [];
+};
 </script>
 <template>
-    <q-dialog v-model="props.Modal">
-        <q-card style="max-width: 100%;width:80%;">
-            <q-form ref="myForm">
-                <div class="row">
-                    <DialogHeader :title="`รายละเอียดของ ${props.getdetail.fullName}`" :close="close" />
-                </div>
-                <q-separator />
+  <q-dialog v-model="props.Modal">
+    <q-card style="max-width: 100%; width: 80%">
+      <q-form ref="myForm">
+        <div class="row">
+          <DialogHeader
+            :title="`รายละเอียดของ ${props.getdetail.fullName}`"
+            @click="close"
+          />
+        </div>
+        <q-separator />
 
-                <div class="contanier-box-main">
-                    <div class="contanier-box-mini">
-                        <q-card bordered class="card-panding">
-                            <div class="row items-center q-pa-xs header-text">
-                                ข้อมูลทั่วไป <span class="check-officer"><q-icon name="mdi-check" />
-                                    ข้าราชการฯ กทม</span>
-                            </div>
-                            <div class="row q-pa-xs">
-                                <div class="col-3 header-sub-text">
-                                    <div class="q-pb-md">
-                                        เลขที่ประจำตัวประชาชน
-                                    </div>
-                                    <div class="q-pb-md">
-                                        วัน/เดือน/ปีเกิด
-                                    </div>
-                                </div>
-                                <div class="col-4 sub-text">
-                                    <div class="q-pb-md">
-                                        {{ props.getdetail.profileID }}
-                                    </div>
-                                    <div class="q-pb-md">
-                                        {{ props.getdetail.dateOfBirth }}
-                                    </div>
-                                </div>
-                                <div class="col-2 header-sub-text">
-                                    <div class="q-pb-md">
-                                        ชื่อ-นามสกุล
-                                    </div>
-                                    <div class="q-pb-md">
-                                        เพศ
-                                    </div>
-                                </div>
-                                <div class="col-3 sub-text">
-                                    <div class="q-pb-md">
-                                        {{ props.getdetail.fullName }}
-                                    </div>
-                                    <div class="q-pb-md">
-                                        {{ props.getdetail.gender }}
-                                    </div>
-                                </div>
-                            </div>
-                        </q-card>
+        <div class="contanier-box-main">
+          <div class="contanier-box-mini">
+            <q-card bordered class="card-panding">
+              <div class="row items-center q-pa-xs header-text">
+                ข้อมูลทั่วไป
+                <span class="check-officer"
+                  ><q-icon name="mdi-check" /> ข้าราชการฯ กทม</span
+                >
+              </div>
+              <div class="row q-pa-xs">
+                <div class="col-3 header-sub-text">
+                  <div class="q-pb-md">เลขที่ประจำตัวประชาชน</div>
+                  <div class="q-pb-md">วัน/เดือน/ปีเกิด</div>
+                </div>
+                <div class="col-4 sub-text">
+                  <div class="q-pb-md">
+                    {{ props.getdetail.profileID }}
+                  </div>
+                  <div class="q-pb-md">
+                    {{ props.getdetail.dateOfBirth }}
+                  </div>
+                </div>
+                <div class="col-2 header-sub-text">
+                  <div class="q-pb-md">ชื่อ-นามสกุล</div>
+                  <div class="q-pb-md">เพศ</div>
+                </div>
+                <div class="col-3 sub-text">
+                  <div class="q-pb-md">
+                    {{ props.getdetail.fullName }}
+                  </div>
+                  <div class="q-pb-md">
+                    {{ props.getdetail.gender }}
+                  </div>
+                </div>
+              </div>
+            </q-card>
+          </div>
+          <div class="contanier-box-mini">
+            <q-card bordered class="card-panding">
+              <div class="row items-center q-pa-xs header-text">ภูมิลำเนา</div>
+              <div class="row q-pa-xs">
+                <div class="col-3 header-sub-text">ที่อยู่</div>
+                <div class="col-9 sub-text">
+                  {{ props.getdetail.address }}
+                </div>
+              </div>
+            </q-card>
+          </div>
+          <div class="contanier-box-mini">
+            <q-card bordered class="card-panding">
+              <div class="row items-center q-pa-xs header-text">การศึกษา</div>
+              <div class="row q-pa-xs">
+                <div class="col-3 header-sub-text">
+                  <div class="q-pb-md">สถานศึกษา</div>
+                  <div class="q-pb-md">สาขาวิชาเอก</div>
+                </div>
+                <div class="col-4 sub-text">
+                  <div class="q-pb-md">
+                    {{ props.getdetail.university }}
+                  </div>
+                  <div class="q-pb-md">
+                    {{ props.getdetail.major }}
+                  </div>
+                </div>
+                <div class="col-2 header-sub-text">
+                  <div class="q-pb-md">วุฒิการศึกษา</div>
+                  <div class="q-pb-md">อื่นๆ</div>
+                </div>
+                <div class="col-3 sub-text">
+                  <div class="q-pb-md">
+                    {{ props.getdetail.degree ? props.getdetail.degree : "-" }}
+                  </div>
+                  <div class="q-pb-md">
+                    {{ props.getdetail.remark ? props.getdetail.remark : "-" }}
+                  </div>
+                </div>
+              </div>
+            </q-card>
+          </div>
+          <div class="contanier-box-mini">
+            <q-card bordered class="card-panding">
+              <div class="row items-center q-pa-xs header-text">การสอบ</div>
+              <div class="row q-pa-xs">
+                <div class="col-6">
+                  <q-card class="card-exam q-pa-sm">
+                    <div class="row">
+                      <div class="col-4 q-pa-xs header-sub-text-exam">
+                        <div>ประเภท</div>
+                        <div>ภาค ก</div>
+                        <div>ภาค ข</div>
+                        <div>ภาค ค</div>
+                        <div>รวมทั้งหมด</div>
+                      </div>
+                      <div class="col-4 q-pa-xs">
+                        <div class="header-sub-text-exam-2">คะแนนที่ได้</div>
+                        <div class="sub-text-exam">
+                          {{ props.getdetail.scoreResult.scoreAFull }}
+                        </div>
+                        <div class="sub-text-exam">
+                          {{ props.getdetail.scoreResult.scoreBFull }}
+                        </div>
+                        <div class="sub-text-exam">
+                          {{ props.getdetail.scoreResult.scoreCFull }}
+                        </div>
+                        <div class="sub-text-exam">
+                          {{ props.getdetail.scoreResult.scoreSumFull }}
+                        </div>
+                      </div>
+                      <div class="col-4 q-pa-xs header-sub-text-exam-2">
+                        <div class="header-sub-text-exam-2">ผลการสอบ</div>
+                        <div class="sub-text-exam">
+                          {{ props.getdetail.scoreResult.scoreA }}
+                        </div>
+                        <div class="sub-text-exam">
+                          {{ props.getdetail.scoreResult.scoreB }}
+                        </div>
+                        <div class="sub-text-exam">
+                          {{ props.getdetail.scoreResult.scoreC }}
+                        </div>
+                        <div class="sub-text-exam">
+                          {{ props.getdetail.scoreResult.scoreSum }}
+                        </div>
+                      </div>
                     </div>
-                    <div class="contanier-box-mini">
-                        <q-card bordered class="card-panding">
-                            <div class="row items-center q-pa-xs header-text">
-                                ภูมิลำนำ
-                            </div>
-                            <div class="row q-pa-xs">
-                                <div class="col-3 header-sub-text">
-                                    ที่อยู่
-                                </div>
-                                <div class="col-9 sub-text">
-                                    {{ props.getdetail.address }}
-                                </div>
-                            </div>
-                        </q-card>
+                  </q-card>
+                </div>
+                <div class="col-1"></div>
+                <div class="col-5 q-pt-sm q-pl-lg">
+                  <div class="row">
+                    <div class="col-7 header-sub-text">
+                      <div class="q-pb-sm">ผลการสอบ</div>
+                      <div class="q-pb-sm">ลำดับที่สอบได้</div>
+                      <div class="q-pb-sm">จำนวนครั้งที่สมัครสอบ</div>
                     </div>
-                    <div class="contanier-box-mini">
-                        <q-card bordered class="card-panding">
-                            <div class="row items-center q-pa-xs header-text">
-                                การศึกษา
-                            </div>
-                            <div class="row q-pa-xs">
-                                <div class="col-3 header-sub-text">
-                                    <div class="q-pb-md">
-                                        สถานศึกษา
-                                    </div>
-                                    <div class="q-pb-md">
-                                        สาขาวิชาเอก
-                                    </div>
-                                </div>
-                                <div class="col-4 sub-text">
-                                    <div class="q-pb-md">
-                                        {{ props.getdetail.university }}
-                                    </div>
-                                    <div class="q-pb-md">
-                                        {{ props.getdetail.major }}
-                                    </div>
-                                </div>
-                                <div class="col-2 header-sub-text">
-                                    <div class="q-pb-md">
-                                        วุฒิการศึกษา
-                                    </div>
-                                    <div class="q-pb-md">
-                                        อื่นๆ
-                                    </div>
-                                </div>
-                                <div class="col-3 sub-text">
-                                    <div class="q-pb-md">
-                                        {{ props.getdetail.degree ? props.getdetail.degree : '-' }}
-                                    </div>
-                                    <div class="q-pb-md">
-                                        {{ props.getdetail.remark ? props.getdetail.remark : '-' }}
-                                    </div>
-                                </div>
-                            </div>
-                        </q-card>
-                    </div>
-                    <div class="contanier-box-mini">
-                        <q-card bordered class="card-panding">
-                            <div class="row items-center q-pa-xs header-text">
-                                การสอบ
-                            </div>
-                            <div class="row q-pa-xs">
-                                <div class="col-6">
-                                    <q-card class="card-exam q-pa-sm">
-                                        <div class="row">
-                                            <div class="col-4 q-pa-xs header-sub-text-exam">
-                                                <div> ประเภท </div>
-                                                <div> ภาค ก </div>
-                                                <div> ภาค ข </div>
-                                                <div> ภาค ค </div>
-                                                <div> รวมทั้งหมด </div>
-                                            </div>
-                                            <div class="col-4 q-pa-xs">
-                                                <div class="header-sub-text-exam-2"> คะแนนที่ได้</div>
-                                                <div class="sub-text-exam"> {{
-                                                    props.getdetail.scoreResult.scoreAFull }}</div>
-                                                <div class="sub-text-exam"> {{
-                                                    props.getdetail.scoreResult.scoreBFull }}</div>
-                                                <div class="sub-text-exam"> {{
-                                                    props.getdetail.scoreResult.scoreCFull }}</div>
-                                                <div class="sub-text-exam"> {{
-                                                    (props.getdetail.scoreResult.scoreSumFull) }}
-                                                </div>
-                                            </div>
-                                            <div class="col-4 q-pa-xs header-sub-text-exam-2">
-                                                <div class="header-sub-text-exam-2">ผลการสอบ</div>
-                                                <div class="sub-text-exam">{{ props.getdetail.scoreResult.scoreA
-                                                }}</div>
-                                                <div class="sub-text-exam">{{ props.getdetail.scoreResult.scoreB
-                                                }}</div>
-                                                <div class="sub-text-exam">{{ props.getdetail.scoreResult.scoreC
-                                                }}</div>
-                                                <div class="sub-text-exam">{{
-                                                    (props.getdetail.scoreResult.scoreSum) }}</div>
-                                            </div>
-                                        </div>
-                                    </q-card>
-                                </div>
-                                <div class="col-1"></div>
-                                <div class="col-5 q-pt-sm q-pl-lg">
-                                    <div class="row">
-                                        <div class="col-7 header-sub-text">
-                                            <div class="q-pb-sm">ผลการสอบ</div>
-                                            <div class="q-pb-sm">ลำดับที่สอบได้</div>
-                                            <div class="q-pb-sm">จำนวนครั้งที่สมัครสอบ</div>
-                                        </div>
-                                        <div class="col-5 sub-text-exam">
-                                            <div class="q-pb-sm">{{ props.getdetail.scoreResult.examResult }}
-                                            </div>
-                                            <div class="q-pb-sm">{{ props.getdetail.number }}</div>
-                                            <div class="q-pb-sm">{{ props.getdetail.examCount }}</div>
-                                        </div>
-                                    </div>
-                                </div>
-                            </div>
-                        </q-card>
+                    <div class="col-5 sub-text-exam">
+                      <div class="q-pb-sm">
+                        {{ props.getdetail.scoreResult.examResult }}
+                      </div>
+                      <div class="q-pb-sm">{{ props.getdetail.number }}</div>
+                      <div class="q-pb-sm">{{ props.getdetail.examCount }}</div>
                     </div>
+                  </div>
+                </div>
+              </div>
+            </q-card>
+          </div>
 
-                    <div class="contanier-box-mini">
-                        <q-card bordered class="card-panding">
-                            <div class="col-12 row items-center q-pa-sm header-text">
-                                การคัดกรองคุณสมบัติ
-                            </div>
-                            <div v-for="item of checkboxItems" :key="item.id" class="q-pa-sm">
-                                <q-checkbox size="xs" v-model="selection" :val="item.id" :label="item.label" keep-color
-                                    color="teal" class="checkbox-group" />
-                                <q-separator />
-                            </div>
-                        </q-card>
-                    </div>
-                </div>
+          <div class="contanier-box-mini">
+            <q-card bordered class="card-panding">
+              <div class="col-12 row items-center q-pa-sm header-text">
+                การคัดกรองคุณสมบัติ
+              </div>
+              <div v-for="item of checkboxItems" :key="item.id" class="q-pa-sm">
+                <q-checkbox
+                  size="xs"
+                  v-model="selection"
+                  :val="item.id"
+                  :label="item.label"
+                  keep-color
+                  color="teal"
+                  :rules="[isRequired]"
+                  class="checkbox-group"
+                />
                 <q-separator />
-                <div>
-                    <DialogFooter :save="clickSave" v-model:editvisible="save" />
-                </div>
-            </q-form>
-        </q-card>
-    </q-dialog>
+              </div>
+            </q-card>
+          </div>
+        </div>
+        <q-separator />
+        <div>
+          <DialogFooter
+            @click="ClickSave"
+            :model="props.Modal"
+            :editvisible="save"
+            :validate="validateData"
+          />
+        </div>
+      </q-form>
+    </q-card>
+  </q-dialog>
 </template>
 <style lang="scss" scoped>
 .icon-officer {
-    color: #00AA86;
-    padding-left: 20px;
+  color: #00aa86;
+  padding-left: 20px;
 }
 
 .check-officer {
-    font-size: 17px;
-    font-weight: 500;
-    line-height: 26px;
-    color: #00AA86;
-    padding-left: 20px;
+  font-size: 17px;
+  font-weight: 500;
+  line-height: 26px;
+  color: #00aa86;
+  padding-left: 20px;
 }
 
 .contanier-box-main {
-    padding: 10px 21px 10px 21px;
+  padding: 10px 21px 10px 21px;
 }
 
 .contanier-box-mini {
-    padding: 10px 0px 10px 0px;
+  padding: 10px 0px 10px 0px;
 }
 
 .card-panding {
-    padding: 15px 21px 15px 21px;
+  padding: 15px 21px 15px 21px;
 }
 
 .header-text {
-    font-size: 18px;
-    font-weight: 600;
-    color: #4F4F4F;
+  font-size: 18px;
+  font-weight: 600;
+  color: #4f4f4f;
 }
 
 .header-sub-text {
-    font-size: 16px;
-    font-weight: 400;
-    line-height: 150%;
-    color: #818181;
+  font-size: 16px;
+  font-weight: 400;
+  line-height: 150%;
+  color: #818181;
 }
 .sub-text {
-    font-weight: 400;
-    font-size: 16px;
-    line-height: 22px;
-    letter-spacing: 0.0025em;
-    color: #35373C;
+  font-weight: 400;
+  font-size: 16px;
+  line-height: 22px;
+  letter-spacing: 0.0025em;
+  color: #35373c;
 }
 
 .card-exam {
-    border-radius: 5px;
-    background: #FAFAFA;
+  border-radius: 5px;
+  background: #fafafa;
 }
 
 .header-sub-text-exam {
-    font-size: 15px;
-    font-weight: 500;
-    line-height: 150%;
-    color: #818181;
+  font-size: 15px;
+  font-weight: 500;
+  line-height: 150%;
+  color: #818181;
 }
 
 .header-sub-text-exam-2 {
-    font-size: 15px;
-    font-weight: 500;
-    line-height: 150%;
-    color: #00AA86;
+  font-size: 15px;
+  font-weight: 500;
+  line-height: 150%;
+  color: #00aa86;
 }
 
 .sub-text-exam {
-    font-size: 15px;
-    font-weight: 500;
-    color: #000000;
+  font-size: 15px;
+  font-weight: 500;
+  color: #000000;
 }
 
 .checkbox-group {
-    font-size: 16px;
-    font-weight: 400;
-    color: #35373C;
+  font-size: 16px;
+  font-weight: 400;
+  color: #35373c;
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/modules/05_placement/components/pass/TableView.vue b/src/modules/05_placement/components/pass/TableView.vue
index 55d7b1a30..1fc1b8ac8 100644
--- a/src/modules/05_placement/components/pass/TableView.vue
+++ b/src/modules/05_placement/components/pass/TableView.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="q-px-md q-pb-md">
-      <div class="col-12 row q-py-sm" v-if="nornmalData == false">
+    <div class="col-12 row q-py-sm" v-if="nornmalData == false">
       <q-space />
       <div class="items-center" style="display: flex">
         <div
@@ -115,9 +115,19 @@
       :virtual-scroll-sticky-size-start="48"
       dense
       :pagination-label="paginationLabel"
-      :pagination="initialPagination"
-      :rows-per-page-options="[0]"
+      v-model:pagination="pagination"
     >
+      <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>
       <template v-slot:header="props">
         <q-tr :props="props">
           <q-th v-for="col in props.cols" :key="col.name" :props="props">
@@ -136,12 +146,12 @@
 import { ref, useAttrs } from "vue";
 import { useCounterMixin } from "@/stores/mixin";
 import { useQuasar } from "quasar";
-
 const $q = useQuasar();
 const mixin = useCounterMixin(); //เรียกฟังก์ชันกลาง
 const { dialogMessage } = mixin;
 const editvisible = ref<boolean>(false);
 const attrs = ref<any>(useAttrs());
+const paging = ref<boolean>(true);
 const table = ref<any>(null);
 const filterRef = ref<any>(null);
 const modalPublish = ref<boolean>(false);
@@ -231,7 +241,16 @@ const props = defineProps({
     default: () => console.log("not function"),
   },
 });
-
+const pagination = ref({
+  sortBy: "desc",
+  descending: false,
+  page: 1,
+  rowsPerPage: 10,
+});
+const paginationLabel = (start: string, end: string, total: string) => {
+  if (paging.value == true) return " " + start + "-" + end + " ใน " + total;
+  else return start + "-" + end + " ใน " + total;
+};
 const refresh = () => props.refresh();
 const initialPagination = ref<any>({
   //   descending: false,
@@ -259,12 +278,6 @@ const updateVisibleFilter = (value: any) => {
   emit("update:inputvisibleFilter", value);
 };
 
-const paginationLabel = (start: string, end: string, total: string) => {
-  if (props.paging == true)
-    return " " + start + " ใน " + end + " จากจำนวน " + total + " รายการ";
-  else return start + "-" + end + " ใน " + total;
-};
-
 const checkSave = () => {
   props.validate();
   props.save();