From 451a567cf49c1b89aa67d7002bce99d4dac7d905 Mon Sep 17 00:00:00 2001
From: waruneeta <warunee.auy@gmail.com>
Date: Fri, 29 Sep 2023 15:02:04 +0700
Subject: [PATCH] =?UTF-8?q?-=20=E0=B9=80=E0=B8=9E=E0=B8=B4=E0=B9=88?=
 =?UTF-8?q?=E0=B8=A1=E0=B9=80=E0=B8=A1=E0=B8=99=E0=B8=B9=E0=B9=81=E0=B8=95?=
 =?UTF-8?q?=E0=B9=88=E0=B8=87=E0=B8=95=E0=B8=B1=E0=B9=89=E0=B8=87=E0=B8=A5?=
 =?UTF-8?q?=E0=B8=B9=E0=B8=81=E0=B8=88=E0=B9=89=E0=B8=B2=E0=B8=87=E0=B8=9B?=
 =?UTF-8?q?=E0=B8=A3=E0=B8=B0=E0=B8=88=E0=B8=B3=20-=20=E0=B8=9B=E0=B8=A3?=
 =?UTF-8?q?=E0=B8=B1=E0=B8=9A=E0=B9=80=E0=B8=87=E0=B8=B7=E0=B9=88=E0=B8=AD?=
 =?UTF-8?q?=E0=B8=99=E0=B9=84=E0=B8=82=E0=B8=81=E0=B8=B2=E0=B8=A3=E0=B9=81?=
 =?UTF-8?q?=E0=B8=AA=E0=B8=94=E0=B8=87=E0=B9=80=E0=B8=A1=E0=B8=99=E0=B8=B9?=
 =?UTF-8?q?=E0=B9=83=E0=B8=99=E0=B8=97=E0=B8=B0=E0=B9=80=E0=B8=9A=E0=B8=B5?=
 =?UTF-8?q?=E0=B8=A2=E0=B8=99=E0=B8=9B=E0=B8=A3=E0=B8=B0=E0=B8=A7=E0=B8=B1?=
 =?UTF-8?q?=E0=B8=95=E0=B8=B4=E0=B9=80=E0=B8=9E=E0=B8=B4=E0=B9=88=E0=B8=A1?=
 =?UTF-8?q?=20-=20=E0=B9=80=E0=B8=9E=E0=B8=B4=E0=B9=88=E0=B8=A1=E0=B9=80?=
 =?UTF-8?q?=E0=B8=A1=E0=B8=99=E0=B8=B9=E0=B8=A3=E0=B8=B2=E0=B8=A2=E0=B8=81?=
 =?UTF-8?q?=E0=B8=B2=E0=B8=A3=E0=B9=81=E0=B8=95=E0=B9=88=E0=B8=87=E0=B8=95?=
 =?UTF-8?q?=E0=B8=B1=E0=B9=89=E0=B8=87=E0=B8=A5=E0=B8=B9=E0=B8=81=E0=B8=88?=
 =?UTF-8?q?=E0=B9=89=E0=B8=B2=E0=B8=87=E0=B8=9B=E0=B8=A3=E0=B8=B0=E0=B8=88?=
 =?UTF-8?q?=E0=B8=B3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/interface/request/main/main.ts            |   6 +
 .../04_registry/components/Profile.vue        | 493 +++------------
 .../components/AppointEmployee/Detail.vue     | 323 ++++++++++
 .../AppointEmployee/DialogHeader.vue          |  27 +
 .../components/AppointEmployee/Dialogbody.vue | 231 +++++++
 .../components/AppointEmployee/Main.vue       | 394 ++++++++++++
 .../components/AppointEmployee/Modal.vue      | 581 ++++++++++++++++++
 .../components/AppointMent/Detail.vue         |   2 +-
 .../components/AppointMent/Dialogbody.vue     |   2 +-
 .../components/AppointMent/Main.vue           |   2 +-
 src/modules/05_placement/router.ts            |  27 +-
 11 files changed, 1688 insertions(+), 400 deletions(-)
 create mode 100644 src/modules/05_placement/components/AppointEmployee/Detail.vue
 create mode 100644 src/modules/05_placement/components/AppointEmployee/DialogHeader.vue
 create mode 100644 src/modules/05_placement/components/AppointEmployee/Dialogbody.vue
 create mode 100644 src/modules/05_placement/components/AppointEmployee/Main.vue
 create mode 100644 src/modules/05_placement/components/AppointEmployee/Modal.vue

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 64b087205..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,47 +97,32 @@
         </div>
         <q-space />
 
-        <q-btn
-          round
-          flat
-          color="blue"
-          icon="mdi-file-document"
-          v-if="profileType == 'officer' || profileType == 'employee'"
-        >
+        <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"
-                v-if="profileType == 'officer'"
-              >
+              <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"
-                v-if="profileType == 'officer'"
-              >
+              <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"
-                v-if="profileType == 'officer' || profileType == 'employee'"
-              >
+              <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">
@@ -202,56 +130,31 @@
                 <q-item-section>ย้าย</q-item-section>
               </q-item>
               <q-separator /> -->
-              <q-item
-                clickable
-                v-close-popup
-                @click="clickPassaway"
-                v-if="profileType == 'officer'"
-              >
+              <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"
-                v-if="profileType == 'officer'"
-              >
+              <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"
-                v-if="profileType == 'officer'"
-              >
+              <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"
-                v-if="profileType == 'officer'"
-              >
+              <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"
-                v-if="profileType == 'officer'"
-              >
+              <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>
@@ -262,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>
@@ -284,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>
@@ -298,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
@@ -326,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
@@ -356,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"
@@ -413,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>
@@ -447,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>
@@ -468,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>
@@ -508,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>
@@ -582,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>
@@ -654,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>
@@ -722,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>
@@ -942,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);
       })
@@ -1207,9 +910,9 @@ const otherPost = async () => {
   });
 };
 
-const downloadKP7 = () => {};
+const downloadKP7 = () => { };
 
-const downloadKP7Short = () => {};
+const downloadKP7Short = () => { };
 
 const clickKp7 = async () => {
   window.open(config.API.profileReportId(profileId.value));
@@ -1454,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 5d89c04a8..010aa076f 100644
--- a/src/modules/05_placement/components/AppointMent/Main.vue
+++ b/src/modules/05_placement/components/AppointMent/Main.vue
@@ -89,7 +89,7 @@ const columns = ref<QTableProps["columns"]>([
   {
     name: "organizationName",
     align: "left",
-    label: "หน่วยงานที่รับการแต่งตั้ง-เลื่อน",
+    label: "หน่วยงานที่รับการแต่งตั้ง-เลื่อน-ย้าย",
     sortable: true,
     field: "organizationName",
     headerStyle: "font-size: 14px",
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",
     },
   },