Merge branch 'develop' of github.com:Frappet/bma-ehr-frontend into me

src/api/05_placement/api.placement.ts

@@ -8,7 +8,7 @@ const placemenHelpGov = `${placement}/officer`;
 const placemenRepatriation = `${placement}/repatriation`;
 const placemenRelocation = `${placement}/relocation`;
 const placemenOther = `${env.API_URI}/retirement/other`;
-const placemenAppointment = `${env.API_URI}/retirement/appointment`;
+const placemenAppointment = `${placement}/appointment`;
 
 export default {
   MainDetail: (year: number) => `${placement}/exam/${year}`,
@@ -108,23 +108,40 @@ export default {
 
   // แต่งตั้ง-เลื่อน
   placemenAppointment,
+  appointmentMain: () => `${placement}/appointment`,
+  appointmentByid: (id: string) => `${placement}/appointment/${id}`,
+  appointmentDelete: (id: string) => `${placement}/appointment/${id}`,
+  appointmentPosition: (id: string) => `${placement}/appointment/position/${id}`,
+  apppointmentReport: (id: string) => `${placement}/appointment/report/${id}`,
 
   // ช่วยราชการ
   placemenHelpGov,
   officerMain: () => `${placement}/officer`,
-  officerDetail: (id:string) => `${placement}/officer/${id}`,
+  officerDetail: (id: string) => `${placement}/officer/${id}`,
-  officerMainDelete: (id:string) => `${placement}/officer/${id}`,
+  officerMainDelete: (id: string) => `${placement}/officer/${id}`,
   officerMainReport: () => `${placement}/officer/report`,
+  officerMainEdit: (id:string) => `${placemenHelpGov}/${id}`,
 
   // ส่งตัวกลับ
   placemenRepatriation,
   repatriationMain: () => `${placement}/repatriation`,
-  repatriationDetail: (id:string) => `${placement}/repatriation/${id}`,
+  repatriationDetail: (id: string) => `${placement}/repatriation/${id}`,
-  repatriationMainDelete: (id:string) => `${placement}/repatriation/${id}`,
+  repatriationMainDelete: (id: string) => `${placement}/repatriation/${id}`,
   repatriationMainReport: () => `${placement}/repatriation/report`,
+  repatriationMainEdit: (id:string) => `${placemenRepatriation}/${id}`,
   // ขอย้าย
   placemenRelocation,
-
+  relocationMain: () => `${placement}/relocation`,
+  relocationDetail: (id:string) => `${placement}/relocation/${id}`,
+  relocationMainDelete: (id:string) => `${placement}/relocation/${id}`,
+  relocationMainReport: () => `${placement}/relocation/report`,
+  relocationMainPut: (id:string) => `${placement}/relocation/position/${id}`,
+  relocationMainEdit: (id:string) => `${placemenRelocation}/${id}`,
   // อื่นๆ
   placemenOther,
+  otherMain: () => `${placemenOther}`,
+  otherPosition: (id: string) => `${placemenOther}/position/${id}`,
+  otherReport: (id: string) => `${placemenOther}/report/${id}`,
+  otherByid: (id: string) => `${placemenOther}/${id}`,
+
 };

src/api/06_retirement/api.retirement.ts

@@ -28,10 +28,19 @@ export default {
   resignReject: (id: string) => `${retirement}/resign/reject/${id}`,
   // ปลดออก
   retirementDischarge,
+  listDischared: () => `${retirement}/dischared`,
+  discharedByid: (id: string) => `${retirement}/dischared/${id}`,
+  discharedReport: `${retirement}/dischared/report`,
 
   // ไล่ออก
   retirementExpulsion,
+  listExpulsion: () => `${retirement}/expulsion`,
+  expulsionByid: (id: string) => `${retirement}/expulsion/${id}`,
+  expulsionReport: `${retirement}/expulsion/report`,
 
   // ให้ออก
   retirementOut,
+  listOut: () => `${retirement}/out`,
+  outByid: (id: string) => `${retirement}/out/${id}`,
+  outReport: `${retirement}/out/report`,
 };

src/api/index.ts

@@ -26,6 +26,7 @@ const config = ref<any>({
       "https://s3cluster.frappet.com/bma-ehr-fpt/organization/strueture/tree_20230712_172702.json",
     MEET_URI: "meet.frappet.com",
     API_RETIREMENT_URI: "https://bma-ehr.frappet.synology.me/api/v1",
+    // API_PROBATION_URI: "https://ehr.joolsoft.com/v1",
     API_PROBATION_URI: "https://bmaehr.joolsoft.com/nodeapi/v1",
     // API_PROBATION_URI: "http://192.168.1.151:7776/v1",
     API_DASHBOARD_URI: "http://192.168.1.9:6026/api/v1",

src/modules/05_placement/components/AppointMent/AppointmentModal.vue

@@ -0,0 +1,803 @@
+<script setup lang="ts">
+import { useQuasar, QForm } from "quasar";
+import { onMounted, reactive, ref, watch } from "vue";
+import DialogHeader from "@/modules/05_placement/components/PersonalList/DialogHeader.vue";
+import DialogFooter from "@/modules/05_placement/components/PersonalList/DialogFooter.vue";
+import { useCounterMixin } from "@/stores/mixin";
+import http from "@/plugins/http";
+import config from "@/app.config";
+
+const $q = useQuasar();
+const mixin = useCounterMixin(); //เรียกฟังก์ชันกลาง
+const { date2Thai, hideLoader, messageError, showLoader, success } = mixin; //ฟังก์ชันกลางที่เรียกใช้
+
+const notFound = ref<string>("ไม่พบข้อมูลที่ค้นหา");
+const noData = ref<string>("ไม่พบข้อมูลผังโครงสร้าง");
+
+const checkValidate = ref<boolean>(false);
+const myFormPosition = ref<any>();
+const selected = ref<string>("");
+const selectedFile = ref<string>("");
+const dataRespone = ref<any>();
+
+// Set form field
+let dataForm = reactive({
+  personalId: "",
+  containDate: new Date(),
+  posNoId: "",
+  positionId: "",
+  positionLevelId: "",
+  positionLineId: "",
+  positionPathSideId: "",
+  positionTypeId: "",
+  // salaryAmount: null,
+  // mouthSalaryAmount: null,
+  // positionSalaryAmount: null,
+});
+
+onMounted(async () => {
+  await fetchPublishFile();
+  await loadTreeData();
+  // await fetchplacementPosition();
+});
+const fetchPublishFile = async () => {
+  await http
+    .get(config.API.getPublishFileHistory)
+    .then((res) => {
+      let data = res.data.result;
+      selectedFile.value = data[0].fileName;
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(async () => {
+      hideLoader();
+    });
+};
+
+// โหลดข้อมูลโครงสร้างจาก json
+const treeData = ref<Array<any>>([]);
+const loadTreeData = async () => {
+  expanded.value = [];
+  await http
+    .get(`${config.s3ClusterUrl}${selectedFile.value}`)
+    .then((res: any) => {
+      treeData.value = res.data;
+      dataRespone.value = res.data;
+
+      // Filter objects with "name" null
+      const filteredData = res.data.filter(filterByPersonIdNull);
+      treeData.value = filteredData;
+    })
+    .catch((e: any) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+};
+
+function filterByPersonIdNull(obj: any) {
+  // console.log(obj);
+  if (obj.name === null && obj.isCondition != true) {
+    return true;
+  }
+  if (obj.children && obj.children.length > 0) {
+    obj.children = obj.children.filter(filterByPersonIdNull);
+    return obj.children.length > 0;
+  }
+  return false;
+}
+
+// โหลด position
+// const placementPosition = ref<any>([]);
+// const fetchplacementPosition = async () => {
+//   await http
+//     .get(config.API.placementPosition())
+//     .then((res: any) => {
+//       placementPosition.value = res.data.result;
+//     })
+//     .catch((e: any) => {
+//       messageError($q, e);
+//     });
+// };
+
+const search = ref<string>("");
+//reset Tree Filter
+const filterRef = ref<any>(null);
+// const resetFilter = () => {
+//   search.value = "";
+//   filterRef.value.focus();
+// };
+
+const props = defineProps({
+  personalId: String,
+  modal: Boolean,
+  close: {
+    type: Function,
+    default: () => console.log("close modal"),
+  },
+  personal: Object,
+});
+
+const myFilterMethod = (node: any, filter: string) => {
+  const filt = filter;
+
+  return (
+    // ((node.name && node.name == null) || !node.name) &&
+    (node.name && node.name.indexOf(filt) > -1) ||
+    (node.organizationName && node.organizationName.indexOf(filt) > -1) ||
+    (node.positionNum && node.positionNum.indexOf(filt) > -1) ||
+    (node.positionName && node.positionName.indexOf(filt) > -1) ||
+    (node.governmentCode &&
+      node.governmentCode.toString().indexOf(filt) > -1) ||
+    (node.agency && node.agency.indexOf(filt) > -1) ||
+    (node.government && node.government.indexOf(filt) > -1) ||
+    (node.department && node.department.indexOf(filt) > -1) ||
+    (node.pile && node.pile.indexOf(filt) > -1) ||
+    (node.organizationShortName &&
+      node.organizationShortName.indexOf(filt) > -1) ||
+    (node.positionSideName && node.positionSideName.indexOf(filt) > -1) ||
+    (node.executivePosition && node.executivePosition.indexOf(filt) > -1) ||
+    (node.executivePositionSide &&
+      node.executivePositionSide.indexOf(filt) > -1) ||
+    (node.positionLevel && node.positionLevel.indexOf(filt) > -1)
+  );
+};
+
+const validateData = async () => {
+  checkValidate.value = true;
+  await myFormPosition.value.validate().then((result: boolean) => {
+    if (result == false) {
+      checkValidate.value = false;
+    }
+  });
+};
+const id = ref<string>("");
+const saveAppoint = async () => {
+  console.log("save", dataForm);
+
+  myFormPosition.value.validate().then(async (result: boolean) => {
+    if (props.personalId !== undefined) {
+      id.value = props.personalId.toString();
+    }
+    if (result) {
+      const dataAppoint = await {
+        // personalId: props.personalId,
+        recruitDate: dataForm.containDate,
+        posNoId: dataForm.posNoId,
+        positionId: dataForm.positionId,
+        positionLevelId: dataForm.positionLevelId,
+        positionLineId: dataForm.positionLineId,
+        positionPathSideId: dataForm.positionPathSideId,
+        positionTypeId: dataForm.positionTypeId,
+        // salaryAmount: dataForm.salaryAmount,
+        // mouthSalaryAmount: dataForm.mouthSalaryAmount,
+        // positionSalaryAmount: dataForm.positionSalaryAmount,
+      };
+      console.log("save appoint===>", dataAppoint);
+      showLoader();
+      await http
+        .put(config.API.appointmentPosition(id.value), dataAppoint)
+        .then((res) => {
+          console.log("respone=>", res);
+          success($q, "บันทึกสำเร็จ");
+        })
+        .catch((e) => {
+          messageError($q, e);
+        })
+        .finally(async () => {
+          await closeAndClear();
+          // await resetFilter();
+          await fetchPublishFile();
+          await loadTreeData();
+          // await fetchplacementPosition();
+          hideLoader();
+        });
+    }
+  });
+};
+
+const editDataStatus = ref<boolean>(false);
+const clickEditRow = () => {
+  editDataStatus.value = true;
+};
+
+const closeModal = () => {
+  if (editDataStatus.value == true) {
+    $q.dialog({
+      title: `ข้อมูลมีการแก้ไข`,
+      message: `ยืนยันที่จะปิดโดยไม่บันทึกใช่หรือไม่?`,
+      cancel: "ยกเลิก",
+      ok: "ยืนยัน",
+      persistent: true,
+    }).onOk(() => {
+      editDataStatus.value = false;
+      closeAndClear();
+    });
+  } else {
+    closeAndClear();
+  }
+};
+
+const closeAndClear = async () => {
+  await props.close();
+  editDataStatus.value = false;
+  selected.value = "";
+  dataForm.personalId = "";
+  dataForm.containDate = new Date();
+  dataForm.posNoId = "";
+  dataForm.positionId = "";
+  dataForm.positionLevelId = "";
+  dataForm.positionLineId = "";
+  dataForm.positionPathSideId = "";
+  dataForm.positionTypeId = "";
+  // dataForm.salaryAmount = null;
+  // dataForm.mouthSalaryAmount = null;
+  // dataForm.positionSalaryAmount = null;
+};
+// ตำแหน่งเลขที่
+const posNoOptions = ref<Object[]>([
+  {
+    label: "",
+    value: "",
+  },
+]);
+// ตำแหน่ง
+const positionOptions = ref<Object[]>([
+  {
+    label: "",
+    value: "",
+  },
+]);
+// ด้าน/สาขา
+const positionPathSideOptions = ref<Object[]>([
+  {
+    label: "",
+    value: "",
+  },
+]);
+// ตำแหน่งประเภท
+const positionTypeOptions = ref<Object[]>([
+  {
+    label: "",
+    value: "",
+  },
+]);
+// สายงาน
+const positionLineOptions = ref<Object[]>([
+  {
+    label: "",
+    value: "",
+  },
+]);
+// ระดับ
+const positionLevelOptions = ref<Object[]>([
+  {
+    label: "",
+    value: "",
+  },
+]);
+
+const selectedPosition = async (data: any) => {
+  console.log("selecteds", data);
+  if (data.name == null && selected.value != data.keyId) {
+    // console.log("selecteds", data);
+
+    editDataStatus.value = true;
+    selected.value = data.keyId;
+
+    // posNo Options
+    posNoOptions.value = [
+      {
+        label: data.positionNum,
+        value: data.positionNumId,
+      },
+    ];
+    dataForm.posNoId = data.positionNumId;
+
+    // position Options
+    positionOptions.value = [
+      {
+        label: data.positionName,
+        value: data.positionNameId,
+      },
+    ];
+    dataForm.positionId = data.positionNameId;
+
+    // positionPathSide Options
+    let positionPathSideArr: any = [];
+    if (data.positionSideNameObj && data.positionSideNameObj != null) {
+      data.positionSideNameObj.map((x: any) => {
+        positionPathSideArr.push({
+          label: x.Name,
+          value: x.Id,
+        });
+      });
+      positionPathSideOptions.value = positionPathSideArr;
+      dataForm.positionPathSideId =
+        positionPathSideArr.length > 1 || positionPathSideArr.length == 0
+          ? ""
+          : positionPathSideArr[0].value;
+    }
+
+    // positionType Options
+    positionTypeOptions.value = [
+      {
+        label: data.positionType,
+        value: data.positionTypeId,
+      },
+    ];
+    dataForm.positionTypeId = data.positionTypeId;
+
+    // positionLine Options
+    positionLineOptions.value = [
+      {
+        label: data.positionLine,
+        value: data.positionLineId,
+      },
+    ];
+    dataForm.positionLineId = data.positionLineId;
+
+    // positionLevel Options
+    let positionLevelsArr: any = [];
+    if (data.positionLevelObj != null) {
+      data.positionLevelObj.map((x: any) => {
+        positionLevelsArr.push({
+          label: x.Name,
+          value: x.Id,
+        });
+      });
+      positionLevelOptions.value = positionLevelsArr;
+      dataForm.positionLevelId =
+        positionLevelsArr.length > 1 || positionLevelsArr.length == 0
+          ? ""
+          : positionLevelsArr[0].value;
+      dataForm.positionLevelId = data.positionLevelObj[0].Id;
+    }
+  } else if (selected.value == data.keyId) {
+    selected.value = "";
+    dataForm.posNoId = "";
+    dataForm.positionId = "";
+    dataForm.positionLevelId = "";
+    dataForm.positionLineId = "";
+    dataForm.positionPathSideId = "";
+    dataForm.positionTypeId = "";
+  }
+  console.log("dataForm", dataForm);
+};
+
+// const checkPosition = (val: string) => {
+//   const num = placementPosition.value.findIndex((e: string) => e === val);
+//   return num;
+// };
+const personal = ref<any>();
+const expanded = ref<string[]>([]);
+
+watch(props, () => {
+  expanded.value = [];
+  const dataPersonal = props.personal;
+  console.log(props.personal);
+
+  if (dataPersonal) {
+    dataPersonal.map((data: any) => {
+      personal.value = data;
+    });
+    console.log("personal", personal.value);
+  }
+  // console.log("draft===>", personal.value.draft);
+
+  if (personal.value) {
+    // const findData = dataRespone.value.find(findByPerson);
+    let findData: any = null;
+    dataRespone.value.map((x: any) => {
+      findData = findByPerson(x);
+      // console.log(findData);
+
+      if (findData != null) {
+        // console.log("findData===>", findData);
+        selectedPosition(findData);
+        for (let i = 3; i <= findData.keyId.length; i += 2) {
+          expanded.value.push(findData.keyId.slice(0, i));
+        }
+      }
+    });
+    // loadTreeData();
+    // selectedPosition(findData.children.children.children)
+  }
+});
+
+function findByPerson(element: any): any {
+  // console.log("searchTree element===>", element)
+  if (
+    element.positionNumId &&
+    element.positionLineId === personal.value.positionLineId &&
+    element.positionTypeId === personal.value.positionTypeId &&
+    element.positionNumId === personal.value.posNoId &&
+    (element.positionLevelObj === null ||
+      element.positionLevelObj[0].Id === personal.value.positionLevelId)
+  ) {
+    return element;
+  } else if (element.children) {
+    var i;
+    var result = null;
+    for (i = 0; result == null && i < element.children.length; i++) {
+      result = findByPerson(element.children[i]);
+    }
+    return result;
+  }
+  return null;
+}
+</script>
+
+<template>
+  <q-dialog v-model="props.modal" persistent>
+    <q-card style="width: 900px; max-width: 80vw">
+      <q-form ref="myFormPosition">
+        <DialogHeader
+          title="เลือกหน่วยงานที่แต่งตั้ง - เลื่อน"
+          :close="closeModal"
+        />
+        <q-separator />
+        <q-card-section class="q-pa-sm bg-grey-1">
+          <div class="row col-12 q-col-gutter-sm">
+            <div class="col-xs-12 col-sm-7 row">
+              <q-card flat bordered class="fit q-pa-sm">
+                <q-scroll-area visible style="height: 70vh">
+                  <q-input
+                    outlined
+                    dense
+                    ref="filterRef"
+                    v-model="search"
+                    placeholder="ค้นหา"
+                    class="q-mb-sm"
+                  >
+                    <template v-slot:append>
+                      <q-icon name="mdi-magnify" />
+                    </template>
+                  </q-input>
+                  <div class="q-pa-sm q-gutter-sm">
+                    <q-tree
+                      no-transition
+                      dense
+                      :nodes="treeData"
+                      node-key="keyId"
+                      :filter="search"
+                      :no-results-label="notFound"
+                      :no-nodes-label="noData"
+                      :filter-method="myFilterMethod"
+                      v-model:expanded="expanded"
+                    >
+                      <template v-slot:header-organization="prop">
+                        <div class="col">
+                          <div
+                            class="row items-center q-px-xs q-pt-xs q-gutter-sm"
+                          >
+                            <!--แสดงชื่อแผนก พิมพ์ตัวหนา คลิกแล้วกาง/หุบ Tree-->
+                            <div class="text-weight-medium">
+                              {{ prop.node.organizationName }}
+                            </div>
+
+                            <!--แสดง Total Count PositionNum-->
+                            <!-- <q-badge rounded color="grey-2" text-color="dark"
+                                                            :label="prop.node.totalPositionCount" /> -->
+                            <q-badge
+                              v-if="prop.node.totalPositionVacant > 0"
+                              rounded
+                              color="red"
+                              outline
+                              :label="prop.node.totalPositionVacant"
+                            />
+
+                            <q-space />
+                          </div>
+                          <div class="col items-center q-px-xs q-pt-xs">
+                            <div class="text-weight-medium text-grey-7">
+                              {{ prop.node.governmentCode }}
+                              {{ prop.node.organizationShortName }}
+                            </div>
+                          </div>
+                        </div>
+                      </template>
+
+                      <template v-slot:header-person="prop">
+                        <q-item
+                          clickable
+                          :active="selected == prop.node.keyId"
+                          @click="selectedPosition(prop.node)"
+                          :disable="
+                            prop.node.name != null 
+                         
+                          "
+                          active-class="my-list-link text-primary text-weight-medium"
+                          class="row items-center text-dark q-py-xs q-pl-sm rounded-borders my-list"
+                        >
+                          <!-- checkPosition(prop.node.positionNumId) != -1 -->
+                          <img
+                            v-if="
+                              prop.node.avatar == '' ||
+                              prop.node.avatar ==
+                                'https://cdn.quasar.dev/img/boy-avatar.png'
+                            "
+                            src="@/assets/avatar_user.jpg"
+                            class="col-xs-1 col-sm-2"
+                            style="
+                              width: 28px;
+                              height: 28px;
+                              border-radius: 50%;
+                            "
+                          />
+                          <img
+                            v-else
+                            :src="prop.node.avatar"
+                            class="col-xs-1 col-sm-2"
+                            style="
+                              width: 28px;
+                              height: 28px;
+                              border-radius: 50%;
+                            "
+                          />
+                          <!--=====ตำแหน่งว่าง สีแดง=====-->
+                          <div
+                            v-if="prop.node.name == null"
+                            class="q-px-sm text-weight-medium text-red"
+                          >
+                            ว่าง
+                          </div>
+                          <!--=====หัวหน้า สีเขียว=====-->
+                          <div v-else-if="prop.node.positionLeaderFlag">
+                            <div
+                              class="q-px-sm text-weight-medium text-primary"
+                            >
+                              {{ prop.node.name }}
+                            </div>
+                          </div>
+                          <!--=====ลูกน้อง สีปกติ=====-->
+                          <div v-else>
+                            <div class="q-px-sm text-weight-medium">
+                              {{ prop.node.name }}
+                            </div>
+                          </div>
+                          <!--ต่อท้ายชื่อคน แสดงสีปกติ-->
+                          <div class="q-pr-sm">
+                            {{ prop.node.positionName }}
+                          </div>
+                          <div class="q-pr-sm">
+                            {{ prop.node.positionNum }}
+                          </div>
+                          <div class="q-pr-sm">
+                            {{ prop.node.positionLevel }}
+                          </div>
+                          <q-icon
+                            v-if="prop.node.positionLeaderFlag"
+                            class="q-mr-sm"
+                            size="15px"
+                            color="primary"
+                            name="mdi-bookmark"
+                          ></q-icon>
+
+                          <q-space />
+                        </q-item>
+                      </template>
+                    </q-tree>
+                  </div>
+                </q-scroll-area>
+              </q-card>
+            </div>
+            <div class="col-xs-12 col-sm-5">
+              <q-card flat bordered class="fit q-pa-sm">
+                <q-scroll-area visible style="height: 70vh">
+                  <div class="row col-12 q-col-gutter-xs">
+                    <div class="col-xs-12 col-sm-12 col-md-12"></div>
+                    <div class="col-xs-12 col-sm-12 col-md-12">
+                      <datepicker
+                        menu-class-name="modalfix"
+                        v-model="dataForm.containDate"
+                        :locale="'th'"
+                        autoApply
+                        :enableTimePicker="false"
+                        week-start="0"
+                      >
+                        <template #year="{ year }">{{ year + 543 }}</template>
+                        <template #year-overlay-value="{ value }">{{
+                          parseInt(value + 543)
+                        }}</template>
+                        <template #trigger>
+                          <q-input
+                            class="full-width inputgreen cursor-pointer"
+                            outlined
+                            dense
+                            lazy-rules
+                            :model-value="
+                              date2Thai(new Date(dataForm.containDate))
+                            "
+                            :rules="[ (val: string) =>!!val ||`${'วันที่รายงานตัว'}`,
+        ]"
+                            :label="`${'วันที่รายงานตัว'}`"
+                            hide-bottom-space
+                          >
+                            <template v-slot:prepend>
+                              <q-icon
+                                name="event"
+                                class="cursor-pointer"
+                                style="color: var(--q-primary)"
+                              >
+                              </q-icon>
+                            </template>
+                          </q-input>
+                        </template>
+                      </datepicker>
+                    </div>
+                    <q-space />
+                    <div class="col-xs-12 col-sm-12 col-md-12">
+                      <q-select
+                        class="full-width inputgreen cursor-pointer custom-input"
+                        outlined
+                        standout
+                        dense
+                        hide-bottom-space
+                        lazy-rules
+                        :options="posNoOptions"
+                        v-model="dataForm.posNoId"
+                        :label="`${'ตำแหน่งเลขที่'}`"
+                        map-options
+                      />
+                    </div>
+                    <div class="col-xs-12 col-sm-12 col-md-12">
+                      <q-select
+                        outlined
+                        class="full-width inputgreen cursor-pointer custom-input"
+                        standout
+                        dense
+                        hide-bottom-space
+                        lazy-rules
+                        :options="positionOptions"
+                        v-model="dataForm.positionId"
+                        :label="`${'ตำแหน่ง'}`"
+                        map-options
+                      />
+                    </div>
+                    <div class="col-xs-12 col-sm-12 col-md-12">
+                      <q-select
+                        outlined
+                        class="full-width inputgreen cursor-pointer custom-input"
+                        standout
+                        dense
+                        hide-bottom-space
+                        lazy-rules
+                        :options="positionPathSideOptions"
+                        v-model="dataForm.positionPathSideId"
+                        :label="`${'ด้าน/สาขา'}`"
+                        map-options
+                      />
+                    </div>
+
+                    <div class="col-xs-12 col-sm-12 col-md-12">
+                      <q-select
+                        outlined
+                        class="full-width inputgreen cursor-pointer custom-input"
+                        standout
+                        dense
+                        hide-bottom-space
+                        lazy-rules
+                        :options="positionTypeOptions"
+                        v-model="dataForm.positionTypeId"
+                        :label="`${'ประเภทตำแหน่ง'}`"
+                        map-options
+                      />
+                    </div>
+                    <div class="col-xs-12 col-sm-12 col-md-12">
+                      <q-select
+                        outlined
+                        class="full-width inputgreen cursor-pointer custom-input"
+                        standout
+                        dense
+                        hide-bottom-space
+                        lazy-rules
+                        :options="positionLineOptions"
+                        v-model="dataForm.positionLineId"
+                        :label="`${'สายงาน'}`"
+                        map-options
+                      />
+                    </div>
+                    <div class="col-xs-12 col-sm-12 col-md-12">
+                      <q-select
+                        outlined
+                        class="full-width inputgreen cursor-pointer custom-input"
+                        standout
+                        dense
+                        lazy-rules
+                        :options="positionLevelOptions"
+                        v-model="dataForm.positionLevelId"
+                        :label="`${'ระดับ'}`"
+                        hide-bottom-space
+                        :rules="[(val: string) => !!val || `${'กรุณาเลือกระดับ'}`]"
+                        emit-value
+                        map-options
+                      />
+                    </div>
+                    <!-- <div class="col-sx-12 col-sm-12 col-md-12">
+                      <q-separator inset size="2px" class="q-my-md" />
+                    </div> -->
+                    <!-- <div class="col-xs-6 col-sm-6 col-md-6">
+                      <q-input
+                        outlined
+                        dense
+                        lazy-rules
+                        v-model="dataForm.salaryAmount"
+                        :rules="[(val) => !!val || `${'กรุณากรอกเงินเดือน'}`]"
+                        :label="`${'เงินเดือน'}`"
+                        @update:modelValue="clickEditRow"
+                        type="number"
+                        hide-bottom-space
+                      />
+                    </div> -->
+
+                    <!-- <div class="col-xs-6 col-sm-6 col-md-6">
+                      <q-input
+                        outlined
+                        dense
+                        lazy-rules
+                        v-model="dataForm.positionSalaryAmount"
+                        :rules="[
+                          (val) => !!val || `${'กรุณากรอกเงินประจำตำแหน่ง'}`,
+                        ]"
+                        :label="`${'เงินประจำตำแหน่ง'}`"
+                        @update:modelValue="clickEditRow"
+                        type="number"
+                        hide-bottom-space
+                      />
+                    </div> -->
+
+                    <!-- <div class="col-xs-6 col-sm-6 col-md-6">
+                      <q-input
+                        outlined
+                        dense
+                        lazy-rules
+                        v-model="dataForm.mouthSalaryAmount"
+                        :rules="[
+                          (val) =>
+                            !!val || `${'กรุณากรอกเงินค่าตอบแทนรายเดือน'}`,
+                        ]"
+                        :label="`${'เงินค่าตอบแทนรายเดือน'}`"
+                        @update:modelValue="clickEditRow"
+                        type="number"
+                        hide-bottom-space
+                      />
+                    </div> -->
+                  </div>
+                </q-scroll-area>
+              </q-card>
+            </div>
+          </div>
+        </q-card-section>
+
+        <q-separator />
+        <DialogFooter
+          :editvisible="true"
+          :validate="validateData"
+          :save="saveAppoint"
+          v-model:modalEdit="editDataStatus"
+        />
+      </q-form>
+    </q-card>
+  </q-dialog>
+</template>
+
+<style scoped lang="scss">
+.q-tree__node-header {
+  padding: 0px;
+  margin-top: 0px;
+  border-radius: 4px;
+  outline: 0;
+}
+
+.my-list-link {
+  color: rgb(118, 168, 222);
+  border-radius: 5px;
+  background: #a3d3fb48 !important;
+  font-weight: 600;
+  border: 1px solid rgba(175, 185, 196, 0.217);
+  /*  box-shadow: 1px 1px 7px 1px rgba(41, 95, 255, 0.15) !important; */
+}
+</style>

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

@@ -0,0 +1,446 @@
+<script setup lang="ts">
+import { onMounted, ref } from "vue";
+import { useQuasar } from "quasar";
+import { useRoute, useRouter } from "vue-router";
+import { useCounterMixin } from "@/stores/mixin";
+
+import type { ResponseTitle } from "@/modules/05_placement/interface/response/Receive";
+
+import http from "@/plugins/http";
+import config from "@/app.config";
+
+const $q = useQuasar();
+const route = useRoute();
+const router = useRouter();
+const mixin = useCounterMixin();
+
+const paramsId = route.params.id;
+const {
+  date2Thai,
+  messageError,
+  showLoader,
+  hideLoader,
+  success,
+  dialogConfirm,
+} = mixin;
+
+const title = ref<ResponseTitle>({
+  fullname: "",
+  organizationPositionOld: "",
+  positionLevelOld: "",
+  positionTypeOld: "",
+});
+const appointment = ref<any>([]);
+
+const edit = ref<boolean>(false);
+const organizationPositionOld = ref<string>("");
+const positionTypeOld = ref<string>("");
+const positionLevelOld = ref<string>("");
+const posNo = ref<string>("");
+const salary = ref<string>("");
+const educationOld = ref<string>("");
+const reason = ref<string>("");
+const date = ref<Date | null>(null);
+
+onMounted(async () => {
+  await fecthappointmentByid();
+});
+
+const fecthappointmentByid = async () => {
+  showLoader();
+  await http
+    .get(config.API.appointmentByid(paramsId.toString()))
+    .then((res: any) => {
+      const data = res.data.result;
+      appointment.value = data;
+      console.log(data);
+
+      title.value.fullname = `${data.firstname ?? "-"} ${data.lastname ?? "-"}`;
+      title.value.organizationPositionOld = data.organizationPositionOld ?? "-";
+      title.value.positionLevelOld = data.positionLevelOld ?? "-";
+      title.value.positionTypeOld = data.positionTypeOld ?? "-";
+
+      educationOld.value = data.educationOld;
+      organizationPositionOld.value = data.organizationPositionOld;
+      positionTypeOld.value = data.positionTypeOld;
+      positionLevelOld.value = data.positionLevelOld;
+      posNo.value = data.positionNumberOld;
+      salary.value = data.salary;
+      // organization.value = data.organization; //ไม่มี
+      reason.value = data.reason;
+      date.value = data.positionDate;
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+};
+const clickSave = () => {
+  dialogConfirm($q, () => putAppointment());
+};
+const putAppointment = async () => {
+  console.log("บันทึกข้อมูล");
+  let data = {
+    citizenId: appointment.value.citizenId,
+    prefixId: appointment.value.prefixId,
+    firstname: appointment.value.firstname,
+    lastname: appointment.value.lastname,
+    // dateOfBirth: "2023-08-15T08:44:38.060Z",
+    // genderId: "3fa85f64-5717-4562-b3fc-2c963f66afa6",
+    // nationality: "string",
+    // race: "string",
+    // religionId: "3fa85f64-5717-4562-b3fc-2c963f66afa6",
+    // bloodGroupId: "3fa85f64-5717-4562-b3fc-2c963f66afa6",
+    // relationshipId: "3fa85f64-5717-4562-b3fc-2c963f66afa6",
+    // telephoneNumber: "string",
+    educationOld: educationOld.value,
+    organizationPositionOld: organizationPositionOld.value,
+    positionTypeOld: positionTypeOld.value,
+    positionLevelOld: positionLevelOld.value,
+    positionNumberOld: posNo.value,
+    amountOld: Number(salary.value),
+    reason: reason.value,
+    positionDate: date.value,
+    // positionDate: "2023-08-15T08:44:38.060Z",
+    // file: ["string"],
+  };
+  console.log(data);
+  showLoader();
+  await http
+    .put(config.API.appointmentByid(paramsId.toString()), data)
+    .then(() => {
+      success($q, "บันทึกข้อมูลสำเร็จ");
+    })
+    .catch((e) => {
+      messageError($q, e);
+      console.log(e);
+    })
+    .finally(() => {
+      fecthappointmentByid();
+      edit.value = false;
+    });
+};
+const getClass = (val: boolean) => {
+  return {
+    "full-width inputgreen cursor-pointer": val,
+    "full-width cursor-pointer": !val,
+  };
+};
+</script>
+<template>
+  <div class="toptitle text-dark col-12 row items-center">
+    <q-btn
+      icon="mdi-arrow-left"
+      unelevated
+      round
+      dense
+      flat
+      color="primary"
+      class="q-mr-sm"
+      @click="router.go(-1)"
+    />
+    รายละเอียดการแต่งตั้ง-เลื่อน {{ title.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 }}
+      </div>
+      <q-space />
+      <q-btn
+        outline
+        color="blue"
+        dense
+        icon-right="mdi-open-in-new"
+        class="q-px-sm"
+        label="ดูข้อมูลทะเบียนประวัติ"
+        @click="router.push(`/registry/${paramsId}`)"
+      />
+    </div>
+    <div class="col-12"><q-separator /></div>
+    <div class="row col-12 q-pa-md">
+      <div class="col-12 row bg-white q-col-gutter-md">
+        <div class="col-xs-3 col-sm-2 col-md-1 row">
+          <!-- <q-img
+            :src="responseData.avataPath"
+            v-if="responseData.avataPath !== ''"
+          /> -->
+          <q-img src="@/assets/avatar_user.jpg" />
+        </div>
+        <div class="col-xs-6 col-sm-3 row items-center">
+          <div class="col-12 q-pl-md">
+            <div class="col-12 text-top">ตำแหน่งในสายงาน</div>
+            <div class="col-12 text-detail">
+              {{ title.positionTypeOld }}
+            </div>
+          </div>
+        </div>
+        <div class="col-xs-6 col-sm-3 row items-center">
+          <div class="col-12">
+            <div class="col-12 text-top">ระดับ</div>
+            <div class="col-12 text-detail">
+              {{ title.positionLevelOld }}
+            </div>
+          </div>
+        </div>
+        <div class="col-xs-6 col-sm-3 row items-center">
+          <div class="col-12">
+            <div class="col-12 text-top">สังกัด</div>
+            <div class="col-12 text-detail">
+              {{ title.organizationPositionOld }}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </q-card>
+
+  <q-card bordered class="row col-12 text-dark q-mt-sm">
+    <div class="bg-grey-1 q-pa-sm col-12 row items-center text-primary">
+      <div class="q-pl-sm text-weight-bold text-dark">
+        แก้ไขข้อมูลเพื่อลงบัญชีแนบท้าย
+      </div>
+      <q-space />
+      <div class="q-gutter-sm" v-if="!edit">
+        <q-btn
+          outline
+          color="primary"
+          dense
+          icon-right="mdi-file-edit-outline"
+          class="q-px-sm"
+          label="แก้ไข"
+          style="width: 80px"
+          @click="edit = !edit"
+        />
+      </div>
+      <div class="q-gutter-sm" v-else>
+        <q-btn
+          outline
+          color="public"
+          dense
+          class="q-px-sm"
+          label="บันทึก"
+          style="width: 80px"
+          @click="clickSave"
+        />
+        <q-btn
+          outline
+          color="red"
+          dense
+          class="q-px-sm"
+          label="ยกเลิก"
+          style="width: 80px"
+          @click="edit = !edit"
+        />
+      </div>
+    </div>
+    <div class="col-12"><q-separator /></div>
+    <q-form ref="myForm">
+      <div class="row col-12 q-pa-md">
+        <div class="col-12">
+          <div class="text-weight-bold text-grey">วุฒิการศึกษา</div>
+        </div>
+        <div class="col-12">
+          <q-input
+            :class="getClass(edit)"
+            :outlined="edit"
+            dense
+            lazy-rules
+            :readonly="!edit"
+            :borderless="!edit"
+            v-model="educationOld"
+            :rules="[(val) => !!val || `${'กรุณากรอกวุฒิการศึกษา'}`]"
+            hide-bottom-space
+            :label="`${'วุฒิการศึกษา'}`"
+            type="text"
+          />
+        </div>
+      </div>
+      <div class="row col-12 q-pa-md">
+        <div class="col-12 row bg-white q-col-gutter-md">
+          <div class="col-xs-12 row q-pa-md items-center">
+            <div class="col-12">
+              <div class="text-weight-bold text-grey">
+                ตำแหน่งและหน่วยงานเดิม
+              </div>
+            </div>
+
+            <div class="col-12">
+              <q-input
+                :class="getClass(edit)"
+                :outlined="edit"
+                dense
+                lazy-rules
+                :readonly="!edit"
+                :borderless="!edit"
+                v-model="organizationPositionOld"
+                :rules="[(val) => !!val || `${'กรุณากรอกตำแหน่ง/สังกัด'}`]"
+                hide-bottom-space
+                :label="`${'ตำแหน่ง/สังกัด'}`"
+                type="textarea"
+              />
+            </div>
+          </div>
+
+          <div class="col-xs-6 col-sm-3 row items-center">
+            <div class="col-12">
+              <q-input
+                :class="getClass(edit)"
+                :outlined="edit"
+                dense
+                lazy-rules
+                :readonly="!edit"
+                :borderless="!edit"
+                v-model="positionTypeOld"
+                :rules="[(val) => !!val || `${'กรุณากรอกตำแหน่งประเภท'}`]"
+                hide-bottom-space
+                :label="`${'ตำแหน่งประเภท'}`"
+              />
+            </div>
+          </div>
+          <div class="col-xs-6 col-sm-3 row items-center">
+            <div class="col-12">
+              <q-input
+                :class="getClass(edit)"
+                :outlined="edit"
+                dense
+                lazy-rules
+                :readonly="!edit"
+                :borderless="!edit"
+                v-model="positionLevelOld"
+                :rules="[(val) => !!val || `${'กรุณากรอกระดับ'}`]"
+                hide-bottom-space
+                :label="`${'ระดับ'}`"
+              />
+            </div>
+          </div>
+          <div class="col-xs-6 col-sm-3 row items-center">
+            <div class="col-12">
+              <q-input
+                :class="getClass(edit)"
+                :outlined="edit"
+                dense
+                lazy-rules
+                :readonly="!edit"
+                :borderless="!edit"
+                v-model="posNo"
+                :rules="[(val) => !!val || `${'กรุณากรอกเลขที่'}`]"
+                hide-bottom-space
+                :label="`${'เลขที่'}`"
+              />
+            </div>
+          </div>
+          <div class="col-xs-6 col-sm-3 row items-center">
+            <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"
+              />
+            </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
+                menu-class-name="modalfix"
+                :readonly="!edit"
+                v-model="date"
+                :locale="'th'"
+                autoApply
+                :enableTimePicker="false"
+                week-start="0"
+              >
+                <template #year="{ year }">{{ year + 543 }}</template>
+                <template #year-overlay-value="{ value }">{{
+                  parseInt(value + 543)
+                }}</template>
+                <template #trigger>
+                  <q-input
+                    :class="getClass(edit)"
+                    :outlined="edit"
+                    dense
+                    lazy-rules
+                    :borderless="!edit"
+                    :model-value="date !== null ? date2Thai(date) : null"
+                    :rules="[(val) => !!val || `${'กรุณาเลือกตั้งแต่วัน'}`]"
+                    hide-bottom-space
+                    :label="`${'ดำรงตำแหน่งในระดับปัจจุบันเมื่อ'}`"
+                  >
+                    <template v-slot:prepend>
+                      <q-icon
+                        name="event"
+                        class="cursor-pointer"
+                        :style="
+                          edit
+                            ? 'color: var(--q-primary)'
+                            : 'color: var(--q-grey)'
+                        "
+                      >
+                      </q-icon>
+                    </template>
+                  </q-input>
+                </template>
+              </datepicker>
+            </div>
+          </div>
+          <div class="col-12">
+            <q-input
+              :class="getClass(edit)"
+              :outlined="edit"
+              dense
+              lazy-rules
+              :readonly="!edit"
+              :borderless="!edit"
+              v-model="reason"
+              :rules="[(val) => !!val || `${'กรุณากรอกหมายเหตุ '}`]"
+              hide-bottom-space
+              :label="`${'หมายเหตุ '}`"
+              type="textarea"
+            />
+          </div>
+        </div>
+      </div>
+    </q-form>
+  </q-card>
+</template>
+<style lang="scss" scope>
+.q-img {
+  border-radius: 5px;
+  height: 70px;
+}
+.text-top {
+  color: gray;
+  font-weight: 400;
+  padding-bottom: 3px;
+}
+.text-detail {
+  font-weight: 500;
+}
+</style>

src/modules/05_placement/components/AppointMent/DialogHeader.vue

@@ -0,0 +1,29 @@
+<script setup lang="ts">
+const props = defineProps({
+  title: String,
+  close: {
+    type: Function,
+    default: () => console.log("not function"),
+  },
+});
+const close = async () => {
+  props.close();
+};
+</script>
+<template>
+  <q-toolbar class="q-py-md">
+    <q-toolbar-title class="header-text">{{ title }}</q-toolbar-title>
+    <q-btn icon="close" unelevated round dense @click="close" style="color: #ff8080; background-color: #ffdede" />
+  </q-toolbar>
+</template>
+
+<style scoped lang="scss">
+
+
+.header-text {
+  font-size: 18px;
+  font-weight: 600;
+  line-height: 26px;
+  color: #35373C;
+}
+</style>

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

@@ -0,0 +1,734 @@
+<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 DialogHeader from "@/modules/05_placement/components/AppointMent/DialogHeader.vue";
+import DialogOrgTree from "@/modules/05_placement/components/AppointMent/AppointmentModal.vue";
+import { useCounterMixin } from "@/stores/mixin";
+import http from "@/plugins/http";
+import config from "@/app.config";
+const mixin = useCounterMixin(); //เรียกฟังก์ชันกลาง
+const {
+  showLoader,
+  hideLoader,
+  dateText,
+  success,
+  messageError,
+  date2Thai,
+  dialogConfirm,
+  dialogRemove,
+} = mixin;
+
+const selected = ref([]);
+const checkSelected = computed(() => {
+  if (selected.value.length === 0 || type.value === "") {
+    return true;
+  }
+});
+
+// const add = () => {
+//   router.push(`/receive/add`);
+// };
+
+const clickClose = () => {
+  modal.value = false;
+};
+
+const $q = useQuasar();
+const modal = ref<boolean>(false);
+const popup = () => {
+  modal.value = true;
+  selected.value = [];
+  fecthTypeOption();
+};
+const router = useRouter();
+
+const modalTree = ref<boolean>(false);
+const personal = ref<any[]>([]);
+const personalId = ref<string>("");
+const visibleColumns = ref<string[]>([
+  "no",
+  "citizenId",
+  "fullname",
+  "organizationName",
+  "birthday",
+  "status",
+]);
+const visibleColumns2 = ref<string[]>([
+  "no",
+  "citizenId",
+  "fullname",
+  "organizationName",
+  "birthday",
+]); //ค้นหา คอลัมน์ คอลัมน์ที่แสดง
+const filterKeyword = ref<string>("");
+const filterKeyword2 = ref<string>("");
+const filterRef = ref<any>(null);
+const resetFilter = () => {
+  filterKeyword.value = "";
+  filterKeyword2.value = "";
+  filterRef.value.focus();
+};
+
+const optionsType = ref<any[]>([]);
+const type = ref<string>("");
+
+onMounted(() => {
+  fecthlistappointment();
+});
+const listRecevice = ref<any>([]);
+const fecthlistappointment = async () => {
+  showLoader();
+  rows.value = [];
+  await http
+    .get(config.API.appointmentMain())
+    .then((res) => {
+      console.log(res);
+      let response = res.data.result;
+      listRecevice.value = response;
+      // console.log(response);
+      rows.value = response.map((e: any) => ({
+        personalId: e.id,
+        citizenId: e.citizenId,
+        fullname: e.firstname + "  " + e.lastname,
+        organizationName:
+          e.organizationName +
+          " " +
+          e.organizationShortName +
+          " " +
+          e.positionNumber +
+          " " +
+          e.positionPath,
+        orgName: e.organizationName,
+        organizationShortName: e.organizationShortName,
+        positionNumber: e.positionNumber,
+        positionPath: e.positionPath,
+        status: status(e.status),
+        birthday: date2Thai(e.dateOfBirth),
+      }));
+      // console.log(rows.value);
+      rows2.value = rows.value.filter((e: any) => e.orgName !== null);
+    })
+    .catch((e) => {
+      console.log(typeof e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+};
+const fecthTypeOption = async () => {
+  type.value = "";
+  await http
+    .get(config.API.typeOrder())
+    .then((res) => {
+      optionsType.value = res.data.result.filter(
+        (e: any) => e.commandCode === "C-PM-05" || e.commandCode === "C-PM-06"
+      );
+    })
+    .catch((e) => {
+      messageError($q, e);
+    });
+};
+
+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 columns = ref<QTableProps["columns"]>([
+  {
+    name: "no",
+    align: "left",
+    label: "ลำดับ",
+    sortable: true,
+    field: "no",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "citizenId",
+    align: "left",
+    label: "เลขประจำตัวประชาชน",
+    sortable: true,
+    field: "fullname",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "fullname",
+    align: "left",
+    label: "ชื่อ-นามสกุล",
+    sortable: true,
+    field: "fullname",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "organizationName",
+    align: "left",
+    label: "หน่วยงานที่รับการแต่งตั้ง-เลื่อน",
+    sortable: true,
+    field: "organizationName",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "birthday",
+    align: "left",
+    label: "วัน/เดือน/ปี เกิด",
+    sortable: true,
+    field: "birthday",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "status",
+    align: "left",
+    label: "สถานะ",
+    sortable: true,
+    field: "status",
+    headerStyle: "font-size: 14px",
+    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: "citizenId",
+    align: "left",
+    label: "เลขประจำตัวประชาชน",
+    sortable: true,
+    field: "fullname",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "fullname",
+    align: "left",
+    label: "ชื่อ-นามสกุล",
+    sortable: true,
+    field: "fullname",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "organizationName",
+    align: "left",
+    label: "หน่วยงานที่รับการแต่งตั้ง-เลื่อน",
+    sortable: true,
+    field: "organizationName",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "birthday",
+    align: "left",
+    label: "วัน/เดือน/ปี เกิด",
+    sortable: true,
+    field: "birthday",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+]);
+
+const 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, () => deleteAppoint(id));
+};
+const deleteAppoint = async (id: string) => {
+  showLoader();
+  await http
+    .delete(config.API.appointmentDelete(id))
+    .then(() => {
+      success($q, "ลบข้อมูลสำเร็จ");
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      fecthlistappointment();
+      hideLoader();
+    });
+};
+const clickAddlist = () => {
+  dialogConfirm($q, () => createdAppoint());
+};
+const createdAppoint = async () => {
+  let pId: string[] = [];
+  selected.value.forEach((e: any) => {
+    pId.push(e.personalId);
+  });
+  let data = {
+    id: pId,
+  };
+  console.log(data);
+  showLoader();
+  await http
+    .put(config.API.apppointmentReport(type.value), data)
+    .then((res: any) => {
+      console.log(res);
+      success($q, "บันทึกสำเร็จ");
+    })
+    .catch((e: any) => {
+      console.log(e);
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+      fecthlistappointment();
+      selected.value = [];
+      modal.value = false;
+    });
+};
+
+const closeModalTree = async () => {
+  await fecthlistappointment();
+  modalTree.value = false;
+};
+
+const nextPage = (row: any) => {
+  router.push({
+    path: `appoint-promote/detail/${row.personalId}`,
+  });
+};
+const status = (val: string) => {
+  switch (val) {
+    case "WAITTING":
+      return "รอดำเนินการ";
+    case "PENDING":
+      return "เลือกตำแหน่งแล้ว";
+    case "REPORT":
+      return "ส่งรายชื่อไปออกคำสั่ง";
+    case "DONE":
+      return "ออกคำสั่งเสร็จแล้ว";
+    default:
+      return "-";
+  }
+};
+</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 flat round color="primary" @click="add" icon="mdi-plus">
+            <q-tooltip>เพิ่มข้อมูล</q-tooltip>
+          </q-btn> -->
+
+          <q-btn
+            @click="popup()"
+            size="14px"
+            flat
+            round
+            color="add"
+            icon="mdi-account-arrow-right"
+          >
+            <q-tooltip>ส่งไปออกคำสั่งแต่งตั้ง-เลื่อน</q-tooltip>
+          </q-btn>
+
+          <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="fullname"
+            :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">
+                  <span class="text-weight-medium">{{ col.label }}</span>
+                </q-th>
+                <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="nextPage(props.row)">
+                  {{ props.rowIndex + 1 }}
+                </q-td>
+                <q-td
+                  key="citizenId"
+                  :props="props"
+                  @click="nextPage(props.row)"
+                >
+                  {{ props.row.citizenId }}
+                </q-td>
+                <q-td
+                  key="fullname"
+                  :props="props"
+                  @click="nextPage(props.row)"
+                >
+                  {{ props.row.fullname }}
+                </q-td>
+                <q-td
+                  key="organizationName"
+                  :props="props"
+                  @click="nextPage(props.row)"
+                >
+                  <div
+                    v-if="
+                      props.row.orgName !== null ||
+                      props.row.positionPath !== null
+                    "
+                  >
+                    <div class="col-4">
+                      <div class="text-weight-medium">
+                        {{
+                          props.row.orgName !== null ? props.row.orgName : "-"
+                        }}
+                        {{
+                          props.row.organizationShortName !== null
+                            ? `(${props.row.organizationShortName})`
+                            : ""
+                        }}
+                      </div>
+                      <div class="text-weight-light">
+                        {{
+                          props.row.positionPath !== null
+                            ? props.row.positionPath
+                            : "-"
+                        }}
+                        {{
+                          props.row.positionNumber !== null
+                            ? `(${props.row.positionNumber})`
+                            : ""
+                        }}
+                      </div>
+                    </div>
+                  </div>
+                  <div v-else>
+                    <div class="col-4">
+                      <div class="text-weight-medium">-</div>
+                    </div>
+                  </div>
+                </q-td>
+                <q-td
+                  key="birthday"
+                  :props="props"
+                  @click="nextPage(props.row)"
+                >
+                  {{ props.row.birthday }}
+                </q-td>
+                <q-td key="status" :props="props" @click="nextPage(props.row)">
+                  {{ props.row.status }}
+                </q-td>
+                <q-td auto-width>
+                  <q-btn
+                    icon="mdi-dots-vertical"
+                    size="12px"
+                    color="grey-7"
+                    flat
+                    round
+                    dense
+                  >
+                    <q-menu
+                      transition-show="jump-down"
+                      transition-hide="jump-up"
+                    >
+                      <q-list dense style="min-width: 100px">
+                        <q-item
+                          clickable
+                          v-close-popup
+                          @click="openModalTree(props.row.personalId)"
+                        >
+                          <q-item-section
+                            style="min-width: 0px"
+                            avatar
+                            class="q-py-sm"
+                          >
+                            <q-icon
+                              color="primary"
+                              size="xs"
+                              name="mdi-bookmark-outline"
+                            />
+                          </q-item-section>
+                          <q-item-section
+                            >เลือกหน่วยงานที่รับโอน</q-item-section
+                          >
+                        </q-item>
+                        <q-item
+                          clickable
+                          v-close-popup
+                          @click="clickDelete(props.row.personalId)"
+                        >
+                          <q-item-section
+                            style="min-width: 0px"
+                            avatar
+                            class="q-py-sm"
+                          >
+                            <q-tooltip>ลบข้อมูล</q-tooltip>
+                            <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-tr>
+            </template>
+          </d-table>
+        </div>
+      </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="citizenId" :props="props" @click="nextPage(props.row)">
+                {{ props.row.citizenId }}
+              </q-td>
+              <q-td key="fullname" :props="props" @click="nextPage(props.row)">
+                {{ props.row.fullname }}
+              </q-td>
+              <q-td
+                key="organizationName"
+                :props="props"
+                @click="nextPage(props.row)"
+              >
+                <div
+                  v-if="
+                    props.row.orgName !== null ||
+                    props.row.positionPath !== null
+                  "
+                >
+                  <div class="col-4">
+                    <div class="text-weight-medium">
+                      {{ props.row.orgName !== null ? props.row.orgName : "-" }}
+                      {{
+                        props.row.organizationShortName !== null
+                          ? `(${props.row.organizationShortName})`
+                          : ""
+                      }}
+                    </div>
+                    <div class="text-weight-light">
+                      {{
+                        props.row.positionPath !== null
+                          ? props.row.positionPath
+                          : "-"
+                      }}
+                      {{
+                        props.row.positionNumber !== null
+                          ? `(${props.row.positionNumber})`
+                          : ""
+                      }}
+                    </div>
+                  </div>
+                </div>
+                <div v-else>
+                  <div class="col-4">
+                    <div class="text-weight-medium">-</div>
+                  </div>
+                </div>
+              </q-td>
+              <q-td key="birthday" :props="props" @click="nextPage(props.row)">
+                {{ props.row.birthday }}
+              </q-td>
+            </q-tr>
+          </template>
+        </d-table>
+      </q-card-section>
+
+      <q-card-actions align="right" class="bg-white text-teal">
+        <q-btn
+          label="ส่งไปรายการแต่งตั้ง-เลื่อน"
+          @click="clickAddlist"
+          color="public"
+          :disable="checkSelected"
+        />
+      </q-card-actions>
+    </q-card>
+  </q-dialog>
+
+  <DialogOrgTree
+    v-model:modal="modalTree"
+    :close="closeModalTree"
+    :personal="personal"
+    :personalId="personalId"
+  />
+  <!-- :personalId="personalId" -->
+</template>
+<style scoped lang="scss"></style>

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

@@ -0,0 +1,458 @@
+<script setup lang="ts">
+import { onMounted, ref } from "vue";
+import { useQuasar } from "quasar";
+import { useRoute, useRouter } from "vue-router";
+import { useCounterMixin } from "@/stores/mixin";
+
+import type { ResponseTitle } from "@/modules/05_placement/interface/response/Receive";
+import type {
+  TypeFile,
+  ResponseDataDetail,
+} from "@/modules/05_placement/interface/response/Transfer";
+import type { QTableProps, QForm } from "quasar";
+
+import http from "@/plugins/http";
+import config from "@/app.config";
+import keycloak from "@/plugins/keycloak";
+
+const $q = useQuasar();
+const route = useRoute();
+const router = useRouter();
+const mixin = useCounterMixin();
+const paramsId = route.params.id;
+const {
+  messageError,
+  showLoader,
+  hideLoader,
+  date2Thai,
+  dialogConfirm,
+  success,
+} = mixin;
+const roleAdmin = ref<boolean>(false);
+
+const title = ref<ResponseTitle>({
+  fullname: "",
+  organizationPositionOld: "",
+  positionLevelOld: "",
+  positionTypeOld: "",
+});
+const responseData = ref<ResponseDataDetail>({
+  avataPath: "",
+  createdAt: new Date(),
+  date: new Date(),
+  id: "",
+  organization: "",
+  organizationPositionOld: "",
+  positionLevelOld: "",
+  positionNumberOld: "",
+  positionTypeOld: "",
+  reason: "",
+  salary: 0,
+  status: "",
+  fullname: "",
+});
+const edit = ref<boolean>(false);
+const organizationPositionOld = ref<string>("");
+const positionTypeOld = ref<string>("");
+const positionLevelOld = ref<string>("");
+const posNo = ref<string>("");
+const salary = ref<number>(0);
+const organization = ref<string>("");
+const date = ref<Date | null>(null);
+const reason = ref<string>("");
+const Otherdata = ref<any>([]);
+
+onMounted(async () => {
+  if (keycloak.tokenParsed != null) {
+    roleAdmin.value = await keycloak.tokenParsed.role.includes("placement1");
+    console.log("roleAdmin===>", roleAdmin.value);
+  }
+  await fecthOther();
+});
+
+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);
+
+      title.value.fullname = `${data.firstName ?? "-"} ${data.lastName ?? "-"}`;
+      title.value.organizationPositionOld = data.organizationPositionOld ?? "-";
+      title.value.positionLevelOld = data.positionLevelOld ?? "-";
+      title.value.positionTypeOld = data.positionTypeOld ?? "-";
+
+      responseData.value.createdAt = data.createdAt;
+      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.positionLevelOld = data.positionLevelOld ?? "";
+      responseData.value.positionNumberOld = data.positionNumberOld ?? "";
+      responseData.value.positionTypeOld = data.positionTypeOld ?? "";
+      responseData.value.reason = data.reason ?? "";
+      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 ?? "-"
+      }`;
+
+      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;
+      reason.value = data.reason ?? "";
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+      edit.value = false;
+    });
+};
+const clickEdit = () => {
+  dialogConfirm($q, () => saveOther());
+};
+const saveOther = async () => {
+  // showLoader();
+  let data = {
+    citizenId: Otherdata.value.citizenId,
+    prefixId: Otherdata.value.prefixId,
+    firstname: Otherdata.value.firstname,
+    lastname: Otherdata.value.lastname,
+    reason: reason.value,
+    organizationPositionOld: organizationPositionOld.value,
+    positionDate: date.value,
+    positionTypeOld: positionTypeOld.value,
+    positionLevelOld: positionLevelOld.value,
+    positionNumberOld: posNo.value,
+    amountOld: Number(salary.value),
+  };
+  console.log(data);
+
+  await http
+    .put(config.API.otherByid(paramsId.toString()), data)
+    .then(() => {
+      success($q, "แก้ไข้ข้อมูลสำเร็จ");
+    })
+    .catch((e) => {
+      messageError($q, e);
+      console.log(e);
+    })
+    .finally(async () => {
+      await fecthOther();
+    });
+};
+const getClass = (val: boolean) => {
+  return {
+    "full-width inputgreen cursor-pointer": val,
+    "full-width cursor-pointer": !val,
+  };
+};
+</script>
+
+<template>
+  <div class="toptitle text-dark col-12 row items-center">
+    <q-btn
+      icon="mdi-arrow-left"
+      unelevated
+      round
+      dense
+      flat
+      color="primary"
+      class="q-mr-sm"
+      @click="router.go(-1)"
+    />
+    รายละเอียดรายการอื่นๆ {{ title.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 }}
+      </div>
+      <q-space />
+      <q-btn
+        outline
+        color="blue"
+        dense
+        icon-right="mdi-open-in-new"
+        class="q-px-sm"
+        label="ดูข้อมูลทะเบียนประวัติ"
+        @click="router.push(`/registry/${paramsId}`)"
+      />
+    </div>
+    <div class="col-12"><q-separator /></div>
+    <div class="row col-12 q-pa-md">
+      <div class="col-12 row bg-white q-col-gutter-md">
+        <div class="col-xs-3 col-sm-2 col-md-1 row">
+          <!-- <q-img
+            :src="responseData.avataPath"
+            v-if="responseData.avataPath !== ''"
+          /> -->
+          <q-img src="@/assets/avatar_user.jpg" />
+        </div>
+        <div class="col-xs-6 col-sm-3 row items-center">
+          <div class="col-12 q-pl-md">
+            <div class="col-12 text-top">ตำแหน่งในสายงาน</div>
+            <div class="col-12 text-detail">
+              {{ title.positionTypeOld }}
+            </div>
+          </div>
+        </div>
+        <div class="col-xs-6 col-sm-3 row items-center">
+          <div class="col-12">
+            <div class="col-12 text-top">ระดับ</div>
+            <div class="col-12 text-detail">
+              {{ title.positionLevelOld }}
+            </div>
+          </div>
+        </div>
+        <div class="col-xs-6 col-sm-3 row items-center">
+          <div class="col-12">
+            <div class="col-12 text-top">สังกัด</div>
+            <div class="col-12 text-detail">
+              {{ title.organizationPositionOld }}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </q-card>
+
+  <q-card bordered class="row col-12 text-dark q-mt-sm">
+    <div class="bg-grey-1 q-pa-sm col-12 row items-center text-primary">
+      <div class="q-pl-sm text-weight-bold text-dark">
+        แก้ไขข้อมูลเพื่อลงบัญชีแนบท้าย
+      </div>
+      <q-space />
+      <div class="q-gutter-sm" v-if="!edit">
+        <q-btn
+          outline
+          color="primary"
+          dense
+          icon-right="mdi-file-edit-outline"
+          class="q-px-sm"
+          label="แก้ไข"
+          style="width: 80px"
+          @click="edit = !edit"
+        />
+      </div>
+      <div class="q-gutter-sm" v-else>
+        <q-btn
+          outline
+          color="public"
+          dense
+          class="q-px-sm"
+          label="บันทึก"
+          style="width: 80px"
+          @click="clickEdit"
+        />
+        <q-btn
+          outline
+          color="red"
+          dense
+          class="q-px-sm"
+          label="ยกเลิก"
+          style="width: 80px"
+          @click="(edit = !edit), fecthOther()"
+        />
+      </div>
+    </div>
+    <div class="col-12"><q-separator /></div>
+    <q-form ref="myForm">
+      <div class="row col-12 q-pa-md">
+        <div class="col-12 row bg-white q-col-gutter-md">
+          <div class="col-xs-12 row items-center">
+            <div class="col-12">
+              <div class="text-weight-bold text-grey">
+                ตำแหน่งและหน่วยงานเดิม
+              </div>
+            </div>
+            <div class="col-12">
+              <q-input
+                :class="getClass(edit)"
+                :outlined="edit"
+                dense
+                lazy-rules
+                :readonly="!edit"
+                :borderless="!edit"
+                v-model="organizationPositionOld"
+                :rules="[(val) => !!val || `${'กรุณากรอกตำแหน่ง/สังกัด'}`]"
+                hide-bottom-space
+                :label="`${'ตำแหน่ง/สังกัด'}`"
+                type="textarea"
+              />
+            </div>
+          </div>
+          <div class="col-xs-6 col-sm-3 row items-center">
+            <div class="col-12">
+              <q-input
+                :class="getClass(edit)"
+                :outlined="edit"
+                dense
+                lazy-rules
+                :readonly="!edit"
+                :borderless="!edit"
+                v-model="positionTypeOld"
+                :rules="[(val) => !!val || `${'กรุณากรอกตำแหน่งประเภท'}`]"
+                hide-bottom-space
+                :label="`${'ตำแหน่งประเภท'}`"
+              />
+            </div>
+          </div>
+          <div class="col-xs-6 col-sm-3 row items-center">
+            <div class="col-12">
+              <q-input
+                :class="getClass(edit)"
+                :outlined="edit"
+                dense
+                lazy-rules
+                :readonly="!edit"
+                :borderless="!edit"
+                v-model="positionLevelOld"
+                :rules="[(val) => !!val || `${'กรุณากรอกระดับ'}`]"
+                hide-bottom-space
+                :label="`${'ระดับ'}`"
+              />
+            </div>
+          </div>
+          <div class="col-xs-6 col-sm-3 row items-center">
+            <div class="col-12">
+              <q-input
+                :class="getClass(edit)"
+                :outlined="edit"
+                dense
+                lazy-rules
+                :readonly="!edit"
+                :borderless="!edit"
+                v-model="posNo"
+                :rules="[(val) => !!val || `${'กรุณากรอกเลขที่'}`]"
+                hide-bottom-space
+                :label="`${'เลขที่'}`"
+              />
+            </div>
+          </div>
+          <div class="col-xs-6 col-sm-3 row items-center">
+            <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"
+              />
+            </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
+                menu-class-name="modalfix"
+                :readonly="!edit"
+                v-model="date"
+                :locale="'th'"
+                autoApply
+                :enableTimePicker="false"
+                week-start="0"
+              >
+                <template #year="{ year }">{{ year + 543 }}</template>
+                <template #year-overlay-value="{ value }">{{
+                  parseInt(value + 543)
+                }}</template>
+                <template #trigger>
+                  <q-input
+                    :class="getClass(edit)"
+                    :outlined="edit"
+                    dense
+                    lazy-rules
+                    :borderless="!edit"
+                    :model-value="date !== null ? date2Thai(date) : null"
+                    :rules="[(val) => !!val || `${'กรุณาเลือกตั้งแต่วัน'}`]"
+                    hide-bottom-space
+                    :label="`${'ตั้งแต่วัน'}`"
+                  >
+                    <template v-slot:prepend>
+                      <q-icon
+                        name="event"
+                        class="cursor-pointer"
+                        :style="
+                          edit
+                            ? 'color: var(--q-primary)'
+                            : 'color: var(--q-grey)'
+                        "
+                      >
+                      </q-icon>
+                    </template>
+                  </q-input>
+                </template>
+              </datepicker>
+            </div>
+          </div>
+          <div class="col-12">
+            <q-input
+              :class="getClass(edit)"
+              :outlined="edit"
+              dense
+              lazy-rules
+              :readonly="!edit"
+              :borderless="!edit"
+              v-model="reason"
+              :rules="[(val) => !!val || `${'กรุณากรอกหมายเหตุ '}`]"
+              hide-bottom-space
+              :label="`${'หมายเหตุ '}`"
+              type="textarea"
+            />
+          </div>
+        </div>
+      </div>
+    </q-form>
+  </q-card>
+</template>
+
+<style lang="scss" scope>
+.q-img {
+  border-radius: 5px;
+  height: 70px;
+}
+.text-top {
+  color: gray;
+  font-weight: 400;
+  padding-bottom: 3px;
+}
+.text-detail {
+  font-weight: 500;
+}
+</style>

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

@@ -0,0 +1,29 @@
+<script setup lang="ts">
+const props = defineProps({
+  title: String,
+  close: {
+    type: Function,
+    default: () => console.log("not function"),
+  },
+});
+const close = async () => {
+  props.close();
+};
+</script>
+<template>
+  <q-toolbar class="q-py-md">
+    <q-toolbar-title class="header-text">{{ title }}</q-toolbar-title>
+    <q-btn icon="close" unelevated round dense @click="close" style="color: #ff8080; background-color: #ffdede" />
+  </q-toolbar>
+</template>
+
+<style scoped lang="scss">
+
+
+.header-text {
+  font-size: 18px;
+  font-weight: 600;
+  line-height: 26px;
+  color: #35373C;
+}
+</style>

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

@@ -0,0 +1,662 @@
+<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 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 http from "@/plugins/http";
+import config from "@/app.config";
+const mixin = useCounterMixin(); //เรียกฟังก์ชันกลาง
+const {
+  showLoader,
+  hideLoader,
+  dateText,
+  success,
+  messageError,
+  date2Thai,
+  dialogRemove,
+  dialogConfirm,
+} = mixin;
+
+const selected = ref([]);
+const checkSelected = computed(() => {
+  if (selected.value.length === 0 || type.value === "") {
+    return true;
+  }
+});
+
+// const add = () => {
+//   router.push(`/receive/add`);
+// };
+
+const clickClose = () => {
+  modal.value = false;
+};
+
+const $q = useQuasar();
+const modal = ref<boolean>(false);
+const popup = () => {
+  modal.value = true;
+  fecthTypeOption();
+  type.value = "";
+  selected.value = [];
+};
+const router = useRouter();
+
+const modalTree = ref<boolean>(false);
+const personal = ref<any[]>([]);
+const personalId = ref<string>("");
+const visibleColumns = ref<string[]>([
+  "no",
+  "fullname",
+  "position",
+  "positionLevel",
+  "organizationPositionOld",
+  "organization",
+  "statustext",
+]);
+
+const visibleColumns2 = ref<string[]>([
+  "no",
+  "fullname",
+  "position",
+  "positionLevel",
+  "organizationPositionOld",
+  "organization",
+  "statustext",
+]); //ค้นหา คอลัมน์ คอลัมน์ที่แสดง
+const filterKeyword = ref<string>("");
+const filterKeyword2 = ref<string>("");
+const filterRef = ref<any>(null);
+const resetFilter = () => {
+  filterKeyword.value = "";
+  filterKeyword2.value = "";
+  filterRef.value.focus();
+};
+
+const optionsType = ref<any[]>([]);
+const type = ref<string>("");
+onMounted(() => {
+  fecthlistOthet();
+});
+// 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: new Date(),
+        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);
+    })
+    .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 columns = 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: "organization",
+    align: "left",
+    label: "หน่วยงานที่ขอโอนไป",
+    sortable: true,
+    field: "organization",
+    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 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: "organization",
+    align: "left",
+    label: "หน่วยงานที่ขอโอนไป",
+    sortable: true,
+    field: "organization",
+    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));
+};
+const clickAddlist = () => {
+  dialogConfirm($q, () => addOther());
+};
+const deleteOther = async (id: string) => {
+  showLoader();
+  await http
+    .delete(config.API.otherByid(id))
+    .then(() => {
+      success($q, "ลบข้อมูลสำเร็จ");
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      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;
+    });
+};
+
+const closeModalTree = async () => {
+  await fecthlistOthet();
+  modalTree.value = false;
+};
+
+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 "-";
+  }
+};
+</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 flat round color="primary" @click="add" icon="mdi-plus">
+            <q-tooltip>เพิ่มข้อมูล</q-tooltip>
+          </q-btn> -->
+
+          <q-btn
+            @click="popup()"
+            size="14px"
+            flat
+            round
+            color="add"
+            icon="mdi-account-arrow-right"
+          >
+            <q-tooltip>ส่งไปออกคำสั่งรายการอื่นๆ</q-tooltip>
+          </q-btn>
+
+          <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="fullname"
+            :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">
+                  <span class="text-weight-medium">{{ col.label }}</span>
+                </q-th>
+                <q-th auto-width />
+              </q-tr>
+            </template>
+            <template v-slot:body="props">
+              <q-tr
+                :props="props"
+                class="cursor-pointer"
+                @click="nextPage(props.row)"
+              >
+                <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 }}
+                    <!-- <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="statustext" :props="props">
+                  {{ props.row.statustext }}
+                </q-td>
+                <q-td key="statustext" :props="props">
+                  <q-btn
+                    flat
+                    round
+                    class="text-red-14"
+                    icon="mdi-delete"
+                    dense
+                    @click.stop="clickDelete(props.row.personalId)"
+                    ><q-tooltip>ลบข้อมูล</q-tooltip></q-btn
+                  >
+                </q-td>
+              </q-tr>
+            </template>
+          </d-table>
+        </div>
+      </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" -->
+</template>
+<style scoped lang="scss"></style>

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

@@ -0,0 +1,799 @@
+<script setup lang="ts">
+import { useQuasar, QForm } from "quasar";
+import { onMounted, reactive, ref, watch } from "vue";
+import DialogHeader from "@/modules/05_placement/components/PersonalList/DialogHeader.vue";
+import DialogFooter from "@/modules/05_placement/components/PersonalList/DialogFooter.vue";
+import { useCounterMixin } from "@/stores/mixin";
+import http from "@/plugins/http";
+import config from "@/app.config";
+
+const $q = useQuasar();
+const mixin = useCounterMixin(); //เรียกฟังก์ชันกลาง
+const { date2Thai, hideLoader, messageError, showLoader, success } = mixin; //ฟังก์ชันกลางที่เรียกใช้
+
+const notFound = ref<string>("ไม่พบข้อมูลที่ค้นหา");
+const noData = ref<string>("ไม่พบข้อมูลผังโครงสร้าง");
+
+const checkValidate = ref<boolean>(false);
+const myFormPosition = ref<any>();
+const selected = ref<string>("");
+const selectedFile = ref<string>("");
+const dataRespone = ref<any>();
+
+// Set form field
+let dataForm = reactive({
+  personalId: "",
+  containDate: new Date(),
+  posNoId: "",
+  positionId: "",
+  positionLevelId: "",
+  positionLineId: "",
+  positionPathSideId: "",
+  positionTypeId: "",
+  // salaryAmount: null,
+  // mouthSalaryAmount: null,
+  // positionSalaryAmount: null,
+});
+
+onMounted(async () => {
+  await fetchPublishFile();
+  await loadTreeData();
+  await fetchplacementPosition();
+});
+const fetchPublishFile = async () => {
+  await http
+    .get(config.API.getPublishFileHistory)
+    .then((res) => {
+      let data = res.data.result;
+      selectedFile.value = data[0].fileName;
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(async () => {
+      hideLoader();
+    });
+};
+
+// โหลดข้อมูลโครงสร้างจาก json
+const treeData = ref<Array<any>>([]);
+const loadTreeData = async () => {
+  expanded.value = [];
+  await http
+    .get(`${config.s3ClusterUrl}${selectedFile.value}`)
+    .then((res: any) => {
+      treeData.value = res.data;
+      dataRespone.value = res.data;
+
+      // Filter objects with "name" null
+      const filteredData = res.data.filter(filterByPersonIdNull);
+      treeData.value = filteredData;
+    })
+    .catch((e: any) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+};
+
+function filterByPersonIdNull(obj: any) {
+  // console.log(obj);
+  if (obj.name === null && obj.isCondition != true) {
+    return true;
+  }
+  if (obj.children && obj.children.length > 0) {
+    obj.children = obj.children.filter(filterByPersonIdNull);
+    return obj.children.length > 0;
+  }
+  return false;
+}
+
+// โหลด position
+const placementPosition = ref<any>([]);
+const fetchplacementPosition = async () => {
+  await http
+    .get(config.API.placementPosition())
+    .then((res: any) => {
+      placementPosition.value = res.data.result;
+    })
+    .catch((e: any) => {
+      messageError($q, e);
+    });
+};
+
+const search = ref<string>("");
+//reset Tree Filter
+const filterRef = ref<any>(null);
+// const resetFilter = () => {
+//   search.value = "";
+//   filterRef.value.focus();
+// };
+
+const props = defineProps({
+  personalId: String,
+  modal: Boolean,
+  close: {
+    type: Function,
+    default: () => console.log("close modal"),
+  },
+  personal: Object,
+});
+
+const myFilterMethod = (node: any, filter: string) => {
+  const filt = filter;
+
+  return (
+    // ((node.name && node.name == null) || !node.name) &&
+    (node.name && node.name.indexOf(filt) > -1) ||
+    (node.organizationName && node.organizationName.indexOf(filt) > -1) ||
+    (node.positionNum && node.positionNum.indexOf(filt) > -1) ||
+    (node.positionName && node.positionName.indexOf(filt) > -1) ||
+    (node.governmentCode &&
+      node.governmentCode.toString().indexOf(filt) > -1) ||
+    (node.agency && node.agency.indexOf(filt) > -1) ||
+    (node.government && node.government.indexOf(filt) > -1) ||
+    (node.department && node.department.indexOf(filt) > -1) ||
+    (node.pile && node.pile.indexOf(filt) > -1) ||
+    (node.organizationShortName &&
+      node.organizationShortName.indexOf(filt) > -1) ||
+    (node.positionSideName && node.positionSideName.indexOf(filt) > -1) ||
+    (node.executivePosition && node.executivePosition.indexOf(filt) > -1) ||
+    (node.executivePositionSide &&
+      node.executivePositionSide.indexOf(filt) > -1) ||
+    (node.positionLevel && node.positionLevel.indexOf(filt) > -1)
+  );
+};
+
+const validateData = async () => {
+  checkValidate.value = true;
+  await myFormPosition.value.validate().then((result: boolean) => {
+    if (result == false) {
+      checkValidate.value = false;
+    }
+  });
+};
+const id = ref<string>("");
+const saveAppoint = async () => {
+  console.log("save", dataForm);
+
+  myFormPosition.value.validate().then(async (result: boolean) => {
+    if (props.personalId !== undefined) {
+      id.value = props.personalId.toString();
+    }
+    if (result) {
+      const dataAppoint = await {
+        // personalId: props.personalId,
+        recruitDate: dataForm.containDate,
+        posNoId: dataForm.posNoId,
+        positionId: dataForm.positionId,
+        positionLevelId: dataForm.positionLevelId,
+        positionLineId: dataForm.positionLineId,
+        positionPathSideId: dataForm.positionPathSideId,
+        positionTypeId: dataForm.positionTypeId,
+        // salaryAmount: dataForm.salaryAmount,
+        // mouthSalaryAmount: dataForm.mouthSalaryAmount,
+        // positionSalaryAmount: dataForm.positionSalaryAmount,
+      };
+      console.log("save appoint===>", dataAppoint);
+      showLoader();
+      await http
+        .put(config.API.otherPosition(id.value), dataAppoint)
+        .then((res) => {
+          console.log("respone=>", res);
+          success($q, "บันทึกสำเร็จ");
+        })
+        .catch((e) => {
+          messageError($q, e);
+        })
+        .finally(async () => {
+          await closeAndClear();
+          // await resetFilter();
+          await fetchPublishFile();
+          await loadTreeData();
+          await fetchplacementPosition();
+          hideLoader();
+        });
+    }
+  });
+};
+
+const editDataStatus = ref<boolean>(false);
+const clickEditRow = () => {
+  editDataStatus.value = true;
+};
+
+const closeModal = () => {
+  if (editDataStatus.value == true) {
+    $q.dialog({
+      title: `ข้อมูลมีการแก้ไข`,
+      message: `ยืนยันที่จะปิดโดยไม่บันทึกใช่หรือไม่?`,
+      cancel: "ยกเลิก",
+      ok: "ยืนยัน",
+      persistent: true,
+    }).onOk(() => {
+      editDataStatus.value = false;
+      closeAndClear();
+    });
+  } else {
+    closeAndClear();
+  }
+};
+
+const closeAndClear = async () => {
+  await props.close();
+  editDataStatus.value = false;
+  selected.value = "";
+  dataForm.personalId = "";
+  dataForm.containDate = new Date();
+  dataForm.posNoId = "";
+  dataForm.positionId = "";
+  dataForm.positionLevelId = "";
+  dataForm.positionLineId = "";
+  dataForm.positionPathSideId = "";
+  dataForm.positionTypeId = "";
+  // dataForm.salaryAmount = null;
+  // dataForm.mouthSalaryAmount = null;
+  // dataForm.positionSalaryAmount = null;
+};
+// ตำแหน่งเลขที่
+const posNoOptions = ref<Object[]>([
+  {
+    label: "",
+    value: "",
+  },
+]);
+// ตำแหน่ง
+const positionOptions = ref<Object[]>([
+  {
+    label: "",
+    value: "",
+  },
+]);
+// ด้าน/สาขา
+const positionPathSideOptions = ref<Object[]>([
+  {
+    label: "",
+    value: "",
+  },
+]);
+// ตำแหน่งประเภท
+const positionTypeOptions = ref<Object[]>([
+  {
+    label: "",
+    value: "",
+  },
+]);
+// สายงาน
+const positionLineOptions = ref<Object[]>([
+  {
+    label: "",
+    value: "",
+  },
+]);
+// ระดับ
+const positionLevelOptions = ref<Object[]>([
+  {
+    label: "",
+    value: "",
+  },
+]);
+
+const selectedPosition = async (data: any) => {
+  console.log("selecteds", data);
+  if (data.name == null && selected.value != data.keyId) {
+    // console.log("selecteds", data);
+
+    editDataStatus.value = true;
+    selected.value = data.keyId;
+
+    // posNo Options
+    posNoOptions.value = [
+      {
+        label: data.positionNum,
+        value: data.positionNumId,
+      },
+    ];
+    dataForm.posNoId = data.positionNumId;
+
+    // position Options
+    positionOptions.value = [
+      {
+        label: data.positionName,
+        value: data.positionNameId,
+      },
+    ];
+    dataForm.positionId = data.positionNameId;
+
+    // positionPathSide Options
+    let positionPathSideArr: any = [];
+    if (data.positionSideNameObj && data.positionSideNameObj != null) {
+      data.positionSideNameObj.map((x: any) => {
+        positionPathSideArr.push({
+          label: x.Name,
+          value: x.Id,
+        });
+      });
+      positionPathSideOptions.value = positionPathSideArr;
+      dataForm.positionPathSideId =
+        positionPathSideArr.length > 1 || positionPathSideArr.length == 0
+          ? ""
+          : positionPathSideArr[0].value;
+    }
+
+    // positionType Options
+    positionTypeOptions.value = [
+      {
+        label: data.positionType,
+        value: data.positionTypeId,
+      },
+    ];
+    dataForm.positionTypeId = data.positionTypeId;
+
+    // positionLine Options
+    positionLineOptions.value = [
+      {
+        label: data.positionLine,
+        value: data.positionLineId,
+      },
+    ];
+    dataForm.positionLineId = data.positionLineId;
+
+    // positionLevel Options
+    let positionLevelsArr: any = [];
+    if (data.positionLevelObj != null) {
+      data.positionLevelObj.map((x: any) => {
+        positionLevelsArr.push({
+          label: x.Name,
+          value: x.Id,
+        });
+      });
+      positionLevelOptions.value = positionLevelsArr;
+      dataForm.positionLevelId =
+        positionLevelsArr.length > 1 || positionLevelsArr.length == 0
+          ? ""
+          : positionLevelsArr[0].value;
+      dataForm.positionLevelId = data.positionLevelObj[0].Id;
+    }
+  } else if (selected.value == data.keyId) {
+    selected.value = "";
+    dataForm.posNoId = "";
+    dataForm.positionId = "";
+    dataForm.positionLevelId = "";
+    dataForm.positionLineId = "";
+    dataForm.positionPathSideId = "";
+    dataForm.positionTypeId = "";
+  }
+  console.log("dataForm", dataForm);
+};
+
+const checkPosition = (val: string) => {
+  const num = placementPosition.value.findIndex((e: string) => e === val);
+  return num;
+};
+const personal = ref<any>();
+const expanded = ref<string[]>([]);
+
+watch(props, () => {
+  expanded.value = [];
+  const dataPersonal = props.personal;
+  console.log(props.personal);
+
+  if (dataPersonal) {
+    dataPersonal.map((data: any) => {
+      personal.value = data;
+    });
+    console.log("personal", personal.value);
+  }
+  // console.log("draft===>", personal.value.draft);
+
+  if (personal.value) {
+    // const findData = dataRespone.value.find(findByPerson);
+    let findData: any = null;
+    dataRespone.value.map((x: any) => {
+      findData = findByPerson(x);
+      // console.log(findData);
+
+      if (findData != null) {
+        // console.log("findData===>", findData);
+        selectedPosition(findData);
+        for (let i = 3; i <= findData.keyId.length; i += 2) {
+          expanded.value.push(findData.keyId.slice(0, i));
+        }
+      }
+    });
+    // loadTreeData();
+    // selectedPosition(findData.children.children.children)
+  }
+});
+
+function findByPerson(element: any): any {
+  // console.log("searchTree element===>", element)
+  if (
+    element.positionNumId &&
+    element.positionLineId === personal.value.positionLineId &&
+    element.positionTypeId === personal.value.positionTypeId &&
+    element.positionNumId === personal.value.posNoId &&
+    (element.positionLevelObj === null ||
+      element.positionLevelObj[0].Id === personal.value.positionLevelId)
+  ) {
+    return element;
+  } else if (element.children) {
+    var i;
+    var result = null;
+    for (i = 0; result == null && i < element.children.length; i++) {
+      result = findByPerson(element.children[i]);
+    }
+    return result;
+  }
+  return null;
+}
+</script>
+
+<template>
+  <q-dialog v-model="props.modal" persistent>
+    <q-card style="width: 900px; max-width: 80vw">
+      <q-form ref="myFormPosition">
+        <DialogHeader title="เลือกหน่วยงานที่รับโอน" :close="closeModal" />
+        <q-separator />
+        <q-card-section class="q-pa-sm bg-grey-1">
+          <div class="row col-12 q-col-gutter-sm">
+            <div class="col-xs-12 col-sm-7 row">
+              <q-card flat bordered class="fit q-pa-sm">
+                <q-scroll-area visible style="height: 70vh">
+                  <q-input
+                    outlined
+                    dense
+                    ref="filterRef"
+                    v-model="search"
+                    placeholder="ค้นหา"
+                    class="q-mb-sm"
+                  >
+                    <template v-slot:append>
+                      <q-icon name="mdi-magnify" />
+                    </template>
+                  </q-input>
+                  <div class="q-pa-sm q-gutter-sm">
+                    <q-tree
+                      no-transition
+                      dense
+                      :nodes="treeData"
+                      node-key="keyId"
+                      :filter="search"
+                      :no-results-label="notFound"
+                      :no-nodes-label="noData"
+                      :filter-method="myFilterMethod"
+                      v-model:expanded="expanded"
+                    >
+                      <template v-slot:header-organization="prop">
+                        <div class="col">
+                          <div
+                            class="row items-center q-px-xs q-pt-xs q-gutter-sm"
+                          >
+                            <!--แสดงชื่อแผนก พิมพ์ตัวหนา คลิกแล้วกาง/หุบ Tree-->
+                            <div class="text-weight-medium">
+                              {{ prop.node.organizationName }}
+                            </div>
+
+                            <!--แสดง Total Count PositionNum-->
+                            <!-- <q-badge rounded color="grey-2" text-color="dark"
+                                                            :label="prop.node.totalPositionCount" /> -->
+                            <q-badge
+                              v-if="prop.node.totalPositionVacant > 0"
+                              rounded
+                              color="red"
+                              outline
+                              :label="prop.node.totalPositionVacant"
+                            />
+
+                            <q-space />
+                          </div>
+                          <div class="col items-center q-px-xs q-pt-xs">
+                            <div class="text-weight-medium text-grey-7">
+                              {{ prop.node.governmentCode }}
+                              {{ prop.node.organizationShortName }}
+                            </div>
+                          </div>
+                        </div>
+                      </template>
+
+                      <template v-slot:header-person="prop">
+                        <q-item
+                          clickable
+                          :active="selected == prop.node.keyId"
+                          @click="selectedPosition(prop.node)"
+                          :disable="
+                            prop.node.name != null ||
+                            checkPosition(prop.node.positionNumId) != -1
+                          "
+                          active-class="my-list-link text-primary text-weight-medium"
+                          class="row items-center text-dark q-py-xs q-pl-sm rounded-borders my-list"
+                        >
+                          <img
+                            v-if="
+                              prop.node.avatar == '' ||
+                              prop.node.avatar ==
+                                'https://cdn.quasar.dev/img/boy-avatar.png'
+                            "
+                            src="@/assets/avatar_user.jpg"
+                            class="col-xs-1 col-sm-2"
+                            style="
+                              width: 28px;
+                              height: 28px;
+                              border-radius: 50%;
+                            "
+                          />
+                          <img
+                            v-else
+                            :src="prop.node.avatar"
+                            class="col-xs-1 col-sm-2"
+                            style="
+                              width: 28px;
+                              height: 28px;
+                              border-radius: 50%;
+                            "
+                          />
+                          <!--=====ตำแหน่งว่าง สีแดง=====-->
+                          <div
+                            v-if="prop.node.name == null"
+                            class="q-px-sm text-weight-medium text-red"
+                          >
+                            ว่าง
+                          </div>
+                          <!--=====หัวหน้า สีเขียว=====-->
+                          <div v-else-if="prop.node.positionLeaderFlag">
+                            <div
+                              class="q-px-sm text-weight-medium text-primary"
+                            >
+                              {{ prop.node.name }}
+                            </div>
+                          </div>
+                          <!--=====ลูกน้อง สีปกติ=====-->
+                          <div v-else>
+                            <div class="q-px-sm text-weight-medium">
+                              {{ prop.node.name }}
+                            </div>
+                          </div>
+                          <!--ต่อท้ายชื่อคน แสดงสีปกติ-->
+                          <div class="q-pr-sm">
+                            {{ prop.node.positionName }}
+                          </div>
+                          <div class="q-pr-sm">
+                            {{ prop.node.positionNum }}
+                          </div>
+                          <div class="q-pr-sm">
+                            {{ prop.node.positionLevel }}
+                          </div>
+                          <q-icon
+                            v-if="prop.node.positionLeaderFlag"
+                            class="q-mr-sm"
+                            size="15px"
+                            color="primary"
+                            name="mdi-bookmark"
+                          ></q-icon>
+
+                          <q-space />
+                        </q-item>
+                      </template>
+                    </q-tree>
+                  </div>
+                </q-scroll-area>
+              </q-card>
+            </div>
+            <div class="col-xs-12 col-sm-5">
+              <q-card flat bordered class="fit q-pa-sm">
+                <q-scroll-area visible style="height: 70vh">
+                  <div class="row col-12 q-col-gutter-xs">
+                    <div class="col-xs-12 col-sm-12 col-md-12"></div>
+                    <div class="col-xs-12 col-sm-12 col-md-12">
+                      <datepicker
+                        menu-class-name="modalfix"
+                        v-model="dataForm.containDate"
+                        :locale="'th'"
+                        autoApply
+                        :enableTimePicker="false"
+                        week-start="0"
+                      >
+                        <template #year="{ year }">{{ year + 543 }}</template>
+                        <template #year-overlay-value="{ value }">{{
+                          parseInt(value + 543)
+                        }}</template>
+                        <template #trigger>
+                          <q-input
+                            class="full-width inputgreen cursor-pointer"
+                            outlined
+                            dense
+                            lazy-rules
+                            :model-value="
+                              date2Thai(new Date(dataForm.containDate))
+                            "
+                            :rules="[ (val: string) =>!!val ||`${'วันที่รายงานตัว'}`,
+        ]"
+                            :label="`${'วันที่รายงานตัว'}`"
+                            hide-bottom-space
+                          >
+                            <template v-slot:prepend>
+                              <q-icon
+                                name="event"
+                                class="cursor-pointer"
+                                style="color: var(--q-primary)"
+                              >
+                              </q-icon>
+                            </template>
+                          </q-input>
+                        </template>
+                      </datepicker>
+                    </div>
+                    <q-space />
+                    <div class="col-xs-12 col-sm-12 col-md-12">
+                      <q-select
+                        class="full-width inputgreen cursor-pointer custom-input"
+                        outlined
+                        standout
+                        dense
+                        hide-bottom-space
+                        lazy-rules
+                        :options="posNoOptions"
+                        v-model="dataForm.posNoId"
+                        :label="`${'ตำแหน่งเลขที่'}`"
+                        map-options
+                      />
+                    </div>
+                    <div class="col-xs-12 col-sm-12 col-md-12">
+                      <q-select
+                        outlined
+                        class="full-width inputgreen cursor-pointer custom-input"
+                        standout
+                        dense
+                        hide-bottom-space
+                        lazy-rules
+                        :options="positionOptions"
+                        v-model="dataForm.positionId"
+                        :label="`${'ตำแหน่ง'}`"
+                        map-options
+                      />
+                    </div>
+                    <div class="col-xs-12 col-sm-12 col-md-12">
+                      <q-select
+                        outlined
+                        class="full-width inputgreen cursor-pointer custom-input"
+                        standout
+                        dense
+                        hide-bottom-space
+                        lazy-rules
+                        :options="positionPathSideOptions"
+                        v-model="dataForm.positionPathSideId"
+                        :label="`${'ด้าน/สาขา'}`"
+                        map-options
+                      />
+                    </div>
+
+                    <div class="col-xs-12 col-sm-12 col-md-12">
+                      <q-select
+                        outlined
+                        class="full-width inputgreen cursor-pointer custom-input"
+                        standout
+                        dense
+                        hide-bottom-space
+                        lazy-rules
+                        :options="positionTypeOptions"
+                        v-model="dataForm.positionTypeId"
+                        :label="`${'ประเภทตำแหน่ง'}`"
+                        map-options
+                      />
+                    </div>
+                    <div class="col-xs-12 col-sm-12 col-md-12">
+                      <q-select
+                        outlined
+                        class="full-width inputgreen cursor-pointer custom-input"
+                        standout
+                        dense
+                        hide-bottom-space
+                        lazy-rules
+                        :options="positionLineOptions"
+                        v-model="dataForm.positionLineId"
+                        :label="`${'สายงาน'}`"
+                        map-options
+                      />
+                    </div>
+                    <div class="col-xs-12 col-sm-12 col-md-12">
+                      <q-select
+                        outlined
+                        class="full-width inputgreen cursor-pointer custom-input"
+                        standout
+                        dense
+                        lazy-rules
+                        :options="positionLevelOptions"
+                        v-model="dataForm.positionLevelId"
+                        :label="`${'ระดับ'}`"
+                        hide-bottom-space
+                        :rules="[(val: string) => !!val || `${'กรุณาเลือกระดับ'}`]"
+                        emit-value
+                        map-options
+                      />
+                    </div>
+                    <!-- <div class="col-sx-12 col-sm-12 col-md-12">
+                      <q-separator inset size="2px" class="q-my-md" />
+                    </div> -->
+                    <!-- <div class="col-xs-6 col-sm-6 col-md-6">
+                      <q-input
+                        outlined
+                        dense
+                        lazy-rules
+                        v-model="dataForm.salaryAmount"
+                        :rules="[(val) => !!val || `${'กรุณากรอกเงินเดือน'}`]"
+                        :label="`${'เงินเดือน'}`"
+                        @update:modelValue="clickEditRow"
+                        type="number"
+                        hide-bottom-space
+                      />
+                    </div> -->
+
+                    <!-- <div class="col-xs-6 col-sm-6 col-md-6">
+                      <q-input
+                        outlined
+                        dense
+                        lazy-rules
+                        v-model="dataForm.positionSalaryAmount"
+                        :rules="[
+                          (val) => !!val || `${'กรุณากรอกเงินประจำตำแหน่ง'}`,
+                        ]"
+                        :label="`${'เงินประจำตำแหน่ง'}`"
+                        @update:modelValue="clickEditRow"
+                        type="number"
+                        hide-bottom-space
+                      />
+                    </div> -->
+
+                    <!-- <div class="col-xs-6 col-sm-6 col-md-6">
+                      <q-input
+                        outlined
+                        dense
+                        lazy-rules
+                        v-model="dataForm.mouthSalaryAmount"
+                        :rules="[
+                          (val) =>
+                            !!val || `${'กรุณากรอกเงินค่าตอบแทนรายเดือน'}`,
+                        ]"
+                        :label="`${'เงินค่าตอบแทนรายเดือน'}`"
+                        @update:modelValue="clickEditRow"
+                        type="number"
+                        hide-bottom-space
+                      />
+                    </div> -->
+                  </div>
+                </q-scroll-area>
+              </q-card>
+            </div>
+          </div>
+        </q-card-section>
+
+        <q-separator />
+        <DialogFooter
+          :editvisible="true"
+          :validate="validateData"
+          :save="saveAppoint"
+          v-model:modalEdit="editDataStatus"
+        />
+      </q-form>
+    </q-card>
+  </q-dialog>
+</template>
+
+<style scoped lang="scss">
+.q-tree__node-header {
+  padding: 0px;
+  margin-top: 0px;
+  border-radius: 4px;
+  outline: 0;
+}
+
+.my-list-link {
+  color: rgb(118, 168, 222);
+  border-radius: 5px;
+  background: #a3d3fb48 !important;
+  font-weight: 600;
+  border: 1px solid rgba(175, 185, 196, 0.217);
+  /*  box-shadow: 1px 1px 7px 1px rgba(41, 95, 255, 0.15) !important; */
+}
+</style>

src/modules/05_placement/components/Relocation/RelocationMain.vue

@@ -0,0 +1,716 @@
+<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";
+import DialogOrgTree from "@/modules/05_placement/components/Relocation/RelocationModal.vue";
+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 { relocationType } from "@/modules/05_placement/interface/response/Relocation";
+const personalId = ref<string>("");
+const personal = ref<any[]>([]);
+const modalTree = ref<boolean>(false);
+const selected = ref<relocationType[]>([]);
+const checkSelected = computed(() => {
+  if (selected.value.length === 0) {
+    return true;
+  }
+});
+
+const $q = useQuasar();
+const router = useRouter();
+const mixin = useCounterMixin();
+
+const {
+  date2Thai,
+  messageError,
+  showLoader,
+  hideLoader,
+  success,
+  dialogMessage,
+} = mixin;
+
+const modal = ref<boolean>(false);
+const visibleColumns = ref<string[]>([
+  "no",
+  "fullname",
+  "position",
+  "positionLevel",
+  "organizationPositionOld",
+  "organization",
+  "statusText",
+  "btn",
+]);
+const visibleColumns2 = ref<string[]>([
+  "no",
+  "fullname",
+  "position",
+  "positionLevel",
+  "organizationPositionOld",
+  "organization",
+  "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<relocationType[]>([]);
+const rows2 = ref<any>([
+  {
+    personalId: "0a846508-4932-40de-9a9e-5b519492217c",
+    fullname: "นางสาวอย พชช",
+    position: "นักบริหาร",
+    positionLevel: "ต้น",
+    oc: "สำนักงานคณะกรรมการข้าราชการกรุงเทพมหานคร",
+    agency: "กลุ่มงานกุมารเวชกรรม",
+    status: "รออนุมัติ",
+  },
+  {
+    personalId: "08db721d-add6-47b0-8a13-5f45d106e8d1",
+    fullname: "นางสาววญ สพ",
+    position: "นักจัดการงานทั่วไป",
+    positionLevel: "ปฏิบัติการ",
+    oc: "กลุ่มงานช่วยนักบริหาร",
+    agency: "กลุ่มงานข้อมูลเมือง",
+    status: "รออนุมัติ",
+  },
+  {
+    personalId: "08db721d-adf2-4842-8056-1abb1539356e",
+    fullname: "นางสาววญ สพ",
+    position: "นักจัดการงานทั่วไป",
+    positionLevel: "ปฏิบัติการ",
+    oc: "กลุ่มงานช่วยนักบริหาร",
+    agency: "กลุ่มงานข้อมูลเมือง",
+    status: "รออนุมัติ",
+  },
+  {
+    personalId: "08db721d-adff-47b0-8762-41cd5c991001",
+    fullname: "นางสาววญ สพ",
+    position: "นักจัดการงานทั่วไป",
+    positionLevel: "ปฏิบัติการ",
+    oc: "กลุ่มงานช่วยนักบริหาร",
+    agency: "กลุ่มงานข้อมูลเมือง",
+    status: "รออนุมัติ",
+  },
+  {
+    personalId: "08db721d-ae22-424d-8f4a-87ba30cc3ee7",
+    fullname: "นางสาววญ สพ",
+    position: "นักจัดการงานทั่วไป",
+    positionLevel: "ปฏิบัติการ",
+    oc: "กลุ่มงานช่วยนักบริหาร",
+    agency: "กลุ่มงานข้อมูลเมือง",
+    status: "รออนุมัติ",
+  },
+]);
+const columns = 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: "organization",
+    align: "left",
+    label: "หน่วยงานที่ขอโอนไป",
+    sortable: true,
+    field: "organization",
+    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",
+  },
+  {
+    name: "btn",
+    align: "left",
+    label: "",
+    sortable: true,
+    field: "btn",
+    headerStyle: "font-size: 14px",
+    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: "organization",
+    align: "left",
+    label: "หน่วยงานที่ขอโอนไป",
+    sortable: true,
+    field: "organization",
+    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 openDetail = (id: string) => {
+  router.push(`/relocation/detail/${id}`);
+};
+const openModal = () => (modal.value = true);
+const closeModal = () => (modal.value = false);
+const openModalOrder = () => {
+  openModal();
+  const row = rows.value.filter(
+    (item: relocationType) =>
+      item.status == "WAITTING" ||
+      item.status == "PENDING" ||
+      item.status == "APPROVE"
+  );
+  rows2.value = row;
+};
+const openModalTree = (id: string) => {
+  personalId.value = id;
+  console.log(personalId.value);
+  personal.value = rows.value.filter((e: any) => e.id === id);
+  modalTree.value = true;
+};
+const getData = async () => {
+  showLoader();
+  await http
+    .get(config.API.relocationMain())
+    .then((res: any) => {
+      const data = res.data.result;
+      console.log("data==>", data);
+      rows.value = data.map((item: relocationType) => ({
+        fullname: `${item.prefix}${item.firstname} ${item.lastname}`,
+        id: item.id,
+        citizenId: item.citizenId,
+        prefix: item.prefix,
+        firstname: item.firstname,
+        lastname: item.lastname,
+        dateOfBirth: item.dateOfBirth,
+        gender: item.gender,
+        status: item.status,
+        statusText:statusText(item.status),
+        recruitDate: item.recruitDate,
+        positionNumber: item.positionNumber,
+        positionPath: item.positionPath,
+        positionPathSide: item.positionPathSide,
+        positionType: item.positionType,
+        positionLine: item.positionLine,
+        positionLevel: item.positionLevel,
+        posNoId: item.posNoId,
+        positionId: item.positionId,
+        positionPathSideId: item.positionPathSideId,
+        positionTypeId: item.positionTypeId,
+        positionLineId: item.positionLineId,
+        positionLevelId: item.positionLevelId,
+        organizationPositionId: item.organizationPositionId,
+        organizationName: item.organizationName,
+        organizationShortName: item.organizationShortName,
+        isActive: item.isActive,
+        reason: item.reason,
+        educationOld: item.educationOld,
+        salary: item.salary,
+        positionTypeOld: item.positionTypeOld,
+        positionLevelOld: item.positionLevelOld,
+        positionNumberOld: item.positionNumberOld,
+        organizationPositionOld: item.organizationPositionOld,
+        createdAt: item.createdAt,
+      }));
+      console.log(rows.value);
+    })
+    .catch((e) => {
+      // messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+};
+const saveOrder = async () => {
+  const id = selected.value.map((item) => item.id);
+  const body = {
+    id,
+  };
+
+  showLoader();
+  await http
+    .post(config.API.relocationMainReport(), 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();
+    });
+};
+const deleteData = async (id: string) => {
+  await http
+    .delete(config.API.relocationMainDelete(id))
+    .then((res) => {
+      success($q, "ลบข้อมูลสำเร็จ");
+      console.log(res);
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(async () => {
+      await getData();
+    });
+};
+
+const clickDelete = async (name: string, id: string) => {
+  dialogMessage(
+    $q,
+    `ลบข้อมูลของ ${name}`,
+    `ต้องการทำการลบข้อมูลนี้ใช่หรือไม่?`,
+    "delete",
+    "ยืนยัน",
+    "red",
+    async () => await deleteData(id),
+    async () => await getData()
+  );
+};
+const closeModalTree = async () => {
+  await getData();
+  modalTree.value = false;
+};
+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
+            @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 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" 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)"
+                >
+                  {{ props.row.fullname !== null ? props.row.fullname : "-" }}
+                </q-td>
+                <q-td
+                  key="position"
+                  :props="props"
+                  @click="openDetail(props.row.id)"
+                >
+                  {{ props.row.position !== null ? props.row.position : "-" }}
+                </q-td>
+                <q-td
+                  key="positionLevel"
+                  :props="props"
+                  @click="openDetail(props.row.id)"
+                >
+                  {{
+                    props.row.positionLevel !== null
+                      ? props.row.positionLevel
+                      : "-"
+                  }}
+                </q-td>
+                <q-td
+                  key="organizationPositionOld"
+                  :props="props"
+                  @click="openDetail(props.row.id)"
+                >
+                  <div class="table_ellipsis">
+                    {{
+                      props.row.organizationPositionOld !== null
+                        ? props.row.organizationPositionOld
+                        : "-"
+                    }}
+                  </div>
+                </q-td>
+                <q-td
+                  key="organization"
+                  :props="props"
+                  @click="openDetail(props.row.id)"
+                >
+                  <div class="table_ellipsis">
+                    {{
+                      props.row.organization !== null
+                        ? props.row.organization
+                        : "-"
+                    }}
+                  </div>
+                </q-td>
+                <q-td
+                  key="statusText"
+                  :props="props"
+                  @click="openDetail(props.row.id)"
+                >
+                  {{
+                    props.row.statusText !== null ? props.row.statusText : "-"
+                  }}
+                </q-td>
+                <q-td auto-width>
+                  <q-btn
+                    icon="mdi-dots-vertical"
+                    size="12px"
+                    color="grey-7"
+                    flat
+                    round
+                    dense
+                  >
+                    <q-menu
+                      transition-show="jump-down"
+                      transition-hide="jump-up"
+                    >
+                      <q-list dense style="min-width: 100px">
+                        <q-item
+                          clickable
+                          v-close-popup
+                          @click="openModalTree(props.row.id)"
+                        >
+                          <q-item-section
+                            style="min-width: 0px"
+                            avatar
+                            class="q-py-sm"
+                          >
+                            <q-icon
+                              color="primary"
+                              size="xs"
+                              name="mdi-bookmark-outline"
+                            />
+                          </q-item-section>
+                          <q-item-section
+                            >เลือกหน่วยงานที่รับย้าย</q-item-section
+                          >
+                        </q-item>
+                        <q-item
+                          clickable
+                          v-close-popup
+                          @click="clickDelete(props.row.fullname, props.row.id)"
+                        >
+                          <q-item-section
+                            style="min-width: 0px"
+                            avatar
+                            class="q-py-sm"
+                          >
+                            <q-tooltip>ลบข้อมูล</q-tooltip>
+                            <q-icon color="red" size="xs" name="mdi-delete" />
+                          </q-item-section>
+                          <q-item-section>ลบ</q-item-section>
+                        </q-item>
+                      </q-list>
+                    </q-menu>
+                  </q-btn>
+                </q-td>
+              </q-tr>
+            </template>
+          </d-table>
+        </div>
+      </div>
+    </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"
+          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="saveOrder"
+          :disable="checkSelected"
+          color="public"
+        />
+      </q-card-actions>
+    </q-card>
+  </q-dialog>
+  <DialogOrgTree
+    v-model:modal="modalTree"
+    :close="closeModalTree"
+    :personal="personal"
+    :personalId="personalId"
+  />
+  <!-- :personalId="personalId" -->
+</template>
+<style scoped lang="scss"></style>

src/modules/05_placement/components/Relocation/RelocationModal.vue

@@ -0,0 +1,799 @@
+<script setup lang="ts">
+import { useQuasar, QForm } from "quasar";
+import { onMounted, reactive, ref, watch } from "vue";
+import DialogHeader from "@/modules/05_placement/components/PersonalList/DialogHeader.vue";
+import DialogFooter from "@/modules/05_placement/components/PersonalList/DialogFooter.vue";
+import { useCounterMixin } from "@/stores/mixin";
+import http from "@/plugins/http";
+import config from "@/app.config";
+
+const $q = useQuasar();
+const mixin = useCounterMixin(); //เรียกฟังก์ชันกลาง
+const { date2Thai, hideLoader, messageError, showLoader, success } = mixin; //ฟังก์ชันกลางที่เรียกใช้
+
+const notFound = ref<string>("ไม่พบข้อมูลที่ค้นหา");
+const noData = ref<string>("ไม่พบข้อมูลผังโครงสร้าง");
+
+const checkValidate = ref<boolean>(false);
+const myFormPosition = ref<any>();
+const selected = ref<string>("");
+const selectedFile = ref<string>("");
+const dataRespone = ref<any>();
+
+// Set form field
+let dataForm = reactive({
+  personalId: "",
+  containDate: new Date(),
+  posNoId: "",
+  positionId: "",
+  positionLevelId: "",
+  positionLineId: "",
+  positionPathSideId: "",
+  positionTypeId: "",
+  // salaryAmount: null,
+  // mouthSalaryAmount: null,
+  // positionSalaryAmount: null,
+});
+
+onMounted(async () => {
+  await fetchPublishFile();
+  await loadTreeData();
+  await fetchplacementPosition();
+});
+const fetchPublishFile = async () => {
+  await http
+    .get(config.API.getPublishFileHistory)
+    .then((res) => {
+      let data = res.data.result;
+      selectedFile.value = data[0].fileName;
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(async () => {
+      hideLoader();
+    });
+};
+
+// โหลดข้อมูลโครงสร้างจาก json
+const treeData = ref<Array<any>>([]);
+const loadTreeData = async () => {
+  expanded.value = [];
+  await http
+    .get(`${config.s3ClusterUrl}${selectedFile.value}`)
+    .then((res: any) => {
+      treeData.value = res.data;
+      dataRespone.value = res.data;
+
+      // Filter objects with "name" null
+      const filteredData = res.data.filter(filterByPersonIdNull);
+      treeData.value = filteredData;
+    })
+    .catch((e: any) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+};
+
+function filterByPersonIdNull(obj: any) {
+  // console.log(obj);
+  if (obj.name === null && obj.isCondition != true) {
+    return true;
+  }
+  if (obj.children && obj.children.length > 0) {
+    obj.children = obj.children.filter(filterByPersonIdNull);
+    return obj.children.length > 0;
+  }
+  return false;
+}
+
+// โหลด position
+const placementPosition = ref<any>([]);
+const fetchplacementPosition = async () => {
+  await http
+    .get(config.API.placementPosition())
+    .then((res: any) => {
+      placementPosition.value = res.data.result;
+    })
+    .catch((e: any) => {
+      messageError($q, e);
+    });
+};
+
+const search = ref<string>("");
+//reset Tree Filter
+const filterRef = ref<any>(null);
+// const resetFilter = () => {
+//   search.value = "";
+//   filterRef.value.focus();
+// };
+
+const props = defineProps({
+  personalId: String,
+  modal: Boolean,
+  close: {
+    type: Function,
+    default: () => console.log("close modal"),
+  },
+  personal: Object,
+});
+
+const myFilterMethod = (node: any, filter: string) => {
+  const filt = filter;
+
+  return (
+    // ((node.name && node.name == null) || !node.name) &&
+    (node.name && node.name.indexOf(filt) > -1) ||
+    (node.organizationName && node.organizationName.indexOf(filt) > -1) ||
+    (node.positionNum && node.positionNum.indexOf(filt) > -1) ||
+    (node.positionName && node.positionName.indexOf(filt) > -1) ||
+    (node.governmentCode &&
+      node.governmentCode.toString().indexOf(filt) > -1) ||
+    (node.agency && node.agency.indexOf(filt) > -1) ||
+    (node.government && node.government.indexOf(filt) > -1) ||
+    (node.department && node.department.indexOf(filt) > -1) ||
+    (node.pile && node.pile.indexOf(filt) > -1) ||
+    (node.organizationShortName &&
+      node.organizationShortName.indexOf(filt) > -1) ||
+    (node.positionSideName && node.positionSideName.indexOf(filt) > -1) ||
+    (node.executivePosition && node.executivePosition.indexOf(filt) > -1) ||
+    (node.executivePositionSide &&
+      node.executivePositionSide.indexOf(filt) > -1) ||
+    (node.positionLevel && node.positionLevel.indexOf(filt) > -1)
+  );
+};
+
+const validateData = async () => {
+  checkValidate.value = true;
+  await myFormPosition.value.validate().then((result: boolean) => {
+    if (result == false) {
+      checkValidate.value = false;
+    }
+  });
+};
+const id = ref<string>("");
+const saveAppoint = async () => {
+  console.log("save", dataForm);
+
+  myFormPosition.value.validate().then(async (result: boolean) => {
+    if (props.personalId !== undefined) {
+      id.value = props.personalId.toString();
+    }
+    if (result) {
+      const dataAppoint = await {
+        // personalId: props.personalId,
+        recruitDate: dataForm.containDate,
+        posNoId: dataForm.posNoId,
+        positionId: dataForm.positionId,
+        positionLevelId: dataForm.positionLevelId,
+        positionLineId: dataForm.positionLineId,
+        positionPathSideId: dataForm.positionPathSideId,
+        positionTypeId: dataForm.positionTypeId,
+        // salaryAmount: dataForm.salaryAmount,
+        // mouthSalaryAmount: dataForm.mouthSalaryAmount,
+        // positionSalaryAmount: dataForm.positionSalaryAmount,
+      };
+      console.log("save appoint===>", dataAppoint);
+      showLoader();
+      await http
+        .put(config.API.relocationMainPut(id.value), dataAppoint)
+        .then((res) => {
+          console.log("respone=>", res);
+          success($q, "บันทึกสำเร็จ");
+        })
+        .catch((e) => {
+          messageError($q, e);
+        })
+        .finally(async () => {
+          await closeAndClear();
+          // await resetFilter();
+          await fetchPublishFile();
+          await loadTreeData();
+          await fetchplacementPosition();
+          hideLoader();
+        });
+    }
+  });
+};
+
+const editDataStatus = ref<boolean>(false);
+const clickEditRow = () => {
+  editDataStatus.value = true;
+};
+
+const closeModal = () => {
+  if (editDataStatus.value == true) {
+    $q.dialog({
+      title: `ข้อมูลมีการแก้ไข`,
+      message: `ยืนยันที่จะปิดโดยไม่บันทึกใช่หรือไม่?`,
+      cancel: "ยกเลิก",
+      ok: "ยืนยัน",
+      persistent: true,
+    }).onOk(() => {
+      editDataStatus.value = false;
+      closeAndClear();
+    });
+  } else {
+    closeAndClear();
+  }
+};
+
+const closeAndClear = async () => {
+  await props.close();
+  editDataStatus.value = false;
+  selected.value = "";
+  dataForm.personalId = "";
+  dataForm.containDate = new Date();
+  dataForm.posNoId = "";
+  dataForm.positionId = "";
+  dataForm.positionLevelId = "";
+  dataForm.positionLineId = "";
+  dataForm.positionPathSideId = "";
+  dataForm.positionTypeId = "";
+  // dataForm.salaryAmount = null;
+  // dataForm.mouthSalaryAmount = null;
+  // dataForm.positionSalaryAmount = null;
+};
+// ตำแหน่งเลขที่
+const posNoOptions = ref<Object[]>([
+  {
+    label: "",
+    value: "",
+  },
+]);
+// ตำแหน่ง
+const positionOptions = ref<Object[]>([
+  {
+    label: "",
+    value: "",
+  },
+]);
+// ด้าน/สาขา
+const positionPathSideOptions = ref<Object[]>([
+  {
+    label: "",
+    value: "",
+  },
+]);
+// ตำแหน่งประเภท
+const positionTypeOptions = ref<Object[]>([
+  {
+    label: "",
+    value: "",
+  },
+]);
+// สายงาน
+const positionLineOptions = ref<Object[]>([
+  {
+    label: "",
+    value: "",
+  },
+]);
+// ระดับ
+const positionLevelOptions = ref<Object[]>([
+  {
+    label: "",
+    value: "",
+  },
+]);
+
+const selectedPosition = async (data: any) => {
+  console.log("selecteds", data);
+  if (data.name == null && selected.value != data.keyId) {
+    // console.log("selecteds", data);
+
+    editDataStatus.value = true;
+    selected.value = data.keyId;
+
+    // posNo Options
+    posNoOptions.value = [
+      {
+        label: data.positionNum,
+        value: data.positionNumId,
+      },
+    ];
+    dataForm.posNoId = data.positionNumId;
+
+    // position Options
+    positionOptions.value = [
+      {
+        label: data.positionName,
+        value: data.positionNameId,
+      },
+    ];
+    dataForm.positionId = data.positionNameId;
+
+    // positionPathSide Options
+    let positionPathSideArr: any = [];
+    if (data.positionSideNameObj && data.positionSideNameObj != null) {
+      data.positionSideNameObj.map((x: any) => {
+        positionPathSideArr.push({
+          label: x.Name,
+          value: x.Id,
+        });
+      });
+      positionPathSideOptions.value = positionPathSideArr;
+      dataForm.positionPathSideId =
+        positionPathSideArr.length > 1 || positionPathSideArr.length == 0
+          ? ""
+          : positionPathSideArr[0].value;
+    }
+
+    // positionType Options
+    positionTypeOptions.value = [
+      {
+        label: data.positionType,
+        value: data.positionTypeId,
+      },
+    ];
+    dataForm.positionTypeId = data.positionTypeId;
+
+    // positionLine Options
+    positionLineOptions.value = [
+      {
+        label: data.positionLine,
+        value: data.positionLineId,
+      },
+    ];
+    dataForm.positionLineId = data.positionLineId;
+
+    // positionLevel Options
+    let positionLevelsArr: any = [];
+    if (data.positionLevelObj != null) {
+      data.positionLevelObj.map((x: any) => {
+        positionLevelsArr.push({
+          label: x.Name,
+          value: x.Id,
+        });
+      });
+      positionLevelOptions.value = positionLevelsArr;
+      dataForm.positionLevelId =
+        positionLevelsArr.length > 1 || positionLevelsArr.length == 0
+          ? ""
+          : positionLevelsArr[0].value;
+      dataForm.positionLevelId = data.positionLevelObj[0].Id;
+    }
+  } else if (selected.value == data.keyId) {
+    selected.value = "";
+    dataForm.posNoId = "";
+    dataForm.positionId = "";
+    dataForm.positionLevelId = "";
+    dataForm.positionLineId = "";
+    dataForm.positionPathSideId = "";
+    dataForm.positionTypeId = "";
+  }
+  console.log("dataForm", dataForm);
+};
+
+const checkPosition = (val: string) => {
+  const num = placementPosition.value.findIndex((e: string) => e === val);
+  return num;
+};
+const personal = ref<any>();
+const expanded = ref<string[]>([]);
+
+watch(props, () => {
+  expanded.value = [];
+  const dataPersonal = props.personal;
+  console.log(props.personal);
+
+  if (dataPersonal) {
+    dataPersonal.map((data: any) => {
+      personal.value = data;
+    });
+    console.log("personal", personal.value);
+  }
+  // console.log("draft===>", personal.value.draft);
+
+  if (personal.value) {
+    // const findData = dataRespone.value.find(findByPerson);
+    let findData: any = null;
+    dataRespone.value.map((x: any) => {
+      findData = findByPerson(x);
+      // console.log(findData);
+
+      if (findData != null) {
+        // console.log("findData===>", findData);
+        selectedPosition(findData);
+        for (let i = 3; i <= findData.keyId.length; i += 2) {
+          expanded.value.push(findData.keyId.slice(0, i));
+        }
+      }
+    });
+    // loadTreeData();
+    // selectedPosition(findData.children.children.children)
+  }
+});
+
+function findByPerson(element: any): any {
+  // console.log("searchTree element===>", element)
+  if (
+    element.positionNumId &&
+    element.positionLineId === personal.value.positionLineId &&
+    element.positionTypeId === personal.value.positionTypeId &&
+    element.positionNumId === personal.value.posNoId &&
+    (element.positionLevelObj === null ||
+      element.positionLevelObj[0].Id === personal.value.positionLevelId)
+  ) {
+    return element;
+  } else if (element.children) {
+    var i;
+    var result = null;
+    for (i = 0; result == null && i < element.children.length; i++) {
+      result = findByPerson(element.children[i]);
+    }
+    return result;
+  }
+  return null;
+}
+</script>
+
+<template>
+  <q-dialog v-model="props.modal" persistent>
+    <q-card style="width: 900px; max-width: 80vw">
+      <q-form ref="myFormPosition">
+        <DialogHeader title="เลือกหน่วยงานที่รับโอน" :close="closeModal" />
+        <q-separator />
+        <q-card-section class="q-pa-sm bg-grey-1">
+          <div class="row col-12 q-col-gutter-sm">
+            <div class="col-xs-12 col-sm-7 row">
+              <q-card flat bordered class="fit q-pa-sm">
+                <q-scroll-area visible style="height: 70vh">
+                  <q-input
+                    outlined
+                    dense
+                    ref="filterRef"
+                    v-model="search"
+                    placeholder="ค้นหา"
+                    class="q-mb-sm"
+                  >
+                    <template v-slot:append>
+                      <q-icon name="mdi-magnify" />
+                    </template>
+                  </q-input>
+                  <div class="q-pa-sm q-gutter-sm">
+                    <q-tree
+                      no-transition
+                      dense
+                      :nodes="treeData"
+                      node-key="keyId"
+                      :filter="search"
+                      :no-results-label="notFound"
+                      :no-nodes-label="noData"
+                      :filter-method="myFilterMethod"
+                      v-model:expanded="expanded"
+                    >
+                      <template v-slot:header-organization="prop">
+                        <div class="col">
+                          <div
+                            class="row items-center q-px-xs q-pt-xs q-gutter-sm"
+                          >
+                            <!--แสดงชื่อแผนก พิมพ์ตัวหนา คลิกแล้วกาง/หุบ Tree-->
+                            <div class="text-weight-medium">
+                              {{ prop.node.organizationName }}
+                            </div>
+
+                            <!--แสดง Total Count PositionNum-->
+                            <!-- <q-badge rounded color="grey-2" text-color="dark"
+                                                            :label="prop.node.totalPositionCount" /> -->
+                            <q-badge
+                              v-if="prop.node.totalPositionVacant > 0"
+                              rounded
+                              color="red"
+                              outline
+                              :label="prop.node.totalPositionVacant"
+                            />
+
+                            <q-space />
+                          </div>
+                          <div class="col items-center q-px-xs q-pt-xs">
+                            <div class="text-weight-medium text-grey-7">
+                              {{ prop.node.governmentCode }}
+                              {{ prop.node.organizationShortName }}
+                            </div>
+                          </div>
+                        </div>
+                      </template>
+
+                      <template v-slot:header-person="prop">
+                        <q-item
+                          clickable
+                          :active="selected == prop.node.keyId"
+                          @click="selectedPosition(prop.node)"
+                          :disable="
+                            prop.node.name != null ||
+                            checkPosition(prop.node.positionNumId) != -1
+                          "
+                          active-class="my-list-link text-primary text-weight-medium"
+                          class="row items-center text-dark q-py-xs q-pl-sm rounded-borders my-list"
+                        >
+                          <img
+                            v-if="
+                              prop.node.avatar == '' ||
+                              prop.node.avatar ==
+                                'https://cdn.quasar.dev/img/boy-avatar.png'
+                            "
+                            src="@/assets/avatar_user.jpg"
+                            class="col-xs-1 col-sm-2"
+                            style="
+                              width: 28px;
+                              height: 28px;
+                              border-radius: 50%;
+                            "
+                          />
+                          <img
+                            v-else
+                            :src="prop.node.avatar"
+                            class="col-xs-1 col-sm-2"
+                            style="
+                              width: 28px;
+                              height: 28px;
+                              border-radius: 50%;
+                            "
+                          />
+                          <!--=====ตำแหน่งว่าง สีแดง=====-->
+                          <div
+                            v-if="prop.node.name == null"
+                            class="q-px-sm text-weight-medium text-red"
+                          >
+                            ว่าง
+                          </div>
+                          <!--=====หัวหน้า สีเขียว=====-->
+                          <div v-else-if="prop.node.positionLeaderFlag">
+                            <div
+                              class="q-px-sm text-weight-medium text-primary"
+                            >
+                              {{ prop.node.name }}
+                            </div>
+                          </div>
+                          <!--=====ลูกน้อง สีปกติ=====-->
+                          <div v-else>
+                            <div class="q-px-sm text-weight-medium">
+                              {{ prop.node.name }}
+                            </div>
+                          </div>
+                          <!--ต่อท้ายชื่อคน แสดงสีปกติ-->
+                          <div class="q-pr-sm">
+                            {{ prop.node.positionName }}
+                          </div>
+                          <div class="q-pr-sm">
+                            {{ prop.node.positionNum }}
+                          </div>
+                          <div class="q-pr-sm">
+                            {{ prop.node.positionLevel }}
+                          </div>
+                          <q-icon
+                            v-if="prop.node.positionLeaderFlag"
+                            class="q-mr-sm"
+                            size="15px"
+                            color="primary"
+                            name="mdi-bookmark"
+                          ></q-icon>
+
+                          <q-space />
+                        </q-item>
+                      </template>
+                    </q-tree>
+                  </div>
+                </q-scroll-area>
+              </q-card>
+            </div>
+            <div class="col-xs-12 col-sm-5">
+              <q-card flat bordered class="fit q-pa-sm">
+                <q-scroll-area visible style="height: 70vh">
+                  <div class="row col-12 q-col-gutter-xs">
+                    <div class="col-xs-12 col-sm-12 col-md-12"></div>
+                    <div class="col-xs-12 col-sm-12 col-md-12">
+                      <datepicker
+                        menu-class-name="modalfix"
+                        v-model="dataForm.containDate"
+                        :locale="'th'"
+                        autoApply
+                        :enableTimePicker="false"
+                        week-start="0"
+                      >
+                        <template #year="{ year }">{{ year + 543 }}</template>
+                        <template #year-overlay-value="{ value }">{{
+                          parseInt(value + 543)
+                        }}</template>
+                        <template #trigger>
+                          <q-input
+                            class="full-width inputgreen cursor-pointer"
+                            outlined
+                            dense
+                            lazy-rules
+                            :model-value="
+                              date2Thai(new Date(dataForm.containDate))
+                            "
+                            :rules="[ (val: string) =>!!val ||`${'วันที่รายงานตัว'}`,
+        ]"
+                            :label="`${'วันที่รายงานตัว'}`"
+                            hide-bottom-space
+                          >
+                            <template v-slot:prepend>
+                              <q-icon
+                                name="event"
+                                class="cursor-pointer"
+                                style="color: var(--q-primary)"
+                              >
+                              </q-icon>
+                            </template>
+                          </q-input>
+                        </template>
+                      </datepicker>
+                    </div>
+                    <q-space />
+                    <div class="col-xs-12 col-sm-12 col-md-12">
+                      <q-select
+                        class="full-width inputgreen cursor-pointer custom-input"
+                        outlined
+                        standout
+                        dense
+                        hide-bottom-space
+                        lazy-rules
+                        :options="posNoOptions"
+                        v-model="dataForm.posNoId"
+                        :label="`${'ตำแหน่งเลขที่'}`"
+                        map-options
+                      />
+                    </div>
+                    <div class="col-xs-12 col-sm-12 col-md-12">
+                      <q-select
+                        outlined
+                        class="full-width inputgreen cursor-pointer custom-input"
+                        standout
+                        dense
+                        hide-bottom-space
+                        lazy-rules
+                        :options="positionOptions"
+                        v-model="dataForm.positionId"
+                        :label="`${'ตำแหน่ง'}`"
+                        map-options
+                      />
+                    </div>
+                    <div class="col-xs-12 col-sm-12 col-md-12">
+                      <q-select
+                        outlined
+                        class="full-width inputgreen cursor-pointer custom-input"
+                        standout
+                        dense
+                        hide-bottom-space
+                        lazy-rules
+                        :options="positionPathSideOptions"
+                        v-model="dataForm.positionPathSideId"
+                        :label="`${'ด้าน/สาขา'}`"
+                        map-options
+                      />
+                    </div>
+
+                    <div class="col-xs-12 col-sm-12 col-md-12">
+                      <q-select
+                        outlined
+                        class="full-width inputgreen cursor-pointer custom-input"
+                        standout
+                        dense
+                        hide-bottom-space
+                        lazy-rules
+                        :options="positionTypeOptions"
+                        v-model="dataForm.positionTypeId"
+                        :label="`${'ประเภทตำแหน่ง'}`"
+                        map-options
+                      />
+                    </div>
+                    <div class="col-xs-12 col-sm-12 col-md-12">
+                      <q-select
+                        outlined
+                        class="full-width inputgreen cursor-pointer custom-input"
+                        standout
+                        dense
+                        hide-bottom-space
+                        lazy-rules
+                        :options="positionLineOptions"
+                        v-model="dataForm.positionLineId"
+                        :label="`${'สายงาน'}`"
+                        map-options
+                      />
+                    </div>
+                    <div class="col-xs-12 col-sm-12 col-md-12">
+                      <q-select
+                        outlined
+                        class="full-width inputgreen cursor-pointer custom-input"
+                        standout
+                        dense
+                        lazy-rules
+                        :options="positionLevelOptions"
+                        v-model="dataForm.positionLevelId"
+                        :label="`${'ระดับ'}`"
+                        hide-bottom-space
+                        :rules="[(val: string) => !!val || `${'กรุณาเลือกระดับ'}`]"
+                        emit-value
+                        map-options
+                      />
+                    </div>
+                    <!-- <div class="col-sx-12 col-sm-12 col-md-12">
+                      <q-separator inset size="2px" class="q-my-md" />
+                    </div> -->
+                    <!-- <div class="col-xs-6 col-sm-6 col-md-6">
+                      <q-input
+                        outlined
+                        dense
+                        lazy-rules
+                        v-model="dataForm.salaryAmount"
+                        :rules="[(val) => !!val || `${'กรุณากรอกเงินเดือน'}`]"
+                        :label="`${'เงินเดือน'}`"
+                        @update:modelValue="clickEditRow"
+                        type="number"
+                        hide-bottom-space
+                      />
+                    </div> -->
+
+                    <!-- <div class="col-xs-6 col-sm-6 col-md-6">
+                      <q-input
+                        outlined
+                        dense
+                        lazy-rules
+                        v-model="dataForm.positionSalaryAmount"
+                        :rules="[
+                          (val) => !!val || `${'กรุณากรอกเงินประจำตำแหน่ง'}`,
+                        ]"
+                        :label="`${'เงินประจำตำแหน่ง'}`"
+                        @update:modelValue="clickEditRow"
+                        type="number"
+                        hide-bottom-space
+                      />
+                    </div> -->
+
+                    <!-- <div class="col-xs-6 col-sm-6 col-md-6">
+                      <q-input
+                        outlined
+                        dense
+                        lazy-rules
+                        v-model="dataForm.mouthSalaryAmount"
+                        :rules="[
+                          (val) =>
+                            !!val || `${'กรุณากรอกเงินค่าตอบแทนรายเดือน'}`,
+                        ]"
+                        :label="`${'เงินค่าตอบแทนรายเดือน'}`"
+                        @update:modelValue="clickEditRow"
+                        type="number"
+                        hide-bottom-space
+                      />
+                    </div> -->
+                  </div>
+                </q-scroll-area>
+              </q-card>
+            </div>
+          </div>
+        </q-card-section>
+
+        <q-separator />
+        <DialogFooter
+          :editvisible="true"
+          :validate="validateData"
+          :save="saveAppoint"
+          v-model:modalEdit="editDataStatus"
+        />
+      </q-form>
+    </q-card>
+  </q-dialog>
+</template>
+
+<style scoped lang="scss">
+.q-tree__node-header {
+  padding: 0px;
+  margin-top: 0px;
+  border-radius: 4px;
+  outline: 0;
+}
+
+.my-list-link {
+  color: rgb(118, 168, 222);
+  border-radius: 5px;
+  background: #a3d3fb48 !important;
+  font-weight: 600;
+  border: 1px solid rgba(175, 185, 196, 0.217);
+  /*  box-shadow: 1px 1px 7px 1px rgba(41, 95, 255, 0.15) !important; */
+}
+</style>

src/modules/05_placement/components/Relocation/RelocationbyId.vue

@@ -0,0 +1,537 @@
+<script setup lang="ts">
+import { onMounted, ref } from "vue";
+import { useQuasar } from "quasar";
+import { useRoute, useRouter } from "vue-router";
+import { useCounterMixin } from "@/stores/mixin";
+
+import http from "@/plugins/http";
+import config from "@/app.config";
+import keycloak from "@/plugins/keycloak";
+
+import type { QTableProps, QForm } from "quasar";
+// import type {
+//   TypeFile,
+//   ResponseDataDetail,
+// } from "@/modules/05_placement/interface/response/Transfer";
+
+const $q = useQuasar();
+const route = useRoute();
+const router = useRouter();
+const mixin = useCounterMixin();
+const edit = ref<boolean>(false);
+const personId = route.params.id as string;
+const {
+  date2Thai,
+  dialogMessage,
+  messageError,
+  showLoader,
+  hideLoader,
+  success,
+} = mixin;
+
+const roleAdmin = ref<boolean>(false);
+const myForm = ref<QForm | null>(null);
+const name = ref<string>("นายสมคิด ยอดใจ");
+const level = ref<string>("ชำนาญการพิเศษ");
+const institution = ref<string>("ฝ่ายบริหารงานทั่วไป");
+const fullname = ref<string>("");
+const id = ref<string>("");
+const prefix = ref<string>("");
+const prefixId = ref<string>("");
+const firstname = ref<string>("");
+const citizenId = ref<string>("")
+const lastname = ref<string>("");
+const position = ref<string>("");
+const posNo = ref<string>("");
+const positionLevel = ref<string>("");
+const educationOld = ref<string>("");
+const createdAt = ref<string>("");
+const organization = ref<string>("");
+const reason = ref<string>("");
+const status = ref<string>("");
+const date = ref<Date | null>(null);
+const salary = ref<string>("");
+const salaryNew = ref<string>("");
+const positionTypeOld = ref<string>("");
+const positionLevelOld = ref<string>("");
+const dateOfBirth = ref<Date>()
+const genderId = ref<string>("")
+const nationality = ref<string>("")
+const race = ref<string>("")
+const religionId = ref<string>("")
+const bloodGroupId = ref<string>("")
+const relationshipId = ref<string>("")
+const telephoneNumber = ref<string>("")
+const positionNumberOld = ref<string>("");
+const organizationPositionOld = ref<string>("");
+const isActive = ref<string>("");
+// const responseData = ref<ResponseDataDetail>({
+//   createdAt: new Date(),
+//   date: new Date(),
+//   id: "",
+//   organization: "",
+//   organizationPositionOld: "",
+//   positionLevelOld: "",
+//   positionNumberOld: "",
+//   positionTypeOld: "",
+//   reason: "",
+//   salary: 0,
+//   status: "",
+// });
+
+// const rows = ref<TypeFile[]>([]);
+// const columns = ref<QTableProps["columns"]>([
+//   {
+//     name: "no",
+//     align: "left",
+//     label: "ลำดับ",
+//     sortable: true,
+//     field: "no",
+//     headerStyle: "font-size: 14px",
+//     style: "font-size: 14px",
+//   },
+//   {
+//     name: "fileName",
+//     align: "left",
+//     label: "ชื่อไฟล์",
+//     sortable: true,
+//     field: "fileName",
+//     headerStyle: "font-size: 14px",
+//     style: "font-size: 14px",
+//   },
+//   {
+//     name: "btnMicrosoft",
+//     align: "right",
+//     label: "ปุ่ม",
+//     sortable: true,
+//     field: "btnMicrosoft",
+//     headerStyle: "font-size: 14px",
+//     style: "font-size: 14px",
+//   },
+// ]);
+
+const getData = async () => {
+  showLoader();
+  await http
+    .get(config.API.relocationDetail(personId))
+    .then((res: any) => {
+      const data = res.data.result;
+      citizenId.value = data.citizenId
+      fullname.value = `${data.prefix}${data.firstname} ${data.lastname}`;
+      prefixId.value = data.prefixId;
+      prefix.value = data.prefix;
+      firstname.value = data.firstname;
+      lastname.value = data.lastname;
+      educationOld.value = data.educationOld;
+      position.value = data.position;
+      posNo.value = data.posNo;
+      positionLevel.value = data.positionLevel;
+      createdAt.value = data.createdAt;
+      organization.value = data.organization;
+      reason.value = data.reason;
+      status.value = data.status;
+      date.value = data.date;
+      salary.value = data.salary;
+      positionTypeOld.value = data.positionTypeOld;
+      positionLevelOld.value = data.positionLevelOld;
+      positionNumberOld.value = data.positionNumberOld;
+      organizationPositionOld.value = data.organizationPositionOld;
+      dateOfBirth.value = data.dateOfBirth;
+      genderId.value = data.genderId;
+      nationality.value = data.nationality;
+      race.value = data.race;
+      religionId.value = data.religionId;
+      bloodGroupId.value = data.bloodGroupId;
+      relationshipId.value = data.relationshipId;
+      telephoneNumber.value = data.telephoneNumber;
+      isActive.value = data.isActive;
+    })
+    .catch((e) => {
+      //   messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+};
+const getClass = (val: boolean) => {
+  return {
+    "full-width inputgreen cursor-pointer": val,
+    "full-width cursor-pointer": !val,
+  };
+};
+//
+const conditionSave = async () => {
+  if (myForm.value !== null) {
+    myForm.value.validate().then((success: any) => {
+      if (success) {
+        dialogMessage(
+          $q,
+          "ต้องการแก้ไขข้อมูลหรือไม่?",
+          "แก้ไขข้อมูลเพื่อลงบัญชีแนบท้าย",
+          "mdi-help-circle-outline",
+          "ตกลง",
+          "public",
+          async () => await saveData(),
+          undefined
+        );
+      }
+    });
+  }
+};
+const saveData = async () => {
+  const body = {
+    educationOld: educationOld.value,
+    prefixId:prefixId.value,
+    citizenId:citizenId.value,
+    firstname:firstname.value,
+    lastname:lastname.value,
+    reason: reason.value,
+    organizationPositionOld: organizationPositionOld.value,
+    positionTypeOld: positionTypeOld.value,
+    positionLevelOld: positionLevelOld.value,
+    positionNumberOld: positionNumberOld.value,
+    amountOld: salary.value,
+    dateOfBirth:dateOfBirth.value ,
+    genderId:genderId.value ,
+    nationality:nationality.value ,
+    race:race.value ,
+    religionId:religionId.value ,
+    bloodGroupId:bloodGroupId.value ,
+    relationshipId:relationshipId.value ,
+    telephoneNumber:telephoneNumber.value ,
+  };
+  showLoader();
+  await http
+    .put(config.API.relocationMainEdit(personId.toString()), body)
+    .then((res: any) => {
+      //   const data = res.data.result;
+      //   console.log(data);
+      success($q, "แก้ไขข้อมูลเพื่อลงบัญชีแนบท้ายสำเร็จ");
+      edit.value = false;
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(async () => {
+      await getData();
+      hideLoader();
+    });
+};
+
+// const confirmMessage = async () => {
+//     dialogMessage(
+//       $q,
+//       "ต้องการยืนยันส่งคำร้องไปยัง สกจ หรือไม่?",
+//       "ข้อมูลจะถูกนำส่งคำร้องไปยัง สกจ ทันที",
+//       "mdi-help-circle-outline",
+//       "ยืนยัน",
+//       "primary",
+//       () => sendConfirm(),
+//       undefined
+//     );
+//   };
+// const sendConfirm = async () => {
+//     showLoader();
+//     await http
+//       .get(config.API.transferConfirmId(personId.toString()))
+//       .then((res: any) => {
+//         //   const data = res.data.result;
+//         //   console.log(data);
+//         success($q, "ส่งคำร้องข้อมูลสำเร็จ");
+//       })
+//       .catch((e) => {
+//         messageError($q, e);
+//       })
+//       .finally(async () => {
+//         await getData();
+//         hideLoader();
+//       });
+//   };
+onMounted(async () => {
+  await getData();
+});
+</script>
+<template>
+  <div class="toptitle text-dark col-12 row items-center">
+    <q-btn
+      icon="mdi-arrow-left"
+      unelevated
+      round
+      dense
+      flat
+      color="primary"
+      class="q-mr-sm"
+      @click="router.go(-1)"
+    />
+    รายละเอียดการย้าย {{ 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">{{ fullname }}</div>
+      <q-space />
+      <q-btn
+        outline
+        color="blue"
+        dense
+        icon-right="mdi-open-in-new"
+        class="q-px-sm"
+        label="ดูข้อมูลทะเบียนประวัติ"
+        @click="router.push(`/registry/${personId}`)"
+      />
+    </div>
+    <div class="col-12"><q-separator /></div>
+    <div class="row col-12 q-pa-md">
+      <div class="col-12 row bg-white q-col-gutter-md">
+        <div class="col-xs-3 col-sm-2 col-md-1 row">
+          <q-img src="@/assets/avatar_user.jpg" />
+        </div>
+        <div class="col-xs-6 col-sm-3 row items-center">
+          <div class="col-12 q-pl-md">
+            <div class="col-12 text-top">ตำแหน่งในสายงาน</div>
+            <div class="col-12 text-detail">
+              {{ positionTypeOld }}
+            </div>
+          </div>
+        </div>
+        <div class="col-xs-6 col-sm-3 row items-center">
+          <div class="col-12">
+            <div class="col-12 text-top">ระดับ</div>
+            <div class="col-12 text-detail">
+              {{ positionLevelOld }}
+            </div>
+          </div>
+        </div>
+        <div class="col-xs-6 col-sm-3 row items-center">
+          <div class="col-12">
+            <div class="col-12 text-top">สังกัด</div>
+            <div class="col-12 text-detail">
+              {{ organizationPositionOld }}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </q-card>
+
+  <q-card bordered class="row col-12 text-dark q-mt-sm">
+    <div class="bg-grey-1 q-pa-sm col-12 row items-center text-primary">
+      <div class="q-pl-sm text-weight-bold text-dark">
+        แก้ไขข้อมูลเพื่อลงบัญชีแนบท้าย
+      </div>
+      <q-space />
+      <div class="q-gutter-sm" v-if="!edit">
+        <q-btn
+          outline
+          color="primary"
+          dense
+          icon-right="mdi-file-edit-outline"
+          class="q-px-sm"
+          label="แก้ไข"
+          style="width: 80px"
+          @click="edit = !edit"
+        />
+      </div>
+      <div class="q-gutter-sm" v-else>
+        <q-btn
+          outline
+          color="public"
+          dense
+          class="q-px-sm"
+          label="บันทึก"
+          style="width: 80px"
+          @click="conditionSave"
+        />
+        <q-btn
+          outline
+          color="red"
+          dense
+          class="q-px-sm"
+          label="ยกเลิก"
+          style="width: 80px"
+          @click="edit = !edit"
+        />
+      </div>
+    </div>
+    <div class="col-12"><q-separator /></div>
+    <q-form ref="myForm">
+      <div class="row col-12 q-pa-md">
+        <div class="col-12 row bg-white q-col-gutter-md">
+          <div class="col-xs-6 col-sm-3 row items-center">
+                <div class="text-weight-bold text-grey">วุฒิการศึกษา</div>
+                <div class="col-12">
+                  <q-input
+                    :class="getClass(edit)"
+                    :outlined="edit"
+                    dense
+                    lazy-rules
+                    :readonly="!edit"
+                    :borderless="!edit"
+                    v-model="educationOld"
+                    :rules="[(val) => !!val || `${'กรุณากรอกตำแหน่งประเภท'}`]"
+                    hide-bottom-space
+                    :label="`${'วุฒิ/สาขา'}`"
+                  />
+                </div>
+              </div>
+          <div class="col-xs-12 row items-center">
+            <div class="col-12 q-pb-sm"><q-separator /></div>
+
+            <div class="col-12">
+              <div class="text-weight-bold text-grey">
+                ตำแหน่งและหน่วยงานเดิม
+              </div>
+            </div>
+            <div class="col-12">
+              <q-input
+                :class="getClass(edit)"
+                :outlined="edit"
+                dense
+                lazy-rules
+                :readonly="!edit"
+                :borderless="!edit"
+                v-model="organizationPositionOld"
+                :rules="[(val) => !!val || `${'กรุณากรอกตำแหน่ง/สังกัด'}`]"
+                hide-bottom-space
+                :label="`${'ตำแหน่ง/สังกัด'}`"
+                type="textarea"
+              />
+            </div>
+          </div>
+          <div class="col-xs-6 col-sm-3 row items-center">
+            <div class="col-12">
+              <q-input
+                :class="getClass(edit)"
+                :outlined="edit"
+                dense
+                lazy-rules
+                :readonly="!edit"
+                :borderless="!edit"
+                v-model="positionTypeOld"
+                :rules="[(val) => !!val || `${'กรุณากรอกตำแหน่งประเภท'}`]"
+                hide-bottom-space
+                :label="`${'ตำแหน่งประเภท'}`"
+              />
+            </div>
+          </div>
+          <div class="col-xs-6 col-sm-3 row items-center">
+            <div class="col-12">
+              <q-input
+                :class="getClass(edit)"
+                :outlined="edit"
+                dense
+                lazy-rules
+                :readonly="!edit"
+                :borderless="!edit"
+                v-model="positionLevelOld"
+                :rules="[(val) => !!val || `${'กรุณากรอกระดับ'}`]"
+                hide-bottom-space
+                :label="`${'ระดับ'}`"
+              />
+            </div>
+          </div>
+          <div class="col-xs-6 col-sm-3 row items-center">
+            <div class="col-12">
+              <q-input
+                :class="getClass(edit)"
+                :outlined="edit"
+                dense
+                lazy-rules
+                :readonly="!edit"
+                :borderless="!edit"
+                v-model="positionNumberOld"
+                :rules="[(val) => !!val || `${'กรุณากรอกเลขที่'}`]"
+                hide-bottom-space
+                :label="`${'เลขที่'}`"
+              />
+            </div>
+          </div>
+          <div class="col-xs-6 col-sm-3 row items-center">
+            <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"
+              />
+            </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-3 row items-center">
+            <div class="text-weight-bold text-grey col-12">
+              เงินเดือนตำแหน่งและหน่วยงานที่รับโอน
+            </div>
+            <div class="col-12">
+              <q-input
+                :class="getClass(edit)"
+                :outlined="edit"
+                dense
+                lazy-rules
+                :readonly="!edit"
+                :borderless="!edit"
+                v-model="salaryNew"
+                :rules="[(val) => !!val || `${'กรุณากรอกเงินเดือน'}`]"
+                hide-bottom-space
+                :label="`${'เงินเดือน'}`"
+                type="number"
+              />
+            </div>
+          </div>
+          <div class="col-12">
+            <q-input
+              :class="getClass(edit)"
+              :outlined="edit"
+              dense
+              lazy-rules
+              :readonly="!edit"
+              :borderless="!edit"
+              v-model="reason"
+              :rules="[(val) => !!val || `${'กรุณากรอกหมายเหตุ '}`]"
+              hide-bottom-space
+              :label="`${'หมายเหตุ '}`"
+              type="textarea"
+            />
+          </div>
+        </div>
+      </div>
+    </q-form>
+  </q-card>
+</template>
+
+<style lang="scss" scope>
+.q-img {
+  border-radius: 5px;
+  height: 70px;
+}
+.text-top {
+  color: gray;
+  font-weight: 400;
+  padding-bottom: 3px;
+}
+.text-detail {
+  font-weight: 500;
+}
+</style>

src/modules/05_placement/components/Repatriate/RepatriateMain.vue

@@ -534,7 +534,7 @@ onMounted(async () => {
           :columns="columns2"
           :rows="rows2"
           :filter="filterKeyword2"
-          row-key="personalId"
+          row-key="id"
           class="custom-header-table"
           :visible-columns="visibleColumns2"
           selection="multiple"

src/modules/05_placement/components/Repatriate/RepatriatebyId.vue

@@ -439,10 +439,11 @@
       positionLevelOld: positionLevelOld.value,
       positionNumberOld: posNo.value,
       amountOld: salary.value,
+      
     };
     showLoader();
     await http
-      .put(config.API.transferId(personId.toString()), body)
+      .put(config.API.repatriationMainEdit(personId.toString()), body)
       .then((res: any) => {
         //   const data = res.data.result;
         //   console.log(data);

src/modules/05_placement/components/helpgovernment/governmentDetail.vue

@@ -442,7 +442,7 @@ const saveData = async () => {
   };
   showLoader();
   await http
-    .put(config.API.transferId(personId.toString()), body)
+    .put(config.API.officerMainEdit(personId.toString()), body)
     .then((res: any) => {
       //   const data = res.data.result;
       //   console.log(data);

src/modules/05_placement/components/helpgovernment/mainHelp.vue

@@ -534,7 +534,7 @@ onMounted(async () => {
           :columns="columns2"
           :rows="rows2"
           :filter="filterKeyword2"
-          row-key="personalId"
+          row-key="id"
           class="custom-header-table"
           :visible-columns="visibleColumns2"
           selection="multiple"

src/modules/05_placement/interface/response/Relocation.ts

@@ -0,0 +1,38 @@
+interface relocationType {
+    no:number,
+    id: string,
+    citizenId: "0000000000005",
+    prefix: string,
+    firstname: string,
+    lastname: string,
+    dateOfBirth: Date,
+    gender: string,
+    status: string,
+    recruitDate: Date,
+    positionNumber: number,
+    positionPath: string,
+    positionPathSide: string,
+    positionType: string,
+    positionLine: string,
+    positionLevel: string,
+    posNoId: string,
+    positionId: string,
+    positionPathSideId: string,
+    positionTypeId: string,
+    positionLineId: string,
+    positionLevelId: string,
+    organizationPositionId: string,
+    organizationName: string,
+    organizationShortName: string,
+    isActive: boolean,
+    reason: string,
+    educationOld: string,
+    salary: number,
+    positionTypeOld: string,
+    positionLevelOld: string,
+    positionNumberOld: string,
+    organizationPositionOld: string,
+    createdAt: Date
+}
+
+export type { relocationType};

src/modules/05_placement/interface/response/officer.ts

@@ -2,8 +2,8 @@ interface officerType {
     no:number,
     id: string,
     prefix: string,
-    firstName: string,
+    firstname: string,
-    lastName: string,
+    lastname: string,
     position: string,
     posNo: string,
     positionLevel: string,

src/modules/05_placement/router.ts

@@ -33,16 +33,12 @@ const RepatriationOrder = () =>
   import("@/modules/05_placement/components/RepatriationOrder/List.vue");
 const RepatriationOrderAdd = () =>
   import("@/modules/05_placement/components/RepatriationOrder/AddOrder.vue");
-const helpgovernment = () =>
+const helpgovernment = () => import("@/modules/05_placement/components/helpgovernment/mainHelp.vue")
-  import("@/modules/05_placement/components/helpgovernment/mainHelp.vue");
+const helpgovernmentbyId = () => import("@/modules/05_placement/components/helpgovernment/governmentDetail.vue")
-const helpgovernmentbyId = () =>
+const repatriate = () => import("@/modules/05_placement/components/Repatriate/RepatriateMain.vue")
-  import(
+const repatriatebyId = () => import("@/modules/05_placement/components/Repatriate/RepatriatebyId.vue")
-    "@/modules/05_placement/components/helpgovernment/governmentDetail.vue"
+const relocation = () => import("@/modules/05_placement/components/Relocation/RelocationMain.vue")
-  );
+const relocationbyId = () => import("@/modules/05_placement/components/Relocation/RelocationbyId.vue")
-const repatriate = () =>
-  import("@/modules/05_placement/components/Repatriate/RepatriateMain.vue");
-const repatriatebyId = () =>
-  import("@/modules/05_placement/components/Repatriate/RepatriatebyId.vue");
 //รับโอน
 const receiveMain = () =>
   import("@/modules/05_placement/components/Receive/receiveMain.vue");
@@ -57,6 +53,12 @@ const FormSaveResultAdd = () =>
   import(
     "@/modules/05_placement/components/probation/FormEvaluation/FormSaveResultAdd.vue"
   );
+//แต่งตั้ง-เลื่อน
+const AppointmentMain = () => import("@/modules/05_placement/components/AppointMent/Main.vue");
+const AppointmentDetail = () => import("@/modules/05_placement/components/AppointMent/Detail.vue");
+//อื่นๆ
+const OtherMain = () => import("@/modules/05_placement/components/Other/Main.vue")
+const OthertDetail = () => import("@/modules/05_placement/components/Other/Detail.vue");
 
 export default [
   {
@@ -269,4 +271,62 @@ export default [
       Role: "placement",
     },
   },
+  {
+    path: "appoint-promote",
+    name: "appoint-promote",
+    component: AppointmentMain,
+    meta: {
+      Auth: true,
+      Key: [6.8],
+      Role: "placement",
+    },
+  },
+  {
+    path: "appoint-promote/detail/:id",
+    name: "appoint-promote-detail",
+    component: AppointmentDetail,
+    meta: {
+      Auth: true,
+      Key: [6.8],
+      Role: "placement",
+    },
+  },
+  {
+    path: "other",
+    name: "other",
+    component: OtherMain,
+    meta: {
+      Auth: true,
+      Key: [6.9],
+      Role: "placement",
+    },
+  }, {
+    path: "/relocation",
+    name: "relocation",
+    component: relocation,
+    meta: {
+      Auth: true,
+      Key: [6.9],
+      Role: "placement",
+    },
+  },
+  {
+    path: "other/detail/:id",
+    name: "other-detail",
+    component: OthertDetail,
+    meta: {
+      Auth: true,
+      Key: [6.9],
+      Role: "placement",
+    },
+  }, {
+    path: "/relocation/detail/:id",
+    name: "relocationId",
+    component: relocationbyId,
+    meta: {
+      Auth: true,
+      Key: [6.9],
+      Role: "placement",
+    },
+  },
 ];

src/modules/06_retirement/components/DialogFooter.vue

@@ -0,0 +1,69 @@
+<script setup lang="ts">
+
+const props = defineProps({
+  editvisible: Boolean,
+  modalEdit: Boolean,
+  cancel: {
+    type: Function,
+    default: () => console.log("not function"),
+  },
+  edit: {
+    type: Function,
+    default: () => console.log("not function"),
+  },
+  save: {
+    type: Function,
+    default: () => console.log("not function"),
+  },
+  validate: {
+    type: Function,
+    default: () => console.log("not function"),
+  },
+});
+const emit = defineEmits([
+  "update:editvisible",
+  "update:next",
+  "update:previous",
+]);
+
+const updateEdit = (value: Boolean) => {
+  emit("update:editvisible", value);
+};
+// const cancel = async () => {
+//   props.cancel();
+// };
+const edit = async () => {
+  updateEdit(!props.editvisible);
+  props.edit();
+};
+const checkSave = () => {
+  props.validate();
+  props.save();
+
+};
+</script>
+<template>
+  <q-card-actions class="text-primary">
+    <q-space />
+    <q-btn 
+      v-if="!editvisible" 
+      outline
+      :disabled="editvisible" 
+      :color="editvisible ? 'grey-7' : 'primary'"
+      @click="edit" 
+      ><!-- icon="mdi-pencil-outline"
+      <q-tooltip>แก้ไขข้อมูล</q-tooltip> -->
+    </q-btn>
+    <div v-else>
+      <q-btn 
+        unelevated
+        label="บันทึก"
+        :disabled="!editvisible" 
+        :color="!editvisible ? 'grey-7' : 'public'" 
+        @click="checkSave"
+      >
+      </q-btn><!-- icon="mdi-content-save-outline">
+        <q-tooltip>บันทึก</q-tooltip> -->
+    </div>
+  </q-card-actions>
+</template>

src/modules/06_retirement/components/DialogHeader.vue

@@ -0,0 +1,29 @@
+<script setup lang="ts">
+const props = defineProps({
+  title: String,
+  close: {
+    type: Function,
+    default: () => console.log("not function"),
+  },
+});
+const close = async () => {
+  props.close();
+};
+</script>
+<template>
+  <q-toolbar class="q-py-md">
+    <q-toolbar-title class="header-text">{{ title }}</q-toolbar-title>
+    <q-btn icon="close" unelevated round dense @click="close" style="color: #ff8080; background-color: #ffdede" />
+  </q-toolbar>
+</template>
+
+<style scoped lang="scss">
+
+
+.header-text {
+  font-size: 18px;
+  font-weight: 600;
+  line-height: 26px;
+  color: #35373C;
+}
+</style>

src/modules/06_retirement/components/Discharged/dischargedMain.vue

@@ -0,0 +1,576 @@
+<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";
+
+import DialogFooter from "@/modules/06_retirement/components/DialogFooter.vue";
+import DialogHeader from "@/modules/06_retirement/components/DialogHeader.vue";
+
+import type { ResponseData } from "@/modules/06_retirement/interface/response/discharged";
+
+const selected = ref<ResponseData[]>([]);
+const checkSelected = computed(() => {
+  if (selected.value.length === 0) {
+    return true;
+  }
+});
+
+const $q = useQuasar();
+const router = useRouter();
+const mixin = useCounterMixin();
+const transferStore = useTransferDataStore();
+
+const { date2Thai, messageError, showLoader, hideLoader, success } = mixin;
+const { statusText } = transferStore;
+
+const modal = ref<boolean>(false);
+const visibleColumns = ref<string[]>([
+  "no",
+  "fullname",
+  "position",
+  "positionLevel",
+  "organizationPositionOld",
+  "organization",
+  "statustext",
+]);
+const visibleColumns2 = ref<string[]>([
+  "no",
+  "fullname",
+  "position",
+  "positionLevel",
+  "organizationPositionOld",
+  "organization",
+  "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<ResponseData[]>([]);
+const rows2 = ref<ResponseData[]>([]);
+const filters = ref<ResponseData[]>([]);
+const columns = 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: "organization",
+    align: "left",
+    label: "หน่วยงานที่ขอโอนไป",
+    sortable: true,
+    field: "organization",
+    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 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: "organization",
+    align: "left",
+    label: "หน่วยงานที่ขอโอนไป",
+    sortable: true,
+    field: "organization",
+    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 openModal = () => (modal.value = true);
+const closeModal = () => (modal.value = false);
+
+onMounted(async () => {
+  await getData();
+});
+
+const openModalOrder = () => {
+  openModal();
+  const row = filters.value.filter(
+    (r: ResponseData) =>
+      r.status == "WAITTING" || r.status == "PENDING" || r.status == "APPROVE"
+  );
+  rows2.value = row;
+};
+
+const getData = async () => {
+  showLoader();
+  await http
+    .get(config.API.retirementDischarge)
+    .then((res: any) => {
+      const data = res.data.result;
+      let list: ResponseData[] = [];
+      data.map((r: ResponseData) => {
+        list.push({
+          createdAt: new Date(),
+          date: new Date(),
+          firstName: r.firstName ?? "",
+          id: 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 ?? ""
+          }`,
+        });
+      });
+      rows.value = list;
+      filters.value = list;
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+};
+
+const clickDelete = (id: string) => {
+  $q.dialog({
+    title: "ยืนยันการลบข้อมูล",
+    message: "ต้องการลบข้อมูลนี้ใช่หรือไม่?",
+    cancel: {
+      flat: true,
+      color: "negative",
+    },
+    persistent: true,
+  })
+    .onOk(async () => {
+      showLoader();
+      await http
+        .delete(config.API.discharedByid(id))
+        .then((res) => {
+          success($q, "ลบข้อมูลสำเร็จ");
+          getData();
+        })
+        .catch((e) => {
+          messageError($q, e);
+        })
+        .finally(() => {
+          hideLoader();
+        });
+    })
+    .onCancel(() => {})
+    .onDismiss(() => {});
+};
+
+const saveOrder = async () => {
+  const id = selected.value.map((r) => r.id);
+  const body = {
+    id,
+  };
+
+  showLoader();
+  await http
+    .post(config.API.discharedReport, 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();
+    });
+};
+</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
+            @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 v-for="col in props.cols" :key="col.name" :props="props">
+                  <span class="text-weight-medium">{{ col.label }}</span>
+                </q-th>
+                <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="router.push(`/retirement/discharged/${props.row.id}`)"
+                >
+                  {{ props.rowIndex + 1 }}
+                </q-td>
+                <q-td
+                  key="fullname"
+                  :props="props"
+                  @click="router.push(`/retirement/discharged/${props.row.id}`)"
+                >
+                  {{ props.row.fullname }}
+                </q-td>
+                <q-td
+                  key="position"
+                  :props="props"
+                  @click="router.push(`/retirement/discharged/${props.row.id}`)"
+                >
+                  {{ props.row.position }}
+                </q-td>
+                <q-td
+                  key="positionLevel"
+                  :props="props"
+                  @click="router.push(`/retirement/discharged/${props.row.id}`)"
+                >
+                  {{ props.row.positionLevel }}
+                </q-td>
+                <q-td
+                  key="organizationPositionOld"
+                  :props="props"
+                  @click="router.push(`/retirement/discharged/${props.row.id}`)"
+                >
+                  <div class="table_ellipsis">
+                    {{ props.row.organizationPositionOld }}
+                    <!-- <q-tooltip>
+                      {{ props.row.organizationPositionOld }}
+                    </q-tooltip> -->
+                  </div>
+                </q-td>
+                <q-td
+                  key="organization"
+                  :props="props"
+                  @click="router.push(`/retirement/discharged/${props.row.id}`)"
+                >
+                  <div class="table_ellipsis">
+                    {{ props.row.organization }}
+                    <!-- <q-tooltip>
+                      {{ props.row.organization }}
+                    </q-tooltip> -->
+                  </div>
+                </q-td>
+                <q-td key="statustext" :props="props">
+                  {{ props.row.statustext }}
+                </q-td>
+                <q-td auto-width>
+                  <q-btn
+                    dense
+                    size="12px"
+                    flat
+                    round
+                    color="red"
+                    @click="clickDelete(props.row.id)"
+                    icon="mdi-delete"
+                  >
+                    <q-tooltip>ลบข้อมูล</q-tooltip>
+                  </q-btn>
+                </q-td>
+              </q-tr>
+            </template>
+          </d-table>
+        </div>
+      </div>
+    </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"
+          :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="saveOrder"
+          :disable="checkSelected"
+          color="public"
+        />
+      </q-card-actions>
+    </q-card>
+  </q-dialog>
+</template>
+<style scoped lang="scss"></style>

