Refactoring code module 05_placement

src/modules/05_placement/views/01_Main.vue

@@ -312,8 +312,6 @@ async function expiredAccountFilter() {
   await DataStore.DataMain(updatedRows);
 }
 
-/** filter ใน dropdown ครั้งที่ */
-
 /**
  * ฟังชั่น กรอกข้อมูลเพื่อ ค้นหา
  * @param val ค่าที่กรอก
@@ -376,7 +374,9 @@ function paginationLabel(start: number, end: number, total: number) {
   else return start + "-" + end + " ใน " + total;
 }
 
-/** เรียกใช้ฟังชั่น เมื่อเริ่มหน้านี้ */
+/**
+ * เรียกใช้ฟังชั่น เมื่อเริ่มหน้านี้
+ */
 onMounted(async () => {
   await fetchYearOptions();
 });

src/modules/05_placement/views/02_transferMain.vue

@@ -21,14 +21,13 @@ const { statusText } = useTransferDataStore();
 const { date2Thai, messageError, showLoader, hideLoader } = mixin;
 
 const modal = ref<boolean>(false); //ส่งไปออกคำสั่ง
-const rowsOrder = ref<ResponseData[]>([]);
-const filterOrder = ref<string>("");
-
-const filterMain = ref<string>(""); //คำค้นหารายการข้อโอน
-const rows = ref<ResponseData[]>([]);
-const dataTransfer = ref<ResponseData[]>([]);
+const dataTransfer = ref<ResponseData[]>([]); //ช่อมูลรายการขอโอน
 
 //Table
