From f773550bfd9a1e4be0c2fc965c730db399d1a83b Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Tue, 3 Oct 2023 11:00:24 +0700
Subject: [PATCH] =?UTF-8?q?=E0=B9=81=E0=B8=81=E0=B9=89=E0=B8=9A=E0=B8=B1?=
 =?UTF-8?q?=E0=B8=84=20=E0=B9=81=E0=B8=9A=E0=B8=9A=E0=B8=9B=E0=B8=A3?=
 =?UTF-8?q?=E0=B8=B0=E0=B9=80=E0=B8=A1=E0=B8=B4=E0=B8=99=E0=B8=9C=E0=B8=A5?=
 =?UTF-8?q?=20(=E0=B8=84=E0=B8=93=E0=B8=B0=E0=B8=81=E0=B8=A3=E0=B8=A3?=
 =?UTF-8?q?=E0=B8=A1=E0=B8=81=E0=B8=B2=E0=B8=A3)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/05_placement/api.placement.ts         |   7 +
 .../04_registry/components/Profile.vue        | 518 ++++++++++++++----
 .../components/AppointEmployee/Detail.vue     |  30 +-
 .../components/AppointEmployee/Dialogbody.vue | 134 ++++-
 .../components/AppointEmployee/Main.vue       | 348 ++++++++----
 .../components/AppointEmployee/Modal.vue      |  22 +-
 .../FormEvaluation/FormEvaluateScore.vue      |  15 +-
 .../05_placement/interface/response/Main.ts   |   3 +-
 8 files changed, 792 insertions(+), 285 deletions(-)

diff --git a/src/api/05_placement/api.placement.ts b/src/api/05_placement/api.placement.ts
index f0588c167..7ddc04753 100644
--- a/src/api/05_placement/api.placement.ts
+++ b/src/api/05_placement/api.placement.ts
@@ -159,4 +159,11 @@ export default {
   orderCPM: (type: string) => `${order}/order/${type}/detail`,
   orderCPMUpdate: (type: string, id: string) =>
     `${order}/order/${type}/detail/${id}`,
+
+  //appoint-employee
+  appointEmployee: () => `${placement}/appointment/temp`,
+  appointEmployeeByid: (id: string) => `${placement}/appointment/temp/${id}`,
+  appointEmployeePosition: (id: string) => `${placement}/appointment/temp/position/${id}`,
+  appointEmployeeOrder: (commandTypeId: string) => `${placement}/appointment/temp/report/${commandTypeId}`,
+  apppointmentPositionUse: () => `${placement}/appointment/temp/use`,
 };
diff --git a/src/modules/04_registry/components/Profile.vue b/src/modules/04_registry/components/Profile.vue
index 4c61d3774..720a41488 100644
--- a/src/modules/04_registry/components/Profile.vue
+++ b/src/modules/04_registry/components/Profile.vue
@@ -6,10 +6,17 @@
           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" />
@@ -33,11 +40,20 @@
         <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">
@@ -62,29 +78,70 @@
         <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">
@@ -97,28 +154,56 @@
         </div>
         <q-space />
 
-        <q-btn round flat color="blue" icon="mdi-file-document"
-          v-if="profileType == 'officer' || (profileType == 'employee' && employeeClass == 'perm')">
+        <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'">
+              <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
+                clickable
+                v-close-popup
+                @click="appointEmployeePost"
+                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>
@@ -130,31 +215,56 @@
                 <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>
@@ -165,8 +275,15 @@
           <!-- <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>
@@ -180,7 +297,9 @@
                 <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>
@@ -192,8 +311,20 @@
     <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
@@ -208,9 +339,20 @@
     <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
@@ -227,28 +369,50 @@
       <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"
@@ -262,11 +426,21 @@
                     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>
@@ -286,7 +460,14 @@
         >
           <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>
@@ -300,18 +481,39 @@
           <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>
@@ -319,32 +521,63 @@
                   {{ 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>
@@ -362,34 +595,71 @@
   <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>
@@ -397,30 +667,64 @@
             </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>
@@ -431,7 +735,13 @@
       </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>
@@ -645,7 +955,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);
       })
@@ -826,6 +1136,26 @@ const appointPost = async () => {
   });
 };
 
