diff --git a/src/interface/request/main/main.ts b/src/interface/request/main/main.ts
index a59ba2207..2d7329cb3 100644
--- a/src/interface/request/main/main.ts
+++ b/src/interface/request/main/main.ts
@@ -250,6 +250,12 @@ const menuList = readonly<any[]>([
         path: "appoint-promote",
         role: "placement",
       },
+      {
+        key: 6.8,
+        label: "รายการแต่งตั้งลูกจ้างประจำ",
+        path: "appoint-employee",
+        role: "placement",
+      },
       // {
       //   key: 6.9,
       //   label: "รายการย้าย",
diff --git a/src/modules/04_registry/components/Profile.vue b/src/modules/04_registry/components/Profile.vue
index 947e418fc..4c61d3774 100644
--- a/src/modules/04_registry/components/Profile.vue
+++ b/src/modules/04_registry/components/Profile.vue
@@ -6,17 +6,10 @@
           v-model:statusEdit="statusEdit"
           :profileType="profileType"
         /> -->
-        <Information
-          v-model:statusEdit="statusEdit"
-          :fetchDataProfile="fetchData"
-        />
+        <Information v-model:statusEdit="statusEdit" :fetchDataProfile="fetchData" />
       </div>
       <div id="government" name="16" class="row col-12 q-mt-md">
-        <Government
-          v-model:statusEdit="statusEdit"
-          :profileType="profileType"
-          :employeeClass="employeeClass"
-        />
+        <Government v-model:statusEdit="statusEdit" :profileType="profileType" :employeeClass="employeeClass" />
       </div>
       <div id="address" name="17" class="row col-12 q-mt-md">
         <Address v-model:statusEdit="statusEdit" />
@@ -40,20 +33,11 @@
         <CoinedVue v-model:statusEdit="statusEdit" :profileType="profileType" />
       </div>
       <div id="assessment" name="6" class="row col-12 q-mt-md">
-        <AssessmentVue
-          v-model:statusEdit="statusEdit"
-          :profileType="profileType"
-        />
+        <AssessmentVue v-model:statusEdit="statusEdit" :profileType="profileType" />
       </div>
       <div id="position" name="7" class="row col-12 q-mt-md">
-        <SalaryVue
-          v-model:statusEdit="statusEdit"
-          v-if="profileType === 'officer'"
-        />
-        <SalaryEmployeeTempVue
-          v-model:statusEdit="statusEdit"
-          v-else-if="employeeClass === 'temp'"
-        />
+        <SalaryVue v-model:statusEdit="statusEdit" v-if="profileType === 'officer'" />
+        <SalaryEmployeeTempVue v-model:statusEdit="statusEdit" v-else-if="employeeClass === 'temp'" />
         <SalaryEmployeeVue v-model:statusEdit="statusEdit" v-else />
       </div>
       <div id="rule" name="8" class="row col-12 q-mt-md">
@@ -78,70 +62,29 @@
         <DocumentVue v-model:statusEdit="statusEdit" />
       </div>
     </div>
-    <q-page-sticky
-      position="top"
-      expand
-      class="bg-grey-2 text-white"
-      style="z-index: 99; padding: 0% 1% 0% 1%"
-    >
-      <div
-        class="row col-12 q-gutter-sm q-pb-sm text-dark no-wrap items-center"
-      >
-        <q-btn
-          flat
-          round
-          class="bg-teal-1 full-height"
-          color="primary"
-          icon="mdi-chevron-left"
-          dense
-          @click="router.go(-1)"
-        >
+    <q-page-sticky position="top" expand class="bg-grey-2 text-white" style="z-index: 99; padding: 0% 1% 0% 1%">
+      <div class="row col-12 q-gutter-sm q-pb-sm text-dark no-wrap items-center">
+        <q-btn flat round class="bg-teal-1 full-height" color="primary" icon="mdi-chevron-left" dense
+          @click="router.go(-1)">
         </q-btn>
-        <q-avatar
-          v-if="imageUrl == null"
-          size="65px"
-          rounded
-          class="containerimage"
-        >
-          <img
-            src="@/assets/avatar_user.jpg"
-            class="bg-grey-3"
-            style="object-fit: cover"
-          />
-          <div
-            class="overlay absolute-bottom text-subtitle2 text-center cursor-pointer"
-            @click="clickImage()"
-          >
+        <q-avatar v-if="imageUrl == null" size="65px" rounded class="containerimage">
+          <img src="@/assets/avatar_user.jpg" class="bg-grey-3" style="object-fit: cover" />
+          <div class="overlay absolute-bottom text-subtitle2 text-center cursor-pointer" @click="clickImage()">
             <q-icon name="mdi-camera" size="18px" color="blue">
               <q-tooltip>อัปเดตรูปภาพ</q-tooltip>
             </q-icon>
 
-            <input
-              type="file"
-              style="display: none"
-              ref="inputImage"
-              accept="image/*"
-              @change="uploadImage"
-            />
+            <input type="file" style="display: none" ref="inputImage" accept="image/*" @change="uploadImage" />
           </div>
         </q-avatar>
         <q-avatar v-else size="65px" rounded class="containerimage">
           <img :src="imageUrl" class="bg-grey-3" style="object-fit: cover" />
-          <div
-            class="overlay absolute-bottom text-subtitle2 text-center cursor-pointer"
-            @click="clickImage()"
-          >
+          <div class="overlay absolute-bottom text-subtitle2 text-center cursor-pointer" @click="clickImage()">
             <q-icon name="mdi-camera" size="18px" color="blue">
               <q-tooltip>อัปเดตรูปภาพ</q-tooltip>
             </q-icon>
 
-            <input
-              type="file"
-              style="display: none"
-              ref="inputImage"
-              accept="image/*"
-              @change="uploadImage"
-            />
+            <input type="file" style="display: none" ref="inputImage" accept="image/*" @change="uploadImage" />
           </div>
         </q-avatar>
         <div class="row items-center text-dark q-ml-md">
@@ -154,26 +97,32 @@
         </div>
         <q-space />
 
-        <q-btn round flat color="blue" icon="mdi-file-document">
+        <q-btn round flat color="blue" icon="mdi-file-document"
+          v-if="profileType == 'officer' || (profileType == 'employee' && employeeClass == 'perm')">
           <q-menu transition-show="jump-down" transition-hide="jump-up">
             <q-list dense style="min-width: 160px">
-              <q-item clickable v-close-popup @click="helpPost">
+              <q-item clickable v-close-popup @click="helpPost" v-if="profileType == 'officer'">
                 <q-item-section style="min-width: 0px" avatar class="q-py-sm">
                 </q-item-section>
                 <q-item-section>ช่วยราชการ</q-item-section>
               </q-item>
               <q-separator />
-              <q-item clickable v-close-popup @click="repatriationPost">
+              <q-item clickable v-close-popup @click="repatriationPost" v-if="profileType == 'officer'">
                 <q-item-section style="min-width: 0px" avatar class="q-py-sm">
                 </q-item-section>
                 <q-item-section>ส่งตัวกลับ</q-item-section>
               </q-item>
               <q-separator />
-              <q-item clickable v-close-popup @click="appointPost">
+              <q-item clickable v-close-popup @click="appointPost" v-if="profileType == 'officer'">
                 <q-item-section style="min-width: 0px" avatar class="q-py-sm">
                 </q-item-section>
                 <q-item-section>แต่งตั้ง-เลื่อน-ย้าย</q-item-section>
               </q-item>
+              <q-item clickable v-close-popup @click="appointPost" v-if="profileType == 'employee'">
+                <q-item-section style="min-width: 0px" avatar class="q-py-sm">
+                </q-item-section>
+                <q-item-section>แต่งตั้ง</q-item-section>
+              </q-item>
               <q-separator />
               <!-- <q-item clickable v-close-popup @click="relocationPost">
                 <q-item-section style="min-width: 0px" avatar class="q-py-sm">
@@ -181,31 +130,31 @@
                 <q-item-section>ย้าย</q-item-section>
               </q-item>
               <q-separator /> -->
-              <q-item clickable v-close-popup @click="clickPassaway">
+              <q-item clickable v-close-popup @click="clickPassaway" v-if="profileType == 'officer'">
                 <q-item-section style="min-width: 0px" avatar class="q-py-sm">
                 </q-item-section>
                 <q-item-section>ถึงแก่กรรม</q-item-section>
               </q-item>
               <q-separator />
-              <q-item clickable v-close-popup @click="outPost">
+              <q-item clickable v-close-popup @click="outPost" v-if="profileType == 'officer'">
                 <q-item-section style="min-width: 0px" avatar class="q-py-sm">
                 </q-item-section>
                 <q-item-section>ให้ออกจากราชการ</q-item-section>
               </q-item>
               <q-separator />
-              <q-item clickable v-close-popup @click="dischargePost">
+              <q-item clickable v-close-popup @click="dischargePost" v-if="profileType == 'officer'">
                 <q-item-section style="min-width: 0px" avatar class="q-py-sm">
                 </q-item-section>
                 <q-item-section>ปลดออกจากราชการ</q-item-section>
               </q-item>
               <q-separator />
-              <q-item clickable v-close-popup @click="expulsionPost">
+              <q-item clickable v-close-popup @click="expulsionPost" v-if="profileType == 'officer'">
                 <q-item-section style="min-width: 0px" avatar class="q-py-sm">
                 </q-item-section>
                 <q-item-section>ไล่ออกจากราชการ</q-item-section>
               </q-item>
               <q-separator />
-              <q-item clickable v-close-popup @click="otherPost">
+              <q-item clickable v-close-popup @click="otherPost" v-if="profileType == 'officer'">
                 <q-item-section style="min-width: 0px" avatar class="q-py-sm">
                 </q-item-section>
                 <q-item-section>อื่นๆ</q-item-section>
@@ -216,15 +165,8 @@
           <!-- <q-tooltip>ส่งรายชื่อ</q-tooltip> -->
         </q-btn>
 
-        <q-btn
-          round
-          flat
-          :color="reasonStatus ? 'primary' : 'pink-5'"
-          @click="clickRetire()"
-          :icon="
-            reasonStatus ? 'mdi-home-import-outline' : 'mdi-home-export-outline'
-          "
-        >
+        <q-btn round flat :color="reasonStatus ? 'primary' : 'pink-5'" @click="clickRetire()" :icon="reasonStatus ? 'mdi-home-import-outline' : 'mdi-home-export-outline'
+          ">
           <q-tooltip>{{
             reasonStatus ? "การกลับเข้ารับราชการ" : "การออกจากราชการ"
           }}</q-tooltip>
@@ -238,9 +180,7 @@
                 <q-item-section class="text-blue">ก.พ.7/ก.ก.1</q-item-section>
               </q-item>
               <q-item clickable v-close-popup @click="clickKp7Short()">
-                <q-item-section class="text-primary"
-                  >ประวัติแบบย่อ</q-item-section
-                >
+                <q-item-section class="text-primary">ประวัติแบบย่อ</q-item-section>
               </q-item>
             </q-list>
           </q-menu>
@@ -252,20 +192,8 @@
     <q-card style="width: 90vw; max-width: 80vw">
       <q-card-section class="row items-center q-pb-xs col-12">
         <q-space />
-        <q-btn
-          @click="downloadKP7()"
-          unelevated
-          class="btn_purple q-mr-sm"
-          label="ดาวน์โหลด ก.พ.7/ก.ก.1"
-        ></q-btn>
-        <q-btn
-          icon="close"
-          unelevated
-          round
-          dense
-          @click="closeKp7"
-          style="color: #ff8080; background-color: #ffdede"
-        />
+        <q-btn @click="downloadKP7()" unelevated class="btn_purple q-mr-sm" label="ดาวน์โหลด ก.พ.7/ก.ก.1"></q-btn>
+        <q-btn icon="close" unelevated round dense @click="closeKp7" style="color: #ff8080; background-color: #ffdede" />
       </q-card-section>
       <q-card-section class="q-p-sm">
         <!-- <viewpdf
@@ -280,20 +208,9 @@
     <q-card style="width: 90vw; max-width: 80vw">
       <q-card-section class="row items-center q-pb-xs col-12">
         <q-space />
-        <q-btn
-          @click="downloadKP7Short()"
-          unelevated
-          class="btn_purple q-mr-sm"
-          label="ดาวน์โหลด ประวัติแบบย่อ"
-        ></q-btn>
-        <q-btn
-          icon="close"
-          unelevated
-          round
-          dense
-          @click="closeKp7Short"
-          style="color: #ff8080; background-color: #ffdede"
-        />
+        <q-btn @click="downloadKP7Short()" unelevated class="btn_purple q-mr-sm" label="ดาวน์โหลด ประวัติแบบย่อ"></q-btn>
+        <q-btn icon="close" unelevated round dense @click="closeKp7Short"
+          style="color: #ff8080; background-color: #ffdede" />
       </q-card-section>
       <q-card-section class="q-p-sm">
         <!-- <viewpdf
@@ -310,50 +227,28 @@
       <q-card-section class="q-py-sm row">
         <div class="text-h6">เลือกรูปภาพ</div>
         <q-space />
-        <q-btn
-          icon="close"
-          unelevated
-          round
-          dense
-          @click="closeImage"
-          style="color: #ff8080; background-color: #ffdede"
-        >
+        <q-btn icon="close" unelevated round dense @click="closeImage" style="color: #ff8080; background-color: #ffdede">
           <q-tooltip>ปิดหน้านี้</q-tooltip>
         </q-btn>
       </q-card-section>
       <q-separator />
       <q-card-section class="col-12 row">
-        <div
-          class="row wrap items-start col-12 q-col-gutter-sm"
-          style="height: 320px; overflow: auto"
-        >
+        <div class="row wrap items-start col-12 q-col-gutter-sm" style="height: 320px; overflow: auto">
           <div class="col-3" @click="addNewImage">
-            <div
-              style="
+            <div style="
                 height: 160px;
                 max-width: 15vw;
                 display: flex !important;
                 justify-content: center;
                 align-items: center;
-              "
-              class="column rounded-borders cursor-pointer bg-active-image text-white"
-            >
+              " class="column rounded-borders cursor-pointer bg-active-image text-white">
               <q-icon name="add" size="60px" color="white" />
               <strong>อัปโหลดรูปภาพ</strong>
             </div>
           </div>
-          <div
-            v-for="n in images"
-            :key="n"
-            class="col-3"
-            @click="imageActive(n)"
-          >
+          <div v-for="n in images" :key="n" class="col-3" @click="imageActive(n)">
             <div :class="getClass(n)">
-              <q-img
-                v-if="n.avatar != null"
-                :src="n.avatar"
-                :class="imageClass(n)"
-              >
+              <q-img v-if="n.avatar != null" :src="n.avatar" :class="imageClass(n)">
                 <!-- <div
                   class="absolute-top bg-transparent cursor-pointer text-right"
                   style="padding: 5px"
@@ -367,21 +262,11 @@
                     style="color: #ff8080"
                   />
                 </div> -->
-                <div
-                  class="absolute-bottom col-12 cursor-pointer flex justify-between items-center"
-                  style="padding: 5px"
-                >
+                <div class="absolute-bottom col-12 cursor-pointer flex justify-between items-center" style="padding: 5px">
                   {{ date2Thai(n.createdDate) }}
 
-                  <q-btn
-                    v-if="!n.isActive"
-                    icon="delete"
-                    unelevated
-                    dense
-                    @click="deletePhoto(n.id)"
-                    class="bg-white"
-                    style="color: #ff8080"
-                  >
+                  <q-btn v-if="!n.isActive" icon="delete" unelevated dense @click="deletePhoto(n.id)" class="bg-white"
+                    style="color: #ff8080">
                     <q-tooltip>ลบรูปภาพ</q-tooltip>
                   </q-btn>
                 </div>
@@ -401,14 +286,7 @@
         >
           <q-tooltip>ลบรูปภาพ</q-tooltip>
         </q-btn> -->
-        <q-btn
-          icon="check"
-          dense
-          flat
-          round
-          @click="selectAvatarHistory"
-          color="positive"
-        >
+        <q-btn icon="check" dense flat round @click="selectAvatarHistory" color="positive">
           <q-tooltip>เลือกรูปภาพ</q-tooltip>
         </q-btn>
       </q-card-actions>
@@ -422,39 +300,18 @@
           <q-card-section class="q-py-sm row">
             <DialogHeader tittle="ถึงแก่กรรม" :close="closePassaway" />
             <div class="col-12 row q-pa-sm q-col-gutter-sm">
-              <q-file
-                class="col-12 col-sm-6 col-md-5"
-                outlined
-                dense
-                v-model="filePassaway"
-                label="แนบใบมรณบัตร"
-                hide-bottom-space
-                lazy-rules
-                accept=".pdf"
-              >
+              <q-file class="col-12 col-sm-6 col-md-5" outlined dense v-model="filePassaway" label="แนบใบมรณบัตร"
+                hide-bottom-space lazy-rules accept=".pdf">
                 <q-separator />
                 <template v-slot:prepend>
                   <q-icon name="attach_file" />
                 </template>
               </q-file>
-              <q-input
-                class="col-12 col-sm-6 col-md-7"
-                dense
-                outlined
-                v-model="deathCertificateNo"
-                label="เลขที่ใบมรณบัตร"
-              />
+              <q-input class="col-12 col-sm-6 col-md-7" dense outlined v-model="deathCertificateNo"
+                label="เลขที่ใบมรณบัตร" />
 
-              <datepicker
-                class="col-12 col-sm-6 col-md-5"
-                menu-class-name="modalfix"
-                v-model="dateDeath"
-                :locale="'th'"
-                autoApply
-                borderless
-                :enableTimePicker="false"
-                week-start="0"
-              >
+              <datepicker class="col-12 col-sm-6 col-md-5" menu-class-name="modalfix" v-model="dateDeath" :locale="'th'"
+                autoApply borderless :enableTimePicker="false" week-start="0">
                 <template #year="{ year }">
                   {{ year + 543 }}
                 </template>
@@ -462,63 +319,32 @@
                   {{ parseInt(value + 543) }}
                 </template>
                 <template #trigger>
-                  <q-input
-                    outlined
-                    dense
-                    class="full-width datepicker"
-                    :model-value="
-                      dateDeath != null ? date2Thai(dateDeath) : null
-                    "
-                    :label="`${'วันที่เสียชีวิต'}`"
-                    :rules="[
-                      (val) => !!val || `${'กรุณาเลือกวันที่เสียชีวิต'}`,
-                    ]"
-                  >
+                  <q-input outlined dense class="full-width datepicker" :model-value="dateDeath != null ? date2Thai(dateDeath) : null
+                    " :label="`${'วันที่เสียชีวิต'}`" :rules="[
+    (val) => !!val || `${'กรุณาเลือกวันที่เสียชีวิต'}`,
+  ]">
                     <template v-slot:prepend>
-                      <q-icon
-                        name="event"
-                        class="cursor-pointer"
-                        style="color: var(--q-primary)"
-                      >
+                      <q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)">
                       </q-icon>
                     </template>
                   </q-input>
                 </template>
               </datepicker>
 
-              <q-input
-                class="col-12 col-sm-6 col-md-7"
-                dense
-                outlined
-                v-model="placeDeathCertificate"
-                label="สถานที่ออกใบมรณบัตร"
-              />
+              <q-input class="col-12 col-sm-6 col-md-7" dense outlined v-model="placeDeathCertificate"
+                label="สถานที่ออกใบมรณบัตร" />
               <q-separator />
-              <q-input
-                class="col-12"
-                dense
-                outlined
-                v-model="reasonDeath"
-                label="เหตุผลการเสียชีวิต"
-                type="textarea"
-              />
+              <q-input class="col-12" dense outlined v-model="reasonDeath" label="เหตุผลการเสียชีวิต" type="textarea" />
             </div>
             <q-space />
           </q-card-section>
           <q-separator />
           <div class="flex justify-end q-pa-sm q-gutter-sm">
-            <q-btn
-              unelevated
-              label="บันทึก"
-              color="public"
-              @click="clickSaveDeceased"
-              :disable="
-                filePassaway === null ||
-                deathCertificateNo === '' ||
-                placeDeathCertificate === '' ||
-                reasonDeath === ''
-              "
-            >
+            <q-btn unelevated label="บันทึก" color="public" @click="clickSaveDeceased" :disable="filePassaway === null ||
+              deathCertificateNo === '' ||
+              placeDeathCertificate === '' ||
+              reasonDeath === ''
+              ">
               <q-tooltip>บันทึก</q-tooltip>
             </q-btn>
           </div>
@@ -536,71 +362,34 @@
   <q-dialog v-model="dialogLeave" persistent>
     <q-card style="width: 600px">
       <q-toolbar>
-        <q-toolbar-title class="text-subtitle2 text-bold"
-          >ประเภทการพ้นราชการ
+        <q-toolbar-title class="text-subtitle2 text-bold">ประเภทการพ้นราชการ
         </q-toolbar-title>
-        <q-btn
-          icon="close"
-          unelevated
-          round
-          dense
-          @click="closeLeave"
-          style="color: #ff8080; background-color: #ffdede"
-        />
+        <q-btn icon="close" unelevated round dense @click="closeLeave"
+          style="color: #ff8080; background-color: #ffdede" />
       </q-toolbar>
 
       <q-separator />
       <q-card-section class="q-p-sm">
-        <div
-          class="row col-12 items-center q-col-gutter-x-xs q-col-gutter-y-xs"
-        >
+        <div class="row col-12 items-center q-col-gutter-x-xs q-col-gutter-y-xs">
           <div class="col-xs-6 col-sm-6 col-md-6">
-            <q-select
-              class="full-width inputgreen cursor-pointer"
-              outlined
-              dense
-              lazy-rules
-              v-model="reason"
-              :rules="[(val) => !!val || `${'กรุณาเลือกประเภทการพ้นราชการ'}`]"
-              hide-bottom-space
-              :label="`${'ประเภทการพ้นราชการ'}`"
-              emit-value
-              map-options
-              option-label="name"
-              :options="reasonOptions"
-              option-value="id"
-            />
+            <q-select class="full-width inputgreen cursor-pointer" outlined dense lazy-rules v-model="reason"
+              :rules="[(val) => !!val || `${'กรุณาเลือกประเภทการพ้นราชการ'}`]" hide-bottom-space
+              :label="`${'ประเภทการพ้นราชการ'}`" emit-value map-options option-label="name" :options="reasonOptions"
+              option-value="id" />
           </div>
           <div class="col-xs-6 col-sm-6 col-md-6">
-            <datepicker
-              menu-class-name="modalfix"
-              v-model="leaveDate"
-              :locale="'th'"
-              autoApply
-              :enableTimePicker="false"
-              week-start="0"
-            >
+            <datepicker menu-class-name="modalfix" v-model="leaveDate" :locale="'th'" autoApply :enableTimePicker="false"
+              week-start="0">
               <template #year="{ year }">{{ year + 543 }}</template>
               <template #year-overlay-value="{ value }">{{
                 parseInt(value + 543)
               }}</template>
               <template #trigger>
-                <q-input
-                  class="full-width inputgreen cursor-pointer"
-                  outlined
-                  dense
-                  lazy-rules
-                  :model-value="date2Thai(leaveDate)"
-                  :rules="[(val) => !!val || `${'กรุณาเลือกวันที่พ้นราชการ'}`]"
-                  hide-bottom-space
-                  :label="`${'วันที่พ้นราชการ'}`"
-                >
+                <q-input class="full-width inputgreen cursor-pointer" outlined dense lazy-rules
+                  :model-value="date2Thai(leaveDate)" :rules="[(val) => !!val || `${'กรุณาเลือกวันที่พ้นราชการ'}`]"
+                  hide-bottom-space :label="`${'วันที่พ้นราชการ'}`">
                   <template v-slot:prepend>
-                    <q-icon
-                      name="event"
-                      class="cursor-pointer"
-                      style="color: var(--q-primary)"
-                    >
+                    <q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)">
                     </q-icon>
                   </template>
                 </q-input>
@@ -608,64 +397,30 @@
             </datepicker>
           </div>
           <div class="col-xs-6 col-sm-6 col-md-6">
-            <q-input
-              class="full-width inputgreen cursor-pointer"
-              outlined
-              dense
-              lazy-rules
-              autogrow
-              v-model="leaveDetail"
+            <q-input class="full-width inputgreen cursor-pointer" outlined dense lazy-rules autogrow v-model="leaveDetail"
               :rules="[
                 (val) =>
                   !!val || `${'กรุณากรอกสาเหตุ/เหตุผลของการพ้นจากราชการ'}`,
-              ]"
-              hide-bottom-space
-              :label="`${'สาเหตุ/เหตุผลของการพ้นจากราชการ'}`"
-            />
+              ]" hide-bottom-space :label="`${'สาเหตุ/เหตุผลของการพ้นจากราชการ'}`" />
           </div>
           <div class="col-xs-6 col-sm-6 col-md-6">
-            <q-input
-              class="full-width inputgreen cursor-pointer"
-              outlined
-              dense
-              lazy-rules
-              autogrow
-              v-model="leaveNumberOrder"
-              :rules="[(val) => !!val || `${'กรุณากรอกคำสั่ง/เอกสารอ้างอิง'}`]"
-              hide-bottom-space
-              :label="`${'คำสั่ง/เอกสารอ้างอิง'}`"
-            />
+            <q-input class="full-width inputgreen cursor-pointer" outlined dense lazy-rules autogrow
+              v-model="leaveNumberOrder" :rules="[(val) => !!val || `${'กรุณากรอกคำสั่ง/เอกสารอ้างอิง'}`]"
+              hide-bottom-space :label="`${'คำสั่ง/เอกสารอ้างอิง'}`" />
           </div>
           <div class="col-xs-6 col-sm-6 col-md-6">
-            <datepicker
-              menu-class-name="modalfix"
-              v-model="leaveDateOrder"
-              :locale="'th'"
-              autoApply
-              :enableTimePicker="false"
-              week-start="0"
-            >
+            <datepicker menu-class-name="modalfix" v-model="leaveDateOrder" :locale="'th'" autoApply
+              :enableTimePicker="false" week-start="0">
               <template #year="{ year }">{{ year + 543 }}</template>
               <template #year-overlay-value="{ value }">{{
                 parseInt(value + 543)
               }}</template>
               <template #trigger>
-                <q-input
-                  class="full-width inputgreen cursor-pointer"
-                  outlined
-                  dense
-                  lazy-rules
-                  :model-value="date2Thai(leaveDateOrder)"
-                  :rules="[(val) => !!val || `${'กรุณาเลือกวันที่ออกคำสั่ง'}`]"
-                  hide-bottom-space
-                  :label="`${'วันที่ออกคำสั่ง'}`"
-                >
+                <q-input class="full-width inputgreen cursor-pointer" outlined dense lazy-rules
+                  :model-value="date2Thai(leaveDateOrder)" :rules="[(val) => !!val || `${'กรุณาเลือกวันที่ออกคำสั่ง'}`]"
+                  hide-bottom-space :label="`${'วันที่ออกคำสั่ง'}`">
                   <template v-slot:prepend>
-                    <q-icon
-                      name="event"
-                      class="cursor-pointer"
-                      style="color: var(--q-primary)"
-                    >
+                    <q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)">
                     </q-icon>
                   </template>
                 </q-input>
@@ -676,13 +431,7 @@
       </q-card-section>
       <q-separator />
       <q-card-actions align="right">
-        <q-btn
-          flat
-          round
-          color="public"
-          @click="Retire"
-          icon="mdi-content-save-outline"
-        >
+        <q-btn flat round color="public" @click="Retire" icon="mdi-content-save-outline">
           <q-tooltip>บันทึก</q-tooltip>
         </q-btn>
       </q-card-actions>
@@ -823,7 +572,6 @@ const fetchData = async () => {
     .get(config.API.profileAvatarId(profileId.value))
     .then((res) => {
       const data = res.data.result;
-
       fullname.value = data.fullname;
       imageUrl.value = data.avatar;
       position.value = data.position;
@@ -897,7 +645,7 @@ const uploadImage = async (e: any) => {
     showLoader();
     await http
       .post(config.API.profileAvatarId(profileId.value), formData)
-      .then((res) => {})
+      .then((res) => { })
       .catch((e) => {
         messageError($q, e);
       })
@@ -1162,9 +910,9 @@ const otherPost = async () => {
   });
 };
 
-const downloadKP7 = () => {};
+const downloadKP7 = () => { };
 
-const downloadKP7Short = () => {};
+const downloadKP7Short = () => { };
 
 const clickKp7 = async () => {
   window.open(config.API.profileReportId(profileId.value));
@@ -1409,8 +1157,8 @@ const clickSaveDeceased = async () => {
           hideLoader();
         });
     })
-    .onCancel(() => {})
-    .onDismiss(() => {});
+    .onCancel(() => { })
+    .onDismiss(() => { });
 };
 </script>
 <style>
