From 3e9071982b418524fba84816f64d3c99c8051c71 Mon Sep 17 00:00:00 2001
From: setthawutttty <stw.ttty@gmail.com>
Date: Wed, 20 Sep 2023 17:34:22 +0700
Subject: [PATCH] =?UTF-8?q?Refactor=20Code+component=20=E0=B8=A3=E0=B8=B2?=
 =?UTF-8?q?=E0=B8=A2=E0=B8=81=E0=B8=B2=E0=B8=A3=E0=B8=AA=E0=B9=88=E0=B8=87?=
 =?UTF-8?q?=E0=B8=95=E0=B8=B1=E0=B8=A7=E0=B8=81=E0=B8=A5=E0=B8=B1=E0=B8=9A?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/AppointMent/Dialogbody.vue     |   2 -
 .../components/Repatriate/Dialogbody.vue      | 251 ++++++++++
 .../components/Repatriate/RepatriateMain.vue  | 447 +++---------------
 3 files changed, 311 insertions(+), 389 deletions(-)
 create mode 100644 src/modules/05_placement/components/Repatriate/Dialogbody.vue

diff --git a/src/modules/05_placement/components/AppointMent/Dialogbody.vue b/src/modules/05_placement/components/AppointMent/Dialogbody.vue
index b441b031a..8be6c90e6 100644
--- a/src/modules/05_placement/components/AppointMent/Dialogbody.vue
+++ b/src/modules/05_placement/components/AppointMent/Dialogbody.vue
@@ -22,7 +22,6 @@ const checkSelected = computed(() => {
 const props = defineProps({
   Modal: Boolean,
   clickClose: Function,
-  resetFilter: Function,
   fecthlistappointment: Function,
   nextPage: Function,
   optionsType: Array,
@@ -153,7 +152,6 @@ watchEffect(() => {
       <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" 
diff --git a/src/modules/05_placement/components/Repatriate/Dialogbody.vue b/src/modules/05_placement/components/Repatriate/Dialogbody.vue
new file mode 100644
index 000000000..4d00e0f81
--- /dev/null
+++ b/src/modules/05_placement/components/Repatriate/Dialogbody.vue
@@ -0,0 +1,251 @@
+<script setup lang="ts">
+import { ref, computed, watchEffect } from "vue";
+import { useQuasar } from "quasar";
+import { useCounterMixin } from "@/stores/mixin";
+import type { QTableProps } from "quasar";
+import type { officerType } from "@/modules/05_placement/interface/response/officer";
+
+import DialogHeader from "@/modules/05_placement/components/PersonalList/DialogHeader.vue";
+import http from "@/plugins/http";
+import config from "@/app.config";
+
+const $q = useQuasar();
+const selected = ref<officerType[]>([]);
+const mixin = useCounterMixin();
+const { showLoader, success, messageError, dialogConfirm,hideLoader } = mixin;
+
+const visibleColumns2 = ref<string[]>([
+  "no",
+  "fullname",
+  "posNo",
+  "position",
+  "positionLevel",
+  "organizationPositionOld",
+  "organization",
+  "createdAt",
+  "statusText",
+]);
+const columns2 = 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",
+  },
+  {
+    name: "posNo",
+    align: "left",
+    label: "ตำแหน่งเลขที่",
+    sortable: true,
+    field: "posNo",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "position",
+    align: "left",
+    label: "ตำแหน่งในสายงาน",
+    sortable: true,
+    field: "position",
+    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",
+  },
+  {
+    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",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+    sortOrder: "da",
+  },
+  {
+    name: "statusText",
+    align: "left",
+    label: "สถานะ",
+    sortable: true,
+    field: "statusText",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+]);
+
+const props = defineProps({
+  Modal: Boolean,
+  closeModal: Function,
+  getData: Function,
+  rows2: Array,
+  filterKeyword2:String,
+});
+
+
+const checkSelected = computed(() => {
+  if (selected.value.length === 0) {
+    return true;
+  }
+});
+
+//popup ยืนยันส่งัว
+const saveOrder = () => {
+    dialogConfirm($q,() => Ordersave(),"ยืนยันส่งไปออกคำสั่ง","ต้องการยืนยันส่งไปออกคำสั่งใช่หรือไม่?" )
+}
+//ส่งไปออกคำสั่ง
+const Ordersave = async () => {
+  const id = selected.value.map((item) => item.id);
+  const body = {
+    id,
+  };
+
+  showLoader();
+  await http
+    .post(config.API.repatriationMainReport(), body)
+    .then((res: any) => {
+      success($q, "ส่งไปออกคำสั่งส่งตัวกลับสำเร็จ");
+      props.closeModal?.();
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(async () => {
+        props.getData?.();
+      hideLoader();
+    });
+};
+
+const emit = defineEmits([
+  "update:filterKeyword2",
+  "update:selected",
+
+]);
+const updateInput = (value: any) => {
+  emit("update:filterKeyword2", value);
+};
+//รีเซ็ตค่าในช่องค้นหา
+const Reset = () => {
+    emit("update:filterKeyword2", "");
+};
+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="closeModal" />
+      <q-separator />
+      <q-card-section class="q-pt-none">
+        
+        <div class="row justify-end">
+          <div class="col-5">
+            <q-toolbar style="padding: 0">
+              <q-input borderless outlined dense debounce="300" :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="id" 
+            class="custom-header-table" :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="fullname" :props="props">
+                {{ props.row.fullname }}
+              </q-td>
+              <q-td key="posNo" :props="props">
+                {{ props.row.posNo }}
+              </q-td>
+              <q-td key="position" :props="props">
+                {{ props.row.position }}
+              </q-td>
+              <q-td key="positionLevel" :props="props">
+                {{ props.row.positionLevel }}
+              </q-td>
+              <q-td key="organizationPositionOld" :props="props">
+                <div class="table_ellipsis">
+                  {{ props.row.organizationPositionOld }}
+                </div>
+              </q-td>
+              <q-td key="organization" :props="props">
+                <div class="table_ellipsis">
+                  {{ props.row.organization }}
+                </div>
+              </q-td>
+              <q-td key="createdAt" :props="props">
+                {{ props.row.createdAt }}
+              </q-td>
+              <q-td key="statusText" :props="props">
+                {{ props.row.statusText }}
+              </q-td>
+            </q-tr>
+          </template>
+        </d-table>
+      </q-card-section>
+
+      <q-card-actions align="right" class="bg-white text-teal">
+        <q-btn label="ส่งไปออกคำสั่ง" @click="saveOrder" :disable="checkSelected" color="public"/>
+      </q-card-actions>
+    </q-card>
+  </q-dialog>
+</template>
\ No newline at end of file
diff --git a/src/modules/05_placement/components/Repatriate/RepatriateMain.vue b/src/modules/05_placement/components/Repatriate/RepatriateMain.vue
index 2e65fa1f7..f50787d2f 100644
--- a/src/modules/05_placement/components/Repatriate/RepatriateMain.vue
+++ b/src/modules/05_placement/components/Repatriate/RepatriateMain.vue
@@ -1,41 +1,37 @@
 <script setup lang="ts">
 import { ref, computed, onMounted } from "vue";
-import type { QTableProps } from "quasar";
 import { useQuasar } from "quasar";
 import { useRouter } from "vue-router";
 import { useCounterMixin } from "@/stores/mixin";
 import { useTransferDataStore } from "@/modules/05_placement/store";
-import http from "@/plugins/http";
-import config from "@/app.config";
-const transferStore = useTransferDataStore();
-const { statusText } = transferStore;
-import DialogFooter from "@/modules/05_placement/components/PersonalList/DialogFooter.vue";
-import DialogHeader from "@/modules/05_placement/components/PersonalList/DialogHeader.vue";
-
+import type { QTableProps } from "quasar";
 import type { officerType } from "@/modules/05_placement/interface/response/officer";
 
-const selected = ref<officerType[]>([]);
-const checkSelected = computed(() => {
-  if (selected.value.length === 0) {
-    return true;
-  }
-});
+import http from "@/plugins/http";
+import config from "@/app.config";
+import Dialogbody from "@/modules/05_placement/components/Repatriate/Dialogbody.vue";
 
 const $q = useQuasar();
+const filterKeyword = ref<string>("");
+const filterKeyword2 = ref<string>("");
+const filterRef = ref<any>(null);
 const router = useRouter();
-const mixin = useCounterMixin();
+const rows = ref<officerType[]>([]);
+const rows2 = ref<any>([]);
+const modal = ref<boolean>(false);
 
+const mixin = useCounterMixin();
+const transferStore = useTransferDataStore();
+const { statusText } = transferStore;
 const {
   date2Thai,
   messageError,
   showLoader,
   hideLoader,
   success,
-  dialogMessage,
   dialogRemove,
 } = mixin;
 
-const modal = ref<boolean>(false);
 const visibleColumns = ref<string[]>([
   "no",
   "fullname",
@@ -47,118 +43,15 @@ const visibleColumns = ref<string[]>([
   "createdAt",
   "statusText",
 ]);
-const visibleColumns2 = ref<string[]>([
-  "no",
-  "fullname",
-  "posNo",
-  "position",
-  "positionLevel",
-  "organizationPositionOld",
-  "organization",
-  "createdAt",
-  "statusText",
-]); //ค้นหา คอลัมน์ คอลัมน์ที่แสดง
-const filterKeyword = ref<string>("");
-const filterKeyword2 = ref<string>("");
-const filterRef = ref<any>(null);
+// รีเซ้ตค่าในช่อง ฟิลเตอร์
 const resetFilter = () => {
   filterKeyword.value = "";
   filterKeyword2.value = "";
   filterRef.value.focus();
 };
 
-// const nextPage = (id:string) => {
-//   router.push("/retirement/resign/"+id);
-// };
-const rows = ref<officerType[]>([]);
-const rows2 = ref<any>([]);
+// หัวตาราง
 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",
-  },
-  {
-    name: "posNo",
-    align: "left",
-    label: "ตำแหน่งเลขที่",
-    sortable: true,
-    field: "posNo",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-  },
-  {
-    name: "position",
-    align: "left",
-    label: "ตำแหน่งในสายงาน",
-    sortable: true,
-    field: "position",
-    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",
-  },
-  {
-    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",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-    sortOrder: "da",
-  },
-  {
-    name: "statusText",
-    align: "left",
-    label: "สถานะ",
-    sortable: true,
-    field: "statusText",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-  }
-]);
-const columns2 = ref<QTableProps["columns"]>([
   {
     name: "no",
     align: "left",
@@ -245,13 +138,19 @@ const columns2 = ref<QTableProps["columns"]>([
   },
 ]);
 
-//--------------(ปุ่มลบ)----------------//
-
+//เปิดรายละเอียด
 const openDetail = (id: string) => {
   router.push(`/repatriate/detail/${id}`);
 };
+// เปิด modal
 const openModal = () => (modal.value = true);
-const closeModal = () => (modal.value = false);
+// ปิด modal
+const closeModal = () => {
+  modal.value = false;
+  filterKeyword2.value = "";
+};
+
+// เปิด modal และกรอก status
 const openModalOrder = () => {
   openModal();
   const row = rows.value.filter(
@@ -262,13 +161,14 @@ const openModalOrder = () => {
   );
   rows2.value = row;
 };
+
+// ดึงข้อมูลจาก API
 const getData = async () => {
   showLoader();
   await http
     .get(config.API.repatriationMain())
     .then((res: any) => {
       const data = res.data.result;
-      console.log("data==>", data);
       rows.value = data.map((item: officerType) => ({
         id: item.id,
         fullname: `${item.prefix}${item.firstName} ${item.lastName}`,
@@ -288,44 +188,23 @@ const getData = async () => {
         organizationPositionOld: item.organizationPositionOld,
         isActive: item.isActive,
       }));
-      console.log(rows.value);
-    })
-    .catch((e) => {
-      // messageError($q, e);
     })
+    .catch((e) => {})
     .finally(() => {
       hideLoader();
     });
 };
-const saveOrder = async () => {
-  const id = selected.value.map((item) => item.id);
-  const body = {
-    id,
-  };
-
-  showLoader();
-  await http
-    .post(config.API.repatriationMainReport(), body)
-    .then((res: any) => {
-      //   const data = res.data.result;
-      //   console.log(data);
-      success($q, "ส่งไปออกคำสั่งส่งตัวกลับสำเร็จ");
-      closeModal();
-    })
-    .catch((e) => {
-      messageError($q, e);
-    })
-    .finally(async () => {
-      await getData();
-      hideLoader();
-    });
+// เปิดpop up ยืนยันลบข้อมูล
+const clickDelete = async (name: string, id: string) => {
+  dialogRemove($q, async () => await deleteData(id), `ลบข้อมูลของ ${name}`);
 };
+
+// ลบข้อมูล
 const deleteData = async (id: string) => {
   await http
     .delete(config.API.repatriationMainDelete(id))
     .then((res) => {
       success($q, "ลบข้อมูลสำเร็จ");
-      console.log(res);
     })
     .catch((e) => {
       messageError($q, e);
@@ -335,9 +214,6 @@ const deleteData = async (id: string) => {
     });
 };
 
-const clickDelete = async (name: string, id: string) => {
-  dialogRemove($q, async () => await deleteData(id), `ลบข้อมูลของ ${name}`);
-};
 onMounted(async () => {
   await getData();
 });
@@ -348,65 +224,26 @@ onMounted(async () => {
     <q-separator />
     <div class="row q-pa-md">
       <div class="col-12">
+
         <div class="row col-12">
-          <q-btn
-            @click="openModalOrder"
-            size="14px"
-            flat
-            round
-            color="add"
-            icon="mdi-account-arrow-right"
-          >
+          <q-btn flat round size="14px" color="add" icon="mdi-account-arrow-right" @click="openModalOrder" >
             <q-tooltip>ส่งไปออกคำสั่งส่งตัวกลับ</q-tooltip>
           </q-btn>
-
           <q-space />
-          <q-input
-            class="col-xs-12 col-sm-3 col-md-2"
-            standout
-            dense
-            v-model="filterKeyword"
-            ref="filterRef"
-            outlined
-            debounce="300"
-            placeholder="ค้นหา"
-          >
+          <q-input class="col-xs-12 col-sm-3 col-md-2" standout dense v-model="filterKeyword" ref="filterRef" 
+            outlined debounce="300" placeholder="ค้นหา" >
             <template v-slot:append>
               <q-icon v-if="filterKeyword == ''" name="search" />
-              <q-icon
-                v-if="filterKeyword !== ''"
-                name="clear"
-                class="cursor-pointer"
-                @click="resetFilter"
-              />
+              <q-icon v-if="filterKeyword !== ''" name="clear" class="cursor-pointer" @click="resetFilter" />
             </template>
           </q-input>
-
-          <q-select
-            v-model="visibleColumns"
-            multiple
-            outlined
-            dense
-            options-dense
-            :display-value="$q.lang.table.columns"
-            emit-value
-            map-options
-            :options="columns"
-            option-value="name"
-            options-cover
-            style="min-width: 150px"
-            class="col-xs-12 col-sm-3 col-md-2 q-ml-sm"
-          />
+          <q-select class="col-xs-12 col-sm-3 col-md-2 q-ml-sm" v-model="visibleColumns" multiple outlined 
+            dense options-dense :display-value="$q.lang.table.columns" emit-value map-options :options="columns" 
+            option-value="name" options-cover style="min-width: 150px" />
         </div>
 
         <div class="col-12 q-pt-sm">
-          <d-table
-            :columns="columns"
-            :rows="rows"
-            :filter="filterKeyword"
-            row-key="id"
-            :visible-columns="visibleColumns"
-          >
+          <d-table :columns="columns" :rows="rows" :filter="filterKeyword" row-key="id" :visible-columns="visibleColumns" >
             <template v-slot:header="props">
               <q-tr :props="props">
                 <q-th v-for="col in props.cols" :key="col.name" :props="props">
@@ -415,88 +252,45 @@ onMounted(async () => {
                 <q-th auto-width />
               </q-tr>
             </template>
+            
             <template v-slot:body="props">
               <q-tr :props="props" class="cursor-pointer">
                 <q-td key="no" :props="props" @click="openDetail(props.row.id)">
                   {{ props.rowIndex + 1 }}
                 </q-td>
-                <q-td
-                  key="fullname"
-                  :props="props"
-                  @click="openDetail(props.row.id)"
-                >
+                <q-td key="fullname" :props="props" @click="openDetail(props.row.id)" >
                   {{ props.row.fullname }}
                 </q-td>
-                <q-td
-                  key="posNo"
-                  :props="props"
-                  @click="openDetail(props.row.id)"
-                >
+                <q-td key="posNo" :props="props" @click="openDetail(props.row.id)" >
                   {{ props.row.posNo }}
                 </q-td>
-                <q-td
-                  key="position"
-                  :props="props"
-                  @click="openDetail(props.row.id)"
-                >
+                <q-td key="position" :props="props" @click="openDetail(props.row.id)" >
                   {{ props.row.position }}
                 </q-td>
-                <q-td
-                  key="positionLevel"
-                  :props="props"
-                  @click="openDetail(props.row.id)"
-                >
+                <q-td key="positionLevel" :props="props" @click="openDetail(props.row.id)" >
                   {{ props.row.positionLevel }}
                 </q-td>
-                <q-td
-                  key="organizationPositionOld"
-                  :props="props"
-                  @click="openDetail(props.row.id)"
-                >
+                <q-td key="organizationPositionOld" :props="props" @click="openDetail(props.row.id)" >
                   <div class="table_ellipsis">
                     {{ props.row.organizationPositionOld }}
                   </div>
                 </q-td>
-                <q-td
-                  key="organization"
-                  :props="props"
-                  @click="openDetail(props.row.id)"
-                >
+                <q-td key="organization" :props="props" @click="openDetail(props.row.id)" >
                   <div class="table_ellipsis">
                     {{ props.row.organization }}
                   </div>
                 </q-td>
-                <q-td
-                  key="createdAt"
-                  :props="props"
-                  @click="openDetail(props.row.id)"
-                >
+                <q-td key="createdAt" :props="props" @click="openDetail(props.row.id)" >
                   {{ props.row.createdAt }}
                 </q-td>
-                <q-td
-                  key="statusText"
-                  :props="props"
-                  @click="openDetail(props.row.id)"
-                >
+                <q-td key="statusText" :props="props" @click="openDetail(props.row.id)" >
                   {{ props.row.statusText }}
                 </q-td>
                 <q-td auto-width>
-                  <q-btn
-                    icon="delete"
-                    size="14px"
-                    :color="
-                      props.row.status == 'REPORT' || props.row.status == 'DONE'
-                        ? 'grey'
-                        : 'red-7'
-                    "
-                    flat
-                    round
-                    dense
+                  <q-btn icon="delete" size="14px" flat round dense
+                    :color="props.row.status == 'REPORT' || props.row.status == 'DONE' ? 'grey' : 'red-7'"
                     @click="clickDelete(props.row.fullname, props.row.id)"
-                    :disable="
-                      props.row.status == 'REPORT' || props.row.status == 'DONE'
-                    "
-                  >
+                    :disable="props.row.status == 'REPORT' || props.row.status == 'DONE'" >
                     <q-tooltip>ลบข้อมูล</q-tooltip>
                   </q-btn>
                 </q-td>
@@ -508,133 +302,12 @@ onMounted(async () => {
     </div>
   </q-card>
 
-  <q-dialog v-model="modal">
-    <q-card style="width: 1200px; max-width: 80vw">
-      <DialogHeader title="ส่งไปออกคำสั่งส่งตัวกลับ" :close="closeModal" />
-      <q-separator />
-      <q-card-section class="q-pt-none">
-        <div class="row justify-end">
-          <div class="col-5">
-            <q-toolbar style="padding: 0">
-              <q-input
-                borderless
-                outlined
-                dense
-                debounce="300"
-                v-model="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="id"
-          class="custom-header-table"
-          :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="fullname" :props="props">
-                {{ props.row.fullname }}
-              </q-td>
-              <q-td key="posNo" :props="props">
-                {{ props.row.posNo }}
-              </q-td>
-              <q-td key="position" :props="props">
-                {{ props.row.position }}
-              </q-td>
-              <q-td key="positionLevel" :props="props">
-                {{ props.row.positionLevel }}
-              </q-td>
-              <q-td key="organizationPositionOld" :props="props">
-                <div class="table_ellipsis">
-                  {{ props.row.organizationPositionOld }}
-                </div>
-              </q-td>
-              <q-td key="organization" :props="props">
-                <div class="table_ellipsis">
-                  {{ props.row.organization }}
-                </div>
-              </q-td>
-              <q-td key="createdAt" :props="props">
-                {{ props.row.createdAt }}
-              </q-td>
-              <q-td key="statusText" :props="props">
-                {{ props.row.statusText }}
-              </q-td>
-            </q-tr>
-          </template>
-        </d-table>
-      </q-card-section>
-
-      <q-card-actions align="right" class="bg-white text-teal">
-        <q-btn
-          label="ส่งไปออกคำสั่ง"
-          @click="saveOrder"
-          :disable="checkSelected"
-          color="public"
-        />
-      </q-card-actions>
-    </q-card>
-  </q-dialog>
+  <Dialogbody
+    v-model:Modal="modal"
+    :closeModal="closeModal"
+    :rows2="rows2"
+    v-model:filterKeyword2="filterKeyword2"
+    :getData="getData"
+  />
 </template>
 <style scoped lang="scss"></style>