From 6961e719f044cb5f1207932c7f80d9f3eb1b19ee Mon Sep 17 00:00:00 2001
From: setthawutttty <stw.ttty@gmail.com>
Date: Tue, 19 Sep 2023 18:04:54 +0700
Subject: [PATCH] =?UTF-8?q?=E0=B8=A3=E0=B8=B2=E0=B8=A2=E0=B8=81=E0=B8=B2?=
 =?UTF-8?q?=E0=B8=A3=E0=B9=81=E0=B8=95=E0=B9=88=E0=B8=87=E0=B8=95=E0=B8=B1?=
 =?UTF-8?q?=E0=B9=89=E0=B8=87-=E0=B9=80=E0=B8=A5=E0=B8=B7=E0=B9=88?=
 =?UTF-8?q?=E0=B8=AD=E0=B8=99-=E0=B8=A2=E0=B9=89=E0=B8=B2=E0=B8=A2=20?=
 =?UTF-8?q?=E0=B8=88=E0=B8=B1=E0=B8=94=E0=B9=82=E0=B8=84=E0=B9=89=E0=B8=94?=
 =?UTF-8?q?=20+=20component?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../AppointMent/AppointmentModal.vue          |  22 +-
 .../components/AppointMent/Detail.vue         |  94 ++--
 .../components/AppointMent/Dialogbody.vue     | 233 +++++++++
 .../components/AppointMent/Main.vue           | 469 +++++-------------
 .../05_placement/components/Other/Main.vue    |   3 -
 5 files changed, 401 insertions(+), 420 deletions(-)
 create mode 100644 src/modules/05_placement/components/AppointMent/Dialogbody.vue

diff --git a/src/modules/05_placement/components/AppointMent/AppointmentModal.vue b/src/modules/05_placement/components/AppointMent/AppointmentModal.vue
index 834e8bba6..e4ea460dd 100644
--- a/src/modules/05_placement/components/AppointMent/AppointmentModal.vue
+++ b/src/modules/05_placement/components/AppointMent/AppointmentModal.vue
@@ -9,7 +9,7 @@ import config from "@/app.config";
 
 const $q = useQuasar();
 const mixin = useCounterMixin(); //เรียกฟังก์ชันกลาง
-const { date2Thai, hideLoader, messageError, showLoader, success } = mixin; //ฟังก์ชันกลางที่เรียกใช้
+const { date2Thai, hideLoader, messageError, showLoader, success,dialogConfirm } = mixin; //ฟังก์ชันกลางที่เรียกใช้
 
 const notFound = ref<string>("ไม่พบข้อมูลที่ค้นหา");
 const noData = ref<string>("ไม่พบข้อมูลผังโครงสร้าง");
@@ -199,19 +199,17 @@ const editDataStatus = ref<boolean>(false);
 const clickEditRow = () => {
   editDataStatus.value = true;
 };