+const rows = ref<ResponseData[]>([]); //รายการขอโอน
+const filterMain = ref<string>(""); //คำค้นหารายการขอโอน
+const rowsOrder = ref<ResponseData[]>([]); //รายการส่งไปออกคำสั่ง
+const filterOrder = ref<string>(""); //คำค้นหารายการส่งไปออกคำสั่ง
 const columns = ref<QTableProps["columns"]>([
   {
     name: "no",

src/modules/05_placement/views/03_receiveMain.vue

@@ -15,8 +15,8 @@ import type {
   ResponseRow,
 } from "@/modules/05_placement/interface/response/Receive";
 
-import Dialogbody from "@/modules/05_placement/components/Receive/Dialogbody.vue";
-import DialogHeader from "@/modules/05_placement/components/Receive/DialogHeader.vue";
+import Dialogbody from "@/modules/05_placement/components/Receive/DialogOrders.vue";
+import DialogHeader from "@/components/DialogHeader.vue";
 import DialogOrgSelect from "@/components/Dialogs/DialogOrgSelect.vue";
 
 const $q = useQuasar();
@@ -34,27 +34,27 @@ const {
 } = mixin;
 
 const dataRecevice = ref<ResponseData[]>([]); //ข้อมูลรายการรับโอน
+const filters = ref<ResponseRow[]>([]); //ข้อมูลรายการรับโอน
+const dataRows = ref<ResponseRow>(); //ข้อมูลที่ต้องการเลือกหน่วยงานที่รับโอน
+const modal = ref<boolean>(false); //แสดง popup ส่งไปออกคำสั่งรับโอน
+const modalupload = ref<boolean>(false); //แสดง popup อัปโหลดเอกสาร
+const modalTree = ref<boolean>(false); //แสดง popup เลือกหน่วยงานที่รับโอน
 
-const dataRows = ref<any[]>([]);
-const rows2 = ref<ResponseRow[]>([]);
-const modal = ref<boolean>(false);
-const modalupload = ref<boolean>(false);
-const modalTree = ref<boolean>(false);
-const myForm = ref<any>();
-const personal = ref<ResponseData[]>([]);
-const personalId = ref<string>("");
-const filterKeyword = ref<string>("");
-const filterKeyword2 = ref<string>("");
-const filterRef = ref<any>(null);
-const files = ref<any>();
-const filters = ref<ResponseRow[]>([]);
-const rows = ref<ResponseRow[]>([]);
-const posType = ref<string>("");
-const posLevel = ref<string>("");
-const position = ref<string>("");
+const personal = ref<ResponseData[]>([]); //ข้อมูลบุคคล
+const personalId = ref<string>(""); //บุคคล
+
+const files = ref<any>(); //ไฟล์
+
+const posType = ref<string>(""); //ประเภทตำแหน่ง
+const posLevel = ref<string>(""); //ระดับตำแหน่ง
+const position = ref<string>(""); //ตำแหน่ง
 const type = ref<string | null>(null);
 
 //Table
+const rows = ref<ResponseRow[]>([]); //รายการรับโอน
+const rows2 = ref<ResponseRow[]>([]); //รายการออกคำสั่ง
+const filterKeyword = ref<string>(""); //คำค้นหารายการรับโอน
+const filterKeyword2 = ref<string>(""); //คำค้นหารายการออกคำสั่ง
 const visibleColumns = ref<string[]>([
   "no",
   "citizenId",
@@ -143,6 +143,9 @@ const columns = ref<QTableProps["columns"]>([
   },
 ]);
 
+/**
+ * ฟังก์ชันดึงข้อมูลรายการรับโอน
+ */
 async function fecthlistRecevice() {
   showLoader();
   await http
@@ -189,45 +192,58 @@ function onSubmitDoc() {
     });
 }
 
-// รีเซ็ตค่าในฟิลเตอร์
-const resetFilter = () => {
+/**
+ * ฟังก์ชันบรีเซ็ตค่าในฟิลเตอร์
+ */
+function resetFilter() {
   filterKeyword.value = "";
   filterKeyword2.value = "";
-  filterRef.value.focus();
-};
-
-// ปิดโมเดล
-const clickClose = () => {
+}
+/**
+ * ฟังก์ชันปิด popup ออกคำสั่ง
+ */
+function clickClose() {
   modal.value = false;
   filterKeyword2.value = "";
-};
-// ปิดโมเดลอัปเดตไฟล์
-const clickCloseUpload = () => {
+}
+
+/**
+ * ฟังก์ชันปิด popup อัปเดตไฟล์
+ */
+function clickCloseUpload() {
   modalupload.value = false;
   files.value = null;
-};
-// ปิดโมเดลโครงสร้าง
-const openModalTree = (id: string, data: any) => {
+}
+
+/**
+ * ฟังก์ชันเปิด popup เลือกหน่วยงานที่รับโอน
+ */
+function openModalTree(id: string, data: any) {
   personalId.value = id;
   personal.value = dataRecevice.value.filter((e: ResponseData) => e.id === id);
   dataRows.value = data;
-
   modalTree.value = true;
   type.value = null;
   dataRows.value = data;
-  // console.log("data===>", data);
-
   posType.value = data.posTypeOldId;
   posLevel.value = data.posLevelOldId;
   position.value = data.positionOld;
-};
-// เปิดโมเดลไฟล์
-const openUpload = (id: string) => {
+}
+
+/**
+ * ฟังก์ชันเปิด popup อัปเดตไฟล์
+ * @param id รายการที่ต้องการอัปเดตไฟล์
+ */
+function openUpload(id: string) {
   personalId.value = id;
   modalupload.value = true;
-};
-// ยินยันลบข้อมูล
-const openDelete = (id: string) => {
+}
+
+/**
+ * ฟังก์ชันยืนยันการลบข้อมูล
+ * @param id  รายการที่ต้องการลบ
+ */
+function openDelete(id: string) {
   dialogRemove($q, async () => {
     showLoader();
     await http
@@ -241,16 +257,24 @@ const openDelete = (id: string) => {
         hideLoader();
       });
   });
-};
+}
 
-// ไปหน้ารายละเอียด
-const nextPage = (id: string) => {
+/**
+ * ฟังก์ชันไปหน้ารายละเอียด
+ * @param id  รายการที่ต้องการดูรายละเอียก
+ */
+function nextPage(id: string) {
   router.push({
     path: `/placement/receive/${id}`,
   });
-};
+}
 
-const popup = () => {
+/**
+ * ฟังก์ชันส่งไปออกคำสั่ง
+ *
+ * ค้นหารายชื่อออกคำสั่งตามสถานะ อนุมัติ (APPROVE)
+ */
+function openModalOrder() {
   const row = filters.value.filter(
     (r: any) =>
       (r.status == "WAITTING" ||
@@ -267,10 +291,9 @@ const popup = () => {
 
   rows2.value = row;
   modal.value = true;
-};
+}
 
 function onSave(data: any) {
-  console.log("not save", data);
   const dataAppoint = {
     node: data.node,
     nodeId: data.nodeId,
@@ -303,6 +326,9 @@ function onSave(data: any) {
     });
 }
 
+/**
+ * ทำงานเมื่อมีการเรียกใช้ Components
+ */
 onMounted(() => {
   fecthlistRecevice();
 });
@@ -331,7 +357,7 @@ onMounted(() => {
             round
             color="add"
             icon="mdi-account-arrow-right"
-            @click="popup()"
+            @click="openModalOrder()"
           >
             <q-tooltip>ส่งไปออกคำสั่งรับโอน</q-tooltip>
           </q-btn>
@@ -550,34 +576,23 @@ onMounted(() => {
     </div>
   </q-card>
 
-  <!-- ออกคำสั่ง -->
-  <Dialogbody
-    v-model:Modal="modal"
-    :clickClose="clickClose"
-    :rows2="rows2"
-    v-model:filterKeyword2="filterKeyword2"
-    :fecthlistRecevice="fecthlistRecevice"
-    :nextPage="nextPage"
-  />
-
   <!-- อัปโหลดเอกสาร -->
   <q-dialog v-model="modalupload">
     <q-card style="width: 600px">
       <q-form greedy @submit.prevent @validation-success="onSubmitDoc">
-        <DialogHeader title="อัปโหลดเอกสาร" :close="clickCloseUpload" />
+        <DialogHeader tittle="อัปโหลดเอกสาร" :close="clickCloseUpload" />
         <q-separator />
         <q-card-section class="q-py-sm">
           <div class="col-12 row items-center q-col-gutter-sm">
             <div class="col-12">
               <q-file
-                ref="myForm"
                 outlined
                 dense
                 v-model="files"
                 label="อัปโหลดเอกสาร"
                 lazy-rules
                 :rules="[
-                  (val) => val || 'กรุณาเลือกไฟล์หนังสือถึงหน่วยงานที่รับโอน',
+                  (val:string) => val || 'กรุณาเลือกไฟล์หนังสือถึงหน่วยงานที่รับโอน',
                 ]"
                 hide-bottom-space
               >
@@ -599,6 +614,16 @@ onMounted(() => {
     </q-card>
   </q-dialog>
 
+  <!-- ออกคำสั่ง -->
+  <Dialogbody
+    v-model:modal="modal"
+    v-model:filter-keyword2="filterKeyword2"
+    :click-close="clickClose"
+    :rows2="rows2"
+    :fecthlist-recevice="fecthlistRecevice"
+    :next-page="nextPage"
+  />
+
   <!-- เลือกหน่วยงานที่รับโอน -->
   <DialogOrgSelect
     :title="`เลือกหน่วยงานที่รับโอน`"

src/modules/05_placement/views/04_helpGovernmentMain.vue

@@ -0,0 +1,415 @@
+<script setup lang="ts">
+import { ref, onMounted } from "vue";
+import { useQuasar } from "quasar";
+
+import { checkPermission } from "@/utils/permissions";
+import { useRouter } from "vue-router";
+import { useTransferDataStore } from "@/modules/05_placement/store";
+import { useCounterMixin } from "@/stores/mixin";
+import http from "@/plugins/http";
+import config from "@/app.config";
+
+/**
+ * importType
+ */
+import type { QTableProps } from "quasar";
+import type { officerType } from "@/modules/05_placement/interface/response/officer";
+
+/**
+ * importComponents
+ */
+import Dialogbody from "@/modules/05_placement/components/Help-Government/DialogOrders.vue";
+
+const $q = useQuasar();
+const router = useRouter();
+const transferStore = useTransferDataStore();
+const { statusText } = transferStore;
+const mixin = useCounterMixin();
+const {
+  date2Thai,
+  messageError,
+  showLoader,
+  hideLoader,
+  success,
+  dialogRemove,
+  findOrgNameOld,
+  findPosMasterNoOld,
+} = mixin;
+
+/**
+ * Table
+ */
+const modal = ref<boolean>(false); //แสดง popup ส่งไปออกคำสั่งช่วยราชการ;
+
+const filterKeyword = ref<string>(""); //คำค้นหารายการช่วยราชการ
+const filterKeyword2 = ref<string>(""); //คำค้นหารายการออกคำสั่ง
+const rows = ref<officerType[]>([]); //รายการช่วยราชการ
+const rows2 = ref<officerType[]>([]); //รายการออกคำสั่ง
+const columns = ref<QTableProps["columns"]>([
+  {
+    name: "no",
+    align: "left",
+    label: "ลำดับ",
+    sortable: false,
+    field: "no",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "name",
+    align: "left",
+    label: "ชื่อ-นามสกุล",
+    sortable: true,
+    field: "name",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    format(val, row) {
+      return `${row.prefix}${row.firstName} ${row.lastName}`;
+    },
+  },
+  {
+    name: "posMasterNoOld",
+    align: "left",
+    label: "ตำแหน่งเลขที่",
+    sortable: true,
+    field: "posMasterNoOld",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    format(val, row) {
+      return findPosMasterNoOld(row);
+    },
+  },
+  {
+    name: "positionOld",
+    align: "left",
+    label: "ตำแหน่งในสายงาน",
+    sortable: true,
+    field: "positionOld",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "positionLevel",
+    align: "left",
+    label: "ประเภทตำแหน่ง",
+    sortable: true,
+    field: "positionLevel",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    format(val, row) {
+      let name = "";
+      if (row.posTypeNameOld && row.posLevelNameOld) {
+        name = `${row.posTypeNameOld} (${row.posLevelNameOld})`;
+      } else if (row.posTypeNameOld) {
+        name = `${row.posTypeNameOld}`;
+      } else if (row.posLevelNameOld) {
+        name = `(${row.posLevelNameOld})`;
+      } else name = "-";
+      return name;
+    },
+  },
+  {
+    name: "organizationPositionOld",
+    align: "left",
+    label: "สังกัด",
+    sortable: true,
+    field: "organization",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    format: (val, row) => findOrgNameOld(row),
+  },
+  {
+    name: "organization",
+    align: "left",
+    label: "หน่วยงานที่ให้ช่วยราชการ",
+    sortable: true,
+    field: "organization",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "dateStart",
+    align: "left",
+    label: "วันเริ่มช่วยราชการ",
+    sortable: true,
+    field: "dateStart",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    format: (val) => date2Thai(val),
+  },
+  {
+    name: "dateEnd",
+    align: "left",
+    label: "วันสิ้นสุดการช่วยราชการ",
+    sortable: true,
+    field: "dateEnd",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    format: (val) => date2Thai(val),
+  },
+  {
+    name: "createdAt",
+    align: "left",
+    label: "วันที่ดำเนินการ",
+    sortable: true,
+    field: "createdAt",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    format: (val) => date2Thai(val),
+  },
+  {
+    name: "status",
+    align: "left",
+    label: "สถานะ",
+    sortable: true,
+    field: "status",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    format: (val) => statusText(val),
+  },
+]);
+const visibleColumns = ref<string[]>([
+  "no",
+  "name",
+  "posMasterNoOld",
+  "positionOld",
+  "positionLevel",
+  "organizationPositionOld",
+  "organization",
+  "dateStart",
+  "dateEnd",
+  "createdAt",
+  "status",
+]);
+
+/**
+ * fetch รายการช่วยราชการ
+ */
+async function getData() {
+  showLoader();
+  await http
+    .get(config.API.officerMain())
+    .then(async (res) => {
+      const data = await res.data.result;
+      rows.value = data;
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+/**
+ * ยืนยันการลบรายการช่วยราชการ
+ * @param id รายการที่ต้องการลบ
+ */
+function clickDelete(id: string) {
+  dialogRemove($q, () => {
+    showLoader();
+    http
+      .delete(config.API.officerMainDelete(id))
+      .then(async () => {
+        await getData();
+        await success($q, "ลบข้อมูลสำเร็จ");
+      })
+      .catch((e) => {
+        messageError($q, e);
+      })
+      .finally(() => {
+        hideLoader();
+      });
+  });
+}
+
+/**
+ * rediarect หน้ารายละเอียดข้อมูล
+ * @param id รายการช่วยราชการที่ต้องการดูรายละเอียด
+ */
+function openDetail(id: string) {
+  router.push(`/placement/help-government/detail/${id}`);
+}
+
+/**
+ * เปิด popup ส่งไปออกคำสั่งช่วยราชการ
+ */
+function openModalOrder() {
+  const row = rows.value.filter(
+    (item: officerType) =>
+      (item.status == "WAITTING" ||
+        item.status == "PENDING" ||
+        item.status == "APPROVE") &&
+      item.organizationPositionOld &&
+      item.organization &&
+      item.dateStart &&
+      item.dateEnd
+  );
+  rows2.value = row;
+  modal.value = true;
+}
+
+/**
+ * ปิด popup ส่งไปออกคำสั่งช่วยราชการ
+ */
+function closeModal() {
+  modal.value = false;
+  filterKeyword2.value = "";
+}
+
+/**
+ * รีเซ็ตข้อมูลในช่องฟิลเตอร์
+ */
+function resetFilter() {
+  filterKeyword.value = "";
+  filterKeyword2.value = "";
+}
+
+/**
+ * ทำงานเมื่อมีการเรียกใช้ Components
+ */
+onMounted(() => {
+  getData();
+});
+</script>
+
+<template>
+  <div class="toptitle text-dark col-12 row items-center">รายการช่วยราชการ</div>
+  <q-card flat bordered class="col-12 q-mt-sm">
+    <q-separator />
+    <div class="row q-pa-md">
+      <div class="col-12">
+        <div class="row col-12">
+          <q-btn
+            v-if="checkPermission($route)?.attrIsUpdate"
+            @click="openModalOrder"
+            size="14px"
+            flat
+            round
+            color="add"
+            icon="mdi-account-arrow-right"
+          >
+            <q-tooltip>ส่งไปออกคำสั่งช่วยราชการ</q-tooltip>
+          </q-btn>
+          <q-space />
+          <q-input
+            class="col-xs-12 col-sm-3 col-md-2"
+            standout
+            dense
+            v-model="filterKeyword"
+            ref="filterRef"
+            outlined
+            debounce="300"
+            placeholder="ค้นหา"
+          >
+            <template v-slot:append>
+              <q-icon v-if="filterKeyword == ''" name="search" />
+              <q-icon
+                v-if="filterKeyword !== ''"
+                name="clear"
+                class="cursor-pointer"
+                @click="resetFilter"
+              />
+            </template>
+          </q-input>
+
+          <q-select
+            v-model="visibleColumns"
+            multiple
+            outlined
+            dense
+            options-dense
+            :display-value="$q.lang.table.columns"
+            emit-value
+            map-options
+            :options="columns"
+            option-value="name"
+            options-cover
+            style="min-width: 150px"
+            class="col-xs-12 col-sm-3 col-md-2 q-ml-sm"
+          />
+        </div>
+
+        <div class="col-12 q-pt-sm">
+          <d-table
+            :columns="columns"
+            :rows="rows"
+            :filter="filterKeyword"
+            row-key="id"
+            :visible-columns="visibleColumns"
+          >
+            <template v-slot:header="props">
+              <q-tr :props="props">
+                <q-th auto-width />
+                <q-th v-for="col in props.cols" :key="col.name" :props="props">
+                  <span class="text-weight-medium">{{ col.label }}</span>
+                </q-th>
+              </q-tr>
+            </template>
+            <template v-slot:body="props">
+              <q-tr :props="props">
+                <q-td auto-width>
+                  <q-btn
+                    v-if="checkPermission($route)?.attrIsGet"
+                    flat
+                    dense
+                    round
+                    color="info"
+                    icon="mdi-eye"
+                    @click.stop.prevent="openDetail(props.row.id)"
+                  >
+                    <q-tooltip>รายละเอียด</q-tooltip>
+                  </q-btn>
+
+                  <q-btn
+                    v-if="
+                      props.row.status !== 'REPORT' &&
+                      props.row.status !== 'DONE' &&
+                      checkPermission($route)?.attrIsDelete
+                    "
+                    icon="delete"
+                    flat
+                    round
+                    dense
+                    color="red"
+                    @click.stop.prevent="clickDelete(props.row.id)"
+                  >
+                    <q-tooltip>ลบข้อมูล</q-tooltip>
+                  </q-btn>
+                </q-td>
+                <q-td v-for="col in props.cols" :key="col.id">
+                  <div v-if="col.name === 'no'">
+                    {{ props.rowIndex + 1 }}
+                  </div>
+
+                  <div
+                    v-else
+                    :class="
+                      col.name === 'organizationPositionOld' ||
+                      col.name === 'organization'
+                        ? 'table_ellipsis'
+                        : ''
+                    "
+                  >
+                    {{
+                      col.value == null ? "" : col.value == "" ? "-" : col.value
+                    }}
+                  </div>
+                </q-td>
+              </q-tr>
+            </template>
+          </d-table>
+        </div>
+      </div>
+    </div>
+  </q-card>
+
+  <Dialogbody
+    v-model:Modal="modal"
+    v-model:filter-keyword2="filterKeyword2"
+    :get-data="getData"
+    :close-modal="closeModal"
+    :rows2="rows2"
+  />
+</template>
+<style scoped lang="scss"></style>

src/modules/05_placement/views/05_repatriateMain.vue

@@ -0,0 +1,378 @@
+<script setup lang="ts">
+import { ref, onMounted } from "vue";
+import { useQuasar } from "quasar";
+
+import { useRouter } from "vue-router";
+import { checkPermission } from "@/utils/permissions";
+import { useCounterMixin } from "@/stores/mixin";
+import { useTransferDataStore } from "@/modules/05_placement/store";
+import http from "@/plugins/http";
+import config from "@/app.config";
+
+/**
+ * importType
+ */
+import type { QTableProps } from "quasar";
+import type { officerType } from "@/modules/05_placement/interface/response/officer";
+
+/**
+ * importComponents
+ */
+import Dialogbody from "@/modules/05_placement/components/Repatriate/DialogOrders.vue"; //popup ส่งไปออกคำสั่งส่งตัวกลับ
+
+const $q = useQuasar();
+const router = useRouter();
+const { statusText } = useTransferDataStore();
+const {
+  date2Thai,
+  messageError,
+  showLoader,
+  hideLoader,
+  success,
+  dialogRemove,
+  findPosMasterNoOld,
+} = useCounterMixin();
+
+const modal = ref<boolean>(false); //  ส่งไปออกคำสั่งส่งตัวกลับ
+
+//  Table
+const filterKeyword = ref<string>(""); //คำค้นหารายการส่งตัวกลับ
+const filterKeyword2 = ref<string>(""); //คำค้นหารายการออกคำสั่ง
+const rows = ref<officerType[]>([]); //รายการส่งตัวกลับ
+const rows2 = ref<officerType[]>([]); //รายการออกคำสั่ง
+const columns = ref<QTableProps["columns"]>([
+  {
+    name: "no",
+    align: "left",
+    label: "ลำดับ",
+    sortable: false,
+    field: "no",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "name",
+    align: "left",
+    label: "ชื่อ-นามสกุล",
+    sortable: true,
+    field: "naem",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    format(val, row) {
+      return `${row.prefix}${row.firstName} ${row.lastName}`;
+    },
+  },
+  {
+    name: "posMasterNoOld",
+    align: "left",
+    label: "ตำแหน่งเลขที่",
+    sortable: true,
+    field: "posMasterNoOld",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    format(val, row) {
+      return findPosMasterNoOld(row);
+    },
+  },
+  {
+    name: "positionLevel",
+    align: "left",
+    label: "ประเภทตำแหน่ง",
+    sortable: true,
+    field: "positionLevel",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    format(val, row) {
+      let name = "";
+      if (row.positionTypeOld && row.positionLevelOld) {
+        name = `${row.positionTypeOld} (${row.positionLevelOld})`;
+      } else if (row.positionTypeOld) {
+        name = `${row.positionTypeOld}`;
+      } else if (row.positionLevelOld) {
+        name = `(${row.positionLevelOld})`;
+      } else name = "-";
+      return name;
+    },
+  },
+  {
+    name: "organizationPositionOld",
+    align: "left",
+    label: "ตำแหน่ง/สังกัดเดิม",
+    sortable: true,
+    field: "organizationPositionOld",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "organization",
+    align: "left",
+    label: "หน่วยงานที่ให้ช่วยราชการ",
+    sortable: true,
+    field: "organization",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "createdAt",
+    align: "left",
+    label: "วันที่ดำเนินการ",
+    sortable: true,
+    field: "createdAt",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    format: (val) => date2Thai(val),
+  },
+  {
+    name: "status",
+    align: "left",
+    label: "สถานะ",
+    sortable: true,
+    field: "status",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    format: (val) => statusText(val),
+  },
+]);
+const visibleColumns = ref<string[]>([
+  "no",
+  "name",
+  "posMasterNoOld",
+  "positionLevel",
+  "organizationPositionOld",
+  "organization",
+  "createdAt",
+  "status",
+]);
+
+/**
+ * rediarect ไปหน้ารายละเอียด
+ */
+function openDetail(id: string) {
+  router.push(`/placement/repatriate/detail/${id}`);
+}
+
+/**
+ * fetch รายการส่งตัวกลับ
+ */
+async function getData() {
+  showLoader();
+  await http
+    .get(config.API.repatriationMain())
+    .then(async (res) => {
+      const data = await res.data.result;
+      rows.value = data;
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+/**
+ * ยืนยันการลบรายการ
+ */
+function clickDelete(id: string) {
+  dialogRemove($q, () => {
+    showLoader();
+    http
+      .delete(config.API.repatriationMainDelete(id))
+      .then(async () => {
+        await getData();
+        await success($q, "ลบข้อมูลสำเร็จ");
+      })
+      .catch((e) => {
+        messageError($q, e);
+      })
+      .finally(() => {
+        hideLoader();
+      });
+  });
+}
+
+/**
+ * เปิด popup ส่งไปออกคำสั่งส่งตัวกลับ
+ */
+function openModalOrder() {
+  // filter หา status
+  const row = rows.value.filter(
+    (item: officerType) =>
+      (item.status == "WAITTING" ||
+        item.status == "PENDING" ||
+        item.status == "APPROVE") &&
+      item.organizationPositionOld &&
+      item.positionTypeOld &&
+      item.positionLevelOld &&
+      item.positionNumberOld &&
+      item.salary !== null &&
+      item.organization &&
+      item.date &&
+      item.dateRepatriation
+  );
+
+  rows2.value = row;
+  modal.value = true;
+}
+
+/**
+ * ปิด popup ส่งไปออกคำสั่งส่งตัวกลับ
+ */
+function closeModal() {
+  modal.value = false;
+  filterKeyword2.value = "";
+}
+
+/**
+ * รีเซ้ตค่าในช่อง ฟิลเตอร์
+ */
+function resetFilter() {
+  filterKeyword.value = "";
+  filterKeyword2.value = "";
+}
+
+/**
+ * ทำงานเมื่อมีการเรียกใช้ Components
+ */
+onMounted(async () => {
+  await getData();
+});
+</script>
+
+<template>
+  <div class="toptitle text-dark col-12 row items-center">รายการส่งตัวกลับ</div>
+  <q-card flat bordered class="col-12 q-mt-sm">
+    <q-separator />
+    <div class="row q-pa-md">
+      <div class="col-12">
+        <div class="row col-12">
+          <q-btn
+            v-if="checkPermission($route)?.attrIsUpdate"
+            flat
+            round
+            size="14px"
+            color="add"
+            icon="mdi-account-arrow-right"
+            @click="openModalOrder"
+          >
+            <q-tooltip>ส่งไปออกคำสั่งส่งตัวกลับ</q-tooltip>
+          </q-btn>
+          <q-space />
+          <q-input
+            class="col-xs-12 col-sm-3 col-md-2"
+            standout
+            dense
+            v-model="filterKeyword"
+            ref="filterRef"
+            outlined
+            debounce="300"
+            placeholder="ค้นหา"
+          >
+            <template v-slot:append>
+              <q-icon v-if="filterKeyword == ''" name="search" />
+              <q-icon
+                v-if="filterKeyword !== ''"
+                name="clear"
+                class="cursor-pointer"
+                @click="resetFilter"
+              />
+            </template>
+          </q-input>
+          <q-select
+            class="col-xs-12 col-sm-3 col-md-2 q-ml-sm"
+            v-model="visibleColumns"
+            multiple
+            outlined
+            dense
+            options-dense
+            :display-value="$q.lang.table.columns"
+            emit-value
+            map-options
+            :options="columns"
+            option-value="name"
+            options-cover
+            style="min-width: 150px"
+          />
+        </div>
+
+        <div class="col-12 q-pt-sm">
+          <d-table
+            :columns="columns"
+            :rows="rows"
+            :filter="filterKeyword"
+            row-key="id"
+            :visible-columns="visibleColumns"
+          >
+            <template v-slot:header="props">
+              <q-tr :props="props">
+                <q-th auto-width />
+                <q-th v-for="col in props.cols" :key="col.name" :props="props">
+                  <span class="text-weight-medium">{{ col.label }}</span>
+                </q-th>
+              </q-tr>
+            </template>
+
+            <template v-slot:body="props">
+              <q-tr :props="props">
+                <q-td auto-width>
+                  <q-btn
+                    v-if="checkPermission($route)?.attrIsGet"
+                    flat
+                    dense
+                    round
+                    color="info"
+                    icon="mdi-eye"
+                    @click.stop.prevent="openDetail(props.row.id)"
+                  >
+                    <q-tooltip>รายละเอียด</q-tooltip>
+                  </q-btn>
+                  <q-btn
+                    v-if="
+                      props.row.status !== 'REPORT' &&
+                      props.row.status !== 'DONE' &&
+                      checkPermission($route)?.attrIsDelete
+                    "
+                    icon="delete"
+                    flat
+                    round
+                    dense
+                    color="red"
+                    @click.stop.prevent="clickDelete(props.row.id)"
+                  >
+                    <q-tooltip>ลบข้อมูล</q-tooltip>
+                  </q-btn>
+                </q-td>
+                <q-td v-for="col in props.cols" :key="col.id">
+                  <div v-if="col.name === 'no'">
+                    {{ props.rowIndex + 1 }}
+                  </div>
+
+                  <div
+                    v-else
+                    :class="
+                      col.name === 'organizationPositionOld' ||
+                      col.name === 'organization'
+                        ? 'table_ellipsis'
+                        : ''
+                    "
+                  >
+                    {{ col.value == null ? "" : col.value }}
+                  </div>
+                </q-td>
+              </q-tr>
+            </template>
+          </d-table>
+        </div>
+      </div>
+    </div>
+  </q-card>
+
+  <Dialogbody
+    v-model:Modal="modal"
+    v-model:filter-keyword2="filterKeyword2"
+    :get-data="getData"
+    :close-modal="closeModal"
+    :rows2="rows2"
+  />
+</template>
+
+<style scoped lang="scss"></style>

src/modules/05_placement/views/06_appointPromoteMain.vue

@@ -0,0 +1,601 @@
+<script setup lang="ts">
+import { ref, onMounted } from "vue";
+import { useQuasar } from "quasar";
+
+import { useRouter } from "vue-router";
+import { checkPermission } from "@/utils/permissions";
+import { useCounterMixin } from "@/stores/mixin";
+import { useTransferDataStore } from "@/modules/05_placement/store";
+import http from "@/plugins/http";
+import config from "@/app.config";
+
+/**
+ * importType
+ */
+import type {
+  listAppointType,
+  resData,
+} from "@/modules/05_placement/interface/response/AppointMent";
+import type { OpType } from "@/modules/05_placement/interface/response/Main";
+import type { QTableProps } from "quasar";
+
+/**
+ * importComponents
+ */
+import Dialogbody from "@/modules/05_placement/components/AppointMent/DialogOrders.vue"; //ส่งไปออกคำสั่ง
+import DialogOrgSelect from "@/components/Dialogs/DialogOrgSelect.vue"; // เลือกหน่วยงาน
+
+const $q = useQuasar();
+const router = useRouter();
+const storeFn = useTransferDataStore();
+const { statusText } = storeFn;
+const {
+  showLoader,
+  hideLoader,
+  success,
+  messageError,
+  date2Thai,
+  dialogRemove,
+} = useCounterMixin();
+
+const modal = ref<boolean>(false); //แสดง popup ส่งไปออกคำสั่ง
+const modalTree = ref<boolean>(false); //แสดง popup  เลือกหน่วยงานที่แต่งตั้ง - เลื่อน - ย้าย
+const posType = ref<string>(""); //ประเภทตำแหน่ง
+const posLevel = ref<string>(""); //ระดับตำแหน่ง
+const position = ref<string>(""); //ตำแหน่ง
+const typeModal = ref<string | null>(null); //ประเภท popup แต่งตั้ง , เลื่อน , ย้าย
+const dataRows = ref<any[]>([]);
+const personalId = ref<string>("");
+
+const filterRef = ref<any>(null);
+const listRecevice = ref<resData[]>([]); //ข้อมูลรายการแต่งตั้ง-เลื่อน-ย้าย
+const optionsType = ref<OpType[]>([]);
+const type = ref<string>("");
+
+/**
+ * Table
+ */
+const rows = ref<listAppointType[]>([]); //รายการแต่งตั้ง-เลื่อน-ย้าย
+const rows2 = ref<listAppointType[]>([]); //รายการออกคำสั่ง
+const filterKeyword = ref<string>(""); //คำค้นหารายการแต่งตั้ง-เลื่อน-ย้าย
+const filterKeyword2 = ref<string>(""); //คำค้นหารายการออกคำสั่ง
+const columns = ref<QTableProps["columns"]>([
+  {
+    name: "no",
+    align: "left",
+    label: "ลำดับ",
+    sortable: false,
+    field: "no",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "citizenId",
+    align: "left",
+    label: "เลขประจำตัวประชาชน",
+    sortable: true,
+    field: "citizenId",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "fullname",
+    align: "left",
+    label: "ชื่อ-นามสกุล",
+    sortable: true,
+    field: "fullname",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "organizationName",
+    align: "left",
+    label: "หน่วยงานที่รับการแต่งตั้ง-เลื่อน-ย้าย",
+    sortable: true,
+    field: "organizationName",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "dateOfBirth",
+    align: "left",
+    label: "วัน/เดือน/ปี เกิด",
+    sortable: true,
+    field: "dateOfBirth",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "typeCommand",
+    align: "left",
+    label: "ประเภทคำสั่ง",
+    sortable: true,
+    field: "typeCommand",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    format: (val: string) => {
+      return val === "APPOINT"
+        ? "แต่งตั้ง"
+        : val === "SLIP"
+        ? "เลื่อน"
+        : val === "MOVE"
+        ? "ย้าย"
+        : "-";
+    },
+  },
+  {
+    name: "createdAt",
+    align: "left",
+    label: "วันที่ดำเนินการ",
+    sortable: true,
+    field: "createdAt",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "status",
+    align: "left",
+    label: "สถานะ",
+    sortable: true,
+    field: "status",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+]);
+const visibleColumns = ref<string[]>([
+  "no",
+  "citizenId",
+  "fullname",
+  "organizationName",
+  "typeCommand",
+  "dateOfBirth",
+  "createdAt",
+  "status",
+]);
+const pagination = ref({
+  sortBy: "createdAt",
+  descending: true,
+  page: 1,
+  rowsPerPage: 10,
+});
+
+/**
+ * รีเซ็ตคำค้นหารายการ
+ */
+function resetFilter() {
+  filterKeyword.value = "";
+  filterKeyword2.value = "";
+  filterRef.value.focus();
+}
+
+/**
+ * fetch รายการแต่งตั้ง-เลื่อน-ย้าย
+ */
+async function fecthlistappointment() {
+  showLoader();
+  await http
+    .get(config.API.appointmentMain())
+    .then((res) => {
+      let response = res.data.result;
+      listRecevice.value = response;
+      rows.value = response;
+      // รายชื่อ ส่งไปออกคำสั่ง
+      rows2.value = rows.value.filter(
+        (e: any) =>
+          e.root !== null &&
+          e.status !== "REPORT" &&
+          e.status !== "DONE" &&
+          e.educationOld &&
+          e.organizationPositionOld &&
+          e.positionTypeOld &&
+          e.positionLevelOld &&
+          e.positionNumberOld &&
+          e.salary !== null &&
+          e.positionDate
+      );
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+/**
+ * ยืนยันการลบรายการแต่งตั้ง-เลื่อน-ย้าย
+ * @param id รายการแต่งตั้ง-เลื่อน-ย้าย
+ */
+function clickDelete(id: string) {
+  dialogRemove($q, () => {
+    showLoader();
+    http
+      .delete(config.API.appointmentDelete(id))
+      .then(async () => {
+        await fecthlistappointment();
+        await success($q, "ลบข้อมูลสำเร็จ");
+      })
+      .catch((e) => {
+        messageError($q, e);
+      })
+      .finally(() => {
+        hideLoader();
+      });
+  });
+}
+
+/**
+ * redirect ไปหน้ารายละเอียด
+ * @param id
+ */
+function nextPage(id: string) {
+  router.push({
+    path: `appoint-promote/detail/${id}`,
+  });
+}
+
+/**
+ * เปิด popup เลือกหน่วยงาน
+ */
+function openModalTree(data: any, type: string) {
+  personalId.value = data.id;
+  typeModal.value = type;
+  dataRows.value = data;
+  posType.value = data.posTypeOldId;
+  posLevel.value = data.posLevelOldId;
+  position.value = data.positionOld;
+  modalTree.value = true;
+}
+
+/**
+ * ยืนยันการเลือกหน่วยงานที่แต่งตั้ง
+ */
+function onSave(data: any) {
+  const dataAppoint = {
+    node: data.node,
+    nodeId: data.nodeId,
+    orgRevisionId: data.orgRevisionId,
+    positionId: data.positionId,
+    posMasterNo: data.posMasterNo,
+    positionName: data.positionName,
+    posTypeId: data.posTypeId,
+    posTypeName: data.posTypeName,
+    posLevelId: data.posLevelId,
+    posLevelName: data.posLevelName,
+    reportingDate: data.reportingDate,
+    posmasterId: data.posmasterId,
+    typeCommand: data.typeCommand,
+  };
+
+  showLoader();
+  http
+    .put(config.API.appointmentPosition(personalId.value), dataAppoint)
+    .then(async () => {
+      await fecthlistappointment();
+      await success($q, "บันทึกข้อมูลสำเร็จ");
+      modalTree.value = false;
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(async () => {
+      hideLoader();
+    });
+}
+
+/**
+ * เปิด popup ส่งไปออกคำสั่ง
+ */
+function sendToCommand() {
+  modal.value = true;
+  filterKeyword2.value = "";
+}
+
+/**
+ * ปิด popup ส่งไปออกคำสั่ง
+ */
+function clickClose() {
+  modal.value = false;
+}
+
+/**
+ * ทำงานเมื่อมีการเรียกใช้ Components
+ */
+onMounted(() => {
+  fecthlistappointment();
+});
+</script>
+
+<template>
+  <div class="toptitle text-dark col-12 row items-center">
+    รายการแต่งตั้ง-เลื่อน-ย้าย
+  </div>
+  <q-card flat bordered class="col-12 q-mt-sm">
+    <q-separator />
+    <div class="row q-pa-md">
+      <div class="col-12">
+        <div class="row col-12">
+          <q-btn
+            v-if="checkPermission($route)?.attrIsUpdate"
+            @click="sendToCommand()"
+            size="14px"
+            flat
+            round
+            color="add"
+            icon="mdi-account-arrow-right"
+          >
+            <q-tooltip>ส่งไปออกคำสั่งแต่งตั้ง-เลื่อน-ย้าย</q-tooltip>
+          </q-btn>
+
+          <q-space />
+          <q-input
+            class="col-xs-12 col-sm-3 col-md-2"
+            standout
+            dense
+            v-model="filterKeyword"
+            ref="filterRef"
+            outlined
+            debounce="300"
+            placeholder="ค้นหา"
+          >
+            <template v-slot:append>
+              <q-icon v-if="filterKeyword == ''" name="search" />
+              <q-icon
+                v-if="filterKeyword !== ''"
+                name="clear"
+                class="cursor-pointer"
+                @click="resetFilter"
+              />
+            </template>
+          </q-input>
+
+          <q-select
+            v-model="visibleColumns"
+            multiple
+            outlined
+            dense
+            options-dense
+            :display-value="$q.lang.table.columns"
+            emit-value
+            map-options
+            :options="columns"
+            option-value="name"
+            options-cover
+            style="min-width: 150px"
+            class="col-xs-12 col-sm-3 col-md-2 q-ml-sm"
+          />
+        </div>
+
+        <div class="col-12 q-pt-sm">
+          <d-table
+            :columns="columns"
+            :rows="rows"
+            :filter="filterKeyword"
+            row-key="citizenId"
+            :visible-columns="visibleColumns"
+            v-model:pagination="pagination"
+          >
+            <template v-slot:header="props">
+              <q-tr :props="props">
+                <q-th auto-width />
+                <q-th v-for="col in props.cols" :key="col.name" :props="props">
+                  <span class="text-weight-medium">{{ col.label }}</span>
+                </q-th>
+              </q-tr>
+            </template>
+            <template v-slot:body="props">
+              <q-tr :props="props">
+                <q-td auto-width>
+                  <q-btn
+                    v-if="
+                      (props.row.status !== 'REPORT' &&
+                        props.row.status !== 'DONE' &&
+                        checkPermission($route)?.attrIsGet) ||
+                      (checkPermission($route)?.attrIsDelete &&
+                        props.row.status !== 'REPORT' &&
+                        props.row.status !== 'DONE') ||
+                      (checkPermission($route)?.attrIsGet &&
+                        checkPermission($route)?.attrIsDelete) ||
+                      checkPermission($route)?.attrIsGet
+                    "
+                    icon="mdi-dots-horizontal-circle-outline"
+                    color="secondary"
+                    flat
+                    round
+                    dense
+                  >
+                    <q-menu
+                      transition-show="jump-down"
+                      transition-hide="jump-up"
+                    >
+                      <q-list dense style="min-width: 250px">
+                        <q-item
+                          v-if="
+                            checkPermission($route)?.attrIsUpdate &&
+                            checkPermission($route)?.attrIsGet &&
+                            props.row.status !== 'REPORT' &&
+                            props.row.status !== 'DONE'
+                          "
+                          clickable
+                          v-close-popup
+                          @click="openModalTree(props.row, 'APPOINT')"
+                        >
+                          <q-item-section style="min-width: 0px" avatar>
+                            <q-icon
+                              color="primary"
+                              size="xs"
+                              name="mdi-bookmark-outline"
+                            />
+                          </q-item-section>
+                          <q-item-section
+                            >เลือกหน่วยงานที่รับแต่งตั้ง</q-item-section
+                          >
+                        </q-item>
+
+                        <q-item
+                          v-if="
+                            checkPermission($route)?.attrIsUpdate &&
+                            checkPermission($route)?.attrIsGet &&
+                            props.row.status !== 'REPORT' &&
+                            props.row.status !== 'DONE'
+                          "
+                          clickable
+                          v-close-popup
+                          @click="openModalTree(props.row, 'SLIP')"
+                        >
+                          <q-item-section style="min-width: 0px" avatar>
+                            <q-icon
+                              color="primary"
+                              size="xs"
+                              name="mdi-bookmark-outline"
+                            />
+                          </q-item-section>
+                          <q-item-section
+                            >เลือกหน่วยงานที่รับเลื่อน</q-item-section
+                          >
+                        </q-item>
+
+                        <q-item
+                          v-if="
+                            checkPermission($route)?.attrIsUpdate &&
+                            checkPermission($route)?.attrIsGet &&
+                            props.row.status !== 'REPORT' &&
+                            props.row.status !== 'DONE'
+                          "
+                          clickable
+                          v-close-popup
+                          @click="openModalTree(props.row, 'MOVE')"
+                        >
+                          <q-item-section style="min-width: 0px" avatar>
+                            <q-icon
+                              color="primary"
+                              size="xs"
+                              name="mdi-bookmark-outline"
+                            />
+                          </q-item-section>
+                          <q-item-section
+                            >เลือกหน่วยงานที่รับย้าย</q-item-section
+                          >
+                        </q-item>
+
+                        <q-item
+                          v-if="checkPermission($route)?.attrIsGet"
+                          clickable
+                          v-close-popup
+                          @click="nextPage(props.row.id)"
+                        >
+                          <q-item-section style="min-width: 0px" avatar>
+                            <q-icon color="info" size="xs" name="mdi-eye" />
+                          </q-item-section>
+                          <q-item-section>รายละเอียด</q-item-section>
+                        </q-item>
+
+                        <q-item
+                          v-if="
+                            checkPermission($route)?.attrIsDelete &&
+                            props.row.status !== 'REPORT' &&
+                            props.row.status !== 'DONE'
+                          "
+                          clickable
+                          v-close-popup
+                          @click="clickDelete(props.row.id)"
+                        >
+                          <q-item-section style="min-width: 0px" avatar>
+                            <q-icon color="red" size="xs" name="mdi-delete" />
+                          </q-item-section>
+                          <q-item-section>ลบ</q-item-section>
+                        </q-item>
+                      </q-list>
+                    </q-menu>
+                  </q-btn>
+                </q-td>
+                <q-td v-for="col in props.cols" :key="col.name" :props="props">
+                  <div v-if="col.name == 'no'">
+                    {{ props.rowIndex + 1 }}
+                  </div>
+                  <div v-else-if="col.name == 'fullname'">
+                    {{
+                      props.row.firstName
+                        ? `${props.row.prefix ?? ""}${
+                            props.row.firstName ?? ""
+                          } ${props.row.lastName ?? ""}`
+                        : "-"
+                    }}
+                  </div>
+
+                  <div v-else-if="col.name == 'status'">
+                    {{ props.row.status ? statusText(props.row.status) : "-" }}
+                  </div>
+
+                  <div v-else-if="col.name == 'dateOfBirth'">
+                    {{
+                      props.row.dateOfBirth
+                        ? date2Thai(props.row.dateOfBirth)
+                        : "-"
+                    }}
+                  </div>
+
+                  <div v-else-if="col.name == 'organizationName'">
+                    <div class="col-4">
+                      <div class="text-weight-medium">
+                        {{ props.row.root !== null ? props.row.root : "-" }}
+                        {{
+                          props.row.rootShortName !== null
+                            ? `(${props.row.rootShortName})`
+                            : ""
+                        }}
+                      </div>
+                      <div class="text-weight-light">
+                        {{
+                          props.row.nodeName !== null ? props.row.nodeName : ""
+                        }}
+                        {{
+                          props.row.nodeShortName !== null
+                            ? `(${props.row.nodeShortName}${props.row.posMasterNo})`
+                            : ""
+                        }}
+                      </div>
+                    </div>
+                  </div>
+
+                  <div v-else-if="col.name == 'createdAt'">
+                    {{
+                      props.row.createdAt ? date2Thai(props.row.createdAt) : "-"
+                    }}
+                  </div>
+
+                  <div v-else>
+                    {{ col.value ? col.value : "-" }}
+                  </div>
+                </q-td>
+              </q-tr>
+            </template>
+          </d-table>
+        </div>
+      </div>
+    </div>
+  </q-card>
+
+  <Dialogbody
+    v-model:Modal="modal"
+    v-model:filter-keyword2="filterKeyword2"
+    v-model:type="type"
+    :click-close="clickClose"
+    :options-type="optionsType"
+    :rows2="rows2"
+    :next-page="nextPage"
+    :fetch-data="fecthlistappointment"
+  />
+
+  <DialogOrgSelect
+    :title="`เลือกหน่วยงานที่แต่งตั้ง - เลื่อน - ย้าย`"
+    v-model:modal="modalTree"
+    v-model:type="typeModal"
+    :pos-type="posType"
+    :pos-level="posLevel"
+    :position="position"
+    :data-rows="dataRows"
+    :onSubmit="onSave"
+  />
+</template>
+<style scoped lang="scss"></style>

src/modules/05_placement/views/07_appointEmployeeMain.vue

@@ -0,0 +1,546 @@
+<script setup lang="ts">
+import { ref, onMounted } from "vue";
+import { useQuasar } from "quasar";
+
+import { checkPermission } from "@/utils/permissions";
+import { useRouter } from "vue-router";
+import { useCounterMixin } from "@/stores/mixin";
+import { useTransferDataStore } from "@/modules/05_placement/store";
+import http from "@/plugins/http";
+import config from "@/app.config";
+
+import type { QTableProps } from "quasar";
+
+import type {
+  listAppointType,
+  resData,
+} from "@/modules/05_placement/interface/response/AppointMent";
+import type { OpType } from "@/modules/05_placement/interface/response/Main";
+
+import DialogOrgSelectEmployee from "@/components/Dialogs/DialogOrgSelectEmployee.vue"; //เลือกหน่วยงาน
+import Dialogbody from "@/modules/05_placement/components/AppointEmployee/DialogOrders.vue";
+
+const $q = useQuasar();
+const router = useRouter();
+const storeFn = useTransferDataStore();
+const { statusText } = storeFn;
+const mixin = useCounterMixin(); //เรียกฟังก์ชันกลาง
+const {
+  showLoader,
+  hideLoader,
+  success,
+  messageError,
+  date2Thai,
+  dialogRemove,
+} = mixin;
+
+const personalId = ref<string>("");
+const modal = ref<boolean>(false); //แสดง popup ส่งไปออกคำสั่ง
+const modalTree = ref<boolean>(false); //แสดง popup  เลือกหน่วยงานที่รับการปรับระดับชั้นงาน
+const typeModal = ref<string>(""); //ประเภท popup ปรับระดับชั้นงาน,รับย้าย
+const posType = ref<string>(""); //ประเภทตำแหน่ง
+const posLevel = ref<string>(""); //ระดับตำแหน่ง
+const position = ref<string>(""); //ตำแหน่ง
+const dataRows = ref<any[]>([]);
+
+const filterRef = ref<any>(null);
+const listRecevice = ref<resData[]>([]); //ข้อมูลรายการปรับระดับชั้นงานลูกจ้าง
+const optionsType = ref<OpType[]>([]);
+const type = ref<string>("");
+
+// Table
+const rows = ref<listAppointType[]>([]); //รายการปรับระดับชั้นงานลูกจ้าง
+const rows2 = ref<listAppointType[]>([]); //รายการออกคำสั่ง
+const filterKeyword = ref<string>(""); //คำค้นหารายการปรับระดับชั้นงานลูกจ้าง
+const filterKeyword2 = ref<string>(""); //คำค้นหารายการออกคำสั่ง
+const visibleColumns = ref<string[]>([
+  "no",
+  "citizenId",
+  "fullname",
+  "organizationName",
+  "dateOfBirth",
+  "createdAt",
+  "status",
+]);
+const pagination = ref({
+  sortBy: "createdAt",
+  descending: true,
+  page: 1,
+  rowsPerPage: 10,
+});
+const columns = ref<QTableProps["columns"]>([
+  {
+    name: "no",
+    align: "left",
+    label: "ลำดับ",
+    sortable: false,
+    field: "no",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "citizenId",
+    align: "left",
+    label: "เลขประจำตัวประชาชน",
+    sortable: true,
+    field: "citizenId",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "fullname",
+    align: "left",
+    label: "ชื่อ-นามสกุล",
+    sortable: true,
+    field: "fullname",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "organizationName",
+    align: "left",
+    label: "หน่วยงานที่รับปรับระดับชั้นงาน-ย้าย",
+    sortable: true,
+    field: "organizationName",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "dateOfBirth",
+    align: "left",
+    label: "วัน/เดือน/ปี เกิด",
+    sortable: true,
+    field: "dateOfBirth",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "createdAt",
+    align: "left",
+    label: "วันที่ดำเนินการ",
+    sortable: true,
+    field: "createdAt",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "status",
+    align: "left",
+    label: "สถานะ",
+    sortable: true,
+    field: "status",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+]);
+/**
+ * รีเซ็ต input
+ */
+function resetFilter() {
+  filterKeyword.value = "";
+  filterKeyword2.value = "";
+  filterRef.value.focus();
+}
+
+/**
+ * fetch รายการปรับระดับชั้นงานลูกจ้าง
+ */
+async function fecthlistappointment() {
+  showLoader();
+
+  await http
+    .get(config.API.appointEmployee())
+    .then(async (res) => {
+      let response = await res.data.result;
+      listRecevice.value = response;
+      rows.value = response;
+
+      //หารายชื่อส่งไปออกคำสั่ง
+      rows2.value = rows.value.filter(
+        (e: any) =>
+          e.root !== null &&
+          e.status !== "REPORT" &&
+          e.status !== "DONE" &&
+          e.educationOld &&
+          e.organizationPositionOld &&
+          e.positionTypeOld &&
+          e.positionLevelOld &&
+          e.positionNumberOld &&
+          e.salary !== null &&
+          e.positionDate
+      );
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+/**
+ * ยืนยันลบรายการปรับระดับชั้นงานลูกจ้าง
+ * @param id รายการปรับระดับชั้นงานลูกจ้าง
+ */
+function clickDelete(id: string) {
+  dialogRemove($q, () => {
+    showLoader();
+    http
+      .delete(config.API.appointEmployeeByid(id))
+      .then(async () => {
+        await fecthlistappointment();
+        await success($q, "ลบข้อมูลสำเร็จ");
+      })
+      .catch((e) => {
+        messageError($q, e);
+      })
+      .finally(() => {
+        hideLoader();
+      });
+  });
+}
+
+/**
+ * redialect รายละเอียดการปรับระดับชั้นงานลูกจ้าง
+ * @param id  รายการปรับระดับชั้นงานลูกจ้าง
+ */
+function nextPage(id: string) {
+  router.push({
+    path: `appoint-employee/detail/${id}`,
+  });
+}
+
+/**
+ * เปิด popup  ส่งไปออกคำสั่ง
+ */
+function popup() {
+  modal.value = true;
+  filterKeyword2.value = "";
+}
+
+/**
+ * ปิด popup  ส่งไปออกคำสั่ง
+ */
+function clickClose() {
+  modal.value = false;
+}
+
+/**
+ * เปิด popup เลือกหน่วยงาน
+ * @param data ข้อมูลหน่วยงาน
+ * @param type ประเภท ย้าย,ปรับ
+ */
+function openModalTree(data: any, type: string) {
+  typeModal.value = type;
+  personalId.value = data.id;
+  dataRows.value = data;
+  posType.value = data.posTypeNameOld;
+  posLevel.value = data.posLevelNameOld;
+  position.value = data.positionOld;
+  modalTree.value = true;
+}
+
+/**
+ * ยืนยันการบันทึกข้อมูลเลือกตำแหน่ง
+ */
+function onSave(data: any) {
+  const dataAppoint = {
+    node: data.node,
+    nodeId: data.nodeId,
+    orgRevisionId: data.orgRevisionId,
+    positionId: data.positionId,
+    posMasterNo: data.posMasterNo,
+    positionName: data.positionName,
+    posTypeId: data.posTypeId,
+    posTypeName: data.posTypeName,
+    posLevelId: data.posLevelId,
+    posLevelName: data.posLevelName,
+    reportingDate: data.reportingDate,
+    posmasterId: data.posmasterId,
+    typeCommand: data.typeCommand,
+  };
+  showLoader();
+  http
+    .put(config.API.appointmentPosition(personalId.value), dataAppoint)
+    .then(async () => {
+      await fecthlistappointment();
+      await success($q, "บันทึกสำเร็จ");
+      modalTree.value = false;
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+onMounted(() => {
+  fecthlistappointment();
+});
+</script>
+
+<template>
+  <div class="toptitle text-dark col-12 row items-center">
+    รายการปรับระดับชั้นงานลูกจ้าง
+  </div>
+  <q-card flat bordered class="col-12 q-mt-sm">
+    <q-separator />
+    <div class="row q-pa-md">
+      <div class="col-12">
+        <div class="row col-12">
+          <q-btn
+            v-if="checkPermission($route)?.attrIsUpdate"
+            @click="popup()"
+            size="14px"
+            flat
+            round
+            color="add"
+            icon="mdi-account-arrow-right"
+          >
+            <q-tooltip>ส่งไปออกคำสั่ง</q-tooltip>
+          </q-btn>
+
+          <q-space />
+          <q-input
+            class="col-xs-12 col-sm-3 col-md-2"
+            standout
+            dense
+            v-model="filterKeyword"
+            ref="filterRef"
+            outlined
+            debounce="300"
+            placeholder="ค้นหา"
+          >
+            <template v-slot:append>
+              <q-icon v-if="filterKeyword == ''" name="search" />
+              <q-icon
+                v-if="filterKeyword !== ''"
+                name="clear"
+                class="cursor-pointer"
+                @click="resetFilter"
+              />
+            </template>
+          </q-input>
+
+          <q-select
+            v-model="visibleColumns"
+            multiple
+            outlined
+            dense
+            options-dense
+            :display-value="$q.lang.table.columns"
+            emit-value
+            map-options
+            :options="columns"
+            option-value="name"
+            options-cover
+            style="min-width: 150px"
+            class="col-xs-12 col-sm-3 col-md-2 q-ml-sm"
+          />
+        </div>
+
+        <div class="col-12 q-pt-sm">
+          <d-table
+            :columns="columns"
+            :rows="rows"
+            :filter="filterKeyword"
+            row-key="citizenId"
+            :visible-columns="visibleColumns"
+            v-model:pagination="pagination"
+          >
+            <template v-slot:header="props">
+              <q-tr :props="props">
+                <q-th auto-width />
+                <q-th v-for="col in props.cols" :key="col.name" :props="props">
+                  <span class="text-weight-medium">{{ col.label }}</span>
+                </q-th>
+              </q-tr>
+            </template>
+            <template v-slot:body="props">
+              <q-tr :props="props">
+                <q-td auto-width>
+                  <q-btn
+                    v-if="
+                      (props.row.status !== 'REPORT' &&
+                        props.row.status !== 'DONE' &&
+                        checkPermission($route)?.attrIsGet) ||
+                      (checkPermission($route)?.attrIsDelete &&
+                        props.row.status !== 'REPORT' &&
+                        props.row.status !== 'DONE') ||
+                      (checkPermission($route)?.attrIsGet &&
+                        checkPermission($route)?.attrIsDelete) ||
+                      checkPermission($route)?.attrIsGet
+                    "
+                    icon="mdi-dots-horizontal-circle-outline"
+                    color="secondary"
+                    flat
+                    round
+                    dense
+                  >
+                    <q-menu
+                      transition-show="jump-down"
+                      transition-hide="jump-up"
+                    >
+                      <q-list dense style="min-width: 200px">
+                        <q-item
+                          v-if="
+                            checkPermission($route)?.attrIsUpdate &&
+                            checkPermission($route)?.attrIsGet &&
+                            props.row.status !== 'REPORT' &&
+                            props.row.status !== 'DONE'
+                          "
+                          clickable
+                          v-close-popup
+                          @click="openModalTree(props.row, 'SLIP')"
+                        >
+                          <q-item-section style="min-width: 0px" avatar>
+                            <q-icon
+                              color="primary"
+                              size="xs"
+                              name="mdi-bookmark-outline"
+                            />
+                          </q-item-section>
+                          <q-item-section
+                            >เลือกหน่วยงานที่รับปรับระดับชั้นงาน</q-item-section
+                          >
+                        </q-item>
+                        <q-item
+                          v-if="
+                            checkPermission($route)?.attrIsUpdate &&
+                            checkPermission($route)?.attrIsGet &&
+                            props.row.status !== 'REPORT' &&
+                            props.row.status !== 'DONE'
+                          "
+                          clickable
+                          v-close-popup
+                          @click="openModalTree(props.row, 'MOVE')"
+                        >
+                          <q-item-section style="min-width: 0px" avatar>
+                            <q-icon
+                              color="primary"
+                              size="xs"
+                              name="mdi-bookmark-outline"
+                            />
+                          </q-item-section>
+                          <q-item-section
+                            >เลือกหน่วยงานที่รับย้าย</q-item-section
+                          >
+                        </q-item>
+
+                        <q-item
+                          v-if="checkPermission($route)?.attrIsGet"
+                          clickable
+                          v-close-popup
+                          @click="nextPage(props.row.id)"
+                        >
+                          <q-item-section style="min-width: 0px" avatar>
+                            <q-icon color="info" size="xs" name="mdi-eye" />
+                          </q-item-section>
+                          <q-item-section>รายละเอียด</q-item-section>
+                        </q-item>
+                        <q-item
+                          v-if="
+                            checkPermission($route)?.attrIsDelete &&
+                            props.row.status !== 'REPORT' &&
+                            props.row.status !== 'DONE'
+                          "
+                          clickable
+                          v-close-popup
+                          @click="clickDelete(props.row.id)"
+                        >
+                          <q-item-section style="min-width: 0px" avatar>
+                            <q-icon color="red" size="xs" name="mdi-delete" />
+                          </q-item-section>
+                          <q-item-section>ลบ</q-item-section>
+                        </q-item>
+                      </q-list>
+                    </q-menu>
+                  </q-btn>
+                </q-td>
+                <q-td v-for="col in props.cols" :key="col.name" :props="props">
+                  <div v-if="col.name == 'no'">
+                    {{ props.rowIndex + 1 }}
+                  </div>
+                  <div v-else-if="col.name == 'fullname'">
+                    {{
+                      props.row.firstName
+                        ? `${props.row.prefix ?? ""}${
+                            props.row.firstName ?? ""
+                          } ${props.row.lastName ?? ""}`
+                        : "-"
+                    }}
+                  </div>
+
+                  <div v-else-if="col.name == 'status'">
+                    {{ props.row.status ? statusText(props.row.status) : "-" }}
+                  </div>
+                  <div v-else-if="col.name == 'dateOfBirth'">
+                    {{
+                      props.row.dateOfBirth
+                        ? date2Thai(props.row.dateOfBirth)
+                        : "-"
+                    }}
+                  </div>
+                  <div v-else-if="col.name == 'organizationName'">
+                    <div class="col-4">
+                      <div class="text-weight-medium">
+                        {{ props.row.root !== null ? props.row.root : "-" }}
+                        {{
+                          props.row.rootShortName !== null
+                            ? `(${props.row.rootShortName})`
+                            : ""
+                        }}
+                      </div>
+                      <div class="text-weight-light">
+                        {{
+                          props.row.nodeName !== null ? props.row.nodeName : ""
+                        }}
+                        {{
+                          props.row.nodeShortName !== null
+                            ? `(${props.row.nodeShortName}${props.row.posMasterNo})`
+                            : ""
+                        }}
+                      </div>
+                    </div>
+                  </div>
+                  <div v-else-if="col.name == 'createdAt'">
+                    {{
+                      props.row.createdAt ? date2Thai(props.row.createdAt) : "-"
+                    }}
+                  </div>
+                  <div v-else>
+                    {{ col.value ? col.value : "-" }}
+                  </div>
+                </q-td>
+              </q-tr>
+            </template>
+          </d-table>
+        </div>
+      </div>
+    </div>
+  </q-card>
+
+  <Dialogbody
+    v-model:Modal="modal"
+    v-model:filter-keyword2="filterKeyword2"
+    v-model:type="type"
+    :click-close="clickClose"
+    :options-type="optionsType"
+    :rows2="rows2"
+    :next-page="nextPage"
+    :fetch-data="fecthlistappointment"
+  />
+
+  <DialogOrgSelectEmployee
+    :title="`เลือกหน่วยงานที่รับการปรับระดับชั้นงาน`"
+    v-model:modal="modalTree"
+    v-model:type="typeModal"
+    :pos-type="posType"
+    :pos-level="posLevel"
+    :position="position"
+    :data-rows="dataRows"
+    :onSubmit="onSave"
+  />
+</template>
+<style scoped lang="scss"></style>

src/modules/05_placement/views/08_otherMain.vue

@@ -0,0 +1,391 @@
+<script setup lang="ts">
+import { ref, onMounted } from "vue";
+import { useQuasar } from "quasar";
+
+import { useRouter } from "vue-router";
+import { checkPermission } from "@/utils/permissions";
+import { useTransferDataStore } from "@/modules/05_placement/store";
+import { useCounterMixin } from "@/stores/mixin";
+import http from "@/plugins/http";
+import config from "@/app.config";
+
+/** importType*/
+import type { QTableProps } from "quasar";
+import type { listMain } from "@/modules/05_placement/interface/response/OhterMain";
+import type { OpType } from "@/modules/05_placement/interface/response/Main";
+
+/** importcomopnents*/
+import Dialogbody from "@/modules/05_placement/components/Other/DialogOrders.vue";
+
+/** use*/
+const $q = useQuasar();
+const router = useRouter();
+const storeFn = useTransferDataStore();
+const { statusText } = storeFn;
+const {
+  showLoader,
+  hideLoader,
+  success,
+  messageError,
+  date2Thai,
+  dialogRemove,
+} = useCounterMixin();
+
+const modal = ref<boolean>(false);
+const type = ref<string>("");
+const optionsType = ref<OpType[]>([]);
+
+/**
+ * Table
+ */
+const rows = ref<listMain[]>([]); //รายการอื่นๆ
+const rows2 = ref<listMain[]>([]); //รายการออกคำสั่ง
+const filterKeyword = ref<string>(""); //คำค้นหารายการอื่นๆ
+const filterKeyword2 = ref<string>(""); //คำค้นหารายการออกคำสั่ง
+const visibleColumns = ref<string[]>([
+  "no",
+  "fullname",
+  "positionLevel",
+  "organizationPositionOld",
+  "createdAt",
+  "status",
+]);
+const columns = ref<QTableProps["columns"]>([
+  {
+    name: "no",
+    align: "left",
+    label: "ลำดับ",
+    sortable: false,
+    field: "no",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "fullname",
+    align: "left",
+    label: "ชื่อ-นามสกุล",
+    sortable: true,
+    field: "fullname",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    format(val, row) {
+      return `${row.prefix === null ? "" : row.prefix}${row.firstName} ${
+        row.lastName
+      }`;
+    },
+  },
+  {
+    name: "positionLevel",
+    align: "left",
+    label: "ประเภทตำแหน่ง",
+    sortable: true,
+    field: "positionLevel",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    format(val, row) {
+      let name = "";
+      if (row.positionTypeOld && row.positionLevelOld) {
+        name = `${row.positionTypeOld} (${row.positionLevelOld})`;
+      } else if (row.positionTypeOld) {
+        name = `${row.positionTypeOld}`;
+      } else if (row.positionLevelOld) {
+        name = `(${row.positionLevelOld})`;
+      } else name = "-";
+      return name;
+    },
+  },
+  {
+    name: "organizationPositionOld",
+    align: "left",
+    label: "ตำแหน่ง/สังกัดเดิม",
+    sortable: true,
+    field: "organizationPositionOld",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "createdAt",
+    align: "left",
+    label: "วันที่ดำเนินการ",
+    sortable: true,
+    field: "createdAt",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    format: (val) => date2Thai(val),
+  },
+  {
+    name: "status",
+    align: "left",
+    label: "สถานะ",
+    sortable: true,
+    field: "status",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    format: (val) => statusText(val),
+  },
+]);
+const pagination = ref({
+  sortBy: "createdAt",
+  descending: true,
+  page: 1,
+  rowsPerPage: 10,
+});
+
+/**
+ * fetch รายการอื่นๆ
+ */
+async function fecthlistOthet() {
+  showLoader();
+  await http
+    .get(config.API.otherMain())
+    .then((res) => {
+      let response = res.data.result;
+      rows.value = response;
+      // หารายชื่อส่งไปออกคำสั่งอื่นๆ
+      rows2.value = rows.value.filter(
+        (e: listMain) =>
+          e.status !== "REPORT" &&
+          e.status !== "DONE" &&
+          e.organizationPositionOld &&
+          e.positionTypeOld &&
+          e.positionLevelOld &&
+          e.positionNumberOld &&
+          e.amountOld !== null &&
+          e.positionDate &&
+          e.leaveDate !== null
+      );
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+/**
+ * fetch รายการข้อมูลประเภทคำสั่ง
+ */
+function fecthTypeOption() {
+  showLoader();
+  type.value = "";
+  http
+    .get(config.API.typeOrder())
+    .then((res) => {
+      // หาคำสั่ง เฉพาะ  C-PM-08 และ C-PM-09
+      optionsType.value = res.data.result.filter(
+        (e: OpType) =>
+          e.commandCode === "C-PM-08" || e.commandCode === "C-PM-09"
+      );
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+/**
+ * รีเซ็ตข้อมูลในช่อง input
+ */
+function resetFilter() {
+  filterKeyword.value = "";
+  filterKeyword2.value = "";
+}
+
+/**
+ * เปิด popup ส่งไปออกคำสั่งอื่นๆ
+ */
+function popup() {
+  modal.value = true;
+  filterKeyword2.value = "";
+  type.value = "";
+  // fetch รายการข้อมูลประเภทคำสั่ง
+  fecthTypeOption();
+}
+
+/**
+ * ปิด popup ส่งไปออกคำสั่งอื่นๆ
+ */
+function clickClose() {
+  modal.value = false;
+}
+
+/**
+ * ยืนยันการลบรายการอื่นๆ
+ * @param id รายการอื่นๆ
+ */
+function clickDelete(id: string) {
+  dialogRemove($q, () => {
+    showLoader();
+    http
+      .delete(config.API.otherByid(id))
+      .then(async () => {
+        await fecthlistOthet();
+        await success($q, "ลบข้อมูลสำเร็จ");
+      })
+      .catch((e) => {
+        messageError($q, e);
+      })
+      .finally(() => {
+        hideLoader();
+      });
+  });
+}
+
+/**
+ * redialect รายละเอียดรายการอื่นๆ
+ * @param id รายการอื่นๆ
+ */
+function nextPage(id: string) {
+  router.push({
+    path: `/placement/other/detail/${id}`,
+  });
+}
+
+onMounted(() => {
+  fecthlistOthet();
+});
+</script>
+<template>
+  <div class="toptitle text-dark col-12 row items-center">รายการอื่นๆ</div>
+  <q-card flat bordered class="col-12 q-mt-sm">
+    <q-separator />
+    <div class="row q-pa-md">
+      <div class="col-12">
+        <div class="row col-12">
+          <q-btn
+            v-if="checkPermission($route)?.attrIsUpdate"
+            @click="popup()"
+            size="14px"
+            flat
+            round
+            color="add"
+            icon="mdi-account-arrow-right"
+          >
+            <q-tooltip>ส่งไปออกคำสั่งรายการอื่นๆ</q-tooltip>
+          </q-btn>
+          <q-space />
+          <q-input
+            class="col-xs-12 col-sm-3 col-md-2"
+            standout
+            dense
+            v-model="filterKeyword"
+            ref="filterRef"
+            outlined
+            debounce="300"
+            placeholder="ค้นหา"
+          >
+            <template v-slot:append>
+              <q-icon v-if="filterKeyword == ''" name="search" />
+              <q-icon
+                v-if="filterKeyword !== ''"
+                name="clear"
+                class="cursor-pointer"
+                @click="resetFilter"
+              />
+            </template>
+          </q-input>
+          <q-select
+            v-model="visibleColumns"
+            multiple
+            outlined
+            dense
+            options-dense
+            :display-value="$q.lang.table.columns"
+            emit-value
+            map-options
+            :options="columns"
+            option-value="name"
+            options-cover
+            style="min-width: 150px"
+            class="col-xs-12 col-sm-3 col-md-2 q-ml-sm"
+          />
+        </div>
+
+        <div class="col-12 q-pt-sm">
+          <d-table
+            :columns="columns"
+            :rows="rows"
+            :filter="filterKeyword"
+            row-key="id"
+            :visible-columns="visibleColumns"
+            v-model:pagination="pagination"
+          >
+            <template v-slot:header="props">
+              <q-tr :props="props">
+                <q-th auto-width />
+                <q-th v-for="col in props.cols" :key="col.name" :props="props">
+                  <span class="text-weight-medium">{{ col.label }}</span>
+                </q-th>
+              </q-tr>
+            </template>
+            <template v-slot:body="props">
+              <q-tr :props="props">
+                <q-td auto-width>
+                  <q-btn
+                    v-if="checkPermission($route)?.attrIsGet"
+                    flat
+                    round
+                    dense
+                    icon="mdi-eye"
+                    color="info"
+                    @click.stop.prevent="nextPage(props.row.id)"
+                  >
+                    <q-tooltip>รายละเอียด</q-tooltip>
+                  </q-btn>
+
+                  <q-btn
+                    v-if="
+                      props.row.status !== 'REPORT' &&
+                      props.row.status !== 'DONE' &&
+                      checkPermission($route)?.attrIsDelete
+                    "
+                    flat
+                    round
+                    dense
+                    color="red"
+                    icon="mdi-delete"
+                    @click.stop="clickDelete(props.row.id)"
+                  >
+                    <q-tooltip>ลบข้อมูล</q-tooltip>
+                  </q-btn>
+                </q-td>
+                <q-td v-for="col in props.cols" :key="col.id">
+                  <div v-if="col.name === 'no'">
+                    {{ props.rowIndex + 1 }}
+                  </div>
+
+                  <div
+                    v-else
+                    :class="
+                      col.name === 'organizationPositionOld' ||
+                      col.name === 'organization'
+                        ? 'table_ellipsis'
+                        : ''
+                    "
+                  >
+                    {{ col.value ? col.value : "-" }}
+                  </div>
+                </q-td>
+              </q-tr>
+            </template>
+          </d-table>
+        </div>
+      </div>
+    </div>
+  </q-card>
+
+  <Dialogbody
+    v-model:Modal="modal"
+    v-model:filter-keyword2="filterKeyword2"
+    v-model:type="type"
+    :click-close="clickClose"
+    :options-type="optionsType"
+    :rows2="rows2"
+    :fecthlistOthet="fecthlistOthet"
+  />
+</template>
+
+<style scoped lang="scss"></style>