diff --git a/src/modules/05_placement/components/AppointEmployee/Detail.vue b/src/modules/05_placement/components/AppointEmployee/Detail.vue
new file mode 100644
index 000000000..b77c766a3
--- /dev/null
+++ b/src/modules/05_placement/components/AppointEmployee/Detail.vue
@@ -0,0 +1,323 @@
+divdivdiv
+<script setup lang="ts">
+import { onMounted, ref } from "vue";
+import { useQuasar } from "quasar";
+import { useRoute, useRouter } from "vue-router";
+import { useCounterMixin } from "@/stores/mixin";
+import CurrencyInput from "@/components/CurruncyInput.vue";
+import type { ResponseTitle } from "@/modules/05_placement/interface/response/Receive";
+import type {
+  appointmentData,
+  ResponseData,
+} from "@/modules/05_placement/interface/response/AppointMent";
+import type { QForm } from "quasar";
+import http from "@/plugins/http";
+import config from "@/app.config";
+
+const $q = useQuasar();
+const route = useRoute();
+const router = useRouter();
+const mixin = useCounterMixin();
+
+const appointment = ref<appointmentData>({
+  citizenId: "",
+  prefixId: "",
+  firstname: "",
+  lastname: "",
+});
+const myForm = ref<QForm | null>(null);
+const edit = ref<boolean>(false);
+const profileId = ref<string>("");
+const organizationPositionOld = ref<string>("");
+const positionTypeOld = ref<string>("");
+const positionLevelOld = ref<string>("");
+const posNo = ref<string>("");
+const salary = ref<number>(0);
+const educationOld = ref<string>("");
+const reason = ref<string>("");
+const date = ref<Date | null>(null);
+const status = ref<string>("");
+const avatar = ref<string>("");
+
+const paramsId = route.params.id;
+const {
+  date2Thai,
+  messageError,
+  showLoader,
+  hideLoader,
+  success,
+  dialogConfirm,
+} = mixin;
+
+const title = ref<ResponseTitle>({
+  fullname: "",
+  organizationPositionOld: "",
+  positionLevelOld: "",
+  positionTypeOld: "",
+});
+
+//เรียกข้อมูลตาม id
+const fecthappointmentByid = async () => {
+  showLoader();
+  await http
+    .get(config.API.appointmentByid(paramsId.toString()))
+    .then((res: ResponseData) => {
+      const data = res.data.result;
+      appointment.value = data;
+      profileId.value = data.profileId;
+      title.value.fullname = `${data.prefix}${data.firstname ?? "-"} ${data.lastname ?? "-"
+        }`;
+      title.value.organizationPositionOld = data.organizationPositionOld ?? "-";
+      title.value.positionLevelOld = data.positionLevelOld ?? "-";
+      title.value.positionTypeOld = data.positionTypeOld ?? "-";
+      (status.value = data.status),
+        (educationOld.value = data.educationOld ?? "-");
+      organizationPositionOld.value = data.organizationPositionOld;
+      positionTypeOld.value = data.positionTypeOld;
+      positionLevelOld.value = data.positionLevelOld;
+      posNo.value = data.positionNumberOld;
+      salary.value = data.salary ?? 0;
+      reason.value = data.reason;
+      date.value = data.positionDate;
+      avatar.value = data.avatar ?? "";
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+};
+
+//ยืนยันการเเก้ไข
+const clickSave = async () => {
+  if (myForm.value !== null) {
+    myForm.value.validate().then((success: any) => {
+      if (success) {
+        dialogConfirm(
+          $q,
+          async () => await putAppointment(),
+          "ต้องการแก้ไขข้อมูลหรือไม่?",
+          "แก้ไขข้อมูลเพื่อลงบัญชีแนบท้าย"
+        );
+      }
+    });
+  }
+};
+// เเก้ไขข้อมูล
+const putAppointment = async () => {
+  let data = {
+    citizenId: appointment.value.citizenId,
+    prefixId: appointment.value.prefixId,
+    firstname: appointment.value.firstname,
+    lastname: appointment.value.lastname,
+    educationOld: educationOld.value,
+    organizationPositionOld: organizationPositionOld.value,
+    positionTypeOld: positionTypeOld.value,
+    positionLevelOld: positionLevelOld.value,
+    positionNumberOld: posNo.value,
+    amountOld: Number(salary.value),
+    reason: reason.value,
+    positionDate: date.value,
+  };
+  // showLoader();
+  // await http
+  //   .put(config.API.appointmentByid(paramsId.toString()), data)
+  //   .then(() => {
+  //     success($q, "บันทึกข้อมูลสำเร็จ");
+  //   })
+  //   .catch((e) => {
+  //     messageError($q, e);
+  //   })
+  //   .finally(() => {
+  //     fecthappointmentByid();
+  //     edit.value = false;
+  //   });
+};
+const cancel = () => {
+  edit.value = false;
+  fecthappointmentByid();
+  myForm.value?.resetValidation();
+};
+const getClass = (val: boolean) => {
+  return {
+    "full-width inputgreen cursor-pointer": val,
+    "full-width cursor-pointer": !val,
+  };
+};
+
+onMounted(async () => {
+  await fecthappointmentByid();
+});
+</script>
+<template>
+  <div class="toptitle text-dark col-12 row items-center">
+    <q-btn icon="mdi-arrow-left" unelevated round dense flat color="primary" class="q-mr-sm"
+      @click="router.push(`/appoint-promote`)" />
+    รายละเอียดการแต่งตั้ง-เลื่อน {{ title.fullname }}
+  </div>
+  <q-card bordered class="row col-12 text-dark">
+    <div class="bg-grey-1 q-pa-sm col-12 row items-center text-primary">
+      <div class="q-pl-sm text-weight-bold text-subtitle2">
+        {{ title.fullname }}
+      </div>
+      <q-space />
+      <q-btn outline color="blue" dense icon-right="mdi-open-in-new" class="q-px-sm" label="ดูข้อมูลทะเบียนประวัติ"
+        @click="router.push(`/registry/${profileId}`)" />
+    </div>
+    <div class="col-12"><q-separator /></div>
+    <div class="row col-12 q-pa-md">
+      <div class="col-12 row bg-white q-col-gutter-md">
+        <div class="col-xs-3 col-sm-2 col-md-1 row">
+          <q-img :src="avatar" v-if="avatar !== ''" />
+          <q-img src="@/assets/avatar_user.jpg" v-else />
+        </div>
+        <div class="col-xs-6 col-sm-3 row items-center">
+          <div class="col-12 q-pl-md">
+            <div class="col-12 text-top">ตำแหน่งในสายงาน</div>
+            <div class="col-12 text-detail">
+              {{ title.positionTypeOld }}
+            </div>
+          </div>
+        </div>
+        <div class="col-xs-6 col-sm-3 row items-center">
+          <div class="col-12">
+            <div class="col-12 text-top">ระดับ</div>
+            <div class="col-12 text-detail">
+              {{ title.positionLevelOld }}
+            </div>
+          </div>
+        </div>
+        <div class="col-xs-6 col-sm-3 row items-center">
+          <div class="col-12">
+            <div class="col-12 text-top">สังกัด</div>
+            <div class="col-12 text-detail">
+              {{ title.organizationPositionOld }}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </q-card>
+
+  <q-card bordered class="row col-12 text-dark q-mt-sm">
+    <div class="bg-grey-1 q-pa-sm col-12 row items-center text-primary">
+      <div class="q-pl-sm text-weight-bold text-dark">
+        แก้ไขข้อมูลเพื่อลงบัญชีแนบท้าย
+      </div>
+      <q-space />
+      <div v-if="status !== 'DONE' && status !== 'REPORT'">
+        <div class="q-gutter-sm" v-if="!edit">
+          <q-btn outline color="primary" dense icon-right="mdi-file-edit-outline" class="q-px-sm" label="แก้ไข"
+            style="width: 80px" @click="edit = !edit" />
+        </div>
+        <div class="q-gutter-sm" v-else>
+          <q-btn outline color="public" dense class="q-px-sm" label="บันทึก" style="width: 80px" @click="clickSave" />
+          <q-btn outline color="red" dense class="q-px-sm" label="ยกเลิก" style="width: 80px" @click="cancel()" />
+        </div>
+      </div>
+    </div>
+    <div class="col-12"><q-separator /></div>
+    <q-form ref="myForm">
+      <div class="row col-12 q-pa-md">
+        <div class="col-12">
+          <div class="text-weight-bold">วุฒิการศึกษา</div>
+        </div>
+        <div class="col-12">
+          <q-input :class="getClass(edit)" :outlined="edit" dense lazy-rules :readonly="!edit" :borderless="!edit"
+            v-model="educationOld" :rules="[(val) => !!val || `${'กรุณากรอกวุฒิการศึกษา'}`]" hide-bottom-space
+            :label="`${'วุฒิการศึกษา'}`" type="text" />
+        </div>
+      </div>
+      <div class="row col-12 q-pa-md">
+        <div class="col-12 row bg-white q-col-gutter-md">
+          <div class="col-xs-12 row q-pa-md items-center">
+            <div class="col-12">
+              <div class="text-weight-bold">ตำแหน่งและหน่วยงานเดิม</div>
+            </div>
+
+            <div class="col-12">
+              <q-input :class="getClass(edit)" :outlined="edit" dense lazy-rules :readonly="!edit" :borderless="!edit"
+                v-model="organizationPositionOld" :rules="[(val) => !!val || `${'กรุณากรอกตำแหน่ง/สังกัด'}`]"
+                hide-bottom-space :label="`${'ตำแหน่ง/สังกัด'}`" type="textarea" />
+            </div>
+          </div>
+
+          <div class="col-xs-6 col-sm-3 row">
+            <div class="col-12">
+              <q-input :class="getClass(edit)" :outlined="edit" dense lazy-rules :readonly="!edit" :borderless="!edit"
+                v-model="positionTypeOld" :rules="[(val) => !!val || `${'กรุณากรอกตำแหน่งประเภท'}`]" hide-bottom-space
+                :label="`${'ตำแหน่งประเภท'}`" />
+            </div>
+          </div>
+          <div class="col-xs-6 col-sm-3 row">
+            <div class="col-12">
+              <q-input :class="getClass(edit)" :outlined="edit" dense lazy-rules :readonly="!edit" :borderless="!edit"
+                v-model="positionLevelOld" :rules="[(val) => !!val || `${'กรุณากรอกระดับ'}`]" hide-bottom-space
+                :label="`${'ระดับ'}`" />
+            </div>
+          </div>
+          <div class="col-xs-6 col-sm-3 row">
+            <div class="col-12">
+              <q-input :class="getClass(edit)" :outlined="edit" dense lazy-rules :readonly="!edit" :borderless="!edit"
+                v-model="posNo" :rules="[(val) => !!val || `${'กรุณากรอกเลขที่'}`]" hide-bottom-space
+                :label="`${'เลขที่'}`" />
+            </div>
+          </div>
+          <div class="col-xs-6 col-sm-3 row">
+            <div class="col-12">
+              <CurrencyInput v-model="salary" label="เงินเดือน" :edit="edit"
+                :rules="[(val: number) => !!val || `${'กรุณากรอกเงินเดือน'}`]" lazy-rules />
+            </div>
+          </div>
+          <div class="col-12"><q-separator /></div>
+          <div class="col-xs-6 col-sm-6 row items-center">
+            <div class="col-12">
+              <datepicker menu-class-name="modalfix" :readonly="!edit" v-model="date" :locale="'th'" autoApply
+                :enableTimePicker="false" 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" :readonly="!edit"
+                    :model-value="date !== null ? date2Thai(date) : null"
+                    :rules="[(val) => !!val || `${'กรุณาเลือกตั้งแต่วัน'}`]" hide-bottom-space
+                    :label="`${'ดำรงตำแหน่งในระดับปัจจุบันเมื่อ'}`">
+                    <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>
+          <div class="col-12">
+            <q-input :class="getClass(edit)" :outlined="edit" dense lazy-rules :readonly="!edit" :borderless="!edit"
+              v-model="reason" hide-bottom-space :label="`${'หมายเหตุ '}`" type="textarea" />
+          </div>
+        </div>
+      </div>
+    </q-form>
+  </q-card>
+</template>
+<style lang="scss" scope>
+.q-img {
+  border-radius: 5px;
+  height: 70px;
+}
+
+.text-top {
+  color: gray;
+  font-weight: 400;
+  padding-bottom: 3px;
+}
+
+.text-detail {
+  font-weight: 500;
+}
+</style>
diff --git a/src/modules/05_placement/components/AppointEmployee/DialogHeader.vue b/src/modules/05_placement/components/AppointEmployee/DialogHeader.vue
new file mode 100644
index 000000000..75cb2f62a
--- /dev/null
+++ b/src/modules/05_placement/components/AppointEmployee/DialogHeader.vue
@@ -0,0 +1,27 @@
+<script setup lang="ts">
+const props = defineProps({
+  title: String,
+  close: {
+    type: Function,
+    default: () => console.log("not function"),
+  },
+});
+const close = async () => {
+  props.close();
+};
+</script>
+<template>
+  <q-toolbar class="q-py-md">
+    <q-toolbar-title class="header-text">{{ title }}</q-toolbar-title>
+    <q-btn icon="close" unelevated round dense @click="close" style="color: #ff8080; background-color: #ffdede" />
+  </q-toolbar>
+</template>
+
+<style scoped lang="scss">
+.header-text {
+  font-size: 18px;
+  font-weight: 600;
+  line-height: 26px;
+  color: #35373C;
+}
+</style>
diff --git a/src/modules/05_placement/components/AppointEmployee/Dialogbody.vue b/src/modules/05_placement/components/AppointEmployee/Dialogbody.vue
new file mode 100644
index 000000000..60a7b735b
--- /dev/null
+++ b/src/modules/05_placement/components/AppointEmployee/Dialogbody.vue
@@ -0,0 +1,231 @@
+<script setup lang="ts">
+import { ref, computed, watchEffect } from "vue";
+import { useQuasar } from "quasar";
+import { useCounterMixin } from "@/stores/mixin";
+import type { QTableProps } from "quasar";
+import type { UserData } from "@/modules/05_placement/interface/response/AppointMent";
+
+import DialogHeader from "@/modules/05_placement/components/AppointMent/DialogHeader.vue";
+
+import http from "@/plugins/http";
+import config from "@/app.config";
+const mixin = useCounterMixin();
+const { showLoader, success, messageError, dialogConfirm, hideLoader } = mixin;
+
+const $q = useQuasar();
+const selected = ref<[]>([]);
+const checkSelected = computed(() => {
+  if (selected.value.length === 0 || props.type === "") {
+    return true;
+  }
+});
+
+const props = defineProps({
+  Modal: Boolean,
+  clickClose: Function,
+  fecthlistappointment: Function,
+  nextPage: Function,
+  optionsType: Array,
+  rows2: Array,
+  filterKeyword2: String,
+  type: String,
+});
+const visibleColumns2 = ref<string[]>([
+  "no",
+  "citizenId",
+  "fullname",
+  "organizationName",
+  "birthday",
+]);
+const columns2 = ref<QTableProps["columns"]>([
+  {
+    name: "no",
+    align: "left",
+    label: "ลำดับ",
+    sortable: false,
+    field: "no",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "citizenId",
+    align: "left",
+    label: "เลขประจำตัวประชาชน",
+    sortable: true,
+    field: "citizenId",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "fullname",
+    align: "left",
+    label: "ชื่อ-นามสกุล",
+    sortable: true,
+    field: "fullname",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "organizationName",
+    align: "left",
+    label: "หน่วยงานที่รับการแต่งตั้ง-เลื่อน",
+    sortable: true,
+    field: "organizationName",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "birthday",
+    align: "left",
+    label: "วัน/เดือน/ปี เกิด",
+    sortable: true,
+    field: "birthday",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+]);
+const pageNext = (item: object) => {
+  props.nextPage?.(item)
+}
+const emit = defineEmits([
+  "update:filterKeyword2",
+  "update:type",
+  "update:selected",
+
+]);
+const updateInput = (value: any) => {
+  emit("update:filterKeyword2", value);
+};
+
+const updateInputType = (value: string) => {
+  emit("update:type", value);
+};
+//รีเซ็ตค่าในช่องค้นหา
+const Reset = () => {
+  emit("update:filterKeyword2", "");
+};
+//เปิด modal ยืนยัน
+const clickAddlist = () => {
+  dialogConfirm($q, () => createdAppoint());
+};
+
+
+//อัพเดต ส่งไปออกคำสั่ง
+const createdAppoint = async () => {
+  let pId: string[] = [];
+  let Type = props.type as string
+  selected.value.forEach((e: UserData) => {
+    pId.push(e.personalId);
+  });
+  let data = {
+    id: pId,
+  };
+  showLoader();
+  await http
+    .put(config.API.apppointmentReport(Type), data)
+    .then((res) => {
+      success($q, "บันทึกสำเร็จ");
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+      props.fecthlistappointment?.();
+      selected.value = [];
+      props.clickClose?.()
+    });
+};
+
+watchEffect(() => {
+  if (props.Modal === true) {
+    selected.value = [];
+  }
+});
+</script>
+<template>
+  <q-dialog v-model="props.Modal">
+    <q-card style="width: 1200px; max-width: 80vw">
+      <DialogHeader title="ส่งไปออกคำสั่ง" :close="clickClose" />
+      <q-separator />
+      <q-card-section class="q-pt-none">
+        <div class="row justify-between">
+          <div class="col-5">
+            <q-toolbar style="padding: 0">
+              <q-select outlined dense :model-value="type" @update:model-value="updateInputType" :options="optionsType"
+                label="คำสั่งแต่งตั่ง-เลื่อน-ย้าย" style="width: 400px; max-width: auto" emit-value map-options
+                option-label="name" option-value="id" />
+            </q-toolbar>
+          </div>
+          <div class="col-5">
+            <q-toolbar style="padding: 0">
+              <q-input borderless outlined dense debounce="300" :model-value="filterKeyword2"
+                @update:model-value="updateInput" placeholder="ค้นหา" style="width: 850px; max-width: auto">
+                <template v-slot:append>
+                  <q-icon v-if="filterKeyword2 == ''" name="search" />
+                  <q-icon v-if="filterKeyword2 !== ''" name="clear" class="cursor-pointer" @click="Reset" />
+                </template>
+              </q-input>
+              <q-select v-model="visibleColumns2" multiple outlined dense options-dense
+                :display-value="$q.lang.table.columns" emit-value map-options :options="columns2" option-value="name"
+                options-cover style="min-width: 150px" class="gt-xs q-ml-sm" />
+            </q-toolbar>
+          </div>
+        </div>
+
+        <d-table :columns="columns2" :rows="rows2" :filter="filterKeyword2" row-key="personalId" flat
+          :visible-columns="visibleColumns2" selection="multiple" v-model:selected="selected">
+          <template v-slot:header-selection="scope">
+            <q-checkbox keep-color color="primary" dense v-model="scope.selected" />
+          </template>
+          <template v-slot:body="props">
+            <q-tr :props="props" class="cursor-pointer">
+              <q-td>
+                <q-checkbox keep-color color="primary" dense v-model="props.selected" />
+              </q-td>
+              <q-td key="no" :props="props">
+                {{ props.rowIndex + 1 }}
+              </q-td>
+              <q-td key="citizenId" :props="props" @click="pageNext(props.row)">
+                {{ props.row.citizenId }}
+              </q-td>
+              <q-td key="fullname" :props="props" @click="pageNext(props.row)">
+                {{ props.row.fullname }}
+              </q-td>
+              <q-td key="organizationName" :props="props" @click="pageNext(props.row)">
+                <div v-if="props.row.orgName !== null ||
+                  props.row.positionPath !== null
+                  ">
+                  <div class="col-4">
+                    <div class="text-weight-medium">
+                      {{ props.row.orgName !== null ? props.row.orgName : "-" }}
+                      {{ props.row.organizationShortName !== null ? `(${props.row.organizationShortName})` : "" }}
+                    </div>
+                    <div class="text-weight-light">
+                      {{ props.row.positionPath !== null ? props.row.positionPath : "-" }}
+                      {{ props.row.positionNumber !== null ? `(${props.row.positionNumber})` : "" }}
+                    </div>
+                  </div>
+                </div>
+                <div v-else>
+                  <div class="col-4">
+                    <div class="text-weight-medium">-</div>
+                  </div>
+                </div>
+              </q-td>
+              <q-td key="birthday" :props="props" @click="pageNext(props.row)">
+                {{ props.row.birthday }}
+              </q-td>
+            </q-tr>
+          </template>
+        </d-table>
+      </q-card-section>
+
+      <q-card-actions align="right" class="bg-white text-teal">
+        <q-btn label="ส่งไปออกคำสั่ง" @click="clickAddlist" color="public" :disable="checkSelected" />
+      </q-card-actions>
+    </q-card>
+  </q-dialog>
+</template>
\ No newline at end of file
diff --git a/src/modules/05_placement/components/AppointEmployee/Main.vue b/src/modules/05_placement/components/AppointEmployee/Main.vue
new file mode 100644
index 000000000..f6050418a
--- /dev/null
+++ b/src/modules/05_placement/components/AppointEmployee/Main.vue
@@ -0,0 +1,394 @@
+<script setup lang="ts">
+import { ref, onMounted } from "vue";
+import type { QTableProps } from "quasar";
+import { useQuasar } from "quasar";
+import { useRouter } from "vue-router";
+import { useCounterMixin } from "@/stores/mixin";
+import { useTransferDataStore } from "@/modules/05_placement/store";
+import Dialogbody from "@/modules/05_placement/components/AppointEmployee/Dialogbody.vue";
+import DialogOrgTree from "@/modules/05_placement/components/AppointEmployee/Modal.vue";
+import type {
+  listAppointType,
+  resData,
+  orgFilter,
+} from "@/modules/05_placement/interface/response/AppointMent";
+import type { OpType } from "@/modules/05_placement/interface/response/Main";
+import http from "@/plugins/http";
+import config from "@/app.config";
+
+const $q = useQuasar();
+const modal = ref<boolean>(false);
+const storeFn = useTransferDataStore();
+const { statusText } = storeFn;
+const mixin = useCounterMixin(); //เรียกฟังก์ชันกลาง
+const {
+  showLoader,
+  hideLoader,
+  success,
+  messageError,
+  date2Thai,
+  dialogRemove,
+} = mixin;
+
+const router = useRouter();
+const rows = ref<listAppointType[]>([]);
+const rows2 = ref<listAppointType[]>([]);
+const modalTree = ref<boolean>(false);
+const personal = ref<resData[]>([]);
+const personalId = ref<string>("");
+const filterKeyword = ref<string>("");
+const filterKeyword2 = ref<string>("");
+const filterRef = ref<any>(null);
+const listRecevice = ref<resData[]>([]);
+const optionsType = ref<OpType[]>([]);
+const type = ref<string>("");
+
+const visibleColumns = ref<string[]>([
+  "no",
+  "citizenId",
+  "fullname",
+  "organizationName",
+  "birthday",
+  "createdAt",
+  "status",
+]);
+const pagination = ref({
+  sortBy: "createdAt",
+  descending: true,
+  page: 1,
+  rowsPerPage: 10,
+});
+const columns = ref<QTableProps["columns"]>([
+  {
+    name: "no",
+    align: "left",
+    label: "ลำดับ",
+    sortable: false,
+    field: "no",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "citizenId",
+    align: "left",
+    label: "เลขประจำตัวประชาชน",
+    sortable: true,
+    field: "citizenId",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "fullname",
+    align: "left",
+    label: "ชื่อ-นามสกุล",
+    sortable: true,
+    field: "fullname",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "organizationName",
+    align: "left",
+    label: "หน่วยงานที่รับการแต่งตั้ง",
+    sortable: true,
+    field: "organizationName",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "birthday",
+    align: "left",
+    label: "วัน/เดือน/ปี เกิด",
+    sortable: true,
+    field: "birthday",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "createdAt",
+    align: "left",
+    label: "วันที่ดำเนินการ",
+    sortable: true,
+    field: "createdAt",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "status",
+    align: "left",
+    label: "สถานะ",
+    sortable: true,
+    field: "status",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+]);
+
+//รีเซ็ต input
+const resetFilter = () => {
+  filterKeyword.value = "";
+  filterKeyword2.value = "";
+  filterRef.value.focus();
+};
+
+//ปิด modal
+const clickClose = () => {
+  modal.value = false;
+};
+
+//เปิด modal
+const popup = () => {
+  modal.value = true;
+  filterKeyword2.value = "";
+  fecthTypeOption();
+};
+
+//ดึงข้อมูล API
+const fecthlistappointment = async () => {
+  // showLoader();
+  // rows.value = [];
+  // await http
+  //   .get(config.API.appointmentMain())
+  //   .then((res) => {
+  //     let response = res.data.result;
+  //     listRecevice.value = response;
+  //     rows.value = response.map((e: resData) => ({
+  //       personalId: e.id,
+  //       citizenId: e.citizenId,
+  //       fullname: e.prefix + e.firstname + "  " + e.lastname,
+  //       organizationName:
+  //         e.organizationName +
+  //         " " +
+  //         e.organizationShortName +
+  //         " " +
+  //         e.positionNumber +
+  //         " " +
+  //         e.positionPath,
+  //       orgName: e.organizationName,
+  //       organizationShortName: e.organizationShortName,
+  //       positionNumber: e.positionNumber,
+  //       positionPath: e.positionPath,
+  //       status: statusText(e.status),
+  //       createdAt: date2Thai(e.createdAt),
+  //       birthday: e.dateOfBirth == null ? "-" : date2Thai(e.dateOfBirth),
+  //       educationOld: e.educationOld,
+  //       organizationPositionOld: e.organizationPositionOld,
+  //       positionTypeOld: e.positionTypeOld,
+  //       positionLevelOld: e.positionLevelOld,
+  //       positionNumberOld: e.positionNumberOld,
+  //       salary: e.salary,
+  //       positionDate: e.positionDate,
+  //     }));
+  //     rows2.value = rows.value.filter(
+  //       (e: orgFilter) =>
+  //         e.orgName !== null &&
+  //         e.status !== "ส่งรายชื่อไปออกคำสั่ง" &&
+  //         e.status !== "ออกคำสั่งเสร็จแล้ว" &&
+  //         e.educationOld &&
+  //         e.organizationPositionOld &&
+  //         e.positionTypeOld &&
+  //         e.positionLevelOld &&
+  //         e.positionNumberOld &&
+  //         e.salary !== null &&
+  //         e.positionDate
+  //     );
+  //   })
+  //   .catch((e) => {
+  //     messageError($q, e);
+  //   })
+  //   .finally(() => {
+  //     hideLoader();
+  //   });
+};
+
+//ดึงข้อมูลประเภทคำสั่งเเต่งตั้ง
+const fecthTypeOption = async () => {
+  type.value = "";
+  await http
+    .get(config.API.typeOrder())
+    .then((res) => {
+      optionsType.value = res.data.result.filter(
+        (e: OpType) =>
+          e.commandCode === "C-PM-05"
+      );
+    })
+    .catch((e) => {
+      messageError($q, e);
+    });
+};
+
+// เปิดโครงสร้าง
+const openModalTree = (id: string) => {
+  personalId.value = id;
+  personal.value = listRecevice.value.filter((e) => e.id === id);
+  modalTree.value = true;
+};
+//เเจ้งเตือนลบข้อมูล
+const clickDelete = (id: string) => {
+  dialogRemove($q, () => deleteAppoint(id));
+};
+
+// ลบข้อมูล
+const deleteAppoint = async (id: string) => {
+  showLoader();
+  await http
+    .delete(config.API.appointmentDelete(id))
+    .then(() => {
+      success($q, "ลบข้อมูลสำเร็จ");
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      fecthlistappointment();
+      hideLoader();
+    });
+};
+
+// ปิด modal โครงส้ราง
+const closeModalTree = async () => {
+  await fecthlistappointment();
+  modalTree.value = false;
+};
+
+// ไปหน้ารายละเอียด
+const nextPage = (id: string) => {
+  router.push({
+    path: `appoint-promote/detail/${id}`,
+  });
+};
+
+onMounted(() => {
+  fecthlistappointment();
+});
+</script>
+<template>
+  <div class="toptitle text-dark col-12 row items-center">
+    รายการแต่งตั้งลูกจ้างประจำ
+  </div>
+  <q-card flat bordered class="col-12 q-mt-sm">
+    <q-separator />
+    <div class="row q-pa-md">
+      <div class="col-12">
+        <div class="row col-12">
+          <q-btn @click="popup()" size="14px" flat round color="add" icon="mdi-account-arrow-right">
+            <q-tooltip>ส่งไปออกคำสั่ง</q-tooltip>
+          </q-btn>
+
+          <q-space />
+          <q-input class="col-xs-12 col-sm-3 col-md-2" standout dense v-model="filterKeyword" ref="filterRef" outlined
+            debounce="300" placeholder="ค้นหา">
+            <template v-slot:append>
+              <q-icon v-if="filterKeyword == ''" name="search" />
+              <q-icon v-if="filterKeyword !== ''" name="clear" class="cursor-pointer" @click="resetFilter" />
+            </template>
+          </q-input>
+
+          <q-select v-model="visibleColumns" multiple outlined dense options-dense :display-value="$q.lang.table.columns"
+            emit-value map-options :options="columns" option-value="name" options-cover style="min-width: 150px"
+            class="col-xs-12 col-sm-3 col-md-2 q-ml-sm" />
+        </div>
+
+        <div class="col-12 q-pt-sm">
+          <d-table :columns="columns" :rows="rows" :filter="filterKeyword" row-key="citizenId"
+            :visible-columns="visibleColumns" 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" @click="nextPage(props.row.personalId)">
+                  {{ props.rowIndex + 1 }}
+                </q-td>
+                <q-td key="citizenId" :props="props" @click="nextPage(props.row.personalId)">
+                  {{ props.row.citizenId }}
+                </q-td>
+                <q-td key="fullname" :props="props" @click="nextPage(props.row.personalId)">
+                  {{ props.row.fullname }}
+                </q-td>
+                <q-td key="organizationName" :props="props" @click="nextPage(props.row.personalId)">
+                  <div v-if="props.row.orgName !== null ||
+                    props.row.positionPath !== null
+                    ">
+                    <div class="col-4">
+                      <div class="text-weight-medium">
+                        {{
+                          props.row.orgName !== null ? props.row.orgName : "-"
+                        }}
+                        {{
+                          props.row.organizationShortName !== null
+                          ? `(${props.row.organizationShortName})`
+                          : ""
+                        }}
+                      </div>
+                      <div class="text-weight-light">
+                        {{
+                          props.row.positionPath !== null
+                          ? props.row.positionPath
+                          : "-"
+                        }}
+                        {{
+                          props.row.positionNumber !== null
+                          ? `(${props.row.positionNumber})`
+                          : ""
+                        }}
+                      </div>
+                    </div>
+                  </div>
+                  <div v-else>
+                    <div class="col-4">
+                      <div class="text-weight-medium">-</div>
+                    </div>
+                  </div>
+                </q-td>
+                <q-td key="birthday" :props="props" @click="nextPage(props.row.personalId)">
+                  {{ props.row.birthday }}
+                </q-td>
+                <q-td key="createdAt" :props="props" @click="nextPage(props.row.personalId)">
+                  {{ props.row.createdAt }}
+                </q-td>
+                <q-td key="status" :props="props" @click="nextPage(props.row.personalId)">
+                  {{ props.row.status }}
+                </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 clickable v-close-popup @click="openModalTree(props.row.personalId)">
+                          <q-item-section style="min-width: 0px" avatar class="q-py-sm">
+                            <q-icon color="primary" size="xs" name="mdi-bookmark-outline" />
+                          </q-item-section>
+                          <q-item-section>เลือกหน่วยงาน/ตำแหน่ง</q-item-section>
+                        </q-item>
+                        <q-item clickable v-close-popup @click="clickDelete(props.row.personalId)">
+                          <q-item-section style="min-width: 0px" avatar class="q-py-sm">
+                            <q-tooltip>ลบข้อมูล</q-tooltip>
+                            <q-icon color="red" size="xs" name="mdi-delete" />
+                          </q-item-section>
+                          <q-item-section>ลบ</q-item-section>
+                        </q-item>
+                      </q-list>
+                    </q-menu>
+                  </q-btn>
+                </q-td>
+              </q-tr>
+            </template>
+          </d-table>
+        </div>
+      </div>
+    </div>
+  </q-card>
+
+  <Dialogbody v-model:Modal="modal" :clickClose="clickClose" :optionsType="optionsType" :rows2="rows2"
+    v-model:filterKeyword2="filterKeyword2" v-model:type="type" :nextPage="nextPage"
+    :fecthlistappointment="fecthlistappointment" />
+  <DialogOrgTree v-model:modal="modalTree" :close="closeModalTree" :personal="personal" :personalId="personalId" />
+</template>
+<style scoped lang="scss"></style>
diff --git a/src/modules/05_placement/components/AppointEmployee/Modal.vue b/src/modules/05_placement/components/AppointEmployee/Modal.vue
new file mode 100644
index 000000000..1e8d43fc6
--- /dev/null
+++ b/src/modules/05_placement/components/AppointEmployee/Modal.vue
@@ -0,0 +1,581 @@
+<script setup lang="ts">
+import { useQuasar, QForm } from "quasar";
+import { onMounted, reactive, ref, watch } from "vue";
+import DialogHeader from "@/modules/05_placement/components/PersonalList/DialogHeader.vue";
+import DialogFooter from "@/modules/05_placement/components/PersonalList/DialogFooter.vue";
+import { useCounterMixin } from "@/stores/mixin";
+import http from "@/plugins/http";
+import config from "@/app.config";
+
+const $q = useQuasar();
+const mixin = useCounterMixin(); //เรียกฟังก์ชันกลาง
+const { date2Thai, hideLoader, messageError, showLoader, success, dialogConfirm } = mixin; //ฟังก์ชันกลางที่เรียกใช้
+
+const notFound = ref<string>("ไม่พบข้อมูลที่ค้นหา");
+const noData = ref<string>("ไม่พบข้อมูลผังโครงสร้าง");
+
+const checkValidate = ref<boolean>(false);
+const myFormPosition = ref<any>();
+const selected = ref<string>("");
+const selectedFile = ref<string>("");
+const dataRespone = ref<any>();
+const personal = ref<any>();
+const expanded = ref<string[]>([]);
+const treeData = ref<Array<any>>([]);
+const placementPosition = ref<any>([]);
+const search = ref<string>("");
+const filterRef = ref<any>(null);
+const id = ref<string>("");
+
+const editDataStatus = ref<boolean>(false);
+// Set form field
+let dataForm = reactive({
+  personalId: "",
+  containDate: new Date(),
+  posNoId: "",
+  positionId: "",
+  positionLevelId: "",
+  positionLineId: "",
+  positionPathSideId: "",
+  positionTypeId: "",
+});
+
+onMounted(async () => {
+  await fetchPublishFile();
+  await loadTreeData();
+  await fetchplacementPosition();
+});
+const fetchPublishFile = async () => {
+  await http
+    .get(config.API.getPublishFileHistory)
+    .then((res) => {
+      let data = res.data.result;
+      selectedFile.value = data[0].fileName;
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(async () => {
+      hideLoader();
+    });
+};
+
+// โหลดข้อมูลโครงสร้างจาก json
+
+const loadTreeData = async () => {
+  expanded.value = [];
+  await http
+    .get(`${config.s3ClusterUrl}${selectedFile.value}`)
+    .then((res: any) => {
+      treeData.value = res.data;
+      dataRespone.value = res.data;
+
+      // Filter objects with "name" null
+      const filteredData = res.data.filter(filterByPersonIdNull);
+      treeData.value = filteredData;
+    })
+    .catch((e: any) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+};
+
+function filterByPersonIdNull(obj: any) {
+  if (obj.name === null && obj.isCondition != true) {
+    return true;
+  }
+  if (obj.children && obj.children.length > 0) {
+    obj.children = obj.children.filter(filterByPersonIdNull);
+    return obj.children.length > 0;
+  }
+  return false;
+}
+
+// โหลด position
+
+const fetchplacementPosition = async () => {
+  await http
+    .get(config.API.apppointmentPosition())
+    .then((res: any) => {
+      placementPosition.value = res.data.result;
+    })
+    .catch((e: any) => {
+      messageError($q, e);
+    });
+};
+
+
+
+const props = defineProps({
+  personalId: String,
+  modal: Boolean,
+  close: {
+    type: Function,
+    default: () => console.log("close modal"),
+  },
+  personal: Object,
+});
+
+const myFilterMethod = (node: any, filter: string) => {
+  const filt = filter;
+
+  return (
+    (node.name && node.name.indexOf(filt) > -1) ||
+    (node.organizationName && node.organizationName.indexOf(filt) > -1) ||
+    (node.positionNum && node.positionNum.indexOf(filt) > -1) ||
+    (node.positionName && node.positionName.indexOf(filt) > -1) ||
+    (node.governmentCode && node.governmentCode.toString().indexOf(filt) > -1) ||
+    (node.agency && node.agency.indexOf(filt) > -1) ||
+    (node.government && node.government.indexOf(filt) > -1) ||
+    (node.department && node.department.indexOf(filt) > -1) ||
+    (node.pile && node.pile.indexOf(filt) > -1) ||
+    (node.organizationShortName && node.organizationShortName.indexOf(filt) > -1) ||
+    (node.positionSideName && node.positionSideName.indexOf(filt) > -1) ||
+    (node.executivePosition && node.executivePosition.indexOf(filt) > -1) ||
+    (node.executivePositionSide && node.executivePositionSide.indexOf(filt) > -1) ||
+    (node.positionLevel && node.positionLevel.indexOf(filt) > -1)
+  );
+};
+
+const validateData = async () => {
+  checkValidate.value = true;
+  await myFormPosition.value.validate().then((result: boolean) => {
+    if (result == false) {
+      checkValidate.value = false;
+    }
+  });
+};
+
+const saveAppoint = async () => {
+  myFormPosition.value.validate().then(async (result: boolean) => {
+    if (props.personalId !== undefined) {
+      id.value = props.personalId.toString();
+    }
+    if (result) {
+      const dataAppoint = await {
+        recruitDate: dataForm.containDate,
+        posNoId: dataForm.posNoId,
+        positionId: dataForm.positionId,
+        positionLevelId: dataForm.positionLevelId,
+        positionLineId: dataForm.positionLineId,
+        positionPathSideId: dataForm.positionPathSideId,
+        positionTypeId: dataForm.positionTypeId,
+      };
+      showLoader();
+      await http
+        .put(config.API.appointmentPosition(id.value), dataAppoint)
+        .then((res) => {
+          success($q, "บันทึกสำเร็จ");
+        })
+        .catch((e) => {
+          messageError($q, e);
+        })
+        .finally(async () => {
+          await closeAndClear();
+          await fetchPublishFile();
+          await loadTreeData();
+          await fetchplacementPosition();
+          hideLoader();
+        });
+    }
+  });
+};
+
+
+const closeModal = () => {
+  if (editDataStatus.value == true) {
+    dialogConfirm(
+      $q,
+      async () => {
+        editDataStatus.value = false;
+        await closeAndClear();
+      },
+      `ข้อมูลมีการแก้ไข`,
+      `ยืนยันที่จะปิดโดยไม่บันทึกใช่หรือไม่?`
+    );
+  } else {
+    closeAndClear();
+  }
+};
+
+const closeAndClear = async () => {
+  await props.close();
+  editDataStatus.value = false;
+  selected.value = "";
+  dataForm.personalId = "";
+  dataForm.containDate = new Date();
+  dataForm.posNoId = "";
+  dataForm.positionId = "";
+  dataForm.positionLevelId = "";
+  dataForm.positionLineId = "";
+  dataForm.positionPathSideId = "";
+  dataForm.positionTypeId = "";
+};
+// ตำแหน่งเลขที่
+const posNoOptions = ref<Object[]>([
+  {
+    label: "",
+    value: "",
+  },
+]);
+// ตำแหน่ง
+const positionOptions = ref<Object[]>([
+  {
+    label: "",
+    value: "",
+  },
+]);
+// ด้าน/สาขา
+const positionPathSideOptions = ref<Object[]>([
+  {
+    label: "",
+    value: "",
+  },
+]);
+// ตำแหน่งประเภท
+const positionTypeOptions = ref<Object[]>([
+  {
+    label: "",
+    value: "",
+  },
+]);
+// สายงาน
+const positionLineOptions = ref<Object[]>([
+  {
+    label: "",
+    value: "",
+  },
+]);
+// ระดับ
+const positionLevelOptions = ref<Object[]>([
+  {
+    label: "",
+    value: "",
+  },
+]);
+
+const selectedPosition = async (data: any) => {
+  if (data.name == null && selected.value != data.keyId) {
+
+    editDataStatus.value = true;
+    selected.value = data.keyId;
+
+    // posNo Options
+    posNoOptions.value = [
+      {
+        label: data.positionNum,
+        value: data.positionNumId,
+      },
+    ];
+    dataForm.posNoId = data.positionNumId;
+
+    // position Options
+    positionOptions.value = [
+      {
+        label: data.positionName,
+        value: data.positionNameId,
+      },
+    ];
+    dataForm.positionId = data.positionNameId;
+
+    // positionPathSide Options
+    let positionPathSideArr: any = [];
+    if (data.positionSideNameObj && data.positionSideNameObj != null) {
+      data.positionSideNameObj.map((x: any) => {
+        positionPathSideArr.push({
+          label: x.Name,
+          value: x.Id,
+        });
+      });
+      positionPathSideOptions.value = positionPathSideArr;
+      dataForm.positionPathSideId =
+        positionPathSideArr.length > 1 || positionPathSideArr.length == 0
+          ? ""
+          : positionPathSideArr[0].value;
+    }
+
+    // positionType Options
+    positionTypeOptions.value = [
+      {
+        label: data.positionType,
+        value: data.positionTypeId,
+      },
+    ];
+    dataForm.positionTypeId = data.positionTypeId;
+
+    // positionLine Options
+    positionLineOptions.value = [
+      {
+        label: data.positionLine,
+        value: data.positionLineId,
+      },
+    ];
+    dataForm.positionLineId = data.positionLineId;
+
+    // positionLevel Options
+    let positionLevelsArr: any = [];
+    if (data.positionLevelObj != null) {
+      data.positionLevelObj.map((x: any) => {
+        positionLevelsArr.push({
+          label: x.Name,
+          value: x.Id,
+        });
+      });
+      positionLevelOptions.value = positionLevelsArr;
+      dataForm.positionLevelId =
+        positionLevelsArr.length > 1 || positionLevelsArr.length == 0
+          ? ""
+          : positionLevelsArr[0].value;
+      dataForm.positionLevelId = data.positionLevelObj[0].Id;
+    }
+  } else if (selected.value == data.keyId) {
+    selected.value = "";
+    dataForm.posNoId = "";
+    dataForm.positionId = "";
+    dataForm.positionLevelId = "";
+    dataForm.positionLineId = "";
+    dataForm.positionPathSideId = "";
+    dataForm.positionTypeId = "";
+  }
+};
+
+const checkPosition = (val: string) => {
+  const num = placementPosition.value.findIndex((e: string) => e === val);
+  return num;
+};
+
+
+watch(props, () => {
+  expanded.value = [];
+  const dataPersonal = props.personal;
+
+  if (dataPersonal) {
+    dataPersonal.map((data: any) => {
+      personal.value = data;
+    });
+  }
+
+  if (personal.value) {
+    let findData: any = null;
+    dataRespone.value.map((x: any) => {
+      findData = findByPerson(x);
+      if (findData != null) {
+        selectedPosition(findData);
+        for (let i = 3; i <= findData.keyId.length; i += 2) {
+          expanded.value.push(findData.keyId.slice(0, i));
+        }
+      }
+    });
+
+  }
+});
+
+function findByPerson(element: any): any {
+  if (
+    element.positionNumId &&
+    element.positionLineId === personal.value.positionLineId &&
+    element.positionTypeId === personal.value.positionTypeId &&
+    element.positionNumId === personal.value.posNoId &&
+    (element.positionLevelObj === null ||
+      element.positionLevelObj[0].Id === personal.value.positionLevelId)
+  ) {
+    return element;
+  } else if (element.children) {
+    var i;
+    var result = null;
+    for (i = 0; result == null && i < element.children.length; i++) {
+      result = findByPerson(element.children[i]);
+    }
+    return result;
+  }
+  return null;
+}
+</script>
+
+<template>
+  <q-dialog v-model="props.modal" persistent>
+    <q-card style="width: 900px; max-width: 80vw">
+      <q-form ref="myFormPosition">
+        <DialogHeader title="เลือกหน่วยงานที่แต่งตั้ง - เลื่อน" :close="closeModal" />
+        <q-separator />
+        <q-card-section class="q-pa-sm bg-grey-1">
+          <div class="row col-12 q-col-gutter-sm">
+            <div class="col-xs-12 col-sm-7 row">
+              <q-card flat bordered class="fit q-pa-sm">
+                <q-scroll-area visible style="height: 70vh">
+                  <q-input outlined dense ref="filterRef" v-model="search" placeholder="ค้นหา" class="q-mb-sm">
+                    <template v-slot:append>
+                      <q-icon name="mdi-magnify" />
+                    </template>
+                  </q-input>
+                  <div class="q-pa-sm q-gutter-sm">
+                    <q-tree no-transition dense :nodes="treeData" node-key="keyId" :filter="search"
+                      :no-results-label="notFound" :no-nodes-label="noData" :filter-method="myFilterMethod"
+                      v-model:expanded="expanded">
+                      <template v-slot:header-organization="prop">
+                        <div class="col">
+                          <div class="row items-center q-px-xs q-pt-xs q-gutter-sm">
+                            <!--แสดงชื่อแผนก พิมพ์ตัวหนา คลิกแล้วกาง/หุบ Tree-->
+                            <div class="text-weight-medium">
+                              {{ prop.node.organizationName }}
+                            </div>
+                            <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="selected == prop.node.keyId" @click="selectedPosition(prop.node)"
+                          :disable="prop.node.name != null ||
+                            checkPosition(prop.node.positionNumId) != -1
+                            " active-class="my-list-link text-primary text-weight-medium"
+                          class="row items-center text-dark q-py-xs q-pl-sm rounded-borders my-list">
+                          <img v-if="prop.node.avatar == '' ||
+                            prop.node.avatar ==
+                            'https://cdn.quasar.dev/img/boy-avatar.png'
+                            " src="@/assets/avatar_user.jpg" class="col-xs-1 col-sm-2" style="
+                              width: 28px;
+                              height: 28px;
+                              border-radius: 50%;
+                            " />
+                          <img v-else :src="prop.node.avatar" class="col-xs-1 col-sm-2" style="
+                              width: 28px;
+                              height: 28px;
+                              border-radius: 50%;
+                            " />
+                          <!--=====ตำแหน่งว่าง สีแดง=====-->
+                          <div v-if="prop.node.name == null" class="q-px-sm text-weight-medium text-red">
+                            ว่าง
+                          </div>
+                          <!--=====หัวหน้า สีเขียว=====-->
+                          <div v-else-if="prop.node.positionLeaderFlag">
+                            <div class="q-px-sm text-weight-medium text-primary">
+                              {{ prop.node.name }}
+                            </div>
+                          </div>
+                          <!--=====ลูกน้อง สีปกติ=====-->
+                          <div v-else>
+                            <div class="q-px-sm text-weight-medium">
+                              {{ prop.node.name }}
+                            </div>
+                          </div>
+                          <!--ต่อท้ายชื่อคน แสดงสีปกติ-->
+                          <div class="q-pr-sm">
+                            {{ prop.node.positionName }}
+                          </div>
+                          <div class="q-pr-sm">
+                            {{ prop.node.positionNum }}
+                          </div>
+                          <div class="q-pr-sm">
+                            {{ prop.node.positionLevel }}
+                          </div>
+                          <q-icon v-if="prop.node.positionLeaderFlag" class="q-mr-sm" size="15px" color="primary"
+                            name="mdi-bookmark"></q-icon>
+
+                          <q-space />
+                        </q-item>
+                      </template>
+                    </q-tree>
+                  </div>
+                </q-scroll-area>
+              </q-card>
+            </div>
+            <div class="col-xs-12 col-sm-5">
+              <q-card flat bordered class="fit q-pa-sm">
+                <q-scroll-area visible style="height: 70vh">
+                  <div class="row col-12 q-col-gutter-xs">
+                    <div class="col-xs-12 col-sm-12 col-md-12"></div>
+                    <div class="col-xs-12 col-sm-12 col-md-12">
+                      <datepicker menu-class-name="modalfix" v-model="dataForm.containDate" :locale="'th'" autoApply
+                        :enableTimePicker="false" week-start="0">
+                        <template #year="{ year }">{{ year + 543 }}</template>
+                        <template #year-overlay-value="{ value }">{{
+                          parseInt(value + 543)
+                        }}</template>
+                        <template #trigger>
+                          <q-input class="full-width inputgreen cursor-pointer" outlined dense lazy-rules :model-value="date2Thai(new Date(dataForm.containDate))
+                              " :rules="[(val: string) => !!val || `${'วันที่รายงานตัว'}`]"
+                            :label="`${'วันที่รายงานตัว'}`" hide-bottom-space>
+                            <template v-slot:prepend>
+                              <q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)">
+                              </q-icon>
+                            </template>
+                          </q-input>
+                        </template>
+                      </datepicker>
+                    </div>
+                    <q-space />
+                    <div class="col-xs-12 col-sm-12 col-md-12">
+                      <q-select class="full-width inputgreen cursor-pointer custom-input" outlined standout dense
+                        hide-bottom-space lazy-rules :options="posNoOptions" v-model="dataForm.posNoId"
+                        :label="`${'ตำแหน่งเลขที่'}`" map-options />
+                    </div>
+                    <div class="col-xs-12 col-sm-12 col-md-12">
+                      <q-select outlined class="full-width inputgreen cursor-pointer custom-input" standout dense
+                        hide-bottom-space lazy-rules :options="positionOptions" v-model="dataForm.positionId"
+                        :label="`${'ตำแหน่ง'}`" map-options />
+                    </div>
+                    <div class="col-xs-12 col-sm-12 col-md-12">
+                      <q-select outlined class="full-width inputgreen cursor-pointer custom-input" standout dense
+                        hide-bottom-space lazy-rules emit-value :options="positionPathSideOptions"
+                        v-model="dataForm.positionPathSideId" :label="`${'ด้าน/สาขา'}`" map-options />
+                    </div>
+
+                    <div class="col-xs-12 col-sm-12 col-md-12">
+                      <q-select outlined class="full-width inputgreen cursor-pointer custom-input" standout dense
+                        hide-bottom-space lazy-rules :options="positionTypeOptions" v-model="dataForm.positionTypeId"
+                        :label="`${'ประเภทตำแหน่ง'}`" map-options />
+                    </div>
+                    <div class="col-xs-12 col-sm-12 col-md-12">
+                      <q-select outlined class="full-width inputgreen cursor-pointer custom-input" standout dense
+                        hide-bottom-space lazy-rules :options="positionLineOptions" v-model="dataForm.positionLineId"
+                        :label="`${'สายงาน'}`" map-options />
+                    </div>
+                    <div class="col-xs-12 col-sm-12 col-md-12">
+                      <q-select outlined class="full-width inputgreen cursor-pointer custom-input" standout dense
+                        lazy-rules :options="positionLevelOptions" v-model="dataForm.positionLevelId"
+                        :label="`${'ระดับ'}`" hide-bottom-space
+                        :rules="[(val: string) => !!val || `${'กรุณาเลือกระดับ'}`]" emit-value map-options />
+                    </div>
+                  </div>
+                </q-scroll-area>
+              </q-card>
+            </div>
+          </div>
+        </q-card-section>
+
+        <q-separator />
+        <DialogFooter :editvisible="true" :validate="validateData" :save="saveAppoint"
+          v-model:modalEdit="editDataStatus" />
+      </q-form>
+    </q-card>
+  </q-dialog>
+</template>
+
+<style scoped lang="scss">
+.q-tree__node-header {
+  padding: 0px;
+  margin-top: 0px;
+  border-radius: 4px;
+  outline: 0;
+}
+
+.my-list-link {
+  color: rgb(118, 168, 222);
+  border-radius: 5px;
+  background: #a3d3fb48 !important;
+  font-weight: 600;
+  border: 1px solid rgba(175, 185, 196, 0.217);
+}
+</style>
diff --git a/src/modules/05_placement/components/AppointMent/Detail.vue b/src/modules/05_placement/components/AppointMent/Detail.vue
index 79d39033d..a8140765d 100644
--- a/src/modules/05_placement/components/AppointMent/Detail.vue
+++ b/src/modules/05_placement/components/AppointMent/Detail.vue
@@ -163,7 +163,7 @@ onMounted(async () => {
       class="q-mr-sm"
       @click="router.push(`/appoint-promote`)"
     />
-    รายละเอียดการแต่งตั้ง-เลื่อน {{ title.fullname }}
+    รายละเอียดการแต่งตั้ง-เลื่อน-ย้าย {{ title.fullname }}
   </div>
   <q-card bordered class="row col-12 text-dark">
     <div class="bg-grey-1 q-pa-sm col-12 row items-center text-primary">
diff --git a/src/modules/05_placement/components/AppointMent/Dialogbody.vue b/src/modules/05_placement/components/AppointMent/Dialogbody.vue
index ed6a6621c..54347e646 100644
--- a/src/modules/05_placement/components/AppointMent/Dialogbody.vue
+++ b/src/modules/05_placement/components/AppointMent/Dialogbody.vue
@@ -68,7 +68,7 @@ const columns2 = ref<QTableProps["columns"]>([
   {
     name: "organizationName",
     align: "left",
-    label: "หน่วยงานที่รับการแต่งตั้ง-เลื่อน",
+    label: "หน่วยงานที่รับการแต่งตั้ง-เลื่อน-ย้าย",
     sortable: true,
     field: "organizationName",
     headerStyle: "font-size: 14px",
diff --git a/src/modules/05_placement/components/AppointMent/Main.vue b/src/modules/05_placement/components/AppointMent/Main.vue
index 2445e8a93..010aa076f 100644
--- a/src/modules/05_placement/components/AppointMent/Main.vue
+++ b/src/modules/05_placement/components/AppointMent/Main.vue
@@ -4,18 +4,22 @@ import type { QTableProps } from "quasar";
 import { useQuasar } from "quasar";
 import { useRouter } from "vue-router";
 import { useCounterMixin } from "@/stores/mixin";
-import { useTransferDataStore } from "@/modules/05_placement/store"
-import Dialogbody from "@/modules/05_placement/components/AppointMent/Dialogbody.vue"
+import { useTransferDataStore } from "@/modules/05_placement/store";
+import Dialogbody from "@/modules/05_placement/components/AppointMent/Dialogbody.vue";
 import DialogOrgTree from "@/modules/05_placement/components/AppointMent/AppointmentModal.vue";
-import type { listAppointType,resData,orgFilter } from "@/modules/05_placement/interface/response/AppointMent"
-import type { OpType } from "@/modules/05_placement/interface/response/Main"
+import type {
+  listAppointType,
+  resData,
+  orgFilter,
+} from "@/modules/05_placement/interface/response/AppointMent";
+import type { OpType } from "@/modules/05_placement/interface/response/Main";
 import http from "@/plugins/http";
 import config from "@/app.config";
 
 const $q = useQuasar();
 const modal = ref<boolean>(false);
 const storeFn = useTransferDataStore();
-const { statusText } = storeFn
+const { statusText } = storeFn;
 const mixin = useCounterMixin(); //เรียกฟังก์ชันกลาง
 const {
   showLoader,
@@ -85,7 +89,7 @@ const columns = ref<QTableProps["columns"]>([
   {
     name: "organizationName",
     align: "left",
-    label: "หน่วยงานที่รับการแต่งตั้ง-เลื่อน",
+    label: "หน่วยงานที่รับการแต่งตั้ง-เลื่อน-ย้าย",
     sortable: true,
     field: "organizationName",
     headerStyle: "font-size: 14px",
@@ -167,15 +171,30 @@ const fecthlistappointment = async () => {
         status: statusText(e.status),
         createdAt: date2Thai(e.createdAt),
         birthday: e.dateOfBirth == null ? "-" : date2Thai(e.dateOfBirth),
+        educationOld: e.educationOld,
+        organizationPositionOld: e.organizationPositionOld,
+        positionTypeOld: e.positionTypeOld,
+        positionLevelOld: e.positionLevelOld,
+        positionNumberOld: e.positionNumberOld,
+        salary: e.salary,
+        positionDate: e.positionDate,
       }));
       rows2.value = rows.value.filter(
         (e: orgFilter) =>
           e.orgName !== null &&
           e.status !== "ส่งรายชื่อไปออกคำสั่ง" &&
-          e.status !== "ออกคำสั่งเสร็จแล้ว"
+          e.status !== "ออกคำสั่งเสร็จแล้ว" &&
+          e.educationOld &&
+          e.organizationPositionOld &&
+          e.positionTypeOld &&
+          e.positionLevelOld &&
+          e.positionNumberOld &&
+          e.salary !== null &&
+          e.positionDate
       );
     })
     .catch((e) => {
+      messageError($q, e);
     })
     .finally(() => {
       hideLoader();
@@ -241,7 +260,6 @@ const nextPage = (id: string) => {
   });
 };
 
-
 onMounted(() => {
   fecthlistappointment();
 });
@@ -255,27 +273,65 @@ onMounted(() => {
     <div class="row q-pa-md">
       <div class="col-12">
         <div class="row col-12">
-          <q-btn @click="popup()" size="14px" flat round color="add" icon="mdi-account-arrow-right">
+          <q-btn
+            @click="popup()"
+            size="14px"
+            flat
+            round
+            color="add"
+            icon="mdi-account-arrow-right"
+          >
             <q-tooltip>ส่งไปออกคำสั่งแต่งตั้ง-เลื่อน-ย้าย</q-tooltip>
           </q-btn>
 
           <q-space />
-          <q-input class="col-xs-12 col-sm-3 col-md-2" standout dense v-model="filterKeyword" ref="filterRef" outlined
-            debounce="300" placeholder="ค้นหา">
+          <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" />
+              <q-icon
+                v-if="filterKeyword !== ''"
+                name="clear"
+                class="cursor-pointer"
+                @click="resetFilter"
+              />
             </template>
           </q-input>
 
-          <q-select v-model="visibleColumns" multiple outlined dense options-dense :display-value="$q.lang.table.columns"
-            emit-value map-options :options="columns" option-value="name" options-cover style="min-width: 150px"
-            class="col-xs-12 col-sm-3 col-md-2 q-ml-sm" />
+          <q-select
+            v-model="visibleColumns"
+            multiple
+            outlined
+            dense
+            options-dense
+            :display-value="$q.lang.table.columns"
+            emit-value
+            map-options
+            :options="columns"
+            option-value="name"
+            options-cover
+            style="min-width: 150px"
+            class="col-xs-12 col-sm-3 col-md-2 q-ml-sm"
+          />
         </div>
 
         <div class="col-12 q-pt-sm">
-          <d-table :columns="columns" :rows="rows" :filter="filterKeyword" row-key="citizenId"
-            :visible-columns="visibleColumns" v-model:pagination="pagination">
+          <d-table
+            :columns="columns"
+            :rows="rows"
+            :filter="filterKeyword"
+            row-key="citizenId"
+            :visible-columns="visibleColumns"
+            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">
@@ -286,27 +342,60 @@ onMounted(() => {
             </template>
             <template v-slot:body="props">
               <q-tr :props="props" class="cursor-pointer">
-                <q-td key="no" :props="props" @click="nextPage(props.row.personalId)">
+                <q-td
+                  key="no"
+                  :props="props"
+                  @click="nextPage(props.row.personalId)"
+                >
                   {{ props.rowIndex + 1 }}
                 </q-td>
-                <q-td key="citizenId" :props="props" @click="nextPage(props.row.personalId)">
+                <q-td
+                  key="citizenId"
+                  :props="props"
+                  @click="nextPage(props.row.personalId)"
+                >
                   {{ props.row.citizenId }}
                 </q-td>
-                <q-td key="fullname" :props="props" @click="nextPage(props.row.personalId)">
+                <q-td
+                  key="fullname"
+                  :props="props"
+                  @click="nextPage(props.row.personalId)"
+                >
                   {{ props.row.fullname }}
                 </q-td>
-                <q-td key="organizationName" :props="props" @click="nextPage(props.row.personalId)">
-                  <div v-if="props.row.orgName !== null ||
-                    props.row.positionPath !== null
-                    ">
+                <q-td
+                  key="organizationName"
+                  :props="props"
+                  @click="nextPage(props.row.personalId)"
+                >
+                  <div
+                    v-if="
+                      props.row.orgName !== null ||
+                      props.row.positionPath !== null
+                    "
+                  >
                     <div class="col-4">
                       <div class="text-weight-medium">
-                        {{ props.row.orgName !== null ? props.row.orgName : "-" }}
-                        {{ props.row.organizationShortName !== null ? `(${props.row.organizationShortName})` : "" }}
+                        {{
+                          props.row.orgName !== null ? props.row.orgName : "-"
+                        }}
+                        {{
+                          props.row.organizationShortName !== null
+                            ? `(${props.row.organizationShortName})`
+                            : ""
+                        }}
                       </div>
                       <div class="text-weight-light">
-                        {{ props.row.positionPath !== null ? props.row.positionPath : "-" }}
-                        {{ props.row.positionNumber !== null ? `(${props.row.positionNumber})` : "" }}
+                        {{
+                          props.row.positionPath !== null
+                            ? props.row.positionPath
+                            : "-"
+                        }}
+                        {{
+                          props.row.positionNumber !== null
+                            ? `(${props.row.positionNumber})`
+                            : ""
+                        }}
                       </div>
                     </div>
                   </div>
@@ -316,29 +405,73 @@ onMounted(() => {
                     </div>
                   </div>
                 </q-td>
-                <q-td key="birthday" :props="props" @click="nextPage(props.row.personalId)">
+                <q-td
+                  key="birthday"
+                  :props="props"
+                  @click="nextPage(props.row.personalId)"
+                >
                   {{ props.row.birthday }}
                 </q-td>
-                <q-td key="createdAt" :props="props" @click="nextPage(props.row.personalId)">
+                <q-td
+                  key="createdAt"
+                  :props="props"
+                  @click="nextPage(props.row.personalId)"
+                >
                   {{ props.row.createdAt }}
                 </q-td>
-                <q-td key="status" :props="props" @click="nextPage(props.row.personalId)">
+                <q-td
+                  key="status"
+                  :props="props"
+                  @click="nextPage(props.row.personalId)"
+                >
                   {{ props.row.status }}
                 </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-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 clickable v-close-popup @click="openModalTree(props.row.personalId)">
-                          <q-item-section style="min-width: 0px" avatar class="q-py-sm">
-                            <q-icon color="primary" size="xs" name="mdi-bookmark-outline" />
+                        <q-item
+                          clickable
+                          v-close-popup
+                          @click="openModalTree(props.row.personalId)"
+                        >
+                          <q-item-section
+                            style="min-width: 0px"
+                            avatar
+                            class="q-py-sm"
+                          >
+                            <q-icon
+                              color="primary"
+                              size="xs"
+                              name="mdi-bookmark-outline"
+                            />
                           </q-item-section>
                           <q-item-section>เลือกหน่วยงาน/ตำแหน่ง</q-item-section>
                         </q-item>
-                        <q-item clickable v-close-popup @click="clickDelete(props.row.personalId)">
-                          <q-item-section style="min-width: 0px" avatar class="q-py-sm">
+                        <q-item
+                          clickable
+                          v-close-popup
+                          @click="clickDelete(props.row.personalId)"
+                        >
+                          <q-item-section
+                            style="min-width: 0px"
+                            avatar
+                            class="q-py-sm"
+                          >
                             <q-tooltip>ลบข้อมูล</q-tooltip>
                             <q-icon color="red" size="xs" name="mdi-delete" />
                           </q-item-section>
@@ -366,6 +499,11 @@ onMounted(() => {
     :nextPage="nextPage"
     :fecthlistappointment="fecthlistappointment"
   />
-  <DialogOrgTree v-model:modal="modalTree" :close="closeModalTree" :personal="personal" :personalId="personalId" />
+  <DialogOrgTree
+    v-model:modal="modalTree"
+    :close="closeModalTree"
+    :personal="personal"
+    :personalId="personalId"
+  />
 </template>
 <style scoped lang="scss"></style>
diff --git a/src/modules/05_placement/components/Main.vue b/src/modules/05_placement/components/Main.vue
index af79afc85..9ba46025c 100644
--- a/src/modules/05_placement/components/Main.vue
+++ b/src/modules/05_placement/components/Main.vue
@@ -425,7 +425,7 @@ function filterFnYear(val: string, update: any) {
               </template>
             </q-select>
             <q-select
-              class="col-xs-12 col-sm-3 col-md-2"
+              class="col-xs-12 col-sm-3 col-md-3"
               v-model="examType"
               label="ประเภทการสอบ"
               dense
diff --git a/src/modules/05_placement/components/Other/Dialogbody.vue b/src/modules/05_placement/components/Other/Dialogbody.vue
index 3d1b25978..a4015d8e3 100644
--- a/src/modules/05_placement/components/Other/Dialogbody.vue
+++ b/src/modules/05_placement/components/Other/Dialogbody.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, computed,watchEffect } from "vue";
+import { ref, computed, watchEffect } from "vue";
 import { useQuasar } from "quasar";
 import { useCounterMixin } from "@/stores/mixin";
 import type { QTableProps } from "quasar";
@@ -25,8 +25,8 @@ const props = defineProps({
   fecthlistOthet: Function,
   optionsType: Array,
   rows2: Array,
-  filterKeyword2:String,
-  type:String,
+  filterKeyword2: String,
+  type: String,
 });
 const visibleColumns2 = ref<string[]>([
   "no",
@@ -96,7 +96,6 @@ const emit = defineEmits([
   "update:filterKeyword2",
   "update:type",
   "update:selected",
-
 ]);
 const updateInput = (value: any) => {
   emit("update:filterKeyword2", value);
@@ -107,7 +106,7 @@ const updateInputType = (value: any) => {
 };
 //รีเซ็ตค่าในช่องค้นหา
 const Reset = () => {
-    emit("update:filterKeyword2", "");
+  emit("update:filterKeyword2", "");
 };
 //เปิด modal ยืนยัน
 const clickAddlist = () => {
@@ -117,7 +116,7 @@ const clickAddlist = () => {
 //อัพเดต ส่งไปออกคำสั่ง
 const addOther = async () => {
   let pId: string[] = [];
-  let Type = props.type as string
+  let Type = props.type as string;
   selected.value.forEach((e: any) => {
     pId.push(e.personalId);
   });
@@ -136,7 +135,7 @@ const addOther = async () => {
     .finally(() => {
       props.fecthlistOthet?.();
       selected.value = [];
-      props.clickClose?.()
+      props.clickClose?.();
     });
 };
 watchEffect(() => {
@@ -144,6 +143,23 @@ watchEffect(() => {
     selected.value = [];
   }
 });
+// filter OptionsType
+const OptionsTypeFn = ref<any>([]);
+function filterFnOptionsType(val: string, update: any) {
+  if (val == "") {
+    update(() => {
+      OptionsTypeFn.value = props.optionsType;
+    });
+  } else {
+    update(() => {
+      if (props.optionsType) {
+        OptionsTypeFn.value = props.optionsType.filter(
+          (e: any) => e.name.search(val) !== -1
+        );
+      }
+    });
+  }
+}
 </script>
 
 <template>
@@ -160,14 +176,23 @@ watchEffect(() => {
                 dense
                 :model-value="type"
                 @update:model-value="updateInputType"
-                :options="optionsType"
+                :options="OptionsTypeFn"
                 label="ประเภทคำสั่ง"
                 style="width: 400px; max-width: auto"
                 emit-value
                 map-options
                 option-label="name"
                 option-value="id"
-              />
+                use-input
+                @filter="filterFnOptionsType"
+                ><template v-slot:no-option>
+                  <q-item>
+                    <q-item-section class="text-grey">
+                      ไม่มีข้อมูล
+                    </q-item-section>
+                  </q-item>
+                </template>
+              </q-select>
             </q-toolbar>
           </div>
           <div class="col-5">
@@ -232,7 +257,6 @@ watchEffect(() => {
           <template v-slot:body="props">
             <q-tr :props="props" class="cursor-pointer">
               <q-td>
-                
                 <q-checkbox
                   keep-color
                   color="primary"
diff --git a/src/modules/05_placement/components/Other/Main.vue b/src/modules/05_placement/components/Other/Main.vue
index f20fe73c5..a8ea2c189 100644
--- a/src/modules/05_placement/components/Other/Main.vue
+++ b/src/modules/05_placement/components/Other/Main.vue
@@ -150,9 +150,19 @@ const fecthlistOthet = async () => {
         status: r.status ?? "-",
         statustext: statusText(r.status ?? ""),
         fullname: `${r.prefix ?? ""}${r.firstname ?? ""} ${r.lastname ?? ""}`,
+        amountOld: r.amountOld,
+        positionDate: r.positionDate,
       }));
       rows2.value = rows.value.filter(
-        (e: listMain) => e.status !== "REPORT" && e.status !== "DONE"
+        (e: listMain) =>
+          e.status !== "REPORT" &&
+          e.status !== "DONE" &&
+          e.organizationPositionOld &&
+          e.positionTypeOld &&
+          e.positionLevelOld &&
+          e.positionNumberOld &&
+          e.amountOld !== null &&
+          e.positionDate
       );
     })
     .catch((e) => {
diff --git a/src/modules/05_placement/components/Receive/receiveMain.vue b/src/modules/05_placement/components/Receive/receiveMain.vue
index db91c6dfb..ef738b93e 100644
--- a/src/modules/05_placement/components/Receive/receiveMain.vue
+++ b/src/modules/05_placement/components/Receive/receiveMain.vue
@@ -52,8 +52,15 @@ const popup = () => {
       (r.status == "WAITTING" ||
         r.status == "PENDING" ||
         r.status == "APPROVE") &&
-      r.positionNumber != null
+      r.positionNumber != null &&
+      r.educationOld &&
+      r.organizationPositionOld &&
+      r.positionTypeOld &&
+      r.positionLevelOld &&
+      r.positionNumberOld &&
+      r.amountOld !== null
   );
+
   rows2.value = row;
   modal.value = true;
 };
@@ -147,27 +154,28 @@ const columns = ref<QTableProps["columns"]>([
   },
 ]);
 
- //save file
+//save file
 const SaveData = async () => {
   myForm.value.validate().then((result: boolean) => {
     if (result) {
-  const formData = new FormData();
-  formData.append("File", files.value);
-  showLoader();
-   http
-    .put(config.API.receiveFile(personalId.value), formData)
-    .then(() => {
-      success($q, "บันทึกข้อมูลสำเร็จ");
-    })
-    .catch((e) => {
-      messageError($q, e);
-    })
-    .finally(async () => {
-      await clickCloseUpload();
-      hideLoader();
-
-    });
-}})};
+      const formData = new FormData();
+      formData.append("File", files.value);
+      showLoader();
+      http
+        .put(config.API.receiveFile(personalId.value), formData)
+        .then(() => {
+          success($q, "บันทึกข้อมูลสำเร็จ");
+        })
+        .catch((e) => {
+          messageError($q, e);
+        })
+        .finally(async () => {
+          await clickCloseUpload();
+          hideLoader();
+        });
+    }
+  });
+};
 
 const fecthlistRecevice = async () => {
   showLoader();
@@ -175,6 +183,7 @@ const fecthlistRecevice = async () => {
     .get(config.API.receiveData())
     .then((res: any) => {
       const response = res.data.result;
+
       listRecevice.value = response;
       let list: ResponseRow[] = [];
       response.map((e: ResponseData) => {
@@ -194,12 +203,23 @@ const fecthlistRecevice = async () => {
           organizationShortName: e.organizationShortName,
           positionNumber: e.positionNumber,
           positionPath: e.positionPath,
-          birthday: e.dateOfBirth == null ? "-" : date2Thai(e.dateOfBirth) && 
-                    e.dateOfBirth.toString() === "0001-01-01T00:00:00" ? "-" : date2Thai(e.dateOfBirth),
+          birthday:
+            e.dateOfBirth == null
+              ? "-"
+              : date2Thai(e.dateOfBirth) &&
+                e.dateOfBirth.toString() === "0001-01-01T00:00:00"
+              ? "-"
+              : date2Thai(e.dateOfBirth),
           status: e.status,
           statusText: statusText(e.status ?? ""),
           createdAt: e.createdAt !== null ? new Date(e.createdAt) : null,
           dateText: e.createdAt !== null ? date2Thai(e.createdAt) : "-",
+          educationOld: e.educationOld ?? "",
+          organizationPositionOld: e.organizationPositionOld ?? "",
+          positionTypeOld: e.positionTypeOld,
+          positionLevelOld: e.positionLevelOld,
+          positionNumberOld: e.positionNumberOld,
+          amountOld: e.amountOld,
         });
       });
       rows.value = list;
@@ -231,7 +251,7 @@ const clickClose = () => {
 // ปิดโมเดลอัปเดตไฟล์
 const clickCloseUpload = () => {
   modalupload.value = false;
-  files.value = null
+  files.value = null;
 };
 // ปิดโมเดลโครงสร้าง
 const openModalTree = (id: string) => {
@@ -292,26 +312,62 @@ onMounted(() => {
           <q-btn flat round color="primary" @click="add" icon="mdi-plus">
             <q-tooltip>เพิ่มข้อมูล</q-tooltip>
           </q-btn>
-          <q-btn size="14px" flat round color="add" icon="mdi-account-arrow-right" @click="popup()" >
+          <q-btn
+            size="14px"
+            flat
+            round
+            color="add"
+            icon="mdi-account-arrow-right"
+            @click="popup()"
+          >
             <q-tooltip>ส่งไปออกคำสั่งรับโอน</q-tooltip>
           </q-btn>
           <q-space />
-          <q-input class="col-xs-12 col-sm-3 col-md-2" standout dense v-model="filterKeyword"
-            ref="filterRef" outlined debounce="300" placeholder="ค้นหา" >
+          <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" />
+              <q-icon
+                v-if="filterKeyword !== ''"
+                name="clear"
+                class="cursor-pointer"
+                @click="resetFilter"
+              />
             </template>
           </q-input>
-          <q-select v-model="visibleColumns" multiple outlined dense options-dense
-            :display-value="$q.lang.table.columns" emit-value map-options
-            :options="columns" option-value="name" options-cover style="min-width: 150px"
-            class="col-xs-12 col-sm-3 col-md-2 q-ml-sm" />
+          <q-select
+            v-model="visibleColumns"
+            multiple
+            outlined
+            dense
+            options-dense
+            :display-value="$q.lang.table.columns"
+            emit-value
+            map-options
+            :options="columns"
+            option-value="name"
+            options-cover
+            style="min-width: 150px"
+            class="col-xs-12 col-sm-3 col-md-2 q-ml-sm"
+          />
         </div>
 
         <div class="col-12 q-pt-sm">
-          <d-table :columns="columns" :rows="rows" :filter="filterKeyword" row-key="fullname"
-            :visible-columns="visibleColumns" >
+          <d-table
+            :columns="columns"
+            :rows="rows"
+            :filter="filterKeyword"
+            row-key="fullname"
+            :visible-columns="visibleColumns"
+          >
             <template v-slot:header="props">
               <q-tr :props="props">
                 <q-th v-for="col in props.cols" :key="col.name" :props="props">
@@ -322,25 +378,60 @@ onMounted(() => {
             </template>
             <template v-slot:body="props">
               <q-tr :props="props" class="cursor-pointer">
-                <q-td key="no" :props="props" @click="nextPage(props.row.personalId)">
+                <q-td
+                  key="no"
+                  :props="props"
+                  @click="nextPage(props.row.personalId)"
+                >
                   {{ props.rowIndex + 1 }}
                 </q-td>
-                <q-td key="citizenId" :props="props" @click="nextPage(props.row.personalId)" >
+                <q-td
+                  key="citizenId"
+                  :props="props"
+                  @click="nextPage(props.row.personalId)"
+                >
                   {{ props.row.citizenId }}
                 </q-td>
-                <q-td key="fullname" :props="props" @click="nextPage(props.row.personalId)" >
+                <q-td
+                  key="fullname"
+                  :props="props"
+                  @click="nextPage(props.row.personalId)"
+                >
                   {{ props.row.fullname }}
                 </q-td>
-                <q-td key="organizationName" :props="props" @click="nextPage(props.row.personalId)" >
-                  <div v-if=" props.row.orgName !== null || props.row.positionPath !== null " >
+                <q-td
+                  key="organizationName"
+                  :props="props"
+                  @click="nextPage(props.row.personalId)"
+                >
+                  <div
+                    v-if="
+                      props.row.orgName !== null ||
+                      props.row.positionPath !== null
+                    "
+                  >
                     <div class="col-4">
                       <div class="text-weight-medium">
-                        {{ props.row.orgName !== null ? props.row.orgName : "-" }}
-                        {{ props.row.organizationShortName !== null ? `(${props.row.organizationShortName})` : "" }}
+                        {{
+                          props.row.orgName !== null ? props.row.orgName : "-"
+                        }}
+                        {{
+                          props.row.organizationShortName !== null
+                            ? `(${props.row.organizationShortName})`
+                            : ""
+                        }}
                       </div>
                       <div class="text-weight-light">
-                        {{ props.row.positionPath !== null ? props.row.positionPath : "-" }}
-                        {{ props.row.positionNumber !== null ? `(${props.row.positionNumber})` : "" }}
+                        {{
+                          props.row.positionPath !== null
+                            ? props.row.positionPath
+                            : "-"
+                        }}
+                        {{
+                          props.row.positionNumber !== null
+                            ? `(${props.row.positionNumber})`
+                            : ""
+                        }}
                       </div>
                     </div>
                   </div>
@@ -350,46 +441,119 @@ onMounted(() => {
                     </div>
                   </div>
                 </q-td>
-                <q-td key="birthday" :props="props" @click="nextPage(props.row.personalId)" >
+                <q-td
+                  key="birthday"
+                  :props="props"
+                  @click="nextPage(props.row.personalId)"
+                >
                   {{ props.row.birthday }}
                 </q-td>
-                <q-td key="dateText" :props="props" @click="nextPage(props.row.personalId)" >
+                <q-td
+                  key="dateText"
+                  :props="props"
+                  @click="nextPage(props.row.personalId)"
+                >
                   {{ props.row.dateText }}
                 </q-td>
-                <q-td key="statusText" :props="props" @click="nextPage(props.row.personalId)" >
+                <q-td
+                  key="statusText"
+                  :props="props"
+                  @click="nextPage(props.row.personalId)"
+                >
                   {{ props.row.statusText }}
                 </q-td>
                 <q-td auto-width>
-                  <q-btn icon="mdi-dots-vertical" size="12px" color="grey-7"
-                    flat round dense >
-                    <q-menu transition-show="jump-down" transition-hide="jump-up" >
+                  <q-btn
+                    icon="mdi-dots-vertical"
+                    size="12px"
+                    color="grey-7"
+                    flat
+                    round
+                    dense
+                  >
+                    <q-menu
+                      transition-show="jump-down"
+                      transition-hide="jump-up"
+                    >
                       <q-list dense style="min-width: 100px">
-                        <q-item clickable v-close-popup @click="openModalTree(props.row.personalId)"
-                          :disable=" props.row.status == 'REPORT' || props.row.status == 'DONE' " >
-                          <q-item-section style="min-width: 0px" avatar class="q-py-sm" >
-                            <q-icon :color=" props.row.status == 'REPORT' || props.row.status == 'DONE' ? 'grey' : 'primary' "
-                              size="xs" name="mdi-bookmark-outline" />
+                        <q-item
+                          clickable
+                          v-close-popup
+                          @click="openModalTree(props.row.personalId)"
+                          :disable="
+                            props.row.status == 'REPORT' ||
+                            props.row.status == 'DONE'
+                          "
+                        >
+                          <q-item-section
+                            style="min-width: 0px"
+                            avatar
+                            class="q-py-sm"
+                          >
+                            <q-icon
+                              :color="
+                                props.row.status == 'REPORT' ||
+                                props.row.status == 'DONE'
+                                  ? 'grey'
+                                  : 'primary'
+                              "
+                              size="xs"
+                              name="mdi-bookmark-outline"
+                            />
                           </q-item-section>
                           <q-item-section
                             >เลือกหน่วยงานที่รับโอน</q-item-section
                           >
                         </q-item>
-                        <q-item clickable v-close-popup
-                          @click="openUpload(props.row.personalId)" :disable=" props.row.status == 'REPORT' || props.row.status == 'DONE' ">
-                          <q-item-section style="min-width: 0px" avatar class="q-py-sm" >
-                            <q-icon size="xs" name="attach_file"
-                              :color=" props.row.status == 'REPORT' || props.row.status == 'DONE' ? 'grey' : 'blue' " />
+                        <q-item
+                          clickable
+                          v-close-popup
+                          @click="openUpload(props.row.personalId)"
+                          :disable="
+                            props.row.status == 'REPORT' ||
+                            props.row.status == 'DONE'
+                          "
+                        >
+                          <q-item-section
+                            style="min-width: 0px"
+                            avatar
+                            class="q-py-sm"
+                          >
+                            <q-icon
+                              size="xs"
+                              name="attach_file"
+                              :color="
+                                props.row.status == 'REPORT' ||
+                                props.row.status == 'DONE'
+                                  ? 'grey'
+                                  : 'blue'
+                              "
+                            />
                           </q-item-section>
                           <q-item-section>อัปโหลดเอกสาร</q-item-section>
                         </q-item>
-                        <q-item clickable v-close-popup @click="openDelete(props.row.personalId)"
-                          :disable=" props.row.status == 'REPORT' || props.row.status == 'DONE' " >
-                          <q-item-section style="min-width: 0px" avatar class="q-py-sm" >
+                        <q-item
+                          clickable
+                          v-close-popup
+                          @click="openDelete(props.row.personalId)"
+                          :disable="
+                            props.row.status == 'REPORT' ||
+                            props.row.status == 'DONE'
+                          "
+                        >
+                          <q-item-section
+                            style="min-width: 0px"
+                            avatar
+                            class="q-py-sm"
+                          >
                             <q-tooltip>ลบข้อมูล</q-tooltip>
                             <q-icon
                               :color="
                                 props.row.status == 'REPORT' ||
-                                props.row.status == 'DONE' ? 'grey' : 'red' "
+                                props.row.status == 'DONE'
+                                  ? 'grey'
+                                  : 'red'
+                              "
                               size="xs"
                               name="mdi-delete"
                             />
@@ -423,8 +587,18 @@ onMounted(() => {
       <q-card-section class="q-py-sm">
         <div class="col-12 row items-center q-col-gutter-sm">
           <div class="col-12">
-            <q-file ref="myForm" outlined dense v-model="files" label="อัปโหลดเอกสาร" lazy-rules
-              :rules="[(val) => val || 'กรุณาเลือกไฟล์หนังสือถึงหน่วยงานที่รับโอน']" hide-bottom-space >
+            <q-file
+              ref="myForm"
+              outlined
+              dense
+              v-model="files"
+              label="อัปโหลดเอกสาร"
+              lazy-rules
+              :rules="[
+                (val) => val || 'กรุณาเลือกไฟล์หนังสือถึงหน่วยงานที่รับโอน',
+              ]"
+              hide-bottom-space
+            >
               <template v-slot:prepend>
                 <q-icon name="attach_file" />
               </template>
@@ -435,7 +609,13 @@ onMounted(() => {
       <q-separator />
       <div class="row q-px-sm q-py-xs">
         <q-space />
-        <q-btn flat round color="public" @click="SaveData()" icon="mdi-content-save-outline" >
+        <q-btn
+          flat
+          round
+          color="public"
+          @click="SaveData()"
+          icon="mdi-content-save-outline"
+        >
           <q-tooltip>บันทึก</q-tooltip>
         </q-btn>
       </div>
diff --git a/src/modules/05_placement/components/Repatriate/RepatriateMain.vue b/src/modules/05_placement/components/Repatriate/RepatriateMain.vue
index d4de1077f..0faa5a41d 100644
--- a/src/modules/05_placement/components/Repatriate/RepatriateMain.vue
+++ b/src/modules/05_placement/components/Repatriate/RepatriateMain.vue
@@ -155,9 +155,17 @@ const openModalOrder = () => {
   openModal();
   const row = rows.value.filter(
     (item: officerType) =>
-      item.status == "WAITTING" ||
-      item.status == "PENDING" ||
-      item.status == "APPROVE"
+      (item.status == "WAITTING" ||
+        item.status == "PENDING" ||
+        item.status == "APPROVE") &&
+      item.organizationPositionOld &&
+      item.positionTypeOld &&
+      item.positionLevelOld &&
+      item.positionNumberOld &&
+      item.salary !== null &&
+      item.organization &&
+      item.date &&
+      item.dateRepatriation
   );
   rows2.value = row;
 };
@@ -187,6 +195,7 @@ const getData = async () => {
         positionNumberOld: item.positionNumberOld,
         organizationPositionOld: item.organizationPositionOld,
         isActive: item.isActive,
+        dateRepatriation: item.dateRepatriation,
       }));
     })
     .catch((e) => {})
@@ -224,26 +233,63 @@ onMounted(async () => {
     <q-separator />
     <div class="row q-pa-md">
       <div class="col-12">
-
         <div class="row col-12">
-          <q-btn flat round size="14px" color="add" icon="mdi-account-arrow-right" @click="openModalOrder" >
+          <q-btn
+            flat
+            round
+            size="14px"
+            color="add"
+            icon="mdi-account-arrow-right"
+            @click="openModalOrder"
+          >
             <q-tooltip>ส่งไปออกคำสั่งส่งตัวกลับ</q-tooltip>
           </q-btn>
           <q-space />
-          <q-input class="col-xs-12 col-sm-3 col-md-2" standout dense v-model="filterKeyword" ref="filterRef" 
-            outlined debounce="300" placeholder="ค้นหา" >
+          <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" />
+              <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 q-ml-sm" v-model="visibleColumns" multiple outlined 
-            dense options-dense :display-value="$q.lang.table.columns" emit-value map-options :options="columns" 
-            option-value="name" options-cover style="min-width: 150px" />
+          <q-select
+            class="col-xs-12 col-sm-3 col-md-2 q-ml-sm"
+            v-model="visibleColumns"
+            multiple
+            outlined
+            dense
+            options-dense
+            :display-value="$q.lang.table.columns"
+            emit-value
+            map-options
+            :options="columns"
+            option-value="name"
+            options-cover
+            style="min-width: 150px"
+          />
         </div>
 
         <div class="col-12 q-pt-sm">
-          <d-table :columns="columns" :rows="rows" :filter="filterKeyword" row-key="id" :visible-columns="visibleColumns" >
+          <d-table
+            :columns="columns"
+            :rows="rows"
+            :filter="filterKeyword"
+            row-key="id"
+            :visible-columns="visibleColumns"
+          >
             <template v-slot:header="props">
               <q-tr :props="props">
                 <q-th v-for="col in props.cols" :key="col.name" :props="props">
@@ -252,45 +298,89 @@ onMounted(async () => {
                 <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" @click="openDetail(props.row.id)">
                   {{ props.rowIndex + 1 }}
                 </q-td>
-                <q-td key="fullname" :props="props" @click="openDetail(props.row.id)" >
+                <q-td
+                  key="fullname"
+                  :props="props"
+                  @click="openDetail(props.row.id)"
+                >
                   {{ props.row.fullname }}
                 </q-td>
-                <q-td key="posNo" :props="props" @click="openDetail(props.row.id)" >
+                <q-td
+                  key="posNo"
+                  :props="props"
+                  @click="openDetail(props.row.id)"
+                >
                   {{ props.row.posNo }}
                 </q-td>
-                <q-td key="position" :props="props" @click="openDetail(props.row.id)" >
+                <q-td
+                  key="position"
+                  :props="props"
+                  @click="openDetail(props.row.id)"
+                >
                   {{ props.row.position }}
                 </q-td>
-                <q-td key="positionLevel" :props="props" @click="openDetail(props.row.id)" >
+                <q-td
+                  key="positionLevel"
+                  :props="props"
+                  @click="openDetail(props.row.id)"
+                >
                   {{ props.row.positionLevel }}
                 </q-td>
-                <q-td key="organizationPositionOld" :props="props" @click="openDetail(props.row.id)" >
+                <q-td
+                  key="organizationPositionOld"
+                  :props="props"
+                  @click="openDetail(props.row.id)"
+                >
                   <div class="table_ellipsis">
                     {{ props.row.organizationPositionOld }}
                   </div>
                 </q-td>
-                <q-td key="organization" :props="props" @click="openDetail(props.row.id)" >
+                <q-td
+                  key="organization"
+                  :props="props"
+                  @click="openDetail(props.row.id)"
+                >
                   <div class="table_ellipsis">
                     {{ props.row.organization }}
                   </div>
                 </q-td>
-                <q-td key="createdAt" :props="props" @click="openDetail(props.row.id)" >
+                <q-td
+                  key="createdAt"
+                  :props="props"
+                  @click="openDetail(props.row.id)"
+                >
                   {{ props.row.createdAt }}
                 </q-td>
-                <q-td key="statusText" :props="props" @click="openDetail(props.row.id)" >
+                <q-td
+                  key="statusText"
+                  :props="props"
+                  @click="openDetail(props.row.id)"
+                >
                   {{ props.row.statusText }}
                 </q-td>
                 <q-td auto-width>
-                  <q-btn icon="delete" size="14px" flat round dense
-                    :color="props.row.status == 'REPORT' || props.row.status == 'DONE' ? 'grey' : 'red-7'"
+                  <q-btn
+                    icon="delete"
+                    size="14px"
+                    flat
+                    round
+                    dense
+                    :color="
+                      props.row.status == 'REPORT' || props.row.status == 'DONE'
+                        ? 'grey'
+                        : 'red-7'
+                    "
                     @click="clickDelete(props.row.fullname, props.row.id)"
-                    :disable="props.row.status == 'REPORT' || props.row.status == 'DONE'" >
+                    :disable="
+                      props.row.status == 'REPORT' || props.row.status == 'DONE'
+                    "
+                  >
                     <q-tooltip>ลบข้อมูล</q-tooltip>
                   </q-btn>
                 </q-td>
diff --git a/src/modules/05_placement/components/Transfer/transferMain.vue b/src/modules/05_placement/components/Transfer/transferMain.vue
index aaa5ddc31..418c70bcd 100644
--- a/src/modules/05_placement/components/Transfer/transferMain.vue
+++ b/src/modules/05_placement/components/Transfer/transferMain.vue
@@ -26,7 +26,7 @@ const rows = ref<ResponseData[]>([]);
 const rows2 = ref<ResponseData[]>([]);
 const filters = ref<ResponseData[]>([]);
 
- //ค้นหา คอลัมน์ คอลัมน์ที่แสดง
+//ค้นหา คอลัมน์ คอลัมน์ที่แสดง
 const visibleColumns = ref<string[]>([
   "no",
   "fullname",
@@ -135,20 +135,30 @@ const columns = ref<QTableProps["columns"]>([
   },
 ]);
 
-
 const openModal = () => (modal.value = true);
 const closeModal = () => {
-  modal.value = false
-  filterKeyword2.value = ""
+  modal.value = false;
+  filterKeyword2.value = "";
 };
 
-
 // เปิดโมเดล
 const openModalOrder = () => {
+  console.log(filters.value);
+
   openModal();
   const row = filters.value.filter(
     (r: ResponseData) =>
-      r.status == "WAITTING" || r.status == "PENDING" || r.status == "APPROVE"
+      (r.status == "WAITTING" ||
+        r.status == "PENDING" ||
+        r.status == "APPROVE") &&
+      r.createdAt &&
+      r.organizationPositionOld &&
+      r.positionTypeOld &&
+      r.positionLevel &&
+      r.posNo &&
+      r.salary !== null &&
+      r.organization &&
+      r.createdAt 
   );
   rows2.value = row;
 };
diff --git a/src/modules/05_placement/components/helpgovernment/mainHelp.vue b/src/modules/05_placement/components/helpgovernment/mainHelp.vue
index 6f542e119..6bda234e8 100644
--- a/src/modules/05_placement/components/helpgovernment/mainHelp.vue
+++ b/src/modules/05_placement/components/helpgovernment/mainHelp.vue
@@ -170,16 +170,20 @@ const openDetail = (id: string) => {
 };
 const openModal = () => (modal.value = true);
 const closeModal = () => {
-  modal.value = false
+  modal.value = false;
   filterKeyword2.value = "";
 };
 const openModalOrder = () => {
   openModal();
   const row = rows.value.filter(
     (item: officerType) =>
-      item.status == "WAITTING" ||
-      item.status == "PENDING" ||
-      item.status == "APPROVE"
+      (item.status == "WAITTING" ||
+        item.status == "PENDING" ||
+        item.status == "APPROVE") &&
+      item.organizationPositionOld &&
+      item.organization &&
+      item.dateStart &&
+      item.dateEnd
   );
   rows2.value = row;
 };
@@ -213,7 +217,7 @@ const getData = async () => {
       }));
     })
     .catch((e) => {})
-    .finally(() => { 
+    .finally(() => {
       hideLoader();
     });
 };
@@ -246,21 +250,53 @@ onMounted(async () => {
     <div class="row q-pa-md">
       <div class="col-12">
         <div class="row col-12">
-          <q-btn @click="openModalOrder" size="14px" flat round color="add" icon="mdi-account-arrow-right" >
+          <q-btn
+            @click="openModalOrder"
+            size="14px"
+            flat
+            round
+            color="add"
+            icon="mdi-account-arrow-right"
+          >
             <q-tooltip>ส่งไปออกคำสั่งช่วยราชการ</q-tooltip>
           </q-btn>
           <q-space />
-          <q-input class="col-xs-12 col-sm-3 col-md-2" standout dense v-model="filterKeyword" ref="filterRef" 
-          outlined debounce="300" placeholder="ค้นหา" >
+          <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" />
+              <q-icon
+                v-if="filterKeyword !== ''"
+                name="clear"
+                class="cursor-pointer"
+                @click="resetFilter"
+              />
             </template>
           </q-input>
 
-          <q-select v-model="visibleColumns" multiple outlined dense options-dense :display-value="$q.lang.table.columns"
-            emit-value map-options :options="columns" option-value="name" options-cover style="min-width: 150px"
-            class="col-xs-12 col-sm-3 col-md-2 q-ml-sm" />
+          <q-select
+            v-model="visibleColumns"
+            multiple
+            outlined
+            dense
+            options-dense
+            :display-value="$q.lang.table.columns"
+            emit-value
+            map-options
+            :options="columns"
+            option-value="name"
+            options-cover
+            style="min-width: 150px"
+            class="col-xs-12 col-sm-3 col-md-2 q-ml-sm"
+          />
         </div>
 
         <div class="col-12 q-pt-sm">
@@ -291,42 +327,90 @@ onMounted(async () => {
                 >
                   {{ props.row.fullname }}
                 </q-td>
-                <q-td key="posNo" :props="props" @click="openDetail(props.row.id)" >
+                <q-td
+                  key="posNo"
+                  :props="props"
+                  @click="openDetail(props.row.id)"
+                >
                   {{ props.row.posNo }}
                 </q-td>
-                <q-td key="position" :props="props" @click="openDetail(props.row.id)" >
+                <q-td
+                  key="position"
+                  :props="props"
+                  @click="openDetail(props.row.id)"
+                >
                   {{ props.row.position }}
                 </q-td>
-                <q-td key="positionLevel" :props="props" @click="openDetail(props.row.id)" >
+                <q-td
+                  key="positionLevel"
+                  :props="props"
+                  @click="openDetail(props.row.id)"
+                >
                   {{ props.row.positionLevel }}
                 </q-td>
-                <q-td key="organizationPositionOld" :props="props" @click="openDetail(props.row.id)" >
+                <q-td
+                  key="organizationPositionOld"
+                  :props="props"
+                  @click="openDetail(props.row.id)"
+                >
                   <div class="table_ellipsis">
                     {{ props.row.organizationPositionOld }}
                   </div>
                 </q-td>
-                <q-td key="organization" :props="props" @click="openDetail(props.row.id)" >
+                <q-td
+                  key="organization"
+                  :props="props"
+                  @click="openDetail(props.row.id)"
+                >
                   <div class="table_ellipsis">
                     {{ props.row.organization }}
                   </div>
                 </q-td>
-                <q-td key="dateStart" :props="props" @click="openDetail(props.row.id)" >
+                <q-td
+                  key="dateStart"
+                  :props="props"
+                  @click="openDetail(props.row.id)"
+                >
                   {{ props.row.dateStart }}
                 </q-td>
-                <q-td key="dateEnd" :props="props" @click="openDetail(props.row.id)" >
+                <q-td
+                  key="dateEnd"
+                  :props="props"
+                  @click="openDetail(props.row.id)"
+                >
                   {{ props.row.dateEnd }}
                 </q-td>
-                <q-td key="createdAt" :props="props" @click="openDetail(props.row.id)" >
+                <q-td
+                  key="createdAt"
+                  :props="props"
+                  @click="openDetail(props.row.id)"
+                >
                   {{ props.row.createdAt }}
                 </q-td>
-                <q-td key="statusText" :props="props" @click="openDetail(props.row.id)" >
+                <q-td
+                  key="statusText"
+                  :props="props"
+                  @click="openDetail(props.row.id)"
+                >
                   {{ props.row.statusText }}
                 </q-td>
                 <q-td auto-width>
-                  <q-btn icon="delete" size="14px" flat round dense
-                    :color=" props.row.status == 'REPORT' || props.row.status == 'DONE' ? 'grey' : 'red-7' "
+                  <q-btn
+                    icon="delete"
+                    size="14px"
+                    flat
+                    round
+                    dense
+                    :color="
+                      props.row.status == 'REPORT' || props.row.status == 'DONE'
+                        ? 'grey'
+                        : 'red-7'
+                    "
                     @click="clickDelete(props.row.fullname, props.row.id)"
-                    :disable=" props.row.status == 'REPORT' || props.row.status == 'DONE' " >
+                    :disable="
+                      props.row.status == 'REPORT' || props.row.status == 'DONE'
+                    "
+                  >
                     <q-tooltip>ลบข้อมูล</q-tooltip>
                   </q-btn>
                 </q-td>
diff --git a/src/modules/05_placement/components/probation/MainProbation.vue b/src/modules/05_placement/components/probation/MainProbation.vue
index 33367fe6a..3669b9d93 100644
--- a/src/modules/05_placement/components/probation/MainProbation.vue
+++ b/src/modules/05_placement/components/probation/MainProbation.vue
@@ -393,7 +393,7 @@ function filterFn(val: string, update: any) {
         <div class="col-6">
           <div class="row">
             <q-select
-              class="col-5 q-mr-sm"
+              class="col-5 col-sm-3 col-md-8"
               v-model="fillter"
               label="สถานะ"
               dense
diff --git a/src/modules/05_placement/interface/response/AppointMent.ts b/src/modules/05_placement/interface/response/AppointMent.ts
index cea270070..d24f958ed 100644
--- a/src/modules/05_placement/interface/response/AppointMent.ts
+++ b/src/modules/05_placement/interface/response/AppointMent.ts
@@ -1,84 +1,105 @@
 interface listAppointType {
-personalId:string
-citizenId:number
-fullname:string
-organizationName:string
-orgName:string
-organizationShortName:string
-positionNumber:string
-positionPath:string
-status:string
-createdAt:string
-birthday:string
+  personalId: string
+  citizenId: number
+  fullname: string
+  organizationName: string
+  orgName: string
+  organizationShortName: string
+  positionNumber: string
+  positionPath: string
+  status: string
+  createdAt: string
+  birthday: string
+  educationOld: string
+  organizationPositionOld: string
+  positionTypeOld: string
+  positionLevelOld: string
+  positionNumberOld: string
+  salary: number
+  positionDate: Date
 }
 
 interface resData {
-    id:string
-    citizenId:number
-    prefix:string
-    firstname:string
-    lastname:string
-    organizationName:string
-    organizationShortName:string
-    positionNumber:string
-    positionPath:string
-    status:string
-    createdAt:Date
-    dateOfBirth:Date
+  id: string
+  citizenId: number
+  prefix: string
+  firstname: string
+  lastname: string
+  organizationName: string
+  organizationShortName: string
+  positionNumber: string
+  positionPath: string
+  status: string
+  createdAt: Date
+  dateOfBirth: Date
+  educationOld: string
+  organizationPositionOld: string
+  positionTypeOld: string
+  positionLevelOld: string
+  positionNumberOld: string
+  salary: number
+  positionDate: Date
 }
-interface orgFilter{
-    orgName:string
-    status:string
+interface orgFilter {
+  orgName: string
+  status: string
+  educationOld: string
+  organizationPositionOld: string
+  positionTypeOld: string
+  positionLevelOld: string
+  positionNumberOld: string
+  salary: number
+  positionDate: Date
 }
-interface appointmentData{
-    citizenId:string
-    prefixId?:string
-    firstname?:string
-    lastname?:string
+interface appointmentData {
+  citizenId: string
+  prefixId?: string
+  firstname?: string
+  lastname?: string
 }
 
 interface UserData {
-    personalId: string;
-    citizenId: string;
-    fullname: string;
-    organizationName: string ;
-    orgName: string ;
-    organizationShortName: string ;
-    positionNumber: string ;
-    positionPath: string;
-    status: string;
-    createdAt: string;
-    birthday: string;
-  }
+  personalId: string;
+  citizenId: string;
+  fullname: string;
+  organizationName: string;
+  orgName: string;
+  organizationShortName: string;
+  positionNumber: string;
+  positionPath: string;
+  status: string;
+  createdAt: string;
+  birthday: string;
+}
+
+interface ResponseData {
+  data: {
+    result: {
+      citizenId: string
+      profileId: string;
+      prefix: string;
+      firstname: string;
+      lastname: string;
+      organizationPositionOld: string;
+      positionLevelOld: string;
+      positionTypeOld: string;
+      status: string;
+      educationOld: string;
+      positionNumberOld: string;
+      salary: number;
+      reason: string;
+      positionDate: Date;
+      avatar: string;
 
-  interface ResponseData {
-    data: {
-      result: {
-        citizenId:string
-        profileId: string;
-        prefix: string;
-        firstname: string;
-        lastname: string;
-        organizationPositionOld: string;
-        positionLevelOld: string;
-        positionTypeOld: string;
-        status: string;
-        educationOld: string;
-        positionNumberOld: string;
-        salary: number;
-        reason: string;
-        positionDate: Date;
-        avatar: string;
-      
-      };
     };
-  }
+  };
+}
 export type {
-    listAppointType,
-    resData,
-    orgFilter,
-    appointmentData,
-    UserData,
-    ResponseData
-    
+  listAppointType,
+  resData,
+  orgFilter,
+  appointmentData,
+  UserData,
+  ResponseData
+
 }
\ No newline at end of file
diff --git a/src/modules/05_placement/interface/response/OhterMain.ts b/src/modules/05_placement/interface/response/OhterMain.ts
index b67887d09..a50887d20 100644
--- a/src/modules/05_placement/interface/response/OhterMain.ts
+++ b/src/modules/05_placement/interface/response/OhterMain.ts
@@ -20,6 +20,8 @@ interface listMain {
   status: string;
   statustext: string;
   createdAt: Date;
+  amountOld: number;
+  positionDate: Date
 }
 //ข้อมูลจาก api
 interface listMainAPI {
@@ -44,6 +46,8 @@ interface listMainAPI {
   status: string;
   statustext: string;
   createdAt: Date;
+  amountOld: number;
+  positionDate: Date
 }
 
 interface OtherdataInterface {
diff --git a/src/modules/05_placement/interface/response/Receive.ts b/src/modules/05_placement/interface/response/Receive.ts
index 9cc51bdb7..e4910941c 100644
--- a/src/modules/05_placement/interface/response/Receive.ts
+++ b/src/modules/05_placement/interface/response/Receive.ts
@@ -19,6 +19,13 @@ interface ResponseRow {
   statusText: string;
   createdAt: Date | null;
   dateText: string | null;
+  educationOld: string
+  organizationPositionOld: string
+  positionTypeOld: string
+  positionLevelOld: string
+  positionNumberOld: string
+  amountOld: number
+
 }
 
 interface ResponseData {
@@ -55,6 +62,7 @@ interface ResponseData {
   recruitDate: Date;
   salary: number;
   status: string;
+  amountOld: number
 }
 
 export type { ResponseTitle, ResponseData, ResponseRow };
diff --git a/src/modules/05_placement/interface/response/officer.ts b/src/modules/05_placement/interface/response/officer.ts
index f48654670..db0860ffc 100644
--- a/src/modules/05_placement/interface/response/officer.ts
+++ b/src/modules/05_placement/interface/response/officer.ts
@@ -19,8 +19,7 @@ interface officerType {
   isActive: boolean;
   dateEnd: string;
   dateStart: string;
-
-
+  dateRepatriation: Date
 }
 interface ResponseData {
   data: {
diff --git a/src/modules/05_placement/router.ts b/src/modules/05_placement/router.ts
index a7f3bef54..8f807d7b6 100644
--- a/src/modules/05_placement/router.ts
+++ b/src/modules/05_placement/router.ts
@@ -61,6 +61,9 @@ const ReceiveAdd = () =>
 //แต่งตั้ง-เลื่อน
 const AppointmentMain = () => import("@/modules/05_placement/components/AppointMent/Main.vue");
 const AppointmentDetail = () => import("@/modules/05_placement/components/AppointMent/Detail.vue");
+//แต่งตั้งลูกจ้างประจำ
+const AppointEmployeeMain = () => import("@/modules/05_placement/components/AppointEmployee/Main.vue");
+const AppointEmployeeDetail = () => import("@/modules/05_placement/components/AppointEmployee/Detail.vue");
 //อื่นๆ
 const OtherMain = () => import("@/modules/05_placement/components/Other/Main.vue")
 const OthertDetail = () => import("@/modules/05_placement/components/Other/Detail.vue");
@@ -306,13 +309,33 @@ export default [
       Role: "placement",
     },
   },
+  {
+    path: "appoint-employee",
+    name: "appoint-employee",
+    component: AppointEmployeeMain,
+    meta: {
+      Auth: true,
+      Key: [6.9],
+      Role: "placement",
+    },
+  },
+  {
+    path: "appoint-employee/detail/:id",
+    name: "appoint-employee-detail",
+    component: AppointEmployeeDetail,
+    meta: {
+      Auth: true,
+      Key: [6.9],
+      Role: "placement",
+    },
+  },
   {
     path: "other",
     name: "other",
     component: OtherMain,
     meta: {
       Auth: true,
-      Key: [6.9],
+      Key: [6.10],
       Role: "placement",
     },
   }, {
@@ -321,7 +344,7 @@ export default [
     component: relocation,
     meta: {
       Auth: true,
-      Key: [6.9],
+      Key: [6.10],
       Role: "placement",
     },
   },
diff --git a/src/modules/06_retirement/components/resign/Resign.vue b/src/modules/06_retirement/components/resign/Resign.vue
index 24e49de71..a154ba0f2 100644
--- a/src/modules/06_retirement/components/resign/Resign.vue
+++ b/src/modules/06_retirement/components/resign/Resign.vue
@@ -158,7 +158,7 @@ const openModalOrder = () => {
   openModal();
   const row = filters.value.filter(
     (r: ResponseItems) =>
-      r.status == "PENDING" || r.status == "APPROVE" || r.status == "REJECT"
+      r.status == "WAITTING" || r.status == "PENDING" || r.status == "APPROVE"
   );
   rows2.value = row;
 };
diff --git a/src/modules/06_retirement/views/Main.vue b/src/modules/06_retirement/views/Main.vue
index ee3a43109..39f6afdee 100644
--- a/src/modules/06_retirement/views/Main.vue
+++ b/src/modules/06_retirement/views/Main.vue
@@ -72,19 +72,17 @@ const columns = ref<QTableProps["columns"]>([
 // ข้อมูลตาราง (จำลอง)
 const currentYear = new Date().getFullYear();
 const rows = ref<resMain[]>([]);
-const yearOptions = ref<any[]>([]);
+const yearOptions = ref<any>([{ id: "", year: "ทั้งหมด" }]);
 
-onMounted(() => {
-  filteryear();
+onMounted(async () => {
+  await fetchRetirement(type.value, currentYear);
+  //   await fetchRetirement(type.value, currentYear);
 });
 // หาปีปัจจุบัน
 const filteryear = () => {
-  yearOptions.value = [{ id: currentYear, name: currentYear + 543 }];
-  yearOptions.value.push({ id: currentYear, name: currentYear + 543 });
-  //   fiscalyear.value = yearOptions[0].id;
-
-  yearOptionsFilter.value = [{ id: currentYear, name: currentYear + 543 }];
-  yearOptionsFilter.value.push({ id: currentYear, name: currentYear + 543 });
+  //   yearOptions.value.push({ id: currentYear, name: currentYear + 543 });
+  //   yearOptionsFilter.value = [{ id: currentYear, name: currentYear + 543 }];
+  //   yearOptionsFilter.value.push({ id: currentYear, name: currentYear + 543 });
   fetchRetirement(type.value, currentYear);
 };
 // ประกาศเกษียณอายุราชการ
@@ -98,7 +96,7 @@ const fetchRetirement = async (type: string, year: any) => {
       rows.value = data.map((items: any) => ({
         id: items.id,
         Date: date2Thai(items.createdAt),
-        year: items.year,
+        year: items.year + 543,
         retireNumber: items.round,
         total: items.total,
         round: items.round,
@@ -106,6 +104,19 @@ const fetchRetirement = async (type: string, year: any) => {
         json: items.json,
         document: items.document,
       }));
+      let option: any[] = [];
+      data.map((items: any) => {
+        option.push({
+          id: items.year,
+          year: (items.year + 543).toString(),
+          typeReport: typeReportChangeName(items.typeReport), // เปลี่ยนสถานะ
+        });
+      });
+      yearOptions.value = [{ id: 0, year: "ทั้งหมด" }];
+      yearOptions.value.push(...option);
+
+      yearOptionsFilter.value = yearOptions.value;
+
       actionOption.value = rows.value;
       rows.value.sort((a, b) => a.round - b.round); // เรียงรอบมากไปน้อย
       checkststus(rows.value);
@@ -144,10 +155,10 @@ const pagination = ref({
   rowsPerPage: 10,
 });
 
-const filterSelector = (val: any, update: Function, year: any) => {
+const filterSelector = (val: any, update: Function) => {
   update(() => {
     yearOptions.value = yearOptionsFilter.value.filter(
-      (v: any) => v.name.valueOf(val.toLowerCase()) > -1
+      (v: any) => v.year.indexOf(val) > -1
     );
   });
 };
@@ -219,18 +230,28 @@ const typeReportChangeName = (val: string) => {
                 map-options
                 :options="yearOptions"
                 option-value="id"
-                option-label="name"
+                option-label="year"
                 lazy-rules
+                use-input
                 hide-bottom-space
                 :readonly="false"
                 :borderless="false"
                 :outlined="true"
+                @filter="(inputValue:any,
+                      doneFn:Function) => filterSelector(inputValue, doneFn
+                      ) "
                 :hide-dropdown-icon="false"
                 style="min-width: 150px"
-                @filter="(inputValue:any,
-                      doneFn:Function) => filterSelector(inputValue, doneFn,'yearOptions'
-                      ) "
-              />
+              >
+                <template v-slot:no-option>
+                  <q-item>
+                    <q-item-section class="text-grey">
+                      ไม่มีข้อมูล
+                    </q-item-section>
+                  </q-item>
+                </template>
+              </q-select>
+
               <!-- use-input -->
               <div>
                 <popupAdd
diff --git a/src/modules/07_insignia/components/2_Manage/Tab1.vue b/src/modules/07_insignia/components/2_Manage/Tab1.vue
index 6f042f192..9f67d4aec 100644
--- a/src/modules/07_insignia/components/2_Manage/Tab1.vue
+++ b/src/modules/07_insignia/components/2_Manage/Tab1.vue
@@ -347,17 +347,17 @@ const fecthlistperson = async (id: string) => {
 const clickAdd = async () => {
   dataPerson.id
     ? await myForm.value!.validate().then((result: boolean) => {
-        if (result) {
-          dialogConfirm(
-            $q,
-            async () => {
-              await addlistperson(dataPerson.id);
-            },
-            "ยืนยันการเพิ่มรายชื่อคนที่ยื่นขอพระราชทานเครื่องราชฯ",
-            "ต้องการยืนยันการเพิ่มรายชื่อคนที่ยื่นขอพระราชทานเครื่องราชฯ นี้หรือไม่?"
-          );
-        }
-      })
+      if (result) {
+        dialogConfirm(
+          $q,
+          async () => {
+            await addlistperson(dataPerson.id);
+          },
+          "ยืนยันการเพิ่มรายชื่อคนที่ยื่นขอพระราชทานเครื่องราชฯ",
+          "ต้องการยืนยันการเพิ่มรายชื่อคนที่ยื่นขอพระราชทานเครื่องราชฯ นี้หรือไม่?"
+        );
+      }
+    })
     : dialogMessageNotify($q, "กรุณาเลือกราชชื่อที่ต้องการเพิ่ม");
 };
 //เพิ่มราชชื่อข้าราชการ
@@ -409,11 +409,17 @@ const downloadFile = (response: any, filename: string) => {
 };
 // เรียก file รายชื่อข้าราชการสามัญฯ
 const downloadFileexcel = async () => {
+  const findInsigniaId = DataStore.dataInsigniaType.find(
+    (e: any) => e.name == DataStore.typeinsignia
+  );
+
   showLoader();
   await http
-    .get(config.API.insigniaDowanload(DataStore.requestId), {
-      responseType: "blob",
-    })
+    .put(config.API.insigniaDowanload(DataStore.requestId), {
+      profileType:
+        DataStore.employeeClass == "all" ? null : DataStore.employeeClass,
+      InsigniaId: DataStore.typeinsignia == "all" ? null : findInsigniaId.id,
+    }, { responseType: "blob" })
     .then(async (res) => {
       await downloadFile(
         res,
@@ -656,33 +662,29 @@ const clickShowWarn = (
 const filterSelector = (val: any, update: Function, name: any) => {
   update(() => {
     const needle = val.toLowerCase();
-    if (name === 'typeinsigniaOptions') {
-      DataStore.typeinsignia = ''
-        typeinsigniaOptions.value = DataStore.typeinsigniaOptions.filter(
-          (v: any) => v.name.toLowerCase().indexOf(needle) > -1
-        );
-    }
-    else if(name === 'employeeClassOps'){
-      DataStore.employeeClass = ''
-        employeeClassOps.value = DataStore.employeeClassOps.filter(
-          (v: any) => v.name.toLowerCase().indexOf(needle) > -1
-        );
-    }
-    else if(name === 'filterOrganizationOP'){
+    if (name === "typeinsigniaOptions") {
+      DataStore.typeinsignia = "";
+      typeinsigniaOptions.value = DataStore.typeinsigniaOptions.filter(
+        (v: any) => v.name.toLowerCase().indexOf(needle) > -1
+      );
+    } else if (name === "employeeClassOps") {
+      DataStore.employeeClass = "";
+      employeeClassOps.value = DataStore.employeeClassOps.filter(
+        (v: any) => v.name.toLowerCase().indexOf(needle) > -1
+      );
+    } else if (name === "filterOrganizationOP") {
       filterOrganizationOP.value = organizationOptions.value.filter(
-          (v: any) => v.name.toLowerCase().indexOf(needle) > -1
-        );
+        (v: any) => v.name.toLowerCase().indexOf(needle) > -1
+      );
     }
-
-    }
-  )
-}
+  });
+};
 
 const clearInsigniaFilters = (name: string) => {
   if (name === "typeinsigniaOptions") {
     DataStore.typeinsignia = "all";
     typeinsigniaOptions.value = DataStore.typeinsigniaOptions;
-  } else if (name === 'employeeClassOps') {
+  } else if (name === "employeeClassOps") {
     DataStore.employeeClass = "all";
     employeeClassOps.value = DataStore.employeeClassOps;
   }
@@ -693,221 +695,100 @@ const clearInsigniaFilters = (name: string) => {
   <div class="col-12 row q-pa-md">
     <div class="row col-12">
       <div class="row col-12 q-col-gutter-sm">
-        <q-select
-        class="col-4"
-          v-if="roleDataStore.adminRole"
-          v-model="organization"
-          label="หน่วยงาน"
-          dense
-          emit-value
-          map-options
-          :options="filterOrganizationOP"
-          option-value="id"
-          option-label="name"
-          lazy-rules
-          use-input
-          hide-bottom-space
-          :readonly="false"
-          :borderless="false"
-          :outlined="true"
-          :hide-dropdown-icon="false"
-          style="min-width: 150px"
-          @update:model-value="changtypeOc"
-          @filter="(inputValue:any,
-                      doneFn:Function) => filterSelector(inputValue, doneFn,'filterOrganizationOP'
-                      ) "
-        />
-        <q-select
-        class="col-1"
-          v-model="DataStore.typeinsignia"
-          label="ประเภทเครื่องราชฯ ที่ยืนขอ"
-          dense
-          emit-value
-          map-options
-          :options="typeinsigniaOptions"
-          option-value="id"
-          option-label="name"
-          lazy-rules
-          hide-bottom-space
-          use-input
-          :readonly="false"
-          :borderless="false"
-          :outlined="true"
-          :hide-dropdown-icon="false"
-          style="min-width: 180px"
-          @update:model-value="
+        <q-select class="col-4" v-if="roleDataStore.adminRole" v-model="organization" label="หน่วยงาน" dense emit-value
+          map-options :options="filterOrganizationOP" option-value="id" option-label="name" lazy-rules use-input
+          hide-bottom-space :readonly="false" :borderless="false" :outlined="true" :hide-dropdown-icon="false"
+          style="min-width: 150px" @update:model-value="changtypeOc" @filter="(inputValue: any,
+            doneFn: Function) => filterSelector(inputValue, doneFn, 'filterOrganizationOP'
+            )" />
+        <q-select class="col-1" v-model="DataStore.typeinsignia" label="ประเภทเครื่องราชฯ ที่ยืนขอ" dense emit-value
+          map-options :options="typeinsigniaOptions" option-value="id" option-label="name" lazy-rules hide-bottom-space
+          use-input :readonly="false" :borderless="false" :outlined="true" :hide-dropdown-icon="false"
+          style="min-width: 180px" @update:model-value="
             DataStore.searchDataTable(
               DataStore.typeinsignia,
               DataStore.employeeClass
             )
-          "
-          @filter="(inputValue:any,
-                      doneFn:Function) => filterSelector(inputValue, doneFn,'typeinsigniaOptions'
-                      ) "
-        >
+            " @filter="(inputValue: any,
+    doneFn: Function) => filterSelector(inputValue, doneFn, 'typeinsigniaOptions'
+    )">
           <template v-if="DataStore.typeinsignia !== 'all'" v-slot:append>
-            <q-icon
-              name="cancel"
-              @click.stop.prevent="
-                clearInsigniaFilters('typeinsigniaOptions'),
-                  DataStore.searchDataTable(
-                    DataStore.typeinsignia,
-                    DataStore.employeeClass
-                  )
-              "
-              class="cursor-pointer"
-            />
-          </template>
-        </q-select>
-        <div>
-          <q-select
-          class="col-2"
-            v-model="DataStore.employeeClass"
-            dense
-            outlined
-            lazy-rules
-            hide-bottom-space
-            :label="`${'สถานภาพ'}`"
-            emit-value
-            use-input
-            map-options
-            option-label="name"
-            :options="employeeClassOps"
-            option-value="id"
-            :readonly="false"
-            :borderless="false"
-            style="min-width: 150px"
-            @update:model-value="
+            <q-icon name="cancel" @click.stop.prevent="
+              clearInsigniaFilters('typeinsigniaOptions'),
               DataStore.searchDataTable(
                 DataStore.typeinsignia,
                 DataStore.employeeClass
               )
-            "
-            @filter="(inputValue:any,
-                      doneFn:Function) => filterSelector(inputValue, doneFn,'employeeClassOps'
-                      ) "
-          >
+              " class="cursor-pointer" />
+          </template>
+        </q-select>
+        <div>
+          <q-select class="col-2" v-model="DataStore.employeeClass" dense outlined lazy-rules hide-bottom-space
+            :label="`${'สถานภาพ'}`" emit-value use-input map-options option-label="name" :options="employeeClassOps"
+            option-value="id" :readonly="false" :borderless="false" style="min-width: 150px" @update:model-value="
+              DataStore.searchDataTable(
+                DataStore.typeinsignia,
+                DataStore.employeeClass
+              )
+              " @filter="(inputValue: any,
+    doneFn: Function) => filterSelector(inputValue, doneFn, 'employeeClassOps'
+    )">
             <template v-if="DataStore.employeeClass !== 'all'" v-slot:append>
-              <q-icon
-                name="cancel"
-                @click.stop.prevent="
-                  clearInsigniaFilters('employeeClassOps'),
-                    DataStore.searchDataTable(
-                      DataStore.typeinsignia,
-                      DataStore.employeeClass
-                    )
-                "
-                class="cursor-pointer"
-              />
+              <q-icon name="cancel" @click.stop.prevent="
+                clearInsigniaFilters('employeeClassOps'),
+                DataStore.searchDataTable(
+                  DataStore.typeinsignia,
+                  DataStore.employeeClass
+                )
+                " class="cursor-pointer" />
             </template>
           </q-select>
         </div>
         <div>
-          <q-btn
-            size="md"
-            icon="mdi-download"
-            flat
-            round
-            color="primary"
-            @click="downloadFileexcel"
-          >
+          <q-btn size="md" icon="mdi-download" flat round color="primary" @click="downloadFileexcel">
             <q-tooltip>ดาวน์โหลด</q-tooltip>
           </q-btn>
-          <q-btn
-            size="12px"
-            flat
-            round
-            color="add"
-            icon="mdi-plus"
-            @click="clickmodalAdd"
-            v-if="
-              (DataStore.isLock == false &&
-                DataStore.requestStatus == 'st5' &&
-                roleDataStore.adminRole) ||
-              checkStatus == true
-            "
-          >
+          <q-btn size="12px" flat round color="add" icon="mdi-plus" @click="clickmodalAdd" v-if="(DataStore.isLock == false &&
+              DataStore.requestStatus == 'st5' &&
+              roleDataStore.adminRole) ||
+            checkStatus == true
+            ">
             <q-tooltip>เพิ่ม</q-tooltip>
           </q-btn>
         </div>
         <q-space />
 
-        <q-input
-          class="col-xs-12 col-sm-3 col-md-2"
-          standout
-          dense
-          v-model="filterKeyword"
-          ref="filterRef"
-          outlined
-          debounce="300"
-          placeholder="ค้นหา"
-        >
+        <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"
-            />
+            <q-icon v-if="filterKeyword !== ''" name="clear" class="cursor-pointer" @click="resetFilter" />
           </template>
         </q-input>
 
-        <q-select
-          v-model="visibleColumns"
-          multiple
-          outlined
-          dense
-          options-dense
-          :display-value="$q.lang.table.columns"
-          emit-value
-          map-options
-          :options="columns"
-          option-value="name"
-          options-cover
-          style="min-width: 150px"
-          class="col-xs-12 col-sm-3 col-md-2"
-        />
+        <q-select v-model="visibleColumns" multiple outlined dense options-dense :display-value="$q.lang.table.columns"
+          emit-value map-options :options="columns" option-value="name" options-cover style="min-width: 150px"
+          class="col-xs-12 col-sm-3 col-md-2" />
       </div>
       <div class="col-12 q-pt-sm">
-        <q-table
-          ref="table"
-          :columns="columns"
-          :rows="DataStore.rows"
-          :filter="filterKeyword"
-          row-key="name"
-          flat
-          bordered
-          :paging="true"
-          dense
-          class="custom-header-table"
-          :visible-columns="visibleColumns"
-          :pagination-label="paginationLabel"
-          v-model:pagination="pagination"
-        >
+        <q-table ref="table" :columns="columns" :rows="DataStore.rows" :filter="filterKeyword" row-key="name" flat
+          bordered :paging="true" dense class="custom-header-table" :visible-columns="visibleColumns"
+          :pagination-label="paginationLabel" v-model:pagination="pagination">
           <template v-slot:header="props">
             <q-tr :props="props">
               <q-th v-for="col in props.cols" :key="col.name" :props="props">
                 <span class="text-weight-medium">{{ col.label }}</span>
               </q-th>
               <q-th></q-th>
-              <q-th
-                auto-width
-                v-if="
-                  (DataStore.isLock == false &&
-                    DataStore.requestStatus == 'st5') ||
-                  checkStatus == true
-                "
-              />
+              <q-th auto-width v-if="(DataStore.isLock == false &&
+                  DataStore.requestStatus == 'st5') ||
+                checkStatus == true
+                " />
               <q-th v-else></q-th>
             </q-tr>
           </template>
           <template v-slot:body="props">
-            <q-tr
-              :props="props"
-              class="cursor-pointer"
-              @click.stop="nextPage(props.row.profileId)"
-            >
+            <q-tr :props="props" class="cursor-pointer" @click.stop="nextPage(props.row.profileId)">
               <q-td key="no" :props="props">
                 {{ props.rowIndex + 1 }}
               </q-td>
@@ -942,112 +823,50 @@ const clearInsigniaFilters = (name: string) => {
                 {{ props.row.dateSend }}
               </q-td>
               <q-td key="note" class="text-center">
-                <q-btn
-                  v-if="props.row.reason"
-                  icon="mdi-information-outline"
-                  size="12px"
-                  color="blue"
-                  flat
-                  round
-                  dense
-                  @click.stop="clickShowreson(props.row.name, props.row.reason)"
-                >
+                <q-btn v-if="props.row.reason" icon="mdi-information-outline" size="12px" color="blue" flat round dense
+                  @click.stop="clickShowreson(props.row.name, props.row.reason)">
                   <q-tooltip>หมายเหตุ</q-tooltip>
                 </q-btn>
               </q-td>
               <q-td key="warn" class="text-center" v-if="props.row.statusMark">
-                <q-btn
-                  icon="mdi-information-outline"
-                  size="12px"
-                  color="red"
-                  flat
-                  round
-                  dense
-                  @click.stop="
-                    clickShowWarn(
-                      props.row.markDiscipline,
-                      props.row.markLeave,
-                      props.row.markRate
-                    )
-                  "
-                >
-                  <q-tooltip>แจ้งเตือน</q-tooltip></q-btn
-                >
+                <q-btn icon="mdi-information-outline" size="12px" color="red" flat round dense @click.stop="
+                  clickShowWarn(
+                    props.row.markDiscipline,
+                    props.row.markLeave,
+                    props.row.markRate
+                  )
+                  ">
+                  <q-tooltip>แจ้งเตือน</q-tooltip></q-btn>
               </q-td>
               <q-td v-else auto-width></q-td>
 
-              <q-td
-                v-close-popup
-                auto-width
-                v-if="
-                  (DataStore.isLock == false &&
-                    DataStore.requestStatus == 'st5' &&
-                    roleDataStore.adminRole) ||
-                  checkStatus == true
-                "
-              >
-                <q-btn
-                  v-if="
-                    roleDataStore.adminRole ||
-                    (roleDataStore.insignia1Role &&
-                      (requestStatus == 'st1' || requestStatus == 'st4'))
-                  "
-                  icon="mdi-dots-vertical"
-                  size="12px"
-                  color="grey-7"
-                  flat
-                  round
-                  dense
-                  @click.stop
-                >
+              <q-td v-close-popup auto-width v-if="(DataStore.isLock == false &&
+                  DataStore.requestStatus == 'st5' &&
+                  roleDataStore.adminRole) ||
+                checkStatus == true
+                ">
+                <q-btn v-if="roleDataStore.adminRole ||
+                  (roleDataStore.insignia1Role &&
+                    (requestStatus == 'st1' || requestStatus == 'st4'))
+                  " icon="mdi-dots-vertical" size="12px" color="grey-7" flat round dense @click.stop>
                   <q-menu transition-show="jump-down" transition-hide="jump-up">
                     <q-list dense style="min-width: 250px">
-                      <q-item
-                        clickable
-                        @click.stop="clickmodalEdit(props.row)"
-                        v-close-popup
-                      >
-                        <q-item-section
-                          style="min-width: 0px"
-                          avatar
-                          class="q-py-sm"
-                        >
+                      <q-item clickable @click.stop="clickmodalEdit(props.row)" v-close-popup>
+                        <q-item-section style="min-width: 0px" avatar class="q-py-sm">
                           <q-tooltip>แก้ไขเครื่องราชฯ ที่ยื่นขอ</q-tooltip>
                           <q-icon color="primary" size="xs" name="mdi-pencil" />
                         </q-item-section>
-                        <q-item-section
-                          >แก้ไขเครื่องราชฯ ที่ยื่นขอ</q-item-section
-                        >
+                        <q-item-section>แก้ไขเครื่องราชฯ ที่ยื่นขอ</q-item-section>
                       </q-item>
-                      <q-item
-                        clickable
-                        @click.stop="clickReject(props.row.id)"
-                        v-close-popup
-                      >
-                        <q-item-section
-                          style="min-width: 0px"
-                          avatar
-                          class="q-py-sm"
-                        >
+                      <q-item clickable @click.stop="clickReject(props.row.id)" v-close-popup>
+                        <q-item-section style="min-width: 0px" avatar class="q-py-sm">
                           <q-tooltip>ไม่ยื่นขอ</q-tooltip>
-                          <q-icon
-                            color="blue"
-                            size="xs"
-                            name="mdi-alert-circle-outline"
-                          />
+                          <q-icon color="blue" size="xs" name="mdi-alert-circle-outline" />
                         </q-item-section>
                         <q-item-section>ไม่ยื่นขอ</q-item-section>
                       </q-item>
-                      <q-item
-                        clickable
-                        @click.stop="clickDelete(props.row.id)"
-                        v-close-popup
-                      >
-                        <q-item-section
-                          style="min-width: 0px"
-                          avatar
-                          class="q-py-sm"
-                        >
+                      <q-item clickable @click.stop="clickDelete(props.row.id)" v-close-popup>
+                        <q-item-section style="min-width: 0px" avatar class="q-py-sm">
                           <q-tooltip>ลบออก</q-tooltip>
                           <q-icon color="red" size="xs" name="mdi-delete" />
                         </q-item-section>
@@ -1058,30 +877,16 @@ const clearInsigniaFilters = (name: string) => {
                 </q-btn>
               </q-td>
               <q-td v-else auto-width></q-td>
-              <q-td
-                auto-width
-                v-if="props.row.insigniaSend == 'เหรียญจักรพรรดิมาลา'"
-              >
-                <btnDownloadFile
-                  :profileId="props.row.profileId"
-                  :round="DataStore.roundId"
-                  :optionRound="DataStore.optionRound"
-                />
+              <q-td auto-width v-if="props.row.insigniaSend == 'เหรียญจักรพรรดิมาลา'">
+                <btnDownloadFile :profileId="props.row.profileId" :round="DataStore.roundId"
+                  :optionRound="DataStore.optionRound" />
               </q-td>
               <q-td v-else auto-width></q-td>
             </q-tr>
           </template>
           <template v-slot:pagination="scope">
-            <q-pagination
-              v-model="pagination.page"
-              active-color="primary"
-              color="primary"
-              :max="scope.pagesNumber"
-              :max-pages="5"
-              size="sm"
-              boundary-links
-              direction-links
-            ></q-pagination>
+            <q-pagination v-model="pagination.page" active-color="primary" color="primary" :max="scope.pagesNumber"
+              :max-pages="5" size="sm" boundary-links direction-links></q-pagination>
           </template>
         </q-table>
       </div>
@@ -1093,14 +898,8 @@ const clearInsigniaFilters = (name: string) => {
       <q-toolbar class="q-py-md">
         <q-toolbar-title class="text-h6">เพิ่มรายชื่อ </q-toolbar-title>
 
-        <q-btn
-          icon="close"
-          unelevated
-          round
-          dense
-          @click="modalAdd = false"
-          style="color: #ff8080; background-color: #ffdede"
-        />
+        <q-btn icon="close" unelevated round dense @click="modalAdd = false"
+          style="color: #ff8080; background-color: #ffdede" />
       </q-toolbar>
       <q-separator />
       <q-card-section class="q-pa-sm bg-grey-1">
@@ -1109,49 +908,24 @@ const clearInsigniaFilters = (name: string) => {
             <q-card flat bordered class="fit q-pa-sm">
               <q-toolbar style="padding: 0">
                 <q-space />
-                <q-input
-                  borderless
-                  outlined
-                  dense
-                  debounce="300"
-                  placeholder="ค้นหา"
-                  v-model="filterKeyword2"
-                >
+                <q-input borderless outlined dense debounce="300" placeholder="ค้นหา" v-model="filterKeyword2">
                   <template v-slot:append>
                     <q-icon name="search" />
                   </template>
                 </q-input>
               </q-toolbar>
-              <q-table
-                flat
-                bordered
-                dense
-                :rows="rows2"
-                :columns="columns2"
-                :filter="filterKeyword2"
-                row-key="fullname"
-                class="custom-header-table"
-                :pagination-label="paginationLabel2"
-                v-model:pagination="pagination2"
-              >
+              <q-table flat bordered dense :rows="rows2" :columns="columns2" :filter="filterKeyword2" row-key="fullname"
+                class="custom-header-table" :pagination-label="paginationLabel2" v-model:pagination="pagination2">
                 <template v-slot:header="props">
                   <q-tr :props="props">
-                    <q-th
-                      v-for="col in props.cols"
-                      :key="col.name"
-                      :props="props"
-                    >
+                    <q-th v-for="col in props.cols" :key="col.name" :props="props">
                       <span class="text-weight-medium">{{ col.label }}</span>
                     </q-th>
                   </q-tr>
                 </template>
                 <template v-slot:body="props">
-                  <q-tr
-                    :props="props"
-                    class="cursor-pointer"
-                    :class="{ 'text-primary': props.row.id === dataPerson.id }"
-                    @click="selectPerson(props.row)"
-                  >
+                  <q-tr :props="props" class="cursor-pointer" :class="{ 'text-primary': props.row.id === dataPerson.id }"
+                    @click="selectPerson(props.row)">
                     <q-td style="width: 75px">{{ props.rowIndex + 1 }}</q-td>
                     <q-td style="width: 250px" key="citizenId" :props="props">
                       {{ props.row.citizenId }}
@@ -1162,15 +936,8 @@ const clearInsigniaFilters = (name: string) => {
                   </q-tr>
                 </template>
                 <template v-slot:pagination="scope">
-                  <q-pagination
-                    v-model="pagination2.page"
-                    color="primary"
-                    :max="scope.pagesNumber"
-                    :max-pages="5"
-                    size="sm"
-                    boundary-links
-                    direction-links
-                  ></q-pagination>
+                  <q-pagination v-model="pagination2.page" color="primary" :max="scope.pagesNumber" :max-pages="5"
+                    size="sm" boundary-links direction-links></q-pagination>
                 </template>
               </q-table>
             </q-card>
@@ -1181,71 +948,28 @@ const clearInsigniaFilters = (name: string) => {
                 <div class="q-pa-md">
                   <div class="row q-gutter-sm">
                     <div class="col-12">
-                      <q-input
-                        borderless
-                        outlined
-                        dense
-                        label="ตำแหน่งในสายงาน"
-                        placeholder="ตำแหน่งในสายงาน"
-                        v-model="dataPerson.position"
-                        readonly
-                      />
+                      <q-input borderless outlined dense label="ตำแหน่งในสายงาน" placeholder="ตำแหน่งในสายงาน"
+                        v-model="dataPerson.position" readonly />
                     </div>
                     <div class="col-12">
-                      <q-input
-                        borderless
-                        outlined
-                        dense
-                        label="สังกัด"
-                        placeholder="สังกัด"
-                        v-model="dataPerson.organizationOrganization"
-                        readonly
-                      />
+                      <q-input borderless outlined dense label="สังกัด" placeholder="สังกัด"
+                        v-model="dataPerson.organizationOrganization" readonly />
                     </div>
                     <div class="col-12">
-                      <q-input
-                        borderless
-                        outlined
-                        dense
-                        label="ระดับ"
-                        placeholder="ระดับ "
-                        v-model="dataPerson.level"
-                        readonly
-                      />
+                      <q-input borderless outlined dense label="ระดับ" placeholder="ระดับ " v-model="dataPerson.level"
+                        readonly />
                     </div>
                     <div class="col-12">
-                      <q-select
-                        v-model="insigniaType"
-                        label="ประเภทเครื่องราชฯ"
-                        dense
-                        emit-value
-                        map-options
-                        :options="insigniaOptions"
-                        option-value="id"
-                        option-label="name"
-                        lazy-rules
-                        hide-bottom-space
-                        :readonly="false"
-                        :borderless="false"
-                        :outlined="true"
-                        :hide-dropdown-icon="false"
-                        :rules="[
+                      <q-select v-model="insigniaType" label="ประเภทเครื่องราชฯ" dense emit-value map-options
+                        :options="insigniaOptions" option-value="id" option-label="name" lazy-rules hide-bottom-space
+                        :readonly="false" :borderless="false" :outlined="true" :hide-dropdown-icon="false" :rules="[
                           (val) => !!val || `กรุณาเลือกประเภทเครื่องราช`,
-                        ]"
-                      />
+                        ]" />
                     </div>
                     <div class="col-12">
-                      <q-input
-                        type="textarea"
-                        class="full-width inputgreen cursor-pointer"
-                        hide-bottom-space
-                        outlined
-                        dense
-                        lazy-rules
-                        :rules="[(val) => !!val || `กรุณากรอกหมายเหตุ`]"
-                        v-model="reason"
-                        :label="`หมายเหตุ`"
-                      />
+                      <q-input type="textarea" class="full-width inputgreen cursor-pointer" hide-bottom-space outlined
+                        dense lazy-rules :rules="[(val) => !!val || `กรุณากรอกหมายเหตุ`]" v-model="reason"
+                        :label="`หมายเหตุ`" />
                     </div>
                   </div>
                 </div>
@@ -1267,42 +991,18 @@ const clearInsigniaFilters = (name: string) => {
   <q-dialog v-model="modalEdit" persistent>
     <q-card style="width: 450px; max-width: 80vw">
       <q-form ref="myForm">
-        <DialogHeader
-          tittle="แก้ไขเครื่องราชฯ ที่ยื่นขอ"
-          :close="closeModalEdit"
-        />
+        <DialogHeader tittle="แก้ไขเครื่องราชฯ ที่ยื่นขอ" :close="closeModalEdit" />
         <q-separator />
         <q-card-section class="q-pa-sm bg-grey-1">
           <div class="row col-12 q-py-md">
-            <q-select
-              v-model="insignia"
-              label="ชื่อเครื่องราชฯ"
-              dense
-              emit-value
-              map-options
-              :options="insigniaOptions"
-              option-value="id"
-              option-label="name"
-              lazy-rules
-              hide-bottom-space
-              :readonly="false"
-              :borderless="false"
-              :outlined="true"
-              :hide-dropdown-icon="false"
-              style="width: 100%"
-            />
+            <q-select v-model="insignia" label="ชื่อเครื่องราชฯ" dense emit-value map-options :options="insigniaOptions"
+              option-value="id" option-label="name" lazy-rules hide-bottom-space :readonly="false" :borderless="false"
+              :outlined="true" :hide-dropdown-icon="false" style="width: 100%" />
           </div>
         </q-card-section>
         <q-separator />
         <q-card-actions align="right">
-          <q-btn
-            dense
-            unelevated
-            label="บันทึก"
-            color="public"
-            @click="clickSave"
-            class="q-px-md"
-          >
+          <q-btn dense unelevated label="บันทึก" color="public" @click="clickSave" class="q-px-md">
             <!-- icon="mdi-content-save-outline" -->
             <q-tooltip>บันทึก</q-tooltip>
           </q-btn>
@@ -1312,59 +1012,27 @@ const clearInsigniaFilters = (name: string) => {
   </q-dialog>
 
   <!-- popup เหตุผลไม่ยื่นขอ -->
-  <DialogPopupReason
-    :modal="modelPopupReject"
-    title="เหตุผลการไม่ยื่นขอ"
-    label="หมายเหตุ"
-    :click-close="closemodelPopupReject"
-    :savaForm="savaReasonReject"
-  />
+  <DialogPopupReason :modal="modelPopupReject" title="เหตุผลการไม่ยื่นขอ" label="หมายเหตุ"
+    :click-close="closemodelPopupReject" :savaForm="savaReasonReject" />
   <!--  เหตุผลที่ลบออก -->
-  <DialogPopupReason
-    :modal="modelPopupDelete"
-    title="เหตุผลการลบออก"
-    label="หมายเหตุ"
-    :click-close="closemodelPopupDelete"
-    :savaForm="savaReasonDelete"
-  />
+  <DialogPopupReason :modal="modelPopupDelete" title="เหตุผลการลบออก" label="หมายเหตุ"
+    :click-close="closemodelPopupDelete" :savaForm="savaReasonDelete" />
   <!--  หมายเหตุ -->
-  <DialogInformation
-    :modal="dialogNote"
-    :title="dialogTitle"
-    :desc="dialogDesc"
-    :click-close="clickCloseReson"
-  />
+  <DialogInformation :modal="dialogNote" :title="dialogTitle" :desc="dialogDesc" :click-close="clickCloseReson" />
   <!-- แจ้งเตือน -->
   <q-dialog v-model="dialogWarn">
     <q-card style="width: 800px; max-width: 80vw">
       <q-toolbar class="q-py-md">
         <q-toolbar-title class="text-h6">แจ้งเตือน </q-toolbar-title>
 
-        <q-btn
-          icon="close"
-          unelevated
-          round
-          dense
-          v-close-popup
-          style="color: #ff8080; background-color: #ffdede"
-        />
+        <q-btn icon="close" unelevated round dense v-close-popup style="color: #ff8080; background-color: #ffdede" />
       </q-toolbar>
       <q-separator />
       <div class="q-pa-md">
         <div class="q-gutter-sm">
-          <q-item
-            tag="label"
-            v-ripple
-            v-for="list in checkboxData"
-            :key="list.id"
-          >
+          <q-item tag="label" v-ripple v-for="list in checkboxData" :key="list.id">
             <q-item-section avatar>
-              <q-checkbox
-                v-model="list.val"
-                :val="`${list.id}`"
-                color="teal"
-                disable
-              />
+              <q-checkbox v-model="list.val" :val="`${list.id}`" color="teal" disable />
               <!-- <q-radio v-model="checkboxList" :val="list.id" color="teal" /> -->
             </q-item-section>
             <q-item-section>
diff --git a/src/modules/07_insignia/components/2_Manage/listManage.vue b/src/modules/07_insignia/components/2_Manage/listManage.vue
index 5e888eb7d..f4f14ec87 100644
--- a/src/modules/07_insignia/components/2_Manage/listManage.vue
+++ b/src/modules/07_insignia/components/2_Manage/listManage.vue
@@ -40,6 +40,7 @@ const modalPopupBackToEdit = ref<boolean>(false); //model แก้ไข
 onMounted(async () => {
   tab.value = DataStore.mainTab;
   await fecthlistRound();
+  DataStore.dataInsigniaType.length === 0 && (await fecthInsignia());
 });
 
 //เรียกรอบการเสนอขอพระราชทานเครื่อง
@@ -123,6 +124,18 @@ const fecthType = async () => {
       messageError($q, err);
     });
 };
+// เรียกประเภทเครื่องราช
+const fecthInsignia = async () => {
+  await http
+    .get(config.API.insignia)
+    .then((res) => {
+      let data = res.data.result;
+      DataStore.fetchInsigniaType(data);
+    })
+    .catch((err) => {
+      messageError($q, err);
+    });
+};
 
 //เลือกรอบการแสดง
 const changround = async () => {
@@ -436,7 +449,7 @@ const uploadFile = async (event: any) => {
 
   <q-card flat bordered class="col-12 q-mt-sm" v-if="loading">
     <div
-      v-if="roleDataStore.insignia1Role && requestStatus == 'st4'"
+      v-if="(roleDataStore.insignia1Role && requestStatus == 'st4') || (roleDataStore.insignia2Role && requestStatus == 'st5')"
       class="q-pa-md q-gutter-sm"
     >
       <q-banner
@@ -568,7 +581,7 @@ const uploadFile = async (event: any) => {
         @click="sendToDirector"
       />
       <q-btn
-        v-if="roleDataStore.insignia2Role && requestStatus == 'st3'"
+        v-if="roleDataStore.insignia2Role && (requestStatus == 'st3' || requestStatus == 'st5')"
         dense
         unelevated
         label="ตีกลับ"
diff --git a/src/modules/07_insignia/components/3_result/DialogForm.vue b/src/modules/07_insignia/components/3_result/DialogForm.vue
index 7270f401e..2555ecbc8 100644
--- a/src/modules/07_insignia/components/3_result/DialogForm.vue
+++ b/src/modules/07_insignia/components/3_result/DialogForm.vue
@@ -40,7 +40,7 @@ const affiliationReceived = ref<string>("");
 const receivedate = ref<Date | null>();
 const announceDate = ref<Date | null>();
 const invoiceDate = ref<Date | null>(null);
-
+const filterinsigniaOp2 = ref<any>(DataStore.insigniaOp2)
 const employeeClass = ref<string>("");
 const employeeClassOps = ref<DataOption[]>([
   { id: "officer", name: "ข้าราชการ กทม.สามัญ" },
@@ -276,6 +276,19 @@ const searchcardid = () => {
     } else notifyError($q, "ไม่พบข้อมูลเลขบัตรประชาชนนี้");
   }
 };
+const filterSelector = (val: any, update: Function, name: any) => {
+  update(() => {
+    const needle = val.toLowerCase();
+    if (name === 'insigniaOp2') {
+      brand.value = ''
+      filterinsigniaOp2.value = DataStore.insigniaOp2.filter(
+          (v: any) => v.name.toLowerCase().indexOf(needle) > -1
+        );
+    }
+
+    }
+  )
+}
 </script>
 
 <template>
@@ -398,14 +411,17 @@ const searchcardid = () => {
                 emit-value
                 map-options
                 option-label="name"
-                :options="DataStore.insigniaOp2"
+                :options="filterinsigniaOp2"
                 option-value="id"
                 :readonly="false"
+                use-input
                 :borderless="false"
                 style="min-width: 150px"
                 :rules="[
                   (val) => !!val || 'กรุณากรอกชื่อชั้นตราเครื่องราชอิสริยาภรณ์',
                 ]"
+                @filter="(inputValue:any,doneFn:Function) => 
+                filterSelector(inputValue, doneFn,'insigniaOp2') "
               />
             </div>
             <div class="col-xs-12 col-sm-6">
diff --git a/src/modules/07_insignia/components/3_result/Dialogbody.vue b/src/modules/07_insignia/components/3_result/Dialogbody.vue
index 201f817be..e2ac73af1 100644
--- a/src/modules/07_insignia/components/3_result/Dialogbody.vue
+++ b/src/modules/07_insignia/components/3_result/Dialogbody.vue
@@ -124,18 +124,21 @@ onMounted(()=>{
   <q-dialog v-model="props.modal" persistent>
     <q-card style="min-width: 900px">
       <q-toolbar>
-        <q-toolbar-title v-if="props.fileCheck === null" class="text-subtitle2 text-bold">รับเครื่องราชฯ</q-toolbar-title>
-        <q-toolbar-title v-else class="text-subtitle2 text-bold">คืนเครื่องราชฯ</q-toolbar-title>
+        <q-toolbar-title  class="text-subtitle2 text-bold">รับ-คืนเครื่องราชฯ</q-toolbar-title>
         <q-btn icon="close" unelevated round dense @click="close" style="color: #ff8080; background-color: #ffdede" />
       </q-toolbar>
       <q-separator />
 
       <q-form ref="myForm">
         <div class="q-pa-md bg-grey-1">
-          <div v-if="props.fileCheck === null" class="row col-12 q-col-gutter-x-xs q-col-gutter-y-xs">
+          <div  class="row col-12 q-col-gutter-x-xs q-col-gutter-y-xs">
+            <div class="col-12 text-weight-bold text-grey-7">
+                รับเครื่องราชฯ
+              </div>
               <div class="col-xs-12 col-sm-4">
+                
                 <datepicker menu-class-name="modalfix" v-model="Datereceive" :locale="'th'" autoApply borderless
-                  :enableTimePicker="false" week-start="0">
+                  :enableTimePicker="false" week-start="0" :readonly="fileCheck !== null">
                   <template #year="{ year }">
                     {{ year + 543 }}
                   </template>
@@ -145,7 +148,7 @@ onMounted(()=>{
                   <template #trigger>
                     <q-input dense borderless outlined lazy-rules :rules="[(val) => !!val || 'กรุณาเลือกวันที่ได้รับ']"
                       hide-bottom-space :model-value="Datereceive != null ? date2Thai(Datereceive) : undefined
-                        " :label="`${'วันที่ได้รับ'}`" clearable @clear="clearReceiveDate">
+                        " :label="`${'วันที่ได้รับ'}`" clearable @clear="clearReceiveDate" :disable="fileCheck !== null">
                       <template v-slot:prepend>
                         <q-icon name="event" class="cursor-pointer" color="primary">
                         </q-icon>
@@ -158,7 +161,7 @@ onMounted(()=>{
               <div class="col-xs-12 col-sm-4">
 
                 <q-file outlined dense v-model="files" label="ไฟล์หลักฐานการรับ" lazy-rules
-                  :rules="[(val) => val || 'กรุณาเลือกไฟล์หลักฐานการรับ']" hide-bottom-space>
+                  :rules="[(val) => val || 'กรุณาเลือกไฟล์หลักฐานการรับ']" hide-bottom-space :disable="fileCheck !== null">
                   <template v-slot:prepend>
                     <q-icon name="attach_file" color="primary" />
                   </template>
@@ -167,10 +170,15 @@ onMounted(()=>{
               <div class="col-xs-12 col-sm-4">
                 <q-select  hide-bottom-space :options="OrgList" dense borderless option-label="name" option-value="id"
                   emit-value map-options outlined v-model="OrganazationId" lazy-rules :label="`หน่วยงานที่รับ`"
-                  :rules="[(val) => !!val || 'กรุณาเลือกหน่วยงานที่รับ']" />
+                  :rules="[(val) => !!val || 'กรุณาเลือกหน่วยงานที่รับ']" :disable="fileCheck !== null"/>
               </div>
             </div>
-            <div v-if="props.fileCheck !== null" class="row col-12 q-col-gutter-x-xs q-col-gutter-y-xs">
+            <div class="col-12 q-my-sm">            <q-separator/></div>
+
+            <div  class="row col-12 q-col-gutter-x-xs q-col-gutter-y-xs">
+              <div class="col-12 text-weight-bold text-grey-7">
+                คืนเครื่องราชฯ
+              </div>
               <div class="col-xs-12 col-sm-4">
                 
                 <datepicker menu-class-name="modalfix" v-model="Datereturn" :locale="'th'" autoApply borderless
diff --git a/src/modules/07_insignia/components/4_Allocate/DialogForm.vue b/src/modules/07_insignia/components/4_Allocate/DialogForm.vue
index 52342e6a8..0d0c23346 100644
--- a/src/modules/07_insignia/components/4_Allocate/DialogForm.vue
+++ b/src/modules/07_insignia/components/4_Allocate/DialogForm.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, watch } from "vue";
+import { ref, watch,onMounted } from "vue";
 import { QForm, useQuasar } from "quasar";
 import { useCounterMixin } from "@/stores/mixin";
 import DialogHeader from "@/components/DialogHeader.vue";
@@ -14,6 +14,7 @@ const routeName = router.currentRoute.value.name;
 const amount = ref<number | null>();
 const Org = ref<string | null>("");
 const grandCross = ref<string | null>("");
+const filterInsigniaOp = ref<any>()
 const closeModal = () => {
   props.close();
 };
@@ -41,7 +42,22 @@ watch(props, () => {
     amount.value = null;
   }
 });
+watch(() => props.insigniaList, (newVal) => {
+      filterInsigniaOp.value = newVal;
+    });
+    const filterSelector = (val: any, update: Function, name: any) => {
+  update(() => {
+    const needle = val.toLowerCase();
+    if (name === 'filterInsigniaOp') {
+      grandCross.value = null
+      filterInsigniaOp.value = props.insigniaList.filter(
+          (v: any) => v.name.toLowerCase().indexOf(needle) > -1
+        );
+    }
 
+    }
+  )
+}
 const clickSave = () => {
   if (myForm.value !== null) {
     myForm.value.validate().then(async (success) => {
@@ -67,12 +83,14 @@ const clickSave = () => {
             <div class="col-6">
               <q-select
                 hide-bottom-space
-                :options="insigniaList"
+                :options="filterInsigniaOp"
                 dense
                 borderless
+                use-input
+                lazy-rules
                 option-label="name"
                 option-value="id"
-                emit-value
+                emit-valuez
                 map-options
                 outlined
                 options-cover
@@ -83,6 +101,8 @@ const clickSave = () => {
                     ? `เครื่องราชฯ`
                     : `เลือกหน่วยงาน`
                 "
+                @filter="(inputValue:any,doneFn:Function) => 
+                filterSelector(inputValue, doneFn,'filterInsigniaOp') "
               />
             </div>
             <div class="col-xs-12 col-sm-6">
diff --git a/src/modules/07_insignia/components/4_Allocate/Main.vue b/src/modules/07_insignia/components/4_Allocate/Main.vue
index 2bcce1acc..5f59ec1da 100644
--- a/src/modules/07_insignia/components/4_Allocate/Main.vue
+++ b/src/modules/07_insignia/components/4_Allocate/Main.vue
@@ -176,7 +176,7 @@ watch(tab, () => {
   if (!a) {
     DataStore.insignia = "";
   }
-  filterInsigniaOp.value = insigniaOp.value
+   filterInsigniaOp.value = insigniaOp.value
   fecthlistInsignia();
 });
 
diff --git a/src/modules/07_insignia/components/5_Borrow/DialogForm.vue b/src/modules/07_insignia/components/5_Borrow/DialogForm.vue
index 0e27b7b63..93d667871 100644
--- a/src/modules/07_insignia/components/5_Borrow/DialogForm.vue
+++ b/src/modules/07_insignia/components/5_Borrow/DialogForm.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, watch } from "vue";
+import { ref, watch,onMounted } from "vue";
 import { QForm, useQuasar } from "quasar";
 import { useCounterMixin } from "@/stores/mixin";
 import http from "@/plugins/http";
@@ -30,8 +30,10 @@ const returndate = ref<Date | null>();
 const reason = ref<string>("");
 const listPerson = ref<any>([]);
 const OrgList = ref<DataOption[]>([]);
+const filterOrgList = ref<any>([]);
 const insigniaNoteProfileId = ref<string>("");
-
+const filterSelectRound = ref<any>()
+const selectRound = ref<any>()
 // เคลียร์ข้อมูลในฟอร์ม
 const clearData = () => {
   receivedate.value = null;
@@ -68,7 +70,10 @@ const props = defineProps({
     type: String,
   },
   selectRoundOption: {
-    type: Array,
+    type: Array, 
+  },
+  filterSelectRoundOption: {
+    type: Array, 
   },
   profileId: {
     type: String,
@@ -92,7 +97,8 @@ watch(props, () => {
 
 // ดึงข้อมูลรายการเครื่องราช
 const fecthlistInsignia = async () => {
-  showLoader();
+  if(roundNo.value !== ''&& roundNo.value !== null){
+    showLoader();
   let data = {
     insigniaTypeId: props.typeId,
     insigniaNoteId: roundNo.value,
@@ -115,6 +121,8 @@ const fecthlistInsignia = async () => {
       hideLoader();
     });
 };
+  }
+ 
 
 // ดึงข้อมูลรายการหน่วยงาน
 const fetchOrgList = async () => {
@@ -136,6 +144,7 @@ const fetchOrgList = async () => {
       //   ];
       // } else {
       OrgList.value = orgArr;
+      filterOrgList.value = OrgList.value
       // }
     })
     .catch((err) => {
@@ -240,6 +249,31 @@ const clearReceiveDate = () => {
 const clearReturnDate = () => {
   returndate.value = null;
 };
+const filterSelector = (val: any, update: Function, name: any) => {
+  update(() => {
+    const needle = val.toLowerCase();
+    if (name === 'filterOrgList') {
+      OrganazationId.value = ''
+      filterOrgList.value = OrgList.value.filter(
+          (v: any) => v.name.toLowerCase().indexOf(needle) > -1
+        );
+    }
+    if (name === 'filterSelectRoundOption') {
+      roundNo.value = ''
+      filterSelectRound.value = selectRound.value.filter(
+          (v: any) => v.name.toLowerCase().indexOf(needle) > -1
+        );
+    }
+    }
+  )
+}
+const setValue = () => {
+  filterSelectRound.value = props.filterSelectRoundOption
+  selectRound.value = props.selectRoundOption
+}
+onMounted(() => {
+      setValue();
+    });
 </script>
 
 <template>
@@ -267,14 +301,18 @@ const clearReturnDate = () => {
                   :label="`${'รอบการขอเครื่องราชฯ'}`"
                   emit-value
                   map-options
+                  use-input
                   option-label="name"
-                  :options="selectRoundOption"
+                  :options="filterSelectRound"
                   option-value="id"
                   :readonly="false"
                   :borderless="false"
                   style="min-width: 150px"
                   :rules="[(val) => !!val || 'กรุณาเลือกรอบการขอเครื่องราชฯ']"
                   @update:model-value="fecthlistInsignia()"
+                  @filter="(inputValue:any,
+                      doneFn:Function) => filterSelector(inputValue, doneFn,'filterSelectRoundOption'
+                      ) "
                 />
               </div>
               <div class="col-12 q-mt-md text-weight-bold text-grey-7">
@@ -382,18 +420,22 @@ const clearReturnDate = () => {
               <div class="col-xs-12 col-sm-6">
                 <q-select
                   hide-bottom-space
-                  :options="OrgList"
+                  :options="filterOrgList"
                   dense
                   borderless
                   option-label="name"
                   option-value="id"
                   emit-value
+                  use-input
                   map-options
                   outlined
                   v-model="OrganazationId"
                   lazy-rules
                   :label="`เลือกหน่วยงาน`"
                   :rules="[(val) => !!val || 'กรุณาเลือกหน่วยงาน']"
+                  @filter="(inputValue:any,
+                      doneFn:Function) => filterSelector(inputValue, doneFn,'filterOrgList'
+                      ) "
                 />
               </div>
             </div>
@@ -452,7 +494,7 @@ const clearReturnDate = () => {
               <div class="col-xs-12 col-sm-6">
                 <q-select
                   hide-bottom-space
-                  :options="OrgList"
+                  :options="filterOrgList"
                   dense
                   lazy-rules
                   borderless
@@ -461,9 +503,13 @@ const clearReturnDate = () => {
                   emit-value
                   map-options
                   outlined
+                  use-input
                   v-model="OrganazationId"
                   :label="`เลือกหน่วยงานที่ส่งคืน`"
                   :rules="[(val) => !!val || 'กรุณาเลือกหน่วยงานที่คืน']"
+                  @filter="(inputValue:any,
+                      doneFn:Function) => filterSelector(inputValue, doneFn,'filterOrgList'
+                      ) "
                 />
               </div>
 
diff --git a/src/modules/07_insignia/components/5_Borrow/Main.vue b/src/modules/07_insignia/components/5_Borrow/Main.vue
index bc3365e52..bea7ee40f 100644
--- a/src/modules/07_insignia/components/5_Borrow/Main.vue
+++ b/src/modules/07_insignia/components/5_Borrow/Main.vue
@@ -19,15 +19,18 @@ const tab = ref<string>("");
 
 const selectRound = ref<string>();
 const selectRoundOption = ref<OptionDataYear[]>([]);
+const filterSelectRoundOption = ref<any>([]);
 const selectRoundAllOption = ref<OptionDataYear[]>([]);
+const filterSelectRoundAllOption = ref<OptionDataYear[]>([]);
 
 const modal = ref<boolean>(false);
 const action = ref<string>("");
 const profileId = ref<string>("");
 const roundYear = ref<any>();
 const insigniaList = ref<any>([]);
+const fileterInsigniaList = ref<any>([]);
 const loadView = ref<boolean>(false);
-
+const employeeClassOps = ref<any>(DataStore.employeeClassOps)
 onMounted(async () => {
   await fecthRound();
 });
@@ -58,8 +61,10 @@ const fecthRound = async () => {
             year: e.year,
           });
         });
-
+        filterSelectRoundAllOption.value = selectRoundAllOption.value
         selectRound.value = data[0].id;
+        filterSelectRoundOption.value = selectRoundOption.value
+        console.log(filterSelectRoundOption.value)
         yearRound.value = data[0].year;
         roundYear.value = data[0].year;
         if (roundYear.value) {
@@ -326,6 +331,7 @@ watch(tab, async () => {
     (x: any) => x.type == tab.value || x.type == ""
   );
   DataStore.insignia = "";
+  fileterInsigniaList.value = insigniaList.value
   fecthlistInsignia();
 });
 
@@ -392,6 +398,44 @@ const paginationLabel = (start: number, end: number, total: number) => {
   if (paging.value == true) return " " + start + "-" + end + " ใน " + total;
   else return start + "-" + end + " ใน " + total;
 };
+const filterSelector = (val: any, update: Function, name: any) => {
+  update(() => {
+    const needle = val.toLowerCase();
+    if (name === 'employeeClassOps') {
+      DataStore.employeeClass = ''
+        employeeClassOps.value = DataStore.employeeClassOps.filter(
+          (v: any) => v.name.toLowerCase().indexOf(needle) > -1
+        );
+    }
+    else if (name === 'fileterInsigniaList') {
+      DataStore.insignia = null as any
+      fileterInsigniaList.value = insigniaList.value.filter(
+          (v: any) => v.name.toLowerCase().indexOf(needle) > -1
+        );
+    }
+    else if (name === 'filterSelectRoundAllOption') {
+      yearRound.value = null as any
+      filterSelectRoundAllOption.value = selectRoundAllOption.value.filter(
+          (v: any) => v.name.toLowerCase().indexOf(needle) > -1
+        );
+    }
+    }
+  )
+}
+
+const clearInsigniaFilters = (name: string) => {
+  if (name === "employeeClassOps") {
+    DataStore.employeeClass = "all";
+    employeeClassOps.value = DataStore.employeeClassOps;
+  }
+  else if (name === "fileterInsigniaList") {
+    DataStore.insignia = "";
+    fileterInsigniaList.value = insigniaList.value;
+  }
+  //  else if (name === 'employeeClassOps') {
+
+  // }
+};
 </script>
 
 <template>
@@ -426,7 +470,7 @@ const paginationLabel = (start: number, end: number, total: number) => {
       >
         <div class="q-pa-md">
           <div class="row col-12 q-pb-sm q-col-gutter-x-xs">
-            <div>
+
               <q-select
                 v-model="yearRound"
                 dense
@@ -436,26 +480,30 @@ const paginationLabel = (start: number, end: number, total: number) => {
                 :label="`${'รอบการเสนอขอเครื่องราชฯ'}`"
                 emit-value
                 map-options
+                use-input
                 option-label="name"
-                :options="selectRoundAllOption"
+                :options="filterSelectRoundAllOption"
                 option-value="year"
                 :borderless="false"
                 style="min-width: 150px"
                 @update:model-value="selectorRound"
+                @filter="(inputValue:any,
+                      doneFn:Function) => filterSelector(inputValue, doneFn,'filterSelectRoundAllOption'
+                      ) "
               />
-            </div>
             <div>
               <q-select
                 v-model="DataStore.insignia"
                 dense
                 outlined
+                use-input
                 lazy-rules
                 hide-bottom-space
                 :label="`${'เครื่องราชฯ'}`"
                 emit-value
                 map-options
                 option-label="name"
-                :options="insigniaList"
+                :options="fileterInsigniaList"
                 option-value="id"
                 :readonly="false"
                 :borderless="false"
@@ -466,31 +514,68 @@ const paginationLabel = (start: number, end: number, total: number) => {
                     DataStore.employeeClass
                   )
                 "
-              />
+          @filter="(inputValue:any,
+                      doneFn:Function) => filterSelector(inputValue, doneFn,'fileterInsigniaList'
+                      ) "
+        >
+          <template v-if="DataStore.insignia !== ''" v-slot:append>
+            <q-icon
+              name="cancel"
+              @click.stop.prevent="
+                clearInsigniaFilters('fileterInsigniaList'),
+                  DataStore.searchDatatable(
+                    DataStore.insignia,
+                    DataStore.employeeClass
+                  )
+              "
+              class="cursor-pointer"
+            />
+          </template>
+        </q-select>
             </div>
             <div>
+
               <q-select
-                v-model="DataStore.employeeClass"
-                dense
-                outlined
-                lazy-rules
-                hide-bottom-space
-                :label="`${'สถานภาพ'}`"
-                emit-value
-                map-options
-                option-label="name"
-                :options="DataStore.employeeClassOps"
-                option-value="id"
-                :readonly="false"
-                :borderless="false"
-                style="min-width: 150px"
-                @update:model-value="
-                  DataStore.searchDatatable(
-                    DataStore.insignia,
-                    DataStore.employeeClass
-                  )
+          class="col-2"
+            v-model="DataStore.employeeClass"
+            dense
+            outlined
+            lazy-rules
+            hide-bottom-space
+            :label="`${'สถานภาพ'}`"
+            emit-value
+            use-input
+            map-options
+            option-label="name"
+            :options="employeeClassOps"
+            option-value="id"
+            :readonly="false"
+            :borderless="false"
+            style="min-width: 150px"
+            @update:model-value="
+              DataStore.searchDatatable(
+                DataStore.insignia,
+                DataStore.employeeClass
+              )
+            "
+            @filter="(inputValue:any,
+                      doneFn:Function) => filterSelector(inputValue, doneFn,'employeeClassOps'
+                      ) "
+          >
+            <template v-if="DataStore.employeeClass !== 'all'" v-slot:append>
+              <q-icon
+                name="cancel"
+                @click.stop.prevent="
+                  clearInsigniaFilters('employeeClassOps'),
+                    DataStore.searchDatatable(
+                      DataStore.insignia,
+                      DataStore.employeeClass
+                    )
                 "
+                class="cursor-pointer"
               />
+            </template>
+          </q-select>
             </div>
 
             <div>
@@ -600,7 +685,8 @@ const paginationLabel = (start: number, end: number, total: number) => {
       :round-id="selectRound == '0' ? 'all' : selectRound"
       :action="action"
       :profile-id="profileId"
-      :select-round-option="selectRoundOption"
+      v-model:selectRoundOption="selectRoundOption"
+      v-model:filterSelectRoundOption="filterSelectRoundOption"
       :type-id="tab"
     />
   </q-card>
diff --git a/src/modules/07_insignia/components/report/Report_02.vue b/src/modules/07_insignia/components/report/Report_02.vue
index ade731d87..d9fa6f39e 100644
--- a/src/modules/07_insignia/components/report/Report_02.vue
+++ b/src/modules/07_insignia/components/report/Report_02.vue
@@ -40,6 +40,7 @@ onMounted(async () => {
 const splitterModel = ref(14);
 const selectList = ref<any>();
 const optionsList = ref<any>([{ id: 0, name: "เลือกกรอบการยื่นขอ" }]);
+const filterOtion = ref<any>([]);
 
 const nextPage = () => {
   if (page.value < numOfPages.value) {
@@ -65,6 +66,7 @@ const fecthlistRound = async () => {
         year: e.period_year,
         name: e.period_name,
       }));
+   filterOtion.value = optionsList.value
     })
     .catch((err) => {
       messageError($q, err);
@@ -130,6 +132,18 @@ const downloadReport = async (
       hideLoader();
     });
 };
+const filterSelector = (val: any, update: Function, name: any) => {
+  update(() => {
+    const needle = val.toLowerCase();
+    if (name === 'selectList') {
+      filterOtion.value = optionsList.value.filter(
+          (v: any) => v.name.toLowerCase().indexOf(needle) > -1
+        );
+    }
+
+    }
+  )
+}
 </script>
 
 <template>
@@ -152,19 +166,23 @@ const downloadReport = async (
         <q-toolbar style="padding: 0">
           <q-form ref="myForm" class="row items-center">
             <q-select
+              style="width: 400px;"
               class="q-pa-none"
               use-input
               fill-input
               hide-selected
               dense
+              lazy-rules
               outlined
               v-model="selectList"
-              :options="optionsList"
+              :options="filterOtion"
               label="เลือกรอบ"
               option-value="id"
               option-label="name"
               :rules="[(val) => !!val || 'กรุณาเลือกรอบ']"
               @update:model-value="updateSelect"
+              @filter="(inputValue:any,doneFn:Function) => 
+                filterSelector(inputValue, doneFn,'selectList') "
             />
           </q-form>
           <q-space />
diff --git a/src/modules/07_insignia/store.ts b/src/modules/07_insignia/store.ts
index 982c425ac..9f1dc5269 100644
--- a/src/modules/07_insignia/store.ts
+++ b/src/modules/07_insignia/store.ts
@@ -37,6 +37,7 @@ export const useInsigniaDataStore = defineStore("insignia", () => {
     { id: '44', title: 'บัญชีแสดงจำนวนชั้นตราเครื่องราชฯ' }
   ])
   const mainTab = ref<string | undefined>("pending");
+  const dataInsigniaType = ref<any>([])
   // เรียกราชชื่อการเสนอขอ
   const fetchData = async (data: any) => {
     if (data !== null) {
@@ -124,6 +125,10 @@ export const useInsigniaDataStore = defineStore("insignia", () => {
       rows.value = listinsignia.value;
     }
   };
+  // ประเภทเครื่องราช
+  function fetchInsigniaType(data: any) {
+    dataInsigniaType.value = data
+  }
 
   // ประเภทลูกจ้าง
   const profileType = (val: string) => {
@@ -167,11 +172,13 @@ export const useInsigniaDataStore = defineStore("insignia", () => {
     employeeClass,
     employeeClassOps,
     fetchDataInsignia,
+    fetchInsigniaType,
     isLock,
     requestId,
     roleUser,
     requestStatus,
     optionReport,
-    convertStatus
+    convertStatus,
+    dataInsigniaType,
   };
 });
diff --git a/src/modules/08_registryEmployee/components/DialogSendToCommand.vue b/src/modules/08_registryEmployee/components/DialogSendToCommand.vue
index 47d37e976..5dc935268 100644
--- a/src/modules/08_registryEmployee/components/DialogSendToCommand.vue
+++ b/src/modules/08_registryEmployee/components/DialogSendToCommand.vue
@@ -1,403 +1,476 @@
 <script setup lang="ts">
-import { ref, watch } from 'vue';
-import type { FormRegistryEmployee } from '../interface/request/Main';
-import { useQuasar, type QTableProps, QInput } from 'quasar';
-import { useCounterMixin } from '@/stores/mixin';
-import http from '@/plugins/http';
+import { ref, watch } from "vue";
+import type { FormRegistryEmployee } from "../interface/request/Main";
+import { useQuasar, type QTableProps, QInput } from "quasar";
+import { useCounterMixin } from "@/stores/mixin";
+import http from "@/plugins/http";
 import config from "@/app.config";
 
 import DialogHeader from "@/modules/04_registry/components/DialogHeader.vue";
 
 const mixin = useCounterMixin(); //เรียกฟังก์ชันกลาง
 const {
-    success,
-    messageError,
-    showLoader,
-    hideLoader,
-    dialogConfirm,
-    dialogMessageNotify,
+  success,
+  messageError,
+  showLoader,
+  hideLoader,
+  dialogConfirm,
+  dialogMessageNotify,
 } = mixin; //ฟังก์ชันกลางที่ใช้ในหน้านี้
 
 const $q = useQuasar();
 
 const props = defineProps({
-    modal: {
-        type: Boolean,
-        default: false,
+  modal: {
+    type: Boolean,
+    default: false,
+  },
+  rows: {
+    type: Object,
+    default: [],
+  },
+  fetchNewList: {
+    type: Function,
+    default: () => {
+      /* ฟังก์ชั่น get รายการข้อมูลในหน้าหลักใหม่ */
     },
-    rows: {
-        type: Object,
-        default: []
-    },
-    fetchNewList: {
-        type: Function,
-        default: () => { /* ฟังก์ชั่น get รายการข้อมูลในหน้าหลักใหม่ */ }
-    },
-    closeDialog: {
-        type: Function,
-        default: () => { /* ฟังก์ชั่นปิด dialog ส่งไปออกคำสั่ง */ }
+  },
+  closeDialog: {
+    type: Function,
+    default: () => {
+      /* ฟังก์ชั่นปิด dialog ส่งไปออกคำสั่ง */
     },
+  },
 });
 
 const filter = ref<string>("");
 const filterRef = ref<QInput>();
 // visible columns ตารางใน dialog ส่งไปออกคำสั่ง
 const visibleColumnsOrder = ref<string[]>([
-    "no",
-    "fullname",
-    "fullnameOld",
-    "oc",
-    "positionEmployeePosition",
-    "positionEmployeePositionSide",
-    "positionLine",
-    "govAge",
-    "positionEmployeeGroup",
-    "dateAppoint",
-    "refSalary",
-    "dateStart",
-    "createdAt",
-    "salaryDate",
-    "age",
-    "amount",
-    "statustext",
-    "leaveDateOrder",
-    "newAgency",
-    "currentAgency",
+  "no",
+  "fullname",
+  "fullnameOld",
+  "oc",
+  "positionEmployeePosition",
+  "positionEmployeePositionSide",
+  "positionLine",
+  "govAge",
+  "positionEmployeeGroup",
+  "dateAppoint",
+  "refSalary",
+  "dateStart",
+  "createdAt",
+  "salaryDate",
+  "age",
+  "amount",
+  "statustext",
+  "leaveDateOrder",
+  "newAgency",
+  "currentAgency",
 ]);
 
 // คอลัมน์ในตาราง
 const columnsOrder = ref<QTableProps["columns"]>([
-    {
-        name: "no",
-        align: "left",
-        label: "ลำดับ",
-        sortable: false,
-        field: "no",
-        headerStyle: "font-size: 14px",
-        style: "font-size: 14px",
-    },
-    {
-        name: "fullname",
-        align: "left",
-        label: "ชื่อ-สกุล",
-        sortable: true,
-        field: "fullname",
-        headerStyle: "font-size: 14px; min-width: 200px",
-        style: "font-size: 14px; ",
-    },
-    {
-        name: "newAgency",
-        align: "left",
-        label: "หน่วยงานที่รับการบรรจุ",
-        sortable: true,
-        field: "newAgency",
-        headerStyle: "font-size: 14px",
-        style: "font-size: 14px",
-        sort: (a: string, b: string) =>
-            a.localeCompare(b, undefined, {
-                numeric: true,
-                sensitivity: "base",
-            }),
-    },
-    {
-        name: "currentAgency",
-        align: "left",
-        label: "หน่วยงานปัจจุบัน",
-        sortable: true,
-        field: "currentAgency",
-        headerStyle: "font-size: 14px",
-        style: "font-size: 14px",
-        sort: (a: string, b: string) =>
-            a.localeCompare(b, undefined, {
-                numeric: true,
-                sensitivity: "base",
-            }),
-    },
-    {
-        name: "amount",
-        align: "left",
-        label: "ค่าจ้าง",
-        sortable: true,
-        field: "amount",
-        headerStyle: "font-size: 14px",
-        style: "font-size: 14px",
-        sort: (a: string, b: string) =>
-            a.localeCompare(b, undefined, {
-                numeric: true,
-                sensitivity: "base",
-            }),
-    },
-    {
-        name: "govAge",
-        align: "left",
-        label: "อายุราชการ(ปี)",
-        sortable: true,
-        field: "govAge",
-        headerStyle: "font-size: 14px",
-        style: "font-size: 14px",
-        sort: (a: string, b: string) =>
-            a.localeCompare(b, undefined, {
-                numeric: true,
-                sensitivity: "base",
-            }),
-    },
-    {
-        name: "dateAppoint",
-        align: "left",
-        label: "วันที่จ้าง",
-        sortable: true,
-        field: "dateAppoint",
-        headerStyle: "font-size: 14px",
-        style: "font-size: 14px",
-    },
-    {
-        name: "dateStart",
-        align: "left",
-        label: "วันที่เริ่มปฎิบัติราชการ",
-        sortable: true,
-        field: "dateStart",
-        headerStyle: "font-size: 14px",
-        style: "font-size: 14px",
-    },
-    {
-        name: "salaryDate",
-        align: "left",
-        label: "วันที่แต่งตั้ง",
-        sortable: true,
-        field: "salaryDate",
-        headerStyle: "font-size: 14px",
-        style: "font-size: 14px",
-    },
-    {
-        name: "refSalary",
-        align: "left",
-        label: "เอกสารอ้างอิง",
-        sortable: true,
-        field: "refSalary",
-        headerStyle: "font-size: 14px; min-width: 200px",
-        style: "font-size: 14px; ",
-    },
-    {
-        name: "age",
-        align: "left",
-        label: "อายุ",
-        sortable: true,
-        field: "age",
-        headerStyle: "font-size: 14px",
-        style: "font-size: 14px",
-        sort: (a: string, b: string) =>
-            a.localeCompare(b, undefined, {
-                numeric: true,
-                sensitivity: "base",
-            }),
-    },
-    {
-        name: "fullnameOld",
-        align: "left",
-        label: "ชื่อ-สกุล(เดิม)",
-        sortable: true,
-        field: "fullnameOld",
-        headerStyle: "font-size: 14px; min-width: 200px",
-        style: "font-size: 14px; ",
-    },
-    {
-        name: "createdAt",
-        align: "left",
-        label: "วันที่สร้าง",
-        sortable: true,
-        field: "createdAt",
-        headerStyle: "font-size: 14px",
-        style: "font-size: 14px",
-    },
-    {
-        name: "leaveDateOrder",
-        align: "left",
-        label: "วันที่พ้นราชการ",
-        sortable: true,
-        field: "leaveDateOrder",
-        headerStyle: "font-size: 14px",
-        style: "font-size: 14px",
-    },
-    {
-        name: "statustext",
-        align: "left",
-        label: "สถานะ",
-        sortable: true,
-        field: "statustext",
-        headerStyle: "font-size: 14px",
-        style: "font-size: 14px",
-        sort: (a: string, b: string) =>
-            a.localeCompare(b, undefined, {
-                numeric: true,
-                sensitivity: "base",
-            }),
-    },
+  {
+    name: "no",
+    align: "left",
+    label: "ลำดับ",
+    sortable: false,
+    field: "no",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "fullname",
+    align: "left",
+    label: "ชื่อ-นามสกุล",
+    sortable: true,
+    field: "fullname",
+    headerStyle: "font-size: 14px; min-width: 200px",
+    style: "font-size: 14px; ",
+  },
+  {
+    name: "newAgency",
+    align: "left",
+    label: "หน่วยงานที่รับการบรรจุ",
+    sortable: true,
+    field: "newAgency",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, {
+        numeric: true,
+        sensitivity: "base",
+      }),
+  },
+  {
+    name: "currentAgency",
+    align: "left",
+    label: "หน่วยงานปัจจุบัน",
+    sortable: true,
+    field: "currentAgency",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, {
+        numeric: true,
+        sensitivity: "base",
+      }),
+  },
+  {
+    name: "amount",
+    align: "left",
+    label: "ค่าจ้าง",
+    sortable: true,
+    field: "amount",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, {
+        numeric: true,
+        sensitivity: "base",
+      }),
+  },
+  {
+    name: "govAge",
+    align: "left",
+    label: "อายุราชการ(ปี)",
+    sortable: true,
+    field: "govAge",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, {
+        numeric: true,
+        sensitivity: "base",
+      }),
+  },
+  {
+    name: "dateAppoint",
+    align: "left",
+    label: "วันที่จ้าง",
+    sortable: true,
+    field: "dateAppoint",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "dateStart",
+    align: "left",
+    label: "วันที่เริ่มปฎิบัติราชการ",
+    sortable: true,
+    field: "dateStart",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "salaryDate",
+    align: "left",
+    label: "วันที่แต่งตั้ง",
+    sortable: true,
+    field: "salaryDate",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "refSalary",
+    align: "left",
+    label: "เอกสารอ้างอิง",
+    sortable: true,
+    field: "refSalary",
+    headerStyle: "font-size: 14px; min-width: 200px",
+    style: "font-size: 14px; ",
+  },
+  {
+    name: "age",
+    align: "left",
+    label: "อายุ",
+    sortable: true,
+    field: "age",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, {
+        numeric: true,
+        sensitivity: "base",
+      }),
+  },
+  {
+    name: "fullnameOld",
+    align: "left",
+    label: "ชื่อ-สกุล(เดิม)",
+    sortable: true,
+    field: "fullnameOld",
+    headerStyle: "font-size: 14px; min-width: 200px",
+    style: "font-size: 14px; ",
+  },
+  {
+    name: "createdAt",
+    align: "left",
+    label: "วันที่สร้าง",
+    sortable: true,
+    field: "createdAt",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "leaveDateOrder",
+    align: "left",
+    label: "วันที่พ้นราชการ",
+    sortable: true,
+    field: "leaveDateOrder",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "statustext",
+    align: "left",
+    label: "สถานะ",
+    sortable: true,
+    field: "statustext",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, {
+        numeric: true,
+        sensitivity: "base",
+      }),
+  },
 ]);
 
 // checkbox เลือกคนไปออกคำสั่ง
 const selected = ref<any>([]);
 const save = () => {
-    if (selected.value.length == 0) {
-        dialogMessageNotify($q, "กรุณาเลือกคนออกคำสั่ง");
-    } else dialogConfirm($q, () => sendToCommand());
+  if (selected.value.length == 0) {
+    dialogMessageNotify($q, "กรุณาเลือกคนออกคำสั่ง");
+  } else dialogConfirm($q, () => sendToCommand());
 };
 
 // post ส่งไปออกคำสั่ง
 const sendToCommand = async () => {
-    let pId: string[] = [];
-    selected.value.forEach((e: any) => {
-        pId.push(e.id);
+  let pId: string[] = [];
+  selected.value.forEach((e: any) => {
+    pId.push(e.id);
+  });
+  let data = {
+    id: pId,
+  };
+  showLoader();
+  await http
+    .post(config.API.organizationEmployeeSendOrder, data)
+    .then((res: any) => {
+      success($q, "บันทึกสำเร็จ");
+    })
+    .catch((e: any) => {
+      messageError($q, e);
+    })
+    .finally(async () => {
+      props.fetchNewList();
+      props.closeDialog();
+      selected.value = [];
+      hideLoader();
     });
-    let data = {
-        id: pId,
-    };
-    showLoader();
-    await http
-        .post(config.API.organizationEmployeeSendOrder, data)
-        .then((res: any) => {
-            success($q, "บันทึกสำเร็จ");
-        })
-        .catch((e: any) => {
-            messageError($q, e);
-        })
-        .finally(async () => {
-            props.fetchNewList()
-            props.closeDialog()
-            selected.value = [];
-            hideLoader();
-        });
 };
 
 // เลือกรายการเฉพาะคนที่มีสถานะ PENDING (เลือกตำแหน่งแล้ว)
 const rowsOrder = ref<FormRegistryEmployee[]>([]);
 const filterRowData = () => {
-    rowsOrder.value = props.rows.filter(
-        (r: FormRegistryEmployee) => r.status == "PENDING"
-    );
-}
+  rowsOrder.value = props.rows.filter(
+    (r: FormRegistryEmployee) => r.status == "PENDING"
+  );
+};
 
 // เช็ค props modal ทำการ filter เมื่อคลิก icon ส่งไปออกคำสั่ง
 watch(props, () => {
-    if (props.modal === true && props.rows) {
-        filterRowData()
-    }
+  if (props.modal === true && props.rows) {
+    filterRowData();
+    visibleColumnsOrder.value = [
+      "no",
+      "fullname",
+      "fullnameOld",
+      "oc",
+      "positionEmployeePosition",
+      "positionEmployeePositionSide",
+      "positionLine",
+      "govAge",
+      "positionEmployeeGroup",
+      "dateAppoint",
+      "refSalary",
+      "dateStart",
+      "createdAt",
+      "salaryDate",
+      "age",
+      "amount",
+      "statustext",
+      "leaveDateOrder",
+      "newAgency",
+      "currentAgency",
+    ];
+  }
 });
 </script>
 
 <template>
-    <q-dialog v-model="props.modal">
-        <q-card style="width: 900px; max-width: 80vw">
-            <DialogHeader tittle="ส่งรายชื่อไปออกคำสั่ง" :close="props.closeDialog" />
-            <q-separator />
-            <q-card-section class="q-pt-none">
-                <div class="row justify-end">
-                    <div class="col-5">
-                        <q-toolbar style="padding: 0">
-                            <q-input borderless outlined dense debounce="300" v-model="filter" ref="filterRef"
-                                placeholder="ค้นหา" style="width: 850px; max-width: auto">
-                                <template v-slot:append>
-                                    <q-icon name="search" />
-                                </template>
-                            </q-input>
-                        </q-toolbar>
-                    </div>
+  <q-dialog v-model="props.modal">
+    <q-card style="width: 900px; max-width: 80vw">
+      <DialogHeader tittle="ส่งรายชื่อไปออกคำสั่ง" :close="props.closeDialog" />
+      <q-separator />
+      <q-card-section class="q-pt-none">
+        <div class="row justify-end">
+          <div class="col-5">
+            <q-toolbar style="padding: 0">
+              <q-input
+                borderless
+                outlined
+                dense
+                debounce="300"
+                v-model="filter"
+                ref="filterRef"
+                placeholder="ค้นหา"
+                style="width: 850px; max-width: auto"
+              >
+                <template v-slot:append>
+                  <q-icon name="search" />
+                </template>
+              </q-input>
+              <q-select
+                v-model="visibleColumnsOrder"
+                multiple
+                outlined
+                dense
+                options-dense
+                :display-value="$q.lang.table.columns"
+                emit-value
+                map-options
+                :options="columnsOrder"
+                option-value="name"
+                options-cover
+                style="min-width: 150px"
+                class="gt-xs q-ml-sm"
+              />
+            </q-toolbar>
+          </div>
+        </div>
+
+        <d-table
+          :rows="rowsOrder"
+          :columns="columnsOrder"
+          :visible-columns="visibleColumnsOrder"
+          :filter="filter"
+          row-key="id"
+          selection="multiple"
+          v-model:selected="selected"
+        >
+          <template v-slot:header-selection="scope">
+            <q-checkbox
+              keep-color
+              color="primary"
+              dense
+              v-model="scope.selected"
+            />
+          </template>
+          <template v-slot:body="props">
+            <q-tr :props="props" class="cursor-pointer">
+              <q-td>
+                <q-checkbox
+                  keep-color
+                  color="primary"
+                  dense
+                  v-model="props.selected"
+                />
+              </q-td>
+
+              <q-td key="no" :props="props">
+                {{ props.rowIndex + 1 }}
+              </q-td>
+              <q-td key="fullname" :props="props">
+                {{ props.row.fullname }}
+              </q-td>
+              <q-td key="newAgency" :props="props">
+                <div
+                  class="col-12"
+                  v-if="
+                    props.row.draftOrganizationOrganization == null &&
+                    props.row.draftPositionEmployee == null
+                  "
+                >
+                  <div class="text-weight-medium">
+                    {{ "-" }}
+                  </div>
                 </div>
+                <div class="col-12" v-else>
+                  <div class="text-weight-medium">
+                    {{ props.row.draftOrganizationOrganization ?? "-" }}
+                  </div>
+                  <div class="text-weight-light">
+                    {{ props.row.draftPositionEmployee ?? "-" }}
+                  </div>
+                </div>
+              </q-td>
+              <q-td key="currentAgency" :props="props">
+                <div
+                  class="col-12"
+                  v-if="props.row.oc == null && props.row.position == null"
+                >
+                  <div class="text-weight-medium">
+                    {{ "-" }}
+                  </div>
+                </div>
+                <div class="col-12" v-else>
+                  <div class="text-weight-medium">
+                    {{ props.row.oc ?? "-" }}
+                  </div>
+                  <div class="text-weight-light">
+                    {{ props.row.position ?? "-" }}
+                  </div>
+                </div>
+              </q-td>
 
-                <d-table :rows="rowsOrder" :columns="columnsOrder" :visible-columns="visibleColumnsOrder" :filter="filter"
-                    row-key="id" selection="multiple" v-model:selected="selected">
-                    <template v-slot:header-selection="scope">
-                        <q-checkbox keep-color color="primary" dense v-model="scope.selected" />
-                    </template>
-                    <template v-slot:body="props">
-                        <q-tr :props="props" class="cursor-pointer">
-                            <q-td>
-                                <q-checkbox keep-color color="primary" dense v-model="props.selected" />
-                            </q-td>
+              <q-td key="amount" :props="props">
+                {{ props.row.amount }}
+              </q-td>
+              <q-td key="govAge" :props="props">
+                {{ props.row.govAge }}
+              </q-td>
+              <q-td key="dateAppoint" :props="props">
+                {{ props.row.dateAppoint }}
+              </q-td>
+              <q-td key="dateStart" :props="props">
+                {{ props.row.dateStart }}
+              </q-td>
+              <q-td key="salaryDate" :props="props">
+                {{ props.row.salaryDate }}
+              </q-td>
+              <q-td key="refSalary" :props="props">
+                {{ props.row.refSalary }}
+              </q-td>
+              <q-td key="age" :props="props">
+                {{ props.row.age }}
+              </q-td>
+              <q-td key="fullnameOld" :props="props">
+                {{ props.row.fullnameOld }}
+              </q-td>
+              <q-td key="createdAt" :props="props">
+                {{ props.row.createdAt }}
+              </q-td>
+              <q-td key="isLeave" :props="props">
+                {{ props.row.isLeave }}
+              </q-td>
 
-                            <q-td key="no" :props="props">
-                                {{ props.rowIndex + 1 }}
-                            </q-td>
-                            <q-td key="fullname" :props="props">
-                                {{ props.row.fullname }}
-                            </q-td>
-                            <q-td key="newAgency" :props="props">
-                                <div class="col-12" v-if="props.row.draftOrganizationOrganization == null &&
-                                    props.row.draftPositionEmployee == null
-                                    ">
-                                    <div class="text-weight-medium">
-                                        {{ "-" }}
-                                    </div>
-                                </div>
-                                <div class="col-12" v-else>
-                                    <div class="text-weight-medium">
-                                        {{ props.row.draftOrganizationOrganization ?? "-" }}
-                                    </div>
-                                    <div class="text-weight-light">
-                                        {{ props.row.draftPositionEmployee ?? "-" }}
-                                    </div>
-                                </div>
-                            </q-td>
-                            <q-td key="currentAgency" :props="props">
-                                <div class="col-12" v-if="props.row.oc == null && props.row.position == null">
-                                    <div class="text-weight-medium">
-                                        {{ "-" }}
-                                    </div>
-                                </div>
-                                <div class="col-12" v-else>
-                                    <div class="text-weight-medium">
-                                        {{ props.row.oc ?? "-" }}
-                                    </div>
-                                    <div class="text-weight-light">
-                                        {{ props.row.position ?? "-" }}
-                                    </div>
-                                </div>
-                            </q-td>
+              <q-td key="leaveDateOrder" :props="props">
+                {{ props.row.leaveDateOrder }}
+              </q-td>
+              <q-td key="statustext" :props="props">
+                {{ props.row.statustext }}
+              </q-td>
+            </q-tr>
+          </template>
+        </d-table>
+      </q-card-section>
 
-                            <q-td key="amount" :props="props">
-                                {{ props.row.amount }}
-                            </q-td>
-                            <q-td key="govAge" :props="props">
-                                {{ props.row.govAge }}
-                            </q-td>
-                            <q-td key="dateAppoint" :props="props">
-                                {{ props.row.dateAppoint }}
-                            </q-td>
-                            <q-td key="dateStart" :props="props">
-                                {{ props.row.dateStart }}
-                            </q-td>
-                            <q-td key="salaryDate" :props="props">
-                                {{ props.row.salaryDate }}
-                            </q-td>
-                            <q-td key="refSalary" :props="props">
-                                {{ props.row.refSalary }}
-                            </q-td>
-                            <q-td key="age" :props="props">
-                                {{ props.row.age }}
-                            </q-td>
-                            <q-td key="fullnameOld" :props="props">
-                                {{ props.row.fullnameOld }}
-                            </q-td>
-                            <q-td key="createdAt" :props="props">
-                                {{ props.row.createdAt }}
-                            </q-td>
-                            <q-td key="isLeave" :props="props">
-                                {{ props.row.isLeave }}
-                            </q-td>
-
-                            <q-td key="leaveDateOrder" :props="props">
-                                {{ props.row.leaveDateOrder }}
-                            </q-td>
-                            <q-td key="statustext" :props="props">
-                                {{ props.row.statustext }}
-                            </q-td>
-                        </q-tr>
-                    </template>
-                </d-table>
-            </q-card-section>
-
-            <q-card-actions align="right" class="bg-white text-teal">
-                <q-btn label="ส่งไปออกคำสั่ง" @click="save" color="public" />
-            </q-card-actions>
-        </q-card>
-    </q-dialog>
-</template>
\ No newline at end of file
+      <q-card-actions align="right" class="bg-white text-teal">
+        <q-btn label="ส่งไปออกคำสั่ง" @click="save" color="public" />
+      </q-card-actions>
+    </q-card>
+  </q-dialog>
+</template>
diff --git a/src/modules/08_registryEmployee/views/Main.vue b/src/modules/08_registryEmployee/views/Main.vue
index f80d1d0e3..be6e43e2e 100644
--- a/src/modules/08_registryEmployee/views/Main.vue
+++ b/src/modules/08_registryEmployee/views/Main.vue
@@ -310,7 +310,7 @@ const deleteData = async (id: string) => {
 // **** เริ่มในส่วนของการเลือกตำแหน่ง ***//
 const rowsPosition = ref<any>([]); // รายการข้อมูลในตารางกำหนดตำแหน่ง
 const filters = ref<FormRegistryEmployee[]>([]);
-const filterKeyword2 = ref<string>("");
+const filterKeyword2 = ref<any>("");
 const modal = ref<boolean>(false); // เปิด-ปิด dialod กำหนดตำแหน่ง
 const selectedPosition = ref<any>([]); // เก็บตำแหน่งที่เลือก
 
@@ -970,7 +970,7 @@ const showEmployeeTemp = async () => {
                 dense
                 ref="filterRef"
                 debounce="300"
-                :model-value="filterKeyword2"
+                v-model="filterKeyword2"
                 placeholder="ค้นหา"
                 style="width: 850px; max-width: auto"
               >
diff --git a/src/modules/10_order/store.ts b/src/modules/10_order/store.ts
index 1a7f9e7da..168f0f029 100644
--- a/src/modules/10_order/store.ts
+++ b/src/modules/10_order/store.ts
@@ -45,13 +45,19 @@ export const useOrderPlacementDataStore = defineStore("placementOrder", () => {
       DataMainUpdateOrder.value = DataMainOrigOrder.value.filter(
         (item) => item.orderTypeValue === filter_1
       );
-    } else if (filter_1 !== "" && filter_2 !== "ทั้งหมด" && filterYear === null) {
+    } else if (
+      filter_1 !== "" &&
+      filter_2 !== "ทั้งหมด" &&
+      filterYear === null
+    ) {
       DataMainUpdateOrder.value = DataMainOrigOrder.value.filter(
-        (item) => item.orderTypeValue === filter_1 && item.OrderStatus === filter_2
+        (item) =>
+          item.orderTypeValue === filter_1 && item.OrderStatus === filter_2
       );
     } else if (filter_1 !== "" && filter_2 === "ทั้งหมด" && filterYear !== 0) {
       DataMainUpdateOrder.value = DataMainOrigOrder.value.filter(
-        (item) => item.orderTypeValue === filter_1 && item.fiscalYear === filterYear
+        (item) =>
+          item.orderTypeValue === filter_1 && item.fiscalYear === filterYear
       );
     } else if (filter_1 === "" && filter_2 !== "ทั้งหมด" && filterYear === 0) {
       DataMainUpdateOrder.value = DataMainOrigOrder.value.filter(
@@ -61,27 +67,32 @@ export const useOrderPlacementDataStore = defineStore("placementOrder", () => {
       DataMainUpdateOrder.value = DataMainOrigOrder.value.filter(
         (item) => item.fiscalYear === filterYear
       );
-    } else if (filter_1 === "" && filter_2 !== "ทั้งหมด" && filterYear !== null) {
+    } else if (
+      filter_1 === "" &&
+      filter_2 !== "ทั้งหมด" &&
+      filterYear !== null
+    ) {
       DataMainUpdateOrder.value = DataMainOrigOrder.value.filter(
         (item) =>
           item.OrderStatus === filter_2 && item.fiscalYear === filterYear
       );
     } else if (filter_1 !== "" && filter_2 !== "ทั้งหมด" && filterYear === 0) {
       DataMainUpdateOrder.value = DataMainOrigOrder.value.filter(
-        (item) => item.OrderStatus === filter_2 && item.orderTypeValue === filter_1
+        (item) =>
+          item.OrderStatus === filter_2 && item.orderTypeValue === filter_1
       );
-    } else if (filter_1 !== "" && filter_2 !== "ทั้งหมด" && filterYear !== null) {
+    } else if (
+      filter_1 !== "" &&
+      filter_2 !== "ทั้งหมด" &&
+      filterYear !== null
+    ) {
       DataMainUpdateOrder.value = DataMainOrigOrder.value.filter(
         (item) =>
           item.orderTypeValue === filter_1 &&
           item.OrderStatus === filter_2 &&
           item.fiscalYear === filterYear
       );
-    } else if (
-      filter_1 == "" &&
-      filter_2 == "ทั้งหมด" &&
-      filterYear !== null
-    ) {
+    } else if (filter_1 == "" && filter_2 == "ทั้งหมด" && filterYear !== null) {
       DataMainUpdateOrder.value = DataMainOrigOrder.value;
     }
   };
@@ -144,6 +155,6 @@ export const useOrderPlacementDataStore = defineStore("placementOrder", () => {
     DataUpdateOrder,
     DataMainYearSetOrder,
     DataMainOrder,
-    nameOrderFilter
+    nameOrderFilter,
   };
-});
\ No newline at end of file
+});
diff --git a/src/modules/10_order/views/Main.vue b/src/modules/10_order/views/Main.vue
index 275398d09..d712763f9 100644
--- a/src/modules/10_order/views/Main.vue
+++ b/src/modules/10_order/views/Main.vue
@@ -18,15 +18,6 @@ const mixin = useCounterMixin();
 const { showLoader, hideLoader, messageError, date2Thai } = mixin;
 const DataStore = useOrderPlacementDataStore();
 
-const OpsFilterYear = ref<any>({
-  fiscalyearOP: [],
-});
-const OpsFilterOrderType = ref<any>({
-  OrderTypeOption: [],
-});
-const OpsFilterOrderStatus = ref<any>({
-  OrderStatusOption: [],
-});
 const pagination = ref({
   descending: true,
   page: 1,
@@ -153,16 +144,6 @@ const OriginalDataFetch = async () => {
         OrderType: e.orderTypeName,
         orderTypeValue: e.orderTypeValue,
       }));
-      //   OpsFilterYear.value.fiscalYear = res.data.result.map((e: any) => ({
-      //     fiscalYear: Number(e.fiscalYear),
-      //   }));
-      OpsFilterOrderStatus.value.OrderStatus = res.data.result.map(
-        (e: any) => ({
-          OrderStatus: e.orderStatusName,
-        })
-      );
-      console.log(fiscalyear.value);
-      console.log(OrderStatus.value);
     })
     .catch((e: any) => {
       messageError($q, e);
@@ -199,22 +180,26 @@ const redirectToPage = (id?: string, status?: string) => {
 const clickAdd = () => {
   router.push({ name: "OrderAdd" });
 };
-const Ops = ref<any>({
-  fiscalyearOP: [],
-});
 
 // รายการข้อมูลปีงบประมาณ
 const fiscalyear = ref<number | null>(0);
-const fiscalyearOP = ref<DataOption[]>([{ id: 0, name: "ทั้งหมด" }]);
+const fiscalyearOP = ref<any>([{ id: 0, name: "ทั้งหมด" }]);
 const fiscalyearFilter1 = ref<any>([]);
 const fiscalYearFilter = async () => {
   await http.get(config.API.yearOptionsOrder()).then((res) => {
     const response = res.data.result;
     fiscalyearOP.value = [{ id: 0, name: "ทั้งหมด" }];
-    fiscalyearOP.value.push(...response);
+    response.map((r: any) => {
+      fiscalyearOP.value.push({ id: r.id, name: r.name.toString() });
+    });
 
     fiscalyearFilter1.value = [{ id: 0, name: "ทั้งหมด" }];
-    fiscalyearFilter1.value.push(...response);
+    response.map((r: any) => {
+      fiscalyearFilter1.value.push({
+        id: r.id,
+        name: r.name.toString(),
+      });
+    });
   });
 };
 
@@ -300,7 +285,7 @@ const filterSelector = (val: any, update: Function, refData: string) => {
     case "fiscalyearOP":
       update(() => {
         fiscalyearOP.value = fiscalyearFilter1.value.filter(
-          (v: any) => v.name.valueOf(val) > -1
+          (v: any) => v.name.indexOf(val) > -1
         );
       });
       break;
@@ -347,6 +332,7 @@ const paginationLabel = (start: string, end: string, total: string) => {
             option-value="id"
             option-label="name"
             lazy-rules
+            use-input
             hide-bottom-space
             :readonly="false"
             :borderless="false"
@@ -356,7 +342,13 @@ const paginationLabel = (start: string, end: string, total: string) => {
             @filter="(inputValue:any,
                       doneFn:Function) => filterSelector(inputValue, doneFn,'fiscalyearOP'
                       ) "
-          />
+          >
+            <template v-slot:no-option>
+              <q-item>
+                <q-item-section class="text-grey"> ไม่มีข้อมูล </q-item-section>
+              </q-item>
+            </template>
+          </q-select>
           <!-- use-input -->
           <div>
             <q-btn
@@ -433,7 +425,15 @@ const paginationLabel = (start: string, end: string, total: string) => {
                   @filter="(inputValue:any,
                     doneFn:Function) => filterSelector(inputValue, doneFn,'OrderTypeOption'
                     ) "
-                />
+                >
+                  <template v-slot:no-option>
+                    <q-item>
+                      <q-item-section class="text-grey">
+                        ไม่มีข้อมูล
+                      </q-item-section>
+                    </q-item>
+                  </template>
+                </q-select>
               </div>
               <div class="col-xs-12 col-sm-3 col-md-3">
                 <q-select
@@ -456,7 +456,15 @@ const paginationLabel = (start: string, end: string, total: string) => {
                   @filter="(inputValue:any,
                       doneFn:Function) => filterSelector(inputValue, doneFn,'OrderStatusOption'
                       ) "
-                />
+                >
+                  <template v-slot:no-option>
+                    <q-item>
+                      <q-item-section class="text-grey">
+                        ไม่มีข้อมูล
+                      </q-item-section>
+                    </q-item>
+                  </template>
+                </q-select>
               </div>
               <q-space />
               <div><PopupHistory :OrderTypeOption="OrderTypeOption" /></div>