-
 const closeModal = () => {
   if (editDataStatus.value == true) {
-    $q.dialog({
-      title: `ข้อมูลมีการแก้ไข`,
-      message: `ยืนยันที่จะปิดโดยไม่บันทึกใช่หรือไม่?`,
-      cancel: "ยกเลิก",
-      ok: "ยืนยัน",
-      persistent: true,
-    }).onOk(() => {
-      editDataStatus.value = false;
-      closeAndClear();
-    });
+    dialogConfirm(
+      $q,
+      async () => {
+        editDataStatus.value = false;
+        await closeAndClear();
+      },
+      `ข้อมูลมีการแก้ไข`,
+      `ยืนยันที่จะปิดโดยไม่บันทึกใช่หรือไม่?`
+    );
   } else {
     closeAndClear();
   }
diff --git a/src/modules/05_placement/components/AppointMent/Detail.vue b/src/modules/05_placement/components/AppointMent/Detail.vue
index 979cb23a0..913122cdb 100644
--- a/src/modules/05_placement/components/AppointMent/Detail.vue
+++ b/src/modules/05_placement/components/AppointMent/Detail.vue
@@ -4,7 +4,6 @@ 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 http from "@/plugins/http";
@@ -15,6 +14,21 @@ const route = useRoute();
 const router = useRouter();
 const mixin = useCounterMixin();
 
+const appointment = ref<any>([]);
+const myform = ref<any>();
+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,
@@ -31,24 +45,9 @@ const title = ref<ResponseTitle>({
   positionLevelOld: "",
   positionTypeOld: "",
 });
-const appointment = ref<any>([]);
-const myform = ref<any>();
-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<string>("");
-const educationOld = ref<string>("");
-const reason = ref<string>("");
-const date = ref<Date | null>(null);
-const status = ref<string>("");
-const avatar = ref<string>("");
-onMounted(async () => {
-  await fecthappointmentByid();
-});
 
+
+//เรียกข้อมูลตาม id
 const fecthappointmentByid = async () => {
   showLoader();
   await http
@@ -56,22 +55,18 @@ const fecthappointmentByid = async () => {
     .then((res: any) => {
       const data = res.data.result;
       appointment.value = data;
-      // console.log(data);
-
       profileId.value = data.profileId;
-      title.value.fullname = `${data.firstname ?? "-"} ${data.lastname ?? "-"}`;
+      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),
-        console.log("🚀 ~ file: Detail.vue:65 ~ .then ~ status:", status.value);
-      educationOld.value = data.educationOld;
+      educationOld.value = data.educationOld ?? "-";
       organizationPositionOld.value = data.organizationPositionOld;
       positionTypeOld.value = data.positionTypeOld;
       positionLevelOld.value = data.positionLevelOld;
       posNo.value = data.positionNumberOld;
-      salary.value = data.salary;
-      // organization.value = data.organization; //ไม่มี
+      salary.value = data.salary ?? 0;
       reason.value = data.reason;
       date.value = data.positionDate;
       avatar.value = data.avatar ?? "";
@@ -83,8 +78,9 @@ const fecthappointmentByid = async () => {
       hideLoader();
     });
 };
+
+//ยืนยันการเเก้ไข
 const clickSave = async () => {
-  console.log(reason.value);
   await myform.value.validate().then(async (success: boolean) => {
     if (success) {
       dialogConfirm($q, () => putAppointment());
@@ -92,21 +88,13 @@ const clickSave = async () => {
     }
   });
 };
+// เเก้ไขข้อมูล
 const putAppointment = async () => {
-  console.log("บันทึกข้อมูล");
   let data = {
     citizenId: appointment.value.citizenId,
     prefixId: appointment.value.prefixId,
     firstname: appointment.value.firstname,
     lastname: appointment.value.lastname,
-    // dateOfBirth: "2023-08-15T08:44:38.060Z",
-    // genderId: "3fa85f64-5717-4562-b3fc-2c963f66afa6",
-    // nationality: "string",
-    // race: "string",
-    // religionId: "3fa85f64-5717-4562-b3fc-2c963f66afa6",
-    // bloodGroupId: "3fa85f64-5717-4562-b3fc-2c963f66afa6",
-    // relationshipId: "3fa85f64-5717-4562-b3fc-2c963f66afa6",
-    // telephoneNumber: "string",
     educationOld: educationOld.value,
     organizationPositionOld: organizationPositionOld.value,
     positionTypeOld: positionTypeOld.value,
@@ -115,10 +103,7 @@ const putAppointment = async () => {
     amountOld: Number(salary.value),
     reason: reason.value,
     positionDate: date.value,
-    // positionDate: "2023-08-15T08:44:38.060Z",
-    // file: ["string"],
   };
-  console.log(data);
   showLoader();
   await http
     .put(config.API.appointmentByid(paramsId.toString()), data)
@@ -127,7 +112,6 @@ const putAppointment = async () => {
     })
     .catch((e) => {
       messageError($q, e);
-      console.log(e);
     })
     .finally(() => {
       fecthappointmentByid();
@@ -140,6 +124,10 @@ const getClass = (val: boolean) => {
     "full-width cursor-pointer": !val,
   };
 };
+
+onMounted(async () => {
+  await fecthappointmentByid();
+});
 </script>
 <template>
   <div class="toptitle text-dark col-12 row items-center">
@@ -151,7 +139,7 @@ const getClass = (val: boolean) => {
       flat
       color="primary"
       class="q-mr-sm"
-      @click="router.go(-1)"
+      @click="router.push(`/appoint-promote`)"
     />
     รายละเอียดการแต่งตั้ง-เลื่อน {{ title.fullname }}
   </div>
@@ -345,37 +333,15 @@ const getClass = (val: boolean) => {
           </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="salary" :rules="[(val) => !!val || `${'กรุณากรอกเงินเดือน'}`]" hide-bottom-space
-                :label="`${'เงินเดือน'}`" type="number" /> -->
               <CurrencyInput
                 v-model="salary"
+                label="เงินเดือน"
                 :edit="edit"
-                :rules="[(val) => !!val || `${'กรุณากรอกเงินเดือน'}`]"
-                :options="{
-                  currency: 'THB',
-                }"
-                :label="`${'เงินเดือน'}`"
+                :rules="[(val:number) => !!val || `${'กรุณากรอกเงินเดือน'}`]"
               />
             </div>
           </div>
           <div class="col-12"><q-separator /></div>
-          <!-- <div class="col-xs-6 col-sm-6 row items-center">
-            <div class="col-12">
-              <q-input
-                :class="getClass(edit)"
-                :outlined="edit"
-                dense
-                lazy-rules
-                :readonly="!edit"
-                :borderless="!edit"
-                v-model="organization"
-                :rules="[(val) => !!val || `${'กรุณากรอกโอนไปสังกัด'}`]"
-                hide-bottom-space
-                :label="`${'โอนไปสังกัด'}`"
-              />
-            </div>
-          </div> -->
           <div class="col-xs-6 col-sm-6 row items-center">
             <div class="col-12">
               <datepicker
diff --git a/src/modules/05_placement/components/AppointMent/Dialogbody.vue b/src/modules/05_placement/components/AppointMent/Dialogbody.vue
new file mode 100644
index 000000000..d2484b1af
--- /dev/null
+++ b/src/modules/05_placement/components/AppointMent/Dialogbody.vue
@@ -0,0 +1,233 @@
+<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 http from "@/plugins/http";
+import config from "@/app.config";
+const mixin = useCounterMixin();
+const { showLoader, success, messageError, dialogConfirm,hideLoader } = mixin;
+
+const $q = useQuasar();
+import DialogHeader from "@/modules/05_placement/components/AppointMent/DialogHeader.vue";
+const selected = ref([]);
+const checkSelected = computed(() => {
+  if (selected.value.length === 0 || props.type === "") {
+    return true;
+  }
+});
+
+const props = defineProps({
+  Modal: Boolean,
+  clickClose: Function,
+  resetFilter: 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: true,
+    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: any) => {
+  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: any) => {
+    pId.push(e.personalId);
+  });
+  let data = {
+    id: pId,
+  };
+  showLoader();
+  await http
+    .put(config.API.apppointmentReport(Type), data)
+    .then((res: any) => {
+      success($q, "บันทึกสำเร็จ");
+    })
+    .catch((e: any) => {
+      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">
+            {{ type }}
+            <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/AppointMent/Main.vue b/src/modules/05_placement/components/AppointMent/Main.vue
index b27a0d3ee..50b6a6b1c 100644
--- a/src/modules/05_placement/components/AppointMent/Main.vue
+++ b/src/modules/05_placement/components/AppointMent/Main.vue
@@ -1,53 +1,43 @@
 <script setup lang="ts">
-import { ref, computed, onMounted } from "vue";
+import { ref, onMounted } from "vue";
 import type { QTableProps } from "quasar";
 import { useQuasar } from "quasar";
 import { useRouter } from "vue-router";
-import DialogHeader from "@/modules/05_placement/components/AppointMent/DialogHeader.vue";
-import DialogOrgTree from "@/modules/05_placement/components/AppointMent/AppointmentModal.vue";
 import { useCounterMixin } from "@/stores/mixin";
+import { useTransferDataStore } from "@/modules/05_placement/store"
+import Dialogbody from "@/modules/05_placement/components/AppointMent/Dialogbody.vue"
+import DialogOrgTree from "@/modules/05_placement/components/AppointMent/AppointmentModal.vue";
+
 import http from "@/plugins/http";
 import config from "@/app.config";
-import { WeekNumberContainer } from "@fullcalendar/core/internal";
+
+const $q = useQuasar();
+const modal = ref<boolean>(false);
+const storeFn = useTransferDataStore();
+const { statusText } = storeFn
 const mixin = useCounterMixin(); //เรียกฟังก์ชันกลาง
 const {
   showLoader,
   hideLoader,
-  dateText,
   success,
   messageError,
   date2Thai,
-  dialogConfirm,
   dialogRemove,
 } = mixin;
 
-const selected = ref([]);
-const checkSelected = computed(() => {
-  if (selected.value.length === 0 || type.value === "") {
-    return true;
-  }
-});
-
-// const add = () => {
-//   router.push(`/receive/add`);
-// };
-
-const clickClose = () => {
-  modal.value = false;
-};
-
-const $q = useQuasar();
-const modal = ref<boolean>(false);
-const popup = () => {
-  modal.value = true;
-  selected.value = [];
-  fecthTypeOption();
-};
 const router = useRouter();
-
+const rows = ref<any>([]);
+const rows2 = ref<any>([]);
 const modalTree = ref<boolean>(false);
 const personal = ref<any[]>([]);
 const personalId = ref<string>("");
+const filterKeyword = ref<string>("");
+const filterKeyword2 = ref<string>("");
+const filterRef = ref<any>(null);
+const listRecevice = ref<any>([]);
+const optionsType = ref<any[]>([]);
+const type = ref<string>("");
+
 const visibleColumns = ref<string[]>([
   "no",
   "citizenId",
@@ -57,94 +47,12 @@ const visibleColumns = ref<string[]>([
   "createdAt",
   "status",
 ]);
-const visibleColumns2 = ref<string[]>([
-  "no",
-  "citizenId",
-  "fullname",
-  "organizationName",
-  "birthday",
-]); //ค้นหา คอลัมน์ คอลัมน์ที่แสดง
-const filterKeyword = ref<string>("");
-const filterKeyword2 = ref<string>("");
-const filterRef = ref<any>(null);
-const resetFilter = () => {
-  filterKeyword.value = "";
-  filterKeyword2.value = "";
-  filterRef.value.focus();
-};
-
-const optionsType = ref<any[]>([]);
-const type = ref<string>("");
-
-onMounted(() => {
-  fecthlistappointment();
+const pagination = ref({
+  sortBy: "createdAt",
+  descending: true,
+  page: 1,
+  rowsPerPage: 10,
 });
-const listRecevice = ref<any>([]);
-const fecthlistappointment = async () => {
-  showLoader();
-  rows.value = [];
-  await http
-    .get(config.API.appointmentMain())
-    .then((res) => {
-      console.log(res);
-      let response = res.data.result;
-      listRecevice.value = response;
-      console.log(response);
-      rows.value = response.map((e: any) => ({
-        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: status(e.status),
-        createdAt: date2Thai(e.createdAt),
-
-        birthday: e.dateOfBirth == null ? "-" : date2Thai(e.dateOfBirth),
-      }));
-      // console.log(rows.value);
-      rows2.value = rows.value.filter(
-        (e: any) =>
-          e.orgName !== null &&
-          e.status !== "ส่งรายชื่อไปออกคำสั่ง" &&
-          e.status !== "ออกคำสั่งเสร็จแล้ว"
-      );
-    })
-    .catch((e) => {
-      console.log(typeof e);
-    })
-    .finally(() => {
-      hideLoader();
-    });
-};
-const fecthTypeOption = async () => {
-  type.value = "";
-  await http
-    .get(config.API.typeOrder())
-    .then((res) => {
-      optionsType.value = res.data.result.filter(
-        (e: any) =>
-          e.commandCode === "C-PM-05" ||
-          e.commandCode === "C-PM-06" ||
-          e.commandCode === "C-PM-07"
-      );
-    })
-    .catch((e) => {
-      messageError($q, e);
-    });
-};
-
-const rows = ref<any>([]);
-const rows2 = ref<any>([]);
 const columns = ref<QTableProps["columns"]>([
   {
     name: "no",
@@ -211,65 +119,99 @@ const columns = ref<QTableProps["columns"]>([
   },
 ]);
 
-const columns2 = ref<QTableProps["columns"]>([
-  {
-    name: "no",
-    align: "left",
-    label: "ลำดับ",
-    sortable: true,
-    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",
-  },
-]);
+//รีเซ็ต 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: any) => ({
+        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),
+      }));
+      rows2.value = rows.value.filter(
+        (e: any) =>
+          e.orgName !== null &&
+          e.status !== "ส่งรายชื่อไปออกคำสั่ง" &&
+          e.status !== "ออกคำสั่งเสร็จแล้ว"
+      );
+    })
+    .catch((e) => {
+    })
+    .finally(() => {
+      hideLoader();
+    });
+};
+
+//ดึงข้อมูลประเภทคำสั่งเเต่งตั้ง
+const fecthTypeOption = async () => {
+  type.value = "";
+  await http
+    .get(config.API.typeOrder())
+    .then((res) => {
+      optionsType.value = res.data.result.filter(
+        (e: any) =>
+          e.commandCode === "C-PM-05" ||
+          e.commandCode === "C-PM-06" ||
+          e.commandCode === "C-PM-07"
+      );
+    })
+    .catch((e) => {
+      messageError($q, e);
+    });
+};
+
+// เปิดโครงสร้าง
 const openModalTree = (id: string) => {
   personalId.value = id;
   personal.value = listRecevice.value.filter((e: any) => e.id === id);
   modalTree.value = true;
 };
-
+//เเจ้งเตือนลบข้อมูล
 const clickDelete = (id: string) => {
   dialogRemove($q, () => deleteAppoint(id));
 };
+
+// ลบข้อมูล
 const deleteAppoint = async (id: string) => {
   showLoader();
   await http
@@ -286,66 +228,22 @@ const deleteAppoint = async (id: string) => {
     });
 };
 
-const clickAddlist = () => {
-  dialogConfirm($q, () => createdAppoint());
-};
-const createdAppoint = async () => {
-  let pId: string[] = [];
-  selected.value.forEach((e: any) => {
-    pId.push(e.personalId);
-  });
-  let data = {
-    id: pId,
-  };
-  // console.log(data);
-  showLoader();
-  await http
-    .put(config.API.apppointmentReport(type.value), data)
-    .then((res: any) => {
-      console.log(res);
-      success($q, "บันทึกสำเร็จ");
-    })
-    .catch((e: any) => {
-      // console.log(e);
-      messageError($q, e);
-    })
-    .finally(() => {
-      hideLoader();
-      fecthlistappointment();
-      selected.value = [];
-      modal.value = false;
-    });
-};
-
+// ปิด modal โครงส้ราง
 const closeModalTree = async () => {
   await fecthlistappointment();
   modalTree.value = false;
 };
 
+// ไปหน้ารายละเอียด
 const nextPage = (row: any) => {
   router.push({
     path: `appoint-promote/detail/${row.personalId}`,
   });
 };
-const status = (val: string) => {
-  switch (val) {
-    case "WAITTING":
-      return "รอดำเนินการ";
-    case "PENDING":
-      return "เลือกตำแหน่งแล้ว";
-    case "REPORT":
-      return "ส่งรายชื่อไปออกคำสั่ง";
-    case "DONE":
-      return "ออกคำสั่งเสร็จแล้ว";
-    default:
-      return "-";
-  }
-};
-const pagination = ref({
-  sortBy: "createdAt",
-  descending: true,
-  page: 1,
-  rowsPerPage: 10,
+
+
+onMounted(() => {
+  fecthlistappointment();
 });
 </script>
 <template>
@@ -357,10 +255,6 @@ const pagination = ref({
     <div class="row q-pa-md">
       <div class="col-12">
         <div class="row col-12">
-          <!-- <q-btn flat round color="primary" @click="add" icon="mdi-plus">
-            <q-tooltip>เพิ่มข้อมูล</q-tooltip>
-          </q-btn> -->
-
           <q-btn @click="popup()" size="14px" flat round color="add" icon="mdi-account-arrow-right">
             <q-tooltip>ส่งไปออกคำสั่งแต่งตั้ง-เลื่อน-ย้าย</q-tooltip>
           </q-btn>
@@ -407,26 +301,12 @@ const pagination = ref({
                     ">
                     <div class="col-4">
                       <div class="text-weight-medium">
-                        {{
-                          props.row.orgName !== null ? props.row.orgName : "-"
-                        }}
-                        {{
-                          props.row.organizationShortName !== null
-                          ? `(${props.row.organizationShortName})`
-                          : ""
-                        }}
+                        {{ props.row.orgName !== null ? props.row.orgName : "-" }}
+                        {{ props.row.organizationShortName !== null ? `(${props.row.organizationShortName})` : "" }}
                       </div>
                       <div class="text-weight-light">
-                        {{
-                          props.row.positionPath !== null
-                          ? props.row.positionPath
-                          : "-"
-                        }}
-                        {{
-                          props.row.positionNumber !== null
-                          ? `(${props.row.positionNumber})`
-                          : ""
-                        }}
+                        {{ props.row.positionPath !== null ? props.row.positionPath : "-" }}
+                        {{ props.row.positionNumber !== null ? `(${props.row.positionNumber})` : "" }}
                       </div>
                     </div>
                   </div>
@@ -476,109 +356,16 @@ const pagination = ref({
     </div>
   </q-card>
 
-  <q-dialog v-model="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 v-model="type" :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" v-model="filterKeyword2" 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="resetFilter" />
-                </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-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="nextPage(props.row)">
-                {{ props.row.citizenId }}
-              </q-td>
-              <q-td key="fullname" :props="props" @click="nextPage(props.row)">
-                {{ props.row.fullname }}
-              </q-td>
-              <q-td key="organizationName" :props="props" @click="nextPage(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="nextPage(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>
-
+  <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" />
-  <!-- :personalId="personalId" -->
 </template>
 <style scoped lang="scss"></style>
diff --git a/src/modules/05_placement/components/Other/Main.vue b/src/modules/05_placement/components/Other/Main.vue
index 5771475aa..db43aa88e 100644
--- a/src/modules/05_placement/components/Other/Main.vue
+++ b/src/modules/05_placement/components/Other/Main.vue
@@ -27,7 +27,6 @@ const rows2 = ref<any>([]);
 const filterKeyword = ref<string>("");
 const filterKeyword2 = ref<string>("");
 const filterRef = ref<any>(null);
-const selected = ref([]);
 
 const pagination = ref({
   sortBy: "createdAt",
@@ -193,7 +192,6 @@ const popup = () => {
   filterKeyword2.value = "";
   fecthTypeOption();
   type.value = "";
-  selected.value = [];
 };
 
 //----(ปิด modal)------//
@@ -336,7 +334,6 @@ onMounted(() => {
   :clickClose="clickClose"
   :optionsType="optionsType"
   :rows2="rows2"
-  :selected="selected"
   v-model:filterKeyword2="filterKeyword2"
   v-model:type="type"
   :fecthlistOthet="fecthlistOthet"