src/modules/06_retirement/components/Discharged/dischargedRegistry.vue

@@ -0,0 +1,443 @@
+<template>
+  <div class="toptitle text-dark col-12 row items-center">
+    <q-btn
+      icon="mdi-arrow-left"
+      unelevated
+      round
+      dense
+      flat
+      color="primary"
+      class="q-mr-sm"
+      @click="router.go(-1)"
+    />
+    รายละเอียดการปลดออกของ {{ 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">
+        {{ responseData.fullname }}
+      </div>
+      <q-space />
+      <q-btn
+        outline
+        color="blue"
+        dense
+        icon-right="mdi-open-in-new"
+        class="q-px-sm"
+        label="ดูข้อมูลทะเบียนประวัติ"
+        @click="router.push(`/registry/${personId}`)"
+      />
+    </div>
+    <div class="col-12"><q-separator /></div>
+    <div class="row col-12 q-pa-md">
+      <div class="col-12 row bg-white q-col-gutter-md">
+        <div class="col-xs-3 col-sm-2 col-md-1 row">
+          <q-img
+            :src="responseData.avataPath"
+            v-if="responseData.avataPath !== ''"
+          />
+          <q-img src="@/assets/avatar_user.jpg" v-else />
+        </div>
+        <div class="col-xs-6 col-sm-3 row items-center">
+          <div class="col-12 q-pl-md">
+            <div class="col-12 text-top">ตำแหน่งในสายงาน</div>
+            <div class="col-12 text-detail">
+              {{ responseData.positionTypeOld }}
+            </div>
+          </div>
+        </div>
+        <div class="col-xs-6 col-sm-3 row items-center">
+          <div class="col-12">
+            <div class="col-12 text-top">ระดับ</div>
+            <div class="col-12 text-detail">
+              {{ responseData.positionLevelOld }}
+            </div>
+          </div>
+        </div>
+        <div class="col-xs-6 col-sm-3 row items-center">
+          <div class="col-12">
+            <div class="col-12 text-top">สังกัด</div>
+            <div class="col-12 text-detail">
+              {{ responseData.organizationPositionOld }}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </q-card>
+
+  <q-card bordered class="row col-12 text-dark q-mt-sm">
+    <div class="bg-grey-1 q-pa-sm col-12 row items-center text-primary">
+      <div class="q-pl-sm text-weight-bold text-dark">ข้อมูลการปลดออก</div>
+      <q-space />
+      <q-btn
+        v-if="!roleAdmin"
+        outline
+        color="primary"
+        dense
+        icon-right="arrow_forward"
+        class="q-px-sm"
+        label="ส่งคำร้องไปยัง สกจ."
+        @click="confirmMessage"
+      />
+      <q-btn
+        v-else
+        outline
+        color="primary"
+        dense
+        icon-right="download"
+        class="q-px-sm"
+        label="ดาวน์โหลด"
+      />
+    </div>
+    <div class="col-12"><q-separator /></div>
+    <div class="row col-12 q-pa-md">
+      <div class="col-12 row bg-white q-col-gutter-md">
+        <div class="col-xs-6 col-sm-3 row items-center">
+          <div class="col-12">
+            <div class="col-12 text-top">หน่วยงานที่ปลดออกไป</div>
+            <div class="col-12 text-detail">
+              {{ responseData.organization }}
+            </div>
+          </div>
+        </div>
+        <div class="col-xs-6 col-sm-3 row items-center">
+          <div class="col-12">
+            <div class="col-12 text-top">เหตุผลที่ปลดออก</div>
+            <div class="col-12 text-detail">
+              {{ responseData.reason }}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </q-card>
+
+  <q-card bordered class="row col-12 text-dark q-mt-sm">
+    <div class="bg-grey-1 q-pa-sm col-12 row items-center text-primary">
+      <div class="q-pl-sm text-weight-bold text-dark">เอกสารเพิ่มเติม</div>
+    </div>
+    <div class="col-12"><q-separator /></div>
+    <div class="col-12">
+      <d-table
+        :rows="rows"
+        :columns="columns"
+        row-key="fileName"
+        hide-header
+        hide-bottom
+      >
+        <template v-slot:body="props">
+          <q-tr :props="props" class="cursor-pointer">
+            <q-td key="no" :props="props">
+              {{ props.rowIndex + 1 }}
+            </q-td>
+            <q-td key="fileName" :props="props">
+              {{ props.row.fileName }}
+            </q-td>
+            <q-td key="btnMicrosoft" :props="props">
+              <q-btn flat dense round color="red" icon="picture_as_pdf">
+                <q-tooltip>ไฟล์ PDF</q-tooltip>
+              </q-btn>
+              <q-btn flat dense round color="blue" icon="mdi-file-word">
+                <q-tooltip>ไฟล์ WORD</q-tooltip>
+              </q-btn>
+            </q-td>
+          </q-tr>
+        </template>
+      </d-table>
+    </div>
+  </q-card>
+
+  <q-card bordered class="row col-12 text-dark q-mt-sm">
+    <div class="bg-grey-1 q-pa-sm col-12 row items-center text-primary">
+      <div class="q-pl-sm text-weight-bold text-dark">
+        แก้ไขข้อมูลเพื่อลงบัญชีแนบท้าย
+      </div>
+      <q-space />
+      <div class="q-gutter-sm" v-if="!edit">
+        <q-btn
+          outline
+          color="primary"
+          dense
+          icon-right="mdi-file-edit-outline"
+          class="q-px-sm"
+          label="แก้ไข"
+          style="width: 80px"
+          @click="edit = !edit"
+        />
+      </div>
+      <div class="q-gutter-sm" v-else>
+        <q-btn
+          outline
+          color="public"
+          dense
+          class="q-px-sm"
+          label="บันทึก"
+          style="width: 80px"
+          @click="conditionSave"
+        />
+        <q-btn
+          outline
+          color="red"
+          dense
+          class="q-px-sm"
+          label="ยกเลิก"
+          style="width: 80px"
+          @click="edit = !edit"
+        />
+      </div>
+    </div>
+    <div class="col-12"><q-separator /></div>
+  </q-card>
+</template>
+<script setup lang="ts">
+import { onMounted, ref } from "vue";
+import { useQuasar } from "quasar";
+import { useRoute, useRouter } from "vue-router";
+import { useCounterMixin } from "@/stores/mixin";
+
+import http from "@/plugins/http";
+import config from "@/app.config";
+import keycloak from "@/plugins/keycloak";
+
+import type { QTableProps, QForm } from "quasar";
+import type {
+  TypeFile,
+  ResponseDataDetail,
+} from "@/modules/06_retirement/interface/response/discharged";
+
+const $q = useQuasar();
+const route = useRoute();
+const router = useRouter();
+const mixin = useCounterMixin();
+
+const personId = route.params.id;
+const {
+  date2Thai,
+  dialogMessage,
+  messageError,
+  showLoader,
+  hideLoader,
+  success,
+} = mixin;
+
+const myForm = ref<QForm | null>(null);
+const roleAdmin = ref<boolean>(false);
+const edit = ref<boolean>(false);
+
+const organizationPositionOld = ref<string>("");
+const positionTypeOld = ref<string>("");
+const positionLevelOld = ref<string>("");
+const posNo = ref<string>("");
+const salary = ref<number>(0);
+const organization = ref<string>("");
+const date = ref<Date | null>(null);
+const reason = ref<string>("");
+
+const responseData = ref<ResponseDataDetail>({
+  avataPath: "",
+  createdAt: new Date(),
+  date: new Date(),
+  id: "",
+  organization: "",
+  organizationPositionOld: "",
+  positionLevelOld: "",
+  positionNumberOld: "",
+  positionTypeOld: "",
+  reason: "",
+  salary: 0,
+  status: "",
+  fullname: "",
+});
+
+const rows = ref<TypeFile[]>([]);
+const columns = ref<QTableProps["columns"]>([
+  {
+    name: "no",
+    align: "left",
+    label: "ลำดับ",
+    sortable: true,
+    field: "no",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "fileName",
+    align: "left",
+    label: "ชื่อไฟล์",
+    sortable: true,
+    field: "fileName",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "btnMicrosoft",
+    align: "right",
+    label: "ปุ่ม",
+    sortable: true,
+    field: "btnMicrosoft",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+]);
+
+onMounted(async () => {
+  if (keycloak.tokenParsed != null) {
+    roleAdmin.value = await keycloak.tokenParsed.role.includes("placement1");
+    console.log("roleAdmin===>", roleAdmin.value);
+  }
+  await getData();
+});
+
+const getData = async () => {
+  showLoader();
+  await http
+    .get(config.API.discharedByid(personId.toString()))
+    .then((res: any) => {
+      const data = res.data.result;
+      //   console.log(data);
+      let list: TypeFile[] = [];
+      if (data.docs.length > 0) {
+        data.docs.map((doc: TypeFile) => {
+          list.push({
+            pathName: doc.pathName ?? "",
+            fileName: doc.fileName ?? "",
+          });
+        });
+      }
+      rows.value = list;
+      responseData.value.createdAt = data.createdAt;
+      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.positionLevelOld = data.positionLevelOld ?? "";
+      responseData.value.positionNumberOld = data.positionNumberOld ?? "";
+      responseData.value.positionTypeOld = data.positionTypeOld ?? "";
+      responseData.value.reason = data.reason ?? "";
+      responseData.value.salary = data.salary !== null ? data.salary : 0;
+      responseData.value.status = data.status ?? "";
+      responseData.value.avataPath = data.avataPath ?? "";
+      responseData.value.fullname = `${data.prefix ?? "-"} ${
+        data.firstName ?? "-"
+      } ${data.lastName ?? "-"}`;
+
+      organizationPositionOld.value = data.organizationPositionOld ?? "";
+      positionTypeOld.value = data.positionTypeOld ?? "";
+      positionLevelOld.value = data.positionLevelOld ?? "";
+      posNo.value = data.posNo ?? "";
+      salary.value = data.salary ?? "";
+      organization.value = data.organization ?? "";
+      date.value = data.date !== null ? new Date(data.date) : null;
+      reason.value = data.reason ?? "";
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+};
+
+const confirmMessage = async () => {
+  dialogMessage(
+    $q,
+    "ต้องการยืนยันส่งคำร้องไปยัง สกจ หรือไม่?",
+    "ข้อมูลจะถูกนำส่งคำร้องไปยัง สกจ ทันที",
+    "mdi-help-circle-outline",
+    "ยืนยัน",
+    "primary",
+    () => sendConfirm(),
+    undefined
+  );
+};
+
+const sendConfirm = async () => {
+  showLoader();
+  await http;
+  //   .get(config.API.transferConfirmId(personId.toString()))
+  //   .then((res: any) => {
+  //     //   const data = res.data.result;
+  //     //   console.log(data);
+  //     success($q, "ส่งคำร้องข้อมูลสำเร็จ");
+  //   })
+  //   .catch((e) => {
+  //     messageError($q, e);
+  //   })
+  //   .finally(async () => {
+  //     await getData();
+  //     hideLoader();
+  //   });
+};
+
+const conditionSave = async () => {
+  if (myForm.value !== null) {
+    myForm.value.validate().then((success) => {
+      if (success) {
+        dialogMessage(
+          $q,
+          "ต้องการแก้ไขข้อมูลหรือไม่?",
+          "แก้ไขข้อมูลเพื่อลงบัญชีแนบท้าย",
+          "mdi-help-circle-outline",
+          "ตกลง",
+          "public",
+          async () => await saveData(),
+          undefined
+        );
+      }
+    });
+  }
+};
+
+const saveData = async () => {
+  const body = {
+    organization: organization.value,
+    reason: reason.value,
+    organizationPositionOld: organizationPositionOld.value,
+    date: date.value,
+    positionTypeOld: positionTypeOld.value,
+    positionLevelOld: positionLevelOld.value,
+    positionNumberOld: posNo.value,
+    amountOld: salary.value,
+  };
+  showLoader();
+  await http
+    .put(config.API.discharedByid(personId.toString()), body)
+    .then((res: any) => {
+      //   const data = res.data.result;
+      //   console.log(data);
+      success($q, "แก้ไขข้อมูลเพื่อลงบัญชีแนบท้ายสำเร็จ");
+      edit.value = false;
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(async () => {
+      await getData();
+      hideLoader();
+    });
+};
+
+const getClass = (val: boolean) => {
+  return {
+    "full-width inputgreen cursor-pointer": val,
+    "full-width cursor-pointer": !val,
+  };
+};
+</script>
+<style lang="scss" scope>
+.q-img {
+  border-radius: 5px;
+  height: 70px;
+}
+.text-top {
+  color: gray;
+  font-weight: 400;
+  padding-bottom: 3px;
+}
+.text-detail {
+  font-weight: 500;
+}
+</style>

src/modules/06_retirement/components/DismissOrder/AddOrder.vue

@@ -1,91 +0,0 @@
-<template>
-  <div class="toptitle text-dark col-12 row items-center">
-    <q-btn
-      icon="mdi-arrow-left"
-      unelevated
-      round
-      dense
-      flat
-      color="primary"
-      class="q-mr-sm"
-      @click="router.go(-1)"
-    />
-    เพิ่ม คำสั่งให้ออก ปลดออก ไล่ออก
-  </div>
-  <q-card flat bordered class="col-12 q-my-sm q-mt-sm">
-    <q-stepper
-      v-model="step"
-      ref="stepper"
-      color="primary"
-      animated
-      class="step"
-      header-class="bg-grey-1"
-    >
-      <q-step
-        :name="1"
-        title="รายละเอียดการออกคำสั่ง"
-        prefix="1"
-        :done="step > 1"
-        :header-nav="step > 1"
-      />
-      <q-step
-        :name="2"
-        title="เลือกรายชื่อส่งสำเนาคำสั่ง"
-        prefix="2"
-        :done="step > 2"
-        :header-nav="step > 2"
-      />
-      <q-step
-        :name="3"
-        title="รายละเอียดคำสั่งและแนบท้าย"
-        prefix="3"
-        :header-nav="step > 3"
-      />
-      <template v-slot:message>
-        <step01 v-if="step === 1" :next="nextStep" :previous="previousStep" />
-        <step02 v-if="step === 2" :next="nextStep" :previous="previousStep" />
-        <step03 v-if="step === 3" :next="nextStep" :previous="previousStep" />
-      </template>
-    </q-stepper>
-  </q-card>
-</template>
-<script setup lang="ts">
-import { useRouter } from "vue-router";
-import { ref, defineAsyncComponent } from "vue";
-import type { QStepper } from "quasar";
-
-const step01 = defineAsyncComponent(
-  () => import("@/modules/06_retirement/components/DismissOrder/step01.vue")
-);
-const step02 = defineAsyncComponent(
-  () => import("@/modules/06_retirement/components/DismissOrder/step02.vue")
-);
-const step03 = defineAsyncComponent(
-  () => import("@/modules/06_retirement/components/DismissOrder/step03.vue")
-);
-
-const router = useRouter();
-const step = ref<number>(1);
-const stepper = ref<QStepper>();
-
-const nextStep = () => {
-  stepper.value!.next();
-};
-
-const previousStep = () => {
-  stepper.value!.previous();
-};
-</script>
-<style>
-.q-stepper--horizontal .q-stepper__step-inner {
-  padding: 0px;
-}
-.step .q-stepper__tab--done .q-stepper__title,
-.step .q-stepper__tab--active .q-stepper__title {
-  color: #35473c !important;
-  font-weight: 500;
-}
-.step .q-stepper__header--standard-labels .q-stepper__tab {
-  min-height: 60px;
-}
-</style>

src/modules/06_retirement/components/DismissOrder/outRegistry.vue

@@ -0,0 +1,443 @@
+<template>
+  <div class="toptitle text-dark col-12 row items-center">
+    <q-btn
+      icon="mdi-arrow-left"
+      unelevated
+      round
+      dense
+      flat
+      color="primary"
+      class="q-mr-sm"
+      @click="router.go(-1)"
+    />
+    รายละเอียดการให้ออกของ {{ 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">
+        {{ responseData.fullname }}
+      </div>
+      <q-space />
+      <q-btn
+        outline
+        color="blue"
+        dense
+        icon-right="mdi-open-in-new"
+        class="q-px-sm"
+        label="ดูข้อมูลทะเบียนประวัติ"
+        @click="router.push(`/registry/${personId}`)"
+      />
+    </div>
+    <div class="col-12"><q-separator /></div>
+    <div class="row col-12 q-pa-md">
+      <div class="col-12 row bg-white q-col-gutter-md">
+        <div class="col-xs-3 col-sm-2 col-md-1 row">
+          <q-img
+            :src="responseData.avataPath"
+            v-if="responseData.avataPath !== ''"
+          />
+          <q-img src="@/assets/avatar_user.jpg" v-else />
+        </div>
+        <div class="col-xs-6 col-sm-3 row items-center">
+          <div class="col-12 q-pl-md">
+            <div class="col-12 text-top">ตำแหน่งในสายงาน</div>
+            <div class="col-12 text-detail">
+              {{ responseData.positionTypeOld }}
+            </div>
+          </div>
+        </div>
+        <div class="col-xs-6 col-sm-3 row items-center">
+          <div class="col-12">
+            <div class="col-12 text-top">ระดับ</div>
+            <div class="col-12 text-detail">
+              {{ responseData.positionLevelOld }}
+            </div>
+          </div>
+        </div>
+        <div class="col-xs-6 col-sm-3 row items-center">
+          <div class="col-12">
+            <div class="col-12 text-top">สังกัด</div>
+            <div class="col-12 text-detail">
+              {{ responseData.organizationPositionOld }}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </q-card>
+
+  <q-card bordered class="row col-12 text-dark q-mt-sm">
+    <div class="bg-grey-1 q-pa-sm col-12 row items-center text-primary">
+      <div class="q-pl-sm text-weight-bold text-dark">ข้อมูลการให้ออก</div>
+      <q-space />
+      <q-btn
+        v-if="!roleAdmin"
+        outline
+        color="primary"
+        dense
+        icon-right="arrow_forward"
+        class="q-px-sm"
+        label="ส่งคำร้องไปยัง สกจ."
+        @click="confirmMessage"
+      />
+      <q-btn
+        v-else
+        outline
+        color="primary"
+        dense
+        icon-right="download"
+        class="q-px-sm"
+        label="ดาวน์โหลด"
+      />
+    </div>
+    <div class="col-12"><q-separator /></div>
+    <div class="row col-12 q-pa-md">
+      <div class="col-12 row bg-white q-col-gutter-md">
+        <div class="col-xs-6 col-sm-3 row items-center">
+          <div class="col-12">
+            <div class="col-12 text-top">หน่วยงานที่ให้ออก</div>
+            <div class="col-12 text-detail">
+              {{ responseData.organization }}
+            </div>
+          </div>
+        </div>
+        <div class="col-xs-6 col-sm-3 row items-center">
+          <div class="col-12">
+            <div class="col-12 text-top">เหตุผลที่ให้ออก</div>
+            <div class="col-12 text-detail">
+              {{ responseData.reason }}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </q-card>
+
+  <q-card bordered class="row col-12 text-dark q-mt-sm">
+    <div class="bg-grey-1 q-pa-sm col-12 row items-center text-primary">
+      <div class="q-pl-sm text-weight-bold text-dark">เอกสารเพิ่มเติม</div>
+    </div>
+    <div class="col-12"><q-separator /></div>
+    <div class="col-12">
+      <d-table
+        :rows="rows"
+        :columns="columns"
+        row-key="fileName"
+        hide-header
+        hide-bottom
+      >
+        <template v-slot:body="props">
+          <q-tr :props="props" class="cursor-pointer">
+            <q-td key="no" :props="props">
+              {{ props.rowIndex + 1 }}
+            </q-td>
+            <q-td key="fileName" :props="props">
+              {{ props.row.fileName }}
+            </q-td>
+            <q-td key="btnMicrosoft" :props="props">
+              <q-btn flat dense round color="red" icon="picture_as_pdf">
+                <q-tooltip>ไฟล์ PDF</q-tooltip>
+              </q-btn>
+              <q-btn flat dense round color="blue" icon="mdi-file-word">
+                <q-tooltip>ไฟล์ WORD</q-tooltip>
+              </q-btn>
+            </q-td>
+          </q-tr>
+        </template>
+      </d-table>
+    </div>
+  </q-card>
+
+  <q-card bordered class="row col-12 text-dark q-mt-sm">
+    <div class="bg-grey-1 q-pa-sm col-12 row items-center text-primary">
+      <div class="q-pl-sm text-weight-bold text-dark">
+        แก้ไขข้อมูลเพื่อลงบัญชีแนบท้าย
+      </div>
+      <q-space />
+      <div class="q-gutter-sm" v-if="!edit">
+        <q-btn
+          outline
+          color="primary"
+          dense
+          icon-right="mdi-file-edit-outline"
+          class="q-px-sm"
+          label="แก้ไข"
+          style="width: 80px"
+          @click="edit = !edit"
+        />
+      </div>
+      <div class="q-gutter-sm" v-else>
+        <q-btn
+          outline
+          color="public"
+          dense
+          class="q-px-sm"
+          label="บันทึก"
+          style="width: 80px"
+          @click="conditionSave"
+        />
+        <q-btn
+          outline
+          color="red"
+          dense
+          class="q-px-sm"
+          label="ยกเลิก"
+          style="width: 80px"
+          @click="edit = !edit"
+        />
+      </div>
+    </div>
+    <div class="col-12"><q-separator /></div>
+  </q-card>
+</template>
+<script setup lang="ts">
+import { onMounted, ref } from "vue";
+import { useQuasar } from "quasar";
+import { useRoute, useRouter } from "vue-router";
+import { useCounterMixin } from "@/stores/mixin";
+
+import http from "@/plugins/http";
+import config from "@/app.config";
+import keycloak from "@/plugins/keycloak";
+
+import type { QTableProps, QForm } from "quasar";
+import type {
+  TypeFile,
+  ResponseDataDetail,
+} from "@/modules/06_retirement/interface/response/expulsion";
+
+const $q = useQuasar();
+const route = useRoute();
+const router = useRouter();
+const mixin = useCounterMixin();
+
+const personId = route.params.id;
+const {
+  date2Thai,
+  dialogMessage,
+  messageError,
+  showLoader,
+  hideLoader,
+  success,
+} = mixin;
+
+const myForm = ref<QForm | null>(null);
+const roleAdmin = ref<boolean>(false);
+const edit = ref<boolean>(false);
+
+const organizationPositionOld = ref<string>("");
+const positionTypeOld = ref<string>("");
+const positionLevelOld = ref<string>("");
+const posNo = ref<string>("");
+const salary = ref<number>(0);
+const organization = ref<string>("");
+const date = ref<Date | null>(null);
+const reason = ref<string>("");
+
+const responseData = ref<ResponseDataDetail>({
+  avataPath: "",
+  createdAt: new Date(),
+  date: new Date(),
+  id: "",
+  organization: "",
+  organizationPositionOld: "",
+  positionLevelOld: "",
+  positionNumberOld: "",
+  positionTypeOld: "",
+  reason: "",
+  salary: 0,
+  status: "",
+  fullname: "",
+});
+
+const rows = ref<TypeFile[]>([]);
+const columns = ref<QTableProps["columns"]>([
+  {
+    name: "no",
+    align: "left",
+    label: "ลำดับ",
+    sortable: true,
+    field: "no",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "fileName",
+    align: "left",
+    label: "ชื่อไฟล์",
+    sortable: true,
+    field: "fileName",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "btnMicrosoft",
+    align: "right",
+    label: "ปุ่ม",
+    sortable: true,
+    field: "btnMicrosoft",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+]);
+
+onMounted(async () => {
+  if (keycloak.tokenParsed != null) {
+    roleAdmin.value = await keycloak.tokenParsed.role.includes("placement1");
+    console.log("roleAdmin===>", roleAdmin.value);
+  }
+  await getData();
+});
+
+const getData = async () => {
+  showLoader();
+  await http
+    .get(config.API.outByid(personId.toString()))
+    .then((res: any) => {
+      const data = res.data.result;
+      //   console.log(data);
+      let list: TypeFile[] = [];
+      if (data.docs.length > 0) {
+        data.docs.map((doc: TypeFile) => {
+          list.push({
+            pathName: doc.pathName ?? "",
+            fileName: doc.fileName ?? "",
+          });
+        });
+      }
+      rows.value = list;
+      responseData.value.createdAt = data.createdAt;
+      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.positionLevelOld = data.positionLevelOld ?? "";
+      responseData.value.positionNumberOld = data.positionNumberOld ?? "";
+      responseData.value.positionTypeOld = data.positionTypeOld ?? "";
+      responseData.value.reason = data.reason ?? "";
+      responseData.value.salary = data.salary !== null ? data.salary : 0;
+      responseData.value.status = data.status ?? "";
+      responseData.value.avataPath = data.avataPath ?? "";
+      responseData.value.fullname = `${data.prefix ?? "-"} ${
+        data.firstName ?? "-"
+      } ${data.lastName ?? "-"}`;
+
+      organizationPositionOld.value = data.organizationPositionOld ?? "";
+      positionTypeOld.value = data.positionTypeOld ?? "";
+      positionLevelOld.value = data.positionLevelOld ?? "";
+      posNo.value = data.posNo ?? "";
+      salary.value = data.salary ?? "";
+      organization.value = data.organization ?? "";
+      date.value = data.date !== null ? new Date(data.date) : null;
+      reason.value = data.reason ?? "";
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+};
+
+const confirmMessage = async () => {
+  dialogMessage(
+    $q,
+    "ต้องการยืนยันส่งคำร้องไปยัง สกจ หรือไม่?",
+    "ข้อมูลจะถูกนำส่งคำร้องไปยัง สกจ ทันที",
+    "mdi-help-circle-outline",
+    "ยืนยัน",
+    "primary",
+    () => sendConfirm(),
+    undefined
+  );
+};
+
+const sendConfirm = async () => {
+  showLoader();
+  await http;
+  //   .get(config.API.transferConfirmId(personId.toString()))
+  //   .then((res: any) => {
+  //     //   const data = res.data.result;
+  //     //   console.log(data);
+  //     success($q, "ส่งคำร้องข้อมูลสำเร็จ");
+  //   })
+  //   .catch((e) => {
+  //     messageError($q, e);
+  //   })
+  //   .finally(async () => {
+  //     await getData();
+  //     hideLoader();
+  //   });
+};
+
+const conditionSave = async () => {
+  if (myForm.value !== null) {
+    myForm.value.validate().then((success) => {
+      if (success) {
+        dialogMessage(
+          $q,
+          "ต้องการแก้ไขข้อมูลหรือไม่?",
+          "แก้ไขข้อมูลเพื่อลงบัญชีแนบท้าย",
+          "mdi-help-circle-outline",
+          "ตกลง",
+          "public",
+          async () => await saveData(),
+          undefined
+        );
+      }
+    });
+  }
+};
+
+const saveData = async () => {
+  const body = {
+    organization: organization.value,
+    reason: reason.value,
+    organizationPositionOld: organizationPositionOld.value,
+    date: date.value,
+    positionTypeOld: positionTypeOld.value,
+    positionLevelOld: positionLevelOld.value,
+    positionNumberOld: posNo.value,
+    amountOld: salary.value,
+  };
+  showLoader();
+  await http
+    .put(config.API.outByid(personId.toString()), body)
+    .then((res: any) => {
+      //   const data = res.data.result;
+      //   console.log(data);
+      success($q, "แก้ไขข้อมูลเพื่อลงบัญชีแนบท้ายสำเร็จ");
+      edit.value = false;
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(async () => {
+      await getData();
+      hideLoader();
+    });
+};
+
+const getClass = (val: boolean) => {
+  return {
+    "full-width inputgreen cursor-pointer": val,
+    "full-width cursor-pointer": !val,
+  };
+};
+</script>
+<style lang="scss" scope>
+.q-img {
+  border-radius: 5px;
+  height: 70px;
+}
+.text-top {
+  color: gray;
+  font-weight: 400;
+  padding-bottom: 3px;
+}
+.text-detail {
+  font-weight: 500;
+}
+</style>

src/modules/06_retirement/components/DismissOrder/step01.vue

@@ -1,353 +0,0 @@
-<template>
-  <div style="max-height: 68vh; overflow-y: scroll">
-    <q-form ref="myForm" class="q-pa-md">
-      <div class="row col-12 q-col-gutter-x-lg q-col-gutter-y-md">
-        <div class="col-xs-12 col-md-6">
-          <selector
-            :class="getClass(true)"
-            outlined
-            dense
-            lazy-rules
-            v-model="typeOrder"
-            :rules="[(val:string) => !!val || `${'กรุณาเลือกประเภทคำสั่ง'}`]"
-            hide-bottom-space
-            :label="`${'ประเภทคำสั่ง'}`"
-            @update:modelValue="clickEditRow"
-            emit-value
-            map-options
-            option-label="name"
-            :options="typeOrderOption"
-            option-value="id"
-            use-input
-            input-debounce="0"
-            @filter="(inputValue:string,
-                      doneFn:Function) => filterSelector(inputValue, doneFn,'typeOrderOption'
-                      ) "
-          />
-        </div>
-
-        <div class="col-xs-12 col-md-6">
-          <q-input
-            :class="getClass(true)"
-            outlined
-            dense
-            lazy-rules
-            v-model="nameOrder"
-            :rules="[(val) => !!val || `${'กรุณากรอกคำสั่งเรื่อง'}`]"
-            :label="`${'คำสั่งเรื่อง'}`"
-            @update:modelValue="clickEditRow"
-            hide-bottom-space
-          />
-        </div>
-
-        <div class="row col-xs-7 col-md-3 q-col-gutter-x-xs">
-          <div class="col-6">
-            <q-input
-              :class="getClass(true)"
-              outlined
-              dense
-              lazy-rules
-              v-model="command"
-              :rules="[(val) => !!val || `${'กรุณากรอกคำสั่ง'}`]"
-              :label="`${'คำสั่ง'}`"
-              @update:modelValue="clickEditRow"
-              hide-bottom-space
-              type="number"
-            />
-          </div>
-          <label class="col-1 flex justify-center items-center text-bold"
-            >/</label
-          >
-          <div class="col-5">
-            <datepicker
-              v-model="dateYear"
-              :locale="'th'"
-              autoApply
-              year-picker
-              :enableTimePicker="false"
-              @update:modelValue="clickEditRow"
-            >
-              <template #year="{ year }">{{ year + 543 }}</template>
-              <template #year-overlay-value="{ value }">{{
-                parseInt(value + 543)
-              }}</template>
-              <template #trigger>
-                <q-input
-                  :model-value="dateYear + 543"
-                  :rules="[(val) => !!val || `${'กรุณากรอก พ.ศ.'}`]"
-                  :label="`${'พ.ศ.'}`"
-                  dense
-                  outlined
-                >
-                </q-input>
-              </template>
-            </datepicker>
-          </div>
-        </div>
-        <div class="col-xs-5 col-md-3">
-          <datepicker
-            menu-class-name="modalfix"
-            v-model="dateCommand"
-            :locale="'th'"
-            autoApply
-            borderless
-            :enableTimePicker="false"
-            week-start="0"
-          >
-            <template #year="{ year }">
-              {{ year + 543 }}
-            </template>
-            <template #year-overlay-value="{ value }">
-              {{ parseInt(value + 543) }}
-            </template>
-            <template #trigger>
-              <q-input
-                outlined
-                dense
-                class="full-width datepicker"
-                :model-value="
-                  dateCommand != null ? date2Thai(dateCommand) : null
-                "
-                :label="`${'วันที่มีผลออกคำสั่ง'}`"
-                :rules="[
-                  (val) => !!val || `${'กรุณาเลือกวันที่มีผลออกคำสั่ง'}`,
-                ]"
-              >
-                <template v-slot:prepend>
-                  <q-icon
-                    name="event"
-                    class="cursor-pointer"
-                    style="color: var(--q-primary)"
-                  >
-                  </q-icon>
-                </template>
-              </q-input>
-            </template>
-          </datepicker>
-        </div>
-
-        <div class="col-xs-12 col-md-6">
-          <selector
-            :class="getClass(true)"
-            outlined
-            dense
-            lazy-rules
-            v-model="byOrder"
-            :rules="[(val:string) => !!val || `${'กรุณาเลือกคำสั่งโดย'}`]"
-            hide-bottom-space
-            :label="`${'คำสั่งโดย'}`"
-            @update:modelValue="clickEditRow"
-            emit-value
-            map-options
-            option-label="name"
-            :options="byOrderOption"
-            option-value="id"
-            use-input
-            input-debounce="0"
-            @filter="(inputValue:string,
-                      doneFn:Function) => filterSelector(inputValue, doneFn,'byOrderOption'
-                      ) "
-          />
-        </div>
-        <div class="col-xs-12 col-md-6">
-          <!-- :readonly="!edit"
-                :borderless="!edit" -->
-          <q-input
-            :class="getClass(true)"
-            outlined
-            dense
-            lazy-rules
-            v-model="nameCommand"
-            :rules="[(val) => !!val || `${'กรุณากรอกผู้มีอำนาจลงนาม'}`]"
-            :label="`${'ผู้มีอำนาจลงนาม'}`"
-            @update:modelValue="clickEditRow"
-            hide-bottom-space
-          />
-        </div>
-        <div class="col-xs-12 col-md-6">
-          <!-- :readonly="!edit"
-                :borderless="!edit" -->
-          <q-input
-            :class="getClass(true)"
-            outlined
-            dense
-            lazy-rules
-            v-model="positionCommand"
-            :rules="[(val) => !!val || `${'กรุณากรอกตำแหน่งผู้มีอำนาจลงนาม'}`]"
-            :label="`${'ตำแหน่งผู้มีอำนาจลงนาม'}`"
-            @update:modelValue="clickEditRow"
-            hide-bottom-space
-          />
-        </div>
-        <div class="col-12">
-          <q-separator />
-        </div>
-        <div class="col-xs-12 col-md-6">
-          <selector
-            :class="getClass(true)"
-            outlined
-            dense
-            lazy-rules
-            v-model="test"
-            :rules="[(val:string) => !!val || `${'กรุณาเลือกรอบการสอบ'}`]"
-            hide-bottom-space
-            :label="`${'ชื่อ-นามสกุล'}`"
-            @update:modelValue="clickEditRow"
-            emit-value
-            map-options
-            option-label="name"
-            :options="testOption"
-            option-value="id"
-            use-input
-            input-debounce="0"
-            @filter="(inputValue:string,
-                      doneFn:Function) => filterSelector(inputValue, doneFn,'testOption'
-                      ) "
-          />
-        </div>
-      </div>
-    </q-form>
-  </div>
-  <q-separator />
-  <div class="flex justify-end q-pa-sm q-gutter-sm">
-    <q-btn unelevated label="บันทึก" color="public" @click="submit"> </q-btn>
-  </div>
-</template>
-<script setup lang="ts">
-import { ref } from "vue";
-import type { DataOption } from "@/modules/05_placement/interface/index/Main";
-import { useCounterMixin } from "@/stores/mixin";
-import type { QForm } from "quasar";
-
-const mixin = useCounterMixin();
-const { date2Thai } = mixin;
-
-const props = defineProps({
-  next: {
-    type: Function,
-    default: () => console.log("not function"),
-  },
-  previous: {
-    type: Function,
-    default: () => console.log("not function"),
-  },
-});
-const next = () => props.next();
-const previous = () => props.previous();
-
-const myForm = ref<QForm>();
-
-const editRow = ref<boolean>(false);
-
-const nameOrder = ref<string>("ปลดออก นายก");
-const nameCommand = ref<string>("");
-const positionCommand = ref<string>("");
-const dateYear = ref<number>(new Date().getFullYear());
-const command = ref<string>("");
-const dateCommand = ref<Date>(new Date());
-// const dateRegister = ref<Date>(new Date());
-// const dateAnnounce = ref<Date>(new Date());
-
-const typeOrder = ref<string>("ปลดออก");
-const typeOrderOption = ref<DataOption[]>([]);
-const typeOrderOptionFilter = ref<DataOption[]>([]);
-
-const byOrder = ref<string>("");
-const byOrderOption = ref<DataOption[]>([]);
-const byOrderOptionFilter = ref<DataOption[]>([]);
-
-// const register = ref<string>("");
-const registerOption = ref<DataOption[]>([]);
-const registerOptionFilter = ref<DataOption[]>([]);
-
-// const announce = ref<string>("");
-const announceOption = ref<DataOption[]>([]);
-const announceOptionFilter = ref<DataOption[]>([]);
-
-// const position = ref<string>("");
-const positionOption = ref<DataOption[]>([]);
-const positionOptionFilter = ref<DataOption[]>([]);
-
-const test = ref<string>("นายก ข");
-const testOption = ref<DataOption[]>([]);
-const testOptionFilter = ref<DataOption[]>([]);
-
-const clickEditRow = () => (editRow.value = true);
-
-const filterSelector = (val: any, update: Function, filtername: string) => {
-  switch (filtername) {
-    case "typeOrderOption":
-      update(() => {
-        typeOrderOption.value = typeOrderOptionFilter.value.filter(
-          (v: DataOption) => v.name!.indexOf(val) > -1
-        );
-      });
-      break;
-    case "byOrderOption":
-      update(() => {
-        byOrderOption.value = byOrderOptionFilter.value.filter(
-          (v: DataOption) => v.name!.indexOf(val) > -1
-        );
-      });
-      break;
-
-    case "registerOption":
-      update(() => {
-        registerOption.value = registerOptionFilter.value.filter(
-          (v: DataOption) => v.name!.indexOf(val) > -1
-        );
-      });
-      break;
-
-    case "announceOption":
-      update(() => {
-        announceOption.value = announceOptionFilter.value.filter(
-          (v: DataOption) => v.name!.indexOf(val) > -1
-        );
-      });
-      break;
-
-    case "positionOption":
-      update(() => {
-        positionOption.value = positionOptionFilter.value.filter(
-          (v: DataOption) => v.name!.indexOf(val) > -1
-        );
-      });
-      break;
-    case "testOption":
-      update(() => {
-        testOption.value = testOptionFilter.value.filter(
-          (v: DataOption) => v.name!.indexOf(val) > -1
-        );
-      });
-      break;
-    default:
-      break;
-  }
-};
-
-const submit = async () => {
-  next();
-  //   await myForm.value!.validate().then((result: boolean) => {
-  //     if (result) {
-  //       next();
-  //     }
-  //   });
-};
-
-/**
- * class จัดรูปแบบแสดงระหว่างข้อมูลที่แก้ไขหรือแสดงเฉยๆ
- * @param val ข้อมูล input สำหรับแก้ไขหรือไม่
- */
-const getClass = (val: boolean) => {
-  return {
-    "full-width inputgreen cursor-pointer": val,
-    "full-width cursor-pointer": !val,
-  };
-};
-</script>
-<style>
-.q-field--with-bottom {
-  padding-bottom: 0px;
-}
-</style>

src/modules/06_retirement/components/DismissOrder/step02.vue

@@ -1,684 +0,0 @@
-<template>
-  <div>
-    <div class="q-py-md q-pl-md" style="height: 68vh; overflow-y: scroll">
-      <div class="col-12 row q-py-sm items-center">
-        <q-btn flat round color="primary" @click="clickAdd" icon="mdi-plus">
-          <q-tooltip>เพิ่มข้อมูล</q-tooltip>
-        </q-btn>
-        <q-space />
-        <div class="items-center" style="display: flex">
-          <!-- ค้นหาข้อความใน table -->
-          <q-input
-            standout
-            dense
-            v-model="filter"
-            ref="filterRef"
-            outlined
-            debounce="300"
-            placeholder="ค้นหา"
-            style="max-width: 200px"
-            class="q-ml-sm"
-          >
-            <template v-slot:append>
-              <q-icon v-if="filter == ''" name="search" />
-              <q-icon
-                v-if="filter !== ''"
-                name="clear"
-                class="cursor-pointer"
-                @click="resetFilter"
-              />
-            </template>
-          </q-input>
-          <!-- แสดงคอลัมน์ใน table -->
-          <q-select
-            v-model="visibleColumns"
-            :display-value="$q.lang.table.columns"
-            multiple
-            outlined
-            dense
-            :options="columns"
-            options-dense
-            option-value="name"
-            map-options
-            emit-value
-            style="min-width: 150px"
-            class="gt-xs q-ml-sm"
-          />
-        </div>
-      </div>
-      <d-table
-        :rows="rows"
-        :columns="columns"
-        :visible-columns="visibleColumns"
-        :filter="filter"
-        row-key="name"
-      >
-        <template v-slot:header="props">
-          <q-tr :props="props">
-            <q-th v-for="col in props.cols" :key="col.name" :props="props">
-              <span class="text-weight-medium">{{ col.label }}</span>
-            </q-th>
-            <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">
-              {{ props.rowIndex + 1 }}
-            </q-td>
-            <q-td key="idcard" :props="props">
-              {{ props.row.idcard }}
-            </q-td>
-            <q-td key="name" :props="props">
-              {{ props.row.name }}
-            </q-td>
-            <q-td key="position" :props="props">
-              {{ props.row.position }}
-            </q-td>
-            <q-td key="agency" :props="props">
-              {{ props.row.agency }}
-            </q-td>
-            <q-td key="send" :props="props">
-              <q-select
-                :class="getClass(true)"
-                hide-bottom-space
-                multiple
-                :outlined="true"
-                dense
-                lazy-rules
-                v-model="props.row.mutiselect"
-                :rules="[(val:any) => !!val || `${'กรุณาเลือกช่องทางการส่งสำเนา'}`,(val:any) => val.length > 0 || `${'กรุณาเลือกช่องทางการส่งสำเนา'}`]"
-                :label="`${'เลือกช่องทางการส่งสำเนา'}`"
-                emit-value
-                map-options
-                option-label="name"
-                :options="optionSelect"
-                option-value="id"
-                input-debounce="0"
-                color="primary"
-              >
-                <template v-slot:no-option>
-                  <q-item>
-                    <q-item-section class="text-black">
-                      ไม่พบข้อมูลที่ค้นหา
-                    </q-item-section>
-                  </q-item>
-                </template>
-              </q-select>
-            </q-td>
-            <q-td auto-width>
-              <q-btn
-                dense
-                size="12px"
-                flat
-                round
-                color="red"
-                @click="clickDelete(props.row.id)"
-                icon="mdi-delete"
-              >
-                <q-tooltip>ลบข้อมูล</q-tooltip>
-              </q-btn>
-            </q-td>
-          </q-tr>
-        </template>
-      </d-table>
-    </div>
-    <q-separator />
-    <div class="flex justify-end q-pa-sm q-gutter-sm">
-      <q-btn
-        dense
-        outline
-        color="primary"
-        icon="chevron_left"
-        @click="previous"
-        class="q-pr-md"
-        label="เลือกรายชื่อ"
-      >
-      </q-btn>
-      <q-btn
-        dense
-        unelevated
-        label="บันทึก"
-        color="public"
-        @click="next"
-        class="q-px-md"
-        ><!-- icon="mdi-content-save-outline"
-        <q-tooltip>บันทึก</q-tooltip> -->
-      </q-btn>
-      <!-- <q-btn flat round color="primary" icon="chevron_right" @click="next">
-        <q-tooltip>ต่อไป</q-tooltip>
-      </q-btn> -->
-    </div>
-  </div>
-
-  <q-dialog v-model="modal" persistent full-width>
-    <q-card>
-      <q-form ref="myForm">
-        <DialogHeader tittle="เลือกรายชื่อตามหน่วยงาน" :close="clickClose" />
-        <q-separator />
-        <q-card-section class="q-pa-sm bg-grey-1">
-          <div class="row col-12 q-col-gutter-sm">
-            <div class="col-xs-12 col-sm-5 row">
-              <q-card flat bordered class="fit q-pa-sm">
-                <q-scroll-area visible style="height: 70vh">
-                  <q-input
-                    outlined
-                    dense
-                    v-model="search"
-                    placeholder="ค้นหา"
-                    class="q-mb-sm"
-                  >
-                    <template v-slot:append>
-                      <q-icon name="mdi-magnify" />
-                    </template>
-                  </q-input>
-                  <q-tree
-                    :nodes="nodesTree"
-                    dense
-                    node-key="id"
-                    v-model:selected="selected"
-                    v-model:expanded="expanded"
-                    no-selection-unset
-                    selected-color="primary"
-                    @update:selected="onSelected"
-                    default-expand-all
-                  />
-                </q-scroll-area>
-              </q-card>
-            </div>
-            <div class="col-xs-12 col-sm-7">
-              <div class="col-12 row q-py-sm items-center">
-                <q-space />
-                <div class="items-center" style="display: flex">
-                  <q-input
-                    standout
-                    dense
-                    v-model="filterModal"
-                    ref="filterRef"
-                    outlined
-                    debounce="300"
-                    placeholder="ค้นหา"
-                    style="max-width: 200px"
-                    class="q-ml-sm"
-                  >
-                    <template v-slot:append>
-                      <q-icon v-if="filterModal == ''" name="search" />
-                      <q-icon
-                        v-if="filterModal !== ''"
-                        name="clear"
-                        class="cursor-pointer"
-                        @click="resetFilter"
-                      />
-                    </template>
-                  </q-input>
-
-                  <q-select
-                    v-model="visibleColumnsModal"
-                    :display-value="$q.lang.table.columns"
-                    multiple
-                    outlined
-                    dense
-                    :options="columnsModal"
-                    options-dense
-                    option-value="name"
-                    map-options
-                    emit-value
-                    style="min-width: 150px"
-                    class="gt-xs q-ml-sm"
-                  />
-                </div>
-              </div>
-              <d-table
-                :rows="rowsModal"
-                :columns="columnsModal"
-                :visible-columns="visibleColumnsModal"
-                :filter="filterModal"
-                row-key="name"
-                selection="multiple"
-                v-model:selected="selectedModal"
-              >
-                <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
-                    :model-value="scope.selected"
-                    @update:model-value="
-                      (val, evt) => {
-                        Object.getOwnPropertyDescriptor(scope, 'selected').set(
-                          val,
-                          evt
-                        );
-                      }
-                    "
-                  /> -->
-                  <q-checkbox
-                    keep-color
-                    color="primary"
-                    dense
-                    v-model="scope.selected"
-                  />
-                </template>
-
-                <template v-slot:body-cell="props">
-                  <q-td :props="props">
-                    <div v-if="props.col.name == 'no'">
-                      {{ props.rowIndex + 1 }}
-                    </div>
-
-                    <div v-else>
-                      {{ props.value }}
-                    </div>
-                  </q-td>
-                </template>
-              </d-table>
-            </div>
-          </div>
-        </q-card-section>
-        <q-separator />
-        <q-card-actions align="right">
-          <q-btn
-            flat
-            round
-            color="public"
-            icon="mdi-content-save-outline"
-            @click="clickClose"
-          >
-            <q-tooltip>บันทึก</q-tooltip>
-          </q-btn>
-        </q-card-actions>
-      </q-form>
-    </q-card>
-  </q-dialog>
-</template>
-<script setup lang="ts">
-import { ref, onMounted } from "vue";
-import { useQuasar } from "quasar";
-import { useCounterMixin } from "@/stores/mixin";
-import DialogHeader from "@/modules/04_registry/components/DialogHeader.vue";
-import type { QInput, QForm } from "quasar";
-import type { treeTab } from "@/modules/05_placement/interface/index/Main";
-import http from "@/plugins/http";
-import config from "@/app.config";
-import type { QTableProps } from "quasar";
-
-const props = defineProps({
-  next: {
-    type: Function,
-    default: () => console.log("not function"),
-  },
-  previous: {
-    type: Function,
-    default: () => console.log("not function"),
-  },
-});
-
-const next = () => props.next();
-const previous = () => props.previous();
-
-const $q = useQuasar();
-const mixin = useCounterMixin(); //เรียกฟังก์ชันกลาง
-const { dialogMessage, messageError, showLoader, hideLoader } = mixin;
-
-const myForm = ref<QForm>();
-const filterRef = ref<QInput>();
-const filter = ref<string>("");
-const mutiselect = ref([]);
-const modal = ref<boolean>(false);
-const search = ref<string>("");
-const expanded = ref<string[]>([]);
-const selected = ref<string>("");
-const nodesTree = ref<treeTab[]>([]);
-const send = ref<String[]>([]);
-const selectedModal = ref([]);
-const test = ref([]);
-const filterModal = ref<string>("");
-const visibleColumnsModal = ref<String[]>(["no", "idcard", "name"]);
-const columnsModal = ref<QTableProps["columns"]>([
-  { name: "no", align: "left", label: "ลำดับ", field: "no", sortable: true },
-  {
-    name: "idcard",
-    align: "left",
-    label: "เลขประจำตัวประชาชน",
-    field: "idcard",
-    sortable: true,
-  },
-  {
-    name: "name",
-    align: "left",
-    label: "ชื่อ-สกุล",
-    field: "name",
-    sortable: true,
-  },
-]);
-
-const rowsModal = [
-  {
-    no: "0ac56905-1a74-4606-a120-233340adde95",
-    name: "นางนัทธ์ เหล่าสกุล",
-    idcard: "9158455632145",
-    educate: "",
-  },
-  {
-    no: "0de607a0-b094-4a6d-9e30-979343ab5e53",
-    name: "นางขรรค์ จันทรสมบัติ",
-    idcard: "8558455632126",
-    educate: "",
-  },
-  {
-    no: "93ca7366-2a35-4f94-a331-9c23c9ea78d3",
-    name: "นางโอภาส จรัสวงศ์",
-    idcard: "8158455635425",
-    educate: "",
-  },
-  {
-    no: "d3777c19-2bd0-42df-90ce-c3eeeee55ac6",
-    name: "นางธิญา หงษ์ทอง",
-    idcard: "4558455632145",
-    educate: "",
-  },
-  {
-    no: "1ccead6f-a851-4291-b3ab-a20757ecddbd",
-    name: "นางธนวิทย์ พิกุลเทพ",
-    idcard: "5542455632145",
-    educate: "",
-  },
-  {
-    no: "1ccead6f-a851-4291-b3ab-a20757ecddbd",
-    name: "นางหนึ่ง สตาภิรมย์",
-    idcard: "7448455632145",
-    educate: "",
-  },
-  {
-    no: "1ccead6f-a851-4291-b3ab-a20757ecddbd",
-    name: "นางสัจพร คมคาย",
-    idcard: "1236455632145",
-    educate: "",
-  },
-  {
-    no: "1ccead6f-a851-4291-b3ab-a20757ecddbd",
-    name: "นางตุลยากร ปรีดาศิริกุล",
-    idcard: "1523455632145",
-    educate: "",
-  },
-  {
-    no: "1ccead6f-a851-4291-b3ab-a20757ecddbd",
-    name: "นางบัลลังค์ จิรวาณิชย์",
-    idcard: "1258455632145",
-    educate: "",
-  },
-  {
-    no: "1ccead6f-a851-4291-b3ab-a20757ecddbd",
-    name: "นางคมคาย เรืองรังสรรค์",
-    idcard: "8548455632145",
-    educate: "",
-  },
-  {
-    no: "1ccead6f-a851-4291-b3ab-a20757ecddbd",
-    name: "นางพรทิพา คมคาย",
-    idcard: "6598455632145",
-    educate: "",
-  },
-];
-
-const paginationModal = ref({
-  sortBy: "desc",
-  descending: false,
-  page: 1,
-  rowsPerPage: 10,
-});
-const pagination = ref({
-  sortBy: "desc",
-  descending: false,
-  page: 1,
-  rowsPerPage: 10,
-});
-const optionSelect = ref<any>([
-  { id: 1, name: "อีเมล" },
-  { id: 2, name: "กล่องข้อความ" },
-]);
-
-const visibleColumns = ref<String[]>([
-  "no",
-  "idcard",
-  "name",
-  "position",
-  "agency",
-  "send",
-]);
-const columns = ref<QTableProps["columns"]>([
-  { name: "no", align: "left", label: "ลำดับ", field: "no", sortable: true },
-  {
-    name: "idcard",
-    align: "left",
-    label: "เลขประจำตัวประชาชน",
-    field: "idcard",
-    sortable: true,
-  },
-  {
-    name: "name",
-    align: "left",
-    label: "ชื่อ-สกุล",
-    field: "name",
-    sortable: true,
-  },
-  {
-    name: "position",
-    align: "left",
-    label: "ตำแหน่ง",
-    field: "position",
-    sortable: true,
-  },
-  {
-    name: "agency",
-    align: "left",
-    label: "หน่วยงาน",
-    field: "agency",
-    sortable: true,
-  },
-  {
-    name: "send",
-    align: "left",
-    label: "ช่องทางการส่งสำเนา",
-    field: "send",
-    sortable: true,
-  },
-]);
-
-const rows = ref([
-  {
-    no: "0ac56905-1a74-4606-a120-233340adde95",
-    name: "นางนัทธ์ เหล่าสกุล",
-    idcard: "9158455632145",
-    send: "",
-    position: "ผู้อำนวยการ",
-    agency: "กลุ่มงานช่วยบริหาร",
-    mutiselect: [],
-  },
-  {
-    no: "0de607a0-b094-4a6d-9e30-979343ab5e53",
-    name: "นางขรรค์ จันทรสมบัติ",
-    idcard: "8558455632126",
-    send: "",
-    position: "นักจัดการทั่วไป",
-    agency: "กลุ่มงานช่วยบริหาร",
-    mutiselect: [],
-  },
-  {
-    no: "93ca7366-2a35-4f94-a331-9c23c9ea78d3",
-    name: "นางโอภาส จรัสวงศ์",
-    idcard: "8158455635425",
-    send: "",
-    position: "นักจัดการทั่วไป",
-    agency: "กลุ่มงานช่วยบริหาร",
-    mutiselect: [],
-  },
-  {
-    no: "d3777c19-2bd0-42df-90ce-c3eeeee55ac6",
-    name: "นางธิญา หงษ์ทอง",
-    idcard: "4558455632145",
-    send: "",
-    position: "นักจัดการทั่วไป",
-    agency: "กลุ่มงานช่วยบริหาร",
-    mutiselect: [],
-  },
-  {
-    no: "1ccead6f-a851-4291-b3ab-a20757ecddbd",
-    name: "นางธนวิทย์ พิกุลเทพ",
-    idcard: "5542455632145",
-    send: "",
-    position: "นักจัดการทั่วไป",
-    agency: "กลุ่มงานช่วยบริหาร",
-    mutiselect: [],
-  },
-  {
-    no: "1ccead6f-a851-4291-b3ab-a20757ecddbd",
-    name: "นางหนึ่ง สตาภิรมย์",
-    idcard: "7448455632145",
-    send: "",
-    position: "นิติกร",
-    agency: "กลุ่มงานนิติกร",
-    mutiselect: [],
-  },
-  {
-    no: "1ccead6f-a851-4291-b3ab-a20757ecddbd",
-    name: "นางสัจพร คมคาย",
-    idcard: "1236455632145",
-    send: "",
-    position: "นิติกร",
-    agency: "กลุ่มงานนิติกร",
-    mutiselect: [],
-  },
-  {
-    no: "1ccead6f-a851-4291-b3ab-a20757ecddbd",
-    name: "นางตุลยากร ปรีดาศิริกุล",
-    idcard: "1523455632145",
-    send: "",
-    position: "นิติกร",
-    agency: "กลุ่มงานนิติกร",
-    mutiselect: [],
-  },
-  {
-    no: "1ccead6f-a851-4291-b3ab-a20757ecddbd",
-    name: "นางบัลลังค์ จิรวาณิชย์",
-    idcard: "1258455632145",
-    send: "",
-    position: "นิติกร",
-    agency: "กลุ่มงานนิติกร",
-    mutiselect: [],
-  },
-  {
-    no: "1ccead6f-a851-4291-b3ab-a20757ecddbd",
-    name: "นางคมคาย เรืองรังสรรค์",
-    idcard: "8548455632145",
-    send: "",
-    position: "นิติกร",
-    agency: "กลุ่มงานนิติกร",
-    mutiselect: [],
-  },
-  {
-    no: "1ccead6f-a851-4291-b3ab-a20757ecddbd",
-    name: "นางพรทิพา คมคาย",
-    idcard: "6598455632145",
-    send: "",
-    position: "นิติกร",
-    agency: "กลุ่มงานนิติกร",
-    mutiselect: [],
-  },
-]);
-
-onMounted(async () => {
-  await nodeTree();
-});
-
-const paginationLabel = (start: number, end: number, total: number) => {
-  //   if (props.paging == true)
-  //     return " " + start + " ใน " + end + " จากจำนวน " + total + " รายการ";
-  //   else
-  return start + "-" + end + " ใน " + total;
-};
-
-const resetFilter = () => {
-  // reset ค่าที่ค้นหาเมื่อกดปุ่ม X ในกล่องค้นหา
-  filter.value = "";
-  filterRef.value!.focus();
-};
-
-const getClass = (val: boolean) => {
-  return {
-    "full-width inputgreen cursor-pointer": val,
-    "full-width cursor-pointer": !val,
-  };
-};
-
-const clickClose = async () => {
-  //   if (editRow.value == true) {
-  //   dialogMessage(
-  //     $q,
-  //     "ข้อมูลมีการแก้ไข",
-  //     "ยืนยันที่จะปิดโดยไม่บันทึกใช่หรือไม่?",
-  //     "mdi-help-circle-outline",
-  //     "ตกลง",
-  //     "orange",
-  //     () => (modal.value = false),
-  //     undefined
-  //   );
-  //   } else {
-  modal.value = false;
-  //     next.value = false;
-  //     previous.value = false;
-  //   }
-};
-
-const clickAdd = () => {
-  modal.value = true;
-};
-
-const clickDelete = (id: string) => {
-  dialogMessage(
-    $q,
-    "ยืนยันการลบข้อมูล",
-    "ต้องการลบข้อมูลนี้ใช่หรือไม่?",
-    "mdi-help-circle-outline",
-    "ตกลง",
-    "red",
-    () => deleteData(id),
-    undefined
-  );
-};
-
-const nodeTree = async () => {
-  showLoader();
-  await http
-    .get(config.API.profileOrganizRoot)
-    .then((res: any) => {
-      const data = res.data.result;
-      nodesTree.value = data;
-      if (data.length > 0) {
-        expanded.value = [data[0].id];
-      }
-    })
-    .catch((e) => {
-      messageError($q, e);
-    })
-    .finally(() => {
-      hideLoader();
-    });
-};
-
-const onSelected = async (id: string) => {
-  //   await fetchPositionNumber(id);
-};
-
-const deleteData = async (id: string) => {};
-</script>
-<style lang="scss"></style>

src/modules/06_retirement/components/DismissOrder/step03.vue

@@ -1,580 +0,0 @@
-<template>
-  <div>
-    <div style="min-height: 70vh">
-      <q-splitter
-        v-model="splitterModel"
-        style="height: 70vh"
-        @update:model-value="onchangePage"
-      >
-        <template v-slot:before>
-          <div class="space">
-            <div @click="setTab('main')" :class="getClass(tab == 'main')">
-              <div class="q-pr-sm">คำสั่ง</div>
-              <q-btn
-                size="12px"
-                flat
-                dense
-                icon="mdi-download"
-                :disable="tab !== 'main'"
-                :color="tab !== 'main' ? 'grey' : 'add'"
-              >
-                <q-tooltip>ดาวน์โหลด</q-tooltip>
-                <q-menu>
-                  <q-list style="min-width: 150px">
-                    <q-item clickable v-close-popup>
-                      <q-item-section avatar
-                        ><q-icon color="red" name="mdi-file-pdf"
-                      /></q-item-section>
-                      <q-item-section>ไฟล์ .PDF</q-item-section>
-                    </q-item>
-                    <q-item clickable v-close-popup>
-                      <q-item-section avatar
-                        ><q-icon color="blue" name="mdi-file-word"
-                      /></q-item-section>
-                      <q-item-section>ไฟล์ .docx</q-item-section>
-                    </q-item>
-                  </q-list>
-                </q-menu>
-              </q-btn>
-            </div>
-            <div @click="setTab('second')" :class="getClass(tab == 'second')">
-              <div class="q-pr-sm">เอกสารแนบท้าย</div>
-              <q-btn
-                size="12px"
-                flat
-                dense
-                :color="tab !== 'second' ? 'grey' : 'add'"
-                icon="mdi-download"
-                :disable="tab !== 'second'"
-              >
-                <q-tooltip>ดาวน์โหลด</q-tooltip>
-                <q-menu>
-                  <q-list style="min-width: 150px">
-                    <q-item clickable v-close-popup>
-                      <q-item-section avatar
-                        ><q-icon color="red" name="mdi-file-pdf"
-                      /></q-item-section>
-                      <q-item-section>ไฟล์ .PDF</q-item-section>
-                    </q-item>
-                    <q-item clickable v-close-popup>
-                      <q-item-section avatar
-                        ><q-icon color="green-7" name="mdi-file-excel"
-                      /></q-item-section>
-                      <q-item-section>ไฟล์ .xls</q-item-section>
-                    </q-item>
-                  </q-list>
-                </q-menu>
-              </q-btn>
-            </div>
-            <q-space />
-            <q-btn
-              class="text-dark"
-              flat
-              dense
-              icon="mdi-fullscreen"
-              color="add"
-              @click="dialog = true"
-            />
-          </div>
-          <q-separator style="margin-top: -1px; z-index: 1" />
-          <q-card bordered class="card-pdf q-ma-md q-pa-md">
-            <div class="justify-between items-center align-center q-pb-sm row">
-              <q-btn
-                class="text-dark bg-grey-4"
-                flat
-                dense
-                @click="page = page > 1 ? page - 1 : page"
-              >
-                <q-icon name="mdi-chevron-left" />
-              </q-btn>
-
-              <span class="body-2 grey--text">
-                หน้าที่ {{ page }} จาก {{ numOfPages }}
-              </span>
-
-              <q-btn
-                class="text-dark bg-grey-4"
-                flat
-                dense
-                @click="page = page < numOfPages ? page + 1 : page"
-              >
-                <q-icon name="mdi-chevron-right" />
-              </q-btn>
-            </div>
-            <div class="pdfWidth">
-              <VuePDF ref="vuePDFRef" :pdf="pdfSrc" :page="page" fit-parent />
-              <!-- <VuePdf :key="page" :src="pdfSrc" :page="page" /> -->
-            </div>
-            <div class="justify-between items-center align-center q-pt-sm row">
-              <q-btn
-                class="text-dark bg-grey-4"
-                flat
-                dense
-                @click="page = page > 1 ? page - 1 : page"
-              >
-                <q-icon name="mdi-chevron-left" />
-              </q-btn>
-
-              <span class="body-2 grey--text">
-                หน้าที่ {{ page }} จาก {{ numOfPages }}
-              </span>
-
-              <q-btn
-                class="text-dark bg-grey-4"
-                flat
-                dense
-                @click="page = page < numOfPages ? page + 1 : page"
-              >
-                <q-icon name="mdi-chevron-right" />
-              </q-btn>
-            </div>
-          </q-card>
-        </template>
-
-        <template v-slot:separator>
-          <q-avatar
-            color="primary"
-            text-color="white"
-            size="30px"
-            icon="drag_indicator"
-          />
-        </template>
-
-        <template v-slot:after>
-          <q-form ref="myForm">
-            <div class="q-pa-md q-gutter-y-md">
-              <fieldset class="border q-px-lg q-py-md">
-                <legend class="text-header q-px-sm">อัปโหลดไฟล์</legend>
-                <div class="q-gutter-y-md q-mb-md">
-                  <div>
-                    <label class="text-file">คำสั่ง</label>
-                    <q-file
-                      outlined
-                      dense
-                      v-model="fileOrder"
-                      label="เลือกไฟล์คำสั่ง"
-                      hide-bottom-space
-                      lazy-rules
-                      :rules="[(val) => val || 'กรุณาเลือกไฟล์เอกสารแนบท้าย']"
-                    >
-                      <template v-slot:prepend>
-                        <q-icon name="attach_file" />
-                      </template>
-                    </q-file>
-                  </div>
-                  <div>
-                    <label class="text-file">เอกสารแนบท้าย</label>
-                    <q-file
-                      outlined
-                      dense
-                      v-model="fileTailer"
-                      label="เลือกไฟล์เอกสารแนบท้าย"
-                      hide-bottom-space
-                      lazy-rules
-                      :rules="[(val) => val || 'กรุณาเลือกไฟล์เอกสารแนบท้าย']"
-                    >
-                      <template v-slot:prepend>
-                        <q-icon name="attach_file" />
-                      </template>
-                    </q-file>
-                  </div>
-                </div>
-              </fieldset>
-
-              <fieldset class="border q-px-lg q-py-md">
-                <legend class="text-header q-px-sm">รายละเอียด</legend>
-                <div class="q-gutter-y-md q-mb-md">
-                  <div>
-                    <label class="text-file">เลขที่คำสั่ง</label>
-                    <q-input
-                      :outlined="true"
-                      dense
-                      lazy-rules
-                      :readonly="!true"
-                      :borderless="!true"
-                      v-model="order"
-                      :rules="[(val) => !!val || `${'กรุณากรอกเลขที่คำสั่ง'}`]"
-                      hide-bottom-space
-                      :label="`${'เลขที่คำสั่ง'}`"
-                    />
-                  </div>
-                  <div>
-                    <label class="text-file">ปีที่ออกคำสั่ง</label>
-                    <datepicker
-                      menu-class-name="modalfix"
-                      v-model="years"
-                      :locale="'th'"
-                      autoApply
-                      year-picker
-                      :enableTimePicker="false"
-                      week-start="0"
-                    >
-                      <template #year="{ year }">{{ year + 543 }}</template>
-                      <template #year-overlay-value="{ value }">{{
-                        parseInt(value + 543)
-                      }}</template>
-                      <template #trigger>
-                        <q-input
-                          outlined
-                          dense
-                          lazy-rules
-                          :model-value="years + 543"
-                          :rules="[
-                            (val) => !!val || `${'กรุณาเลือกปีที่ออกคำสั่ง'}`,
-                          ]"
-                          hide-bottom-space
-                          :label="`${'ปีที่ออกคำสั่ง'}`"
-                        >
-                          <template v-slot:prepend>
-                            <q-icon
-                              name="event"
-                              class="cursor-pointer"
-                              style="color: var(--q-grey)"
-                            >
-                            </q-icon>
-                          </template>
-                        </q-input>
-                      </template>
-                    </datepicker>
-                  </div>
-                  <div>
-                    <label class="text-file">วันที่ลงนาม</label>
-                    <datepicker
-                      menu-class-name="modalfix"
-                      v-model="date"
-                      :locale="'th'"
-                      autoApply
-                      borderless
-                      :enableTimePicker="false"
-                      week-start="0"
-                    >
-                      <template #year="{ year }">
-                        {{ year + 543 }}
-                      </template>
-                      <template #year-overlay-value="{ value }">
-                        {{ parseInt(value + 543) }}
-                      </template>
-                      <template #trigger>
-                        <q-input
-                          outlined
-                          dense
-                          class="full-width datepicker"
-                          hide-bottom-space
-                          :model-value="date != null ? date2Thai(date) : null"
-                          :label="`${'วันที่มีผลออกคำสั่ง'}`"
-                          :rules="[
-                            (val) =>
-                              !!val || `${'กรุณาเลือกวันที่มีผลออกคำสั่ง'}`,
-                          ]"
-                        >
-                          <template v-slot:prepend>
-                            <q-icon
-                              name="event"
-                              class="cursor-pointer"
-                              style="color: var(--q-grey)"
-                            >
-                            </q-icon>
-                          </template>
-                        </q-input>
-                      </template>
-                    </datepicker>
-                  </div>
-                </div>
-              </fieldset>
-              <div class="flex justify-around">
-                <q-btn
-                  unelevated
-                  label="ออกคำสั่ง"
-                  :color="validateForm() ? 'public' : 'grey'"
-                  :disable="!validateForm()"
-                />
-                <q-btn
-                  class="text-dark"
-                  unelevated
-                  label="ส่งไปลงนาม"
-                  color="grey"
-                  disable
-                />
-              </div>
-            </div>
-          </q-form>
-        </template>
-      </q-splitter>
-    </div>
-    <q-separator />
-    <div class="flex justify-end q-pa-sm q-gutter-sm">
-      <q-btn
-        dense
-        outline
-        color="primary"
-        icon="chevron_left"
-        @click="previous"
-        class="q-pr-md"
-        label="เลือกรายชื่อส่งสำเนา"
-      >
-      </q-btn>
-      <q-btn
-        unelevated
-        label="บันทึก"
-        :color="validateForm() ? 'public' : 'grey'"
-        :disable="!validateForm()"
-        @click="save"
-      >
-      </q-btn>
-
-      <!-- <q-btn flat round color="primary" icon="chevron_right" @click="next">
-          <q-tooltip>ต่อไป</q-tooltip>
-        </q-btn> -->
-    </div>
-
-    <q-dialog
-      v-model="dialog"
-      persistent
-      :maximized="true"
-      transition-show="slide-up"
-      transition-hide="slide-down"
-    >
-      <q-card class="bg-white text-white">
-        <!-- <q-bar>
-            <q-space />
-  
-            <q-btn dense flat icon="close" v-close-popup>
-              <q-tooltip>ปิดหน้าต่าง</q-tooltip>
-            </q-btn>
-          </q-bar> -->
-
-        <div class="flex justify-end items-center align-center q-mr-md q-mt-sm">
-          <q-btn
-            icon="close"
-            unelevated
-            round
-            dense
-            style="color: #ff8080; background-color: #ffdede"
-            size="12px"
-            v-close-popup
-          />
-        </div>
-        <q-card-section bordered class="card-pdf q-ma-md q-pa-md">
-          <div class="justify-between items-center align-center q-pb-sm row">
-            <q-btn
-              class="text-dark bg-grey-4"
-              flat
-              dense
-              @click="page = page > 1 ? page - 1 : page"
-            >
-              <q-icon name="mdi-chevron-left" />
-            </q-btn>
-
-            <span class="body-2 grey--text text-black">
-              หน้าที่ {{ page }} จาก {{ numOfPages }}
-            </span>
-
-            <q-btn
-              class="text-dark bg-grey-4"
-              flat
-              dense
-              @click="page = page < numOfPages ? page + 1 : page"
-            >
-              <q-icon name="mdi-chevron-right" />
-            </q-btn>
-          </div>
-          <div class="pdfWidth">
-            <VuePDF
-              ref="vuePDFRef"
-              :pdf="pdfSrc"
-              :page="page"
-              fit-parent
-              :scale="0.1"
-            />
-            <!-- <VuePdf :key="page" :src="pdfSrc" :page="page" /> -->
-          </div>
-          <div class="justify-between items-center align-center q-pt-sm row">
-            <q-btn
-              class="text-dark bg-grey-4"
-              flat
-              dense
-              @click="page = page > 1 ? page - 1 : page"
-            >
-              <q-icon name="mdi-chevron-left" />
-            </q-btn>
-
-            <span class="body-2 grey--text text-black">
-              หน้าที่ {{ page }} จาก {{ numOfPages }}
-            </span>
-
-            <q-btn
-              class="text-dark bg-grey-4"
-              flat
-              dense
-              @click="page = page < numOfPages ? page + 1 : page"
-            >
-              <q-icon name="mdi-chevron-right" />
-            </q-btn>
-          </div>
-        </q-card-section>
-      </q-card>
-    </q-dialog>
-  </div>
-</template>
-<script setup lang="ts">
-import { ref, onMounted, onUnmounted, computed } from "vue";
-import { VuePDF, usePDF } from "@tato30/vue-pdf";
-import type { PDFDocumentLoadingTask } from "pdfjs-dist/types/src/display/api";
-import type { QForm } from "quasar";
-import { useCounterMixin } from "@/stores/mixin";
-
-const mixin = useCounterMixin();
-const { date2Thai } = mixin;
-
-const dialog = ref<boolean>(false);
-
-// onUnmounted(() => {
-//   window.removeEventListener("resize", (e: any) => {
-//     myEventHandler(e);
-//   });
-// });
-
-onMounted(async () => {
-  //   window.addEventListener("resize", (e: any) => {
-  //     myEventHandler(e);
-  //   });
-
-  const pdfData = usePDF("/src/assets/05_modules.pdf");
-
-  setTimeout(() => {
-    pdfSrc.value = pdfData.pdf.value;
-    numOfPages.value = pdfData.pages.value;
-  }, 1000);
-});
-
-// const myEventHandler = (e: any) => {
-//   console.log("e", e.target.innerWidth);
-//   if (vuePDFRef !== null) {
-//     vuePDFRef.value.reload();
-//   }
-// };
-
-const pdfSrc = ref<PDFDocumentLoadingTask | undefined>();
-const numOfPages = ref<number>(0);
-const page = ref<number>(1);
-const vuePDFRef = ref<any>(null);
-
-const myForm = ref<QForm | null>(null);
-
-const props = defineProps({
-  next: {
-    type: Function,
-    default: () => console.log("not function"),
-  },
-  previous: {
-    type: Function,
-    default: () => console.log("not function"),
-  },
-});
-
-const next = () => props.next();
-const previous = () => props.previous();
-
-const splitterModel = ref<number>(70);
-const tab = ref<string>("main");
-const fileOrder = ref<any>(null);
-const fileTailer = ref<any>(null);
-
-const order = ref<string>("");
-const years = ref<number>(new Date().getFullYear());
-const date = ref<Date>(new Date());
-
-const onchangePage = (val: any) => {
-  //   console.log(val);
-  if (vuePDFRef !== null) {
-    vuePDFRef.value.reload();
-  }
-};
-
-const save = () => {
-  if (myForm.value !== null) {
-    myForm.value!.validate().then((success: Boolean) => {
-      if (success) {
-        // yay, models are correct
-      }
-    });
-  }
-};
-
-const validateForm = () => {
-  return (
-    fileOrder.value !== null &&
-    fileOrder.value !== null &&
-    order.value.trim() !== ""
-  );
-};
-
-const getClass = (val: boolean) => {
-  return {
-    "card-header-active q-px-lg q-py-md cursor-pointer": val,
-    "card-header q-px-lg q-py-md cursor-pointer": !val,
-  };
-};
-
-const setTab = (val: string) => {
-  tab.value = val;
-  page.value = 1;
-};
-</script>
-<style lang="scss" scoped>
-.border {
-  border-radius: 10px;
-  border: 1px solid #e9eaec;
-}
-.text-header {
-  color: #34373c;
-  font-size: 1rem;
-  font-weight: 300;
-}
-
-.text-file {
-  padding-top: 5px;
-  color: #34373c;
-  font-weight: 500;
-}
-
-.space {
-  background-color: #e9eaec61;
-  display: flex;
-  z-index: 3;
-}
-
-.card-header {
-  margin-top: 5px;
-  background-color: transparent;
-  padding: 2px !important;
-  border-radius: 10px 10px 0px 0px;
-  width: 200px;
-  display: flex;
-  justify-content: center;
-  font-weight: normal;
-  align-items: center;
-}
-
-.card-header-active {
-  margin-top: 5px;
-  margin-left: -1px;
-  background-color: white;
-  padding: 2px !important;
-  border-radius: 10px 10px 0px 0px;
-  border: 1px solid #e9eaec;
-  width: 200px;
-  display: flex;
-  justify-content: center;
-  border-bottom-style: none;
-  font-weight: 600;
-  align-items: center;
-}
-
-.card-pdf {
-  border-radius: 10px;
-  border: 1px solid #e9eaec;
-  background-color: #e9eaec61;
-  //   height: 60vh;
-}
-</style>

src/modules/06_retirement/components/Expulsion/expulsionMain.vue

@@ -0,0 +1,576 @@
+<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";
+
+import DialogFooter from "@/modules/06_retirement/components/DialogFooter.vue";
+import DialogHeader from "@/modules/06_retirement/components/DialogHeader.vue";
+
+import type { ResponseData } from "@/modules/06_retirement/interface/response/expulsion";
+
+const selected = ref<ResponseData[]>([]);
+const checkSelected = computed(() => {
+  if (selected.value.length === 0) {
+    return true;
+  }
+});
+
+const $q = useQuasar();
+const router = useRouter();
+const mixin = useCounterMixin();
+const transferStore = useTransferDataStore();
+
+const { date2Thai, messageError, showLoader, hideLoader, success } = mixin;
+const { statusText } = transferStore;
+
+const modal = ref<boolean>(false);
+const visibleColumns = ref<string[]>([
+  "no",
+  "fullname",
+  "position",
+  "positionLevel",
+  "organizationPositionOld",
+  "organization",
+  "statustext",
+]);
+const visibleColumns2 = ref<string[]>([
+  "no",
+  "fullname",
+  "position",
+  "positionLevel",
+  "organizationPositionOld",
+  "organization",
+  "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<ResponseData[]>([]);
+const rows2 = ref<ResponseData[]>([]);
+const filters = ref<ResponseData[]>([]);
+const columns = 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: "organization",
+    align: "left",
+    label: "หน่วยงานที่ขอโอนไป",
+    sortable: true,
+    field: "organization",
+    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 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: "organization",
+    align: "left",
+    label: "หน่วยงานที่ขอโอนไป",
+    sortable: true,
+    field: "organization",
+    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 openModal = () => (modal.value = true);
+const closeModal = () => (modal.value = false);
+
+onMounted(async () => {
+  await getData();
+});
+
+const openModalOrder = () => {
+  openModal();
+  const row = filters.value.filter(
+    (r: ResponseData) =>
+      r.status == "WAITTING" || r.status == "PENDING" || r.status == "APPROVE"
+  );
+  rows2.value = row;
+};
+
+const getData = async () => {
+  showLoader();
+  await http
+    .get(config.API.retirementExpulsion)
+    .then((res: any) => {
+      const data = res.data.result;
+      let list: ResponseData[] = [];
+      data.map((r: ResponseData) => {
+        list.push({
+          createdAt: new Date(),
+          date: new Date(),
+          firstName: r.firstName ?? "",
+          id: 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 ?? ""
+          }`,
+        });
+      });
+      rows.value = list;
+      filters.value = list;
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+};
+
+const clickDelete = (id: string) => {
+  $q.dialog({
+    title: "ยืนยันการลบข้อมูล",
+    message: "ต้องการลบข้อมูลนี้ใช่หรือไม่?",
+    cancel: {
+      flat: true,
+      color: "negative",
+    },
+    persistent: true,
+  })
+    .onOk(async () => {
+      showLoader();
+      await http
+        .delete(config.API.expulsionByid(id))
+        .then((res) => {
+          success($q, "ลบข้อมูลสำเร็จ");
+          getData();
+        })
+        .catch((e) => {
+          messageError($q, e);
+        })
+        .finally(() => {
+          hideLoader();
+        });
+    })
+    .onCancel(() => {})
+    .onDismiss(() => {});
+};
+
+const saveOrder = async () => {
+  const id = selected.value.map((r) => r.id);
+  const body = {
+    id,
+  };
+
+  showLoader();
+  await http
+    .post(config.API.expulsionReport, 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();
+    });
+};
+</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
+            @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 v-for="col in props.cols" :key="col.name" :props="props">
+                  <span class="text-weight-medium">{{ col.label }}</span>
+                </q-th>
+                <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="router.push(`/retirement/expulsion/${props.row.id}`)"
+                >
+                  {{ props.rowIndex + 1 }}
+                </q-td>
+                <q-td
+                  key="fullname"
+                  :props="props"
+                  @click="router.push(`/retirement/expulsion/${props.row.id}`)"
+                >
+                  {{ props.row.fullname }}
+                </q-td>
+                <q-td
+                  key="position"
+                  :props="props"
+                  @click="router.push(`/retirement/expulsion/${props.row.id}`)"
+                >
+                  {{ props.row.position }}
+                </q-td>
+                <q-td
+                  key="positionLevel"
+                  :props="props"
+                  @click="router.push(`/retirement/expulsion/${props.row.id}`)"
+                >
+                  {{ props.row.positionLevel }}
+                </q-td>
+                <q-td
+                  key="organizationPositionOld"
+                  :props="props"
+                  @click="router.push(`/retirement/expulsion/${props.row.id}`)"
+                >
+                  <div class="table_ellipsis">
+                    {{ props.row.organizationPositionOld }}
+                    <!-- <q-tooltip>
+                      {{ props.row.organizationPositionOld }}
+                    </q-tooltip> -->
+                  </div>
+                </q-td>
+                <q-td
+                  key="organization"
+                  :props="props"
+                  @click="router.push(`/retirement/expulsion/${props.row.id}`)"
+                >
+                  <div class="table_ellipsis">
+                    {{ props.row.organization }}
+                    <!-- <q-tooltip>
+                      {{ props.row.organization }}
+                    </q-tooltip> -->
+                  </div>
+                </q-td>
+                <q-td key="statustext" :props="props">
+                  {{ props.row.statustext }}
+                </q-td>
+                <q-td auto-width>
+                  <q-btn
+                    dense
+                    size="12px"
+                    flat
+                    round
+                    color="red"
+                    @click="clickDelete(props.row.id)"
+                    icon="mdi-delete"
+                  >
+                    <q-tooltip>ลบข้อมูล</q-tooltip>
+                  </q-btn>
+                </q-td>
+              </q-tr>
+            </template>
+          </d-table>
+        </div>
+      </div>
+    </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"
+          :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="saveOrder"
+          :disable="checkSelected"
+          color="public"
+        />
+      </q-card-actions>
+    </q-card>
+  </q-dialog>
+</template>
+<style scoped lang="scss"></style>

src/modules/06_retirement/components/Expulsion/expulsionRegistry.vue

@@ -0,0 +1,443 @@
+<template>
+  <div class="toptitle text-dark col-12 row items-center">
+    <q-btn
+      icon="mdi-arrow-left"
+      unelevated
+      round
+      dense
+      flat
+      color="primary"
+      class="q-mr-sm"
+      @click="router.go(-1)"
+    />
+    รายละเอียดการไล่ออกของ {{ 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">
+        {{ responseData.fullname }}
+      </div>
+      <q-space />
+      <q-btn
+        outline
+        color="blue"
+        dense
+        icon-right="mdi-open-in-new"
+        class="q-px-sm"
+        label="ดูข้อมูลทะเบียนประวัติ"
+        @click="router.push(`/registry/${personId}`)"
+      />
+    </div>
+    <div class="col-12"><q-separator /></div>
+    <div class="row col-12 q-pa-md">
+      <div class="col-12 row bg-white q-col-gutter-md">
+        <div class="col-xs-3 col-sm-2 col-md-1 row">
+          <q-img
+            :src="responseData.avataPath"
+            v-if="responseData.avataPath !== ''"
+          />
+          <q-img src="@/assets/avatar_user.jpg" v-else />
+        </div>
+        <div class="col-xs-6 col-sm-3 row items-center">
+          <div class="col-12 q-pl-md">
+            <div class="col-12 text-top">ตำแหน่งในสายงาน</div>
+            <div class="col-12 text-detail">
+              {{ responseData.positionTypeOld }}
+            </div>
+          </div>
+        </div>
+        <div class="col-xs-6 col-sm-3 row items-center">
+          <div class="col-12">
+            <div class="col-12 text-top">ระดับ</div>
+            <div class="col-12 text-detail">
+              {{ responseData.positionLevelOld }}
+            </div>
+          </div>
+        </div>
+        <div class="col-xs-6 col-sm-3 row items-center">
+          <div class="col-12">
+            <div class="col-12 text-top">สังกัด</div>
+            <div class="col-12 text-detail">
+              {{ responseData.organizationPositionOld }}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </q-card>
+
+  <q-card bordered class="row col-12 text-dark q-mt-sm">
+    <div class="bg-grey-1 q-pa-sm col-12 row items-center text-primary">
+      <div class="q-pl-sm text-weight-bold text-dark">ข้อมูลการไล่ออก</div>
+      <q-space />
+      <q-btn
+        v-if="!roleAdmin"
+        outline
+        color="primary"
+        dense
+        icon-right="arrow_forward"
+        class="q-px-sm"
+        label="ส่งคำร้องไปยัง สกจ."
+        @click="confirmMessage"
+      />
+      <q-btn
+        v-else
+        outline
+        color="primary"
+        dense
+        icon-right="download"
+        class="q-px-sm"
+        label="ดาวน์โหลด"
+      />
+    </div>
+    <div class="col-12"><q-separator /></div>
+    <div class="row col-12 q-pa-md">
+      <div class="col-12 row bg-white q-col-gutter-md">
+        <div class="col-xs-6 col-sm-3 row items-center">
+          <div class="col-12">
+            <div class="col-12 text-top">หน่วยงานที่ไล่ออก</div>
+            <div class="col-12 text-detail">
+              {{ responseData.organization }}
+            </div>
+          </div>
+        </div>
+        <div class="col-xs-6 col-sm-3 row items-center">
+          <div class="col-12">
+            <div class="col-12 text-top">เหตุผลที่ไล่ออก</div>
+            <div class="col-12 text-detail">
+              {{ responseData.reason }}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </q-card>
+
+  <q-card bordered class="row col-12 text-dark q-mt-sm">
+    <div class="bg-grey-1 q-pa-sm col-12 row items-center text-primary">
+      <div class="q-pl-sm text-weight-bold text-dark">เอกสารเพิ่มเติม</div>
+    </div>
+    <div class="col-12"><q-separator /></div>
+    <div class="col-12">
+      <d-table
+        :rows="rows"
+        :columns="columns"
+        row-key="fileName"
+        hide-header
+        hide-bottom
+      >
+        <template v-slot:body="props">
+          <q-tr :props="props" class="cursor-pointer">
+            <q-td key="no" :props="props">
+              {{ props.rowIndex + 1 }}
+            </q-td>
+            <q-td key="fileName" :props="props">
+              {{ props.row.fileName }}
+            </q-td>
+            <q-td key="btnMicrosoft" :props="props">
+              <q-btn flat dense round color="red" icon="picture_as_pdf">
+                <q-tooltip>ไฟล์ PDF</q-tooltip>
+              </q-btn>
+              <q-btn flat dense round color="blue" icon="mdi-file-word">
+                <q-tooltip>ไฟล์ WORD</q-tooltip>
+              </q-btn>
+            </q-td>
+          </q-tr>
+        </template>
+      </d-table>
+    </div>
+  </q-card>
+
+  <q-card bordered class="row col-12 text-dark q-mt-sm">
+    <div class="bg-grey-1 q-pa-sm col-12 row items-center text-primary">
+      <div class="q-pl-sm text-weight-bold text-dark">
+        แก้ไขข้อมูลเพื่อลงบัญชีแนบท้าย
+      </div>
+      <q-space />
+      <div class="q-gutter-sm" v-if="!edit">
+        <q-btn
+          outline
+          color="primary"
+          dense
+          icon-right="mdi-file-edit-outline"
+          class="q-px-sm"
+          label="แก้ไข"
+          style="width: 80px"
+          @click="edit = !edit"
+        />
+      </div>
+      <div class="q-gutter-sm" v-else>
+        <q-btn
+          outline
+          color="public"
+          dense
+          class="q-px-sm"
+          label="บันทึก"
+          style="width: 80px"
+          @click="conditionSave"
+        />
+        <q-btn
+          outline
+          color="red"
+          dense
+          class="q-px-sm"
+          label="ยกเลิก"
+          style="width: 80px"
+          @click="edit = !edit"
+        />
+      </div>
+    </div>
+    <div class="col-12"><q-separator /></div>
+  </q-card>
+</template>
+<script setup lang="ts">
+import { onMounted, ref } from "vue";
+import { useQuasar } from "quasar";
+import { useRoute, useRouter } from "vue-router";
+import { useCounterMixin } from "@/stores/mixin";
+
+import http from "@/plugins/http";
+import config from "@/app.config";
+import keycloak from "@/plugins/keycloak";
+
+import type { QTableProps, QForm } from "quasar";
+import type {
+  TypeFile,
+  ResponseDataDetail,
+} from "@/modules/06_retirement/interface/response/expulsion";
+
+const $q = useQuasar();
+const route = useRoute();
+const router = useRouter();
+const mixin = useCounterMixin();
+
+const personId = route.params.id;
+const {
+  date2Thai,
+  dialogMessage,
+  messageError,
+  showLoader,
+  hideLoader,
+  success,
+} = mixin;
+
+const myForm = ref<QForm | null>(null);
+const roleAdmin = ref<boolean>(false);
+const edit = ref<boolean>(false);
+
+const organizationPositionOld = ref<string>("");
+const positionTypeOld = ref<string>("");
+const positionLevelOld = ref<string>("");
+const posNo = ref<string>("");
+const salary = ref<number>(0);
+const organization = ref<string>("");
+const date = ref<Date | null>(null);
+const reason = ref<string>("");
+
+const responseData = ref<ResponseDataDetail>({
+  avataPath: "",
+  createdAt: new Date(),
+  date: new Date(),
+  id: "",
+  organization: "",
+  organizationPositionOld: "",
+  positionLevelOld: "",
+  positionNumberOld: "",
+  positionTypeOld: "",
+  reason: "",
+  salary: 0,
+  status: "",
+  fullname: "",
+});
+
+const rows = ref<TypeFile[]>([]);
+const columns = ref<QTableProps["columns"]>([
+  {
+    name: "no",
+    align: "left",
+    label: "ลำดับ",
+    sortable: true,
+    field: "no",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "fileName",
+    align: "left",
+    label: "ชื่อไฟล์",
+    sortable: true,
+    field: "fileName",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "btnMicrosoft",
+    align: "right",
+    label: "ปุ่ม",
+    sortable: true,
+    field: "btnMicrosoft",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+]);
+
+onMounted(async () => {
+  if (keycloak.tokenParsed != null) {
+    roleAdmin.value = await keycloak.tokenParsed.role.includes("placement1");
+    console.log("roleAdmin===>", roleAdmin.value);
+  }
+  await getData();
+});
+
+const getData = async () => {
+  showLoader();
+  await http
+    .get(config.API.expulsionByid(personId.toString()))
+    .then((res: any) => {
+      const data = res.data.result;
+      //   console.log(data);
+      let list: TypeFile[] = [];
+      if (data.docs.length > 0) {
+        data.docs.map((doc: TypeFile) => {
+          list.push({
+            pathName: doc.pathName ?? "",
+            fileName: doc.fileName ?? "",
+          });
+        });
+      }
+      rows.value = list;
+      responseData.value.createdAt = data.createdAt;
+      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.positionLevelOld = data.positionLevelOld ?? "";
+      responseData.value.positionNumberOld = data.positionNumberOld ?? "";
+      responseData.value.positionTypeOld = data.positionTypeOld ?? "";
+      responseData.value.reason = data.reason ?? "";
+      responseData.value.salary = data.salary !== null ? data.salary : 0;
+      responseData.value.status = data.status ?? "";
+      responseData.value.avataPath = data.avataPath ?? "";
+      responseData.value.fullname = `${data.prefix ?? "-"} ${
+        data.firstName ?? "-"
+      } ${data.lastName ?? "-"}`;
+
+      organizationPositionOld.value = data.organizationPositionOld ?? "";
+      positionTypeOld.value = data.positionTypeOld ?? "";
+      positionLevelOld.value = data.positionLevelOld ?? "";
+      posNo.value = data.posNo ?? "";
+      salary.value = data.salary ?? "";
+      organization.value = data.organization ?? "";
+      date.value = data.date !== null ? new Date(data.date) : null;
+      reason.value = data.reason ?? "";
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+};
+
+const confirmMessage = async () => {
+  dialogMessage(
+    $q,
+    "ต้องการยืนยันส่งคำร้องไปยัง สกจ หรือไม่?",
+    "ข้อมูลจะถูกนำส่งคำร้องไปยัง สกจ ทันที",
+    "mdi-help-circle-outline",
+    "ยืนยัน",
+    "primary",
+    () => sendConfirm(),
+    undefined
+  );
+};
+
+const sendConfirm = async () => {
+  showLoader();
+  await http;
+  //   .get(config.API.transferConfirmId(personId.toString()))
+  //   .then((res: any) => {
+  //     //   const data = res.data.result;
+  //     //   console.log(data);
+  //     success($q, "ส่งคำร้องข้อมูลสำเร็จ");
+  //   })
+  //   .catch((e) => {
+  //     messageError($q, e);
+  //   })
+  //   .finally(async () => {
+  //     await getData();
+  //     hideLoader();
+  //   });
+};
+
+const conditionSave = async () => {
+  if (myForm.value !== null) {
+    myForm.value.validate().then((success) => {
+      if (success) {
+        dialogMessage(
+          $q,
+          "ต้องการแก้ไขข้อมูลหรือไม่?",
+          "แก้ไขข้อมูลเพื่อลงบัญชีแนบท้าย",
+          "mdi-help-circle-outline",
+          "ตกลง",
+          "public",
+          async () => await saveData(),
+          undefined
+        );
+      }
+    });
+  }
+};
+
+const saveData = async () => {
+  const body = {
+    organization: organization.value,
+    reason: reason.value,
+    organizationPositionOld: organizationPositionOld.value,
+    date: date.value,
+    positionTypeOld: positionTypeOld.value,
+    positionLevelOld: positionLevelOld.value,
+    positionNumberOld: posNo.value,
+    amountOld: salary.value,
+  };
+  showLoader();
+  await http
+    .put(config.API.expulsionByid(personId.toString()), body)
+    .then((res: any) => {
+      //   const data = res.data.result;
+      //   console.log(data);
+      success($q, "แก้ไขข้อมูลเพื่อลงบัญชีแนบท้ายสำเร็จ");
+      edit.value = false;
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(async () => {
+      await getData();
+      hideLoader();
+    });
+};
+
+const getClass = (val: boolean) => {
+  return {
+    "full-width inputgreen cursor-pointer": val,
+    "full-width cursor-pointer": !val,
+  };
+};
+</script>
+<style lang="scss" scope>
+.q-img {
+  border-radius: 5px;
+  height: 70px;
+}
+.text-top {
+  color: gray;
+  font-weight: 400;
+  padding-bottom: 3px;
+}
+.text-detail {
+  font-weight: 500;
+}
+</style>

src/modules/06_retirement/interface/response/discharged.ts

@@ -0,0 +1,45 @@
+interface ResponseData {
+  createdAt: Date;
+  date: Date;
+  firstName: string;
+  id: string;
+  isActive: boolean;
+  lastName: string;
+  organization: string;
+  organizationPositionOld: string;
+  posNo: string;
+  position: string;
+  positionLevel: string;
+  positionLevelOld: string;
+  positionNumberOld: string;
+  positionTypeOld: string;
+  prefix: string;
+  reason: string;
+  salary: number;
+  status: string;
+  fullname: string;
+  statustext: string;
+}
+
+interface TypeFile {
+  fileName: string;
+  pathName: string;
+}
+
+interface ResponseDataDetail {
+  avataPath: string;
+  createdAt: Date;
+  date: Date;
+  id: string;
+  organization: string;
+  organizationPositionOld: string;
+  positionLevelOld: string;
+  positionNumberOld: string;
+  positionTypeOld: string;
+  reason: string;
+  salary: number;
+  status: string;
+  fullname: string;
+}
+
+export type { ResponseData, ResponseDataDetail, TypeFile };

src/modules/06_retirement/interface/response/expulsion.ts

@@ -0,0 +1,45 @@
+interface ResponseData {
+  createdAt: Date;
+  date: Date;
+  firstName: string;
+  id: string;
+  isActive: boolean;
+  lastName: string;
+  organization: string;
+  organizationPositionOld: string;
+  posNo: string;
+  position: string;
+  positionLevel: string;
+  positionLevelOld: string;
+  positionNumberOld: string;
+  positionTypeOld: string;
+  prefix: string;
+  reason: string;
+  salary: number;
+  status: string;
+  fullname: string;
+  statustext: string;
+}
+
+interface TypeFile {
+  fileName: string;
+  pathName: string;
+}
+
+interface ResponseDataDetail {
+  avataPath: string;
+  createdAt: Date;
+  date: Date;
+  id: string;
+  organization: string;
+  organizationPositionOld: string;
+  positionLevelOld: string;
+  positionNumberOld: string;
+  positionTypeOld: string;
+  reason: string;
+  salary: number;
+  status: string;
+  fullname: string;
+}
+
+export type { ResponseData, ResponseDataDetail, TypeFile };

src/modules/06_retirement/interface/response/out.ts

@@ -0,0 +1,45 @@
+interface ResponseData {
+  createdAt: Date;
+  date: Date;
+  firstName: string;
+  id: string;
+  isActive: boolean;
+  lastName: string;
+  organization: string;
+  organizationPositionOld: string;
+  posNo: string;
+  position: string;
+  positionLevel: string;
+  positionLevelOld: string;
+  positionNumberOld: string;
+  positionTypeOld: string;
+  prefix: string;
+  reason: string;
+  salary: number;
+  status: string;
+  fullname: string;
+  statustext: string;
+}
+
+interface TypeFile {
+  fileName: string;
+  pathName: string;
+}
+
+interface ResponseDataDetail {
+  avataPath: string;
+  createdAt: Date;
+  date: Date;
+  id: string;
+  organization: string;
+  organizationPositionOld: string;
+  positionLevelOld: string;
+  positionNumberOld: string;
+  positionTypeOld: string;
+  reason: string;
+  salary: number;
+  status: string;
+  fullname: string;
+}
+
+export type { ResponseData, ResponseDataDetail, TypeFile };

src/modules/06_retirement/router.ts

@@ -3,14 +3,34 @@
  */
 
 const Main = () => import("@/modules/06_retirement/views/Main.vue");
-const Listretirement = () => import("@/modules/06_retirement/components/ListRetirement/TableList.vue")
+const Listretirement = () =>
-const resignOrder = () => import("@/modules/06_retirement/components/resign/ResignOrder.vue");
+  import("@/modules/06_retirement/components/ListRetirement/TableList.vue");
-const resign = () => import("@/modules/06_retirement/components/resign/Resign.vue");
+const resignOrder = () =>
-const resignByid = () => import("@/modules/06_retirement/components/resign/ResignByid.vue");
+  import("@/modules/06_retirement/components/resign/ResignOrder.vue");
-const deceased = () => import("@/modules/06_retirement/components/resign/Deceased.vue");
+const resign = () =>
-const detaildeceased = () => import("@/modules/06_retirement/components/resign/DetailDeceased.vue");
+  import("@/modules/06_retirement/components/resign/Resign.vue");
-const dismissOrder = () => import("@/modules/06_retirement/components/DismissOrder/DismissOrder.vue");
+const resignByid = () =>
-const addOrder = () => import("@/modules/06_retirement/components/DismissOrder/AddOrder.vue");
+  import("@/modules/06_retirement/components/resign/ResignByid.vue");
+const deceased = () =>
+  import("@/modules/06_retirement/components/resign/Deceased.vue");
+const detaildeceased = () =>
+  import("@/modules/06_retirement/components/resign/DetailDeceased.vue");
+const dismissOrder = () =>
+  import("@/modules/06_retirement/components/DismissOrder/DismissOrder.vue");
+const outDetail = () =>
+  import("@/modules/06_retirement/components/DismissOrder/outRegistry.vue");
+const dischargedMain = () =>
+  import("@/modules/06_retirement/components/Discharged/dischargedMain.vue");
+const dischargedDetails = () =>
+  import(
+    "@/modules/06_retirement/components/Discharged/dischargedRegistry.vue"
+  );
+const expulsionMain = () =>
+  import("@/modules/06_retirement/components/Expulsion/expulsionMain.vue");
+
+const expulsionDetails = () =>
+  import("@/modules/06_retirement/components/Expulsion/expulsionRegistry.vue");
+
 export default [
   {
     path: "/retirement",
@@ -96,6 +116,26 @@ export default [
     path: "/dismiss-order",
     name: "dismiss-order",
     component: dismissOrder,
+    meta: {
+      Auth: true,
+      Key: [7.5],
+      Role: "retirement",
+    },
+  },
+  {
+    path: "/retirement/out/:id",
+    name: "outDetail",
+    component: outDetail,
+    meta: {
+      Auth: true,
+      Key: [7.5],
+      Role: "retirement",
+    },
+  },
+  {
+    path: "/discharged",
+    name: "discharged",
+    component: dischargedMain,
     meta: {
       Auth: true,
       Key: [7.6],
@@ -103,14 +143,33 @@ export default [
     },
   },
   {
-    path: "/dismiss-order/add",
+    path: "/retirement/discharged/:id",
-    name: "dismiss-order-add",
+    name: "dischargedDetails",
-    component: addOrder,
+    component: dischargedDetails,
+    meta: {
+      Auth: true,
+      Key: [7.6],
+      Role: "retirement",
+    },
+  },
+  {
+    path: "/expulsion",
+    name: "expulsion",
+    component: expulsionMain,
+    meta: {
+      Auth: true,
+      Key: [7.7],
+      Role: "retirement",
+    },
+  },
+  {
+    path: "/retirement/expulsion/:id",
+    name: "expulsionDetails",
+    component: expulsionDetails,
     meta: {
       Auth: true,
       Key: [7.7],
       Role: "retirement",
     },
   },
-
 ];

src/modules/07_insignia/components/1_Proposals/listProposals.vue

@@ -389,7 +389,7 @@ const clickDelete = (id: string) => {
       await http
         .delete(config.API.RoundInsignia(id))
         .then((res) => {
-          success($q, "ลบข้อมูลการสอบสำเร็จ");
+          success($q, "ลบข้อมูลการเสนอขอสำเร็จ");
           fetchData();
         })
         .catch((e) => {