+const appointEmployeePost = async () => {
+  console.log("post Employee");
+  const formData = new FormData();
+  formData.append("id", profileId.value);
+  dialogConfirm($q, async () => {
+    showLoader();
+    await http
+      .post(config.API.appointEmployee(), formData)
+      .then(() => {
+        success($q, "ดำเนินการสำเร็จ");
+      })
+      .catch((e) => {
+        messageError($q, e);
+      })
+      .finally(() => {
+        hideLoader();
+      });
+  });
+};
+
 // const relocationPost = async () => {
 //   dialogConfirm($q, async () => {
 //     const formData = new FormData();
@@ -910,9 +1240,9 @@ const otherPost = async () => {
   });
 };
 
-const downloadKP7 = () => { };
+const downloadKP7 = () => {};
 
-const downloadKP7Short = () => { };
+const downloadKP7Short = () => {};
 
 const clickKp7 = async () => {
   window.open(config.API.profileReportId(profileId.value));
@@ -1157,8 +1487,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
index b77c766a3..a294adb15 100644
--- a/src/modules/05_placement/components/AppointEmployee/Detail.vue
+++ b/src/modules/05_placement/components/AppointEmployee/Detail.vue
@@ -1,4 +1,4 @@
-divdivdiv
+
 <script setup lang="ts">
 import { onMounted, ref } from "vue";
 import { useQuasar } from "quasar";
@@ -60,7 +60,7 @@ const title = ref<ResponseTitle>({
 const fecthappointmentByid = async () => {
   showLoader();
   await http
-    .get(config.API.appointmentByid(paramsId.toString()))
+    .get(config.API.appointEmployeeByid(paramsId.toString()))
     .then((res: ResponseData) => {
       const data = res.data.result;
       appointment.value = data;
@@ -120,19 +120,19 @@ const putAppointment = async () => {
     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;
-  //   });
+  showLoader();
+  await http
+    .put(config.API.appointEmployeeByid(paramsId.toString()), data)
+    .then(() => {
+      success($q, "บันทึกข้อมูลสำเร็จ");
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      fecthappointmentByid();
+      edit.value = false;
+    });
 };
 const cancel = () => {
   edit.value = false;
diff --git a/src/modules/05_placement/components/AppointEmployee/Dialogbody.vue b/src/modules/05_placement/components/AppointEmployee/Dialogbody.vue
index 60a7b735b..a0a943554 100644
--- a/src/modules/05_placement/components/AppointEmployee/Dialogbody.vue
+++ b/src/modules/05_placement/components/AppointEmployee/Dialogbody.vue
@@ -87,13 +87,12 @@ const columns2 = ref<QTableProps["columns"]>([
   },
 ]);
 const pageNext = (item: object) => {
-  props.nextPage?.(item)
-}
+  props.nextPage?.(item);
+};
 const emit = defineEmits([
   "update:filterKeyword2",
   "update:type",
   "update:selected",
-
 ]);
 const updateInput = (value: any) => {
   emit("update:filterKeyword2", value);
@@ -111,11 +110,10 @@ const clickAddlist = () => {
   dialogConfirm($q, () => createdAppoint());
 };
 
-
 //อัพเดต ส่งไปออกคำสั่ง
 const createdAppoint = async () => {
   let pId: string[] = [];
-  let Type = props.type as string
+  let Type = props.type as string;
   selected.value.forEach((e: UserData) => {
     pId.push(e.personalId);
   });
@@ -125,7 +123,7 @@ const createdAppoint = async () => {
   showLoader();
   await http
     .put(config.API.apppointmentReport(Type), data)
-    .then((res) => {
+    .then(() => {
       success($q, "บันทึกสำเร็จ");
     })
     .catch((e) => {
@@ -135,7 +133,7 @@ const createdAppoint = async () => {
       hideLoader();
       props.fecthlistappointment?.();
       selected.value = [];
-      props.clickClose?.()
+      props.clickClose?.();
     });
 };
 
@@ -154,36 +152,90 @@ watchEffect(() => {
         <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-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"
+                readonly
+              />
             </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">
+              <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" />
+                  <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-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">
+        <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" />
+            <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-checkbox
+                  keep-color
+                  color="primary"
+                  dense
+                  v-model="props.selected"
+                />
               </q-td>
               <q-td key="no" :props="props">
                 {{ props.rowIndex + 1 }}
@@ -194,18 +246,37 @@ watchEffect(() => {
               <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
-                  ">
+              <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})` : "" }}
+                      {{
+                        props.row.organizationShortName !== null
+                          ? `(${props.row.organizationShortName})`
+                          : ""
+                      }}
                     </div>
                     <div class="text-weight-light">
-                      {{ props.row.positionPath !== null ? props.row.positionPath : "-" }}
-                      {{ props.row.positionNumber !== null ? `(${props.row.positionNumber})` : "" }}
+                      {{
+                        props.row.positionPath !== null
+                          ? props.row.positionPath
+                          : "-"
+                      }}
+                      {{
+                        props.row.positionNumber !== null
+                          ? `(${props.row.positionNumber})`
+                          : ""
+                      }}
                     </div>
                   </div>
                 </div>
@@ -224,8 +295,13 @@ watchEffect(() => {
       </q-card-section>
 
       <q-card-actions align="right" class="bg-white text-teal">
-        <q-btn label="ส่งไปออกคำสั่ง" @click="clickAddlist" color="public" :disable="checkSelected" />
+        <q-btn
+          label="ส่งไปออกคำสั่ง"
+          @click="clickAddlist"
+          color="public"
+          :disable="checkSelected"
+        />
       </q-card-actions>
     </q-card>
   </q-dialog>
-</template>
\ No newline at end of file
+</template>
diff --git a/src/modules/05_placement/components/AppointEmployee/Main.vue b/src/modules/05_placement/components/AppointEmployee/Main.vue
index f6050418a..0b33b7116 100644
--- a/src/modules/05_placement/components/AppointEmployee/Main.vue
+++ b/src/modules/05_placement/components/AppointEmployee/Main.vue
@@ -124,81 +124,65 @@ const columns = ref<QTableProps["columns"]>([
   },
 ]);
 
-//รีเซ็ต 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();
-};
-
+onMounted(() => {
+  fecthlistappointment();
+});
 //ดึงข้อมูล 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();
-  //   });
+  showLoader();
+  rows.value = [];
+  await http
+    .get(config.API.appointEmployee())
+    .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();
+    });
 };
 
 //ดึงข้อมูลประเภทคำสั่งเเต่งตั้ง
@@ -208,15 +192,14 @@ const fecthTypeOption = async () => {
     .get(config.API.typeOrder())
     .then((res) => {
       optionsType.value = res.data.result.filter(
-        (e: OpType) =>
-          e.commandCode === "C-PM-05"
+        (e: OpType) => e.commandCode === "C-PM-05"
       );
+      type.value = optionsType.value[0].id;
     })
     .catch((e) => {
       messageError($q, e);
     });
 };
-
 // เปิดโครงสร้าง
 const openModalTree = (id: string) => {
   personalId.value = id;
@@ -227,12 +210,11 @@ const openModalTree = (id: string) => {
 const clickDelete = (id: string) => {
   dialogRemove($q, () => deleteAppoint(id));
 };
-
 // ลบข้อมูล
 const deleteAppoint = async (id: string) => {
   showLoader();
   await http
-    .delete(config.API.appointmentDelete(id))
+    .delete(config.API.appointEmployeeByid(id))
     .then(() => {
       success($q, "ลบข้อมูลสำเร็จ");
     })
@@ -244,7 +226,6 @@ const deleteAppoint = async (id: string) => {
       hideLoader();
     });
 };
-
 // ปิด modal โครงส้ราง
 const closeModalTree = async () => {
   await fecthlistappointment();
@@ -257,10 +238,22 @@ const nextPage = (id: string) => {
     path: `appoint-promote/detail/${id}`,
   });
 };
-
-onMounted(() => {
-  fecthlistappointment();
-});
+//รีเซ็ต 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();
+};
 </script>
 <template>
   <div class="toptitle text-dark col-12 row items-center">
@@ -271,27 +264,65 @@ onMounted(() => {
     <div class="row q-pa-md">
       <div class="col-12">
         <div class="row col-12">
-          <q-btn @click="popup()" size="14px" flat round color="add" icon="mdi-account-arrow-right">
+          <q-btn
+            @click="popup()"
+            size="14px"
+            flat
+            round
+            color="add"
+            icon="mdi-account-arrow-right"
+          >
             <q-tooltip>ส่งไปออกคำสั่ง</q-tooltip>
           </q-btn>
 
           <q-space />
-          <q-input class="col-xs-12 col-sm-3 col-md-2" standout dense v-model="filterKeyword" ref="filterRef" outlined
-            debounce="300" placeholder="ค้นหา">
+          <q-input
+            class="col-xs-12 col-sm-3 col-md-2"
+            standout
+            dense
+            v-model="filterKeyword"
+            ref="filterRef"
+            outlined
+            debounce="300"
+            placeholder="ค้นหา"
+          >
             <template v-slot:append>
               <q-icon v-if="filterKeyword == ''" name="search" />
-              <q-icon v-if="filterKeyword !== ''" name="clear" class="cursor-pointer" @click="resetFilter" />
+              <q-icon
+                v-if="filterKeyword !== ''"
+                name="clear"
+                class="cursor-pointer"
+                @click="resetFilter"
+              />
             </template>
           </q-input>
 
-          <q-select v-model="visibleColumns" multiple outlined dense options-dense :display-value="$q.lang.table.columns"
-            emit-value map-options :options="columns" option-value="name" options-cover style="min-width: 150px"
-            class="col-xs-12 col-sm-3 col-md-2 q-ml-sm" />
+          <q-select
+            v-model="visibleColumns"
+            multiple
+            outlined
+            dense
+            options-dense
+            :display-value="$q.lang.table.columns"
+            emit-value
+            map-options
+            :options="columns"
+            option-value="name"
+            options-cover
+            style="min-width: 150px"
+            class="col-xs-12 col-sm-3 col-md-2 q-ml-sm"
+          />
         </div>
 
         <div class="col-12 q-pt-sm">
-          <d-table :columns="columns" :rows="rows" :filter="filterKeyword" row-key="citizenId"
-            :visible-columns="visibleColumns" v-model:pagination="pagination">
+          <d-table
+            :columns="columns"
+            :rows="rows"
+            :filter="filterKeyword"
+            row-key="citizenId"
+            :visible-columns="visibleColumns"
+            v-model:pagination="pagination"
+          >
             <template v-slot:header="props">
               <q-tr :props="props">
                 <q-th v-for="col in props.cols" :key="col.name" :props="props">
@@ -302,19 +333,38 @@ onMounted(() => {
             </template>
             <template v-slot:body="props">
               <q-tr :props="props" class="cursor-pointer">
-                <q-td key="no" :props="props" @click="nextPage(props.row.personalId)">
+                <q-td
+                  key="no"
+                  :props="props"
+                  @click="nextPage(props.row.personalId)"
+                >
                   {{ props.rowIndex + 1 }}
                 </q-td>
-                <q-td key="citizenId" :props="props" @click="nextPage(props.row.personalId)">
+                <q-td
+                  key="citizenId"
+                  :props="props"
+                  @click="nextPage(props.row.personalId)"
+                >
                   {{ props.row.citizenId }}
                 </q-td>
-                <q-td key="fullname" :props="props" @click="nextPage(props.row.personalId)">
+                <q-td
+                  key="fullname"
+                  :props="props"
+                  @click="nextPage(props.row.personalId)"
+                >
                   {{ props.row.fullname }}
                 </q-td>
-                <q-td key="organizationName" :props="props" @click="nextPage(props.row.personalId)">
-                  <div v-if="props.row.orgName !== null ||
-                    props.row.positionPath !== null
-                    ">
+                <q-td
+                  key="organizationName"
+                  :props="props"
+                  @click="nextPage(props.row.personalId)"
+                >
+                  <div
+                    v-if="
+                      props.row.orgName !== null ||
+                      props.row.positionPath !== null
+                    "
+                  >
                     <div class="col-4">
                       <div class="text-weight-medium">
                         {{
@@ -322,20 +372,20 @@ onMounted(() => {
                         }}
                         {{
                           props.row.organizationShortName !== null
-                          ? `(${props.row.organizationShortName})`
-                          : ""
+                            ? `(${props.row.organizationShortName})`
+                            : ""
                         }}
                       </div>
                       <div class="text-weight-light">
                         {{
                           props.row.positionPath !== null
-                          ? props.row.positionPath
-                          : "-"
+                            ? props.row.positionPath
+                            : "-"
                         }}
                         {{
                           props.row.positionNumber !== null
-                          ? `(${props.row.positionNumber})`
-                          : ""
+                            ? `(${props.row.positionNumber})`
+                            : ""
                         }}
                       </div>
                     </div>
@@ -346,29 +396,73 @@ onMounted(() => {
                     </div>
                   </div>
                 </q-td>
-                <q-td key="birthday" :props="props" @click="nextPage(props.row.personalId)">
+                <q-td
+                  key="birthday"
+                  :props="props"
+                  @click="nextPage(props.row.personalId)"
+                >
                   {{ props.row.birthday }}
                 </q-td>
-                <q-td key="createdAt" :props="props" @click="nextPage(props.row.personalId)">
+                <q-td
+                  key="createdAt"
+                  :props="props"
+                  @click="nextPage(props.row.personalId)"
+                >
                   {{ props.row.createdAt }}
                 </q-td>
-                <q-td key="status" :props="props" @click="nextPage(props.row.personalId)">
+                <q-td
+                  key="status"
+                  :props="props"
+                  @click="nextPage(props.row.personalId)"
+                >
                   {{ props.row.status }}
                 </q-td>
                 <q-td auto-width>
-                  <q-btn v-if="props.row.status !== 'ส่งรายชื่อไปออกคำสั่ง' &&
-                    props.row.status !== 'ออกคำสั่งแล้ว'
-                    " icon="mdi-dots-vertical" size="12px" color="grey-7" flat round dense>
-                    <q-menu transition-show="jump-down" transition-hide="jump-up">
+                  <q-btn
+                    v-if="
+                      props.row.status !== 'ส่งรายชื่อไปออกคำสั่ง' &&
+                      props.row.status !== 'ออกคำสั่งแล้ว'
+                    "
+                    icon="mdi-dots-vertical"
+                    size="12px"
+                    color="grey-7"
+                    flat
+                    round
+                    dense
+                  >
+                    <q-menu
+                      transition-show="jump-down"
+                      transition-hide="jump-up"
+                    >
                       <q-list dense style="min-width: 100px">
-                        <q-item clickable v-close-popup @click="openModalTree(props.row.personalId)">
-                          <q-item-section style="min-width: 0px" avatar class="q-py-sm">
-                            <q-icon color="primary" size="xs" name="mdi-bookmark-outline" />
+                        <q-item
+                          clickable
+                          v-close-popup
+                          @click="openModalTree(props.row.personalId)"
+                        >
+                          <q-item-section
+                            style="min-width: 0px"
+                            avatar
+                            class="q-py-sm"
+                          >
+                            <q-icon
+                              color="primary"
+                              size="xs"
+                              name="mdi-bookmark-outline"
+                            />
                           </q-item-section>
                           <q-item-section>เลือกหน่วยงาน/ตำแหน่ง</q-item-section>
                         </q-item>
-                        <q-item clickable v-close-popup @click="clickDelete(props.row.personalId)">
-                          <q-item-section style="min-width: 0px" avatar class="q-py-sm">
+                        <q-item
+                          clickable
+                          v-close-popup
+                          @click="clickDelete(props.row.personalId)"
+                        >
+                          <q-item-section
+                            style="min-width: 0px"
+                            avatar
+                            class="q-py-sm"
+                          >
                             <q-tooltip>ลบข้อมูล</q-tooltip>
                             <q-icon color="red" size="xs" name="mdi-delete" />
                           </q-item-section>
@@ -386,9 +480,21 @@ onMounted(() => {
     </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" />
+  <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
index 1e8d43fc6..87fa0f99a 100644
--- a/src/modules/05_placement/components/AppointEmployee/Modal.vue
+++ b/src/modules/05_placement/components/AppointEmployee/Modal.vue
@@ -59,9 +59,7 @@ const fetchPublishFile = async () => {
       hideLoader();
     });
 };
-
 // โหลดข้อมูลโครงสร้างจาก json
-
 const loadTreeData = async () => {
   expanded.value = [];
   await http
@@ -69,7 +67,6 @@ const loadTreeData = async () => {
     .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;
@@ -81,7 +78,6 @@ const loadTreeData = async () => {
       hideLoader();
     });
 };
-
 function filterByPersonIdNull(obj: any) {
   if (obj.name === null && obj.isCondition != true) {
     return true;
@@ -92,12 +88,10 @@ function filterByPersonIdNull(obj: any) {
   }
   return false;
 }
-
 // โหลด position
-
 const fetchplacementPosition = async () => {
   await http
-    .get(config.API.apppointmentPosition())
+    .get(config.API.apppointmentPositionUse())
     .then((res: any) => {
       placementPosition.value = res.data.result;
     })
@@ -105,9 +99,6 @@ const fetchplacementPosition = async () => {
       messageError($q, e);
     });
 };
-
-
-
 const props = defineProps({
   personalId: String,
   modal: Boolean,
@@ -117,10 +108,8 @@ const props = defineProps({
   },
   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) ||
@@ -138,7 +127,6 @@ const myFilterMethod = (node: any, filter: string) => {
     (node.positionLevel && node.positionLevel.indexOf(filt) > -1)
   );
 };
-
 const validateData = async () => {
   checkValidate.value = true;
   await myFormPosition.value.validate().then((result: boolean) => {
@@ -147,7 +135,6 @@ const validateData = async () => {
     }
   });
 };
-
 const saveAppoint = async () => {
   myFormPosition.value.validate().then(async (result: boolean) => {
     if (props.personalId !== undefined) {
@@ -165,8 +152,8 @@ const saveAppoint = async () => {
       };
       showLoader();
       await http
-        .put(config.API.appointmentPosition(id.value), dataAppoint)
-        .then((res) => {
+        .put(config.API.appointEmployeePosition(id.value), dataAppoint)
+        .then(() => {
           success($q, "บันทึกสำเร็จ");
         })
         .catch((e) => {
@@ -182,8 +169,6 @@ const saveAppoint = async () => {
     }
   });
 };
-
-
 const closeModal = () => {
   if (editDataStatus.value == true) {
     dialogConfirm(
@@ -199,7 +184,6 @@ const closeModal = () => {
     closeAndClear();
   }
 };
-
 const closeAndClear = async () => {
   await props.close();
   editDataStatus.value = false;
diff --git a/src/modules/05_placement/components/probation/FormEvaluation/FormEvaluateScore.vue b/src/modules/05_placement/components/probation/FormEvaluation/FormEvaluateScore.vue
index 0e605e6f6..a63590df8 100644
--- a/src/modules/05_placement/components/probation/FormEvaluation/FormEvaluateScore.vue
+++ b/src/modules/05_placement/components/probation/FormEvaluation/FormEvaluateScore.vue
@@ -114,9 +114,9 @@ const fecthAssign = async () => {
         director_id3.value = res.data.data.mentors[0].name;
       }
 
-      dateAutherise.value = res.data.data.chairman_dated;
-      director1_dated.value = res.data.data.director1_dated;
-      director2_dated.value = res.data.data.director2_dated;
+      // dateAutherise.value = res.data.data.chairman_dated;
+      // director1_dated.value = res.data.data.director1_dated;
+      // director2_dated.value = res.data.data.director2_dated;
     })
     .catch((e) => {
       messageError($q, e);
@@ -165,7 +165,9 @@ const fetchEvaluate = async () => {
     other_training_percent.value = data.develop_other_training_percent;
     develop_result.value = data.develop_result;
     evaluate_result.value = data.evaluate_result;
-
+    dateAutherise.value = data.chairman_dated;
+    director1_dated.value = data.director1_dated;
+    director2_dated.value = data.director2_dated;
     if (
       data.achievement_other_desc !== "" &&
       data.achievement_other_level !== null
@@ -463,8 +465,9 @@ onMounted(async () => {
             </div>
             <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
             การทดลองปฎิบัติหน้าที่ราชการ<span class="text-primary q-pr-sm">{{
-                "ครั้งที่ " + assign.round_no
-              }}</span> ตั้งแต่วันที่
+              "ครั้งที่ " + assign.round_no
+            }}</span>
+            ตั้งแต่วันที่
             <span class="text-black q-px-sm">{{
               date2Thai(assign.date_start)
             }}</span>
diff --git a/src/modules/05_placement/interface/response/Main.ts b/src/modules/05_placement/interface/response/Main.ts
index 331e391b1..092ed294e 100644
--- a/src/modules/05_placement/interface/response/Main.ts
+++ b/src/modules/05_placement/interface/response/Main.ts
@@ -1,5 +1,6 @@
 interface OpType {
-    commandCode:string
+    commandCode: string
+    id: string
 }
 export type {
     OpType