จัดระเบียบ code และเพิ่ม component

src/modules/05_placement/components/Other/Detail.vue

@@ -6,7 +6,7 @@ import { useCounterMixin } from "@/stores/mixin";
 
 import type { ResponseTitle } from "@/modules/05_placement/interface/response/Receive";
 import type { ResponseDataDetail } from "@/modules/05_placement/interface/response/Transfer";
-import type { QTableProps, QForm } from "quasar";
+import type { QForm } from "quasar";
 
 import http from "@/plugins/http";
 import config from "@/app.config";
@@ -27,8 +27,8 @@ const {
   dialogConfirm,
   success,
 } = mixin;
-const roleAdmin = ref<boolean>(false);
 
+const roleAdmin = ref<boolean>(false);
 const title = ref<ResponseTitle>({
   fullname: "",
   organizationPositionOld: "",
@@ -64,23 +64,14 @@ const reason = ref<string>("");
 const Otherdata = ref<any>([]);
 const avatar = ref<string>("");
 
-onMounted(async () => {
-  if (keycloak.tokenParsed != null) {
-    roleAdmin.value = await keycloak.tokenParsed.role.includes("placement1");
-    console.log("roleAdmin===>", roleAdmin.value);
-  }
-  await fecthOther();
-});
-
+//-----(fetch data by id)-----//
 const fecthOther = async () => {
   showLoader();
   await http
     .get(config.API.otherByid(paramsId.toString()))
-    // .get(config.API.transferId(paramsId.toString()))
     .then((res: any) => {
       const data = res.data.result;
       Otherdata.value = res.data.result;
-      // console.log(data);
       avatar.value = data.avatar ?? "";
       title.value.fullname = `${data.firstname ?? "-"} ${data.lastname ?? "-"}`;
       title.value.organizationPositionOld = data.organizationPositionOld ?? "-";
@@ -89,12 +80,10 @@ const fecthOther = async () => {
 
       responseData.value.profileId = data.profileId;
       responseData.value.createdAt = data.createdAt;
-      responseData.value.date =
-        data.date !== null ? new Date(data.date) : new Date();
+      responseData.value.date = data.date !== null ? new Date(data.date) : new Date();
       responseData.value.id = data.id ?? "";
       responseData.value.organization = data.organization ?? "";
-      responseData.value.organizationPositionOld =
-        data.organizationPositionOld ?? "";
+      responseData.value.organizationPositionOld = data.organizationPositionOld ?? "";
       responseData.value.positionLevelOld = data.positionLevelOld ?? "";
       responseData.value.positionNumberOld = data.positionNumberOld ?? "";
       responseData.value.positionTypeOld = data.positionTypeOld ?? "";
@@ -102,18 +91,14 @@ const fecthOther = async () => {
       responseData.value.salary = data.salary !== null ? data.salary : 0;
       responseData.value.status = data.status ?? "";
       responseData.value.avataPath = data.avataPath ?? "";
-      responseData.value.fullname = `${data.firstname ?? "-"} ${
-        data.lastName ?? "-"
-      }`;
-
+      responseData.value.fullname = `${data.prefix ?? "-"}${data.firstname ?? "-"} ${data.lastname ?? "-"}`;
       organizationPositionOld.value = data.organizationPositionOld ?? "";
       positionTypeOld.value = data.positionTypeOld ?? "";
       positionLevelOld.value = data.positionLevelOld ?? "";
       posNo.value = data.positionNumberOld ?? "";
       salary.value = data.amountOld ?? "";
       organization.value = data.organization ?? "";
-      date.value =
-        data.positionDate !== null ? new Date(data.positionDate) : null;
+      date.value = data.positionDate !== null ? new Date(data.positionDate) : null;
       reason.value = data.reason ?? "";
     })
     .catch((e) => {
@@ -124,6 +109,8 @@ const fecthOther = async () => {
       edit.value = false;
     });
 };
+
+//-----(edit)-----//
 const clickEdit = async () => {
   await myform.value.validate().then(async (success: boolean) => {
     if (success) {
@@ -132,8 +119,8 @@ const clickEdit = async () => {
     }
   });
 };
+//-----(update)-----//
 const saveOther = async () => {
-  // showLoader();
   let data = {
     citizenId: Otherdata.value.citizenId,
     prefixId: Otherdata.value.prefixId,
@@ -147,8 +134,6 @@ const saveOther = async () => {
     positionNumberOld: posNo.value,
     amountOld: Number(salary.value),
   };
-  console.log(data);
-
   await http
     .put(config.API.otherByid(paramsId.toString()), data)
     .then(() => {
@@ -168,8 +153,14 @@ const getClass = (val: boolean) => {
     "full-width cursor-pointer": !val,
   };
 };
+onMounted(async () => {
+  if (keycloak.tokenParsed != null) {
+    roleAdmin.value = await keycloak.tokenParsed.role.includes("placement1");
+    console.log("roleAdmin===>", roleAdmin.value);
+  }
+  await fecthOther();
+});
 </script>
-
 <template>
   <div class="toptitle text-dark col-12 row items-center">
     <q-btn
@@ -180,14 +171,14 @@ const getClass = (val: boolean) => {
       flat
       color="primary"
       class="q-mr-sm"
-      @click="router.go(-1)"
+      @click="router.push(`/other`)"
     />
-    รายละเอียดรายการอื่นๆ {{ title.fullname }}
+    รายละเอียดรายการอื่นๆ {{ responseData.fullname }}
   </div>
   <q-card bordered class="row col-12 text-dark">
     <div class="bg-grey-1 q-pa-sm col-12 row items-center text-primary">
       <div class="q-pl-sm text-weight-bold text-subtitle2">
-        {{ title.fullname }}
+        {{ responseData.fullname }}
       </div>
       <q-space />
       <q-btn
@@ -356,44 +347,15 @@ const getClass = (val: boolean) => {
           </div>
           <div class="col-xs-6 col-sm-3 row">
             <div class="col-12">
-              <!-- <q-input
-                :class="getClass(edit)"
-                :outlined="edit"
-                dense
-                lazy-rules
-                :readonly="!edit"
-                :borderless="!edit"
-                v-model="salary"
-                :rules="[(val) => !!val || `${'กรุณากรอกเงินเดือน'}`]"
-                hide-bottom-space
-                :label="`${'เงินเดือน'}`"
-                type="number"
-              /> -->
               <CurruncyInput
                 v-model="salary"
                 label="เงินเดือน"
                 :edit="edit"
-                :rules="[(val) => !!val || `${'กรุณากรอกเงินเดือน'}`]"
+                :rules="[(val:number) => !!val || `${'กรุณากรอกเงินเดือน'}`]"
               />
             </div>
           </div>
           <div class="col-12"><q-separator /></div>
-          <!-- <div class="col-xs-6 col-sm-6 row items-center">
-            <div class="col-12">
-              <q-input
-                :class="getClass(edit)"
-                :outlined="edit"
-                dense
-                lazy-rules
-                :readonly="!edit"
-                :borderless="!edit"
-                v-model="organization"
-                :rules="[(val) => !!val || `${'กรุณากรอกโอนไปสังกัด'}`]"
-                hide-bottom-space
-                :label="`${'โอนไปสังกัด'}`"
-              />
-            </div>
-          </div> -->
           <div class="col-xs-6 col-sm-6 row items-center">
             <div class="col-12">
               <datepicker

src/modules/05_placement/components/Other/Dialogbody.vue

@@ -0,0 +1,283 @@
+<script setup lang="ts">
+import { ref, computed,watchEffect } from "vue";
+import { useQuasar } from "quasar";
+import { useCounterMixin } from "@/stores/mixin";
+import type { QTableProps } from "quasar";
+
+
+import http from "@/plugins/http";
+import config from "@/app.config";
+const mixin = useCounterMixin();
+const { showLoader, success, messageError, dialogConfirm } = mixin;
+
+const $q = useQuasar();
+import DialogHeader from "@/modules/05_placement/components/Receive/DialogHeader.vue";
+const selected = ref([]);
+const checkSelected = computed(() => {
+  if (selected.value.length === 0 || props.type === "") {
+    return true;
+  }
+});
+
+const props = defineProps({
+  Modal: Boolean,
+  clickClose: Function,
+  resetFilter: Function,
+  fecthlistOthet: Function,
+  optionsType: Array,
+  rows2: Array,
+  filterKeyword2:String,
+  type:String,
+});
+const visibleColumns2 = ref<string[]>([
+  "no",
+  "fullname",
+  "position",
+  "positionLevel",
+  "organizationPositionOld",
+  "statustext",
+]);
+const columns2 = ref<QTableProps["columns"]>([
+  {
+    name: "no",
+    align: "left",
+    label: "ลำดับ",
+    sortable: true,
+    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: "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: "statustext",
+    align: "left",
+    label: "สถานะ",
+    sortable: true,
+    field: "statustext",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+]);
+const emit = defineEmits([
+  "update:filterKeyword2",
+  "update:type",
+  "update:selected",
+
+]);
+const updateInput = (value: any) => {
+  emit("update:filterKeyword2", value);
+};
+
+const updateInputType = (value: any) => {
+  emit("update:type", value);
+};
+//รีเซ็ตค่าในช่องค้นหา
+const Reset = () => {
+    emit("update:filterKeyword2", "");
+};
+//เปิด modal ยืนยัน
+const clickAddlist = () => {
+  dialogConfirm($q, () => addOther());
+};
+
+//อัพเดต ส่งไปออกคำสั่ง
+const addOther = async () => {
+  let pId: string[] = [];
+  let Type = props.type as string
+  selected.value.forEach((e: any) => {
+    pId.push(e.personalId);
+  });
+  let data = {
+    id: pId,
+  };
+  showLoader();
+  await http
+    .put(config.API.otherReport(Type), data)
+    .then((res: any) => {
+      success($q, "บันทึกสำเร็จ");
+    })
+    .catch((e: any) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      props.fecthlistOthet?.();
+      selected.value = [];
+      props.clickClose?.()
+    });
+};
+watchEffect(() => {
+  if (props.Modal === true) {
+    selected.value = [];
+  }
+});
+</script>
+<template>
+  <q-dialog v-model="props.Modal">
+    <q-card style="width: 1200px; max-width: 80vw">
+      <DialogHeader title="ส่งไปออกคำสั่งอื่นๆ" :close="props.clickClose" />
+      <q-separator />
+      <q-card-section class="q-pt-none">
+        <div class="row justify-between">
+          <div class="col-5">
+            <q-toolbar style="padding: 0">
+              <q-select
+                outlined
+                dense
+                :model-value="type"
+                @update:model-value="updateInputType"
+                :options="optionsType"
+                label="ประเภทคำสั่ง"
+                style="width: 400px; max-width: auto"
+                emit-value
+                map-options
+                option-label="name"
+                option-value="id"
+              />
+            </q-toolbar>
+          </div>
+          <div class="col-5">
+            <q-toolbar style="padding: 0">
+              <q-input
+                borderless
+                outlined
+                dense
+                debounce="300"
+                :model-value="filterKeyword2"
+                @update:model-value="updateInput"
+                placeholder="ค้นหา"
+                style="width: 850px; max-width: auto"
+              >
+                <template v-slot:append>
+                  <q-icon v-if="filterKeyword2 == ''" name="search" />
+                  <q-icon
+                    v-if="filterKeyword2 !== ''"
+                    name="clear"
+                    class="cursor-pointer"
+                    @click="Reset"
+                  />
+                </template>
+              </q-input>
+              <q-select
+                v-model="visibleColumns2"
+                multiple
+                outlined
+                dense
+                options-dense
+                :display-value="$q.lang.table.columns"
+                emit-value
+                map-options
+                :options="columns2"
+                option-value="name"
+                options-cover
+                style="min-width: 150px"
+                class="gt-xs q-ml-sm"
+              />
+            </q-toolbar>
+          </div>
+        </div>
+
+        <d-table
+          :columns="columns2"
+          :rows="props.rows2"
+          :filter="filterKeyword2"
+          row-key="personalId"
+          flat
+          :visible-columns="visibleColumns2"
+          selection="multiple"
+          v-model:selected="selected"
+        >
+          <template v-slot:header-selection="scope">
+            <q-checkbox
+              keep-color
+              color="primary"
+              dense
+              v-model="scope.selected"
+            />
+          </template>
+          <template v-slot:body="props">
+            <q-tr :props="props" class="cursor-pointer">
+              <q-td>
+                
+                <q-checkbox
+                  keep-color
+                  color="primary"
+                  dense
+                  v-model="props.selected"
+                />
+              </q-td>
+              <q-td key="no" :props="props">
+                {{ props.rowIndex + 1 }}
+              </q-td>
+              <q-td key="fullname" :props="props">
+                {{ props.row.fullname }}
+              </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="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="clickAddlist"
+          :disable="checkSelected"
+          color="public"
+        />
+      </q-card-actions>
+    </q-card>
+  </q-dialog>
+</template>

src/modules/05_placement/components/Other/Main.vue

@@ -1,173 +1,41 @@
 <script setup lang="ts">
-import { ref, computed, onMounted } from "vue";
-import type { QTableProps } from "quasar";
+import { ref, onMounted } from "vue";
 import { useQuasar } from "quasar";
 import { useRouter } from "vue-router";
-import DialogHeader from "@/modules/05_placement/components/Receive/DialogHeader.vue";
-import DialogOrgTree from "@/modules/05_placement/components/Other/OtherModal.vue";
 import { useCounterMixin } from "@/stores/mixin";
+import { useTransferDataStore } from "@/modules/05_placement/store"
+import type { QTableProps } from "quasar";
+
 import http from "@/plugins/http";
 import config from "@/app.config";
-const mixin = useCounterMixin(); //เรียกฟังก์ชันกลาง
-const {
-  showLoader,
-  hideLoader,
-  dateText,
-  success,
-  messageError,
-  date2Thai,
-  dialogRemove,
-  dialogConfirm,
-} = mixin;
+import Dialogbody from "@/modules/05_placement/components/Other/Dialogbody.vue"
 
-const selected = ref([]);
-const checkSelected = computed(() => {
-  if (selected.value.length === 0 || type.value === "") {
-    return true;
-  }
-});
+const storeFn = useTransferDataStore();
+const mixin = useCounterMixin();
 
-// const add = () => {
-//   router.push(`/receive/add`);
-// };
-
-const clickClose = () => {
-  modal.value = false;
-};
+const { statusText } = storeFn
+const { showLoader, hideLoader, success, messageError, date2Thai, dialogRemove } = mixin;
 
 const $q = useQuasar();
-const modal = ref<boolean>(false);
-const popup = () => {
-  modal.value = true;
-  fecthTypeOption();
-  type.value = "";
-  selected.value = [];
-};
 const router = useRouter();
+const optionsType = ref<any[]>([]);
+const type = ref<string>("");
+const modal = ref<boolean>(false);
+const rows = ref<any>([]);
+const rows2 = ref<any>([]);
 
-const modalTree = ref<boolean>(false);
-const personal = ref<any[]>([]);
-const personalId = ref<string>("");
-const visibleColumns = ref<string[]>([
-  "no",
-  "fullname",
-  "position",
-  "positionLevel",
-  "organizationPositionOld",
-  "createdAt",
-  "statustext",
-]);
-
-const visibleColumns2 = ref<string[]>([
-  "no",
-  "fullname",
-  "position",
-  "positionLevel",
-  "organizationPositionOld",
-
-  "statustext",
-]); //ค้นหา คอลัมน์ คอลัมน์ที่แสดง
 const filterKeyword = ref<string>("");
 const filterKeyword2 = ref<string>("");
 const filterRef = ref<any>(null);
-const resetFilter = () => {
-  filterKeyword.value = "";
-  filterKeyword2.value = "";
-  filterRef.value.focus();
-};
+const selected = ref([]);
 
-const optionsType = ref<any[]>([]);
-const type = ref<string>("");
-onMounted(() => {
-  fecthlistOthet();
+const pagination = ref({
+  sortBy: "createdAt",
+  descending: true,
+  page: 1,
+  rowsPerPage: 10,
 });
-// const listRecevice = ref<any>([]);
-const fecthlistOthet = async () => {
-  showLoader();
-  await http
-    .get(config.API.otherMain())
-    .then((res) => {
-      console.log(res);
-      let response = res.data.result;
-      // listRecevice.value = response;
-      console.log(response);
-      rows.value = response.map((r: any) => ({
-        createdAt: date2Thai(r.createdAt),
-        date: new Date(),
-        firstName: r.firstname ?? "",
-        personalId: r.id ?? "",
-        isActive: r.isActive ? r.isActive : false,
-        lastName: r.lastname ?? "",
-        organization: r.organization ?? "",
-        organizationPositionOld: r.organizationPositionOld ?? "",
-        posNo: r.posNo ?? "",
-        position: r.position ?? "",
-        positionLevel: r.positionLevel ?? "",
-        positionLevelOld: r.positionLevelOld ?? "",
-        positionNumberOld: r.positionNumberOld ?? "",
-        positionTypeOld: r.positionTypeOld ?? "",
-        prefix: r.prefix ?? "",
-        reason: r.reason ?? "",
-        salary: r.salary ? r.salary : 0,
-        status: r.status ?? "",
-        statustext: status(r.status ?? ""),
-        fullname: `${r.prefix ?? ""} ${r.firstname ?? ""} ${r.lastname ?? ""}`,
-      }));
-      console.log(rows.value);
-      rows2.value = rows.value.filter((e: any) => e.orgName !== null && e.status !== 'REPORT'&& e.status !== 'DONE');
-    })
-    .catch((e) => {
-      messageError($q);
-      console.log(e);
-    })
-    .finally(() => {
-      hideLoader();
-    });
-};
-const fecthTypeOption = async () => {
-  showLoader();
-  type.value = "";
-  await http
-    .get(config.API.typeOrder())
-    .then((res) => {
-      optionsType.value = res.data.result.filter(
-        (e: any) => e.commandCode === "C-PM-08" || e.commandCode === "C-PM-09"
-      );
-    })
-    .catch((e) => {
-      messageError($q, e);
-    })
-    .finally(() => {
-      hideLoader();
-    });
-};
-
-const rows = ref<any>([
-  // {
-  //   personalId: "08db721d-add6-47b0-8a13-5f45d106e8d1",
-  //   citizenId: "1234444332222",
-  //   fullname: "นางสาวอย พชช",
-  //   organizationName: "นักจัดการงานทั่วไป",
-  //   orgName: "กลุ่มงานช่วยนักบริหาร",
-  //   organizationShortName: "สกจ.",
-  //   positionNumber: "กก. 1",
-  //   positionPath: "นักจัดการงานทั่วไป",
-  //   birthday: dateText(new Date("1989-09-03")),
-  // },
-]);
-const rows2 = ref<any>([
-  // {
-  //   personalId: "08db721d-add6-47b0-8a13-5f45d106e8d1",
-  //   citizenId: "1234444332222",
-  //   fullname: "นางสาวอย พชช",
-  //   organizationName: "นักจัดการงานทั่วไป",
-  //   orgName: "กลุ่มงานช่วยนักบริหาร",
-  //   organizationShortName: "สกจ.",
-  //   positionNumber: "กก. 1",
-  //   positionPath: "นักจัดการงานทั่วไป",
-  //   birthday: dateText(new Date("1989-09-03")),
-  // },
-]);
+const visibleColumns = ref<string[]>([ "no", "fullname", "position", "positionLevel", "organizationPositionOld", "createdAt", "statustext"]);
 const columns = ref<QTableProps["columns"]>([
   {
     name: "no",
@@ -233,77 +101,68 @@ const columns = ref<QTableProps["columns"]>([
     style: "font-size: 14px",
   },
 ]);
-const columns2 = ref<QTableProps["columns"]>([
-  {
-    name: "no",
-    align: "left",
-    label: "ลำดับ",
-    sortable: true,
-    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: "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: "statustext",
-    align: "left",
-    label: "สถานะ",
-    sortable: true,
-    field: "statustext",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-  },
-]);
 
-// const openModalTree = (id: string) => {
-//   personalId.value = id;
-//   console.log(personalId.value);
-
-//   personal.value = listRecevice.value.filter((e: any) => e.id === id);
-//   modalTree.value = true;
-// };
-
-const clickDelete = (id: string) => {
-  dialogRemove($q, () => deleteOther(id));
+//----(ดึงข้อมูลจาก API)------//
+const fecthlistOthet = async () => {
+  showLoader();
+  await http
+    .get(config.API.otherMain())
+    .then((res) => {
+      let response = res.data.result;
+      rows.value = response.map((r: any) => ({
+        createdAt: date2Thai(r.createdAt),
+        date: new Date(),
+        firstName: r.firstname ?? "",
+        personalId: r.id ?? "",
+        isActive: r.isActive ? r.isActive : false,
+        lastName: r.lastname ?? "",
+        organization: r.organization ?? "",
+        organizationPositionOld: r.organizationPositionOld ?? "",
+        posNo: r.posNo ?? "",
+        position: r.position ?? "",
+        positionLevel: r.positionLevel ?? "",
+        positionLevelOld: r.positionLevelOld ?? "",
+        positionNumberOld: r.positionNumberOld ?? "",
+        positionTypeOld: r.positionTypeOld ?? "",
+        prefix: r.prefix ?? "",
+        reason: r.reason ?? "",
+        salary: r.salary ? r.salary : 0,
+        status: r.status ?? "",
+        statustext: statusText(r.status ?? ""),
+        fullname: `${r.prefix ?? ""}${r.firstname ?? ""} ${r.lastname ?? ""}`,
+      }));
+      rows2.value = rows.value.filter(
+        (e: any) =>
+          e.orgName !== null && e.status !== "REPORT" && e.status !== "DONE"
+      );
+    })
+    .catch((e) => {
+      messageError($q);
+    })
+    .finally(() => {
+      hideLoader();
+    });
 };
-const clickAddlist = () => {
-  dialogConfirm($q, () => addOther());
+//----(ดึงข้อมูลประเภทคำสั่ง)------//
+const fecthTypeOption = async () => {
+  showLoader();
+  type.value = "";
+  await http
+    .get(config.API.typeOrder())
+    .then((res) => {
+      optionsType.value = res.data.result.filter(
+        (e: any) => e.commandCode === "C-PM-08" || e.commandCode === "C-PM-09"
+      );
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
 };
+
+//----(ลบข้อมูลจากไอดี)------//
 const deleteOther = async (id: string) => {
   showLoader();
   await http
@@ -318,62 +177,42 @@ const deleteOther = async (id: string) => {
       fecthlistOthet();
     });
 };
-const addOther = async () => {
-  let pId: string[] = [];
-  selected.value.forEach((e: any) => {
-    pId.push(e.personalId);
-  });
-  let data = {
-    id: pId,
-  };
-  console.log(data);
-  showLoader();
-  await http
-    .put(config.API.otherReport(type.value), data)
-    .then((res: any) => {
-      console.log(res);
-      success($q, "บันทึกสำเร็จ");
-    })
-    .catch((e: any) => {
-      console.log(e);
-      messageError($q, e);
-    })
-    .finally(() => {
-      fecthlistOthet();
-      selected.value = [];
-      modal.value = false;
-    });
+
+
+//----(รีเซ็ตข้อมูลในช่อง input)------//
+const resetFilter = () => {
+  filterKeyword.value = "";
+  filterKeyword2.value = "";
+  filterRef.value.focus();
 };
 
-const closeModalTree = async () => {
-  await fecthlistOthet();
-  modalTree.value = false;
+
+//----(เปิด Dialog)------//
+const popup = () => {
+  modal.value = true;
+  filterKeyword2.value = "";
+  fecthTypeOption();
+  type.value = "";
+  selected.value = [];
 };
 
+//----(ปิด modal)------//
+const clickClose = () => {
+  modal.value = false;
+};
+//----(เปิด Dialog ลบข้อมูล)------//
+const clickDelete = (id: string) => {
+  dialogRemove($q, () => deleteOther(id));
+};
+//----(เปิดหน้าถัดไป)------//
 const nextPage = (row: any) => {
   router.push({
     path: `/other/detail/${row.personalId}`,
   });
 };
-const status = (val: string) => {
-  switch (val) {
-    case "WAITTING":
-      return "รอดำเนินการ";
-    case "PENDING":
-      return "เลือกตำแหน่งแล้ว";
-    case "REPORT":
-      return "ส่งรายชื่อไปออกคำสั่ง";
-    case "DONE":
-      return "ออกคำสั่งเสร็จแล้ว";
-    default:
-      return "-";
-  }
-};
-const pagination = ref({
-  sortBy: "createdAt",
-  descending: true,
-  page: 1,
-  rowsPerPage: 10,
+
+onMounted(() => {
+  fecthlistOthet();
 });
 </script>
 <template>
@@ -383,58 +222,39 @@ const pagination = ref({
     <div class="row q-pa-md">
       <div class="col-12">
         <div class="row col-12">
-          <!-- <q-btn flat round color="primary" @click="add" icon="mdi-plus">
-            <q-tooltip>เพิ่มข้อมูล</q-tooltip>
-          </q-btn> -->
-
-          <q-btn
-            @click="popup()"
-            size="14px"
-            flat
-            round
-            color="add"
-            icon="mdi-account-arrow-right"
-          >
+          <q-btn @click="popup()" size="14px" flat round color="add" icon="mdi-account-arrow-right">
             <q-tooltip>ส่งไปออกคำสั่งรายการอื่นๆ</q-tooltip>
           </q-btn>
-
           <q-space />
-          <q-input
-            class="col-xs-12 col-sm-3 col-md-2"
-            standout
-            dense
-            v-model="filterKeyword"
-            ref="filterRef"
-            outlined
-            debounce="300"
-            placeholder="ค้นหา"
-          >
+          <q-input 
+              class="col-xs-12 col-sm-3 col-md-2" 
+              standout 
+              dense 
+              v-model="filterKeyword" 
+              ref="filterRef" 
+              outlined 
+              debounce="300" 
+              placeholder="ค้นหา"
+              >
             <template v-slot:append>
               <q-icon v-if="filterKeyword == ''" name="search" />
-              <q-icon
-                v-if="filterKeyword !== ''"
-                name="clear"
-                class="cursor-pointer"
-                @click="resetFilter"
-              />
+              <q-icon v-if="filterKeyword !== ''" name="clear" class="cursor-pointer" @click="resetFilter"/>
             </template>
           </q-input>
-
-          <q-select
-            v-model="visibleColumns"
-            multiple
-            outlined
-            dense
-            options-dense
-            :display-value="$q.lang.table.columns"
-            emit-value
-            map-options
-            :options="columns"
-            option-value="name"
-            options-cover
-            style="min-width: 150px"
+          <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">
@@ -475,17 +295,11 @@ const pagination = ref({
                 <q-td key="organizationPositionOld" :props="props">
                   <div class="table_ellipsis">
                     {{ props.row.organizationPositionOld }}
-                    <!-- <q-tooltip>
-                    {{ props.row.organizationPositionOld }}
-                  </q-tooltip> -->
                   </div>
                 </q-td>
                 <q-td key="organization" :props="props">
                   <div class="table_ellipsis">
                     {{ props.row.organization }}
-                    <!-- <q-tooltip>
-                    {{ props.row.organization }}
-                  </q-tooltip> -->
                   </div>
                 </q-td>
                 <q-td key="createdAt" :props="props">
@@ -517,152 +331,15 @@ const pagination = ref({
       </div>
     </div>
   </q-card>
-
-  <q-dialog v-model="modal">
-    <q-card style="width: 1200px; max-width: 80vw">
-      <DialogHeader title="ส่งไปออกคำสั่งอื่นๆ" :close="clickClose" />
-      <q-separator />
-      <q-card-section class="q-pt-none">
-        <div class="row justify-between">
-          <div class="col-5">
-            <q-toolbar style="padding: 0">
-              <q-select
-                outlined
-                dense
-                v-model="type"
-                :options="optionsType"
-                label="ประเภทคำสั่ง"
-                style="width: 400px; max-width: auto"
-                emit-value
-                map-options
-                option-label="name"
-                option-value="id"
-              />
-            </q-toolbar>
-          </div>
-          <div class="col-5">
-            <q-toolbar style="padding: 0">
-              <q-input
-                borderless
-                outlined
-                dense
-                debounce="300"
-                v-model="filterKeyword2"
-                placeholder="ค้นหา"
-                style="width: 850px; max-width: auto"
-              >
-                <template v-slot:append>
-                  <q-icon v-if="filterKeyword2 == ''" name="search" />
-                  <q-icon
-                    v-if="filterKeyword2 !== ''"
-                    name="clear"
-                    class="cursor-pointer"
-                    @click="resetFilter"
-                  />
-                </template>
-              </q-input>
-              <q-select
-                v-model="visibleColumns2"
-                multiple
-                outlined
-                dense
-                options-dense
-                :display-value="$q.lang.table.columns"
-                emit-value
-                map-options
-                :options="columns2"
-                option-value="name"
-                options-cover
-                style="min-width: 150px"
-                class="gt-xs q-ml-sm"
-              />
-            </q-toolbar>
-          </div>
-        </div>
-
-        <d-table
-          :columns="columns2"
-          :rows="rows2"
-          :filter="filterKeyword2"
-          row-key="personalId"
-          flat
-          :visible-columns="visibleColumns2"
-          selection="multiple"
-          v-model:selected="selected"
-        >
-          <template v-slot:header-selection="scope">
-            <q-checkbox
-              keep-color
-              color="primary"
-              dense
-              v-model="scope.selected"
-            />
-          </template>
-          <!-- <template v-slot:body-selection="scope">
-            <q-checkbox
-              keep-color
-              color="primary"
-              dense
-              v-model="scope.selected"
-            />
-          </template> -->
-          <template v-slot:body="props">
-            <q-tr :props="props" class="cursor-pointer">
-              <q-td>
-                <q-checkbox
-                  keep-color
-                  color="primary"
-                  dense
-                  v-model="props.selected"
-                />
-              </q-td>
-              <q-td key="no" :props="props">
-                {{ props.rowIndex + 1 }}
-              </q-td>
-              <q-td key="fullname" :props="props">
-                {{ props.row.fullname }}
-              </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="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="clickAddlist"
-          :disable="checkSelected"
-          color="public"
-        />
-      </q-card-actions>
-    </q-card>
-  </q-dialog>
-
-  <!-- <DialogOrgTree
-    v-model:modal="modalTree"
-    :close="closeModalTree"
-    :personal="personal"
-    :personalId="personalId"
-  /> -->
-  <!-- :personalId="personalId" -->
+<Dialogbody
+  v-model:Modal="modal"
+  :clickClose="clickClose"
+  :optionsType="optionsType"
+  :rows2="rows2"
+  :selected="selected"
+  v-model:filterKeyword2="filterKeyword2"
+  v-model:type="type"
+  :fecthlistOthet="fecthlistOthet"
+/>
 </template>
 <style scoped lang="scss"></style>