From 9db326570458b68ca1aa991b714dd3aaef822b64 Mon Sep 17 00:00:00 2001
From: setthawutttty <stw.ttty@gmail.com>
Date: Thu, 27 Jul 2023 17:45:14 +0700
Subject: [PATCH 001/113] no message

---
 .../components/probation/FormAssign.vue       | 33 ++++++++++++-------
 1 file changed, 21 insertions(+), 12 deletions(-)

diff --git a/src/modules/05_placement/components/probation/FormAssign.vue b/src/modules/05_placement/components/probation/FormAssign.vue
index 6e899e2af..f1a0062d8 100644
--- a/src/modules/05_placement/components/probation/FormAssign.vue
+++ b/src/modules/05_placement/components/probation/FormAssign.vue
@@ -96,7 +96,7 @@
                         hide-bottom-space
                         class="full-width datepicker q-mb-md"
                         :model-value="
-                          dateExam != null ? date2Thai(dateExam) : null
+                          date_start != null ? date2Thai(date_start) : null
                         "
                         :label="`${'ตั้งเเต่วันที่'}`"
                         clearable
@@ -129,7 +129,7 @@
                         readonly
                         class="full-width datepicker q-mb-md"
                         :model-value="
-                          dateExam2 != null ? date2Thai(dateExam2) : null
+                          date_finish != null ? date2Thai(date_finish) : null
                         "
                         :label="`${'ถึงวันที่'}`"
                         clearable
@@ -1253,8 +1253,7 @@ const val1 = ref([
 const router = useRouter();
 const mixin = useCounterMixin();
 const { date2Thai, notifyError } = mixin;
-const dateExam = ref<Date | null>(null);
-const dateExam2 = ref<Date | null>(null);
+
 const checkValidate = ref<boolean>(false);
 const myForm = ref<any>(null);
 
@@ -1263,8 +1262,8 @@ const personal_id = ref<string>();
 const fullname = ref<string>();
 const knowledge_skill_map_no = ref<string[]>([]);
 const round_no = ref<number>();
-const date_start = ref<Date>();
-const date_finish = ref<Date>();
+const date_start = ref<Date | null>(null);
+const date_finish = ref<Date | null>(null);
 const behavior_desc = ref<string>();
 const other_desc = ref<object>({});
 const other4_desc = ref<string>();
@@ -1275,13 +1274,13 @@ const createdAt = ref<Date>();
 const updatedAt = ref<Date>();
 
 const clearDateExam = () => {
-  dateExam.value = null;
+  date_start.value = null;
 };
 const clearDateExam2 = () => {
-  dateExam2.value = null;
+  date_finish.value = null;
 };
 const isDatePicker2Readonly = computed(() => {
-  return dateExam.value === null;
+  return date_start.value === null;
 });
 const routeName = router.currentRoute.value.name;
 const name = ref<string>("");
@@ -1303,7 +1302,7 @@ const monthOp = [{ value: "6", label: "6 เดือน" }];
 const activityCount = ref<number>(2);
 const activity_desc = ref<string[]>(Array(activityCount.value).fill(""));
 const goal_desc = ref<string[]>(Array(activityCount.value).fill(""));
-
+  const activityDataArray = ref<any[]>([]);
 const addActivity = () => {
   activityCount.value++;
 };
@@ -1331,6 +1330,7 @@ const addKnowledge = () => {
     knowledgeCount.value++;
   }
 };
+
 const knowledgeArray = computed(() => {
   return Array(knowledgeCount.value).fill("");
 });
@@ -1551,7 +1551,6 @@ const saveData = async () => {
   // workInfopRef.value.validate();
   myForm.value.validate().then(async (result: boolean) => {
     if (result) {
-      // showLoader();
 
       // แสดงข้อมูลใน Console
 
@@ -1576,6 +1575,16 @@ const saveData = async () => {
         .onCancel(() => {})
         .onDismiss(() => {});
     } else {
+    // ลองดูlog
+      activityDataArray.value = activity_desc.value.map((activity, index) => ({
+        id: index + 1,
+        activity_desc: activity,
+        goal_desc: goal_desc.value[index],
+      }));
+      // showLoader();
+      console.log("activity_desc:", activity_desc.value);
+  console.log("goal_desc:", goal_desc.value);
+  console.log(activityDataArray.value);
       // Validation ไม่ผ่าน
       notifyError($q, "กรุณากรอกข้อมูลให้ครบ");
     }
@@ -1600,7 +1609,7 @@ const OPmain = [""];
 const group = ref<string>("");
 const group2 = ref<string>("");
 const group3 = ref<string>("");
-const OPgroup = [""];
+const OPgroup = ["test"];
 
 const Other = ref<string>("");
 

From aa786793ac53b5b99b9c0b73c247d35c2a6dd9ff Mon Sep 17 00:00:00 2001
From: AnandaTon <125332905+anandaAiemvong@users.noreply.github.com>
Date: Thu, 27 Jul 2023 18:26:28 +0700
Subject: [PATCH 002/113] =?UTF-8?q?=E0=B9=81=E0=B8=81=E0=B9=89=E0=B9=84?=
 =?UTF-8?q?=E0=B8=82=20route=20registryEmployeeEdit?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/modules/08_registryEmployee/router.ts      | 2 +-
 src/modules/08_registryEmployee/views/Main.vue | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/modules/08_registryEmployee/router.ts b/src/modules/08_registryEmployee/router.ts
index ce8e0d3c2..67a4cc826 100644
--- a/src/modules/08_registryEmployee/router.ts
+++ b/src/modules/08_registryEmployee/router.ts
@@ -47,7 +47,7 @@ export default [
     },
   },
   {
-    path: "/registryEmployee/Edit/:Id",
+    path: "/registryEmployee/edit/:Id",
     name: "registryEmployeeEdit",
     component: EditDetail,
     meta: {
diff --git a/src/modules/08_registryEmployee/views/Main.vue b/src/modules/08_registryEmployee/views/Main.vue
index c89d46bee..edd6bba6f 100644
--- a/src/modules/08_registryEmployee/views/Main.vue
+++ b/src/modules/08_registryEmployee/views/Main.vue
@@ -1355,7 +1355,7 @@ const clickAdd = () => {
 
 // ดูรายการแก้ไขรายชื่อ
 const redirectToPage = (profileId?: string) => {
-  router.push(`/registryEmployee/Edit/${profileId}`);
+  router.push(`/registryEmployee/edit/${profileId}`);
 };
 const editDetail = async (row: any) => {
   await getPosition(row.id);

From e64b68c017c6a9e20c30110b3fe69523f1edf855 Mon Sep 17 00:00:00 2001
From: Thanit Konmek <thanit@frappet.com>
Date: Fri, 28 Jul 2023 08:34:52 +0700
Subject: [PATCH 003/113] =?UTF-8?q?Mock=20up=20=E0=B8=A3=E0=B8=B2=E0=B8=A2?=
 =?UTF-8?q?=E0=B8=A3=E0=B8=B1=E0=B8=9A=E0=B9=82=E0=B8=AD=E0=B8=99?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/Receive/DialogFooter.vue       |  69 ++
 .../components/Receive/DialogHeader.vue       |  29 +
 .../components/Receive/receiveMain.vue        | 563 +++++++++++++
 .../components/Receive/receiveModal.vue       | 794 ++++++++++++++++++
 src/modules/05_placement/router.ts            |  14 +
 5 files changed, 1469 insertions(+)
 create mode 100644 src/modules/05_placement/components/Receive/DialogFooter.vue
 create mode 100644 src/modules/05_placement/components/Receive/DialogHeader.vue
 create mode 100644 src/modules/05_placement/components/Receive/receiveMain.vue
 create mode 100644 src/modules/05_placement/components/Receive/receiveModal.vue

diff --git a/src/modules/05_placement/components/Receive/DialogFooter.vue b/src/modules/05_placement/components/Receive/DialogFooter.vue
new file mode 100644
index 000000000..d2358bb75
--- /dev/null
+++ b/src/modules/05_placement/components/Receive/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>
diff --git a/src/modules/05_placement/components/Receive/DialogHeader.vue b/src/modules/05_placement/components/Receive/DialogHeader.vue
new file mode 100644
index 000000000..a20e917b0
--- /dev/null
+++ b/src/modules/05_placement/components/Receive/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>
diff --git a/src/modules/05_placement/components/Receive/receiveMain.vue b/src/modules/05_placement/components/Receive/receiveMain.vue
new file mode 100644
index 000000000..9dd3924d4
--- /dev/null
+++ b/src/modules/05_placement/components/Receive/receiveMain.vue
@@ -0,0 +1,563 @@
+<script setup lang="ts">
+import { ref, computed } from "vue";
+import type { QTableProps } from "quasar";
+import { useQuasar } from "quasar";
+import { useRouter } from "vue-router";
+import DialogFooter from "@/modules/05_placement/components/Receive/DialogFooter.vue";
+import DialogHeader from "@/modules/05_placement/components/Receive/DialogHeader.vue";
+import DialogOrgTree from "@/modules/05_placement/components/Receive/receiveModal.vue";
+
+const selected = ref([]);
+const checkSelected = computed(() => {
+  if (selected.value.length === 0) {
+    return true;
+  }
+});
+const clickClose = () => {
+  modal.value = false;
+};
+
+const $q = useQuasar();
+const modal = ref<boolean>(false);
+const popup = () => {
+  modal.value = true;
+};
+const router = useRouter();
+
+const modalTree = ref<boolean>(false);
+const personal = ref<any[]>([]);
+const personalId = ref<string>("");
+const visibleColumns = ref<string[]>([
+  "no",
+  "fullname",
+  "position",
+  "positionLevel",
+  "oc",
+  "agency",
+  "status",
+]);
+const visibleColumns2 = ref<string[]>([
+  "no",
+  "fullname",
+  "position",
+  "positionLevel",
+  "oc",
+  "agency",
+  "status",
+]); //ค้นหา คอลัมน์ คอลัมน์ที่แสดง
+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<any>([
+  {
+    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-ae3d-4b8c-8cf0-b86b5a2ed8bb",
+    fullname: "นางสาววญ สพ",
+    position: "นักจัดการงานทั่วไป",
+    positionLevel: "ปฏิบัติการ",
+    oc: "กลุ่มงานช่วยนักบริหาร",
+    agency: "กลุ่มงานข้อมูลเมือง",
+    status: "รออนุมัติ",
+  },
+  {
+    personalId: "08db721d-afde-4ed4-8bc6-f0ad83e61c4d",
+    fullname: "นางสาววญ สพ",
+    position: "นักจัดการงานทั่วไป",
+    positionLevel: "ปฏิบัติการ",
+    oc: "กลุ่มงานช่วยนักบริหาร",
+    agency: "กลุ่มงานข้อมูลเมือง",
+    status: "รออนุมัติ",
+  },
+  {
+    personalId: "08db721d-b24e-45d7-8a65-3f28ef4948a4",
+    fullname: "นางสาววญ สพ",
+    position: "นักจัดการงานทั่วไป",
+    positionLevel: "ปฏิบัติการ",
+    oc: "กลุ่มงานช่วยนักบริหาร",
+    agency: "กลุ่มงานข้อมูลเมือง",
+    status: "รออนุมัติ",
+  },
+]);
+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: "oc",
+    align: "left",
+    label: "สังกัด",
+    sortable: true,
+    field: "oc",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "agency",
+    align: "left",
+    label: "หน่วยงานที่รับโอน",
+    sortable: true,
+    field: "agency",
+    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: "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: "oc",
+    align: "left",
+    label: "สังกัด",
+    sortable: true,
+    field: "oc",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "agency",
+    align: "left",
+    label: "หน่วยงานที่ขอโอนไป",
+    sortable: true,
+    field: "agency",
+    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 openModalTree = (pid: string) => {
+  modalTree.value = true;
+  personalId.value = pid;
+  personal.value = [];
+};
+
+const closeModalTree = async () => {
+  //   await getTable();
+  modalTree.value = false;
+};
+</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="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-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="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="oc" :props="props">
+                  {{ props.row.oc }}
+                </q-td>
+                <q-td key="agency" :props="props">
+                  {{ props.row.agency }}
+                </q-td>
+                <q-td key="status" :props="props">
+                  {{ 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-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-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="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="oc" :props="props">
+                {{ props.row.oc }}
+              </q-td>
+              <q-td key="agency" :props="props">
+                {{ props.row.agency }}
+              </q-td>
+              <q-td key="status" :props="props">
+                {{ props.row.status }}
+              </q-td>
+            </q-tr>
+          </template>
+        </d-table>
+      </q-card-section>
+
+      <q-card-actions align="right" class="bg-white text-teal">
+        <q-btn
+          label="บันทึก"
+          @click=""
+          :disable="checkSelected"
+          color="public"
+        />
+      </q-card-actions>
+    </q-card>
+  </q-dialog>
+
+  <DialogOrgTree
+    v-model:modal="modalTree"
+    :personalId="personalId"
+    :close="closeModalTree"
+    :personal="personal"
+  />
+</template>
+<style scoped lang="scss"></style>
diff --git a/src/modules/05_placement/components/Receive/receiveModal.vue b/src/modules/05_placement/components/Receive/receiveModal.vue
new file mode 100644
index 000000000..4f9f42fcb
--- /dev/null
+++ b/src/modules/05_placement/components/Receive/receiveModal.vue
@@ -0,0 +1,794 @@
+<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 saveAppoint = async () => {
+  console.log("save", dataForm);
+
+  myFormPosition.value.validate().then(async (result: boolean) => {
+    if (result) {
+      const dataAppoint = await {
+        personalId: props.personalId,
+        containDate: 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
+        .post(config.API.placementPass(), 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;
+  if (dataPersonal) {
+    dataPersonal.map((data: any) => {
+      personal.value = data;
+    });
+    console.log("personal", personal.value);
+  }
+  // console.log("draft===>", personal.value.draft);
+
+  if (personal.value && personal.value.draft === false) {
+    // 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>
diff --git a/src/modules/05_placement/router.ts b/src/modules/05_placement/router.ts
index 90d23090b..93d3af33f 100644
--- a/src/modules/05_placement/router.ts
+++ b/src/modules/05_placement/router.ts
@@ -46,6 +46,10 @@ const RepatriationOrder = () =>
 const RepatriationOrderAdd = () =>
   import("@/modules/05_placement/components/RepatriationOrder/AddOrder.vue");
 
+//รับโอน
+const receiveMain = () =>
+  import("@/modules/05_placement/components/Receive/receiveMain.vue");
+
 export default [
   {
     path: "/placement",
@@ -207,4 +211,14 @@ export default [
       Role: "placement",
     },
   },
+  {
+    path: "/receive",
+    name: "receive",
+    component: receiveMain,
+    meta: {
+      Auth: true,
+      Key: [6.3],
+      Role: "placement",
+    },
+  },
 ];

From b6bde021689e9cda44d005c9cd230eba4666c695 Mon Sep 17 00:00:00 2001
From: setthawutttty <stw.ttty@gmail.com>
Date: Fri, 28 Jul 2023 09:09:47 +0700
Subject: [PATCH 004/113] no message

---
 .../components/probation/FormAssign.vue         | 17 ++++++++++++++++-
 1 file changed, 16 insertions(+), 1 deletion(-)

diff --git a/src/modules/05_placement/components/probation/FormAssign.vue b/src/modules/05_placement/components/probation/FormAssign.vue
index f1a0062d8..3146c96b2 100644
--- a/src/modules/05_placement/components/probation/FormAssign.vue
+++ b/src/modules/05_placement/components/probation/FormAssign.vue
@@ -71,7 +71,6 @@
                     v-model="monthSelect"
                     :label="`ระยะเวลากี่เดือน`"
                   />
-                  <div v-if="monthSelect !== null">{{ monthSelect }} เดือน</div>
                 </div>
                 <div class="col-xs-12 col-sm-4">
                   <datepicker
@@ -1539,6 +1538,21 @@ interface CheckboxItem {
 // const caregiverRef2 = ref()
 
 // const workInfopRef = ref()
+const putData = () =>{
+  const data = {
+    fullname:fullname.value,
+    position:position.value,
+    monthSelect:monthSelect.value,
+    date_start:date_start.value,
+    date_finish:date_finish.value,
+    caretaker1:caretaker1.value,
+    caretaker2:caretaker2.value,
+    activity_desc:activity_desc.value,
+    goal_desc:goal_desc.value,
+    knowledge:knowledge.value,
+  }
+  console.log("test",data)
+}
 
 const saveData = async () => {
   // myForm.value.resetValidation();
@@ -1575,6 +1589,7 @@ const saveData = async () => {
         .onCancel(() => {})
         .onDismiss(() => {});
     } else {
+      putData()
     // ลองดูlog
       activityDataArray.value = activity_desc.value.map((activity, index) => ({
         id: index + 1,

From eb5f4d35f647db1958a97aa4dc179fbcaaed3517 Mon Sep 17 00:00:00 2001
From: AnandaTon <125332905+anandaAiemvong@users.noreply.github.com>
Date: Fri, 28 Jul 2023 09:42:50 +0700
Subject: [PATCH 005/113] =?UTF-8?q?=E0=B9=81=E0=B8=81=E0=B9=89=20router=20?=
 =?UTF-8?q?=E0=B9=83=E0=B8=AB=E0=B9=89=E0=B9=84=E0=B8=9B=E0=B8=94=E0=B8=B6?=
 =?UTF-8?q?=E0=B8=87=E0=B8=97=E0=B8=B5=E0=B9=88=20registry=20=E0=B8=81?=
 =?UTF-8?q?=E0=B9=88=E0=B8=AD=E0=B8=99?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/modules/08_registryEmployee/views/Main.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/modules/08_registryEmployee/views/Main.vue b/src/modules/08_registryEmployee/views/Main.vue
index edd6bba6f..7f1bba964 100644
--- a/src/modules/08_registryEmployee/views/Main.vue
+++ b/src/modules/08_registryEmployee/views/Main.vue
@@ -1354,8 +1354,8 @@ const clickAdd = () => {
 };
 
 // ดูรายการแก้ไขรายชื่อ
-const redirectToPage = (profileId?: string) => {
-  router.push(`/registryEmployee/edit/${profileId}`);
+const redirectToPage = (id?: string) => {
+  router.push(`/registry/${id}`);
 };
 const editDetail = async (row: any) => {
   await getPosition(row.id);

From 286236dc6c674b7dd7f862663f01388c5a6cfe39 Mon Sep 17 00:00:00 2001
From: waruneeta <warunee.auy@gmail.com>
Date: Fri, 28 Jul 2023 10:08:17 +0700
Subject: [PATCH 006/113] =?UTF-8?q?=E0=B8=97=E0=B8=94=E0=B8=A5=E0=B8=AD?=
 =?UTF-8?q?=E0=B8=87=E0=B8=87=E0=B8=B2=E0=B8=99=20=E0=B9=81=E0=B8=81?=
 =?UTF-8?q?=E0=B9=89=E0=B9=84=E0=B8=82=E0=B8=9F=E0=B8=AD=E0=B8=A3=E0=B9=8C?=
 =?UTF-8?q?=E0=B8=A1=E0=B8=A3=E0=B8=B2=E0=B8=A2=E0=B8=87=E0=B8=B2=E0=B8=99?=
 =?UTF-8?q?=E0=B8=81=E0=B8=B2=E0=B8=A3=E0=B8=9B=E0=B8=A3=E0=B8=B0=E0=B9=80?=
 =?UTF-8?q?=E0=B8=A1=E0=B8=B4=E0=B8=99=E0=B8=9C=E0=B8=A5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../probation/FormEvaluation/FormReport.vue   | 560 +++++++-----------
 .../probation/FormEvaluation/Header.vue       |   8 +-
 .../FormEvaluation/Template2Format2.vue       |   4 +-
 .../probation/FormEvaluation/Template3.vue    |  14 +-
 4 files changed, 238 insertions(+), 348 deletions(-)

diff --git a/src/modules/05_placement/components/probation/FormEvaluation/FormReport.vue b/src/modules/05_placement/components/probation/FormEvaluation/FormReport.vue
index 15c6ee09e..6be0a8872 100644
--- a/src/modules/05_placement/components/probation/FormEvaluation/FormReport.vue
+++ b/src/modules/05_placement/components/probation/FormEvaluation/FormReport.vue
@@ -1,348 +1,248 @@
 <script setup lang="ts">
-import { ref, defineAsyncComponent } from "vue";
-import { useQuasar } from "quasar";
-import { useProbationDataStore } from "@/modules/05_placement/store";
+import { ref } from "vue";
+import { QForm, useQuasar } from "quasar";
 import { useCounterMixin } from "@/stores/mixin";
 
-const Part2 = defineAsyncComponent(
-  () =>
-    import(
-      "@/modules/05_placement/components/probation/FormEvaluation/SubForm/Part2.vue"
-    )
-);
-const Part3 = defineAsyncComponent(
-  () =>
-    import(
-      "@/modules/05_placement/components/probation/FormEvaluation/SubForm/Part3.vue"
-    )
-);
-const Footer = defineAsyncComponent(
-  () =>
-    import(
-      "@/modules/05_placement/components/probation/FormEvaluation/Footer.vue"
-    )
-);
-
 const $q = useQuasar();
-const probationStore = useProbationDataStore();
-const { ratingColors } = probationStore;
-
-const list1_1 = [
-  { id: "1", label: "ผลผลิตของงานที่คาดหวัง 1" },
-  { id: "2", label: "ผลผลิตของงานที่คาดหวัง 2" },
-  { id: "3", label: "ผลผลิตของงานที่คาดหวัง 3" },
-  { id: "4", label: "ผลผลิตของงานที่คาดหวัง 4" },
-  { id: "5", label: "ผลผลิตของงานที่คาดหวัง 5" },
-];
-const list1_2 = [
-  { id: "1", label: "ผลผลิตของงานที่เกิดขึ้น 1" },
-  { id: "2", label: "ผลผลิตของงานที่เกิดขึ้น 2" },
-  { id: "3", label: "ผลผลิตของงานที่เกิดขึ้น 3" },
-  { id: "4", label: "ผลผลิตของงานที่เกิดขึ้น 4" },
-  { id: "5", label: "ผลผลิตของงานที่เกิดขึ้น 5" },
-];
-
-const etc_text = ref<any>(null);
-const text2_1 = ref<string>("");
-
-const model = ref<any>(0);
-const model1 = ref<any>(0);
-const model1_2 = ref<any>(0);
-const model1_3 = ref<any>(0);
-const model1_4 = ref<any>(0);
-const model1_5 = ref<any>(0);
-const model1_6 = ref<any>(0);
-const modelEtc = ref<any>(0);
-const etc = ref<any>(false);
-
+const myForm = ref<QForm>();
+const edit = ref<boolean>(false);
 const mixin = useCounterMixin();
-const { date2Thai } = mixin;
-const dateToday = ref<Date>(new Date("10-10-2023"));
-const dateEnd = ref<Date>(new Date("12-10-2023"));
-const period = ref<number>(1);
+const { date2Thai, notifyError } = mixin;
+const develop = ref<number>();
+const result = ref<number>();
+
+// part new
+const date_start = ref<Date>(new Date("10-10-2023"));
+const date_finish = ref<Date>();
+const reson = ref<string>("");
+
+const options = [{ value: 1, label: "พัฒนาครบ 3 ส่วน" }, { value: 0, label: "พัฒนาไม่ครบ 3 ส่วน" }];
+const optionsResult = [{ value: 1, label: "ไม่ต่ำกว่ามาตรฐานที่กำหนด เห็นควรให้รับราชการต่อ" }, { value: 0, label: "ต่ำกว่ามาตรฐานที่กำหนด เห็นควรให้ออกจากราชการ" }];
+
+const director_id = ref<any>(null);
+const director_dated = ref<any>();
+const director_id2 = ref<any>(null);
+const director_dated2 = ref<any>();
+const director_id3 = ref<any>(null);
+const director_dated3 = ref<any>();
+const optionDirector = ref<any>(["นาย ภูริณัฐ บุญขาว", "นาย พงศกร วรารักษ์"]);
+
+const savaForm = async () => {
+  await myForm.value!.validate().then((result: boolean) => {
+    if (result) {
+      $q.dialog({
+        title: "ยืนยันการบันทึกข้อมูล",
+        message: "ต้องการบันทึกข้อมูลนี้ใช่หรือไม่ ?",
+        cancel: {
+          flat: true,
+          color: "negative",
+        },
+        persistent: true,
+      })
+        .onOk(async () => {
+          postData();
+
+        })
+        .onCancel(() => { })
+        .onDismiss(() => { });
+    }
+  });
+
+};
+
+const postData = async () => {
+  const data = await {
+    date_start: date_start.value,
+    date_finish: date_finish.value,
+    director_id: director_id.value,
+    director_dated: director_dated.value,
+    director_id2: director_id2.value,
+    director_dated2: director_dated2.value,
+    director_id3: director_id3.value,
+    director_dated3: director_dated3.value,
+  }
+
+  console.log("postData===>", data)
+};
 </script>
 
 <template>
-  <div class="row col-12 q-gutter-lg no-margin">
+  <div class="row col-12 q-mr-md">
+    <q-form ref="myForm">
 
-    <div class="col-12 row">
-      <div class="col-12 text-top0 row items-center">
-        <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
-        วันเริ่มทดลองปฎิบัติหน้าที่ราชการ ตั้งแต่วันที่
-        <span class="text-black q-px-sm">{{ date2Thai(dateToday) }}</span>
-        ถึงวันที
-        <span class="text-black q-px-sm">{{ date2Thai(dateEnd) }}</span>
+      <div class="row col-12">
+        <div class="col-12 row q-col-gutter-md">
+          <div class="col-xs-12 col-sm-6">
+            <datepicker menu-class-name="modalfix" v-model="date_start" :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="date_start != null ? date2Thai(date_start) : 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-sm-6">
+            <datepicker menu-class-name="modalfix" v-model="date_finish" :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="date_finish != null ? date2Thai(date_finish) : 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>
       </div>
-      <div class="col-12 text-top0 row items-center">
-        <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
-        <span class="text-black q-px-sm">{{ "ครั้งที่" + period }}</span>
-        ระหว่างวันที่
-        <span class="text-black q-px-sm">{{ date2Thai(dateToday) }}</span>
-        ถึงวันที่
-        <span class="text-black q-px-sm">{{ date2Thai(dateEnd) }}</span>
+
+      <div class="col-12 row q-mt-xs">
+        <div class="col-xs-12 col-sm-6">
+          <q-select :rules="[(val) => !!val || 'กรุณาเลือกการพัฒนาในระหว่างทดลองปฏิบัติหน้าที่ราชการ']" hide-bottom-space
+            :options="options" class="col-xs-12 col-sm-6" dense borderless option-label="label" outlined v-model="develop"
+            label="การพัฒนาในระหว่างทดลองปฏิบัติหน้าที่ราชการ" />
+        </div>
       </div>
-      <div class="col-12 q-pt-md">
+      <div class="col-12 row q-mt-lg">
+        <div class="col-xs-12 col-sm-6">
+          <q-select :rules="[(val) => !!val || 'กรุณาเลือกผลการประเมินการทดลองปฏิบัติหน้าที่ราชการ']" hide-bottom-space
+            :options="optionsResult" class="col-xs-12 col-sm-6" dense borderless option-label="label" outlined
+            v-model="result" label="ผลการประเมินการทดลองปฏิบัติหน้าที่ราชการ" />
+
+        </div>
+      </div>
+
+      <div class="col-12 row q-mt-lg">
+        <div class="col-12">
+          <q-input hide-bottom-space :readonly="edit" dense borderless :outlined="!edit" class="bg-white" type="textarea"
+            v-model="reson" label="เหตุผล" :rules="[(val) => !!val || 'กรุณาระบุเหตุผล']"/>
+        </div>
+      </div>
+
+      <div class="col-12 q-mt-lg">
         <q-separator size="3px" color="grey-2" />
       </div>
-    </div>
 
-    <div class="col-12 row">
-      <div class="col-12 text-top0 items-center">
-        <q-avatar class="bg-grey-2 q-mr-sm" size="28px">1</q-avatar>
-        ผลสัมฤทธิ์ของการทดลองปฏิบัติบัติหน้าที่ราชการ
+      <div class="row col-12 q-gutter-lg q-mt-sm">
+        <div class="col-12 row">
+          <div class="col-12 text-top2 row items-center">
+            ประธานคณะกรรมการ
+          </div>
+          <div class="col-12 row q-col-gutter-md">
+            <q-select class="col-xs-12 col-sm-8" dense v-model="director_id" outlined :options="optionDirector"
+              label="เลือกประธานคณะกรรมการ" />
+            <div class="col-xs-12 col-sm-4">
+              <datepicker menu-class-name="modalfix" v-model="director_dated" :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 col-3" :model-value="director_dated != null ? date2Thai(director_dated) : 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>
+        </div>
+
+        <div class="col-12 row q-mt-xs">
+          <div class="col-12 text-top2 row items-center">
+            กรรมการ
+          </div>
+          <div class="col-12 row q-col-gutter-md">
+            <q-select class="col-xs-12 col-sm-8" dense v-model="director_id2" outlined :options="optionDirector"
+              label="เลือกกรรมการ" />
+            <div class="col-xs-12 col-sm-4">
+              <datepicker menu-class-name="modalfix" v-model="director_dated2" :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 col-3" :model-value="director_dated2 != null ? date2Thai(director_dated2) : 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>
+        </div>
+
+        <div class="col-12 row q-mt-xs">
+          <div class="col-12 text-top2 row items-center">
+            กรรมการ
+          </div>
+          <div class="col-12 row q-col-gutter-md">
+            <q-select class="col-xs-12 col-sm-8" dense v-model="director_id3" outlined :options="optionDirector"
+              label="เลือกกรรมการ" />
+            <div class="col-xs-12 col-sm-4">
+              <datepicker menu-class-name="modalfix" v-model="director_dated3" :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 col-3" :model-value="director_dated3 != null ? date2Thai(director_dated3) : 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>
+        </div>
       </div>
-    </div>
-    <div class="col-12 row no-margin">
-      <q-card class="text-top0 col-12 q-pa-sm q-pl-lg">
-        <q-list dense>
-          <q-item dense tag="label" v-ripple>
-            <q-item-section>
-              <q-item-label>
-                <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
-                1.1. ความรู้ความสามารถ</q-item-label>
-            </q-item-section>
-            <q-item-section side>
-              <q-rating v-model="model1_2" max="5" size="sm" color="grey" :color-selected="ratingColors"
-                label="ระดับการประเมินพฤติกรรม">
-                <template v-slot:tip-1>
-                  <q-tooltip>ต่ำกว่าความคาดหวังมาก</q-tooltip>
-                </template>
-                <template v-slot:tip-2>
-                  <q-tooltip>ต่ำกว่าความคาดหวังค่อนข้างมาก</q-tooltip>
-                </template>
-                <template v-slot:tip-3>
-                  <q-tooltip>เป็นไปตามความคาดหวัง</q-tooltip>
-                </template>
-                <template v-slot:tip-4>
-                  <q-tooltip>สูงว่าความคาดหวังค่อนข้างมาก</q-tooltip>
-                </template>
-                <template v-slot:tip-5>
-                  <q-tooltip>สูงกว่าความคาดหวังมาก</q-tooltip>
-                </template>
-              </q-rating>
-            </q-item-section>
-          </q-item>
-        </q-list>
-      </q-card>
 
-      <q-card class="text-top0 col-12 q-pa-sm q-pl-lg">
-        <q-list dense>
-          <q-item dense tag="label" v-ripple>
-            <q-item-section>
-              <q-item-label>
-                <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
-                1.2. ทักษะ</q-item-label>
-            </q-item-section>
-            <q-item-section side>
-              <q-rating v-model="model1_2" max="5" size="sm" color="grey" :color-selected="ratingColors"
-                label="ระดับการประเมินพฤติกรรม">
-                <template v-slot:tip-1>
-                  <q-tooltip>ต่ำกว่าความคาดหวังมาก</q-tooltip>
-                </template>
-                <template v-slot:tip-2>
-                  <q-tooltip>ต่ำกว่าความคาดหวังค่อนข้างมาก</q-tooltip>
-                </template>
-                <template v-slot:tip-3>
-                  <q-tooltip>เป็นไปตามความคาดหวัง</q-tooltip>
-                </template>
-                <template v-slot:tip-4>
-                  <q-tooltip>สูงว่าความคาดหวังค่อนข้างมาก</q-tooltip>
-                </template>
-                <template v-slot:tip-5>
-                  <q-tooltip>สูงกว่าความคาดหวังมาก</q-tooltip>
-                </template>
-              </q-rating>
-            </q-item-section>
-          </q-item>
-        </q-list>
-      </q-card>
-
-      <q-card class="text-top0 col-12 q-pa-sm q-pl-lg">
-        <q-list dense>
-          <q-item dense tag="label" v-ripple>
-            <q-item-section>
-              <q-item-label>
-                <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
-                1.3. สมมรถนะ</q-item-label>
-            </q-item-section>
-            <q-item-section side>
-              <q-rating v-model="model1_2" max="5" size="sm" color="grey" :color-selected="ratingColors"
-                label="ระดับการประเมินพฤติกรรม">
-                <template v-slot:tip-1>
-                  <q-tooltip>ต่ำกว่าความคาดหวังมาก</q-tooltip>
-                </template>
-                <template v-slot:tip-2>
-                  <q-tooltip>ต่ำกว่าความคาดหวังค่อนข้างมาก</q-tooltip>
-                </template>
-                <template v-slot:tip-3>
-                  <q-tooltip>เป็นไปตามความคาดหวัง</q-tooltip>
-                </template>
-                <template v-slot:tip-4>
-                  <q-tooltip>สูงว่าความคาดหวังค่อนข้างมาก</q-tooltip>
-                </template>
-                <template v-slot:tip-5>
-                  <q-tooltip>สูงกว่าความคาดหวังมาก</q-tooltip>
-                </template>
-              </q-rating>
-            </q-item-section>
-          </q-item>
-        </q-list>
-      </q-card>
-
-      <q-card class="text-top0 col-12 q-pa-sm q-pl-lg">
-        <q-list dense>
-          <q-item dense tag="label" v-ripple>
-            <q-item-section>
-              <q-item-label>
-                <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
-                1.4. ความสามารถในการเรียนรู้งาน</q-item-label>
-            </q-item-section>
-            <q-item-section side>
-              <q-rating v-model="model1_2" max="5" size="sm" color="grey" :color-selected="ratingColors"
-                label="ระดับการประเมินพฤติกรรม">
-                <template v-slot:tip-1>
-                  <q-tooltip>ต่ำกว่าความคาดหวังมาก</q-tooltip>
-                </template>
-                <template v-slot:tip-2>
-                  <q-tooltip>ต่ำกว่าความคาดหวังค่อนข้างมาก</q-tooltip>
-                </template>
-                <template v-slot:tip-3>
-                  <q-tooltip>เป็นไปตามความคาดหวัง</q-tooltip>
-                </template>
-                <template v-slot:tip-4>
-                  <q-tooltip>สูงว่าความคาดหวังค่อนข้างมาก</q-tooltip>
-                </template>
-                <template v-slot:tip-5>
-                  <q-tooltip>สูงกว่าความคาดหวังมาก</q-tooltip>
-                </template>
-              </q-rating>
-            </q-item-section>
-          </q-item>
-        </q-list>
-      </q-card>
-
-      <q-card class="text-top0 col-12 q-pa-sm q-mt-sm q-pl-lg">
-        <q-list dense>
-          <q-item dense tag="label" v-ripple>
-            <q-item-section>
-              <q-item-label>
-                <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
-                1.5. ความสามารถในการปรับใช้ความรู้กับงานในหน้าที่</q-item-label>
-            </q-item-section>
-            <q-item-section side>
-              <q-rating v-model="model1_2" max="5" size="sm" color="grey" :color-selected="ratingColors"
-                label="ระดับการประเมินพฤติกรรม">
-                <template v-slot:tip-1>
-                  <q-tooltip>ต่ำกว่าความคาดหวังมาก</q-tooltip>
-                </template>
-                <template v-slot:tip-2>
-                  <q-tooltip>ต่ำกว่าความคาดหวังค่อนข้างมาก</q-tooltip>
-                </template>
-                <template v-slot:tip-3>
-                  <q-tooltip>เป็นไปตามความคาดหวัง</q-tooltip>
-                </template>
-                <template v-slot:tip-4>
-                  <q-tooltip>สูงว่าความคาดหวังค่อนข้างมาก</q-tooltip>
-                </template>
-                <template v-slot:tip-5>
-                  <q-tooltip>สูงกว่าความคาดหวังมาก</q-tooltip>
-                </template>
-              </q-rating>
-            </q-item-section>
-          </q-item>
-        </q-list>
-      </q-card>
-
-      <q-card class="text-top0 col-12 q-pa-sm q-pl-lg">
-        <q-list dense>
-          <q-item dense tag="label" v-ripple>
-            <q-item-section>
-              <q-item-label>
-                <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
-                1.6. ความสำเร็จของงานที่ได้รับมอบหมาย</q-item-label>
-            </q-item-section>
-            <q-item-section side>
-              <q-rating v-model="model1_2" max="5" size="sm" color="grey" :color-selected="ratingColors"
-                label="ระดับการประเมินพฤติกรรม">
-                <template v-slot:tip-1>
-                  <q-tooltip>ต่ำกว่าความคาดหวังมาก</q-tooltip>
-                </template>
-                <template v-slot:tip-2>
-                  <q-tooltip>ต่ำกว่าความคาดหวังค่อนข้างมาก</q-tooltip>
-                </template>
-                <template v-slot:tip-3>
-                  <q-tooltip>เป็นไปตามความคาดหวัง</q-tooltip>
-                </template>
-                <template v-slot:tip-4>
-                  <q-tooltip>สูงว่าความคาดหวังค่อนข้างมาก</q-tooltip>
-                </template>
-                <template v-slot:tip-5>
-                  <q-tooltip>สูงกว่าความคาดหวังมาก</q-tooltip>
-                </template>
-              </q-rating>
-            </q-item-section>
-          </q-item>
-        </q-list>
-      </q-card>
-
-      <q-card class="text-top0 col-12 q-pa-sm q-pl-lg">
-        <q-list dense>
-          <q-item dense tag="label" v-ripple>
-            <q-item-section>
-              <q-item-label>
-                <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
-                1.7 อื่นๆ
-                <q-checkbox class="q-ml-sm" dense v-model="etc" /></q-item-label>
-            </q-item-section>
-          </q-item>
-        </q-list>
-      </q-card>
-
-      <q-card v-if="etc" class="text-top0 col-12 q-pa-sm q-mt-sm q-pl-lg">
-        <q-list dense>
-          <q-item dense tag="label" v-ripple>
-            <q-item-section class="q-ml-md">
-              <q-item-label>
-                <q-input v-model="etc_text" label="กรอกอื่นๆ" dense lazy-rules autogrow hide-bottom-space outlined
-                  class="bg-white" :rules="[
-                    (val) => (val && val.length > 0) || 'กรุณากรอกข้อความ',
-                  ]" />
-              </q-item-label>
-            </q-item-section>
-            <q-item-section side>
-              <q-rating v-model="modelEtc" max="5" size="sm" color="grey" :color-selected="ratingColors"
-                label="ระดับการประเมินพฤติกรรม">
-                <template v-slot:tip-1>
-                  <q-tooltip>ต่ำกว่าความคาดหวังมาก</q-tooltip>
-                </template>
-                <template v-slot:tip-2>
-                  <q-tooltip>ต่ำกว่าความคาดหวังค่อนข้างมาก</q-tooltip>
-                </template>
-                <template v-slot:tip-3>
-                  <q-tooltip>เป็นไปตามความคาดหวัง</q-tooltip>
-                </template>
-                <template v-slot:tip-4>
-                  <q-tooltip>สูงว่าความคาดหวังค่อนข้างมาก</q-tooltip>
-                </template>
-                <template v-slot:tip-5>
-                  <q-tooltip>สูงกว่าความคาดหวังมาก</q-tooltip>
-                </template>
-              </q-rating>
-            </q-item-section>
-          </q-item>
-        </q-list>
-      </q-card>
-
-    </div>
-
-    <!-- Part 2 -->
-    <Part2 />
-
-    <!-- Part 3 -->
-    <Part3 />
-
-    <!-- Footer -->
-    <Footer />
+      <q-toolbar class="text-primary">
+        <q-space />
+        <q-btn label="บันทึก" color="secondary" @click="savaForm" />
+      </q-toolbar>
+    </q-form>
   </div>
 </template>
 
@@ -366,4 +266,4 @@ const period = ref<number>(1);
 .q-card {
   box-shadow: 0px 0px 0px 0px !important;
 }
-</style>
+</style>
\ No newline at end of file
diff --git a/src/modules/05_placement/components/probation/FormEvaluation/Header.vue b/src/modules/05_placement/components/probation/FormEvaluation/Header.vue
index 579b4e5c6..5e87f4d44 100644
--- a/src/modules/05_placement/components/probation/FormEvaluation/Header.vue
+++ b/src/modules/05_placement/components/probation/FormEvaluation/Header.vue
@@ -27,7 +27,7 @@ watch(tabHead, () => {
           indicator-color="grey-1"
           class="text-grey-7"
         >
-          <q-tab name="save1" label="บันทึกผลครั้งที่ 1" />
+          <q-tab name="save1" label="ครั้งที่ 1" />
           <q-btn
             size="12px"
             flat
@@ -55,7 +55,7 @@ watch(tabHead, () => {
             </q-menu>
           </q-btn>
 
-          <q-tab name="save2" label="บันทึกผลครั้งที่ 2" />
+          <q-tab name="save2" label="ครั้งที่ 2" />
           <q-btn
             size="12px"
             flat
@@ -82,7 +82,7 @@ watch(tabHead, () => {
               </q-list>
             </q-menu>
           </q-btn>
-          <!-- <q-tab name="save3" label="บันทึกผลครั้งที่ 3" />
+          <!-- <q-tab name="save3" label="ครั้งที่ 3" />
             <q-btn size="12px" flat dense icon="mdi-download" :disable="tab !== 'save3'"
                 :color="tab !== 'save3' ? 'grey' : 'add'">
                 <q-tooltip>ดาวน์โหลด</q-tooltip>
@@ -104,7 +104,7 @@ watch(tabHead, () => {
         </q-tabs>
         <div>
           <q-btn color="blue" flat dense icon="mdi-plus">
-            <q-tooltip> เพิ่มบันทึกผลการทดลอง </q-tooltip>
+            <q-tooltip> เพิ่ม </q-tooltip>
           </q-btn>
         </div>
       </div>
diff --git a/src/modules/05_placement/components/probation/FormEvaluation/Template2Format2.vue b/src/modules/05_placement/components/probation/FormEvaluation/Template2Format2.vue
index 228f8de5a..3e5e91bdf 100644
--- a/src/modules/05_placement/components/probation/FormEvaluation/Template2Format2.vue
+++ b/src/modules/05_placement/components/probation/FormEvaluation/Template2Format2.vue
@@ -21,9 +21,9 @@ const FormEvaluateScore = defineAsyncComponent(
         <FormEvaluateScore />
       </q-tab-panel>
 
-      <q-tab-panel name="save2">
+      <!-- <q-tab-panel name="save2">
         <FormEvaluateScore />
-      </q-tab-panel>
+      </q-tab-panel> -->
     </q-tab-panels>
   </q-page-container>
 </template>
\ No newline at end of file
diff --git a/src/modules/05_placement/components/probation/FormEvaluation/Template3.vue b/src/modules/05_placement/components/probation/FormEvaluation/Template3.vue
index e0adc68a6..fb54fdd4d 100644
--- a/src/modules/05_placement/components/probation/FormEvaluation/Template3.vue
+++ b/src/modules/05_placement/components/probation/FormEvaluation/Template3.vue
@@ -14,17 +14,7 @@ const FormReport = defineAsyncComponent(
 </script>
 
 <template>
-  <Header :change-tab="changeTab" />
-
-  <q-page-container>
-    <q-tab-panels v-model="tab" animated>
-      <q-tab-panel name="save1">
+  <div class="col-12 q-ma-lg">
         <FormReport />
-      </q-tab-panel>
-
-      <q-tab-panel name="save2">
-        <FormReport />
-      </q-tab-panel>
-    </q-tab-panels>
-  </q-page-container>
+  </div>
 </template>
\ No newline at end of file

From 05982c4346a350c3cf3a52c73648a43814a0b2df Mon Sep 17 00:00:00 2001
From: AnandaTon <125332905+anandaAiemvong@users.noreply.github.com>
Date: Fri, 28 Jul 2023 12:22:26 +0700
Subject: [PATCH 007/113] =?UTF-8?q?=E0=B9=81=E0=B8=81=E0=B9=89=E0=B9=84?=
 =?UTF-8?q?=E0=B8=82=20Api=20delete=20//=20=E0=B9=80=E0=B9=80=E0=B8=A5?=
 =?UTF-8?q?=E0=B8=B0=20path=20=E0=B9=83=E0=B8=99=E0=B8=AB=E0=B8=99?=
 =?UTF-8?q?=E0=B9=89=E0=B8=B2=E0=B9=81=E0=B8=AA=E0=B8=94=E0=B8=87=E0=B8=82?=
 =?UTF-8?q?=E0=B9=89=E0=B8=AD=E0=B8=B9=E0=B8=A5=20=E0=B8=A3=E0=B8=B2?=
 =?UTF-8?q?=E0=B8=A2=E0=B8=8A=E0=B8=B7=E0=B9=88=E0=B8=AD=E0=B8=A5=E0=B8=B9?=
 =?UTF-8?q?=E0=B8=81=E0=B8=88=E0=B9=89=E0=B8=B2=E0=B8=87=E0=B8=8A=E0=B8=B1?=
 =?UTF-8?q?=E0=B9=88=E0=B8=A7=E0=B8=84=E0=B8=A3=E0=B8=B2=E0=B8=A7?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/registry/api.profile.ts                | 1 +
 src/modules/08_registryEmployee/views/Main.vue | 6 +++---
 2 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/src/api/registry/api.profile.ts b/src/api/registry/api.profile.ts
index 0e30e10d6..d3333d893 100644
--- a/src/api/registry/api.profile.ts
+++ b/src/api/registry/api.profile.ts
@@ -156,6 +156,7 @@ export default {
     `${profile}address/history/${profileId}`,
   searchProfileByOcId: (OcId: string, type: string) =>
     `${profile}search/new/oc/${OcId}/${type}`,
+  searchProfileTemp: (type: string) => `${profile}search/new/oc/${type}`,
 
   profileAvatarId: (profileId: string) => `${profile}avatar/${profileId}`,
   profileAvatarHistoryId: (profileId: string) =>
diff --git a/src/modules/08_registryEmployee/views/Main.vue b/src/modules/08_registryEmployee/views/Main.vue
index 7f1bba964..e343d616c 100644
--- a/src/modules/08_registryEmployee/views/Main.vue
+++ b/src/modules/08_registryEmployee/views/Main.vue
@@ -231,7 +231,7 @@
                     <q-item
                       clickable
                       v-close-popup
-                      @click="clickDelete('test')"
+                      @click="clickDelete(props.row.id)"
                     >
                       <q-item-section
                         style="min-width: 0px"
@@ -1429,7 +1429,7 @@ const showEmployeeTemp = async () => {
   if (selected.value == null || selected.value == "") return;
   showLoader();
   await http
-    .post(config.API.searchProfileByOcId(selected.value, "all"), {
+    .post(config.API.searchProfileTemp("all"), {
       criterias: cirteria,
     })
     .then((res) => {
@@ -1489,7 +1489,7 @@ const showEmployeeTempOrder = async () => {
   if (selected.value == null || selected.value == "") return;
   showLoader();
   await http
-    .post(config.API.searchProfileByOcId(selected.value, "all"), {
+    .post(config.API.searchProfileTemp("all"), {
       criterias: cirteria,
     })
     .then((res) => {

From c8eb67ee2cebba453eddec839e8c2dea355954e7 Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Fri, 28 Jul 2023 14:42:43 +0700
Subject: [PATCH 008/113] FormEvaluateScore

---
 .../probation/FormEvaluation/FormEvaluate.vue |  15 +-
 .../FormEvaluation/FormEvaluateScore.vue      | 494 ++++++++++++++++--
 .../FormEvaluation/FormSaveResult.vue         |  15 +-
 3 files changed, 483 insertions(+), 41 deletions(-)

diff --git a/src/modules/05_placement/components/probation/FormEvaluation/FormEvaluate.vue b/src/modules/05_placement/components/probation/FormEvaluation/FormEvaluate.vue
index b78d8d0bf..54a5edc4c 100644
--- a/src/modules/05_placement/components/probation/FormEvaluation/FormEvaluate.vue
+++ b/src/modules/05_placement/components/probation/FormEvaluation/FormEvaluate.vue
@@ -448,7 +448,13 @@ const putformData = () => {
               <q-item-label>
                 <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
                 1.7 อื่นๆ
-                <q-checkbox class="q-ml-sm" dense v-model="etc"
+                <q-checkbox
+                  class="q-ml-sm"
+                  dense
+                  v-model="etc"
+                  @click="
+                    (achievement_other.text = ''), (achievement_other.level = 0)
+                  "
               /></q-item-label>
             </q-item-section>
           </q-item>
@@ -658,7 +664,12 @@ const putformData = () => {
         <div class="col-12 text-top0 row items-center q-pl-lg">
           <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
           2.4 อื่นๆ
-          <q-checkbox class="q-ml-sm" dense v-model="etc2" />
+          <q-checkbox
+            class="q-ml-sm"
+            dense
+            v-model="etc2"
+            @click="(behavio_orther.text = ''), (behavio_orther.level = 0)"
+          />
         </div>
         <q-card
           v-if="etc2"
diff --git a/src/modules/05_placement/components/probation/FormEvaluation/FormEvaluateScore.vue b/src/modules/05_placement/components/probation/FormEvaluation/FormEvaluateScore.vue
index 43a2e4262..1d30b7941 100644
--- a/src/modules/05_placement/components/probation/FormEvaluation/FormEvaluateScore.vue
+++ b/src/modules/05_placement/components/probation/FormEvaluation/FormEvaluateScore.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, defineAsyncComponent } from "vue";
+import { ref, defineAsyncComponent, computed } from "vue";
 import { useQuasar } from "quasar";
 import { useProbationDataStore } from "@/modules/05_placement/store";
 import { useCounterMixin } from "@/stores/mixin";
@@ -60,9 +60,6 @@ const dateToday = ref<Date>(new Date("10-10-2023"));
 const dateEnd = ref<Date>(new Date("12-10-2023"));
 const period = ref<number>(1);
 // part 1
-const knowledge_level = ref<number>(0);
-const skill_level = ref<number>(0);
-const competency_level = ref<number>(0);
 const learn_level = ref<number>(0);
 const apply_level = ref<number>(0);
 const success_level = ref<number>(0);
@@ -74,39 +71,94 @@ const moral_level = ref<any>([]);
 const discipline_level = ref<any>([]);
 const etc2 = ref<any>(false); // checkBox 2.4
 const behavio_orther = ref<any>([{ text: "", level: 0 }]);
-const behavio_strength_desc = ref<string>("");
-const behavio_inprove_desc = ref<string>("");
+
 // part 3
-const orientation = ref<num>(null);
-const self_learning = ref<any>(null);
-const training_seminar = ref<any>(null);
-const other_training = ref<any>(null);
-//rules
-const behavio_strengthRef = ref<any>(null);
-const behavio_strengthRules = [
-  (val: any) => (val && val.length > 0) || "กรุณากรอกข้อมูลจุดเด่น",
-];
-const behavio_inproveRef = ref<any>(null);
-const behavio_inproveRules = [
-  (val: any) => (val && val.length > 0) || "กรุณากรอกข้อมูลสิ่งที่ควรปรับปรุง",
-];
+const orientation = ref<number>(null);
+const self_learning = ref<number>(null);
+const training_seminar = ref<number>(null);
+const other_training = ref<number>(null);
+// footer
+const Autherise = ref<any>(null);
+const dateAutherise = ref<any>(new Date());
+const option = ref<any>(["นาย ภูริณัฐ บุญขาว", "นาย พงศกร วรารักษ์"]);
+
+// score
+const score1 = computed(() => {
+  if (
+    etc.value === true &&
+    achievement_other.value.text !== undefined &&
+    achievement_other.value.level !== undefined
+  ) {
+    return (
+      learn_level.value +
+      apply_level.value +
+      success_level.value +
+      achievement_other.value.level
+    );
+  }
+  return learn_level.value + apply_level.value + success_level.value;
+});
+const score2 = computed(() => {
+  let sum_conduct = conduct_level.value.reduce(
+    (sum: number, level: number) => sum + level,
+    0
+  );
+  let sum_moral = moral_level.value.reduce(
+    (sum: number, level: number) => sum + level,
+    0
+  );
+  let sum_discipline = discipline_level.value.reduce(
+    (sum: number, level: number) => sum + level,
+    0
+  );
+  if (
+    etc2.value === true &&
+    behavio_orther.value.text !== undefined &&
+    behavio_orther.value.level !== undefined
+  ) {
+    return (
+      sum_conduct + sum_moral + sum_discipline + behavio_orther.value.level
+    );
+  } else return sum_conduct + sum_moral + sum_discipline;
+});
+const percent_score1: number = computed(() => {
+  let num = 0;
+  if (etc.value === true) {
+    num = 20;
+  } else num = 15;
+  let percent1 = (score1.value / num) * 100;
+  return percent1.toFixed(2);
+});
+const percent_score2: number = computed(() => {
+  let num = 0;
+  if (etc2.value === true) {
+    num = 65;
+  } else num = 60;
+  let percent2 = (score2.value / num) * 100;
+  return percent2.toFixed(2);
+});
+const percent_sum: any = computed(() => {
+  let sum = (Number(percent_score1.value) + Number(percent_score2.value)) / 2;
+  return sum.toFixed(2);
+});
+const score4 = computed(() => {
+  return (
+    Number(orientation.value) +
+    Number(self_learning.value) +
+    Number(training_seminar.value) +
+    Number(other_training.value)
+  );
+});
 
 const savaForm = () => {
   let hasError = false;
-  behavio_strengthRef.value.validate();
-  behavio_inproveRef.value.validate();
   if (
-    knowledge_level.value === 0 ||
-    skill_level.value === 0 ||
-    competency_level.value === 0 ||
     learn_level.value === 0 ||
     apply_level.value === 0 ||
     success_level.value === 0 ||
     conduct_level.value.length < 4 ||
     moral_level.value.length < 3 ||
     discipline_level.value.length < 5 ||
-    behavio_strength_desc.value === "" ||
-    behavio_inprove_desc.value === "" ||
     orientation.value === null ||
     self_learning.value === null ||
     training_seminar.value === null
@@ -133,9 +185,6 @@ const savaForm = () => {
 };
 const putformData = () => {
   const data = {
-    knowledge_level: knowledge_level.value,
-    skill_level: skill_level.value,
-    competency_level: competency_level.value,
     learn_level: learn_level.value,
     apply_level: apply_level.value,
     success_level: success_level.value,
@@ -153,12 +202,12 @@ const putformData = () => {
     discipline4_level: discipline_level.value[3],
     discipline5_level: discipline_level.value[4],
     behavio_orther: behavio_orther.value,
-    behavio_strength_desc: behavio_strength_desc.value,
-    behavio_inprove_desc: behavio_inprove_desc.value,
     orientation: Number(orientation.value),
     self_learning: Number(self_learning.value),
     training_seminar: Number(training_seminar.value),
     other_training: Number(other_training.value),
+    total_experiment: Number(score1.value),
+    total_behavior: Number(score2.value),
   };
   $q.dialog({
     title: "ยืนยันการบันทึกข้อมูล",
@@ -331,7 +380,13 @@ const putformData = () => {
               <q-item-label>
                 <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
                 1.4 อื่นๆ
-                <q-checkbox class="q-ml-sm" dense v-model="etc"
+                <q-checkbox
+                  class="q-ml-sm"
+                  dense
+                  v-model="etc"
+                  @click="
+                    (achievement_other.text = ''), (achievement_other.level = 0)
+                  "
               /></q-item-label>
             </q-item-section>
           </q-item>
@@ -387,6 +442,24 @@ const putformData = () => {
           </q-item>
         </q-list>
       </q-card>
+      <q-card class="text-top0 col-12 q-pa-sm q-pl-lg">
+        <q-list dense>
+          <q-item dense tag="label" v-ripple>
+            <q-item-section>
+              <q-item-label> คะแนนรวมผลสัมฤทธิ์ของการทดลองฯ</q-item-label>
+            </q-item-section>
+            <q-item-section side>
+              <q-field dense>
+                <template v-slot:control>
+                  <div class="self-center full-width no-outline">
+                    {{ score1 }}
+                  </div>
+                </template>
+              </q-field>
+            </q-item-section>
+          </q-item>
+        </q-list>
+      </q-card>
     </div>
 
     <!-- Part 2 -->
@@ -541,7 +614,12 @@ const putformData = () => {
         <div class="col-12 text-top0 row items-center q-pl-lg">
           <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
           2.4 อื่นๆ
-          <q-checkbox class="q-ml-sm" dense v-model="etc2" />
+          <q-checkbox
+            class="q-ml-sm"
+            dense
+            v-model="etc2"
+            @click="(behavio_orther.text = ''), (behavio_orther.level = 0)"
+          />
         </div>
         <q-card
           v-if="etc2"
@@ -598,22 +676,195 @@ const putformData = () => {
           </q-list>
         </q-card>
       </div>
+      <div class="col-12 row">
+        <q-card class="text-top0 col-12 q-pa-sm q-pl-lg">
+          <q-list dense>
+            <q-item dense tag="label" v-ripple>
+              <q-item-section>
+                <q-item-label> คะแนนรวมพฤติกรรมการปฎิบัติราชการ</q-item-label>
+              </q-item-section>
+              <q-item-section side>
+                <q-field dense>
+                  <template v-slot:control>
+                    <div class="self-center full-width no-outline">
+                      {{ score2 }}
+                    </div>
+                  </template>
+                </q-field>
+              </q-item-section>
+            </q-item>
+          </q-list>
+        </q-card>
+      </div>
     </div>
 
-    <!-- Part 3 -->
-    <!-- <Part3 /> -->
+    <!-- ผลการประเมิน -->
     <div class="row col-12 q-gutter-lg no-margin">
       <div class="col-12 row justify-center">
         <div class="col-12 text-top0 items-center">
           <q-avatar class="bg-grey-2 q-mr-sm" size="28px">3</q-avatar>
+          ผลการประเมิน
+        </div>
+      </div>
+      <q-card class="text-top0 col-12">
+        <q-list dense>
+          <q-item dense tag="label" v-ripple>
+            <q-item-section>
+              <q-item-label>
+                <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
+                3.1. ผลสัมฤทธิ์ของการทดลองปฏิบัติบัติหน้าที่ราชการ</q-item-label
+              >
+            </q-item-section>
+            <q-item-section>
+              <q-item-label style="color: gray">
+                <div class="row text-weight-light">
+                  <div class="col">คะแนน</div>
+                  <div class="col">ร้อยละ</div>
+                </div>
+              </q-item-label>
+              <q-item-label caption style="color: #464444">
+                <div class="row text-weight-bold">
+                  <div class="col">{{ score1 }}</div>
+                  <div class="col">{{ percent_score1 }}</div>
+                </div>
+              </q-item-label>
+            </q-item-section>
+
+            <q-item-section side v-if="percent_score1 > 60">
+              ผ่าน(สูงกว่าร้อยละ 60)
+            </q-item-section>
+            <q-item-section side v-else>
+              ไม่ผ่าน(ต่ำกว่าร้อยละ 60)
+            </q-item-section>
+          </q-item>
+        </q-list>
+      </q-card>
+      <q-card class="text-top0 col-12">
+        <q-list dense>
+          <q-item dense tag="label" v-ripple>
+            <q-item-section>
+              <q-item-label>
+                <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
+                3.2. พฤติกรรมของผู้ทดลองปฏิบัติบัติหน้าที่ราชการ</q-item-label
+              >
+            </q-item-section>
+            <q-item-section>
+              <q-item-label style="color: gray">
+                <div class="row text-weight-light">
+                  <div class="col">คะแนน</div>
+                  <div class="col">ร้อยละ</div>
+                </div>
+              </q-item-label>
+              <q-item-label caption style="color: #464444">
+                <div class="row text-weight-bold">
+                  <div class="col">{{ score2 }}</div>
+                  <div class="col">{{ percent_score2 }}</div>
+                </div>
+              </q-item-label>
+            </q-item-section>
+
+            <q-item-section side v-if="percent_score2 > 60">
+              ผ่าน(สูงกว่าร้อยละ 60)
+            </q-item-section>
+            <q-item-section side v-else>
+              ไม่ผ่าน(ต่ำกว่าร้อยละ 60)
+            </q-item-section>
+          </q-item>
+        </q-list>
+      </q-card>
+      <q-card class="text-top0 col-12">
+        <q-list dense>
+          <q-item dense tag="label" v-ripple>
+            <q-item-section>
+              <q-item-label> ผลคะแนนรวม</q-item-label>
+            </q-item-section>
+            <q-item-section>
+              <q-item-label style="color: gray">
+                <div class="row text-weight-light">
+                  <div class="col">คะแนน</div>
+                  <div class="col">ร้อยละ</div>
+                </div>
+              </q-item-label>
+              <q-item-label caption style="color: #464444">
+                <div class="row text-weight-bold">
+                  <div class="col">{{ score1 + score2 }}</div>
+                  <div class="col">{{ percent_sum }}</div>
+                </div>
+              </q-item-label>
+            </q-item-section>
+
+            <q-item-section side v-if="percent_sum > 60">
+              ผ่าน(สูงกว่าร้อยละ 60)
+            </q-item-section>
+            <q-item-section side v-else>
+              ไม่ผ่าน(ต่ำกว่าร้อยละ 60)
+            </q-item-section>
+          </q-item>
+        </q-list>
+      </q-card>
+    </div>
+
+    <!-- Part 4 -->
+    <div class="row col-12 q-gutter-lg no-margin">
+      <div class="col-12 row justify-center">
+        <div class="col-12 text-top0 items-center">
+          <q-avatar class="bg-grey-2 q-mr-sm" size="28px">4</q-avatar>
           การพัฒนาผู้ทดลองปฏิบัติบัติหน้าที่ราชการ
         </div>
+        <div class="col-xs-12 col-sm-11 col-md-11 q-pa-sm">
+          <div class="row q-gutter-md">
+            <div class="col-8"></div>
+            <div class="col">คะแนน</div>
+            <div class="col">ร้อยละ</div>
+          </div>
+        </div>
         <q-card
           flat
           bordered
           class="col-xs-12 col-sm-11 col-md-11 q-pa-sm bg-grey-1"
         >
-          <q-list dense>
+          <div class="row q-gutter-md align-center">
+            <div class="col-8">1. การปฐมนิเทศ</div>
+            <div class="col">
+              <q-input dense type="number" v-model="orientation" />
+            </div>
+            <div class="col">
+              <q-input dense type="number" v-model="text" />
+            </div>
+          </div>
+          <q-separator class="q-my-xs" />
+          <div class="row q-gutter-md align-center">
+            <div class="col-8">2. การเรียนรู้ด้วยตนเอง</div>
+            <div class="col">
+              <q-input dense type="number" v-model="self_learning" />
+            </div>
+            <div class="col">
+              <q-input dense type="number" v-model="text" />
+            </div>
+          </div>
+          <q-separator class="q-my-xs" />
+          <div class="row q-gutter-md align-center">
+            <div class="col-8">3. การอบรมสัมนาร่วมกัน</div>
+            <div class="col">
+              <q-input dense type="number" v-model="training_seminar" />
+            </div>
+            <div class="col">
+              <q-input dense type="number" v-model="text" />
+            </div>
+          </div>
+          <q-separator class="q-my-xs" />
+          <div class="row q-gutter-md align-center">
+            <div class="col-8">
+              4. การอบรมอื่น ๆ ตามที่หน่วยงานกำหนด (ถ้ามี)
+            </div>
+            <div class="col">
+              <q-input dense type="number" v-model="other_training" />
+            </div>
+            <div class="col">
+              <q-input dense type="number" v-model="text" />
+            </div>
+          </div>
+          <!-- <q-list dense>
             <q-item dense tag="label" v-ripple>
               <q-item-section>
                 <q-item-label>1. การปฐมนิเทศ</q-item-label>
@@ -711,13 +962,177 @@ const putformData = () => {
                 </div>
               </q-item-section>
             </q-item>
-          </q-list>
+          </q-list> -->
+        </q-card>
+        <q-card class="text-top0 col-12">
+          <div class="col-xs-12 col-sm-11 col-md-11 q-pa-sm">
+            <div class="row q-gutter-md">
+              <div class="col-8"><q-item-label> ผลคะแนนรวม</q-item-label></div>
+              <div class="col">{{ score4 }}</div>
+              <div class="col">ร้อยละ</div>
+            </div>
+          </div>
         </q-card>
       </div>
     </div>
 
     <!-- Footer -->
     <!-- <Footer /> -->
+    <div class="row col-12 q-gutter-lg no-margin">
+      <div class="col-12 row">
+        <div class="col-12 text-top2 row items-center">
+          ผู้บังคับบัญชาผู้มอบหมายงาน
+        </div>
+        <div class="col-12 row q-col-gutter-md">
+          <q-select
+            class="col-xs-12 col-sm-8"
+            dense
+            v-model="Autherise"
+            outlined
+            :options="option"
+            label="ผู้บังคับบัญชา"
+          />
+          <div class="col-xs-12 col-sm-4">
+            <datepicker
+              menu-class-name="modalfix"
+              v-model="dateAutherise"
+              :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 col-3"
+                  :model-value="
+                    dateAutherise != null ? date2Thai(dateAutherise) : 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>
+        <div class="col-12 row q-col-gutter-md">
+          <q-select
+            class="col-xs-12 col-sm-8"
+            dense
+            v-model="Autherise"
+            outlined
+            :options="option"
+            label="ผู้บังคับบัญชา"
+          />
+          <div class="col-xs-12 col-sm-4">
+            <datepicker
+              menu-class-name="modalfix"
+              v-model="dateAutherise"
+              :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 col-3"
+                  :model-value="
+                    dateAutherise != null ? date2Thai(dateAutherise) : 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>
+        <div class="col-12 row q-col-gutter-md">
+          <q-select
+            class="col-xs-12 col-sm-8"
+            dense
+            v-model="Autherise"
+            outlined
+            :options="option"
+            label="ผู้บังคับบัญชา"
+          />
+          <div class="col-xs-12 col-sm-4">
+            <datepicker
+              menu-class-name="modalfix"
+              v-model="dateAutherise"
+              :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 col-3"
+                  :model-value="
+                    dateAutherise != null ? date2Thai(dateAutherise) : 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>
+      </div>
+    </div>
+
     <q-toolbar class="text-primary">
       <q-space />
       <q-btn label="บันทึก" color="secondary" @click="savaForm" />
@@ -726,6 +1141,11 @@ const putformData = () => {
 </template>
 
 <style lang="scss" scoped>
+.align-center {
+  display: flex;
+
+  align-items: center; /* จัดเนื้อหาให้อยู่กลางแนวตั้ง */
+}
 .text-top2 {
   font-weight: 500;
   padding-bottom: 8px;
diff --git a/src/modules/05_placement/components/probation/FormEvaluation/FormSaveResult.vue b/src/modules/05_placement/components/probation/FormEvaluation/FormSaveResult.vue
index 767b28d88..fd763594d 100644
--- a/src/modules/05_placement/components/probation/FormEvaluation/FormSaveResult.vue
+++ b/src/modules/05_placement/components/probation/FormEvaluation/FormSaveResult.vue
@@ -636,7 +636,13 @@ const putformData = () => {
               <q-item-label>
                 <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
                 1.8 อื่นๆ
-                <q-checkbox class="q-ml-sm" dense v-model="etc"
+                <q-checkbox
+                  class="q-ml-sm"
+                  dense
+                  v-model="etc"
+                  @click="
+                    (achievement_other.text = ''), (achievement_other.level = 0)
+                  "
               /></q-item-label>
             </q-item-section>
           </q-item>
@@ -887,7 +893,12 @@ const putformData = () => {
         <div class="col-12 text-top0 row items-center q-pl-lg">
           <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
           2.4 อื่นๆ
-          <q-checkbox class="q-ml-sm" dense v-model="etc2" />
+          <q-checkbox
+            class="q-ml-sm"
+            dense
+            v-model="etc2"
+            @click="(behavio_orther.text = ''), (behavio_orther.level = 0)"
+          />
         </div>
         <q-card
           v-if="etc2"

From 3dd5e535975b82b4c1f5352b9d05184d706f7808 Mon Sep 17 00:00:00 2001
From: waruneeta <warunee.auy@gmail.com>
Date: Fri, 28 Jul 2023 16:54:08 +0700
Subject: [PATCH 009/113] =?UTF-8?q?update=20type=20=E0=B8=9B=E0=B8=A3?=
 =?UTF-8?q?=E0=B8=B0=E0=B8=81=E0=B8=B2=E0=B8=A8=E0=B9=80=E0=B8=81=E0=B8=A9?=
 =?UTF-8?q?=E0=B8=B5=E0=B8=A2=E0=B8=93?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/modules/06_retirement/views/Main.vue | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/src/modules/06_retirement/views/Main.vue b/src/modules/06_retirement/views/Main.vue
index 3fc975d5f..335f4f591 100644
--- a/src/modules/06_retirement/views/Main.vue
+++ b/src/modules/06_retirement/views/Main.vue
@@ -369,9 +369,9 @@ const clickAdd = () => {
       model: 'opt1',
       // inline: true
       items: [
-        { label: 'ประกาศแก้ไข (เพิ่มคนเกษียณ)', value: 'opt1'},
-        { label: 'ประกาศแก้ไข (เฉพาะราย)', value: 'opt2' },
-        { label: 'ประกาศยกเลิก', value: 'opt3' }
+        { label: 'ประกาศเพิ่มผู้เกษียณ', value: 'ADD'},
+        { label: 'ประกาศแก้ไขข้อมูลผู้เกษียน', value: 'EDIT' },
+        { label: 'ประกาศยกเลิกผู้เกษียณ', value: 'REMOVE' }
       ]
     },
     cancel: {
@@ -380,6 +380,7 @@ const clickAdd = () => {
     },
     persistent: true,
     }).onOk(data => {
+      console.log("option===>", data)
       router.push(`/retirement/list/${type.value}/${currentYear}`);
     }).onCancel(() => {
     }).onDismiss(() => {

From bc9a5fc6ef354dd4b898c172b314d0c618ab6573 Mon Sep 17 00:00:00 2001
From: AnandaTon <125332905+anandaAiemvong@users.noreply.github.com>
Date: Fri, 28 Jul 2023 16:55:51 +0700
Subject: [PATCH 010/113] =?UTF-8?q?=E0=B9=81=E0=B8=81=E0=B9=89=E0=B9=84?=
 =?UTF-8?q?=E0=B8=82=20=E0=B9=80=E0=B8=9E=E0=B8=B4=E0=B9=88=E0=B8=A1?=
 =?UTF-8?q?=E0=B9=83=E0=B8=99=20pop=20up=20=E0=B8=96=E0=B8=B6=E0=B8=87?=
 =?UTF-8?q?=E0=B9=81=E0=B8=81=E0=B9=88=E0=B8=81=E0=B8=A3=E0=B8=A3=E0=B8=A1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../04_registry/components/Profile.vue        | 238 +++++++++++++++---
 1 file changed, 199 insertions(+), 39 deletions(-)

diff --git a/src/modules/04_registry/components/Profile.vue b/src/modules/04_registry/components/Profile.vue
index c56a812f0..5a58aaa59 100644
--- a/src/modules/04_registry/components/Profile.vue
+++ b/src/modules/04_registry/components/Profile.vue
@@ -387,38 +387,100 @@
   </q-dialog>
   <!-- Dialog แนบใบมรณบัตร -->
   <q-dialog v-model="dialogPassaway" persistent>
-    <q-card style="width: 100vw; max-width: 60vw">
-      <q-card-section class="q-py-sm row">
-        <div class="text-h6">แนบใบมรณบัตร</div>
-        <q-space />
-        <q-btn
-          icon="close"
-          unelevated
-          round
-          dense
-          @click="closePassaway"
-          style="color: #ff8080; background-color: #ffdede"
-        >
-          <q-tooltip>ปิดหน้านี้</q-tooltip>
-        </q-btn>
-      </q-card-section>
-      <q-separator />
-      <q-card-actions align="right">
-        <q-file
-          class="col-xs-12 col-sm-12"
-          outlined
-          dense
-          v-model="filePassaway"
-          label="แนบใบมรณบัตร"
-          hide-bottom-space
-          lazy-rules
-        >
-          <template v-slot:prepend>
-            <q-icon name="attach_file" />
-          </template>
-        </q-file>
-      </q-card-actions>
-    </q-card>
+    <div class="col-12">
+      <q-card style="width: 100vw; max-width: 60vw">
+        <q-form ref="myForm">
+          <q-card-section class="q-py-sm row">
+            <DialogHeader tittle="ถึงแก่กรรม" :close="closePassaway" />
+            <q-file
+              class="col-5"
+              outlined
+              dense
+              v-model="filePassaway"
+              label="แนบใบมรณบัตร"
+              hide-bottom-space
+              lazy-rules
+            >
+              <template v-slot:prepend>
+                <q-icon name="attach_file" />
+              </template>
+            </q-file>
+            <q-separator />
+            <q-input
+              class="col-7"
+              dense
+              outlined
+              v-model="deathCertificateNo"
+              label="เลขที่ใบมรณบัตร"
+            />
+            <q-separator />
+            <datepicker
+              class="col-5"
+              menu-class-name="modalfix"
+              v-model="dateDeath"
+              :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="dateDeath != null ? date2Thai(dateDeath) : 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>
+
+            <q-input
+              class="col-7"
+              dense
+              outlined
+              v-model="placeDeathCertificate"
+              label="สถานที่ออกใบมรณบัตร"
+            />
+            <q-separator />
+            <q-input
+              class="col-12"
+              dense
+              outlined
+              v-model="reasonDeath"
+              label="เหตุผลการเสีบชีวิต"
+              type="textarea"
+            />
+            <q-space />
+
+            <q-space />
+          </q-card-section>
+          <q-separator />
+          <DialogFooter
+            :save="clickSave"
+            :validate="validateData"
+            v-model:editvisible="edit"
+            v-model:modalEdit="modalEdit"
+          />
+        </q-form>
+      </q-card>
+    </div>
   </q-dialog>
   <!-- Dialog เลือก เกษียณ -->
   <q-dialog v-model="dialogLeave" persistent>
@@ -583,8 +645,10 @@ import { ref, onMounted } from "vue";
 import { useDataStore } from "@/stores/data";
 import { useRoute, useRouter } from "vue-router";
 import { useCounterMixin } from "@/stores/mixin";
-import { useQuasar } from "quasar";
+import { useQuasar, QForm } from "quasar";
 import EducationVue from "@/modules/04_registry/components/Education.vue";
+import DialogHeader from "@/modules/04_registry/components/DialogHeader.vue";
+import DialogFooter from "@/modules/04_registry/components/DialogFooter.vue";
 import TrainVue from "@/modules/04_registry/components/Train.vue";
 import InsigniaVue from "@/modules/04_registry/components/Insignia.vue";
 import CoinedVue from "@/modules/04_registry/components/Coin.vue";
@@ -612,6 +676,9 @@ import config from "@/app.config";
 const $q = useQuasar();
 const store = useDataStore();
 const { changeTab, loaderPage } = store;
+const reasonDeath = ref("");
+const deathCertificateNo = ref("");
+const placeDeathCertificate = ref("");
 const mixin = useCounterMixin();
 const { date2Thai, dateToISO, messageError, dialogMessage, success } = mixin;
 const route = useRoute();
@@ -620,12 +687,7 @@ const imageUrl = ref<any>(null);
 const inputImage = ref<any>(null);
 const fullname = ref<string>("");
 const position = ref<string>("นักจัดการงานทั่วไป");
-const pdfSrc = ref<string>("");
-const pdfCurrentPage = ref<number>();
-const pdfTotalPage = ref<number>();
-const pdfSrcShort = ref<string>("");
-const pdfCurrentPageShort = ref<number>();
-const pdfTotalPageShort = ref<number>();
+const dateDeath = ref<Date>(new Date());
 const dialog = ref<boolean>(false);
 const dialogShort = ref<boolean>(false);
 const dialogLeave = ref<boolean>(false);
@@ -636,6 +698,11 @@ const statusEdit = ref<boolean>(false);
 const activeImage = ref<any | null>(null);
 const filePassaway = ref(null);
 const images = ref<any>([]);
+const checkValidate = ref<boolean>(false); //validate data ผ่านหรือไม่
+const myForm = ref<QForm | null>(null); //form data input
+const edit = ref<boolean>(false); //เช็คการกดปุ่มแก้ไขใน dialog
+const modal = ref<boolean>(false); //modal add detail
+const modalEdit = ref<boolean>(false); //modal ที่แสดงใช้สำหรับแก้ไขหรือไม่
 const profileId = ref<string>(route.params.id.toString());
 const profileType = ref<string>("");
 const employeeClass = ref<string>("temp");
@@ -922,6 +989,99 @@ const clickKp7 = async () => {
   //     });
 };
 
+/**
+ * กดบันทึกใน dialog
+ */
+const clickSave = async () => {
+  myForm.value!.validate().then(async (result: boolean) => {
+    if (result) {
+      if (modalEdit.value) {
+        await editData();
+      } else {
+        await saveData();
+      }
+    }
+  });
+};
+
+/**
+ * บันทึกแก้ไขข้อมูล
+ */
+const editData = async () => {
+  //   modal.value = false;
+  //   loaderPage(true);
+  //   await http
+  //     .put(config.API.getPositionMasterId(positionMasterId.value), {
+  //       positionMasterId: positionMasterId.value,
+  //       positionTypeId: positionTypeId.value,
+  //       positionLineId: positionLineId.value,
+  //       positionPathId: positionPathId.value,
+  //       positionPathSideId: positionPathSideId.value,
+  //       positionExecutiveId: positionExecutiveId.value,
+  //       positionExecutiveSideId: positionExecutiveSideId.value,
+  //       positionLevelId: positionLevelId.value,
+  //       isDirector: isDirector.value,
+  //       positionStatusId: positionStatusId.value,
+  //       qualification: qualification.value,
+  //       positionCondition: positionCondition.value,
+  //       positionMasterUserNote: positionMasterUserNote.value,
+  //     })
+  //     .then((res) => {
+  //       success($q, "บันทึกข้อมูลร่างสำเร็จ");
+  //     })
+  //     .catch((e) => {
+  //       statusCode.value = e.response.data.status;
+  //     })
+  //     .finally(async () => {
+  //       edit.value = false;
+  //       await fetchData();
+  //     });
+};
+
+/**
+ * บันทึกเพิ่มข้อมูล
+ */
+const saveData = async () => {
+  //   modal.value = false;
+  //   loaderPage(true);
+  //   await http
+  //     .post(config.API.getPositionMaster, {
+  //       positionTypeId: positionTypeId.value,
+  //       positionLineId: positionLineId.value,
+  //       positionPathId: positionPathId.value,
+  //       positionPathSideId: positionPathSideId.value,
+  //       positionExecutiveId: positionExecutiveId.value,
+  //       positionExecutiveSideId: positionExecutiveSideId.value,
+  //       positionLevelId: positionLevelId.value,
+  //       isDirector: isDirector.value,
+  //       positionStatusId: positionStatusId.value,
+  //       qualification: qualification.value,
+  //       positionCondition: positionCondition.value,
+  //       positionMasterUserNote: positionMasterUserNote.value,
+  //     })
+  //     .then((res) => {
+  //       success($q, "บันทึกข้อมูลร่างสำเร็จ");
+  //     })
+  //     .catch((e) => {
+  //       statusCode.value = e.response.data.status;
+  //     })
+  //     .finally(async () => {
+  //       modal.value = false;
+  //       await fetchData();
+  //     });
+};
+
+/**
+ * validate input ใน dialog
+ */
+const validateData = async () => {
+  checkValidate.value = true;
+  await myForm.value!.validate().then((result: boolean) => {
+    if (result == false) {
+      checkValidate.value = false;
+    }
+  });
+};
 const downloadFilePDF = async (res: string, fileName: string) => {
   const link = document.createElement("a");
   //   link.href = window.URL.createObjectURL(new Blob([res]));

From 51c4c777e54ed39d7fcd515e94af027d82ddf730 Mon Sep 17 00:00:00 2001
From: AnandaTon <125332905+anandaAiemvong@users.noreply.github.com>
Date: Fri, 28 Jul 2023 16:57:00 +0700
Subject: [PATCH 011/113] =?UTF-8?q?=E0=B9=81=E0=B8=81=E0=B9=89=20path=20?=
 =?UTF-8?q?=E0=B8=AB=E0=B8=99=E0=B9=89=E0=B8=B2=20=E0=B8=97=E0=B8=B0?=
 =?UTF-8?q?=E0=B9=80=E0=B8=9A=E0=B8=B5=E0=B8=A2=E0=B8=99=E0=B8=9B=E0=B8=A3?=
 =?UTF-8?q?=E0=B8=B0=E0=B8=A7=E0=B8=B1=E0=B8=95=E0=B8=B4=E0=B8=A5=E0=B8=B9?=
 =?UTF-8?q?=E0=B8=81=E0=B8=88=E0=B9=89=E0=B8=B2=E0=B8=87?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/modules/08_registryEmployee/router.ts     |    2 +-
 .../08_registryEmployee/views/EditDetail.vue  |    6 +-
 .../views/Information/Information.vue         | 1132 -----------------
 .../08_registryEmployee/views/Main.vue        |    2 +-
 4 files changed, 4 insertions(+), 1138 deletions(-)
 delete mode 100644 src/modules/08_registryEmployee/views/Information/Information.vue

diff --git a/src/modules/08_registryEmployee/router.ts b/src/modules/08_registryEmployee/router.ts
index 67a4cc826..130b90438 100644
--- a/src/modules/08_registryEmployee/router.ts
+++ b/src/modules/08_registryEmployee/router.ts
@@ -47,7 +47,7 @@ export default [
     },
   },
   {
-    path: "/registryEmployee/edit/:Id",
+    path: "/registryEmployee/edit/:id",
     name: "registryEmployeeEdit",
     component: EditDetail,
     meta: {
diff --git a/src/modules/08_registryEmployee/views/EditDetail.vue b/src/modules/08_registryEmployee/views/EditDetail.vue
index 401ae0b9f..0a123b88d 100644
--- a/src/modules/08_registryEmployee/views/EditDetail.vue
+++ b/src/modules/08_registryEmployee/views/EditDetail.vue
@@ -137,11 +137,9 @@
         <div class="row items-center text-dark q-ml-md">
           <div class="column">
             <div class="text-bold q-pb-xs text-name">
-              {{ "แก้ไข้ข้อมูลทะเบียนประวัติลูกจ้างชั่วคราว" }}
-            </div>
-            <div class="text-bold q-pb-xs text-sub">
-              {{ "ลูกจ้างชั่วคราว" }}
+              {{ fullname }}{{ leaveReason }}
             </div>
+            <div>{{ position }}</div>
           </div>
         </div>
         <q-space />
diff --git a/src/modules/08_registryEmployee/views/Information/Information.vue b/src/modules/08_registryEmployee/views/Information/Information.vue
deleted file mode 100644
index ec7a1440b..000000000
--- a/src/modules/08_registryEmployee/views/Information/Information.vue
+++ /dev/null
@@ -1,1132 +0,0 @@
-<template>
-  <q-card flat bordered class="col-12 q-px-lg q-py-md">
-    <HeaderTop
-      v-model:edit="edit"
-      header="ข้อมูลส่วนตัว"
-      icon="mdi-account"
-      :save="saveData"
-      :history="!statusAdd()"
-      :changeBtn="changeBtn"
-      :disable="statusEdit"
-      :cancel="onCancel"
-      :historyClick="clickHistory"
-      :addEmployee="statusAdd()"
-    />
-    <q-form ref="myform" class="col-12">
-      <div class="row col-12 items-center q-col-gutter-x-sm q-col-gutter-y-sm">
-        <div class="col-xs-6 col-sm-3 col-md-3">
-          <q-input
-            :class="getClass(edit)"
-            hide-bottom-space
-            :outlined="edit"
-            dense
-            lazy-rules
-            :readonly="!edit"
-            :borderless="!edit"
-            v-model="informaData.cardid"
-            @update:model-value="changeCardID"
-            :rules="[
-              (val:string) => !!val || `${'กรุณากรอก เลขบัตรประจำตัวประชาชน'}`,
-              (val:string) =>
-                val.length >= 13 ||
-                `${'กรุณากรอกเลขบัตรประจำตัวประชาชนให้ครบ'}`,
-            ]"
-            label="เลขบัตรประจำตัวประชาชน"
-            maxlength="13"
-            mask="#############"
-          />
-        </div>
-        <div class="col-xs-6 col-sm-3 col-md-3">
-          <selector
-            :hide-dropdown-icon="!edit"
-            hide-bottom-space
-            :class="getClass(edit)"
-            :readonly="!edit"
-            :borderless="!edit"
-            :rules="[(val:string) => !!val || `${'กรุณาเลือก คำนำหน้าชื่อ'}`]"
-            :outlined="edit"
-            dense
-            lazy-rules
-            v-model="informaData.prefixId"
-            emit-value
-            map-options
-            option-label="name"
-            :options="Ops.prefixOps"
-            option-value="id"
-            :label="`${'คำนำหน้าชื่อ'}`"
-            use-input
-            input-debounce="0"
-            @filter="(inputValue:any,
-                      doneFn:Function) => filterSelector(inputValue, doneFn,'prefixOps'
-                      ) "
-          />
-        </div>
-
-        <div class="col-xs-6 col-sm-3 col-md-3">
-          <q-input
-            :class="getClass(edit)"
-            hide-bottom-space
-            :outlined="edit"
-            dense
-            lazy-rules
-            :readonly="!edit"
-            :borderless="!edit"
-            v-model="informaData.firstname"
-            :rules="[(val:string) => !!val || `${'กรุณากรอก ชื่อ'}`]"
-            :label="`${'ชื่อ'}`"
-          />
-        </div>
-        <div class="col-xs-6 col-sm-3 col-md-3">
-          <q-input
-            :class="getClass(edit)"
-            hide-bottom-space
-            :outlined="edit"
-            dense
-            lazy-rules
-            :readonly="!edit"
-            :borderless="!edit"
-            v-model="informaData.lastname"
-            :rules="[(val:string) => !!val || `${'กรุณากรอก นามสกุล'}`]"
-            :label="`${'นามสกุล'}`"
-          />
-        </div>
-        <div class="col-xs-6 col-sm-2 col-md-2">
-          <datepicker
-            v-model="informaData.birthDate"
-            :locale="'th'"
-            autoApply
-            :enableTimePicker="false"
-            week-start="0"
-            :max-date="new Date()"
-            :disabled="!edit"
-            @update:model-value="handleDate"
-          >
-            <template #year="{ year }">
-              {{ year + 543 }}
-            </template>
-            <template #year-overlay-value="{ value }">
-              {{ parseInt(value + 543) }}
-            </template>
-            <template #trigger>
-              <q-input
-                :class="getClass(edit)"
-                hide-bottom-space
-                :outlined="edit"
-                dense
-                lazy-rules
-                :readonly="!edit"
-                :borderless="!edit"
-                :model-value="date2Thai(informaData.birthDate)"
-                :rules="[(val:string) => !!val || `${'กรุณาเลือก วัน/เดือน/ปี เกิด'}`]"
-                :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 class="col-xs-6 col-sm-2 col-md-2">
-          <q-input
-            :class="getClass(false)"
-            hide-bottom-space
-            dense
-            lazy-rules
-            readonly
-            borderless
-            :style="!edit ? '' : 'padding:0 12px;'"
-            :model-value="informaData.age"
-            :label="`${'อายุ'}`"
-          />
-        </div>
-        <div class="col-xs-6 col-sm-2 col-md-2">
-          <selector
-            :hide-dropdown-icon="!edit"
-            hide-bottom-space
-            :class="getClass(edit)"
-            :readonly="!edit"
-            :borderless="!edit"
-            :outlined="edit"
-            dense
-            lazy-rules
-            v-model="informaData.genderId"
-            emit-value
-            map-options
-            option-label="name"
-            :options="Ops.genderOps"
-            option-value="id"
-            :label="`${'เพศ'}`"
-            use-input
-            input-debounce="0"
-            @filter="(inputValue:any,
-                      doneFn:Function) => filterSelector(inputValue, doneFn,'genderOps'
-                      ) "
-          />
-        </div>
-        <div class="col-xs-6 col-sm-2 col-md-2">
-          <selector
-            :hide-dropdown-icon="!edit"
-            hide-bottom-space
-            :class="getClass(edit)"
-            :readonly="!edit"
-            :borderless="!edit"
-            :outlined="edit"
-            dense
-            lazy-rules
-            v-model="informaData.statusId"
-            emit-value
-            map-options
-            option-label="name"
-            :options="Ops.statusOps"
-            option-value="id"
-            :label="`${'สถานภาพ'}`"
-            use-input
-            input-debounce="0"
-            @filter="(inputValue:any,
-                      doneFn:Function) => filterSelector(inputValue, doneFn,'statusOps'
-                      ) "
-          />
-        </div>
-        <div class="col-xs-6 col-sm-2 col-md-2">
-          <q-input
-            :class="getClass(edit)"
-            hide-bottom-space
-            :outlined="edit"
-            dense
-            lazy-rules
-            :readonly="!edit"
-            :borderless="!edit"
-            v-model="informaData.nationality"
-            :label="`${'สัญชาติ'}`"
-          />
-        </div>
-        <div class="col-xs-6 col-sm-2 col-md-2">
-          <q-input
-            :class="getClass(edit)"
-            hide-bottom-space
-            :outlined="edit"
-            dense
-            lazy-rules
-            :readonly="!edit"
-            :borderless="!edit"
-            v-model="informaData.ethnicity"
-            :label="`${'เชื้อชาติ'}`"
-          />
-        </div>
-        <div class="col-xs-6 col-sm-2 col-md-2">
-          <selector
-            :hide-dropdown-icon="!edit"
-            hide-bottom-space
-            :class="getClass(edit)"
-            :readonly="!edit"
-            :borderless="!edit"
-            :outlined="edit"
-            dense
-            lazy-rules
-            v-model="informaData.religionId"
-            emit-value
-            map-options
-            option-label="name"
-            :options="Ops.religionOps"
-            option-value="id"
-            :label="`${'ศาสนา'}`"
-            use-input
-            input-debounce="0"
-            @filter="(inputValue:any,
-                      doneFn:Function) => filterSelector(inputValue, doneFn,'religionOps'
-                      ) "
-          />
-        </div>
-        <div class="col-xs-6 col-sm-2 col-md-2">
-          <selector
-            :hide-dropdown-icon="!edit"
-            hide-bottom-space
-            :class="getClass(edit)"
-            :readonly="!edit"
-            :borderless="!edit"
-            :outlined="edit"
-            dense
-            lazy-rules
-            v-model="informaData.bloodId"
-            emit-value
-            map-options
-            option-label="name"
-            :options="Ops.bloodOps"
-            option-value="id"
-            :label="`${'หมู่เลือด'}`"
-            use-input
-            input-debounce="0"
-            @filter="(inputValue:any,
-                      doneFn:Function) => filterSelector(inputValue, doneFn,'bloodOps'
-                      ) "
-            clearable
-          />
-        </div>
-        <div class="col-xs-6 col-sm-2 col-md-2">
-          <q-input
-            hide-bottom-space
-            :outlined="edit"
-            dense
-            lazy-rules
-            type="tel"
-            :class="getClass(edit)"
-            :readonly="!edit"
-            :borderless="!edit"
-            v-model="informaData.tel"
-            :label="`${'เบอร์โทร'}`"
-            mask="##########"
-          />
-        </div>
-        <div
-          class="col-xs-6 col-sm-3 col-md-3"
-          v-if="informaData.profileType == 'employee'"
-        >
-          <selector
-            :hide-dropdown-icon="!edit"
-            hide-bottom-space
-            :class="getClass(edit)"
-            :readonly="!edit"
-            :borderless="!edit"
-            :rules="[(val:string) => !!val || `${'กรุณาเลือก ประเภทการจ้าง'}`]"
-            :outlined="edit"
-            dense
-            lazy-rules
-            v-model="informaData.employeeType"
-            emit-value
-            map-options
-            option-label="name"
-            :options="Ops.employeeTypeOps"
-            option-value="id"
-            :label="`${'ประเภทการจ้าง'}`"
-            use-input
-            input-debounce="0"
-            @filter="(inputValue:any,
-                      doneFn:Function) => filterSelector(inputValue, doneFn,'employeeTypeOps'
-                      ) "
-          />
-        </div>
-        <div
-          class="col-xs-6 col-sm-3 col-md-3"
-          v-if="informaData.profileType == 'employee'"
-        >
-          <selector
-            :hide-dropdown-icon="!edit"
-            hide-bottom-space
-            :class="getClass(edit)"
-            :readonly="!edit"
-            :borderless="!edit"
-            :rules="[(val:string) => !!val || `${'กรุณาเลือก ประเภทลูกจ้าง'}`]"
-            :outlined="edit"
-            dense
-            lazy-rules
-            v-model="informaData.employeeClass"
-            emit-value
-            map-options
-            option-label="name"
-            :options="Ops.employeeClassOps"
-            option-value="id"
-            :label="`${'ประเภทลูกจ้าง'}`"
-            use-input
-            input-debounce="0"
-            @filter="(inputValue:any,
-                      doneFn:Function) => filterSelector(inputValue, doneFn,'employeeClassOps'
-                      ) "
-          />
-        </div>
-        <div class="col-12 q-pt-md q-pb-sm"><q-separator /></div>
-        <div class="col-xs-12 q-col-gutter-x-sm items-center flex q-my-sm">
-          <label class="text-weight-bold">• เปลี่ยนชื่อ-นามสกุล</label>
-          <q-radio
-            v-model="same"
-            checked-icon="task_alt"
-            unchecked-icon="panorama_fish_eye"
-            val="1"
-            label="มี"
-            dense
-            :disable="!edit"
-          />
-          <q-radio
-            v-model="same"
-            checked-icon="task_alt"
-            unchecked-icon="panorama_fish_eye"
-            val="0"
-            label="ไม่มี"
-            color="grey-9"
-            dense
-            :disable="!edit"
-          />
-        </div>
-        <div class="row col-12">
-          <OldName
-            v-if="same == '1'"
-            v-model:statusEdit="edit"
-            :fetchDataInformation="fetchDataComponent"
-            :perfixId="informaData.prefixId == null ? '' : informaData.prefixId"
-            :firstname="
-              informaData.firstname == null ? '' : informaData.firstname
-            "
-            :lastname="informaData.lastname == null ? '' : informaData.lastname"
-          />
-        </div>
-      </div>
-    </q-form>
-  </q-card>
-  <HistoryTable
-    :rows="rowsHistory"
-    :columns="columnsHistory"
-    :filter="filterHistory"
-    :visible-columns="visibleColumnsHistory"
-    v-model:modal="modalHistory"
-    v-model:inputfilter="filterHistory"
-    v-model:inputvisible="visibleColumnsHistory"
-    v-model:tittle="tittleHistory"
-  >
-    <template #columns="props">
-      <q-tr :props="props">
-        <q-td v-for="col in props.cols" :key="col.name" :props="props">
-          <div
-            v-if="col.name == 'birthDate' || col.name == 'createdAt'"
-            class="table_ellipsis"
-          >
-            {{ date2Thai(col.value) }}
-          </div>
-          <div v-else class="table_ellipsis">
-            {{ col.value }}
-          </div>
-        </q-td>
-      </q-tr>
-    </template>
-  </HistoryTable>
-</template>
-<script setup lang="ts">
-import { ref, onMounted } from "vue";
-import { useCounterMixin } from "@/stores/mixin";
-import { useDataStore } from "@/stores/data";
-import { useQuasar } from "quasar";
-import type {
-  Information,
-  DataOption,
-} from "@/modules/04_registry/components/profileType";
-import { defaultInformation } from "@/modules/04_registry/components/profileType";
-import type {
-  RequestItemsHistoryObject,
-  Columns,
-} from "@/modules/04_registry/interface/request/Information";
-import type { ResponseObject } from "@/modules/04_registry/interface/response/Information";
-import type { InformationOps } from "@/modules/04_registry/interface/index/Main";
-import OldName from "@/modules/04_registry/components/Information/OldName.vue";
-import HeaderTop from "@/modules/04_registry/components/Information/top.vue";
-import HistoryTable from "@/components/TableHistory.vue";
-import http from "@/plugins/http";
-import config from "@/app.config";
-import { useRoute } from "vue-router";
-import { useProfileDataStore } from "@/modules/04_registry/store";
-import type { QTableColumn, QForm } from "quasar";
-
-const props = defineProps({
-  statusEdit: {
-    type: Boolean,
-    required: true,
-  },
-  fetchDataProfile: {
-    type: Function,
-    default: () => console.log("not function"),
-  },
-  statusAdd: {
-    type: Boolean,
-    default: false,
-  },
-});
-const emit = defineEmits(["update:statusEdit"]);
-
-const route = useRoute();
-const $q = useQuasar();
-const mixin = useCounterMixin();
-const { date2Thai, success, dateToISO, messageError, dialogMessage } = mixin;
-const dataStore = useDataStore();
-const { loaderPage } = dataStore;
-const profileStore = useProfileDataStore();
-const { changeRetireText, changeBirth } = profileStore;
-const edit = ref<boolean>(false);
-const defaultCitizenData = ref<string | null>("");
-const informaData = ref<Information>(defaultInformation);
-const rowsHistory = ref<RequestItemsHistoryObject[]>([]); //select data history
-const tittleHistory = ref<string>("ประวัติแก้ไขข้อมูลส่วนตัว"); //
-const filterHistory = ref<string>(""); //search data table history
-const modalHistory = ref<boolean>(false); //modal ประวัติการแก้ไขข้อมูล
-const myform = ref<QForm | null>(null);
-const dateBefore = ref<Date>(new Date());
-const same = ref<string>("0");
-const Ops = ref<InformationOps>({
-  prefixOps: [],
-  prefixOldOps: [],
-  genderOps: [],
-  bloodOps: [],
-  statusOps: [],
-  religionOps: [],
-  employeeClassOps: [
-    { id: "perm", name: "ลูกจ้างประจำ" },
-    { id: "temp", name: "ลูกจ้างชั่วคราว" },
-  ],
-  employeeTypeOps: [
-    { id: "gov", name: "งบประมาณเงินอุดหนุนรัฐบาล" },
-    { id: "bkk", name: "งบประมาณกรุงเทพมหานคร" },
-  ],
-});
-const OpsFilter = ref<InformationOps>({
-  prefixOps: [],
-  prefixOldOps: [],
-  genderOps: [],
-  bloodOps: [],
-  statusOps: [],
-  religionOps: [],
-  employeeClassOps: [
-    { id: "perm", name: "ลูกจ้างประจำ" },
-    { id: "temp", name: "ลูกจ้างชั่วคราว" },
-  ],
-  employeeTypeOps: [
-    { id: "gov", name: "งบประมาณเงินอุดหนุนรัฐบาล" },
-    { id: "bkk", name: "งบประมาณกรุงเทพมหานคร" },
-  ],
-});
-const columnsHistory = ref<QTableColumn[]>([
-  {
-    name: "citizenId",
-    align: "left",
-    label: "เลขบัตรประจำตัวประชาชน",
-    sortable: true,
-    field: "citizenId",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "prefix",
-    align: "left",
-    label: "คำนำหน้าชื่อ",
-    sortable: true,
-    field: "prefix",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "firstName",
-    align: "left",
-    label: "ชื่อ",
-    sortable: true,
-    field: "firstName",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "lastName",
-    align: "left",
-    label: "นามสกุล",
-    sortable: true,
-    field: "lastName",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "birthDate",
-    align: "left",
-    label: "วัน/เดือน/ปี เกิด",
-    sortable: true,
-    field: "birthDate",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "gender",
-    align: "left",
-    label: "เพศ",
-    sortable: true,
-    field: "gender",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "relationship",
-    align: "left",
-    label: "สถานภาพ",
-    sortable: true,
-    field: "relationship",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "bloodGroup",
-    align: "left",
-    label: "หมู่เลือด",
-    sortable: true,
-    field: "bloodGroup",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "nationality",
-    align: "left",
-    label: "สัญชาติ",
-    sortable: true,
-    field: "nationality",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "race",
-    align: "left",
-    label: "เชื้อชาติ",
-    sortable: true,
-    field: "race",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "religion",
-    align: "left",
-    label: "ศาสนา",
-    sortable: true,
-    field: "religion",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "telephoneNumber",
-    align: "left",
-    label: "เบอร์โทร",
-    sortable: true,
-    field: "telephoneNumber",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "employeeType",
-    align: "left",
-    label: "ประเภทการจ้าง",
-    sortable: true,
-    field: "employeeType",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "employeeClass",
-    align: "left",
-    label: "ประเภทลูกจ้าง",
-    sortable: true,
-    field: "employeeClass",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "createdFullName",
-    align: "left",
-    label: "ผู้ดำเนินการ",
-    sortable: true,
-    field: "createdFullName",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "createdAt",
-    align: "left",
-    label: "วันที่แก้ไข",
-    sortable: true,
-    field: "createdAt",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-]);
-const visibleColumnsHistory = ref<String[]>([
-  "citizenId",
-  "prefix",
-  "firstName",
-  "lastName",
-  "birthDate",
-  "gender",
-  "relationship",
-  "bloodGroup",
-  "nationality",
-  "race",
-  "religion",
-  "telephoneNumber",
-  "employeeType",
-  "employeeClass",
-  "createdFullName",
-  "createdAt",
-]);
-
-onMounted(async () => {
-  await fetchPerson();
-  await fetchData();
-  emit("update:statusEdit", false);
-  defaultAdd();
-});
-
-const statusAdd = () => props.statusAdd;
-
-const defaultAdd = () => {
-  if (props.statusAdd) {
-    edit.value = props.statusAdd;
-    informaData.value = {
-      cardid: null,
-      age: null,
-      prefix: null,
-      prefixId: null,
-      firstname: null,
-      lastname: null,
-      birthDate: new Date(),
-      genderId: null,
-      bloodId: null,
-      nationality: null,
-      ethnicity: null,
-      statusId: null,
-      religionId: null,
-      tel: null,
-      employeeType: null,
-      employeeClass: null,
-      profileType: null,
-    };
-  }
-};
-
-const onCancel = async () => {
-  if (myform.value != null) {
-    myform.value.reset();
-  }
-  await fetchData();
-};
-
-/**
- * get รายการ ข้อมูลเกี่ยวกับบุคคล
- */
-const fetchPerson = async () => {
-  loaderPage(true);
-  await http
-    .get(config.API.person)
-    .then((res) => {
-      const data = res.data.result;
-      let optionbloodGroups: DataOption[] = [];
-      data.bloodGroups.map((r: any) => {
-        optionbloodGroups.push({
-          id: r.id.toString(),
-          name: r.name.toString(),
-        });
-      });
-      Ops.value.bloodOps = optionbloodGroups;
-      OpsFilter.value.bloodOps = optionbloodGroups;
-
-      let optiongenders: DataOption[] = [];
-      data.genders.map((r: any) => {
-        optiongenders.push({
-          id: r.id.toString(),
-          name: r.name.toString(),
-        });
-      });
-      Ops.value.genderOps = optiongenders;
-      OpsFilter.value.genderOps = optiongenders;
-
-      let optionprefixs: DataOption[] = [];
-      data.prefixs.map((r: any) => {
-        optionprefixs.push({
-          id: r.id.toString(),
-          name: r.name.toString(),
-        });
-      });
-      Ops.value.prefixOps = optionprefixs;
-      OpsFilter.value.prefixOps = optionprefixs;
-
-      let optionrelationships: DataOption[] = [];
-      data.relationships.map((r: any) => {
-        optionrelationships.push({
-          id: r.id.toString(),
-          name: r.name.toString(),
-        });
-      });
-      Ops.value.statusOps = optionrelationships;
-      OpsFilter.value.statusOps = optionrelationships;
-
-      let optionreligions: DataOption[] = [];
-      data.religions.map((r: any) => {
-        optionreligions.push({
-          id: r.id.toString(),
-          name: r.name.toString(),
-        });
-      });
-      Ops.value.religionOps = optionreligions;
-      OpsFilter.value.religionOps = optionreligions;
-    })
-    .catch((e: any) => {})
-    .finally(() => {
-      loaderPage(false);
-    });
-};
-
-const changeCardID = (value: string | number | null) => {
-  if (value != null && typeof value == "string") {
-    if (value.length == 13 && value != defaultCitizenData.value) {
-      dialogMessage(
-        $q,
-        "ข้อมูลมีการแก้ไข?",
-        "ยืนยันการเปลี่ยนเลขบัตรประชาชนใช่หรือไม่",
-        "info",
-        "ยืนยัน",
-        "public",
-        async () => {
-          await checkCitizen(value);
-        },
-        async () => {
-          informaData.value.cardid = defaultCitizenData.value;
-        }
-      );
-    }
-  }
-};
-
-const checkCitizen = async (id: string) => {
-  loaderPage(true);
-  await http
-    .get(config.API.profileCitizenId(id))
-    .then((res) => {
-      const data = res.data.result.citizen;
-
-      if (!data) {
-        dialogMessage(
-          $q,
-          "ข้อความแจ้งเตือน",
-          "เลขบัตรประจำตัวประชาชนนี้มีการใช้งานแล้ว",
-          "warning",
-          undefined,
-          "orange",
-          undefined,
-          undefined,
-          true
-        );
-        informaData.value.cardid = defaultCitizenData.value;
-      }
-    })
-    .catch((e) => {
-      messageError($q, e);
-    })
-    .finally(() => {
-      loaderPage(false);
-    });
-};
-
-/**
- * ฟังชั้นดูข้อมูลประวัติแก้ไขข้อมูลที่เลือก
- */
-const clickHistory = async () => {
-  modalHistory.value = true;
-  loaderPage(true);
-  await http
-    .get(config.API.profileInforHisId(route.params.id.toString()))
-    .then((res) => {
-      let data = res.data.result;
-      rowsHistory.value = [];
-      data.map((e: RequestItemsHistoryObject) => {
-        rowsHistory.value.push({
-          citizenId: e.citizenId,
-          prefix: e.prefix,
-          firstName: e.firstName,
-          lastName: e.lastName,
-          birthDate: new Date(e.birthDate),
-          gender: e.gender,
-          relationship: e.relationship,
-          bloodGroup: e.bloodGroup,
-          nationality: e.nationality,
-          race: e.race,
-          religion: e.religion,
-          telephoneNumber: e.telephoneNumber,
-          employeeType:
-            e.employeeType == "gov"
-              ? "งบประมาณเงินอุดหนุนรัฐบาล"
-              : e.employeeType == "bkk"
-              ? "งบประมาณกรุงเทพมหานคร"
-              : "-",
-          employeeClass:
-            e.employeeClass == "perm"
-              ? "ลูกจ้างประจำ"
-              : e.employeeClass == "temp"
-              ? "ลูกจ้างชั่วคราว"
-              : "-",
-          createdFullName: e.createdFullName,
-          createdAt: new Date(e.createdAt),
-        });
-      });
-    })
-    .catch((e) => {
-      messageError($q, e);
-    })
-    .finally(() => {
-      loaderPage(false);
-    });
-};
-
-const filterSelector = (val: any, update: Function, refData: string) => {
-  switch (refData) {
-    case "prefixOps":
-      update(() => {
-        Ops.value.prefixOps = OpsFilter.value.prefixOps.filter(
-          (v: DataOption) => v.name.indexOf(val) > -1
-        );
-      });
-      break;
-    case "genderOps":
-      update(() => {
-        Ops.value.genderOps = OpsFilter.value.genderOps.filter(
-          (v: DataOption) => v.name.indexOf(val) > -1
-        );
-      });
-      break;
-    case "bloodOps":
-      update(() => {
-        Ops.value.bloodOps = OpsFilter.value.bloodOps.filter(
-          (v: DataOption) => v.name.indexOf(val) > -1
-        );
-      });
-      break;
-    case "statusOps":
-      update(() => {
-        Ops.value.statusOps = OpsFilter.value.statusOps.filter(
-          (v: DataOption) => v.name.indexOf(val) > -1
-        );
-      });
-      break;
-    case "religionOps":
-      update(() => {
-        Ops.value.religionOps = OpsFilter.value.religionOps.filter(
-          (v: DataOption) => v.name.indexOf(val) > -1
-        );
-      });
-      break;
-    case "employeeClassOps":
-      update(() => {
-        Ops.value.employeeClassOps = OpsFilter.value.employeeClassOps.filter(
-          (v: DataOption) => v.name.indexOf(val) > -1
-        );
-      });
-      break;
-    case "employeeTypeOps":
-      update(() => {
-        Ops.value.employeeTypeOps = OpsFilter.value.employeeTypeOps.filter(
-          (v: DataOption) => v.name.indexOf(val) > -1
-        );
-      });
-      break;
-
-    default:
-      break;
-  }
-};
-
-const handleDate = async (modelData: Date) => {
-  informaData.value.birthDate = modelData;
-  await calRetire(modelData);
-};
-
-const fetchDataComponent = async (modelData: Date) => {
-  await props.fetchDataProfile();
-  await fetchData();
-};
-
-const calRetire = async (birth: Date) => {
-  const body = {
-    birthDate: dateToISO(birth),
-  };
-  if (dateToISO(dateBefore.value) != dateToISO(birth)) {
-    loaderPage(true);
-    await http
-      .post(config.API.profileCalRetire, body)
-      .then((res: any) => {
-        const data = res.data.result;
-        informaData.value.age = data.age;
-        changeRetireText(data.retireDate);
-        dateBefore.value = birth;
-      })
-      .catch((e: any) => {
-        messageError($q, e);
-        const retire = new Date(`${birth.getFullYear() + 60}-09-30`);
-        informaData.value.birthDate = dateBefore.value;
-        changeRetireText(date2Thai(retire));
-      })
-      .finally(() => {
-        loaderPage(false);
-      });
-  }
-};
-
-const fetchData = async () => {
-  if (route.params.id) {
-    loaderPage(true);
-    await http
-      .get(config.API.profileInforId(route.params.id.toString()))
-      .then(async (res: any) => {
-        const data: ResponseObject = res.data.result;
-        defaultCitizenData.value = data.citizenId;
-        informaData.value.cardid = data.citizenId;
-        informaData.value.prefix = "";
-        informaData.value.prefixId = data.prefixId;
-        informaData.value.firstname = data.firstName;
-        informaData.value.lastname = data.lastName;
-        informaData.value.birthDate = new Date(data.birthDate);
-        informaData.value.genderId = data.genderId;
-        informaData.value.bloodId = data.bloodGroupId;
-        informaData.value.nationality = data.nationality;
-        informaData.value.ethnicity = data.race;
-        informaData.value.statusId = data.relationshipId;
-        informaData.value.religionId = data.religionId;
-        informaData.value.tel = data.telephoneNumber;
-        informaData.value.age = data.age;
-        informaData.value.employeeType = data.employeeType;
-        informaData.value.employeeClass = data.employeeClass;
-        informaData.value.profileType = data.profileType;
-        dateBefore.value = new Date(data.birthDate);
-        same.value = data.changeName == true ? "1" : "0";
-        await calRetire(new Date(dateToISO(new Date(data.birthDate))));
-        if (
-          data.profileType == "officer" &&
-          columnsHistory.value.length >= 15
-        ) {
-          columnsHistory.value.splice(13, 1);
-          columnsHistory.value.splice(12, 1);
-        }
-      })
-      .catch((e) => {
-        messageError($q, e);
-      })
-      .finally(async () => {
-        //   loaderPage(false);
-        await props.fetchDataProfile();
-      });
-  }
-};
-
-const editData = async () => {
-  const body: any = {
-    citizenId: informaData.value.cardid,
-    prefixId: informaData.value.prefixId,
-    firstName: informaData.value.firstname,
-    lastName: informaData.value.lastname,
-    genderId: informaData.value.genderId,
-    nationality: informaData.value.nationality,
-    race: informaData.value.ethnicity,
-    religionId: informaData.value.religionId,
-    birthDate: dateToISO(informaData.value.birthDate) ?? dateToISO(new Date()),
-    bloodGroupId: informaData.value.bloodId,
-    relationshipId: informaData.value.statusId,
-    telephoneNumber: informaData.value.tel,
-    createdAt: new Date(),
-    age: null,
-    employeeType: informaData.value.employeeType,
-    employeeClass: informaData.value.employeeClass,
-    profileType: informaData.value.profileType,
-    createdFullName: "-",
-  };
-  loaderPage(true);
-  await http
-    .put(config.API.profileInforId(route.params.id.toString()), body)
-    .then((res) => {
-      success($q, "บันทึกข้อมูลสำเร็จ");
-    })
-    .catch((e) => {
-      messageError($q, e);
-    })
-    .finally(async () => {
-      edit.value = false;
-      emit("update:statusEdit", false);
-      await fetchData();
-      await changeBirth(informaData.value.birthDate ?? new Date());
-    });
-};
-
-const addData = async () => {
-  //     loaderPage(true);
-  //   await http
-  //     .put(config.API.profileInforId(route.params.id.toString()), body)
-  //     .then((res) => {
-  //       success($q, "บันทึกข้อมูลสำเร็จ");
-  //     })
-  //     .catch((e) => {
-  //       messageError($q, e);
-  //     })
-  //     .finally(async () => {
-  //       edit.value = false;
-  //       emit("update:statusEdit", false);
-  //       await fetchData();
-  //       await changeBirth(informaData.value.birthDate ?? new Date());
-  //     });
-};
-
-const saveData = async () => {
-  if (myform.value != null) {
-    await myform.value.validate().then(async (success: boolean) => {
-      if (success) {
-        if (props.statusAdd) {
-          await addData();
-        } else {
-          await editData();
-        }
-      } else {
-      }
-    });
-  }
-};
-
-const changeBtn = async () => {
-  if (edit.value == true) {
-    if (props.statusEdit === true) {
-      edit.value = false;
-    } else {
-      emit("update:statusEdit", true);
-    }
-  } else {
-    emit("update:statusEdit", false);
-  }
-};
-
-const getClass = (val: boolean) => {
-  return {
-    "full-width inputgreen cursor-pointer": val,
-    "full-width cursor-pointer": !val,
-  };
-};
-</script>
diff --git a/src/modules/08_registryEmployee/views/Main.vue b/src/modules/08_registryEmployee/views/Main.vue
index e343d616c..4e5908aea 100644
--- a/src/modules/08_registryEmployee/views/Main.vue
+++ b/src/modules/08_registryEmployee/views/Main.vue
@@ -1355,7 +1355,7 @@ const clickAdd = () => {
 
 // ดูรายการแก้ไขรายชื่อ
 const redirectToPage = (id?: string) => {
-  router.push(`/registry/${id}`);
+  router.push(`/registryEmployee/edit/${id}`);
 };
 const editDetail = async (row: any) => {
   await getPosition(row.id);

From b6553b5fb17095fca29d0ea7123f3646dbe42812 Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Fri, 28 Jul 2023 17:05:09 +0700
Subject: [PATCH 012/113] =?UTF-8?q?=E0=B9=81=E0=B8=81=E0=B9=89=E0=B9=84?=
 =?UTF-8?q?=E0=B8=82=E0=B9=80=E0=B8=95=E0=B8=A3=E0=B8=B5=E0=B8=A2=E0=B8=A1?=
 =?UTF-8?q?=E0=B8=9A=E0=B8=A3=E0=B8=A3=E0=B8=88=E0=B8=B8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/05_placement/api.placement.ts         |  2 +
 .../components/PersonalList/OrgTree.vue       | 59 +++++++++++++++++--
 .../components/PersonalList/Table.vue         | 15 ++++-
 .../components/PersonalList/TableDetail.vue   | 42 ++++++-------
 4 files changed, 90 insertions(+), 28 deletions(-)

diff --git a/src/api/05_placement/api.placement.ts b/src/api/05_placement/api.placement.ts
index 4c1b74def..6be4c2dde 100644
--- a/src/api/05_placement/api.placement.ts
+++ b/src/api/05_placement/api.placement.ts
@@ -48,4 +48,6 @@ export default {
   placementPosition: () => `${placement}/position/use`,
   // putPositiom
   putPosition: (id:any) => `${placement}/position/${id}`,
+  // clear Position
+  clearPosition: (personalId:string) => `${placement}/position/clear/${personalId}`
 };
diff --git a/src/modules/05_placement/components/PersonalList/OrgTree.vue b/src/modules/05_placement/components/PersonalList/OrgTree.vue
index ba0f63366..2197e30a8 100644
--- a/src/modules/05_placement/components/PersonalList/OrgTree.vue
+++ b/src/modules/05_placement/components/PersonalList/OrgTree.vue
@@ -95,6 +95,8 @@ const fetchplacementPosition = async () => {
   await http
     .get(config.API.placementPosition())
     .then((res: any) => {
+      console.log("1221111111");
+
       placementPosition.value = res.data.result;
     })
     .catch((e: any) => {
@@ -277,7 +279,7 @@ const positionLevelOptions = ref<Object[]>([
 ]);
 
 const selectedPosition = async (data: any) => {
-  console.log("selecteds", data);
+  // console.log("selecteds", data);
   if (data.name == null && selected.value != data.keyId) {
     // console.log("selecteds", data);
 
@@ -361,7 +363,7 @@ const selectedPosition = async (data: any) => {
     dataForm.positionPathSideId = "";
     dataForm.positionTypeId = "";
   }
-  console.log("dataForm", dataForm);
+  // console.log("dataForm", dataForm);
 };
 
 const checkPosition = (val: string) => {
@@ -374,6 +376,7 @@ const expanded = ref<string[]>([]);
 watch(props, () => {
   expanded.value = [];
   const dataPersonal = props.personal;
+  fetchplacementPosition();
   if (dataPersonal) {
     dataPersonal.map((data: any) => {
       personal.value = data;
@@ -382,15 +385,19 @@ watch(props, () => {
   }
   // console.log("draft===>", personal.value.draft);
 
-  if (personal.value && personal.value.draft === false) {
+  if (
+    personal.value &&
+    personal.value.draft === false &&
+    personal.value.positionNumber !== null
+  ) {
     // const findData = dataRespone.value.find(findByPerson);
     let findData: any = null;
     dataRespone.value.map((x: any) => {
       findData = findByPerson(x);
-      console.log(findData);
+      // console.log(findData);
 
       if (findData != null) {
-        console.log("findData===>", findData);
+        // console.log("findData===>", findData);
         selectedPosition(findData);
         for (let i = 3; i <= findData.keyId.length; i += 2) {
           expanded.value.push(findData.keyId.slice(0, i));
@@ -423,6 +430,34 @@ function findByPerson(element: any): any {
   }
   return null;
 }
+const clearPosition = () => {
+  console.log(personal.value);
+  $q.dialog({
+    title: "ยืนยันการคืนตำแหน่ง",
+    message: "ต้องการยืนยันการคืนตำแหน่งนี้ใช่หรือไม่ ?",
+    cancel: {
+      flat: true,
+      const: "negative",
+    },
+    persistent: true,
+  })
+    .onOk(async () => {
+      showLoader();
+      await http
+        .post(config.API.clearPosition(personal.value.personalId), {})
+        .then((res: Object) => success($q, "คืนตำแหน่งสำเร็จ"))
+
+        .catch((e: Object) => {
+          console.log(e);
+        })
+        .finally(async () => {
+          hideLoader();
+          await closeAndClear();
+        });
+    })
+    .onCancel(() => {})
+    .onDismiss(() => {});
+};
 </script>
 
 <template>
@@ -707,6 +742,20 @@ function findByPerson(element: any): any {
                         map-options
                       />
                     </div>
+                    <div
+                      class="col-xs-12 col-sm-12 col-md-12 q-pa-lg"
+                      v-if="personal.positionNumber"
+                    >
+                      <div class="row">
+                        <div class="col-md-4 offset-md-4">
+                          <q-btn
+                            color="grey"
+                            label="คืนตำแหน่ง"
+                            @click="clearPosition"
+                          ></q-btn>
+                        </div>
+                      </div>
+                    </div>
                     <!-- <div class="col-sx-12 col-sm-12 col-md-12">
                       <q-separator inset size="2px" class="q-my-md" />
                     </div> -->
diff --git a/src/modules/05_placement/components/PersonalList/Table.vue b/src/modules/05_placement/components/PersonalList/Table.vue
index aff05ffc6..c72e71208 100644
--- a/src/modules/05_placement/components/PersonalList/Table.vue
+++ b/src/modules/05_placement/components/PersonalList/Table.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, onMounted, watch, reactive, computed } from "vue";
+import { ref, onMounted, watch, reactive, computed, watchEffect } from "vue";
 import { useQuasar, QForm } from "quasar";
 import type { QTableProps } from "quasar";
 import { useCounterMixin } from "@/stores/mixin";
@@ -209,7 +209,7 @@ const getTable = async () => {
   await http
     .get(config.API.personalList(examIdString))
     .then(async (res: any) => {
-      console.log(res);
+      // console.log(res);
       dataRes.value = res.data.result;
       rowsAll.value = [];
       (rowsFilter.value = []),
@@ -252,7 +252,9 @@ const getTable = async () => {
         ? rowsAll.value
         : rowsAll.value.filter((x: any) => x.statusId != "CONTAIN");
 
-      rowsFilter.value = rows.value.filter((e: any) => e.draft == "รอส่งตัว");
+      rowsFilter.value = rows.value.filter(
+        (e: any) => e.draft == "รอส่งตัว" && e.positionNumber == null
+      );
       console.log(rowsFilter.value);
     })
     .catch((e) => {
@@ -433,6 +435,7 @@ const openAppointModal = (pid: string) => {
 const clickCloseModalTree = async () => {
   await getTable();
   appointModal.value = false;
+  props.statCard();
 };
 
 const validateData = async () => {
@@ -492,6 +495,11 @@ onMounted(async () => {
   }
   await getTable();
 });
+watchEffect(() => {
+  if (getTable()) {
+    props.statCard();
+  }
+});
 
 const containStatus = ref<boolean>(false);
 watch(containStatus, () => {
@@ -532,6 +540,7 @@ const savelist = () => {
         })
         .finally(async () => {
           await getTable();
+
           hideLoader();
         });
     });
diff --git a/src/modules/05_placement/components/PersonalList/TableDetail.vue b/src/modules/05_placement/components/PersonalList/TableDetail.vue
index b21720df0..cdbea6068 100644
--- a/src/modules/05_placement/components/PersonalList/TableDetail.vue
+++ b/src/modules/05_placement/components/PersonalList/TableDetail.vue
@@ -93,6 +93,7 @@ watch(props, () => {
   }
 });
 
+
 const validateData = () => {
   const selectedIds = personalForm.value.isProperty;
 
@@ -105,24 +106,24 @@ const validateData = () => {
   );
 };
 
-const ClickSave = () => {
-  const isValid = validateData();
+// const ClickSave = () => {
+//   const isValid = validateData();
 
-  if (isValid) {
-    // props.close();
-    // props.validate();
-    // putpersonalForm();
-    modalConfirm(
-      $q,
-      "การยืนยัน",
-      "ยืนยันการบันทึกการคัดกรองคุณสมบัติ",
-      putpersonalForm
-    );
-  } else {
-    success($q, "กรอกให้ครบ");
-    console.log();
-  }
-};
+//   if (isValid) {
+//     // props.close();
+//     // props.validate();
+//     // putpersonalForm();
+//     modalConfirm(
+//       $q,
+//       "การยืนยัน",
+//       "ยืนยันการบันทึกการคัดกรองคุณสมบัติ",
+//       putpersonalForm
+//     );
+//   } else {
+//     success($q, "กรอกให้ครบ");
+//     console.log();
+//   }
+// };
 const fetchData = async () => {
   showLoader();
   await http
@@ -134,7 +135,7 @@ const fetchData = async () => {
           university: e.name,
           degree: e.degree,
           major: e.field,
-          graduation: e.finishDate,
+          graduation: date2Thai(e.finishDate),
         });
       });
     })
@@ -145,6 +146,7 @@ const fetchData = async () => {
       hideLoader();
     });
 };
+
 const formBmaofficer = (val: string) => {
   switch (val) {
     case "OFFICER":
@@ -345,7 +347,7 @@ const putpersonalForm = async () => {
             </q-card>
           </div>
         </div>
-        <q-separator />
+        <!-- <q-separator />
         <div>
           <DialogFooter
             @click="ClickSave"
@@ -353,7 +355,7 @@ const putpersonalForm = async () => {
             :editvisible="save"
             :validate="validateData"
           />
-        </div>
+        </div> -->
       </q-form>
     </q-card>
   </q-dialog>

From d1f1ba817cfaa8eb6d5e75427cb7c123ece530a6 Mon Sep 17 00:00:00 2001
From: waruneeta <warunee.auy@gmail.com>
Date: Fri, 28 Jul 2023 17:25:26 +0700
Subject: [PATCH 013/113] =?UTF-8?q?popup=20=E0=B9=80=E0=B8=AB=E0=B8=95?=
 =?UTF-8?q?=E0=B8=B8=E0=B8=9C=E0=B8=A5=E0=B9=81=E0=B8=81=E0=B9=89=E0=B9=84?=
 =?UTF-8?q?=E0=B8=82=E0=B9=80=E0=B8=81=E0=B8=A9=E0=B8=B5=E0=B8=A2=E0=B8=93?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/ListRetirement/TableList.vue   | 166 +++++-------------
 1 file changed, 43 insertions(+), 123 deletions(-)

diff --git a/src/modules/06_retirement/components/ListRetirement/TableList.vue b/src/modules/06_retirement/components/ListRetirement/TableList.vue
index 22704c6c7..33ef58904 100644
--- a/src/modules/06_retirement/components/ListRetirement/TableList.vue
+++ b/src/modules/06_retirement/components/ListRetirement/TableList.vue
@@ -34,15 +34,15 @@ const columns = ref<any["columns"]>([
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
- /*  {
-    name: "fixname",
-    align: "left",
-    label: "คำนำหน้านาม",
-    title: "คำนำหน้านาม",
-    field: "fixname",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-  }, */
+  /*  {
+     name: "fixname",
+     align: "left",
+     label: "คำนำหน้านาม",
+     title: "คำนำหน้านาม",
+     field: "fixname",
+     headerStyle: "font-size: 14px",
+     style: "font-size: 14px",
+   }, */
   {
     name: "name",
     align: "left",
@@ -253,8 +253,8 @@ const clickDelete = (prop: any) => {
           } else await fecthlist(retireld_params);
         });
     })
-    .onCancel(() => {})
-    .onDismiss(() => {});
+    .onCancel(() => { })
+    .onDismiss(() => { });
 };
 // note
 const fetchReason = async (prop: string) => {
@@ -269,6 +269,7 @@ const fetchReason = async (prop: string) => {
       messageError($q, e);
     });
 };
+
 const saveNote = () => {
   $q.dialog({
     title: "ยืนยันการบันทึกข้อมูลข้อมูล",
@@ -297,8 +298,8 @@ const saveNote = () => {
           modalNote.value = false;
         });
     })
-    .onCancel(() => {})
-    .onDismiss(() => {});
+    .onCancel(() => { })
+    .onDismiss(() => { });
 };
 
 const UpdateListId = (retireld: string, pId: string) => {
@@ -361,26 +362,13 @@ const paginationLabel = (start: number, end: number, total: number) => {
 
 <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="backHistory"
-    />
+    <q-btn icon="mdi-arrow-left" unelevated round dense flat color="primary" class="q-mr-sm" @click="backHistory" />
     รายชื่อผู้เกษียณอายุราชการ
   </div>
   <div>
     <q-card class="col-12 q-pa-md">
       <div class="row col-12 q-pb-sm">
-        <AddList
-          :retireld="retireld"
-          :profile-id="profileId"
-          :UpdateListId="UpdateListId"
-        />
+        <AddList :retireld="retireld" :profile-id="profileId" :UpdateListId="UpdateListId" />
         <!-- <q-btn flat round style="color: #016987;" icon="save" @click="saveList">
           <q-tooltip>บันทึกข้อมูล</q-tooltip>
         </q-btn> -->
@@ -409,35 +397,15 @@ const paginationLabel = (start: number, end: number, total: number) => {
 
         <q-space />
         <q-tabs shrink>
-          <q-input
-            borderless
-            outlined
-            dense
-            debounce="300"
-            v-model="filter"
-            placeholder="ค้นหา"
-            style="max-width: 200px"
-            class="q-ml-sm"
-          >
+          <q-input borderless outlined dense debounce="300" v-model="filter" placeholder="ค้นหา" style="max-width: 200px"
+            class="q-ml-sm">
             <template v-slot:append>
               <q-icon name="search" />
             </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="gt-xs q-ml-sm"
-          >
+          <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="gt-xs q-ml-sm">
             <!-- <template v-slot:option="{ opt }">
               <div>{{ opt.label }}</div>
               <div class="sublabel">{{ opt.sublabel }}</div>
@@ -447,20 +415,9 @@ const paginationLabel = (start: number, end: number, total: number) => {
       </div>
 
       <div>
-        <q-table
-          flat
-          dense
-          bordered
-          :rows="rows"
-          :columns="columns"
-          row-key="order"
-          class="custom-header-table"
-          :filter="filter"
-          :visible-columns="visibleColumns"
-          no-data-label="ไม่มีข้อมูล"
-          :pagination-label="paginationLabel"
-          v-model:pagination="pagination"
-        >
+        <q-table flat dense bordered :rows="rows" :columns="columns" row-key="order" class="custom-header-table"
+          :filter="filter" :visible-columns="visibleColumns" no-data-label="ไม่มีข้อมูล"
+          :pagination-label="paginationLabel" v-model:pagination="pagination">
           <template v-slot:header="props">
             <q-tr :props="props">
               <q-th v-for="col in props.cols" :key="col.name" :props="props">
@@ -476,11 +433,10 @@ const paginationLabel = (start: number, end: number, total: number) => {
             </q-tr>
           </template>
           <template v-slot:body="props">
-            <q-tr
-              :props="props"
-              class="cursor-pointer"
-              :style="props.row.profileId === profileId && 'color: #26a69a;'"
-            >
+            <q-tr :props="props" class="cursor-pointer" :style="props.row.profileId === profileId && 'color: #26a69a;'"
+              @click="
+                fetchReason(props.row.id), (modalNote = true), (note = '')
+                ">
               <q-td key="order" :props="props">{{ props.row.order }} </q-td>
               <!-- <q-td key="fixname" :props="props">{{ props.row.fixname }}</q-td> -->
               <q-td key="name" :props="props">{{ props.row.fixname + props.row.name }}</q-td>
@@ -521,40 +477,20 @@ const paginationLabel = (start: number, end: number, total: number) => {
                 >
                   <q-tooltip>โน้ต</q-tooltip></q-btn
                 > -->
-                <q-btn
-                  flat
-                  round
-                  color="blue"
-                  dense
-                  icon="mdi-file-account"
-                  @click="router.push(`/registry/${props.row.profileId}`)"
-                >
+                <q-btn flat round color="blue" dense icon="mdi-file-account"
+                  @click="router.push(`/registry/${props.row.profileId}`)">
                   <q-tooltip>ดูข้อมูลทะเบียนประวัติ</q-tooltip>
                 </q-btn>
               </q-td>
               <q-td auto-width>
-                <q-btn
-                  flat
-                  round
-                  class="text-red-14"
-                  icon="mdi-delete"
-                  dense
-                  @click="clickDelete(props.row)"
-                  ><q-tooltip>ลบข้อมูล</q-tooltip></q-btn
-                >
+                <q-btn flat round class="text-red-14" icon="mdi-delete" dense
+                  @click="clickDelete(props.row)"><q-tooltip>ลบข้อมูล</q-tooltip></q-btn>
               </q-td>
             </q-tr>
           </template>
           <template v-slot:pagination="scope">
-            <q-pagination
-              v-model="pagination.page"
-              color="primary"
-              :max="scope.pagesNumber"
-              :max-pages="5"
-              size="sm"
-              boundary-links
-              direction-links
-            ></q-pagination>
+            <q-pagination v-model="pagination.page" color="primary" :max="scope.pagesNumber" :max-pages="5" size="sm"
+              boundary-links direction-links></q-pagination>
           </template>
         </q-table>
       </div>
@@ -566,38 +502,19 @@ const paginationLabel = (start: number, end: number, total: number) => {
     <q-card style="width: 700px; max-width: 80vw">
       <q-card-section class="q-pt-none">
         <q-toolbar class="q-py-md">
-          <q-toolbar-title class="header-text text-weight-bolder"
-            >กรอกเหตุผล
+          <q-toolbar-title class="header-text text-weight-bolder">กรอกเหตุผล
           </q-toolbar-title>
-          <q-btn
-            icon="close"
-            unelevated
-            round
-            dense
-            @click="modalNote = false"
-            style="color: #ff8080; background-color: #ffdede"
-          />
+          <q-btn icon="close" unelevated round dense @click="modalNote = false"
+            style="color: #ff8080; background-color: #ffdede" />
         </q-toolbar>
       </q-card-section>
       <q-card-section class="q-pt-none">
-        <q-input
-          outlined
-          dense
-          lazy-rules
-          v-model="note"
-          :rules="[(val) => !!val || 'กรุณากรอกเหตุผล']"
-          :label="`${'กรอกเหตุผล'}`"
-          type="textarea"
-        />
+        <q-input outlined dense lazy-rules v-model="note" :rules="[(val) => !!val || 'กรุณากรอกเหตุผล']"
+          :label="`${'กรอกเหตุผล'}`" type="textarea" />
       </q-card-section>
 
       <q-card-actions align="right">
-        <q-btn
-          label="บักทึก"
-          color="secondary"
-          @click="saveNote"
-          :disable="visibleNote"
-        />
+        <q-btn label="บักทึก" color="secondary" @click="saveNote" :disable="visibleNote" />
       </q-card-actions>
     </q-card>
   </q-dialog>
@@ -623,13 +540,16 @@ const paginationLabel = (start: number, end: number, total: number) => {
     position: sticky;
     z-index: 1;
   }
+
   .q-table thead tr:last-child th {
     top: 48px;
   }
+
   .q-table thead tr:first-child th {
     top: 0;
   }
 }
+
 .q-btn-dropdown__arrow {
   display: none;
 }

From de0c00baca143175c3b9ff1eae035511c76e1d8d Mon Sep 17 00:00:00 2001
From: AnandaTon <125332905+anandaAiemvong@users.noreply.github.com>
Date: Fri, 28 Jul 2023 17:29:47 +0700
Subject: [PATCH 014/113] =?UTF-8?q?Set=20Date=20=E0=B9=80=E0=B8=9B?=
 =?UTF-8?q?=E0=B9=87=E0=B8=99=20null=20=E0=B9=83=E0=B8=99=E0=B8=AB?=
 =?UTF-8?q?=E0=B8=99=E0=B9=89=E0=B8=B2=E0=B9=80=E0=B8=9E=E0=B8=B4=E0=B9=88?=
 =?UTF-8?q?=E0=B8=A1=E0=B8=82=E0=B9=89=E0=B8=AD=E0=B8=A1=E0=B8=B9=E0=B8=A5?=
 =?UTF-8?q?=E0=B8=A5=E0=B8=B9=E0=B8=81=E0=B8=88=E0=B9=89=E0=B8=B2=E0=B8=87?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../04_registry/components/profileType.ts     |    4 +-
 .../views/Information/Information.vue         | 1132 +++++++++++++++++
 .../08_registryEmployee/views/information.vue |    8 +-
 3 files changed, 1140 insertions(+), 4 deletions(-)
 create mode 100644 src/modules/08_registryEmployee/views/Information/Information.vue

diff --git a/src/modules/04_registry/components/profileType.ts b/src/modules/04_registry/components/profileType.ts
index e0cefd668..ab3b28b22 100644
--- a/src/modules/04_registry/components/profileType.ts
+++ b/src/modules/04_registry/components/profileType.ts
@@ -14,7 +14,7 @@ interface Information {
   prefixId: string | null;
   firstname: string | null;
   lastname: string | null;
-  birthDate: Date;
+  birthDate: Date | null;
   genderId: string | null;
   bloodId: string | null;
   nationality: string | null;
@@ -135,7 +135,7 @@ const defaultInformation: Information = {
   prefixId: null,
   firstname: null,
   lastname: null,
-  birthDate: new Date(),
+  birthDate: null,
   genderId: null,
   bloodId: null,
   nationality: null,
diff --git a/src/modules/08_registryEmployee/views/Information/Information.vue b/src/modules/08_registryEmployee/views/Information/Information.vue
new file mode 100644
index 000000000..ec7a1440b
--- /dev/null
+++ b/src/modules/08_registryEmployee/views/Information/Information.vue
@@ -0,0 +1,1132 @@
+<template>
+  <q-card flat bordered class="col-12 q-px-lg q-py-md">
+    <HeaderTop
+      v-model:edit="edit"
+      header="ข้อมูลส่วนตัว"
+      icon="mdi-account"
+      :save="saveData"
+      :history="!statusAdd()"
+      :changeBtn="changeBtn"
+      :disable="statusEdit"
+      :cancel="onCancel"
+      :historyClick="clickHistory"
+      :addEmployee="statusAdd()"
+    />
+    <q-form ref="myform" class="col-12">
+      <div class="row col-12 items-center q-col-gutter-x-sm q-col-gutter-y-sm">
+        <div class="col-xs-6 col-sm-3 col-md-3">
+          <q-input
+            :class="getClass(edit)"
+            hide-bottom-space
+            :outlined="edit"
+            dense
+            lazy-rules
+            :readonly="!edit"
+            :borderless="!edit"
+            v-model="informaData.cardid"
+            @update:model-value="changeCardID"
+            :rules="[
+              (val:string) => !!val || `${'กรุณากรอก เลขบัตรประจำตัวประชาชน'}`,
+              (val:string) =>
+                val.length >= 13 ||
+                `${'กรุณากรอกเลขบัตรประจำตัวประชาชนให้ครบ'}`,
+            ]"
+            label="เลขบัตรประจำตัวประชาชน"
+            maxlength="13"
+            mask="#############"
+          />
+        </div>
+        <div class="col-xs-6 col-sm-3 col-md-3">
+          <selector
+            :hide-dropdown-icon="!edit"
+            hide-bottom-space
+            :class="getClass(edit)"
+            :readonly="!edit"
+            :borderless="!edit"
+            :rules="[(val:string) => !!val || `${'กรุณาเลือก คำนำหน้าชื่อ'}`]"
+            :outlined="edit"
+            dense
+            lazy-rules
+            v-model="informaData.prefixId"
+            emit-value
+            map-options
+            option-label="name"
+            :options="Ops.prefixOps"
+            option-value="id"
+            :label="`${'คำนำหน้าชื่อ'}`"
+            use-input
+            input-debounce="0"
+            @filter="(inputValue:any,
+                      doneFn:Function) => filterSelector(inputValue, doneFn,'prefixOps'
+                      ) "
+          />
+        </div>
+
+        <div class="col-xs-6 col-sm-3 col-md-3">
+          <q-input
+            :class="getClass(edit)"
+            hide-bottom-space
+            :outlined="edit"
+            dense
+            lazy-rules
+            :readonly="!edit"
+            :borderless="!edit"
+            v-model="informaData.firstname"
+            :rules="[(val:string) => !!val || `${'กรุณากรอก ชื่อ'}`]"
+            :label="`${'ชื่อ'}`"
+          />
+        </div>
+        <div class="col-xs-6 col-sm-3 col-md-3">
+          <q-input
+            :class="getClass(edit)"
+            hide-bottom-space
+            :outlined="edit"
+            dense
+            lazy-rules
+            :readonly="!edit"
+            :borderless="!edit"
+            v-model="informaData.lastname"
+            :rules="[(val:string) => !!val || `${'กรุณากรอก นามสกุล'}`]"
+            :label="`${'นามสกุล'}`"
+          />
+        </div>
+        <div class="col-xs-6 col-sm-2 col-md-2">
+          <datepicker
+            v-model="informaData.birthDate"
+            :locale="'th'"
+            autoApply
+            :enableTimePicker="false"
+            week-start="0"
+            :max-date="new Date()"
+            :disabled="!edit"
+            @update:model-value="handleDate"
+          >
+            <template #year="{ year }">
+              {{ year + 543 }}
+            </template>
+            <template #year-overlay-value="{ value }">
+              {{ parseInt(value + 543) }}
+            </template>
+            <template #trigger>
+              <q-input
+                :class="getClass(edit)"
+                hide-bottom-space
+                :outlined="edit"
+                dense
+                lazy-rules
+                :readonly="!edit"
+                :borderless="!edit"
+                :model-value="date2Thai(informaData.birthDate)"
+                :rules="[(val:string) => !!val || `${'กรุณาเลือก วัน/เดือน/ปี เกิด'}`]"
+                :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 class="col-xs-6 col-sm-2 col-md-2">
+          <q-input
+            :class="getClass(false)"
+            hide-bottom-space
+            dense
+            lazy-rules
+            readonly
+            borderless
+            :style="!edit ? '' : 'padding:0 12px;'"
+            :model-value="informaData.age"
+            :label="`${'อายุ'}`"
+          />
+        </div>
+        <div class="col-xs-6 col-sm-2 col-md-2">
+          <selector
+            :hide-dropdown-icon="!edit"
+            hide-bottom-space
+            :class="getClass(edit)"
+            :readonly="!edit"
+            :borderless="!edit"
+            :outlined="edit"
+            dense
+            lazy-rules
+            v-model="informaData.genderId"
+            emit-value
+            map-options
+            option-label="name"
+            :options="Ops.genderOps"
+            option-value="id"
+            :label="`${'เพศ'}`"
+            use-input
+            input-debounce="0"
+            @filter="(inputValue:any,
+                      doneFn:Function) => filterSelector(inputValue, doneFn,'genderOps'
+                      ) "
+          />
+        </div>
+        <div class="col-xs-6 col-sm-2 col-md-2">
+          <selector
+            :hide-dropdown-icon="!edit"
+            hide-bottom-space
+            :class="getClass(edit)"
+            :readonly="!edit"
+            :borderless="!edit"
+            :outlined="edit"
+            dense
+            lazy-rules
+            v-model="informaData.statusId"
+            emit-value
+            map-options
+            option-label="name"
+            :options="Ops.statusOps"
+            option-value="id"
+            :label="`${'สถานภาพ'}`"
+            use-input
+            input-debounce="0"
+            @filter="(inputValue:any,
+                      doneFn:Function) => filterSelector(inputValue, doneFn,'statusOps'
+                      ) "
+          />
+        </div>
+        <div class="col-xs-6 col-sm-2 col-md-2">
+          <q-input
+            :class="getClass(edit)"
+            hide-bottom-space
+            :outlined="edit"
+            dense
+            lazy-rules
+            :readonly="!edit"
+            :borderless="!edit"
+            v-model="informaData.nationality"
+            :label="`${'สัญชาติ'}`"
+          />
+        </div>
+        <div class="col-xs-6 col-sm-2 col-md-2">
+          <q-input
+            :class="getClass(edit)"
+            hide-bottom-space
+            :outlined="edit"
+            dense
+            lazy-rules
+            :readonly="!edit"
+            :borderless="!edit"
+            v-model="informaData.ethnicity"
+            :label="`${'เชื้อชาติ'}`"
+          />
+        </div>
+        <div class="col-xs-6 col-sm-2 col-md-2">
+          <selector
+            :hide-dropdown-icon="!edit"
+            hide-bottom-space
+            :class="getClass(edit)"
+            :readonly="!edit"
+            :borderless="!edit"
+            :outlined="edit"
+            dense
+            lazy-rules
+            v-model="informaData.religionId"
+            emit-value
+            map-options
+            option-label="name"
+            :options="Ops.religionOps"
+            option-value="id"
+            :label="`${'ศาสนา'}`"
+            use-input
+            input-debounce="0"
+            @filter="(inputValue:any,
+                      doneFn:Function) => filterSelector(inputValue, doneFn,'religionOps'
+                      ) "
+          />
+        </div>
+        <div class="col-xs-6 col-sm-2 col-md-2">
+          <selector
+            :hide-dropdown-icon="!edit"
+            hide-bottom-space
+            :class="getClass(edit)"
+            :readonly="!edit"
+            :borderless="!edit"
+            :outlined="edit"
+            dense
+            lazy-rules
+            v-model="informaData.bloodId"
+            emit-value
+            map-options
+            option-label="name"
+            :options="Ops.bloodOps"
+            option-value="id"
+            :label="`${'หมู่เลือด'}`"
+            use-input
+            input-debounce="0"
+            @filter="(inputValue:any,
+                      doneFn:Function) => filterSelector(inputValue, doneFn,'bloodOps'
+                      ) "
+            clearable
+          />
+        </div>
+        <div class="col-xs-6 col-sm-2 col-md-2">
+          <q-input
+            hide-bottom-space
+            :outlined="edit"
+            dense
+            lazy-rules
+            type="tel"
+            :class="getClass(edit)"
+            :readonly="!edit"
+            :borderless="!edit"
+            v-model="informaData.tel"
+            :label="`${'เบอร์โทร'}`"
+            mask="##########"
+          />
+        </div>
+        <div
+          class="col-xs-6 col-sm-3 col-md-3"
+          v-if="informaData.profileType == 'employee'"
+        >
+          <selector
+            :hide-dropdown-icon="!edit"
+            hide-bottom-space
+            :class="getClass(edit)"
+            :readonly="!edit"
+            :borderless="!edit"
+            :rules="[(val:string) => !!val || `${'กรุณาเลือก ประเภทการจ้าง'}`]"
+            :outlined="edit"
+            dense
+            lazy-rules
+            v-model="informaData.employeeType"
+            emit-value
+            map-options
+            option-label="name"
+            :options="Ops.employeeTypeOps"
+            option-value="id"
+            :label="`${'ประเภทการจ้าง'}`"
+            use-input
+            input-debounce="0"
+            @filter="(inputValue:any,
+                      doneFn:Function) => filterSelector(inputValue, doneFn,'employeeTypeOps'
+                      ) "
+          />
+        </div>
+        <div
+          class="col-xs-6 col-sm-3 col-md-3"
+          v-if="informaData.profileType == 'employee'"
+        >
+          <selector
+            :hide-dropdown-icon="!edit"
+            hide-bottom-space
+            :class="getClass(edit)"
+            :readonly="!edit"
+            :borderless="!edit"
+            :rules="[(val:string) => !!val || `${'กรุณาเลือก ประเภทลูกจ้าง'}`]"
+            :outlined="edit"
+            dense
+            lazy-rules
+            v-model="informaData.employeeClass"
+            emit-value
+            map-options
+            option-label="name"
+            :options="Ops.employeeClassOps"
+            option-value="id"
+            :label="`${'ประเภทลูกจ้าง'}`"
+            use-input
+            input-debounce="0"
+            @filter="(inputValue:any,
+                      doneFn:Function) => filterSelector(inputValue, doneFn,'employeeClassOps'
+                      ) "
+          />
+        </div>
+        <div class="col-12 q-pt-md q-pb-sm"><q-separator /></div>
+        <div class="col-xs-12 q-col-gutter-x-sm items-center flex q-my-sm">
+          <label class="text-weight-bold">• เปลี่ยนชื่อ-นามสกุล</label>
+          <q-radio
+            v-model="same"
+            checked-icon="task_alt"
+            unchecked-icon="panorama_fish_eye"
+            val="1"
+            label="มี"
+            dense
+            :disable="!edit"
+          />
+          <q-radio
+            v-model="same"
+            checked-icon="task_alt"
+            unchecked-icon="panorama_fish_eye"
+            val="0"
+            label="ไม่มี"
+            color="grey-9"
+            dense
+            :disable="!edit"
+          />
+        </div>
+        <div class="row col-12">
+          <OldName
+            v-if="same == '1'"
+            v-model:statusEdit="edit"
+            :fetchDataInformation="fetchDataComponent"
+            :perfixId="informaData.prefixId == null ? '' : informaData.prefixId"
+            :firstname="
+              informaData.firstname == null ? '' : informaData.firstname
+            "
+            :lastname="informaData.lastname == null ? '' : informaData.lastname"
+          />
+        </div>
+      </div>
+    </q-form>
+  </q-card>
+  <HistoryTable
+    :rows="rowsHistory"
+    :columns="columnsHistory"
+    :filter="filterHistory"
+    :visible-columns="visibleColumnsHistory"
+    v-model:modal="modalHistory"
+    v-model:inputfilter="filterHistory"
+    v-model:inputvisible="visibleColumnsHistory"
+    v-model:tittle="tittleHistory"
+  >
+    <template #columns="props">
+      <q-tr :props="props">
+        <q-td v-for="col in props.cols" :key="col.name" :props="props">
+          <div
+            v-if="col.name == 'birthDate' || col.name == 'createdAt'"
+            class="table_ellipsis"
+          >
+            {{ date2Thai(col.value) }}
+          </div>
+          <div v-else class="table_ellipsis">
+            {{ col.value }}
+          </div>
+        </q-td>
+      </q-tr>
+    </template>
+  </HistoryTable>
+</template>
+<script setup lang="ts">
+import { ref, onMounted } from "vue";
+import { useCounterMixin } from "@/stores/mixin";
+import { useDataStore } from "@/stores/data";
+import { useQuasar } from "quasar";
+import type {
+  Information,
+  DataOption,
+} from "@/modules/04_registry/components/profileType";
+import { defaultInformation } from "@/modules/04_registry/components/profileType";
+import type {
+  RequestItemsHistoryObject,
+  Columns,
+} from "@/modules/04_registry/interface/request/Information";
+import type { ResponseObject } from "@/modules/04_registry/interface/response/Information";
+import type { InformationOps } from "@/modules/04_registry/interface/index/Main";
+import OldName from "@/modules/04_registry/components/Information/OldName.vue";
+import HeaderTop from "@/modules/04_registry/components/Information/top.vue";
+import HistoryTable from "@/components/TableHistory.vue";
+import http from "@/plugins/http";
+import config from "@/app.config";
+import { useRoute } from "vue-router";
+import { useProfileDataStore } from "@/modules/04_registry/store";
+import type { QTableColumn, QForm } from "quasar";
+
+const props = defineProps({
+  statusEdit: {
+    type: Boolean,
+    required: true,
+  },
+  fetchDataProfile: {
+    type: Function,
+    default: () => console.log("not function"),
+  },
+  statusAdd: {
+    type: Boolean,
+    default: false,
+  },
+});
+const emit = defineEmits(["update:statusEdit"]);
+
+const route = useRoute();
+const $q = useQuasar();
+const mixin = useCounterMixin();
+const { date2Thai, success, dateToISO, messageError, dialogMessage } = mixin;
+const dataStore = useDataStore();
+const { loaderPage } = dataStore;
+const profileStore = useProfileDataStore();
+const { changeRetireText, changeBirth } = profileStore;
+const edit = ref<boolean>(false);
+const defaultCitizenData = ref<string | null>("");
+const informaData = ref<Information>(defaultInformation);
+const rowsHistory = ref<RequestItemsHistoryObject[]>([]); //select data history
+const tittleHistory = ref<string>("ประวัติแก้ไขข้อมูลส่วนตัว"); //
+const filterHistory = ref<string>(""); //search data table history
+const modalHistory = ref<boolean>(false); //modal ประวัติการแก้ไขข้อมูล
+const myform = ref<QForm | null>(null);
+const dateBefore = ref<Date>(new Date());
+const same = ref<string>("0");
+const Ops = ref<InformationOps>({
+  prefixOps: [],
+  prefixOldOps: [],
+  genderOps: [],
+  bloodOps: [],
+  statusOps: [],
+  religionOps: [],
+  employeeClassOps: [
+    { id: "perm", name: "ลูกจ้างประจำ" },
+    { id: "temp", name: "ลูกจ้างชั่วคราว" },
+  ],
+  employeeTypeOps: [
+    { id: "gov", name: "งบประมาณเงินอุดหนุนรัฐบาล" },
+    { id: "bkk", name: "งบประมาณกรุงเทพมหานคร" },
+  ],
+});
+const OpsFilter = ref<InformationOps>({
+  prefixOps: [],
+  prefixOldOps: [],
+  genderOps: [],
+  bloodOps: [],
+  statusOps: [],
+  religionOps: [],
+  employeeClassOps: [
+    { id: "perm", name: "ลูกจ้างประจำ" },
+    { id: "temp", name: "ลูกจ้างชั่วคราว" },
+  ],
+  employeeTypeOps: [
+    { id: "gov", name: "งบประมาณเงินอุดหนุนรัฐบาล" },
+    { id: "bkk", name: "งบประมาณกรุงเทพมหานคร" },
+  ],
+});
+const columnsHistory = ref<QTableColumn[]>([
+  {
+    name: "citizenId",
+    align: "left",
+    label: "เลขบัตรประจำตัวประชาชน",
+    sortable: true,
+    field: "citizenId",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "prefix",
+    align: "left",
+    label: "คำนำหน้าชื่อ",
+    sortable: true,
+    field: "prefix",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "firstName",
+    align: "left",
+    label: "ชื่อ",
+    sortable: true,
+    field: "firstName",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "lastName",
+    align: "left",
+    label: "นามสกุล",
+    sortable: true,
+    field: "lastName",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "birthDate",
+    align: "left",
+    label: "วัน/เดือน/ปี เกิด",
+    sortable: true,
+    field: "birthDate",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "gender",
+    align: "left",
+    label: "เพศ",
+    sortable: true,
+    field: "gender",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "relationship",
+    align: "left",
+    label: "สถานภาพ",
+    sortable: true,
+    field: "relationship",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "bloodGroup",
+    align: "left",
+    label: "หมู่เลือด",
+    sortable: true,
+    field: "bloodGroup",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "nationality",
+    align: "left",
+    label: "สัญชาติ",
+    sortable: true,
+    field: "nationality",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "race",
+    align: "left",
+    label: "เชื้อชาติ",
+    sortable: true,
+    field: "race",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "religion",
+    align: "left",
+    label: "ศาสนา",
+    sortable: true,
+    field: "religion",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "telephoneNumber",
+    align: "left",
+    label: "เบอร์โทร",
+    sortable: true,
+    field: "telephoneNumber",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "employeeType",
+    align: "left",
+    label: "ประเภทการจ้าง",
+    sortable: true,
+    field: "employeeType",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "employeeClass",
+    align: "left",
+    label: "ประเภทลูกจ้าง",
+    sortable: true,
+    field: "employeeClass",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "createdFullName",
+    align: "left",
+    label: "ผู้ดำเนินการ",
+    sortable: true,
+    field: "createdFullName",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "createdAt",
+    align: "left",
+    label: "วันที่แก้ไข",
+    sortable: true,
+    field: "createdAt",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+]);
+const visibleColumnsHistory = ref<String[]>([
+  "citizenId",
+  "prefix",
+  "firstName",
+  "lastName",
+  "birthDate",
+  "gender",
+  "relationship",
+  "bloodGroup",
+  "nationality",
+  "race",
+  "religion",
+  "telephoneNumber",
+  "employeeType",
+  "employeeClass",
+  "createdFullName",
+  "createdAt",
+]);
+
+onMounted(async () => {
+  await fetchPerson();
+  await fetchData();
+  emit("update:statusEdit", false);
+  defaultAdd();
+});
+
+const statusAdd = () => props.statusAdd;
+
+const defaultAdd = () => {
+  if (props.statusAdd) {
+    edit.value = props.statusAdd;
+    informaData.value = {
+      cardid: null,
+      age: null,
+      prefix: null,
+      prefixId: null,
+      firstname: null,
+      lastname: null,
+      birthDate: new Date(),
+      genderId: null,
+      bloodId: null,
+      nationality: null,
+      ethnicity: null,
+      statusId: null,
+      religionId: null,
+      tel: null,
+      employeeType: null,
+      employeeClass: null,
+      profileType: null,
+    };
+  }
+};
+
+const onCancel = async () => {
+  if (myform.value != null) {
+    myform.value.reset();
+  }
+  await fetchData();
+};
+
+/**
+ * get รายการ ข้อมูลเกี่ยวกับบุคคล
+ */
+const fetchPerson = async () => {
+  loaderPage(true);
+  await http
+    .get(config.API.person)
+    .then((res) => {
+      const data = res.data.result;
+      let optionbloodGroups: DataOption[] = [];
+      data.bloodGroups.map((r: any) => {
+        optionbloodGroups.push({
+          id: r.id.toString(),
+          name: r.name.toString(),
+        });
+      });
+      Ops.value.bloodOps = optionbloodGroups;
+      OpsFilter.value.bloodOps = optionbloodGroups;
+
+      let optiongenders: DataOption[] = [];
+      data.genders.map((r: any) => {
+        optiongenders.push({
+          id: r.id.toString(),
+          name: r.name.toString(),
+        });
+      });
+      Ops.value.genderOps = optiongenders;
+      OpsFilter.value.genderOps = optiongenders;
+
+      let optionprefixs: DataOption[] = [];
+      data.prefixs.map((r: any) => {
+        optionprefixs.push({
+          id: r.id.toString(),
+          name: r.name.toString(),
+        });
+      });
+      Ops.value.prefixOps = optionprefixs;
+      OpsFilter.value.prefixOps = optionprefixs;
+
+      let optionrelationships: DataOption[] = [];
+      data.relationships.map((r: any) => {
+        optionrelationships.push({
+          id: r.id.toString(),
+          name: r.name.toString(),
+        });
+      });
+      Ops.value.statusOps = optionrelationships;
+      OpsFilter.value.statusOps = optionrelationships;
+
+      let optionreligions: DataOption[] = [];
+      data.religions.map((r: any) => {
+        optionreligions.push({
+          id: r.id.toString(),
+          name: r.name.toString(),
+        });
+      });
+      Ops.value.religionOps = optionreligions;
+      OpsFilter.value.religionOps = optionreligions;
+    })
+    .catch((e: any) => {})
+    .finally(() => {
+      loaderPage(false);
+    });
+};
+
+const changeCardID = (value: string | number | null) => {
+  if (value != null && typeof value == "string") {
+    if (value.length == 13 && value != defaultCitizenData.value) {
+      dialogMessage(
+        $q,
+        "ข้อมูลมีการแก้ไข?",
+        "ยืนยันการเปลี่ยนเลขบัตรประชาชนใช่หรือไม่",
+        "info",
+        "ยืนยัน",
+        "public",
+        async () => {
+          await checkCitizen(value);
+        },
+        async () => {
+          informaData.value.cardid = defaultCitizenData.value;
+        }
+      );
+    }
+  }
+};
+
+const checkCitizen = async (id: string) => {
+  loaderPage(true);
+  await http
+    .get(config.API.profileCitizenId(id))
+    .then((res) => {
+      const data = res.data.result.citizen;
+
+      if (!data) {
+        dialogMessage(
+          $q,
+          "ข้อความแจ้งเตือน",
+          "เลขบัตรประจำตัวประชาชนนี้มีการใช้งานแล้ว",
+          "warning",
+          undefined,
+          "orange",
+          undefined,
+          undefined,
+          true
+        );
+        informaData.value.cardid = defaultCitizenData.value;
+      }
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      loaderPage(false);
+    });
+};
+
+/**
+ * ฟังชั้นดูข้อมูลประวัติแก้ไขข้อมูลที่เลือก
+ */
+const clickHistory = async () => {
+  modalHistory.value = true;
+  loaderPage(true);
+  await http
+    .get(config.API.profileInforHisId(route.params.id.toString()))
+    .then((res) => {
+      let data = res.data.result;
+      rowsHistory.value = [];
+      data.map((e: RequestItemsHistoryObject) => {
+        rowsHistory.value.push({
+          citizenId: e.citizenId,
+          prefix: e.prefix,
+          firstName: e.firstName,
+          lastName: e.lastName,
+          birthDate: new Date(e.birthDate),
+          gender: e.gender,
+          relationship: e.relationship,
+          bloodGroup: e.bloodGroup,
+          nationality: e.nationality,
+          race: e.race,
+          religion: e.religion,
+          telephoneNumber: e.telephoneNumber,
+          employeeType:
+            e.employeeType == "gov"
+              ? "งบประมาณเงินอุดหนุนรัฐบาล"
+              : e.employeeType == "bkk"
+              ? "งบประมาณกรุงเทพมหานคร"
+              : "-",
+          employeeClass:
+            e.employeeClass == "perm"
+              ? "ลูกจ้างประจำ"
+              : e.employeeClass == "temp"
+              ? "ลูกจ้างชั่วคราว"
+              : "-",
+          createdFullName: e.createdFullName,
+          createdAt: new Date(e.createdAt),
+        });
+      });
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      loaderPage(false);
+    });
+};
+
+const filterSelector = (val: any, update: Function, refData: string) => {
+  switch (refData) {
+    case "prefixOps":
+      update(() => {
+        Ops.value.prefixOps = OpsFilter.value.prefixOps.filter(
+          (v: DataOption) => v.name.indexOf(val) > -1
+        );
+      });
+      break;
+    case "genderOps":
+      update(() => {
+        Ops.value.genderOps = OpsFilter.value.genderOps.filter(
+          (v: DataOption) => v.name.indexOf(val) > -1
+        );
+      });
+      break;
+    case "bloodOps":
+      update(() => {
+        Ops.value.bloodOps = OpsFilter.value.bloodOps.filter(
+          (v: DataOption) => v.name.indexOf(val) > -1
+        );
+      });
+      break;
+    case "statusOps":
+      update(() => {
+        Ops.value.statusOps = OpsFilter.value.statusOps.filter(
+          (v: DataOption) => v.name.indexOf(val) > -1
+        );
+      });
+      break;
+    case "religionOps":
+      update(() => {
+        Ops.value.religionOps = OpsFilter.value.religionOps.filter(
+          (v: DataOption) => v.name.indexOf(val) > -1
+        );
+      });
+      break;
+    case "employeeClassOps":
+      update(() => {
+        Ops.value.employeeClassOps = OpsFilter.value.employeeClassOps.filter(
+          (v: DataOption) => v.name.indexOf(val) > -1
+        );
+      });
+      break;
+    case "employeeTypeOps":
+      update(() => {
+        Ops.value.employeeTypeOps = OpsFilter.value.employeeTypeOps.filter(
+          (v: DataOption) => v.name.indexOf(val) > -1
+        );
+      });
+      break;
+
+    default:
+      break;
+  }
+};
+
+const handleDate = async (modelData: Date) => {
+  informaData.value.birthDate = modelData;
+  await calRetire(modelData);
+};
+
+const fetchDataComponent = async (modelData: Date) => {
+  await props.fetchDataProfile();
+  await fetchData();
+};
+
+const calRetire = async (birth: Date) => {
+  const body = {
+    birthDate: dateToISO(birth),
+  };
+  if (dateToISO(dateBefore.value) != dateToISO(birth)) {
+    loaderPage(true);
+    await http
+      .post(config.API.profileCalRetire, body)
+      .then((res: any) => {
+        const data = res.data.result;
+        informaData.value.age = data.age;
+        changeRetireText(data.retireDate);
+        dateBefore.value = birth;
+      })
+      .catch((e: any) => {
+        messageError($q, e);
+        const retire = new Date(`${birth.getFullYear() + 60}-09-30`);
+        informaData.value.birthDate = dateBefore.value;
+        changeRetireText(date2Thai(retire));
+      })
+      .finally(() => {
+        loaderPage(false);
+      });
+  }
+};
+
+const fetchData = async () => {
+  if (route.params.id) {
+    loaderPage(true);
+    await http
+      .get(config.API.profileInforId(route.params.id.toString()))
+      .then(async (res: any) => {
+        const data: ResponseObject = res.data.result;
+        defaultCitizenData.value = data.citizenId;
+        informaData.value.cardid = data.citizenId;
+        informaData.value.prefix = "";
+        informaData.value.prefixId = data.prefixId;
+        informaData.value.firstname = data.firstName;
+        informaData.value.lastname = data.lastName;
+        informaData.value.birthDate = new Date(data.birthDate);
+        informaData.value.genderId = data.genderId;
+        informaData.value.bloodId = data.bloodGroupId;
+        informaData.value.nationality = data.nationality;
+        informaData.value.ethnicity = data.race;
+        informaData.value.statusId = data.relationshipId;
+        informaData.value.religionId = data.religionId;
+        informaData.value.tel = data.telephoneNumber;
+        informaData.value.age = data.age;
+        informaData.value.employeeType = data.employeeType;
+        informaData.value.employeeClass = data.employeeClass;
+        informaData.value.profileType = data.profileType;
+        dateBefore.value = new Date(data.birthDate);
+        same.value = data.changeName == true ? "1" : "0";
+        await calRetire(new Date(dateToISO(new Date(data.birthDate))));
+        if (
+          data.profileType == "officer" &&
+          columnsHistory.value.length >= 15
+        ) {
+          columnsHistory.value.splice(13, 1);
+          columnsHistory.value.splice(12, 1);
+        }
+      })
+      .catch((e) => {
+        messageError($q, e);
+      })
+      .finally(async () => {
+        //   loaderPage(false);
+        await props.fetchDataProfile();
+      });
+  }
+};
+
+const editData = async () => {
+  const body: any = {
+    citizenId: informaData.value.cardid,
+    prefixId: informaData.value.prefixId,
+    firstName: informaData.value.firstname,
+    lastName: informaData.value.lastname,
+    genderId: informaData.value.genderId,
+    nationality: informaData.value.nationality,
+    race: informaData.value.ethnicity,
+    religionId: informaData.value.religionId,
+    birthDate: dateToISO(informaData.value.birthDate) ?? dateToISO(new Date()),
+    bloodGroupId: informaData.value.bloodId,
+    relationshipId: informaData.value.statusId,
+    telephoneNumber: informaData.value.tel,
+    createdAt: new Date(),
+    age: null,
+    employeeType: informaData.value.employeeType,
+    employeeClass: informaData.value.employeeClass,
+    profileType: informaData.value.profileType,
+    createdFullName: "-",
+  };
+  loaderPage(true);
+  await http
+    .put(config.API.profileInforId(route.params.id.toString()), body)
+    .then((res) => {
+      success($q, "บันทึกข้อมูลสำเร็จ");
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(async () => {
+      edit.value = false;
+      emit("update:statusEdit", false);
+      await fetchData();
+      await changeBirth(informaData.value.birthDate ?? new Date());
+    });
+};
+
+const addData = async () => {
+  //     loaderPage(true);
+  //   await http
+  //     .put(config.API.profileInforId(route.params.id.toString()), body)
+  //     .then((res) => {
+  //       success($q, "บันทึกข้อมูลสำเร็จ");
+  //     })
+  //     .catch((e) => {
+  //       messageError($q, e);
+  //     })
+  //     .finally(async () => {
+  //       edit.value = false;
+  //       emit("update:statusEdit", false);
+  //       await fetchData();
+  //       await changeBirth(informaData.value.birthDate ?? new Date());
+  //     });
+};
+
+const saveData = async () => {
+  if (myform.value != null) {
+    await myform.value.validate().then(async (success: boolean) => {
+      if (success) {
+        if (props.statusAdd) {
+          await addData();
+        } else {
+          await editData();
+        }
+      } else {
+      }
+    });
+  }
+};
+
+const changeBtn = async () => {
+  if (edit.value == true) {
+    if (props.statusEdit === true) {
+      edit.value = false;
+    } else {
+      emit("update:statusEdit", true);
+    }
+  } else {
+    emit("update:statusEdit", false);
+  }
+};
+
+const getClass = (val: boolean) => {
+  return {
+    "full-width inputgreen cursor-pointer": val,
+    "full-width cursor-pointer": !val,
+  };
+};
+</script>
diff --git a/src/modules/08_registryEmployee/views/information.vue b/src/modules/08_registryEmployee/views/information.vue
index ade1f0cfd..6be674a11 100644
--- a/src/modules/08_registryEmployee/views/information.vue
+++ b/src/modules/08_registryEmployee/views/information.vue
@@ -117,7 +117,11 @@
                 lazy-rules
                 :readonly="!edit"
                 :borderless="!edit"
-                :model-value="date2Thai(informaData.birthDate)"
+                :model-value="
+                  informaData.birthDate == null
+                    ? null
+                    : date2Thai(informaData.birthDate)
+                "
                 :rules="[(val:string) => !!val || `${'กรุณาเลือก วัน/เดือน/ปี เกิด'}`]"
                 :label="`${'วัน/เดือน/ปี เกิด'}`"
               >
@@ -692,7 +696,7 @@ const defaultAdd = () => {
     prefixId: null,
     firstname: null,
     lastname: null,
-    birthDate: new Date(),
+    birthDate: null,
     genderId: null,
     bloodId: null,
     nationality: null,

From 4f9bf01f95a80c728da48715ce32a2e0dc7d8fa7 Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Fri, 28 Jul 2023 17:44:08 +0700
Subject: [PATCH 015/113] =?UTF-8?q?=E0=B9=81=E0=B8=81=E0=B9=89=E0=B9=84?=
 =?UTF-8?q?=E0=B8=82=E0=B9=89=20filter=20=E0=B8=AA=E0=B9=88=E0=B8=87?=
 =?UTF-8?q?=E0=B8=A3=E0=B8=B2=E0=B8=A2=E0=B8=8A=E0=B8=B7=E0=B9=88=E0=B8=AD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/modules/05_placement/components/PersonalList/Table.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/modules/05_placement/components/PersonalList/Table.vue b/src/modules/05_placement/components/PersonalList/Table.vue
index c72e71208..f1bd72119 100644
--- a/src/modules/05_placement/components/PersonalList/Table.vue
+++ b/src/modules/05_placement/components/PersonalList/Table.vue
@@ -253,7 +253,7 @@ const getTable = async () => {
         : rowsAll.value.filter((x: any) => x.statusId != "CONTAIN");
 
       rowsFilter.value = rows.value.filter(
-        (e: any) => e.draft == "รอส่งตัว" && e.positionNumber == null
+        (e: any) => e.draft == "รอส่งตัว" && e.positionNumber !== null
       );
       console.log(rowsFilter.value);
     })

From 5295fe241f66258cd6f68875a6dbb17458a247c5 Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Fri, 28 Jul 2023 17:59:56 +0700
Subject: [PATCH 016/113] no message

---
 src/modules/05_placement/components/PersonalList/Table.vue | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/src/modules/05_placement/components/PersonalList/Table.vue b/src/modules/05_placement/components/PersonalList/Table.vue
index f1bd72119..bb19d36fa 100644
--- a/src/modules/05_placement/components/PersonalList/Table.vue
+++ b/src/modules/05_placement/components/PersonalList/Table.vue
@@ -253,7 +253,10 @@ const getTable = async () => {
         : rowsAll.value.filter((x: any) => x.statusId != "CONTAIN");
 
       rowsFilter.value = rows.value.filter(
-        (e: any) => e.draft == "รอส่งตัว" && e.positionNumber !== null
+        (e: any) =>
+          e.draft == "รอส่งตัว" &&
+          e.positionNumber !== null &&
+          e.statusName == " เตรียมบรรจุ"
       );
       console.log(rowsFilter.value);
     })
@@ -703,7 +706,7 @@ const paginationLabel = (start: number, end: number, total: number) => {
                   <q-item
                     v-if="
                       (roleAdmin && props.row.statusId === 'UN-CONTAIN') ||
-                      props.row.draft === 'รอส่งตัว'
+                      props.row.draft === 'รอส่งตัว' && props.row.statusId !== 'DISCLAIM'
                     "
                     clickable
                     v-close-popup

From fc5f715808ccf49d05dbf218df0a71a467d092d6 Mon Sep 17 00:00:00 2001
From: AnandaTon <125332905+anandaAiemvong@users.noreply.github.com>
Date: Fri, 28 Jul 2023 18:18:26 +0700
Subject: [PATCH 017/113] =?UTF-8?q?=E0=B9=81=E0=B8=81=E0=B9=89=20flexbox?=
 =?UTF-8?q?=20=E0=B8=96=E0=B8=B6=E0=B8=87=E0=B9=81=E0=B8=81=E0=B9=88?=
 =?UTF-8?q?=E0=B8=81=E0=B8=A3=E0=B8=A3=E0=B8=A1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../04_registry/components/Profile.vue        | 154 +++++++++---------
 1 file changed, 79 insertions(+), 75 deletions(-)

diff --git a/src/modules/04_registry/components/Profile.vue b/src/modules/04_registry/components/Profile.vue
index 5a58aaa59..ee974426e 100644
--- a/src/modules/04_registry/components/Profile.vue
+++ b/src/modules/04_registry/components/Profile.vue
@@ -392,83 +392,87 @@
         <q-form ref="myForm">
           <q-card-section class="q-py-sm row">
             <DialogHeader tittle="ถึงแก่กรรม" :close="closePassaway" />
-            <q-file
-              class="col-5"
-              outlined
-              dense
-              v-model="filePassaway"
-              label="แนบใบมรณบัตร"
-              hide-bottom-space
-              lazy-rules
-            >
-              <template v-slot:prepend>
-                <q-icon name="attach_file" />
-              </template>
-            </q-file>
-            <q-separator />
-            <q-input
-              class="col-7"
-              dense
-              outlined
-              v-model="deathCertificateNo"
-              label="เลขที่ใบมรณบัตร"
-            />
-            <q-separator />
-            <datepicker
-              class="col-5"
-              menu-class-name="modalfix"
-              v-model="dateDeath"
-              :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="dateDeath != null ? date2Thai(dateDeath) : 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 class="col-12 row q-pa-sm q-col-gutter-sm">
+              <q-file
+                class="col-12 col-sm-6 col-md-5"
+                outlined
+                dense
+                v-model="filePassaway"
+                label="แนบใบมรณบัตร"
+                hide-bottom-space
+                lazy-rules
+              >
+                <q-separator />
+                <template v-slot:prepend>
+                  <q-icon name="attach_file" />
+                </template>
+              </q-file>
+              <q-input
+                class="col-12 col-sm-6 col-md-7"
+                dense
+                outlined
+                v-model="deathCertificateNo"
+                label="เลขที่ใบมรณบัตร"
+              />
 
-            <q-input
-              class="col-7"
-              dense
-              outlined
-              v-model="placeDeathCertificate"
-              label="สถานที่ออกใบมรณบัตร"
-            />
-            <q-separator />
-            <q-input
-              class="col-12"
-              dense
-              outlined
-              v-model="reasonDeath"
-              label="เหตุผลการเสีบชีวิต"
-              type="textarea"
-            />
-            <q-space />
+              <datepicker
+                class="col-12 col-sm-6 col-md-5"
+                menu-class-name="modalfix"
+                v-model="dateDeath"
+                :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="
+                      dateDeath != null ? date2Thai(dateDeath) : 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>
 
+              <q-input
+                class="col-12 col-sm-6 col-md-7"
+                dense
+                outlined
+                v-model="placeDeathCertificate"
+                label="สถานที่ออกใบมรณบัตร"
+              />
+              <q-separator />
+              <q-input
+                class="col-12"
+                dense
+                outlined
+                v-model="reasonDeath"
+                label="เหตุผลการเสีบชีวิต"
+                type="textarea"
+              />
+            </div>
             <q-space />
           </q-card-section>
           <q-separator />

From c46f453f34a3b786a88fbc4738d3a022f3482bae Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Thu, 3 Aug 2023 10:12:01 +0700
Subject: [PATCH 018/113] =?UTF-8?q?addlist=20=E0=B8=97=E0=B8=94=E0=B8=A5?=
 =?UTF-8?q?=E0=B8=AD=E0=B8=87=E0=B8=87=E0=B8=B2=E0=B8=99?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/probation/MainProbation.vue    | 707 ++++++++++--------
 1 file changed, 391 insertions(+), 316 deletions(-)

diff --git a/src/modules/05_placement/components/probation/MainProbation.vue b/src/modules/05_placement/components/probation/MainProbation.vue
index ff6633ca4..f28af5a48 100644
--- a/src/modules/05_placement/components/probation/MainProbation.vue
+++ b/src/modules/05_placement/components/probation/MainProbation.vue
@@ -1,87 +1,96 @@
 <template>
-    <div class="toptitle text-dark col-12 row items-center">รายการผู้ทดลองปฏิบัติหน้าที่ราชการ</div>
-		<q-card flat bordered class="col-12 q-mt-sm q-pa-md">
-			<div class="row q-col-gutter-sm">
-				<div class="row col-12 q-col-gutter-sm">
-					<div>
-						<q-btn @click="clickAdd()" size="12px" flat round color="add" icon="mdi-plus">
-							<q-tooltip>เพิ่มผู้ทดลองปฏิบัติหน้าที่ราชการ</q-tooltip>
-						</q-btn>
-					</div>
-					<q-space />
+  <div class="toptitle text-dark col-12 row items-center">
+    รายการผู้ทดลองปฏิบัติหน้าที่ราชการ
+  </div>
+  <q-card flat bordered class="col-12 q-mt-sm q-pa-md">
+    <div class="row q-col-gutter-sm">
+      <div class="row col-12 q-col-gutter-sm">
+        <div>
+          <q-btn
+            @click="modal = true"
+            size="12px"
+            flat
+            round
+            color="add"
+            icon="mdi-plus"
+          >
+            <q-tooltip>เพิ่มผู้ทดลองปฏิบัติหน้าที่ราชการ</q-tooltip>
+          </q-btn>
+        </div>
+        <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-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"
-					/>
-				</div>
-				<div class="col-12">
-					<q-table
-						ref="table"
-						:columns="columns"
-						:rows="rows"
-						:filter="filterKeyword"
-						row-key="Order"
-						flat
-						bordered
-						:paging="true"
-						dense
-						class="custom-header-table"
-						v-bind="attrs"
-						:visible-columns="visibleColumns"
-						:pagination-label="paginationLabel"
-						v-model:pagination="pagination"
-					>
-						<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" @click="router.push(`/probation/detail/${props.rowIndex + 1}`)">
-								<q-td
-									v-for="col in props.cols"
-									:key="col.name"
-									:props="props"
-								>
-									<div v-if="col.name == 'no'">
-										{{ props.rowIndex + 1 }}
-									</div>
-									<!-- <div v-else-if="col.name == 'status'">
+        <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"
+        />
+      </div>
+      <div class="col-12">
+        <q-table
+          ref="table"
+          :columns="columns"
+          :rows="rows"
+          :filter="filterKeyword"
+          row-key="Order"
+          flat
+          bordered
+          :paging="true"
+          dense
+          class="custom-header-table"
+          v-bind="attrs"
+          :visible-columns="visibleColumns"
+          :pagination-label="paginationLabel"
+          v-model:pagination="pagination"
+        >
+          <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"
+              @click="router.push(`/probation/detail/${props.rowIndex + 1}`)"
+            >
+              <q-td v-for="col in props.cols" :key="col.name" :props="props">
+                <div v-if="col.name == 'no'">
+                  {{ props.rowIndex + 1 }}
+                </div>
+                <!-- <div v-else-if="col.name == 'status'">
 										<q-icon size="20px" v-if="props.row.status == 'อยู่ระหว่างการทดลองงาน'" name="mdi-timer-sand" color="deep-orange">
 											<q-tooltip>อยู่ระหว่างการทดลองงาน</q-tooltip>
 										</q-icon>
@@ -92,136 +101,151 @@
 											<q-tooltip>ผ่านการทดลองงาน</q-tooltip>
 										</q-icon>
 									</div> -->
-									<div v-else>
-										{{ col.value }}
-									</div>
-								</q-td>
-							</q-tr>
-						</template>
-						<template v-slot:pagination="scope">
-							<q-pagination
-								v-model="pagination.page"
-								active-color="primary"
-								color="dark"
-								:max="scope.pagesNumber"
-								:max-pages="5"
-								size="sm"
-								boundary-links
-								direction-links
-							></q-pagination>
-						</template>
-					</q-table>
-				</div>
-			</div>
-    </q-card>
+                <div v-else>
+                  {{ col.value }}
+                </div>
+              </q-td>
+            </q-tr>
+          </template>
+          <template v-slot:pagination="scope">
+            <q-pagination
+              v-model="pagination.page"
+              active-color="primary"
+              color="dark"
+              :max="scope.pagesNumber"
+              :max-pages="5"
+              size="sm"
+              boundary-links
+              direction-links
+            ></q-pagination>
+          </template>
+        </q-table>
+      </div>
+    </div>
+  </q-card>
 
-		<q-dialog v-model="modal" persistent>
-			<q-card style="width: 900px; max-width: 80vw;">
-				<q-form ref="myForm">
-					<DialogHeader tittle="เพิ่มผู้ทดลองปฏิบัติหน้าที่ราชการ " :close="clickClose" />
-					<q-separator />
-					<q-card-section class="q-pa-md q-col-gutter-sm">
-						<q-input
-							class="col-12"
-							standout
-							dense
-							v-model="filterKeyword2"
-							ref="filterRef2"
-							outlined
-							debounce="300"
-							placeholder="ค้นหา"
-						>
-							<template v-slot:append>
-								<q-icon v-if="filterKeyword2 == ''" name="search" />
-								<q-icon
-									v-if="filterKeyword2 !== ''"
-									name="clear"
-									class="cursor-pointer"
-									@click="resetFilter2"
-								/>
-							</template>
-						</q-input>
-						<div class="col-12">
-							<q-table
-								ref="table2"
-								:columns="columns2"
-								:rows="rows2"
-								:filter="filterKeyword2"
-								row-key="Order"
-								flat
-								bordered
-								:paging="true"
-								dense
-								class="custom-header-table"
-								v-bind="attrs"
-								:visible-columns="visibleColumns2"
-								:pagination-label="paginationLabel"
-								v-model:pagination="pagination"
-							>
-								<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
-											v-for="col in props.cols"
-											:key="col.name"
-											:props="props"
-										>
-											<div v-if="col.name == 'no'">
-												{{ props.rowIndex + 1 }}
-											</div>
-											<div v-else>
-												{{ col.value }}
-											</div>
-										</q-td>
-										<q-td auto-width>
-											<q-btn
-												dense
-												class="q-px-md"
-												outline
-												color="primary"
-												v-close-popup
-												label="เพิ่ม"
-											>
-											</q-btn>
-										</q-td>
-									</q-tr>
-								</template>
-								<template v-slot:pagination="scope">
-									<q-pagination
-										v-model="pagination.page"
-										active-color="primary"
-										color="dark"
-										:max="scope.pagesNumber"
-										:max-pages="5"
-										size="sm"
-										boundary-links
-										direction-links
-									></q-pagination>
-								</template>
-							</q-table>
-						</div>
-					</q-card-section>        
-				</q-form>
-			</q-card>
-  	</q-dialog>
+  <q-dialog v-model="modal" persistent>
+    <q-card style="width: 900px; max-width: 80vw">
+      <q-form ref="myForm">
+        <DialogHeader
+          tittle="เพิ่มผู้ทดลองปฏิบัติหน้าที่ราชการ "
+          :close="clickClose"
+        />
+        <q-separator />
+        <q-card-section class="q-pa-md q-col-gutter-sm">
+          <q-input
+            class="col-12"
+            standout
+            dense
+            v-model="filterKeyword2"
+            ref="filterRef2"
+            outlined
+            debounce="300"
+            placeholder="ค้นหา"
+          >
+            <template v-slot:append>
+              <q-icon v-if="filterKeyword2 == ''" name="search" />
+              <q-icon
+                v-if="filterKeyword2 !== ''"
+                name="clear"
+                class="cursor-pointer"
+                @click="resetFilter2"
+              />
+            </template>
+          </q-input>
+          <div class="col-12">
+            <q-table
+              ref="table2"
+              :columns="columns2"
+              :rows="rows2"
+              :filter="filterKeyword2"
+              row-key="Order"
+              flat
+              bordered
+              :paging="true"
+              dense
+              class="custom-header-table"
+              v-bind="attrs"
+              :pagination-label="paginationLabel"
+              v-model:pagination="pagination"
+            >
+              <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
+                    v-for="col in props.cols"
+                    :key="col.name"
+                    :props="props"
+                  >
+                    <div v-if="col.name == 'no'">
+                      {{ props.rowIndex + 1 }}
+                    </div>
+                    <div v-else>
+                      {{ col.value }}
+                    </div>
+                  </q-td>
+                  <q-td auto-width>
+                    <q-btn
+                      dense
+                      class="q-px-md"
+                      outline
+                      color="primary"
+                      label="เพิ่ม"
+                      @click="clickAdd(props.row.id)"
+                    >
+                    </q-btn>
+                  </q-td>
+                </q-tr>
+              </template>
+              <template v-slot:pagination="scope">
+                <q-pagination
+                  v-model="pagination.page"
+                  active-color="primary"
+                  color="dark"
+                  :max="scope.pagesNumber"
+                  :max-pages="5"
+                  size="sm"
+                  boundary-links
+                  direction-links
+                ></q-pagination>
+              </template>
+            </q-table>
+          </div>
+        </q-card-section>
+      </q-form>
+    </q-card>
+  </q-dialog>
 </template>
 
 <script setup lang="ts">
-import { ref, useAttrs } from "vue";
+import { ref, useAttrs, onMounted, watch } from "vue";
 import type { QTableProps } from "quasar";
-import type { FormMainProbation, FormMainProbation2 } from "@/modules/05_placement/interface/request/Main";
+import type {
+  FormMainProbation,
+  FormMainProbation2,
+} from "@/modules/05_placement/interface/request/Main";
 import DialogHeader from "@/modules/04_registry/components/DialogHeader.vue";
+import http from "@/plugins/http";
+import config from "@/app.config";
+import { useCounterMixin } from "@/stores/mixin";
 import router from "@/router";
 import { useQuasar } from "quasar";
 
 const $q = useQuasar(); //ใช้ noti quasar
+const mixin = useCounterMixin();
+const { messageError, success, showLoader, hideLoader } = mixin;
+
 const modal = ref<boolean>(false);
 const pagination = ref({
   sortBy: "desc",
@@ -233,7 +257,7 @@ const pagination = ref({
 const visibleColumns = ref<string[]>([
   "no",
   "name",
-	"position",
+  "position",
   "level",
   "institution",
   "time",
@@ -261,7 +285,7 @@ const columns = ref<QTableProps["columns"]>([
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
-	{
+  {
     name: "position",
     align: "left",
     label: "ตำแหน่งในสายงาน",
@@ -270,7 +294,7 @@ const columns = ref<QTableProps["columns"]>([
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
-	{
+  {
     name: "level",
     align: "left",
     label: "ระดับ",
@@ -279,7 +303,7 @@ const columns = ref<QTableProps["columns"]>([
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
-	{
+  {
     name: "institution",
     align: "left",
     label: "สังกัด",
@@ -288,7 +312,7 @@ const columns = ref<QTableProps["columns"]>([
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
-	{
+  {
     name: "time",
     align: "center",
     label: "ครั้งที่ทดลองงาน",
@@ -297,7 +321,7 @@ const columns = ref<QTableProps["columns"]>([
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
-	{
+  {
     name: "orderNum",
     align: "center",
     label: "เลขที่คําสั่งบรรจุแต่งตั้ง",
@@ -314,69 +338,61 @@ const columns = ref<QTableProps["columns"]>([
     field: "status",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
-  }
+  },
 ]);
 
 // ข้อมูลตาราง (จำลอง)
 const rows = ref<FormMainProbation[]>([
-	{
-		no:"1",
-		name: "นายสมคิด ยอดใจ ",
-		position: "นักวิชาการพัสดุ",
-		level: "ปฏิบัติการ",
-		institution: "กลุ่มงานโครงสร้างและอัตรากำลัง ๒",
-		time: "1",
-		status: "อยู่ระหว่างการทดลองงาน",
-		orderNum: "11/2566",
-	},
-	{
-		no:"2",
-		name: "นายเกียรติศักดิ์ บัณฑิต",
-		position: "นักวิชาการพัสดุ",
-		level: "ปฏิบัติการ",
-		institution: "กลุ่มงานโครงสร้างและอัตรากำลัง ๒",
-		time: "1",
-		status: "อยู่ระหว่างการทดลองงาน",
-		orderNum: "11/2566",
-	},
-	{
-		no:"3",
-		name: "นางสาวกัณฐิมา กาฬสินธุ์",
-		position: "นักจัดการงานทั่วไป",
-		level: "ปฏิบัติการ",
-		institution: "กลุ่มงานช่วยนักบริหาร",
-		time: "1",
-		status: "อยู่ระหว่างการทดลองงาน",
-		orderNum: "11/2566",
-	},
-	{
-		no:"4",
-		name: "นางสาวเมขลา กระจ่างมนตรี",
-		position: "นักจัดการงานทั่วไป",
-		level: "ปฏิบัติการ",
-		institution: "กลุ่มงานช่วยนักบริหาร",
-		time: "1",
-		status: "ไม่ผ่านการทดลอง",
-		orderNum: "11/2566",
-	},
-	{
-		no:"5",
-		name: "นางสาวฐิติรัตน์ พงษ์ศิริ",
-		position: "นักจัดการงานทั่วไป",
-		level: "ปฏิบัติการ",
-		institution: "กลุ่มงานช่วยนักบริหาร",
-		time: "1",
-		status: "ผ่านการทดลองงาน",
-		orderNum: "11/2566",
-	}
-]);
-
-const visibleColumns2 = ref<string[]>([
-  "no",
-  "name",
-	"position",
-  "level",
-  "institution"
+  {
+    no: "1",
+    name: "นายสมคิด ยอดใจ ",
+    position: "นักวิชาการพัสดุ",
+    level: "ปฏิบัติการ",
+    institution: "กลุ่มงานโครงสร้างและอัตรากำลัง ๒",
+    time: "1",
+    status: "อยู่ระหว่างการทดลองงาน",
+    orderNum: "11/2566",
+  },
+  {
+    no: "2",
+    name: "นายเกียรติศักดิ์ บัณฑิต",
+    position: "นักวิชาการพัสดุ",
+    level: "ปฏิบัติการ",
+    institution: "กลุ่มงานโครงสร้างและอัตรากำลัง ๒",
+    time: "1",
+    status: "อยู่ระหว่างการทดลองงาน",
+    orderNum: "11/2566",
+  },
+  {
+    no: "3",
+    name: "นางสาวกัณฐิมา กาฬสินธุ์",
+    position: "นักจัดการงานทั่วไป",
+    level: "ปฏิบัติการ",
+    institution: "กลุ่มงานช่วยนักบริหาร",
+    time: "1",
+    status: "อยู่ระหว่างการทดลองงาน",
+    orderNum: "11/2566",
+  },
+  {
+    no: "4",
+    name: "นางสาวเมขลา กระจ่างมนตรี",
+    position: "นักจัดการงานทั่วไป",
+    level: "ปฏิบัติการ",
+    institution: "กลุ่มงานช่วยนักบริหาร",
+    time: "1",
+    status: "ไม่ผ่านการทดลอง",
+    orderNum: "11/2566",
+  },
+  {
+    no: "5",
+    name: "นางสาวฐิติรัตน์ พงษ์ศิริ",
+    position: "นักจัดการงานทั่วไป",
+    level: "ปฏิบัติการ",
+    institution: "กลุ่มงานช่วยนักบริหาร",
+    time: "1",
+    status: "ผ่านการทดลองงาน",
+    orderNum: "11/2566",
+  },
 ]);
 
 // หัวตาราง2
@@ -388,18 +404,18 @@ const columns2 = ref<QTableProps["columns"]>([
     sortable: true,
     field: "no",
     headerStyle: "font-size: 14px",
-    style: "font-size: 14px"
+    style: "font-size: 14px",
   },
   {
-    name: "name",
+    name: "fullname",
     align: "left",
     label: "ชื่อ-สกุล",
     sortable: true,
-    field: "name",
+    field: "fullname",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
-	{
+  {
     name: "position",
     align: "left",
     label: "ตำแหน่งในสายงาน",
@@ -408,7 +424,7 @@ const columns2 = ref<QTableProps["columns"]>([
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
-	{
+  {
     name: "level",
     align: "left",
     label: "ระดับ",
@@ -417,56 +433,104 @@ const columns2 = ref<QTableProps["columns"]>([
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
-	{
-    name: "institution",
+  {
+    name: "organizationOrganization",
     align: "left",
     label: "สังกัด",
     sortable: true,
-    field: "institution",
+    field: "organizationOrganization",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
-  }
+  },
 ]);
 
 // ข้อมูลตาราง (จำลอง)
 const rows2 = ref<FormMainProbation2[]>([
-  {
-		no:"1",
-    name: "นายใจดี ยอดใจ ",
-		position: "นักวิชาการพัสดุ",
-		level: "ปฏิบัติการ",
-  	institution: "กลุ่มงานโครงสร้างและอัตรากำลัง ๒",
-  },
-	{
-		no:"2",
-    name: "นายจักกริน บัณฑิต",
-		position: "นักวิชาการพัสดุ",
-		level: "ปฏิบัติการ",
-  	institution: "กลุ่มงานโครงสร้างและอัตรากำลัง ๒",
-  },
-	{
-		no:"3",
-    name: "นางสาวกัณฐิมา กาฬสินธุ์",
-		position: "นักจัดการงานทั่วไป",
-		level: "ปฏิบัติการ",
-  	institution: "กลุ่มงานช่วยนักบริหาร",
-  },
-	{
-		no:"4",
-    name: "นางสาวเมขลา กระจ่างมนตรี",
-		position: "นักจัดการงานทั่วไป",
-		level: "ปฏิบัติการ",
-  	institution: "กลุ่มงานช่วยนักบริหาร",
-  },
-	{
-		no:"5",
-    name: "นางสาวฐิติรัตน์ พงษ์ศิริ",
-		position: "นักจัดการงานทั่วไป",
-		level: "ปฏิบัติการ",
-  	institution: "กลุ่มงานช่วยนักบริหาร",
-  }
+  //   {
+  //     no: "1",
+  //     name: "นายใจดี ยอดใจ ",
+  //     position: "นักวิชาการพัสดุ",
+  //     level: "ปฏิบัติการ",
+  //     institution: "กลุ่มงานโครงสร้างและอัตรากำลัง ๒",
+  //   },
+  //   {
+  //     no: "2",
+  //     name: "นายจักกริน บัณฑิต",
+  //     position: "นักวิชาการพัสดุ",
+  //     level: "ปฏิบัติการ",
+  //     institution: "กลุ่มงานโครงสร้างและอัตรากำลัง ๒",
+  //   },
+  //   {
+  //     no: "3",
+  //     name: "นางสาวกัณฐิมา กาฬสินธุ์",
+  //     position: "นักจัดการงานทั่วไป",
+  //     level: "ปฏิบัติการ",
+  //     institution: "กลุ่มงานช่วยนักบริหาร",
+  //   },
+  //   {
+  //     no: "4",
+  //     name: "นางสาวเมขลา กระจ่างมนตรี",
+  //     position: "นักจัดการงานทั่วไป",
+  //     level: "ปฏิบัติการ",
+  //     institution: "กลุ่มงานช่วยนักบริหาร",
+  //   },
+  //   {
+  //     no: "5",
+  //     name: "นางสาวฐิติรัตน์ พงษ์ศิริ",
+  //     position: "นักจัดการงานทั่วไป",
+  //     level: "ปฏิบัติการ",
+  //     institution: "กลุ่มงานช่วยนักบริหาร",
+  //   },
 ]);
 
+onMounted(async () => {});
+
+watch(modal, () => {
+  if (modal.value === true) {
+    fecthOrganiz();
+  }
+});
+
+const fecthOrganiz = async () => {
+  showLoader();
+  await http
+    .get(config.API.profileOrganizRoot)
+    .then((res) => {
+      console.log(res);
+      let id = res.data.result[0].id;
+      if (id !== "") {
+        findlist(id);
+      }
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+};
+
+const findlist = async (id: string) => {
+  let data = [
+    { criteriaType: "is_retire", criteriaValue: "false" },
+    { criteriaType: "is_probation", criteriaValue: "true" },
+  ];
+  await http
+    .post(config.API.profileSearchNewOcIdType(id, "all"), {
+      criterias: data,
+    })
+    .then((res) => {
+      console.log("res:", res);
+      rows2.value = res.data.result.map((e: any) => ({
+        id: e.id,
+        fullname: e.fullname,
+        position: e.position,
+        level: e.positionEmployeeLevel,
+        organizationOrganization: e.oc,
+      }));
+    });
+};
+
 const clickDelete = (id: string) => {
   $q.dialog({
     title: "ยืนยันการลบข้อมูล",
@@ -476,17 +540,29 @@ const clickDelete = (id: string) => {
       color: "negative",
     },
     persistent: true,
+  })
+    .onOk(async () => {})
+    .onCancel(() => {})
+    .onDismiss(() => {});
+};
+
+const clickAdd = (id: string) => {
+  $q.dialog({
+    title: "ยืนยันการเพิ่มข้อมูล",
+    message: "ต้องการเพิ่มข้อมูลนี้ใช่หรือไม่?",
+    cancel: {
+      flat: true,
+      color: "negative",
+    },
+    persistent: true,
   })
     .onOk(async () => {
+      console.log("เพิ่ม:", id);
     })
     .onCancel(() => {})
     .onDismiss(() => {});
 };
 
-
-const clickAdd = () => {
-	modal.value = true
-};
 const clickClose = async () => {
   modal.value = false;
 };
@@ -513,7 +589,6 @@ const paginationLabel = (start: string, end: string, total: string) => {
   if (paging.value == true) return " " + start + "-" + end + " ใน " + total;
   else return start + "-" + end + " ใน " + total;
 };
-
 </script>
 
 <style lang="scss" scope>
@@ -563,4 +638,4 @@ const paginationLabel = (start: string, end: string, total: string) => {
     top: 0;
   }
 }
-</style>
\ No newline at end of file
+</style>

From 8c1a5d9b23757235d4567fa53ee7dc395e55cd4b Mon Sep 17 00:00:00 2001
From: Thanit Konmek <thanit@frappet.com>
Date: Thu, 3 Aug 2023 14:49:17 +0700
Subject: [PATCH 019/113] =?UTF-8?q?=E0=B9=81=E0=B8=81=E0=B9=89=20=E0=B8=97?=
 =?UTF-8?q?=E0=B8=B5=E0=B9=88=E0=B8=AD=E0=B8=A2=E0=B8=B9=E0=B9=88=20?=
 =?UTF-8?q?=E0=B8=A3=E0=B8=B1=E0=B8=9A=E0=B9=82=E0=B8=AD=E0=B8=99=20compon?=
 =?UTF-8?q?ent=20=E0=B8=97=E0=B8=B0=E0=B9=80=E0=B8=9A=E0=B8=B5=E0=B8=A2?=
 =?UTF-8?q?=E0=B8=99=E0=B8=9A=E0=B9=89=E0=B8=B2=E0=B8=87=E0=B8=AA=E0=B9=88?=
 =?UTF-8?q?=E0=B8=A7=E0=B8=99=E0=B8=9B=E0=B8=A3=E0=B8=B0=E0=B8=A7=E0=B8=B1?=
 =?UTF-8?q?=E0=B8=95=E0=B8=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/information/Address.vue        |  875 ++++++++++
 src/components/information/Certicate.vue      |  830 +++++++++
 src/components/information/Family.vue         | 1514 +++++++++++++++++
 src/components/information/Government.vue     |  763 +++++++++
 src/components/information/Image.vue          |  365 ++++
 src/components/information/Information.vue    | 1129 ++++++++++++
 .../information/interface/store/main.ts       |   20 +
 src/components/information/store/store.ts     |   70 +
 src/components/information/top.vue            |  199 +++
 .../03_recruiting/views/03_editor/index.vue   |    4 +-
 .../components/Information/Address.vue        |    6 +-
 .../04_registry/components/Profile.vue        |    4 -
 .../PersonalDetail/Information/Address.vue    |    6 +-
 .../components/Receive/receiveDetail.vue      |   39 +
 .../components/Receive/receiveMain.vue        |   46 +-
 src/modules/05_placement/router.ts            |   13 +
 .../views/Information/Address.vue             |    6 +-
 17 files changed, 5864 insertions(+), 25 deletions(-)
 create mode 100644 src/components/information/Address.vue
 create mode 100644 src/components/information/Certicate.vue
 create mode 100644 src/components/information/Family.vue
 create mode 100644 src/components/information/Government.vue
 create mode 100644 src/components/information/Image.vue
 create mode 100644 src/components/information/Information.vue
 create mode 100644 src/components/information/interface/store/main.ts
 create mode 100644 src/components/information/store/store.ts
 create mode 100644 src/components/information/top.vue
 create mode 100644 src/modules/05_placement/components/Receive/receiveDetail.vue

diff --git a/src/components/information/Address.vue b/src/components/information/Address.vue
new file mode 100644
index 000000000..8881a3505
--- /dev/null
+++ b/src/components/information/Address.vue
@@ -0,0 +1,875 @@
+<template>
+  <q-card flat bordered class="col-12 q-px-lg q-py-md q-mt-md">
+    <HeaderTop
+      v-model:edit="edit"
+      header="ข้อมูลที่อยู่"
+      icon="mdi-map-marker"
+      :save="saveData"
+      :history="!statusAdd()"
+      :changeBtn="changeBtn"
+      :disable="statusEdit"
+      :cancel="refreshData"
+      :historyClick="clickHistory"
+      :addEmployee="statusAdd()"
+    />
+    <q-form ref="myform">
+      <div class="row col-12 items-center q-col-gutter-x-xs q-col-gutter-y-xs">
+        <div class="col-xs-12">
+          <q-input
+            :class="getClass(edit)"
+            hide-bottom-space
+            :outlined="edit"
+            dense
+            lazy-rules
+            type="textarea"
+            autogrow
+            :readonly="!edit"
+            :borderless="!edit"
+            v-model="addressData.address"
+            :rules="[(val:string) => !!val || `${'กรุณากรอก ที่อยู่ตามทะเบียนบ้าน'}`]"
+            :label="`${'ที่อยู่ตามทะเบียนบ้าน'}`"
+          />
+        </div>
+        <div class="col-xs-6 col-sm-3 col-md-3">
+          <selector
+            :hide-dropdown-icon="!edit"
+            hide-bottom-space
+            :class="getClass(edit)"
+            :readonly="!edit"
+            :borderless="!edit"
+            :rules="[(val:string) => !!val || `${'กรุณาเลือก จังหวัด'}`]"
+            :outlined="edit"
+            dense
+            lazy-rules
+            v-model="addressData.provinceId"
+            emit-value
+            map-options
+            option-label="name"
+            :options="Ops.provinceOps"
+            option-value="id"
+            :label="`${'จังหวัด'}`"
+            @update:model-value="(value:string) => selectProvince(value, '1')"
+            use-input
+            input-debounce="0"
+            @filter="(inputValue:string,
+                      doneFn:Function) => filterSelector(inputValue, doneFn,'provinceOps'
+                      ) "
+          />
+        </div>
+        <div class="col-xs-6 col-sm-3 col-md-3">
+          <selector
+            :hide-dropdown-icon="!edit"
+            hide-bottom-space
+            :class="getClass(edit)"
+            :readonly="!edit"
+            :borderless="!edit"
+            :rules="[(val:string) => !!val || `${'กรุณาเลือก เขต / อำเภอ'}`]"
+            :outlined="edit"
+            dense
+            lazy-rules
+            v-model="addressData.districtId"
+            emit-value
+            map-options
+            option-label="name"
+            :options="Ops.districtOps"
+            option-value="id"
+            :label="`${'เขต / อำเภอ'}`"
+            @update:model-value="(value:string) => selectDistrict(value, '1')"
+            use-input
+            input-debounce="0"
+            @filter="(inputValue:string,
+                      doneFn:Function) => filterSelector(inputValue, doneFn,'districtOps'
+                      ) "
+          />
+        </div>
+        <div class="col-xs-6 col-sm-3 col-md-3">
+          <selector
+            :hide-dropdown-icon="!edit"
+            hide-bottom-space
+            :class="getClass(edit)"
+            :readonly="!edit"
+            :borderless="!edit"
+            :rules="[(val:string) => !!val || `${'กรุณาเลือก ตำบล / แขวง'}`]"
+            :outlined="edit"
+            dense
+            lazy-rules
+            v-model="addressData.subdistrictId"
+            emit-value
+            map-options
+            option-label="name"
+            :options="Ops.subdistrictOps"
+            option-value="id"
+            :label="`${'ตำบล / แขวง'}`"
+            @update:model-value="(value:string) => selectSubDistrict(value, '1')"
+            use-input
+            input-debounce="0"
+            @filter="(inputValue:string,
+                      doneFn:Function) => filterSelector(inputValue, doneFn,'subdistrictOps'
+                      ) "
+          />
+        </div>
+        <div class="col-xs-6 col-sm-3 col-md-3">
+          <q-input
+            :class="getClass(edit)"
+            hide-bottom-space
+            dense
+            lazy-rules
+            readonly
+            borderless
+            v-model="codep"
+            :style="!edit ? '' : 'padding:0 12px;'"
+            :label="`${'รหัสไปรษณีย์'}`"
+          />
+        </div>
+        <div class="col-12 q-pt-lg"><q-separator /></div>
+        <div class="col-xs-12 q-gutter-sm items-center flex q-my-sm">
+          <label class="text-bold"
+            >ที่อยู่ปัจจุบันตรงกับที่อยู่ตามทะเบียนบ้าน</label
+          >
+          <q-radio
+            v-model="addressData.same"
+            checked-icon="task_alt"
+            unchecked-icon="panorama_fish_eye"
+            val="1"
+            label="ใช่"
+            dense
+            :disable="!edit"
+          />
+          <q-radio
+            v-model="addressData.same"
+            checked-icon="task_alt"
+            unchecked-icon="panorama_fish_eye"
+            val="0"
+            label="ไม่"
+            dense
+            :disable="!edit"
+          />
+        </div>
+
+        <div class="col-xs-12" v-if="addressData.same == '0'">
+          <q-input
+            :class="getClass(edit)"
+            hide-bottom-space
+            :outlined="edit"
+            dense
+            lazy-rules
+            type="textarea"
+            autogrow
+            :readonly="!edit"
+            :borderless="!edit"
+            v-model="addressData.addressC"
+            :rules="[(val:string) => !!val || `${'กรุณากรอก ที่อยู่ปัจจุบัน'}`]"
+            :label="`${'ที่อยู่ปัจจุบัน'}`"
+          />
+        </div>
+        <div class="col-xs-6 col-sm-3 col-md-3" v-if="addressData.same == '0'">
+          <selector
+            :hide-dropdown-icon="!edit"
+            hide-bottom-space
+            :class="getClass(edit)"
+            :readonly="!edit"
+            :borderless="!edit"
+            :rules="[(val:string) => !!val || `${'กรุณาเลือก จังหวัด'}`]"
+            :outlined="edit"
+            dense
+            lazy-rules
+            v-model="addressData.provinceIdC"
+            emit-value
+            map-options
+            option-label="name"
+            :options="Ops.provinceOps"
+            option-value="id"
+            :label="`${'จังหวัด'}`"
+            @update:model-value="(value:string) => selectProvince(value, '2')"
+            use-input
+            input-debounce="0"
+            @filter="(inputValue:string,
+                      doneFn:Function) => filterSelector(inputValue, doneFn,'provinceOps'
+                      ) "
+          />
+        </div>
+        <div class="col-xs-6 col-sm-3 col-md-3" v-if="addressData.same == '0'">
+          <selector
+            :hide-dropdown-icon="!edit"
+            hide-bottom-space
+            :class="getClass(edit)"
+            :readonly="!edit"
+            :borderless="!edit"
+            :rules="[(val:string) => !!val || `${'กรุณาเลือก เขต / อำเภอ'}`]"
+            :outlined="edit"
+            dense
+            lazy-rules
+            v-model="addressData.districtIdC"
+            emit-value
+            map-options
+            option-label="name"
+            :options="Ops.districtCOps"
+            option-value="id"
+            :label="`${'เขต / อำเภอ'}`"
+            @update:model-value="(value:string) => selectDistrict(value, '2')"
+            use-input
+            input-debounce="0"
+            @filter="(inputValue:string,
+                      doneFn:Function) => filterSelector(inputValue, doneFn,'districtCOps'
+                      ) "
+          />
+        </div>
+        <div class="col-xs-6 col-sm-3 col-md-3" v-if="addressData.same == '0'">
+          <selector
+            :hide-dropdown-icon="!edit"
+            hide-bottom-space
+            :class="getClass(edit)"
+            :readonly="!edit"
+            :borderless="!edit"
+            :rules="[(val:string) => !!val || `${'กรุณาเลือก ตำบล / แขวง'}`]"
+            :outlined="edit"
+            dense
+            lazy-rules
+            v-model="addressData.subdistrictIdC"
+            emit-value
+            map-options
+            option-label="name"
+            :options="Ops.subdistrictCOps"
+            option-value="id"
+            :label="`${'ตำบล / แขวง'}`"
+            @update:model-value="(value:string) => selectSubDistrict(value, '2')"
+            use-input
+            input-debounce="0"
+            @filter="(inputValue:string,
+                      doneFn:Function) => filterSelector(inputValue, doneFn,'subdistrictCOps'
+                      ) "
+          />
+        </div>
+        <div class="col-xs-6 col-sm-3 col-md-3" v-if="addressData.same == '0'">
+          <q-input
+            :class="getClass(edit)"
+            hide-bottom-space
+            dense
+            lazy-rules
+            readonly
+            borderless
+            v-model="codec"
+            :style="!edit ? '' : 'padding:0 12px;'"
+            :label="`${'รหัสไปรษณีย์'}`"
+          />
+        </div>
+      </div>
+    </q-form>
+  </q-card>
+  <HistoryTable
+    :rows="rowsHistory"
+    :columns="columnsHistory"
+    :filter="filterHistory"
+    :visible-columns="visibleColumnsHistory"
+    v-model:modal="modalHistory"
+    v-model:inputfilter="filterHistory"
+    v-model:inputvisible="visibleColumnsHistory"
+    v-model:tittle="tittleHistory"
+  >
+    <template #columns="props">
+      <q-tr :props="props">
+        <q-td v-for="col in props.cols" :key="col.name" :props="props">
+          <div v-if="col.name == 'createdAt'" class="table_ellipsis">
+            {{ date2Thai(col.value) }}
+          </div>
+          <div
+            v-else-if="col.name == 'registrationSame'"
+            class="table_ellipsis"
+          >
+            {{ col.value ? "ใช่" : "ไม่" }}
+          </div>
+          <div v-else class="table_ellipsis">
+            {{ col.value }}
+          </div>
+        </q-td>
+      </q-tr>
+    </template>
+  </HistoryTable>
+</template>
+<script setup lang="ts">
+import { ref, onMounted } from "vue";
+import { useCounterMixin } from "@/stores/mixin";
+import { useDataStore } from "@/stores/data";
+import { useQuasar } from "quasar";
+import http from "@/plugins/http";
+import config from "@/app.config";
+import type {
+  Address,
+  DataOption,
+  zipCodeOption,
+} from "@/modules/04_registry/components/profileType";
+import { defaultAddress } from "@/modules/04_registry/components/profileType";
+import HeaderTop from "@/modules/04_registry/components/Information/top.vue";
+import type { RequestItemsHistoryObject } from "@/modules/04_registry/interface/request/Address";
+import type { ResponseObject } from "@/modules/04_registry/interface/response/Address";
+import HistoryTable from "@/components/TableHistory.vue";
+import { useRoute } from "vue-router";
+import type { AddressOps } from "@/modules/04_registry/interface/index/Main";
+import type { QTableProps } from "quasar";
+
+const props = defineProps({
+  statusEdit: {
+    type: Boolean,
+    required: true,
+  },
+  statusAdd: {
+    type: Boolean,
+    default: false,
+  },
+});
+const emit = defineEmits(["update:statusEdit"]);
+
+const route = useRoute();
+const $q = useQuasar();
+const dataStore = useDataStore();
+const { loaderPage } = dataStore;
+const mixin = useCounterMixin();
+const { date2Thai, success, messageError } = mixin;
+const edit = ref<boolean>(false);
+const addressData = ref<Address>(defaultAddress);
+const myform = ref<any>();
+const codep = ref<string>("");
+const codec = ref<string>("");
+const rowsHistory = ref<RequestItemsHistoryObject[]>([]); //select data history
+const tittleHistory = ref<string>("ประวัติแก้ไขข้อมูลที่อยู่"); //
+const filterHistory = ref<string>(""); //search data table history
+const modalHistory = ref<boolean>(false); //modal ประวัติการแก้ไขข้อมูล
+const Ops = ref<AddressOps>({
+  provinceOps: [],
+  districtOps: [],
+  districtCOps: [],
+  subdistrictOps: [],
+  subdistrictCOps: [],
+});
+const OpsFilter = ref<AddressOps>({
+  provinceOps: [],
+  districtOps: [],
+  districtCOps: [],
+  subdistrictOps: [],
+  subdistrictCOps: [],
+});
+const columnsHistory = ref<QTableProps["columns"]>([
+  {
+    name: "registrationAddress",
+    align: "left",
+    label: "ที่อยู่ตามทะเบียนบ้าน",
+    sortable: true,
+    field: "registrationAddress",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "registrationProvince",
+    align: "left",
+    label: "จังหวัดตามทะเบียนบ้าน",
+    sortable: true,
+    field: "registrationProvince",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "registrationDistrict",
+    align: "left",
+    label: "เขต/อำเภอตามทะเบียนบ้าน",
+    sortable: true,
+    field: "registrationDistrict",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "registrationSubDistrict",
+    align: "left",
+    label: "ตำบล/แขวงตามทะเบียนบ้าน",
+    sortable: true,
+    field: "registrationSubDistrict",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "registrationZipCode",
+    align: "left",
+    label: "รหัสไปรษณีย์ตามทะเบียนบ้าน",
+    sortable: true,
+    field: "registrationZipCode",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "registrationSame",
+    align: "left",
+    label: "ที่อยู่ปัจจุบันตรงกับที่อยู่ตามทะเบียนบ้าน",
+    sortable: true,
+    field: "registrationSame",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "currentAddress",
+    align: "left",
+    label: "ที่อยู่ปัจจุบัน",
+    sortable: true,
+    field: "currentAddress",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "currentProvince",
+    align: "left",
+    label: "จังหวัดปัจจุบัน",
+    sortable: true,
+    field: "currentProvince",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "currentDistrict",
+    align: "left",
+    label: "เขต/อำเภอปัจจุบัน",
+    sortable: true,
+    field: "currentDistrict",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "currentSubDistrict",
+    align: "left",
+    label: "ตำบล/แขวงปัจจุบัน",
+    sortable: true,
+    field: "currentSubDistrict",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "currentZipCode",
+    align: "left",
+    label: "รหัสไปรษณีย์ปัจจุบัน",
+    sortable: true,
+    field: "currentZipCode",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "createdFullName",
+    align: "left",
+    label: "ผู้ดำเนินการ",
+    sortable: true,
+    field: "createdFullName",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "createdAt",
+    align: "left",
+    label: "วันที่แก้ไข",
+    sortable: true,
+    field: "createdAt",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+]);
+const visibleColumnsHistory = ref<String[]>([
+  "currentAddress",
+  "currentDistrict",
+  "currentProvince",
+  "currentSubDistrict",
+  "currentZipCode",
+  "registrationAddress",
+  "registrationDistrict",
+  "registrationProvince",
+  "registrationSame",
+  "registrationSubDistrict",
+  "registrationZipCode",
+  "createdFullName",
+  "createdAt",
+]);
+
+onMounted(async () => {
+  await getNewData();
+  emit("update:statusEdit", false);
+  defaultAdd();
+});
+
+const statusAdd = () => props.statusAdd;
+
+const defaultAdd = () => {
+  if (props.statusAdd) {
+    edit.value = props.statusAdd;
+    addressData.value = {
+      address: null,
+      provinceId: null,
+      districtId: null,
+      subdistrictId: null,
+      addressC: null,
+      provinceIdC: null,
+      districtIdC: null,
+      subdistrictIdC: null,
+      same: "0",
+    };
+  }
+};
+
+const filterSelector = (val: any, update: Function, refData: string) => {
+  switch (refData) {
+    case "provinceOps":
+      update(() => {
+        Ops.value.provinceOps = OpsFilter.value.provinceOps.filter(
+          (v: DataOption) => v.name.indexOf(val) > -1
+        );
+      });
+      break;
+    case "districtOps":
+      update(() => {
+        Ops.value.districtOps = OpsFilter.value.districtOps.filter(
+          (v: DataOption) => v.name.indexOf(val) > -1
+        );
+      });
+      break;
+    case "districtCOps":
+      update(() => {
+        Ops.value.districtCOps = OpsFilter.value.districtCOps.filter(
+          (v: DataOption) => v.name.indexOf(val) > -1
+        );
+      });
+      break;
+    case "subdistrictOps":
+      update(() => {
+        Ops.value.subdistrictOps = OpsFilter.value.subdistrictOps.filter(
+          (v: DataOption) => v.name.indexOf(val) > -1
+        );
+      });
+      break;
+    case "subdistrictCOps":
+      update(() => {
+        Ops.value.subdistrictCOps = OpsFilter.value.subdistrictCOps.filter(
+          (v: DataOption) => v.name.indexOf(val) > -1
+        );
+      });
+      break;
+
+    default:
+      break;
+  }
+};
+
+/**
+ * ฟังชั้นดูข้อมูลประวัติแก้ไขข้อมูลที่เลือก
+ */
+const clickHistory = async () => {
+  modalHistory.value = true;
+  loaderPage(true);
+  await http
+    .get(config.API.profileAdrsHisId(route.params.id.toString()))
+    .then((res) => {
+      let data = res.data.result;
+      rowsHistory.value = [];
+      data.map((e: RequestItemsHistoryObject) => {
+        rowsHistory.value.push({
+          currentAddress: e.currentAddress,
+          currentDistrict: e.currentDistrict,
+          currentProvince: e.currentProvince,
+          currentSubDistrict: e.currentSubDistrict,
+          currentZipCode: e.currentZipCode,
+          registrationSame: e.registrationSame,
+          registrationAddress: e.registrationAddress,
+          registrationDistrict: e.registrationDistrict,
+          registrationProvince: e.registrationProvince,
+          registrationSubDistrict: e.registrationSubDistrict,
+          registrationZipCode: e.registrationZipCode,
+          createdFullName: e.createdFullName,
+          createdAt: new Date(e.createdAt),
+        });
+      });
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      loaderPage(false);
+    });
+};
+
+const refreshData = async () => {
+  myform.value.reset();
+  await getNewData();
+};
+
+const getNewData = async () => {
+  await fetchData();
+  await fetchProvince();
+  await fetchDistrict(addressData.value.provinceId, "1");
+  await fetchDistrict(addressData.value.provinceIdC, "2");
+  await fetchSubDistrict(addressData.value.districtId, "1");
+  await fetchSubDistrict(addressData.value.districtIdC, "2");
+};
+
+const fetchData = async () => {
+  if (route.params.id) {
+    loaderPage(true);
+    await http
+      .get(config.API.profileAdrsId(route.params.id.toString()))
+      .then((res) => {
+        const data: ResponseObject = res.data.result;
+        addressData.value.address = data.registrationAddress;
+        addressData.value.addressC = data.currentAddress;
+        addressData.value.districtId = data.registrationDistrictId;
+        addressData.value.districtIdC = data.currentDistrictId;
+        addressData.value.provinceId = data.registrationProvinceId;
+        addressData.value.provinceIdC = data.currentProvinceId;
+        addressData.value.subdistrictId = data.registrationSubDistrictId;
+        addressData.value.subdistrictIdC = data.currentSubDistrictId;
+        addressData.value.same = data.registrationSame ? "1" : "0";
+      })
+      .catch((e) => {
+        messageError($q, e);
+      })
+      .finally(() => {
+        loaderPage(false);
+      });
+  }
+};
+
+const editData = async () => {
+  const body: ResponseObject = {
+    registrationSame: addressData.value.same == "1",
+    registrationAddress: addressData.value.address,
+    registrationSubDistrictId: addressData.value.subdistrictId,
+    registrationDistrictId: addressData.value.districtId,
+    registrationProvinceId: addressData.value.provinceId,
+    registrationZipCode: codep.value,
+    currentAddress:
+      addressData.value.same == "1"
+        ? addressData.value.address
+        : addressData.value.addressC,
+    currentSubDistrictId:
+      addressData.value.same == "1"
+        ? addressData.value.subdistrictId
+        : addressData.value.subdistrictIdC,
+    currentDistrictId:
+      addressData.value.same == "1"
+        ? addressData.value.districtId
+        : addressData.value.districtIdC,
+    currentProvinceId:
+      addressData.value.same == "1"
+        ? addressData.value.provinceId
+        : addressData.value.provinceIdC,
+    currentZipCode: addressData.value.same == "1" ? codep.value : codec.value,
+    createdAt: new Date(),
+    createdFullName: "-",
+  };
+  loaderPage(true);
+  await http
+    .put(config.API.profileAdrsId(route.params.id.toString()), body)
+    .then((res) => {
+      success($q, "บันทึกข้อมูลสำเร็จ");
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(async () => {
+      edit.value = false;
+      emit("update:statusEdit", false);
+      await getNewData();
+    });
+};
+
+const addData = async () => {
+  //     loaderPage(true);
+  //   await http
+  //     .put(config.API.profileInforId(route.params.id.toString()), body)
+  //     .then((res) => {
+  //       success($q, "บันทึกข้อมูลสำเร็จ");
+  //     })
+  //     .catch((e) => {
+  //       messageError($q, e);
+  //     })
+  //     .finally(async () => {
+  //       edit.value = false;
+  //       emit("update:statusEdit", false);
+  //       await fetchData();
+  //       await changeBirth(informaData.value.birthDate ?? new Date());
+  //     });
+};
+
+const saveData = async () => {
+  await myform.value.validate().then(async (success: boolean) => {
+    if (success) {
+      if (props.statusAdd) {
+        await addData();
+      } else {
+        await editData();
+      }
+    } else {
+    }
+  });
+};
+
+const selectProvince = async (e: string | null, name: string) => {
+  if (e != null) {
+    if (name == "1") {
+      addressData.value.districtId = "";
+      addressData.value.subdistrictId = "";
+      codep.value = "";
+    } else {
+      addressData.value.districtIdC = "";
+      addressData.value.subdistrictIdC = "";
+      codec.value = "";
+    }
+    myform.value.resetValidation();
+    await fetchDistrict(e, name);
+  }
+};
+
+const selectDistrict = async (e: string | null, name: string) => {
+  if (e != null) {
+    if (name == "1") {
+      addressData.value.subdistrictId = "";
+      codep.value = "";
+    } else {
+      addressData.value.subdistrictIdC = "";
+      codec.value = "";
+    }
+    myform.value.resetValidation();
+    await fetchSubDistrict(e, name);
+  }
+};
+
+const selectSubDistrict = (e: string | null, name: string) => {
+  if (e != null) {
+    if (name == "1") {
+      const findcode = Ops.value.subdistrictOps.filter((r) => r.id == e);
+      const namecode = findcode.length > 0 ? findcode[0].zipCode : "";
+      codep.value = namecode;
+    } else {
+      const findcode = Ops.value.subdistrictCOps.filter((r) => r.id == e);
+      const namecode = findcode.length > 0 ? findcode[0].zipCode : "";
+      codec.value = namecode;
+    }
+  }
+};
+
+const fetchProvince = async () => {
+  loaderPage(true);
+  await http
+    .get(config.API.province)
+    .then((res) => {
+      const data = res.data.result;
+      let option: DataOption[] = [];
+      data.map((r: any) => {
+        option.push({ id: r.id.toString(), name: r.name.toString() });
+      });
+      Ops.value.provinceOps = option;
+      OpsFilter.value.provinceOps = option;
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      loaderPage(false);
+    });
+};
+
+const fetchDistrict = async (id: string | null, position: string) => {
+  if (id != null && id != "") {
+    loaderPage(true);
+    await http
+      .get(config.API.listDistrict(id))
+      .then((res) => {
+        const data = res.data.result;
+        let option: DataOption[] = [];
+        data.map((r: any) => {
+          option.push({ id: r.id.toString(), name: r.name.toString() });
+        });
+        if (position == "1") {
+          Ops.value.districtOps = option;
+          OpsFilter.value.districtOps = option;
+        } else {
+          Ops.value.districtCOps = option;
+          OpsFilter.value.districtCOps = option;
+        }
+      })
+      .catch((e) => {
+        messageError($q, e);
+      })
+      .finally(() => {
+        loaderPage(false);
+      });
+  }
+};
+
+const fetchSubDistrict = async (id: string | null, position: string) => {
+  if (id != null && id != "") {
+    loaderPage(true);
+    await http
+      .get(config.API.listSubDistrict(id))
+      .then((res) => {
+        const data = res.data.result;
+        let option: zipCodeOption[] = [];
+        data.map((r: any) => {
+          option.push({
+            id: r.id.toString(),
+            name: r.name.toString(),
+            zipCode: r.zipCode.toString(),
+          });
+        });
+        if (position == "1") {
+          Ops.value.subdistrictOps = option;
+          OpsFilter.value.subdistrictOps = option;
+        } else {
+          Ops.value.subdistrictCOps = option;
+          OpsFilter.value.subdistrictCOps = option;
+        }
+      })
+      .catch((e) => {
+        messageError($q, e);
+      })
+      .finally(() => {
+        loaderPage(false);
+      });
+  }
+};
+
+const changeBtn = async () => {
+  if (edit.value == true) {
+    if (props.statusEdit === true) {
+      edit.value = false;
+    } else {
+      emit("update:statusEdit", true);
+    }
+  } else {
+    emit("update:statusEdit", false);
+  }
+};
+
+const getClass = (val: boolean) => {
+  return {
+    "full-width inputgreen cursor-pointer": val,
+    "full-width cursor-pointer": !val,
+  };
+};
+</script>
diff --git a/src/components/information/Certicate.vue b/src/components/information/Certicate.vue
new file mode 100644
index 000000000..d08e8c3b2
--- /dev/null
+++ b/src/components/information/Certicate.vue
@@ -0,0 +1,830 @@
+<!-- card ใบอนุญาตประกอบอาชีพ -->
+<template>
+  <q-card flat bordered class="col-12 q-px-lg q-py-md q-mt-md">
+    <q-form ref="myForm">
+      <ProfileTable
+        :rows="rows"
+        :columns="columns"
+        :filter="filter"
+        :visible-columns="visibleColumns"
+        v-model:inputfilter="filter"
+        v-model:inputvisible="visibleColumns"
+        :add="clickAdd"
+        :name="
+          profileType == 'employee'
+            ? 'ใบอนุญาตของลูกจ้าง'
+            : 'ใบอนุญาตประกอบอาชีพ'
+        "
+        icon="mdi-book"
+        :statusEdit="statusEdit"
+      >
+        <template #columns="props">
+          <q-tr :props="props">
+            <q-td
+              v-for="col in props.cols"
+              :key="col.name"
+              :props="props"
+              @click="selectData(props)"
+              class="cursor-pointer"
+            >
+              <div
+                v-if="col.name == 'issueDate' || col.name == 'expireDate'"
+                class="table_ellipsis"
+              >
+                {{ date2Thai(col.value) }}
+              </div>
+              <div v-else class="table_ellipsis">
+                {{ col.value }}
+              </div>
+            </q-td>
+            <q-td auto-width>
+              <q-btn
+                color="info"
+                flat
+                dense
+                round
+                size="14px"
+                icon="mdi-history"
+                @click="clickHistory(props.row)"
+              />
+            </q-td>
+          </q-tr>
+        </template>
+      </ProfileTable>
+    </q-form>
+  </q-card>
+  <!-- popup Edit window-->
+  <q-dialog v-model="modal" persistent>
+    <q-card style="width: 600px">
+      <q-form ref="myForm">
+        <DialogHeader
+          :tittle="
+            profileType == 'employee'
+              ? 'ใบอนุญาตของลูกจ้าง'
+              : 'ใบอนุญาตประกอบอาชีพ'
+          "
+          :close="clickClose"
+        />
+        <q-separator />
+        <q-card-section class="q-p-sm">
+          <div
+            class="row col-12 items-center q-col-gutter-x-xs q-col-gutter-y-xs"
+          >
+            <div class="col-xs-6 col-sm-6 col-md-6">
+              <q-input
+                :class="getClass(edit)"
+                :outlined="edit"
+                dense
+                lazy-rules
+                :readonly="!edit"
+                :borderless="!edit"
+                v-model="certificateType"
+                :rules="[(val) => !!val || `${'กรุณากรอกชื่อใบอนุญาต'}`]"
+                hide-bottom-space
+                :label="`${'ชื่อใบอนุญาต'}`"
+                @update:modelValue="clickEditRow"
+              />
+            </div>
+            <div class="col-xs-6 col-sm-6 col-md-6">
+              <q-input
+                :class="getClass(edit)"
+                :outlined="edit"
+                dense
+                lazy-rules
+                :readonly="!edit"
+                :borderless="!edit"
+                v-model="issuer"
+                :rules="[
+                  (val) => !!val || `${'กรุณากรอกหน่วยงานผู้ออกใบอนุญาต'}`,
+                ]"
+                hide-bottom-space
+                :label="`${'หน่วยงานผู้ออกใบอนุญาต'}`"
+                @update:modelValue="clickEditRow"
+              />
+            </div>
+            <div class="col-xs-6 col-sm-6 col-md-6">
+              <q-input
+                :class="getClass(edit)"
+                :outlined="edit"
+                dense
+                lazy-rules
+                :readonly="!edit"
+                :borderless="!edit"
+                v-model="certificateNo"
+                :rules="[(val) => !!val || `${'กรุณากรอกเลขที่ใบอนุญาต'}`]"
+                hide-bottom-space
+                :label="`${'เลขที่ใบอนุญาต'}`"
+                @update:modelValue="clickEditRow"
+              />
+            </div>
+            <div class="col-xs-6 col-sm-6 col-md-6">
+              <datepicker
+                menu-class-name="modalfix"
+                :readonly="!edit"
+                v-model="issueDate"
+                :locale="'th'"
+                autoApply
+                :enableTimePicker="false"
+                @update:modelValue="clickEditRow"
+                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="date2Thai(issueDate)"
+                    :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 class="col-xs-6 col-sm-6 col-md-6">
+              <datepicker
+                menu-class-name="modalfix"
+                v-model="expireDate"
+                :locale="'th'"
+                autoApply
+                :enableTimePicker="false"
+                :min-date="minDate"
+                :readonly="!edit"
+                @update:modelValue="clickEditRow"
+                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="date2Thai(expireDate)"
+                    :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>
+        </q-card-section>
+        <q-separator />
+        <DialogFooter
+          :cancel="clickCancel"
+          :edit="clickEdit"
+          :save="clickSave"
+          :validate="validateData"
+          :clickNext="clickNext"
+          :clickPrevious="clickPrevious"
+          :clickDelete="clickDelete"
+          v-model:editvisible="edit"
+          v-model:next="next"
+          v-model:previous="previous"
+          v-model:modalEdit="modalEdit"
+        />
+      </q-form>
+    </q-card>
+  </q-dialog>
+  <HistoryTable
+    :rows="rowsHistory"
+    :columns="columnsHistory"
+    :filter="filterHistory"
+    :visible-columns="visibleColumnsHistory"
+    v-model:modal="modalHistory"
+    v-model:inputfilter="filterHistory"
+    v-model:inputvisible="visibleColumnsHistory"
+    v-model:tittle="tittleHistory"
+  >
+    <template #columns="props">
+      <q-tr :props="props">
+        <q-td v-for="col in props.cols" :key="col.name" :props="props">
+          <div
+            v-if="
+              col.name == 'expireDate' ||
+              col.name == 'issueDate' ||
+              col.name == 'createdAt'
+            "
+            class="table_ellipsis"
+          >
+            {{ date2Thai(col.value) }}
+          </div>
+          <div v-else class="table_ellipsis">
+            {{ col.value }}
+          </div>
+        </q-td>
+      </q-tr>
+    </template>
+  </HistoryTable>
+</template>
+<script setup lang="ts">
+import { onMounted, ref, watch } from "vue";
+import { useRoute } from "vue-router";
+import { useProfileDataStore } from "@/modules/04_registry/store";
+import { useCounterMixin } from "@/stores/mixin";
+import { useDataStore } from "@/stores/data";
+import ProfileTable from "@/modules/04_registry/components/Table.vue";
+import DialogHeader from "@/modules/04_registry/components/DialogHeader.vue";
+import DialogFooter from "@/modules/04_registry/components/DialogFooter.vue";
+import { useQuasar } from "quasar";
+import type {
+  RequestItemsObject,
+  DataProps,
+} from "@/modules/04_registry/interface/request/Certificate";
+import type { ResponseObject } from "@/modules/04_registry/interface/response/Certificate";
+import HistoryTable from "@/components/TableHistory.vue";
+import http from "@/plugins/http";
+import config from "@/app.config";
+import type { QTableProps } from "quasar";
+
+const props = defineProps({
+  statusEdit: {
+    type: Boolean,
+    required: true,
+  },
+  profileType: {
+    type: String,
+    required: true,
+  },
+});
+
+const $q = useQuasar();
+const store = useProfileDataStore();
+const { profileData, changeProfileColumns } = store;
+const dataStore = useDataStore();
+const { loaderPage } = dataStore;
+const mixin = useCounterMixin();
+const { date2Thai, success, dateToISO, messageError } = mixin;
+const route = useRoute();
+const id = ref<string>("");
+const certificateNo = ref<string>();
+const issuer = ref<string>();
+const issueDate = ref<Date>(new Date());
+const expireDate = ref<Date>(new Date());
+const certificateType = ref<string>();
+const minDate = ref<Date>();
+const myForm = ref<any>(); //form data input
+const edit = ref<boolean>(false); //เช็คการกดปุ่มแก้ไขใน dialog
+const modal = ref<boolean>(false); //modal add detail
+const modalEdit = ref<boolean>(false); //modal ที่แสดงใช้สำหรับแก้ไขหรือไม่
+const rawItem = ref<RequestItemsObject>(); //ข้อมูลเดิมที่เลือกใน row นั้น
+const rowIndex = ref<number>(0); //indexข้อมูลเดิมที่เลือกใน row นั้น
+const previous = ref<boolean>(); //แสดงปุ่มดูข้อมูลก่อนหน้า
+const next = ref<boolean>(); //แสดงปุ่มดูข้อมูลต่อไป
+const editRow = ref<boolean>(false); //เช็คมีการแก้ไขข้อมูล
+const rowsHistory = ref<RequestItemsObject[]>([]); //select data history
+const tittleHistory = ref<string>("ประวัติแก้ไขใบอนุญาตประกอบอาชีพ"); //
+const filterHistory = ref<string>(""); //search data table history
+const modalHistory = ref<boolean>(false); //modal ประวัติการแก้ไขข้อมูล
+const checkValidate = ref<boolean>(false); //validate data ผ่านหรือไม่
+const profileId = ref<string>(
+  route.params.id ? route.params.id.toString() : ""
+);
+const rows = ref<RequestItemsObject[]>([]);
+const filter = ref<string>(""); //search data table
+const visibleColumns = ref<String[]>([]);
+profileData.certicate.columns.length == 0
+  ? (visibleColumns.value = [
+      "certificateType",
+      "certificateNo",
+      "issuer",
+      "issueDate",
+      "expireDate",
+    ])
+  : (visibleColumns.value = profileData.certicate.columns);
+const columns = ref<QTableProps["columns"]>([
+  {
+    name: "certificateType",
+    align: "left",
+    label: "ชื่อใบอนุญาต",
+    sortable: true,
+    field: "certificateType",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "issuer",
+    align: "left",
+    label: "หน่วยงานผู้ออกใบอนุญาต",
+    sortable: true,
+    field: "issuer",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "certificateNo",
+    align: "left",
+    label: "เลขที่ใบอนุญาต",
+    sortable: true,
+    field: "certificateNo",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "issueDate",
+    align: "left",
+    label: "วันที่ออกใบอนุญาต",
+    sortable: true,
+    field: "issueDate",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "expireDate",
+    align: "left",
+    label: "วันที่หมดอายุ",
+    sortable: true,
+    field: "expireDate",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+]);
+const columnsHistory = ref<QTableProps["columns"]>([
+  {
+    name: "certificateType",
+    align: "left",
+    label: "ชื่อใบอนุญาต",
+    sortable: true,
+    field: "certificateType",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "issuer",
+    align: "left",
+    label: "หน่วยงานผู้ออกใบอนุญาต",
+    sortable: true,
+    field: "issuer",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "certificateNo",
+    align: "left",
+    label: "เลขที่ใบอนุญาต",
+    sortable: true,
+    field: "certificateNo",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "issueDate",
+    align: "left",
+    label: "วันที่ออกใบอนุญาต",
+    sortable: true,
+    field: "issueDate",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "expireDate",
+    align: "left",
+    label: "วันที่หมดอายุ",
+    sortable: true,
+    field: "expireDate",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "createdFullName",
+    align: "left",
+    label: "ผู้ดำเนินการ",
+    sortable: true,
+    field: "createdFullName",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "createdAt",
+    align: "left",
+    label: "วันที่แก้ไข",
+    sortable: true,
+    field: "createdAt",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+]);
+const visibleColumnsHistory = ref<String[]>([
+  "certificateType",
+  "certificateNo",
+  "issuer",
+  "issueDate",
+  "expireDate",
+  "createdFullName",
+  "createdAt",
+]);
+
+watch(visibleColumns, async (count: String[], prevCount: String[]) => {
+  await changeProfileColumns("certicate", count);
+});
+
+onMounted(async () => {
+  await fetchData();
+});
+
+const fetchData = async () => {
+  if (profileId.value) {
+    loaderPage(true);
+    await http
+      .get(config.API.profileCertId(profileId.value))
+      .then((res) => {
+        let data = res.data.result;
+        rows.value = [];
+        data.map((e: ResponseObject) => {
+          rows.value.push({
+            id: e.id,
+            certificateNo: e.certificateNo,
+            issuer: e.issuer,
+            issueDate: new Date(e.issueDate),
+            expireDate: new Date(e.expireDate),
+            certificateType: e.certificateType,
+            createdFullName: e.createdFullName,
+            createdAt: new Date(e.createdAt),
+          });
+        });
+      })
+      .catch((e) => {
+        messageError($q, e);
+      })
+      .finally(() => {
+        loaderPage(false);
+      });
+  }
+};
+
+/**
+ * กดดูข้อมูลก่อนหน้า
+ */
+const clickPrevious = async () => {
+  edit.value = false;
+  rowIndex.value -= 1;
+  await getData();
+  await checkRowPage();
+};
+
+/**
+ * กดดูข้อมูลต่อไป
+ */
+const clickNext = async () => {
+  edit.value = false;
+  rowIndex.value += 1;
+  await getData();
+  await checkRowPage();
+};
+
+/**
+ * กดดูข้อมูลต่อไป
+ */
+const getData = () => {
+  const row = rows.value[rowIndex.value];
+  certificateNo.value = row.certificateNo;
+  issuer.value = row.issuer;
+  issueDate.value = row.issueDate;
+  expireDate.value = row.expireDate;
+  certificateType.value = row.certificateType;
+  id.value = row.id;
+};
+
+/**
+ * เช็คปุ่มดูข้อมูล ย้อน กับ ต่อไป ว่าต้องแสดงไหม
+ */
+const checkRowPage = () => {
+  editRow.value = false;
+  next.value = true;
+  previous.value = true;
+  if (rowIndex.value + 1 >= rows.value.length) {
+    next.value = false;
+  }
+  if (rowIndex.value - 1 < 0) {
+    previous.value = false;
+  }
+};
+
+/**
+ * กดปุ่มแก้ไขใน dialog
+ */
+const clickEdit = () => {
+  editRow.value = false;
+  next.value = false;
+  previous.value = false;
+};
+
+/**
+ * กดปุ่มเพิ่มด้านบน table
+ */
+const clickAdd = async () => {
+  editRow.value = false;
+  await addData();
+};
+
+/**
+ * กดบันทึกใน dialog
+ */
+const clickSave = async () => {
+  myForm.value.validate().then(async (result: boolean) => {
+    if (result) {
+      if (modalEdit.value) {
+        await editData();
+      } else {
+        await saveData();
+      }
+    }
+  });
+};
+
+/**
+ * บันทึกเพิ่มข้อมูล
+ */
+const saveData = async () => {
+  loaderPage(true);
+  await http
+    .post(config.API.profileCertId(profileId.value), {
+      id: id.value,
+      certificateNo: certificateNo.value,
+      issuer: issuer.value,
+      issueDate: dateToISO(issueDate.value),
+      expireDate: dateToISO(expireDate.value),
+      certificateType: certificateType.value,
+    })
+    .then((res) => {
+      success($q, "บันทึกข้อมูลสำเร็จ");
+      modal.value = false;
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(async () => {
+      await fetchData();
+    });
+};
+
+/**
+ * บันทึกแก้ไขข้อมูล
+ */
+const editData = async () => {
+  loaderPage(true);
+  await http
+    .put(config.API.profileCertId(id.value), {
+      id: id.value,
+      certificateNo: certificateNo.value,
+      issuer: issuer.value,
+      issueDate: dateToISO(issueDate.value),
+      expireDate: dateToISO(expireDate.value),
+      certificateType: certificateType.value,
+    })
+    .then((res) => {
+      success($q, "บันทึกข้อมูลสำเร็จ");
+      modal.value = false;
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(async () => {
+      await fetchData();
+    });
+};
+
+/**
+ * ลบลบข้อมูล
+ */
+const clickDelete = async () => {
+  $q.dialog({
+    title: `ลบข้อมูล`,
+    message: `ต้องการทำการลบข้อมูลนี้ใช่หรือไม่?`,
+    cancel: "ยกเลิก",
+    ok: "ยืนยัน",
+    persistent: true,
+  })
+    .onOk(async () => {
+      loaderPage(true);
+      await http
+        .delete(config.API.profileCertId(id.value))
+        .then((res) => {
+          success($q, "ลบข้อมูลสำเร็จ");
+          modal.value = false;
+        })
+        .catch((e) => {
+          messageError($q, e);
+        })
+        .finally(async () => {
+          await fetchData();
+        });
+    })
+    .onCancel(async () => {
+      await fetchData();
+    });
+};
+
+/**
+ * กดปิด dialog
+ */
+const clickClose = async () => {
+  if (editRow.value == true) {
+    $q.dialog({
+      title: `ข้อมูลมีการแก้ไข`,
+      message: `ยืนยันที่จะปิดโดยไม่บันทึกใช่หรือไม่?`,
+      cancel: "ยกเลิก",
+      ok: "ยืนยัน",
+      persistent: true,
+    }).onOk(async () => {
+      modal.value = false;
+      next.value = false;
+      previous.value = false;
+    });
+  } else {
+    modal.value = false;
+    next.value = false;
+    previous.value = false;
+  }
+};
+
+/**
+ * กดเลือกข้อมูลที่จะแก้ไข
+ * @param props ค่า props ใน row ที่เลือก
+ */
+const selectData = async (props: DataProps) => {
+  modalEdit.value = true; //กดสำหรับแก้ไขข้อมูล
+  modal.value = true; //modal ที่เด้งขึ้นมา
+  edit.value = false; //ปุ่ม edit ใน modal
+  rawItem.value = props.row;
+  rowIndex.value = props.rowIndex;
+  certificateNo.value = props.row.certificateNo;
+  issuer.value = props.row.issuer;
+  issueDate.value = props.row.issueDate;
+  expireDate.value = props.row.expireDate;
+  certificateType.value = props.row.certificateType;
+  id.value = props.row.id;
+  await checkRowPage();
+};
+
+/**
+ * กดปุ่มเพิ่มบน table
+ */
+const addData = () => {
+  modalEdit.value = false;
+  modal.value = true;
+  edit.value = true;
+  certificateNo.value = "";
+  issuer.value = "";
+  issueDate.value = new Date();
+  expireDate.value = new Date();
+  certificateType.value = "";
+};
+
+/**
+ * ฟังก์ชันปุ่มยกเลิกการแก้ไขข้อมูล
+ */
+const clickCancel = async () => {
+  if (editRow.value == true) {
+    $q.dialog({
+      title: `ข้อมูลมีการแก้ไข`,
+      message: `ยืนยันยกเลิกการแก้ไขใช่หรือไม่?`,
+      cancel: "ยกเลิก",
+      ok: "ยืนยัน",
+      persistent: true,
+    }).onOk(async () => {
+      edit.value = false;
+      await checkRowPage();
+      await getData();
+    });
+  } else {
+    edit.value = false;
+    await checkRowPage();
+  }
+};
+
+/**
+ * เช็คว่ามีการแก้ไขข้อมูล
+ */
+const clickEditRow = () => {
+  editRow.value = true;
+};
+
+/**
+ * ฟังชั้นดูข้อมูลประวัติแก้ไขข้อมูลที่เลือก
+ * @param row ข้อมูล row ที่ดูประวัติการแก้ไข
+ */
+const clickHistory = async (row: RequestItemsObject) => {
+  tittleHistory.value =
+    props.profileType == "employee"
+      ? "ประวัติแก้ไขใบอนุญาตของลูกจ้าง"
+      : "ประวัติแก้ไขใบอนุญาตประกอบอาชีพ";
+  modalHistory.value = true;
+  loaderPage(true);
+  await http
+    .get(config.API.profileCertHisId(row.id))
+    .then((res) => {
+      let data = res.data.result;
+      rowsHistory.value = [];
+      data.map((e: ResponseObject) => {
+        rowsHistory.value.push({
+          id: e.id,
+          certificateNo: e.certificateNo,
+          issuer: e.issuer,
+          issueDate: new Date(e.issueDate),
+          expireDate: new Date(e.expireDate),
+          certificateType: e.certificateType,
+          createdFullName: e.createdFullName,
+          createdAt: new Date(e.createdAt),
+        });
+      });
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      loaderPage(false);
+    });
+};
+
+/**
+ * validate input ใน dialog
+ */
+const validateData = async () => {
+  checkValidate.value = true;
+  await myForm.value.validate().then((result: boolean) => {
+    if (result == false) {
+      checkValidate.value = false;
+    }
+  });
+};
+
+/**
+ * class จัดรูปแบบแสดงระหว่างข้อมูลที่แก้ไขหรือแสดงเฉยๆ
+ * @param val ข้อมูล input สำหรับแก้ไขหรือไม่
+ */
+const getClass = (val: boolean) => {
+  return {
+    "full-width inputgreen cursor-pointer": val,
+    "full-width cursor-pointer": !val,
+  };
+};
+</script>
+<style lang="scss">
+.modalfix {
+  position: fixed !important;
+}
+</style>
diff --git a/src/components/information/Family.vue b/src/components/information/Family.vue
new file mode 100644
index 000000000..8b9eaf90c
--- /dev/null
+++ b/src/components/information/Family.vue
@@ -0,0 +1,1514 @@
+<template>
+  <q-card flat bordered class="col-12 q-px-lg q-py-md q-mt-md text-dark">
+    <HeaderTop
+      v-model:edit="edit"
+      header="ข้อมูลครอบครัว"
+      icon="mdi-account-group"
+      :save="saveData"
+      :history="!statusAdd()"
+      :changeBtn="changeBtn"
+      :disable="statusEdit"
+      :cancel="refreshData"
+      :historyClick="historyData"
+      :addEmployee="statusAdd()"
+    />
+    <q-form ref="myform" class="col-12">
+      <div class="row col-12 items-center q-col-gutter-x-xs q-col-gutter-y-xs">
+        <div class="col-12 row q-pb-sm q-pt-md">
+          <div class="col-xs-2 col-sm-1 text-weight-bold">• บิดา</div>
+          <div class="q-gutter-sm">
+            <q-radio
+              v-model="familyData.liveM"
+              checked-icon="task_alt"
+              unchecked-icon="panorama_fish_eye"
+              val="1"
+              label="มีชีวิต"
+              dense
+              color="blue"
+              :disable="!edit"
+            />
+            <q-radio
+              v-model="familyData.liveM"
+              checked-icon="task_alt"
+              unchecked-icon="panorama_fish_eye"
+              val="0"
+              color="red"
+              label="เสียชีวิต"
+              dense
+              :disable="!edit"
+            />
+          </div>
+        </div>
+        <div class="col-xs-6 col-sm-2 col-md-2">
+          <q-input
+            :class="getClass(edit)"
+            hide-bottom-space
+            :outlined="edit"
+            dense
+            lazy-rules
+            :readonly="!edit"
+            :borderless="!edit"
+            v-model="familyData.citizenIdM"
+            :label="`${'เลขที่บัตรประชาชน'}`"
+            maxlength="13"
+            mask="#############"
+          />
+        </div>
+        <div class="col-xs-12 col-sm-2 col-md-2">
+          <selector
+            :hide-dropdown-icon="!edit"
+            hide-bottom-space
+            :class="getClass(edit)"
+            :readonly="!edit"
+            :borderless="!edit"
+            :rules="[(val:string) => !!val || `${'กรุณาเลือก คำนำหน้าชื่อ'}`]"
+            :outlined="edit"
+            dense
+            lazy-rules
+            v-model="familyData.prefixIdM"
+            emit-value
+            map-options
+            option-label="name"
+            :options="Ops.prefixOps"
+            option-value="id"
+            :label="`${'คำนำหน้าชื่อ'}`"
+            use-input
+            input-debounce="0"
+            @filter="(inputValue:any,
+                      doneFn:Function) => filterSelector(inputValue, doneFn,'prefixOps'
+                      ) "
+          />
+        </div>
+
+        <div class="col-xs-6 col-sm-3 col-md-3">
+          <q-input
+            :class="getClass(edit)"
+            hide-bottom-space
+            :outlined="edit"
+            dense
+            lazy-rules
+            :readonly="!edit"
+            :borderless="!edit"
+            v-model="familyData.firstnameM"
+            :rules="[(val:string) => !!val || `${'กรุณากรอก ชื่อ'}`]"
+            :label="`${'ชื่อ'}`"
+          />
+        </div>
+        <div class="col-xs-6 col-sm-3 col-md-3">
+          <q-input
+            :class="getClass(edit)"
+            hide-bottom-space
+            :outlined="edit"
+            dense
+            lazy-rules
+            :readonly="!edit"
+            :borderless="!edit"
+            v-model="familyData.lastnameM"
+            :rules="[(val:string) => !!val || `${'กรุณากรอก นามสกุล'}`]"
+            :label="`${'นามสกุล'}`"
+          />
+        </div>
+        <div class="col-xs-12 col-sm-2 col-md-2">
+          <q-input
+            :class="getClass(edit)"
+            hide-bottom-space
+            :outlined="edit"
+            dense
+            lazy-rules
+            :readonly="!edit"
+            :borderless="!edit"
+            v-model="familyData.occupationM"
+            :label="`${'อาชีพ'}`"
+          />
+        </div>
+
+        <div class="col-12 q-pt-md q-pb-sm"><q-separator /></div>
+        <div class="row col-12 q-py-sm">
+          <div class="col-xs-2 col-sm-1 text-weight-bold">• มารดา</div>
+          <div class="q-gutter-sm">
+            <q-radio
+              v-model="familyData.liveF"
+              checked-icon="task_alt"
+              unchecked-icon="panorama_fish_eye"
+              val="1"
+              label="มีชีวิต"
+              color="blue"
+              dense
+              :disable="!edit"
+            />
+            <q-radio
+              v-model="familyData.liveF"
+              checked-icon="task_alt"
+              unchecked-icon="panorama_fish_eye"
+              val="0"
+              label="เสียชีวิต"
+              color="red"
+              dense
+              :disable="!edit"
+            />
+          </div>
+        </div>
+        <div class="col-xs-6 col-sm-2 col-md-2">
+          <q-input
+            :class="getClass(edit)"
+            hide-bottom-space
+            :outlined="edit"
+            dense
+            lazy-rules
+            :readonly="!edit"
+            :borderless="!edit"
+            v-model="familyData.citizenIdF"
+            :label="`${'เลขที่บัตรประชาชน'}`"
+            maxlength="13"
+            mask="#############"
+          />
+        </div>
+        <div class="col-xs-12 col-sm-2 col-md-2">
+          <selector
+            :hide-dropdown-icon="!edit"
+            hide-bottom-space
+            :class="getClass(edit)"
+            :readonly="!edit"
+            :borderless="!edit"
+            :rules="[(val:string) => !!val || `${'กรุณาเลือก คำนำหน้าชื่อ'}`]"
+            :outlined="edit"
+            dense
+            lazy-rules
+            v-model="familyData.prefixIdF"
+            emit-value
+            map-options
+            option-label="name"
+            :options="Ops.prefixOps"
+            option-value="id"
+            :label="`${'คำนำหน้าชื่อ'}`"
+            use-input
+            input-debounce="0"
+            @filter="(inputValue:any,
+                      doneFn:Function) => filterSelector(inputValue, doneFn,'prefixOps'
+                      ) "
+          />
+        </div>
+
+        <div class="col-xs-6 col-sm-3 col-md-3">
+          <q-input
+            :class="getClass(edit)"
+            hide-bottom-space
+            :outlined="edit"
+            dense
+            lazy-rules
+            :readonly="!edit"
+            :borderless="!edit"
+            v-model="familyData.firstnameF"
+            :rules="[(val:string) => !!val || `${'กรุณากรอก ชื่อ'}`]"
+            :label="`${'ชื่อ'}`"
+          />
+        </div>
+        <div class="col-xs-6 col-sm-3 col-md-3">
+          <q-input
+            :class="getClass(edit)"
+            hide-bottom-space
+            :outlined="edit"
+            dense
+            lazy-rules
+            :readonly="!edit"
+            :borderless="!edit"
+            v-model="familyData.lastnameF"
+            :rules="[(val:string) => !!val || `${'กรุณากรอก นามสกุล'}`]"
+            :label="`${'นามสกุล'}`"
+          />
+        </div>
+        <div class="col-xs-12 col-sm-2 col-md-2">
+          <q-input
+            :class="getClass(edit)"
+            hide-bottom-space
+            :outlined="edit"
+            dense
+            lazy-rules
+            :readonly="!edit"
+            :borderless="!edit"
+            v-model="familyData.occupationF"
+            :label="`${'อาชีพ'}`"
+          />
+        </div>
+        <div class="col-12 q-pt-md q-pb-sm"><q-separator /></div>
+
+        <div class="row col-12 q-py-sm">
+          <div class="col-xs-2 col-sm-1 text-weight-bold">• คู่สมรส</div>
+          <div class="q-gutter-sm">
+            <q-radio
+              v-model="familyData.same"
+              checked-icon="task_alt"
+              unchecked-icon="panorama_fish_eye"
+              val="1"
+              label="มี"
+              dense
+              :disable="!edit"
+              @update:model-value="selectRadio"
+            />
+            <q-radio
+              v-model="familyData.same"
+              checked-icon="task_alt"
+              unchecked-icon="panorama_fish_eye"
+              val="0"
+              label="ไม่มี"
+              color="grey-9"
+              dense
+              :disable="!edit"
+              @update:model-value="selectRadio"
+            />
+          </div>
+          <q-separator
+            vertical
+            color="grey-4"
+            size="2px"
+            class="q-mx-md"
+            v-if="familyData.same == '1'"
+          />
+          <div class="q-gutter-sm" v-if="familyData.same == '1'">
+            <q-radio
+              v-model="familyData.liveC"
+              checked-icon="task_alt"
+              unchecked-icon="panorama_fish_eye"
+              val="1"
+              label="มีชีวิต"
+              color="blue"
+              dense
+              :disable="!edit"
+            />
+            <q-radio
+              v-model="familyData.liveC"
+              checked-icon="task_alt"
+              unchecked-icon="panorama_fish_eye"
+              val="0"
+              label="เสียชีวิต"
+              color="red"
+              dense
+              :disable="!edit"
+            />
+          </div>
+        </div>
+        <div class="col-xs-6 col-sm-2 col-md-2" v-if="familyData.same == '1'">
+          <q-input
+            :class="getClass(edit)"
+            hide-bottom-space
+            :outlined="edit"
+            dense
+            lazy-rules
+            :readonly="!edit"
+            :borderless="!edit"
+            v-model="familyData.citizenIdC"
+            :label="`${'เลขที่บัตรประชาชน'}`"
+            maxlength="13"
+            mask="#############"
+          />
+        </div>
+
+        <div class="col-xs-12 col-sm-2 col-md-2" v-if="familyData.same == '1'">
+          <selector
+            :hide-dropdown-icon="!edit"
+            hide-bottom-space
+            :class="getClass(edit)"
+            :readonly="!edit"
+            :borderless="!edit"
+            :rules="[(val:string) => !!val || `${'กรุณาเลือก คำนำหน้าชื่อ'}`]"
+            :outlined="edit"
+            dense
+            lazy-rules
+            v-model="familyData.prefixIdC"
+            emit-value
+            map-options
+            option-label="name"
+            :options="Ops.prefixOps"
+            option-value="id"
+            :label="`${'คำนำหน้าชื่อ'}`"
+            use-input
+            input-debounce="0"
+            @filter="(inputValue:any,
+                      doneFn:Function) => filterSelector(inputValue, doneFn,'prefixOps'
+                      ) "
+          />
+        </div>
+
+        <div class="col-xs-6 col-sm-2 col-md-2" v-if="familyData.same == '1'">
+          <q-input
+            :class="getClass(edit)"
+            hide-bottom-space
+            :outlined="edit"
+            dense
+            lazy-rules
+            :readonly="!edit"
+            :borderless="!edit"
+            v-model="familyData.firstnameC"
+            :rules="[(val:string) => !!val || `${'กรุณากรอก ชื่อ'}`]"
+            :label="`${'ชื่อ'}`"
+          />
+        </div>
+        <div class="col-xs-6 col-sm-2 col-md-2" v-if="familyData.same == '1'">
+          <q-input
+            :class="getClass(edit)"
+            hide-bottom-space
+            :outlined="edit"
+            dense
+            lazy-rules
+            :readonly="!edit"
+            :borderless="!edit"
+            v-model="familyData.lastnameC"
+            :rules="[(val:string) => !!val || `${'กรุณากรอก นามสกุล'}`]"
+            :label="`${'นามสกุล'}`"
+          />
+        </div>
+        <div class="col-xs-6 col-sm-2 col-md-2" v-if="familyData.same == '1'">
+          <q-input
+            :class="getClass(edit)"
+            hide-bottom-space
+            :outlined="edit"
+            dense
+            lazy-rules
+            :readonly="!edit"
+            :borderless="!edit"
+            v-model="familyData.lastnameCOld"
+            :rules="[(val:string) => !!val || `${'กรุณากรอก นามสกุล(เดิม)'}`]"
+            :label="`${'นามสกุล(เดิม)'}`"
+          />
+        </div>
+        <div class="col-xs-12 col-sm-2 col-md-2" v-if="familyData.same == '1'">
+          <q-input
+            :class="getClass(edit)"
+            hide-bottom-space
+            :outlined="edit"
+            dense
+            lazy-rules
+            :readonly="!edit"
+            :borderless="!edit"
+            v-model="familyData.occupationC"
+            :label="`${'อาชีพ'}`"
+          />
+        </div>
+
+        <div class="col-12 q-pt-md q-pb-sm"><q-separator /></div>
+      </div>
+      <div
+        class="row col-12 items-center q-col-gutter-x-xs q-col-gutter-y-xs q-mb-sm"
+      >
+        <div class="col-xs-12 q-col-gutter-x-sm items-center flex">
+          <label class="text-weight-bold">• บุตร</label>
+          <div>
+            <q-btn
+              v-if="edit"
+              size="12px"
+              flat
+              round
+              :disable="!edit"
+              :color="!edit ? 'grey-7' : 'primary'"
+              @click="addChildren"
+              icon="mdi-plus"
+            >
+              <q-tooltip>เพิ่มข้อมูล</q-tooltip>
+            </q-btn>
+          </div>
+        </div>
+
+        <div
+          class="row col-12 items-center q-col-gutter-xs"
+          v-for="(items, index) in familyData.childrens"
+          :key="index"
+        >
+          <div class="col-12 row q-gutter-sm q-pb-xs">
+            <q-avatar class="bg-grey-2" size="28px">{{ index + 1 }}</q-avatar>
+            <q-radio
+              v-model="items.childrenLive"
+              checked-icon="task_alt"
+              unchecked-icon="panorama_fish_eye"
+              val="1"
+              label="มีชีวิต"
+              color="blue"
+              dense
+              :disable="!edit"
+            />
+            <q-radio
+              v-model="items.childrenLive"
+              checked-icon="task_alt"
+              unchecked-icon="panorama_fish_eye"
+              val="0"
+              label="เสียชีวิต"
+              color="red"
+              dense
+              :disable="!edit"
+            />
+          </div>
+          <div>
+            <q-btn
+              v-if="edit"
+              flat
+              dense
+              size="12px"
+              round
+              :disable="!edit"
+              :color="!edit ? 'grey-7' : 'red'"
+              @click="deleteChildren(items)"
+              icon="mdi-delete-outline"
+            >
+              <q-tooltip>ลบข้อมูล {{ index + 1 }}</q-tooltip>
+            </q-btn>
+          </div>
+          <div class="col-xs-6 col-sm-2 col-md-2">
+            <q-input
+              :class="getClass(edit)"
+              hide-bottom-space
+              :outlined="edit"
+              dense
+              lazy-rules
+              :readonly="!edit"
+              :borderless="!edit"
+              v-model="items.childrenCitizenId"
+              :label="`${'เลขที่บัตรประชาชน'}`"
+              maxlength="13"
+              mask="#############"
+            />
+          </div>
+          <div class="col-xs-12 col-sm-2 col-md-2">
+            <selector
+              :hide-dropdown-icon="!edit"
+              hide-bottom-space
+              :class="getClass(edit)"
+              :readonly="!edit"
+              :borderless="!edit"
+              :rules="[(val:string) => !!val || `${'กรุณาเลือก คำนำหน้าชื่อ'}`]"
+              :outlined="edit"
+              dense
+              lazy-rules
+              v-model="items.childrenPrefixId"
+              emit-value
+              map-options
+              option-label="name"
+              :options="Ops.prefixOps"
+              option-value="id"
+              :label="`${'คำนำหน้าชื่อ'}`"
+              use-input
+              input-debounce="0"
+              @filter="(inputValue:any,
+                      doneFn:Function) => filterSelector(inputValue, doneFn,'prefixOps'
+                      ) "
+            />
+          </div>
+          <div class="col-xs-6 col-sm-3 col-md-3">
+            <q-input
+              :class="getClass(edit)"
+              hide-bottom-space
+              :outlined="edit"
+              dense
+              lazy-rules
+              :readonly="!edit"
+              :borderless="!edit"
+              v-model="items.childrenFirstName"
+              :rules="[(val:string) => !!val || `${'กรุณากรอก ชื่อ'}`]"
+              :label="`${'ชื่อ'}`"
+            />
+          </div>
+          <div class="col-xs-6 col-sm-3 col-md-3">
+            <q-input
+              :class="getClass(edit)"
+              hide-bottom-space
+              :outlined="edit"
+              dense
+              lazy-rules
+              :readonly="!edit"
+              :borderless="!edit"
+              v-model="items.childrenLastName"
+              :rules="[(val:string) => !!val || `${'กรุณากรอก นามสกุล'}`]"
+              :label="`${'นามสกุล'}`"
+            />
+          </div>
+          <div
+            :class="
+              edit
+                ? 'col-xs-10 col-sm-1 col-md-1'
+                : 'col-xs-12 col-sm-2 col-md-2'
+            "
+          >
+            <q-input
+              :class="getClass(edit)"
+              hide-bottom-space
+              :outlined="edit"
+              dense
+              lazy-rules
+              :readonly="!edit"
+              :borderless="!edit"
+              v-model="items.childrenCareer"
+              :label="`${'อาชีพ'}`"
+            />
+          </div>
+          <div
+            class="col-12 q-my-sm"
+            v-if="index + 1 < familyData.childrens.length"
+          >
+            <q-separator v-if="edit" inset />
+          </div>
+        </div>
+      </div>
+    </q-form>
+  </q-card>
+  <DialogHistory
+    v-model:modal="modal"
+    v-model:fix="fix"
+    title="ประวัติแก้ไขข้อมูลครอบครัว"
+  >
+    <template v-slot:body>
+      <div class="row col-12 items-center q-col-gutter-x-xs q-col-gutter-y-xs">
+        <div class="col-xs-12 text-weight-bold">
+          {{
+            `${
+              familyDataHistory.length > 0 &&
+              familyDataHistory[indexRow].createdAt != null
+                ? date2Thai(familyDataHistory[indexRow].createdAt, false, true)
+                : ""
+            }`
+          }}
+        </div>
+        <div class="col-xs-12 text-weight-bold">
+          • บิดา
+          <q-radio
+            v-model="familyDataHistory[indexRow].fatherLive"
+            checked-icon="task_alt"
+            unchecked-icon="panorama_fish_eye"
+            val="1"
+            label="มีชีวิต"
+            dense
+            :disable="true"
+          />
+          <q-radio
+            v-model="familyDataHistory[indexRow].fatherLive"
+            checked-icon="task_alt"
+            unchecked-icon="panorama_fish_eye"
+            val="0"
+            label="เสียชีวิต"
+            dense
+            :disable="true"
+          />
+        </div>
+        <div class="col-xs-6 col-sm-2 col-md-2">
+          <q-input
+            :class="getClass(false)"
+            hide-bottom-space
+            :outlined="false"
+            dense
+            lazy-rules
+            :readonly="true"
+            :borderless="true"
+            v-model="familyDataHistory[indexRow].fatherCitizenId"
+            :label="`${'เลขที่บัตรประชาชน'}`"
+            maxlength="13"
+            mask="#############"
+          />
+        </div>
+        <div class="col-xs-12 col-sm-2 col-md-2">
+          <selector
+            :hide-dropdown-icon="true"
+            hide-bottom-space
+            :class="getClass(false)"
+            :readonly="true"
+            :borderless="true"
+            :rules="[(val:string) => !!val || `${'กรุณาเลือก คำนำหน้าชื่อ'}`]"
+            :outlined="false"
+            dense
+            lazy-rules
+            v-model="familyDataHistory[indexRow].fatherPrefixId"
+            emit-value
+            map-options
+            option-label="name"
+            :options="Ops.prefixOps"
+            option-value="id"
+            :label="`${'คำนำหน้าชื่อ'}`"
+            use-input
+            input-debounce="0"
+            @filter="(inputValue:any,
+                      doneFn:Function) => filterSelector(inputValue, doneFn,'prefixOps'
+                      ) "
+          />
+        </div>
+
+        <div class="col-xs-6 col-sm-3 col-md-3">
+          <q-input
+            :class="getClass(false)"
+            hide-bottom-space
+            :outlined="false"
+            dense
+            lazy-rules
+            :readonly="true"
+            :borderless="true"
+            v-model="familyDataHistory[indexRow].fatherFirstName"
+            :rules="[(val:string) => !!val || `${'กรุณากรอก ชื่อ'}`]"
+            :label="`${'ชื่อ'}`"
+          />
+        </div>
+        <div class="col-xs-6 col-sm-3 col-md-3">
+          <q-input
+            :class="getClass(false)"
+            hide-bottom-space
+            :outlined="false"
+            dense
+            lazy-rules
+            :readonly="true"
+            :borderless="true"
+            v-model="familyDataHistory[indexRow].fatherLastName"
+            :rules="[(val:string) => !!val || `${'กรุณากรอก นามสกุล'}`]"
+            :label="`${'นามสกุล'}`"
+          />
+        </div>
+        <div class="col-xs-12 col-sm-2 col-md-2">
+          <q-input
+            :class="getClass(false)"
+            hide-bottom-space
+            :outlined="false"
+            dense
+            lazy-rules
+            :readonly="true"
+            :borderless="true"
+            v-model="familyDataHistory[indexRow].fatherCareer"
+            :label="`${'อาชีพ'}`"
+          />
+        </div>
+
+        <div class="col-12 q-pt-md q-pb-sm"><q-separator /></div>
+        <div class="col-xs-12 text-weight-bold">
+          • มารดา
+          <q-radio
+            v-model="familyDataHistory[indexRow].motherLive"
+            checked-icon="task_alt"
+            unchecked-icon="panorama_fish_eye"
+            val="1"
+            label="มีชีวิต"
+            dense
+            :disable="true"
+          />
+          <q-radio
+            v-model="familyDataHistory[indexRow].motherLive"
+            checked-icon="task_alt"
+            unchecked-icon="panorama_fish_eye"
+            val="0"
+            label="เสียชีวิต"
+            dense
+            :disable="true"
+          />
+        </div>
+        <div class="col-xs-6 col-sm-2 col-md-2">
+          <q-input
+            :class="getClass(false)"
+            hide-bottom-space
+            :outlined="false"
+            dense
+            lazy-rules
+            :readonly="true"
+            :borderless="true"
+            v-model="familyDataHistory[indexRow].motherCitizenId"
+            :label="`${'เลขที่บัตรประชาชน'}`"
+            maxlength="13"
+            mask="#############"
+          />
+        </div>
+        <div class="col-xs-12 col-sm-2 col-md-2">
+          <selector
+            :hide-dropdown-icon="true"
+            hide-bottom-space
+            :class="getClass(false)"
+            :readonly="true"
+            :borderless="true"
+            :rules="[(val:string) => !!val || `${'กรุณาเลือก คำนำหน้าชื่อ'}`]"
+            :outlined="false"
+            dense
+            lazy-rules
+            v-model="familyDataHistory[indexRow].motherPrefixId"
+            emit-value
+            map-options
+            option-label="name"
+            :options="Ops.prefixOps"
+            option-value="id"
+            :label="`${'คำนำหน้าชื่อ'}`"
+            use-input
+            input-debounce="0"
+            @filter="(inputValue:any,
+                      doneFn:Function) => filterSelector(inputValue, doneFn,'prefixOps'
+                      ) "
+          />
+        </div>
+
+        <div class="col-xs-6 col-sm-3 col-md-3">
+          <q-input
+            :class="getClass(false)"
+            hide-bottom-space
+            :outlined="false"
+            dense
+            lazy-rules
+            :readonly="true"
+            :borderless="true"
+            v-model="familyDataHistory[indexRow].motherFirstName"
+            :rules="[(val:string) => !!val || `${'กรุณากรอก ชื่อ'}`]"
+            :label="`${'ชื่อ'}`"
+          />
+        </div>
+        <div class="col-xs-6 col-sm-3 col-md-3">
+          <q-input
+            :class="getClass(false)"
+            hide-bottom-space
+            :outlined="false"
+            dense
+            lazy-rules
+            :readonly="true"
+            :borderless="true"
+            v-model="familyDataHistory[indexRow].motherLastName"
+            :rules="[(val:string) => !!val || `${'กรุณากรอก นามสกุล'}`]"
+            :label="`${'นามสกุล'}`"
+          />
+        </div>
+        <div class="col-xs-12 col-sm-2 col-md-2">
+          <q-input
+            :class="getClass(false)"
+            hide-bottom-space
+            :outlined="false"
+            dense
+            lazy-rules
+            :readonly="true"
+            :borderless="true"
+            v-model="familyDataHistory[indexRow].motherCareer"
+            :label="`${'อาชีพ'}`"
+          />
+        </div>
+        <div class="col-12 q-pt-md q-pb-sm"><q-separator /></div>
+        <div class="col-xs-12 q-gutter-sm items-center flex q-my-sm">
+          <label class="text-weight-bold">• คู่สมรส</label>
+          <q-radio
+            v-model="familyDataHistory[indexRow].couple"
+            checked-icon="task_alt"
+            unchecked-icon="panorama_fish_eye"
+            val="1"
+            label="มี"
+            dense
+            :disable="true"
+            @update:model-value="selectRadio"
+          />
+          <q-radio
+            v-model="familyDataHistory[indexRow].couple"
+            checked-icon="task_alt"
+            unchecked-icon="panorama_fish_eye"
+            val="0"
+            label="ไม่มี"
+            color="grey-9"
+            dense
+            :disable="true"
+            @update:model-value="selectRadio"
+          />
+          <q-separator
+            vertical
+            color="grey-4"
+            size="2px"
+            class="q-mx-md"
+            v-if="familyData.same == '1'"
+          />
+          <div class="q-gutter-sm" v-if="familyData.same == '1'">
+            <q-radio
+              v-model="familyDataHistory[indexRow].coupleLive"
+              checked-icon="task_alt"
+              unchecked-icon="panorama_fish_eye"
+              val="1"
+              label="มีชีวิต"
+              color="blue"
+              dense
+              :disable="true"
+            />
+            <q-radio
+              v-model="familyDataHistory[indexRow].coupleLive"
+              checked-icon="task_alt"
+              unchecked-icon="panorama_fish_eye"
+              val="0"
+              label="เสียชีวิต"
+              color="red"
+              dense
+              :disable="true"
+            />
+          </div>
+        </div>
+        <div
+          class="col-xs-6 col-sm-2 col-md-2"
+          v-if="familyDataHistory[indexRow].couple == '1'"
+        >
+          <q-input
+            :class="getClass(false)"
+            hide-bottom-space
+            :outlined="false"
+            dense
+            lazy-rules
+            :readonly="true"
+            :borderless="true"
+            v-model="familyDataHistory[indexRow].coupleCitizenId"
+            :label="`${'เลขที่บัตรประชาชน'}`"
+            maxlength="13"
+            mask="#############"
+          />
+        </div>
+
+        <div
+          class="col-xs-12 col-sm-2 col-md-2"
+          v-if="familyDataHistory[indexRow].couple == '1'"
+        >
+          <selector
+            :hide-dropdown-icon="true"
+            hide-bottom-space
+            :class="getClass(false)"
+            :readonly="true"
+            :borderless="true"
+            :rules="[(val:string) => !!val || `${'กรุณาเลือก คำนำหน้าชื่อ'}`]"
+            :outlined="false"
+            dense
+            lazy-rules
+            v-model="familyDataHistory[indexRow].couplePrefixId"
+            emit-value
+            map-options
+            option-label="name"
+            :options="Ops.prefixOps"
+            option-value="id"
+            :label="`${'คำนำหน้าชื่อ'}`"
+            use-input
+            input-debounce="0"
+            @filter="(inputValue:any,
+                      doneFn:Function) => filterSelector(inputValue, doneFn,'prefixOps'
+                      ) "
+          />
+        </div>
+
+        <div
+          class="col-xs-6 col-sm-3 col-md-3"
+          v-if="familyDataHistory[indexRow].couple == '1'"
+        >
+          <q-input
+            :class="getClass(false)"
+            hide-bottom-space
+            :outlined="false"
+            dense
+            lazy-rules
+            :readonly="true"
+            :borderless="true"
+            v-model="familyDataHistory[indexRow].coupleFirstName"
+            :rules="[(val:string) => !!val || `${'กรุณากรอก ชื่อ'}`]"
+            :label="`${'ชื่อ'}`"
+          />
+        </div>
+        <div
+          class="col-xs-6 col-sm-3 col-md-3"
+          v-if="familyDataHistory[indexRow].couple == '1'"
+        >
+          <q-input
+            :class="getClass(false)"
+            hide-bottom-space
+            :outlined="false"
+            dense
+            lazy-rules
+            :readonly="true"
+            :borderless="true"
+            v-model="familyDataHistory[indexRow].coupleLastName"
+            :rules="[(val:string) => !!val || `${'กรุณากรอก นามสกุล'}`]"
+            :label="`${'นามสกุล'}`"
+          />
+        </div>
+        <div
+          class="col-xs-6 col-sm-2 col-md-2"
+          v-if="familyDataHistory[indexRow].couple == '1'"
+        >
+          <q-input
+            :class="getClass(false)"
+            hide-bottom-space
+            :outlined="false"
+            dense
+            lazy-rules
+            :readonly="true"
+            :borderless="true"
+            v-model="familyDataHistory[indexRow].coupleLastNameOld"
+            :rules="[(val:string) => !!val || `${'กรุณากรอก นามสกุล(เดิม)'}`]"
+            :label="`${'นามสกุล(เดิม)'}`"
+          />
+        </div>
+        <div
+          class="col-xs-12 col-sm-2 col-md-2"
+          v-if="familyDataHistory[indexRow].couple == '1'"
+        >
+          <q-input
+            :class="getClass(false)"
+            hide-bottom-space
+            :outlined="false"
+            dense
+            lazy-rules
+            :readonly="true"
+            :borderless="true"
+            v-model="familyDataHistory[indexRow].coupleCareer"
+            :label="`${'อาชีพ'}`"
+          />
+        </div>
+
+        <div class="col-12 q-pt-md q-pb-sm"><q-separator /></div>
+      </div>
+      <div class="row col-12 items-center q-col-gutter-x-xs q-col-gutter-y-xs">
+        <div class="col-xs-12 q-gutter-sm items-center flex q-my-sm">
+          <label class="text-weight-bold">• บุตร</label>
+        </div>
+
+        <div
+          class="row col-12 items-center q-col-gutter-x-xs q-col-gutter-y-xs"
+          v-for="items in familyDataHistory[indexRow].childrens"
+          :key="items.id"
+        >
+          <div class="col-12 row q-gutter-sm q-pb-xs">
+            <q-radio
+              v-model="items.childrenLive"
+              checked-icon="task_alt"
+              unchecked-icon="panorama_fish_eye"
+              val="1"
+              label="มีชีวิต"
+              color="blue"
+              dense
+              :disable="true"
+            />
+            <q-radio
+              v-model="items.childrenLive"
+              checked-icon="task_alt"
+              unchecked-icon="panorama_fish_eye"
+              val="0"
+              label="เสียชีวิต"
+              color="red"
+              dense
+              :disable="true"
+            />
+          </div>
+          <div class="col-xs-6 col-sm-2 col-md-2">
+            <q-input
+              :class="getClass(false)"
+              hide-bottom-space
+              :outlined="false"
+              dense
+              lazy-rules
+              :readonly="true"
+              :borderless="true"
+              v-model="items.childrenCitizenId"
+              :label="`${'เลขที่บัตรประชาชน'}`"
+              maxlength="13"
+              mask="#############"
+            />
+          </div>
+          <div class="col-xs-6 col-sm-2 col-md-2">
+            <selector
+              :hide-dropdown-icon="true"
+              hide-bottom-space
+              :class="getClass(false)"
+              :readonly="true"
+              :borderless="true"
+              :rules="[(val:string) => !!val || `${'กรุณาเลือก คำนำหน้าชื่อ'}`]"
+              :outlined="false"
+              dense
+              lazy-rules
+              v-model="items.childrenPrefixId"
+              emit-value
+              map-options
+              option-label="name"
+              :options="Ops.prefixOps"
+              option-value="id"
+              :label="`${'คำนำหน้าชื่อ'}`"
+              use-input
+              input-debounce="0"
+              @filter="(inputValue:any,
+                      doneFn:Function) => filterSelector(inputValue, doneFn,'prefixOps'
+                      ) "
+            />
+          </div>
+          <div class="col-xs-6 col-sm-3 col-md-3">
+            <q-input
+              :class="getClass(false)"
+              hide-bottom-space
+              :outlined="false"
+              dense
+              lazy-rules
+              :readonly="true"
+              :borderless="true"
+              v-model="items.childrenFirstName"
+              :rules="[(val:string) => !!val || `${'กรุณากรอก ชื่อ'}`]"
+              :label="`${'ชื่อ'}`"
+            />
+          </div>
+          <div class="col-xs-6 col-sm-3 col-md-3">
+            <q-input
+              :class="getClass(false)"
+              hide-bottom-space
+              :outlined="false"
+              dense
+              lazy-rules
+              :readonly="true"
+              :borderless="true"
+              v-model="items.childrenLastName"
+              :rules="[(val:string) => !!val || `${'กรุณากรอก นามสกุล'}`]"
+              :label="`${'นามสกุล'}`"
+            />
+          </div>
+          <div class="col-xs-12 col-sm-2 col-md-2">
+            <q-input
+              :class="getClass(false)"
+              hide-bottom-space
+              :outlined="false"
+              dense
+              lazy-rules
+              :readonly="true"
+              :borderless="true"
+              v-model="items.childrenCareer"
+              :label="`${'อาชีพ'}`"
+            />
+          </div>
+        </div>
+      </div>
+    </template>
+    <template v-slot:footer>
+      <q-btn
+        flat
+        round
+        icon="mdi-menu-left"
+        @click="clickPreviousNext('next')"
+        :disable="previous == false"
+        :color="!previous ? 'grey-7' : 'public'"
+      />
+      <q-btn
+        flat
+        round
+        icon="mdi-menu-right"
+        @click="clickPreviousNext('previous')"
+        :disable="next == false"
+        :color="!next ? 'grey-7' : 'public'"
+      />
+      <q-space />
+      <div class="text-black text-subtitle2 text-bold">
+        {{ indexRow + 1 }}/{{ familyDataHistory.length }}
+      </div>
+    </template>
+  </DialogHistory>
+</template>
+<script setup lang="ts">
+import { ref, onMounted } from "vue";
+import type { QForm } from "quasar";
+import { useCounterMixin } from "@/stores/mixin";
+import { useDataStore } from "@/stores/data";
+import { useQuasar } from "quasar";
+import type {
+  Family,
+  DataOption,
+} from "@/modules/04_registry/components/profileType";
+import HeaderTop from "@/modules/04_registry/components/Information/top.vue";
+import DialogHistory from "@/modules/04_registry/components/DialogHistory.vue";
+import type {
+  ResponseObject,
+  childrenFamily,
+  ResponseHistory,
+} from "@/modules/04_registry/interface/response/Family";
+import http from "@/plugins/http";
+import config from "@/app.config";
+import { useRoute } from "vue-router";
+
+const props = defineProps({
+  statusEdit: {
+    type: Boolean,
+    required: true,
+  },
+  notiNoEdit: {
+    type: Function,
+    default: () => console.log("not function"),
+  },
+  statusAdd: {
+    type: Boolean,
+    default: false,
+  },
+});
+const emit = defineEmits(["update:statusEdit"]);
+
+const route = useRoute();
+const $q = useQuasar();
+const dataStore = useDataStore();
+const { loaderPage } = dataStore;
+const mixin = useCounterMixin();
+const { date2Thai, success, messageError } = mixin;
+const edit = ref<boolean>(false);
+const fix = ref<boolean>(true);
+const myform = ref<QForm | null>(null);
+const modal = ref<boolean>(false);
+const indexRow = ref<number>(0);
+const previous = ref<boolean>(false);
+const next = ref<boolean>(false);
+//C Couple
+//M Male
+//F Female
+const familyData = ref<Family>({
+  prefixC: null,
+  prefixIdC: null,
+  firstnameC: null,
+  lastnameC: null,
+  lastnameCOld: null,
+  occupationC: null,
+  liveC: null,
+  citizenIdC: null,
+  prefixM: null,
+  prefixIdM: null,
+  firstnameM: null,
+  lastnameM: null,
+  occupationM: null,
+  liveM: null,
+  citizenIdM: null,
+  prefixF: null,
+  prefixIdF: null,
+  firstnameF: null,
+  lastnameF: null,
+  occupationF: null,
+  liveF: null,
+  citizenIdF: null,
+  same: "0",
+  childrens: [],
+});
+const familyDataHistory = ref<ResponseHistory[]>([]);
+const Ops = ref<any>({
+  prefixOps: [],
+});
+const OpsFilter = ref<any>({
+  prefixOps: [],
+});
+
+onMounted(async () => {
+  await fetchPrefix();
+  await fetchData();
+  emit("update:statusEdit", false);
+  defaultAdd();
+});
+
+const statusAdd = () => props.statusAdd;
+
+const defaultAdd = () => {
+  if (props.statusAdd) {
+    edit.value = props.statusAdd;
+    familyData.value = {
+      prefixC: null,
+      prefixIdC: null,
+      firstnameC: null,
+      lastnameC: null,
+      lastnameCOld: null,
+      occupationC: null,
+      citizenIdC: null,
+      liveC: null,
+      prefixM: null,
+      prefixIdM: null,
+      firstnameM: null,
+      lastnameM: null,
+      occupationM: null,
+      citizenIdM: null,
+      liveM: null,
+      prefixF: null,
+      prefixIdF: null,
+      firstnameF: null,
+      lastnameF: null,
+      occupationF: null,
+      citizenIdF: null,
+      liveF: null,
+      same: "0",
+      childrens: [],
+    };
+  }
+};
+
+const historyData = async () => {
+  await fetchHistory();
+};
+
+const filterSelector = (val: any, update: Function, refData: string) => {
+  update(() => {
+    Ops.value[`${refData}`] = OpsFilter.value[`${refData}`].filter(
+      (v: DataOption) => v.name.indexOf(val) > -1
+    );
+  });
+};
+
+const refreshData = async () => {
+  if (myform.value != null) {
+    myform.value.reset();
+  }
+  await fetchData();
+};
+
+const fetchPrefix = async () => {
+  loaderPage(true);
+  await http
+    .get(config.API.prefix)
+    .then((res) => {
+      const data = res.data.result;
+      let option: DataOption[] = [];
+      data.map((r: any) => {
+        option.push({ id: r.id.toString(), name: r.name.toString() });
+      });
+      Ops.value.prefixOps = option;
+      OpsFilter.value.prefixOps = option;
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      loaderPage(false);
+    });
+};
+
+const addChildren = async () => {
+  familyData.value.childrens.push({
+    id: `${familyData.value.childrens.length + 1}`,
+    childrenPrefixId: "",
+    childrenFirstName: "",
+    childrenLastName: "",
+    childrenCareer: "",
+    childrenLive: "1",
+    childrenCitizenId: "",
+  });
+
+  familyData.value.childrens.sort(
+    (a: childrenFamily, b: childrenFamily) => Number(b.id) - Number(a.id)
+  );
+};
+
+const deleteChildren = (items: childrenFamily) => {
+  const index = familyData.value.childrens.findIndex(
+    (r: childrenFamily) => r.id == items.id
+  );
+
+  familyData.value.childrens.splice(index, 1);
+};
+
+const fetchHistory = async () => {
+  familyDataHistory.value = [];
+  loaderPage(true);
+  await http
+    .get(config.API.profileFamiHisId(route.params.id.toString()))
+    .then((res) => {
+      const data: ResponseObject[] = res.data.result;
+      data.map((row: ResponseObject) => {
+        const arrayData: ResponseHistory = {
+          couple: row.couple ? "1" : "0",
+          couplePrefixId: row.couplePrefixId,
+          coupleFirstName: row.coupleFirstName,
+          coupleLastName: row.coupleLastName,
+          coupleLastNameOld: row.coupleLastNameOld,
+          coupleCareer: row.coupleCareer,
+          coupleLive: row.coupleLive ? "1" : "0",
+          coupleCitizenId: row.coupleCitizenId,
+          fatherPrefixId: row.fatherPrefixId,
+          fatherFirstName: row.fatherFirstName,
+          fatherLastName: row.fatherLastName,
+          fatherCareer: row.fatherCareer,
+          fatherLive: row.fatherLive ? "1" : "0",
+          fatherCitizenId: row.fatherCitizenId,
+          motherPrefixId: row.motherPrefixId,
+          motherFirstName: row.motherFirstName,
+          motherLastName: row.motherLastName,
+          motherCareer: row.motherCareer,
+          motherLive: row.motherLive ? "1" : "0",
+          motherCitizenId: row.motherCitizenId,
+          childrens: row.childrens,
+          createdFullName: row.createdFullName,
+          createdAt: new Date(row.createdAt),
+        };
+        familyDataHistory.value.push(arrayData);
+      });
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(async () => {
+      loaderPage(false);
+      if (familyDataHistory.value.length == 0) {
+        // modalError(
+        //   $q,
+        //   "ประวัติแก้ไขข้อมูลครอบครัว",
+        //   "ไม่มีข้อมูลประวัติแก้ไขข้อมูลครอบครัว"
+        // );
+      } else {
+        modal.value = true;
+        indexRow.value = 0;
+        if (familyDataHistory.value.length > 1) {
+          next.value = true;
+          previous.value = false;
+        } else {
+          next.value = false;
+          previous.value = false;
+        }
+      }
+    });
+};
+
+const fetchData = async () => {
+  if (route.params.id) {
+    loaderPage(true);
+    await http
+      .get(config.API.profileFamiId(route.params.id.toString()))
+      .then((res) => {
+        const data: ResponseObject = res.data.result;
+        familyData.value.prefixC = "";
+        familyData.value.prefixIdC = data.couplePrefixId;
+        familyData.value.firstnameC = data.coupleFirstName;
+        familyData.value.lastnameC = data.coupleLastName;
+        familyData.value.lastnameCOld = data.coupleLastNameOld;
+        familyData.value.occupationC = data.coupleCareer;
+        familyData.value.liveC = data.coupleLive ? "1" : "0";
+        familyData.value.citizenIdC = data.coupleCitizenId;
+
+        familyData.value.prefixM = "";
+        familyData.value.prefixIdM = data.fatherPrefixId;
+        familyData.value.firstnameM = data.fatherFirstName;
+        familyData.value.lastnameM = data.fatherLastName;
+        familyData.value.occupationM = data.fatherCareer;
+        familyData.value.liveM = data.fatherLive ? "1" : "0";
+        familyData.value.citizenIdM = data.fatherCitizenId;
+
+        familyData.value.prefixF = "";
+        familyData.value.prefixIdF = data.motherPrefixId;
+        familyData.value.firstnameF = data.motherFirstName;
+        familyData.value.lastnameF = data.motherLastName;
+        familyData.value.occupationF = data.motherCareer;
+        familyData.value.liveF = data.motherLive ? "1" : "0";
+        familyData.value.citizenIdF = data.motherCitizenId;
+        familyData.value.same = data.couple ? "1" : "0";
+
+        if (data.childrens.length > 0) {
+          let dataChild: childrenFamily[] = [];
+          data.childrens.map((row: childrenFamily, index: number) => {
+            dataChild.push({
+              id: `${index + 1}`,
+              childrenPrefixId: row.childrenPrefixId,
+              childrenFirstName: row.childrenFirstName,
+              childrenLastName: row.childrenLastName,
+              childrenCareer: row.childrenCareer,
+              childrenLive: row.childrenLive,
+              childrenCitizenId: row.childrenCitizenId,
+            });
+          });
+          familyData.value.childrens = dataChild;
+        } else {
+          familyData.value.childrens = [];
+        }
+      })
+      .catch((e) => {
+        messageError($q, e);
+      })
+      .finally(async () => {
+        loaderPage(false);
+      });
+  }
+};
+
+const editData = async () => {
+  loaderPage(true);
+  const body: ResponseObject = {
+    couple: familyData.value.same == "1",
+    couplePrefixId: familyData.value.prefixIdC,
+    coupleFirstName: familyData.value.firstnameC,
+    coupleLastName: familyData.value.lastnameC,
+    coupleLastNameOld: familyData.value.lastnameCOld,
+    coupleCareer: familyData.value.occupationC,
+    coupleLive: familyData.value.liveC == "1",
+    coupleCitizenId: familyData.value.citizenIdC,
+    fatherPrefixId: familyData.value.prefixIdM,
+    fatherFirstName: familyData.value.firstnameM,
+    fatherLastName: familyData.value.lastnameM,
+    fatherCareer: familyData.value.occupationM,
+    fatherLive: familyData.value.liveM == "1",
+    fatherCitizenId: familyData.value.citizenIdM,
+    motherPrefixId: familyData.value.prefixIdF,
+    motherFirstName: familyData.value.firstnameF,
+    motherLastName: familyData.value.lastnameF,
+    motherCareer: familyData.value.occupationF,
+    motherLive: familyData.value.liveF == "1",
+    motherCitizenId: familyData.value.citizenIdF,
+    childrens: familyData.value.childrens,
+    createdFullName: "-",
+    createdAt: new Date(),
+  };
+  await http
+    .put(config.API.profileFamiId(route.params.id.toString()), body)
+    .then((res) => {
+      success($q, "บันทึกข้อมูลสำเร็จ");
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(async () => {
+      edit.value = false;
+      emit("update:statusEdit", false);
+      await fetchData();
+    });
+};
+
+const addData = async () => {
+  //     loaderPage(true);
+  //   await http
+  //     .put(config.API.profileInforId(route.params.id.toString()), body)
+  //     .then((res) => {
+  //       success($q, "บันทึกข้อมูลสำเร็จ");
+  //     })
+  //     .catch((e) => {
+  //       messageError($q, e);
+  //     })
+  //     .finally(async () => {
+  //       edit.value = false;
+  //       emit("update:statusEdit", false);
+  //       await fetchData();
+  //       await changeBirth(informaData.value.birthDate ?? new Date());
+  //     });
+};
+
+const saveData = async () => {
+  await myform.value?.validate().then(async (success: boolean) => {
+    if (success) {
+      if (props.statusAdd) {
+        await addData();
+      } else {
+        await editData();
+      }
+    } else {
+    }
+  });
+};
+
+const clickPreviousNext = (page: string) => {
+  const index: number =
+    page == "next" ? indexRow.value - 1 : indexRow.value + 1;
+  let length: number = familyDataHistory.value.length;
+  previous.value = index == 0 ? false : true;
+  next.value = index == length - 1 ? false : true;
+  indexRow.value = index;
+};
+
+const selectRadio = (e: boolean, i: any) => {
+  if (e) {
+    familyData.value.prefixIdC = "";
+    familyData.value.firstnameC = "";
+    familyData.value.lastnameC = "";
+    familyData.value.lastnameCOld = "";
+    familyData.value.occupationC = "";
+    familyData.value.liveC = "";
+    familyData.value.citizenIdC = "";
+  }
+};
+
+const changeBtn = async () => {
+  if (edit.value == true) {
+    if (props.statusEdit === true) {
+      edit.value = false;
+      props.notiNoEdit();
+    } else {
+      emit("update:statusEdit", true);
+    }
+  } else {
+    emit("update:statusEdit", false);
+  }
+};
+
+const getClass = (val: boolean) => {
+  return {
+    "full-width inputgreen cursor-pointer": val,
+    "full-width cursor-pointer": !val,
+  };
+};
+</script>
diff --git a/src/components/information/Government.vue b/src/components/information/Government.vue
new file mode 100644
index 000000000..35d6fca2a
--- /dev/null
+++ b/src/components/information/Government.vue
@@ -0,0 +1,763 @@
+<template>
+  <q-card flat bordered class="col-12 q-px-lg q-py-md q-mt-md">
+    <HeaderTop
+      v-model:edit="edit"
+      header="ข้อมูลราชการ"
+      icon="mdi-account-tie"
+      :save="saveData"
+      :history="true"
+      :changeBtn="changeBtn"
+      :disable="statusEdit"
+      :cancel="refreshData"
+      :historyClick="clickHistory"
+    />
+    <q-form ref="myform" class="col-12">
+      <div class="row col-12 items-center q-col-gutter-x-xs q-col-gutter-y-xs">
+        <div class="col-xs-12">
+          <q-input
+            :class="getClass(false)"
+            hide-bottom-space
+            dense
+            lazy-rules
+            readonly
+            borderless
+            :model-value="govermentData.ocId"
+            :label="`${'สังกัด'}`"
+          />
+        </div>
+        <div class="col-xs-6 col-sm-3 col-md-3" v-if="employeeClass != 'temp'">
+          <q-input
+            :class="getClass(false)"
+            hide-bottom-space
+            dense
+            lazy-rules
+            readonly
+            borderless
+            :model-value="govermentData.numberId"
+            :label="`${'ตำแหน่งเลขที่'}`"
+          />
+        </div>
+        <div class="col-xs-6 col-sm-3 col-md-3">
+          <q-input
+            :class="getClass(false)"
+            hide-bottom-space
+            dense
+            lazy-rules
+            readonly
+            borderless
+            :model-value="govermentData.positionId"
+            :label="`${'ตำแหน่ง'}`"
+          />
+        </div>
+        <div class="col-xs-6 col-sm-3 col-md-3">
+          <q-input
+            :class="getClass(false)"
+            hide-bottom-space
+            dense
+            lazy-rules
+            readonly
+            borderless
+            :model-value="govermentData.positionPathSide"
+            :label="`${'ด้าน/สาขา'}`"
+          />
+        </div>
+        <div class="col-xs-6 col-sm-3 col-md-3">
+          <q-input
+            :class="getClass(false)"
+            hide-bottom-space
+            dense
+            lazy-rules
+            readonly
+            borderless
+            :model-value="govermentData.positionLine"
+            :label="`${'สายงาน'}`"
+          />
+        </div>
+        <div class="col-xs-6 col-sm-3 col-md-3">
+          <q-input
+            :class="getClass(false)"
+            hide-bottom-space
+            dense
+            lazy-rules
+            readonly
+            borderless
+            :model-value="govermentData.positionType"
+            :label="`${'ประเภท'}`"
+          />
+        </div>
+        <div class="col-xs-6 col-sm-3 col-md-3" v-if="employeeClass != 'temp'">
+          <q-input
+            :class="getClass(false)"
+            hide-bottom-space
+            dense
+            lazy-rules
+            readonly
+            borderless
+            :model-value="govermentData.positionLevel"
+            :label="`${'ระดับ'}`"
+          />
+        </div>
+        <div class="col-xs-6 col-sm-3 col-md-3">
+          <q-input
+            :class="getClass(false)"
+            hide-bottom-space
+            dense
+            lazy-rules
+            readonly
+            borderless
+            :model-value="govermentData.positionExecutive"
+            :label="`${'ตำแหน่งทางการบริหาร'}`"
+          />
+        </div>
+        <div class="col-xs-6 col-sm-3 col-md-3">
+          <q-input
+            :class="getClass(false)"
+            hide-bottom-space
+            dense
+            lazy-rules
+            readonly
+            borderless
+            :model-value="govermentData.positionExecutiveSide"
+            :label="`${'ด้านตำแหน่งทางการบริหาร'}`"
+          />
+        </div>
+        <div class="col-12 q-py-md"><q-separator /></div>
+        <div class="col-xs-6 col-sm-3 col-md-3">
+          <datepicker
+            v-model="govermentData.containDate"
+            :locale="'th'"
+            autoApply
+            :enableTimePicker="false"
+            week-start="0"
+            :max-date="new Date()"
+            :disabled="!edit"
+            @update:model-value="handleDate"
+          >
+            <template #year="{ year }">
+              {{ year + 543 }}
+            </template>
+            <template #year-overlay-value="{ value }">
+              {{ parseInt(value + 543) }}
+            </template>
+            <template #trigger>
+              <q-input
+                :class="getClass(edit)"
+                hide-bottom-space
+                :outlined="edit"
+                dense
+                lazy-rules
+                :readonly="!edit"
+                :borderless="!edit"
+                :model-value="date2Thai(new Date(govermentData.containDate))"
+                :rules="[
+                  (val) =>
+                    !!val ||
+                    `${
+                      profileType == 'officer'
+                        ? 'กรุณาเลือกวันที่บรรจุ'
+                        : 'กรุณาเลือกวันที่แต่งตั้ง'
+                    }`,
+                ]"
+                :label="`${
+                  profileType == 'officer' ? 'วันที่บรรจุ' : 'วันที่แต่งตั้ง'
+                }`"
+              >
+                <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 class="col-xs-6 col-sm-3 col-md-3">
+          <datepicker
+            v-model="govermentData.workDate"
+            :locale="'th'"
+            autoApply
+            :enableTimePicker="false"
+            week-start="0"
+            :max-date="new Date()"
+            :disabled="!edit"
+          >
+            <template #year="{ year }">
+              {{ year + 543 }}
+            </template>
+            <template #year-overlay-value="{ value }">
+              {{ parseInt(value + 543) }}
+            </template>
+            <template #trigger>
+              <q-input
+                :class="getClass(edit)"
+                hide-bottom-space
+                :outlined="edit"
+                dense
+                lazy-rules
+                :readonly="!edit"
+                :borderless="!edit"
+                :model-value="date2Thai(new Date(govermentData.workDate))"
+                :rules="[
+                  (val) =>
+                    !!val ||
+                    `${
+                      profileType == 'officer'
+                        ? 'กรุณาเลือกเริ่มปฎิบัติราชการ'
+                        : 'กรุณาเลือกวันที่จ้างและแต่งตั้งมีผล'
+                    }`,
+                ]"
+                :label="`${
+                  profileType == 'officer'
+                    ? 'เริ่มปฎิบัติราชการ'
+                    : 'วันที่จ้างและแต่งตั้งมีผล'
+                }`"
+              >
+                <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 class="col-xs-6 col-sm-6 col-md-6" v-if="profileType == 'officer'">
+          <q-input
+            :class="getClass(edit)"
+            hide-bottom-space
+            :outlined="edit"
+            dense
+            lazy-rules
+            stack-label
+            :readonly="!edit"
+            :borderless="!edit"
+            v-model="govermentData.reasonSameDate"
+            :label="`${'เหตุผลกรณีไม่ตรงวัน'}`"
+          />
+        </div>
+        <div class="col-xs-6 col-sm-3 col-md-3">
+          <q-input
+            :class="getClass(false)"
+            hide-bottom-space
+            dense
+            lazy-rules
+            readonly
+            borderless
+            :model-value="govermentData.retireDate"
+            :label="`${'วันเกษียณอายุ'}`"
+          />
+        </div>
+        <div class="col-xs-6 col-sm-3 col-md-3">
+          <q-input
+            :class="getClass(false)"
+            hide-bottom-space
+            dense
+            lazy-rules
+            readonly
+            borderless
+            :model-value="govermentData.ageAll"
+            :label="`${'อายุราชการ'}`"
+          />
+        </div>
+        <div class="col-xs-6 col-sm-3 col-md-3">
+          <q-input
+            :class="getClass(false)"
+            hide-bottom-space
+            dense
+            lazy-rules
+            readonly
+            borderless
+            :model-value="govermentData.absent"
+            :label="`${'ขาดราชการ'}`"
+          />
+        </div>
+        <div class="col-xs-6 col-sm-3 col-md-3">
+          <q-input
+            :class="getClass(false)"
+            hide-bottom-space
+            dense
+            lazy-rules
+            readonly
+            borderless
+            :model-value="govermentData.age"
+            :label="`${'อายุราชการเกื้อกูล'}`"
+          />
+        </div>
+      </div>
+    </q-form>
+  </q-card>
+  <HistoryTable
+    :rows="rowsHistory"
+    :columns="columnsHistory"
+    :filter="filterHistory"
+    :visible-columns="visibleColumnsHistory"
+    v-model:modal="modalHistory"
+    v-model:inputfilter="filterHistory"
+    v-model:inputvisible="visibleColumnsHistory"
+    v-model:tittle="tittleHistory"
+  >
+    <template #columns="props">
+      <q-tr :props="props">
+        <q-td v-for="col in props.cols" :key="col.name" :props="props">
+          <div
+            v-if="
+              col.name == 'dateStart' ||
+              col.name == 'dateAppoint' ||
+              col.name == 'createdAt'
+            "
+            class="table_ellipsis"
+          >
+            {{ date2Thai(col.value) }}
+          </div>
+          <div v-else class="table_ellipsis">
+            {{ col.value }}
+          </div>
+        </q-td>
+      </q-tr>
+    </template>
+  </HistoryTable>
+</template>
+<script setup lang="ts">
+import { onMounted, ref, watch } from "vue";
+import { useCounterMixin } from "@/stores/mixin";
+import { useDataStore } from "@/stores/data";
+import { useQuasar } from "quasar";
+import type { Goverment } from "@/modules/04_registry/components/profileType";
+import { defaultGoverment } from "@/modules/04_registry/components/profileType";
+import HeaderTop from "@/modules/04_registry/components/Information/top.vue";
+import http from "@/plugins/http";
+import config from "@/app.config";
+import HistoryTable from "@/components/TableHistory.vue";
+import type { RequestItemsHistoryObject } from "@/modules/04_registry/interface/request/Government";
+import type { ResponseObject } from "@/modules/04_registry/interface/response/Government";
+import { useRoute } from "vue-router";
+import { useProfileDataStore } from "@/modules/04_registry/store";
+import { storeToRefs } from "pinia";
+import type { QTableProps } from "quasar";
+
+const props = defineProps({
+  statusEdit: {
+    type: Boolean,
+    required: true,
+  },
+  profileType: {
+    type: String,
+    required: true,
+  },
+  employeeClass: {
+    type: String,
+    required: true,
+  },
+});
+const emit = defineEmits(["update:statusEdit"]);
+
+const route = useRoute();
+const $q = useQuasar();
+const dataStore = useDataStore();
+const { loaderPage } = dataStore;
+const mixin = useCounterMixin();
+const { date2Thai, success, dateToISO, messageError } = mixin;
+const profileStore = useProfileDataStore();
+const { birthDate, retireText } = storeToRefs(profileStore);
+const edit = ref<boolean>(false);
+const govermentData = ref<Goverment>(defaultGoverment);
+const myform = ref<any>();
+const rowsHistory = ref<RequestItemsHistoryObject[]>([]); //select data history
+const tittleHistory = ref<string>("ประวัติแก้ไขข้อมูลราชการ"); //
+const filterHistory = ref<string>(""); //search data table history
+const modalHistory = ref<boolean>(false); //modal ประวัติการแก้ไขข้อมูล
+const columnsHistory = ref<QTableProps["columns"]>([
+  {
+    name: "oc",
+    align: "left",
+    label: "สังกัด",
+    sortable: true,
+    field: "oc",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "positionPathSide",
+    align: "left",
+    label: "ตำแหน่ง",
+    sortable: true,
+    field: "positionPathSide",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "position",
+    align: "left",
+    label: "ด้าน/สาขา",
+    sortable: true,
+    field: "position",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "posNo",
+    align: "left",
+    label: "ตำแหน่งเลขที่",
+    sortable: true,
+    field: "posNo",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "positionLine",
+    align: "left",
+    label: "สายงาน",
+    sortable: true,
+    field: "positionLine",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "positionType",
+    align: "left",
+    label: "ประเภท",
+    sortable: true,
+    field: "positionType",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "positionLevel",
+    align: "left",
+    label: "ระดับ",
+    sortable: true,
+    field: "positionLevel",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "positionExecutive",
+    align: "left",
+    label: "ตำแหน่งทางการบริหาร",
+    sortable: true,
+    field: "positionExecutive",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "positionExecutiveSide",
+    align: "left",
+    label: "ด้านทางการบริหาร",
+    sortable: true,
+    field: "positionExecutiveSide",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "dateAppoint",
+    align: "left",
+    label: "วันที่บรรจุ",
+    sortable: true,
+    field: "dateAppoint",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "dateStart",
+    align: "left",
+    label: "เริ่มปฎิบัติราชการ",
+    sortable: true,
+    field: "dateStart",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "retireDate",
+    align: "left",
+    label: "วันเกษียณอายุ",
+    sortable: true,
+    field: "retireDate",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "govAge",
+    align: "left",
+    label: "อายุราชการ",
+    sortable: true,
+    field: "govAge",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "govAgeAbsent",
+    align: "left",
+    label: "ขาดราชการ",
+    sortable: true,
+    field: "govAgeAbsent",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "govAgePlus",
+    align: "left",
+    label: "อายุราชการเกื้อกูล",
+    sortable: true,
+    field: "govAgePlus",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "reasonSameDate",
+    align: "left",
+    label: "เหตุผลกรณีไม่ตรงวัน",
+    sortable: true,
+    field: "reasonSameDate",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "createdFullName",
+    align: "left",
+    label: "ผู้ดำเนินการ",
+    sortable: true,
+    field: "createdFullName",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "createdAt",
+    align: "left",
+    label: "วันที่แก้ไข",
+    sortable: true,
+    field: "createdAt",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+]);
+const visibleColumnsHistory = ref<String[]>([
+  "oc",
+  "position",
+  "positionPathSide",
+  "posNo",
+  "positionLine",
+  "positionType",
+  "positionLevel",
+  "positionexecutive",
+  "positionExecutiveSide",
+  "dateAppoint",
+  "dateStart",
+  "retireDate",
+  "govAge",
+  "govAgeAbsent",
+  "govAgePlus",
+  "reasonSameDate",
+  "createdFullName",
+  "createdAt",
+]);
+
+onMounted(async () => {
+  await fetchData();
+  emit("update:statusEdit", false);
+});
+
+watch(birthDate, async () => {
+  await fetchData();
+});
+
+watch(retireText, async () => {
+  govermentData.value.retireDate = retireText.value;
+});
+
+const fetchData = async () => {
+  loaderPage(true);
+  await http
+    .get(config.API.profileGovId(route.params.id.toString()))
+    .then((res) => {
+      const data: ResponseObject = res.data.result;
+      govermentData.value.ocId = data.oc;
+      govermentData.value.positionId = data.position;
+      govermentData.value.positionPathSide = data.positionPathSide;
+      govermentData.value.positionLine = data.positionLine;
+      govermentData.value.positionType = data.positionType;
+      govermentData.value.positionLevel = data.positionLevel;
+      govermentData.value.numberId = data.posNo;
+      govermentData.value.positionExecutive = data.positionExecutive;
+      govermentData.value.positionExecutiveSide = data.positionExecutiveSide;
+      govermentData.value.containDate = new Date(data.dateAppoint);
+      govermentData.value.workDate = new Date(data.dateStart);
+      govermentData.value.retireDate = data.retireDate;
+      govermentData.value.absent = data.govAgeAbsent;
+      govermentData.value.age = data.govAgePlus;
+      govermentData.value.ageAll = data.govAge;
+      govermentData.value.reasonSameDate = data.reasonSameDate;
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(async () => {
+      loaderPage(false);
+    });
+};
+
+const refreshData = async () => {
+  myform.value.reset();
+  await fetchData();
+};
+
+const editData = async () => {
+  loaderPage(true);
+  await http
+    .put(config.API.profileGovId(route.params.id.toString()), {
+      dateAppoint: dateToISO(govermentData.value.containDate),
+      dateStart: dateToISO(govermentData.value.workDate),
+      reasonSameDate: govermentData.value.reasonSameDate,
+    })
+    .then((res) => {
+      success($q, "บันทึกข้อมูลสำเร็จ");
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(async () => {
+      emit("update:statusEdit", false);
+      edit.value = false;
+      await refreshData();
+    });
+};
+
+const saveData = async () => {
+  await myform.value.validate().then(async (success: boolean) => {
+    if (success) {
+      await editData();
+    } else {
+    }
+  });
+};
+
+const handleDate = async (modelData: Date) => {
+  govermentData.value.containDate = modelData;
+  await fetchCalAgeGov(modelData);
+};
+
+const fetchCalAgeGov = async (date: Date) => {
+  loaderPage(true);
+  const body = {
+    dateAppoint: date,
+  };
+  await http
+    .post(config.API.profileCalGovId(route.params.id.toString()), body)
+    .then((res) => {
+      const result = res.data.result;
+      govermentData.value.ageAll = result;
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(async () => {
+      loaderPage(false);
+    });
+};
+
+/**
+ * ฟังชั้นดูข้อมูลประวัติแก้ไขข้อมูลที่เลือก
+ */
+const clickHistory = async () => {
+  modalHistory.value = true;
+  loaderPage(true);
+  await http
+    .get(config.API.profileGovHisId(route.params.id.toString()))
+    .then((res) => {
+      let data = res.data.result;
+      rowsHistory.value = [];
+      data.map((e: RequestItemsHistoryObject) => {
+        rowsHistory.value.push({
+          oc: e.oc,
+          position: e.position,
+          positionPathSide: e.positionPathSide,
+          posNo: e.posNo,
+          positionLine: e.positionLine,
+          positionType: e.positionType,
+          positionLevel: e.positionLevel,
+          positionExecutive: e.positionExecutive,
+          positionExecutiveSide: e.positionExecutiveSide,
+          dateAppoint: new Date(e.dateAppoint),
+          dateStart: new Date(e.dateStart),
+          retireDate: e.retireDate,
+          govAge: e.govAge,
+          govAgeAbsent: e.govAgeAbsent,
+          govAgePlus: e.govAgePlus,
+          reasonSameDate: e.reasonSameDate,
+          createdFullName: e.createdFullName,
+          createdAt: new Date(e.createdAt),
+        });
+      });
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      loaderPage(false);
+    });
+};
+
+const changeBtn = async () => {
+  if (edit.value == true) {
+    if (props.statusEdit === true) {
+      edit.value = false;
+    } else {
+      emit("update:statusEdit", true);
+    }
+  } else {
+    emit("update:statusEdit", false);
+  }
+};
+
+const getClass = (val: boolean) => {
+  return {
+    "full-width inputgreen cursor-pointer": val,
+    "full-width cursor-pointer": !val,
+  };
+};
+</script>
diff --git a/src/components/information/Image.vue b/src/components/information/Image.vue
new file mode 100644
index 000000000..30efcc2a7
--- /dev/null
+++ b/src/components/information/Image.vue
@@ -0,0 +1,365 @@
+<template>
+  <q-page-sticky
+    position="top"
+    expand
+    class="bg-grey-2 text-white"
+    style="z-index: 99; padding: 0% 1% 0% 1%"
+  >
+    <div class="row col-12 q-gutter-sm q-pb-sm text-dark no-wrap items-center">
+      <q-btn
+        flat
+        round
+        class="bg-teal-1 full-height"
+        color="primary"
+        icon="mdi-chevron-left"
+        dense
+        @click="router.go(-1)"
+      >
+      </q-btn>
+      <q-avatar
+        v-if="imageUrl == null"
+        size="65px"
+        rounded
+        class="containerimage"
+      >
+        <img
+          src="@/assets/avatar_user.jpg"
+          class="bg-grey-3"
+          style="object-fit: cover"
+        />
+        <div
+          class="overlay absolute-bottom text-subtitle2 text-center cursor-pointer"
+          @click="clickImage()"
+        >
+          <q-icon name="mdi-camera" size="18px" color="blue">
+            <q-tooltip>อัปเดตรูปภาพ</q-tooltip>
+          </q-icon>
+
+          <input
+            type="file"
+            style="display: none"
+            ref="inputImage"
+            accept="image/*"
+            @change="uploadImage"
+          />
+        </div>
+      </q-avatar>
+      <q-avatar v-else size="65px" rounded class="containerimage">
+        <img :src="imageUrl" class="bg-grey-3" style="object-fit: cover" />
+        <div
+          class="overlay absolute-bottom text-subtitle2 text-center cursor-pointer"
+          @click="clickImage()"
+        >
+          <q-icon name="mdi-camera" size="18px" color="blue">
+            <q-tooltip>อัปเดตรูปภาพ</q-tooltip>
+          </q-icon>
+
+          <input
+            type="file"
+            style="display: none"
+            ref="inputImage"
+            accept="image/*"
+            @change="uploadImage"
+          />
+        </div>
+      </q-avatar>
+      <div class="row items-center text-dark q-ml-md">
+        <div class="column">
+          <div class="text-bold q-pb-xs text-name">
+            {{ props.fullName }}
+          </div>
+          <div>{{ props.position }}</div>
+        </div>
+      </div>
+      <q-space />
+
+      <slot name="button-right" />
+    </div>
+  </q-page-sticky>
+  <!---------------------------------------- Dialog เลือก Image ---------------------------------------->
+  <q-dialog v-model="dialogImage" persistent>
+    <q-card style="width: 100vw; max-width: 60vw">
+      <q-card-section class="q-py-sm row">
+        <div class="text-h6">เลือกรูปภาพ</div>
+        <q-space />
+        <q-btn
+          icon="close"
+          unelevated
+          round
+          dense
+          @click="closeImage"
+          style="color: #ff8080; background-color: #ffdede"
+        >
+          <q-tooltip>ปิดหน้านี้</q-tooltip>
+        </q-btn>
+      </q-card-section>
+      <q-separator />
+      <q-card-section class="col-12 row">
+        <div
+          class="row wrap items-start col-12 q-col-gutter-sm"
+          style="height: 320px; overflow: auto"
+        >
+          <div class="col-3" @click="addNewImage">
+            <div
+              style="
+                height: 160px;
+                max-width: 15vw;
+                display: flex !important;
+                justify-content: center;
+                align-items: center;
+              "
+              class="column rounded-borders cursor-pointer bg-active-image text-white"
+            >
+              <q-icon name="add" size="60px" color="white" />
+              <strong>อัปโหลดรูปภาพ</strong>
+            </div>
+          </div>
+          <div
+            v-for="n in images"
+            :key="n"
+            class="col-3"
+            @click="imageActive(n)"
+          >
+            <div :class="getClass(n)">
+              <q-img
+                v-if="n.avatar != null"
+                :src="n.avatar"
+                :class="imageClass(n)"
+              >
+                <div
+                  class="absolute-bottom col-12 cursor-pointer flex justify-between items-center"
+                  style="padding: 5px"
+                >
+                  {{ date2Thai(n.createdDate) }}
+
+                  <q-btn
+                    v-if="!n.isActive"
+                    icon="delete"
+                    unelevated
+                    dense
+                    @click="deletePhoto(n.id)"
+                    class="bg-white"
+                    style="color: #ff8080"
+                  />
+                </div>
+              </q-img>
+            </div>
+          </div>
+        </div>
+      </q-card-section>
+      <q-separator />
+      <q-card-actions align="right">
+        <q-btn
+          icon="check"
+          dense
+          flat
+          round
+          @click="selectAvatarHistory"
+          color="positive"
+        >
+          <q-tooltip>เลือกรูปภาพ</q-tooltip>
+        </q-btn>
+      </q-card-actions>
+    </q-card>
+  </q-dialog>
+</template>
+<script setup lang="ts">
+import { ref } from "vue";
+import { useRoute, useRouter } from "vue-router";
+import { useCounterMixin } from "@/stores/mixin";
+import { useQuasar } from "quasar";
+
+const props = defineProps({
+  fullName: {
+    type: String,
+    default: "ชื่อ สกุล",
+    required: true,
+  },
+  position: {
+    type: String,
+    default: "ตำแหน่ง",
+    required: true,
+  },
+  fetchData: {
+    type: Function,
+    default: () => console.log("not function"),
+  },
+  fetchSave: {
+    type: Function,
+    default: () => console.log("not function"),
+  },
+  fetchDelete: {
+    type: Function,
+    default: () => console.log("not function"),
+  },
+  fetchUpload: {
+    type: Function,
+    default: () => console.log("not function"),
+  },
+});
+
+const $q = useQuasar();
+const mixin = useCounterMixin();
+const { date2Thai, dateToISO, messageError, dialogMessage, success } = mixin;
+
+const router = useRouter();
+const imageUrl = ref<any>(null);
+const inputImage = ref<any>(null);
+const dialogImage = ref<boolean>(false);
+const images = ref<any>([]);
+const activeImage = ref<any | null>(null);
+const profileId = ref<string>("");
+
+const closeImage = () => {
+  dialogImage.value = false;
+};
+
+const clickImage = async () => {
+  // ***************************************************************************************************
+  //                  ****************** fetch data รูปภาพทั้งหมด ******************
+  // ***************************************************************************************************
+
+  dialogImage.value = true;
+};
+
+const uploadImage = async (e: any) => {
+  let input = e.target.files;
+  if (input.length > 0) {
+    const formData = new FormData();
+    formData.append("FileData", input[0]);
+    await props.fetchUpload(profileId.value, formData).then(async () => {
+      await props.fetchData();
+      closeImage();
+    });
+    // ***************************************************************************************************
+    //          ****************** ต้องทำ function props รับ formData กลับ ******************
+    //     ****************** finally ทำการ fetch data,dialogImage.value = false ******************
+    // ***************************************************************************************************
+  }
+};
+
+const selectAvatarHistory = async () => {
+  if (activeImage.value == null) {
+    dialogMessage(
+      $q,
+      "ไม่สามารถเปลี่ยนรูปได้",
+      "กรุณาเลือกรูปที่ต้องการเปลี่ยน",
+      "warning",
+      undefined,
+      "orange",
+      undefined,
+      undefined,
+      true
+    );
+    return;
+  }
+  await props.fetchSave(profileId.value);
+  // ***************************************************************************************************
+  //                 ****************** fetch data เปลี่ยนรูปภาพ ส่ง ID กลับ******************
+  // ***************************************************************************************************
+};
+
+const imageActive = (n: any) => {
+  activeImage.value = n;
+};
+
+const addNewImage = () => {
+  inputImage.value.click();
+  imageActive(null);
+};
+
+const deletePhoto = async (id: string) => {
+  dialogMessage(
+    $q,
+    "ลบข้อมูล",
+    "ต้องการทำการลบข้อมูลนี้ใช่หรือไม่",
+    "delete",
+    undefined,
+    "red",
+    async () => await fetchDataDelete(id),
+    undefined,
+    false
+  );
+};
+
+const fetchDataDelete = async (id: string) => {
+  await props.fetchDelete(id).then(async () => {
+    await props.fetchData();
+    await clickImage();
+  });
+  // ***************************************************************************************************
+  //                  ****************** fetch delete รูปภาพ ******************
+  //          ****************** finally ทำการ fetch data,clickImage() ******************
+  // ***************************************************************************************************
+};
+
+const imageClass = (n: any) => {
+  const val = n == activeImage.value;
+  return {
+    "rounded-borders bg-grey-2 image-size-default": val,
+    "rounded-borders bg-grey-2 image-size-full": !val,
+  };
+};
+
+const getClass = (n: any) => {
+  const val = n == activeImage.value;
+  return {
+    "rounded-borders border-green shadow-1": val,
+    "rounded-borders shadow-1": !val,
+  };
+};
+</script>
+<style lang="scss" scoped>
+.image-size-default {
+  height: 150px;
+  max-width: 15vw;
+}
+
+.image-size-full {
+  height: 160px;
+  max-width: 15vw;
+}
+
+.border-green {
+  border: 5px solid #52c688;
+}
+
+.area-div {
+  background-color: transparent;
+}
+
+.text-header {
+  font-size: 1.2em;
+}
+
+.containerimage {
+  position: relative;
+}
+
+.containerimage:hover .overlay {
+  opacity: 1;
+}
+
+.overlay {
+  background-color: #e4f2ffd2 !important;
+  opacity: 0;
+  padding: 2px !important;
+}
+
+.information:target {
+  padding-top: 84px;
+}
+
+.border-custom {
+  border: 0.5px solid #c3c3c3;
+}
+
+.bg-active-image {
+  background-color: #52c688;
+}
+
+.text-name {
+  font-size: 1.25em;
+  overflow: hidden;
+}
+</style>
diff --git a/src/components/information/Information.vue b/src/components/information/Information.vue
new file mode 100644
index 000000000..1acf5f85d
--- /dev/null
+++ b/src/components/information/Information.vue
@@ -0,0 +1,1129 @@
+<template>
+  <q-card flat bordered class="col-12 q-px-lg q-py-md">
+    <HeaderTop
+      v-model:edit="edit"
+      header="ข้อมูลส่วนตัว"
+      icon="mdi-account"
+      :save="saveData"
+      :history="!statusAdd()"
+      :changeBtn="changeBtn"
+      :disable="statusEdit"
+      :cancel="onCancel"
+      :historyClick="clickHistory"
+      :addEmployee="statusAdd()"
+    />
+    <q-form ref="myform" class="col-12">
+      <div class="row col-12 items-center q-col-gutter-x-sm q-col-gutter-y-sm">
+        <div class="col-xs-6 col-sm-3 col-md-3">
+          <q-input
+            :class="getClass(edit)"
+            hide-bottom-space
+            :outlined="edit"
+            dense
+            lazy-rules
+            :readonly="!edit"
+            :borderless="!edit"
+            v-model="informaData.cardid"
+            @update:model-value="changeCardID"
+            :rules="[
+              (val:string) => !!val || `${'กรุณากรอก เลขบัตรประจำตัวประชาชน'}`,
+              (val:string) =>
+                val.length >= 13 ||
+                `${'กรุณากรอกเลขบัตรประจำตัวประชาชนให้ครบ'}`,
+            ]"
+            label="เลขบัตรประจำตัวประชาชน"
+            maxlength="13"
+            mask="#############"
+          />
+        </div>
+        <div class="col-xs-6 col-sm-3 col-md-3">
+          <selector
+            :hide-dropdown-icon="!edit"
+            hide-bottom-space
+            :class="getClass(edit)"
+            :readonly="!edit"
+            :borderless="!edit"
+            :rules="[(val:string) => !!val || `${'กรุณาเลือก คำนำหน้าชื่อ'}`]"
+            :outlined="edit"
+            dense
+            lazy-rules
+            v-model="informaData.prefixId"
+            emit-value
+            map-options
+            option-label="name"
+            :options="Ops.prefixOps"
+            option-value="id"
+            :label="`${'คำนำหน้าชื่อ'}`"
+            use-input
+            input-debounce="0"
+            @filter="(inputValue:any,
+                      doneFn:Function) => filterSelector(inputValue, doneFn,'prefixOps'
+                      ) "
+          />
+        </div>
+
+        <div class="col-xs-6 col-sm-3 col-md-3">
+          <q-input
+            :class="getClass(edit)"
+            hide-bottom-space
+            :outlined="edit"
+            dense
+            lazy-rules
+            :readonly="!edit"
+            :borderless="!edit"
+            v-model="informaData.firstname"
+            :rules="[(val:string) => !!val || `${'กรุณากรอก ชื่อ'}`]"
+            :label="`${'ชื่อ'}`"
+          />
+        </div>
+        <div class="col-xs-6 col-sm-3 col-md-3">
+          <q-input
+            :class="getClass(edit)"
+            hide-bottom-space
+            :outlined="edit"
+            dense
+            lazy-rules
+            :readonly="!edit"
+            :borderless="!edit"
+            v-model="informaData.lastname"
+            :rules="[(val:string) => !!val || `${'กรุณากรอก นามสกุล'}`]"
+            :label="`${'นามสกุล'}`"
+          />
+        </div>
+        <div class="col-xs-6 col-sm-2 col-md-2">
+          <datepicker
+            v-model="informaData.birthDate"
+            :locale="'th'"
+            autoApply
+            :enableTimePicker="false"
+            week-start="0"
+            :max-date="new Date()"
+            :disabled="!edit"
+            @update:model-value="handleDate"
+          >
+            <template #year="{ year }">
+              {{ year + 543 }}
+            </template>
+            <template #year-overlay-value="{ value }">
+              {{ parseInt(value + 543) }}
+            </template>
+            <template #trigger>
+              <q-input
+                :class="getClass(edit)"
+                hide-bottom-space
+                :outlined="edit"
+                dense
+                lazy-rules
+                :readonly="!edit"
+                :borderless="!edit"
+                :model-value="date2Thai(informaData.birthDate)"
+                :rules="[(val:string) => !!val || `${'กรุณาเลือก วัน/เดือน/ปี เกิด'}`]"
+                :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 class="col-xs-6 col-sm-2 col-md-2">
+          <q-input
+            :class="getClass(false)"
+            hide-bottom-space
+            dense
+            lazy-rules
+            readonly
+            borderless
+            :style="!edit ? '' : 'padding:0 12px;'"
+            :model-value="informaData.age"
+            :label="`${'อายุ'}`"
+          />
+        </div>
+        <div class="col-xs-6 col-sm-2 col-md-2">
+          <selector
+            :hide-dropdown-icon="!edit"
+            hide-bottom-space
+            :class="getClass(edit)"
+            :readonly="!edit"
+            :borderless="!edit"
+            :outlined="edit"
+            dense
+            lazy-rules
+            v-model="informaData.genderId"
+            emit-value
+            map-options
+            option-label="name"
+            :options="Ops.genderOps"
+            option-value="id"
+            :label="`${'เพศ'}`"
+            use-input
+            input-debounce="0"
+            @filter="(inputValue:any,
+                      doneFn:Function) => filterSelector(inputValue, doneFn,'genderOps'
+                      ) "
+          />
+        </div>
+        <div class="col-xs-6 col-sm-2 col-md-2">
+          <selector
+            :hide-dropdown-icon="!edit"
+            hide-bottom-space
+            :class="getClass(edit)"
+            :readonly="!edit"
+            :borderless="!edit"
+            :outlined="edit"
+            dense
+            lazy-rules
+            v-model="informaData.statusId"
+            emit-value
+            map-options
+            option-label="name"
+            :options="Ops.statusOps"
+            option-value="id"
+            :label="`${'สถานภาพ'}`"
+            use-input
+            input-debounce="0"
+            @filter="(inputValue:any,
+                      doneFn:Function) => filterSelector(inputValue, doneFn,'statusOps'
+                      ) "
+          />
+        </div>
+        <div class="col-xs-6 col-sm-2 col-md-2">
+          <q-input
+            :class="getClass(edit)"
+            hide-bottom-space
+            :outlined="edit"
+            dense
+            lazy-rules
+            :readonly="!edit"
+            :borderless="!edit"
+            v-model="informaData.nationality"
+            :label="`${'สัญชาติ'}`"
+          />
+        </div>
+        <div class="col-xs-6 col-sm-2 col-md-2">
+          <q-input
+            :class="getClass(edit)"
+            hide-bottom-space
+            :outlined="edit"
+            dense
+            lazy-rules
+            :readonly="!edit"
+            :borderless="!edit"
+            v-model="informaData.ethnicity"
+            :label="`${'เชื้อชาติ'}`"
+          />
+        </div>
+        <div class="col-xs-6 col-sm-2 col-md-2">
+          <selector
+            :hide-dropdown-icon="!edit"
+            hide-bottom-space
+            :class="getClass(edit)"
+            :readonly="!edit"
+            :borderless="!edit"
+            :outlined="edit"
+            dense
+            lazy-rules
+            v-model="informaData.religionId"
+            emit-value
+            map-options
+            option-label="name"
+            :options="Ops.religionOps"
+            option-value="id"
+            :label="`${'ศาสนา'}`"
+            use-input
+            input-debounce="0"
+            @filter="(inputValue:any,
+                      doneFn:Function) => filterSelector(inputValue, doneFn,'religionOps'
+                      ) "
+          />
+        </div>
+        <div class="col-xs-6 col-sm-2 col-md-2">
+          <selector
+            :hide-dropdown-icon="!edit"
+            hide-bottom-space
+            :class="getClass(edit)"
+            :readonly="!edit"
+            :borderless="!edit"
+            :outlined="edit"
+            dense
+            lazy-rules
+            v-model="informaData.bloodId"
+            emit-value
+            map-options
+            option-label="name"
+            :options="Ops.bloodOps"
+            option-value="id"
+            :label="`${'หมู่เลือด'}`"
+            use-input
+            input-debounce="0"
+            @filter="(inputValue:any,
+                      doneFn:Function) => filterSelector(inputValue, doneFn,'bloodOps'
+                      ) "
+            clearable
+          />
+        </div>
+        <div class="col-xs-6 col-sm-2 col-md-2">
+          <q-input
+            hide-bottom-space
+            :outlined="edit"
+            dense
+            lazy-rules
+            type="tel"
+            :class="getClass(edit)"
+            :readonly="!edit"
+            :borderless="!edit"
+            v-model="informaData.tel"
+            :label="`${'เบอร์โทร'}`"
+            mask="##########"
+          />
+        </div>
+        <div
+          class="col-xs-6 col-sm-3 col-md-3"
+          v-if="informaData.profileType == 'employee'"
+        >
+          <selector
+            :hide-dropdown-icon="!edit"
+            hide-bottom-space
+            :class="getClass(edit)"
+            :readonly="!edit"
+            :borderless="!edit"
+            :rules="[(val:string) => !!val || `${'กรุณาเลือก ประเภทการจ้าง'}`]"
+            :outlined="edit"
+            dense
+            lazy-rules
+            v-model="informaData.employeeType"
+            emit-value
+            map-options
+            option-label="name"
+            :options="Ops.employeeTypeOps"
+            option-value="id"
+            :label="`${'ประเภทการจ้าง'}`"
+            use-input
+            input-debounce="0"
+            @filter="(inputValue:any,
+                      doneFn:Function) => filterSelector(inputValue, doneFn,'employeeTypeOps'
+                      ) "
+          />
+        </div>
+        <div
+          class="col-xs-6 col-sm-3 col-md-3"
+          v-if="informaData.profileType == 'employee'"
+        >
+          <selector
+            :hide-dropdown-icon="!edit"
+            hide-bottom-space
+            :class="getClass(edit)"
+            :readonly="!edit"
+            :borderless="!edit"
+            :rules="[(val:string) => !!val || `${'กรุณาเลือก ประเภทลูกจ้าง'}`]"
+            :outlined="edit"
+            dense
+            lazy-rules
+            v-model="informaData.employeeClass"
+            emit-value
+            map-options
+            option-label="name"
+            :options="Ops.employeeClassOps"
+            option-value="id"
+            :label="`${'ประเภทลูกจ้าง'}`"
+            use-input
+            input-debounce="0"
+            @filter="(inputValue:any,
+                      doneFn:Function) => filterSelector(inputValue, doneFn,'employeeClassOps'
+                      ) "
+          />
+        </div>
+        <div class="col-12 q-pt-md q-pb-sm"><q-separator /></div>
+        <div class="col-xs-12 q-col-gutter-x-sm items-center flex q-my-sm">
+          <label class="text-weight-bold">• เปลี่ยนชื่อ-นามสกุล</label>
+          <q-radio
+            v-model="same"
+            checked-icon="task_alt"
+            unchecked-icon="panorama_fish_eye"
+            val="1"
+            label="มี"
+            dense
+            :disable="!edit"
+          />
+          <q-radio
+            v-model="same"
+            checked-icon="task_alt"
+            unchecked-icon="panorama_fish_eye"
+            val="0"
+            label="ไม่มี"
+            color="grey-9"
+            dense
+            :disable="!edit"
+          />
+        </div>
+        <div class="row col-12">
+          <OldName
+            v-if="same == '1'"
+            v-model:statusEdit="edit"
+            :fetchDataInformation="fetchDataComponent"
+            :perfixId="informaData.prefixId == null ? '' : informaData.prefixId"
+            :firstname="
+              informaData.firstname == null ? '' : informaData.firstname
+            "
+            :lastname="informaData.lastname == null ? '' : informaData.lastname"
+          />
+        </div>
+      </div>
+    </q-form>
+  </q-card>
+  <HistoryTable
+    :rows="rowsHistory"
+    :columns="columnsHistory"
+    :filter="filterHistory"
+    :visible-columns="visibleColumnsHistory"
+    v-model:modal="modalHistory"
+    v-model:inputfilter="filterHistory"
+    v-model:inputvisible="visibleColumnsHistory"
+    v-model:tittle="tittleHistory"
+  >
+    <template #columns="props">
+      <q-tr :props="props">
+        <q-td v-for="col in props.cols" :key="col.name" :props="props">
+          <div
+            v-if="col.name == 'birthDate' || col.name == 'createdAt'"
+            class="table_ellipsis"
+          >
+            {{ date2Thai(col.value) }}
+          </div>
+          <div v-else class="table_ellipsis">
+            {{ col.value }}
+          </div>
+        </q-td>
+      </q-tr>
+    </template>
+  </HistoryTable>
+</template>
+<script setup lang="ts">
+import { ref, onMounted } from "vue";
+import { useCounterMixin } from "@/stores/mixin";
+import { useDataStore } from "@/stores/data";
+import { useQuasar } from "quasar";
+import type {
+  Information,
+  DataOption,
+} from "@/modules/04_registry/components/profileType";
+import { defaultInformation } from "@/modules/04_registry/components/profileType";
+import type { RequestItemsHistoryObject } from "@/modules/04_registry/interface/request/Information";
+import type { ResponseObject } from "@/modules/04_registry/interface/response/Information";
+import type { InformationOps } from "@/modules/04_registry/interface/index/Main";
+import OldName from "@/modules/04_registry/components/Information/OldName.vue";
+import HeaderTop from "@/modules/04_registry/components/Information/top.vue";
+import HistoryTable from "@/components/TableHistory.vue";
+import http from "@/plugins/http";
+import config from "@/app.config";
+import { useRoute } from "vue-router";
+import { useComponentProfileDataStore } from "@/components/information/store/store";
+import type { QTableColumn, QForm } from "quasar";
+
+const props = defineProps({
+  statusEdit: {
+    type: Boolean,
+    required: true,
+  },
+  fetchDataProfile: {
+    type: Function,
+    default: () => console.log("not function"),
+  },
+  statusAdd: {
+    type: Boolean,
+    default: false,
+  },
+});
+const emit = defineEmits(["update:statusEdit"]);
+
+const route = useRoute();
+const $q = useQuasar();
+const mixin = useCounterMixin();
+const { date2Thai, success, dateToISO, messageError, dialogMessage } = mixin;
+const dataStore = useDataStore();
+const { loaderPage } = dataStore;
+const profileStore = useComponentProfileDataStore();
+const { changeRetireText, changeBirth } = profileStore;
+const edit = ref<boolean>(false);
+const defaultCitizenData = ref<string | null>("");
+const informaData = ref<Information>(defaultInformation);
+const rowsHistory = ref<RequestItemsHistoryObject[]>([]); //select data history
+const tittleHistory = ref<string>("ประวัติแก้ไขข้อมูลส่วนตัว"); //
+const filterHistory = ref<string>(""); //search data table history
+const modalHistory = ref<boolean>(false); //modal ประวัติการแก้ไขข้อมูล
+const myform = ref<QForm | null>(null);
+const dateBefore = ref<Date>(new Date());
+const same = ref<string>("0");
+const Ops = ref<InformationOps>({
+  prefixOps: [],
+  prefixOldOps: [],
+  genderOps: [],
+  bloodOps: [],
+  statusOps: [],
+  religionOps: [],
+  employeeClassOps: [
+    { id: "perm", name: "ลูกจ้างประจำ" },
+    { id: "temp", name: "ลูกจ้างชั่วคราว" },
+  ],
+  employeeTypeOps: [
+    { id: "gov", name: "งบประมาณเงินอุดหนุนรัฐบาล" },
+    { id: "bkk", name: "งบประมาณกรุงเทพมหานคร" },
+  ],
+});
+const OpsFilter = ref<InformationOps>({
+  prefixOps: [],
+  prefixOldOps: [],
+  genderOps: [],
+  bloodOps: [],
+  statusOps: [],
+  religionOps: [],
+  employeeClassOps: [
+    { id: "perm", name: "ลูกจ้างประจำ" },
+    { id: "temp", name: "ลูกจ้างชั่วคราว" },
+  ],
+  employeeTypeOps: [
+    { id: "gov", name: "งบประมาณเงินอุดหนุนรัฐบาล" },
+    { id: "bkk", name: "งบประมาณกรุงเทพมหานคร" },
+  ],
+});
+const columnsHistory = ref<QTableColumn[]>([
+  {
+    name: "citizenId",
+    align: "left",
+    label: "เลขบัตรประจำตัวประชาชน",
+    sortable: true,
+    field: "citizenId",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "prefix",
+    align: "left",
+    label: "คำนำหน้าชื่อ",
+    sortable: true,
+    field: "prefix",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "firstName",
+    align: "left",
+    label: "ชื่อ",
+    sortable: true,
+    field: "firstName",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "lastName",
+    align: "left",
+    label: "นามสกุล",
+    sortable: true,
+    field: "lastName",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "birthDate",
+    align: "left",
+    label: "วัน/เดือน/ปี เกิด",
+    sortable: true,
+    field: "birthDate",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "gender",
+    align: "left",
+    label: "เพศ",
+    sortable: true,
+    field: "gender",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "relationship",
+    align: "left",
+    label: "สถานภาพ",
+    sortable: true,
+    field: "relationship",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "bloodGroup",
+    align: "left",
+    label: "หมู่เลือด",
+    sortable: true,
+    field: "bloodGroup",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "nationality",
+    align: "left",
+    label: "สัญชาติ",
+    sortable: true,
+    field: "nationality",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "race",
+    align: "left",
+    label: "เชื้อชาติ",
+    sortable: true,
+    field: "race",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "religion",
+    align: "left",
+    label: "ศาสนา",
+    sortable: true,
+    field: "religion",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "telephoneNumber",
+    align: "left",
+    label: "เบอร์โทร",
+    sortable: true,
+    field: "telephoneNumber",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "employeeType",
+    align: "left",
+    label: "ประเภทการจ้าง",
+    sortable: true,
+    field: "employeeType",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "employeeClass",
+    align: "left",
+    label: "ประเภทลูกจ้าง",
+    sortable: true,
+    field: "employeeClass",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "createdFullName",
+    align: "left",
+    label: "ผู้ดำเนินการ",
+    sortable: true,
+    field: "createdFullName",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "createdAt",
+    align: "left",
+    label: "วันที่แก้ไข",
+    sortable: true,
+    field: "createdAt",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+]);
+const visibleColumnsHistory = ref<String[]>([
+  "citizenId",
+  "prefix",
+  "firstName",
+  "lastName",
+  "birthDate",
+  "gender",
+  "relationship",
+  "bloodGroup",
+  "nationality",
+  "race",
+  "religion",
+  "telephoneNumber",
+  "employeeType",
+  "employeeClass",
+  "createdFullName",
+  "createdAt",
+]);
+
+onMounted(async () => {
+  await fetchPerson();
+  await fetchData();
+  emit("update:statusEdit", false);
+  defaultAdd();
+});
+
+const statusAdd = () => props.statusAdd;
+
+const defaultAdd = () => {
+  if (props.statusAdd) {
+    edit.value = props.statusAdd;
+    informaData.value = {
+      cardid: null,
+      age: null,
+      prefix: null,
+      prefixId: null,
+      firstname: null,
+      lastname: null,
+      birthDate: new Date(),
+      genderId: null,
+      bloodId: null,
+      nationality: null,
+      ethnicity: null,
+      statusId: null,
+      religionId: null,
+      tel: null,
+      employeeType: null,
+      employeeClass: null,
+      profileType: null,
+    };
+  }
+};
+
+const onCancel = async () => {
+  if (myform.value != null) {
+    myform.value.reset();
+  }
+  await fetchData();
+};
+
+/**
+ * get รายการ ข้อมูลเกี่ยวกับบุคคล
+ */
+const fetchPerson = async () => {
+  loaderPage(true);
+  await http
+    .get(config.API.person)
+    .then((res) => {
+      const data = res.data.result;
+      let optionbloodGroups: DataOption[] = [];
+      data.bloodGroups.map((r: any) => {
+        optionbloodGroups.push({
+          id: r.id.toString(),
+          name: r.name.toString(),
+        });
+      });
+      Ops.value.bloodOps = optionbloodGroups;
+      OpsFilter.value.bloodOps = optionbloodGroups;
+
+      let optiongenders: DataOption[] = [];
+      data.genders.map((r: any) => {
+        optiongenders.push({
+          id: r.id.toString(),
+          name: r.name.toString(),
+        });
+      });
+      Ops.value.genderOps = optiongenders;
+      OpsFilter.value.genderOps = optiongenders;
+
+      let optionprefixs: DataOption[] = [];
+      data.prefixs.map((r: any) => {
+        optionprefixs.push({
+          id: r.id.toString(),
+          name: r.name.toString(),
+        });
+      });
+      Ops.value.prefixOps = optionprefixs;
+      OpsFilter.value.prefixOps = optionprefixs;
+
+      let optionrelationships: DataOption[] = [];
+      data.relationships.map((r: any) => {
+        optionrelationships.push({
+          id: r.id.toString(),
+          name: r.name.toString(),
+        });
+      });
+      Ops.value.statusOps = optionrelationships;
+      OpsFilter.value.statusOps = optionrelationships;
+
+      let optionreligions: DataOption[] = [];
+      data.religions.map((r: any) => {
+        optionreligions.push({
+          id: r.id.toString(),
+          name: r.name.toString(),
+        });
+      });
+      Ops.value.religionOps = optionreligions;
+      OpsFilter.value.religionOps = optionreligions;
+    })
+    .catch((e: any) => {})
+    .finally(() => {
+      loaderPage(false);
+    });
+};
+
+const changeCardID = (value: string | number | null) => {
+  if (value != null && typeof value == "string") {
+    if (value.length == 13 && value != defaultCitizenData.value) {
+      dialogMessage(
+        $q,
+        "ข้อมูลมีการแก้ไข?",
+        "ยืนยันการเปลี่ยนเลขบัตรประชาชนใช่หรือไม่",
+        "info",
+        "ยืนยัน",
+        "public",
+        async () => {
+          await checkCitizen(value);
+        },
+        async () => {
+          informaData.value.cardid = defaultCitizenData.value;
+        }
+      );
+    }
+  }
+};
+
+const checkCitizen = async (id: string) => {
+  loaderPage(true);
+  await http
+    .get(config.API.profileCitizenId(id))
+    .then((res) => {
+      const data = res.data.result.citizen;
+
+      if (!data) {
+        dialogMessage(
+          $q,
+          "ข้อความแจ้งเตือน",
+          "เลขบัตรประจำตัวประชาชนนี้มีการใช้งานแล้ว",
+          "warning",
+          undefined,
+          "orange",
+          undefined,
+          undefined,
+          true
+        );
+        informaData.value.cardid = defaultCitizenData.value;
+      }
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      loaderPage(false);
+    });
+};
+
+/**
+ * ฟังชั้นดูข้อมูลประวัติแก้ไขข้อมูลที่เลือก
+ */
+const clickHistory = async () => {
+  modalHistory.value = true;
+  loaderPage(true);
+  await http
+    .get(config.API.profileInforHisId(route.params.id.toString()))
+    .then((res) => {
+      let data = res.data.result;
+      rowsHistory.value = [];
+      data.map((e: RequestItemsHistoryObject) => {
+        rowsHistory.value.push({
+          citizenId: e.citizenId,
+          prefix: e.prefix,
+          firstName: e.firstName,
+          lastName: e.lastName,
+          birthDate: new Date(e.birthDate),
+          gender: e.gender,
+          relationship: e.relationship,
+          bloodGroup: e.bloodGroup,
+          nationality: e.nationality,
+          race: e.race,
+          religion: e.religion,
+          telephoneNumber: e.telephoneNumber,
+          employeeType:
+            e.employeeType == "gov"
+              ? "งบประมาณเงินอุดหนุนรัฐบาล"
+              : e.employeeType == "bkk"
+              ? "งบประมาณกรุงเทพมหานคร"
+              : "-",
+          employeeClass:
+            e.employeeClass == "perm"
+              ? "ลูกจ้างประจำ"
+              : e.employeeClass == "temp"
+              ? "ลูกจ้างชั่วคราว"
+              : "-",
+          createdFullName: e.createdFullName,
+          createdAt: new Date(e.createdAt),
+        });
+      });
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      loaderPage(false);
+    });
+};
+
+const filterSelector = (val: any, update: Function, refData: string) => {
+  switch (refData) {
+    case "prefixOps":
+      update(() => {
+        Ops.value.prefixOps = OpsFilter.value.prefixOps.filter(
+          (v: DataOption) => v.name.indexOf(val) > -1
+        );
+      });
+      break;
+    case "genderOps":
+      update(() => {
+        Ops.value.genderOps = OpsFilter.value.genderOps.filter(
+          (v: DataOption) => v.name.indexOf(val) > -1
+        );
+      });
+      break;
+    case "bloodOps":
+      update(() => {
+        Ops.value.bloodOps = OpsFilter.value.bloodOps.filter(
+          (v: DataOption) => v.name.indexOf(val) > -1
+        );
+      });
+      break;
+    case "statusOps":
+      update(() => {
+        Ops.value.statusOps = OpsFilter.value.statusOps.filter(
+          (v: DataOption) => v.name.indexOf(val) > -1
+        );
+      });
+      break;
+    case "religionOps":
+      update(() => {
+        Ops.value.religionOps = OpsFilter.value.religionOps.filter(
+          (v: DataOption) => v.name.indexOf(val) > -1
+        );
+      });
+      break;
+    case "employeeClassOps":
+      update(() => {
+        Ops.value.employeeClassOps = OpsFilter.value.employeeClassOps.filter(
+          (v: DataOption) => v.name.indexOf(val) > -1
+        );
+      });
+      break;
+    case "employeeTypeOps":
+      update(() => {
+        Ops.value.employeeTypeOps = OpsFilter.value.employeeTypeOps.filter(
+          (v: DataOption) => v.name.indexOf(val) > -1
+        );
+      });
+      break;
+
+    default:
+      break;
+  }
+};
+
+const handleDate = async (modelData: Date) => {
+  informaData.value.birthDate = modelData;
+  await calRetire(modelData);
+};
+
+const fetchDataComponent = async (modelData: Date) => {
+  await props.fetchDataProfile();
+  await fetchData();
+};
+
+const calRetire = async (birth: Date) => {
+  const body = {
+    birthDate: dateToISO(birth),
+  };
+  if (dateToISO(dateBefore.value) != dateToISO(birth)) {
+    loaderPage(true);
+    await http
+      .post(config.API.profileCalRetire, body)
+      .then((res: any) => {
+        const data = res.data.result;
+        informaData.value.age = data.age;
+        changeRetireText(data.retireDate);
+        dateBefore.value = birth;
+      })
+      .catch((e: any) => {
+        messageError($q, e);
+        const retire = new Date(`${birth.getFullYear() + 60}-09-30`);
+        informaData.value.birthDate = dateBefore.value;
+        changeRetireText(date2Thai(retire));
+      })
+      .finally(() => {
+        loaderPage(false);
+      });
+  }
+};
+
+const fetchData = async () => {
+  if (route.params.id) {
+    loaderPage(true);
+    await http
+      .get(config.API.profileInforId(route.params.id.toString()))
+      .then(async (res: any) => {
+        const data: ResponseObject = res.data.result;
+        defaultCitizenData.value = data.citizenId;
+        informaData.value.cardid = data.citizenId;
+        informaData.value.prefix = "";
+        informaData.value.prefixId = data.prefixId;
+        informaData.value.firstname = data.firstName;
+        informaData.value.lastname = data.lastName;
+        informaData.value.birthDate = new Date(data.birthDate);
+        informaData.value.genderId = data.genderId;
+        informaData.value.bloodId = data.bloodGroupId;
+        informaData.value.nationality = data.nationality;
+        informaData.value.ethnicity = data.race;
+        informaData.value.statusId = data.relationshipId;
+        informaData.value.religionId = data.religionId;
+        informaData.value.tel = data.telephoneNumber;
+        informaData.value.age = data.age;
+        informaData.value.employeeType = data.employeeType;
+        informaData.value.employeeClass = data.employeeClass;
+        informaData.value.profileType = data.profileType;
+        dateBefore.value = new Date(data.birthDate);
+        same.value = data.changeName == true ? "1" : "0";
+        await calRetire(new Date(dateToISO(new Date(data.birthDate))));
+        if (
+          data.profileType == "officer" &&
+          columnsHistory.value.length >= 15
+        ) {
+          columnsHistory.value.splice(13, 1);
+          columnsHistory.value.splice(12, 1);
+        }
+      })
+      .catch((e) => {
+        messageError($q, e);
+      })
+      .finally(async () => {
+        //   loaderPage(false);
+        await props.fetchDataProfile();
+      });
+  }
+};
+
+const editData = async () => {
+  const body: any = {
+    citizenId: informaData.value.cardid,
+    prefixId: informaData.value.prefixId,
+    firstName: informaData.value.firstname,
+    lastName: informaData.value.lastname,
+    genderId: informaData.value.genderId,
+    nationality: informaData.value.nationality,
+    race: informaData.value.ethnicity,
+    religionId: informaData.value.religionId,
+    birthDate: dateToISO(informaData.value.birthDate) ?? dateToISO(new Date()),
+    bloodGroupId: informaData.value.bloodId,
+    relationshipId: informaData.value.statusId,
+    telephoneNumber: informaData.value.tel,
+    createdAt: new Date(),
+    age: null,
+    employeeType: informaData.value.employeeType,
+    employeeClass: informaData.value.employeeClass,
+    profileType: informaData.value.profileType,
+    createdFullName: "-",
+  };
+  loaderPage(true);
+  await http
+    .put(config.API.profileInforId(route.params.id.toString()), body)
+    .then((res) => {
+      success($q, "บันทึกข้อมูลสำเร็จ");
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(async () => {
+      edit.value = false;
+      emit("update:statusEdit", false);
+      await fetchData();
+      await changeBirth(informaData.value.birthDate ?? new Date());
+    });
+};
+
+const addData = async () => {
+  //     loaderPage(true);
+  //   await http
+  //     .put(config.API.profileInforId(route.params.id.toString()), body)
+  //     .then((res) => {
+  //       success($q, "บันทึกข้อมูลสำเร็จ");
+  //     })
+  //     .catch((e) => {
+  //       messageError($q, e);
+  //     })
+  //     .finally(async () => {
+  //       edit.value = false;
+  //       emit("update:statusEdit", false);
+  //       await fetchData();
+  //       await changeBirth(informaData.value.birthDate ?? new Date());
+  //     });
+};
+
+const saveData = async () => {
+  if (myform.value != null) {
+    await myform.value.validate().then(async (success: boolean) => {
+      if (success) {
+        if (props.statusAdd) {
+          await addData();
+        } else {
+          await editData();
+        }
+      } else {
+      }
+    });
+  }
+};
+
+const changeBtn = async () => {
+  if (edit.value == true) {
+    if (props.statusEdit === true) {
+      edit.value = false;
+    } else {
+      emit("update:statusEdit", true);
+    }
+  } else {
+    emit("update:statusEdit", false);
+  }
+};
+
+const getClass = (val: boolean) => {
+  return {
+    "full-width inputgreen cursor-pointer": val,
+    "full-width cursor-pointer": !val,
+  };
+};
+</script>
diff --git a/src/components/information/interface/store/main.ts b/src/components/information/interface/store/main.ts
new file mode 100644
index 000000000..7c31dd81c
--- /dev/null
+++ b/src/components/information/interface/store/main.ts
@@ -0,0 +1,20 @@
+interface Profile {
+  main: { columns: String[] };
+  education: { columns: String[] };
+  oldName: { columns: String[] };
+  certicate: { columns: String[] };
+  train: { columns: String[] };
+  insignia: { columns: String[] };
+  coined: { columns: String[] };
+  assessment: { columns: String[] };
+  salary: { columns: String[] };
+  discipline: { columns: String[] };
+  leave: { columns: String[] };
+  talent: { columns: String[] };
+  work: { columns: String[] };
+  record: { columns: String[] };
+  other: { columns: String[] };
+  document: { columns: String[] };
+}
+
+export type { Profile };
diff --git a/src/components/information/store/store.ts b/src/components/information/store/store.ts
new file mode 100644
index 000000000..7c30f2495
--- /dev/null
+++ b/src/components/information/store/store.ts
@@ -0,0 +1,70 @@
+import { ref } from "vue";
+import { defineStore } from "pinia";
+import type { Profile } from "@/components/information/interface/store/main";
+
+export const useComponentProfileDataStore = defineStore(
+  "componentProfile",
+  () => {
+    const profile = "profile";
+    const birthDate = ref<Date>(new Date());
+    const retireText = ref<string | null>(null);
+    const profileData = ref<Profile>({
+      main: { columns: [] },
+      education: { columns: [] },
+      oldName: { columns: [] },
+      certicate: { columns: [] },
+      train: { columns: [] },
+      insignia: { columns: [] },
+      coined: { columns: [] },
+      assessment: { columns: [] },
+      salary: { columns: [] },
+      discipline: { columns: [] },
+      leave: { columns: [] },
+      talent: { columns: [] },
+      work: { columns: [] },
+      record: { columns: [] },
+      other: { columns: [] },
+      document: { columns: [] },
+    });
+
+    const changeRetireText = (val: string | null) => {
+      retireText.value = val;
+    };
+    const changeBirth = (val: Date) => {
+      birthDate.value = val;
+    };
+
+    const changeProfileColumns = (system: String, val: String[]) => {
+      if (system == "main") profileData.value.main.columns = val;
+      if (system == "education") profileData.value.education.columns = val;
+      if (system == "oldName") profileData.value.oldName.columns = val;
+      if (system == "certicate") profileData.value.certicate.columns = val;
+      if (system == "train") profileData.value.train.columns = val;
+      if (system == "insignia") profileData.value.insignia.columns = val;
+      if (system == "coined") profileData.value.coined.columns = val;
+      if (system == "assessment") profileData.value.assessment.columns = val;
+      if (system == "salary") profileData.value.salary.columns = val;
+      if (system == "discipline") profileData.value.discipline.columns = val;
+      if (system == "leave") profileData.value.leave.columns = val;
+      if (system == "talent") profileData.value.talent.columns = val;
+      if (system == "work") profileData.value.work.columns = val;
+      if (system == "record") profileData.value.record.columns = val;
+      if (system == "other") profileData.value.other.columns = val;
+      if (system == "document") profileData.value.document.columns = val;
+      localStorage.setItem(profile, JSON.stringify(profileData.value));
+    };
+
+    if (localStorage.getItem(profile) !== null) {
+      profileData.value = JSON.parse(localStorage.getItem(profile) || "{}");
+    }
+
+    return {
+      profileData,
+      changeProfileColumns,
+      birthDate,
+      changeBirth,
+      retireText,
+      changeRetireText,
+    };
+  }
+);
diff --git a/src/components/information/top.vue b/src/components/information/top.vue
new file mode 100644
index 000000000..416a8f049
--- /dev/null
+++ b/src/components/information/top.vue
@@ -0,0 +1,199 @@
+<template>
+  <div class="flex items-center">
+    <div class="flex items-center">
+      <q-icon
+        :name="icon"
+        size="1.5em"
+        color="grey-5"
+        class="q-mr-md"
+        v-if="icon != ''"
+      />
+      <div
+        class="text-bold text-subtitle2 col-12 row items-center"
+        v-if="header != ''"
+      >
+        {{ header }}
+      </div>
+    </div>
+    <div class="q-gutter-sm q-mx-sm" v-if="addData == false">
+      <q-btn
+        size="12px"
+        v-if="!edit"
+        flat
+        round
+        :disabled="disable"
+        :color="edit ? 'grey-7' : 'primary'"
+        @click="ClickEdit"
+        icon="mdi-pencil-outline"
+      >
+        <q-tooltip>แก้ไขข้อมูล</q-tooltip>
+      </q-btn>
+      <q-btn
+        size="12px"
+        flat
+        round
+        v-if="edit"
+        :color="!edit ? 'grey-7' : 'public'"
+        @click="save"
+        icon="mdi-content-save-outline"
+      >
+        <q-tooltip>บันทึกข้อมูล</q-tooltip>
+      </q-btn>
+      <q-btn
+        size="12px"
+        flat
+        round
+        v-if="edit && !addEmployee"
+        :color="!edit ? 'grey-7' : 'red'"
+        @click="ClickCancel"
+        icon="mdi-undo"
+      >
+        <q-tooltip>ยกเลิก</q-tooltip>
+      </q-btn>
+    </div>
+    <div class="q-pl-sm" v-else-if="iconAdd != '' && iconAdd != null">
+      <q-btn
+        size="12px"
+        flat
+        round
+        color="add"
+        @click="addleave"
+        icon="mdi-plus"
+      >
+        <q-tooltip>เพิ่มข้อมูล</q-tooltip>
+      </q-btn>
+      <q-btn size="12px" flat round color="add" @click="add" :icon="iconAdd">
+        <q-tooltip>สรุปวันลา</q-tooltip>
+      </q-btn>
+    </div>
+
+    <div class="q-pl-sm" v-else>
+      <q-btn
+        size="12px"
+        flat
+        round
+        :disabled="disable"
+        color="add"
+        @click="add"
+        icon="mdi-plus"
+      >
+        <q-tooltip>เพิ่มข้อมูล</q-tooltip>
+      </q-btn>
+    </div>
+    <q-space />
+    <q-btn
+      color="info"
+      flat
+      dense
+      round
+      size="14px"
+      icon="mdi-history"
+      v-if="history"
+      @click="historyClick"
+    >
+      <q-tooltip>ประวัติ{{ header }}</q-tooltip>
+    </q-btn>
+  </div>
+</template>
+<script setup lang="ts">
+const props = defineProps({
+  header: {
+    type: String,
+    default: "ข้อความ",
+    required: true,
+  },
+  iconAdd: {
+    type: String,
+    default: null,
+  },
+  icon: {
+    type: String,
+    default: "mdi-help",
+    required: true,
+  },
+  edit: {
+    type: Boolean,
+    default: true,
+    required: true,
+  },
+  history: {
+    type: Boolean,
+    default: true,
+    required: true,
+  },
+  addData: {
+    type: Boolean,
+    defualt: false,
+  },
+  disable: {
+    type: Boolean,
+    defualt: false,
+  },
+  historyClick: {
+    type: Function,
+    default: () => console.log("not function"),
+  },
+  add: {
+    type: Function,
+    default: () => console.log("not function"),
+  },
+  addleave: {
+    type: Function,
+    default: () => console.log("not function"),
+  },
+  save: {
+    type: Function,
+    default: () => console.log("not function"),
+  },
+  deleted: {
+    type: Function,
+    default: () => console.log("not function"),
+  },
+  cancel: {
+    type: Function,
+    default: () => console.log("not function"),
+  },
+  changeBtn: {
+    type: Function,
+    default: () => console.log("not function"),
+  },
+  addEmployee: {
+    type: Boolean,
+    defualt: false,
+  },
+});
+
+const emit = defineEmits(["update:edit"]);
+
+const updateEdit = (value: any) => {
+  emit("update:edit", value);
+};
+
+const ClickEdit = () => {
+  updateEdit(!props.edit);
+  props.changeBtn();
+};
+
+const historyClick = async () => {
+  await props.historyClick();
+};
+
+const ClickCancel = () => {
+  updateEdit(!props.edit);
+  props.cancel();
+  props.changeBtn();
+};
+
+const save = () => {
+  props.save();
+};
+
+const add = () => {
+  props.add();
+};
+
+const addleave = () => {
+  props.addleave();
+};
+</script>
+<style scoped></style>
diff --git a/src/modules/03_recruiting/views/03_editor/index.vue b/src/modules/03_recruiting/views/03_editor/index.vue
index 8f372fe5e..2e52b3840 100644
--- a/src/modules/03_recruiting/views/03_editor/index.vue
+++ b/src/modules/03_recruiting/views/03_editor/index.vue
@@ -1062,7 +1062,7 @@ const fetchProvince = async () => {
 };
 
 const fetchDistrict = async (id: string | null) => {
-  if (id !== null) {
+  if (id !== null && id != "") {
     loaderPage(true);
     await http
       .get(config.API.listDistrict(id))
@@ -1084,7 +1084,7 @@ const fetchDistrict = async (id: string | null) => {
 };
 
 const fetchSubDistrict = async (id: string | null) => {
-  if (id !== null) {
+  if (id !== null && id != "") {
     loaderPage(true);
     await http
       .get(config.API.listSubDistrict(id))
diff --git a/src/modules/04_registry/components/Information/Address.vue b/src/modules/04_registry/components/Information/Address.vue
index 8b8ffbf67..8881a3505 100644
--- a/src/modules/04_registry/components/Information/Address.vue
+++ b/src/modules/04_registry/components/Information/Address.vue
@@ -626,8 +626,6 @@ const getNewData = async () => {
   await fetchDistrict(addressData.value.provinceIdC, "2");
   await fetchSubDistrict(addressData.value.districtId, "1");
   await fetchSubDistrict(addressData.value.districtIdC, "2");
-  await selectSubDistrict(addressData.value.subdistrictId, "1");
-  await selectSubDistrict(addressData.value.subdistrictIdC, "2");
 };
 
 const fetchData = async () => {
@@ -797,7 +795,7 @@ const fetchProvince = async () => {
 };
 
 const fetchDistrict = async (id: string | null, position: string) => {
-  if (id != null) {
+  if (id != null && id != "") {
     loaderPage(true);
     await http
       .get(config.API.listDistrict(id))
@@ -825,7 +823,7 @@ const fetchDistrict = async (id: string | null, position: string) => {
 };
 
 const fetchSubDistrict = async (id: string | null, position: string) => {
-  if (id != null) {
+  if (id != null && id != "") {
     loaderPage(true);
     await http
       .get(config.API.listSubDistrict(id))
diff --git a/src/modules/04_registry/components/Profile.vue b/src/modules/04_registry/components/Profile.vue
index c56a812f0..c9db6d816 100644
--- a/src/modules/04_registry/components/Profile.vue
+++ b/src/modules/04_registry/components/Profile.vue
@@ -155,10 +155,6 @@
         <q-space />
 
         <q-btn round flat color="pink-5" icon="mdi-file-document">
-          <!-- <q-tooltip>{{
-            reasonStatus ? "การกลับเข้ารับราชการ" : "การออกจากราชการ"
-          }}</q-tooltip> -->
-
           <q-menu transition-show="jump-down" transition-hide="jump-up">
             <q-list dense style="min-width: 160px">
               <q-item clickable v-close-popup @click="clickPassaway">
diff --git a/src/modules/05_placement/components/PersonalDetail/Information/Address.vue b/src/modules/05_placement/components/PersonalDetail/Information/Address.vue
index 00c482ab1..ce83dfee2 100644
--- a/src/modules/05_placement/components/PersonalDetail/Information/Address.vue
+++ b/src/modules/05_placement/components/PersonalDetail/Information/Address.vue
@@ -123,8 +123,6 @@ const getNewData = async () => {
   await fetchDistrict(addressData.value.currentProvinceId, "2");
   await fetchSubDistrict(addressData.value.registDistrictId, "1");
   await fetchSubDistrict(addressData.value.currentDistrictId, "2");
-  await selectSubDistrict(addressData.value.registSubDistrictId, "1");
-  await selectSubDistrict(addressData.value.currentSubDistrictId, "2");
 };
 
 const editData = async () => {
@@ -247,7 +245,7 @@ const fetchProvince = async () => {
 };
 
 const fetchDistrict = async (id: string | null, position: string) => {
-  if (id != null) {
+  if (id != null && id != "") {
     showLoader();
     await http
       .get(config.API.listDistrict(id))
@@ -275,7 +273,7 @@ const fetchDistrict = async (id: string | null, position: string) => {
 };
 
 const fetchSubDistrict = async (id: string | null, position: string) => {
-  if (id != null) {
+  if (id != null && id != "") {
     showLoader();
     await http
       .get(config.API.listSubDistrict(id))
diff --git a/src/modules/05_placement/components/Receive/receiveDetail.vue b/src/modules/05_placement/components/Receive/receiveDetail.vue
new file mode 100644
index 000000000..534e2c65b
--- /dev/null
+++ b/src/modules/05_placement/components/Receive/receiveDetail.vue
@@ -0,0 +1,39 @@
+<template>
+  <div class="col-12 row">
+    <div class="row col-12" style="padding-top: 80px">
+      <div id="information" name="1" class="row col-12 information">
+        <Information v-model:statusEdit="statusEdit" :statusAdd="false" />
+      </div>
+      <div id="government" name="16" class="row col-12 q-mt-md">
+        <Government v-model:statusEdit="statusEdit" :statusAdd="false" />
+      </div>
+      <div id="address" name="17" class="row col-12 q-mt-md">
+        <Address v-model:statusEdit="statusEdit" :statusAdd="false" />
+      </div>
+      <div id="family" name="18" class="row col-12 q-mt-md">
+        <Family v-model:statusEdit="statusEdit" :statusAdd="false" />
+      </div>
+      <div id="certicate" name="15" class="row col-12 q-mt-md">
+        <Certicate />
+      </div>
+    </div>
+    <Image />
+  </div>
+</template>
+<script setup lang="ts">
+import { ref } from "vue";
+import Image from "@/components/information/Image.vue";
+import Information from "@/components/information/Information.vue";
+import Government from "@/components/information/Government.vue";
+import Address from "@/components/information/Address.vue";
+import Family from "@/components/information/Family.vue";
+import Certicate from "@/components/information/Certicate.vue";
+
+const statusEdit = ref<boolean>(false);
+</script>
+<style lang="scss" scoped>
+.information:target {
+  padding-top: 84px;
+}
+</style>
+>
diff --git a/src/modules/05_placement/components/Receive/receiveMain.vue b/src/modules/05_placement/components/Receive/receiveMain.vue
index 9dd3924d4..007a3b7e8 100644
--- a/src/modules/05_placement/components/Receive/receiveMain.vue
+++ b/src/modules/05_placement/components/Receive/receiveMain.vue
@@ -292,6 +292,10 @@ const closeModalTree = async () => {
   //   await getTable();
   modalTree.value = false;
 };
+
+const nextPage = (id: string) => {
+  router.push(`/receive/${id}`);
+};
 </script>
 <template>
   <div class="toptitle text-dark col-12 row items-center">รายการรับโอน</div>
@@ -367,25 +371,53 @@ const closeModalTree = async () => {
             </template>
             <template v-slot:body="props">
               <q-tr :props="props" class="cursor-pointer">
-                <q-td key="no" :props="props">
+                <q-td
+                  key="no"
+                  :props="props"
+                  @click="nextPage(props.row.personalId)"
+                >
                   {{ props.rowIndex + 1 }}
                 </q-td>
-                <q-td key="fullname" :props="props">
+                <q-td
+                  key="fullname"
+                  :props="props"
+                  @click="nextPage(props.row.personalId)"
+                >
                   {{ props.row.fullname }}
                 </q-td>
-                <q-td key="position" :props="props">
+                <q-td
+                  key="position"
+                  :props="props"
+                  @click="nextPage(props.row.personalId)"
+                >
                   {{ props.row.position }}
                 </q-td>
-                <q-td key="positionLevel" :props="props">
+                <q-td
+                  key="positionLevel"
+                  :props="props"
+                  @click="nextPage(props.row.personalId)"
+                >
                   {{ props.row.positionLevel }}
                 </q-td>
-                <q-td key="oc" :props="props">
+                <q-td
+                  key="oc"
+                  :props="props"
+                  @click="nextPage(props.row.personalId)"
+                >
                   {{ props.row.oc }}
                 </q-td>
-                <q-td key="agency" :props="props">
+                <q-td
+                  key="agency"
+                  :props="props"
+                  @click="nextPage(props.row.personalId)"
+                >
                   {{ props.row.agency }}
                 </q-td>
-                <q-td key="status" :props="props">
+                <q-td
+                  key="status"
+                  :props="props"
+                  @click="nextPage(props.row.personalId)"
+                >
                   {{ props.row.status }}
                 </q-td>
                 <q-td auto-width>
diff --git a/src/modules/05_placement/router.ts b/src/modules/05_placement/router.ts
index 93d3af33f..b6e30b8d2 100644
--- a/src/modules/05_placement/router.ts
+++ b/src/modules/05_placement/router.ts
@@ -50,6 +50,9 @@ const RepatriationOrderAdd = () =>
 const receiveMain = () =>
   import("@/modules/05_placement/components/Receive/receiveMain.vue");
 
+const receiveDetail = () =>
+  import("@/modules/05_placement/components/Receive/receiveDetail.vue");
+
 export default [
   {
     path: "/placement",
@@ -221,4 +224,14 @@ export default [
       Role: "placement",
     },
   },
+  {
+    path: "/receive/:id",
+    name: "receiveDetail",
+    component: receiveDetail,
+    meta: {
+      Auth: true,
+      Key: [6.3],
+      Role: "placement",
+    },
+  },
 ];
diff --git a/src/modules/08_registryEmployee/views/Information/Address.vue b/src/modules/08_registryEmployee/views/Information/Address.vue
index 8b8ffbf67..8881a3505 100644
--- a/src/modules/08_registryEmployee/views/Information/Address.vue
+++ b/src/modules/08_registryEmployee/views/Information/Address.vue
@@ -626,8 +626,6 @@ const getNewData = async () => {
   await fetchDistrict(addressData.value.provinceIdC, "2");
   await fetchSubDistrict(addressData.value.districtId, "1");
   await fetchSubDistrict(addressData.value.districtIdC, "2");
-  await selectSubDistrict(addressData.value.subdistrictId, "1");
-  await selectSubDistrict(addressData.value.subdistrictIdC, "2");
 };
 
 const fetchData = async () => {
@@ -797,7 +795,7 @@ const fetchProvince = async () => {
 };
 
 const fetchDistrict = async (id: string | null, position: string) => {
-  if (id != null) {
+  if (id != null && id != "") {
     loaderPage(true);
     await http
       .get(config.API.listDistrict(id))
@@ -825,7 +823,7 @@ const fetchDistrict = async (id: string | null, position: string) => {
 };
 
 const fetchSubDistrict = async (id: string | null, position: string) => {
-  if (id != null) {
+  if (id != null && id != "") {
     loaderPage(true);
     await http
       .get(config.API.listSubDistrict(id))

From 6730765a422a23d441fd91ba41a78ba729443daf Mon Sep 17 00:00:00 2001
From: Thanit Konmek <thanit@frappet.com>
Date: Thu, 3 Aug 2023 15:22:59 +0700
Subject: [PATCH 020/113] =?UTF-8?q?=E0=B9=81=E0=B8=81=E0=B9=89=E0=B9=84?=
 =?UTF-8?q?=E0=B8=82=20component=20=E0=B8=97=E0=B8=B0=E0=B9=80=E0=B8=9A?=
 =?UTF-8?q?=E0=B8=B5=E0=B8=A2=E0=B8=99=E0=B8=9B=E0=B8=A3=E0=B8=B0=E0=B8=A7?=
 =?UTF-8?q?=E0=B8=B1=E0=B8=95=E0=B8=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/information/Address.vue        |  12 +-
 src/components/information/Certicate.vue      |  14 +-
 src/components/information/DialogFooter.vue   | 135 +++
 src/components/information/DialogHeader.vue   |  27 +
 src/components/information/DialogHistory.vue  |  45 +
 src/components/information/Family.vue         |   8 +-
 src/components/information/Government.vue     |  14 +-
 src/components/information/Information.vue    |  14 +-
 src/components/information/OldName.vue        | 973 ++++++++++++++++++
 src/components/information/Table.vue          | 215 ++++
 src/components/information/TableProfile.vue   | 694 +++++++++++++
 .../information/interface/index/Main.ts       |  84 ++
 .../information/interface/profileType.ts      | 187 ++++
 .../information/interface/request/Address.ts  |  55 +
 .../interface/request/Assessment.ts           |  34 +
 .../interface/request/Certificate.ts          |  31 +
 .../information/interface/request/Coin.ts     |  31 +
 .../interface/request/Discipline.ts           |  32 +
 .../information/interface/request/Document.ts |  19 +
 .../interface/request/Education.ts            |  45 +
 .../information/interface/request/Family.ts   |  29 +
 .../interface/request/Government.ts           |  55 +
 .../interface/request/Information.ts          |  59 ++
 .../information/interface/request/Insignia.ts |  40 +
 .../information/interface/request/Leave.ts    |  42 +
 .../information/interface/request/Main.ts     |  49 +
 .../information/interface/request/OldName.ts  |  32 +
 .../information/interface/request/Other.ts    |  28 +
 .../information/interface/request/Record.ts   |  31 +
 .../information/interface/request/Salary.ts   |  90 ++
 .../information/interface/request/Talent.ts   |  30 +
 .../information/interface/request/Train.ts    |  36 +
 .../information/interface/request/Work.ts     |  32 +
 .../information/interface/response/Address.ts |  34 +
 .../interface/response/Assessment.ts          |  16 +
 .../interface/response/Certificate.ts         |  13 +
 .../information/interface/response/Coin.ts    |  13 +
 .../interface/response/Discipline.ts          |  14 +
 .../interface/response/Document.ts            |   6 +
 .../interface/response/Education.ts           |  27 +
 .../information/interface/response/Family.ts  |  64 ++
 .../interface/response/Government.ts          |  23 +
 .../interface/response/Information.ts         |  24 +
 .../interface/response/Insignia.ts            |  22 +
 .../information/interface/response/Leave.ts   |  22 +
 .../information/interface/response/Main.ts    |  37 +
 .../information/interface/response/OldName.ts |  14 +
 .../information/interface/response/Other.ts   |  10 +
 .../information/interface/response/Record.ts  |  13 +
 .../information/interface/response/Salary.ts  |  61 ++
 .../information/interface/response/Talent.ts  |  12 +
 .../information/interface/response/Train.ts   |  18 +
 .../information/interface/response/Work.ts    |  14 +
 .../information/interface/store/main.ts       |  12 +-
 54 files changed, 3659 insertions(+), 32 deletions(-)
 create mode 100644 src/components/information/DialogFooter.vue
 create mode 100644 src/components/information/DialogHeader.vue
 create mode 100644 src/components/information/DialogHistory.vue
 create mode 100644 src/components/information/OldName.vue
 create mode 100644 src/components/information/Table.vue
 create mode 100644 src/components/information/TableProfile.vue
 create mode 100644 src/components/information/interface/index/Main.ts
 create mode 100644 src/components/information/interface/profileType.ts
 create mode 100644 src/components/information/interface/request/Address.ts
 create mode 100644 src/components/information/interface/request/Assessment.ts
 create mode 100644 src/components/information/interface/request/Certificate.ts
 create mode 100644 src/components/information/interface/request/Coin.ts
 create mode 100644 src/components/information/interface/request/Discipline.ts
 create mode 100644 src/components/information/interface/request/Document.ts
 create mode 100644 src/components/information/interface/request/Education.ts
 create mode 100644 src/components/information/interface/request/Family.ts
 create mode 100644 src/components/information/interface/request/Government.ts
 create mode 100644 src/components/information/interface/request/Information.ts
 create mode 100644 src/components/information/interface/request/Insignia.ts
 create mode 100644 src/components/information/interface/request/Leave.ts
 create mode 100644 src/components/information/interface/request/Main.ts
 create mode 100644 src/components/information/interface/request/OldName.ts
 create mode 100644 src/components/information/interface/request/Other.ts
 create mode 100644 src/components/information/interface/request/Record.ts
 create mode 100644 src/components/information/interface/request/Salary.ts
 create mode 100644 src/components/information/interface/request/Talent.ts
 create mode 100644 src/components/information/interface/request/Train.ts
 create mode 100644 src/components/information/interface/request/Work.ts
 create mode 100644 src/components/information/interface/response/Address.ts
 create mode 100644 src/components/information/interface/response/Assessment.ts
 create mode 100644 src/components/information/interface/response/Certificate.ts
 create mode 100644 src/components/information/interface/response/Coin.ts
 create mode 100644 src/components/information/interface/response/Discipline.ts
 create mode 100644 src/components/information/interface/response/Document.ts
 create mode 100644 src/components/information/interface/response/Education.ts
 create mode 100644 src/components/information/interface/response/Family.ts
 create mode 100644 src/components/information/interface/response/Government.ts
 create mode 100644 src/components/information/interface/response/Information.ts
 create mode 100644 src/components/information/interface/response/Insignia.ts
 create mode 100644 src/components/information/interface/response/Leave.ts
 create mode 100644 src/components/information/interface/response/Main.ts
 create mode 100644 src/components/information/interface/response/OldName.ts
 create mode 100644 src/components/information/interface/response/Other.ts
 create mode 100644 src/components/information/interface/response/Record.ts
 create mode 100644 src/components/information/interface/response/Salary.ts
 create mode 100644 src/components/information/interface/response/Talent.ts
 create mode 100644 src/components/information/interface/response/Train.ts
 create mode 100644 src/components/information/interface/response/Work.ts

diff --git a/src/components/information/Address.vue b/src/components/information/Address.vue
index 8881a3505..0e0af573c 100644
--- a/src/components/information/Address.vue
+++ b/src/components/information/Address.vue
@@ -297,14 +297,14 @@ import type {
   Address,
   DataOption,
   zipCodeOption,
-} from "@/modules/04_registry/components/profileType";
-import { defaultAddress } from "@/modules/04_registry/components/profileType";
-import HeaderTop from "@/modules/04_registry/components/Information/top.vue";
-import type { RequestItemsHistoryObject } from "@/modules/04_registry/interface/request/Address";
-import type { ResponseObject } from "@/modules/04_registry/interface/response/Address";
+} from "@/components/information/interface/profileType";
+import { defaultAddress } from "@/components/information/interface/profileType";
+import HeaderTop from "@/components/information/top.vue";
+import type { RequestItemsHistoryObject } from "@/components/information/interface/request/Address";
+import type { ResponseObject } from "@/components/information/interface/response/Address";
 import HistoryTable from "@/components/TableHistory.vue";
 import { useRoute } from "vue-router";
-import type { AddressOps } from "@/modules/04_registry/interface/index/Main";
+import type { AddressOps } from "@/components/information/interface/index/Main";
 import type { QTableProps } from "quasar";
 
 const props = defineProps({
diff --git a/src/components/information/Certicate.vue b/src/components/information/Certicate.vue
index d08e8c3b2..fe17fc0f4 100644
--- a/src/components/information/Certicate.vue
+++ b/src/components/information/Certicate.vue
@@ -259,18 +259,18 @@
 <script setup lang="ts">
 import { onMounted, ref, watch } from "vue";
 import { useRoute } from "vue-router";
-import { useProfileDataStore } from "@/modules/04_registry/store";
+import { useComponentProfileDataStore } from "@/components/information/store/store";
 import { useCounterMixin } from "@/stores/mixin";
 import { useDataStore } from "@/stores/data";
-import ProfileTable from "@/modules/04_registry/components/Table.vue";
-import DialogHeader from "@/modules/04_registry/components/DialogHeader.vue";
-import DialogFooter from "@/modules/04_registry/components/DialogFooter.vue";
+import ProfileTable from "@/components/information/Table.vue";
+import DialogHeader from "@/components/information/DialogHeader.vue";
+import DialogFooter from "@/components/information/DialogFooter.vue";
 import { useQuasar } from "quasar";
 import type {
   RequestItemsObject,
   DataProps,
-} from "@/modules/04_registry/interface/request/Certificate";
-import type { ResponseObject } from "@/modules/04_registry/interface/response/Certificate";
+} from "@/components/information/interface/request/Certificate";
+import type { ResponseObject } from "@/components/information/interface/response/Certificate";
 import HistoryTable from "@/components/TableHistory.vue";
 import http from "@/plugins/http";
 import config from "@/app.config";
@@ -288,7 +288,7 @@ const props = defineProps({
 });
 
 const $q = useQuasar();
-const store = useProfileDataStore();
+const store = useComponentProfileDataStore();
 const { profileData, changeProfileColumns } = store;
 const dataStore = useDataStore();
 const { loaderPage } = dataStore;
diff --git a/src/components/information/DialogFooter.vue b/src/components/information/DialogFooter.vue
new file mode 100644
index 000000000..c7b6623b4
--- /dev/null
+++ b/src/components/information/DialogFooter.vue
@@ -0,0 +1,135 @@
+<template>
+  <q-card-actions class="text-primary q-py-sm">
+    <q-btn
+      flat
+      round
+      icon="mdi-menu-left"
+      @click="clickPrevious"
+      v-if="modalEdit == true"
+      :disable="previous == false"
+      :color="!previous ? 'grey-7' : 'public'"
+    />
+    <q-btn
+      flat
+      round
+      icon="mdi-menu-right"
+      @click="clickNext"
+      v-if="modalEdit == true"
+      :disable="next == false"
+      :color="!next ? 'grey-7' : 'public'"
+    />
+    <q-space />
+    <q-btn
+      v-if="modalEdit == true"
+      flat
+      round
+      color="red"
+      @click="clickDelete"
+      icon="mdi-delete"
+    >
+      <q-tooltip>ลบข้อมูล</q-tooltip>
+    </q-btn>
+    <q-btn
+      v-if="!editvisible"
+      flat
+      round
+      :disabled="editvisible"
+      :color="editvisible ? 'grey-7' : 'primary'"
+      @click="edit"
+      icon="mdi-pencil-outline"
+    >
+      <q-tooltip>แก้ไขข้อมูล</q-tooltip>
+    </q-btn>
+    <div v-else>
+      <q-btn
+        flat
+        round
+        :disabled="!editvisible"
+        :outline="!editvisible"
+        :color="!editvisible ? 'grey-7' : 'red'"
+        @click="cancel()"
+        icon="mdi-undo"
+        v-if="modalEdit == true"
+      >
+        <q-tooltip>ยกเลิก</q-tooltip>
+      </q-btn>
+      <q-btn
+        flat
+        round
+        :disabled="!editvisible"
+        :color="!editvisible ? 'grey-7' : 'public'"
+        @click="checkSave"
+        icon="mdi-content-save-outline"
+      >
+        <q-tooltip>บันทึก</q-tooltip>
+      </q-btn>
+    </div>
+  </q-card-actions>
+</template>
+<script setup lang="ts">
+const props = defineProps({
+  editvisible: Boolean,
+  next: Boolean,
+  previous: Boolean,
+  modalEdit: Boolean,
+  clickNext: {
+    type: Function,
+    default: () => console.log("not function"),
+  },
+  clickPrevious: {
+    type: Function,
+    default: () => console.log("not function"),
+  },
+  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"),
+  },
+  clickDelete: {
+    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 clickDelete = async () => {
+  props.clickDelete();
+};
+const edit = async () => {
+  updateEdit(!props.editvisible);
+  props.edit();
+};
+const checkSave = () => {
+  props.validate();
+  props.save();
+};
+
+const clickNext = async () => {
+  await props.clickNext();
+};
+
+const clickPrevious = async () => {
+  await props.clickPrevious();
+};
+</script>
diff --git a/src/components/information/DialogHeader.vue b/src/components/information/DialogHeader.vue
new file mode 100644
index 000000000..8aa03351d
--- /dev/null
+++ b/src/components/information/DialogHeader.vue
@@ -0,0 +1,27 @@
+<template>
+  <q-toolbar>
+    <q-toolbar-title class="text-subtitle2 text-bold">{{
+      tittle
+    }}</q-toolbar-title>
+    <q-btn
+      icon="close"
+      unelevated
+      round
+      dense
+      @click="close"
+      style="color: #ff8080; background-color: #ffdede"
+    />
+  </q-toolbar>
+</template>
+<script setup lang="ts">
+const props = defineProps({
+  tittle: String,
+  close: {
+    type: Function,
+    default: () => console.log("not function"),
+  },
+});
+const close = async () => {
+  props.close();
+};
+</script>
diff --git a/src/components/information/DialogHistory.vue b/src/components/information/DialogHistory.vue
new file mode 100644
index 000000000..7c08e3043
--- /dev/null
+++ b/src/components/information/DialogHistory.vue
@@ -0,0 +1,45 @@
+<template>
+  <q-dialog :model-value="modal" persistent>
+    <q-card style="width: 600px">
+      <DialogHeader :tittle="props.title" :close="close" />
+      <q-separator />
+      <q-card-section
+        :class="props.fix ? 'q-pa-md scroll' : 'q-pa-md'"
+        :style="props.fix ? 'height: 50vh' : ''"
+      >
+        <slot name="body" />
+      </q-card-section>
+      <q-separator />
+      <q-card-actions class="text-primary">
+        <slot name="footer" />
+      </q-card-actions>
+    </q-card>
+  </q-dialog>
+</template>
+<script setup lang="ts">
+import DialogHeader from "@/components/information/DialogHeader.vue";
+
+const props = defineProps({
+  title: {
+    required: true,
+    type: String,
+    default: "",
+  },
+  modal: {
+    required: true,
+    type: Boolean,
+    default: false,
+  },
+  fix: {
+    required: true,
+    type: Boolean,
+    default: true,
+  },
+});
+
+const emit = defineEmits(["update:modal"]);
+
+const close = async () => {
+  emit("update:modal", false);
+};
+</script>
diff --git a/src/components/information/Family.vue b/src/components/information/Family.vue
index 8b9eaf90c..f6b3aab4d 100644
--- a/src/components/information/Family.vue
+++ b/src/components/information/Family.vue
@@ -1094,14 +1094,14 @@ import { useQuasar } from "quasar";
 import type {
   Family,
   DataOption,
-} from "@/modules/04_registry/components/profileType";
-import HeaderTop from "@/modules/04_registry/components/Information/top.vue";
-import DialogHistory from "@/modules/04_registry/components/DialogHistory.vue";
+} from "@/components/information/interface/profileType";
+import HeaderTop from "@/components/information/top.vue";
+import DialogHistory from "@/components/information/DialogHistory.vue";
 import type {
   ResponseObject,
   childrenFamily,
   ResponseHistory,
-} from "@/modules/04_registry/interface/response/Family";
+} from "@/components/information/interface/response/Family";
 import http from "@/plugins/http";
 import config from "@/app.config";
 import { useRoute } from "vue-router";
diff --git a/src/components/information/Government.vue b/src/components/information/Government.vue
index 35d6fca2a..fc7e75809 100644
--- a/src/components/information/Government.vue
+++ b/src/components/information/Government.vue
@@ -332,16 +332,16 @@ import { onMounted, ref, watch } from "vue";
 import { useCounterMixin } from "@/stores/mixin";
 import { useDataStore } from "@/stores/data";
 import { useQuasar } from "quasar";
-import type { Goverment } from "@/modules/04_registry/components/profileType";
-import { defaultGoverment } from "@/modules/04_registry/components/profileType";
-import HeaderTop from "@/modules/04_registry/components/Information/top.vue";
+import type { Goverment } from "@/components/information/interface/profileType";
+import { defaultGoverment } from "@/components/information/interface/profileType";
+import HeaderTop from "@/components/information/top.vue";
 import http from "@/plugins/http";
 import config from "@/app.config";
 import HistoryTable from "@/components/TableHistory.vue";
-import type { RequestItemsHistoryObject } from "@/modules/04_registry/interface/request/Government";
-import type { ResponseObject } from "@/modules/04_registry/interface/response/Government";
+import type { RequestItemsHistoryObject } from "@/components/information/interface/request/Government";
+import type { ResponseObject } from "@/components/information/interface/response/Government";
 import { useRoute } from "vue-router";
-import { useProfileDataStore } from "@/modules/04_registry/store";
+import { useComponentProfileDataStore } from "@/components/information/store/store";
 import { storeToRefs } from "pinia";
 import type { QTableProps } from "quasar";
 
@@ -367,7 +367,7 @@ const dataStore = useDataStore();
 const { loaderPage } = dataStore;
 const mixin = useCounterMixin();
 const { date2Thai, success, dateToISO, messageError } = mixin;
-const profileStore = useProfileDataStore();
+const profileStore = useComponentProfileDataStore();
 const { birthDate, retireText } = storeToRefs(profileStore);
 const edit = ref<boolean>(false);
 const govermentData = ref<Goverment>(defaultGoverment);
diff --git a/src/components/information/Information.vue b/src/components/information/Information.vue
index 1acf5f85d..ae55733a1 100644
--- a/src/components/information/Information.vue
+++ b/src/components/information/Information.vue
@@ -414,13 +414,13 @@ import { useQuasar } from "quasar";
 import type {
   Information,
   DataOption,
-} from "@/modules/04_registry/components/profileType";
-import { defaultInformation } from "@/modules/04_registry/components/profileType";
-import type { RequestItemsHistoryObject } from "@/modules/04_registry/interface/request/Information";
-import type { ResponseObject } from "@/modules/04_registry/interface/response/Information";
-import type { InformationOps } from "@/modules/04_registry/interface/index/Main";
-import OldName from "@/modules/04_registry/components/Information/OldName.vue";
-import HeaderTop from "@/modules/04_registry/components/Information/top.vue";
+} from "@/components/information/interface/profileType";
+import { defaultInformation } from "@/components/information/interface/profileType";
+import type { RequestItemsHistoryObject } from "@/components/information/interface/request/Information";
+import type { ResponseObject } from "@/components/information/interface/response/Information";
+import type { InformationOps } from "@/components/information/interface/index/Main";
+import OldName from "@/components/information/OldName.vue";
+import HeaderTop from "@/components/information/top.vue";
 import HistoryTable from "@/components/TableHistory.vue";
 import http from "@/plugins/http";
 import config from "@/app.config";
diff --git a/src/components/information/OldName.vue b/src/components/information/OldName.vue
new file mode 100644
index 000000000..54ee056a7
--- /dev/null
+++ b/src/components/information/OldName.vue
@@ -0,0 +1,973 @@
+<!-- card ประวัติการเปลี่ยนชื่อ-นามสกุล -->
+<template>
+  <div class="col-12">
+    <q-form ref="myForm">
+      <div class="col-12 q-pt-md q-pb-sm"><q-separator /></div>
+      <ProfileTable
+        :rows="rows"
+        :columns="columns"
+        :filter="filter"
+        :visible-columns="visibleColumns"
+        v-model:inputfilter="filter"
+        v-model:inputvisible="visibleColumns"
+        :add="clickAdd"
+        name="ประวัติการเปลี่ยนชื่อ-นามสกุล"
+        icon="mdi-book"
+        :statusEdit="!statusEdit"
+      >
+        <template #columns="props">
+          <q-tr :props="props">
+            <q-td
+              v-for="col in props.cols"
+              :key="col.name"
+              :props="props"
+              @click="statusEdit ? selectData(props) : ''"
+              class="cursor-pointer"
+            >
+              <div v-if="col.name == 'status'" class="table_ellipsis">
+                {{ typeChangeName(col.value) }}
+              </div>
+              <div v-else class="table_ellipsis">
+                {{ col.value }}
+              </div>
+            </q-td>
+            <q-td auto-width>
+              <q-btn
+                v-if="props.row.file != null"
+                color="green"
+                flat
+                dense
+                round
+                size="14px"
+                icon="mdi-file-document-outline"
+                @click="openFile(props.row.file)"
+              />
+              <q-btn
+                color="info"
+                flat
+                dense
+                round
+                size="14px"
+                icon="mdi-history"
+                @click="clickHistory(props.row)"
+              />
+            </q-td>
+          </q-tr>
+        </template>
+      </ProfileTable>
+    </q-form>
+  </div>
+  <!-- popup Edit window-->
+  <q-dialog v-model="modal" persistent>
+    <q-card style="width: 600px">
+      <q-form ref="myForm">
+        <DialogHeader tittle="เปลี่ยนชื่อ-นามสกุล" :close="clickClose" />
+        <q-separator />
+        <q-card-section class="q-p-sm">
+          <div
+            class="row col-12 items-center q-col-gutter-x-xs q-col-gutter-y-xs"
+          >
+            <div class="col-xs-6 col-sm-6 col-md-6">
+              <selector
+                :hide-dropdown-icon="!edit"
+                hide-bottom-space
+                :class="getClass(edit)"
+                :readonly="!edit"
+                :borderless="!edit"
+                :rules="[(val:string) => !!val || `${'กรุณาเลือก สถานะการเปลี่ยนชื่อ'}`]"
+                :outlined="edit"
+                dense
+                lazy-rules
+                v-model="status"
+                emit-value
+                map-options
+                option-label="name"
+                :options="Ops.statusOps"
+                option-value="id"
+                :label="`${'สถานะการเปลี่ยนชื่อ'}`"
+                use-input
+                input-debounce="0"
+                @filter="(inputValue:any,
+                      doneFn:Function) => filterSelector(inputValue, doneFn,'statusOps'
+                      ) "
+              />
+            </div>
+            <q-space class="col-6" />
+            <div class="col-xs-4 col-sm-4 col-md-4">
+              <selector
+                :hide-dropdown-icon="!edit"
+                hide-bottom-space
+                :class="getClass(edit)"
+                :readonly="!edit"
+                :borderless="!edit"
+                :rules="[(val:string) => !!val || `${'กรุณาเลือก คำนำหน้าชื่อ'}`]"
+                :outlined="edit"
+                dense
+                lazy-rules
+                v-model="prefixId"
+                emit-value
+                map-options
+                option-label="name"
+                :options="Ops.prefixOps"
+                option-value="id"
+                :label="`${'คำนำหน้าชื่อ'}`"
+                use-input
+                input-debounce="0"
+                @filter="(inputValue:any,
+                      doneFn:Function) => filterSelector(inputValue, doneFn,'prefixOps'
+                      ) "
+              />
+            </div>
+            <div class="col-xs-4 col-sm-4 col-md-4">
+              <q-input
+                :class="getClass(edit)"
+                :outlined="edit"
+                dense
+                lazy-rules
+                :readonly="!edit || status == 'lastName'"
+                :borderless="!edit"
+                v-model="firstName"
+                :rules="[(val) => !!val || `${'กรุณากรอกชื่อ'}`]"
+                hide-bottom-space
+                :label="`${'ชื่อ'}`"
+                @update:modelValue="clickEditRow"
+              />
+            </div>
+            <div class="col-xs-4 col-sm-4 col-md-4">
+              <q-input
+                :class="getClass(edit)"
+                :outlined="edit"
+                dense
+                lazy-rules
+                :readonly="!edit || status == 'firstName'"
+                :borderless="!edit"
+                v-model="lastName"
+                :rules="[(val) => !!val || `${'กรุณากรอกนามสกุล'}`]"
+                hide-bottom-space
+                :label="`${'นามสกุล'}`"
+                @update:modelValue="clickEditRow"
+              />
+            </div>
+            <q-btn
+              v-if="file != null && !edit"
+              color="green"
+              flat
+              dense
+              round
+              size="14px"
+              icon="mdi-file-document-outline"
+              @click="openFile(file)"
+            />
+            <q-uploader
+              v-if="edit"
+              color="gray"
+              type="file"
+              flat
+              ref="uploader"
+              class="full-width"
+              text-color="white"
+              :max-size="10000000"
+              accept=".jpg,.png,.pdf,.csv,.doc"
+              bordered
+              label="[ไฟล์ jpg,png,pdf,csv,doc ขนาดไม่เกิน 10MB]"
+              @added="fileAdd"
+            >
+              <template v-slot:header="scope">
+                <div class="row no-wrap items-center q-pa-sm q-gutter-xs">
+                  <q-btn
+                    v-if="scope.queuedFiles.length > 0"
+                    icon="clear_all"
+                    @click="scope.removeQueuedFiles"
+                    round
+                    dense
+                    flat
+                  >
+                    <q-tooltip>ลบทั้งหมด</q-tooltip>
+                  </q-btn>
+                  <q-btn
+                    v-if="scope.uploadedFiles.length > 0"
+                    icon="done_all"
+                    @click="scope.removeUploadedFiles"
+                    round
+                    dense
+                    flat
+                  >
+                    <q-tooltip>ลบไฟล์ที่อัปโหลด</q-tooltip>
+                  </q-btn>
+                  <q-spinner
+                    v-if="scope.isUploading"
+                    class="q-uploader__spinner"
+                  />
+                  <div class="col">
+                    <div class="q-uploader__title">
+                      {{ "[ไฟล์ jpg,png,pdf,csv,doc ขนาดไม่เกิน 10MB]" }}
+                    </div>
+                    <div class="q-uploader__subtitle">
+                      {{ scope.uploadSizeLabel }} /
+                      {{ scope.uploadProgressLabel }}
+                    </div>
+                  </div>
+                  <q-btn
+                    v-if="scope.canAddFiles"
+                    type="a"
+                    icon="add_box"
+                    @click="scope.pickFiles"
+                    round
+                    dense
+                    flat
+                  >
+                    <q-uploader-add-trigger />
+                    <q-tooltip>เลือกไฟล์</q-tooltip>
+                  </q-btn>
+                  <q-btn
+                    v-if="scope.isUploading"
+                    icon="clear"
+                    @click="scope.abort"
+                    round
+                    dense
+                    flat
+                  >
+                    <q-tooltip>ยกเลิกการอัปโหลด</q-tooltip>
+                  </q-btn>
+                </div>
+              </template>
+            </q-uploader>
+          </div>
+        </q-card-section>
+        <q-separator />
+        <DialogFooter
+          :cancel="clickCancel"
+          :edit="clickEdit"
+          :save="clickSave"
+          :validate="validateData"
+          :clickNext="clickNext"
+          :clickPrevious="clickPrevious"
+          :clickDelete="clickDelete"
+          v-model:editvisible="edit"
+          v-model:next="next"
+          v-model:previous="previous"
+          v-model:modalEdit="modalEdit"
+        />
+      </q-form>
+    </q-card>
+  </q-dialog>
+  <HistoryTable
+    :rows="rowsHistory"
+    :columns="columnsHistory"
+    :filter="filterHistory"
+    :visible-columns="visibleColumnsHistory"
+    v-model:modal="modalHistory"
+    v-model:inputfilter="filterHistory"
+    v-model:inputvisible="visibleColumnsHistory"
+    v-model:tittle="tittleHistory"
+    :history="true"
+  >
+    <template #columns="props">
+      <q-tr :props="props">
+        <q-td v-for="col in props.cols" :key="col.name" :props="props">
+          <div v-if="col.name == 'createdAt'" class="table_ellipsis">
+            {{ date2Thai(col.value) }}
+          </div>
+          <div v-else-if="col.name == 'status'" class="table_ellipsis">
+            {{ typeChangeName(col.value) }}
+          </div>
+          <div v-else class="table_ellipsis">
+            {{ col.value }}
+          </div>
+        </q-td>
+        <q-td auto-width>
+          <q-btn
+            v-if="props.row.file != null"
+            color="green"
+            flat
+            dense
+            round
+            size="14px"
+            icon="mdi-file-document-outline"
+            @click="openFile(props.row.file)"
+          />
+        </q-td>
+      </q-tr>
+    </template>
+  </HistoryTable>
+</template>
+<script setup lang="ts">
+import { onMounted, ref, watch } from "vue";
+import { useRoute } from "vue-router";
+import { useComponentProfileDataStore } from "@/components/information/store/store";
+import { useCounterMixin } from "@/stores/mixin";
+import { useDataStore } from "@/stores/data";
+import ProfileTable from "@/components/information/Table.vue";
+import DialogHeader from "@/components/information/DialogHeader.vue";
+import DialogFooter from "@/components/information/DialogFooter.vue";
+import { useQuasar } from "quasar";
+import type {
+  RequestItemsObject,
+  DataProps,
+} from "@/components/information/interface/request/OldName";
+import type { ResponseObject } from "@/components/information/interface/response/OldName";
+import type {
+  OldNameOps,
+  DataOption,
+} from "@/components/information/interface/index/Main";
+import HistoryTable from "@/components/TableHistory.vue";
+import http from "@/plugins/http";
+import config from "@/app.config";
+import type { QTableProps } from "quasar";
+
+const props = defineProps({
+  statusEdit: {
+    type: Boolean,
+    required: true,
+  },
+  fetchDataInformation: {
+    type: Function,
+    default: () => console.log("not function"),
+  },
+  perfixId: {
+    type: String,
+    required: true,
+  },
+  firstname: {
+    type: String,
+    required: true,
+  },
+  lastname: {
+    type: String,
+    required: true,
+  },
+});
+
+const $q = useQuasar();
+const store = useComponentProfileDataStore();
+const { profileData, changeProfileColumns } = store;
+const dataStore = useDataStore();
+const { loaderPage } = dataStore;
+const mixin = useCounterMixin();
+const {
+  date2Thai,
+  success,
+  dateToISO,
+  messageError,
+  typeChangeName,
+  dialogMessage,
+} = mixin;
+const route = useRoute();
+const id = ref<string>("");
+const prefixId = ref<string>();
+const firstName = ref<string>();
+const lastName = ref<string>();
+const status = ref<string>();
+const nameFile = ref<string>("");
+const minDate = ref<Date>();
+const myForm = ref<any>(); //form data input
+const edit = ref<boolean>(false); //เช็คการกดปุ่มแก้ไขใน dialog
+const modal = ref<boolean>(false); //modal add detail
+const modalEdit = ref<boolean>(false); //modal ที่แสดงใช้สำหรับแก้ไขหรือไม่
+const rawItem = ref<RequestItemsObject>(); //ข้อมูลเดิมที่เลือกใน row นั้น
+const rowIndex = ref<number>(0); //indexข้อมูลเดิมที่เลือกใน row นั้น
+const previous = ref<boolean>(); //แสดงปุ่มดูข้อมูลก่อนหน้า
+const next = ref<boolean>(); //แสดงปุ่มดูข้อมูลต่อไป
+const editRow = ref<boolean>(false); //เช็คมีการแก้ไขข้อมูล
+const rowsHistory = ref<RequestItemsObject[]>([]); //select data history
+const tittleHistory = ref<string>("ประวัติแก้ไขประวัติการเปลี่ยนชื่อ-นามสกุล"); //
+const filterHistory = ref<string>(""); //search data table history
+const modalHistory = ref<boolean>(false); //modal ประวัติการแก้ไขข้อมูล
+const checkValidate = ref<boolean>(false); //validate data ผ่านหรือไม่
+const profileId = ref<string>(route.params.id.toString());
+const file = ref<string | null>(null);
+const fileUpload = ref<any>([]);
+const rows = ref<RequestItemsObject[]>([]);
+const filter = ref<string>(""); //search data table
+const visibleColumns = ref<String[]>([]);
+const Ops = ref<OldNameOps>({
+  prefixOps: [],
+  statusOps: [
+    {
+      id: "firstName",
+      name: "เปลี่ยนชื่อ",
+    },
+    {
+      id: "lastName",
+      name: "เปลี่ยนนามสกุล",
+    },
+    {
+      id: "all",
+      name: "เปลี่ยนชื่อ-นามสกุล",
+    },
+  ],
+});
+const OpsFilter = ref<OldNameOps>({
+  prefixOps: [],
+  statusOps: [
+    {
+      id: "firstName",
+      name: "เปลี่ยนชื่อ",
+    },
+    {
+      id: "lastName",
+      name: "เปลี่ยนนามสกุล",
+    },
+    {
+      id: "all",
+      name: "เปลี่ยนชื่อ-นามสกุล",
+    },
+  ],
+});
+profileData.oldName.columns.length == 0
+  ? (visibleColumns.value = ["prefix", "firstName", "lastName", "status"])
+  : (visibleColumns.value = profileData.oldName.columns);
+const columns = ref<QTableProps["columns"]>([
+  {
+    name: "prefix",
+    align: "left",
+    label: "คำนำหน้าชื่อ",
+    sortable: true,
+    field: "prefix",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "firstName",
+    align: "left",
+    label: "ชื่อ",
+    sortable: true,
+    field: "firstName",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "lastName",
+    align: "left",
+    label: "นามสกุล",
+    sortable: true,
+    field: "lastName",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "status",
+    align: "left",
+    label: "สถานะการเปลี่ยนชื่อ",
+    sortable: true,
+    field: "status",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+]);
+const columnsHistory = ref<QTableProps["columns"]>([
+  {
+    name: "prefix",
+    align: "left",
+    label: "คำนำหน้าชื่อ",
+    sortable: true,
+    field: "prefix",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "firstName",
+    align: "left",
+    label: "ชื่อ",
+    sortable: true,
+    field: "firstName",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "lastName",
+    align: "left",
+    label: "นามสกุล",
+    sortable: true,
+    field: "lastName",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "status",
+    align: "left",
+    label: "สถานะการเปลี่ยนชื่อ",
+    sortable: true,
+    field: "status",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "createdFullName",
+    align: "left",
+    label: "ผู้ดำเนินการ",
+    sortable: true,
+    field: "createdFullName",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "createdAt",
+    align: "left",
+    label: "วันที่แก้ไข",
+    sortable: true,
+    field: "createdAt",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+]);
+const visibleColumnsHistory = ref<String[]>([
+  "prefix",
+  "firstName",
+  "lastName",
+  "status",
+  "createdFullName",
+  "createdAt",
+]);
+
+watch(visibleColumns, async (count: String[], prevCount: String[]) => {
+  await changeProfileColumns("oldName", count);
+});
+
+onMounted(async () => {
+  await fetchPerson();
+  await fetchData();
+});
+
+const fetchData = async () => {
+  loaderPage(true);
+  await http
+    .get(config.API.profileChangeNameId(profileId.value))
+    .then((res) => {
+      let data = res.data.result;
+      rows.value = [];
+      data.map((e: ResponseObject) => {
+        rows.value.push({
+          id: e.id,
+          prefix: e.prefix,
+          prefixId: e.prefixId,
+          firstName: e.firstName,
+          lastName: e.lastName,
+          status: e.status,
+          file: e.file,
+          createdFullName: e.createdFullName,
+          createdAt: new Date(e.createdAt),
+        });
+      });
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      loaderPage(false);
+    });
+};
+
+/**
+ * get รายการ ข้อมูลเกี่ยวกับบุคคล
+ */
+const fetchPerson = async () => {
+  loaderPage(true);
+  await http
+    .get(config.API.person)
+    .then((res) => {
+      const data = res.data.result;
+      let optionprefixs: DataOption[] = [];
+      data.prefixs.map((r: any) => {
+        optionprefixs.push({
+          id: r.id.toString(),
+          name: r.name.toString(),
+        });
+      });
+      Ops.value.prefixOps = optionprefixs;
+      OpsFilter.value.prefixOps = optionprefixs;
+    })
+    .catch((e: any) => {})
+    .finally(() => {
+      loaderPage(false);
+    });
+};
+
+/**
+ * กดดูข้อมูลก่อนหน้า
+ */
+const clickPrevious = async () => {
+  edit.value = false;
+  rowIndex.value -= 1;
+  await getData();
+  await checkRowPage();
+};
+
+/**
+ * กดดูข้อมูลต่อไป
+ */
+const clickNext = async () => {
+  edit.value = false;
+  rowIndex.value += 1;
+  await getData();
+  await checkRowPage();
+};
+
+/**
+ * กดดูข้อมูลต่อไป
+ */
+const getData = () => {
+  const row = rows.value[rowIndex.value];
+  prefixId.value = row.prefixId;
+  firstName.value = row.firstName;
+  lastName.value = row.lastName;
+  status.value = row.status;
+  file.value = row.file;
+  id.value = row.id;
+};
+
+/**
+ * เช็คปุ่มดูข้อมูล ย้อน กับ ต่อไป ว่าต้องแสดงไหม
+ */
+const checkRowPage = () => {
+  editRow.value = false;
+  next.value = true;
+  previous.value = true;
+  if (rowIndex.value + 1 >= rows.value.length) {
+    next.value = false;
+  }
+  if (rowIndex.value - 1 < 0) {
+    previous.value = false;
+  }
+};
+
+/**
+ * กดปุ่มแก้ไขใน dialog
+ */
+const clickEdit = () => {
+  editRow.value = false;
+  next.value = false;
+  previous.value = false;
+};
+
+/**
+ * กดปุ่มเพิ่มด้านบน table
+ */
+const clickAdd = async () => {
+  editRow.value = false;
+  await addData();
+};
+
+/**
+ * กดบันทึกใน dialog
+ */
+const clickSave = async () => {
+  myForm.value.validate().then(async (result: boolean) => {
+    if (result) {
+      if (modalEdit.value) {
+        await editData();
+      } else {
+        await saveData();
+      }
+    }
+  });
+};
+
+/**
+ * บันทึกเพิ่มข้อมูล
+ */
+const saveData = async () => {
+  if (fileUpload.value.length > 0) {
+    const blob = fileUpload.value.slice(0, fileUpload.value[0].size);
+    const newFile = new File(blob, nameFile.value, {
+      type: fileUpload.value[0].type,
+    });
+    const formData = new FormData();
+    formData.append("", newFile);
+    if (prefixId.value != undefined)
+      formData.append("prefixId", prefixId.value);
+    if (firstName.value != undefined)
+      formData.append("firstName", firstName.value);
+    if (lastName.value != undefined)
+      formData.append("lastName", lastName.value);
+    if (status.value != undefined) formData.append("status", status.value);
+    loaderPage(true);
+    await http
+      .post(config.API.profileChangeNameId(profileId.value), formData)
+      .then((res) => {
+        success($q, "บันทึกข้อมูลสำเร็จ");
+        modal.value = false;
+      })
+      .catch((e) => {
+        messageError($q, e);
+      })
+      .finally(async () => {
+        await fetchData();
+        await props.fetchDataInformation();
+      });
+  } else {
+    dialogMessage(
+      $q,
+      "ไม่สามารถบันทึกข้อมูลได้",
+      "กรุณาอัปโหลดเอกสารหลักฐาน",
+      "warning",
+      undefined,
+      "orange",
+      undefined,
+      undefined,
+      true
+    );
+  }
+};
+
+/**
+ * บันทึกแก้ไขข้อมูล
+ */
+const editData = async () => {
+  const formData = new FormData();
+  if (fileUpload.value.length > 0) {
+    const blob = fileUpload.value.slice(0, fileUpload.value[0].size);
+    const newFile = new File(blob, nameFile.value, {
+      type: fileUpload.value[0].type,
+    });
+    formData.append("", newFile);
+  }
+  if (prefixId.value != undefined) formData.append("prefixId", prefixId.value);
+  if (firstName.value != undefined)
+    formData.append("firstName", firstName.value);
+  if (lastName.value != undefined) formData.append("lastName", lastName.value);
+  if (status.value != undefined) formData.append("status", status.value);
+  loaderPage(true);
+  await http
+    .put(config.API.profileChangeNameId(id.value), formData)
+    .then((res) => {
+      success($q, "บันทึกข้อมูลสำเร็จ");
+      modal.value = false;
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(async () => {
+      await fetchData();
+      await props.fetchDataInformation();
+    });
+};
+
+/**
+ * ลบลบข้อมูล
+ */
+const clickDelete = async () => {
+  $q.dialog({
+    title: `ลบข้อมูล`,
+    message: `ต้องการทำการลบข้อมูลนี้ใช่หรือไม่?`,
+    cancel: "ยกเลิก",
+    ok: "ยืนยัน",
+    persistent: true,
+  })
+    .onOk(async () => {
+      loaderPage(true);
+      await http
+        .delete(config.API.profileChangeNameId(id.value))
+        .then((res) => {
+          success($q, "ลบข้อมูลสำเร็จ");
+          modal.value = false;
+        })
+        .catch((e) => {
+          messageError($q, e);
+        })
+        .finally(async () => {
+          await fetchData();
+        });
+    })
+    .onCancel(async () => {
+      await fetchData();
+    });
+};
+
+/**
+ * กดปิด dialog
+ */
+const clickClose = async () => {
+  if (editRow.value == true) {
+    $q.dialog({
+      title: `ข้อมูลมีการแก้ไข`,
+      message: `ยืนยันที่จะปิดโดยไม่บันทึกใช่หรือไม่?`,
+      cancel: "ยกเลิก",
+      ok: "ยืนยัน",
+      persistent: true,
+    }).onOk(async () => {
+      modal.value = false;
+      next.value = false;
+      previous.value = false;
+    });
+  } else {
+    modal.value = false;
+    next.value = false;
+    previous.value = false;
+  }
+};
+
+/**
+ * กดเลือกข้อมูลที่จะแก้ไข
+ * @param props ค่า props ใน row ที่เลือก
+ */
+const selectData = async (props: DataProps) => {
+  modalEdit.value = true; //กดสำหรับแก้ไขข้อมูล
+  modal.value = true; //modal ที่เด้งขึ้นมา
+  edit.value = false; //ปุ่ม edit ใน modal
+  rawItem.value = props.row;
+  rowIndex.value = props.rowIndex;
+  prefixId.value = props.row.prefixId;
+  firstName.value = props.row.firstName;
+  lastName.value = props.row.lastName;
+  status.value = props.row.status;
+  file.value = props.row.file;
+  id.value = props.row.id;
+  await checkRowPage();
+};
+
+/**
+ * กดปุ่มเพิ่มบน table
+ */
+const addData = () => {
+  modalEdit.value = false;
+  modal.value = true;
+  edit.value = true;
+  prefixId.value = props.perfixId;
+  firstName.value = props.firstname;
+  lastName.value = props.lastname;
+  status.value = "";
+  file.value = "";
+};
+
+/**
+ * ฟังก์ชันปุ่มยกเลิกการแก้ไขข้อมูล
+ */
+const clickCancel = async () => {
+  if (editRow.value == true) {
+    $q.dialog({
+      title: `ข้อมูลมีการแก้ไข`,
+      message: `ยืนยันยกเลิกการแก้ไขใช่หรือไม่?`,
+      cancel: "ยกเลิก",
+      ok: "ยืนยัน",
+      persistent: true,
+    }).onOk(async () => {
+      edit.value = false;
+      await checkRowPage();
+      await getData();
+    });
+  } else {
+    edit.value = false;
+    await checkRowPage();
+  }
+};
+
+/**
+ * เช็คว่ามีการแก้ไขข้อมูล
+ */
+const clickEditRow = () => {
+  editRow.value = true;
+};
+
+/**
+ * ฟังชั้นดูข้อมูลประวัติแก้ไขข้อมูลที่เลือก
+ * @param row ข้อมูล row ที่ดูประวัติการแก้ไข
+ */
+const clickHistory = async (row: RequestItemsObject) => {
+  modalHistory.value = true;
+  loaderPage(true);
+  await http
+    .get(config.API.profileChangeNameHisId(row.id))
+    .then((res) => {
+      let data = res.data.result;
+      rowsHistory.value = [];
+      data.map((e: ResponseObject) => {
+        rowsHistory.value.push({
+          id: e.id,
+          prefix: e.prefix,
+          prefixId: e.prefixId,
+          firstName: e.firstName,
+          lastName: e.lastName,
+          status: e.status,
+          file: e.file,
+          createdFullName: e.createdFullName,
+          createdAt: new Date(e.createdAt),
+        });
+      });
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      loaderPage(false);
+    });
+};
+
+const filterSelector = (val: any, update: Function, refData: string) => {
+  switch (refData) {
+    case "prefixOps":
+      update(() => {
+        Ops.value.prefixOps = OpsFilter.value.prefixOps.filter(
+          (v: DataOption) => v.name.indexOf(val) > -1
+        );
+      });
+      break;
+    case "statusOps":
+      update(() => {
+        Ops.value.statusOps = OpsFilter.value.statusOps.filter(
+          (v: DataOption) => v.name.indexOf(val) > -1
+        );
+      });
+      break;
+    default:
+      break;
+  }
+};
+
+const fileAdd = async (val: any) => {
+  nameFile.value = val[0].name;
+  fileUpload.value = val;
+};
+
+const openFile = async (val: string | null) => {
+  if (val != null) window.open(val);
+};
+
+/**
+ * validate input ใน dialog
+ */
+const validateData = async () => {
+  checkValidate.value = true;
+  await myForm.value.validate().then((result: boolean) => {
+    if (result == false) {
+      checkValidate.value = false;
+    }
+  });
+};
+
+/**
+ * class จัดรูปแบบแสดงระหว่างข้อมูลที่แก้ไขหรือแสดงเฉยๆ
+ * @param val ข้อมูล input สำหรับแก้ไขหรือไม่
+ */
+const getClass = (val: boolean) => {
+  return {
+    "full-width inputgreen cursor-pointer": val,
+    "full-width cursor-pointer": !val,
+  };
+};
+</script>
+<style lang="scss">
+.modalfix {
+  position: fixed !important;
+}
+</style>
diff --git a/src/components/information/Table.vue b/src/components/information/Table.vue
new file mode 100644
index 000000000..387fc9069
--- /dev/null
+++ b/src/components/information/Table.vue
@@ -0,0 +1,215 @@
+<template>
+  <div class="q-pb-sm row">
+    <HeaderTop
+      v-model:edit="editBtn"
+      :header="name"
+      :icon="icon"
+      :add="checkAdd"
+      :addleave="checkAddLeave"
+      :addData="true"
+      :history="false"
+      :disable="statusEdit"
+      :iconAdd="iconAdd"
+    />
+    <q-space />
+    <div class="items-center" style="display: flex" v-if="headerShow">
+      <!-- ค้นหาข้อความใน table -->
+      <q-input
+        standout
+        dense
+        :model-value="inputfilter"
+        ref="filterRef"
+        @update:model-value="updateInput"
+        outlined
+        debounce="300"
+        placeholder="ค้นหา"
+        style="max-width: 200px"
+        class="q-ml-sm"
+      >
+        <template v-slot:append>
+          <q-icon v-if="inputfilter == ''" name="search" />
+          <q-icon
+            v-if="inputfilter !== ''"
+            name="clear"
+            class="cursor-pointer"
+            @click="resetFilter"
+          />
+        </template>
+      </q-input>
+      <!-- แสดงคอลัมน์ใน table -->
+      <q-select
+        :model-value="inputvisible"
+        @update:model-value="updateVisible"
+        :display-value="$q.lang.table.columns"
+        multiple
+        outlined
+        dense
+        :options="attrs.columns"
+        options-dense
+        option-value="name"
+        map-options
+        emit-value
+        style="min-width: 150px"
+        class="gt-xs q-ml-sm"
+      />
+    </div>
+  </div>
+  <q-table
+    ref="table"
+    flat
+    bordered
+    class="custom-header-table"
+    v-bind="attrs"
+    virtual-scroll
+    :virtual-scroll-sticky-size-start="48"
+    dense
+    :pagination-label="paginationLabel"
+    :pagination="initialPagination"
+    :rows-per-page-options="[0]"
+  >
+    <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 #body="props">
+      <slot v-bind="props" name="columns"></slot>
+    </template>
+  </q-table>
+</template>
+<script setup lang="ts">
+import { ref, useAttrs } from "vue";
+import HeaderTop from "@/components/information/top.vue";
+import type { Pagination } from "@/components/information/interface/store/main";
+
+const attrs = ref<any>(useAttrs());
+const table = ref<any>(null);
+const filterRef = ref<any>(null);
+const editBtn = ref<boolean>(false);
+const initialPagination = ref<Pagination>({
+  rowsPerPage: 0,
+});
+
+const props = defineProps({
+  inputfilter: String,
+  name: String,
+  icon: String,
+  iconAdd: {
+    type: String,
+    default: null,
+  },
+  inputvisible: Array,
+  editvisible: Boolean,
+  headerShow: {
+    type: Boolean,
+    default: true,
+  },
+  statusEdit: {
+    type: Boolean,
+    required: true,
+  },
+  edit: {
+    type: Function,
+    default: () => console.log("not function"),
+  },
+  add: {
+    type: Function,
+    default: () => console.log("not function"),
+  },
+  addleave: {
+    type: Function,
+    default: () => console.log("not function"),
+  },
+  cancel: {
+    type: Function,
+    default: () => console.log("not function"),
+  },
+  validate: {
+    type: Function,
+    default: () => console.log("not function"),
+  },
+});
+
+const emit = defineEmits([
+  "update:inputfilter",
+  "update:inputvisible",
+  "update:editvisible",
+]);
+
+const updateEdit = (value: Boolean) => {
+  emit("update:editvisible", value);
+};
+const updateInput = (value: string | number | null) => {
+  emit("update:inputfilter", value);
+};
+const updateVisible = (value: []) => {
+  emit("update:inputvisible", value);
+};
+
+const paginationLabel = (start: string, end: string, total: string) => {
+  return start + "-" + end + " ใน " + total;
+};
+
+const checkAddLeave = () => {
+  props.addleave();
+};
+
+const checkAdd = () => {
+  props.add();
+};
+
+const edit = async () => {
+  updateEdit(!props.editvisible);
+  props.edit();
+};
+
+const cancel = async () => {
+  updateEdit(!props.editvisible);
+  props.cancel();
+};
+
+const resetFilter = () => {
+  // reset ค่าที่ค้นหาเมื่อกดปุ่ม X ในกล่องค้นหา
+  emit("update:inputfilter", "");
+  filterRef.value.focus();
+};
+</script>
+<style lang="scss">
+.icon-color {
+  color: #4154b3;
+}
+
+.custom-header-table {
+  max-height: 64vh;
+
+  .q-table tr:nth-child(odd) td {
+    background: white;
+  }
+
+  .q-table tr:nth-child(even) td {
+    background: #f8f8f8;
+  }
+
+  .q-table thead tr {
+    background: #ecebeb;
+  }
+
+  .q-table thead tr th {
+    position: sticky;
+    z-index: 1;
+  }
+
+  /* this will be the loading indicator */
+  .q-table thead tr:last-child th {
+    /* height of all previous header rows */
+    top: 48px;
+  }
+
+  .q-table thead tr:first-child th {
+    top: 0;
+  }
+}
+</style>
diff --git a/src/components/information/TableProfile.vue b/src/components/information/TableProfile.vue
new file mode 100644
index 000000000..df25354eb
--- /dev/null
+++ b/src/components/information/TableProfile.vue
@@ -0,0 +1,694 @@
+<template>
+  <q-table
+    ref="table"
+    flat
+    :class="
+      $q.screen.gt.xs
+        ? 'q-px-md custom-header-table2'
+        : 'q-px-sm custom-header-table2 custom-table-height'
+    "
+    v-bind="attrs"
+    dense
+    virtual-scroll
+    :virtual-scroll-sticky-size-start="48"
+    :pagination-label="paginationLabel"
+    :pagination="initialPagination"
+    :rows-per-page-options="[0]"
+  >
+    <template v-slot:top="props">
+      <div class="q-py-sm col-12 row">
+        <q-space />
+        <div class="items-center row col-12 q-gutter-x-sm">
+          <q-btn
+            size="13px"
+            color="grey-7"
+            dense
+            flat
+            round
+            @click="onTab"
+            class="shadow-1"
+            icon="chevron_right"
+            v-if="!isTab"
+          >
+            <q-tooltip>เปิด</q-tooltip>
+          </q-btn>
+          <q-btn
+            size="12px"
+            flat
+            round
+            color="blue"
+            @click="clickSearchPanel"
+            icon="mdi-filter-variant"
+            v-show="searchPanel == false"
+          >
+            <q-tooltip>ค้นหาขั้นสูง</q-tooltip>
+          </q-btn>
+          <q-space />
+          <q-input
+            v-show="searchPanel == false"
+            standout
+            dense
+            :model-value="inputfilter"
+            ref="filterRef"
+            @update:model-value="updateInput"
+            outlined
+            debounce="300"
+            placeholder="ค้นหา"
+            style="max-width: 200px"
+          >
+            <template v-slot:append>
+              <q-icon v-if="inputfilter == ''" name="search" />
+              <q-icon
+                v-if="inputfilter !== ''"
+                name="clear"
+                class="cursor-pointer"
+                @click="resetFilter"
+              />
+            </template>
+          </q-input>
+          <!-- แสดงคอลัมน์ใน table -->
+          <q-select
+            :model-value="inputvisible"
+            @update:model-value="updateVisible"
+            :display-value="$q.lang.table.columns"
+            multiple
+            outlined
+            dense
+            :options="attrs.columns"
+            options-dense
+            option-value="name"
+            map-options
+            emit-value
+            style="min-width: 150px"
+            class="gt-xs q-ml-sm"
+          />
+        </div>
+      </div>
+      <div class="items-center">
+        <q-slide-transition
+          v-show="searchPanel"
+          class="q-mb-sm"
+          :duration="150"
+        >
+          <div class="my-content">
+            <div
+              class="row q-pa-xs items-center bg-blue-1"
+              style="border-radius: 4px 4px 0px 0px"
+            >
+              <q-icon
+                size="20px"
+                color="blue-9"
+                name="mdi-filter-variant"
+                class="q-mx-sm"
+              />
+              <div class="text-blue-9 text-subtitle2 text-weight-medium">
+                <span>ค้นหาข้อมูลทะเบียนประวัติ</span>
+              </div>
+              <q-space />
+              <q-btn
+                color="blue-9"
+                icon="mdi-close"
+                size="12px"
+                flat
+                round
+                dense
+                @click="clickSearchPanel"
+              />
+            </div>
+            <q-separator color="blue-1" />
+            <div class="dialog-card-contain">
+              <q-card-section class="q-pa-md">
+                <div class="row col-12 q-col-gutter-sm">
+                  <div
+                    :class="
+                      $q.screen.lt.md
+                        ? ' row col-12 q-col-gutter-xs'
+                        : 'no-wrap row col-12 q-col-gutter-xs'
+                    "
+                  >
+                    <selector
+                      class="col-3"
+                      hide-bottom-space
+                      :rules="[(val:string) => !!val || `${'กรุณาเลือก ประเภท'}`]"
+                      outlined
+                      dense
+                      lazy-rules
+                      :model-value="employeeClass"
+                      emit-value
+                      map-options
+                      :options="employeeClassOps"
+                      option-label="name"
+                      option-value="id"
+                      :label="`${'ประเภท'}`"
+                      use-input
+                      input-debounce="0"
+                      @update:model-value="updateEmployeeClass"
+                    />
+                    <!-- @filter="(inputValue:any,
+                      doneFn:Function) => filterSelector(inputValue, doneFn,'employeeTypeOps'
+                      ) " -->
+                    <q-input
+                      class="col-3"
+                      clearable
+                      dense
+                      outlined
+                      lazy-rules
+                      :model-value="profileId"
+                      hide-bottom-space
+                      label="เลขประจำตัวประชาชน"
+                      @update:model-value="updateProfileId"
+                      type="number"
+                    />
+                    <q-input
+                      class="col-2"
+                      clearable
+                      dense
+                      outlined
+                      lazy-rules
+                      :model-value="fullName"
+                      hide-bottom-space
+                      label="ชื่อ-นามสกุล"
+                      @update:model-value="updateFullname"
+                    />
+                    <datepicker
+                      class="col-2"
+                      menu-class-name="modalfix"
+                      :model-value="retireYear"
+                      :locale="'th'"
+                      autoApply
+                      year-picker
+                      :enableTimePicker="false"
+                      @update:model-value="updateRetireYear"
+                      clearable
+                    >
+                      <template #year="{ year }">{{ year + 543 }}</template>
+                      <template #year-overlay-value="{ value }">{{
+                        parseInt(value + 543)
+                      }}</template>
+                      <template #trigger>
+                        <q-input
+                          class="inputgreen cursor-pointer q-mb-sm"
+                          hide-bottom-space
+                          outlined
+                          dense
+                          lazy-rules
+                          borderless
+                          :model-value="
+                            retireYear == null ? null : retireYear + 543
+                          "
+                          :label="`${'ปีเกษียณ'}`"
+                          clearable
+                          @clear="clearDate"
+                        >
+                          <!-- <template v-slot:prepend>
+                            <q-icon
+                              name="event"
+                              class="cursor-pointer"
+                              style="color: var(--q-primary)"
+                            >
+                            </q-icon>
+                          </template> -->
+                        </q-input>
+                      </template>
+                    </datepicker>
+                    <q-input
+                      class="col-2"
+                      clearable
+                      dense
+                      outlined
+                      lazy-rules
+                      :model-value="govAge"
+                      hide-bottom-space
+                      label="อายุราชการ(ปี)"
+                      type="number"
+                      @update:model-value="updateGovAge"
+                    />
+                  </div>
+
+                  <div
+                    :class="
+                      $q.screen.lt.md
+                        ? ' row col-12 q-col-gutter-xs'
+                        : 'no-wrap row col-12 q-col-gutter-xs'
+                    "
+                  >
+                    <q-input
+                      v-if="employeeClass == 'officer'"
+                      clearable
+                      dense
+                      outlined
+                      lazy-rules
+                      :model-value="positionPath"
+                      hide-bottom-space
+                      label="ตำแหน่งในสายงาน"
+                      @update:model-value="updatePositionPath"
+                      class="col-3"
+                    />
+                    <q-input
+                      v-if="employeeClass == 'officer'"
+                      clearable
+                      dense
+                      outlined
+                      lazy-rules
+                      :model-value="positionLevel"
+                      hide-bottom-space
+                      label="ระดับ"
+                      @update:model-value="updatePositionLevel"
+                      class="col-3"
+                    />
+                    <q-input
+                      v-if="employeeClass == 'officer'"
+                      clearable
+                      dense
+                      outlined
+                      lazy-rules
+                      :model-value="positionExecutive"
+                      hide-bottom-space
+                      label="ตำแหน่งทางการบริหาร"
+                      @update:model-value="updatePositionExecutive"
+                      class="col-3"
+                    />
+                    <q-input
+                      v-if="employeeClass != 'officer'"
+                      clearable
+                      dense
+                      outlined
+                      lazy-rules
+                      :model-value="employeePosition"
+                      hide-bottom-space
+                      label="ตำแหน่ง"
+                      @update:model-value="updateEmployeePosition"
+                      class="col-3"
+                    />
+                    <q-input
+                      v-if="employeeClass != 'officer'"
+                      clearable
+                      dense
+                      outlined
+                      lazy-rules
+                      :model-value="employeeLevel"
+                      hide-bottom-space
+                      label="ระดับชั้นงาน"
+                      @update:model-value="updateEmployeeLevel"
+                      class="col-3"
+                    />
+                    <q-input
+                      clearable
+                      dense
+                      outlined
+                      lazy-rules
+                      :model-value="posNo"
+                      hide-bottom-space
+                      label="ตำแหน่งเลขที่"
+                      @update:model-value="updatePosNo"
+                      class="col-3"
+                    />
+                  </div>
+                  <div
+                    :class="
+                      $q.screen.lt.md
+                        ? ' row col-12 q-col-gutter-xs'
+                        : 'no-wrap row col-12 q-col-gutter-xs'
+                    "
+                  >
+                    <datepicker
+                      class="col-2"
+                      menu-class-name="modalfix"
+                      :model-value="reportYear"
+                      :locale="'th'"
+                      autoApply
+                      year-picker
+                      :enableTimePicker="false"
+                      @update:model-value="updateReportYear"
+                      clearable
+                    >
+                      <template #year="{ year }">{{ year + 543 }}</template>
+                      <template #year-overlay-value="{ value }">{{
+                        parseInt(value + 543)
+                      }}</template>
+                      <template #trigger>
+                        <q-input
+                          class="inputgreen cursor-pointer q-mb-sm"
+                          hide-bottom-space
+                          outlined
+                          dense
+                          lazy-rules
+                          borderless
+                          :model-value="
+                            reportYear == null ? null : reportYear + 543
+                          "
+                          :label="`${'ปีงบประมาณ'}`"
+                          clearable
+                          @clear="clearReportDate"
+                        >
+                          <!-- <template v-slot:prepend>
+                            <q-icon
+                              name="event"
+                              class="cursor-pointer"
+                              style="color: var(--q-primary)"
+                            >
+                            </q-icon>
+                          </template> -->
+                        </q-input>
+                      </template>
+                    </datepicker>
+                    <q-input
+                      clearable
+                      dense
+                      outlined
+                      lazy-rules
+                      :model-value="reportNo"
+                      hide-bottom-space
+                      label="เลขที่คำสั่ง"
+                      @update:model-value="updateReportNo"
+                      class="col-3"
+                    />
+                    <q-input
+                      clearable
+                      dense
+                      outlined
+                      lazy-rules
+                      :model-value="reportType"
+                      hide-bottom-space
+                      label="ประเภทคำสั่ง"
+                      @update:model-value="updateReportType"
+                      class="col-3"
+                    />
+                  </div>
+                  <div class="col-12 row items-center">
+                    <q-toggle
+                      dense
+                      :model-value="isShowRetire"
+                      color="primary"
+                      @update:model-value="updateIsShowRetire"
+                      class="q-pr-md"
+                    >
+                      แสดงข้อมูลผู้พ้นจากราชการ
+                    </q-toggle>
+                    <q-toggle
+                      dense
+                      :model-value="isProbation"
+                      color="primary"
+                      @update:model-value="updateIsProbation"
+                    >
+                      ทดลองปฏิบัติหน้าที่ราชการ
+                    </q-toggle>
+                    <q-space />
+                    <div>
+                      <q-btn
+                        dense
+                        color="primary"
+                        icon="mdi-magnify"
+                        label="ค้นหา"
+                        class="q-px-md"
+                        @click="doSearch"
+                      />
+                    </div>
+                  </div>
+                  <!-- <div class="col-12 row q-col-gutter-y-md">
+                    <div class="row q-gutter-md">
+                      <q-radio
+                        dense
+                        :model-value="profileType"
+                        val="officer"
+                        label="ข้าราชการสามัญ"
+                        class="q-pt-sm"
+                        @update:model-value="updateProfileType"
+                      />
+                      <q-radio
+                        dense
+                        :model-value="profileType"
+                        val="employee"
+                        class="q-pt-sm"
+                        @update:model-value="updateProfileType"
+                      >
+                        ลูกจ้าง
+                      </q-radio>
+                    </div>
+                    <q-space />
+                    <div>
+                      <q-btn
+                        dense
+                        color="primary"
+                        icon="mdi-magnify"
+                        label="ค้นหา"
+                        class="q-px-md"
+                        @click="doSearch"
+                      />
+                    </div>
+                  </div> -->
+                </div>
+              </q-card-section>
+            </div>
+          </div>
+        </q-slide-transition>
+      </div>
+    </template>
+    <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 #body="props">
+      <slot v-bind="props" name="columns"></slot>
+    </template>
+  </q-table>
+</template>
+<script setup lang="ts">
+import { ref, useAttrs } from "vue";
+import type {
+  Pagination,
+  DataOption,
+} from "@/components/information/interface/store/main";
+
+const attrs = ref<any>(useAttrs());
+const table = ref<any>(null);
+const filterRef = ref<any>(null);
+const searchPanel = ref<boolean>(true);
+const initialPagination = ref<Pagination>({
+  rowsPerPage: 0,
+});
+const employeeClassOps = ref<DataOption[]>([
+  { id: "officer", name: "ข้าราชการ กทม.สามัญ" },
+  //   { id: "employee", name: "ลูกจ้าง(ทั้งหมด)" },
+  { id: "perm", name: "ลูกจ้างประจำ" },
+  { id: "temp", name: "ลูกจ้างชั่วคราว" },
+]);
+
+const props = defineProps({
+  inputfilter: String,
+  inputvisible: Array,
+  profileId: String,
+  employeeClass: String,
+  fullName: String,
+  oldFullName: String,
+  isShowRetire: Boolean,
+  isProbation: Boolean,
+  //   profileType: String,
+  retireYear: Number || null,
+  govAge: Number || null,
+  positionPath: String,
+  positionLevel: String,
+  positionExecutive: String,
+  employeePosition: String,
+  employeeLevel: String,
+  posNo: String,
+  reportYear: Number || null,
+  reportNo: String,
+  reportType: String,
+  isTab: {
+    type: Boolean,
+    default: true,
+  },
+  doSearch: {
+    type: Function,
+    default: () => console.log("not function"),
+  },
+  onExport: {
+    type: Function,
+    default: () => console.log("not function"),
+  },
+  onTab: {
+    type: Function,
+    default: () => console.log("not function"),
+  },
+});
+
+const emit = defineEmits([
+  "update:inputfilter",
+  "update:inputvisible",
+  "update:profileId",
+  "update:employeeClass",
+  "update:fullName",
+  "update:oldFullName",
+  "update:oldName",
+  "update:retireYear",
+  "update:govAge",
+  "update:isShowRetire",
+  //   "update:profileType",
+  "update:isProbation",
+  "update:positionPath",
+  "update:positionLevel",
+  "update:positionExecutive",
+  "update:employeePosition",
+  "update:employeeLevel",
+  "update:posNo",
+  "update:reportYear",
+  "update:reportNo",
+  "update:reportType",
+]);
+
+const updateInput = (value: string | number | null) => {
+  emit("update:inputfilter", value);
+};
+const updateVisible = (value: []) => {
+  emit("update:inputvisible", value);
+};
+
+const updateProfileId = (value: string | number | null) => {
+  emit("update:profileId", value);
+};
+const updateEmployeeClass = (value: string | number | null) => {
+  emit("update:employeeClass", value);
+};
+const updateFullname = (value: string | number | null) => {
+  emit("update:fullName", value);
+};
+const updateRetireYear = (value: string | number | null) => {
+  emit("update:retireYear", value);
+};
+const updateGovAge = (value: string | number | null) => {
+  emit("update:govAge", value);
+};
+const updateIsShowRetire = (value: string | number | null) => {
+  emit("update:isShowRetire", value);
+};
+const updateIsProbation = (value: string | number | null) => {
+  emit("update:isProbation", value);
+};
+const updatePositionPath = (value: string | number | null) => {
+  emit("update:positionPath", value);
+};
+const updatePositionLevel = (value: string | number | null) => {
+  emit("update:positionLevel", value);
+};
+const updatePositionExecutive = (value: string | number | null) => {
+  emit("update:positionExecutive", value);
+};
+const updateEmployeePosition = (value: string | number | null) => {
+  emit("update:employeePosition", value);
+};
+const updateEmployeeLevel = (value: string | number | null) => {
+  emit("update:employeeLevel", value);
+};
+const updatePosNo = (value: string | number | null) => {
+  emit("update:posNo", value);
+};
+const updateReportYear = (value: string | number | null) => {
+  emit("update:reportYear", value);
+};
+const updateReportNo = (value: string | number | null) => {
+  emit("update:reportNo", value);
+};
+const updateReportType = (value: string | number | null) => {
+  emit("update:reportType", value);
+};
+// const updateProfileType = (value: string | number | null) => {
+//   emit("update:profileType", value);
+// };
+
+const clearDate = () => {
+  emit("update:retireYear", null);
+};
+const clearReportDate = () => {
+  emit("update:reportYear", null);
+};
+
+const clickSearchPanel = () => {
+  emit("update:retireYear", null);
+  emit("update:govAge", null);
+  emit("update:oldName", null);
+  emit("update:oldFullName", null);
+  emit("update:fullName", null);
+  emit("update:profileId", null);
+  emit("update:employeeClass", null);
+  searchPanel.value = !searchPanel.value;
+};
+
+const paginationLabel = (start: string, end: string, total: string) => {
+  return start + "-" + end + " ใน " + total;
+};
+
+const doSearch = () => {
+  props.doSearch();
+};
+
+const onExport = () => {
+  props.onExport();
+};
+
+const onTab = () => {
+  props.onTab();
+};
+
+const resetFilter = () => {
+  // reset ค่าที่ค้นหาเมื่อกดปุ่ม X ในกล่องค้นหา
+  emit("update:inputfilter", "");
+  filterRef.value.focus();
+};
+</script>
+<style lang="scss">
+.icon-color {
+  color: #4154b3;
+}
+
+.my-content {
+  background: #fff;
+  border: 1px solid rgba(133, 133, 133, 0.2);
+  border-radius: 5px;
+}
+.custom-table-height {
+  height: auto !important;
+}
+.custom-header-table2 {
+  .q-table__top {
+    padding: 0px !important;
+  }
+  .q-table__bottom {
+    border-top: none !important;
+  }
+  .q-table__middle {
+    border-radius: 5px;
+    border: 1px solid rgba(133, 133, 133, 0.2) !important;
+  }
+  .q-table tr:nth-child(odd) td {
+    background: white;
+  }
+
+  .q-table tr:nth-child(even) td {
+    background: #f8f8f8;
+  }
+
+  .q-table thead tr {
+    background: #ecebeb;
+  }
+
+  .q-table thead tr th {
+    position: sticky;
+    z-index: 1;
+  }
+
+  /* this will be the loading indicator */
+  .q-table thead tr:last-child th {
+    /* height of all previous header rows */
+    top: 48px;
+  }
+
+  .q-table thead tr:first-child th {
+    top: 0;
+  }
+}
+</style>
diff --git a/src/components/information/interface/index/Main.ts b/src/components/information/interface/index/Main.ts
new file mode 100644
index 000000000..fe165e2b9
--- /dev/null
+++ b/src/components/information/interface/index/Main.ts
@@ -0,0 +1,84 @@
+import type { zipCodeOption } from "../../components/profileType";
+interface Pagination {
+  rowsPerPage: number;
+}
+
+interface DataOption {
+  id: string;
+  name: string;
+  disable?: boolean;
+}
+
+interface DataOptionLeave {
+  id: string;
+  name: string;
+  totalLeave: number;
+}
+
+interface DataOptionInsignia {
+  id: string;
+  name: string;
+  typeName: string;
+}
+
+interface treeTab {
+  id: string;
+  label: string;
+  children: treeTab[];
+}
+
+interface InformationOps {
+  prefixOps: DataOption[];
+  prefixOldOps: DataOption[];
+  genderOps: DataOption[];
+  bloodOps: DataOption[];
+  statusOps: DataOption[];
+  religionOps: DataOption[];
+  employeeClassOps: DataOption[];
+  employeeTypeOps: DataOption[];
+}
+
+interface OldNameOps {
+  prefixOps: DataOption[];
+  statusOps: DataOption[];
+}
+
+interface AddressOps {
+  provinceOps: DataOption[];
+  districtOps: DataOption[];
+  districtCOps: DataOption[];
+  subdistrictOps: zipCodeOption[];
+  subdistrictCOps: zipCodeOption[];
+}
+
+interface FamilyOps {
+  prefixOps: DataOption[];
+}
+
+interface EduOps {
+  levelOptions: DataOption[];
+  positionPathOptions: DataOption[];
+}
+
+interface InsigniaOps {
+  insigniaOptions: DataOptionInsignia[];
+}
+
+interface DisciplineOps {
+  levelOptions: DataOption[];
+}
+
+export type {
+  Pagination,
+  DataOption,
+  DataOptionInsignia,
+  treeTab,
+  InformationOps,
+  OldNameOps,
+  AddressOps,
+  FamilyOps,
+  EduOps,
+  InsigniaOps,
+  DisciplineOps,
+  DataOptionLeave,
+};
diff --git a/src/components/information/interface/profileType.ts b/src/components/information/interface/profileType.ts
new file mode 100644
index 000000000..ab3b28b22
--- /dev/null
+++ b/src/components/information/interface/profileType.ts
@@ -0,0 +1,187 @@
+//interface class array object {name string ,id number}
+
+import type { childrenFamily } from "@/modules/04_registry/interface/response/Family";
+interface ChangeActive {
+  name: string;
+  id: number;
+}
+
+//ข้อมูลส่วนตัว
+interface Information {
+  cardid: string | null;
+  prefix: string | null;
+  age: string | null;
+  prefixId: string | null;
+  firstname: string | null;
+  lastname: string | null;
+  birthDate: Date | null;
+  genderId: string | null;
+  bloodId: string | null;
+  nationality: string | null;
+  ethnicity: string | null;
+  statusId: string | null;
+  religionId: string | null;
+  tel: string | null;
+  employeeType: string | null;
+  employeeClass: string | null;
+  profileType: string | null;
+}
+
+interface Family {
+  prefixC: string | null; // couple
+  prefixIdC: string | null;
+  firstnameC: string | null;
+  lastnameC: string | null;
+  lastnameCOld: string | null;
+  occupationC: string | null;
+  citizenIdC: string | null;
+  liveC: string | null;
+  prefixM: string | null; // male
+  prefixIdM: string | null;
+  firstnameM: string | null;
+  lastnameM: string | null;
+  occupationM: string | null;
+  citizenIdM: string | null;
+  liveM: string | null;
+  prefixF: string | null; // female
+  prefixIdF: string | null;
+  firstnameF: string | null;
+  lastnameF: string | null;
+  occupationF: string | null;
+  citizenIdF: string | null;
+  liveF: string | null;
+  same: string | null;
+  childrens: childrenFamily[];
+}
+
+interface Address {
+  address: string | null;
+  provinceId: string | null;
+  districtId: string | null;
+  subdistrictId: string | null;
+  addressC: string | null;
+  provinceIdC: string | null;
+  districtIdC: string | null;
+  subdistrictIdC: string | null;
+  same: string | null;
+}
+
+interface Goverment {
+  ocId: string | null;
+  positionId: string | null;
+  positionPathSide: string | null;
+  positionLine: string | null;
+  positionType: string | null;
+  positionLevel: string | null;
+  numberId: string | null;
+  positionExecutive: string | null;
+  positionExecutiveSide: string | null;
+  containDate: Date;
+  workDate: Date;
+  retireDate: string | null;
+  absent: number | null;
+  age: number | null;
+  ageAll: string | null;
+  reasonSameDate: string | null;
+}
+
+interface DataOption {
+  id: string;
+  name: string;
+  zipCode?: string;
+}
+
+interface zipCodeOption {
+  id: string;
+  name: string;
+  zipCode: string;
+}
+
+const defaultGoverment: Goverment = {
+  ocId: null,
+  positionId: null,
+  positionPathSide: null,
+  positionLine: null,
+  positionType: null,
+  positionLevel: null,
+  numberId: null,
+  positionExecutive: null,
+  positionExecutiveSide: null,
+  containDate: new Date(),
+  workDate: new Date(),
+  retireDate: null,
+  absent: 0,
+  age: 0,
+  ageAll: null,
+  reasonSameDate: null,
+};
+
+const defaultAddress: Address = {
+  address: null,
+  provinceId: null,
+  districtId: null,
+  subdistrictId: null,
+  addressC: null,
+  provinceIdC: null,
+  districtIdC: null,
+  subdistrictIdC: null,
+  same: "0",
+};
+
+const defaultInformation: Information = {
+  cardid: null,
+  age: null,
+  prefix: null,
+  prefixId: null,
+  firstname: null,
+  lastname: null,
+  birthDate: null,
+  genderId: null,
+  bloodId: null,
+  nationality: null,
+  ethnicity: null,
+  statusId: null,
+  religionId: null,
+  tel: null,
+  employeeType: null,
+  employeeClass: null,
+  profileType: null,
+};
+
+const defaultFamily: Family = {
+  prefixC: null,
+  prefixIdC: null,
+  firstnameC: null,
+  lastnameC: null,
+  lastnameCOld: null,
+  occupationC: null,
+  citizenIdC: null,
+  liveC: "1",
+  prefixM: null,
+  prefixIdM: null,
+  firstnameM: null,
+  lastnameM: null,
+  occupationM: null,
+  citizenIdM: null,
+  liveM: "1",
+  prefixF: null,
+  prefixIdF: null,
+  firstnameF: null,
+  lastnameF: null,
+  occupationF: null,
+  citizenIdF: null,
+  liveF: "1",
+  same: "0",
+  childrens: [],
+};
+
+export { defaultInformation, defaultFamily, defaultAddress, defaultGoverment };
+export type {
+  ChangeActive,
+  Information,
+  Family,
+  Address,
+  Goverment,
+  DataOption,
+  zipCodeOption,
+};
diff --git a/src/components/information/interface/request/Address.ts b/src/components/information/interface/request/Address.ts
new file mode 100644
index 000000000..f8cff7753
--- /dev/null
+++ b/src/components/information/interface/request/Address.ts
@@ -0,0 +1,55 @@
+interface DataProps {
+  row: RequestItemsObject;
+  rowIndex: number;
+}
+
+//ข้อมูล
+interface RequestItemsObject {
+  currentAddress: String | null;
+  currentDistrictId: String | null;
+  currentProvinceId: String | null;
+  currentSubDistrictId: String | null;
+  currentZipCode: String | null;
+  registrationAddress: String | null;
+  registrationDistrictId: String | null;
+  registrationProvinceId: String | null;
+  registrationSame: Boolean | null;
+  registrationSubDistrictId: String | null;
+  registrationZipCode: String | null;
+}
+
+interface RequestItemsHistoryObject {
+  currentAddress: String | null;
+  currentDistrict: String | null;
+  currentProvince: String | null;
+  currentSubDistrict: String | null;
+  currentZipCode: String | null;
+  registrationAddress: String | null;
+  registrationDistrict: String | null;
+  registrationProvince: String | null;
+  registrationSame: Boolean | null;
+  registrationSubDistrict: String | null;
+  registrationZipCode: String | null;
+  createdFullName: String | null;
+  createdAt: Date;
+}
+
+//columns
+interface Columns {
+  [index: number]: {
+    name: String;
+    align: String;
+    label: String;
+    sortable: Boolean;
+    field: String;
+    headerStyle: String;
+    style: String;
+  };
+}
+
+export type {
+  RequestItemsObject,
+  Columns,
+  DataProps,
+  RequestItemsHistoryObject,
+};
diff --git a/src/components/information/interface/request/Assessment.ts b/src/components/information/interface/request/Assessment.ts
new file mode 100644
index 000000000..58bcb2a51
--- /dev/null
+++ b/src/components/information/interface/request/Assessment.ts
@@ -0,0 +1,34 @@
+interface DataProps {
+  row: RequestItemsObject;
+  rowIndex: number;
+}
+
+//ข้อมูล
+interface RequestItemsObject {
+  id: string;
+  point1Total: number;
+  point1: number;
+  point2Total: number;
+  point2: number;
+  pointSumTotal: number;
+  pointSum: number;
+  name: string;
+  date: Date;
+  createdFullName: string;
+  createdAt: Date;
+}
+
+//columns
+interface Columns {
+  [index: number]: {
+    name: String;
+    align: String;
+    label: String;
+    sortable: Boolean;
+    field: String;
+    headerStyle: String;
+    style: String;
+  };
+}
+
+export type { RequestItemsObject, Columns, DataProps };
diff --git a/src/components/information/interface/request/Certificate.ts b/src/components/information/interface/request/Certificate.ts
new file mode 100644
index 000000000..a1df312c3
--- /dev/null
+++ b/src/components/information/interface/request/Certificate.ts
@@ -0,0 +1,31 @@
+interface DataProps {
+  row: RequestItemsObject;
+  rowIndex: number;
+}
+
+//ข้อมูล
+interface RequestItemsObject {
+  id: string;
+  certificateNo: string;
+  issuer: string;
+  issueDate: Date;
+  expireDate: Date;
+  certificateType: string;
+  createdFullName: string;
+  createdAt: Date;
+}
+
+//columns
+interface Columns {
+  [index: number]: {
+    name: String;
+    align: String;
+    label: String;
+    sortable: Boolean;
+    field: String;
+    headerStyle: String;
+    style: String;
+  };
+}
+
+export type { RequestItemsObject, Columns, DataProps };
diff --git a/src/components/information/interface/request/Coin.ts b/src/components/information/interface/request/Coin.ts
new file mode 100644
index 000000000..583338641
--- /dev/null
+++ b/src/components/information/interface/request/Coin.ts
@@ -0,0 +1,31 @@
+interface DataProps {
+  row: RequestItemsObject;
+  rowIndex: number;
+}
+
+//ข้อมูล
+interface RequestItemsObject {
+  id: string;
+  issuer: string;
+  detail: string;
+  issueDate: Date;
+  refCommandNo: string;
+  refCommandDate: Date | null;
+  createdFullName: string;
+  createdAt: Date;
+}
+
+//columns
+interface Columns {
+  [index: number]: {
+    name: String;
+    align: String;
+    label: String;
+    sortable: Boolean;
+    field: String;
+    headerStyle: String;
+    style: String;
+  };
+}
+
+export type { RequestItemsObject, Columns, DataProps };
diff --git a/src/components/information/interface/request/Discipline.ts b/src/components/information/interface/request/Discipline.ts
new file mode 100644
index 000000000..0cc0906c7
--- /dev/null
+++ b/src/components/information/interface/request/Discipline.ts
@@ -0,0 +1,32 @@
+interface DataProps {
+  row: RequestItemsObject;
+  rowIndex: number;
+}
+
+//ข้อมูล
+interface RequestItemsObject {
+  id: string;
+  level: string;
+  detail: string;
+  unStigma: string;
+  refCommandNo: string;
+  refCommandDate: Date | null;
+  date: Date;
+  createdFullName: string;
+  createdAt: Date;
+}
+
+//columns
+interface Columns {
+  [index: number]: {
+    name: String;
+    align: String;
+    label: String;
+    sortable: Boolean;
+    field: String;
+    headerStyle: String;
+    style: String;
+  };
+}
+
+export type { RequestItemsObject, Columns, DataProps };
diff --git a/src/components/information/interface/request/Document.ts b/src/components/information/interface/request/Document.ts
new file mode 100644
index 000000000..9e1c21855
--- /dev/null
+++ b/src/components/information/interface/request/Document.ts
@@ -0,0 +1,19 @@
+//ข้อมูล
+interface RequestItemsObject {
+  name: String;
+}
+
+//columns
+interface Columns {
+  [index: number]: {
+    name: String;
+    align: String;
+    label: String;
+    sortable: Boolean;
+    field: String;
+    headerStyle: String;
+    style: String;
+  };
+}
+
+export type { RequestItemsObject, Columns };
diff --git a/src/components/information/interface/request/Education.ts b/src/components/information/interface/request/Education.ts
new file mode 100644
index 000000000..28624d8d2
--- /dev/null
+++ b/src/components/information/interface/request/Education.ts
@@ -0,0 +1,45 @@
+interface DataProps {
+  row: RequestItemsObject;
+  rowIndex: number;
+}
+
+//ข้อมูล
+interface RequestItemsObject {
+  id: string;
+  level: string;
+  levelId: string;
+  positionPath: string;
+  isEducation: boolean;
+  institute: string;
+  degree: string;
+  field: string;
+  gpa: string;
+  country: string;
+  duration: string;
+  durationYear: number;
+  other: string;
+  fundName: string;
+  isDate: string | null;
+  finishDate: Date;
+  startDate: number;
+  endDate: number;
+  startDate2: Date;
+  endDate2: Date;
+  createdFullName: string;
+  createdAt: Date;
+}
+
+//columns
+interface Columns {
+  [index: number]: {
+    name: String;
+    align: String;
+    label: String;
+    sortable: Boolean;
+    field: String;
+    headerStyle: String;
+    style: String;
+  };
+}
+
+export type { RequestItemsObject, Columns, DataProps };
diff --git a/src/components/information/interface/request/Family.ts b/src/components/information/interface/request/Family.ts
new file mode 100644
index 000000000..334f2e81b
--- /dev/null
+++ b/src/components/information/interface/request/Family.ts
@@ -0,0 +1,29 @@
+interface DataProps {
+  row: RequestItemsObject;
+  rowIndex: number;
+}
+
+//ข้อมูล
+interface RequestItemsObject {
+  id: string;
+  date: Date;
+  status: string;
+  level: string;
+  refNo: string;
+  refDate: Date;
+}
+
+//columns
+interface Columns {
+  [index: number]: {
+    name: String;
+    align: String;
+    label: String;
+    sortable: Boolean;
+    field: String;
+    headerStyle: String;
+    style: String;
+  };
+}
+
+export type { RequestItemsObject, Columns, DataProps };
diff --git a/src/components/information/interface/request/Government.ts b/src/components/information/interface/request/Government.ts
new file mode 100644
index 000000000..3ef47a218
--- /dev/null
+++ b/src/components/information/interface/request/Government.ts
@@ -0,0 +1,55 @@
+interface DataProps {
+  row: RequestItemsObject;
+  rowIndex: number;
+}
+
+//ข้อมูล
+interface RequestItemsObject {
+  id: string;
+  date: Date;
+  status: string;
+  level: string;
+  refNo: string;
+  refDate: Date;
+}
+
+interface RequestItemsHistoryObject {
+  oc: string | null;
+  position: string | null;
+  positionPathSide: string | null;
+  posNo: string | null;
+  positionLine: string | null;
+  positionType: string | null;
+  positionLevel: string | null;
+  positionExecutive: string | null;
+  positionExecutiveSide: string | null;
+  dateAppoint: Date;
+  dateStart: Date;
+  retireDate: string | null;
+  govAge: string | null;
+  govAgeAbsent: string | null;
+  govAgePlus: string | null;
+  reasonSameDate: string | null;
+  createdFullName: string | null;
+  createdAt: Date;
+}
+
+//columns
+interface Columns {
+  [index: number]: {
+    name: String;
+    align: String;
+    label: String;
+    sortable: Boolean;
+    field: String;
+    headerStyle: String;
+    style: String;
+  };
+}
+
+export type {
+  RequestItemsObject,
+  Columns,
+  DataProps,
+  RequestItemsHistoryObject,
+};
diff --git a/src/components/information/interface/request/Information.ts b/src/components/information/interface/request/Information.ts
new file mode 100644
index 000000000..39aac0621
--- /dev/null
+++ b/src/components/information/interface/request/Information.ts
@@ -0,0 +1,59 @@
+interface DataProps {
+  row: RequestItemsObject;
+  rowIndex: number;
+}
+
+//ข้อมูล
+interface RequestItemsObject {
+  birthDate: Date | null;
+  bloodGroupId: string | null;
+  citizenId: string | null;
+  firstName: string | null;
+  genderId: string | null;
+  lastName: string | null;
+  nationality: string | null;
+  prefixId: string | null;
+  race: string | null;
+  relationshipId: string | null;
+  religionId: string | null;
+  telephoneNumber: string | null;
+  employeeType: string | null;
+  employeeClass: string | null;
+}
+
+interface RequestItemsHistoryObject {
+  citizenId: string | null;
+  prefix: string | null;
+  firstName: string | null;
+  lastName: string | null;
+  birthDate: Date;
+  gender: string | null;
+  relationship: string | null;
+  bloodGroup: string | null;
+  nationality: string | null;
+  race: string | null;
+  religion: string | null;
+  telephoneNumber: string | null;
+  createdFullName: string | null;
+  createdAt: Date;
+  employeeType: string | null;
+  employeeClass: string | null;
+}
+
+//columns
+interface Columns {
+  name: String;
+  align: String;
+  label: String;
+  sortable: Boolean;
+  field: String;
+  headerStyle: String;
+  style: String;
+}
+
+export type {
+  RequestItemsObject,
+  Columns,
+  DataProps,
+  RequestItemsHistoryObject,
+};
diff --git a/src/components/information/interface/request/Insignia.ts b/src/components/information/interface/request/Insignia.ts
new file mode 100644
index 000000000..f017b879d
--- /dev/null
+++ b/src/components/information/interface/request/Insignia.ts
@@ -0,0 +1,40 @@
+interface DataProps {
+  row: RequestItemsObject;
+  rowIndex: number;
+}
+
+//ข้อมูล
+interface RequestItemsObject {
+  id: string;
+  insigniaType: string;
+  insignia: string;
+  insigniaId: string;
+  year: number;
+  no: string;
+  issue: string;
+  volumeNo: string;
+  volume: string;
+  section: string;
+  page: string;
+  receiveDate: Date;
+  dateAnnounce: Date;
+  refCommandNo: string;
+  refCommandDate: Date | null;
+  createdFullName: string;
+  createdAt: Date;
+}
+
+//columns
+interface Columns {
+  [index: number]: {
+    name: String;
+    align: String;
+    label: String;
+    sortable: Boolean;
+    field: String;
+    headerStyle: String;
+    style: String;
+  };
+}
+
+export type { RequestItemsObject, Columns, DataProps };
diff --git a/src/components/information/interface/request/Leave.ts b/src/components/information/interface/request/Leave.ts
new file mode 100644
index 000000000..9693d517c
--- /dev/null
+++ b/src/components/information/interface/request/Leave.ts
@@ -0,0 +1,42 @@
+interface DataProps {
+  row: RequestItemsObject;
+  rowIndex: number;
+}
+
+//ข้อมูล
+interface RequestItemsObject {
+  id: string;
+  typeLeave: string;
+  dateStartLeave: Date;
+  dateEndLeave: Date;
+  numLeave: number;
+  sumLeave: number;
+  totalLeave: number;
+  status: string;
+  reason: string;
+  typeLeaveId: string;
+}
+
+//ข้อมูล
+interface RequestItemsTotalObject {
+  typeLeaveId: string;
+  typeLeave: string;
+  totalLeave: number;
+  limitLeave: string;
+  remainLeave: string;
+}
+
+//columns
+interface Columns {
+  [index: number]: {
+    name: String;
+    align: String;
+    label: String;
+    sortable: Boolean;
+    field: String;
+    headerStyle: String;
+    style: String;
+  };
+}
+
+export type { RequestItemsObject, Columns, DataProps, RequestItemsTotalObject };
diff --git a/src/components/information/interface/request/Main.ts b/src/components/information/interface/request/Main.ts
new file mode 100644
index 000000000..9cf5c79b9
--- /dev/null
+++ b/src/components/information/interface/request/Main.ts
@@ -0,0 +1,49 @@
+//ข้อมูล
+interface RequestItemsObject {
+  id: number;
+  fullname: String;
+  fullnameOld: String;
+  avatar: String;
+  citizenId: String;
+  oc: String;
+  position: String;
+  positionPathSide: String;
+  numberPosition: String | null;
+  positionLine: String;
+  positionType: String;
+  govAge: number;
+  positionLevel: String;
+  positionExecutive: String | null;
+  positionExecutiveSide: String | null;
+  refSalary: String;
+  positionEmployeePosition: String | null;
+  positionEmployeePositionSide: String | null;
+  positionEmployeeLevel: String | null;
+  positionEmployeeGroup: String | null;
+  dateAppoint: Date | string | null;
+  dateStart: Date | string | null;
+  createdAt: Date | string | null;
+  salaryDate: Date | string | null;
+  leaveReason: String;
+  age: String;
+  amount: String;
+  insignia: String;
+  insigniaLast: String;
+  isLeave: String;
+  leaveDateOrder: Date | string | null;
+}
+
+//columns
+interface Columns {
+  [index: number]: {
+    name: String;
+    align: String;
+    label: String;
+    sortable: Boolean;
+    field: String;
+    headerStyle: String;
+    style: String;
+  };
+}
+
+export type { RequestItemsObject, Columns };
diff --git a/src/components/information/interface/request/OldName.ts b/src/components/information/interface/request/OldName.ts
new file mode 100644
index 000000000..0fde7fa45
--- /dev/null
+++ b/src/components/information/interface/request/OldName.ts
@@ -0,0 +1,32 @@
+interface DataProps {
+  row: RequestItemsObject;
+  rowIndex: number;
+}
+
+//ข้อมูล
+interface RequestItemsObject {
+  id: string;
+  prefix: string;
+  prefixId: string;
+  firstName: string;
+  lastName: string;
+  status: string;
+  file: string | null;
+  createdFullName: string;
+  createdAt: Date;
+}
+
+//columns
+interface Columns {
+  [index: number]: {
+    name: String;
+    align: String;
+    label: String;
+    sortable: Boolean;
+    field: String;
+    headerStyle: String;
+    style: String;
+  };
+}
+
+export type { RequestItemsObject, Columns, DataProps };
diff --git a/src/components/information/interface/request/Other.ts b/src/components/information/interface/request/Other.ts
new file mode 100644
index 000000000..90339caaa
--- /dev/null
+++ b/src/components/information/interface/request/Other.ts
@@ -0,0 +1,28 @@
+interface DataProps {
+  row: RequestItemsObject;
+  rowIndex: number;
+}
+
+//ข้อมูล
+interface RequestItemsObject {
+  id: string;
+  date: Date;
+  detail: string;
+  createdFullName: string;
+  createdAt: Date;
+}
+
+//columns
+interface Columns {
+  [index: number]: {
+    name: String;
+    align: String;
+    label: String;
+    sortable: Boolean;
+    field: String;
+    headerStyle: String;
+    style: String;
+  };
+}
+
+export type { RequestItemsObject, Columns, DataProps };
diff --git a/src/components/information/interface/request/Record.ts b/src/components/information/interface/request/Record.ts
new file mode 100644
index 000000000..b40baaf49
--- /dev/null
+++ b/src/components/information/interface/request/Record.ts
@@ -0,0 +1,31 @@
+interface DataProps {
+  row: RequestItemsObject;
+  rowIndex: number;
+}
+
+//ข้อมูล
+interface RequestItemsObject {
+  id: string;
+  date: Date;
+  detail: string;
+  reference: string;
+  refCommandNo: string;
+  refCommandDate: Date | null;
+  createdFullName: string;
+  createdAt: Date;
+}
+
+//columns
+interface Columns {
+  [index: number]: {
+    name: String;
+    align: String;
+    label: String;
+    sortable: Boolean;
+    field: String;
+    headerStyle: String;
+    style: String;
+  };
+}
+
+export type { RequestItemsObject, Columns, DataProps };
diff --git a/src/components/information/interface/request/Salary.ts b/src/components/information/interface/request/Salary.ts
new file mode 100644
index 000000000..2f3977809
--- /dev/null
+++ b/src/components/information/interface/request/Salary.ts
@@ -0,0 +1,90 @@
+interface DataProps {
+  row: RequestItemsObject;
+  rowIndex: number;
+}
+
+interface DataPropsEmployee {
+  row: RequestItemsEmployee;
+  rowIndex: number;
+}
+
+//ข้อมูล
+interface RequestItemsObject {
+  id: string;
+  date: Date;
+  amount: number;
+  positionSalaryAmount: number;
+  mouthSalaryAmount: number;
+  oc: string;
+  ocId: string;
+  position: string;
+  positionId: string;
+  posNo: string;
+  posNoId: string;
+  positionLine: string;
+  positionLineId: string;
+  positionPathSide: string;
+  positionPathSideId: string;
+  positionType: string;
+  positionTypeId: string;
+  positionLevel: string;
+  positionLevelId: string;
+  positionExecutive: string;
+  positionExecutiveId: string;
+  positionExecutiveSide: string;
+  positionExecutiveSideId: string;
+  salaryClass: string;
+  salaryRef: string;
+  refCommandNo: string;
+  //   refCommandDate: Date | null;
+  createdFullName: string;
+  createdAt: Date;
+}
+
+interface RequestItemsEmployee {
+  amount: number;
+  createdAt: Date;
+  createdFullName: string;
+  date: Date;
+  id: string;
+  mouthSalaryAmount: number;
+  oc: string | null;
+  ocId: string;
+  posNo: string | null;
+  posNoId: string | null;
+  posNoEmployee: string | null;
+  positionEmployeeGroup: string | null;
+  positionEmployeeGroupId: string | null;
+  positionEmployeeLevel: string | null;
+  positionEmployeeLevelId: string | null;
+  positionEmployeePosition: string | null;
+  positionEmployeePositionId: string | null;
+  positionEmployeePositionSide: string | null;
+  positionEmployeePositionSideId: string | null;
+  positionSalaryAmount: number;
+  salaryClass: string | null;
+  salaryRef: string | null;
+  refCommandNo: string;
+  //   refCommandDate: Date | null;
+}
+
+//columns
+interface Columns {
+  [index: number]: {
+    name: String;
+    align: String;
+    label: String;
+    sortable: Boolean;
+    field: String;
+    headerStyle: String;
+    style: String;
+  };
+}
+
+export type {
+  RequestItemsObject,
+  Columns,
+  DataProps,
+  RequestItemsEmployee,
+  DataPropsEmployee,
+};
diff --git a/src/components/information/interface/request/Talent.ts b/src/components/information/interface/request/Talent.ts
new file mode 100644
index 000000000..b66341543
--- /dev/null
+++ b/src/components/information/interface/request/Talent.ts
@@ -0,0 +1,30 @@
+interface DataProps {
+  row: RequestItemsObject;
+  rowIndex: number;
+}
+
+//ข้อมูล
+interface RequestItemsObject {
+  id: string;
+  field: string;
+  detail: string;
+  remark: string;
+  reference: string;
+  createdFullName: string;
+  createdAt: Date;
+}
+
+//columns
+interface Columns {
+  [index: number]: {
+    name: String;
+    align: String;
+    label: String;
+    sortable: Boolean;
+    field: String;
+    headerStyle: String;
+    style: String;
+  };
+}
+
+export type { RequestItemsObject, Columns, DataProps };
diff --git a/src/components/information/interface/request/Train.ts b/src/components/information/interface/request/Train.ts
new file mode 100644
index 000000000..6f0956578
--- /dev/null
+++ b/src/components/information/interface/request/Train.ts
@@ -0,0 +1,36 @@
+interface DataProps {
+  row: RequestItemsObject;
+  rowIndex: number;
+}
+
+//ข้อมูล
+interface RequestItemsObject {
+  id: string;
+  name: string;
+  topic: string;
+  yearly: number;
+  place: string;
+  duration: string;
+  department: string;
+  numberOrder: string;
+  dateOrder: Date;
+  startDate: Date;
+  endDate: Date;
+  createdFullName: string;
+  createdAt: Date;
+}
+
+//columns
+interface Columns {
+  [index: number]: {
+    name: String;
+    align: String;
+    label: String;
+    sortable: Boolean;
+    field: String;
+    headerStyle: String;
+    style: String;
+  };
+}
+
+export type { RequestItemsObject, Columns, DataProps };
diff --git a/src/components/information/interface/request/Work.ts b/src/components/information/interface/request/Work.ts
new file mode 100644
index 000000000..58d2730cd
--- /dev/null
+++ b/src/components/information/interface/request/Work.ts
@@ -0,0 +1,32 @@
+interface DataProps {
+  row: RequestItemsObject;
+  rowIndex: number;
+}
+
+//ข้อมูล
+interface RequestItemsObject {
+  id: string;
+  dateStart: Date;
+  dateEnd: Date;
+  detail: string;
+  reference: string;
+  refCommandNo: string;
+  refCommandDate: Date | null;
+  createdFullName: string;
+  createdAt: Date;
+}
+
+//columns
+interface Columns {
+  [index: number]: {
+    name: String;
+    align: String;
+    label: String;
+    sortable: Boolean;
+    field: String;
+    headerStyle: String;
+    style: String;
+  };
+}
+
+export type { RequestItemsObject, Columns, DataProps };
diff --git a/src/components/information/interface/response/Address.ts b/src/components/information/interface/response/Address.ts
new file mode 100644
index 000000000..8769bd1b4
--- /dev/null
+++ b/src/components/information/interface/response/Address.ts
@@ -0,0 +1,34 @@
+//ข้อมูล
+interface ResponseObject {
+  currentAddress: string | null;
+  currentDistrictId: string | null;
+  currentProvinceId: string | null;
+  currentSubDistrictId: string | null;
+  currentZipCode: string | null;
+  registrationAddress: string | null;
+  registrationDistrictId: string | null;
+  registrationProvinceId: string | null;
+  registrationSame: Boolean | null;
+  registrationSubDistrictId: string | null;
+  registrationZipCode: string | null;
+  createdFullName: string | null;
+  createdAt: Date;
+}
+
+interface ResponseHistory {
+  currentAddress: string | null;
+  currentDistrictId: string | null;
+  currentProvinceId: string | null;
+  currentSubDistrictId: string | null;
+  currentZipCode: string | null;
+  registrationAddress: string | null;
+  registrationDistrictId: string | null;
+  registrationProvinceId: string | null;
+  registrationSame: string | null;
+  registrationSubDistrictId: string | null;
+  registrationZipCode: string | null;
+  createdFullName: string | null;
+  createdAt: Date;
+}
+
+export type { ResponseObject, ResponseHistory };
diff --git a/src/components/information/interface/response/Assessment.ts b/src/components/information/interface/response/Assessment.ts
new file mode 100644
index 000000000..af1f8598a
--- /dev/null
+++ b/src/components/information/interface/response/Assessment.ts
@@ -0,0 +1,16 @@
+//ข้อมูล
+interface ResponseObject {
+  id: string;
+  point1Total: number;
+  point1: number;
+  point2Total: number;
+  point2: number;
+  pointSumTotal: number;
+  pointSum: number;
+  name: string;
+  date: Date;
+  createdFullName: string;
+  createdAt: Date;
+}
+
+export type { ResponseObject };
diff --git a/src/components/information/interface/response/Certificate.ts b/src/components/information/interface/response/Certificate.ts
new file mode 100644
index 000000000..32756682e
--- /dev/null
+++ b/src/components/information/interface/response/Certificate.ts
@@ -0,0 +1,13 @@
+//ข้อมูล
+interface ResponseObject {
+  id: string;
+  certificateNo: string;
+  issuer: string;
+  issueDate: Date;
+  expireDate: Date;
+  certificateType: string;
+  createdFullName: string;
+  createdAt: Date;
+}
+
+export type { ResponseObject };
diff --git a/src/components/information/interface/response/Coin.ts b/src/components/information/interface/response/Coin.ts
new file mode 100644
index 000000000..578dcbb5e
--- /dev/null
+++ b/src/components/information/interface/response/Coin.ts
@@ -0,0 +1,13 @@
+//ข้อมูล
+interface ResponseObject {
+  id: string;
+  issuer: string;
+  detail: string;
+  issueDate: Date;
+  refCommandNo: string;
+  refCommandDate: Date | null;
+  createdFullName: string;
+  createdAt: Date;
+}
+
+export type { ResponseObject };
diff --git a/src/components/information/interface/response/Discipline.ts b/src/components/information/interface/response/Discipline.ts
new file mode 100644
index 000000000..bb6ca4262
--- /dev/null
+++ b/src/components/information/interface/response/Discipline.ts
@@ -0,0 +1,14 @@
+//ข้อมูล
+interface ResponseObject {
+  id: string;
+  level: string;
+  detail: string;
+  unStigma: string;
+  refCommandNo: string;
+  refCommandDate: Date;
+  date: Date;
+  createdFullName: string;
+  createdAt: Date;
+}
+
+export type { ResponseObject };
diff --git a/src/components/information/interface/response/Document.ts b/src/components/information/interface/response/Document.ts
new file mode 100644
index 000000000..4365fe380
--- /dev/null
+++ b/src/components/information/interface/response/Document.ts
@@ -0,0 +1,6 @@
+//ข้อมูล
+interface ResponseObject {
+  name: String;
+}
+
+export type { ResponseObject };
diff --git a/src/components/information/interface/response/Education.ts b/src/components/information/interface/response/Education.ts
new file mode 100644
index 000000000..86bda975c
--- /dev/null
+++ b/src/components/information/interface/response/Education.ts
@@ -0,0 +1,27 @@
+//ข้อมูล
+interface ResponseObject {
+  id: string;
+  educationLevel: string;
+  educationLevelId: string;
+  positionPath: string;
+  isEducation: boolean;
+  institute: string;
+  degree: string;
+  field: string;
+  gpa: string;
+  country: string;
+  duration: string;
+  durationYear: number;
+  other: string;
+  fundName: string;
+  isDate: string | null;
+  finishDate: Date;
+  startDate: number;
+  endDate: number;
+  startDate2: Date;
+  endDate2: Date;
+  createdFullName: string;
+  createdAt: Date;
+}
+
+export type { ResponseObject };
diff --git a/src/components/information/interface/response/Family.ts b/src/components/information/interface/response/Family.ts
new file mode 100644
index 000000000..04dc4b363
--- /dev/null
+++ b/src/components/information/interface/response/Family.ts
@@ -0,0 +1,64 @@
+//ข้อมูล
+interface ResponseObject {
+  couple: Boolean | null;
+  couplePrefixId: string | null;
+  coupleFirstName: string | null;
+  coupleLastName: string | null;
+  coupleLastNameOld: string | null;
+  coupleCareer: string | null;
+  coupleLive: Boolean | null;
+  coupleCitizenId: string | null;
+  fatherPrefixId: string | null;
+  fatherFirstName: string | null;
+  fatherLastName: string | null;
+  fatherCareer: string | null;
+  fatherLive: Boolean | null;
+  fatherCitizenId: string | null;
+  motherPrefixId: string | null;
+  motherFirstName: string | null;
+  motherLastName: string | null;
+  motherCareer: string | null;
+  motherLive: Boolean | null;
+  motherCitizenId: string | null;
+  createdFullName: string | null;
+  createdAt: Date;
+  childrens: childrenFamily[];
+}
+
+interface ResponseHistory {
+  couple: string | null;
+  couplePrefixId: string | null;
+  coupleFirstName: string | null;
+  coupleLastName: string | null;
+  coupleLastNameOld: string | null;
+  coupleCareer: string | null;
+  coupleLive: string | null;
+  coupleCitizenId: string | null;
+  fatherPrefixId: string | null;
+  fatherFirstName: string | null;
+  fatherLastName: string | null;
+  fatherCareer: string | null;
+  fatherLive: string | null;
+  fatherCitizenId: string | null;
+  motherPrefixId: string | null;
+  motherFirstName: string | null;
+  motherLastName: string | null;
+  motherCareer: string | null;
+  motherLive: string | null;
+  motherCitizenId: string | null;
+  createdFullName: string | null;
+  createdAt: Date;
+  childrens: childrenFamily[];
+}
+
+interface childrenFamily {
+  id: string;
+  childrenPrefixId: string | null;
+  childrenFirstName: string | null;
+  childrenLastName: string | null;
+  childrenCareer: string | null;
+  childrenLive: string | null;
+  childrenCitizenId: string | null;
+}
+
+export type { ResponseObject, childrenFamily, ResponseHistory };
diff --git a/src/components/information/interface/response/Government.ts b/src/components/information/interface/response/Government.ts
new file mode 100644
index 000000000..69a4ef3aa
--- /dev/null
+++ b/src/components/information/interface/response/Government.ts
@@ -0,0 +1,23 @@
+//ข้อมูล
+interface ResponseObject {
+  oc: string | null;
+  positionExecutive: string | null;
+  positionExecutiveSide: string | null;
+  dateAppoint: Date | string;
+  dateStart: Date | string;
+  govAge: string | null;
+  govAgeAbsent: number | null;
+  govAgePlus: number | null;
+  positionLevel: string | null;
+  posNo: string | null;
+  position: string | null;
+  positionPathSide: string | null;
+  retireDate: string | null;
+  positionType: string | null;
+  positionLine: string | null;
+  createdFullName: string | null;
+  createdAt: Date;
+  reasonSameDate: string | null;
+}
+
+export type { ResponseObject };
diff --git a/src/components/information/interface/response/Information.ts b/src/components/information/interface/response/Information.ts
new file mode 100644
index 000000000..cd0008734
--- /dev/null
+++ b/src/components/information/interface/response/Information.ts
@@ -0,0 +1,24 @@
+//ข้อมูล
+interface ResponseObject {
+  changeName: boolean | null;
+  birthDate: Date;
+  bloodGroupId: string | null;
+  citizenId: string | null;
+  firstName: string | null;
+  genderId: string | null;
+  lastName: string | null;
+  nationality: string | null;
+  prefixId: string | null;
+  race: string | null;
+  relationshipId: string | null;
+  religionId: string | null;
+  telephoneNumber: string | null;
+  createdFullName: string | null;
+  createdAt: Date;
+  age: string | null;
+  employeeType: string | null;
+  employeeClass: string | null;
+  profileType: string | null;
+}
+
+export type { ResponseObject };
diff --git a/src/components/information/interface/response/Insignia.ts b/src/components/information/interface/response/Insignia.ts
new file mode 100644
index 000000000..4d26152a0
--- /dev/null
+++ b/src/components/information/interface/response/Insignia.ts
@@ -0,0 +1,22 @@
+//ข้อมูล
+interface ResponseObject {
+  id: string;
+  insigniaType: string;
+  insignia: string;
+  insigniaId: string;
+  year: number;
+  no: string;
+  issue: string;
+  volumeNo: string;
+  volume: string;
+  section: string;
+  page: string;
+  receiveDate: Date;
+  dateAnnounce: Date;
+  refCommandNo: string;
+  refCommandDate: Date | null;
+  createdFullName: string;
+  createdAt: Date;
+}
+
+export type { ResponseObject };
diff --git a/src/components/information/interface/response/Leave.ts b/src/components/information/interface/response/Leave.ts
new file mode 100644
index 000000000..f5eb18b13
--- /dev/null
+++ b/src/components/information/interface/response/Leave.ts
@@ -0,0 +1,22 @@
+//ข้อมูล
+interface ResponseObject {
+  id: string;
+  typeLeave: string;
+  dateStartLeave: Date;
+  dateEndLeave: Date;
+  numLeave: number;
+  sumLeave: number;
+  totalLeave: number;
+  status: string;
+  reason: string;
+  typeLeaveId: string;
+}
+interface ResponseTotalObject {
+  typeLeaveId: string;
+  typeLeave: string;
+  totalLeave: number;
+  limitLeave: string;
+  remainLeave: string;
+}
+
+export type { ResponseObject, ResponseTotalObject };
diff --git a/src/components/information/interface/response/Main.ts b/src/components/information/interface/response/Main.ts
new file mode 100644
index 000000000..28d372484
--- /dev/null
+++ b/src/components/information/interface/response/Main.ts
@@ -0,0 +1,37 @@
+//ข้อมูล
+interface ResponseObject {
+  id: number;
+  fullname: String;
+  fullnameOld: String;
+  avatar: String;
+  citizenId: String;
+  oc: String;
+  position: String;
+  positionPathSide: String;
+  posNo: String | null;
+  posNoEmployee: String | null;
+  positionLine: String;
+  positionType: String;
+  govAge: number;
+  positionLevel: String;
+  positionExecutive: String | null;
+  positionExecutiveSide: String | null;
+  refSalary: String;
+  positionEmployeePosition: String | null;
+  positionEmployeePositionSide: String | null;
+  positionEmployeeLevel: String | null;
+  positionEmployeeGroup: String | null;
+  dateAppoint: Date | null;
+  dateStart: Date | null;
+  createdAt: Date | null;
+  salaryDate: Date | null;
+  leaveReason: string;
+  age: String;
+  amount: String;
+  insignia: String;
+  insigniaLast: String;
+  isLeave: boolean;
+  leaveDateOrder: Date | null;
+}
+
+export type { ResponseObject };
diff --git a/src/components/information/interface/response/OldName.ts b/src/components/information/interface/response/OldName.ts
new file mode 100644
index 000000000..f908976a1
--- /dev/null
+++ b/src/components/information/interface/response/OldName.ts
@@ -0,0 +1,14 @@
+//ข้อมูล
+interface ResponseObject {
+  id: string;
+  prefix: string;
+  prefixId: string;
+  firstName: string;
+  lastName: string;
+  status: string;
+  file: string | null;
+  createdFullName: string;
+  createdAt: Date;
+}
+
+export type { ResponseObject };
diff --git a/src/components/information/interface/response/Other.ts b/src/components/information/interface/response/Other.ts
new file mode 100644
index 000000000..7bce7e100
--- /dev/null
+++ b/src/components/information/interface/response/Other.ts
@@ -0,0 +1,10 @@
+//ข้อมูล
+interface ResponseObject {
+  id: string;
+  date: Date;
+  detail: string;
+  createdFullName: string;
+  createdAt: Date;
+}
+
+export type { ResponseObject };
diff --git a/src/components/information/interface/response/Record.ts b/src/components/information/interface/response/Record.ts
new file mode 100644
index 000000000..2ed425be7
--- /dev/null
+++ b/src/components/information/interface/response/Record.ts
@@ -0,0 +1,13 @@
+//ข้อมูล
+interface ResponseObject {
+  id: string;
+  date: Date;
+  detail: string;
+  reference: string;
+  refCommandNo: string;
+  refCommandDate: Date | null;
+  createdFullName: string;
+  createdAt: Date;
+}
+
+export type { ResponseObject };
diff --git a/src/components/information/interface/response/Salary.ts b/src/components/information/interface/response/Salary.ts
new file mode 100644
index 000000000..dbf255081
--- /dev/null
+++ b/src/components/information/interface/response/Salary.ts
@@ -0,0 +1,61 @@
+//ข้อมูล
+interface ResponseObject {
+  id: string;
+  date: Date;
+  amount: number;
+  positionSalaryAmount: number;
+  mouthSalaryAmount: number;
+  oc: string;
+  ocId: string;
+  position: string;
+  positionId: string;
+  posNo: string;
+  posNoId: string;
+  positionLine: string;
+  positionLineId: string;
+  positionPathSide: string;
+  positionPathSideId: string;
+  positionType: string;
+  positionTypeId: string;
+  positionLevel: string;
+  positionLevelId: string;
+  positionExecutive: string;
+  positionExecutiveId: string;
+  positionExecutiveSide: string;
+  positionExecutiveSideId: string;
+  salaryClass: string;
+  salaryRef: string;
+  refCommandNo: string;
+  //   refCommandDate: Date | null;
+  createdFullName: string;
+  createdAt: Date;
+}
+
+interface ResponseObjectEmployee {
+  amount: number;
+  createdAt: Date;
+  createdFullName: string;
+  date: Date;
+  id: string;
+  mouthSalaryAmount: number;
+  oc: string | null;
+  ocId: string;
+  posNo: string | null;
+  posNoId: string | null;
+  posNoEmployee: string | null;
+  positionEmployeeGroup: string | null;
+  positionEmployeeGroupId: string | null;
+  positionEmployeeLevel: string | null;
+  positionEmployeeLevelId: string | null;
+  positionEmployeePosition: string | null;
+  positionEmployeePositionId: string | null;
+  positionEmployeePositionSide: string | null;
+  positionEmployeePositionSideId: string | null;
+  positionSalaryAmount: number;
+  salaryClass: string | null;
+  salaryRef: string | null;
+  refCommandNo: string;
+  //   refCommandDate: Date | null;
+}
+
+export type { ResponseObject, ResponseObjectEmployee };
diff --git a/src/components/information/interface/response/Talent.ts b/src/components/information/interface/response/Talent.ts
new file mode 100644
index 000000000..35bddad2d
--- /dev/null
+++ b/src/components/information/interface/response/Talent.ts
@@ -0,0 +1,12 @@
+//ข้อมูล
+interface ResponseObject {
+  id: string;
+  field: string;
+  detail: string;
+  remark: string;
+  reference: string;
+  createdFullName: string;
+  createdAt: Date;
+}
+
+export type { ResponseObject };
diff --git a/src/components/information/interface/response/Train.ts b/src/components/information/interface/response/Train.ts
new file mode 100644
index 000000000..6cd0ebda2
--- /dev/null
+++ b/src/components/information/interface/response/Train.ts
@@ -0,0 +1,18 @@
+//ข้อมูล
+interface ResponseObject {
+  id: string;
+  name: string;
+  topic: string;
+  yearly: number;
+  place: string;
+  duration: string;
+  department: string;
+  numberOrder: string;
+  dateOrder: Date;
+  startDate: Date;
+  endDate: Date;
+  createdFullName: string;
+  createdAt: Date;
+}
+
+export type { ResponseObject };
diff --git a/src/components/information/interface/response/Work.ts b/src/components/information/interface/response/Work.ts
new file mode 100644
index 000000000..fb269cf17
--- /dev/null
+++ b/src/components/information/interface/response/Work.ts
@@ -0,0 +1,14 @@
+//ข้อมูล
+interface ResponseObject {
+  id: string;
+  dateStart: Date;
+  dateEnd: Date;
+  detail: string;
+  reference: string;
+  refCommandNo: string;
+  refCommandDate: Date | null;
+  createdFullName: string;
+  createdAt: Date;
+}
+
+export type { ResponseObject };
diff --git a/src/components/information/interface/store/main.ts b/src/components/information/interface/store/main.ts
index 7c31dd81c..6d0452d09 100644
--- a/src/components/information/interface/store/main.ts
+++ b/src/components/information/interface/store/main.ts
@@ -17,4 +17,14 @@ interface Profile {
   document: { columns: String[] };
 }
 
-export type { Profile };
+interface DataOption {
+  id: string;
+  name: string;
+  zipCode?: string;
+}
+
+interface Pagination {
+  rowsPerPage: number;
+}
+
+export type { Profile, DataOption, Pagination };

From f0722248510699fbe5c490e5b9da25883c38ed46 Mon Sep 17 00:00:00 2001
From: Thanit Konmek <thanit@frappet.com>
Date: Thu, 3 Aug 2023 15:53:23 +0700
Subject: [PATCH 021/113] =?UTF-8?q?=E0=B9=81=E0=B8=81=E0=B9=89=E0=B9=84?=
 =?UTF-8?q?=E0=B8=82=20component=20=E0=B8=97=E0=B8=B0=E0=B9=80=E0=B8=9A?=
 =?UTF-8?q?=E0=B8=B5=E0=B8=A2=E0=B8=99=E0=B8=9B=E0=B8=A3=E0=B8=B0=E0=B8=A7?=
 =?UTF-8?q?=E0=B8=B1=E0=B8=95=E0=B8=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/information/Assessment.vue     |  981 ++++++++
 src/components/information/Coin.vue           |  840 +++++++
 src/components/information/Discipline.vue     |  943 ++++++++
 src/components/information/Document.vue       |  272 +++
 src/components/information/Education.vue      | 1567 +++++++++++++
 src/components/information/Insignia.vue       | 1344 +++++++++++
 src/components/information/Leave.vue          | 1270 ++++++++++
 src/components/information/Other.vue          |  620 +++++
 src/components/information/Record.vue         |  827 +++++++
 src/components/information/Salary.vue         | 2070 +++++++++++++++++
 src/components/information/SalaryEmployee.vue | 2009 ++++++++++++++++
 .../information/SalaryEmployeeTemp.vue        | 2038 ++++++++++++++++
 src/components/information/Talent.vue         |  684 ++++++
 src/components/information/Train.vue          | 1130 +++++++++
 src/components/information/Work.vue           |  908 ++++++++
 .../components/Receive/receiveDetail.vue      |   64 +-
 16 files changed, 17566 insertions(+), 1 deletion(-)
 create mode 100644 src/components/information/Assessment.vue
 create mode 100644 src/components/information/Coin.vue
 create mode 100644 src/components/information/Discipline.vue
 create mode 100644 src/components/information/Document.vue
 create mode 100644 src/components/information/Education.vue
 create mode 100644 src/components/information/Insignia.vue
 create mode 100644 src/components/information/Leave.vue
 create mode 100644 src/components/information/Other.vue
 create mode 100644 src/components/information/Record.vue
 create mode 100644 src/components/information/Salary.vue
 create mode 100644 src/components/information/SalaryEmployee.vue
 create mode 100644 src/components/information/SalaryEmployeeTemp.vue
 create mode 100644 src/components/information/Talent.vue
 create mode 100644 src/components/information/Train.vue
 create mode 100644 src/components/information/Work.vue

diff --git a/src/components/information/Assessment.vue b/src/components/information/Assessment.vue
new file mode 100644
index 000000000..5d42ad985
--- /dev/null
+++ b/src/components/information/Assessment.vue
@@ -0,0 +1,981 @@
+<!-- card ผลการประเมินการปฏิบัติราชการ -->
+<template>
+  <q-card flat bordered class="col-12 q-px-lg q-pa-md">
+    <q-form ref="myForm">
+      <ProfileTable
+        :rows="rows"
+        :columns="columns"
+        :filter="filter"
+        :visible-columns="visibleColumns"
+        v-model:inputfilter="filter"
+        v-model:inputvisible="visibleColumns"
+        :add="clickAdd"
+        name="ผลการประเมินการปฏิบัติราชการ"
+        icon="mdi-clipboard-text"
+        :statusEdit="statusEdit"
+      >
+        <template #columns="props">
+          <q-tr :props="props">
+            <q-td
+              v-for="col in props.cols"
+              :key="col.name"
+              :props="props"
+              @click="selectData(props)"
+              class="cursor-pointer"
+            >
+              <div v-if="col.name == 'date'" class="table_ellipsis">
+                {{ date2Thai(col.value) }}
+              </div>
+              <div v-else-if="col.name == 'name'" class="table_ellipsis">
+                {{ textPoint(props.row.pointSum) }}
+                {{ textRangePoint(props.row.pointSum) }}
+              </div>
+              <div v-else class="table_ellipsis">
+                {{ col.value }}
+              </div>
+            </q-td>
+            <q-td auto-width>
+              <q-btn
+                color="info"
+                flat
+                dense
+                round
+                size="14px"
+                icon="mdi-history"
+                @click="clickHistory(props.row)"
+              />
+            </q-td>
+          </q-tr>
+        </template>
+      </ProfileTable>
+    </q-form>
+  </q-card>
+  <!-- popup Edit window-->
+  <q-dialog v-model="modal" persistent>
+    <q-card style="width: 600px">
+      <q-form ref="myForm">
+        <DialogHeader
+          tittle="ผลการประเมินการปฏิบัติราชการ"
+          :close="clickClose"
+        />
+        <q-separator />
+        <q-card-section class="q-p-sm">
+          <div
+            class="row col-12 items-center q-col-gutter-x-xs q-col-gutter-y-xs"
+          >
+            <div class="col-xs-12 col-sm-12 col-md-12">
+              <datepicker
+                menu-class-name="modalfix"
+                :readonly="!edit"
+                v-model="date"
+                :locale="'th'"
+                autoApply
+                :enableTimePicker="false"
+                @update:modelValue="clickEditRow"
+                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="date2Thai(date)"
+                    :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 class="col-6">
+              <q-input
+                :class="getClass(edit)"
+                :outlined="edit"
+                dense
+                lazy-rules
+                :readonly="!edit"
+                :borderless="!edit"
+                v-model="point"
+                :rules="[(val) => !!val || `${'กรุณากรอกคะแนน'}`]"
+                hide-bottom-space
+                :label="`${'คะแนน'}`"
+                @update:modelValue="clickEditRow"
+                type="number"
+              />
+            </div> -->
+            <div class="col-6">
+              <q-input
+                input-class="text-right"
+                :class="getClass(edit)"
+                :outlined="edit"
+                dense
+                lazy-rules
+                :readonly="!edit"
+                :borderless="!edit"
+                v-model="point1Total"
+                :rules="[(val) => !!val || `${'กรุณากรอกส่วนที่1 (คะแนน)'}`]"
+                hide-bottom-space
+                :label="`${'ส่วนที่1 (คะแนน)'}`"
+                @update:modelValue="clickEditRow"
+                type="number"
+              />
+            </div>
+            <div class="col-6">
+              <q-input
+                input-class="text-right"
+                :class="getClass(edit)"
+                :outlined="edit"
+                dense
+                lazy-rules
+                :readonly="!edit"
+                :borderless="!edit"
+                v-model="point1"
+                :rules="[
+                  (val) => !!val || `${'กรุณากรอกผลประเมินส่วนที่1 (คะแนน)'}`,
+                ]"
+                hide-bottom-space
+                :label="`${'ผลประเมินส่วนที่1 (คะแนน)'}`"
+                @update:modelValue="clickEditRow"
+                type="number"
+              />
+            </div>
+            <div class="col-6">
+              <q-input
+                input-class="text-right"
+                :class="getClass(edit)"
+                :outlined="edit"
+                dense
+                lazy-rules
+                :readonly="!edit"
+                :borderless="!edit"
+                v-model="point2Total"
+                :rules="[(val) => !!val || `${'กรุณากรอกส่วนที่2 (คะแนน)'}`]"
+                hide-bottom-space
+                :label="`${'ส่วนที่2 (คะแนน)'}`"
+                @update:modelValue="clickEditRow"
+                type="number"
+              />
+            </div>
+            <div class="col-6">
+              <q-input
+                input-class="text-right"
+                :class="getClass(edit)"
+                :outlined="edit"
+                dense
+                lazy-rules
+                :readonly="!edit"
+                :borderless="!edit"
+                v-model="point2"
+                :rules="[
+                  (val) => !!val || `${'กรุณากรอกผลประเมินส่วนที่2 (คะแนน)'}`,
+                ]"
+                hide-bottom-space
+                :label="`${'ผลประเมินส่วนที่2 (คะแนน)'}`"
+                @update:modelValue="clickEditRow"
+                type="number"
+              />
+            </div>
+            <div class="col-6">
+              <q-input
+                input-class="text-right"
+                :class="getClass(edit)"
+                :outlined="edit"
+                dense
+                lazy-rules
+                :readonly="!edit"
+                :borderless="!edit"
+                v-model="pointSumTotal"
+                :rules="[(val) => !!val || `${'กรุณากรอกผลรวม (คะแนน)'}`]"
+                hide-bottom-space
+                :label="`${'ผลรวม (คะแนน)'}`"
+                @update:modelValue="clickEditRow"
+                type="number"
+              />
+            </div>
+            <div class="col-6">
+              <q-input
+                input-class="text-right"
+                :class="getClass(edit)"
+                :outlined="edit"
+                dense
+                lazy-rules
+                :readonly="!edit"
+                :borderless="!edit"
+                v-model="pointSum"
+                :rules="[
+                  (val) => !!val || `${'กรุณากรอกผลประเมินรวม (คะแนน)'}`,
+                ]"
+                hide-bottom-space
+                :label="`${'ผลประเมินรวม (คะแนน)'}`"
+                @update:modelValue="clickEditRow"
+                type="number"
+              />
+            </div>
+            <div class="text-subtitle2 col-12 row items-center">
+              <q-space></q-space>
+              ผลการประเมิน:
+              <div class="text-bold items-center q-px-sm">
+                {{ textPoint(pointSum) }}
+              </div>
+              {{ textRangePoint(pointSum) }}
+            </div>
+            <!-- <div class="col-12">
+              <q-input
+                :class="getClass(edit)"
+                :outlined="edit"
+                dense
+                lazy-rules
+                :readonly="!edit"
+                :borderless="!edit"
+                v-model="name"
+                :rules="[(val) => !!val || `${'กรุณากรอกชื่อแบบประเมิน'}`]"
+                hide-bottom-space
+                :label="`${'ชื่อแบบประเมิน'}`"
+                @update:modelValue="clickEditRow"
+              />
+            </div> -->
+          </div>
+        </q-card-section>
+        <q-separator />
+        <DialogFooter
+          :cancel="clickCancel"
+          :edit="clickEdit"
+          :save="clickSave"
+          :validate="validateData"
+          :clickNext="clickNext"
+          :clickPrevious="clickPrevious"
+          :clickDelete="clickDelete"
+          v-model:editvisible="edit"
+          v-model:next="next"
+          v-model:previous="previous"
+          v-model:modalEdit="modalEdit"
+        />
+      </q-form>
+    </q-card>
+  </q-dialog>
+  <HistoryTable
+    :rows="rowsHistory"
+    :columns="columnsHistory"
+    :filter="filterHistory"
+    :visible-columns="visibleColumnsHistory"
+    v-model:modal="modalHistory"
+    v-model:inputfilter="filterHistory"
+    v-model:inputvisible="visibleColumnsHistory"
+    v-model:tittle="tittleHistory"
+  >
+    <template #columns="props">
+      <q-tr :props="props">
+        <q-td v-for="col in props.cols" :key="col.name" :props="props">
+          <div
+            v-if="col.name == 'date' || col.name == 'createdAt'"
+            class="table_ellipsis"
+          >
+            {{ date2Thai(col.value) }}
+          </div>
+          <div v-else-if="col.name == 'name'" class="table_ellipsis">
+            {{ textPoint(props.row.pointSum) }}
+            {{ textRangePoint(props.row.pointSum) }}
+          </div>
+          <div v-else class="table_ellipsis">
+            {{ col.value }}
+          </div>
+        </q-td>
+      </q-tr>
+    </template>
+  </HistoryTable>
+</template>
+<script setup lang="ts">
+import { onMounted, ref, watch } from "vue";
+import { useRoute } from "vue-router";
+import { useCounterMixin } from "@/stores/mixin";
+import { useProfileDataStore } from "@/modules/04_registry/store";
+import { useDataStore } from "@/stores/data";
+import ProfileTable from "@/modules/04_registry/components/Table.vue";
+import DialogHeader from "@/modules/04_registry/components/DialogHeader.vue";
+import DialogFooter from "@/modules/04_registry/components/DialogFooter.vue";
+import { useQuasar } from "quasar";
+import type {
+  RequestItemsObject,
+  DataProps,
+} from "@/modules/04_registry/interface/request/Assessment";
+import type { ResponseObject } from "@/modules/04_registry/interface/response/Assessment";
+import type { DataOption } from "@/modules/04_registry/interface/index/Main";
+import HistoryTable from "@/components/TableHistory.vue";
+import http from "@/plugins/http";
+import config from "@/app.config";
+import type { QTableProps } from "quasar";
+
+const props = defineProps({
+  statusEdit: {
+    type: Boolean,
+    required: true,
+  },
+  profileType: {
+    type: String,
+    required: true,
+  },
+});
+
+const $q = useQuasar();
+const store = useProfileDataStore();
+const { profileData, changeProfileColumns } = store;
+const dataStore = useDataStore();
+const { loaderPage } = dataStore;
+const mixin = useCounterMixin();
+const { date2Thai, success, dateToISO, messageError } = mixin;
+const route = useRoute();
+const id = ref<string>("");
+const name = ref<string>();
+const point1Total = ref<number>();
+const point1 = ref<number>();
+const point2Total = ref<number>();
+const point2 = ref<number>();
+const pointSumTotal = ref<number>();
+const pointSum = ref<number>();
+const date = ref<Date>(new Date());
+const myForm = ref<any>(); //form data input
+const edit = ref<boolean>(false); //เช็คการกดปุ่มแก้ไขใน dialog
+const modal = ref<boolean>(false); //modal add detail
+const modalEdit = ref<boolean>(false); //modal ที่แสดงใช้สำหรับแก้ไขหรือไม่
+const rawItem = ref<RequestItemsObject>(); //ข้อมูลเดิมที่เลือกใน row นั้น
+const rowIndex = ref<number>(0); //indexข้อมูลเดิมที่เลือกใน row นั้น
+const previous = ref<boolean>(); //แสดงปุ่มดูข้อมูลก่อนหน้า
+const next = ref<boolean>(); //แสดงปุ่มดูข้อมูลต่อไป
+const editRow = ref<boolean>(false); //เช็คมีการแก้ไขข้อมูล
+const rowsHistory = ref<RequestItemsObject[]>([]); //select data history
+const tittleHistory = ref<string>("ประวัติแก้ไขผลการประเมินการปฏิบัติราชการ"); //
+const filterHistory = ref<string>(""); //search data table history
+const modalHistory = ref<boolean>(false); //modal ประวัติการแก้ไขข้อมูล
+const checkValidate = ref<boolean>(false); //validate data ผ่านหรือไม่
+const profileId = ref<string>(
+  route.params.id ? route.params.id.toString() : ""
+);
+const rows = ref<RequestItemsObject[]>([]);
+const filter = ref<string>(""); //search data table
+const visibleColumns = ref<String[]>([]);
+profileData.assessment.columns.length == 0
+  ? (visibleColumns.value = [
+      "point1Total",
+      "point1",
+      "point2Total",
+      "point2",
+      "pointSumTotal",
+      "pointSum",
+      "name",
+      "date",
+    ])
+  : (visibleColumns.value = profileData.assessment.columns);
+const columns = ref<QTableProps["columns"]>([
+  {
+    name: "date",
+    align: "left",
+    label: "วันที่ได้รับ",
+    sortable: true,
+    field: "date",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "point1Total",
+    align: "left",
+    label: "ส่วนที่1 (คะแนน)",
+    sortable: true,
+    field: "point1Total",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "point1",
+    align: "left",
+    label: "ผลประเมินส่วนที่1 (คะแนน)",
+    sortable: true,
+    field: "point1",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "point2Total",
+    align: "left",
+    label: "ส่วนที่2 (คะแนน)",
+    sortable: true,
+    field: "point2Total",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "point2",
+    align: "left",
+    label: "ผลประเมินส่วนที่2 (คะแนน)",
+    sortable: true,
+    field: "point2",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "pointSumTotal",
+    align: "left",
+    label: "ผลรวม (คะแนน)",
+    sortable: true,
+    field: "pointSumTotal",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "pointSum",
+    align: "left",
+    label: "ผลประเมินรวม (คะแนน)",
+    sortable: true,
+    field: "pointSum",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "name",
+    align: "left",
+    label: "ผลประเมิน",
+    sortable: true,
+    field: "name",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+]);
+const columnsHistory = ref<QTableProps["columns"]>([
+  {
+    name: "point1Total",
+    align: "left",
+    label: "ส่วนที่1 (คะแนน)",
+    sortable: true,
+    field: "point1Total",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "point1",
+    align: "left",
+    label: "ผลประเมินส่วนที่1 (คะแนน)",
+    sortable: true,
+    field: "point1",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "point2Total",
+    align: "left",
+    label: "ส่วนที่2 (คะแนน)",
+    sortable: true,
+    field: "point2Total",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "point2",
+    align: "left",
+    label: "ผลประเมินส่วนที่2 (คะแนน)",
+    sortable: true,
+    field: "point2",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "pointSumTotal",
+    align: "left",
+    label: "ผลรวม (คะแนน)",
+    sortable: true,
+    field: "pointSumTotal",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "pointSum",
+    align: "left",
+    label: "ผลประเมินรวม (คะแนน)",
+    sortable: true,
+    field: "pointSum",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "name",
+    align: "left",
+    label: "ผลประเมิน",
+    sortable: true,
+    field: "name",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "createdFullName",
+    align: "left",
+    label: "ผู้ดำเนินการ",
+    sortable: true,
+    field: "createdFullName",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "createdAt",
+    align: "left",
+    label: "วันที่แก้ไข",
+    sortable: true,
+    field: "createdAt",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+]);
+const visibleColumnsHistory = ref<String[]>([
+  "point1Total",
+  "point1",
+  "point2Total",
+  "point2",
+  "pointSumTotal",
+  "pointSum",
+  "name",
+  "date",
+  "createdFullName",
+  "createdAt",
+]);
+
+watch(visibleColumns, async (count: String[], prevCount: String[]) => {
+  await changeProfileColumns("assessment", count);
+});
+
+onMounted(async () => {
+  await fetchData();
+});
+
+const fetchData = async () => {
+  if (profileId.value) {
+    loaderPage(true);
+    await http
+      .get(config.API.profileAssessmentId(profileId.value))
+      .then((res) => {
+        let data = res.data.result;
+        rows.value = [];
+        data.map((e: ResponseObject) => {
+          rows.value.push({
+            id: e.id,
+            name: e.name,
+            point1Total: e.point1Total,
+            point1: e.point1,
+            point2Total: e.point2Total,
+            point2: e.point2,
+            pointSumTotal: e.pointSumTotal,
+            pointSum: e.pointSum,
+            date: new Date(e.date),
+            createdAt: new Date(e.createdAt),
+            createdFullName: e.createdFullName,
+          });
+        });
+      })
+      .catch((e) => {
+        messageError($q, e);
+      })
+      .finally(() => {
+        loaderPage(false);
+      });
+  }
+};
+
+/**
+ * กดดูข้อมูลก่อนหน้า
+ */
+const clickPrevious = async () => {
+  edit.value = false;
+  rowIndex.value -= 1;
+  await getData();
+  await checkRowPage();
+};
+
+/**
+ * กดดูข้อมูลต่อไป
+ */
+const clickNext = async () => {
+  edit.value = false;
+  rowIndex.value += 1;
+  await getData();
+  await checkRowPage();
+};
+
+/**
+ * กดดูข้อมูลต่อไป
+ */
+const getData = () => {
+  const row = rows.value[rowIndex.value];
+  name.value = row.name;
+  point1Total.value = row.point1Total;
+  point1.value = row.point1;
+  point2Total.value = row.point2Total;
+  point2.value = row.point2;
+  pointSumTotal.value = row.pointSumTotal;
+  pointSum.value = row.pointSum;
+  date.value = row.date;
+  id.value = row.id;
+};
+
+/**
+ * เช็คปุ่มดูข้อมูล ย้อน กับ ต่อไป ว่าต้องแสดงไหม
+ */
+const checkRowPage = () => {
+  editRow.value = false;
+  next.value = true;
+  previous.value = true;
+  if (rowIndex.value + 1 >= rows.value.length) {
+    next.value = false;
+  }
+  if (rowIndex.value - 1 < 0) {
+    previous.value = false;
+  }
+};
+
+/**
+ * กดปุ่มแก้ไขใน dialog
+ */
+const clickEdit = () => {
+  editRow.value = false;
+  next.value = false;
+  previous.value = false;
+};
+
+/**
+ * กดปุ่มเพิ่มด้านบน table
+ */
+const clickAdd = async () => {
+  editRow.value = false;
+  await addData();
+};
+
+/**
+ * กดบันทึกใน dialog
+ */
+const clickSave = async () => {
+  myForm.value.validate().then(async (result: boolean) => {
+    if (result) {
+      if (modalEdit.value) {
+        await editData();
+      } else {
+        await saveData();
+      }
+    }
+  });
+};
+
+/**
+ * บันทึกเพิ่มข้อมูล
+ */
+const saveData = async () => {
+  if (profileId.value) {
+    loaderPage(true);
+    await http
+      .post(config.API.profileAssessmentId(profileId.value), {
+        id: id.value,
+        name: name.value,
+        point1Total: point1Total.value,
+        point1: point1.value,
+        point2Total: point2Total.value,
+        point2: point2.value,
+        pointSumTotal: pointSumTotal.value,
+        pointSum: pointSum.value,
+        date: dateToISO(date.value),
+      })
+      .then((res) => {
+        success($q, "บันทึกข้อมูลสำเร็จ");
+        modal.value = false;
+      })
+      .catch((e) => {
+        messageError($q, e);
+      })
+      .finally(async () => {
+        await fetchData();
+      });
+  }
+};
+
+/**
+ * บันทึกแก้ไขข้อมูล
+ */
+const editData = async () => {
+  loaderPage(true);
+  await http
+    .put(config.API.profileAssessmentId(id.value), {
+      id: id.value,
+      name: name.value,
+      point1Total: point1Total.value,
+      point1: point1.value,
+      point2Total: point2Total.value,
+      point2: point2.value,
+      pointSumTotal: pointSumTotal.value,
+      pointSum: pointSum.value,
+      date: dateToISO(date.value),
+    })
+    .then((res) => {
+      success($q, "บันทึกข้อมูลสำเร็จ");
+      modal.value = false;
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(async () => {
+      await fetchData();
+    });
+};
+
+/**
+ * ลบลบข้อมูล
+ */
+const clickDelete = async () => {
+  $q.dialog({
+    title: `ลบข้อมูล`,
+    message: `ต้องการทำการลบข้อมูลนี้ใช่หรือไม่?`,
+    cancel: "ยกเลิก",
+    ok: "ยืนยัน",
+    persistent: true,
+  })
+    .onOk(async () => {
+      loaderPage(true);
+      await http
+        .delete(config.API.profileAssessmentId(id.value))
+        .then((res) => {
+          success($q, "ลบข้อมูลสำเร็จ");
+          modal.value = false;
+        })
+        .catch((e) => {
+          messageError($q, e);
+        })
+        .finally(async () => {
+          await fetchData();
+        });
+    })
+    .onCancel(async () => {
+      await fetchData();
+    });
+};
+
+/**
+ * กดปิด dialog
+ */
+const clickClose = async () => {
+  if (editRow.value == true) {
+    $q.dialog({
+      title: `ข้อมูลมีการแก้ไข`,
+      message: `ยืนยันที่จะปิดโดยไม่บันทึกใช่หรือไม่?`,
+      cancel: "ยกเลิก",
+      ok: "ยืนยัน",
+      persistent: true,
+    }).onOk(async () => {
+      modal.value = false;
+      next.value = false;
+      previous.value = false;
+    });
+  } else {
+    modal.value = false;
+    next.value = false;
+    previous.value = false;
+  }
+};
+
+/**
+ * กดเลือกข้อมูลที่จะแก้ไข
+ * @param props ค่า props ใน row ที่เลือก
+ */
+const selectData = async (props: DataProps) => {
+  modalEdit.value = true;
+  modal.value = true;
+  edit.value = false;
+  rawItem.value = props.row;
+  rowIndex.value = props.rowIndex;
+  name.value = props.row.name;
+  point1Total.value = props.row.point1Total;
+  point1.value = props.row.point1;
+  point2Total.value = props.row.point2Total;
+  point2.value = props.row.point2;
+  pointSumTotal.value = props.row.pointSumTotal;
+  pointSum.value = props.row.pointSum;
+  date.value = props.row.date;
+  id.value = props.row.id;
+  await checkRowPage();
+};
+
+/**
+ * กดปุ่มเพิ่มบน table
+ */
+const addData = () => {
+  modalEdit.value = false;
+  modal.value = true;
+  edit.value = true;
+  name.value = "";
+  point1Total.value = 0;
+  point1.value = 0;
+  point2Total.value = 0;
+  point2.value = 0;
+  pointSumTotal.value = 0;
+  pointSum.value = 0;
+  date.value = new Date();
+};
+
+/**
+ * ฟังก์ชันปุ่มยกเลิกการแก้ไขข้อมูล
+ */
+const clickCancel = async () => {
+  if (editRow.value == true) {
+    $q.dialog({
+      title: `ข้อมูลมีการแก้ไข`,
+      message: `ยืนยันยกเลิกการแก้ไขใช่หรือไม่?`,
+      cancel: "ยกเลิก",
+      ok: "ยืนยัน",
+      persistent: true,
+    }).onOk(async () => {
+      edit.value = false;
+      await checkRowPage();
+      await getData();
+    });
+  } else {
+    edit.value = false;
+    await checkRowPage();
+  }
+};
+
+/**
+ * เช็คว่ามีการแก้ไขข้อมูล
+ */
+const clickEditRow = () => {
+  editRow.value = true;
+};
+
+/**
+ * ฟังชั้นดูข้อมูลประวัติแก้ไขข้อมูลที่เลือก
+ * @param row ข้อมูล row ที่ดูประวัติการแก้ไข
+ */
+const clickHistory = async (row: RequestItemsObject) => {
+  tittleHistory.value = "ประวัติแก้ไขผลการประเมินการปฏิบัติราชการ";
+  modalHistory.value = true;
+  loaderPage(true);
+  await http
+    .get(config.API.profileAssessmentHisId(row.id))
+    .then((res) => {
+      let data = res.data.result;
+      rowsHistory.value = [];
+      data.map((e: ResponseObject) => {
+        rowsHistory.value.push({
+          id: e.id,
+          name: e.name,
+          point1Total: e.point1Total,
+          point1: e.point1,
+          point2Total: e.point2Total,
+          point2: e.point2,
+          pointSumTotal: e.pointSumTotal,
+          pointSum: e.pointSum,
+          date: new Date(e.date),
+          createdAt: new Date(e.createdAt),
+          createdFullName: e.createdFullName,
+        });
+      });
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      loaderPage(false);
+    });
+};
+
+/**
+ * validate input ใน dialog
+ */
+const validateData = async () => {
+  checkValidate.value = true;
+  await myForm.value.validate().then((result: boolean) => {
+    if (result == false) {
+      checkValidate.value = false;
+    }
+  });
+};
+
+/**
+ * class จัดรูปแบบแสดงระหว่างข้อมูลที่แก้ไขหรือแสดงเฉยๆ
+ * @param val ข้อมูล input สำหรับแก้ไขหรือไม่
+ */
+const getClass = (val: boolean) => {
+  return {
+    "full-width inputgreen cursor-pointer": val,
+    "full-width cursor-pointer": !val,
+  };
+};
+
+const textRangePoint = (val: number | undefined) => {
+  if (val == undefined) val = -1;
+  if (val >= 0 && val <= 60) return "(ต่ำกว่าร้อยละ 60)";
+  if (val >= 60 && val <= 69) return "(ร้อยละ 60 – 69)";
+  if (val >= 70 && val <= 79) return "(ร้อยละ 70 – 79)";
+  if (val >= 80 && val <= 89) return "(ร้อยละ 80 – 89)";
+  if (val >= 90 && val <= 100) return "(ร้อยละ 90 - 100)";
+  else return "";
+};
+
+const textPoint = (val: number | undefined) => {
+  if (val == undefined) val = -1;
+  if (val >= 0 && val <= 60) return "ต้องปรับปรุง";
+  if (val >= 60 && val <= 69) return "พอใช้";
+  if (val >= 70 && val <= 79) return "ดี";
+  if (val >= 80 && val <= 89) return "ดีมาก";
+  if (val >= 90 && val <= 100) return "ดีเด่น";
+  else return "-";
+};
+</script>
+<style lang="scss">
+.modalfix {
+  position: fixed !important;
+}
+</style>
diff --git a/src/components/information/Coin.vue b/src/components/information/Coin.vue
new file mode 100644
index 000000000..509123a34
--- /dev/null
+++ b/src/components/information/Coin.vue
@@ -0,0 +1,840 @@
+<!-- card ประกาศเกียรติคุณ -->
+<template>
+  <q-card flat bordered class="col-12 q-px-lg q-pa-md">
+    <q-form ref="myForm">
+      <ProfileTable
+        :rows="rows"
+        :columns="columns"
+        :filter="filter"
+        :visible-columns="visibleColumns"
+        v-model:inputfilter="filter"
+        v-model:inputvisible="visibleColumns"
+        :add="clickAdd"
+        :name="
+          profileType == 'employee' ? 'ประกาศลูกจ้างดีเด่น' : 'ประกาศเกียรติคุณ'
+        "
+        icon="mdi-script-text"
+        :statusEdit="statusEdit"
+      >
+        <template #columns="props">
+          <q-tr :props="props">
+            <q-td
+              v-for="col in props.cols"
+              :key="col.name"
+              :props="props"
+              @click="selectData(props)"
+              class="cursor-pointer"
+            >
+              <div
+                v-if="col.name == 'issueDate' || col.name == 'refCommandDate'"
+                class="table_ellipsis"
+              >
+                {{ col.value == null ? null : date2Thai(col.value) }}
+              </div>
+              <div v-else class="table_ellipsis">
+                {{ col.value }}
+              </div>
+            </q-td>
+            <q-td auto-width>
+              <q-btn
+                color="info"
+                flat
+                dense
+                round
+                size="14px"
+                icon="mdi-history"
+                @click="clickHistory(props.row)"
+              />
+            </q-td>
+          </q-tr>
+        </template>
+      </ProfileTable>
+    </q-form>
+  </q-card>
+  <!-- popup Edit window-->
+  <q-dialog v-model="modal" persistent>
+    <q-card style="width: 600px">
+      <q-form ref="myForm">
+        <DialogHeader
+          :tittle="
+            profileType == 'employee'
+              ? 'ประกาศลูกจ้างดีเด่น'
+              : 'ประกาศเกียรติคุณ'
+          "
+          :close="clickClose"
+        />
+        <q-separator />
+        <q-card-section class="q-p-sm">
+          <div
+            class="row col-12 items-center q-col-gutter-x-xs q-col-gutter-y-xs"
+          >
+            <div class="col-xs-6 col-sm-6 col-md-6">
+              <datepicker
+                menu-class-name="modalfix"
+                :readonly="!edit"
+                v-model="issueDate"
+                :locale="'th'"
+                autoApply
+                :enableTimePicker="false"
+                @update:modelValue="clickEditRow"
+                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="date2Thai(issueDate)"
+                    :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 class="col-6">
+              <q-input
+                :class="getClass(edit)"
+                :outlined="edit"
+                dense
+                autogrow
+                lazy-rules
+                :readonly="!edit"
+                :borderless="!edit"
+                v-model="issuer"
+                :rules="[(val) => !!val || `${'กรุณากรอกผู้มีอำนาจลงนาม'}`]"
+                hide-bottom-space
+                :label="`${'ผู้มีอำนาจลงนาม'}`"
+                @update:modelValue="clickEditRow"
+              />
+            </div>
+            <div class="col-12">
+              <q-input
+                :class="getClass(edit)"
+                :outlined="edit"
+                dense
+                autogrow
+                lazy-rules
+                :readonly="!edit"
+                :borderless="!edit"
+                v-model="detail"
+                :rules="[(val) => !!val || `${'กรุณากรอกรายละเอียด'}`]"
+                hide-bottom-space
+                :label="`${'รายละเอียด'}`"
+                @update:modelValue="clickEditRow"
+              />
+            </div>
+            <div class="col-xs-6 col-sm-6 col-md-6">
+              <q-input
+                :class="getClass(edit)"
+                :outlined="edit"
+                dense
+                lazy-rules
+                :readonly="!edit"
+                :borderless="!edit"
+                v-model="refCommandNo"
+                hide-bottom-space
+                :label="`${'เลขที่คำสั่ง'}`"
+                @update:modelValue="clickEditRow"
+              >
+                <template v-slot:append>
+                  <q-icon
+                    name="mdi-file"
+                    class="cursor-pointer"
+                    @click="resetFilter"
+                  />
+                </template>
+              </q-input>
+            </div>
+            <div class="col-xs-6 col-sm-6 col-md-6">
+              <datepicker
+                menu-class-name="modalfix"
+                :readonly="!edit"
+                v-model="refCommandDate"
+                :locale="'th'"
+                autoApply
+                :enableTimePicker="false"
+                @update:modelValue="clickEditRow"
+                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="
+                      refCommandDate == null ? null : date2Thai(refCommandDate)
+                    "
+                    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>
+        </q-card-section>
+        <q-separator />
+        <DialogFooter
+          :cancel="clickCancel"
+          :edit="clickEdit"
+          :save="clickSave"
+          :validate="validateData"
+          :clickNext="clickNext"
+          :clickPrevious="clickPrevious"
+          :clickDelete="clickDelete"
+          v-model:editvisible="edit"
+          v-model:next="next"
+          v-model:previous="previous"
+          v-model:modalEdit="modalEdit"
+        />
+      </q-form>
+    </q-card>
+  </q-dialog>
+  <HistoryTable
+    :rows="rowsHistory"
+    :columns="columnsHistory"
+    :filter="filterHistory"
+    :visible-columns="visibleColumnsHistory"
+    v-model:modal="modalHistory"
+    v-model:inputfilter="filterHistory"
+    v-model:inputvisible="visibleColumnsHistory"
+    v-model:tittle="tittleHistory"
+  >
+    <template #columns="props">
+      <q-tr :props="props">
+        <q-td v-for="col in props.cols" :key="col.name" :props="props">
+          <div
+            v-if="
+              col.name == 'issueDate' ||
+              col.name == 'createdAt' ||
+              col.name == 'refCommandDate'
+            "
+            class="table_ellipsis"
+          >
+            {{ col.value == null ? null : date2Thai(col.value) }}
+          </div>
+          <div v-else class="table_ellipsis">
+            {{ col.value }}
+          </div>
+        </q-td>
+      </q-tr>
+    </template>
+  </HistoryTable>
+</template>
+<script setup lang="ts">
+import { onMounted, ref, watch } from "vue";
+import { useRoute } from "vue-router";
+import { useCounterMixin } from "@/stores/mixin";
+import { useComponentProfileDataStore } from "@/components/information/store/store";
+import { useDataStore } from "@/stores/data";
+import ProfileTable from "@/components/information/Table.vue";
+import DialogHeader from "@/components/information/DialogHeader.vue";
+import DialogFooter from "@/components/information/DialogFooter.vue";
+import { useQuasar } from "quasar";
+import type {
+  RequestItemsObject,
+  Columns,
+  DataProps,
+} from "@/components/information/interface/request/Coin";
+import type { ResponseObject } from "@/components/information/interface/response/Coin";
+import HistoryTable from "@/components/TableHistory.vue";
+import http from "@/plugins/http";
+import config from "@/app.config";
+import type { QTableProps } from "quasar";
+
+const props = defineProps({
+  statusEdit: {
+    type: Boolean,
+    required: true,
+  },
+  profileType: {
+    type: String,
+    required: true,
+  },
+});
+
+const $q = useQuasar();
+const store = useComponentProfileDataStore();
+const { profileData, changeProfileColumns } = store;
+const dataStore = useDataStore();
+const { loaderPage } = dataStore;
+const mixin = useCounterMixin();
+const { date2Thai, success, dateToISO, messageError } = mixin;
+const route = useRoute();
+const id = ref<string>("");
+const issuer = ref<string>();
+const detail = ref<string>();
+const issueDate = ref<Date>(new Date());
+const refCommandNo = ref<string>();
+const refCommandDate = ref<Date | null>(new Date());
+const myForm = ref<any>(); //form data input
+const edit = ref<boolean>(false); //เช็คการกดปุ่มแก้ไขใน dialog
+const modal = ref<boolean>(false); //modal add detail
+const modalEdit = ref<boolean>(false); //modal ที่แสดงใช้สำหรับแก้ไขหรือไม่
+const rawItem = ref<RequestItemsObject>(); //ข้อมูลเดิมที่เลือกใน row นั้น
+const rowIndex = ref<number>(0); //indexข้อมูลเดิมที่เลือกใน row นั้น
+const previous = ref<boolean>(); //แสดงปุ่มดูข้อมูลก่อนหน้า
+const next = ref<boolean>(); //แสดงปุ่มดูข้อมูลต่อไป
+const editRow = ref<boolean>(false); //เช็คมีการแก้ไขข้อมูล
+const rowsHistory = ref<RequestItemsObject[]>([]); //select data history
+const tittleHistory = ref<string>("ประวัติแก้ไขประกาศเกียรติคุณ"); //
+const filterHistory = ref<string>(""); //search data table history
+const modalHistory = ref<boolean>(false); //modal ประวัติการแก้ไขข้อมูล
+const checkValidate = ref<boolean>(false); //validate data ผ่านหรือไม่
+const profileId = ref<string>(
+  route.params.id ? route.params.id.toString() : ""
+);
+const rows = ref<RequestItemsObject[]>([]);
+const filter = ref<string>(""); //search data table
+const visibleColumns = ref<String[]>([]);
+profileData.coined.columns.length == 0
+  ? (visibleColumns.value = [
+      "issuer",
+      "detail",
+      "issueDate",
+      "refCommandNo",
+      "refCommandDate",
+    ])
+  : (visibleColumns.value = profileData.coined.columns);
+const columns = ref<QTableProps["columns"]>([
+  {
+    name: "issueDate",
+    align: "left",
+    label: "วันที่ได้รับ",
+    sortable: true,
+    field: "issueDate",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "issuer",
+    align: "left",
+    label: "ผู้มีอำนาจลงนาม",
+    sortable: true,
+    field: "issuer",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "detail",
+    align: "left",
+    label: "รายละเอียด",
+    sortable: true,
+    field: "detail",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "refCommandNo",
+    align: "left",
+    label: "เลขที่คำสั่ง",
+    sortable: true,
+    field: "refCommandNo",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "refCommandDate",
+    align: "left",
+    label: "เอกสารอ้างอิง (ลงวันที่)",
+    sortable: true,
+    field: "refCommandDate",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+]);
+const columnsHistory = ref<QTableProps["columns"]>([
+  {
+    name: "issueDate",
+    align: "left",
+    label: "วันที่ได้รับ",
+    sortable: true,
+    field: "issueDate",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "issuer",
+    align: "left",
+    label: "ผู้มีอำนาจลงนาม",
+    sortable: true,
+    field: "issuer",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "detail",
+    align: "left",
+    label: "รายละเอียด",
+    sortable: true,
+    field: "detail",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "refCommandNo",
+    align: "left",
+    label: "เลขที่คำสั่ง",
+    sortable: true,
+    field: "refCommandNo",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "refCommandDate",
+    align: "left",
+    label: "เอกสารอ้างอิง (ลงวันที่)",
+    sortable: true,
+    field: "refCommandDate",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "createdFullName",
+    align: "left",
+    label: "ผู้ดำเนินการ",
+    sortable: true,
+    field: "createdFullName",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "createdAt",
+    align: "left",
+    label: "วันที่แก้ไข",
+    sortable: true,
+    field: "createdAt",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+]);
+const visibleColumnsHistory = ref<String[]>([
+  "issuer",
+  "detail",
+  "issueDate",
+  "refCommandNo",
+  "refCommandDate",
+  "createdFullName",
+  "createdAt",
+]);
+
+watch(visibleColumns, async (count: String[], prevCount: String[]) => {
+  await changeProfileColumns("coined", count);
+});
+
+onMounted(async () => {
+  await fetchData();
+});
+
+const fetchData = async () => {
+  if (profileId.value) {
+    loaderPage(true);
+    await http
+      .get(config.API.profileHonorId(profileId.value))
+      .then((res) => {
+        let data = res.data.result;
+        rows.value = [];
+        data.map((e: ResponseObject) => {
+          rows.value.push({
+            id: e.id,
+            issuer: e.issuer,
+            detail: e.detail,
+            issueDate: new Date(e.issueDate),
+            refCommandNo: e.refCommandNo,
+            refCommandDate:
+              e.refCommandDate == null ? null : new Date(e.refCommandDate),
+            createdAt: new Date(e.createdAt),
+            createdFullName: e.createdFullName,
+          });
+        });
+      })
+      .catch((e) => {
+        messageError($q, e);
+      })
+      .finally(() => {
+        loaderPage(false);
+      });
+  }
+};
+
+/**
+ * กดดูข้อมูลก่อนหน้า
+ */
+const clickPrevious = async () => {
+  edit.value = false;
+  rowIndex.value -= 1;
+  await getData();
+  await checkRowPage();
+};
+
+/**
+ * กดดูข้อมูลต่อไป
+ */
+const clickNext = async () => {
+  edit.value = false;
+  rowIndex.value += 1;
+  await getData();
+  await checkRowPage();
+};
+
+/**
+ * กดดูข้อมูลต่อไป
+ */
+const getData = () => {
+  const row = rows.value[rowIndex.value];
+  issuer.value = row.issuer;
+  detail.value = row.detail;
+  issueDate.value = row.issueDate;
+  refCommandNo.value = row.refCommandNo;
+  refCommandDate.value = row.refCommandDate;
+  id.value = row.id;
+};
+
+/**
+ * เช็คปุ่มดูข้อมูล ย้อน กับ ต่อไป ว่าต้องแสดงไหม
+ */
+const checkRowPage = () => {
+  editRow.value = false;
+  next.value = true;
+  previous.value = true;
+  if (rowIndex.value + 1 >= rows.value.length) {
+    next.value = false;
+  }
+  if (rowIndex.value - 1 < 0) {
+    previous.value = false;
+  }
+};
+
+/**
+ * กดปุ่มแก้ไขใน dialog
+ */
+const clickEdit = () => {
+  editRow.value = false;
+  next.value = false;
+  previous.value = false;
+};
+
+/**
+ * กดปุ่มเพิ่มด้านบน table
+ */
+const clickAdd = async () => {
+  editRow.value = false;
+  await addData();
+};
+
+/**
+ * กดบันทึกใน dialog
+ */
+const clickSave = async () => {
+  myForm.value.validate().then(async (result: boolean) => {
+    if (result) {
+      if (modalEdit.value) {
+        await editData();
+      } else {
+        await saveData();
+      }
+    }
+  });
+};
+
+/**
+ * บันทึกเพิ่มข้อมูล
+ */
+const saveData = async () => {
+  if (profileId.value) {
+    loaderPage(true);
+    await http
+      .post(config.API.profileHonorId(profileId.value), {
+        id: id.value,
+        issuer: issuer.value,
+        detail: detail.value,
+        issueDate: dateToISO(issueDate.value),
+        refCommandNo: refCommandNo.value,
+        refCommandDate:
+          refCommandDate.value == null ? null : dateToISO(refCommandDate.value),
+      })
+      .then((res) => {
+        success($q, "บันทึกข้อมูลสำเร็จ");
+        modal.value = false;
+      })
+      .catch((e) => {
+        messageError($q, e);
+      })
+      .finally(async () => {
+        await fetchData();
+      });
+  }
+};
+
+/**
+ * บันทึกแก้ไขข้อมูล
+ */
+const editData = async () => {
+  loaderPage(true);
+  await http
+    .put(config.API.profileHonorId(id.value), {
+      id: id.value,
+      issuer: issuer.value,
+      detail: detail.value,
+      issueDate: dateToISO(issueDate.value),
+      refCommandNo: refCommandNo.value,
+      refCommandDate:
+        refCommandDate.value == null ? null : dateToISO(refCommandDate.value),
+    })
+    .then((res) => {
+      success($q, "บันทึกข้อมูลสำเร็จ");
+      modal.value = false;
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(async () => {
+      await fetchData();
+    });
+};
+
+/**
+ * ลบลบข้อมูล
+ */
+const clickDelete = async () => {
+  $q.dialog({
+    title: `ลบข้อมูล`,
+    message: `ต้องการทำการลบข้อมูลนี้ใช่หรือไม่?`,
+    cancel: "ยกเลิก",
+    ok: "ยืนยัน",
+    persistent: true,
+  })
+    .onOk(async () => {
+      loaderPage(true);
+      await http
+        .delete(config.API.profileHonorId(id.value))
+        .then((res) => {
+          success($q, "ลบข้อมูลสำเร็จ");
+          modal.value = false;
+        })
+        .catch((e) => {
+          messageError($q, e);
+        })
+        .finally(async () => {
+          await fetchData();
+        });
+    })
+    .onCancel(async () => {
+      await fetchData();
+    });
+};
+
+/**
+ * กดปิด dialog
+ */
+const clickClose = async () => {
+  if (editRow.value == true) {
+    $q.dialog({
+      title: `ข้อมูลมีการแก้ไข`,
+      message: `ยืนยันที่จะปิดโดยไม่บันทึกใช่หรือไม่?`,
+      cancel: "ยกเลิก",
+      ok: "ยืนยัน",
+      persistent: true,
+    }).onOk(async () => {
+      modal.value = false;
+      next.value = false;
+      previous.value = false;
+    });
+  } else {
+    modal.value = false;
+    next.value = false;
+    previous.value = false;
+  }
+};
+
+/**
+ * กดเลือกข้อมูลที่จะแก้ไข
+ * @param props ค่า props ใน row ที่เลือก
+ */
+const selectData = async (props: DataProps) => {
+  modalEdit.value = true;
+  modal.value = true;
+  edit.value = false;
+  rawItem.value = props.row;
+  rowIndex.value = props.rowIndex;
+  issuer.value = props.row.issuer;
+  detail.value = props.row.detail;
+  issueDate.value = props.row.issueDate;
+  refCommandNo.value = props.row.refCommandNo;
+  refCommandDate.value = props.row.refCommandDate;
+  id.value = props.row.id;
+  await checkRowPage();
+};
+
+/**
+ * กดปุ่มเพิ่มบน table
+ */
+const addData = () => {
+  modalEdit.value = false;
+  modal.value = true;
+  edit.value = true;
+  issuer.value = "";
+  detail.value = "";
+  issueDate.value = new Date();
+  refCommandNo.value = "";
+  refCommandDate.value = null;
+};
+
+/**
+ * ฟังก์ชันปุ่มยกเลิกการแก้ไขข้อมูล
+ */
+const clickCancel = async () => {
+  if (editRow.value == true) {
+    $q.dialog({
+      title: `ข้อมูลมีการแก้ไข`,
+      message: `ยืนยันยกเลิกการแก้ไขใช่หรือไม่?`,
+      cancel: "ยกเลิก",
+      ok: "ยืนยัน",
+      persistent: true,
+    }).onOk(async () => {
+      edit.value = false;
+      await checkRowPage();
+      await getData();
+    });
+  } else {
+    edit.value = false;
+    await checkRowPage();
+  }
+};
+
+/**
+ * เช็คว่ามีการแก้ไขข้อมูล
+ */
+const clickEditRow = () => {
+  editRow.value = true;
+};
+
+/**
+ * ฟังชั้นดูข้อมูลประวัติแก้ไขข้อมูลที่เลือก
+ * @param row ข้อมูล row ที่ดูประวัติการแก้ไข
+ */
+const clickHistory = async (row: RequestItemsObject) => {
+  tittleHistory.value =
+    props.profileType == "employee"
+      ? "ประวัติแก้ไขประกาศลูกจ้างดีเด่น"
+      : "ประวัติแก้ไขประกาศเกียรติคุณ";
+  modalHistory.value = true;
+  loaderPage(true);
+  await http
+    .get(config.API.profileHonorHisId(row.id))
+    .then((res) => {
+      let data = res.data.result;
+      rowsHistory.value = [];
+      data.map((e: ResponseObject) => {
+        rowsHistory.value.push({
+          id: e.id,
+          issuer: e.issuer,
+          detail: e.detail,
+          issueDate: new Date(e.issueDate),
+          refCommandNo: e.refCommandNo,
+          refCommandDate:
+            e.refCommandDate == null ? null : new Date(e.refCommandDate),
+          createdAt: new Date(e.createdAt),
+          createdFullName: e.createdFullName,
+        });
+      });
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      loaderPage(false);
+    });
+};
+
+/**
+ * validate input ใน dialog
+ */
+const validateData = async () => {
+  checkValidate.value = true;
+  await myForm.value.validate().then((result: boolean) => {
+    if (result == false) {
+      checkValidate.value = false;
+    }
+  });
+};
+
+/**
+ * class จัดรูปแบบแสดงระหว่างข้อมูลที่แก้ไขหรือแสดงเฉยๆ
+ * @param val ข้อมูล input สำหรับแก้ไขหรือไม่
+ */
+const getClass = (val: boolean) => {
+  return {
+    "full-width inputgreen cursor-pointer": val,
+    "full-width cursor-pointer": !val,
+  };
+};
+const resetFilter = () => {};
+</script>
+<style lang="scss">
+.modalfix {
+  position: fixed !important;
+}
+</style>
diff --git a/src/components/information/Discipline.vue b/src/components/information/Discipline.vue
new file mode 100644
index 000000000..01bbddae1
--- /dev/null
+++ b/src/components/information/Discipline.vue
@@ -0,0 +1,943 @@
+<!-- card วินัย -->
+<template>
+  <q-card flat bordered class="col-12 q-px-lg q-py-md">
+    <q-form ref="myForm">
+      <ProfileTable
+        :rows="rows"
+        :columns="columns"
+        :filter="filter"
+        :visible-columns="visibleColumns"
+        v-model:inputfilter="filter"
+        v-model:inputvisible="visibleColumns"
+        :add="clickAdd"
+        name="วินัย"
+        icon="mdi-scale-balance"
+        :statusEdit="statusEdit"
+      >
+        <template #columns="props">
+          <q-tr :props="props">
+            <q-td
+              v-for="col in props.cols"
+              :key="col.name"
+              :props="props"
+              @click="selectData(props)"
+              class="cursor-pointer"
+            >
+              <div
+                v-if="col.name == 'refCommandDate' || col.name == 'date'"
+                class="table_ellipsis"
+              >
+                {{ col.value == null ? null : date2Thai(col.value) }}
+              </div>
+              <div v-else class="table_ellipsis">
+                {{ col.value }}
+              </div>
+            </q-td>
+            <q-td auto-width>
+              <q-btn
+                color="info"
+                flat
+                dense
+                round
+                size="14px"
+                icon="mdi-history"
+                @click="clickHistory(props.row)"
+              />
+            </q-td>
+          </q-tr>
+        </template>
+      </ProfileTable>
+    </q-form>
+  </q-card>
+  <!-- popup Edit window-->
+  <q-dialog v-model="modal" persistent>
+    <q-card style="width: 600px">
+      <q-form ref="myForm">
+        <DialogHeader tittle="วินัย" :close="clickClose" />
+        <q-separator />
+        <q-card-section class="q-p-sm">
+          <div
+            class="row col-12 items-center q-col-gutter-x-xs q-col-gutter-y-xs"
+          >
+            <div class="col-xs-6 col-sm-6 col-md-6">
+              <datepicker
+                menu-class-name="modalfix"
+                :readonly="!edit"
+                v-model="date"
+                :locale="'th'"
+                autoApply
+                :enableTimePicker="false"
+                @update:modelValue="clickEditRow"
+                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="date2Thai(date)"
+                    :rules="[(val:string) => !!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 class="col-xs-6 col-sm-6 col-md-6">
+              <q-input
+                :class="getClass(edit)"
+                :outlined="edit"
+                dense
+                lazy-rules
+                :readonly="!edit"
+                :borderless="!edit"
+                v-model="detail"
+                :rules="[(val:string) => !!val || `${'กรุณากรอกรายละเอียด'}`]"
+                hide-bottom-space
+                :label="`${'รายละเอียด'}`"
+                @update:modelValue="clickEditRow"
+              />
+            </div>
+            <div class="col-xs-6 col-sm-6 col-md-6">
+              <selector
+                :class="getClass(edit)"
+                :outlined="edit"
+                dense
+                lazy-rules
+                :readonly="!edit"
+                :borderless="!edit"
+                v-model="level"
+                :rules="[(val:string) => !!val || `${'กรุณาเลือกระดับการลงโทษทางวินัย'}`]"
+                hide-bottom-space
+                :label="`${'ระดับการลงโทษทางวินัย'}`"
+                @update:modelValue="clickEditRow"
+                emit-value
+                map-options
+                option-label="name"
+                :options="Ops.levelOptions"
+                option-value="id"
+                use-input
+                input-debounce="0"
+                @filter="(inputValue:string,
+                      doneFn:Function) => filterSelector(inputValue, doneFn,'levelOptions'
+                      ) "
+              />
+            </div>
+            <div class="col-xs-6 col-sm-6 col-md-6">
+              <q-input
+                :class="getClass(edit)"
+                :outlined="edit"
+                dense
+                lazy-rules
+                :readonly="!edit"
+                :borderless="!edit"
+                v-model="unStigma"
+                hide-bottom-space
+                :label="`${'ล้างมลทิน'}`"
+                @update:modelValue="clickEditRow"
+              />
+            </div>
+            <div class="col-xs-6 col-sm-6 col-md-6">
+              <q-input
+                :class="getClass(edit)"
+                :outlined="edit"
+                dense
+                lazy-rules
+                :readonly="!edit"
+                :borderless="!edit"
+                v-model="refCommandNo"
+                hide-bottom-space
+                :label="`${'เลขที่คำสั่ง'}`"
+                :rules="[(val:string) => !!val || `${'กรุณากรอกเลขที่คำสั่ง'}`]"
+                @update:modelValue="clickEditRow"
+              >
+                <template v-slot:append>
+                  <q-icon
+                    name="mdi-file"
+                    class="cursor-pointer"
+                    @click="resetFilter"
+                  />
+                </template>
+              </q-input>
+            </div>
+            <div class="col-xs-6 col-sm-6 col-md-6">
+              <datepicker
+                menu-class-name="modalfix"
+                :readonly="!edit"
+                v-model="refCommandDate"
+                :locale="'th'"
+                autoApply
+                :enableTimePicker="false"
+                @update:modelValue="clickEditRow"
+                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="
+                      refCommandDate == null ? null : date2Thai(refCommandDate)
+                    "
+                    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>
+        </q-card-section>
+        <q-separator />
+        <DialogFooter
+          :cancel="clickCancel"
+          :edit="clickEdit"
+          :save="clickSave"
+          :validate="validateData"
+          :clickNext="clickNext"
+          :clickPrevious="clickPrevious"
+          :clickDelete="clickDelete"
+          v-model:editvisible="edit"
+          v-model:next="next"
+          v-model:previous="previous"
+          v-model:modalEdit="modalEdit"
+        />
+      </q-form>
+    </q-card>
+  </q-dialog>
+  <HistoryTable
+    :rows="rowsHistory"
+    :columns="columnsHistory"
+    :filter="filterHistory"
+    :visible-columns="visibleColumnsHistory"
+    v-model:modal="modalHistory"
+    v-model:inputfilter="filterHistory"
+    v-model:inputvisible="visibleColumnsHistory"
+    v-model:tittle="tittleHistory"
+  >
+    <template #columns="props">
+      <q-tr :props="props">
+        <q-td v-for="col in props.cols" :key="col.name" :props="props">
+          <div
+            v-if="
+              col.name == 'date' ||
+              col.name == 'refCommandDate' ||
+              col.name == 'createdAt'
+            "
+            class="table_ellipsis"
+          >
+            {{ col.value == null ? null : date2Thai(col.value) }}
+          </div>
+          <div v-else class="table_ellipsis">
+            {{ col.value }}
+          </div>
+        </q-td>
+      </q-tr>
+    </template>
+  </HistoryTable>
+</template>
+<script setup lang="ts">
+import { onMounted, ref, watch } from "vue";
+import { useRoute } from "vue-router";
+import { useCounterMixin } from "@/stores/mixin";
+import { useComponentProfileDataStore } from "@/components/information/store/store";
+import { useDataStore } from "@/stores/data";
+import ProfileTable from "@/components/information/Table.vue";
+import DialogHeader from "@/components/information/DialogHeader.vue";
+import DialogFooter from "@/components/information/DialogFooter.vue";
+import { useQuasar } from "quasar";
+import type {
+  RequestItemsObject,
+  DataProps,
+} from "@/components/information/interface/request/Discipline";
+import type { ResponseObject } from "@/components/information/interface/response/Discipline";
+import type {
+  DisciplineOps,
+  DataOption,
+} from "@/components/information/interface/index/Main";
+import HistoryTable from "@/components/TableHistory.vue";
+import http from "@/plugins/http";
+import config from "@/app.config";
+import type { QTableProps } from "quasar";
+
+const props = defineProps({
+  statusEdit: {
+    type: Boolean,
+    required: true,
+  },
+});
+
+const $q = useQuasar();
+const store = useComponentProfileDataStore();
+const { profileData, changeProfileColumns } = store;
+const dataStore = useDataStore();
+const { loaderPage } = dataStore;
+const mixin = useCounterMixin();
+const { date2Thai, success, dateToISO, messageError } = mixin;
+const route = useRoute();
+const id = ref<string>("");
+const level = ref<string>();
+const Ops = ref<DisciplineOps>({
+  levelOptions: [
+    {
+      name: "ภาคทัณฑ์",
+      id: "ภาคทัณฑ์",
+    },
+    {
+      name: "ตัดเงินเดือน",
+      id: "ตัดเงินเดือน",
+    },
+    {
+      name: "ลดขั้นเงินเดือน",
+      id: "ลดขั้นเงินเดือน",
+    },
+    {
+      name: "ปลดออก",
+      id: "ปลดออก",
+    },
+    {
+      name: "ไล่ออก",
+      id: "ไล่ออก",
+    },
+  ],
+});
+const OpsFilter = ref<DisciplineOps>({
+  levelOptions: [
+    {
+      name: "ภาคทัณฑ์",
+      id: "ภาคทัณฑ์",
+    },
+    {
+      name: "ตัดเงินเดือน",
+      id: "ตัดเงินเดือน",
+    },
+    {
+      name: "ลดขั้นเงินเดือน",
+      id: "ลดขั้นเงินเดือน",
+    },
+    {
+      name: "ปลดออก",
+      id: "ปลดออก",
+    },
+    {
+      name: "ไล่ออก",
+      id: "ไล่ออก",
+    },
+  ],
+});
+const detail = ref<string>();
+const unStigma = ref<string>();
+const refCommandNo = ref<string>();
+const refCommandDate = ref<Date | null>(new Date());
+const date = ref<Date>(new Date());
+const myForm = ref<any>(); //form data input
+const edit = ref<boolean>(false); //เช็คการกดปุ่มแก้ไขใน dialog
+const modal = ref<boolean>(false); //modal add detail
+const modalEdit = ref<boolean>(false); //modal ที่แสดงใช้สำหรับแก้ไขหรือไม่
+const rawItem = ref<RequestItemsObject>(); //ข้อมูลเดิมที่เลือกใน row นั้น
+const rowIndex = ref<number>(0); //indexข้อมูลเดิมที่เลือกใน row นั้น
+const previous = ref<boolean>(); //แสดงปุ่มดูข้อมูลก่อนหน้า
+const next = ref<boolean>(); //แสดงปุ่มดูข้อมูลต่อไป
+const editRow = ref<boolean>(false); //เช็คมีการแก้ไขข้อมูล
+const rowsHistory = ref<RequestItemsObject[]>([]); //select data history
+const tittleHistory = ref<string>("ประวัติแก้ไขวินัย"); //
+const filterHistory = ref<string>(""); //search data table history
+const modalHistory = ref<boolean>(false); //modal ประวัติการแก้ไขข้อมูล
+const checkValidate = ref<boolean>(false); //validate data ผ่านหรือไม่
+const profileId = ref<string>(
+  route.params.id ? route.params.id.toString() : ""
+);
+const rows = ref<RequestItemsObject[]>([]);
+const filter = ref<string>(""); //search data table
+const visibleColumns = ref<String[]>([]);
+profileData.discipline.columns.length == 0
+  ? (visibleColumns.value = [
+      "level",
+      "detail",
+      "unStigma",
+      "refCommandNo",
+      "refCommandDate",
+      "date",
+    ])
+  : (visibleColumns.value = profileData.discipline.columns);
+const columns = ref<QTableProps["columns"]>([
+  {
+    name: "date",
+    align: "left",
+    label: "วัน เดือน ปี",
+    sortable: true,
+    field: "date",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "detail",
+    align: "left",
+    label: "รายละเอียด",
+    sortable: true,
+    field: "detail",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "level",
+    align: "left",
+    label: "ระดับการลงโทษทางวินัย",
+    sortable: true,
+    field: "level",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "unStigma",
+    align: "left",
+    label: "ล้างมลทิน",
+    sortable: true,
+    field: "unStigma",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "refCommandNo",
+    align: "left",
+    label: "เลขที่คำสั่ง",
+    sortable: true,
+    field: "refCommandNo",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "refCommandDate",
+    align: "left",
+    label: "เอกสารอ้างอิง (ลงวันที่)",
+    sortable: true,
+    field: "refCommandDate",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+]);
+const columnsHistory = ref<QTableProps["columns"]>([
+  {
+    name: "date",
+    align: "left",
+    label: "วัน เดือน ปี",
+    sortable: true,
+    field: "date",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "detail",
+    align: "left",
+    label: "รายละเอียด",
+    sortable: true,
+    field: "detail",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "level",
+    align: "left",
+    label: "ระดับการลงโทษทางวินัย",
+    sortable: true,
+    field: "level",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "unStigma",
+    align: "left",
+    label: "ล้างมลทิน",
+    sortable: true,
+    field: "unStigma",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "refCommandNo",
+    align: "left",
+    label: "เลขที่คำสั่ง",
+    sortable: true,
+    field: "refCommandNo",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "refCommandDate",
+    align: "left",
+    label: "เอกสารอ้างอิง (ลงวันที่)",
+    sortable: true,
+    field: "refCommandDate",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "createdFullName",
+    align: "left",
+    label: "ผู้ดำเนินการ",
+    sortable: true,
+    field: "createdFullName",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "createdAt",
+    align: "left",
+    label: "วันที่แก้ไข",
+    sortable: true,
+    field: "createdAt",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+]);
+const visibleColumnsHistory = ref<String[]>([
+  "level",
+  "detail",
+  "unStigma",
+  "refCommandNo",
+  "refCommandDate",
+  "date",
+  "createdFullName",
+  "createdAt",
+]);
+
+watch(visibleColumns, async (count: String[], prevCount: String[]) => {
+  await changeProfileColumns("discipline", count);
+});
+
+onMounted(async () => {
+  await fetchData();
+});
+
+const filterSelector = (val: string, update: Function, refData: string) => {
+  switch (refData) {
+    case "levelOptions":
+      update(() => {
+        Ops.value.levelOptions = OpsFilter.value.levelOptions.filter(
+          (v: DataOption) => v.name.indexOf(val) > -1
+        );
+      });
+      break;
+    default:
+      break;
+  }
+};
+
+const fetchData = async () => {
+  if (profileId.value) {
+    loaderPage(true);
+    await http
+      .get(config.API.profileDisId(profileId.value))
+      .then((res) => {
+        let data = res.data.result;
+        rows.value = [];
+        data.map((e: ResponseObject) => {
+          rows.value.push({
+            id: e.id,
+            level: e.level,
+            detail: e.detail,
+            unStigma: e.unStigma,
+            refCommandNo: e.refCommandNo,
+            refCommandDate:
+              e.refCommandDate == null ? null : new Date(e.refCommandDate),
+            date: new Date(e.date),
+            createdFullName: e.createdFullName,
+            createdAt: new Date(e.createdAt),
+          });
+        });
+      })
+      .catch((e) => {
+        messageError($q, e);
+      })
+      .finally(() => {
+        loaderPage(false);
+      });
+  }
+};
+
+/**
+ * กดดูข้อมูลก่อนหน้า
+ */
+const clickPrevious = async () => {
+  edit.value = false;
+  rowIndex.value -= 1;
+  await getData();
+  await checkRowPage();
+};
+
+/**
+ * กดดูข้อมูลต่อไป
+ */
+const clickNext = async () => {
+  edit.value = false;
+  rowIndex.value += 1;
+  await getData();
+  await checkRowPage();
+};
+
+/**
+ * กดดูข้อมูลต่อไป
+ */
+const getData = () => {
+  const row = rows.value[rowIndex.value];
+  level.value = row.level;
+  detail.value = row.detail;
+  unStigma.value = row.unStigma;
+  refCommandNo.value = row.refCommandNo;
+  refCommandDate.value = row.refCommandDate;
+  date.value = row.date;
+  id.value = row.id;
+};
+
+/**
+ * เช็คปุ่มดูข้อมูล ย้อน กับ ต่อไป ว่าต้องแสดงไหม
+ */
+const checkRowPage = () => {
+  editRow.value = false;
+  next.value = true;
+  previous.value = true;
+  if (rowIndex.value + 1 >= rows.value.length) {
+    next.value = false;
+  }
+  if (rowIndex.value - 1 < 0) {
+    previous.value = false;
+  }
+};
+
+/**
+ * กดปุ่มแก้ไขใน dialog
+ */
+const clickEdit = () => {
+  editRow.value = false;
+  next.value = false;
+  previous.value = false;
+};
+
+/**
+ * กดปุ่มเพิ่มด้านบน table
+ */
+const clickAdd = async () => {
+  editRow.value = false;
+  await addData();
+};
+
+/**
+ * กดบันทึกใน dialog
+ */
+const clickSave = async () => {
+  myForm.value.validate().then(async (result: boolean) => {
+    if (result) {
+      if (modalEdit.value) {
+        await editData();
+      } else {
+        await saveData();
+      }
+    }
+  });
+};
+
+/**
+ * บันทึกเพิ่มข้อมูล
+ */
+const saveData = async () => {
+  if (profileId.value) {
+    loaderPage(true);
+    await http
+      .post(config.API.profileDisId(profileId.value), {
+        id: id.value,
+        level: level.value,
+        detail: detail.value,
+        unStigma: unStigma.value,
+        refCommandNo: refCommandNo.value,
+        refCommandDate:
+          refCommandDate.value == null ? null : dateToISO(refCommandDate.value),
+        date: dateToISO(date.value),
+      })
+      .then((res) => {
+        success($q, "บันทึกข้อมูลสำเร็จ");
+        modal.value = false;
+      })
+      .catch((e) => {
+        messageError($q, e);
+      })
+      .finally(async () => {
+        await fetchData();
+      });
+  }
+};
+
+/**
+ * บันทึกแก้ไขข้อมูล
+ */
+const editData = async () => {
+  loaderPage(true);
+  await http
+    .put(config.API.profileDisId(id.value), {
+      id: id.value,
+      level: level.value,
+      detail: detail.value,
+      unStigma: unStigma.value,
+      refCommandNo: refCommandNo.value,
+      refCommandDate:
+        refCommandDate.value == null ? null : dateToISO(refCommandDate.value),
+      date: dateToISO(date.value),
+    })
+    .then((res) => {
+      success($q, "บันทึกข้อมูลสำเร็จ");
+      modal.value = false;
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(async () => {
+      await fetchData();
+    });
+};
+
+/**
+ * ลบลบข้อมูล
+ */
+const clickDelete = async () => {
+  $q.dialog({
+    title: `ลบข้อมูล`,
+    message: `ต้องการทำการลบข้อมูลนี้ใช่หรือไม่?`,
+    cancel: "ยกเลิก",
+    ok: "ยืนยัน",
+    persistent: true,
+  })
+    .onOk(async () => {
+      loaderPage(true);
+      await http
+        .delete(config.API.profileDisId(id.value))
+        .then((res) => {
+          success($q, "ลบข้อมูลสำเร็จ");
+          modal.value = false;
+        })
+        .catch((e) => {
+          messageError($q, e);
+        })
+        .finally(async () => {
+          await fetchData();
+        });
+    })
+    .onCancel(async () => {
+      await fetchData();
+    });
+};
+
+/**
+ * กดปิด dialog
+ */
+const clickClose = async () => {
+  if (editRow.value == true) {
+    $q.dialog({
+      title: `ข้อมูลมีการแก้ไข`,
+      message: `ยืนยันที่จะปิดโดยไม่บันทึกใช่หรือไม่?`,
+      cancel: "ยกเลิก",
+      ok: "ยืนยัน",
+      persistent: true,
+    }).onOk(async () => {
+      modal.value = false;
+      next.value = false;
+      previous.value = false;
+    });
+  } else {
+    modal.value = false;
+    next.value = false;
+    previous.value = false;
+  }
+};
+
+/**
+ * กดเลือกข้อมูลที่จะแก้ไข
+ * @param props ค่า props ใน row ที่เลือก
+ */
+const selectData = async (props: DataProps) => {
+  modalEdit.value = true;
+  modal.value = true;
+  edit.value = false;
+  rawItem.value = props.row;
+  rowIndex.value = props.rowIndex;
+  level.value = props.row.level;
+  detail.value = props.row.detail;
+  unStigma.value = props.row.unStigma;
+  refCommandNo.value = props.row.refCommandNo;
+  refCommandDate.value = props.row.refCommandDate;
+  date.value = props.row.date;
+  id.value = props.row.id;
+  await checkRowPage();
+};
+
+/**
+ * กดปุ่มเพิ่มบน table
+ */
+const addData = () => {
+  modalEdit.value = false;
+  modal.value = true;
+  edit.value = true;
+  level.value = "";
+  detail.value = "";
+  unStigma.value = "";
+  refCommandNo.value = "";
+  refCommandDate.value = null;
+  date.value = new Date();
+};
+
+/**
+ * ฟังก์ชันปุ่มยกเลิกการแก้ไขข้อมูล
+ */
+const clickCancel = async () => {
+  if (editRow.value == true) {
+    $q.dialog({
+      title: `ข้อมูลมีการแก้ไข`,
+      message: `ยืนยันยกเลิกการแก้ไขใช่หรือไม่?`,
+      cancel: "ยกเลิก",
+      ok: "ยืนยัน",
+      persistent: true,
+    }).onOk(async () => {
+      edit.value = false;
+      await checkRowPage();
+      await getData();
+    });
+  } else {
+    edit.value = false;
+    await checkRowPage();
+  }
+};
+
+/**
+ * เช็คว่ามีการแก้ไขข้อมูล
+ */
+const clickEditRow = () => {
+  editRow.value = true;
+};
+
+/**
+ * ฟังชั้นดูข้อมูลประวัติแก้ไขข้อมูลที่เลือก
+ * @param row ข้อมูล row ที่ดูประวัติการแก้ไข
+ */
+const clickHistory = async (row: RequestItemsObject) => {
+  modalHistory.value = true;
+  loaderPage(true);
+  await http
+    .get(config.API.profileDisHisId(row.id))
+    .then((res) => {
+      let data = res.data.result;
+      rowsHistory.value = [];
+      data.map((e: ResponseObject) => {
+        rowsHistory.value.push({
+          id: e.id,
+          level: e.level,
+          detail: e.detail,
+          unStigma: e.unStigma,
+          refCommandNo: e.refCommandNo,
+          refCommandDate:
+            e.refCommandDate == null ? null : new Date(e.refCommandDate),
+          date: new Date(e.date),
+          createdFullName: e.createdFullName,
+          createdAt: new Date(e.createdAt),
+        });
+      });
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      loaderPage(false);
+    });
+};
+
+/**
+ * validate input ใน dialog
+ */
+const validateData = async () => {
+  checkValidate.value = true;
+  await myForm.value.validate().then((result: boolean) => {
+    if (result == false) {
+      checkValidate.value = false;
+    }
+  });
+};
+
+/**
+ * class จัดรูปแบบแสดงระหว่างข้อมูลที่แก้ไขหรือแสดงเฉยๆ
+ * @param val ข้อมูล input สำหรับแก้ไขหรือไม่
+ */
+const getClass = (val: boolean) => {
+  return {
+    "full-width inputgreen cursor-pointer": val,
+    "full-width cursor-pointer": !val,
+  };
+};
+const resetFilter = () => {};
+</script>
+<style lang="scss">
+.modalfix {
+  position: fixed !important;
+}
+</style>
diff --git a/src/components/information/Document.vue b/src/components/information/Document.vue
new file mode 100644
index 000000000..a73fe0fb3
--- /dev/null
+++ b/src/components/information/Document.vue
@@ -0,0 +1,272 @@
+<template>
+  <q-card flat bordered class="col-12 row q-px-lg q-py-md">
+    <HeaderTop
+      v-model:edit="edit"
+      header="เอกสารหลักฐาน"
+      icon="mdi-file-document"
+      :history="false"
+      :changeBtn="changeBtn"
+      :disable="statusEdit"
+      :save="uploadData"
+    />
+    <div class="row col-12 q-pt-sm">
+      <q-card bordered flat class="full-width">
+        <q-list separator>
+          <q-item v-for="file in files" :key="file.key" class="q-my-xs">
+            <q-item-section>
+              <q-item-label class="full-width ellipsis">
+                {{ file.fileName }}
+              </q-item-label>
+
+              <q-item-label caption> </q-item-label>
+            </q-item-section>
+            <q-item-section top side>
+              <div class="row col-12">
+                <q-btn
+                  class="gt-xs"
+                  size="12px"
+                  flat
+                  dense
+                  round
+                  color="blue"
+                  icon="mdi-download-outline"
+                  @click="downloadData(file.file)"
+                />
+                <q-btn
+                  class="gt-xs"
+                  size="12px"
+                  flat
+                  dense
+                  round
+                  color="red"
+                  icon="mdi-delete-outline"
+                  v-show="edit"
+                  @click="deleteData(file.id)"
+                />
+              </div>
+            </q-item-section>
+          </q-item>
+        </q-list>
+      </q-card>
+      <q-input
+        v-if="edit"
+        class="q-mt-sm col-12 q-pb-xs"
+        outlined
+        dense
+        lazy-rules
+        v-model="name"
+        hide-bottom-space
+        :rules="[(val) => !!val || `${'กรุณากรอกชื่อเอกสาร'}`]"
+        :label="`${'ชื่อเอกสาร'}`"
+      />
+      <q-uploader
+        v-if="edit"
+        color="gray"
+        type="file"
+        flat
+        @factory="uploadData"
+        ref="uploader"
+        class="full-width"
+        text-color="white"
+        :max-size="10000000"
+        accept=".jpg,.png,.pdf,.csv,.doc"
+        bordered
+        label="[ไฟล์ jpg,png,pdf,csv,doc ขนาดไม่เกิน 10MB]"
+        @added="fileAdd"
+      >
+        <template v-slot:header="scope">
+          <div class="row no-wrap items-center q-pa-sm q-gutter-xs">
+            <q-btn
+              v-if="scope.queuedFiles.length > 0"
+              icon="clear_all"
+              @click="scope.removeQueuedFiles"
+              round
+              dense
+              flat
+            >
+              <q-tooltip>ลบทั้งหมด</q-tooltip>
+            </q-btn>
+            <q-btn
+              v-if="scope.uploadedFiles.length > 0"
+              icon="done_all"
+              @click="scope.removeUploadedFiles"
+              round
+              dense
+              flat
+            >
+              <q-tooltip>ลบไฟล์ที่อัปโหลด</q-tooltip>
+            </q-btn>
+            <q-spinner v-if="scope.isUploading" class="q-uploader__spinner" />
+            <div class="col">
+              <div class="q-uploader__title">
+                {{ "[ไฟล์ jpg,png,pdf,csv,doc ขนาดไม่เกิน 10MB]" }}
+              </div>
+              <div class="q-uploader__subtitle">
+                {{ scope.uploadSizeLabel }} / {{ scope.uploadProgressLabel }}
+              </div>
+            </div>
+            <q-btn
+              v-if="scope.canAddFiles"
+              type="a"
+              icon="add_box"
+              @click="scope.pickFiles"
+              round
+              dense
+              flat
+            >
+              <q-uploader-add-trigger />
+              <q-tooltip>เลือกไฟล์</q-tooltip>
+            </q-btn>
+            <q-btn
+              v-if="scope.isUploading"
+              icon="clear"
+              @click="scope.abort"
+              round
+              dense
+              flat
+            >
+              <q-tooltip>ยกเลิกการอัปโหลด</q-tooltip>
+            </q-btn>
+          </div>
+        </template>
+      </q-uploader>
+    </div>
+  </q-card>
+</template>
+<script setup lang="ts">
+import { onMounted, computed, ref, watch } from "vue";
+import { useQuasar, QForm } from "quasar";
+import { useCounterMixin } from "@/stores/mixin";
+import { useRoute } from "vue-router";
+import { useDataStore } from "@/stores/data";
+import HeaderTop from "@/components/information/top.vue";
+import http from "@/plugins/http";
+import config from "@/app.config";
+
+const props = defineProps({
+  statusEdit: {
+    type: Boolean,
+    required: true,
+  },
+
+  notiNoEdit: {
+    type: Function,
+    default: () => console.log("not function"),
+  },
+});
+const emit = defineEmits(["update:statusEdit"]);
+
+const dataStore = useDataStore();
+const { loaderPage } = dataStore;
+const $q = useQuasar(); // show dialog
+const mixin = useCounterMixin();
+const route = useRoute();
+const { success, messageError } = mixin;
+const profileId = ref<string>(
+  route.params.id ? route.params.id.toString() : ""
+);
+const edit = ref<boolean>(false);
+const uploader = ref<any>();
+const files = ref<any>([]);
+const file = ref<any>([]);
+const name = ref<string>("");
+
+onMounted(async () => {
+  await getData();
+});
+
+const getData = async () => {
+  if (profileId.value) {
+    loaderPage(true);
+    await http
+      .get(config.API.profilePaperId(profileId.value))
+      .then((res) => {
+        const data = res.data.result;
+        files.value = data;
+      })
+      .catch((e) => {
+        messageError($q, e);
+      })
+      .finally(() => {
+        loaderPage(false);
+      });
+  }
+};
+
+const deleteData = async (id: string) => {
+  loaderPage(true);
+  await http
+    .delete(config.API.profilePaperId(id))
+    .then((res) => {
+      const data = res.data.result;
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(async () => {
+      await getData();
+    });
+};
+
+const uploadData = async () => {
+  if (profileId.value) {
+    if (file.value.length > 0) {
+      const blob = file.value.slice(0, file.value[0].size);
+      const newFile = new File(blob, name.value, {
+        type: file.value[0].type,
+      });
+      const formData = new FormData();
+      formData.append("avatar", newFile);
+      formData.append("moss", "newFile");
+      console.log(formData);
+      loaderPage(true);
+      await http
+        .post(config.API.profilePaperId(profileId.value), formData)
+        .then((res) => {
+          const data = res.data.result;
+          success($q, "บันทึกข้อมูลสำเร็จ");
+        })
+        .catch((e) => {
+          messageError($q, e);
+        })
+        .finally(async () => {
+          uploader.value.reset();
+          name.value = "";
+          edit.value = false;
+          emit("update:statusEdit", false);
+          await getData();
+        });
+    } else {
+      // modalError(
+      //   $q,
+      //   "ไม่สามารถอัปโหลดไฟล์ได้",
+      //   "กรุณาเลือกไฟล์ที่ต้องการอัปโหลด"
+      // );
+      getData();
+    }
+  }
+};
+
+const fileAdd = async (val: any) => {
+  name.value = val[0].name;
+  file.value = val;
+};
+
+const downloadData = async (path: string) => {
+  window.open(path);
+};
+
+const changeBtn = async () => {
+  name.value = "";
+  if (edit.value == true) {
+    if (props.statusEdit === true) {
+      edit.value = false;
+      props.notiNoEdit();
+    } else {
+      emit("update:statusEdit", true);
+    }
+  } else {
+    emit("update:statusEdit", false);
+  }
+};
+</script>
diff --git a/src/components/information/Education.vue b/src/components/information/Education.vue
new file mode 100644
index 000000000..5572bc881
--- /dev/null
+++ b/src/components/information/Education.vue
@@ -0,0 +1,1567 @@
+<!-- card ประวัติการศึกษา -->
+<template>
+  <q-card flat bordered class="col-12 q-px-lg q-py-md">
+    <q-form ref="myForm">
+      <ProfileTable
+        :rows="rows"
+        :columns="columns"
+        :filter="filter"
+        :visible-columns="visibleColumns"
+        v-model:inputfilter="filter"
+        v-model:inputvisible="visibleColumns"
+        :add="clickAdd"
+        name="ประวัติการศึกษา"
+        icon="school"
+        :statusEdit="statusEdit"
+      >
+        <template #columns="props">
+          <q-tr :props="props">
+            <q-td
+              v-for="col in props.cols"
+              :key="col.name"
+              :props="props"
+              @click="selectData(props)"
+              class="cursor-pointer"
+            >
+              <div v-if="col.name == 'startDate'" class="table_ellipsis">
+                {{
+                  props.row.isDate == "true"
+                    ? date2Thai(props.row.startDate2)
+                    : col.value + 543
+                }}
+              </div>
+              <div v-else-if="col.name == 'endDate'" class="table_ellipsis">
+                {{
+                  props.row.isDate == "true"
+                    ? date2Thai(props.row.endDate2)
+                    : col.value + 543
+                }}
+              </div>
+              <div v-else-if="col.name == 'finishDate'" class="table_ellipsis">
+                {{ date2Thai(col.value) }}
+              </div>
+              <div v-else-if="col.name == 'isEducation'" class="table_ellipsis">
+                {{ col.value ? "ใช่" : "ไม่ใช่" }}
+              </div>
+              <div v-else class="table_ellipsis">
+                {{ col.value }}
+              </div>
+            </q-td>
+            <q-td auto-width>
+              <q-btn
+                color="info"
+                flat
+                dense
+                round
+                size="14px"
+                icon="mdi-history"
+                @click="clickHistory(props.row)"
+              />
+            </q-td>
+          </q-tr>
+        </template>
+      </ProfileTable>
+    </q-form>
+  </q-card>
+  <!-- popup Edit window-->
+  <q-dialog v-model="modal" persistent>
+    <q-card style="width: 600px">
+      <q-form ref="myForm">
+        <DialogHeader tittle="ประวัติการศึกษา" :close="clickClose" />
+        <q-separator />
+        <q-card-section class="q-p-sm">
+          <div
+            class="row col-12 items-center q-col-gutter-x-xs q-col-gutter-y-xs"
+          >
+            <div class="col-xs-6 col-sm-6 col-md-6">
+              <selector
+                :class="getClass(edit)"
+                :outlined="edit"
+                dense
+                lazy-rules
+                :readonly="!edit"
+                :borderless="!edit"
+                v-model="levelId"
+                :rules="[(val:string) => !!val || `${'กรุณาเลือกระดับการศึกษา'}`]"
+                hide-bottom-space
+                :label="`${'ระดับการศึกษา'}`"
+                @update:modelValue="clickEditRow"
+                emit-value
+                map-options
+                option-label="name"
+                :options="Ops.levelOptions"
+                option-value="id"
+                use-input
+                input-debounce="0"
+                @filter="(inputValue:any,
+                      doneFn:Function) => filterSelector(inputValue, doneFn,'levelOptions'
+                      ) "
+              />
+            </div>
+            <div class="col-xs-6 col-sm-6 col-md-6">
+              <q-input
+                :class="getClass(edit)"
+                :outlined="edit"
+                dense
+                lazy-rules
+                :readonly="!edit"
+                :borderless="!edit"
+                v-model="institute"
+                :rules="[(val) => !!val || `${'กรุณากรอกสถานศึกษา'}`]"
+                hide-bottom-space
+                :label="`${'สถานศึกษา'}`"
+                @update:modelValue="clickEditRow"
+              />
+            </div>
+            <div class="col-12">
+              <q-card flat bordered class="q-px-sm q-pb-sm borderCard">
+                <div class="row col-12 q-gutter-md q-py-sm text-grey-7">
+                  <q-radio
+                    v-model="isDate"
+                    checked-icon="task_alt"
+                    unchecked-icon="panorama_fish_eye"
+                    val="false"
+                    label="ปี"
+                    dense
+                    :disable="!edit"
+                  />
+                  <q-radio
+                    v-model="isDate"
+                    checked-icon="task_alt"
+                    unchecked-icon="panorama_fish_eye"
+                    val="true"
+                    label="วัน/เดือน/ปี"
+                    dense
+                    :disable="!edit"
+                  />
+                </div>
+                <div class="col-12 row q-col-gutter-sm">
+                  <div class="col-xs-6 col-sm-6 col-md-6">
+                    <datepicker
+                      v-if="isDate === 'false'"
+                      menu-class-name="modalfix"
+                      :readonly="!edit"
+                      v-model="startDate"
+                      :locale="'th'"
+                      autoApply
+                      year-picker
+                      :enableTimePicker="false"
+                      @update:modelValue="clickEditRow"
+                      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="startDate + 543"
+                          :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>
+                    <datepicker
+                      v-else
+                      menu-class-name="modalfix"
+                      :readonly="!edit"
+                      v-model="startDate2"
+                      :locale="'th'"
+                      autoApply
+                      :enableTimePicker="false"
+                      @update:modelValue="clickEditRow"
+                      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="date2Thai(startDate2)"
+                          :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 class="col-xs-6 col-sm-6 col-md-6">
+                    <datepicker
+                      v-if="isDate === 'false'"
+                      menu-class-name="modalfix"
+                      v-model="endDate"
+                      :locale="'th'"
+                      autoApply
+                      year-picker
+                      :enableTimePicker="false"
+                      :min-date="minDate"
+                      :readonly="!edit"
+                      @update:modelValue="clickEditRow"
+                      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="endDate + 543"
+                          :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>
+                    <datepicker
+                      v-else
+                      menu-class-name="modalfix"
+                      :readonly="!edit"
+                      v-model="endDate2"
+                      :locale="'th'"
+                      autoApply
+                      :enableTimePicker="false"
+                      @update:modelValue="clickEditRow"
+                      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="date2Thai(endDate2)"
+                          :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>
+              </q-card>
+            </div>
+            <div class="col-xs-6 col-sm-6 col-md-6">
+              <datepicker
+                menu-class-name="modalfix"
+                :readonly="!edit"
+                v-model="finishDate"
+                :locale="'th'"
+                autoApply
+                :enableTimePicker="false"
+                @update:modelValue="clickEditRow"
+                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="date2Thai(finishDate)"
+                    :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 class="col-xs-6 col-sm-6 col-md-6">
+              <selector
+                :class="getClass(edit)"
+                :outlined="edit"
+                dense
+                lazy-rules
+                :readonly="!edit"
+                :borderless="!edit"
+                v-model="isEducation"
+                hide-bottom-space
+                :label="`${'เป็นวุฒิการศึกษาในตำแหน่ง'}`"
+                @update:modelValue="clickEditRow"
+                emit-value
+                map-options
+                option-label="name"
+                :options="Ops.positionPathOptions"
+                option-value="id"
+                use-input
+                input-debounce="0"
+                @filter="(inputValue:any,
+                      doneFn:Function) => filterSelector(inputValue, doneFn,'positionPathOptions'
+                      ) "
+              />
+            </div>
+            <div class="col-xs-6 col-sm-6 col-md-6">
+              <q-input
+                :class="getClass(edit)"
+                :outlined="edit"
+                dense
+                lazy-rules
+                :readonly="!edit"
+                :borderless="!edit"
+                v-model="degree"
+                :rules="[(val) => !!val || `${'กรุณากรอกวุฒิการศึกษา'}`]"
+                hide-bottom-space
+                :label="`${'วุฒิการศึกษา'}`"
+                @update:modelValue="clickEditRow"
+              />
+            </div>
+            <div class="col-xs-6 col-sm-6 col-md-6">
+              <q-input
+                :class="getClass(edit)"
+                :outlined="edit"
+                dense
+                lazy-rules
+                :readonly="!edit"
+                :borderless="!edit"
+                v-model="field"
+                :rules="[(val) => !!val || `${'กรุณากรอกสาขาวิชา/ทาง'}`]"
+                hide-bottom-space
+                :label="`${'สาขาวิชา/ทาง'}`"
+                @update:modelValue="clickEditRow"
+              />
+            </div>
+            <div class="col-xs-6 col-sm-6 col-md-6">
+              <q-input
+                :class="getClass(edit)"
+                :outlined="edit"
+                dense
+                lazy-rules
+                :readonly="!edit"
+                :borderless="!edit"
+                v-model="fundName"
+                hide-bottom-space
+                :label="`${'ทุน'}`"
+                @update:modelValue="clickEditRow"
+              />
+            </div>
+            <div class="col-xs-6 col-sm-6 col-md-6">
+              <q-input
+                :class="getClass(edit)"
+                :outlined="edit"
+                dense
+                lazy-rules
+                :readonly="!edit"
+                :borderless="!edit"
+                v-model="gpa"
+                :rules="[(val) => !!val || `${'กรุณากรอกเกรดเฉลี่ย'}`]"
+                hide-bottom-space
+                :label="`${'เกรดเฉลี่ย'}`"
+                @update:modelValue="clickEditRow"
+              />
+            </div>
+            <div class="col-xs-6 col-sm-6 col-md-6">
+              <q-input
+                :class="getClass(edit)"
+                :outlined="edit"
+                dense
+                lazy-rules
+                :readonly="!edit"
+                :borderless="!edit"
+                v-model="country"
+                :rules="[(val) => !!val || `${'กรุณากรอกประเทศ'}`]"
+                hide-bottom-space
+                :label="`${'ประเทศ'}`"
+                @update:modelValue="clickEditRow"
+              />
+            </div>
+            <div class="col-xs-6 col-sm-6 col-md-6">
+              <q-input
+                :class="getClass(edit)"
+                :outlined="edit"
+                dense
+                lazy-rules
+                :readonly="!edit"
+                :borderless="!edit"
+                v-model="other"
+                hide-bottom-space
+                :label="`${'ข้อมูลการติดต่อ'}`"
+                @update:modelValue="clickEditRow"
+              />
+            </div>
+            <div class="col-xs-6 col-sm-6 col-md-6">
+              <q-input
+                :class="getClass(edit)"
+                :outlined="edit"
+                dense
+                lazy-rules
+                :readonly="!edit"
+                :borderless="!edit"
+                v-model="duration"
+                hide-bottom-space
+                :label="`${'ระยะเวลา'}`"
+                @update:modelValue="clickEditRow"
+              />
+            </div>
+            <div class="col-xs-6 col-sm-6 col-md-6">
+              <q-input
+                :class="getClass(edit)"
+                :outlined="edit"
+                dense
+                lazy-rules
+                :readonly="!edit"
+                :borderless="!edit"
+                v-model="durationYear"
+                :rules="[(val) => !!val || `${'กรุณากรอกระยะเวลาหลักสูตร'}`]"
+                hide-bottom-space
+                :label="`${'ระยะเวลาหลักสูตร'}`"
+                @update:modelValue="clickEditRow"
+                type="number"
+              />
+            </div>
+          </div>
+        </q-card-section>
+        <q-separator />
+        <DialogFooter
+          :cancel="clickCancel"
+          :edit="clickEdit"
+          :save="clickSave"
+          :validate="validateData"
+          :clickNext="clickNext"
+          :clickPrevious="clickPrevious"
+          :clickDelete="clickDelete"
+          v-model:editvisible="edit"
+          v-model:next="next"
+          v-model:previous="previous"
+          v-model:modalEdit="modalEdit"
+        />
+      </q-form>
+    </q-card>
+  </q-dialog>
+  <HistoryTable
+    :rows="rowsHistory"
+    :columns="columnsHistory"
+    :filter="filterHistory"
+    :visible-columns="visibleColumnsHistory"
+    v-model:modal="modalHistory"
+    v-model:inputfilter="filterHistory"
+    v-model:inputvisible="visibleColumnsHistory"
+    v-model:tittle="tittleHistory"
+  >
+    <template #columns="props">
+      <q-tr :props="props">
+        <q-td v-for="col in props.cols" :key="col.name" :props="props">
+          <div v-if="col.name == 'startDate'" class="table_ellipsis">
+            {{
+              props.row.isDate == true
+                ? date2Thai(props.row.startDate2)
+                : col.value + 543
+            }}
+          </div>
+          <div v-else-if="col.name == 'endDate'" class="table_ellipsis">
+            {{
+              props.row.isDate == true
+                ? date2Thai(props.row.endDate2)
+                : col.value + 543
+            }}
+          </div>
+          <div
+            v-else-if="col.name == 'finishDate' || col.name == 'createdAt'"
+            class="table_ellipsis"
+          >
+            {{ date2Thai(col.value) }}
+          </div>
+          <div v-else-if="col.name == 'isEducation'" class="table_ellipsis">
+            {{ col.value ? "ใช่" : "ไม่ใช่" }}
+          </div>
+          <div v-else class="table_ellipsis">
+            {{ col.value }}
+          </div>
+        </q-td>
+      </q-tr>
+    </template>
+  </HistoryTable>
+</template>
+<script setup lang="ts">
+import { onMounted, ref, watch } from "vue";
+import { useRoute } from "vue-router";
+import { useComponentProfileDataStore } from "@/components/information/store/store";
+import { useCounterMixin } from "@/stores/mixin";
+import { useDataStore } from "@/stores/data";
+import ProfileTable from "@/components/information/Table.vue";
+import DialogHeader from "@/components/information/DialogHeader.vue";
+import DialogFooter from "@/components/information/DialogFooter.vue";
+import { useQuasar } from "quasar";
+import type {
+  RequestItemsObject,
+  DataProps,
+} from "@/components/information/interface/request/Education";
+import type { ResponseObject } from "@/components/information/interface/response/Education";
+import type { DataOption } from "@/components/information/interface/index/Main";
+import HistoryTable from "@/components/TableHistory.vue";
+import http from "@/plugins/http";
+import config from "@/app.config";
+import type { EduOps } from "@/components/information/interface/index/Main";
+import type { QTableProps } from "quasar";
+
+const props = defineProps({
+  statusEdit: {
+    type: Boolean,
+    required: true,
+  },
+});
+
+const $q = useQuasar();
+const store = useComponentProfileDataStore();
+const { profileData, changeProfileColumns } = store;
+const dataStore = useDataStore();
+const { loaderPage } = dataStore;
+const mixin = useCounterMixin();
+const { success, dateToISO, date2Thai, messageError } = mixin;
+const route = useRoute();
+const id = ref<string>("");
+const levelId = ref<string>();
+const Ops = ref<EduOps>({
+  levelOptions: [],
+  positionPathOptions: [],
+});
+const OpsFilter = ref<EduOps>({
+  levelOptions: [],
+  positionPathOptions: [],
+});
+const isEducation = ref<boolean>();
+const institute = ref<string>();
+const degree = ref<string>();
+const field = ref<string>();
+const gpa = ref<string>();
+const country = ref<string>();
+const duration = ref<string>();
+const durationYear = ref<number>(0);
+const other = ref<string>();
+const fundName = ref<string>();
+const isDate = ref<string>("true");
+const finishDate = ref<Date>(new Date());
+const startDate = ref<number>(new Date().getFullYear());
+const startDate2 = ref<Date>(new Date());
+const endDate = ref<number>(new Date().getFullYear());
+const endDate2 = ref<Date>(new Date());
+const minDate = ref<Date>();
+const myForm = ref<any>(); //form data input
+const edit = ref<boolean>(false); //เช็คการกดปุ่มแก้ไขใน dialog
+const modal = ref<boolean>(false); //modal add detail
+const modalEdit = ref<boolean>(false); //modal ที่แสดงใช้สำหรับแก้ไขหรือไม่
+const rawItem = ref<RequestItemsObject>(); //ข้อมูลเดิมที่เลือกใน row นั้น
+const rowIndex = ref<number>(0); //indexข้อมูลเดิมที่เลือกใน row นั้น
+const previous = ref<boolean>(); //แสดงปุ่มดูข้อมูลก่อนหน้า
+const next = ref<boolean>(); //แสดงปุ่มดูข้อมูลต่อไป
+const editRow = ref<boolean>(false); //เช็คมีการแก้ไขข้อมูล
+const rowsHistory = ref<RequestItemsObject[]>([]); //select data history
+const tittleHistory = ref<string>("ประวัติแก้ไขประวัติการศึกษา"); //
+const filterHistory = ref<string>(""); //search data table history
+const modalHistory = ref<boolean>(false); //modal ประวัติการแก้ไขข้อมูล
+const checkValidate = ref<boolean>(false); //validate data ผ่านหรือไม่
+const profileId = ref<string>(
+  route.params.id ? route.params.id.toString() : ""
+);
+const rows = ref<RequestItemsObject[]>([]);
+const filter = ref<string>(""); //search data table
+const visibleColumns = ref<String[]>([]);
+profileData.education.columns.length == 0
+  ? (visibleColumns.value = [
+      "level",
+      "institute",
+      "degree",
+      "field",
+      "gpa",
+      "country",
+      "duration",
+      "durationYear",
+      "other",
+      "fundName",
+      "isEducation",
+      "finishDate",
+      "startDate",
+      "endDate",
+    ])
+  : (visibleColumns.value = profileData.education.columns);
+const columns = ref<QTableProps["columns"]>([
+  {
+    name: "level",
+    align: "left",
+    label: "ระดับศึกษา",
+    sortable: true,
+    field: "level",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "institute",
+    align: "left",
+    label: "สถานศึกษา",
+    sortable: true,
+    field: "institute",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "startDate",
+    align: "left",
+    label: "ตั้งแต่",
+    sortable: true,
+    field: "startDate",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "endDate",
+    align: "left",
+    label: "ถึง",
+    sortable: true,
+    field: "endDate",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "finishDate",
+    align: "left",
+    label: "วันที่สำเร็จการศึกษา",
+    sortable: true,
+    field: "finishDate",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "isEducation",
+    align: "left",
+    label: "เป็นวุฒิการศึกษาในตำแหน่ง",
+    sortable: true,
+    field: "isEducation",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "degree",
+    align: "left",
+    label: "วุฒิการศึกษา",
+    sortable: true,
+    field: "degree",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "field",
+    align: "left",
+    label: "สาขาวิชา/ทาง",
+    sortable: true,
+    field: "field",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "fundName",
+    align: "left",
+    label: "ทุน",
+    sortable: true,
+    field: "fundName",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "gpa",
+    align: "left",
+    label: "เกรดเฉลี่ย",
+    sortable: true,
+    field: "gpa",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "country",
+    align: "left",
+    label: "ประเทศ",
+    sortable: true,
+    field: "country",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "other",
+    align: "left",
+    label: "ข้อมูลการติดต่อ",
+    sortable: true,
+    field: "other",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "duration",
+    align: "left",
+    label: "ระยะเวลา",
+    sortable: true,
+    field: "duration",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "durationYear",
+    align: "left",
+    label: "ระยะเวลาหลักสูตร",
+    sortable: true,
+    field: "durationYear",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+]);
+const columnsHistory = ref<QTableProps["columns"]>([
+  {
+    name: "level",
+    align: "left",
+    label: "ระดับศึกษา",
+    sortable: true,
+    field: "level",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "institute",
+    align: "left",
+    label: "สถานศึกษา",
+    sortable: true,
+    field: "institute",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "startDate",
+    align: "left",
+    label: "ตั้งแต่",
+    sortable: true,
+    field: "startDate",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "endDate",
+    align: "left",
+    label: "ถึง",
+    sortable: true,
+    field: "endDate",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "finishDate",
+    align: "left",
+    label: "วันที่สำเร็จการศึกษา",
+    sortable: true,
+    field: "finishDate",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "isEducation",
+    align: "left",
+    label: "เป็นวุฒิการศึกษาในตำแหน่ง",
+    sortable: true,
+    field: "isEducation",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "degree",
+    align: "left",
+    label: "วุฒิการศึกษา",
+    sortable: true,
+    field: "degree",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "field",
+    align: "left",
+    label: "สาขาวิชา/ทาง",
+    sortable: true,
+    field: "field",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "fundName",
+    align: "left",
+    label: "ทุน",
+    sortable: true,
+    field: "fundName",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "gpa",
+    align: "left",
+    label: "เกรดเฉลี่ย",
+    sortable: true,
+    field: "gpa",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "country",
+    align: "left",
+    label: "ประเทศ",
+    sortable: true,
+    field: "country",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "other",
+    align: "left",
+    label: "ข้อมูลการติดต่อ",
+    sortable: true,
+    field: "other",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "duration",
+    align: "left",
+    label: "ระยะเวลา",
+    sortable: true,
+    field: "duration",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "durationYear",
+    align: "left",
+    label: "ระยะเวลาหลักสูตร",
+    sortable: true,
+    field: "durationYear",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "createdFullName",
+    align: "left",
+    label: "ผู้ดำเนินการ",
+    sortable: true,
+    field: "createdFullName",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "createdAt",
+    align: "left",
+    label: "วันที่แก้ไข",
+    sortable: true,
+    field: "createdAt",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+]);
+const visibleColumnsHistory = ref<String[]>([
+  "level",
+  "institute",
+  "degree",
+  "field",
+  "gpa",
+  "country",
+  "duration",
+  "durationYear",
+  "other",
+  "isEducation",
+  "fundName",
+  "finishDate",
+  "startDate",
+  "endDate",
+  "createdFullName",
+  "createdAt",
+]);
+
+watch(startDate, (count, prevCount) => {
+  minDate.value = new Date(`${startDate.value}-01-01`);
+});
+
+watch(visibleColumns, async (count: String[], prevCount: String[]) => {
+  await changeProfileColumns("education", count);
+});
+
+onMounted(async () => {
+  await fetchLevel();
+  await fetchPositionPath();
+  await fetchData();
+});
+
+const fetchLevel = async () => {
+  loaderPage(true);
+  await http
+    .get(config.API.educationLevel)
+    .then((res) => {
+      const data = res.data.result;
+      let option: DataOption[] = [];
+      data.map((r: DataOption) => {
+        option.push({ id: r.id.toString(), name: r.name.toString() });
+      });
+      Ops.value.levelOptions = option;
+      OpsFilter.value.levelOptions = option;
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      loaderPage(false);
+    });
+};
+
+const fetchPositionPath = async () => {
+  loaderPage(true);
+  await http
+    .get(config.API.positionPath)
+    .then((res) => {
+      const data = res.data.result;
+      let option: any = [];
+      //   data.map((r: DataOption) => {
+      option.push({ id: true, name: "ใช่" });
+      option.push({ id: false, name: "ไม่ใช่" });
+      //   });
+      Ops.value.positionPathOptions = option;
+      OpsFilter.value.positionPathOptions = option;
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      loaderPage(false);
+    });
+};
+
+const filterSelector = (val: any, update: Function, refData: string) => {
+  switch (refData) {
+    case "levelOptions":
+      update(() => {
+        Ops.value.levelOptions = OpsFilter.value.levelOptions.filter(
+          (v: DataOption) => v.name.indexOf(val) > -1
+        );
+      });
+      break;
+    case "positionPathOptions":
+      update(() => {
+        Ops.value.positionPathOptions =
+          OpsFilter.value.positionPathOptions.filter(
+            (v: DataOption) => v.name.indexOf(val) > -1
+          );
+      });
+      break;
+    default:
+      break;
+  }
+};
+
+const fetchData = async () => {
+  if (profileId.value) {
+    loaderPage(true);
+    await http
+      .get(config.API.profileEduId(profileId.value))
+      .then((res) => {
+        let data = res.data.result;
+        rows.value = [];
+        data.map((e: ResponseObject) => {
+          rows.value.push({
+            id: e.id,
+            level: e.educationLevel,
+            levelId: e.educationLevelId,
+            positionPath: e.positionPath,
+            isEducation: e.isEducation,
+            institute: e.institute,
+            degree: e.degree,
+            field: e.field,
+            gpa: e.gpa,
+            country: e.country,
+            duration: e.duration,
+            durationYear: e.durationYear,
+            other: e.other,
+            fundName: e.fundName,
+            isDate: e.isDate == null ? null : e.isDate.toString(),
+            finishDate: new Date(e.finishDate),
+            startDate: new Date(e.startDate).getFullYear(),
+            endDate: new Date(e.endDate).getFullYear(),
+            startDate2: new Date(e.startDate),
+            endDate2: new Date(e.endDate),
+            createdFullName: e.createdFullName,
+            createdAt: new Date(e.createdAt),
+          });
+        });
+      })
+      .catch((e) => {
+        messageError($q, e);
+      })
+      .finally(() => {
+        loaderPage(false);
+      });
+  }
+};
+
+/**
+ * กดดูข้อมูลก่อนหน้า
+ */
+const clickPrevious = async () => {
+  edit.value = false;
+  rowIndex.value -= 1;
+  await getData();
+  await checkRowPage();
+};
+
+/**
+ * กดดูข้อมูลต่อไป
+ */
+const clickNext = async () => {
+  edit.value = false;
+  rowIndex.value += 1;
+  await getData();
+  await checkRowPage();
+};
+
+/**
+ * กดดูข้อมูลต่อไป
+ */
+const getData = () => {
+  const row = rows.value[rowIndex.value];
+  levelId.value = row.levelId;
+  isEducation.value = row.isEducation;
+  institute.value = row.institute;
+  degree.value = row.degree;
+  field.value = row.field;
+  gpa.value = row.gpa;
+  country.value = row.country;
+  duration.value = row.duration;
+  durationYear.value = row.durationYear;
+  other.value = row.other;
+  fundName.value = row.fundName;
+  finishDate.value = row.finishDate;
+  isDate.value = row.isDate;
+  startDate.value = row.startDate;
+  endDate.value = row.endDate;
+  startDate2.value = row.startDate2;
+  endDate2.value = row.endDate2;
+  id.value = row.id;
+};
+
+/**
+ * เช็คปุ่มดูข้อมูล ย้อน กับ ต่อไป ว่าต้องแสดงไหม
+ */
+const checkRowPage = () => {
+  editRow.value = false;
+  next.value = true;
+  previous.value = true;
+  if (rowIndex.value + 1 >= rows.value.length) {
+    next.value = false;
+  }
+  if (rowIndex.value - 1 < 0) {
+    previous.value = false;
+  }
+};
+
+/**
+ * กดปุ่มแก้ไขใน dialog
+ */
+const clickEdit = () => {
+  editRow.value = false;
+  next.value = false;
+  previous.value = false;
+};
+
+/**
+ * กดปุ่มเพิ่มด้านบน table
+ */
+const clickAdd = async () => {
+  editRow.value = false;
+  await addData();
+};
+
+/**
+ * กดบันทึกใน dialog
+ */
+const clickSave = async () => {
+  myForm.value.validate().then(async (result: boolean) => {
+    if (result) {
+      if (modalEdit.value) {
+        await editData();
+      } else {
+        await saveData();
+      }
+    }
+  });
+};
+
+/**
+ * บันทึกเพิ่มข้อมูล
+ */
+const saveData = async () => {
+  //   const filter = OpsFilter.value.levelOptions.filter(
+  //     (r: any) => r.id == levelId.value
+  //   );
+  //   const filterPositionPath = OpsFilter.value.positionPathOptions.filter(
+  //     (r: any) => r.id == isEducation.value
+  //   );
+  if (profileId.value) {
+    loaderPage(true);
+    await http
+      .post(config.API.profileEduId(profileId.value), {
+        id: id.value,
+        //   educationLevel: filter[0].name,
+        educationLevelId: levelId.value,
+        isEducation: isEducation.value,
+        institute: institute.value,
+        degree: degree.value,
+        field: field.value,
+        gpa: gpa.value,
+        country: country.value,
+        duration: duration.value,
+        durationYear: durationYear.value,
+        other: other.value,
+        fundName: fundName.value,
+        isDate: isDate.value == "true" ? true : false,
+        finishDate: dateToISO(finishDate.value),
+        startDate:
+          isDate.value == "true"
+            ? dateToISO(startDate2.value)
+            : new Date(`${startDate.value}-01-01`),
+        endDate:
+          isDate.value == "true"
+            ? dateToISO(endDate2.value)
+            : new Date(`${endDate.value}-01-01`),
+      })
+      .then((res) => {
+        success($q, "บันทึกข้อมูลสำเร็จ");
+        modal.value = false;
+      })
+      .catch((e) => {
+        messageError($q, e);
+      })
+      .finally(async () => {
+        await fetchData();
+      });
+  }
+};
+
+/**
+ * บันทึกแก้ไขข้อมูล
+ */
+const editData = async () => {
+  //   const filter = OpsFilter.value.levelOptions.filter(
+  //     (r: any) => r.id == levelId.value
+  //   );
+  //   const filterPositionPath = OpsFilter.value.positionPathOptions.filter(
+  //     (r: any) => r.id == isEducation.value
+  //   );
+  loaderPage(true);
+  await http
+    .put(config.API.profileEduId(id.value), {
+      id: id.value,
+      //   educationLevel: filter[0].name,
+      educationLevelId: levelId.value,
+      isEducation: isEducation.value,
+      institute: institute.value,
+      degree: degree.value,
+      field: field.value,
+      gpa: gpa.value,
+      country: country.value,
+      duration: duration.value,
+      durationYear: durationYear.value,
+      other: other.value,
+      fundName: fundName.value,
+      isDate: isDate.value == "true" ? true : false,
+      finishDate: dateToISO(finishDate.value),
+      startDate:
+        isDate.value == "true"
+          ? dateToISO(startDate2.value)
+          : new Date(`${startDate.value}-01-01`),
+      endDate:
+        isDate.value == "true"
+          ? dateToISO(endDate2.value)
+          : new Date(`${endDate.value}-01-01`),
+    })
+    .then((res) => {
+      success($q, "บันทึกข้อมูลสำเร็จ");
+      modal.value = false;
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(async () => {
+      await fetchData();
+    });
+};
+
+/**
+ * ลบลบข้อมูล
+ */
+const clickDelete = async () => {
+  $q.dialog({
+    title: `ลบข้อมูล`,
+    message: `ต้องการทำการลบข้อมูลนี้ใช่หรือไม่?`,
+    cancel: "ยกเลิก",
+    ok: "ยืนยัน",
+    persistent: true,
+  })
+    .onOk(async () => {
+      loaderPage(true);
+      await http
+        .delete(config.API.profileEduId(id.value))
+        .then((res) => {
+          success($q, "ลบข้อมูลสำเร็จ");
+          modal.value = false;
+        })
+        .catch((e) => {
+          messageError($q, e);
+        })
+        .finally(async () => {
+          await fetchData();
+        });
+    })
+    .onCancel(async () => {
+      await fetchData();
+    });
+};
+
+/**
+ * กดปิด dialog
+ */
+const clickClose = async () => {
+  if (editRow.value == true) {
+    $q.dialog({
+      title: `ข้อมูลมีการแก้ไข`,
+      message: `ยืนยันที่จะปิดโดยไม่บันทึกใช่หรือไม่?`,
+      cancel: "ยกเลิก",
+      ok: "ยืนยัน",
+      persistent: true,
+    }).onOk(async () => {
+      modal.value = false;
+      next.value = false;
+      previous.value = false;
+    });
+  } else {
+    modal.value = false;
+    next.value = false;
+    previous.value = false;
+  }
+};
+
+/**
+ * กดเลือกข้อมูลที่จะแก้ไข
+ * @param _props ค่า props ใน row ที่เลือก
+ */
+const selectData = async (_props: DataProps) => {
+  modalEdit.value = true;
+  modal.value = true;
+  edit.value = false;
+  rawItem.value = _props.row;
+  rowIndex.value = _props.rowIndex;
+  levelId.value = _props.row.levelId;
+  isEducation.value = _props.row.isEducation;
+  institute.value = _props.row.institute;
+  degree.value = _props.row.degree;
+  field.value = _props.row.field;
+  gpa.value = _props.row.gpa;
+  country.value = _props.row.country;
+  duration.value = _props.row.duration;
+  durationYear.value = _props.row.durationYear;
+  other.value = _props.row.other;
+  fundName.value = _props.row.fundName;
+  finishDate.value = _props.row.finishDate;
+  isDate.value = _props.row.isDate;
+  startDate.value = _props.row.startDate;
+  endDate.value = _props.row.endDate;
+  startDate2.value = _props.row.startDate2;
+  endDate2.value = _props.row.endDate2;
+  id.value = _props.row.id;
+  await checkRowPage();
+};
+
+/**
+ * กดปุ่มเพิ่มบน table
+ */
+const addData = () => {
+  modalEdit.value = false;
+  modal.value = true;
+  edit.value = true;
+  levelId.value = "";
+  isEducation.value = false;
+  institute.value = "";
+  degree.value = "";
+  field.value = "";
+  gpa.value = "";
+  country.value = "";
+  duration.value = "";
+  durationYear.value = 0;
+  other.value = "";
+  fundName.value = "";
+  isDate.value = "true";
+  finishDate.value = new Date();
+  startDate.value = new Date().getFullYear();
+  endDate.value = new Date().getFullYear();
+  startDate2.value = new Date();
+  endDate2.value = new Date();
+};
+
+/**
+ * ฟังก์ชันปุ่มยกเลิกการแก้ไขข้อมูล
+ */
+const clickCancel = async () => {
+  if (editRow.value == true) {
+    $q.dialog({
+      title: `ข้อมูลมีการแก้ไข`,
+      message: `ยืนยันยกเลิกการแก้ไขใช่หรือไม่?`,
+      cancel: "ยกเลิก",
+      ok: "ยืนยัน",
+      persistent: true,
+    }).onOk(async () => {
+      edit.value = false;
+      await checkRowPage();
+      await getData();
+    });
+  } else {
+    edit.value = false;
+    await checkRowPage();
+  }
+};
+
+/**
+ * เช็คว่ามีการแก้ไขข้อมูล
+ */
+const clickEditRow = () => {
+  editRow.value = true;
+};
+
+/**
+ * ฟังชั้นดูข้อมูลประวัติแก้ไขข้อมูลที่เลือก
+ * @param row ข้อมูล row ที่ดูประวัติการแก้ไข
+ */
+const clickHistory = async (row: RequestItemsObject) => {
+  modalHistory.value = true;
+  loaderPage(true);
+  await http
+    .get(config.API.profileEduHisId(row.id))
+    .then((res) => {
+      let data = res.data.result;
+      rowsHistory.value = [];
+      data.map((e: ResponseObject) => {
+        rowsHistory.value.push({
+          id: e.id,
+          level: e.educationLevel,
+          levelId: e.educationLevelId,
+          positionPath: e.positionPath,
+          isEducation: e.isEducation,
+          institute: e.institute,
+          degree: e.degree,
+          field: e.field,
+          gpa: e.gpa,
+          country: e.country,
+          duration: e.duration,
+          durationYear: e.durationYear,
+          other: e.other,
+          fundName: e.fundName,
+          isDate: e.isDate.toString(),
+          finishDate: new Date(e.finishDate),
+          startDate: new Date(e.startDate).getFullYear(),
+          endDate: new Date(e.endDate).getFullYear(),
+          startDate2: new Date(e.startDate2),
+          endDate2: new Date(e.endDate2),
+          createdFullName: e.createdFullName,
+          createdAt: new Date(e.createdAt),
+        });
+      });
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      loaderPage(false);
+    });
+};
+
+/**
+ * validate input ใน dialog
+ */
+const validateData = async () => {
+  checkValidate.value = true;
+  await myForm.value.validate().then((result: boolean) => {
+    if (result == false) {
+      checkValidate.value = false;
+    }
+  });
+};
+
+/**
+ * class จัดรูปแบบแสดงระหว่างข้อมูลที่แก้ไขหรือแสดงเฉยๆ
+ * @param val ข้อมูล input สำหรับแก้ไขหรือไม่
+ */
+const getClass = (val: boolean) => {
+  return {
+    "full-width inputgreen cursor-pointer": val,
+    "full-width cursor-pointer": !val,
+  };
+};
+</script>
+<style lang="scss">
+.modalfix {
+  position: fixed !important;
+}
+.borderCard {
+  border: 1px solid #d0d0d0;
+}
+</style>
diff --git a/src/components/information/Insignia.vue b/src/components/information/Insignia.vue
new file mode 100644
index 000000000..25d743441
--- /dev/null
+++ b/src/components/information/Insignia.vue
@@ -0,0 +1,1344 @@
+<!-- card เครื่องราชอิสริยาภรณ์ -->
+<template>
+  <q-card flat bordered class="col-12 q-px-lg q-py-md">
+    <q-form ref="myForm">
+      <ProfileTable
+        :rows="rows"
+        :columns="columns"
+        :filter="filter"
+        :visible-columns="visibleColumns"
+        v-model:inputfilter="filter"
+        v-model:inputvisible="visibleColumns"
+        :add="clickAdd"
+        name="เครื่องราชอิสริยาภรณ์"
+        icon="mdi-medal"
+        :statusEdit="statusEdit"
+      >
+        <template #columns="props">
+          <q-tr :props="props">
+            <q-td
+              v-for="col in props.cols"
+              :key="col.name"
+              :props="props"
+              @click="selectData(props)"
+              class="cursor-pointer"
+            >
+              <div
+                v-if="
+                  col.name == 'receiveDate' ||
+                  col.name == 'dateAnnounce' ||
+                  col.name == 'refCommandDate'
+                "
+                class="table_ellipsis"
+              >
+                {{ col.value == null ? null : date2Thai(col.value) }}
+              </div>
+              <div v-else-if="col.name == 'year'" class="table_ellipsis">
+                {{ col.value + 543 }}
+              </div>
+              <div v-else class="table_ellipsis">
+                {{ col.value }}
+              </div>
+            </q-td>
+            <q-td auto-width>
+              <q-btn
+                color="info"
+                flat
+                dense
+                round
+                size="14px"
+                icon="mdi-history"
+                @click="clickHistory(props.row)"
+              />
+            </q-td>
+          </q-tr>
+        </template>
+      </ProfileTable>
+    </q-form>
+  </q-card>
+  <!-- popup Edit window-->
+  <q-dialog v-model="modal" persistent>
+    <q-card style="width: 600px">
+      <q-form ref="myForm">
+        <DialogHeader tittle="เครื่องราชอิสริยาภรณ์" :close="clickClose" />
+        <q-separator />
+        <q-card-section class="q-p-sm">
+          <div
+            class="row col-12 items-center q-col-gutter-x-xs q-col-gutter-y-xs"
+          >
+            <div class="col-xs-6 col-sm-6 col-md-6">
+              <datepicker
+                menu-class-name="modalfix"
+                :readonly="!edit"
+                v-model="year"
+                :locale="'th'"
+                autoApply
+                year-picker
+                :enableTimePicker="false"
+                @update:modelValue="clickEditRow"
+                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="year + 543"
+                    :rules="[
+                      (val:string) =>
+                        !!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 class="col-xs-6 col-sm-6 col-md-6">
+              <datepicker
+                menu-class-name="modalfix"
+                :readonly="!edit"
+                v-model="receiveDate"
+                :locale="'th'"
+                autoApply
+                :enableTimePicker="false"
+                @update:modelValue="clickEditRow"
+                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="date2Thai(receiveDate)"
+                    :rules="[(val:string) => !!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 class="col-xs-6 col-sm-6 col-md-6">
+              <selector
+                :class="getClass(edit)"
+                :outlined="edit"
+                dense
+                lazy-rules
+                :readonly="!edit"
+                :borderless="!edit"
+                v-model="insigniaId"
+                :rules="[(val:string) => !!val || `${'กรุณาเลือกชื่อเครื่องราชฯ'}`]"
+                hide-bottom-space
+                :label="`${'ชื่อเครื่องราชฯ'}`"
+                @update:modelValue="clickEditRow"
+                emit-value
+                map-options
+                option-label="name"
+                :options="Ops.insigniaOptions"
+                option-value="id"
+                use-input
+                input-debounce="0"
+                @filter="(inputValue:any,
+                      doneFn:Function) => filterSelector(inputValue, doneFn,'insigniaOptions'
+                      ) "
+              />
+            </div>
+            <div class="col-xs-6 col-sm-6 col-md-6">
+              <q-input
+                :class="getClass(false)"
+                :outlined="false"
+                dense
+                lazy-rules
+                :readonly="true"
+                :borderless="true"
+                v-model="insigniaType"
+                :label="`${'ลำดับชั้น'}`"
+                @update:modelValue="clickEditRow"
+                hide-bottom-space
+              />
+            </div>
+            <div class="col-xs-6 col-sm-6 col-md-6">
+              <q-input
+                :class="getClass(edit)"
+                :outlined="edit"
+                dense
+                lazy-rules
+                :readonly="!edit"
+                :borderless="!edit"
+                v-model="no"
+                :rules="[(val:string) => !!val || `${'กรุณากรอกลำดับที่'}`]"
+                :label="`${'ลำดับที่'}`"
+                @update:modelValue="clickEditRow"
+                hide-bottom-space
+              />
+            </div>
+            <div class="col-xs-6 col-sm-6 col-md-6">
+              <q-input
+                :class="getClass(edit)"
+                :outlined="edit"
+                dense
+                lazy-rules
+                :readonly="!edit"
+                :borderless="!edit"
+                v-model="issue"
+                :rules="[(val:string) => !!val || `${'กรุณากรอกราชกิจจาฯ ฉบับที่'}`]"
+                :label="`${'ราชกิจจาฯ ฉบับที่'}`"
+                @update:modelValue="clickEditRow"
+                hide-bottom-space
+              />
+            </div>
+            <div class="col-xs-6 col-sm-6 col-md-6">
+              <q-input
+                :class="getClass(edit)"
+                :outlined="edit"
+                dense
+                lazy-rules
+                :readonly="!edit"
+                :borderless="!edit"
+                v-model="volumeNo"
+                :rules="[(val:string) => !!val || `${'กรุณากรอกเล่มที่'}`]"
+                :label="`${'เล่มที่'}`"
+                @update:modelValue="clickEditRow"
+                hide-bottom-space
+              />
+            </div>
+            <div class="col-xs-6 col-sm-6 col-md-6">
+              <q-input
+                :class="getClass(edit)"
+                :outlined="edit"
+                dense
+                lazy-rules
+                :readonly="!edit"
+                :borderless="!edit"
+                v-model="volume"
+                :rules="[(val:string) => !!val || `${'กรุณากรอกเล่ม'}`]"
+                :label="`${'เล่ม'}`"
+                @update:modelValue="clickEditRow"
+                hide-bottom-space
+              />
+            </div>
+            <div class="col-xs-6 col-sm-6 col-md-6">
+              <q-input
+                :class="getClass(edit)"
+                :outlined="edit"
+                dense
+                lazy-rules
+                :readonly="!edit"
+                :borderless="!edit"
+                v-model="section"
+                :rules="[(val:string) => !!val || `${'กรุณากรอกตอน'}`]"
+                :label="`${'ตอน'}`"
+                @update:modelValue="clickEditRow"
+                hide-bottom-space
+              />
+            </div>
+            <div class="col-xs-6 col-sm-6 col-md-6">
+              <q-input
+                :class="getClass(edit)"
+                :outlined="edit"
+                dense
+                lazy-rules
+                :readonly="!edit"
+                :borderless="!edit"
+                v-model="page"
+                :rules="[(val:string) => !!val || `${'กรุณากรอกหน้า'}`]"
+                :label="`${'หน้า'}`"
+                @update:modelValue="clickEditRow"
+                hide-bottom-space
+              />
+            </div>
+            <div class="col-xs-6 col-sm-6 col-md-6">
+              <datepicker
+                menu-class-name="modalfix"
+                :readonly="!edit"
+                v-model="dateAnnounce"
+                :locale="'th'"
+                autoApply
+                :enableTimePicker="false"
+                @update:modelValue="clickEditRow"
+                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="date2Thai(dateAnnounce)"
+                    :rules="[
+                      (val:string) =>
+                        !!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 class="col-xs-6 col-sm-6 col-md-6">
+              <q-input
+                :class="getClass(edit)"
+                :outlined="edit"
+                dense
+                lazy-rules
+                :readonly="!edit"
+                :borderless="!edit"
+                v-model="refCommandNo"
+                hide-bottom-space
+                :label="`${'เลขที่คำสั่ง'}`"
+                @update:modelValue="clickEditRow"
+              >
+                <template v-slot:append>
+                  <q-icon
+                    name="mdi-file"
+                    class="cursor-pointer"
+                    @click="resetFilter"
+                  />
+                </template>
+              </q-input>
+            </div>
+            <div class="col-xs-6 col-sm-6 col-md-6">
+              <datepicker
+                menu-class-name="modalfix"
+                :readonly="!edit"
+                v-model="refCommandDate"
+                :locale="'th'"
+                autoApply
+                :enableTimePicker="false"
+                @update:modelValue="clickEditRow"
+                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="
+                      refCommandDate == null ? null : date2Thai(refCommandDate)
+                    "
+                    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>
+        </q-card-section>
+        <q-separator />
+        <DialogFooter
+          :cancel="clickCancel"
+          :edit="clickEdit"
+          :save="clickSave"
+          :validate="validateData"
+          :clickNext="clickNext"
+          :clickPrevious="clickPrevious"
+          :clickDelete="clickDelete"
+          v-model:editvisible="edit"
+          v-model:next="next"
+          v-model:previous="previous"
+          v-model:modalEdit="modalEdit"
+        />
+      </q-form>
+    </q-card>
+  </q-dialog>
+  <HistoryTable
+    :rows="rowsHistory"
+    :columns="columnsHistory"
+    :filter="filterHistory"
+    :visible-columns="visibleColumnsHistory"
+    v-model:modal="modalHistory"
+    v-model:inputfilter="filterHistory"
+    v-model:inputvisible="visibleColumnsHistory"
+    v-model:tittle="tittleHistory"
+  >
+    <template #columns="props">
+      <q-tr :props="props">
+        <q-td v-for="col in props.cols" :key="col.name" :props="props">
+          <div
+            v-if="
+              col.name == 'receiveDate' ||
+              col.name == 'dateAnnounce' ||
+              col.name == 'createdAt' ||
+              col.name == 'refCommandDate'
+            "
+            class="table_ellipsis"
+          >
+            {{ col.value == null ? null : date2Thai(col.value) }}
+          </div>
+          <div v-else-if="col.name == 'year'" class="table_ellipsis">
+            {{ col.value + 543 }}
+          </div>
+          <div v-else class="table_ellipsis">
+            {{ col.value }}
+          </div>
+        </q-td>
+      </q-tr>
+    </template>
+  </HistoryTable>
+</template>
+<script setup lang="ts">
+import { onMounted, ref, watch } from "vue";
+import { useRoute } from "vue-router";
+import { useComponentProfileDataStore } from "@/components/information/store/store";
+import { useCounterMixin } from "@/stores/mixin";
+import { useDataStore } from "@/stores/data";
+import ProfileTable from "@/components/information/Table.vue";
+import DialogHeader from "@/components/information/DialogHeader.vue";
+import DialogFooter from "@/components/information/DialogFooter.vue";
+import { useQuasar } from "quasar";
+import type {
+  RequestItemsObject,
+  Columns,
+  DataProps,
+} from "@/components/information/interface/request/Insignia";
+import type { ResponseObject } from "@/components/information/interface/response/Insignia";
+import type {
+  DataOption,
+  DataOptionInsignia,
+  InsigniaOps,
+} from "@/components/information/interface/index/Main";
+import HistoryTable from "@/components/TableHistory.vue";
+import http from "@/plugins/http";
+import config from "@/app.config";
+import type { QTableProps } from "quasar";
+
+const props = defineProps({
+  statusEdit: {
+    type: Boolean,
+    required: true,
+  },
+});
+
+const $q = useQuasar();
+const store = useComponentProfileDataStore();
+const { profileData, changeProfileColumns } = store;
+const dataStore = useDataStore();
+const { loaderPage } = dataStore;
+const mixin = useCounterMixin();
+const { date2Thai, success, dateToISO, messageError } = mixin;
+const route = useRoute();
+const id = ref<string>("");
+const insigniaId = ref<string>("");
+const Ops = ref<InsigniaOps>({
+  insigniaOptions: [],
+});
+const OpsFilter = ref<InsigniaOps>({
+  insigniaOptions: [],
+});
+const insigniaType = ref<string>();
+const year = ref<number>(0);
+const no = ref<string>();
+const issue = ref<string>();
+const volumeNo = ref<string>();
+const volume = ref<string>();
+const section = ref<string>();
+const page = ref<string>();
+const receiveDate = ref<Date>(new Date());
+const dateAnnounce = ref<Date>(new Date());
+const refCommandNo = ref<string>();
+const refCommandDate = ref<Date | null>(new Date());
+const myForm = ref<any>(); //form data input
+const edit = ref<boolean>(false); //เช็คการกดปุ่มแก้ไขใน dialog
+const modal = ref<boolean>(false); //modal add detail
+const modalEdit = ref<boolean>(false); //modal ที่แสดงใช้สำหรับแก้ไขหรือไม่
+const rawItem = ref<RequestItemsObject>(); //ข้อมูลเดิมที่เลือกใน row นั้น
+const rowIndex = ref<number>(0); //indexข้อมูลเดิมที่เลือกใน row นั้น
+const previous = ref<boolean>(); //แสดงปุ่มดูข้อมูลก่อนหน้า
+const next = ref<boolean>(); //แสดงปุ่มดูข้อมูลต่อไป
+const editRow = ref<boolean>(false); //เช็คมีการแก้ไขข้อมูล
+const rowsHistory = ref<RequestItemsObject[]>([]); //select data history
+const tittleHistory = ref<string>("ประวัติแก้ไขเครื่องราชอิสริยาภรณ์"); //
+const filterHistory = ref<string>(""); //search data table history
+const modalHistory = ref<boolean>(false); //modal ประวัติการแก้ไขข้อมูล
+const checkValidate = ref<boolean>(false); //validate data ผ่านหรือไม่
+const profileId = ref<string>(
+  route.params.id ? route.params.id.toString() : ""
+);
+const rows = ref<RequestItemsObject[]>([]);
+const filter = ref<string>(""); //search data table
+const visibleColumns = ref<String[]>([]);
+profileData.insignia.columns.length == 0
+  ? (visibleColumns.value = [
+      "insignia",
+      "insigniaType",
+      "year",
+      "no",
+      "issue",
+      "volumeNo",
+      "volume",
+      "section",
+      "page",
+      "receiveDate",
+      "dateAnnounce",
+      "refCommandNo",
+      "refCommandDate",
+    ])
+  : (visibleColumns.value = profileData.insignia.columns);
+const columns = ref<QTableProps["columns"]>([
+  {
+    name: "year",
+    align: "left",
+    label: "ปีที่ยื่นขอ",
+    sortable: true,
+    field: "year",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "receiveDate",
+    align: "left",
+    label: "ลงวันที่",
+    sortable: true,
+    field: "receiveDate",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "insignia",
+    align: "left",
+    label: "ชื่อเครื่องราชฯ",
+    sortable: true,
+    field: "insignia",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "insigniaType",
+    align: "left",
+    label: "ลำดับชั้น",
+    sortable: true,
+    field: "insigniaType",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "no",
+    align: "left",
+    label: "ลำดับที่",
+    sortable: true,
+    field: "no",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "issue",
+    align: "left",
+    label: "ราชกิจจาฯ ฉบับที่",
+    sortable: true,
+    field: "issue",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "volumeNo",
+    align: "left",
+    label: "เล่มที่",
+    sortable: true,
+    field: "volumeNo",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "volume",
+    align: "left",
+    label: "เล่ม",
+    sortable: true,
+    field: "volume",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "section",
+    align: "left",
+    label: "ตอน",
+    sortable: true,
+    field: "section",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "page",
+    align: "left",
+    label: "หน้า",
+    sortable: true,
+    field: "page",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "dateAnnounce",
+    align: "left",
+    label: "วันที่ประกาศในราชกิจจาฯ",
+    sortable: true,
+    field: "dateAnnounce",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "refCommandNo",
+    align: "left",
+    label: "เลขที่คำสั่ง",
+    sortable: true,
+    field: "refCommandNo",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "refCommandDate",
+    align: "left",
+    label: "เอกสารอ้างอิง (ลงวันที่)",
+    sortable: true,
+    field: "refCommandDate",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+]);
+const columnsHistory = ref<QTableProps["columns"]>([
+  {
+    name: "year",
+    align: "left",
+    label: "ปีที่ยื่นขอ",
+    sortable: true,
+    field: "year",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "receiveDate",
+    align: "left",
+    label: "ลงวันที่",
+    sortable: true,
+    field: "receiveDate",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "insignia",
+    align: "left",
+    label: "ชื่อเครื่องราชฯ",
+    sortable: true,
+    field: "insignia",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "insigniaType",
+    align: "left",
+    label: "ลำดับชั้น",
+    sortable: true,
+    field: "insigniaType",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "no",
+    align: "left",
+    label: "ลำดับที่",
+    sortable: true,
+    field: "no",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "issue",
+    align: "left",
+    label: "ราชกิจจาฯ ฉบับที่",
+    sortable: true,
+    field: "issue",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "volumeNo",
+    align: "left",
+    label: "เล่มที่",
+    sortable: true,
+    field: "volumeNo",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "volume",
+    align: "left",
+    label: "เล่ม",
+    sortable: true,
+    field: "volume",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "section",
+    align: "left",
+    label: "ตอน",
+    sortable: true,
+    field: "section",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "page",
+    align: "left",
+    label: "หน้า",
+    sortable: true,
+    field: "page",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "dateAnnounce",
+    align: "left",
+    label: "วันที่ประกาศในราชกิจจาฯ",
+    sortable: true,
+    field: "dateAnnounce",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "refCommandNo",
+    align: "left",
+    label: "เลขที่คำสั่ง",
+    sortable: true,
+    field: "refCommandNo",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "refCommandDate",
+    align: "left",
+    label: "เอกสารอ้างอิง (ลงวันที่)",
+    sortable: true,
+    field: "refCommandDate",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "createdFullName",
+    align: "left",
+    label: "ผู้ดำเนินการ",
+    sortable: true,
+    field: "createdFullName",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "createdAt",
+    align: "left",
+    label: "วันที่แก้ไข",
+    sortable: true,
+    field: "createdAt",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+]);
+const visibleColumnsHistory = ref<String[]>([
+  "insignia",
+  "insigniaType",
+  "year",
+  "no",
+  "issue",
+  "volumeNo",
+  "volume",
+  "section",
+  "page",
+  "receiveDate",
+  "dateAnnounce",
+  "refCommandNo",
+  "refCommandDate",
+  "createdFullName",
+  "createdAt",
+]);
+
+watch(visibleColumns, async (count: String[], prevCount: String[]) => {
+  await changeProfileColumns("insignia", count);
+});
+
+watch(insigniaId, (count: string, prevCount: string) => {
+  const insigniaTypeFilter = Ops.value.insigniaOptions.filter(
+    (r: DataOptionInsignia) => r.id == insigniaId.value
+  );
+  if (insigniaTypeFilter[0] != null) {
+    insigniaType.value = insigniaTypeFilter[0].typeName;
+  }
+});
+
+onMounted(async () => {
+  await fetchInsignia();
+  await fetchData();
+});
+
+const filterSelector = (val: any, update: Function, refData: string) => {
+  switch (refData) {
+    case "insigniaOptions":
+      update(() => {
+        Ops.value.insigniaOptions = OpsFilter.value.insigniaOptions.filter(
+          (v: DataOption) => v.name.indexOf(val) > -1
+        );
+      });
+      break;
+    default:
+      break;
+  }
+};
+
+const fetchInsignia = async () => {
+  loaderPage(true);
+  await http
+    .get(config.API.insignia)
+    .then((res) => {
+      const data = res.data.result;
+      let option: DataOptionInsignia[] = [];
+      data.map((r: any) => {
+        option.push({
+          id: r.id.toString(),
+          name: r.name.toString(),
+          typeName:
+            r.insigniaType == null ? null : r.insigniaType.name.toString(),
+        });
+      });
+      Ops.value.insigniaOptions = option;
+      OpsFilter.value.insigniaOptions = option;
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      loaderPage(false);
+    });
+};
+
+const fetchData = async () => {
+  if (profileId.value) {
+    loaderPage(true);
+    await http
+      .get(config.API.profileInsignId(profileId.value))
+      .then((res) => {
+        let data = res.data.result;
+        rows.value = [];
+        data.map((e: ResponseObject) => {
+          rows.value.push({
+            id: e.id,
+            insignia: e.insignia,
+            insigniaId: e.insigniaId,
+            insigniaType: e.insigniaType,
+            year: e.year,
+            no: e.no,
+            issue: e.issue,
+            volumeNo: e.volumeNo,
+            volume: e.volume,
+            section: e.section,
+            page: e.page,
+            receiveDate: new Date(e.receiveDate),
+            dateAnnounce: new Date(e.dateAnnounce),
+            refCommandNo: e.refCommandNo,
+            refCommandDate:
+              e.refCommandDate == null ? null : new Date(e.refCommandDate),
+            createdFullName: e.createdFullName,
+            createdAt: new Date(e.createdAt),
+          });
+        });
+      })
+      .catch((e) => {
+        messageError($q, e);
+      })
+      .finally(() => {
+        loaderPage(false);
+      });
+  }
+};
+
+/**
+ * กดดูข้อมูลก่อนหน้า
+ */
+const clickPrevious = async () => {
+  edit.value = false;
+  rowIndex.value -= 1;
+  await getData();
+  await checkRowPage();
+};
+
+/**
+ * กดดูข้อมูลต่อไป
+ */
+const clickNext = async () => {
+  edit.value = false;
+  rowIndex.value += 1;
+  await getData();
+  await checkRowPage();
+};
+
+/**
+ * กดดูข้อมูลต่อไป
+ */
+const getData = () => {
+  const row = rows.value[rowIndex.value];
+  insigniaId.value = row.insigniaId;
+  insigniaType.value = row.insigniaType;
+  year.value = row.year;
+  no.value = row.no;
+  issue.value = row.issue;
+  volumeNo.value = row.volumeNo;
+  volume.value = row.volume;
+  section.value = row.section;
+  page.value = row.page;
+  receiveDate.value = row.receiveDate;
+  dateAnnounce.value = row.dateAnnounce;
+  refCommandNo.value = row.refCommandNo;
+  refCommandDate.value = row.refCommandDate;
+  id.value = row.id;
+};
+
+/**
+ * เช็คปุ่มดูข้อมูล ย้อน กับ ต่อไป ว่าต้องแสดงไหม
+ */
+const checkRowPage = () => {
+  editRow.value = false;
+  next.value = true;
+  previous.value = true;
+  if (rowIndex.value + 1 >= rows.value.length) {
+    next.value = false;
+  }
+  if (rowIndex.value - 1 < 0) {
+    previous.value = false;
+  }
+};
+
+/**
+ * กดปุ่มแก้ไขใน dialog
+ */
+const clickEdit = () => {
+  editRow.value = false;
+  next.value = false;
+  previous.value = false;
+};
+
+/**
+ * กดปุ่มเพิ่มด้านบน table
+ */
+const clickAdd = async () => {
+  editRow.value = false;
+  await addData();
+};
+
+/**
+ * กดบันทึกใน dialog
+ */
+const clickSave = async () => {
+  myForm.value.validate().then(async (result: boolean) => {
+    if (result) {
+      if (modalEdit.value) {
+        await editData();
+      } else {
+        await saveData();
+      }
+    }
+  });
+};
+
+/**
+ * บันทึกเพิ่มข้อมูล
+ */
+const saveData = async () => {
+  if (profileId.value) {
+    loaderPage(true);
+    await http
+      .post(config.API.profileInsignId(profileId.value), {
+        id: id.value,
+        insigniaId: insigniaId.value,
+        insigniaType: insigniaType.value,
+        year: year.value,
+        no: no.value,
+        issue: issue.value,
+        volumeNo: volumeNo.value,
+        volume: volume.value,
+        section: section.value,
+        page: page.value,
+        receiveDate: dateToISO(receiveDate.value),
+        dateAnnounce: dateToISO(dateAnnounce.value),
+        refCommandNo: refCommandNo.value,
+        refCommandDate:
+          refCommandDate.value == null ? null : dateToISO(refCommandDate.value),
+      })
+      .then((res) => {
+        success($q, "บันทึกข้อมูลสำเร็จ");
+        modal.value = false;
+      })
+      .catch((e) => {
+        messageError($q, e);
+      })
+      .finally(async () => {
+        await fetchData();
+      });
+  }
+};
+
+/**
+ * บันทึกแก้ไขข้อมูล
+ */
+const editData = async () => {
+  loaderPage(true);
+  await http
+    .put(config.API.profileInsignId(id.value), {
+      id: id.value,
+      insigniaId: insigniaId.value,
+      insigniaType: insigniaType.value,
+      year: year.value,
+      no: no.value,
+      issue: issue.value,
+      volumeNo: volumeNo.value,
+      volume: volume.value,
+      section: section.value,
+      page: page.value,
+      receiveDate: dateToISO(receiveDate.value),
+      dateAnnounce: dateToISO(dateAnnounce.value),
+      refCommandNo: refCommandNo.value,
+      refCommandDate:
+        refCommandDate.value == null ? null : dateToISO(refCommandDate.value),
+    })
+    .then((res) => {
+      success($q, "บันทึกข้อมูลสำเร็จ");
+      modal.value = false;
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(async () => {
+      await fetchData();
+    });
+};
+
+/**
+ * ลบลบข้อมูล
+ */
+const clickDelete = async () => {
+  $q.dialog({
+    title: `ลบข้อมูล`,
+    message: `ต้องการทำการลบข้อมูลนี้ใช่หรือไม่?`,
+    cancel: "ยกเลิก",
+    ok: "ยืนยัน",
+    persistent: true,
+  })
+    .onOk(async () => {
+      loaderPage(true);
+      await http
+        .delete(config.API.profileInsignId(id.value))
+        .then((res) => {
+          success($q, "ลบข้อมูลสำเร็จ");
+          modal.value = false;
+        })
+        .catch((e) => {
+          messageError($q, e);
+        })
+        .finally(async () => {
+          await fetchData();
+        });
+    })
+    .onCancel(async () => {
+      await fetchData();
+    });
+};
+
+/**
+ * กดปิด dialog
+ */
+const clickClose = async () => {
+  if (editRow.value == true) {
+    $q.dialog({
+      title: `ข้อมูลมีการแก้ไข`,
+      message: `ยืนยันที่จะปิดโดยไม่บันทึกใช่หรือไม่?`,
+      cancel: "ยกเลิก",
+      ok: "ยืนยัน",
+      persistent: true,
+    }).onOk(async () => {
+      modal.value = false;
+      next.value = false;
+      previous.value = false;
+    });
+  } else {
+    modal.value = false;
+    next.value = false;
+    previous.value = false;
+  }
+};
+
+/**
+ * กดเลือกข้อมูลที่จะแก้ไข
+ * @param props ค่า props ใน row ที่เลือก
+ */
+const selectData = async (props: DataProps) => {
+  modalEdit.value = true;
+  modal.value = true;
+  edit.value = false;
+  rawItem.value = props.row;
+  rowIndex.value = props.rowIndex;
+  insigniaId.value = props.row.insigniaId;
+  insigniaType.value = props.row.insigniaType;
+  year.value = props.row.year;
+  no.value = props.row.no;
+  issue.value = props.row.issue;
+  volumeNo.value = props.row.volumeNo;
+  volume.value = props.row.volume;
+  section.value = props.row.section;
+  page.value = props.row.page;
+  receiveDate.value = props.row.receiveDate;
+  dateAnnounce.value = props.row.dateAnnounce;
+  refCommandNo.value = props.row.refCommandNo;
+  refCommandDate.value = props.row.refCommandDate;
+  id.value = props.row.id;
+  await checkRowPage();
+};
+
+/**
+ * กดปุ่มเพิ่มบน table
+ */
+const addData = () => {
+  modalEdit.value = false;
+  modal.value = true;
+  edit.value = true;
+  insigniaId.value = "";
+  insigniaType.value = "";
+  year.value = new Date().getFullYear();
+  no.value = "";
+  issue.value = "";
+  volumeNo.value = "";
+  volume.value = "";
+  section.value = "";
+  page.value = "";
+  receiveDate.value = new Date();
+  dateAnnounce.value = new Date();
+  refCommandNo.value = "";
+  refCommandDate.value = null;
+};
+
+/**
+ * ฟังก์ชันปุ่มยกเลิกการแก้ไขข้อมูล
+ */
+const clickCancel = async () => {
+  if (editRow.value == true) {
+    $q.dialog({
+      title: `ข้อมูลมีการแก้ไข`,
+      message: `ยืนยันยกเลิกการแก้ไขใช่หรือไม่?`,
+      cancel: "ยกเลิก",
+      ok: "ยืนยัน",
+      persistent: true,
+    }).onOk(async () => {
+      edit.value = false;
+      await checkRowPage();
+      await getData();
+    });
+  } else {
+    edit.value = false;
+    await checkRowPage();
+  }
+};
+
+/**
+ * เช็คว่ามีการแก้ไขข้อมูล
+ */
+const clickEditRow = () => {
+  editRow.value = true;
+};
+
+/**
+ * ฟังชั้นดูข้อมูลประวัติแก้ไขข้อมูลที่เลือก
+ * @param row ข้อมูล row ที่ดูประวัติการแก้ไข
+ */
+const clickHistory = async (row: RequestItemsObject) => {
+  modalHistory.value = true;
+  loaderPage(true);
+  await http
+    .get(config.API.profileInsignHisId(row.id))
+    .then((res) => {
+      let data = res.data.result;
+      rowsHistory.value = [];
+      data.map((e: ResponseObject) => {
+        rowsHistory.value.push({
+          id: e.id,
+          insignia: e.insignia,
+          insigniaId: e.insigniaId,
+          insigniaType: e.insigniaType,
+          year: e.year,
+          no: e.no,
+          issue: e.issue,
+          volumeNo: e.volumeNo,
+          volume: e.volume,
+          section: e.section,
+          page: e.page,
+          receiveDate: new Date(e.receiveDate),
+          dateAnnounce: new Date(e.dateAnnounce),
+          refCommandNo: e.refCommandNo,
+          refCommandDate:
+            e.refCommandDate == null ? null : new Date(e.refCommandDate),
+          createdFullName: e.createdFullName,
+          createdAt: new Date(e.createdAt),
+        });
+      });
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      loaderPage(false);
+    });
+};
+
+/**
+ * validate input ใน dialog
+ */
+const validateData = async () => {
+  checkValidate.value = true;
+  await myForm.value.validate().then((result: boolean) => {
+    if (result == false) {
+      checkValidate.value = false;
+    }
+  });
+};
+
+/**
+ * class จัดรูปแบบแสดงระหว่างข้อมูลที่แก้ไขหรือแสดงเฉยๆ
+ * @param val ข้อมูล input สำหรับแก้ไขหรือไม่
+ */
+const getClass = (val: boolean) => {
+  return {
+    "full-width inputgreen cursor-pointer": val,
+    "full-width cursor-pointer": !val,
+  };
+};
+const resetFilter = () => {};
+</script>
+<style lang="scss">
+.modalfix {
+  position: fixed !important;
+}
+</style>
diff --git a/src/components/information/Leave.vue b/src/components/information/Leave.vue
new file mode 100644
index 000000000..b2b5d0b39
--- /dev/null
+++ b/src/components/information/Leave.vue
@@ -0,0 +1,1270 @@
+<!-- card การลา -->
+<template>
+  <q-card flat bordered class="col-12 q-px-lg q-py-md">
+    <q-form ref="myForm">
+      <ProfileTable
+        :rows="rows"
+        :columns="columns"
+        :filter="filter"
+        :visible-columns="visibleColumns"
+        v-model:inputfilter="filter"
+        v-model:inputvisible="visibleColumns"
+        :add="clickAdd"
+        :addleave="clickAddLeave"
+        name="การลา"
+        icon="mdi-calendar-account"
+        iconAdd="mdi-calendar-account"
+        :statusEdit="statusEdit"
+      >
+        <template #columns="props">
+          <q-tr :props="props">
+            <q-td
+              v-for="col in props.cols"
+              :key="col.name"
+              :props="props"
+              class="cursor-pointer"
+              @click="selectData(props)"
+            >
+              <div v-if="col.name == 'no'">
+                {{ props.rowIndex + 1 }}
+              </div>
+              <div
+                v-else-if="col.name == 'dateStartLeave'"
+                class="table_ellipsis"
+              >
+                {{
+                  dateThaiRange([
+                    props.row.dateStartLeave,
+                    props.row.dateEndLeave,
+                  ])
+                }}
+              </div>
+              <div v-else-if="col.name == 'status'" class="table_ellipsis">
+                {{ statusLeave(col.value) }}
+                <!-- {{ col.value }} -->
+              </div>
+              <div
+                v-else-if="
+                  col.name == 'numLeave' ||
+                  col.name == 'sumLeave' ||
+                  col.name == 'totalLeave'
+                "
+                class="table_ellipsis"
+              >
+                {{ col.value == null ? "" : col.value.toLocaleString("en-US") }}
+              </div>
+              <div v-else class="table_ellipsis">
+                {{ col.value }}
+              </div>
+            </q-td>
+            <q-td auto-width>
+              <q-btn
+                color="info"
+                flat
+                dense
+                round
+                size="14px"
+                icon="mdi-history"
+                @click="clickHistory(props.row)"
+              />
+            </q-td>
+          </q-tr>
+        </template>
+      </ProfileTable>
+    </q-form>
+  </q-card>
+  <!-- popup Add Edit Leave -->
+  <q-dialog v-model="modalAdd" persistent>
+    <q-card style="width: 600px">
+      <q-form ref="myFormAdd">
+        <DialogHeader tittle="การลา" :close="clickCloseLeave" />
+        <q-separator />
+        <q-card-section class="q-p-sm">
+          <div
+            class="row col-12 items-center q-col-gutter-x-xs q-col-gutter-y-xs"
+          >
+            <div class="col-xs-6 col-sm-6 col-md-6">
+              <selector
+                :class="getClass(edit)"
+                :outlined="edit"
+                dense
+                lazy-rules
+                :readonly="!edit"
+                :borderless="!edit"
+                v-model="typeLeave"
+                :rules="[(val:string) => !!val || `${'กรุณาเลือกประเภทการลา'}`]"
+                hide-bottom-space
+                :label="`${'ประเภทการลา'}`"
+                @update:modelValue="clickEditRowType"
+                emit-value
+                map-options
+                option-label="name"
+                :options="typeLeaveOption"
+                option-value="id"
+                use-input
+                input-debounce="0"
+                @filter="(inputValue:string,
+                      doneFn:Function) => filterSelector(inputValue, doneFn,'typeLeaveOption'
+                      ) "
+              />
+            </div>
+            <div class="col-xs-6 col-sm-6 col-md-6">
+              <datepicker
+                menu-class-name="modalfix"
+                :readonly="!edit"
+                v-model="dateRange"
+                :locale="'th'"
+                autoApply
+                :enableTimePicker="false"
+                @update:modelValue="clickEditRow"
+                week-start="0"
+                range
+              >
+                <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="dateThaiRange(dateRange)"
+                    :rules="[(val:string) => !!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 class="col-xs-3 col-sm-3 col-md-3">
+              <q-input
+                :class="getClass(edit)"
+                :outlined="edit"
+                dense
+                lazy-rules
+                :readonly="!edit"
+                :borderless="!edit"
+                v-model="numLeave"
+                type="number"
+                :rules="[(val:string) => !!val || `${'กรุณากรอกจำนวนวันที่ลา'}`]"
+                hide-bottom-space
+                :label="`${'จำนวนวันที่ลา'}`"
+                @update:modelValue="clickEditRow"
+              />
+            </div>
+            <div class="col-xs-3 col-sm-3 col-md-3">
+              <q-input
+                :class="getClass(false)"
+                :outlined="true"
+                dense
+                lazy-rules
+                :readonly="false"
+                :borderless="false"
+                disable
+                v-model="numUsedLeave"
+                type="number"
+                :rules="[(val:string) => !!val || `${'กรุณากรอกจำนวนวันที่ลามาแล้ว'}`]"
+                hide-bottom-space
+                :label="`${'จำนวนวันที่ลามาแล้ว'}`"
+                @update:modelValue="clickEditRow"
+              />
+            </div>
+            <div class="col-xs-6 col-sm-6 col-md-6">
+              <selector
+                :class="getClass(edit)"
+                :outlined="edit"
+                dense
+                lazy-rules
+                :readonly="!edit"
+                :borderless="!edit"
+                v-model="statLeave"
+                :rules="[(val:string) => !!val || `${'กรุณาเลือกสถานะการลา'}`]"
+                hide-bottom-space
+                :label="`${'สถานะการลา'}`"
+                @update:modelValue="clickEditRow"
+                emit-value
+                map-options
+                option-label="name"
+                :options="statLeaveOption"
+                option-value="id"
+                use-input
+                input-debounce="0"
+                @filter="(inputValue:string,
+                      doneFn:Function) => filterSelector(inputValue, doneFn,'statLeaveOption'
+                      ) "
+              />
+            </div>
+            <div class="col-xs-12 col-sm-12 col-md-12">
+              <q-input
+                :class="getClass(edit)"
+                :outlined="edit"
+                dense
+                lazy-rules
+                :readonly="!edit"
+                :borderless="!edit"
+                v-model="reason"
+                type="textarea"
+                :rules="[(val:string) => !!val || `${'กรุณากรอกเหตุผล'}`]"
+                hide-bottom-space
+                :label="`${'เหตุผล'}`"
+                @update:modelValue="clickEditRow"
+              />
+            </div>
+          </div>
+        </q-card-section>
+        <q-separator />
+        <DialogFooter
+          :cancel="clickCancel"
+          :edit="clickEdit"
+          :save="clickSave"
+          :validate="validateData"
+          :clickNext="clickNext"
+          :clickPrevious="clickPrevious"
+          :clickDelete="clickDelete"
+          v-model:editvisible="edit"
+          v-model:next="next"
+          v-model:previous="previous"
+          v-model:modalEdit="modalEdit"
+        />
+      </q-form>
+    </q-card>
+  </q-dialog>
+  <!-- popup Edit window-->
+  <q-dialog v-model="modal" persistent>
+    <q-card style="width: 600px">
+      <q-form ref="myForm">
+        <DialogHeader tittle="การลา" :close="clickClose" />
+        <q-separator />
+        <q-card-section>
+          <div class="col-xs-12 col-sm-12 col-md-12">
+            <data-table
+              :rows="rowsTotal"
+              :columns="columnsTotal"
+              :filter="filterTotal"
+              :visible-columns="visibleColumnsTotal"
+              v-model:inputfilter="filterTotal"
+              v-model:inputvisible="visibleColumnsTotal"
+              :nornmalData="true"
+            >
+              <template #columns="props">
+                <q-tr :props="props" class="cursor-pointer">
+                  <q-td
+                    v-for="col in props.cols"
+                    :key="col.name"
+                    :props="props"
+                  >
+                    <div v-if="col.name == 'no'">
+                      {{ props.rowIndex + 1 }}
+                    </div>
+                    <div
+                      v-else-if="
+                        col.name == 'numLeave' ||
+                        col.name == 'sumLeave' ||
+                        col.name == 'totalLeave'
+                      "
+                      class="table_ellipsis"
+                    >
+                      {{
+                        col.value == null
+                          ? ""
+                          : col.value.toLocaleString("en-US")
+                      }}
+                    </div>
+                    <div v-else>
+                      {{ col.value }}
+                    </div>
+                  </q-td>
+                </q-tr>
+              </template>
+            </data-table>
+          </div>
+        </q-card-section>
+        <q-separator />
+      </q-form>
+    </q-card>
+  </q-dialog>
+  <HistoryTable
+    :rows="rowsHistory"
+    :columns="columnsHistory"
+    :filter="filterHistory"
+    :visible-columns="visibleColumnsHistory"
+    v-model:modal="modalHistory"
+    v-model:inputfilter="filterHistory"
+    v-model:inputvisible="visibleColumnsHistory"
+    v-model:tittle="tittleHistory"
+  >
+    <template #columns="props">
+      <q-tr :props="props">
+        <q-td v-for="col in props.cols" :key="col.name" :props="props">
+          <div v-if="col.name == 'no'">
+            {{ props.rowIndex + 1 }}
+          </div>
+          <div v-else-if="col.name == 'dateStartLeave'" class="table_ellipsis">
+            {{
+              dateThaiRange([props.row.dateStartLeave, props.row.dateEndLeave])
+            }}
+          </div>
+
+          <div
+            v-else-if="
+              col.name == 'numLeave' ||
+              col.name == 'sumLeave' ||
+              col.name == 'totalLeave'
+            "
+            class="table_ellipsis"
+          >
+            {{ col.value == null ? "" : col.value.toLocaleString("en-US") }}
+          </div>
+          <div v-else-if="col.name == 'status'" class="table_ellipsis">
+            {{ statusLeave(col.value) }}
+          </div>
+          <div v-else class="table_ellipsis">
+            {{ col.value }}
+          </div>
+        </q-td>
+      </q-tr>
+    </template>
+  </HistoryTable>
+</template>
+<script setup lang="ts">
+import { onMounted, ref, watch } from "vue";
+import { useRoute } from "vue-router";
+import { useCounterMixin } from "@/stores/mixin";
+import { useComponentProfileDataStore } from "@/components/information/store/store";
+import { useDataStore } from "@/stores/data";
+import ProfileTable from "@/components/information/Table.vue";
+import DialogHeader from "@/components/information/DialogHeader.vue";
+import DialogFooter from "@/components/information/DialogFooter.vue";
+import { useQuasar } from "quasar";
+import type {
+  RequestItemsObject,
+  RequestItemsTotalObject,
+  DataProps,
+} from "@/components/information/interface/request/Leave";
+import type {
+  ResponseObject,
+  ResponseTotalObject,
+} from "@/components/information/interface/response/Leave";
+import type {
+  DataOption,
+  DataOptionLeave,
+} from "@/components/information/interface/index/Main";
+import HistoryTable from "@/components/TableHistory.vue";
+import http from "@/plugins/http";
+import config from "@/app.config";
+import type { QTableProps } from "quasar";
+
+const props = defineProps({
+  statusEdit: {
+    type: Boolean,
+    required: true,
+  },
+});
+
+const $q = useQuasar();
+const store = useComponentProfileDataStore();
+const { profileData, changeProfileColumns } = store;
+const dataStore = useDataStore();
+const { loaderPage } = dataStore;
+const mixin = useCounterMixin();
+const {
+  date2Thai,
+  success,
+  messageError,
+  statusLeave,
+  dialogMessage,
+  dateToISO,
+} = mixin;
+const route = useRoute();
+
+const typeLeave = ref<string>("");
+const typeLeaveOption = ref<DataOptionLeave[]>([]);
+const typeLeaveOptionFilter = ref<DataOptionLeave[]>([]);
+
+const statLeave = ref<string>("");
+const statLeaveOption = ref<DataOption[]>([
+  { id: "approve", name: "ผ่านการอนุมัติ" },
+  { id: "reject", name: "ไม่ผ่านการอนุมัติ" },
+  { id: "cancel", name: "ยกเลิก" },
+  { id: "waitting", name: "รออนุมัติ" },
+]);
+const statLeaveOptionFilter = ref<DataOption[]>([
+  { id: "approve", name: "ผ่านการอนุมัติ" },
+  { id: "reject", name: "ไม่ผ่านการอนุมัติ" },
+  { id: "cancel", name: "ยกเลิก" },
+  { id: "waitting", name: "รออนุมัติ" },
+]);
+const dateRange = ref<[Date, Date]>([new Date(), new Date()]); //วันที่ ลา
+const numLeave = ref<number>(0); //วันที่ ลา
+const numUsedLeave = ref<number>(0); //วันที่ ลา
+const reason = ref<string>(""); //เหตุผล
+const id = ref<string>("");
+// const year = ref<number>(0);
+// const sickDay = ref<number>();
+// const personalDay = ref<number>();
+// const maternityDay = ref<number>();
+// const wifeDay = ref<number>();
+// const restDay = ref<number>();
+// const ordainDay = ref<number>();
+// const absentDay = ref<number>();
+// const studyDay = ref<number>();
+// const agencyDay = ref<number>();
+// const coupleDay = ref<number>();
+// const therapyDay = ref<number>();
+const myFormAdd = ref<any>(); //form data input
+const myForm = ref<any>(); //form data input
+const edit = ref<boolean>(true); //เช็คการกดปุ่มแก้ไขใน dialog
+const modal = ref<boolean>(false); //modal add detail
+const modalEdit = ref<boolean>(false); //modal ที่แสดงใช้สำหรับแก้ไขหรือไม่
+
+const modalAdd = ref<boolean>(false); //modal add detail
+// const rawItem = ref<RequestItemsObject>(); //ข้อมูลเดิมที่เลือกใน row นั้น
+const rowIndex = ref<number>(0); //indexข้อมูลเดิมที่เลือกใน row นั้น
+const previous = ref<boolean>(); //แสดงปุ่มดูข้อมูลก่อนหน้า
+const next = ref<boolean>(); //แสดงปุ่มดูข้อมูลต่อไป
+const editRow = ref<boolean>(false); //เช็คมีการแก้ไขข้อมูล
+const rowsHistory = ref<RequestItemsObject[]>([]); //select data history
+const tittleHistory = ref<string>("ประวัติแก้ไขการลา"); //
+const filterHistory = ref<string>(""); //search data table history
+const modalHistory = ref<boolean>(false); //modal ประวัติการแก้ไขข้อมูล
+const checkValidate = ref<boolean>(false); //validate data ผ่านหรือไม่
+const profileId = ref<string>(
+  route.params.id ? route.params.id.toString() : ""
+);
+const rows = ref<RequestItemsObject[]>([]);
+const filterTotal = ref<string>("");
+const rowsTotal = ref<RequestItemsTotalObject[]>([]); //select data history
+const filter = ref<string>(""); //search data table
+const visibleColumns = ref<String[]>([]);
+profileData.leave.columns.length == 0
+  ? (visibleColumns.value = [
+      "no",
+      "typeLeave",
+      "dateStartLeave",
+      "numLeave",
+      "sumLeave",
+      "totalLeave",
+      "status",
+      "reason",
+    ])
+  : (visibleColumns.value = profileData.leave.columns);
+const columns = ref<QTableProps["columns"]>([
+  {
+    name: "no",
+    align: "left",
+    label: "ลำดับ",
+    sortable: true,
+    field: "no",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "typeLeave",
+    align: "left",
+    label: "ประเภทการลา",
+    sortable: true,
+    field: "typeLeave",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "dateStartLeave",
+    align: "left",
+    label: "วัน เดือน ปี ที่ลา",
+    sortable: true,
+    field: "dateStartLeave",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "numLeave",
+    align: "right",
+    label: "จำนวนวันลา",
+    sortable: true,
+    field: "numLeave",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "sumLeave",
+    align: "right",
+    label: "ลามาแล้ว",
+    sortable: true,
+    field: "sumLeave",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "totalLeave",
+    align: "right",
+    label: "รวมเป็น",
+    sortable: true,
+    field: "totalLeave",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "status",
+    align: "left",
+    label: "สถานะ",
+    sortable: true,
+    field: "status",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "reason",
+    align: "right",
+    label: "เหตุผล",
+    sortable: true,
+    field: "reason",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+]);
+const columnsHistory = ref<QTableProps["columns"]>([
+  {
+    name: "no",
+    align: "left",
+    label: "ลำดับ",
+    sortable: true,
+    field: "no",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "typeLeave",
+    align: "left",
+    label: "ประเภทการลา",
+    sortable: true,
+    field: "typeLeave",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "dateStartLeave",
+    align: "left",
+    label: "วัน เดือน ปี ที่ลา",
+    sortable: true,
+    field: "dateStartLeave",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "numLeave",
+    align: "right",
+    label: "จำนวนวันลา",
+    sortable: true,
+    field: "numLeave",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "sumLeave",
+    align: "right",
+    label: "ลามาแล้ว",
+    sortable: true,
+    field: "sumLeave",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "totalLeave",
+    align: "right",
+    label: "รวมเป็น",
+    sortable: true,
+    field: "totalLeave",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "status",
+    align: "left",
+    label: "สถานะ",
+    sortable: true,
+    field: "status",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "reason",
+    align: "left",
+    label: "เหตุผล",
+    sortable: true,
+    field: "reason",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+]);
+const visibleColumnsHistory = ref<String[]>([
+  "no",
+  "typeLeave",
+  "dateStartLeave",
+  "numLeave",
+  "sumLeave",
+  "totalLeave",
+  "status",
+  "reason",
+]);
+const visibleColumnsTotal = ref<String[]>([
+  "typeLeave",
+  "limitLeave",
+  "totalLeave",
+  "remainLeave",
+]);
+const columnsTotal = ref<QTableProps["columns"]>([
+  {
+    name: "typeLeave",
+    align: "left",
+    label: "ประเภทการลา",
+    sortable: true,
+    field: "typeLeave",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "limitLeave",
+    align: "right",
+    label: "จำนวนวันที่ได้รับ",
+    sortable: true,
+    field: "limitLeave",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "totalLeave",
+    align: "right",
+    label: "จำนวนวันที่ใช้",
+    sortable: true,
+    field: "totalLeave",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "remainLeave",
+    align: "right",
+    label: "จำนวนวันที่เหลือ",
+    sortable: true,
+    field: "remainLeave",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+]);
+
+watch(visibleColumns, async (count: String[], prevCount: String[]) => {
+  await changeProfileColumns("leave", count);
+});
+
+onMounted(async () => {
+  await fetchData();
+});
+
+const fetchData = async () => {
+  rows.value = [];
+  if (profileId.value) {
+    loaderPage(true);
+    await http
+      .get(config.API.profileLeaveId(profileId.value))
+      .then((res) => {
+        const data = res.data.result;
+        //   console.log(data);
+        data.map((e: ResponseObject) => {
+          rows.value.push({
+            id: e.id,
+            typeLeave: e.typeLeave,
+            dateStartLeave: new Date(e.dateStartLeave),
+            dateEndLeave: new Date(e.dateEndLeave),
+            numLeave: e.numLeave,
+            sumLeave: e.sumLeave,
+            totalLeave: e.totalLeave,
+            status: e.status,
+            reason: e.reason,
+            typeLeaveId: e.typeLeaveId,
+          });
+        });
+      })
+      .catch((e) => {
+        messageError($q, e);
+      })
+      .finally(() => {
+        loaderPage(false);
+      });
+  }
+};
+
+const filterSelector = (val: any, update: Function, filtername: string) => {
+  switch (filtername) {
+    case "typeLeaveOption":
+      update(() => {
+        typeLeaveOption.value = typeLeaveOptionFilter.value.filter(
+          (v: DataOptionLeave) =>
+            v.name.toLowerCase().indexOf(val.toLowerCase()) > -1
+        );
+      });
+      break;
+    case "statLeaveOption":
+      update(() => {
+        statLeaveOption.value = statLeaveOptionFilter.value.filter(
+          (v: DataOption) =>
+            v.name.toLowerCase().indexOf(val.toLowerCase()) > -1
+        );
+      });
+      break;
+    default:
+      break;
+  }
+};
+
+const clickHistory = async (row: RequestItemsObject) => {
+  modalHistory.value = true;
+  loaderPage(true);
+  await http
+    .get(config.API.profileLeaveHisId(row.id))
+    .then((res) => {
+      let data = res.data.result;
+      rowsHistory.value = [];
+      data.map((e: ResponseObject) => {
+        rowsHistory.value.push({
+          id: e.id,
+          typeLeave: e.typeLeave,
+          dateStartLeave: new Date(e.dateStartLeave),
+          dateEndLeave: new Date(e.dateEndLeave),
+          numLeave: e.numLeave,
+          sumLeave: e.sumLeave,
+          totalLeave: e.totalLeave,
+          status: e.status,
+          reason: e.reason,
+          typeLeaveId: e.typeLeaveId,
+        });
+      });
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      loaderPage(false);
+    });
+};
+
+const clickEditRowType = () => {
+  const filter = typeLeaveOptionFilter.value.filter(
+    (v: DataOptionLeave) => v.id == typeLeave.value
+  );
+  if (filter.length > 0) {
+    numUsedLeave.value = filter[0].totalLeave;
+  }
+};
+
+/**
+ * เช็คว่ามีการแก้ไขข้อมูล
+ */
+const clickEditRow = () => {
+  editRow.value = true;
+};
+
+// /**
+//  * กดดูข้อมูลก่อนหน้า
+//  */
+const clickPrevious = async () => {
+  edit.value = false;
+  rowIndex.value -= 1;
+  await getData();
+  await checkRowPage();
+};
+
+// /**
+//  * กดดูข้อมูลต่อไป
+//  */
+const clickNext = async () => {
+  edit.value = false;
+  rowIndex.value += 1;
+  await getData();
+  await checkRowPage();
+};
+
+// /**
+//  * กดดูข้อมูลต่อไป
+//  */
+const getData = () => {
+  const row = rows.value[rowIndex.value];
+  //   year.value = row.year;
+  //   sickDay.value = row.sickDay;
+  //   personalDay.value = row.personalDay;
+  //   maternityDay.value = row.maternityDay;
+  //   wifeDay.value = row.wifeDay;
+  //   restDay.value = row.restDay;
+  //   ordainDay.value = row.ordainDay;
+  //   absentDay.value = row.absentDay;
+  //   studyDay.value = row.studyDay;
+  //   agencyDay.value = row.agencyDay;
+  //   coupleDay.value = row.coupleDay;
+  //   therapyDay.value = row.therapyDay;
+  id.value = row.id;
+  typeLeave.value = row.typeLeaveId;
+  statLeave.value = row.status;
+  reason.value = row.reason;
+  dateRange.value = [new Date(row.dateStartLeave), new Date(row.dateEndLeave)];
+  numLeave.value = row.numLeave;
+  numUsedLeave.value = row.sumLeave;
+};
+
+// /**
+//  * เช็คปุ่มดูข้อมูล ย้อน กับ ต่อไป ว่าต้องแสดงไหม
+//  */
+const checkRowPage = () => {
+  editRow.value = false;
+  next.value = true;
+  previous.value = true;
+  if (rowIndex.value + 1 >= rows.value.length) {
+    next.value = false;
+  }
+  if (rowIndex.value - 1 < 0) {
+    previous.value = false;
+  }
+};
+
+// /**
+//  * กดปุ่มแก้ไขใน dialog
+//  */
+const clickEdit = () => {
+  editRow.value = false;
+  next.value = false;
+  previous.value = false;
+};
+
+/**
+ * กดปุ่มเพิ่มด้านบน table
+ */
+const clickAdd = async () => {
+  editRow.value = false;
+  await addData();
+};
+
+const clickAddLeave = async () => {
+  editRow.value = false;
+  edit.value = true;
+  modalAdd.value = true;
+  modalEdit.value = false;
+  typeLeave.value = "";
+  statLeave.value = "";
+  reason.value = "";
+  dateRange.value = [new Date(), new Date()];
+  numLeave.value = 0;
+  numUsedLeave.value = 0;
+  await clickTotal();
+  if (rowsTotal.value.length > 0) {
+    // console.log(rowsTotal.value);
+    let data: DataOptionLeave[] = [];
+    rowsTotal.value.map((e: ResponseTotalObject) => {
+      data.push({
+        id: e.typeLeaveId,
+        name: e.typeLeave,
+        totalLeave: e.totalLeave,
+      });
+    });
+    typeLeaveOption.value = data;
+    typeLeaveOptionFilter.value = data;
+  }
+  //   await addData();
+};
+
+/**
+ * ฟังก์ชันปุ่มยกเลิกการแก้ไขข้อมูล
+ */
+const clickCancel = async () => {
+  if (editRow.value == true) {
+    dialogMessage(
+      $q,
+      `ข้อมูลมีการแก้ไข`,
+      `ยืนยันที่จะปิดโดยไม่บันทึกใช่หรือไม่?`,
+      "info",
+      "ยืนยัน",
+      "public",
+      () => {
+        edit.value = false;
+      },
+      undefined
+    );
+  } else {
+    edit.value = false;
+    await checkRowPage();
+  }
+};
+
+// /**
+//  * กดบันทึกใน dialog
+//  */
+const clickSave = async () => {
+  myFormAdd.value.validate().then(async (result: boolean) => {
+    if (result) {
+      if (modalEdit.value) {
+        await editData();
+      } else {
+        await saveData();
+      }
+    }
+  });
+};
+
+// /**
+//  * บันทึกเพิ่มข้อมูล
+//  */
+const saveData = async () => {
+  const sum = Number(numLeave.value) + Number(numUsedLeave.value);
+
+  if (profileId.value) {
+    loaderPage(true);
+    await http
+      .post(config.API.profileLeaveId(profileId.value), {
+        dateStartLeave: dateToISO(dateRange.value[0]),
+        dateEndLeave: dateToISO(dateRange.value[1]),
+        numLeave: numLeave.value,
+        sumLeave: numUsedLeave.value,
+        totalLeave: sum,
+        status: statLeave.value,
+        reason: reason.value,
+        typeLeaveId: typeLeave.value,
+      })
+      .then((res) => {
+        success($q, "บันทึกข้อมูลสำเร็จ");
+        modalAdd.value = false;
+      })
+      .catch((e) => {
+        messageError($q, e);
+      })
+      .finally(async () => {
+        await fetchData();
+      });
+  }
+};
+
+// /**
+//  * บันทึกแก้ไขข้อมูล
+//  */
+const editData = async () => {
+  const sum = Number(numLeave.value) + Number(numUsedLeave.value);
+
+  loaderPage(true);
+  await http
+    .put(config.API.profileLeaveId(id.value), {
+      dateStartLeave: dateToISO(dateRange.value[0]),
+      dateEndLeave: dateToISO(dateRange.value[1]),
+      numLeave: numLeave.value,
+      sumLeave: numUsedLeave.value,
+      totalLeave: sum,
+      status: statLeave.value,
+      reason: reason.value,
+      typeLeaveId: typeLeave.value,
+    })
+    .then((res) => {
+      success($q, "บันทึกข้อมูลสำเร็จ");
+      modalAdd.value = false;
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(async () => {
+      await fetchData();
+    });
+};
+
+const deleteData = async () => {
+  loaderPage(true);
+  await http
+    .delete(config.API.profileLeaveId(id.value))
+    .then((res) => {
+      success($q, "ลบข้อมูลสำเร็จ");
+      modalAdd.value = false;
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(async () => {
+      await fetchData();
+    });
+};
+
+// /**
+//  * ลบลบข้อมูล
+//  */
+const clickDelete = async () => {
+  dialogMessage(
+    $q,
+    `ลบข้อมูล`,
+    `ต้องการทำการลบข้อมูลนี้ใช่หรือไม่?`,
+    "delete",
+    "ยืนยัน",
+    "red",
+    async () => {
+      await deleteData();
+    },
+    async () => {
+      await fetchData();
+    }
+  );
+};
+const clickCloseLeave = async () => {
+  if (editRow.value == true) {
+    dialogMessage(
+      $q,
+      `ข้อมูลมีการแก้ไข`,
+      `ยืนยันที่จะปิดโดยไม่บันทึกใช่หรือไม่?`,
+      "info",
+      "ยืนยัน",
+      "public",
+      () => {
+        modalAdd.value = false;
+        next.value = false;
+        previous.value = false;
+      },
+      undefined
+    );
+  } else {
+    modalAdd.value = false;
+    next.value = false;
+    previous.value = false;
+  }
+};
+
+/**
+ * กดปิด dialog
+ */
+const clickClose = async () => {
+  if (editRow.value == true) {
+    dialogMessage(
+      $q,
+      `ข้อมูลมีการแก้ไข`,
+      `ยืนยันที่จะปิดโดยไม่บันทึกใช่หรือไม่?`,
+      "info",
+      "ยืนยัน",
+      "primary",
+      () => {
+        modal.value = false;
+        next.value = false;
+        previous.value = false;
+      },
+      undefined
+    );
+  } else {
+    modal.value = false;
+    next.value = false;
+    previous.value = false;
+  }
+};
+
+// /**
+//  * กดเลือกข้อมูลที่จะแก้ไข
+//  * @param props ค่า props ใน row ที่เลือก
+//  */
+const selectData = async (props: DataProps) => {
+  modalEdit.value = true;
+  //   modal.value = true;
+  modalAdd.value = true;
+  edit.value = false;
+  rowIndex.value = props.rowIndex;
+  id.value = props.row.id;
+
+  typeLeave.value = props.row.typeLeaveId;
+  statLeave.value = props.row.status;
+  reason.value = props.row.reason;
+  dateRange.value = [
+    new Date(props.row.dateStartLeave),
+    new Date(props.row.dateEndLeave),
+  ];
+  numLeave.value = props.row.numLeave;
+  numUsedLeave.value = props.row.sumLeave;
+  await clickTotal();
+  if (rowsTotal.value.length > 0) {
+    // console.log(rowsTotal.value);
+    let data: DataOptionLeave[] = [];
+    rowsTotal.value.map((e: ResponseTotalObject) => {
+      data.push({
+        id: e.typeLeaveId,
+        name: e.typeLeave,
+        totalLeave: e.totalLeave,
+      });
+    });
+    typeLeaveOption.value = data;
+    typeLeaveOptionFilter.value = data;
+  }
+  await checkRowPage();
+};
+
+/**
+ * กดปุ่มเพิ่มบน table
+ */
+const addData = async () => {
+  //   modalEdit.value = false;
+  modal.value = true;
+  //   edit.value = true;
+  await clickTotal();
+};
+
+// /**
+//  * ฟังก์ชันปุ่มยกเลิกการแก้ไขข้อมูล
+//  */
+// const clickCancel = async () => {
+//   if (editRow.value == true) {
+//     $q.dialog({
+//       title: `ข้อมูลมีการแก้ไข`,
+//       message: `ยืนยันยกเลิกการแก้ไขใช่หรือไม่?`,
+//       cancel: "ยกเลิก",
+//       ok: "ยืนยัน",
+//       persistent: true,
+//     }).onOk(async () => {
+//       edit.value = false;
+//       await checkRowPage();
+//       await getData();
+//     });
+//   } else {
+//     edit.value = false;
+//     await checkRowPage();
+//   }
+// };
+
+// /**
+//  * เช็คว่ามีการแก้ไขข้อมูล
+//  */
+// const clickEditRow = () => {
+//   editRow.value = true;
+// };
+
+/**
+ * ฟังชั้นดูข้อมูลประวัติแก้ไขข้อมูลที่เลือก
+ * @param row ข้อมูล row ที่ดูประวัติการแก้ไข
+ */
+const clickTotal = async () => {
+  rowsTotal.value = [];
+  if (profileId.value) {
+    loaderPage(true);
+    await http
+      .get(config.API.profileLeaveTotalId(profileId.value))
+      .then((res) => {
+        let data = res.data.result;
+        data.map((e: ResponseTotalObject) => {
+          rowsTotal.value.push({
+            typeLeaveId: e.typeLeaveId,
+            totalLeave: e.totalLeave,
+            limitLeave: e.limitLeave,
+            remainLeave: e.remainLeave,
+            typeLeave: e.typeLeave,
+          });
+        });
+      })
+      .catch((e) => {
+        messageError($q, e);
+      })
+      .finally(() => {
+        loaderPage(false);
+      });
+  }
+};
+
+// /**
+//  * validate input ใน dialog
+//  */
+const validateData = async () => {
+  checkValidate.value = true;
+  await myFormAdd.value.validate().then((result: boolean) => {
+    if (result == false) {
+      checkValidate.value = false;
+    }
+  });
+};
+
+// /**
+//  * class จัดรูปแบบแสดงระหว่างข้อมูลที่แก้ไขหรือแสดงเฉยๆ
+//  * @param val ข้อมูล input สำหรับแก้ไขหรือไม่
+//  */
+// const getClass = (val: boolean) => {
+//   return {
+//     "full-width inputgreen cursor-pointer": val,
+//     "full-width cursor-pointer": !val,
+//   };
+// };
+
+/**
+ * แปลงช่วงวันที่ถ้า2ค่าเป็นวันเดียวกันจะโชววันเดียวแต่ถ้าไม่เท่ากันจะแสดงเป็นช่วง
+ * @param val ช่วงวันที่
+ */
+const dateThaiRange = (val: [Date, Date]) => {
+  if (val === null) {
+  } else if (date2Thai(val[0]) === date2Thai(val[1])) {
+    return `${date2Thai(val[0])}`;
+  } else {
+    return `${date2Thai(val[0])} - ${date2Thai(val[1])} `;
+  }
+};
+
+/**
+ * class จัดรูปแบบแสดงระหว่างข้อมูลที่แก้ไขหรือแสดงเฉยๆ
+ * @param val ข้อมูล input สำหรับแก้ไขหรือไม่
+ */
+const getClass = (val: boolean) => {
+  return {
+    "full-width inputgreen cursor-pointer": val,
+    "full-width cursor-pointer": !val,
+  };
+};
+</script>
+<style lang="scss">
+.modalfix {
+  position: fixed !important;
+}
+</style>
diff --git a/src/components/information/Other.vue b/src/components/information/Other.vue
new file mode 100644
index 000000000..da69c2966
--- /dev/null
+++ b/src/components/information/Other.vue
@@ -0,0 +1,620 @@
+<!-- card อื่นๆ -->
+<template>
+  <q-card flat bordered class="col-12 q-px-lg q-py-md">
+    <q-form ref="myForm">
+      <ProfileTable
+        :rows="rows"
+        :columns="columns"
+        :filter="filter"
+        :visible-columns="visibleColumns"
+        v-model:inputfilter="filter"
+        v-model:inputvisible="visibleColumns"
+        :add="clickAdd"
+        name="อื่นๆ"
+        icon="mdi-bookmark"
+        :statusEdit="statusEdit"
+      >
+        <template #columns="props">
+          <q-tr :props="props">
+            <q-td
+              v-for="col in props.cols"
+              :key="col.name"
+              :props="props"
+              @click="selectData(props)"
+              class="cursor-pointer"
+            >
+              <div v-if="col.name == 'date'" class="table_ellipsis">
+                {{ date2Thai(col.value) }}
+              </div>
+              <div v-else class="table_ellipsis">
+                {{ col.value }}
+              </div>
+            </q-td>
+            <q-td auto-width>
+              <q-btn
+                color="info"
+                flat
+                dense
+                round
+                size="14px"
+                icon="mdi-history"
+                @click="clickHistory(props.row)"
+              />
+            </q-td>
+          </q-tr>
+        </template>
+      </ProfileTable>
+    </q-form>
+  </q-card>
+  <!-- popup Edit window-->
+  <q-dialog v-model="modal" persistent>
+    <q-card style="width: 600px">
+      <q-form ref="myForm">
+        <DialogHeader tittle="อื่นๆ" :close="clickClose" />
+        <q-separator />
+        <q-card-section class="q-p-sm">
+          <div
+            class="row col-12 items-center q-col-gutter-x-xs q-col-gutter-y-xs"
+          >
+            <div class="col-xs-6 col-sm-6 col-md-6">
+              <datepicker
+                menu-class-name="modalfix"
+                :readonly="!edit"
+                v-model="date"
+                :locale="'th'"
+                autoApply
+                :enableTimePicker="false"
+                @update:modelValue="clickEditRow"
+                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="date2Thai(date)"
+                    :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 class="col-xs-6 col-sm-6 col-md-6">
+              <q-input
+                :class="getClass(edit)"
+                :outlined="edit"
+                dense
+                lazy-rules
+                autogrow
+                :readonly="!edit"
+                :borderless="!edit"
+                v-model="detail"
+                :rules="[(val) => !!val || `${'กรุณากรอกรายละเอียด'}`]"
+                hide-bottom-space
+                :label="`${'รายละเอียด'}`"
+                @update:modelValue="clickEditRow"
+              />
+            </div>
+          </div>
+        </q-card-section>
+        <q-separator />
+        <DialogFooter
+          :cancel="clickCancel"
+          :edit="clickEdit"
+          :save="clickSave"
+          :validate="validateData"
+          :clickNext="clickNext"
+          :clickPrevious="clickPrevious"
+          :clickDelete="clickDelete"
+          v-model:editvisible="edit"
+          v-model:next="next"
+          v-model:previous="previous"
+          v-model:modalEdit="modalEdit"
+        />
+      </q-form>
+    </q-card>
+  </q-dialog>
+  <HistoryTable
+    :rows="rowsHistory"
+    :columns="columnsHistory"
+    :filter="filterHistory"
+    :visible-columns="visibleColumnsHistory"
+    v-model:modal="modalHistory"
+    v-model:inputfilter="filterHistory"
+    v-model:inputvisible="visibleColumnsHistory"
+    v-model:tittle="tittleHistory"
+  >
+    <template #columns="props">
+      <q-tr :props="props">
+        <q-td v-for="col in props.cols" :key="col.name" :props="props">
+          <div
+            v-if="col.name == 'date' || col.name == 'createdAt'"
+            class="table_ellipsis"
+          >
+            {{ date2Thai(col.value) }}
+          </div>
+          <div v-else class="table_ellipsis">
+            {{ col.value }}
+          </div>
+        </q-td>
+      </q-tr>
+    </template>
+  </HistoryTable>
+</template>
+<script setup lang="ts">
+import { onMounted, ref, watch } from "vue";
+import { useRoute } from "vue-router";
+import { useComponentProfileDataStore } from "@/components/information/store/store";
+import { useCounterMixin } from "@/stores/mixin";
+import { useDataStore } from "@/stores/data";
+import ProfileTable from "@/components/information/Table.vue";
+import DialogHeader from "@/components/information/DialogHeader.vue";
+import DialogFooter from "@/components/information/DialogFooter.vue";
+import { useQuasar } from "quasar";
+import type {
+  RequestItemsObject,
+  DataProps,
+} from "@/components/information/interface/request/Other";
+import type { ResponseObject } from "@/components/information/interface/response/Other";
+import HistoryTable from "@/components/TableHistory.vue";
+import http from "@/plugins/http";
+import config from "@/app.config";
+import type { QTableProps } from "quasar";
+
+const props = defineProps({
+  statusEdit: {
+    type: Boolean,
+    required: true,
+  },
+});
+
+const $q = useQuasar();
+const store = useComponentProfileDataStore();
+const { profileData, changeProfileColumns } = store;
+const dataStore = useDataStore();
+const { loaderPage } = dataStore;
+const mixin = useCounterMixin();
+const { date2Thai, success, messageError } = mixin;
+const route = useRoute();
+const id = ref<string>("");
+const date = ref<Date>(new Date());
+const detail = ref<string>();
+const myForm = ref<any>(); //form data input
+const edit = ref<boolean>(false); //เช็คการกดปุ่มแก้ไขใน dialog
+const modal = ref<boolean>(false); //modal add detail
+const modalEdit = ref<boolean>(false); //modal ที่แสดงใช้สำหรับแก้ไขหรือไม่
+const rawItem = ref<RequestItemsObject>(); //ข้อมูลเดิมที่เลือกใน row นั้น
+const rowIndex = ref<number>(0); //indexข้อมูลเดิมที่เลือกใน row นั้น
+const previous = ref<boolean>(); //แสดงปุ่มดูข้อมูลก่อนหน้า
+const next = ref<boolean>(); //แสดงปุ่มดูข้อมูลต่อไป
+const editRow = ref<boolean>(false); //เช็คมีการแก้ไขข้อมูล
+const rowsHistory = ref<RequestItemsObject[]>([]); //select data history
+const tittleHistory = ref<string>("ประวัติแก้ไขอื่นๆ"); //
+const filterHistory = ref<string>(""); //search data table history
+const modalHistory = ref<boolean>(false); //modal ประวัติการแก้ไขข้อมูล
+const checkValidate = ref<boolean>(false); //validate data ผ่านหรือไม่
+const profileId = ref<string>(
+  route.params.id ? route.params.id.toString() : ""
+);
+const rows = ref<RequestItemsObject[]>([]);
+const filter = ref<string>(""); //search data table
+const visibleColumns = ref<String[]>([]);
+profileData.other.columns.length == 0
+  ? (visibleColumns.value = ["date", "detail"])
+  : (visibleColumns.value = profileData.other.columns);
+const columns = ref<QTableProps["columns"]>([
+  {
+    name: "date",
+    align: "left",
+    label: "วันที่",
+    sortable: true,
+    field: "date",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px; width: 50px;",
+  },
+  {
+    name: "detail",
+    align: "left",
+    label: "รายละเอียด",
+    sortable: true,
+    field: "detail",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+]);
+const columnsHistory = ref<QTableProps["columns"]>([
+  {
+    name: "date",
+    align: "left",
+    label: "วันที่",
+    sortable: true,
+    field: "date",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px; width: 50px;",
+  },
+  {
+    name: "detail",
+    align: "left",
+    label: "รายละเอียด",
+    sortable: true,
+    field: "detail",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "createdFullName",
+    align: "left",
+    label: "ผู้ดำเนินการ",
+    sortable: true,
+    field: "createdFullName",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "createdAt",
+    align: "left",
+    label: "วันที่แก้ไข",
+    sortable: true,
+    field: "createdAt",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+]);
+const visibleColumnsHistory = ref<String[]>([
+  "date",
+  "detail",
+  "createdFullName",
+  "createdAt",
+]);
+
+watch(visibleColumns, async (count: String[], prevCount: String[]) => {
+  await changeProfileColumns("other", count);
+});
+
+onMounted(async () => {
+  await fetchData();
+});
+
+const fetchData = async () => {
+  if (profileId.value) {
+    loaderPage(true);
+    await http
+      .get(config.API.profileOtherId(profileId.value))
+      .then((res) => {
+        let data = res.data.result;
+        rows.value = [];
+        data.map((e: ResponseObject) => {
+          rows.value.push({
+            id: e.id,
+            date: new Date(e.date),
+            detail: e.detail,
+            createdFullName: e.createdFullName,
+            createdAt: new Date(e.createdAt),
+          });
+        });
+      })
+      .catch((e) => {
+        messageError($q, e);
+      })
+      .finally(() => {
+        loaderPage(false);
+      });
+  }
+};
+
+/**
+ * กดดูข้อมูลก่อนหน้า
+ */
+const clickPrevious = async () => {
+  edit.value = false;
+  rowIndex.value -= 1;
+  await getData();
+  await checkRowPage();
+};
+
+/**
+ * กดดูข้อมูลต่อไป
+ */
+const clickNext = async () => {
+  edit.value = false;
+  rowIndex.value += 1;
+  await getData();
+  await checkRowPage();
+};
+
+/**
+ * กดดูข้อมูลต่อไป
+ */
+const getData = () => {
+  const row = rows.value[rowIndex.value];
+  date.value = row.date;
+  detail.value = row.detail;
+  id.value = row.id;
+};
+
+/**
+ * เช็คปุ่มดูข้อมูล ย้อน กับ ต่อไป ว่าต้องแสดงไหม
+ */
+const checkRowPage = () => {
+  editRow.value = false;
+  next.value = true;
+  previous.value = true;
+  if (rowIndex.value + 1 >= rows.value.length) {
+    next.value = false;
+  }
+  if (rowIndex.value - 1 < 0) {
+    previous.value = false;
+  }
+};
+
+/**
+ * กดปุ่มแก้ไขใน dialog
+ */
+const clickEdit = () => {
+  editRow.value = false;
+  next.value = false;
+  previous.value = false;
+};
+
+/**
+ * กดปุ่มเพิ่มด้านบน table
+ */
+const clickAdd = async () => {
+  editRow.value = false;
+  await addData();
+};
+
+/**
+ * กดบันทึกใน dialog
+ */
+const clickSave = async () => {
+  myForm.value.validate().then(async (result: boolean) => {
+    if (result) {
+      if (modalEdit.value) {
+        await editData();
+      } else {
+        await saveData();
+      }
+    }
+  });
+};
+
+/**
+ * บันทึกเพิ่มข้อมูล
+ */
+const saveData = async () => {
+  if (profileId.value) {
+    loaderPage(true);
+    await http
+      .post(config.API.profileOtherId(profileId.value), {
+        id: id.value,
+        date: date.value,
+        detail: detail.value,
+      })
+      .then((res) => {
+        success($q, "บันทึกข้อมูลสำเร็จ");
+        modal.value = false;
+      })
+      .catch((e) => {
+        messageError($q, e);
+      })
+      .finally(async () => {
+        await fetchData();
+      });
+  }
+};
+
+/**
+ * บันทึกแก้ไขข้อมูล
+ */
+const editData = async () => {
+  loaderPage(true);
+  await http
+    .put(config.API.profileOtherId(id.value), {
+      id: id.value,
+      date: date.value,
+      detail: detail.value,
+    })
+    .then((res) => {
+      success($q, "บันทึกข้อมูลสำเร็จ");
+      modal.value = false;
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(async () => {
+      await fetchData();
+    });
+};
+
+/**
+ * ลบลบข้อมูล
+ */
+const clickDelete = async () => {
+  $q.dialog({
+    title: `ลบข้อมูล`,
+    message: `ต้องการทำการลบข้อมูลนี้ใช่หรือไม่?`,
+    cancel: "ยกเลิก",
+    ok: "ยืนยัน",
+    persistent: true,
+  })
+    .onOk(async () => {
+      loaderPage(true);
+      await http
+        .delete(config.API.profileOtherId(id.value))
+        .then((res) => {
+          success($q, "ลบข้อมูลสำเร็จ");
+          modal.value = false;
+        })
+        .catch((e) => {
+          messageError($q, e);
+        })
+        .finally(async () => {
+          await fetchData();
+        });
+    })
+    .onCancel(async () => {
+      await fetchData();
+    });
+};
+
+/**
+ * กดปิด dialog
+ */
+const clickClose = async () => {
+  if (editRow.value == true) {
+    $q.dialog({
+      title: `ข้อมูลมีการแก้ไข`,
+      message: `ยืนยันที่จะปิดโดยไม่บันทึกใช่หรือไม่?`,
+      cancel: "ยกเลิก",
+      ok: "ยืนยัน",
+      persistent: true,
+    }).onOk(async () => {
+      modal.value = false;
+      next.value = false;
+      previous.value = false;
+    });
+  } else {
+    modal.value = false;
+    next.value = false;
+    previous.value = false;
+  }
+};
+
+/**
+ * กดเลือกข้อมูลที่จะแก้ไข
+ * @param props ค่า props ใน row ที่เลือก
+ */
+const selectData = async (props: DataProps) => {
+  modalEdit.value = true;
+  modal.value = true;
+  edit.value = false;
+  rawItem.value = props.row;
+  rowIndex.value = props.rowIndex;
+  date.value = props.row.date;
+  detail.value = props.row.detail;
+  id.value = props.row.id;
+  await checkRowPage();
+};
+
+/**
+ * กดปุ่มเพิ่มบน table
+ */
+const addData = () => {
+  modalEdit.value = false;
+  modal.value = true;
+  edit.value = true;
+  date.value = new Date();
+  detail.value = "";
+};
+
+/**
+ * ฟังก์ชันปุ่มยกเลิกการแก้ไขข้อมูล
+ */
+const clickCancel = async () => {
+  if (editRow.value == true) {
+    $q.dialog({
+      title: `ข้อมูลมีการแก้ไข`,
+      message: `ยืนยันยกเลิกการแก้ไขใช่หรือไม่?`,
+      cancel: "ยกเลิก",
+      ok: "ยืนยัน",
+      persistent: true,
+    }).onOk(async () => {
+      edit.value = false;
+      await checkRowPage();
+      await getData();
+    });
+  } else {
+    edit.value = false;
+    await checkRowPage();
+  }
+};
+
+/**
+ * เช็คว่ามีการแก้ไขข้อมูล
+ */
+const clickEditRow = () => {
+  editRow.value = true;
+};
+
+/**
+ * ฟังชั้นดูข้อมูลประวัติแก้ไขข้อมูลที่เลือก
+ * @param row ข้อมูล row ที่ดูประวัติการแก้ไข
+ */
+const clickHistory = async (row: RequestItemsObject) => {
+  modalHistory.value = true;
+  loaderPage(true);
+  await http
+    .get(config.API.profileOtherHisId(row.id))
+    .then((res) => {
+      let data = res.data.result;
+      rowsHistory.value = [];
+      data.map((e: ResponseObject) => {
+        rowsHistory.value.push({
+          id: e.id,
+          date: e.date,
+          detail: e.detail,
+          createdFullName: e.createdFullName,
+          createdAt: new Date(e.createdAt),
+        });
+      });
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      loaderPage(false);
+    });
+};
+
+/**
+ * validate input ใน dialog
+ */
+const validateData = async () => {
+  checkValidate.value = true;
+  await myForm.value.validate().then((result: boolean) => {
+    if (result == false) {
+      checkValidate.value = false;
+    }
+  });
+};
+
+/**
+ * class จัดรูปแบบแสดงระหว่างข้อมูลที่แก้ไขหรือแสดงเฉยๆ
+ * @param val ข้อมูล input สำหรับแก้ไขหรือไม่
+ */
+const getClass = (val: boolean) => {
+  return {
+    "full-width inputgreen cursor-pointer": val,
+    "full-width cursor-pointer": !val,
+  };
+};
+</script>
diff --git a/src/components/information/Record.vue b/src/components/information/Record.vue
new file mode 100644
index 000000000..05d84fd76
--- /dev/null
+++ b/src/components/information/Record.vue
@@ -0,0 +1,827 @@
+<!-- card บันทึกวันที่ไม่ได้รับเงินเดือนหรือได้รับเงินเดือนไม่เต็มหรือวันที่มิได้ปฏิบัติหน้าที่อยู่ในเขตที่ได้มีประดาศใช้กฏอัยการศึก -->
+<template>
+  <q-card flat bordered class="col-12 q-px-lg q-py-md">
+    <q-form ref="myForm">
+      <ProfileTable
+        :rows="rows"
+        :columns="columns"
+        :filter="filter"
+        :visible-columns="visibleColumns"
+        v-model:inputfilter="filter"
+        v-model:inputvisible="visibleColumns"
+        :add="clickAdd"
+        name="วันที่มิได้ปฏิบัติหน้าที่อยู่ในเขตที่ได้มีประกาศใช้กฎอัยการศึก"
+        icon="mdi-calendar-remove"
+        :statusEdit="statusEdit"
+      >
+        <template #columns="props">
+          <q-tr :props="props">
+            <q-td
+              v-for="col in props.cols"
+              :key="col.name"
+              :props="props"
+              @click="selectData(props)"
+              class="cursor-pointer"
+            >
+              <div
+                v-if="col.name == 'date' || col.name == 'refCommandDate'"
+                class="table_ellipsis"
+              >
+                {{ col.value == null ? null : date2Thai(col.value) }}
+              </div>
+              <div v-else class="table_ellipsis">
+                {{ col.value }}
+              </div>
+            </q-td>
+            <q-td auto-width>
+              <q-btn
+                color="info"
+                flat
+                dense
+                round
+                size="14px"
+                icon="mdi-history"
+                @click="clickHistory(props.row)"
+              />
+            </q-td>
+          </q-tr>
+        </template>
+      </ProfileTable>
+    </q-form>
+  </q-card>
+  <!-- popup Edit window-->
+  <q-dialog v-model="modal" persistent>
+    <q-card style="width: 600px">
+      <q-form ref="myForm">
+        <DialogHeader
+          tittle="วันที่มิได้ปฏิบัติหน้าที่อยู่ในเขตที่ได้มีประกาศใช้กฎอัยการศึก"
+          :close="clickClose"
+        />
+        <q-separator />
+        <q-card-section class="q-p-sm">
+          <div
+            class="row col-12 items-center q-col-gutter-x-xs q-col-gutter-y-xs"
+          >
+            <div class="col-xs-6 col-sm-6 col-md-6">
+              <datepicker
+                menu-class-name="modalfix"
+                :readonly="!edit"
+                v-model="date"
+                :locale="'th'"
+                autoApply
+                :enableTimePicker="false"
+                @update:modelValue="clickEditRow"
+                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="date2Thai(date)"
+                    :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 class="col-6">
+              <q-input
+                :class="getClass(edit)"
+                :outlined="edit"
+                dense
+                autogrow
+                lazy-rules
+                :readonly="!edit"
+                :borderless="!edit"
+                v-model="reference"
+                :rules="[(val) => !!val || `${'กรุณากรอกเอกสารอ้างอิง'}`]"
+                hide-bottom-space
+                :label="`${'เอกสารอ้างอิง'}`"
+                @update:modelValue="clickEditRow"
+              />
+            </div>
+            <div class="col-12">
+              <q-input
+                :class="getClass(edit)"
+                :outlined="edit"
+                dense
+                autogrow
+                lazy-rules
+                :readonly="!edit"
+                :borderless="!edit"
+                v-model="detail"
+                :rules="[(val) => !!val || `${'กรุณากรอกรายละเอียด'}`]"
+                hide-bottom-space
+                :label="`${'รายละเอียด'}`"
+                @update:modelValue="clickEditRow"
+              />
+            </div>
+            <div class="col-xs-6 col-sm-6 col-md-6">
+              <q-input
+                :class="getClass(edit)"
+                :outlined="edit"
+                dense
+                lazy-rules
+                :readonly="!edit"
+                :borderless="!edit"
+                v-model="refCommandNo"
+                hide-bottom-space
+                :label="`${'เลขที่คำสั่ง'}`"
+                @update:modelValue="clickEditRow"
+              >
+                <template v-slot:append>
+                  <q-icon
+                    name="mdi-file"
+                    class="cursor-pointer"
+                    @click="resetFilter"
+                  />
+                </template>
+              </q-input>
+            </div>
+            <div class="col-xs-6 col-sm-6 col-md-6">
+              <datepicker
+                menu-class-name="modalfix"
+                :readonly="!edit"
+                v-model="refCommandDate"
+                :locale="'th'"
+                autoApply
+                :enableTimePicker="false"
+                @update:modelValue="clickEditRow"
+                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="
+                      refCommandDate == null ? null : date2Thai(refCommandDate)
+                    "
+                    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>
+        </q-card-section>
+        <q-separator />
+        <DialogFooter
+          :cancel="clickCancel"
+          :edit="clickEdit"
+          :save="clickSave"
+          :validate="validateData"
+          :clickNext="clickNext"
+          :clickPrevious="clickPrevious"
+          :clickDelete="clickDelete"
+          v-model:editvisible="edit"
+          v-model:next="next"
+          v-model:previous="previous"
+          v-model:modalEdit="modalEdit"
+        />
+      </q-form>
+    </q-card>
+  </q-dialog>
+  <HistoryTable
+    :rows="rowsHistory"
+    :columns="columnsHistory"
+    :filter="filterHistory"
+    :visible-columns="visibleColumnsHistory"
+    v-model:modal="modalHistory"
+    v-model:inputfilter="filterHistory"
+    v-model:inputvisible="visibleColumnsHistory"
+    v-model:tittle="tittleHistory"
+  >
+    <template #columns="props">
+      <q-tr :props="props">
+        <q-td v-for="col in props.cols" :key="col.name" :props="props">
+          <div
+            v-if="
+              col.name == 'date' ||
+              col.name == 'createdAt' ||
+              col.name == 'refCommandDate'
+            "
+            class="table_ellipsis"
+          >
+            {{ col.value == null ? null : date2Thai(col.value) }}
+          </div>
+          <div v-else class="table_ellipsis">
+            {{ col.value }}
+          </div>
+        </q-td>
+      </q-tr>
+    </template>
+  </HistoryTable>
+</template>
+<script setup lang="ts">
+import { onMounted, ref, watch } from "vue";
+import { useRoute } from "vue-router";
+import { useComponentProfileDataStore } from "@/components/information/store/store";
+import { useCounterMixin } from "@/stores/mixin";
+import { useDataStore } from "@/stores/data";
+import ProfileTable from "@/components/information/Table.vue";
+import DialogHeader from "@/components/information/DialogHeader.vue";
+import DialogFooter from "@/components/information/DialogFooter.vue";
+import { useQuasar } from "quasar";
+import type {
+  RequestItemsObject,
+  DataProps,
+} from "@/components/information/interface/request/Record";
+import type { ResponseObject } from "@/components/information/interface/response/Record";
+import HistoryTable from "@/components/TableHistory.vue";
+import http from "@/plugins/http";
+import config from "@/app.config";
+import type { QTableProps } from "quasar";
+
+const props = defineProps({
+  statusEdit: {
+    type: Boolean,
+    required: true,
+  },
+});
+
+const $q = useQuasar();
+const store = useComponentProfileDataStore();
+const { profileData, changeProfileColumns } = store;
+const dataStore = useDataStore();
+const { loaderPage } = dataStore;
+const mixin = useCounterMixin();
+const { date2Thai, success, dateToISO, messageError } = mixin;
+const route = useRoute();
+const id = ref<string>("");
+const date = ref<Date>(new Date());
+const detail = ref<string>();
+const reference = ref<string>();
+const refCommandNo = ref<string>();
+const refCommandDate = ref<Date | null>(new Date());
+const myForm = ref<any>(); //form data input
+const edit = ref<boolean>(false); //เช็คการกดปุ่มแก้ไขใน dialog
+const modal = ref<boolean>(false); //modal add detail
+const modalEdit = ref<boolean>(false); //modal ที่แสดงใช้สำหรับแก้ไขหรือไม่
+const rawItem = ref<RequestItemsObject>(); //ข้อมูลเดิมที่เลือกใน row นั้น
+const rowIndex = ref<number>(0); //indexข้อมูลเดิมที่เลือกใน row นั้น
+const previous = ref<boolean>(); //แสดงปุ่มดูข้อมูลก่อนหน้า
+const next = ref<boolean>(); //แสดงปุ่มดูข้อมูลต่อไป
+const editRow = ref<boolean>(false); //เช็คมีการแก้ไขข้อมูล
+const rowsHistory = ref<RequestItemsObject[]>([]); //select data history
+const tittleHistory = ref<string>(
+  "ประวัติแก้ไขวันที่มิได้ปฏิบัติหน้าที่อยู่ในเขตที่ได้มีประกาศใช้กฎอัยการศึก"
+);
+const filterHistory = ref<string>(""); //search data table history
+const modalHistory = ref<boolean>(false); //modal ประวัติการแก้ไขข้อมูล
+const profileId = ref<string>(
+  route.params.id ? route.params.id.toString() : ""
+);
+const checkValidate = ref<boolean>(false); //validate data ผ่านหรือไม่
+const rows = ref<RequestItemsObject[]>([]);
+const filter = ref<string>(""); //search data table
+const visibleColumns = ref<String[]>([]);
+profileData.record.columns.length == 0
+  ? (visibleColumns.value = [
+      "date",
+      "detail",
+      "reference",
+      "refCommandNo",
+      "refCommandDate",
+    ])
+  : (visibleColumns.value = profileData.record.columns);
+const columns = ref<QTableProps["columns"]>([
+  {
+    name: "date",
+    align: "left",
+    label: "วัน เดือน ปี",
+    sortable: true,
+    field: "date",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "reference",
+    align: "left",
+    label: "เอกสารอ้างอิง",
+    sortable: true,
+    field: "reference",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "detail",
+    align: "left",
+    label: "รายละเอียด",
+    sortable: true,
+    field: "detail",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "refCommandNo",
+    align: "left",
+    label: "เลขที่คำสั่ง",
+    sortable: true,
+    field: "refCommandNo",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "refCommandDate",
+    align: "left",
+    label: "เอกสารอ้างอิง (ลงวันที่)",
+    sortable: true,
+    field: "refCommandDate",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+]);
+const columnsHistory = ref<QTableProps["columns"]>([
+  {
+    name: "date",
+    align: "left",
+    label: "วัน เดือน ปี",
+    sortable: true,
+    field: "date",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "reference",
+    align: "left",
+    label: "เอกสารอ้างอิง",
+    sortable: true,
+    field: "reference",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "detail",
+    align: "left",
+    label: "รายละเอียด",
+    sortable: true,
+    field: "detail",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "refCommandNo",
+    align: "left",
+    label: "เลขที่คำสั่ง",
+    sortable: true,
+    field: "refCommandNo",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "refCommandDate",
+    align: "left",
+    label: "เอกสารอ้างอิง (ลงวันที่)",
+    sortable: true,
+    field: "refCommandDate",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "createdFullName",
+    align: "left",
+    label: "ผู้ดำเนินการ",
+    sortable: true,
+    field: "createdFullName",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "createdAt",
+    align: "left",
+    label: "วันที่แก้ไข",
+    sortable: true,
+    field: "createdAt",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+]);
+const visibleColumnsHistory = ref<String[]>([
+  "date",
+  "detail",
+  "reference",
+  "refCommandNo",
+  "refCommandDate",
+  "createdFullName",
+  "createdAt",
+]);
+
+watch(visibleColumns, async (count: String[], prevCount: String[]) => {
+  await changeProfileColumns("record", count);
+});
+
+onMounted(async () => {
+  await fetchData();
+});
+
+const fetchData = async () => {
+  if (profileId.value != "") {
+    loaderPage(true);
+    await http
+      .get(config.API.profileNopaidId(profileId.value))
+      .then((res) => {
+        let data = res.data.result;
+        rows.value = [];
+        data.map((e: ResponseObject) => {
+          rows.value.push({
+            id: e.id,
+            date: new Date(e.date),
+            detail: e.detail,
+            reference: e.reference,
+            refCommandNo: e.refCommandNo,
+            refCommandDate:
+              e.refCommandDate == null ? null : new Date(e.refCommandDate),
+            createdFullName: e.createdFullName,
+            createdAt: new Date(e.createdAt),
+          });
+        });
+      })
+      .catch((e) => {
+        messageError($q, e);
+      })
+      .finally(() => {
+        loaderPage(false);
+      });
+  }
+};
+
+/**
+ * กดดูข้อมูลก่อนหน้า
+ */
+const clickPrevious = async () => {
+  edit.value = false;
+  rowIndex.value -= 1;
+  await getData();
+  await checkRowPage();
+};
+
+/**
+ * กดดูข้อมูลต่อไป
+ */
+const clickNext = async () => {
+  edit.value = false;
+  rowIndex.value += 1;
+  await getData();
+  await checkRowPage();
+};
+
+/**
+ * กดดูข้อมูลต่อไป
+ */
+const getData = () => {
+  const row = rows.value[rowIndex.value];
+  date.value = row.date;
+  detail.value = row.detail;
+  reference.value = row.reference;
+  refCommandNo.value = row.refCommandNo;
+  refCommandDate.value = row.refCommandDate;
+  id.value = row.id;
+};
+
+/**
+ * เช็คปุ่มดูข้อมูล ย้อน กับ ต่อไป ว่าต้องแสดงไหม
+ */
+const checkRowPage = () => {
+  editRow.value = false;
+  next.value = true;
+  previous.value = true;
+  if (rowIndex.value + 1 >= rows.value.length) {
+    next.value = false;
+  }
+  if (rowIndex.value - 1 < 0) {
+    previous.value = false;
+  }
+};
+
+/**
+ * กดปุ่มแก้ไขใน dialog
+ */
+const clickEdit = () => {
+  editRow.value = false;
+  next.value = false;
+  previous.value = false;
+};
+
+/**
+ * กดปุ่มเพิ่มด้านบน table
+ */
+const clickAdd = async () => {
+  editRow.value = false;
+  await addData();
+};
+
+/**
+ * กดบันทึกใน dialog
+ */
+const clickSave = async () => {
+  myForm.value.validate().then(async (result: boolean) => {
+    if (result) {
+      if (modalEdit.value) {
+        await editData();
+      } else {
+        await saveData();
+      }
+    }
+  });
+};
+
+/**
+ * บันทึกเพิ่มข้อมูล
+ */
+const saveData = async () => {
+  if (profileId.value) {
+    loaderPage(true);
+    await http
+      .post(config.API.profileNopaidId(profileId.value), {
+        id: id.value,
+        date: dateToISO(date.value),
+        detail: detail.value,
+        reference: reference.value,
+        refCommandNo: refCommandNo.value,
+        refCommandDate:
+          refCommandDate.value == null ? null : dateToISO(refCommandDate.value),
+      })
+      .then((res) => {
+        success($q, "บันทึกข้อมูลสำเร็จ");
+        modal.value = false;
+      })
+      .catch((e) => {
+        messageError($q, e);
+      })
+      .finally(async () => {
+        await fetchData();
+      });
+  }
+};
+
+/**
+ * บันทึกแก้ไขข้อมูล
+ */
+const editData = async () => {
+  loaderPage(true);
+  await http
+    .put(config.API.profileNopaidId(id.value), {
+      id: id.value,
+      date: dateToISO(date.value),
+      detail: detail.value,
+      reference: reference.value,
+      refCommandNo: refCommandNo.value,
+      refCommandDate:
+        refCommandDate.value == null ? null : dateToISO(refCommandDate.value),
+    })
+    .then((res) => {
+      success($q, "บันทึกข้อมูลสำเร็จ");
+      modal.value = false;
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(async () => {
+      await fetchData();
+    });
+};
+
+/**
+ * ลบลบข้อมูล
+ */
+const clickDelete = async () => {
+  $q.dialog({
+    title: `ลบข้อมูล`,
+    message: `ต้องการทำการลบข้อมูลนี้ใช่หรือไม่?`,
+    cancel: "ยกเลิก",
+    ok: "ยืนยัน",
+    persistent: true,
+  })
+    .onOk(async () => {
+      loaderPage(true);
+      await http
+        .delete(config.API.profileNopaidId(id.value))
+        .then((res) => {
+          success($q, "ลบข้อมูลสำเร็จ");
+          modal.value = false;
+        })
+        .catch((e) => {
+          messageError($q, e);
+        })
+        .finally(async () => {
+          await fetchData();
+        });
+    })
+    .onCancel(async () => {
+      await fetchData();
+    });
+};
+
+/**
+ * กดปิด dialog
+ */
+const clickClose = async () => {
+  if (editRow.value == true) {
+    $q.dialog({
+      title: `ข้อมูลมีการแก้ไข`,
+      message: `ยืนยันที่จะปิดโดยไม่บันทึกใช่หรือไม่?`,
+      cancel: "ยกเลิก",
+      ok: "ยืนยัน",
+      persistent: true,
+    }).onOk(async () => {
+      modal.value = false;
+      next.value = false;
+      previous.value = false;
+    });
+  } else {
+    modal.value = false;
+    next.value = false;
+    previous.value = false;
+  }
+};
+
+/**
+ * กดเลือกข้อมูลที่จะแก้ไข
+ * @param props ค่า props ใน row ที่เลือก
+ */
+const selectData = async (props: DataProps) => {
+  modalEdit.value = true;
+  modal.value = true;
+  edit.value = false;
+  rawItem.value = props.row;
+  rowIndex.value = props.rowIndex;
+  date.value = props.row.date;
+  detail.value = props.row.detail;
+  reference.value = props.row.reference;
+  refCommandNo.value = props.row.refCommandNo;
+  refCommandDate.value = props.row.refCommandDate;
+  id.value = props.row.id;
+  await checkRowPage();
+};
+
+/**
+ * กดปุ่มเพิ่มบน table
+ */
+const addData = () => {
+  modalEdit.value = false;
+  modal.value = true;
+  edit.value = true;
+  date.value = new Date();
+  detail.value = "";
+  reference.value = "";
+  refCommandNo.value = "";
+  refCommandDate.value = null;
+};
+
+/**
+ * ฟังก์ชันปุ่มยกเลิกการแก้ไขข้อมูล
+ */
+const clickCancel = async () => {
+  if (editRow.value == true) {
+    $q.dialog({
+      title: `ข้อมูลมีการแก้ไข`,
+      message: `ยืนยันยกเลิกการแก้ไขใช่หรือไม่?`,
+      cancel: "ยกเลิก",
+      ok: "ยืนยัน",
+      persistent: true,
+    }).onOk(async () => {
+      edit.value = false;
+      await checkRowPage();
+      await getData();
+    });
+  } else {
+    edit.value = false;
+    await checkRowPage();
+  }
+};
+
+/**
+ * เช็คว่ามีการแก้ไขข้อมูล
+ */
+const clickEditRow = () => {
+  editRow.value = true;
+};
+
+/**
+ * ฟังชั้นดูข้อมูลประวัติแก้ไขข้อมูลที่เลือก
+ * @param row ข้อมูล row ที่ดูประวัติการแก้ไข
+ */
+const clickHistory = async (row: RequestItemsObject) => {
+  modalHistory.value = true;
+  loaderPage(true);
+  await http
+    .get(config.API.profileNopaidHisId(row.id))
+    .then((res) => {
+      let data = res.data.result;
+      rowsHistory.value = [];
+      data.map((e: ResponseObject) => {
+        rowsHistory.value.push({
+          id: e.id,
+          date: new Date(e.date),
+          detail: e.detail,
+          reference: e.reference,
+          refCommandNo: e.refCommandNo,
+          refCommandDate:
+            e.refCommandDate == null ? null : new Date(e.refCommandDate),
+          createdFullName: e.createdFullName,
+          createdAt: new Date(e.createdAt),
+        });
+      });
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      loaderPage(false);
+    });
+};
+
+/**
+ * validate input ใน dialog
+ */
+const validateData = async () => {
+  checkValidate.value = true;
+  await myForm.value.validate().then((result: boolean) => {
+    if (result == false) {
+      checkValidate.value = false;
+    }
+  });
+};
+
+/**
+ * class จัดรูปแบบแสดงระหว่างข้อมูลที่แก้ไขหรือแสดงเฉยๆ
+ * @param val ข้อมูล input สำหรับแก้ไขหรือไม่
+ */
+const getClass = (val: boolean) => {
+  return {
+    "full-width inputgreen cursor-pointer": val,
+    "full-width cursor-pointer": !val,
+  };
+};
+const resetFilter = () => {};
+</script>
+<style lang="scss">
+.modalfix {
+  position: fixed !important;
+}
+</style>
diff --git a/src/components/information/Salary.vue b/src/components/information/Salary.vue
new file mode 100644
index 000000000..766312977
--- /dev/null
+++ b/src/components/information/Salary.vue
@@ -0,0 +1,2070 @@
+<!-- card ตำแหน่ง/เงินเดือน -->
+<template>
+  <q-card flat bordered class="col-12 q-px-lg q-py-md">
+    <q-form ref="myForm">
+      <ProfileTable
+        :rows="rows"
+        :columns="columns"
+        :filter="filter"
+        :visible-columns="visibleColumns"
+        v-model:inputfilter="filter"
+        v-model:inputvisible="visibleColumns"
+        :add="clickAdd"
+        name="ตำแหน่ง/เงินเดือน"
+        icon="mdi-cash"
+        :statusEdit="statusEdit"
+      >
+        <template #columns="props">
+          <q-tr :props="props">
+            <q-td
+              v-for="col in props.cols"
+              :key="col.name"
+              :props="props"
+              @click="selectData(props)"
+              class="cursor-pointer"
+            >
+              <div v-if="col.name == 'date'" class="table_ellipsis">
+                {{ date2Thai(col.value) }}
+              </div>
+              <div
+                v-else-if="
+                  col.name == 'positionSalaryAmount' ||
+                  col.name == 'mouthSalaryAmount' ||
+                  col.name == 'amount'
+                "
+                class="table_ellipsis"
+              >
+                {{ col.value == null ? "" : col.value.toLocaleString("en-US") }}
+              </div>
+              <div v-else class="table_ellipsis">
+                {{ col.value }}
+              </div>
+            </q-td>
+            <q-td auto-width>
+              <q-btn
+                color="info"
+                flat
+                dense
+                round
+                size="14px"
+                icon="mdi-history"
+                @click="clickHistory(props.row)"
+              />
+            </q-td>
+          </q-tr>
+        </template>
+      </ProfileTable>
+    </q-form>
+  </q-card>
+  <!-- popup Edit window-->
+  <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
+                    v-if="edit"
+                    :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-tree
+                    v-else
+                    :nodes="nodesTree"
+                    dense
+                    node-key="id"
+                    v-model:expanded="expanded"
+                    no-selection-unset
+                    selected-color="primary"
+                    @update:selected="onSelected"
+                    default-expand-all
+                  >
+                    <template v-slot:default-header="prop">
+                      <div class="row items-center">
+                        <div
+                          class="text-primary"
+                          v-if="selected == prop.node.id"
+                        >
+                          {{ prop.node.label }}
+                        </div>
+                        <div v-else>
+                          {{ prop.node.label }}
+                        </div>
+                      </div>
+                    </template>
+                  </q-tree>
+                </q-scroll-area>
+              </q-card>
+            </div>
+            <div class="col-xs-12 col-sm-7">
+              <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-6 col-sm-6 col-md-6">
+                      <datepicker
+                        menu-class-name="modalfix"
+                        :readonly="!edit"
+                        v-model="date"
+                        :locale="'th'"
+                        autoApply
+                        :enableTimePicker="false"
+                        @update:modelValue="clickEditRow"
+                        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="date2Thai(date)"
+                            :rules="[
+                              (val:string) =>
+                                !!val ||
+                                `${'กรุณาเลือกวัน เดือน ปี'}`,
+                            ]"
+                            :label="`${'วัน เดือน ปี'}`"
+                            hide-bottom-space
+                          >
+                            <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 class="col-xs-6 col-sm-6 col-md-6">
+                      <selector
+                        :class="getClass(edit)"
+                        :outlined="edit"
+                        dense
+                        lazy-rules
+                        :readonly="!edit"
+                        :borderless="!edit"
+                        v-model="posNoId"
+                        :rules="[
+                          (val:string) => !!val || `${'กรุณาเลือกตำแหน่งเลขที่'}`,
+                        ]"
+                        :label="`${'ตำแหน่งเลขที่'}`"
+                        @update:modelValue="clickEditRow"
+                        emit-value
+                        map-options
+                        option-label="name"
+                        :options="posNoOptions"
+                        option-value="id"
+                        hide-bottom-space
+                        use-input
+                        input-debounce="0"
+                        @filter="(inputValue:any,
+                      doneFn:Function) => filterSelector(inputValue, doneFn,'1'
+                      ) "
+                      />
+                    </div>
+                    <div class="col-xs-6 col-sm-6 col-md-6">
+                      <selector
+                        :class="getClass(edit)"
+                        :outlined="edit"
+                        dense
+                        lazy-rules
+                        :readonly="!edit"
+                        :borderless="!edit"
+                        v-model="positionId"
+                        :rules="[(val:string) => !!val || `${'กรุณาเลือกตำแหน่ง'}`]"
+                        :label="`${'ตำแหน่ง'}`"
+                        @update:modelValue="clickEditRow"
+                        emit-value
+                        map-options
+                        option-label="name"
+                        :options="positionOptions"
+                        option-value="id"
+                        hide-bottom-space
+                        use-input
+                        input-debounce="0"
+                        @filter="(inputValue:any,
+                      doneFn:Function) => filterSelector(inputValue, doneFn,'2'
+                      ) "
+                      />
+                    </div>
+                    <div class="col-xs-6 col-sm-6 col-md-6">
+                      <!-- :rules="[(val:string) => !!val || `${'กรุณาเลือกด้าน/สาขา'}`]" -->
+                      <selector
+                        :class="getClass(edit)"
+                        :outlined="edit"
+                        dense
+                        lazy-rules
+                        :readonly="!edit"
+                        :borderless="!edit"
+                        v-model="positionPathSideId"
+                        :label="`${'ด้าน/สาขา'}`"
+                        @update:modelValue="clickEditRow"
+                        emit-value
+                        map-options
+                        option-label="name"
+                        :options="positionSideOptions"
+                        option-value="id"
+                        hide-bottom-space
+                        use-input
+                        input-debounce="0"
+                        @filter="(inputValue:any,
+                      doneFn:Function) => filterSelector(inputValue, doneFn,'3'
+                      ) "
+                      />
+                    </div>
+                    <div class="col-xs-6 col-sm-6 col-md-6">
+                      <selector
+                        :class="getClass(edit)"
+                        :outlined="edit"
+                        dense
+                        lazy-rules
+                        :readonly="!edit"
+                        :borderless="!edit"
+                        v-model="positionTypeId"
+                        :rules="[
+                          (val:string) => !!val || `${'กรุณาเลือกตำแหน่งประเภท'}`,
+                        ]"
+                        :label="`${'ตำแหน่งประเภท'}`"
+                        @update:modelValue="clickEditRow"
+                        emit-value
+                        map-options
+                        option-label="name"
+                        :options="positionTypeOptions"
+                        option-value="id"
+                        hide-bottom-space
+                        use-input
+                        input-debounce="0"
+                        @filter="(inputValue:any,
+                      doneFn:Function) => filterSelector(inputValue, doneFn,'4'
+                      ) "
+                      />
+                    </div>
+                    <div class="col-xs-6 col-sm-6 col-md-6">
+                      <selector
+                        :class="getClass(edit)"
+                        :outlined="edit"
+                        dense
+                        lazy-rules
+                        :readonly="!edit"
+                        :borderless="!edit"
+                        v-model="positionLineId"
+                        :rules="[(val:string) => !!val || `${'กรุณาเลือกสายงาน'}`]"
+                        :label="`${'สายงาน'}`"
+                        @update:modelValue="clickEditRow"
+                        emit-value
+                        map-options
+                        option-label="name"
+                        :options="positionLineOptions"
+                        option-value="id"
+                        hide-bottom-space
+                        use-input
+                        input-debounce="0"
+                        @filter="(inputValue:any,
+                      doneFn:Function) => filterSelector(inputValue, doneFn,'5'
+                      ) "
+                      />
+                    </div>
+                    <div class="col-xs-6 col-sm-6 col-md-6">
+                      <selector
+                        :class="getClass(edit)"
+                        :outlined="edit"
+                        dense
+                        lazy-rules
+                        :readonly="!edit"
+                        :borderless="!edit"
+                        v-model="positionLevelId"
+                        :rules="[(val:string) => !!val || `${'กรุณาเลือกระดับ'}`]"
+                        :label="`${'ระดับ'}`"
+                        @update:modelValue="clickEditRow"
+                        emit-value
+                        map-options
+                        option-label="name"
+                        :options="positionLevelOptions"
+                        option-value="id"
+                        hide-bottom-space
+                        use-input
+                        input-debounce="0"
+                        @filter="(inputValue:any,
+                      doneFn:Function) => filterSelector(inputValue, doneFn,'6'
+                      ) "
+                      />
+                    </div>
+                    <div class="col-xs-6 col-sm-6 col-md-6">
+                      <selector
+                        :class="getClass(edit)"
+                        :outlined="edit"
+                        dense
+                        lazy-rules
+                        :readonly="!edit"
+                        :borderless="!edit"
+                        v-model="positionExecutiveId"
+                        :label="`${'ตำแหน่งทางการบริหาร'}`"
+                        @update:modelValue="clickEditRow"
+                        emit-value
+                        map-options
+                        option-label="name"
+                        :options="positionExecutiveOptions"
+                        option-value="id"
+                        hide-bottom-space
+                        use-input
+                        input-debounce="0"
+                        @filter="(inputValue:any,
+                      doneFn:Function) => filterSelector(inputValue, doneFn,'7'
+                      ) "
+                      />
+                    </div>
+                    <div class="col-xs-4 col-sm-4 col-md-4">
+                      <q-input
+                        :class="getClass(edit)"
+                        :outlined="edit"
+                        dense
+                        lazy-rules
+                        :readonly="!edit"
+                        :borderless="!edit"
+                        v-model="amount"
+                        :rules="[(val:string) => !!val || `${'กรุณากรอกเงินเดือน'}`]"
+                        :label="`${'เงินเดือน'}`"
+                        @update:modelValue="clickEditRow"
+                        type="number"
+                        hide-bottom-space
+                      />
+                    </div>
+                    <div class="col-xs-4 col-sm-4 col-md-4">
+                      <q-input
+                        :class="getClass(edit)"
+                        :outlined="edit"
+                        dense
+                        lazy-rules
+                        :readonly="!edit"
+                        :borderless="!edit"
+                        v-model="positionSalaryAmount"
+                        :label="`${'เงินประจำตำแหน่ง'}`"
+                        @update:modelValue="clickEditRow"
+                        type="number"
+                        hide-bottom-space
+                      />
+                    </div>
+                    <div class="col-xs-4 col-sm-4 col-md-4">
+                      <q-input
+                        :class="getClass(edit)"
+                        :outlined="edit"
+                        dense
+                        lazy-rules
+                        :readonly="!edit"
+                        :borderless="!edit"
+                        v-model="mouthSalaryAmount"
+                        :label="`${'เงินค่าตอบแทนรายเดือน'}`"
+                        @update:modelValue="clickEditRow"
+                        type="number"
+                        hide-bottom-space
+                      />
+                    </div>
+                    <div class="col-xs-6 col-sm-6 col-md-6">
+                      <q-input
+                        :class="getClass(edit)"
+                        :outlined="edit"
+                        dense
+                        lazy-rules
+                        :readonly="!edit"
+                        :borderless="!edit"
+                        v-model="refCommandNo"
+                        hide-bottom-space
+                        :label="`${'เลขที่คำสั่ง'}`"
+                        :rules="[(val:string) => !!val || `${'กรุณากรอกเลขที่คำสั่ง'}`]"
+                        @update:modelValue="clickEditRow"
+                      >
+                        <template v-slot:append>
+                          <q-icon
+                            name="mdi-file"
+                            class="cursor-pointer"
+                            @click="resetFilter"
+                          />
+                        </template>
+                      </q-input>
+                    </div>
+                    <!-- <div class="col-xs-12 col-sm-12 col-md-12">
+                      <q-input
+                        :class="getClass(edit)"
+                        :outlined="edit"
+                        dense
+                        lazy-rules
+                        :readonly="!edit"
+                        :borderless="!edit"
+                        v-model="salaryClass"
+                        :rules="[
+                          (val:string) =>
+                            !!val || `${'กรุณากรอกตำแหน่ง (รายละเอียด)'}`,
+                        ]"
+                        :label="`${'ตำแหน่ง (รายละเอียด)'}`"
+                        @update:modelValue="clickEditRow"
+                        hide-bottom-space
+                        autogrow
+                      >
+                        <template v-slot:append>
+                          <q-btn
+                            color="info"
+                            flat
+                            dense
+                            round
+                            size="14px"
+                            icon="mdi-plus"
+                            @click="templateDetail"
+                            :disable="!edit"
+                          />
+                        </template>
+                      </q-input>
+                    </div> -->
+
+                    <div class="row col-xs-12 col-sm-12 col-md-12">
+                      <selector
+                        :class="getClass(edit)"
+                        :outlined="edit"
+                        dense
+                        lazy-rules
+                        :readonly="!edit"
+                        :borderless="!edit"
+                        v-model="refSelected"
+                        :label="`${'ต้นแบบ (template) เอกสารอ้างอิง'}`"
+                        @update:modelValue="clickEditRowRef"
+                        option-label="name"
+                        :options="refOptions"
+                        option-value="id"
+                        hide-bottom-space
+                        use-input
+                        input-debounce="0"
+                        @filter="(inputValue:any,
+                      doneFn:Function) => filterSelector(inputValue, doneFn,'8'
+                      ) "
+                      />
+                    </div>
+                    <div class="col-xs-12 col-sm-12 col-md-12">
+                      <q-input
+                        :class="getClass(edit)"
+                        :outlined="edit"
+                        dense
+                        lazy-rules
+                        :readonly="!edit"
+                        :borderless="!edit"
+                        v-model="salaryRef"
+                        :label="`${'เอกสารอ้างอิง'}`"
+                        @update:modelValue="clickEditRow"
+                        type="textarea"
+                        hide-bottom-space
+                      />
+                    </div>
+                  </div>
+                </q-scroll-area>
+              </q-card>
+            </div>
+          </div>
+        </q-card-section>
+        <q-separator />
+        <DialogFooter
+          :cancel="clickCancel"
+          :edit="clickEdit"
+          :save="clickSave"
+          :validate="validateData"
+          :clickNext="clickNext"
+          :clickPrevious="clickPrevious"
+          :clickDelete="clickDelete"
+          v-model:editvisible="edit"
+          v-model:next="next"
+          v-model:previous="previous"
+          v-model:modalEdit="modalEdit"
+        />
+      </q-form>
+    </q-card>
+  </q-dialog>
+  <HistoryTable
+    :rows="rowsHistory"
+    :columns="columnsHistory"
+    :filter="filterHistory"
+    :visible-columns="visibleColumnsHistory"
+    v-model:modal="modalHistory"
+    v-model:inputfilter="filterHistory"
+    v-model:inputvisible="visibleColumnsHistory"
+    v-model:tittle="tittleHistory"
+  >
+    <template #columns="props">
+      <q-tr :props="props">
+        <q-td v-for="col in props.cols" :key="col.name" :props="props">
+          <div
+            v-if="col.name == 'date' || col.name == 'createdAt'"
+            class="table_ellipsis"
+          >
+            {{ date2Thai(col.value) }}
+          </div>
+          <div
+            v-else-if="
+              col.name == 'positionSalaryAmount' ||
+              col.name == 'mouthSalaryAmount' ||
+              col.name == 'amount'
+            "
+            class="table_ellipsis"
+          >
+            {{ col.value == null ? "" : col.value.toLocaleString("en-US") }}
+          </div>
+          <div v-else class="table_ellipsis">
+            {{ col.value }}
+          </div>
+        </q-td>
+      </q-tr>
+    </template>
+  </HistoryTable>
+</template>
+<script setup lang="ts">
+import { onMounted, ref, watch } from "vue";
+import { useRoute } from "vue-router";
+import { useComponentProfileDataStore } from "@/components/information/store/store";
+import { useCounterMixin } from "@/stores/mixin";
+import { useDataStore } from "@/stores/data";
+import ProfileTable from "@/components/information/Table.vue";
+import DialogHeader from "@/components/information/DialogHeader.vue";
+import DialogFooter from "@/components/information/DialogFooter.vue";
+import { useQuasar } from "quasar";
+import type {
+  RequestItemsObject,
+  DataProps,
+} from "@/components/information/interface/request/Salary";
+import type { ResponseObject } from "@/components/information/interface/response/Salary";
+import type {
+  DataOption,
+  treeTab,
+} from "@/components/information/interface/index/Main";
+import HistoryTable from "@/components/TableHistory.vue";
+import http from "@/plugins/http";
+import config from "@/app.config";
+import type { QTableProps } from "quasar";
+
+const props = defineProps({
+  statusEdit: {
+    type: Boolean,
+    required: true,
+  },
+});
+
+const $q = useQuasar();
+const store = useComponentProfileDataStore();
+const { profileData, changeProfileColumns } = store;
+const dataStore = useDataStore();
+const { loaderPage } = dataStore;
+const mixin = useCounterMixin();
+const { date2Thai, success, dateToISO, messageError } = mixin;
+const route = useRoute();
+const id = ref<string>("");
+const date = ref<Date>(new Date());
+const amount = ref<number | null>(null);
+const positionSalaryAmount = ref<number | null>(null);
+const mouthSalaryAmount = ref<number | null>(null);
+const ocId = ref<string>();
+const positionId = ref<string>();
+const positionLineId = ref<string>();
+const positionPathSideId = ref<string>();
+const positionTypeId = ref<string>();
+const positionLevelId = ref<string>();
+const positionExecutiveId = ref<string>();
+const positionExecutiveSideId = ref<string>();
+const posNoId = ref<string>();
+const refCommandNo = ref<string>();
+const refCommandDate = ref<Date>(new Date());
+const ocOptions = ref<DataOption[]>([]);
+const positionOptions = ref<DataOption[]>([]);
+const positionLineOptions = ref<DataOption[]>([]);
+const positionSideOptions = ref<DataOption[]>([]);
+const positionTypeOptions = ref<DataOption[]>([]);
+const positionLevelOptions = ref<DataOption[]>([]);
+const positionExecutiveOptions = ref<DataOption[]>([]);
+const positionExecutiveSideOptions = ref<DataOption[]>([]);
+const posNoOptions = ref<DataOption[]>([]);
+const ocOptionsFilter = ref<DataOption[]>([]);
+const positionOptionsFilter = ref<DataOption[]>([]);
+const positionLineOptionsFilter = ref<DataOption[]>([]);
+const positionSideOptionsFilter = ref<DataOption[]>([]);
+const positionTypeOptionsFilter = ref<DataOption[]>([]);
+const positionLevelOptionsFilter = ref<DataOption[]>([]);
+const positionExecutiveOptionsFilter = ref<DataOption[]>([]);
+const positionExecutiveSideOptionsFilter = ref<DataOption[]>([]);
+const posNoOptionsFilter = ref<DataOption[]>([]);
+const search = ref<string>("");
+const expanded = ref<string[]>([]);
+const selected = ref<string>("");
+const nodesTree = ref<treeTab[]>([]);
+const refSelected = ref<DataOption | null>(null);
+const refOptions = ref<DataOption[]>([
+  {
+    id: "17",
+    name: "****************  ข้าราชการสามัญ  **********************",
+    disable: true,
+  },
+  {
+    id: "18",
+    name: "รักษาการในตำแหน่ง {ตำแหน่ง} ตั้งแต่ {วัน} {เดือน} {พ.ศ.} ถึงวันที่ {วัน} {เดือน} {พ.ศ.} คำสั่ง กทม.ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+  },
+  {
+    id: "19",
+    name: "ช่วยราชการ หน่วนงาน {สังกัด} ตั้งแต่ {วัน} {เดือน} {พ.ศ.} ถึงวันที่ {วัน} {เดือน} {พ.ศ.} คำสั่ง กทม.ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+  },
+  {
+    id: "20",
+    name: "รับโอน {ตำแหน่งประเภท} จากตำแหน่ง {ตำแหน่ง} ระดับ {ระดับ} สังกัด {สังกัด} ตำแหน่งเลขที่ {ตำแหน่งเลขที่} เงินเดือน {เงินเดือน} เป็นตำแหน่ง {ตำแหน่ง} ระดับ {ระดับ} สังกัด {สังกัด} ตำแหน่งเลขที่ {ตำแหน่งเลขที่} เงินเดือน {เงินเดือน} คำสั่ง กทม.ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+  },
+  {
+    id: "21",
+    name: "เลื่อนระดับ {ประเภทตำแหน่ง} จาก ตำแหน่งเลขที่ {ตำแหน่งเลขที่เดิม} ตำแหน่ง {ตำแหน่งเดิม} ระดับ {ระดับเดิม} {สำนักเดิม} เงินเดือน {เงินเดือนเดิม} เป็น ตำแหน่งเลขที่ {ตำแหน่งเลขที่ใหม่} ตำแหน่ง {ตำแหน่งใหม่} ระดับ {ระดับใหม่} {สำนักใหม่} เงินเดือน {เงินเดือนใหม่} คำสั่ง กทม.ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+  },
+  {
+    id: "0",
+    name: "****************  ครู  **********************",
+    disable: true,
+  },
+  {
+    id: "1",
+    name: "บรรจุและแต่งตั้งผู้ผ่านการคัดเลือกได้วุฒิ  {วุฒิ} คำสั่ง กทม. ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+  },
+  {
+    id: "2",
+    name: "เลื่อนเงินเดือน (1 ขั้น) คำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+  },
+  { id: "3", name: "ปรับอัตราเงินเดือนครู บัญชีใหม่ {พ.ศ.}" },
+  {
+    id: "4",
+    name: "ปรับให้เข้าระดับและขั้นเงินเดือนตามบัญชีอัตราเงินเดือนข้าราชการพลเรือน บัญชี ก. ท้ายพระราชบัญญัติระเบียบข้าราชการพลเรือน(ฉบับที่6) พ.ศ.{ปี}",
+  },
+  {
+    id: "5",
+    name: "ปรับอัตราเงินเดือน ตามบัญชี ข. ท้าย พ.ร.บ.ระเบียบข้าราชการพลเรือน(ฉบับที่ ) พ.ศ.{ปี}",
+  },
+  {
+    id: "6",
+    name: "ปรับเงินเดือนตาม พ.ร.บ.เงินเดือนฯ (ฉบับที่ ) {พ.ศ.} คำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+  },
+  {
+    id: "7",
+    name: "ปรับเงินเดือนตาม พ.ร.ฎ.การปรับเงินเดือนขั้นต่ำขั้นสูงของข้าราชการสามัญฯ {พ.ศ.}  คำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+  },
+  {
+    id: "8",
+    name: "ปรับอัตราเงินเดือนตามพระราชกฤษฎีกา การปรับอัตราเงินเดือนของข้าราชการ {พ.ศ.}",
+  },
+  {
+    id: "9",
+    name: "ปรับอัตราเงินเดือนตามหนังสือ ก.ค.ศ.ด่วนมาก ที่ / ลว. 4 ธ.ค. 2555 (ปรับตามคุณวุฒิ) คำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+  },
+  {
+    id: "10",
+    name: "แต่งตั้งข้าราชการ คำสั่ง คำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+  },
+  {
+    id: "11",
+    name: "การแต่งตั้งข้าราชการสามัญ กทม.ฯ ตาม พรฎ.ระเบียบข้าราชการสามัญ กทม. พ.ศ. ดำรงตำแหน่งฯ ตาม พรบ.ระเบียบข้าราชการกทม.ฯ พ.ศ. คำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+  },
+  {
+    id: "12",
+    name: "แต่งตั้งครูผู้ช่วยให้ดำรงตำแหน่งครู คำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+  },
+  {
+    id: "13",
+    name: "ได้รับเงินเดือนสูงกว่าหรือต่ำกว่าขั้นต่ำฯ คำสั่ง กทม. ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+  },
+  {
+    id: "14",
+    name: "ได้รับเงินเดือนสูงกว่าขั้นสูงของอันดับและเลื่อนขั้นเงินเดือน คำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+  },
+  {
+    id: "15",
+    name: "ให้ข้าราชการสามัญ กทม. มีวิทยฐานะ {วิทยฐานะ} และรับเงินเดือนอันดับ {คศ.} คำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+  },
+  { id: "16", name: "มาตรา 9 แห่ง พรฎ.ระเบียบข้าราชการสามัญ กทม. {พ.ศ}" },
+  {
+    id: "21",
+    name: "****************  ลูกจ้าง  **********************",
+    disable: true,
+  },
+  {
+    id: "22",
+    name: "จ้างและแต่งตั้งลูกจ้างประจำ คำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+  },
+  {
+    id: "23",
+    name: "เลื่อนค่าจ้างตามคำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+  },
+  {
+    id: "24",
+    name: "ได้รับอัตราค่าจ้างสูงกว่าอัตราค่าจ้างขั้นสูงของตำแหน่งที่ได้รับแต่งตั้งในแต่ละระดับ ตามคำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+  },
+  {
+    id: "25",
+    name: "แก้ไขคำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+  },
+  {
+    id: "26",
+    name: "ยกเลิกคำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+  },
+  {
+    id: "27",
+    name: "แต่งตั้งลูกจ้างประจำตามมาตรฐานกำหนดตำแหน่งฯ ตามคำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+  },
+  {
+    id: "28",
+    name: "แต่งตั้งลูกจ้างประจำ ตามคำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+  },
+  { id: "29", name: "ไม่เลื่อนขั้นค่าจ้าง เนื่องจาก" },
+  {
+    id: "30",
+    name: "ได้รับเงินตอบแทนพิเศษร้อยละ {} คำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+  },
+  {
+    id: "31",
+    name: "ปรับอัตราค่าจ้างลูกจ้างประจำกรุงเทพมหานคร ตามข้อบังคับกรุงเทพมหานครว่าด้วยการกำหนดอัตราค่าจ้างขั้นต่ำสุดและสูงสุดของลูกจ้าง พ.ศ. 2557",
+  },
+  {
+    id: "32",
+    name: "ปรับอัตราค่าจ้างลูกจ้างประจำกรุงเทพมหานครตามข้อบังคับกรุงเทพมหานครว่าด้วยการกำหนดอัตราค่าจ้างขั้นต่ำสุดและสูงสุดของลูกจ้าง (ฉบับที่ {}) พ.ศ. 2557",
+  },
+  {
+    id: "33",
+    name: "ปรับอัตราค่าจ้าง ตามหนังสือกระทรวงการคลังฯ ที่ กค 0428/ว 47 ลว. 29 พ.ค. 2558 และข้อบังคับ กทม. ว่าด้วยการกำหนดอัตราค่าจ้างฯ ตั้งแต่วันที่ 1 ธ.ค. 2557 ข้อ {} ตามคำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+  },
+]);
+const refOptionsFilter = ref<DataOption[]>([
+  {
+    id: "17",
+    name: "****************  ข้าราชการสามัญ  **********************",
+    disable: true,
+  },
+  {
+    id: "18",
+    name: "รักษาการในตำแหน่ง {ตำแหน่ง} ตั้งแต่ {วัน} {เดือน} {พ.ศ.} ถึงวันที่ {วัน} {เดือน} {พ.ศ.} คำสั่ง กทม.ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+  },
+  {
+    id: "19",
+    name: "ช่วยราชการ หน่วนงาน {สังกัด} ตั้งแต่ {วัน} {เดือน} {พ.ศ.} ถึงวันที่ {วัน} {เดือน} {พ.ศ.} คำสั่ง กทม.ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+  },
+  {
+    id: "20",
+    name: "รับโอน {ตำแหน่งประเภท} จากตำแหน่ง {ตำแหน่ง} ระดับ {ระดับ} สังกัด {สังกัด} ตำแหน่งเลขที่ {ตำแหน่งเลขที่} เงินเดือน {เงินเดือน} เป็นตำแหน่ง {ตำแหน่ง} ระดับ {ระดับ} สังกัด {สังกัด} ตำแหน่งเลขที่ {ตำแหน่งเลขที่} เงินเดือน {เงินเดือน} คำสั่ง กทม.ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+  },
+  {
+    id: "0",
+    name: "****************  ครู  **********************",
+    disable: true,
+  },
+  {
+    id: "1",
+    name: "บรรจุและแต่งตั้งผู้ผ่านการคัดเลือกได้วุฒิ  {วุฒิ} คำสั่ง กทม. ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+  },
+  {
+    id: "2",
+    name: "เลื่อนเงินเดือน (1 ขั้น) คำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+  },
+  { id: "3", name: "ปรับอัตราเงินเดือนครู บัญชีใหม่ {พ.ศ.}" },
+  {
+    id: "4",
+    name: "ปรับให้เข้าระดับและขั้นเงินเดือนตามบัญชีอัตราเงินเดือนข้าราชการพลเรือน บัญชี ก. ท้ายพระราชบัญญัติระเบียบข้าราชการพลเรือน(ฉบับที่6) พ.ศ.{ปี}",
+  },
+  {
+    id: "5",
+    name: "ปรับอัตราเงินเดือน ตามบัญชี ข. ท้าย พ.ร.บ.ระเบียบข้าราชการพลเรือน(ฉบับที่ ) พ.ศ.{ปี}",
+  },
+  {
+    id: "6",
+    name: "ปรับเงินเดือนตาม พ.ร.บ.เงินเดือนฯ (ฉบับที่ ) {พ.ศ.} คำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+  },
+  {
+    id: "7",
+    name: "ปรับเงินเดือนตาม พ.ร.ฎ.การปรับเงินเดือนขั้นต่ำขั้นสูงของข้าราชการสามัญฯ {พ.ศ.}  คำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+  },
+  {
+    id: "8",
+    name: "ปรับอัตราเงินเดือนตามพระราชกฤษฎีกา การปรับอัตราเงินเดือนของข้าราชการ {พ.ศ.}",
+  },
+  {
+    id: "9",
+    name: "ปรับอัตราเงินเดือนตามหนังสือ ก.ค.ศ.ด่วนมาก ที่ / ลว. 4 ธ.ค. 2555 (ปรับตามคุณวุฒิ) คำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+  },
+  {
+    id: "10",
+    name: "แต่งตั้งข้าราชการ คำสั่ง คำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+  },
+  {
+    id: "11",
+    name: "การแต่งตั้งข้าราชการสามัญ กทม.ฯ ตาม พรฎ.ระเบียบข้าราชการสามัญ กทม. พ.ศ. ดำรงตำแหน่งฯ ตาม พรบ.ระเบียบข้าราชการกทม.ฯ พ.ศ. คำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+  },
+  {
+    id: "12",
+    name: "แต่งตั้งครูผู้ช่วยให้ดำรงตำแหน่งครู คำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+  },
+  {
+    id: "13",
+    name: "ได้รับเงินเดือนสูงกว่าหรือต่ำกว่าขั้นต่ำฯ คำสั่ง กทม. ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+  },
+  {
+    id: "14",
+    name: "ได้รับเงินเดือนสูงกว่าขั้นสูงของอันดับและเลื่อนขั้นเงินเดือน คำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+  },
+  {
+    id: "15",
+    name: "ให้ข้าราชการสามัญ กทม. มีวิทยฐานะ {วิทยฐานะ} และรับเงินเดือนอันดับ {คศ.} คำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+  },
+  { id: "16", name: "มาตรา 9 แห่ง พรฎ.ระเบียบข้าราชการสามัญ กทม. {พ.ศ}" },
+  {
+    id: "21",
+    name: "****************  ลูกจ้าง  **********************",
+    disable: true,
+  },
+  {
+    id: "22",
+    name: "จ้างและแต่งตั้งลูกจ้างประจำ คำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+  },
+  {
+    id: "23",
+    name: "เลื่อนค่าจ้างตามคำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+  },
+  {
+    id: "24",
+    name: "ได้รับอัตราค่าจ้างสูงกว่าอัตราค่าจ้างขั้นสูงของตำแหน่งที่ได้รับแต่งตั้งในแต่ละระดับ ตามคำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+  },
+  {
+    id: "25",
+    name: "แก้ไขคำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+  },
+  {
+    id: "26",
+    name: "ยกเลิกคำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+  },
+  {
+    id: "27",
+    name: "แต่งตั้งลูกจ้างประจำตามมาตรฐานกำหนดตำแหน่งฯ ตามคำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+  },
+  {
+    id: "28",
+    name: "แต่งตั้งลูกจ้างประจำ ตามคำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+  },
+  { id: "29", name: "ไม่เลื่อนขั้นค่าจ้าง เนื่องจาก" },
+  {
+    id: "30",
+    name: "ได้รับเงินตอบแทนพิเศษร้อยละ {} คำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+  },
+  {
+    id: "31",
+    name: "ปรับอัตราค่าจ้างลูกจ้างประจำกรุงเทพมหานคร ตามข้อบังคับกรุงเทพมหานครว่าด้วยการกำหนดอัตราค่าจ้างขั้นต่ำสุดและสูงสุดของลูกจ้าง พ.ศ. 2557",
+  },
+  {
+    id: "32",
+    name: "ปรับอัตราค่าจ้างลูกจ้างประจำกรุงเทพมหานครตามข้อบังคับกรุงเทพมหานครว่าด้วยการกำหนดอัตราค่าจ้างขั้นต่ำสุดและสูงสุดของลูกจ้าง (ฉบับที่ {}) พ.ศ. 2557",
+  },
+  {
+    id: "33",
+    name: "ปรับอัตราค่าจ้าง ตามหนังสือกระทรวงการคลังฯ ที่ กค 0428/ว 47 ลว. 29 พ.ค. 2558 และข้อบังคับ กทม. ว่าด้วยการกำหนดอัตราค่าจ้างฯ ตั้งแต่วันที่ 1 ธ.ค. 2557 ข้อ {} ตามคำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+  },
+]);
+const salaryClass = ref<string>();
+const salaryRef = ref<string>();
+const myForm = ref<any>(); //form data input
+const edit = ref<boolean>(false); //เช็คการกดปุ่มแก้ไขใน dialog
+const modal = ref<boolean>(false); //modal add detail
+const modalEdit = ref<boolean>(false); //modal ที่แสดงใช้สำหรับแก้ไขหรือไม่
+const rawItem = ref<RequestItemsObject>(); //ข้อมูลเดิมที่เลือกใน row นั้น
+const rowIndex = ref<number>(0); //indexข้อมูลเดิมที่เลือกใน row นั้น
+const previous = ref<boolean>(); //แสดงปุ่มดูข้อมูลก่อนหน้า
+const next = ref<boolean>(); //แสดงปุ่มดูข้อมูลต่อไป
+const editRow = ref<boolean>(false); //เช็คมีการแก้ไขข้อมูล
+const rowsHistory = ref<RequestItemsObject[]>([]); //select data history
+const tittleHistory = ref<string>("ประวัติแก้ไขตำแหน่ง/เงินเดือน"); //
+const filterHistory = ref<string>(""); //search data table history
+const modalHistory = ref<boolean>(false); //modal ประวัติการแก้ไขข้อมูล
+const checkValidate = ref<boolean>(false); //validate data ผ่านหรือไม่
+const profileId = ref<string>(
+  route.params.id ? route.params.id.toString() : ""
+);
+const rows = ref<RequestItemsObject[]>([]);
+const filter = ref<string>(""); //search data table
+const visibleColumns = ref<String[]>([]);
+profileData.salary.columns.length == 0
+  ? (visibleColumns.value = [
+      "date",
+      "amount",
+      "positionSalaryAmount",
+      "mouthSalaryAmount",
+      "oc",
+      "position",
+      "posNo",
+      "positionLine",
+      "positionPathSide",
+      "positionType",
+      "positionLevel",
+      "positionExecutive",
+      "positionExecutiveSide",
+      "salaryClass",
+      "salaryRef",
+      "refCommandNo",
+    ])
+  : (visibleColumns.value = profileData.salary.columns);
+const columns = ref<QTableProps["columns"]>([
+  {
+    name: "date",
+    align: "left",
+    label: "วัน เดือน ปี",
+    sortable: true,
+    field: "date",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "amount",
+    align: "left",
+    label: "เงินเดือน",
+    sortable: true,
+    field: "amount",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "positionSalaryAmount",
+    align: "left",
+    label: "เงินประจำตำแหน่ง",
+    sortable: true,
+    field: "positionSalaryAmount",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "mouthSalaryAmount",
+    align: "left",
+    label: "เงินค่าตอบแทนรายเดือน",
+    sortable: true,
+    field: "mouthSalaryAmount",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "oc",
+    align: "left",
+    label: "สังกัด",
+    sortable: true,
+    field: "oc",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "position",
+    align: "left",
+    label: "ตำแหน่ง",
+    sortable: true,
+    field: "position",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "posNo",
+    align: "left",
+    label: "ตำแหน่งเลขที่",
+    sortable: true,
+    field: "posNo",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "positionLine",
+    align: "left",
+    label: "สายงาน",
+    sortable: true,
+    field: "positionLine",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "positionPathSide",
+    align: "left",
+    label: "ด้าน/สาขา",
+    sortable: true,
+    field: "positionPathSide",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "positionType",
+    align: "left",
+    label: "ตำแหน่งประเภท",
+    sortable: true,
+    field: "positionType",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "positionLevel",
+    align: "left",
+    label: "ระดับ",
+    sortable: true,
+    field: "positionLevel",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "positionExecutive",
+    align: "left",
+    label: "ตำแหน่งทางการบริหาร",
+    sortable: true,
+    field: "positionExecutive",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "positionExecutiveSide",
+    align: "left",
+    label: "ด้านทางการบริหาร",
+    sortable: true,
+    field: "positionExecutiveSide",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "salaryClass",
+    align: "left",
+    label: "ตำแหน่ง (รายละเอียด)",
+    sortable: true,
+    field: "salaryClass",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "salaryRef",
+    align: "left",
+    label: "เอกสารอ้างอิง",
+    sortable: true,
+    field: "salaryRef",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "refCommandNo",
+    align: "left",
+    label: "เลขที่คำสั่ง",
+    sortable: true,
+    field: "refCommandNo",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+]);
+const columnsHistory = ref<QTableProps["columns"]>([
+  {
+    name: "date",
+    align: "left",
+    label: "วัน เดือน ปี",
+    sortable: true,
+    field: "date",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "amount",
+    align: "left",
+    label: "เงินเดือน",
+    sortable: true,
+    field: "amount",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "positionSalaryAmount",
+    align: "left",
+    label: "เงินประจำตำแหน่ง",
+    sortable: true,
+    field: "positionSalaryAmount",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "mouthSalaryAmount",
+    align: "left",
+    label: "เงินค่าตอบแทนรายเดือน",
+    sortable: true,
+    field: "mouthSalaryAmount",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "oc",
+    align: "left",
+    label: "สังกัด",
+    sortable: true,
+    field: "oc",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "position",
+    align: "left",
+    label: "ตำแหน่ง",
+    sortable: true,
+    field: "position",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "posNo",
+    align: "left",
+    label: "ตำแหน่งเลขที่",
+    sortable: true,
+    field: "posNo",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "positionLine",
+    align: "left",
+    label: "สายงาน",
+    sortable: true,
+    field: "positionLine",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "positionPathSide",
+    align: "left",
+    label: "ด้าน/สาขา",
+    sortable: true,
+    field: "positionPathSide",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "positionType",
+    align: "left",
+    label: "ตำแหน่งประเภท",
+    sortable: true,
+    field: "positionType",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "positionLevel",
+    align: "left",
+    label: "ระดับ",
+    sortable: true,
+    field: "positionLevel",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "positionExecutive",
+    align: "left",
+    label: "ตำแหน่งทางการบริหาร",
+    sortable: true,
+    field: "positionExecutive",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "positionExecutiveSide",
+    align: "left",
+    label: "ด้านทางการบริหาร",
+    sortable: true,
+    field: "positionExecutiveSide",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "salaryClass",
+    align: "left",
+    label: "ตำแหน่ง (รายละเอียด)",
+    sortable: true,
+    field: "salaryClass",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "salaryRef",
+    align: "left",
+    label: "เอกสารอ้างอิง",
+    sortable: true,
+    field: "salaryRef",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "refCommandNo",
+    align: "left",
+    label: "เลขที่คำสั่ง",
+    sortable: true,
+    field: "refCommandNo",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "createdFullName",
+    align: "left",
+    label: "ผู้ดำเนินการ",
+    sortable: true,
+    field: "createdFullName",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "createdAt",
+    align: "left",
+    label: "วันที่แก้ไข",
+    sortable: true,
+    field: "createdAt",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+]);
+const visibleColumnsHistory = ref<String[]>([
+  "date",
+  "amount",
+  "positionSalaryAmount",
+  "mouthSalaryAmount",
+  "oc",
+  "position",
+  "posNo",
+  "positionLine",
+  "positionPathSide",
+  "positionType",
+  "positionLevel",
+  "positionExecutive",
+  "positionExecutiveSide",
+  "salaryClass",
+  "salaryRef",
+  "refCommandNo",
+  "createdFullName",
+  "createdAt",
+]);
+
+watch(visibleColumns, async (count: String[], prevCount: String[]) => {
+  await changeProfileColumns("salary", count);
+});
+
+onMounted(async () => {
+  await fetchPosition();
+  await nodeTree();
+  await fetchData();
+});
+
+const filterSelector = (val: any, update: Function, filtername: string) => {
+  switch (filtername) {
+    case "1":
+      update(() => {
+        posNoOptions.value = posNoOptionsFilter.value.filter(
+          (v: DataOption) => v.name.indexOf(val) > -1
+        );
+      });
+      break;
+    case "2":
+      update(() => {
+        positionOptions.value = positionOptionsFilter.value.filter(
+          (v: DataOption) => v.name.indexOf(val) > -1
+        );
+      });
+      break;
+    case "3":
+      update(() => {
+        positionSideOptions.value = positionSideOptionsFilter.value.filter(
+          (v: DataOption) => v.name.indexOf(val) > -1
+        );
+      });
+      break;
+    case "4":
+      update(() => {
+        positionTypeOptions.value = positionTypeOptionsFilter.value.filter(
+          (v: DataOption) => v.name.indexOf(val) > -1
+        );
+      });
+      break;
+    case "5":
+      update(() => {
+        positionLineOptions.value = positionLineOptionsFilter.value.filter(
+          (v: DataOption) => v.name.indexOf(val) > -1
+        );
+      });
+      break;
+    case "6":
+      update(() => {
+        positionLevelOptions.value = positionLevelOptionsFilter.value.filter(
+          (v: DataOption) => v.name.indexOf(val) > -1
+        );
+      });
+      break;
+    case "7":
+      update(() => {
+        positionExecutiveOptions.value =
+          positionExecutiveOptionsFilter.value.filter(
+            (v: DataOption) => v.name.indexOf(val) > -1
+          );
+      });
+      break;
+    case "8":
+      update(() => {
+        refOptions.value = refOptionsFilter.value.filter(
+          (v: DataOption) => v.name.indexOf(val) > -1
+        );
+      });
+      break;
+
+    default:
+      break;
+  }
+};
+
+const nodeTree = async () => {
+  loaderPage(true);
+  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(() => {
+      loaderPage(false);
+    });
+};
+
+/**
+ * get รายการ ตำแหน่ง
+ */
+const fetchPosition = async () => {
+  loaderPage(true);
+  await http
+    .get(config.API.position)
+    .then((res) => {
+      const data = res.data.result;
+      let optionpositionpaths: DataOption[] = [];
+      data.positionPaths.map((r: any) => {
+        optionpositionpaths.push({
+          id: r.id.toString(),
+          name: r.name.toString(),
+        });
+      });
+      positionOptions.value = optionpositionpaths;
+      positionOptionsFilter.value = optionpositionpaths;
+
+      let optionPositionPathSides: DataOption[] = [];
+      data.positionPathSides.map((r: any) => {
+        optionPositionPathSides.push({
+          id: r.id.toString(),
+          name: r.name.toString(),
+        });
+      });
+      positionSideOptions.value = optionPositionPathSides;
+      positionSideOptionsFilter.value = optionPositionPathSides;
+
+      let optionPositionTypes: DataOption[] = [];
+      data.positionTypes.map((r: any) => {
+        optionPositionTypes.push({
+          id: r.id.toString(),
+          name: r.name.toString(),
+        });
+      });
+      positionTypeOptions.value = optionPositionTypes;
+      positionTypeOptionsFilter.value = optionPositionTypes;
+
+      let optionPositionLines: DataOption[] = [];
+      data.positionLines.map((r: any) => {
+        optionPositionLines.push({
+          id: r.id.toString(),
+          name: r.name.toString(),
+        });
+      });
+      positionLineOptions.value = optionPositionLines;
+      positionLineOptionsFilter.value = optionPositionLines;
+
+      let optionPositionExecutives: DataOption[] = [];
+      data.positionExecutives.map((r: any) => {
+        optionPositionExecutives.push({
+          id: r.id.toString(),
+          name: r.name.toString(),
+        });
+      });
+      positionExecutiveOptions.value = optionPositionExecutives;
+      positionExecutiveOptionsFilter.value = optionPositionExecutives;
+
+      let optionPositionExecutiveSides: DataOption[] = [];
+      data.positionExecutiveSides.map((r: any) => {
+        optionPositionExecutiveSides.push({
+          id: r.id.toString(),
+          name: r.name.toString(),
+        });
+      });
+      positionExecutiveSideOptions.value = optionPositionExecutiveSides;
+      positionExecutiveSideOptionsFilter.value = optionPositionExecutiveSides;
+
+      let optionPositionLevels: DataOption[] = [];
+      data.positionLevels.map((r: any) => {
+        optionPositionLevels.push({
+          id: r.id.toString(),
+          name: r.name.toString(),
+        });
+      });
+      positionLevelOptions.value = optionPositionLevels;
+      positionLevelOptionsFilter.value = optionPositionLevels;
+    })
+    .catch((e: any) => {})
+    .finally(() => {
+      loaderPage(false);
+    });
+};
+
+const fetchData = async () => {
+  if (profileId.value) {
+    loaderPage(true);
+    await http
+      .get(config.API.profileSalaryId(profileId.value))
+      .then((res) => {
+        let data = res.data.result;
+        rows.value = [];
+        data.map((e: ResponseObject) => {
+          rows.value.push({
+            id: e.id,
+            date: new Date(e.date),
+            amount: e.amount,
+            positionSalaryAmount: e.positionSalaryAmount,
+            mouthSalaryAmount: e.mouthSalaryAmount,
+            oc: e.oc,
+            ocId: e.ocId,
+            position: e.position,
+            positionId: e.positionId,
+            posNo: e.posNo,
+            posNoId: e.posNoId,
+            positionLine: e.positionLine,
+            positionLineId: e.positionLineId,
+            positionPathSide: e.positionPathSide,
+            positionPathSideId: e.positionPathSideId,
+            positionType: e.positionType,
+            positionTypeId: e.positionTypeId,
+            positionLevel: e.positionLevel,
+            positionLevelId: e.positionLevelId,
+            positionExecutive: e.positionExecutive,
+            positionExecutiveId: e.positionExecutiveId,
+            positionExecutiveSide: e.positionExecutiveSide,
+            positionExecutiveSideId: e.positionExecutiveSideId,
+            salaryClass: e.salaryClass,
+            salaryRef: e.salaryRef,
+            refCommandNo: e.refCommandNo,
+            createdFullName: e.createdFullName,
+            createdAt: new Date(e.createdAt),
+          });
+        });
+      })
+      .catch((e) => {
+        messageError($q, e);
+      })
+      .finally(() => {
+        loaderPage(false);
+      });
+  }
+};
+
+const onSelected = async (id: string) => {
+  await fetchPositionNumber(id);
+};
+
+const fetchOrganization = async (id: string) => {
+  if (selected.value != "") {
+    loaderPage(true);
+    await http
+      .get(config.API.organizationName(id))
+      .then((res) => {
+        let data = res.data.result;
+        ocId.value = data;
+      })
+      .catch((e) => {
+        messageError($q, e);
+      })
+      .finally(() => {
+        loaderPage(false);
+      });
+  }
+};
+
+const fetchPositionNumber = async (id: string) => {
+  loaderPage(true);
+  await http
+    .get(config.API.getPositionNumberIdByOcId(id))
+    .then((res) => {
+      const data = res.data.result;
+      let option: DataOption[] = [];
+      data.map((r: DataOption) => {
+        option.push({ id: r.id.toString(), name: r.name.toString() });
+      });
+      posNoOptions.value = option;
+      posNoOptionsFilter.value = option;
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      loaderPage(false);
+    });
+};
+
+/**
+ * กดดูข้อมูลก่อนหน้า
+ */
+const clickPrevious = async () => {
+  edit.value = false;
+  rowIndex.value -= 1;
+  await getData();
+  await checkRowPage();
+};
+
+/**
+ * กดดูข้อมูลต่อไป
+ */
+const clickNext = async () => {
+  edit.value = false;
+  rowIndex.value += 1;
+  await getData();
+  await checkRowPage();
+};
+
+/**
+ * กดดูข้อมูลต่อไป
+ */
+const getData = async () => {
+  const row = rows.value[rowIndex.value];
+  date.value = row.date;
+  amount.value = row.amount;
+  positionSalaryAmount.value = row.positionSalaryAmount;
+  mouthSalaryAmount.value = row.mouthSalaryAmount;
+  await onSelected(row.ocId);
+  selected.value = row.ocId;
+  positionId.value = row.positionId;
+  posNoId.value = row.posNoId;
+  positionLineId.value = row.positionLineId;
+  positionPathSideId.value = row.positionPathSideId;
+  positionTypeId.value = row.positionTypeId;
+  positionLevelId.value = row.positionLevelId;
+  positionExecutiveId.value = row.positionExecutiveId;
+  positionExecutiveSideId.value = row.positionExecutiveSideId;
+  salaryClass.value = row.salaryClass;
+  salaryRef.value = row.salaryRef;
+  refCommandNo.value = row.refCommandNo;
+  id.value = row.id;
+  await fetchPositionNumber(row.ocId);
+};
+
+/**
+ * เช็คปุ่มดูข้อมูล ย้อน กับ ต่อไป ว่าต้องแสดงไหม
+ */
+const checkRowPage = () => {
+  editRow.value = false;
+  next.value = true;
+  previous.value = true;
+  if (rowIndex.value + 1 >= rows.value.length) {
+    next.value = false;
+  }
+  if (rowIndex.value - 1 < 0) {
+    previous.value = false;
+  }
+};
+
+/**
+ * กดปุ่มแก้ไขใน dialog
+ */
+const clickEdit = () => {
+  editRow.value = false;
+  next.value = false;
+  previous.value = false;
+};
+
+/**
+ * กดปุ่มเพิ่มด้านบน table
+ */
+const clickAdd = async () => {
+  editRow.value = false;
+  await addData();
+};
+
+/**
+ * gen ตำแหน่ง (รายละเอียด)
+ */
+const templateDetail = async () => {
+  await fetchOrganization(selected.value);
+  salaryClass.value = "";
+  if (ocId.value != "") {
+    salaryClass.value = salaryClass.value + `สังกัด${ocId.value} `;
+  }
+
+  const positionF = positionOptions.value.filter(
+    (r: DataOption) => r.id == positionId.value
+  );
+  if (positionF.length > 0) {
+    salaryClass.value = salaryClass.value + `ตำแหน่ง${positionF[0].name} `;
+  }
+
+  const posNoF = posNoOptions.value.filter(
+    (r: DataOption) => r.id == posNoId.value
+  );
+  if (posNoF.length > 0) {
+    salaryClass.value = salaryClass.value + `ตำแหน่งเลขที่${posNoF[0].name} `;
+  }
+
+  const positionLineF = positionLineOptions.value.filter(
+    (r: DataOption) => r.id == positionLineId.value
+  );
+  if (positionLineF.length > 0) {
+    salaryClass.value = salaryClass.value + `สายงาน${positionLineF[0].name} `;
+  }
+
+  const positionPathSideF = positionSideOptions.value.filter(
+    (r: DataOption) => r.id == positionPathSideId.value
+  );
+  if (positionPathSideF.length > 0) {
+    salaryClass.value =
+      salaryClass.value + `ด้าน/สาขา${positionPathSideF[0].name} `;
+  }
+
+  const positionTypeF = positionTypeOptions.value.filter(
+    (r: DataOption) => r.id == positionTypeId.value
+  );
+  if (positionTypeF.length > 0) {
+    salaryClass.value =
+      salaryClass.value + `ตำแหน่งประเภท${positionTypeF[0].name} `;
+  }
+
+  const positionLevelF = positionLevelOptions.value.filter(
+    (r: DataOption) => r.id == positionLevelId.value
+  );
+  if (positionLevelF.length > 0) {
+    salaryClass.value = salaryClass.value + `ระดับ${positionLevelF[0].name} `;
+  }
+
+  const positionExecutiveF = positionExecutiveOptions.value.filter(
+    (r: DataOption) => r.id == positionExecutiveId.value
+  );
+  if (positionExecutiveF.length > 0) {
+    salaryClass.value =
+      salaryClass.value + `ตำแหน่งทางการบริหาร${positionExecutiveF[0].name} `;
+  }
+};
+
+/**
+ * กดบันทึกใน dialog
+ */
+const clickSave = async () => {
+  myForm.value.validate().then(async (result: boolean) => {
+    if (result) {
+      if (modalEdit.value) {
+        await editData();
+      } else {
+        await saveData();
+      }
+    }
+  });
+};
+
+/**
+ * บันทึกเพิ่มข้อมูล
+ */
+const saveData = async () => {
+  if (profileId.value) {
+    loaderPage(true);
+    await http
+      .post(config.API.profileSalaryId(profileId.value), {
+        date: dateToISO(date.value),
+        amount: amount.value,
+        positionSalaryAmount: positionSalaryAmount.value,
+        mouthSalaryAmount: mouthSalaryAmount.value,
+        ocId: selected.value,
+        positionId: positionId.value,
+        posNoId: posNoId.value,
+        positionLineId: positionLineId.value,
+        positionPathSideId: positionPathSideId.value,
+        positionTypeId: positionTypeId.value,
+        positionLevelId: positionLevelId.value,
+        positionExecutiveId: positionExecutiveId.value,
+        positionExecutiveSideId: positionExecutiveSideId.value,
+        salaryClass: salaryClass.value,
+        salaryRef: salaryRef.value,
+        refCommandNo: refCommandNo.value,
+      })
+      .then((res) => {
+        success($q, "บันทึกข้อมูลสำเร็จ");
+        modal.value = false;
+      })
+      .catch((e) => {
+        messageError($q, e);
+      })
+      .finally(async () => {
+        await fetchData();
+      });
+  }
+};
+
+/**
+ * บันทึกแก้ไขข้อมูล
+ */
+const editData = async () => {
+  loaderPage(true);
+  await http
+    .put(config.API.profileSalaryId(id.value), {
+      date: dateToISO(date.value),
+      amount: amount.value,
+      positionSalaryAmount: positionSalaryAmount.value,
+      mouthSalaryAmount: mouthSalaryAmount.value,
+      ocId: selected.value,
+      positionId: positionId.value,
+      posNoId: posNoId.value,
+      positionLineId: positionLineId.value,
+      positionPathSideId: positionPathSideId.value,
+      positionTypeId: positionTypeId.value,
+      positionLevelId: positionLevelId.value,
+      positionExecutiveId: positionExecutiveId.value,
+      positionExecutiveSideId: positionExecutiveSideId.value,
+      salaryClass: salaryClass.value,
+      salaryRef: salaryRef.value,
+      refCommandNo: refCommandNo.value,
+    })
+    .then((res) => {
+      success($q, "บันทึกข้อมูลสำเร็จ");
+      modal.value = false;
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(async () => {
+      await fetchData();
+    });
+};
+
+/**
+ * ลบลบข้อมูล
+ */
+const clickDelete = async () => {
+  $q.dialog({
+    title: `ลบข้อมูล`,
+    message: `ต้องการทำการลบข้อมูลนี้ใช่หรือไม่?`,
+    cancel: "ยกเลิก",
+    ok: "ยืนยัน",
+    persistent: true,
+  })
+    .onOk(async () => {
+      loaderPage(true);
+      await http
+        .delete(config.API.profileSalaryId(id.value))
+        .then((res) => {
+          success($q, "ลบข้อมูลสำเร็จ");
+          modal.value = false;
+        })
+        .catch((e) => {
+          messageError($q, e);
+        })
+        .finally(async () => {
+          await fetchData();
+        });
+    })
+    .onCancel(async () => {
+      await fetchData();
+    });
+};
+
+/**
+ * กดปิด dialog
+ */
+const clickClose = async () => {
+  if (editRow.value == true) {
+    $q.dialog({
+      title: `ข้อมูลมีการแก้ไข`,
+      message: `ยืนยันที่จะปิดโดยไม่บันทึกใช่หรือไม่?`,
+      cancel: "ยกเลิก",
+      ok: "ยืนยัน",
+      persistent: true,
+    }).onOk(async () => {
+      modal.value = false;
+      next.value = false;
+      previous.value = false;
+    });
+  } else {
+    modal.value = false;
+    next.value = false;
+    previous.value = false;
+  }
+};
+
+/**
+ * กดเลือกข้อมูลที่จะแก้ไข
+ * @param props ค่า props ใน row ที่เลือก
+ */
+const selectData = async (props: DataProps) => {
+  modalEdit.value = true;
+  modal.value = true;
+  edit.value = false;
+  rawItem.value = props.row;
+  rowIndex.value = props.rowIndex;
+  date.value = props.row.date;
+  amount.value = props.row.amount;
+  positionSalaryAmount.value = props.row.positionSalaryAmount;
+  mouthSalaryAmount.value = props.row.mouthSalaryAmount;
+  await onSelected(props.row.ocId);
+  selected.value = props.row.ocId;
+  positionId.value = props.row.positionId;
+  posNoId.value = props.row.posNoId;
+  positionLineId.value = props.row.positionLineId;
+  positionPathSideId.value = props.row.positionPathSideId;
+  positionTypeId.value = props.row.positionTypeId;
+  positionLevelId.value = props.row.positionLevelId;
+  positionExecutiveId.value = props.row.positionExecutiveId;
+  positionExecutiveSideId.value = props.row.positionExecutiveSideId;
+  salaryClass.value = props.row.salaryClass;
+  salaryRef.value = props.row.salaryRef;
+  refCommandNo.value = props.row.refCommandNo;
+  id.value = props.row.id;
+  await checkRowPage();
+};
+
+/**
+ * กดปุ่มเพิ่มบน table
+ */
+const addData = () => {
+  selected.value = "";
+  modalEdit.value = false;
+  modal.value = true;
+  edit.value = true;
+  date.value = new Date();
+  date.value = new Date();
+  amount.value = null;
+  positionSalaryAmount.value = null;
+  mouthSalaryAmount.value = null;
+  ocId.value = "";
+  positionId.value = "";
+  posNoId.value = "";
+  positionLineId.value = "";
+  positionPathSideId.value = "";
+  positionTypeId.value = "";
+  positionLevelId.value = "";
+  positionExecutiveId.value = "";
+  positionExecutiveSideId.value = "";
+  salaryClass.value = "";
+  refSelected.value = null;
+  salaryRef.value = "";
+  refCommandNo.value = "";
+};
+
+/**
+ * ฟังก์ชันปุ่มยกเลิกการแก้ไขข้อมูล
+ */
+const clickCancel = async () => {
+  if (editRow.value == true) {
+    $q.dialog({
+      title: `ข้อมูลมีการแก้ไข`,
+      message: `ยืนยันยกเลิกการแก้ไขใช่หรือไม่?`,
+      cancel: "ยกเลิก",
+      ok: "ยืนยัน",
+      persistent: true,
+    }).onOk(async () => {
+      edit.value = false;
+      await checkRowPage();
+      await getData();
+    });
+  } else {
+    edit.value = false;
+    await checkRowPage();
+  }
+};
+
+/**
+ * เช็คว่ามีการแก้ไขข้อมูล
+ */
+const clickEditRow = () => {
+  editRow.value = true;
+};
+
+/**
+ * เช็คว่ามีการแก้ไขข้อมูล
+ */
+const clickEditRowRef = () => {
+  editRow.value = true;
+  salaryRef.value = refSelected.value?.name;
+};
+
+/**
+ * ฟังชั้นดูข้อมูลประวัติแก้ไขข้อมูลที่เลือก
+ * @param row ข้อมูล row ที่ดูประวัติการแก้ไข
+ */
+const clickHistory = async (row: RequestItemsObject) => {
+  modalHistory.value = true;
+  loaderPage(true);
+  await http
+    .get(config.API.profileSalaryHisId(row.id))
+    .then((res) => {
+      let data = res.data.result;
+      rowsHistory.value = [];
+      data.map((e: ResponseObject) => {
+        rowsHistory.value.push({
+          id: e.id,
+          date: new Date(e.date),
+          amount: e.amount,
+          positionSalaryAmount: e.positionSalaryAmount,
+          mouthSalaryAmount: e.mouthSalaryAmount,
+          oc: e.oc,
+          ocId: e.ocId,
+          position: e.position,
+          positionId: e.positionId,
+          posNo: e.posNo,
+          posNoId: e.posNoId,
+          positionLine: e.positionLine,
+          positionLineId: e.positionLineId,
+          positionPathSide: e.positionPathSide,
+          positionPathSideId: e.positionPathSideId,
+          positionType: e.positionType,
+          positionTypeId: e.positionTypeId,
+          positionLevel: e.positionLevel,
+          positionLevelId: e.positionLevelId,
+          positionExecutive: e.positionExecutive,
+          positionExecutiveId: e.positionExecutiveId,
+          positionExecutiveSide: e.positionExecutiveSide,
+          positionExecutiveSideId: e.positionExecutiveSideId,
+          salaryClass: e.salaryClass,
+          salaryRef: e.salaryRef,
+          refCommandNo: e.refCommandNo,
+          createdFullName: e.createdFullName,
+          createdAt: new Date(e.createdAt),
+        });
+      });
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      loaderPage(false);
+    });
+};
+
+/**
+ * validate input ใน dialog
+ */
+const validateData = async () => {
+  checkValidate.value = true;
+  await myForm.value.validate().then((result: boolean) => {
+    if (result == false) {
+      checkValidate.value = false;
+    }
+  });
+};
+
+/**
+ * class จัดรูปแบบแสดงระหว่างข้อมูลที่แก้ไขหรือแสดงเฉยๆ
+ * @param val ข้อมูล input สำหรับแก้ไขหรือไม่
+ */
+const getClass = (val: boolean) => {
+  return {
+    "full-width inputgreen cursor-pointer": val,
+    "full-width cursor-pointer": !val,
+  };
+};
+const resetFilter = () => {};
+</script>
+<style lang="scss">
+.modalfix {
+  position: fixed !important;
+}
+</style>
diff --git a/src/components/information/SalaryEmployee.vue b/src/components/information/SalaryEmployee.vue
new file mode 100644
index 000000000..3e013336b
--- /dev/null
+++ b/src/components/information/SalaryEmployee.vue
@@ -0,0 +1,2009 @@
+<!-- card ตำแหน่ง/ค่าจ้าง -->
+<template>
+  <q-card flat bordered class="col-12 q-px-lg q-py-md">
+    <q-form ref="myForm">
+      <ProfileTable
+        :rows="rows"
+        :columns="columns"
+        :filter="filter"
+        :visible-columns="visibleColumns"
+        v-model:inputfilter="filter"
+        v-model:inputvisible="visibleColumns"
+        :add="clickAdd"
+        name="ตำแหน่ง/ค่าจ้าง"
+        icon="mdi-cash"
+        :statusEdit="statusEdit"
+      >
+        <template #columns="props">
+          <q-tr :props="props">
+            <q-td
+              v-for="col in props.cols"
+              :key="col.name"
+              :props="props"
+              @click="selectData(props)"
+              class="cursor-pointer"
+            >
+              <div v-if="col.name == 'date'" class="table_ellipsis">
+                {{ date2Thai(col.value) }}
+              </div>
+              <div
+                v-else-if="
+                  col.name == 'positionSalaryAmount' ||
+                  col.name == 'mouthSalaryAmount' ||
+                  col.name == 'amount'
+                "
+                class="table_ellipsis"
+              >
+                {{ col.value == null ? "" : col.value.toLocaleString("en-US") }}
+              </div>
+              <div v-else class="table_ellipsis">
+                {{ col.value }}
+              </div>
+            </q-td>
+            <q-td auto-width>
+              <q-btn
+                color="info"
+                flat
+                dense
+                round
+                size="14px"
+                icon="mdi-history"
+                @click="clickHistory(props.row)"
+              />
+            </q-td>
+          </q-tr>
+        </template>
+      </ProfileTable>
+    </q-form>
+  </q-card>
+  <!-- popup Edit window-->
+  <q-dialog v-model="modal" persistent>
+    <q-card style="width: 60vw; max-width: 80vw">
+      <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
+                    v-if="edit"
+                    :nodes="nodesTree"
+                    dense
+                    node-key="id"
+                    v-model:selected="agencyId"
+                    v-model:expanded="expanded"
+                    no-selection-unset
+                    selected-color="primary"
+                    @update:selected="onSelected"
+                    default-expand-all
+                  />
+                  <q-tree
+                    v-else
+                    :nodes="nodesTree"
+                    dense
+                    node-key="id"
+                    v-model:expanded="expanded"
+                    no-selection-unset
+                    selected-color="primary"
+                    @update:selected="onSelected"
+                    default-expand-all
+                  >
+                    <template v-slot:default-header="prop">
+                      <div class="row items-center">
+                        <div
+                          class="text-primary"
+                          v-if="selected == prop.node.id"
+                        >
+                          {{ prop.node.label }}
+                        </div>
+                        <div v-else>
+                          {{ prop.node.label }}
+                        </div>
+                      </div>
+                    </template>
+                  </q-tree>
+                </q-scroll-area>
+              </q-card>
+            </div>
+            <div class="col-xs-12 col-sm-7">
+              <q-card class="fit q-pa-sm">
+                <q-scroll-area visible style="height: 60vh">
+                  <div class="row col-12 q-col-gutter-xs">
+                    <div class="col-xs-6 col-sm-6 col-md-6">
+                      <datepicker
+                        menu-class-name="modalfix"
+                        :readonly="!edit"
+                        v-model="date"
+                        :locale="'th'"
+                        autoApply
+                        :enableTimePicker="false"
+                        @update:modelValue="clickEditRow"
+                        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="date2Thai(date)"
+                            :rules="[
+                                (val:string) =>
+                                  !!val ||
+                                  `${'กรุณาเลือกวัน เดือน ปี จ้างและแต่งตั้ง'}`,
+                              ]"
+                            :label="`${'วัน เดือน ปี จ้างและแต่งตั้ง'}`"
+                            hide-bottom-space
+                          >
+                            <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 class="col-xs-6 col-sm-6 col-md-6">
+                      <!-- <selector
+                      :class="getClass(edit)"
+                      :outlined="edit"
+                      dense
+                      lazy-rules
+                      :readonly="!edit"
+                      :borderless="!edit"
+                      v-model="posNoId"
+                      :rules="[
+                            (val:string) => !!val || `${'กรุณาเลือกตำแหน่งเลขที่'}`,
+                          ]"
+                      :label="`${'ตำแหน่งเลขที่'}`"
+                      @update:modelValue="clickEditRow"
+                      emit-value
+                      map-options
+                      option-label="name"
+                      :options="posNoOptions"
+                      option-value="id"
+                      hide-bottom-space
+                      use-input
+                      input-debounce="0"
+                      @filter="(inputValue:any,
+                        doneFn:Function) => filterSelector(inputValue, doneFn,'posNo'
+                        ) "
+                    /> -->
+                      <q-input
+                        :class="getClass(edit)"
+                        :outlined="edit"
+                        dense
+                        lazy-rules
+                        :readonly="!edit"
+                        :borderless="!edit"
+                        v-model="posNoEmployee"
+                        :label="`${'ตำแหน่งเลขที่'}`"
+                        @update:modelValue="clickEditRow"
+                        hide-bottom-space
+                        autogrow
+                      />
+                    </div>
+                    <div class="col-xs-6 col-sm-6 col-md-6">
+                      <selector
+                        :class="getClass(edit)"
+                        :outlined="edit"
+                        dense
+                        lazy-rules
+                        :readonly="!edit"
+                        :borderless="!edit"
+                        v-model="employeePositionId"
+                        :rules="[(val:string) => !!val || `${'กรุณาเลือกตำแหน่ง'}`]"
+                        :label="`${'ตำแหน่ง'}`"
+                        @update:modelValue="clickEditRow"
+                        emit-value
+                        map-options
+                        option-label="name"
+                        :options="employeePositionOptions"
+                        option-value="id"
+                        hide-bottom-space
+                        use-input
+                        input-debounce="0"
+                        @filter="(inputValue:any,
+                        doneFn:Function) => filterSelector(inputValue, doneFn,'employeePosition'
+                        ) "
+                      />
+                    </div>
+                    <div class="col-xs-6 col-sm-6 col-md-6">
+                      <selector
+                        :class="getClass(edit)"
+                        :outlined="edit"
+                        dense
+                        lazy-rules
+                        :readonly="!edit"
+                        :borderless="!edit"
+                        v-model="employeePositionSideId"
+                        :label="`${'ด้านของตำแหน่ง'}`"
+                        @update:modelValue="clickEditRow"
+                        emit-value
+                        map-options
+                        option-label="name"
+                        :options="employeePositionSideOptions"
+                        option-value="id"
+                        hide-bottom-space
+                        use-input
+                        input-debounce="0"
+                        @filter="(inputValue:any,
+                        doneFn:Function) => filterSelector(inputValue, doneFn,'employeePositionSide'
+                        ) "
+                      />
+                    </div>
+                    <div class="col-xs-6 col-sm-6 col-md-6">
+                      <selector
+                        :class="getClass(edit)"
+                        :outlined="edit"
+                        dense
+                        lazy-rules
+                        :readonly="!edit"
+                        :borderless="!edit"
+                        v-model="employeeLevelId"
+                        :label="`${'ระดับ'}`"
+                        @update:modelValue="clickEditRow"
+                        emit-value
+                        map-options
+                        option-label="name"
+                        :options="employeeLevelOptions"
+                        option-value="id"
+                        hide-bottom-space
+                        use-input
+                        input-debounce="0"
+                        @filter="(inputValue:any,
+                        doneFn:Function) => filterSelector(inputValue, doneFn,'employeeLevel'
+                        ) "
+                      />
+                    </div>
+                    <div class="col-xs-6 col-sm-6 col-md-6">
+                      <selector
+                        :class="getClass(edit)"
+                        :outlined="edit"
+                        dense
+                        lazy-rules
+                        :readonly="!edit"
+                        :borderless="!edit"
+                        v-model="employeeGroupId"
+                        :label="`${'กลุ่มงาน'}`"
+                        @update:modelValue="clickEditRow"
+                        emit-value
+                        map-options
+                        option-label="name"
+                        :options="employeeGroupOptions"
+                        option-value="id"
+                        hide-bottom-space
+                        use-input
+                        input-debounce="0"
+                        @filter="(inputValue:any,
+                        doneFn:Function) => filterSelector(inputValue, doneFn,'employeeGroup'
+                        ) "
+                      />
+                    </div>
+                    <!-- <div class="col-xs-12">
+                      <selector
+                        :class="getClass(edit)"
+                        :outlined="edit"
+                        dense
+                        lazy-rules
+                        :readonly="!edit"
+                        :borderless="!edit"
+                        v-model="agencyId"
+                        :label="`${'สังกัด'}`"
+                        @update:model-value="(value:string) => selectAgency(value)"
+                        emit-value
+                        map-options
+                        option-label="name"
+                        :options="agencyOptions"
+                        option-value="id"
+                        hide-bottom-space
+                        use-input
+                        input-debounce="0"
+                        @filter="(inputValue:any,
+                        doneFn:Function) => filterSelector(inputValue, doneFn,'agency'
+                        ) "
+                      />
+                    </div> -->
+                    <div class="col-xs-6 col-sm-6 col-md-6">
+                      <q-input
+                        :class="getClass(edit)"
+                        :outlined="edit"
+                        dense
+                        lazy-rules
+                        :readonly="!edit"
+                        :borderless="!edit"
+                        v-model="amount"
+                        :label="`${'ค่าจ้าง'}`"
+                        @update:modelValue="clickEditRow"
+                        type="number"
+                        hide-bottom-space
+                      />
+                    </div>
+                    <div class="col-xs-6 col-sm-6 col-md-6">
+                      <q-input
+                        :class="getClass(edit)"
+                        :outlined="edit"
+                        dense
+                        lazy-rules
+                        :readonly="!edit"
+                        :borderless="!edit"
+                        v-model="refCommandNo"
+                        hide-bottom-space
+                        :label="`${'เลขที่คำสั่ง'}`"
+                        :rules="[(val:string) => !!val || `${'กรุณากรอกเลขที่คำสั่ง'}`]"
+                        @update:modelValue="clickEditRow"
+                      >
+                        <template v-slot:append>
+                          <q-icon
+                            name="mdi-file"
+                            class="cursor-pointer"
+                            @click="resetFilter"
+                          />
+                        </template>
+                      </q-input>
+                    </div>
+                    <!-- <div class="col-xs-4 col-sm-4 col-md-4">
+                    <q-input
+                      :class="getClass(edit)"
+                      :outlined="edit"
+                      dense
+                      lazy-rules
+                      :readonly="!edit"
+                      :borderless="!edit"
+                      v-model="positionSalaryAmount"
+                      :label="`${'เงินประจำตำแหน่ง'}`"
+                      @update:modelValue="clickEditRow"
+                      type="number"
+                      hide-bottom-space
+                    />
+                  </div>
+                  <div class="col-xs-4 col-sm-4 col-md-4">
+                    <q-input
+                      :class="getClass(edit)"
+                      :outlined="edit"
+                      dense
+                      lazy-rules
+                      :readonly="!edit"
+                      :borderless="!edit"
+                      v-model="mouthSalaryAmount"
+                      :label="`${'เงินค่าตอบแทนรายเดือน'}`"
+                      @update:modelValue="clickEditRow"
+                      type="number"
+                      hide-bottom-space
+                    />
+                  </div> -->
+                    <!-- <div class="col-xs-6 col-sm-6 col-md-6">
+                    <q-input
+                      :class="getClass(edit)"
+                      :outlined="edit"
+                      dense
+                      lazy-rules
+                      :readonly="!edit"
+                      :borderless="!edit"
+                      v-model="salaryClass"
+                      :label="`${'ตำแหน่ง (รายละเอียด)'}`"
+                      @update:modelValue="clickEditRow"
+                      hide-bottom-space
+                      autogrow
+                    >
+                    </q-input>
+                  </div> -->
+
+                    <div class="row col-xs-12 col-sm-12 col-md-12">
+                      <selector
+                        :class="getClass(edit)"
+                        :outlined="edit"
+                        dense
+                        lazy-rules
+                        :readonly="!edit"
+                        :borderless="!edit"
+                        v-model="refSelected"
+                        :label="`${'ต้นแบบ (template) เอกสารอ้างอิง'}`"
+                        @update:modelValue="clickEditRowRef"
+                        option-label="name"
+                        :options="refOptions"
+                        option-value="id"
+                        hide-bottom-space
+                        use-input
+                        input-debounce="0"
+                        @filter="(inputValue:any,
+                        doneFn:Function) => filterSelector(inputValue, doneFn,'ref'
+                        ) "
+                      />
+                    </div>
+                    <div class="col-xs-12 col-sm-12 col-md-12">
+                      <q-input
+                        :class="getClass(edit)"
+                        :outlined="edit"
+                        dense
+                        lazy-rules
+                        :readonly="!edit"
+                        :borderless="!edit"
+                        v-model="salaryRef"
+                        :label="`${'เอกสารอ้างอิง'}`"
+                        @update:modelValue="clickEditRow"
+                        type="textarea"
+                        hide-bottom-space
+                      />
+                    </div>
+                    <!-- <div class="col-xs-6 col-sm-6 col-md-6">
+                    <datepicker
+                      menu-class-name="modalfix"
+                      :readonly="!edit"
+                      v-model="refCommandDate"
+                      :locale="'th'"
+                      autoApply
+                      :enableTimePicker="false"
+                      @update:modelValue="clickEditRow"
+                      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="date2Thai(refCommandDate)"
+                          :rules="[
+                      (val:string) =>
+                        !!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>
+                </q-scroll-area>
+              </q-card>
+            </div>
+          </div>
+        </q-card-section>
+        <q-separator />
+        <DialogFooter
+          :cancel="clickCancel"
+          :edit="clickEdit"
+          :save="clickSave"
+          :validate="validateData"
+          :clickNext="clickNext"
+          :clickPrevious="clickPrevious"
+          :clickDelete="clickDelete"
+          v-model:editvisible="edit"
+          v-model:next="next"
+          v-model:previous="previous"
+          v-model:modalEdit="modalEdit"
+        />
+      </q-form>
+    </q-card>
+  </q-dialog>
+  <HistoryTable
+    :rows="rowsHistory"
+    :columns="columnsHistory"
+    :filter="filterHistory"
+    :visible-columns="visibleColumnsHistory"
+    v-model:modal="modalHistory"
+    v-model:inputfilter="filterHistory"
+    v-model:inputvisible="visibleColumnsHistory"
+    v-model:tittle="tittleHistory"
+  >
+    <template #columns="props">
+      <q-tr :props="props">
+        <q-td v-for="col in props.cols" :key="col.name" :props="props">
+          <div
+            v-if="col.name == 'date' || col.name == 'createdAt'"
+            class="table_ellipsis"
+          >
+            {{ date2Thai(col.value) }}
+          </div>
+          <div
+            v-else-if="
+              col.name == 'positionSalaryAmount' ||
+              col.name == 'mouthSalaryAmount' ||
+              col.name == 'amount'
+            "
+            class="table_ellipsis"
+          >
+            {{ col.value == null ? "" : col.value.toLocaleString("en-US") }}
+          </div>
+          <div v-else class="table_ellipsis">
+            {{ col.value }}
+          </div>
+        </q-td>
+      </q-tr>
+    </template>
+  </HistoryTable>
+</template>
+<script setup lang="ts">
+import { onMounted, ref, watch } from "vue";
+import { useRoute } from "vue-router";
+import { useComponentProfileDataStore } from "@/components/information/store/store";
+import { useCounterMixin } from "@/stores/mixin";
+import { useDataStore } from "@/stores/data";
+import ProfileTable from "@/components/information/Table.vue";
+import DialogHeader from "@/components/information/DialogHeader.vue";
+import DialogFooter from "@/components/information/DialogFooter.vue";
+import { useQuasar } from "quasar";
+import type {
+  RequestItemsEmployee,
+  DataPropsEmployee,
+} from "@/components/information/interface/request/Salary";
+import type { ResponseObjectEmployee } from "@/components/information/interface/response/Salary";
+import type {
+  DataOption,
+  treeTab,
+} from "@/components/information/interface/index/Main";
+import HistoryTable from "@/components/TableHistory.vue";
+import http from "@/plugins/http";
+import config from "@/app.config";
+import type { QTableProps } from "quasar";
+
+const props = defineProps({
+  statusEdit: {
+    type: Boolean,
+    required: true,
+  },
+});
+
+const $q = useQuasar();
+const store = useComponentProfileDataStore();
+const { profileData, changeProfileColumns } = store;
+const dataStore = useDataStore();
+const { loaderPage } = dataStore;
+const mixin = useCounterMixin();
+const { date2Thai, success, dateToISO, messageError, dialogMessage } = mixin;
+const route = useRoute();
+const id = ref<string>("");
+const date = ref<Date>(new Date());
+const amount = ref<number | null>(null);
+const positionSalaryAmount = ref<number | null>(null);
+const mouthSalaryAmount = ref<number | null>(null);
+const search = ref<string>("");
+const refCommandNo = ref<any>();
+const expanded = ref<string[]>([]);
+const selected = ref<string>("");
+const nodesTree = ref<treeTab[]>([]);
+
+const posNoId = ref<string>("");
+const posNoEmployee = ref<string>("");
+const posNoOptions = ref<DataOption[]>([]);
+const posNoOptionsFilter = ref<DataOption[]>([]);
+
+const employeePositionId = ref<string>("");
+const employeePositionOptions = ref<DataOption[]>([]);
+const employeePositionOptionsFilter = ref<DataOption[]>([]);
+
+const employeePositionSideId = ref<string>("");
+const employeePositionSideOptions = ref<DataOption[]>([]);
+const employeePositionSideOptionsFilter = ref<DataOption[]>([]);
+
+const employeeLevelId = ref<string>("");
+const employeeLevelOptions = ref<DataOption[]>([]);
+const employeeLevelOptionsFilter = ref<DataOption[]>([]);
+
+const employeeGroupId = ref<string>("");
+const employeeGroupOptions = ref<DataOption[]>([]);
+const employeeGroupOptionsFilter = ref<DataOption[]>([]);
+
+const agencyId = ref<string>("");
+const agencyOptions = ref<DataOption[]>([]);
+const agencyOptionsFilter = ref<DataOption[]>([]);
+
+const refSelected = ref<DataOption | null>(null);
+const refOptions = ref<DataOption[]>([
+  {
+    id: "17",
+    name: "****************  ข้าราชการสามัญ  **********************",
+    disable: true,
+  },
+  {
+    id: "18",
+    name: "รักษาการในตำแหน่ง {ตำแหน่ง} ตั้งแต่ {วัน} {เดือน} {พ.ศ.} ถึงวันที่ {วัน} {เดือน} {พ.ศ.} คำสั่ง กทม.ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+  },
+  {
+    id: "19",
+    name: "ช่วยราชการ หน่วนงาน {สังกัด} ตั้งแต่ {วัน} {เดือน} {พ.ศ.} ถึงวันที่ {วัน} {เดือน} {พ.ศ.} คำสั่ง กทม.ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+  },
+  {
+    id: "20",
+    name: "รับโอน {ตำแหน่งประเภท} จากตำแหน่ง {ตำแหน่ง} ระดับ {ระดับ} สังกัด {สังกัด} ตำแหน่งเลขที่ {ตำแหน่งเลขที่} ค่าจ้าง {ค่าจ้าง} เป็นตำแหน่ง {ตำแหน่ง} ระดับ {ระดับ} สังกัด {สังกัด} ตำแหน่งเลขที่ {ตำแหน่งเลขที่} ค่าจ้าง {ค่าจ้าง} คำสั่ง กทม.ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+  },
+  {
+    id: "21",
+    name: "เลื่อนระดับ {ประเภทตำแหน่ง} จาก ตำแหน่งเลขที่ {ตำแหน่งเลขที่เดิม} ตำแหน่ง {ตำแหน่งเดิม} ระดับ {ระดับเดิม} {สำนักเดิม} เงินเดือน {เงินเดือนเดิม} เป็น ตำแหน่งเลขที่ {ตำแหน่งเลขที่ใหม่} ตำแหน่ง {ตำแหน่งใหม่} ระดับ {ระดับใหม่} {สำนักใหม่} เงินเดือน {เงินเดือนใหม่} คำสั่ง กทม.ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+  },
+  {
+    id: "0",
+    name: "****************  ครู  **********************",
+    disable: true,
+  },
+  {
+    id: "1",
+    name: "บรรจุและแต่งตั้งผู้ผ่านการคัดเลือกได้วุฒิ  {วุฒิ} คำสั่ง กทม. ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+  },
+  {
+    id: "2",
+    name: "เลื่อนค่าจ้าง (1 ขั้น) คำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+  },
+  { id: "3", name: "ปรับอัตราค่าจ้างครู บัญชีใหม่ {พ.ศ.}" },
+  {
+    id: "4",
+    name: "ปรับให้เข้าระดับและขั้นค่าจ้างตามบัญชีอัตราค่าจ้างข้าราชการพลเรือน บัญชี ก. ท้ายพระราชบัญญัติระเบียบข้าราชการพลเรือน(ฉบับที่6) พ.ศ.{ปี}",
+  },
+  {
+    id: "5",
+    name: "ปรับอัตราค่าจ้าง ตามบัญชี ข. ท้าย พ.ร.บ.ระเบียบข้าราชการพลเรือน(ฉบับที่ ) พ.ศ.{ปี}",
+  },
+  {
+    id: "6",
+    name: "ปรับค่าจ้างตาม พ.ร.บ.ค่าจ้างฯ (ฉบับที่ ) {พ.ศ.} คำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+  },
+  {
+    id: "7",
+    name: "ปรับค่าจ้างตาม พ.ร.ฎ.การปรับค่าจ้างขั้นต่ำขั้นสูงของข้าราชการสามัญฯ {พ.ศ.}  คำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+  },
+  {
+    id: "8",
+    name: "ปรับอัตราค่าจ้างตามพระราชกฤษฎีกา การปรับอัตราค่าจ้างของข้าราชการ {พ.ศ.}",
+  },
+  {
+    id: "9",
+    name: "ปรับอัตราค่าจ้างตามหนังสือ ก.ค.ศ.ด่วนมาก ที่ / ลว. 4 ธ.ค. 2555 (ปรับตามคุณวุฒิ) คำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+  },
+  {
+    id: "10",
+    name: "แต่งตั้งข้าราชการ คำสั่ง คำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+  },
+  {
+    id: "11",
+    name: "การแต่งตั้งข้าราชการสามัญ กทม.ฯ ตาม พรฎ.ระเบียบข้าราชการสามัญ กทม. พ.ศ. ดำรงตำแหน่งฯ ตาม พรบ.ระเบียบข้าราชการกทม.ฯ พ.ศ. คำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+  },
+  {
+    id: "12",
+    name: "แต่งตั้งครูผู้ช่วยให้ดำรงตำแหน่งครู คำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+  },
+  {
+    id: "13",
+    name: "ได้รับค่าจ้างสูงกว่าหรือต่ำกว่าขั้นต่ำฯ คำสั่ง กทม. ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+  },
+  {
+    id: "14",
+    name: "ได้รับค่าจ้างสูงกว่าขั้นสูงของอันดับและเลื่อนขั้นค่าจ้าง คำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+  },
+  {
+    id: "15",
+    name: "ให้ข้าราชการสามัญ กทม. มีวิทยฐานะ {วิทยฐานะ} และรับค่าจ้างอันดับ {คศ.} คำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+  },
+  { id: "16", name: "มาตรา 9 แห่ง พรฎ.ระเบียบข้าราชการสามัญ กทม. {พ.ศ}" },
+  {
+    id: "21",
+    name: "****************  ลูกจ้าง  **********************",
+    disable: true,
+  },
+  {
+    id: "22",
+    name: "จ้างและแต่งตั้งลูกจ้างประจำ คำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+  },
+  {
+    id: "23",
+    name: "เลื่อนค่าจ้างตามคำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+  },
+  {
+    id: "24",
+    name: "ได้รับอัตราค่าจ้างสูงกว่าอัตราค่าจ้างขั้นสูงของตำแหน่งที่ได้รับแต่งตั้งในแต่ละระดับ ตามคำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+  },
+  {
+    id: "25",
+    name: "แก้ไขคำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+  },
+  {
+    id: "26",
+    name: "ยกเลิกคำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+  },
+  {
+    id: "27",
+    name: "แต่งตั้งลูกจ้างประจำตามมาตรฐานกำหนดตำแหน่งฯ ตามคำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+  },
+  {
+    id: "28",
+    name: "แต่งตั้งลูกจ้างประจำ ตามคำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+  },
+  { id: "29", name: "ไม่เลื่อนขั้นค่าจ้าง เนื่องจาก" },
+  {
+    id: "30",
+    name: "ได้รับเงินตอบแทนพิเศษร้อยละ {} คำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+  },
+  {
+    id: "31",
+    name: "ปรับอัตราค่าจ้างลูกจ้างประจำกรุงเทพมหานคร ตามข้อบังคับกรุงเทพมหานครว่าด้วยการกำหนดอัตราค่าจ้างขั้นต่ำสุดและสูงสุดของลูกจ้าง พ.ศ. 2557",
+  },
+  {
+    id: "32",
+    name: "ปรับอัตราค่าจ้างลูกจ้างประจำกรุงเทพมหานครตามข้อบังคับกรุงเทพมหานครว่าด้วยการกำหนดอัตราค่าจ้างขั้นต่ำสุดและสูงสุดของลูกจ้าง (ฉบับที่ {}) พ.ศ. 2557",
+  },
+  {
+    id: "33",
+    name: "ปรับอัตราค่าจ้าง ตามหนังสือกระทรวงการคลังฯ ที่ กค 0428/ว 47 ลว. 29 พ.ค. 2558 และข้อบังคับ กทม. ว่าด้วยการกำหนดอัตราค่าจ้างฯ ตั้งแต่วันที่ 1 ธ.ค. 2557 ข้อ {} ตามคำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+  },
+]);
+const refOptionsFilter = ref<DataOption[]>([
+  {
+    id: "17",
+    name: "****************  ข้าราชการสามัญ  **********************",
+    disable: true,
+  },
+  {
+    id: "18",
+    name: "รักษาการในตำแหน่ง {ตำแหน่ง} ตั้งแต่ {วัน} {เดือน} {พ.ศ.} ถึงวันที่ {วัน} {เดือน} {พ.ศ.} คำสั่ง กทม.ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+  },
+  {
+    id: "19",
+    name: "ช่วยราชการ หน่วนงาน {สังกัด} ตั้งแต่ {วัน} {เดือน} {พ.ศ.} ถึงวันที่ {วัน} {เดือน} {พ.ศ.} คำสั่ง กทม.ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+  },
+  {
+    id: "20",
+    name: "รับโอน {ตำแหน่งประเภท} จากตำแหน่ง {ตำแหน่ง} ระดับ {ระดับ} สังกัด {สังกัด} ตำแหน่งเลขที่ {ตำแหน่งเลขที่} ค่าจ้าง {ค่าจ้าง} เป็นตำแหน่ง {ตำแหน่ง} ระดับ {ระดับ} สังกัด {สังกัด} ตำแหน่งเลขที่ {ตำแหน่งเลขที่} ค่าจ้าง {ค่าจ้าง} คำสั่ง กทม.ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+  },
+  {
+    id: "0",
+    name: "****************  ครู  **********************",
+    disable: true,
+  },
+  {
+    id: "1",
+    name: "บรรจุและแต่งตั้งผู้ผ่านการคัดเลือกได้วุฒิ  {วุฒิ} คำสั่ง กทม. ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+  },
+  {
+    id: "2",
+    name: "เลื่อนค่าจ้าง (1 ขั้น) คำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+  },
+  { id: "3", name: "ปรับอัตราค่าจ้างครู บัญชีใหม่ {พ.ศ.}" },
+  {
+    id: "4",
+    name: "ปรับให้เข้าระดับและขั้นค่าจ้างตามบัญชีอัตราค่าจ้างข้าราชการพลเรือน บัญชี ก. ท้ายพระราชบัญญัติระเบียบข้าราชการพลเรือน(ฉบับที่6) พ.ศ.{ปี}",
+  },
+  {
+    id: "5",
+    name: "ปรับอัตราค่าจ้าง ตามบัญชี ข. ท้าย พ.ร.บ.ระเบียบข้าราชการพลเรือน(ฉบับที่ ) พ.ศ.{ปี}",
+  },
+  {
+    id: "6",
+    name: "ปรับค่าจ้างตาม พ.ร.บ.ค่าจ้างฯ (ฉบับที่ ) {พ.ศ.} คำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+  },
+  {
+    id: "7",
+    name: "ปรับค่าจ้างตาม พ.ร.ฎ.การปรับค่าจ้างขั้นต่ำขั้นสูงของข้าราชการสามัญฯ {พ.ศ.}  คำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+  },
+  {
+    id: "8",
+    name: "ปรับอัตราค่าจ้างตามพระราชกฤษฎีกา การปรับอัตราค่าจ้างของข้าราชการ {พ.ศ.}",
+  },
+  {
+    id: "9",
+    name: "ปรับอัตราค่าจ้างตามหนังสือ ก.ค.ศ.ด่วนมาก ที่ / ลว. 4 ธ.ค. 2555 (ปรับตามคุณวุฒิ) คำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+  },
+  {
+    id: "10",
+    name: "แต่งตั้งข้าราชการ คำสั่ง คำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+  },
+  {
+    id: "11",
+    name: "การแต่งตั้งข้าราชการสามัญ กทม.ฯ ตาม พรฎ.ระเบียบข้าราชการสามัญ กทม. พ.ศ. ดำรงตำแหน่งฯ ตาม พรบ.ระเบียบข้าราชการกทม.ฯ พ.ศ. คำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+  },
+  {
+    id: "12",
+    name: "แต่งตั้งครูผู้ช่วยให้ดำรงตำแหน่งครู คำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+  },
+  {
+    id: "13",
+    name: "ได้รับค่าจ้างสูงกว่าหรือต่ำกว่าขั้นต่ำฯ คำสั่ง กทม. ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+  },
+  {
+    id: "14",
+    name: "ได้รับค่าจ้างสูงกว่าขั้นสูงของอันดับและเลื่อนขั้นค่าจ้าง คำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+  },
+  {
+    id: "15",
+    name: "ให้ข้าราชการสามัญ กทม. มีวิทยฐานะ {วิทยฐานะ} และรับค่าจ้างอันดับ {คศ.} คำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+  },
+  { id: "16", name: "มาตรา 9 แห่ง พรฎ.ระเบียบข้าราชการสามัญ กทม. {พ.ศ}" },
+  {
+    id: "21",
+    name: "****************  ลูกจ้าง  **********************",
+    disable: true,
+  },
+  {
+    id: "22",
+    name: "จ้างและแต่งตั้งลูกจ้างประจำ คำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+  },
+  {
+    id: "23",
+    name: "เลื่อนค่าจ้างตามคำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+  },
+  {
+    id: "24",
+    name: "ได้รับอัตราค่าจ้างสูงกว่าอัตราค่าจ้างขั้นสูงของตำแหน่งที่ได้รับแต่งตั้งในแต่ละระดับ ตามคำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+  },
+  {
+    id: "25",
+    name: "แก้ไขคำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+  },
+  {
+    id: "26",
+    name: "ยกเลิกคำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+  },
+  {
+    id: "27",
+    name: "แต่งตั้งลูกจ้างประจำตามมาตรฐานกำหนดตำแหน่งฯ ตามคำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+  },
+  {
+    id: "28",
+    name: "แต่งตั้งลูกจ้างประจำ ตามคำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+  },
+  { id: "29", name: "ไม่เลื่อนขั้นค่าจ้าง เนื่องจาก" },
+  {
+    id: "30",
+    name: "ได้รับเงินตอบแทนพิเศษร้อยละ {} คำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+  },
+  {
+    id: "31",
+    name: "ปรับอัตราค่าจ้างลูกจ้างประจำกรุงเทพมหานคร ตามข้อบังคับกรุงเทพมหานครว่าด้วยการกำหนดอัตราค่าจ้างขั้นต่ำสุดและสูงสุดของลูกจ้าง พ.ศ. 2557",
+  },
+  {
+    id: "32",
+    name: "ปรับอัตราค่าจ้างลูกจ้างประจำกรุงเทพมหานครตามข้อบังคับกรุงเทพมหานครว่าด้วยการกำหนดอัตราค่าจ้างขั้นต่ำสุดและสูงสุดของลูกจ้าง (ฉบับที่ {}) พ.ศ. 2557",
+  },
+  {
+    id: "33",
+    name: "ปรับอัตราค่าจ้าง ตามหนังสือกระทรวงการคลังฯ ที่ กค 0428/ว 47 ลว. 29 พ.ค. 2558 และข้อบังคับ กทม. ว่าด้วยการกำหนดอัตราค่าจ้างฯ ตั้งแต่วันที่ 1 ธ.ค. 2557 ข้อ {} ตามคำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+  },
+]);
+const salaryClass = ref<string>();
+const salaryRef = ref<string>();
+const myForm = ref<any>(); //form data input
+const edit = ref<boolean>(false); //เช็คการกดปุ่มแก้ไขใน dialog
+const modal = ref<boolean>(false); //modal add detail
+const modalEdit = ref<boolean>(false); //modal ที่แสดงใช้สำหรับแก้ไขหรือไม่
+const rawItem = ref<ResponseObjectEmployee>(); //ข้อมูลเดิมที่เลือกใน row นั้น
+const rowIndex = ref<number>(0); //indexข้อมูลเดิมที่เลือกใน row นั้น
+const previous = ref<boolean>(); //แสดงปุ่มดูข้อมูลก่อนหน้า
+const next = ref<boolean>(); //แสดงปุ่มดูข้อมูลต่อไป
+const editRow = ref<boolean>(false); //เช็คมีการแก้ไขข้อมูล
+const rowsHistory = ref<ResponseObjectEmployee[]>([]); //select data history
+const tittleHistory = ref<string>("ประวัติแก้ไขตำแหน่ง/ค่าจ้าง"); //
+const filterHistory = ref<string>(""); //search data table history
+const modalHistory = ref<boolean>(false); //modal ประวัติการแก้ไขข้อมูล
+const checkValidate = ref<boolean>(false); //validate data ผ่านหรือไม่
+const profileId = ref<string>(
+  route.params.id ? route.params.id.toString() : ""
+);
+const rows = ref<ResponseObjectEmployee[]>([]);
+const filter = ref<string>(""); //search data table
+const visibleColumns = ref<String[]>([]);
+profileData.salary.columns.length == 0
+  ? (visibleColumns.value = [
+      "date",
+      "amount",
+      "positionSalaryAmount",
+      "mouthSalaryAmount",
+      "oc",
+      "positionEmployeePosition",
+      "posNo",
+      "positionEmployeePositionSide",
+      "positionEmployeeLevel",
+      "positionEmployeeGroup",
+      //   "salaryClass",
+      "salaryRef",
+      "refCommandNo",
+    ])
+  : (visibleColumns.value = profileData.salary.columns);
+const columns = ref<QTableProps["columns"]>([
+  {
+    name: "date",
+    align: "left",
+    label: "วัน เดือน ปี จ้างและแต่งตั้ง",
+    sortable: true,
+    field: "date",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "amount",
+    align: "left",
+    label: "ค่าจ้าง",
+    sortable: true,
+    field: "amount",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  //   {
+  //     name: "positionSalaryAmount",
+  //     align: "left",
+  //     label: "เงินประจำตำแหน่ง",
+  //     sortable: true,
+  //     field: "positionSalaryAmount",
+  //     headerStyle: "font-size: 14px",
+  //     style: "font-size: 14px",
+  //     sort: (a: string, b: string) =>
+  //       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  //   },
+  //   {
+  //     name: "mouthSalaryAmount",
+  //     align: "left",
+  //     label: "เงินค่าตอบแทนรายเดือน",
+  //     sortable: true,
+  //     field: "mouthSalaryAmount",
+  //     headerStyle: "font-size: 14px",
+  //     style: "font-size: 14px",
+  //     sort: (a: string, b: string) =>
+  //       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  //   },
+  {
+    name: "oc",
+    align: "left",
+    label: "สังกัด",
+    sortable: true,
+    field: "oc",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "positionEmployeePosition",
+    align: "left",
+    label: "ตำแหน่ง",
+    sortable: true,
+    field: "positionEmployeePosition",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "posNo",
+    align: "left",
+    label: "ตำแหน่งเลขที่",
+    sortable: true,
+    field: "posNo",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "positionEmployeePositionSide",
+    align: "left",
+    label: "ด้านของตำแหน่ง",
+    sortable: true,
+    field: "positionEmployeePositionSide",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "positionEmployeeLevel",
+    align: "left",
+    label: "ระดับ",
+    sortable: true,
+    field: "positionEmployeeLevel",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "positionEmployeeGroup",
+    align: "left",
+    label: "กลุ่มงาน",
+    sortable: true,
+    field: "positionEmployeeGroup",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  //   {
+  //     name: "salaryClass",
+  //     align: "left",
+  //     label: "ตำแหน่ง (รายละเอียด)",
+  //     sortable: true,
+  //     field: "salaryClass",
+  //     headerStyle: "font-size: 14px",
+  //     style: "font-size: 14px",
+  //     sort: (a: string, b: string) =>
+  //       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  //   },
+  {
+    name: "salaryRef",
+    align: "left",
+    label: "เอกสารอ้างอิง",
+    sortable: true,
+    field: "salaryRef",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "refCommandNo",
+    align: "left",
+    label: "เลขที่คำสั่ง",
+    sortable: true,
+    field: "refCommandNo",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+]);
+const columnsHistory = ref<QTableProps["columns"]>([
+  {
+    name: "date",
+    align: "left",
+    label: "วัน เดือน ปี จ้างและแต่งตั้ง",
+    sortable: true,
+    field: "date",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "amount",
+    align: "left",
+    label: "ค่าจ้าง",
+    sortable: true,
+    field: "amount",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  //   {
+  //     name: "positionSalaryAmount",
+  //     align: "left",
+  //     label: "เงินประจำตำแหน่ง",
+  //     sortable: true,
+  //     field: "positionSalaryAmount",
+  //     headerStyle: "font-size: 14px",
+  //     style: "font-size: 14px",
+  //     sort: (a: string, b: string) =>
+  //       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  //   },
+  //   {
+  //     name: "mouthSalaryAmount",
+  //     align: "left",
+  //     label: "เงินค่าตอบแทนรายเดือน",
+  //     sortable: true,
+  //     field: "mouthSalaryAmount",
+  //     headerStyle: "font-size: 14px",
+  //     style: "font-size: 14px",
+  //     sort: (a: string, b: string) =>
+  //       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  //   },
+  {
+    name: "oc",
+    align: "left",
+    label: "สังกัด",
+    sortable: true,
+    field: "oc",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "positionEmployeePosition",
+    align: "left",
+    label: "ตำแหน่ง",
+    sortable: true,
+    field: "positionEmployeePosition",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "posNo",
+    align: "left",
+    label: "ตำแหน่งเลขที่",
+    sortable: true,
+    field: "posNo",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "positionEmployeePositionSide",
+    align: "left",
+    label: "ด้านของตำแหน่ง",
+    sortable: true,
+    field: "positionEmployeePositionSide",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "positionEmployeeLevel",
+    align: "left",
+    label: "ระดับ",
+    sortable: true,
+    field: "positionEmployeeLevel",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "positionEmployeeGroup",
+    align: "left",
+    label: "กลุ่มงาน",
+    sortable: true,
+    field: "positionEmployeeGroup",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  //   {
+  //     name: "salaryClass",
+  //     align: "left",
+  //     label: "ตำแหน่ง (รายละเอียด)",
+  //     sortable: true,
+  //     field: "salaryClass",
+  //     headerStyle: "font-size: 14px",
+  //     style: "font-size: 14px",
+  //     sort: (a: string, b: string) =>
+  //       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  //   },
+  {
+    name: "salaryRef",
+    align: "left",
+    label: "เอกสารอ้างอิง",
+    sortable: true,
+    field: "salaryRef",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "refCommandNo",
+    align: "left",
+    label: "เลขที่คำสั่ง",
+    sortable: true,
+    field: "refCommandNo",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "createdFullName",
+    align: "left",
+    label: "ผู้ดำเนินการ",
+    sortable: true,
+    field: "createdFullName",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "createdAt",
+    align: "left",
+    label: "วันที่แก้ไข",
+    sortable: true,
+    field: "createdAt",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+]);
+const visibleColumnsHistory = ref<String[]>([
+  "date",
+  "amount",
+  "positionSalaryAmount",
+  "mouthSalaryAmount",
+  "oc",
+  "positionEmployeePosition",
+  "posNo",
+  "positionEmployeePositionSide",
+  "positionEmployeeLevel",
+  "positionEmployeeGroup",
+  //   "salaryClass",
+  "salaryRef",
+  "refCommandNo",
+  "createdFullName",
+  "createdAt",
+]);
+
+watch(visibleColumns, async (count: String[], prevCount: String[]) => {
+  await changeProfileColumns("salary", count);
+});
+
+onMounted(async () => {
+  await fetchData();
+  await fetchDataSelector();
+});
+
+const fetchDataSelector = async () => {
+  loaderPage(true);
+  await fetchEmployeePosition();
+  await fetchEmployeePositionSide();
+  await fetchEmployeeLevel();
+  await fetchEmployeeGroup();
+  await fetchAgency();
+  await nodeTree();
+  loaderPage(false);
+};
+// ตำแหน่ง
+const fetchEmployeePosition = async () => {
+  await http
+    .get(config.API.positionEmployeePosition)
+    .then((res) => {
+      const data = res.data.result;
+      let option: DataOption[] = [];
+      data.map((r: DataOption) => {
+        option.push({ id: r.id.toString(), name: r.name.toString() });
+      });
+
+      employeePositionOptions.value = option;
+      employeePositionOptionsFilter.value = option;
+    })
+    .catch((e) => {
+      messageError($q, e);
+    });
+};
+// ด้านของตำแหน่ง
+const fetchEmployeePositionSide = async () => {
+  await http
+    .get(config.API.positionEmployeePositionSide)
+    .then((res) => {
+      const data = res.data.result;
+      let option: DataOption[] = [];
+      data.map((r: DataOption) => {
+        option.push({ id: r.id.toString(), name: r.name.toString() });
+      });
+
+      employeePositionSideOptions.value = option;
+      employeePositionSideOptionsFilter.value = option;
+    })
+    .catch((e) => {
+      messageError($q, e);
+    });
+};
+// ระดับ
+const fetchEmployeeLevel = async () => {
+  await http
+    .get(config.API.positionEmployeeLevel)
+    .then((res) => {
+      const data = res.data.result;
+      let option: DataOption[] = [];
+      data.map((r: DataOption) => {
+        option.push({ id: r.id.toString(), name: r.name.toString() });
+      });
+
+      employeeLevelOptions.value = option;
+      employeeLevelOptionsFilter.value = option;
+    })
+    .catch((e) => {
+      messageError($q, e);
+    });
+};
+// กลุ่มงาน
+const fetchEmployeeGroup = async () => {
+  await http
+    .get(config.API.positionEmployeeGroup)
+    .then((res) => {
+      const data = res.data.result;
+      let option: DataOption[] = [];
+      data.map((r: DataOption) => {
+        option.push({ id: r.id.toString(), name: r.name.toString() });
+      });
+
+      employeeGroupOptions.value = option;
+      employeeGroupOptionsFilter.value = option;
+    })
+    .catch((e) => {
+      messageError($q, e);
+    });
+};
+
+// สังกัด
+const fetchAgency = async () => {
+  await http
+    .get(config.API.organizationRoot)
+    .then((res) => {
+      const data = res.data.result;
+      let option: DataOption[] = [];
+      data.map((r: any) => {
+        option.push({ id: r.id.toString(), name: r.label.toString() });
+      });
+
+      agencyOptions.value = option;
+      agencyOptionsFilter.value = option;
+    })
+    .catch((e) => {
+      messageError($q, e);
+    });
+};
+
+const nodeTree = async () => {
+  loaderPage(true);
+  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(() => {
+      loaderPage(false);
+    });
+};
+
+const selectAgency = (val: string) => {
+  fetchPositionNumber(val);
+  clickEditRow();
+};
+
+const filterSelector = (val: any, update: Function, filtername: string) => {
+  switch (filtername) {
+    case "posNo":
+      update(() => {
+        posNoOptions.value = posNoOptionsFilter.value.filter(
+          (v: DataOption) => v.name.indexOf(val) > -1
+        );
+      });
+      break;
+    case "employeePosition":
+      update(() => {
+        employeePositionOptions.value =
+          employeePositionOptionsFilter.value.filter(
+            (v: DataOption) => v.name.indexOf(val) > -1
+          );
+      });
+      break;
+    case "employeePositionSide":
+      update(() => {
+        employeePositionSideOptions.value =
+          employeePositionSideOptionsFilter.value.filter(
+            (v: DataOption) => v.name.indexOf(val) > -1
+          );
+      });
+      break;
+    case "employeeLevel":
+      update(() => {
+        employeeLevelOptions.value = employeeLevelOptionsFilter.value.filter(
+          (v: DataOption) => v.name.indexOf(val) > -1
+        );
+      });
+      break;
+
+    case "employeeGroup":
+      update(() => {
+        employeeGroupOptions.value = employeeGroupOptionsFilter.value.filter(
+          (v: DataOption) => v.name.indexOf(val) > -1
+        );
+      });
+      break;
+    case "agency":
+      update(() => {
+        agencyOptions.value = agencyOptionsFilter.value.filter(
+          (v: DataOption) => v.name.indexOf(val) > -1
+        );
+      });
+      break;
+
+    case "ref":
+      update(() => {
+        refOptions.value = refOptionsFilter.value.filter(
+          (v: DataOption) => v.name.indexOf(val) > -1
+        );
+      });
+      break;
+
+    default:
+      break;
+  }
+};
+
+const fetchData = async () => {
+  if (profileId.value) {
+    loaderPage(true);
+    await http
+      .get(config.API.profileSalaryEmployeeId(profileId.value))
+      .then((res) => {
+        const data = res.data.result;
+        //   console.log(data);
+        rows.value = [];
+        data.map((e: ResponseObjectEmployee) => {
+          rows.value.push({
+            id: e.id,
+            date: new Date(e.date),
+            amount: e.amount,
+            positionSalaryAmount: e.positionSalaryAmount,
+            mouthSalaryAmount: e.mouthSalaryAmount,
+            oc: e.oc,
+            ocId: e.ocId,
+            posNo: e.posNo,
+            posNoId: e.posNoId,
+            posNoEmployee: e.posNoEmployee,
+            positionEmployeeGroup: e.positionEmployeeGroup,
+            positionEmployeeGroupId: e.positionEmployeeGroupId,
+            positionEmployeeLevel: e.positionEmployeeLevel,
+            positionEmployeeLevelId: e.positionEmployeeLevelId,
+            positionEmployeePosition: e.positionEmployeePosition,
+            positionEmployeePositionId: e.positionEmployeePositionId,
+            positionEmployeePositionSide: e.positionEmployeePositionSide,
+            positionEmployeePositionSideId: e.positionEmployeePositionSideId,
+            salaryClass: e.salaryClass,
+            salaryRef: e.salaryRef,
+            refCommandNo: e.refCommandNo,
+            //   refCommandDate: new Date(e.refCommandDate),
+            createdFullName: e.createdFullName,
+            createdAt: new Date(e.createdAt),
+          });
+        });
+      })
+      .catch((e) => {
+        messageError($q, e);
+      })
+      .finally(() => {
+        loaderPage(false);
+      });
+  }
+};
+
+const fetchPositionNumber = async (id: string) => {
+  //   loaderPage(true);
+  if (id == null || id == "") return;
+  await http
+    .get(config.API.getPositionNumberIdByOcId(id))
+    .then((res) => {
+      const data = res.data.result;
+      let option: DataOption[] = [];
+      data.map((r: DataOption) => {
+        option.push({ id: r.id.toString(), name: r.name.toString() });
+      });
+      posNoOptions.value = option;
+      posNoOptionsFilter.value = option;
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      loaderPage(false);
+    });
+};
+
+/**
+ * กดดูข้อมูลก่อนหน้า
+ */
+const clickPrevious = async () => {
+  edit.value = false;
+  rowIndex.value -= 1;
+  await getData();
+  await checkRowPage();
+};
+
+/**
+ * กดดูข้อมูลต่อไป
+ */
+const clickNext = async () => {
+  edit.value = false;
+  rowIndex.value += 1;
+  await getData();
+  await checkRowPage();
+};
+
+/**
+ * กดดูข้อมูลต่อไป
+ */
+const getData = async () => {
+  const row = rows.value[rowIndex.value];
+  date.value = row.date;
+  amount.value = row.amount;
+  positionSalaryAmount.value = row.positionSalaryAmount;
+  mouthSalaryAmount.value = row.mouthSalaryAmount;
+  //   positionId.value = row.positionId;
+  //   posNoId.value = row.posNoId;
+  //   positionLineId.value = row.positionLineId;
+  //   positionPathSideId.value = row.positionPathSideId;
+  //   positionTypeId.value = row.positionTypeId;
+  //   positionLevelId.value = row.positionLevelId;
+  //   positionExecutiveId.value = row.positionExecutiveId;
+  //   positionExecutiveSideId.value = row.positionExecutiveSideId;
+  posNoId.value = row.posNoId ?? "";
+  posNoEmployee.value = row.posNoEmployee ?? "";
+  employeePositionId.value = row.positionEmployeePositionId ?? "";
+  employeePositionSideId.value = row.positionEmployeePositionSideId ?? "";
+  employeeLevelId.value = row.positionEmployeeLevelId ?? "";
+  employeeGroupId.value = row.positionEmployeeGroupId ?? "";
+  agencyId.value = row.ocId ?? "";
+
+  salaryClass.value = row.salaryClass ?? "";
+  salaryRef.value = row.salaryRef ?? "";
+  refCommandNo.value = row.refCommandNo ?? "";
+  id.value = row.id;
+  await fetchPositionNumber(row.ocId ?? "");
+};
+
+/**
+ * เช็คปุ่มดูข้อมูล ย้อน กับ ต่อไป ว่าต้องแสดงไหม
+ */
+const checkRowPage = () => {
+  editRow.value = false;
+  next.value = true;
+  previous.value = true;
+  //   console.log(rowIndex.value);
+  if (rowIndex.value + 1 >= rows.value.length) {
+    next.value = false;
+  }
+  if (rowIndex.value - 1 < 0) {
+    previous.value = false;
+  }
+};
+
+/**
+ * กดปุ่มแก้ไขใน dialog
+ */
+const clickEdit = () => {
+  editRow.value = false;
+  next.value = false;
+  previous.value = false;
+};
+
+/**
+ * กดปุ่มเพิ่มด้านบน table
+ */
+const clickAdd = async () => {
+  editRow.value = false;
+  await addData();
+};
+
+/**
+ * gen ตำแหน่ง (รายละเอียด)
+ */
+const templateDetail = async () => {
+  //   salaryClass.value = "";
+  //   if (ocId.value != "") {
+  //     salaryClass.value = salaryClass.value + `สังกัด${ocId.value} `;
+  //   }
+  //   const positionF = positionOptions.value.filter(
+  //     (r: DataOption) => r.id == positionId.value
+  //   );
+  //   if (positionF.length > 0) {
+  //     salaryClass.value = salaryClass.value + `ตำแหน่ง${positionF[0].name} `;
+  //   }
+  //   const posNoF = posNoOptions.value.filter(
+  //     (r: DataOption) => r.id == posNoId.value
+  //   );
+  //   if (posNoF.length > 0) {
+  //     salaryClass.value = salaryClass.value + `ตำแหน่งเลขที่${posNoF[0].name} `;
+  //   }
+  //   const positionLineF = positionLineOptions.value.filter(
+  //     (r: DataOption) => r.id == positionLineId.value
+  //   );
+  //   if (positionLineF.length > 0) {
+  //     salaryClass.value = salaryClass.value + `สายงาน${positionLineF[0].name} `;
+  //   }
+  //   const positionPathSideF = positionSideOptions.value.filter(
+  //     (r: DataOption) => r.id == positionPathSideId.value
+  //   );
+  //   if (positionPathSideF.length > 0) {
+  //     salaryClass.value =
+  //       salaryClass.value + `ด้าน/สาขา${positionPathSideF[0].name} `;
+  //   }
+  //   const positionTypeF = positionTypeOptions.value.filter(
+  //     (r: DataOption) => r.id == positionTypeId.value
+  //   );
+  //   if (positionTypeF.length > 0) {
+  //     salaryClass.value =
+  //       salaryClass.value + `ตำแหน่งประเภท${positionTypeF[0].name} `;
+  //   }
+  //   const positionLevelF = positionLevelOptions.value.filter(
+  //     (r: DataOption) => r.id == positionLevelId.value
+  //   );
+  //   if (positionLevelF.length > 0) {
+  //     salaryClass.value = salaryClass.value + `ระดับ${positionLevelF[0].name} `;
+  //   }
+  //   const positionExecutiveF = positionExecutiveOptions.value.filter(
+  //     (r: DataOption) => r.id == positionExecutiveId.value
+  //   );
+  //   if (positionExecutiveF.length > 0) {
+  //     salaryClass.value =
+  //       salaryClass.value + `ตำแหน่งทางการบริหาร${positionExecutiveF[0].name} `;
+  //   }
+};
+
+/**
+ * กดบันทึกใน dialog
+ */
+const clickSave = async () => {
+  myForm.value.validate().then(async (result: boolean) => {
+    if (result) {
+      if (modalEdit.value) {
+        await editData();
+      } else {
+        await saveData();
+      }
+    }
+  });
+};
+
+/**
+ * บันทึกเพิ่มข้อมูล
+ */
+const saveData = async () => {
+  if (profileId.value) {
+    loaderPage(true);
+    await http
+      .post(config.API.profileSalaryEmployeeId(profileId.value), {
+        amount: amount.value,
+        date: dateToISO(date.value),
+        positionSalaryAmount: positionSalaryAmount.value,
+        mouthSalaryAmount: mouthSalaryAmount.value,
+        ocId: agencyId.value,
+        //   posNoId: posNoId.value,
+        posNoEmployee: posNoEmployee.value,
+        positionEmployeeGroupId: employeeGroupId.value,
+        positionEmployeeLevelId: employeeLevelId.value,
+        positionEmployeePositionId: employeePositionId.value,
+        positionEmployeePositionSideId: employeePositionSideId.value,
+        salaryClass: salaryClass.value,
+        salaryRef: salaryRef.value,
+        refCommandNo: refCommandNo.value,
+      })
+      .then((res) => {
+        success($q, "บันทึกข้อมูลสำเร็จ");
+        modal.value = false;
+      })
+      .catch((e) => {
+        messageError($q, e);
+      })
+      .finally(async () => {
+        await fetchData();
+      });
+  }
+};
+
+/**
+ * บันทึกแก้ไขข้อมูล
+ */
+const editData = async () => {
+  loaderPage(true);
+  await http
+    .put(config.API.profileSalaryEmployeeId(id.value), {
+      amount: amount.value,
+      date: dateToISO(date.value),
+      positionSalaryAmount: positionSalaryAmount.value,
+      mouthSalaryAmount: mouthSalaryAmount.value,
+      ocId: agencyId.value,
+      //   posNoId: posNoId.value,
+      posNoEmployee: posNoEmployee.value,
+      positionEmployeeGroupId: employeeGroupId.value,
+      positionEmployeeLevelId: employeeLevelId.value,
+      positionEmployeePositionId: employeePositionId.value,
+      positionEmployeePositionSideId: employeePositionSideId.value,
+      salaryClass: salaryClass.value,
+      salaryRef: salaryRef.value,
+      refCommandNo: refCommandNo.value,
+    })
+    .then((res) => {
+      success($q, "บันทึกข้อมูลสำเร็จ");
+      modal.value = false;
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(async () => {
+      await fetchData();
+    });
+};
+
+/**
+ * ลบข้อมูล
+ */
+const fetchDataDelete = async () => {
+  loaderPage(true);
+  await http
+    .delete(config.API.profileSalaryId(id.value))
+    .then((res) => {
+      success($q, "ลบข้อมูลสำเร็จ");
+      modal.value = false;
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(async () => {
+      await fetchData();
+    });
+};
+
+/**
+ *  dialog ลบข้อมูล
+ */
+const clickDelete = async () => {
+  dialogMessage(
+    $q,
+    "ลบข้อมูล",
+    "ต้องการทำการลบข้อมูลนี้ใช่หรือไม่",
+    "delete",
+    "ยืนยัน",
+    "red",
+    async () => await fetchDataDelete(),
+    async () => await fetchData(),
+    false
+  );
+};
+
+/**
+ * กดปิด dialog
+ */
+const clickClose = async () => {
+  if (editRow.value == true) {
+    dialogMessage(
+      $q,
+      "ข้อมูลมีการแก้ไข",
+      "ยืนยันที่จะปิดโดยไม่บันทึกใช่หรือไม่?",
+      "info",
+      "ยืนยัน",
+      "primary",
+      async () => {
+        modal.value = false;
+        next.value = false;
+        previous.value = false;
+      },
+      undefined,
+      false
+    );
+  } else {
+    modal.value = false;
+    next.value = false;
+    previous.value = false;
+  }
+};
+
+/**
+ * กดเลือกข้อมูลที่จะแก้ไข
+ * @param props ค่า props ใน row ที่เลือก
+ */
+const selectData = async (props: DataPropsEmployee) => {
+  //   console.log(props.row);
+  modalEdit.value = true;
+  modal.value = true;
+  edit.value = false;
+  rawItem.value = props.row;
+  rowIndex.value = props.rowIndex;
+  date.value = props.row.date;
+  amount.value = props.row.amount;
+  positionSalaryAmount.value = props.row.positionSalaryAmount;
+  mouthSalaryAmount.value = props.row.mouthSalaryAmount;
+
+  posNoId.value = props.row.posNoId ?? "";
+  posNoEmployee.value = props.row.posNoEmployee ?? "";
+  employeePositionId.value = props.row.positionEmployeePositionId ?? "";
+  employeePositionSideId.value = props.row.positionEmployeePositionSideId ?? "";
+  employeeLevelId.value = props.row.positionEmployeeLevelId ?? "";
+  employeeGroupId.value = props.row.positionEmployeeGroupId ?? "";
+  agencyId.value = props.row.ocId ?? "";
+
+  //   refSelected.value = props.row
+  salaryClass.value = props.row.salaryClass ?? "";
+  salaryRef.value = props.row.salaryRef ?? "";
+  refCommandNo.value = props.row.refCommandNo ?? "";
+  id.value = props.row.id;
+  await fetchPositionNumber(props.row.ocId ?? "");
+  await checkRowPage();
+};
+
+/**
+ * กดปุ่มเพิ่มบน table
+ */
+const addData = () => {
+  modalEdit.value = false;
+  modal.value = true;
+  edit.value = true;
+  date.value = new Date();
+  amount.value = null;
+  positionSalaryAmount.value = null;
+  mouthSalaryAmount.value = null;
+
+  posNoId.value = "";
+  posNoEmployee.value = "";
+  employeePositionId.value = "";
+  employeePositionSideId.value = "";
+  employeeLevelId.value = "";
+  employeeGroupId.value = "";
+  agencyId.value = "";
+  agencyOptions.value = [];
+
+  salaryClass.value = "";
+  refSelected.value = null;
+  salaryRef.value = "";
+  refCommandNo.value = "";
+};
+
+/**
+ * ฟังก์ชันปุ่มยกเลิกการแก้ไขข้อมูล
+ */
+const clickCancel = async () => {
+  if (editRow.value == true) {
+    dialogMessage(
+      $q,
+      "ข้อมูลมีการแก้ไข",
+      "ยืนยันยกเลิกการแก้ไขใช่หรือไม่",
+      "info",
+      "ยืนยัน",
+      "primary",
+      async () => {
+        edit.value = false;
+        await checkRowPage();
+        await getData();
+      },
+      undefined,
+      false
+    );
+  } else {
+    edit.value = false;
+    await checkRowPage();
+  }
+};
+
+const onSelected = async (id: string) => {
+  await fetchPositionNumber(id);
+};
+
+/**
+ * เช็คว่ามีการแก้ไขข้อมูล
+ */
+const clickEditRow = () => {
+  editRow.value = true;
+};
+
+/**
+ * เช็คว่ามีการแก้ไขข้อมูล
+ */
+const clickEditRowRef = () => {
+  editRow.value = true;
+  salaryRef.value = refSelected.value?.name;
+};
+
+/**
+ * ฟังชั้นดูข้อมูลประวัติแก้ไขข้อมูลที่เลือก
+ * @param row ข้อมูล row ที่ดูประวัติการแก้ไข
+ */
+const clickHistory = async (row: RequestItemsEmployee) => {
+  modalHistory.value = true;
+  loaderPage(true);
+  await http
+    .get(config.API.profileSalaryHisId(row.id))
+    .then((res) => {
+      const data = res.data.result;
+      //   console.log("clickHistory", data);
+      rowsHistory.value = [];
+      data.map((e: ResponseObjectEmployee) => {
+        rowsHistory.value.push({
+          id: e.id,
+          date: new Date(e.date),
+          amount: e.amount,
+          positionSalaryAmount: e.positionSalaryAmount,
+          mouthSalaryAmount: e.mouthSalaryAmount,
+          oc: e.oc,
+          ocId: e.ocId,
+          posNo: e.posNo,
+          posNoId: e.posNoId,
+          posNoEmployee: e.posNoEmployee,
+          positionEmployeeGroup: e.positionEmployeeGroup,
+          positionEmployeeGroupId: e.positionEmployeeGroupId,
+          positionEmployeeLevel: e.positionEmployeeLevel,
+          positionEmployeeLevelId: e.positionEmployeeLevelId,
+          positionEmployeePosition: e.positionEmployeePosition,
+          positionEmployeePositionId: e.positionEmployeePositionId,
+          positionEmployeePositionSide: e.positionEmployeePositionSide,
+          positionEmployeePositionSideId: e.positionEmployeePositionSideId,
+          salaryClass: e.salaryClass,
+          salaryRef: e.salaryRef,
+          refCommandNo: e.refCommandNo,
+          createdFullName: e.createdFullName,
+          createdAt: new Date(e.createdAt),
+        });
+      });
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      loaderPage(false);
+    });
+};
+
+/**
+ * validate input ใน dialog
+ */
+const validateData = async () => {
+  checkValidate.value = true;
+  await myForm.value.validate().then((result: boolean) => {
+    if (result == false) {
+      checkValidate.value = false;
+    }
+  });
+};
+
+/**
+ * class จัดรูปแบบแสดงระหว่างข้อมูลที่แก้ไขหรือแสดงเฉยๆ
+ * @param val ข้อมูล input สำหรับแก้ไขหรือไม่
+ */
+const getClass = (val: boolean) => {
+  return {
+    "full-width inputgreen cursor-pointer": val,
+    "full-width cursor-pointer": !val,
+  };
+};
+const resetFilter = () => {};
+</script>
+<style lang="scss">
+.modalfix {
+  position: fixed !important;
+}
+</style>
diff --git a/src/components/information/SalaryEmployeeTemp.vue b/src/components/information/SalaryEmployeeTemp.vue
new file mode 100644
index 000000000..de93b4ee8
--- /dev/null
+++ b/src/components/information/SalaryEmployeeTemp.vue
@@ -0,0 +1,2038 @@
+<!-- card ตำแหน่ง/ค่าจ้าง -->
+<template>
+  <q-card flat bordered class="col-12 q-px-lg q-py-md">
+    <q-form ref="myForm">
+      <ProfileTable
+        :rows="rows"
+        :columns="columns"
+        :filter="filter"
+        :visible-columns="visibleColumns"
+        v-model:inputfilter="filter"
+        v-model:inputvisible="visibleColumns"
+        :add="clickAdd"
+        name="ตำแหน่ง/ค่าจ้าง"
+        icon="mdi-cash"
+        :statusEdit="statusEdit"
+      >
+        <template #columns="props">
+          <q-tr :props="props">
+            <q-td
+              v-for="col in props.cols"
+              :key="col.name"
+              :props="props"
+              @click="selectData(props)"
+              class="cursor-pointer"
+            >
+              <div v-if="col.name == 'date'" class="table_ellipsis">
+                {{ date2Thai(col.value) }}
+              </div>
+              <div
+                v-else-if="
+                  col.name == 'positionSalaryAmount' ||
+                  col.name == 'mouthSalaryAmount' ||
+                  col.name == 'amount'
+                "
+                class="table_ellipsis"
+              >
+                {{ col.value == null ? "" : col.value.toLocaleString("en-US") }}
+              </div>
+              <div v-else class="table_ellipsis">
+                {{ col.value }}
+              </div>
+            </q-td>
+            <q-td auto-width>
+              <q-btn
+                color="info"
+                flat
+                dense
+                round
+                size="14px"
+                icon="mdi-history"
+                @click="clickHistory(props.row)"
+              />
+            </q-td>
+          </q-tr>
+        </template>
+      </ProfileTable>
+    </q-form>
+  </q-card>
+  <!-- popup Edit window-->
+  <q-dialog v-model="modal" persistent>
+    <q-card style="width: 60vw; max-width: 80vw">
+      <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
+                    v-if="edit"
+                    :nodes="nodesTree"
+                    dense
+                    node-key="id"
+                    v-model:selected="agencyId"
+                    v-model:expanded="expanded"
+                    no-selection-unset
+                    selected-color="primary"
+                    @update:selected="onSelected"
+                    default-expand-all
+                  />
+                  <q-tree
+                    v-else
+                    :nodes="nodesTree"
+                    dense
+                    node-key="id"
+                    v-model:expanded="expanded"
+                    no-selection-unset
+                    selected-color="primary"
+                    @update:selected="onSelected"
+                    default-expand-all
+                  >
+                    <template v-slot:default-header="prop">
+                      <div class="row items-center">
+                        <div
+                          class="text-primary"
+                          v-if="selected == prop.node.id"
+                        >
+                          {{ prop.node.label }}
+                        </div>
+                        <div v-else>
+                          {{ prop.node.label }}
+                        </div>
+                      </div>
+                    </template>
+                  </q-tree>
+                </q-scroll-area>
+              </q-card>
+            </div>
+            <div class="col-xs-12 col-sm-7">
+              <q-card class="fit q-pa-sm">
+                <q-scroll-area visible style="height: 60vh">
+                  <div class="row col-12 q-col-gutter-xs">
+                    <div class="col-xs-6 col-sm-6 col-md-6">
+                      <datepicker
+                        menu-class-name="modalfix"
+                        :readonly="!edit"
+                        v-model="date"
+                        :locale="'th'"
+                        autoApply
+                        :enableTimePicker="false"
+                        @update:modelValue="clickEditRow"
+                        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="date2Thai(date)"
+                            :rules="[
+                                (val:string) =>
+                                  !!val ||
+                                  `${'กรุณาเลือกวัน เดือน ปี จ้างและแต่งตั้ง'}`,
+                              ]"
+                            :label="`${'วัน เดือน ปี จ้างและแต่งตั้ง'}`"
+                            hide-bottom-space
+                          >
+                            <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 class="col-xs-6 col-sm-6 col-md-6">
+                      <q-input
+                        :class="getClass(edit)"
+                        :outlined="edit"
+                        dense
+                        lazy-rules
+                        :readonly="!edit"
+                        :borderless="!edit"
+                        v-model="posNoEmployee"
+                        :label="`${'ตำแหน่งเลขที่'}`"
+                        @update:modelValue="clickEditRow"
+                        hide-bottom-space
+                        autogrow
+                      />
+                    </div> -->
+                    <div class="col-xs-6 col-sm-6 col-md-6">
+                      <selector
+                        :class="getClass(edit)"
+                        :outlined="edit"
+                        dense
+                        lazy-rules
+                        :readonly="!edit"
+                        :borderless="!edit"
+                        v-model="employeePositionId"
+                        :rules="[(val:string) => !!val || `${'กรุณาเลือกตำแหน่ง'}`]"
+                        :label="`${'ตำแหน่ง'}`"
+                        @update:modelValue="clickEditRow"
+                        emit-value
+                        map-options
+                        option-label="name"
+                        :options="employeePositionOptions"
+                        option-value="id"
+                        hide-bottom-space
+                        use-input
+                        input-debounce="0"
+                        @filter="(inputValue:any,
+                        doneFn:Function) => filterSelector(inputValue, doneFn,'employeePosition'
+                        ) "
+                      />
+                    </div>
+                    <div class="col-xs-6 col-sm-6 col-md-6">
+                      <selector
+                        :class="getClass(edit)"
+                        :outlined="edit"
+                        dense
+                        lazy-rules
+                        :readonly="!edit"
+                        :borderless="!edit"
+                        v-model="employeePositionSideId"
+                        :label="`${'ด้านของตำแหน่ง'}`"
+                        @update:modelValue="clickEditRow"
+                        emit-value
+                        map-options
+                        option-label="name"
+                        :options="employeePositionSideOptions"
+                        option-value="id"
+                        hide-bottom-space
+                        use-input
+                        input-debounce="0"
+                        @filter="(inputValue:any,
+                        doneFn:Function) => filterSelector(inputValue, doneFn,'employeePositionSide'
+                        ) "
+                      />
+                    </div>
+                    <!-- <div class="col-xs-6 col-sm-6 col-md-6">
+                      <selector
+                        :class="getClass(edit)"
+                        :outlined="edit"
+                        dense
+                        lazy-rules
+                        :readonly="!edit"
+                        :borderless="!edit"
+                        v-model="employeeLevelId"
+                        :label="`${'ระดับ'}`"
+                        @update:modelValue="clickEditRow"
+                        emit-value
+                        map-options
+                        option-label="name"
+                        :options="employeeLevelOptions"
+                        option-value="id"
+                        hide-bottom-space
+                        use-input
+                        input-debounce="0"
+                        @filter="(inputValue:any,
+                        doneFn:Function) => filterSelector(inputValue, doneFn,'employeeLevel'
+                        ) "
+                      />
+                    </div> -->
+                    <div class="col-xs-6 col-sm-6 col-md-6">
+                      <selector
+                        :class="getClass(edit)"
+                        :outlined="edit"
+                        dense
+                        lazy-rules
+                        :readonly="!edit"
+                        :borderless="!edit"
+                        v-model="employeeGroupId"
+                        :label="`${'กลุ่มงาน'}`"
+                        @update:modelValue="clickEditRow"
+                        emit-value
+                        map-options
+                        option-label="name"
+                        :options="employeeGroupOptions"
+                        option-value="id"
+                        hide-bottom-space
+                        use-input
+                        input-debounce="0"
+                        @filter="(inputValue:any,
+                        doneFn:Function) => filterSelector(inputValue, doneFn,'employeeGroup'
+                        ) "
+                      />
+                    </div>
+                    <!-- <div class="col-xs-12">
+                      <selector
+                        :class="getClass(edit)"
+                        :outlined="edit"
+                        dense
+                        lazy-rules
+                        :readonly="!edit"
+                        :borderless="!edit"
+                        v-model="agencyId"
+                        :label="`${'สังกัด'}`"
+                        @update:model-value="(value:string) => selectAgency(value)"
+                        emit-value
+                        map-options
+                        option-label="name"
+                        :options="agencyOptions"
+                        option-value="id"
+                        hide-bottom-space
+                        use-input
+                        input-debounce="0"
+                        @filter="(inputValue:any,
+                        doneFn:Function) => filterSelector(inputValue, doneFn,'agency'
+                        ) "
+                      />
+                    </div> -->
+                    <div class="col-xs-6 col-sm-6 col-md-6">
+                      <q-input
+                        :class="getClass(edit)"
+                        :outlined="edit"
+                        dense
+                        lazy-rules
+                        :readonly="!edit"
+                        :borderless="!edit"
+                        v-model="amount"
+                        :label="`${'ค่าจ้าง'}`"
+                        @update:modelValue="clickEditRow"
+                        type="number"
+                        hide-bottom-space
+                      />
+                    </div>
+                    <div class="col-xs-6 col-sm-6 col-md-6">
+                      <q-input
+                        :class="getClass(edit)"
+                        :outlined="edit"
+                        dense
+                        lazy-rules
+                        :readonly="!edit"
+                        :borderless="!edit"
+                        v-model="refCommandNo"
+                        hide-bottom-space
+                        :label="`${'เลขที่คำสั่ง'}`"
+                        :rules="[(val:string) => !!val || `${'กรุณากรอกเลขที่คำสั่ง'}`]"
+                        @update:modelValue="clickEditRow"
+                      >
+                        <template v-slot:append>
+                          <q-icon
+                            name="mdi-file"
+                            class="cursor-pointer"
+                            @click="resetFilter"
+                          />
+                        </template>
+                      </q-input>
+                    </div>
+                    <!-- <div class="col-xs-4 col-sm-4 col-md-4">
+                    <q-input
+                      :class="getClass(edit)"
+                      :outlined="edit"
+                      dense
+                      lazy-rules
+                      :readonly="!edit"
+                      :borderless="!edit"
+                      v-model="positionSalaryAmount"
+                      :label="`${'เงินประจำตำแหน่ง'}`"
+                      @update:modelValue="clickEditRow"
+                      type="number"
+                      hide-bottom-space
+                    />
+                  </div>
+                  <div class="col-xs-4 col-sm-4 col-md-4">
+                    <q-input
+                      :class="getClass(edit)"
+                      :outlined="edit"
+                      dense
+                      lazy-rules
+                      :readonly="!edit"
+                      :borderless="!edit"
+                      v-model="mouthSalaryAmount"
+                      :label="`${'เงินค่าตอบแทนรายเดือน'}`"
+                      @update:modelValue="clickEditRow"
+                      type="number"
+                      hide-bottom-space
+                    />
+                  </div> -->
+                    <!-- <div class="col-xs-6 col-sm-6 col-md-6">
+                    <q-input
+                      :class="getClass(edit)"
+                      :outlined="edit"
+                      dense
+                      lazy-rules
+                      :readonly="!edit"
+                      :borderless="!edit"
+                      v-model="salaryClass"
+                      :label="`${'ตำแหน่ง (รายละเอียด)'}`"
+                      @update:modelValue="clickEditRow"
+                      hide-bottom-space
+                      autogrow
+                    >
+                    </q-input>
+                  </div> -->
+
+                    <div class="row col-xs-12 col-sm-12 col-md-12">
+                      <selector
+                        :class="getClass(edit)"
+                        :outlined="edit"
+                        dense
+                        lazy-rules
+                        :readonly="!edit"
+                        :borderless="!edit"
+                        v-model="refSelected"
+                        :label="`${'ต้นแบบ (template) เอกสารอ้างอิง'}`"
+                        @update:modelValue="clickEditRowRef"
+                        option-label="name"
+                        :options="refOptions"
+                        option-value="id"
+                        hide-bottom-space
+                        use-input
+                        input-debounce="0"
+                        @filter="(inputValue:any,
+                        doneFn:Function) => filterSelector(inputValue, doneFn,'ref'
+                        ) "
+                      />
+                    </div>
+                    <div class="col-xs-12 col-sm-12 col-md-12">
+                      <q-input
+                        :class="getClass(edit)"
+                        :outlined="edit"
+                        dense
+                        lazy-rules
+                        :readonly="!edit"
+                        :borderless="!edit"
+                        v-model="salaryRef"
+                        :label="`${'เอกสารอ้างอิง'}`"
+                        @update:modelValue="clickEditRow"
+                        type="textarea"
+                        hide-bottom-space
+                      />
+                    </div>
+                    <!-- <div class="col-xs-6 col-sm-6 col-md-6">
+                    <datepicker
+                      menu-class-name="modalfix"
+                      :readonly="!edit"
+                      v-model="refCommandDate"
+                      :locale="'th'"
+                      autoApply
+                      :enableTimePicker="false"
+                      @update:modelValue="clickEditRow"
+                      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="date2Thai(refCommandDate)"
+                          :rules="[
+                      (val:string) =>
+                        !!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>
+                </q-scroll-area>
+              </q-card>
+            </div>
+          </div>
+        </q-card-section>
+        <q-separator />
+        <DialogFooter
+          :cancel="clickCancel"
+          :edit="clickEdit"
+          :save="clickSave"
+          :validate="validateData"
+          :clickNext="clickNext"
+          :clickPrevious="clickPrevious"
+          :clickDelete="clickDelete"
+          v-model:editvisible="edit"
+          v-model:next="next"
+          v-model:previous="previous"
+          v-model:modalEdit="modalEdit"
+        />
+      </q-form>
+    </q-card>
+  </q-dialog>
+  <HistoryTable
+    :rows="rowsHistory"
+    :columns="columnsHistory"
+    :filter="filterHistory"
+    :visible-columns="visibleColumnsHistory"
+    v-model:modal="modalHistory"
+    v-model:inputfilter="filterHistory"
+    v-model:inputvisible="visibleColumnsHistory"
+    v-model:tittle="tittleHistory"
+  >
+    <template #columns="props">
+      <q-tr :props="props">
+        <q-td v-for="col in props.cols" :key="col.name" :props="props">
+          <div
+            v-if="col.name == 'date' || col.name == 'createdAt'"
+            class="table_ellipsis"
+          >
+            {{ date2Thai(col.value) }}
+          </div>
+          <div
+            v-else-if="
+              col.name == 'positionSalaryAmount' ||
+              col.name == 'mouthSalaryAmount' ||
+              col.name == 'amount'
+            "
+            class="table_ellipsis"
+          >
+            {{ col.value == null ? "" : col.value.toLocaleString("en-US") }}
+          </div>
+          <div v-else class="table_ellipsis">
+            {{ col.value }}
+          </div>
+        </q-td>
+      </q-tr>
+    </template>
+  </HistoryTable>
+</template>
+<script setup lang="ts">
+import { onMounted, ref, watch } from "vue";
+import { useRoute } from "vue-router";
+import { useComponentProfileDataStore } from "@/components/information/store/store";
+import { useCounterMixin } from "@/stores/mixin";
+import { useDataStore } from "@/stores/data";
+import ProfileTable from "@/components/information/Table.vue";
+import DialogHeader from "@/components/information/DialogHeader.vue";
+import DialogFooter from "@/components/information/DialogFooter.vue";
+import { useQuasar } from "quasar";
+import type {
+  RequestItemsEmployee,
+  DataPropsEmployee,
+} from "@/components/information/interface/request/Salary";
+import type { ResponseObjectEmployee } from "@/components/information/interface/response/Salary";
+import type {
+  DataOption,
+  treeTab,
+} from "@/components/information/interface/index/Main";
+import HistoryTable from "@/components/TableHistory.vue";
+import http from "@/plugins/http";
+import config from "@/app.config";
+import type { QTableProps } from "quasar";
+
+const props = defineProps({
+  statusEdit: {
+    type: Boolean,
+    required: true,
+  },
+});
+
+const $q = useQuasar();
+const store = useComponentProfileDataStore();
+const { profileData, changeProfileColumns } = store;
+const dataStore = useDataStore();
+const { loaderPage } = dataStore;
+const mixin = useCounterMixin();
+const { date2Thai, success, dateToISO, messageError, dialogMessage } = mixin;
+const route = useRoute();
+const id = ref<string>("");
+const date = ref<Date>(new Date());
+const amount = ref<number | null>(null);
+const positionSalaryAmount = ref<number | null>(null);
+const mouthSalaryAmount = ref<number | null>(null);
+const search = ref<string>("");
+const expanded = ref<string[]>([]);
+const selected = ref<string>("");
+const nodesTree = ref<treeTab[]>([]);
+const refCommandNo = ref<any>();
+
+const posNoId = ref<string>("");
+const posNoEmployee = ref<string>("");
+const posNoOptions = ref<DataOption[]>([]);
+const posNoOptionsFilter = ref<DataOption[]>([]);
+
+const employeePositionId = ref<string>("");
+const employeePositionOptions = ref<DataOption[]>([]);
+const employeePositionOptionsFilter = ref<DataOption[]>([]);
+
+const employeePositionSideId = ref<string>("");
+const employeePositionSideOptions = ref<DataOption[]>([]);
+const employeePositionSideOptionsFilter = ref<DataOption[]>([]);
+
+const employeeLevelId = ref<string>("");
+const employeeLevelOptions = ref<DataOption[]>([]);
+const employeeLevelOptionsFilter = ref<DataOption[]>([]);
+
+const employeeGroupId = ref<string>("");
+const employeeGroupOptions = ref<DataOption[]>([]);
+const employeeGroupOptionsFilter = ref<DataOption[]>([]);
+
+const agencyId = ref<string>("");
+const agencyOptions = ref<DataOption[]>([]);
+const agencyOptionsFilter = ref<DataOption[]>([]);
+
+const refSelected = ref<DataOption | null>(null);
+const refOptions = ref<DataOption[]>([
+  {
+    id: "17",
+    name: "****************  ข้าราชการสามัญ  **********************",
+    disable: true,
+  },
+  {
+    id: "18",
+    name: "รักษาการในตำแหน่ง {ตำแหน่ง} ตั้งแต่ {วัน} {เดือน} {พ.ศ.} ถึงวันที่ {วัน} {เดือน} {พ.ศ.} คำสั่ง กทม.ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+  },
+  {
+    id: "19",
+    name: "ช่วยราชการ หน่วนงาน {สังกัด} ตั้งแต่ {วัน} {เดือน} {พ.ศ.} ถึงวันที่ {วัน} {เดือน} {พ.ศ.} คำสั่ง กทม.ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+  },
+  {
+    id: "20",
+    name: "รับโอน {ตำแหน่งประเภท} จากตำแหน่ง {ตำแหน่ง} ระดับ {ระดับ} สังกัด {สังกัด} ตำแหน่งเลขที่ {ตำแหน่งเลขที่} ค่าจ้าง {ค่าจ้าง} เป็นตำแหน่ง {ตำแหน่ง} ระดับ {ระดับ} สังกัด {สังกัด} ตำแหน่งเลขที่ {ตำแหน่งเลขที่} ค่าจ้าง {ค่าจ้าง} คำสั่ง กทม.ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+  },
+  {
+    id: "21",
+    name: "เลื่อนระดับ {ประเภทตำแหน่ง} จาก ตำแหน่งเลขที่ {ตำแหน่งเลขที่เดิม} ตำแหน่ง {ตำแหน่งเดิม} ระดับ {ระดับเดิม} {สำนักเดิม} เงินเดือน {เงินเดือนเดิม} เป็น ตำแหน่งเลขที่ {ตำแหน่งเลขที่ใหม่} ตำแหน่ง {ตำแหน่งใหม่} ระดับ {ระดับใหม่} {สำนักใหม่} เงินเดือน {เงินเดือนใหม่} คำสั่ง กทม.ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+  },
+  {
+    id: "0",
+    name: "****************  ครู  **********************",
+    disable: true,
+  },
+  {
+    id: "1",
+    name: "บรรจุและแต่งตั้งผู้ผ่านการคัดเลือกได้วุฒิ  {วุฒิ} คำสั่ง กทม. ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+  },
+  {
+    id: "2",
+    name: "เลื่อนค่าจ้าง (1 ขั้น) คำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+  },
+  { id: "3", name: "ปรับอัตราค่าจ้างครู บัญชีใหม่ {พ.ศ.}" },
+  {
+    id: "4",
+    name: "ปรับให้เข้าระดับและขั้นค่าจ้างตามบัญชีอัตราค่าจ้างข้าราชการพลเรือน บัญชี ก. ท้ายพระราชบัญญัติระเบียบข้าราชการพลเรือน(ฉบับที่6) พ.ศ.{ปี}",
+  },
+  {
+    id: "5",
+    name: "ปรับอัตราค่าจ้าง ตามบัญชี ข. ท้าย พ.ร.บ.ระเบียบข้าราชการพลเรือน(ฉบับที่ ) พ.ศ.{ปี}",
+  },
+  {
+    id: "6",
+    name: "ปรับค่าจ้างตาม พ.ร.บ.ค่าจ้างฯ (ฉบับที่ ) {พ.ศ.} คำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+  },
+  {
+    id: "7",
+    name: "ปรับค่าจ้างตาม พ.ร.ฎ.การปรับค่าจ้างขั้นต่ำขั้นสูงของข้าราชการสามัญฯ {พ.ศ.}  คำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+  },
+  {
+    id: "8",
+    name: "ปรับอัตราค่าจ้างตามพระราชกฤษฎีกา การปรับอัตราค่าจ้างของข้าราชการ {พ.ศ.}",
+  },
+  {
+    id: "9",
+    name: "ปรับอัตราค่าจ้างตามหนังสือ ก.ค.ศ.ด่วนมาก ที่ / ลว. 4 ธ.ค. 2555 (ปรับตามคุณวุฒิ) คำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+  },
+  {
+    id: "10",
+    name: "แต่งตั้งข้าราชการ คำสั่ง คำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+  },
+  {
+    id: "11",
+    name: "การแต่งตั้งข้าราชการสามัญ กทม.ฯ ตาม พรฎ.ระเบียบข้าราชการสามัญ กทม. พ.ศ. ดำรงตำแหน่งฯ ตาม พรบ.ระเบียบข้าราชการกทม.ฯ พ.ศ. คำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+  },
+  {
+    id: "12",
+    name: "แต่งตั้งครูผู้ช่วยให้ดำรงตำแหน่งครู คำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+  },
+  {
+    id: "13",
+    name: "ได้รับค่าจ้างสูงกว่าหรือต่ำกว่าขั้นต่ำฯ คำสั่ง กทม. ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+  },
+  {
+    id: "14",
+    name: "ได้รับค่าจ้างสูงกว่าขั้นสูงของอันดับและเลื่อนขั้นค่าจ้าง คำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+  },
+  {
+    id: "15",
+    name: "ให้ข้าราชการสามัญ กทม. มีวิทยฐานะ {วิทยฐานะ} และรับค่าจ้างอันดับ {คศ.} คำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+  },
+  { id: "16", name: "มาตรา 9 แห่ง พรฎ.ระเบียบข้าราชการสามัญ กทม. {พ.ศ}" },
+  {
+    id: "21",
+    name: "****************  ลูกจ้าง  **********************",
+    disable: true,
+  },
+  {
+    id: "22",
+    name: "จ้างและแต่งตั้งลูกจ้างประจำ คำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+  },
+  {
+    id: "23",
+    name: "เลื่อนค่าจ้างตามคำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+  },
+  {
+    id: "24",
+    name: "ได้รับอัตราค่าจ้างสูงกว่าอัตราค่าจ้างขั้นสูงของตำแหน่งที่ได้รับแต่งตั้งในแต่ละระดับ ตามคำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+  },
+  {
+    id: "25",
+    name: "แก้ไขคำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+  },
+  {
+    id: "26",
+    name: "ยกเลิกคำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+  },
+  {
+    id: "27",
+    name: "แต่งตั้งลูกจ้างประจำตามมาตรฐานกำหนดตำแหน่งฯ ตามคำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+  },
+  {
+    id: "28",
+    name: "แต่งตั้งลูกจ้างประจำ ตามคำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+  },
+  { id: "29", name: "ไม่เลื่อนขั้นค่าจ้าง เนื่องจาก" },
+  {
+    id: "30",
+    name: "ได้รับเงินตอบแทนพิเศษร้อยละ {} คำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+  },
+  {
+    id: "31",
+    name: "ปรับอัตราค่าจ้างลูกจ้างประจำกรุงเทพมหานคร ตามข้อบังคับกรุงเทพมหานครว่าด้วยการกำหนดอัตราค่าจ้างขั้นต่ำสุดและสูงสุดของลูกจ้าง พ.ศ. 2557",
+  },
+  {
+    id: "32",
+    name: "ปรับอัตราค่าจ้างลูกจ้างประจำกรุงเทพมหานครตามข้อบังคับกรุงเทพมหานครว่าด้วยการกำหนดอัตราค่าจ้างขั้นต่ำสุดและสูงสุดของลูกจ้าง (ฉบับที่ {}) พ.ศ. 2557",
+  },
+  {
+    id: "33",
+    name: "ปรับอัตราค่าจ้าง ตามหนังสือกระทรวงการคลังฯ ที่ กค 0428/ว 47 ลว. 29 พ.ค. 2558 และข้อบังคับ กทม. ว่าด้วยการกำหนดอัตราค่าจ้างฯ ตั้งแต่วันที่ 1 ธ.ค. 2557 ข้อ {} ตามคำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+  },
+]);
+const refOptionsFilter = ref<DataOption[]>([
+  {
+    id: "17",
+    name: "****************  ข้าราชการสามัญ  **********************",
+    disable: true,
+  },
+  {
+    id: "18",
+    name: "รักษาการในตำแหน่ง {ตำแหน่ง} ตั้งแต่ {วัน} {เดือน} {พ.ศ.} ถึงวันที่ {วัน} {เดือน} {พ.ศ.} คำสั่ง กทม.ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+  },
+  {
+    id: "19",
+    name: "ช่วยราชการ หน่วนงาน {สังกัด} ตั้งแต่ {วัน} {เดือน} {พ.ศ.} ถึงวันที่ {วัน} {เดือน} {พ.ศ.} คำสั่ง กทม.ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+  },
+  {
+    id: "20",
+    name: "รับโอน {ตำแหน่งประเภท} จากตำแหน่ง {ตำแหน่ง} ระดับ {ระดับ} สังกัด {สังกัด} ตำแหน่งเลขที่ {ตำแหน่งเลขที่} ค่าจ้าง {ค่าจ้าง} เป็นตำแหน่ง {ตำแหน่ง} ระดับ {ระดับ} สังกัด {สังกัด} ตำแหน่งเลขที่ {ตำแหน่งเลขที่} ค่าจ้าง {ค่าจ้าง} คำสั่ง กทม.ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+  },
+  {
+    id: "0",
+    name: "****************  ครู  **********************",
+    disable: true,
+  },
+  {
+    id: "1",
+    name: "บรรจุและแต่งตั้งผู้ผ่านการคัดเลือกได้วุฒิ  {วุฒิ} คำสั่ง กทม. ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+  },
+  {
+    id: "2",
+    name: "เลื่อนค่าจ้าง (1 ขั้น) คำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+  },
+  { id: "3", name: "ปรับอัตราค่าจ้างครู บัญชีใหม่ {พ.ศ.}" },
+  {
+    id: "4",
+    name: "ปรับให้เข้าระดับและขั้นค่าจ้างตามบัญชีอัตราค่าจ้างข้าราชการพลเรือน บัญชี ก. ท้ายพระราชบัญญัติระเบียบข้าราชการพลเรือน(ฉบับที่6) พ.ศ.{ปี}",
+  },
+  {
+    id: "5",
+    name: "ปรับอัตราค่าจ้าง ตามบัญชี ข. ท้าย พ.ร.บ.ระเบียบข้าราชการพลเรือน(ฉบับที่ ) พ.ศ.{ปี}",
+  },
+  {
+    id: "6",
+    name: "ปรับค่าจ้างตาม พ.ร.บ.ค่าจ้างฯ (ฉบับที่ ) {พ.ศ.} คำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+  },
+  {
+    id: "7",
+    name: "ปรับค่าจ้างตาม พ.ร.ฎ.การปรับค่าจ้างขั้นต่ำขั้นสูงของข้าราชการสามัญฯ {พ.ศ.}  คำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+  },
+  {
+    id: "8",
+    name: "ปรับอัตราค่าจ้างตามพระราชกฤษฎีกา การปรับอัตราค่าจ้างของข้าราชการ {พ.ศ.}",
+  },
+  {
+    id: "9",
+    name: "ปรับอัตราค่าจ้างตามหนังสือ ก.ค.ศ.ด่วนมาก ที่ / ลว. 4 ธ.ค. 2555 (ปรับตามคุณวุฒิ) คำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+  },
+  {
+    id: "10",
+    name: "แต่งตั้งข้าราชการ คำสั่ง คำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+  },
+  {
+    id: "11",
+    name: "การแต่งตั้งข้าราชการสามัญ กทม.ฯ ตาม พรฎ.ระเบียบข้าราชการสามัญ กทม. พ.ศ. ดำรงตำแหน่งฯ ตาม พรบ.ระเบียบข้าราชการกทม.ฯ พ.ศ. คำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+  },
+  {
+    id: "12",
+    name: "แต่งตั้งครูผู้ช่วยให้ดำรงตำแหน่งครู คำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+  },
+  {
+    id: "13",
+    name: "ได้รับค่าจ้างสูงกว่าหรือต่ำกว่าขั้นต่ำฯ คำสั่ง กทม. ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+  },
+  {
+    id: "14",
+    name: "ได้รับค่าจ้างสูงกว่าขั้นสูงของอันดับและเลื่อนขั้นค่าจ้าง คำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+  },
+  {
+    id: "15",
+    name: "ให้ข้าราชการสามัญ กทม. มีวิทยฐานะ {วิทยฐานะ} และรับค่าจ้างอันดับ {คศ.} คำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+  },
+  { id: "16", name: "มาตรา 9 แห่ง พรฎ.ระเบียบข้าราชการสามัญ กทม. {พ.ศ}" },
+  {
+    id: "21",
+    name: "****************  ลูกจ้าง  **********************",
+    disable: true,
+  },
+  {
+    id: "22",
+    name: "จ้างและแต่งตั้งลูกจ้างประจำ คำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+  },
+  {
+    id: "23",
+    name: "เลื่อนค่าจ้างตามคำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+  },
+  {
+    id: "24",
+    name: "ได้รับอัตราค่าจ้างสูงกว่าอัตราค่าจ้างขั้นสูงของตำแหน่งที่ได้รับแต่งตั้งในแต่ละระดับ ตามคำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+  },
+  {
+    id: "25",
+    name: "แก้ไขคำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+  },
+  {
+    id: "26",
+    name: "ยกเลิกคำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+  },
+  {
+    id: "27",
+    name: "แต่งตั้งลูกจ้างประจำตามมาตรฐานกำหนดตำแหน่งฯ ตามคำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+  },
+  {
+    id: "28",
+    name: "แต่งตั้งลูกจ้างประจำ ตามคำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+  },
+  { id: "29", name: "ไม่เลื่อนขั้นค่าจ้าง เนื่องจาก" },
+  {
+    id: "30",
+    name: "ได้รับเงินตอบแทนพิเศษร้อยละ {} คำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+  },
+  {
+    id: "31",
+    name: "ปรับอัตราค่าจ้างลูกจ้างประจำกรุงเทพมหานคร ตามข้อบังคับกรุงเทพมหานครว่าด้วยการกำหนดอัตราค่าจ้างขั้นต่ำสุดและสูงสุดของลูกจ้าง พ.ศ. 2557",
+  },
+  {
+    id: "32",
+    name: "ปรับอัตราค่าจ้างลูกจ้างประจำกรุงเทพมหานครตามข้อบังคับกรุงเทพมหานครว่าด้วยการกำหนดอัตราค่าจ้างขั้นต่ำสุดและสูงสุดของลูกจ้าง (ฉบับที่ {}) พ.ศ. 2557",
+  },
+  {
+    id: "33",
+    name: "ปรับอัตราค่าจ้าง ตามหนังสือกระทรวงการคลังฯ ที่ กค 0428/ว 47 ลว. 29 พ.ค. 2558 และข้อบังคับ กทม. ว่าด้วยการกำหนดอัตราค่าจ้างฯ ตั้งแต่วันที่ 1 ธ.ค. 2557 ข้อ {} ตามคำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+  },
+]);
+const salaryClass = ref<string>();
+const salaryRef = ref<string>();
+const myForm = ref<any>(); //form data input
+const edit = ref<boolean>(false); //เช็คการกดปุ่มแก้ไขใน dialog
+const modal = ref<boolean>(false); //modal add detail
+const modalEdit = ref<boolean>(false); //modal ที่แสดงใช้สำหรับแก้ไขหรือไม่
+const rawItem = ref<ResponseObjectEmployee>(); //ข้อมูลเดิมที่เลือกใน row นั้น
+const rowIndex = ref<number>(0); //indexข้อมูลเดิมที่เลือกใน row นั้น
+const previous = ref<boolean>(); //แสดงปุ่มดูข้อมูลก่อนหน้า
+const next = ref<boolean>(); //แสดงปุ่มดูข้อมูลต่อไป
+const editRow = ref<boolean>(false); //เช็คมีการแก้ไขข้อมูล
+const rowsHistory = ref<ResponseObjectEmployee[]>([]); //select data history
+const tittleHistory = ref<string>("ประวัติแก้ไขตำแหน่ง/ค่าจ้าง"); //
+const filterHistory = ref<string>(""); //search data table history
+const modalHistory = ref<boolean>(false); //modal ประวัติการแก้ไขข้อมูล
+const checkValidate = ref<boolean>(false); //validate data ผ่านหรือไม่
+const profileId = ref<string>(
+  route.params.id ? route.params.id.toString() : ""
+);
+const rows = ref<ResponseObjectEmployee[]>([]);
+const filter = ref<string>(""); //search data table
+const visibleColumns = ref<String[]>([]);
+profileData.salary.columns.length == 0
+  ? (visibleColumns.value = [
+      "date",
+      "amount",
+      "positionSalaryAmount",
+      "mouthSalaryAmount",
+      "oc",
+      "positionEmployeePosition",
+      "posNo",
+      "positionEmployeePositionSide",
+      "positionEmployeeLevel",
+      "positionEmployeeGroup",
+      //   "salaryClass",
+      "salaryRef",
+      "refCommandNo",
+    ])
+  : (visibleColumns.value = profileData.salary.columns);
+const columns = ref<QTableProps["columns"]>([
+  {
+    name: "date",
+    align: "left",
+    label: "วัน เดือน ปี จ้างและแต่งตั้ง",
+    sortable: true,
+    field: "date",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, {
+        numeric: true,
+        sensitivity: "base",
+      }),
+  },
+  {
+    name: "amount",
+    align: "left",
+    label: "ค่าจ้าง",
+    sortable: true,
+    field: "amount",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, {
+        numeric: true,
+        sensitivity: "base",
+      }),
+  },
+  //   {
+  //     name: "positionSalaryAmount",
+  //     align: "left",
+  //     label: "เงินประจำตำแหน่ง",
+  //     sortable: true,
+  //     field: "positionSalaryAmount",
+  //     headerStyle: "font-size: 14px",
+  //     style: "font-size: 14px",
+  //     sort: (a: string, b: string) =>
+  //       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  //   },
+  //   {
+  //     name: "mouthSalaryAmount",
+  //     align: "left",
+  //     label: "เงินค่าตอบแทนรายเดือน",
+  //     sortable: true,
+  //     field: "mouthSalaryAmount",
+  //     headerStyle: "font-size: 14px",
+  //     style: "font-size: 14px",
+  //     sort: (a: string, b: string) =>
+  //       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  //   },
+  {
+    name: "oc",
+    align: "left",
+    label: "สังกัด",
+    sortable: true,
+    field: "oc",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, {
+        numeric: true,
+        sensitivity: "base",
+      }),
+  },
+  {
+    name: "positionEmployeePosition",
+    align: "left",
+    label: "ตำแหน่ง",
+    sortable: true,
+    field: "positionEmployeePosition",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, {
+        numeric: true,
+        sensitivity: "base",
+      }),
+  },
+  //   {
+  //     name: "posNo",
+  //     align: "left",
+  //     label: "ตำแหน่งเลขที่",
+  //     sortable: true,
+  //     field: "posNo",
+  //     headerStyle: "font-size: 14px",
+  //     style: "font-size: 14px",
+  //     sort: (a: string, b: string) =>
+  //       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  //   },
+  {
+    name: "positionEmployeePositionSide",
+    align: "left",
+    label: "ด้านของตำแหน่ง",
+    sortable: true,
+    field: "positionEmployeePositionSide",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, {
+        numeric: true,
+        sensitivity: "base",
+      }),
+  },
+  //   {
+  //     name: "positionEmployeeLevel",
+  //     align: "left",
+  //     label: "ระดับ",
+  //     sortable: true,
+  //     field: "positionEmployeeLevel",
+  //     headerStyle: "font-size: 14px",
+  //     style: "font-size: 14px",
+  //     sort: (a: string, b: string) =>
+  //       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  //   },
+  {
+    name: "positionEmployeeGroup",
+    align: "left",
+    label: "กลุ่มงาน",
+    sortable: true,
+    field: "positionEmployeeGroup",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, {
+        numeric: true,
+        sensitivity: "base",
+      }),
+  },
+  //   {
+  //     name: "salaryClass",
+  //     align: "left",
+  //     label: "ตำแหน่ง (รายละเอียด)",
+  //     sortable: true,
+  //     field: "salaryClass",
+  //     headerStyle: "font-size: 14px",
+  //     style: "font-size: 14px",
+  //     sort: (a: string, b: string) =>
+  //       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  //   },
+  {
+    name: "salaryRef",
+    align: "left",
+    label: "เอกสารอ้างอิง",
+    sortable: true,
+    field: "salaryRef",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, {
+        numeric: true,
+        sensitivity: "base",
+      }),
+  },
+  {
+    name: "refCommandNo",
+    align: "left",
+    label: "เลขที่คำสั่ง",
+    sortable: true,
+    field: "refCommandNo",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, {
+        numeric: true,
+        sensitivity: "base",
+      }),
+  },
+]);
+const columnsHistory = ref<QTableProps["columns"]>([
+  {
+    name: "date",
+    align: "left",
+    label: "วัน เดือน ปี จ้างและแต่งตั้ง",
+    sortable: true,
+    field: "date",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, {
+        numeric: true,
+        sensitivity: "base",
+      }),
+  },
+  {
+    name: "amount",
+    align: "left",
+    label: "ค่าจ้าง",
+    sortable: true,
+    field: "amount",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, {
+        numeric: true,
+        sensitivity: "base",
+      }),
+  },
+  //   {
+  //     name: "positionSalaryAmount",
+  //     align: "left",
+  //     label: "เงินประจำตำแหน่ง",
+  //     sortable: true,
+  //     field: "positionSalaryAmount",
+  //     headerStyle: "font-size: 14px",
+  //     style: "font-size: 14px",
+  //     sort: (a: string, b: string) =>
+  //       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  //   },
+  //   {
+  //     name: "mouthSalaryAmount",
+  //     align: "left",
+  //     label: "เงินค่าตอบแทนรายเดือน",
+  //     sortable: true,
+  //     field: "mouthSalaryAmount",
+  //     headerStyle: "font-size: 14px",
+  //     style: "font-size: 14px",
+  //     sort: (a: string, b: string) =>
+  //       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  //   },
+  {
+    name: "oc",
+    align: "left",
+    label: "สังกัด",
+    sortable: true,
+    field: "oc",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, {
+        numeric: true,
+        sensitivity: "base",
+      }),
+  },
+  {
+    name: "positionEmployeePosition",
+    align: "left",
+    label: "ตำแหน่ง",
+    sortable: true,
+    field: "positionEmployeePosition",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, {
+        numeric: true,
+        sensitivity: "base",
+      }),
+  },
+  //   {
+  //     name: "posNo",
+  //     align: "left",
+  //     label: "ตำแหน่งเลขที่",
+  //     sortable: true,
+  //     field: "posNo",
+  //     headerStyle: "font-size: 14px",
+  //     style: "font-size: 14px",
+  //     sort: (a: string, b: string) =>
+  //       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  //   },
+  {
+    name: "positionEmployeePositionSide",
+    align: "left",
+    label: "ด้านของตำแหน่ง",
+    sortable: true,
+    field: "positionEmployeePositionSide",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, {
+        numeric: true,
+        sensitivity: "base",
+      }),
+  },
+  //   {
+  //     name: "positionEmployeeLevel",
+  //     align: "left",
+  //     label: "ระดับ",
+  //     sortable: true,
+  //     field: "positionEmployeeLevel",
+  //     headerStyle: "font-size: 14px",
+  //     style: "font-size: 14px",
+  //     sort: (a: string, b: string) =>
+  //       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  //   },
+  {
+    name: "positionEmployeeGroup",
+    align: "left",
+    label: "กลุ่มงาน",
+    sortable: true,
+    field: "positionEmployeeGroup",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, {
+        numeric: true,
+        sensitivity: "base",
+      }),
+  },
+  //   {
+  //     name: "salaryClass",
+  //     align: "left",
+  //     label: "ตำแหน่ง (รายละเอียด)",
+  //     sortable: true,
+  //     field: "salaryClass",
+  //     headerStyle: "font-size: 14px",
+  //     style: "font-size: 14px",
+  //     sort: (a: string, b: string) =>
+  //       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  //   },
+  {
+    name: "salaryRef",
+    align: "left",
+    label: "เอกสารอ้างอิง",
+    sortable: true,
+    field: "salaryRef",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, {
+        numeric: true,
+        sensitivity: "base",
+      }),
+  },
+  {
+    name: "refCommandNo",
+    align: "left",
+    label: "เลขที่คำสั่ง",
+    sortable: true,
+    field: "refCommandNo",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, {
+        numeric: true,
+        sensitivity: "base",
+      }),
+  },
+  {
+    name: "createdFullName",
+    align: "left",
+    label: "ผู้ดำเนินการ",
+    sortable: true,
+    field: "createdFullName",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, {
+        numeric: true,
+        sensitivity: "base",
+      }),
+  },
+  {
+    name: "createdAt",
+    align: "left",
+    label: "วันที่แก้ไข",
+    sortable: true,
+    field: "createdAt",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, {
+        numeric: true,
+        sensitivity: "base",
+      }),
+  },
+]);
+const visibleColumnsHistory = ref<String[]>([
+  "date",
+  "amount",
+  "positionSalaryAmount",
+  "mouthSalaryAmount",
+  "oc",
+  "positionEmployeePosition",
+  "posNo",
+  "positionEmployeePositionSide",
+  "positionEmployeeLevel",
+  "positionEmployeeGroup",
+  //   "salaryClass",
+  "salaryRef",
+  "refCommandNo",
+  "createdFullName",
+  "createdAt",
+]);
+
+watch(visibleColumns, async (count: String[], prevCount: String[]) => {
+  await changeProfileColumns("salary", count);
+});
+
+onMounted(async () => {
+  await fetchData();
+  await fetchDataSelector();
+});
+
+const fetchDataSelector = async () => {
+  loaderPage(true);
+  await fetchEmployeePosition();
+  await fetchEmployeePositionSide();
+  await fetchEmployeeLevel();
+  await fetchEmployeeGroup();
+  await fetchAgency();
+  await nodeTree();
+  loaderPage(false);
+};
+// ตำแหน่ง
+const fetchEmployeePosition = async () => {
+  await http
+    .get(config.API.positionEmployeePosition)
+    .then((res) => {
+      const data = res.data.result;
+      let option: DataOption[] = [];
+      data.map((r: DataOption) => {
+        option.push({ id: r.id.toString(), name: r.name.toString() });
+      });
+
+      employeePositionOptions.value = option;
+      employeePositionOptionsFilter.value = option;
+    })
+    .catch((e) => {
+      messageError($q, e);
+    });
+};
+// ด้านของตำแหน่ง
+const fetchEmployeePositionSide = async () => {
+  await http
+    .get(config.API.positionEmployeePositionSide)
+    .then((res) => {
+      const data = res.data.result;
+      let option: DataOption[] = [];
+      data.map((r: DataOption) => {
+        option.push({ id: r.id.toString(), name: r.name.toString() });
+      });
+
+      employeePositionSideOptions.value = option;
+      employeePositionSideOptionsFilter.value = option;
+    })
+    .catch((e) => {
+      messageError($q, e);
+    });
+};
+// ระดับ
+const fetchEmployeeLevel = async () => {
+  await http
+    .get(config.API.positionEmployeeLevel)
+    .then((res) => {
+      const data = res.data.result;
+      let option: DataOption[] = [];
+      data.map((r: DataOption) => {
+        option.push({ id: r.id.toString(), name: r.name.toString() });
+      });
+
+      employeeLevelOptions.value = option;
+      employeeLevelOptionsFilter.value = option;
+    })
+    .catch((e) => {
+      messageError($q, e);
+    });
+};
+// กลุ่มงาน
+const fetchEmployeeGroup = async () => {
+  await http
+    .get(config.API.positionEmployeeGroup)
+    .then((res) => {
+      const data = res.data.result;
+      let option: DataOption[] = [];
+      data.map((r: DataOption) => {
+        option.push({ id: r.id.toString(), name: r.name.toString() });
+      });
+
+      employeeGroupOptions.value = option;
+      employeeGroupOptionsFilter.value = option;
+    })
+    .catch((e) => {
+      messageError($q, e);
+    });
+};
+
+// สังกัด
+const fetchAgency = async () => {
+  await http
+    .get(config.API.organizationRoot)
+    .then((res) => {
+      const data = res.data.result;
+      let option: DataOption[] = [];
+      data.map((r: any) => {
+        option.push({ id: r.id.toString(), name: r.label.toString() });
+      });
+
+      agencyOptions.value = option;
+      agencyOptionsFilter.value = option;
+    })
+    .catch((e) => {
+      messageError($q, e);
+    });
+};
+
+const nodeTree = async () => {
+  loaderPage(true);
+  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(() => {
+      loaderPage(false);
+    });
+};
+
+const selectAgency = (val: string) => {
+  fetchPositionNumber(val);
+  clickEditRow();
+};
+
+const filterSelector = (val: any, update: Function, filtername: string) => {
+  switch (filtername) {
+    case "posNo":
+      update(() => {
+        posNoOptions.value = posNoOptionsFilter.value.filter(
+          (v: DataOption) => v.name.indexOf(val) > -1
+        );
+      });
+      break;
+    case "employeePosition":
+      update(() => {
+        employeePositionOptions.value =
+          employeePositionOptionsFilter.value.filter(
+            (v: DataOption) => v.name.indexOf(val) > -1
+          );
+      });
+      break;
+    case "employeePositionSide":
+      update(() => {
+        employeePositionSideOptions.value =
+          employeePositionSideOptionsFilter.value.filter(
+            (v: DataOption) => v.name.indexOf(val) > -1
+          );
+      });
+      break;
+    case "employeeLevel":
+      update(() => {
+        employeeLevelOptions.value = employeeLevelOptionsFilter.value.filter(
+          (v: DataOption) => v.name.indexOf(val) > -1
+        );
+      });
+      break;
+
+    case "employeeGroup":
+      update(() => {
+        employeeGroupOptions.value = employeeGroupOptionsFilter.value.filter(
+          (v: DataOption) => v.name.indexOf(val) > -1
+        );
+      });
+      break;
+    case "agency":
+      update(() => {
+        agencyOptions.value = agencyOptionsFilter.value.filter(
+          (v: DataOption) => v.name.indexOf(val) > -1
+        );
+      });
+      break;
+
+    case "ref":
+      update(() => {
+        refOptions.value = refOptionsFilter.value.filter(
+          (v: DataOption) => v.name.indexOf(val) > -1
+        );
+      });
+      break;
+
+    default:
+      break;
+  }
+};
+
+const fetchData = async () => {
+  if (profileId.value) {
+    loaderPage(true);
+    await http
+      .get(config.API.profileSalaryEmployeeId(profileId.value))
+      .then((res) => {
+        const data = res.data.result;
+        //   console.log(data);
+        rows.value = [];
+        data.map((e: ResponseObjectEmployee) => {
+          rows.value.push({
+            id: e.id,
+            date: new Date(e.date),
+            amount: e.amount,
+            positionSalaryAmount: e.positionSalaryAmount,
+            mouthSalaryAmount: e.mouthSalaryAmount,
+            oc: e.oc,
+            ocId: e.ocId,
+            posNo: e.posNo,
+            posNoId: e.posNoId,
+            posNoEmployee: e.posNoEmployee,
+            positionEmployeeGroup: e.positionEmployeeGroup,
+            positionEmployeeGroupId: e.positionEmployeeGroupId,
+            positionEmployeeLevel: e.positionEmployeeLevel,
+            positionEmployeeLevelId: e.positionEmployeeLevelId,
+            positionEmployeePosition: e.positionEmployeePosition,
+            positionEmployeePositionId: e.positionEmployeePositionId,
+            positionEmployeePositionSide: e.positionEmployeePositionSide,
+            positionEmployeePositionSideId: e.positionEmployeePositionSideId,
+            salaryClass: e.salaryClass,
+            salaryRef: e.salaryRef,
+            refCommandNo: e.refCommandNo,
+            createdFullName: e.createdFullName,
+            createdAt: new Date(e.createdAt),
+          });
+        });
+      })
+      .catch((e) => {
+        messageError($q, e);
+      })
+      .finally(() => {
+        loaderPage(false);
+      });
+  }
+};
+
+const fetchPositionNumber = async (id: string) => {
+  //   loaderPage(true);
+  if (id == null || id == "") return;
+  await http
+    .get(config.API.getPositionNumberIdByOcId(id))
+    .then((res) => {
+      const data = res.data.result;
+      let option: DataOption[] = [];
+      data.map((r: DataOption) => {
+        option.push({ id: r.id.toString(), name: r.name.toString() });
+      });
+      posNoOptions.value = option;
+      posNoOptionsFilter.value = option;
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      loaderPage(false);
+    });
+};
+
+/**
+ * กดดูข้อมูลก่อนหน้า
+ */
+const clickPrevious = async () => {
+  edit.value = false;
+  rowIndex.value -= 1;
+  await getData();
+  await checkRowPage();
+};
+
+/**
+ * กดดูข้อมูลต่อไป
+ */
+const clickNext = async () => {
+  edit.value = false;
+  rowIndex.value += 1;
+  await getData();
+  await checkRowPage();
+};
+
+/**
+ * กดดูข้อมูลต่อไป
+ */
+const getData = async () => {
+  const row = rows.value[rowIndex.value];
+  date.value = row.date;
+  amount.value = row.amount;
+  positionSalaryAmount.value = row.positionSalaryAmount;
+  mouthSalaryAmount.value = row.mouthSalaryAmount;
+  selected.value = row.ocId;
+  //   positionId.value = row.positionId;
+  //   posNoId.value = row.posNoId;
+  //   positionLineId.value = row.positionLineId;
+  //   positionPathSideId.value = row.positionPathSideId;
+  //   positionTypeId.value = row.positionTypeId;
+  //   positionLevelId.value = row.positionLevelId;
+  //   positionExecutiveId.value = row.positionExecutiveId;
+  //   positionExecutiveSideId.value = row.positionExecutiveSideId;
+  posNoId.value = row.posNoId ?? "";
+  posNoEmployee.value = row.posNoEmployee ?? "";
+  employeePositionId.value = row.positionEmployeePositionId ?? "";
+  employeePositionSideId.value = row.positionEmployeePositionSideId ?? "";
+  employeeLevelId.value = row.positionEmployeeLevelId ?? "";
+  employeeGroupId.value = row.positionEmployeeGroupId ?? "";
+  agencyId.value = row.ocId ?? "";
+
+  salaryClass.value = row.salaryClass ?? "";
+  salaryRef.value = row.salaryRef ?? "";
+  refCommandNo.value = row.refCommandNo ?? "";
+  id.value = row.id;
+  await fetchPositionNumber(row.ocId ?? "");
+};
+
+/**
+ * เช็คปุ่มดูข้อมูล ย้อน กับ ต่อไป ว่าต้องแสดงไหม
+ */
+const checkRowPage = () => {
+  editRow.value = false;
+  next.value = true;
+  previous.value = true;
+  //   console.log(rowIndex.value);
+  if (rowIndex.value + 1 >= rows.value.length) {
+    next.value = false;
+  }
+  if (rowIndex.value - 1 < 0) {
+    previous.value = false;
+  }
+};
+
+/**
+ * กดปุ่มแก้ไขใน dialog
+ */
+const clickEdit = () => {
+  editRow.value = false;
+  next.value = false;
+  previous.value = false;
+};
+
+/**
+ * กดปุ่มเพิ่มด้านบน table
+ */
+const clickAdd = async () => {
+  editRow.value = false;
+  await addData();
+};
+
+/**
+ * gen ตำแหน่ง (รายละเอียด)
+ */
+const templateDetail = async () => {
+  //   salaryClass.value = "";
+  //   if (ocId.value != "") {
+  //     salaryClass.value = salaryClass.value + `สังกัด${ocId.value} `;
+  //   }
+  //   const positionF = positionOptions.value.filter(
+  //     (r: DataOption) => r.id == positionId.value
+  //   );
+  //   if (positionF.length > 0) {
+  //     salaryClass.value = salaryClass.value + `ตำแหน่ง${positionF[0].name} `;
+  //   }
+  //   const posNoF = posNoOptions.value.filter(
+  //     (r: DataOption) => r.id == posNoId.value
+  //   );
+  //   if (posNoF.length > 0) {
+  //     salaryClass.value = salaryClass.value + `ตำแหน่งเลขที่${posNoF[0].name} `;
+  //   }
+  //   const positionLineF = positionLineOptions.value.filter(
+  //     (r: DataOption) => r.id == positionLineId.value
+  //   );
+  //   if (positionLineF.length > 0) {
+  //     salaryClass.value = salaryClass.value + `สายงาน${positionLineF[0].name} `;
+  //   }
+  //   const positionPathSideF = positionSideOptions.value.filter(
+  //     (r: DataOption) => r.id == positionPathSideId.value
+  //   );
+  //   if (positionPathSideF.length > 0) {
+  //     salaryClass.value =
+  //       salaryClass.value + `ด้าน/สาขา${positionPathSideF[0].name} `;
+  //   }
+  //   const positionTypeF = positionTypeOptions.value.filter(
+  //     (r: DataOption) => r.id == positionTypeId.value
+  //   );
+  //   if (positionTypeF.length > 0) {
+  //     salaryClass.value =
+  //       salaryClass.value + `ตำแหน่งประเภท${positionTypeF[0].name} `;
+  //   }
+  //   const positionLevelF = positionLevelOptions.value.filter(
+  //     (r: DataOption) => r.id == positionLevelId.value
+  //   );
+  //   if (positionLevelF.length > 0) {
+  //     salaryClass.value = salaryClass.value + `ระดับ${positionLevelF[0].name} `;
+  //   }
+  //   const positionExecutiveF = positionExecutiveOptions.value.filter(
+  //     (r: DataOption) => r.id == positionExecutiveId.value
+  //   );
+  //   if (positionExecutiveF.length > 0) {
+  //     salaryClass.value =
+  //       salaryClass.value + `ตำแหน่งทางการบริหาร${positionExecutiveF[0].name} `;
+  //   }
+};
+
+/**
+ * กดบันทึกใน dialog
+ */
+const clickSave = async () => {
+  myForm.value.validate().then(async (result: boolean) => {
+    if (result) {
+      if (modalEdit.value) {
+        await editData();
+      } else {
+        await saveData();
+      }
+    }
+  });
+};
+
+/**
+ * บันทึกเพิ่มข้อมูล
+ */
+const saveData = async () => {
+  if (profileId.value) {
+    loaderPage(true);
+    await http
+      .post(config.API.profileSalaryEmployeeId(profileId.value), {
+        amount: amount.value,
+        date: dateToISO(date.value),
+        positionSalaryAmount: positionSalaryAmount.value,
+        mouthSalaryAmount: mouthSalaryAmount.value,
+        ocId: agencyId.value,
+        //   posNoId: posNoId.value,
+        posNoEmployee: posNoEmployee.value,
+        positionEmployeeGroupId: employeeGroupId.value,
+        positionEmployeeLevelId: employeeLevelId.value,
+        positionEmployeePositionId: employeePositionId.value,
+        positionEmployeePositionSideId: employeePositionSideId.value,
+        salaryClass: salaryClass.value,
+        salaryRef: salaryRef.value,
+        refCommandNo: refCommandNo.value,
+      })
+      .then((res) => {
+        success($q, "บันทึกข้อมูลสำเร็จ");
+        modal.value = false;
+      })
+      .catch((e) => {
+        messageError($q, e);
+      })
+      .finally(async () => {
+        await fetchData();
+      });
+  }
+};
+
+/**
+ * บันทึกแก้ไขข้อมูล
+ */
+const editData = async () => {
+  loaderPage(true);
+  await http
+    .put(config.API.profileSalaryEmployeeId(id.value), {
+      amount: amount.value,
+      date: dateToISO(date.value),
+      positionSalaryAmount: positionSalaryAmount.value,
+      mouthSalaryAmount: mouthSalaryAmount.value,
+      ocId: agencyId.value,
+      //   posNoId: posNoId.value,
+      posNoEmployee: posNoEmployee.value,
+      positionEmployeeGroupId: employeeGroupId.value,
+      positionEmployeeLevelId: employeeLevelId.value,
+      positionEmployeePositionId: employeePositionId.value,
+      positionEmployeePositionSideId: employeePositionSideId.value,
+      salaryClass: salaryClass.value,
+      salaryRef: salaryRef.value,
+      refCommandNo: refCommandNo.value,
+    })
+    .then((res) => {
+      success($q, "บันทึกข้อมูลสำเร็จ");
+      modal.value = false;
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(async () => {
+      await fetchData();
+    });
+};
+
+/**
+ * ลบข้อมูล
+ */
+const fetchDataDelete = async () => {
+  loaderPage(true);
+  await http
+    .delete(config.API.profileSalaryId(id.value))
+    .then((res) => {
+      success($q, "ลบข้อมูลสำเร็จ");
+      modal.value = false;
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(async () => {
+      await fetchData();
+    });
+};
+
+/**
+ *  dialog ลบข้อมูล
+ */
+const clickDelete = async () => {
+  dialogMessage(
+    $q,
+    "ลบข้อมูล",
+    "ต้องการทำการลบข้อมูลนี้ใช่หรือไม่",
+    "delete",
+    "ยืนยัน",
+    "red",
+    async () => await fetchDataDelete(),
+    async () => await fetchData(),
+    false
+  );
+};
+
+/**
+ * กดปิด dialog
+ */
+const clickClose = async () => {
+  if (editRow.value == true) {
+    dialogMessage(
+      $q,
+      "ข้อมูลมีการแก้ไข",
+      "ยืนยันที่จะปิดโดยไม่บันทึกใช่หรือไม่?",
+      "info",
+      "ยืนยัน",
+      "primary",
+      async () => {
+        modal.value = false;
+        next.value = false;
+        previous.value = false;
+      },
+      undefined,
+      false
+    );
+  } else {
+    modal.value = false;
+    next.value = false;
+    previous.value = false;
+  }
+};
+
+/**
+ * กดเลือกข้อมูลที่จะแก้ไข
+ * @param props ค่า props ใน row ที่เลือก
+ */
+const selectData = async (props: DataPropsEmployee) => {
+  //   console.log(props.row);
+  modalEdit.value = true;
+  modal.value = true;
+  edit.value = false;
+  rawItem.value = props.row;
+  rowIndex.value = props.rowIndex;
+  date.value = props.row.date;
+  amount.value = props.row.amount;
+  positionSalaryAmount.value = props.row.positionSalaryAmount;
+  mouthSalaryAmount.value = props.row.mouthSalaryAmount;
+
+  posNoId.value = props.row.posNoId ?? "";
+  posNoEmployee.value = props.row.posNoEmployee ?? "";
+  employeePositionId.value = props.row.positionEmployeePositionId ?? "";
+  employeePositionSideId.value = props.row.positionEmployeePositionSideId ?? "";
+  employeeLevelId.value = props.row.positionEmployeeLevelId ?? "";
+  employeeGroupId.value = props.row.positionEmployeeGroupId ?? "";
+  agencyId.value = props.row.ocId ?? "";
+
+  //   refSelected.value = props.row
+  salaryClass.value = props.row.salaryClass ?? "";
+  salaryRef.value = props.row.salaryRef ?? "";
+  refCommandNo.value = props.row.refCommandNo ?? "";
+  id.value = props.row.id;
+  await fetchPositionNumber(props.row.ocId ?? "");
+  await checkRowPage();
+};
+
+/**
+ * กดปุ่มเพิ่มบน table
+ */
+const addData = () => {
+  modalEdit.value = false;
+  modal.value = true;
+  edit.value = true;
+  date.value = new Date();
+  amount.value = null;
+  positionSalaryAmount.value = null;
+  mouthSalaryAmount.value = null;
+
+  posNoId.value = "";
+  posNoEmployee.value = "";
+  employeePositionId.value = "";
+  employeePositionSideId.value = "";
+  employeeLevelId.value = "";
+  employeeGroupId.value = "";
+  agencyId.value = "";
+  agencyOptions.value = [];
+
+  salaryClass.value = "";
+  refSelected.value = null;
+  salaryRef.value = "";
+  refCommandNo.value = "";
+};
+
+/**
+ * ฟังก์ชันปุ่มยกเลิกการแก้ไขข้อมูล
+ */
+const clickCancel = async () => {
+  if (editRow.value == true) {
+    dialogMessage(
+      $q,
+      "ข้อมูลมีการแก้ไข",
+      "ยืนยันยกเลิกการแก้ไขใช่หรือไม่",
+      "info",
+      "ยืนยัน",
+      "primary",
+      async () => {
+        edit.value = false;
+        await checkRowPage();
+        await getData();
+      },
+      undefined,
+      false
+    );
+  } else {
+    edit.value = false;
+    await checkRowPage();
+  }
+};
+
+const onSelected = async (id: string) => {
+  await fetchPositionNumber(id);
+};
+
+/**
+ * เช็คว่ามีการแก้ไขข้อมูล
+ */
+const clickEditRow = () => {
+  editRow.value = true;
+};
+
+/**
+ * เช็คว่ามีการแก้ไขข้อมูล
+ */
+const clickEditRowRef = () => {
+  editRow.value = true;
+  salaryRef.value = refSelected.value?.name;
+};
+
+/**
+ * ฟังชั้นดูข้อมูลประวัติแก้ไขข้อมูลที่เลือก
+ * @param row ข้อมูล row ที่ดูประวัติการแก้ไข
+ */
+const clickHistory = async (row: RequestItemsEmployee) => {
+  modalHistory.value = true;
+  loaderPage(true);
+  await http
+    .get(config.API.profileSalaryHisId(row.id))
+    .then((res) => {
+      const data = res.data.result;
+      //   console.log("clickHistory", data);
+      rowsHistory.value = [];
+      data.map((e: ResponseObjectEmployee) => {
+        rowsHistory.value.push({
+          id: e.id,
+          date: new Date(e.date),
+          amount: e.amount,
+          positionSalaryAmount: e.positionSalaryAmount,
+          mouthSalaryAmount: e.mouthSalaryAmount,
+          oc: e.oc,
+          ocId: e.ocId,
+          posNo: e.posNo,
+          posNoId: e.posNoId,
+          posNoEmployee: e.posNoEmployee,
+          positionEmployeeGroup: e.positionEmployeeGroup,
+          positionEmployeeGroupId: e.positionEmployeeGroupId,
+          positionEmployeeLevel: e.positionEmployeeLevel,
+          positionEmployeeLevelId: e.positionEmployeeLevelId,
+          positionEmployeePosition: e.positionEmployeePosition,
+          positionEmployeePositionId: e.positionEmployeePositionId,
+          positionEmployeePositionSide: e.positionEmployeePositionSide,
+          positionEmployeePositionSideId: e.positionEmployeePositionSideId,
+          salaryClass: e.salaryClass,
+          salaryRef: e.salaryRef,
+          refCommandNo: e.refCommandNo,
+          createdFullName: e.createdFullName,
+          createdAt: new Date(e.createdAt),
+        });
+      });
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      loaderPage(false);
+    });
+};
+
+/**
+ * validate input ใน dialog
+ */
+const validateData = async () => {
+  checkValidate.value = true;
+  await myForm.value.validate().then((result: boolean) => {
+    if (result == false) {
+      checkValidate.value = false;
+    }
+  });
+};
+
+/**
+ * class จัดรูปแบบแสดงระหว่างข้อมูลที่แก้ไขหรือแสดงเฉยๆ
+ * @param val ข้อมูล input สำหรับแก้ไขหรือไม่
+ */
+const getClass = (val: boolean) => {
+  return {
+    "full-width inputgreen cursor-pointer": val,
+    "full-width cursor-pointer": !val,
+  };
+};
+const resetFilter = () => {};
+</script>
+<style lang="scss">
+.modalfix {
+  position: fixed !important;
+}
+</style>
diff --git a/src/components/information/Talent.vue b/src/components/information/Talent.vue
new file mode 100644
index 000000000..5cf4e24dd
--- /dev/null
+++ b/src/components/information/Talent.vue
@@ -0,0 +1,684 @@
+<!-- card ความสามารถพิเศษ -->
+<template>
+  <q-card flat bordered class="col-12 q-px-lg q-py-md">
+    <q-form ref="myForm">
+      <ProfileTable
+        :rows="rows"
+        :columns="columns"
+        :filter="filter"
+        :visible-columns="visibleColumns"
+        v-model:inputfilter="filter"
+        v-model:inputvisible="visibleColumns"
+        :add="clickAdd"
+        name="ความสามารถพิเศษ"
+        icon="mdi-folder-star"
+        :statusEdit="statusEdit"
+      >
+        <template #columns="props">
+          <q-tr :props="props">
+            <q-td
+              v-for="col in props.cols"
+              :key="col.name"
+              :props="props"
+              @click="selectData(props)"
+              class="cursor-pointer"
+            >
+              <div class="table_ellipsis">
+                {{ col.value }}
+              </div>
+            </q-td>
+            <q-td auto-width>
+              <q-btn
+                color="info"
+                flat
+                dense
+                round
+                size="14px"
+                icon="mdi-history"
+                @click="clickHistory(props.row)"
+              />
+            </q-td>
+          </q-tr>
+        </template>
+      </ProfileTable>
+    </q-form>
+  </q-card>
+  <!-- popup Edit window-->
+  <q-dialog v-model="modal" persistent>
+    <q-card style="width: 600px">
+      <q-form ref="myForm">
+        <DialogHeader tittle="ความสามารถพิเศษ" :close="clickClose" />
+        <q-separator />
+        <q-card-section class="q-p-sm">
+          <div
+            class="row col-12 items-center q-col-gutter-x-xs q-col-gutter-y-xs"
+          >
+            <div class="col-6">
+              <q-input
+                :class="getClass(edit)"
+                :outlined="edit"
+                dense
+                lazy-rules
+                :readonly="!edit"
+                autogrow
+                :borderless="!edit"
+                v-model="field"
+                :rules="[(val) => !!val || `${'กรุณากรอกด้าน'}`]"
+                hide-bottom-space
+                :label="`${'ด้าน'}`"
+                @update:modelValue="clickEditRow"
+              />
+            </div>
+            <div class="col-6">
+              <q-input
+                :class="getClass(edit)"
+                :outlined="edit"
+                dense
+                lazy-rules
+                :readonly="!edit"
+                autogrow
+                :borderless="!edit"
+                v-model="detail"
+                :rules="[(val) => !!val || `${'กรุณากรอกรายละเอียด'}`]"
+                hide-bottom-space
+                :label="`${'รายละเอียด'}`"
+                @update:modelValue="clickEditRow"
+              />
+            </div>
+            <div class="col-12">
+              <q-input
+                :class="getClass(edit)"
+                :outlined="edit"
+                dense
+                lazy-rules
+                :readonly="!edit"
+                autogrow
+                :borderless="!edit"
+                v-model="remark"
+                hide-bottom-space
+                :label="`${'หมายเหตุ'}`"
+                @update:modelValue="clickEditRow"
+              />
+            </div>
+            <div class="col-12">
+              <q-input
+                :class="getClass(edit)"
+                :outlined="edit"
+                dense
+                lazy-rules
+                :readonly="!edit"
+                autogrow
+                :borderless="!edit"
+                v-model="reference"
+                :rules="[(val) => !!val || `${'กรุณากรอกเอกสารอ้างอิง'}`]"
+                hide-bottom-space
+                :label="`${'เอกสารอ้างอิง'}`"
+                @update:modelValue="clickEditRow"
+              />
+            </div>
+          </div>
+        </q-card-section>
+        <q-separator />
+        <DialogFooter
+          :cancel="clickCancel"
+          :edit="clickEdit"
+          :save="clickSave"
+          :validate="validateData"
+          :clickNext="clickNext"
+          :clickPrevious="clickPrevious"
+          :clickDelete="clickDelete"
+          v-model:editvisible="edit"
+          v-model:next="next"
+          v-model:previous="previous"
+          v-model:modalEdit="modalEdit"
+        />
+      </q-form>
+    </q-card>
+  </q-dialog>
+  <HistoryTable
+    :rows="rowsHistory"
+    :columns="columnsHistory"
+    :filter="filterHistory"
+    :visible-columns="visibleColumnsHistory"
+    v-model:modal="modalHistory"
+    v-model:inputfilter="filterHistory"
+    v-model:inputvisible="visibleColumnsHistory"
+    v-model:tittle="tittleHistory"
+  >
+    <template #columns="props">
+      <q-tr :props="props">
+        <q-td v-for="col in props.cols" :key="col.name" :props="props">
+          <div v-if="col.name == 'createdAt'" class="table_ellipsis">
+            {{ date2Thai(col.value) }}
+          </div>
+          <div v-else class="table_ellipsis">
+            {{ col.value }}
+          </div>
+        </q-td>
+      </q-tr>
+    </template>
+  </HistoryTable>
+</template>
+<script setup lang="ts">
+import { onMounted, ref, watch } from "vue";
+import { useRoute } from "vue-router";
+import { useComponentProfileDataStore } from "@/components/information/store/store";
+import { useCounterMixin } from "@/stores/mixin";
+import { useDataStore } from "@/stores/data";
+import ProfileTable from "@/components/information/Table.vue";
+import DialogHeader from "@/components/information/DialogHeader.vue";
+import DialogFooter from "@/components/information/DialogFooter.vue";
+import { useQuasar } from "quasar";
+import type {
+  RequestItemsObject,
+  DataProps,
+} from "@/components/information/interface/request/Talent";
+import type { ResponseObject } from "@/components/information/interface/response/Talent";
+import HistoryTable from "@/components/TableHistory.vue";
+import http from "@/plugins/http";
+import config from "@/app.config";
+import type { QTableProps } from "quasar";
+
+const props = defineProps({
+  statusEdit: {
+    type: Boolean,
+    required: true,
+  },
+});
+
+const $q = useQuasar();
+const store = useComponentProfileDataStore();
+const { profileData, changeProfileColumns } = store;
+const dataStore = useDataStore();
+const { loaderPage } = dataStore;
+const mixin = useCounterMixin();
+const { date2Thai, success, dateToISO, messageError } = mixin;
+const route = useRoute();
+const id = ref<string>("");
+const field = ref<string>();
+const detail = ref<string>();
+const remark = ref<string>();
+const reference = ref<string>();
+const myForm = ref<any>(); //form data input
+const edit = ref<boolean>(false); //เช็คการกดปุ่มแก้ไขใน dialog
+const modal = ref<boolean>(false); //modal add detail
+const modalEdit = ref<boolean>(false); //modal ที่แสดงใช้สำหรับแก้ไขหรือไม่
+const rawItem = ref<RequestItemsObject>(); //ข้อมูลเดิมที่เลือกใน row นั้น
+const rowIndex = ref<number>(0); //indexข้อมูลเดิมที่เลือกใน row นั้น
+const previous = ref<boolean>(); //แสดงปุ่มดูข้อมูลก่อนหน้า
+const next = ref<boolean>(); //แสดงปุ่มดูข้อมูลต่อไป
+const editRow = ref<boolean>(false); //เช็คมีการแก้ไขข้อมูล
+const rowsHistory = ref<RequestItemsObject[]>([]); //select data history
+const tittleHistory = ref<string>("ประวัติแก้ไขความสามารถพิเศษ"); //
+const filterHistory = ref<string>(""); //search data table history
+const modalHistory = ref<boolean>(false); //modal ประวัติการแก้ไขข้อมูล
+const checkValidate = ref<boolean>(false); //validate data ผ่านหรือไม่
+const profileId = ref<string>(
+  route.params.id ? route.params.id.toString() : ""
+);
+const rows = ref<RequestItemsObject[]>([]);
+const filter = ref<string>(""); //search data table
+const visibleColumns = ref<String[]>([]);
+profileData.talent.columns.length == 0
+  ? (visibleColumns.value = ["field", "detail", "remark", "reference"])
+  : (visibleColumns.value = profileData.talent.columns);
+const columns = ref<QTableProps["columns"]>([
+  {
+    name: "field",
+    align: "left",
+    label: "ด้าน",
+    sortable: true,
+    field: "field",
+    headerStyle: "font-size: 14px; width: 50px;",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "detail",
+    align: "left",
+    label: "รายละเอียด",
+    sortable: true,
+    field: "detail",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "remark",
+    align: "left",
+    label: "หมายเหตุ",
+    sortable: true,
+    field: "remark",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "reference",
+    align: "left",
+    label: "เอกสารอ้างอิง",
+    sortable: true,
+    field: "reference",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+]);
+const columnsHistory = ref<QTableProps["columns"]>([
+  {
+    name: "field",
+    align: "left",
+    label: "ด้าน",
+    sortable: true,
+    field: "field",
+    headerStyle: "font-size: 14px; width: 50px;",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "detail",
+    align: "left",
+    label: "รายละเอียด",
+    sortable: true,
+    field: "detail",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "remark",
+    align: "left",
+    label: "หมายเหตุ",
+    sortable: true,
+    field: "remark",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "reference",
+    align: "left",
+    label: "เอกสารอ้างอิง",
+    sortable: true,
+    field: "reference",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "createdFullName",
+    align: "left",
+    label: "ผู้ดำเนินการ",
+    sortable: true,
+    field: "createdFullName",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "createdAt",
+    align: "left",
+    label: "วันที่แก้ไข",
+    sortable: true,
+    field: "createdAt",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+]);
+const visibleColumnsHistory = ref<String[]>([
+  "field",
+  "detail",
+  "remark",
+  "reference",
+  "createdFullName",
+  "createdAt",
+]);
+
+watch(visibleColumns, async (count: String[], prevCount: String[]) => {
+  await changeProfileColumns("talent", count);
+});
+
+onMounted(async () => {
+  await fetchData();
+});
+
+const fetchData = async () => {
+  if (profileId.value) {
+    loaderPage(true);
+    await http
+      .get(config.API.profileAbiliId(profileId.value))
+      .then((res) => {
+        let data = res.data.result;
+        rows.value = [];
+        data.map((e: ResponseObject) => {
+          rows.value.push({
+            id: e.id,
+            field: e.field,
+            detail: e.detail,
+            remark: e.remark,
+            reference: e.reference,
+            createdFullName: e.createdFullName,
+            createdAt: new Date(e.createdAt),
+          });
+        });
+      })
+      .catch((e) => {
+        messageError($q, e);
+      })
+      .finally(() => {
+        loaderPage(false);
+      });
+  }
+};
+
+/**
+ * กดดูข้อมูลก่อนหน้า
+ */
+const clickPrevious = async () => {
+  edit.value = false;
+  rowIndex.value -= 1;
+  await getData();
+  await checkRowPage();
+};
+
+/**
+ * กดดูข้อมูลต่อไป
+ */
+const clickNext = async () => {
+  edit.value = false;
+  rowIndex.value += 1;
+  await getData();
+  await checkRowPage();
+};
+
+/**
+ * กดดูข้อมูลต่อไป
+ */
+const getData = () => {
+  const row = rows.value[rowIndex.value];
+  field.value = row.field;
+  detail.value = row.detail;
+  remark.value = row.remark;
+  reference.value = row.reference;
+  id.value = row.id;
+};
+
+/**
+ * เช็คปุ่มดูข้อมูล ย้อน กับ ต่อไป ว่าต้องแสดงไหม
+ */
+const checkRowPage = () => {
+  editRow.value = false;
+  next.value = true;
+  previous.value = true;
+  if (rowIndex.value + 1 >= rows.value.length) {
+    next.value = false;
+  }
+  if (rowIndex.value - 1 < 0) {
+    previous.value = false;
+  }
+};
+
+/**
+ * กดปุ่มแก้ไขใน dialog
+ */
+const clickEdit = () => {
+  editRow.value = false;
+  next.value = false;
+  previous.value = false;
+};
+
+/**
+ * กดปุ่มเพิ่มด้านบน table
+ */
+const clickAdd = async () => {
+  editRow.value = false;
+  await addData();
+};
+
+/**
+ * กดบันทึกใน dialog
+ */
+const clickSave = async () => {
+  myForm.value.validate().then(async (result: boolean) => {
+    if (result) {
+      if (modalEdit.value) {
+        await editData();
+      } else {
+        await saveData();
+      }
+    }
+  });
+};
+
+/**
+ * บันทึกเพิ่มข้อมูล
+ */
+const saveData = async () => {
+  if (profileId.value) {
+    loaderPage(true);
+    await http
+      .post(config.API.profileAbiliId(profileId.value), {
+        id: id.value,
+        field: field.value,
+        detail: detail.value,
+        remark: remark.value,
+        reference: reference.value,
+      })
+      .then((res) => {
+        success($q, "บันทึกข้อมูลสำเร็จ");
+        modal.value = false;
+      })
+      .catch((e) => {
+        messageError($q, e);
+      })
+      .finally(async () => {
+        await fetchData();
+      });
+  }
+};
+
+/**
+ * บันทึกแก้ไขข้อมูล
+ */
+const editData = async () => {
+  loaderPage(true);
+  await http
+    .put(config.API.profileAbiliId(id.value), {
+      id: id.value,
+      field: field.value,
+      detail: detail.value,
+      remark: remark.value,
+      reference: reference.value,
+    })
+    .then((res) => {
+      success($q, "บันทึกข้อมูลสำเร็จ");
+      modal.value = false;
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(async () => {
+      await fetchData();
+    });
+};
+
+/**
+ * ลบลบข้อมูล
+ */
+const clickDelete = async () => {
+  $q.dialog({
+    title: `ลบข้อมูล`,
+    message: `ต้องการทำการลบข้อมูลนี้ใช่หรือไม่?`,
+    cancel: "ยกเลิก",
+    ok: "ยืนยัน",
+    persistent: true,
+  })
+    .onOk(async () => {
+      loaderPage(true);
+      await http
+        .delete(config.API.profileAbiliId(id.value))
+        .then((res) => {
+          success($q, "ลบข้อมูลสำเร็จ");
+          modal.value = false;
+        })
+        .catch((e) => {
+          messageError($q, e);
+        })
+        .finally(async () => {
+          await fetchData();
+        });
+    })
+    .onCancel(async () => {
+      await fetchData();
+    });
+};
+
+/**
+ * กดปิด dialog
+ */
+const clickClose = async () => {
+  if (editRow.value == true) {
+    $q.dialog({
+      title: `ข้อมูลมีการแก้ไข`,
+      message: `ยืนยันที่จะปิดโดยไม่บันทึกใช่หรือไม่?`,
+      cancel: "ยกเลิก",
+      ok: "ยืนยัน",
+      persistent: true,
+    }).onOk(async () => {
+      modal.value = false;
+      next.value = false;
+      previous.value = false;
+    });
+  } else {
+    modal.value = false;
+    next.value = false;
+    previous.value = false;
+  }
+};
+
+/**
+ * กดเลือกข้อมูลที่จะแก้ไข
+ * @param props ค่า props ใน row ที่เลือก
+ */
+const selectData = async (props: DataProps) => {
+  modalEdit.value = true;
+  modal.value = true;
+  edit.value = false;
+  rawItem.value = props.row;
+  rowIndex.value = props.rowIndex;
+  field.value = props.row.field;
+  detail.value = props.row.detail;
+  remark.value = props.row.remark;
+  reference.value = props.row.reference;
+  id.value = props.row.id;
+  await checkRowPage();
+};
+
+/**
+ * กดปุ่มเพิ่มบน table
+ */
+const addData = () => {
+  modalEdit.value = false;
+  modal.value = true;
+  edit.value = true;
+  field.value = "";
+  detail.value = "";
+  remark.value = "";
+  reference.value = "";
+};
+
+/**
+ * ฟังก์ชันปุ่มยกเลิกการแก้ไขข้อมูล
+ */
+const clickCancel = async () => {
+  if (editRow.value == true) {
+    $q.dialog({
+      title: `ข้อมูลมีการแก้ไข`,
+      message: `ยืนยันยกเลิกการแก้ไขใช่หรือไม่?`,
+      cancel: "ยกเลิก",
+      ok: "ยืนยัน",
+      persistent: true,
+    }).onOk(async () => {
+      edit.value = false;
+      await checkRowPage();
+      await getData();
+    });
+  } else {
+    edit.value = false;
+    await checkRowPage();
+  }
+};
+
+/**
+ * เช็คว่ามีการแก้ไขข้อมูล
+ */
+const clickEditRow = () => {
+  editRow.value = true;
+};
+
+/**
+ * ฟังชั้นดูข้อมูลประวัติแก้ไขข้อมูลที่เลือก
+ * @param row ข้อมูล row ที่ดูประวัติการแก้ไข
+ */
+const clickHistory = async (row: RequestItemsObject) => {
+  modalHistory.value = true;
+  loaderPage(true);
+  await http
+    .get(config.API.profileAbiliHisId(row.id))
+    .then((res) => {
+      let data = res.data.result;
+      rowsHistory.value = [];
+      data.map((e: ResponseObject) => {
+        rowsHistory.value.push({
+          id: e.id,
+          field: e.field,
+          detail: e.detail,
+          remark: e.remark,
+          reference: e.reference,
+          createdFullName: e.createdFullName,
+          createdAt: new Date(e.createdAt),
+        });
+      });
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      loaderPage(false);
+    });
+};
+
+/**
+ * validate input ใน dialog
+ */
+const validateData = async () => {
+  checkValidate.value = true;
+  await myForm.value.validate().then((result: boolean) => {
+    if (result == false) {
+      checkValidate.value = false;
+    }
+  });
+};
+
+/**
+ * class จัดรูปแบบแสดงระหว่างข้อมูลที่แก้ไขหรือแสดงเฉยๆ
+ * @param val ข้อมูล input สำหรับแก้ไขหรือไม่
+ */
+const getClass = (val: boolean) => {
+  return {
+    "full-width inputgreen cursor-pointer": val,
+    "full-width cursor-pointer": !val,
+  };
+};
+</script>
diff --git a/src/components/information/Train.vue b/src/components/information/Train.vue
new file mode 100644
index 000000000..965c5aa2d
--- /dev/null
+++ b/src/components/information/Train.vue
@@ -0,0 +1,1130 @@
+<!-- card การฝึกอบรม/ดูงาน -->
+<template>
+  <q-card flat bordered class="col-12 q-px-lg q-py-md">
+    <q-form ref="myForm">
+      <ProfileTable
+        :rows="rows"
+        :columns="columns"
+        :filter="filter"
+        :visible-columns="visibleColumns"
+        v-model:inputfilter="filter"
+        v-model:inputvisible="visibleColumns"
+        :add="clickAdd"
+        name="การฝึกอบรม/ดูงาน"
+        icon="mdi-briefcase"
+        :statusEdit="statusEdit"
+      >
+        <template #columns="props">
+          <q-tr :props="props">
+            <q-td
+              v-for="col in props.cols"
+              :key="col.name"
+              :props="props"
+              @click="selectData(props)"
+              class="cursor-pointer"
+            >
+              <div
+                v-if="
+                  col.name == 'startDate' ||
+                  col.name == 'endDate' ||
+                  col.name == 'dateOrder'
+                "
+                class="table_ellipsis"
+              >
+                {{ date2Thai(col.value) }}
+              </div>
+              <div v-else-if="col.name == 'yearly'" class="table_ellipsis">
+                {{ col.value + 543 }}
+              </div>
+              <div v-else class="table_ellipsis">
+                {{ col.value }}
+              </div>
+            </q-td>
+            <q-td auto-width>
+              <q-btn
+                color="info"
+                flat
+                dense
+                round
+                size="14px"
+                icon="mdi-history"
+                @click="clickHistory(props.row)"
+              />
+            </q-td>
+          </q-tr>
+        </template>
+      </ProfileTable>
+    </q-form>
+  </q-card>
+  <!-- popup Edit window-->
+  <q-dialog v-model="modal" persistent>
+    <q-card style="width: 600px">
+      <q-form ref="myForm">
+        <DialogHeader tittle="การฝึกอบรม/ดูงาน" :close="clickClose" />
+        <q-separator />
+        <q-card-section class="q-p-sm">
+          <div
+            class="row col-12 items-center q-col-gutter-x-xs q-col-gutter-y-xs"
+          >
+            <div class="col-xs-6 col-sm-6 col-md-6">
+              <q-input
+                :class="getClass(edit)"
+                hide-bottom-space
+                :outlined="edit"
+                dense
+                lazy-rules
+                :readonly="!edit"
+                :borderless="!edit"
+                v-model="name"
+                :rules="[
+                  (val) =>
+                    !!val || `${'กรุณากรอกชื่อโครงการ/หลักสูตรการฝึกอบรม'}`,
+                ]"
+                :label="`${'ชื่อโครงการ/หลักสูตรการฝึกอบรม'}`"
+                @update:modelValue="clickEditRow"
+              />
+            </div>
+            <div class="col-xs-6 col-sm-6 col-md-6">
+              <q-input
+                :class="getClass(edit)"
+                hide-bottom-space
+                :outlined="edit"
+                dense
+                lazy-rules
+                :readonly="!edit"
+                :borderless="!edit"
+                v-model="topic"
+                :rules="[
+                  (val) => !!val || `${'กรุณากรอกหัวข้อการฝึกอบรม/ดูงาน'}`,
+                ]"
+                :label="`${'หัวข้อการฝึกอบรม/ดูงาน'}`"
+                @update:modelValue="clickEditRow"
+              />
+            </div>
+            <div class="col-xs-6 col-sm-6 col-md-6">
+              <datepicker
+                menu-class-name="modalfix"
+                :readonly="!edit"
+                v-model="startDate"
+                :locale="'th'"
+                autoApply
+                :enableTimePicker="false"
+                @update:modelValue="clickEditRow"
+                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)"
+                    hide-bottom-space
+                    :outlined="edit"
+                    dense
+                    lazy-rules
+                    :borderless="!edit"
+                    :model-value="date2Thai(startDate)"
+                    :rules="[
+                      (val) =>
+                        !!val || `${'กรุณาเลือกวันเริ่มต้นการฝึกอบรม/ดูงาน'}`,
+                    ]"
+                    :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 class="col-xs-6 col-sm-6 col-md-6">
+              <datepicker
+                menu-class-name="modalfix"
+                v-model="endDate"
+                :locale="'th'"
+                autoApply
+                :enableTimePicker="false"
+                :min-date="minDate"
+                :readonly="!edit"
+                @update:modelValue="clickEditRow"
+                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)"
+                    hide-bottom-space
+                    :outlined="edit"
+                    dense
+                    lazy-rules
+                    :borderless="!edit"
+                    :model-value="date2Thai(endDate)"
+                    :rules="[
+                      (val) =>
+                        !!val || `${'กรุณาเลือกวันสิ้นสุดการฝึกอบรม/ดูงาน'}`,
+                    ]"
+                    :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 class="col-xs-6 col-sm-6 col-md-6">
+              <datepicker
+                menu-class-name="modalfix"
+                v-model="yearly"
+                :locale="'th'"
+                autoApply
+                year-picker
+                :enableTimePicker="false"
+                :readonly="!edit"
+                @update:modelValue="clickEditRow"
+              >
+                <template #year="{ year }">{{ year + 543 }}</template>
+                <template #year-overlay-value="{ value }">{{
+                  parseInt(value + 543)
+                }}</template>
+                <template #trigger>
+                  <q-input
+                    :class="getClass(edit)"
+                    hide-bottom-space
+                    :outlined="edit"
+                    dense
+                    lazy-rules
+                    :borderless="!edit"
+                    :model-value="yearly + 543"
+                    :rules="[(val) => !!val || `${'กรุณาเลือกปีงบประมาณ'}`]"
+                    :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 class="col-xs-6 col-sm-6 col-md-6">
+              <q-input
+                :class="getClass(edit)"
+                hide-bottom-space
+                :outlined="edit"
+                dense
+                lazy-rules
+                :readonly="!edit"
+                :borderless="!edit"
+                v-model="place"
+                :rules="[
+                  (val) => !!val || `${'กรุณากรอกสถานที่ฝึกอบรม/ดูงาน'}`,
+                ]"
+                :label="`${'สถานที่ฝึกอบรม/ดูงาน'}`"
+                @update:modelValue="clickEditRow"
+              />
+            </div>
+            <div class="col-xs-6 col-sm-6 col-md-6">
+              <q-input
+                :class="getClass(edit)"
+                hide-bottom-space
+                :outlined="edit"
+                dense
+                lazy-rules
+                :readonly="!edit"
+                :borderless="!edit"
+                v-model="duration"
+                :label="`${'รวมระยะเวลาในการฝึกอบรม/ดูงาน'}`"
+                @update:modelValue="clickEditRow"
+              />
+            </div>
+            <div class="col-xs-6 col-sm-6 col-md-6">
+              <q-input
+                :class="getClass(edit)"
+                hide-bottom-space
+                :outlined="edit"
+                dense
+                lazy-rules
+                :readonly="!edit"
+                :borderless="!edit"
+                v-model="department"
+                :label="`${'หน่วยงานที่รับผิดชอบจัดการฝึกอบรม/ดูงาน'}`"
+                @update:modelValue="clickEditRow"
+              />
+            </div>
+            <div class="col-xs-6 col-sm-6 col-md-6">
+              <q-input
+                :class="getClass(edit)"
+                hide-bottom-space
+                :outlined="edit"
+                dense
+                lazy-rules
+                :readonly="!edit"
+                :borderless="!edit"
+                v-model="numberOrder"
+                :label="`${'เลขที่คำสั่ง/เลขที่หนังสืออนุมัติ'}`"
+                @update:modelValue="clickEditRow"
+              />
+            </div>
+            <div class="col-xs-6 col-sm-6 col-md-6">
+              <datepicker
+                menu-class-name="modalfix"
+                v-model="dateOrder"
+                :locale="'th'"
+                autoApply
+                :enableTimePicker="false"
+                :min-date="minDate"
+                :readonly="!edit"
+                @update:modelValue="clickEditRow"
+                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)"
+                    hide-bottom-space
+                    :outlined="edit"
+                    dense
+                    lazy-rules
+                    :borderless="!edit"
+                    :model-value="date2Thai(dateOrder)"
+                    :label="`${'คำสั่งลงวันที่/หนังสืออนุมัติลงวันที่'}`"
+                  >
+                    <!-- :rules="[
+                      (val) =>
+                        !!val ||
+                        `${'กรุณาเลือกคำสั่งลงวันที่/หนังสืออนุมัติลงวันที่'}`,
+                    ]" -->
+                    <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>
+        </q-card-section>
+        <q-separator />
+        <DialogFooter
+          :cancel="clickCancel"
+          :edit="clickEdit"
+          :save="clickSave"
+          :validate="validateData"
+          :clickNext="clickNext"
+          :clickPrevious="clickPrevious"
+          :clickDelete="clickDelete"
+          v-model:editvisible="edit"
+          v-model:next="next"
+          v-model:previous="previous"
+          v-model:modalEdit="modalEdit"
+        />
+      </q-form>
+    </q-card>
+  </q-dialog>
+  <HistoryTable
+    :rows="rowsHistory"
+    :columns="columnsHistory"
+    :filter="filterHistory"
+    :visible-columns="visibleColumnsHistory"
+    v-model:modal="modalHistory"
+    v-model:inputfilter="filterHistory"
+    v-model:inputvisible="visibleColumnsHistory"
+    v-model:tittle="tittleHistory"
+  >
+    <template #columns="props">
+      <q-tr :props="props">
+        <q-td v-for="col in props.cols" :key="col.name" :props="props">
+          <div
+            v-if="
+              col.name == 'startDate' ||
+              col.name == 'endDate' ||
+              col.name == 'createdAt' ||
+              col.name == 'dateOrder'
+            "
+            class="table_ellipsis"
+          >
+            {{ date2Thai(col.value) }}
+          </div>
+          <div v-else-if="col.name == 'yearly'" class="table_ellipsis">
+            {{ col.value + 543 }}
+          </div>
+          <div v-else class="table_ellipsis">
+            {{ col.value }}
+          </div>
+        </q-td>
+      </q-tr>
+    </template>
+  </HistoryTable>
+</template>
+<script setup lang="ts">
+import { onMounted, ref, watch } from "vue";
+import { useRoute } from "vue-router";
+import { useCounterMixin } from "@/stores/mixin";
+import { useComponentProfileDataStore } from "@/components/information/store/store";
+import { useDataStore } from "@/stores/data";
+import ProfileTable from "@/components/information/Table.vue";
+import DialogHeader from "@/components/information/DialogHeader.vue";
+import DialogFooter from "@/components/information/DialogFooter.vue";
+import { useQuasar } from "quasar";
+import type {
+  RequestItemsObject,
+  DataProps,
+} from "@/components/information/interface/request/Train";
+import type { ResponseObject } from "@/components/information/interface/response/Train";
+import HistoryTable from "@/components/TableHistory.vue";
+import http from "@/plugins/http";
+import config from "@/app.config";
+import type { QTableProps } from "quasar";
+
+const props = defineProps({
+  statusEdit: {
+    type: Boolean,
+    required: true,
+  },
+});
+
+const $q = useQuasar();
+const store = useComponentProfileDataStore();
+const { profileData, changeProfileColumns } = store;
+const dataStore = useDataStore();
+const { loaderPage } = dataStore;
+const mixin = useCounterMixin();
+const { date2Thai, success, dateToISO, messageError } = mixin;
+const route = useRoute();
+const id = ref<string>("");
+const name = ref<string>();
+const topic = ref<string>();
+const yearly = ref<number>(new Date().getFullYear());
+const place = ref<string>();
+const duration = ref<string>();
+const department = ref<string>();
+const numberOrder = ref<string>();
+const dateOrder = ref<Date>(new Date());
+const startDate = ref<Date>(new Date());
+const endDate = ref<Date>(new Date());
+const minDate = ref<Date>();
+const myForm = ref<any>(); //form data input
+const edit = ref<boolean>(false); //เช็คการกดปุ่มแก้ไขใน dialog
+const modal = ref<boolean>(false); //modal add detail
+const modalEdit = ref<boolean>(false); //modal ที่แสดงใช้สำหรับแก้ไขหรือไม่
+const rawItem = ref<RequestItemsObject>(); //ข้อมูลเดิมที่เลือกใน row นั้น
+const rowIndex = ref<number>(0); //indexข้อมูลเดิมที่เลือกใน row นั้น
+const previous = ref<boolean>(); //แสดงปุ่มดูข้อมูลก่อนหน้า
+const next = ref<boolean>(); //แสดงปุ่มดูข้อมูลต่อไป
+const editRow = ref<boolean>(false); //เช็คมีการแก้ไขข้อมูล
+const rowsHistory = ref<RequestItemsObject[]>([]); //select data history
+const tittleHistory = ref<string>("ประวัติแก้ไขการฝึกอบรม/ดูงาน"); //
+const filterHistory = ref<string>(""); //search data table history
+const modalHistory = ref<boolean>(false); //modal ประวัติการแก้ไขข้อมูล
+const checkValidate = ref<boolean>(false); //validate data ผ่านหรือไม่
+const profileId = ref<string>(
+  route.params.id ? route.params.id.toString() : ""
+);
+const rows = ref<RequestItemsObject[]>([]);
+const filter = ref<string>(""); //search data table
+const visibleColumns = ref<String[]>([]);
+profileData.train.columns.length == 0
+  ? (visibleColumns.value = [
+      "name",
+      "topic",
+      "yearly",
+      "place",
+      "duration",
+      "department",
+      "numberOrder",
+      "dateOrder",
+      "startDate",
+      "endDate",
+    ])
+  : (visibleColumns.value = profileData.train.columns);
+const columns = ref<QTableProps["columns"]>([
+  {
+    name: "name",
+    align: "left",
+    label: "ชื่อโครงการ/หลักสูตรการฝึกอบรม",
+    sortable: true,
+    field: "name",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "topic",
+    align: "left",
+    label: "หัวข้อการฝึกอบรม/ดูงาน",
+    sortable: true,
+    field: "topic",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "startDate",
+    align: "left",
+    label: "วันเริ่มต้นการฝึกอบรม/ดูงาน",
+    sortable: true,
+    field: "startDate",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "endDate",
+    align: "left",
+    label: "วันสิ้นสุดการฝึกอบรม/ดูงาน",
+    sortable: true,
+    field: "endDate",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "yearly",
+    align: "left",
+    label: "ปีที่อบรม (พ.ศ.)",
+    sortable: true,
+    field: "yearly",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "place",
+    align: "left",
+    label: "สถานที่ฝึกอบรม/ดูงาน",
+    sortable: true,
+    field: "place",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "duration",
+    align: "left",
+    label: "รวมระยะเวลาในการฝึกอบรม/ดูงาน",
+    sortable: true,
+    field: "duration",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "department",
+    align: "left",
+    label: "หน่วยงานที่รับผิดชอบจัดการฝึกอบรม/ดูงาน",
+    sortable: true,
+    field: "department",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "numberOrder",
+    align: "left",
+    label: "เลขที่คำสั่ง/เลขที่หนังสืออนุมัติ",
+    sortable: true,
+    field: "numberOrder",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "dateOrder",
+    align: "left",
+    label: "คำสั่งลงวันที่/หนังสืออนุมัติลงวันที่",
+    sortable: true,
+    field: "dateOrder",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+]);
+const columnsHistory = ref<QTableProps["columns"]>([
+  {
+    name: "name",
+    align: "left",
+    label: "ชื่อโครงการ/หลักสูตรการฝึกอบรม",
+    sortable: true,
+    field: "name",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "topic",
+    align: "left",
+    label: "หัวข้อการฝึกอบรม/ดูงาน",
+    sortable: true,
+    field: "topic",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "startDate",
+    align: "left",
+    label: "วันเริ่มต้นการฝึกอบรม/ดูงาน",
+    sortable: true,
+    field: "startDate",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "endDate",
+    align: "left",
+    label: "วันสิ้นสุดการฝึกอบรม/ดูงาน",
+    sortable: true,
+    field: "endDate",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "yearly",
+    align: "left",
+    label: "ปีที่อบรม (พ.ศ.)",
+    sortable: true,
+    field: "yearly",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "place",
+    align: "left",
+    label: "สถานที่ฝึกอบรม/ดูงาน",
+    sortable: true,
+    field: "place",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "duration",
+    align: "left",
+    label: "รวมระยะเวลาในการฝึกอบรม/ดูงาน",
+    sortable: true,
+    field: "duration",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "department",
+    align: "left",
+    label: "หน่วยงานที่รับผิดชอบจัดการฝึกอบรม/ดูงาน",
+    sortable: true,
+    field: "department",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "numberOrder",
+    align: "left",
+    label: "เลขที่คำสั่ง/เลขที่หนังสืออนุมัติ",
+    sortable: true,
+    field: "numberOrder",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "dateOrder",
+    align: "left",
+    label: "คำสั่งลงวันที่/หนังสืออนุมัติลงวันที่",
+    sortable: true,
+    field: "dateOrder",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "createdFullName",
+    align: "left",
+    label: "ผู้ดำเนินการ",
+    sortable: true,
+    field: "createdFullName",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "createdAt",
+    align: "left",
+    label: "วันที่แก้ไข",
+    sortable: true,
+    field: "createdAt",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+]);
+const visibleColumnsHistory = ref<String[]>([
+  "name",
+  "topic",
+  "yearly",
+  "place",
+  "duration",
+  "department",
+  "numberOrder",
+  "dateOrder",
+  "startDate",
+  "endDate",
+  "createdFullName",
+  "createdAt",
+]);
+
+watch(startDate, (count, prevCount) => {
+  minDate.value = new Date(startDate.value);
+});
+
+watch(visibleColumns, async (count: String[], prevCount: String[]) => {
+  await changeProfileColumns("train", count);
+});
+
+onMounted(async () => {
+  await fetchData();
+});
+
+const fetchData = async () => {
+  if (profileId.value) {
+    loaderPage(true);
+    await http
+      .get(config.API.profileTrainId(profileId.value))
+      .then((res) => {
+        let data = res.data.result;
+        rows.value = [];
+        data.map((e: ResponseObject) => {
+          rows.value.push({
+            id: e.id,
+            name: e.name,
+            topic: e.topic,
+            yearly: e.yearly,
+            place: e.place,
+            duration: e.duration,
+            department: e.department,
+            numberOrder: e.numberOrder,
+            dateOrder: e.dateOrder,
+            startDate: new Date(e.startDate),
+            endDate: new Date(e.endDate),
+            createdFullName: e.createdFullName,
+            createdAt: new Date(e.createdAt),
+          });
+        });
+      })
+      .catch((e) => {
+        messageError($q, e);
+      })
+      .finally(() => {
+        loaderPage(false);
+      });
+  }
+};
+
+/**
+ * กดดูข้อมูลก่อนหน้า
+ */
+const clickPrevious = async () => {
+  edit.value = false;
+  rowIndex.value -= 1;
+  await getData();
+  await checkRowPage();
+};
+
+/**
+ * กดดูข้อมูลต่อไป
+ */
+const clickNext = async () => {
+  edit.value = false;
+  rowIndex.value += 1;
+  await getData();
+  await checkRowPage();
+};
+
+/**
+ * กดดูข้อมูลต่อไป
+ */
+const getData = () => {
+  const row = rows.value[rowIndex.value];
+  name.value = row.name;
+  topic.value = row.topic;
+  yearly.value = row.yearly;
+  place.value = row.place;
+  duration.value = row.duration;
+  department.value = row.department;
+  numberOrder.value = row.numberOrder;
+  dateOrder.value = row.dateOrder;
+  startDate.value = row.startDate;
+  endDate.value = row.endDate;
+  id.value = row.id;
+};
+
+/**
+ * เช็คปุ่มดูข้อมูล ย้อน กับ ต่อไป ว่าต้องแสดงไหม
+ */
+const checkRowPage = () => {
+  editRow.value = false;
+  next.value = true;
+  previous.value = true;
+  if (rowIndex.value + 1 >= rows.value.length) {
+    next.value = false;
+  }
+  if (rowIndex.value - 1 < 0) {
+    previous.value = false;
+  }
+};
+
+/**
+ * กดปุ่มแก้ไขใน dialog
+ */
+const clickEdit = () => {
+  editRow.value = false;
+  next.value = false;
+  previous.value = false;
+};
+
+/**
+ * กดปุ่มเพิ่มด้านบน table
+ */
+const clickAdd = async () => {
+  editRow.value = false;
+  await addData();
+};
+
+/**
+ * กดบันทึกใน dialog
+ */
+const clickSave = async () => {
+  myForm.value.validate().then(async (result: boolean) => {
+    if (result) {
+      if (modalEdit.value) {
+        await editData();
+      } else {
+        await saveData();
+      }
+    }
+  });
+};
+
+/**
+ * บันทึกเพิ่มข้อมูล
+ */
+const saveData = async () => {
+  if (profileId.value) {
+    loaderPage(true);
+    await http
+      .post(config.API.profileTrainId(profileId.value), {
+        id: id.value,
+        name: name.value,
+        topic: topic.value,
+        yearly: yearly.value,
+        place: place.value,
+        duration: duration.value,
+        department: department.value,
+        numberOrder: numberOrder.value,
+        dateOrder: dateOrder.value,
+        startDate: dateToISO(startDate.value),
+        endDate: dateToISO(endDate.value),
+      })
+      .then((res) => {
+        success($q, "บันทึกข้อมูลสำเร็จ");
+        modal.value = false;
+      })
+      .catch((e) => {
+        messageError($q, e);
+      })
+      .finally(async () => {
+        await fetchData();
+      });
+  }
+};
+
+/**
+ * บันทึกแก้ไขข้อมูล
+ */
+const editData = async () => {
+  loaderPage(true);
+  await http
+    .put(config.API.profileTrainId(id.value), {
+      id: id.value,
+      name: name.value,
+      topic: topic.value,
+      yearly: yearly.value,
+      place: place.value,
+      duration: duration.value,
+      department: department.value,
+      numberOrder: numberOrder.value,
+      dateOrder: dateOrder.value,
+      startDate: dateToISO(startDate.value),
+      endDate: dateToISO(endDate.value),
+    })
+    .then((res) => {
+      success($q, "บันทึกข้อมูลสำเร็จ");
+      modal.value = false;
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(async () => {
+      await fetchData();
+    });
+};
+
+/**
+ * ลบลบข้อมูล
+ */
+const clickDelete = async () => {
+  $q.dialog({
+    title: `ลบข้อมูล`,
+    message: `ต้องการทำการลบข้อมูลนี้ใช่หรือไม่?`,
+    cancel: "ยกเลิก",
+    ok: "ยืนยัน",
+    persistent: true,
+  })
+    .onOk(async () => {
+      loaderPage(true);
+      await http
+        .delete(config.API.profileTrainId(id.value))
+        .then((res) => {
+          success($q, "ลบข้อมูลสำเร็จ");
+          modal.value = false;
+        })
+        .catch((e) => {
+          messageError($q, e);
+        })
+        .finally(async () => {
+          await fetchData();
+        });
+    })
+    .onCancel(async () => {
+      await fetchData();
+    });
+};
+
+/**
+ * กดปิด dialog
+ */
+const clickClose = async () => {
+  if (editRow.value == true) {
+    $q.dialog({
+      title: `ข้อมูลมีการแก้ไข`,
+      message: `ยืนยันที่จะปิดโดยไม่บันทึกใช่หรือไม่?`,
+      cancel: "ยกเลิก",
+      ok: "ยืนยัน",
+      persistent: true,
+    }).onOk(async () => {
+      modal.value = false;
+      next.value = false;
+      previous.value = false;
+    });
+  } else {
+    modal.value = false;
+    next.value = false;
+    previous.value = false;
+  }
+};
+
+/**
+ * กดเลือกข้อมูลที่จะแก้ไข
+ * @param props ค่า props ใน row ที่เลือก
+ */
+const selectData = async (props: DataProps) => {
+  modalEdit.value = true;
+  modal.value = true;
+  edit.value = false;
+  rawItem.value = props.row;
+  rowIndex.value = props.rowIndex;
+  name.value = props.row.name;
+  topic.value = props.row.topic;
+  yearly.value = props.row.yearly;
+  place.value = props.row.place;
+  duration.value = props.row.duration;
+  department.value = props.row.department;
+  numberOrder.value = props.row.numberOrder;
+  dateOrder.value = props.row.dateOrder;
+  startDate.value = props.row.startDate;
+  endDate.value = props.row.endDate;
+  id.value = props.row.id;
+  await checkRowPage();
+};
+
+/**
+ * กดปุ่มเพิ่มบน table
+ */
+const addData = () => {
+  modalEdit.value = false;
+  modal.value = true;
+  edit.value = true;
+  name.value = "";
+  topic.value = "";
+  yearly.value = new Date().getFullYear();
+  place.value = "";
+  duration.value = "";
+  department.value = "";
+  numberOrder.value = "";
+  dateOrder.value = new Date();
+  startDate.value = new Date();
+  endDate.value = new Date();
+};
+
+/**
+ * ฟังก์ชันปุ่มยกเลิกการแก้ไขข้อมูล
+ */
+const clickCancel = async () => {
+  if (editRow.value == true) {
+    $q.dialog({
+      title: `ข้อมูลมีการแก้ไข`,
+      message: `ยืนยันยกเลิกการแก้ไขใช่หรือไม่?`,
+      cancel: "ยกเลิก",
+      ok: "ยืนยัน",
+      persistent: true,
+    }).onOk(async () => {
+      edit.value = false;
+      await checkRowPage();
+      await getData();
+    });
+  } else {
+    edit.value = false;
+    await checkRowPage();
+  }
+};
+
+/**
+ * เช็คว่ามีการแก้ไขข้อมูล
+ */
+const clickEditRow = () => {
+  editRow.value = true;
+};
+
+/**
+ * ฟังชั้นดูข้อมูลประวัติแก้ไขข้อมูลที่เลือก
+ * @param row ข้อมูล row ที่ดูประวัติการแก้ไข
+ */
+const clickHistory = async (row: RequestItemsObject) => {
+  modalHistory.value = true;
+  loaderPage(true);
+  await http
+    .get(config.API.profileTrainHisId(row.id))
+    .then((res) => {
+      let data = res.data.result;
+      rowsHistory.value = [];
+      data.map((e: ResponseObject) => {
+        rowsHistory.value.push({
+          id: e.id,
+          name: e.name,
+          topic: e.topic,
+          yearly: e.yearly,
+          place: e.place,
+          duration: e.duration,
+          department: e.department,
+          numberOrder: e.numberOrder,
+          dateOrder: e.dateOrder,
+          startDate: new Date(e.startDate),
+          endDate: new Date(e.endDate),
+          createdFullName: e.createdFullName,
+          createdAt: new Date(e.createdAt),
+        });
+      });
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      loaderPage(false);
+    });
+};
+
+/**
+ * validate input ใน dialog
+ */
+const validateData = async () => {
+  checkValidate.value = true;
+  await myForm.value.validate().then((result: boolean) => {
+    if (result == false) {
+      checkValidate.value = false;
+    }
+  });
+};
+
+/**
+ * class จัดรูปแบบแสดงระหว่างข้อมูลที่แก้ไขหรือแสดงเฉยๆ
+ * @param val ข้อมูล input สำหรับแก้ไขหรือไม่
+ */
+const getClass = (val: boolean) => {
+  return {
+    "full-width inputgreen cursor-pointer": val,
+    "full-width cursor-pointer": !val,
+  };
+};
+</script>
+<style lang="scss">
+.modalfix {
+  position: fixed !important;
+}
+</style>
diff --git a/src/components/information/Work.vue b/src/components/information/Work.vue
new file mode 100644
index 000000000..000369e54
--- /dev/null
+++ b/src/components/information/Work.vue
@@ -0,0 +1,908 @@
+<!-- card ปฏิบัติราชการพิเศษ -->
+<template>
+  <q-card flat bordered class="col-12 q-px-lg q-py-md">
+    <q-form ref="myForm">
+      <ProfileTable
+        :rows="rows"
+        :columns="columns"
+        :filter="filter"
+        :visible-columns="visibleColumns"
+        v-model:inputfilter="filter"
+        v-model:inputvisible="visibleColumns"
+        :add="clickAdd"
+        name="ปฏิบัติราชการพิเศษ"
+        icon="mdi-bookmark"
+        :statusEdit="statusEdit"
+      >
+        <template #columns="props">
+          <q-tr :props="props">
+            <q-td
+              v-for="col in props.cols"
+              :key="col.name"
+              :props="props"
+              @click="selectData(props)"
+              class="cursor-pointer"
+            >
+              <div
+                v-if="
+                  col.name == 'dateStart' ||
+                  col.name == 'dateEnd' ||
+                  col.name == 'refCommandDate'
+                "
+                class="table_ellipsis"
+              >
+                {{ col.value == null ? null : date2Thai(col.value) }}
+              </div>
+              <div v-else class="table_ellipsis">
+                {{ col.value }}
+              </div>
+            </q-td>
+            <q-td auto-width>
+              <q-btn
+                color="info"
+                flat
+                dense
+                round
+                size="14px"
+                icon="mdi-history"
+                @click="clickHistory(props.row)"
+              />
+            </q-td>
+          </q-tr>
+        </template>
+      </ProfileTable>
+    </q-form>
+  </q-card>
+  <!-- popup Edit window-->
+  <q-dialog v-model="modal" persistent>
+    <q-card style="width: 600px">
+      <q-form ref="myForm">
+        <DialogHeader tittle="ปฏิบัติราชการพิเศษ" :close="clickClose" />
+        <q-separator />
+        <q-card-section class="q-p-sm">
+          <div
+            class="row col-12 items-center q-col-gutter-x-xs q-col-gutter-y-xs"
+          >
+            <div class="col-xs-6 col-sm-6 col-md-6">
+              <datepicker
+                menu-class-name="modalfix"
+                :readonly="!edit"
+                v-model="dateStart"
+                :locale="'th'"
+                autoApply
+                :enableTimePicker="false"
+                @update:modelValue="clickEditRow"
+                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="date2Thai(dateStart)"
+                    :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 class="col-xs-6 col-sm-6 col-md-6">
+              <datepicker
+                menu-class-name="modalfix"
+                v-model="dateEnd"
+                :locale="'th'"
+                autoApply
+                :enableTimePicker="false"
+                :min-date="minDate"
+                :readonly="!edit"
+                @update:modelValue="clickEditRow"
+                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="date2Thai(dateEnd)"
+                    :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 class="col-12">
+              <q-input
+                :class="getClass(edit)"
+                :outlined="edit"
+                dense
+                lazy-rules
+                autogrow
+                :readonly="!edit"
+                :borderless="!edit"
+                v-model="reference"
+                :rules="[(val) => !!val || `${'กรุณากรอกเอกสารอ้างอิง'}`]"
+                hide-bottom-space
+                :label="`${'เอกสารอ้างอิง'}`"
+                @update:modelValue="clickEditRow"
+              />
+            </div>
+            <div class="col-12">
+              <q-input
+                :class="getClass(edit)"
+                :outlined="edit"
+                dense
+                lazy-rules
+                autogrow
+                :readonly="!edit"
+                :borderless="!edit"
+                v-model="detail"
+                :rules="[(val) => !!val || `${'กรุณากรอกรายละเอียด'}`]"
+                hide-bottom-space
+                :label="`${'รายละเอียด'}`"
+                @update:modelValue="clickEditRow"
+              />
+            </div>
+            <div class="col-xs-6 col-sm-6 col-md-6">
+              <q-input
+                :class="getClass(edit)"
+                :outlined="edit"
+                dense
+                lazy-rules
+                :readonly="!edit"
+                :borderless="!edit"
+                v-model="refCommandNo"
+                hide-bottom-space
+                :label="`${'เลขที่คำสั่ง'}`"
+                @update:modelValue="clickEditRow"
+              >
+                <template v-slot:append>
+                  <q-icon
+                    name="mdi-file"
+                    class="cursor-pointer"
+                    @click="resetFilter"
+                  />
+                </template>
+              </q-input>
+            </div>
+            <div class="col-xs-6 col-sm-6 col-md-6">
+              <datepicker
+                menu-class-name="modalfix"
+                :readonly="!edit"
+                v-model="refCommandDate"
+                :locale="'th'"
+                autoApply
+                :enableTimePicker="false"
+                @update:modelValue="clickEditRow"
+                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="
+                      refCommandDate == null ? null : date2Thai(refCommandDate)
+                    "
+                    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>
+        </q-card-section>
+        <q-separator />
+        <DialogFooter
+          :cancel="clickCancel"
+          :edit="clickEdit"
+          :save="clickSave"
+          :validate="validateData"
+          :clickNext="clickNext"
+          :clickPrevious="clickPrevious"
+          :clickDelete="clickDelete"
+          v-model:editvisible="edit"
+          v-model:next="next"
+          v-model:previous="previous"
+          v-model:modalEdit="modalEdit"
+        />
+      </q-form>
+    </q-card>
+  </q-dialog>
+  <HistoryTable
+    :rows="rowsHistory"
+    :columns="columnsHistory"
+    :filter="filterHistory"
+    :visible-columns="visibleColumnsHistory"
+    v-model:modal="modalHistory"
+    v-model:inputfilter="filterHistory"
+    v-model:inputvisible="visibleColumnsHistory"
+    v-model:tittle="tittleHistory"
+  >
+    <template #columns="props">
+      <q-tr :props="props">
+        <q-td v-for="col in props.cols" :key="col.name" :props="props">
+          <div
+            v-if="
+              col.name == 'dateStart' ||
+              col.name == 'dateEnd' ||
+              col.name == 'createdAt' ||
+              col.name == 'refCommandDate'
+            "
+            class="table_ellipsis"
+          >
+            {{ col.value == null ? null : date2Thai(col.value) }}
+          </div>
+          <div v-else class="table_ellipsis">
+            {{ col.value }}
+          </div>
+        </q-td>
+      </q-tr>
+    </template>
+  </HistoryTable>
+</template>
+<script setup lang="ts">
+import { onMounted, ref, watch } from "vue";
+import { useRoute } from "vue-router";
+import { useComponentProfileDataStore } from "@/components/information/store/store";
+import { useCounterMixin } from "@/stores/mixin";
+import { useDataStore } from "@/stores/data";
+import ProfileTable from "@/components/information/Table.vue";
+import DialogHeader from "@/components/information/DialogHeader.vue";
+import DialogFooter from "@/components/information/DialogFooter.vue";
+import { useQuasar } from "quasar";
+import type {
+  RequestItemsObject,
+  DataProps,
+} from "@/components/information/interface/request/Work";
+import type { ResponseObject } from "@/components/information/interface/response/Work";
+import HistoryTable from "@/components/TableHistory.vue";
+import http from "@/plugins/http";
+import config from "@/app.config";
+import type { QTableProps } from "quasar";
+
+const props = defineProps({
+  statusEdit: {
+    type: Boolean,
+    required: true,
+  },
+});
+
+const $q = useQuasar();
+const store = useComponentProfileDataStore();
+const { profileData, changeProfileColumns } = store;
+const dataStore = useDataStore();
+const { loaderPage } = dataStore;
+const mixin = useCounterMixin();
+const { date2Thai, success, dateToISO, messageError } = mixin;
+const route = useRoute();
+const id = ref<string>("");
+const dateStart = ref<Date>(new Date());
+const dateEnd = ref<Date>(new Date());
+const detail = ref<string>();
+const reference = ref<string>();
+const minDate = ref<Date>();
+const refCommandNo = ref<string>();
+const refCommandDate = ref<Date | null>(new Date());
+const myForm = ref<any>(); //form data input
+const edit = ref<boolean>(false); //เช็คการกดปุ่มแก้ไขใน dialog
+const modal = ref<boolean>(false); //modal add detail
+const modalEdit = ref<boolean>(false); //modal ที่แสดงใช้สำหรับแก้ไขหรือไม่
+const rawItem = ref<RequestItemsObject>(); //ข้อมูลเดิมที่เลือกใน row นั้น
+const rowIndex = ref<number>(0); //indexข้อมูลเดิมที่เลือกใน row นั้น
+const previous = ref<boolean>(); //แสดงปุ่มดูข้อมูลก่อนหน้า
+const next = ref<boolean>(); //แสดงปุ่มดูข้อมูลต่อไป
+const editRow = ref<boolean>(false); //เช็คมีการแก้ไขข้อมูล
+const rowsHistory = ref<RequestItemsObject[]>([]); //select data history
+const tittleHistory = ref<string>("ประวัติแก้ไขปฏิบัติราชการพิเศษ"); //
+const filterHistory = ref<string>(""); //search data table history
+const modalHistory = ref<boolean>(false); //modal ประวัติการแก้ไขข้อมูล
+const checkValidate = ref<boolean>(false); //validate data ผ่านหรือไม่
+const profileId = ref<string>(
+  route.params.id ? route.params.id.toString() : ""
+);
+const rows = ref<RequestItemsObject[]>([]);
+const filter = ref<string>(""); //search data table
+const visibleColumns = ref<String[]>([]);
+profileData.work.columns.length == 0
+  ? (visibleColumns.value = [
+      "dateStart",
+      "dateEnd",
+      "detail",
+      "reference",
+      "refCommandNo",
+      "refCommandDate",
+    ])
+  : (visibleColumns.value = profileData.work.columns);
+const columns = ref<QTableProps["columns"]>([
+  {
+    name: "dateStart",
+    align: "left",
+    label: "เริ่มต้น",
+    sortable: true,
+    field: "dateStart",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "dateEnd",
+    align: "left",
+    label: "สิ้นสุด",
+    sortable: true,
+    field: "dateEnd",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "reference",
+    align: "left",
+    label: "เอกสารอ้างอิง",
+    sortable: true,
+    field: "reference",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "detail",
+    align: "left",
+    label: "รายละเอียด",
+    sortable: true,
+    field: "detail",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "refCommandNo",
+    align: "left",
+    label: "เลขที่คำสั่ง",
+    sortable: true,
+    field: "refCommandNo",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "refCommandDate",
+    align: "left",
+    label: "เอกสารอ้างอิง (ลงวันที่)",
+    sortable: true,
+    field: "refCommandDate",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+]);
+const columnsHistory = ref<QTableProps["columns"]>([
+  {
+    name: "dateStart",
+    align: "left",
+    label: "เริ่มต้น",
+    sortable: true,
+    field: "dateStart",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "dateEnd",
+    align: "left",
+    label: "สิ้นสุด",
+    sortable: true,
+    field: "dateEnd",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "reference",
+    align: "left",
+    label: "เอกสารอ้างอิง",
+    sortable: true,
+    field: "reference",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "detail",
+    align: "left",
+    label: "รายละเอียด",
+    sortable: true,
+    field: "detail",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "refCommandNo",
+    align: "left",
+    label: "เลขที่คำสั่ง",
+    sortable: true,
+    field: "refCommandNo",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "refCommandDate",
+    align: "left",
+    label: "เอกสารอ้างอิง (ลงวันที่)",
+    sortable: true,
+    field: "refCommandDate",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "createdFullName",
+    align: "left",
+    label: "ผู้ดำเนินการ",
+    sortable: true,
+    field: "createdFullName",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "createdAt",
+    align: "left",
+    label: "วันที่แก้ไข",
+    sortable: true,
+    field: "createdAt",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+]);
+const visibleColumnsHistory = ref<String[]>([
+  "dateStart",
+  "dateEnd",
+  "detail",
+  "reference",
+  "refCommandNo",
+  "refCommandDate",
+  "createdFullName",
+  "createdAt",
+]);
+
+watch(dateStart, (count, prevCount) => {
+  minDate.value = new Date(dateStart.value);
+});
+
+watch(visibleColumns, async (count: String[], prevCount: String[]) => {
+  await changeProfileColumns("work", count);
+});
+
+onMounted(async () => {
+  await fetchData();
+});
+
+const fetchData = async () => {
+  if (profileId.value) {
+    loaderPage(true);
+    await http
+      .get(config.API.profileDutyId(profileId.value))
+      .then((res) => {
+        let data = res.data.result;
+        rows.value = [];
+        data.map((e: ResponseObject) => {
+          rows.value.push({
+            id: e.id,
+            dateStart: new Date(e.dateStart),
+            dateEnd: new Date(e.dateEnd),
+            detail: e.detail,
+            reference: e.reference,
+            refCommandNo: e.refCommandNo,
+            refCommandDate:
+              e.refCommandDate == null ? null : new Date(e.refCommandDate),
+            createdFullName: e.createdFullName,
+            createdAt: new Date(e.createdAt),
+          });
+        });
+      })
+      .catch((e) => {
+        messageError($q, e);
+      })
+      .finally(() => {
+        loaderPage(false);
+      });
+  }
+};
+
+/**
+ * กดดูข้อมูลก่อนหน้า
+ */
+const clickPrevious = async () => {
+  edit.value = false;
+  rowIndex.value -= 1;
+  await getData();
+  await checkRowPage();
+};
+
+/**
+ * กดดูข้อมูลต่อไป
+ */
+const clickNext = async () => {
+  edit.value = false;
+  rowIndex.value += 1;
+  await getData();
+  await checkRowPage();
+};
+
+/**
+ * กดดูข้อมูลต่อไป
+ */
+const getData = () => {
+  const row = rows.value[rowIndex.value];
+  dateStart.value = row.dateStart;
+  dateEnd.value = row.dateEnd;
+  detail.value = row.detail;
+  reference.value = row.reference;
+  refCommandNo.value = row.refCommandNo;
+  refCommandDate.value = row.refCommandDate;
+  id.value = row.id;
+};
+
+/**
+ * เช็คปุ่มดูข้อมูล ย้อน กับ ต่อไป ว่าต้องแสดงไหม
+ */
+const checkRowPage = () => {
+  editRow.value = false;
+  next.value = true;
+  previous.value = true;
+  if (rowIndex.value + 1 >= rows.value.length) {
+    next.value = false;
+  }
+  if (rowIndex.value - 1 < 0) {
+    previous.value = false;
+  }
+};
+
+/**
+ * กดปุ่มแก้ไขใน dialog
+ */
+const clickEdit = () => {
+  editRow.value = false;
+  next.value = false;
+  previous.value = false;
+};
+
+/**
+ * กดปุ่มเพิ่มด้านบน table
+ */
+const clickAdd = async () => {
+  editRow.value = false;
+  await addData();
+};
+
+/**
+ * กดบันทึกใน dialog
+ */
+const clickSave = async () => {
+  myForm.value.validate().then(async (result: boolean) => {
+    if (result) {
+      if (modalEdit.value) {
+        await editData();
+      } else {
+        await saveData();
+      }
+    }
+  });
+};
+
+/**
+ * บันทึกเพิ่มข้อมูล
+ */
+const saveData = async () => {
+  if (profileId.value) {
+    loaderPage(true);
+    await http
+      .post(config.API.profileDutyId(profileId.value), {
+        id: id.value,
+        dateStart: dateToISO(dateStart.value),
+        dateEnd: dateToISO(dateEnd.value),
+        detail: detail.value,
+        reference: reference.value,
+        refCommandNo: refCommandNo.value,
+        refCommandDate:
+          refCommandDate.value == null ? null : dateToISO(refCommandDate.value),
+      })
+      .then((res) => {
+        success($q, "บันทึกข้อมูลสำเร็จ");
+        modal.value = false;
+      })
+      .catch((e) => {
+        messageError($q, e);
+      })
+      .finally(async () => {
+        await fetchData();
+      });
+  }
+};
+
+/**
+ * บันทึกแก้ไขข้อมูล
+ */
+const editData = async () => {
+  loaderPage(true);
+  await http
+    .put(config.API.profileDutyId(id.value), {
+      id: id.value,
+      dateStart: dateToISO(dateStart.value),
+      dateEnd: dateToISO(dateEnd.value),
+      detail: detail.value,
+      reference: reference.value,
+      refCommandNo: refCommandNo.value,
+      refCommandDate:
+        refCommandDate.value == null ? null : dateToISO(refCommandDate.value),
+    })
+    .then((res) => {
+      success($q, "บันทึกข้อมูลสำเร็จ");
+      modal.value = false;
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(async () => {
+      await fetchData();
+    });
+};
+
+/**
+ * ลบลบข้อมูล
+ */
+const clickDelete = async () => {
+  $q.dialog({
+    title: `ลบข้อมูล`,
+    message: `ต้องการทำการลบข้อมูลนี้ใช่หรือไม่?`,
+    cancel: "ยกเลิก",
+    ok: "ยืนยัน",
+    persistent: true,
+  })
+    .onOk(async () => {
+      loaderPage(true);
+      await http
+        .delete(config.API.profileDutyId(id.value))
+        .then((res) => {
+          success($q, "ลบข้อมูลสำเร็จ");
+          modal.value = false;
+        })
+        .catch((e) => {
+          messageError($q, e);
+        })
+        .finally(async () => {
+          await fetchData();
+        });
+    })
+    .onCancel(async () => {
+      await fetchData();
+    });
+};
+
+/**
+ * กดปิด dialog
+ */
+const clickClose = async () => {
+  if (editRow.value == true) {
+    $q.dialog({
+      title: `ข้อมูลมีการแก้ไข`,
+      message: `ยืนยันที่จะปิดโดยไม่บันทึกใช่หรือไม่?`,
+      cancel: "ยกเลิก",
+      ok: "ยืนยัน",
+      persistent: true,
+    }).onOk(async () => {
+      modal.value = false;
+      next.value = false;
+      previous.value = false;
+    });
+  } else {
+    modal.value = false;
+    next.value = false;
+    previous.value = false;
+  }
+};
+
+/**
+ * กดเลือกข้อมูลที่จะแก้ไข
+ * @param props ค่า props ใน row ที่เลือก
+ */
+const selectData = async (props: DataProps) => {
+  modalEdit.value = true;
+  modal.value = true;
+  edit.value = false;
+  rawItem.value = props.row;
+  rowIndex.value = props.rowIndex;
+  dateStart.value = props.row.dateStart;
+  dateEnd.value = props.row.dateEnd;
+  detail.value = props.row.detail;
+  reference.value = props.row.reference;
+  refCommandNo.value = props.row.refCommandNo;
+  refCommandDate.value = props.row.refCommandDate;
+  id.value = props.row.id;
+  await checkRowPage();
+};
+
+/**
+ * กดปุ่มเพิ่มบน table
+ */
+const addData = () => {
+  modalEdit.value = false;
+  modal.value = true;
+  edit.value = true;
+  dateStart.value = new Date();
+  dateEnd.value = new Date();
+  detail.value = "";
+  reference.value = "";
+  refCommandNo.value = "";
+  refCommandDate.value = null;
+};
+
+/**
+ * ฟังก์ชันปุ่มยกเลิกการแก้ไขข้อมูล
+ */
+const clickCancel = async () => {
+  if (editRow.value == true) {
+    $q.dialog({
+      title: `ข้อมูลมีการแก้ไข`,
+      message: `ยืนยันยกเลิกการแก้ไขใช่หรือไม่?`,
+      cancel: "ยกเลิก",
+      ok: "ยืนยัน",
+      persistent: true,
+    }).onOk(async () => {
+      edit.value = false;
+      await checkRowPage();
+      await getData();
+    });
+  } else {
+    edit.value = false;
+    await checkRowPage();
+  }
+};
+
+/**
+ * เช็คว่ามีการแก้ไขข้อมูล
+ */
+const clickEditRow = () => {
+  editRow.value = true;
+};
+
+/**
+ * ฟังชั้นดูข้อมูลประวัติแก้ไขข้อมูลที่เลือก
+ * @param row ข้อมูล row ที่ดูประวัติการแก้ไข
+ */
+const clickHistory = async (row: RequestItemsObject) => {
+  modalHistory.value = true;
+  loaderPage(true);
+  await http
+    .get(config.API.profileDutyHisId(row.id))
+    .then((res) => {
+      let data = res.data.result;
+      rowsHistory.value = [];
+      data.map((e: ResponseObject) => {
+        rowsHistory.value.push({
+          id: e.id,
+          dateStart: new Date(e.dateStart),
+          dateEnd: new Date(e.dateEnd),
+          detail: e.detail,
+          reference: e.reference,
+          refCommandNo: e.refCommandNo,
+          refCommandDate:
+            e.refCommandDate == null ? null : new Date(e.refCommandDate),
+          createdFullName: e.createdFullName,
+          createdAt: new Date(e.createdAt),
+        });
+      });
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      loaderPage(false);
+    });
+};
+
+/**
+ * validate input ใน dialog
+ */
+const validateData = async () => {
+  checkValidate.value = true;
+  await myForm.value.validate().then((result: boolean) => {
+    if (result == false) {
+      checkValidate.value = false;
+    }
+  });
+};
+
+/**
+ * class จัดรูปแบบแสดงระหว่างข้อมูลที่แก้ไขหรือแสดงเฉยๆ
+ * @param val ข้อมูล input สำหรับแก้ไขหรือไม่
+ */
+const getClass = (val: boolean) => {
+  return {
+    "full-width inputgreen cursor-pointer": val,
+    "full-width cursor-pointer": !val,
+  };
+};
+const resetFilter = () => {};
+</script>
+<style lang="scss">
+.modalfix {
+  position: fixed !important;
+}
+</style>
diff --git a/src/modules/05_placement/components/Receive/receiveDetail.vue b/src/modules/05_placement/components/Receive/receiveDetail.vue
index 534e2c65b..f25b95658 100644
--- a/src/modules/05_placement/components/Receive/receiveDetail.vue
+++ b/src/modules/05_placement/components/Receive/receiveDetail.vue
@@ -14,7 +14,55 @@
         <Family v-model:statusEdit="statusEdit" :statusAdd="false" />
       </div>
       <div id="certicate" name="15" class="row col-12 q-mt-md">
-        <Certicate />
+        <Certicate v-model:statusEdit="statusEdit" />
+      </div>
+      <div id="education" name="2" class="row col-12 q-mt-md">
+        <EducationVue v-model:statusEdit="statusEdit" />
+      </div>
+      <div id="training" name="3" class="row col-12 q-mt-md">
+        <TrainVue v-model:statusEdit="statusEdit" />
+      </div>
+      <div id="insignia" name="4" class="row col-12 q-mt-md">
+        <InsigniaVue v-model:statusEdit="statusEdit" />
+      </div>
+      <div id="coined" name="5" class="row col-12 q-mt-md">
+        <CoinedVue v-model:statusEdit="statusEdit" profileType="profileType" />
+      </div>
+      <div id="assessment" name="6" class="row col-12 q-mt-md">
+        <AssessmentVue
+          v-model:statusEdit="statusEdit"
+          profileType="profileType"
+        />
+      </div>
+      <div id="position" name="7" class="row col-12 q-mt-md">
+        <SalaryVue v-model:statusEdit="statusEdit" />
+        <!-- v-if="profileType === 'officer'" -->
+        <!-- <SalaryEmployeeTempVue
+          v-model:statusEdit="statusEdit"
+          v-else-if="employeeClass === 'temp'"
+        />
+        <SalaryEmployeeVue v-model:statusEdit="statusEdit" v-else /> -->
+      </div>
+      <div id="rule" name="8" class="row col-12 q-mt-md">
+        <DisciplineVue v-model:statusEdit="statusEdit" />
+      </div>
+      <div id="leave" name="9" class="row col-12 q-mt-md">
+        <LeaveVue v-model:statusEdit="statusEdit" />
+      </div>
+      <div id="talent" name="10" class="row col-12 q-mt-md">
+        <TalentVue v-model:statusEdit="statusEdit" />
+      </div>
+      <div id="work" name="11" class="row col-12 q-mt-md">
+        <WorkVue v-model:statusEdit="statusEdit" />
+      </div>
+      <div id="record" name="12" class="row col-12 q-mt-md">
+        <RecordVue v-model:statusEdit="statusEdit" />
+      </div>
+      <div id="other" name="13" class="row col-12 q-mt-md">
+        <OtherVue v-model:statusEdit="statusEdit" />
+      </div>
+      <div id="document" name="14" class="row col-12 q-my-md">
+        <DocumentVue v-model:statusEdit="statusEdit" />
       </div>
     </div>
     <Image />
@@ -29,6 +77,20 @@ import Address from "@/components/information/Address.vue";
 import Family from "@/components/information/Family.vue";
 import Certicate from "@/components/information/Certicate.vue";
 
+import EducationVue from "@/components/information/Education.vue";
+import TrainVue from "@/components/information/Train.vue";
+import InsigniaVue from "@/components/information/Insignia.vue";
+import CoinedVue from "@/components/information/Coin.vue";
+import AssessmentVue from "@/components/information/Assessment.vue";
+import SalaryVue from "@/components/information/Salary.vue";
+import DisciplineVue from "@/components/information/Discipline.vue";
+import LeaveVue from "@/components/information/Leave.vue";
+import TalentVue from "@/components/information/Talent.vue";
+import WorkVue from "@/components/information/Work.vue";
+import RecordVue from "@/components/information/Record.vue";
+import OtherVue from "@/components/information/Other.vue";
+import DocumentVue from "@/components/information/Document.vue";
+
 const statusEdit = ref<boolean>(false);
 </script>
 <style lang="scss" scoped>

From b663eedb092042001c672f0002a3edb24dbf068a Mon Sep 17 00:00:00 2001
From: Thanit Konmek <thanit@frappet.com>
Date: Fri, 4 Aug 2023 10:04:59 +0700
Subject: [PATCH 022/113] =?UTF-8?q?=E0=B9=81=E0=B8=81=E0=B9=89=E0=B9=84?=
 =?UTF-8?q?=E0=B8=82=20loader?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/information/Address.vue        |   30 +-
 src/components/information/Assessment.vue     |   22 +-
 src/components/information/Certicate.vue      |   21 +-
 src/components/information/Coin.vue           |   22 +-
 src/components/information/Discipline.vue     |   22 +-
 src/components/information/Document.vue       |   14 +-
 src/components/information/Education.vue      |   29 +-
 src/components/information/Family.vue         |   21 +-
 src/components/information/Government.vue     |   22 +-
 src/components/information/Information.vue    |   39 +-
 src/components/information/Insignia.vue       |   25 +-
 src/components/information/Leave.vue          |   24 +-
 src/components/information/OldName.vue        |   24 +-
 src/components/information/Other.vue          |   21 +-
 src/components/information/Record.vue         |   21 +-
 src/components/information/Salary.vue         |   38 +-
 src/components/information/SalaryEmployee.vue |   39 +-
 .../information/SalaryEmployeeTemp.vue        |   40 +-
 src/components/information/Talent.vue         |   21 +-
 src/components/information/Train.vue          |   20 +-
 src/components/information/Work.vue           |   21 +-
 .../01_metadata/components/Calendar.vue       |    9 +-
 .../01_metadata/components/CalendarList.vue   |   12 +-
 .../components/insignia/Insignia.vue          |    3 -
 .../components/insignia/InsigniaType.vue      |    3 -
 .../components/organization/Agency.vue        |    3 -
 .../components/organization/Fax.vue           |    3 -
 .../organization/GovernmentAgency.vue         |    3 -
 .../components/organization/Level.vue         |    3 -
 .../components/organization/Organization.vue  |    3 -
 .../components/organization/ShortName.vue     |    3 -
 .../components/organization/Status.vue        |    3 -
 .../components/organization/TelExternal.vue   |    3 -
 .../components/organization/TelInternal.vue   |    3 -
 .../components/organization/Type.vue          |    3 -
 .../01_metadata/components/person/Blood.vue   |    3 -
 .../components/person/District.vue            |   16 +-
 .../components/person/Education.vue           |    3 -
 .../01_metadata/components/person/Gender.vue  |    3 -
 .../01_metadata/components/person/Prefix.vue  |    3 -
 .../components/person/Province.vue            |    4 +-
 .../components/person/Relationship.vue        |    3 -
 .../components/person/Religion.vue            |    3 -
 .../components/person/SubDistrict.vue         |   23 +-
 .../components/position/Executive.vue         |    3 -
 .../components/position/ExecutiveSide.vue     |    3 -
 .../01_metadata/components/position/Level.vue |    3 -
 .../01_metadata/components/position/Line.vue  |    3 -
 .../01_metadata/components/position/Path.vue  |    3 -
 .../components/position/PathSide.vue          |    3 -
 .../components/position/Status.vue            |    3 -
 .../01_metadata/components/position/Type.vue  |    3 -
 .../components/positionEmployee/Group.vue     |    3 -
 .../components/positionEmployee/Level.vue     |    3 -
 .../components/positionEmployee/Line.vue      |    3 -
 .../components/positionEmployee/Position.vue  |    3 -
 .../positionEmployee/PositionSide.vue         |    3 -
 .../components/positionEmployee/Status.vue    |    3 -
 src/modules/01_metadata/views/Main.vue        |    3 -
 .../01_metadata/views/MainCalendar.vue        |   21 +-
 .../components/AddMappingPositions.vue        |   46 +-
 .../components/Tree/MappingPositions.vue      |   14 +-
 .../components/Tree/OrganizationDialog.vue    |   62 +-
 .../Tree/OrganizationDialogAddEdit.vue        |   70 +-
 .../02_organizational/views/MainOrgChart.vue  |   16 +-
 .../02_organizational/views/MainReport.vue    |  411 +++---
 .../views/MainStructChart.vue                 |  327 ++---
 .../02_organizational/views/MainTree.vue      |   65 +-
 .../views/MainTreeEmployee.vue                |   46 +-
 .../02_organizational/views/ManageReport2.vue |   23 +-
 .../views/ManageReport2Add.vue                |   56 +-
 .../views/ManageReport2History.vue            |   16 +-
 .../02_organizational/views/Report.vue        |  228 ++-
 .../03_recruiting/components/Address.vue      |   18 +-
 .../03_recruiting/components/Career.vue       |   17 +-
 .../03_recruiting/components/Document.vue     |   19 +-
 .../03_recruiting/components/Education.vue    |   21 +-
 .../03_recruiting/components/ExamFinished.vue |   11 +-
 .../03_recruiting/components/Family.vue       |   11 +-
 .../03_recruiting/components/Information.vue  |   18 +-
 .../03_recruiting/components/Occupation.vue   |   11 +-
 .../03_recruiting/components/Profile.vue      |   27 +-
 .../components/TableCandidate.vue             |   25 +-
 .../03_recruiting/views/01_compete/Detail.vue |   30 +-
 .../views/01_compete/DetailEx.vue             |   20 +-
 .../03_recruiting/views/01_compete/Period.vue | 1242 ++++++++---------
 .../views/01_compete/PeriodAdd.vue            |   37 +-
 .../views/02_qualify/DisableDetail.vue        |   29 +-
 .../views/02_qualify/DisableDetailEx.vue      |   20 +-
 .../views/02_qualify/DisablePeriod.vue        | 1232 ++++++++--------
 .../views/02_qualify/DisablePeriodAdd.vue     |   39 +-
 .../views/02_qualify/ExamForm.vue             |   21 +-
 .../03_recruiting/views/02_qualify/Manage.vue |   13 +-
 .../views/02_qualify/Payment.vue              |   19 +-
 .../03_recruiting/views/02_qualify/Period.vue |   23 +-
 .../views/02_qualify/PeriodAdd.vue            |   43 +-
 .../views/02_qualify/manageDetail.vue         |   39 +-
 .../03_recruiting/views/03_editor/index.vue   |   35 +-
 .../04_registry/components/Assessment.vue     |   22 +-
 src/modules/04_registry/components/Coin.vue   |   22 +-
 .../04_registry/components/Discipline.vue     |   22 +-
 .../04_registry/components/Document.vue       |   14 +-
 .../04_registry/components/Education.vue      |   30 +-
 .../components/Information/Address.vue        |   31 +-
 .../components/Information/Certicate.vue      |   19 +-
 .../components/Information/Family.vue         |   23 +-
 .../components/Information/Government.vue     |   22 +-
 .../components/Information/Information.vue    |   39 +-
 .../components/Information/OldName.vue        |   25 +-
 .../04_registry/components/Insignia.vue       |   26 +-
 src/modules/04_registry/components/Leave.vue  |   25 +-
 src/modules/04_registry/components/Other.vue  |   21 +-
 .../04_registry/components/Profile.vue        |   46 +-
 src/modules/04_registry/components/Record.vue |   28 +-
 src/modules/04_registry/components/Salary.vue |   38 +-
 .../04_registry/components/SalaryEmployee.vue |   41 +-
 .../components/SalaryEmployeeTemp.vue         |   41 +-
 src/modules/04_registry/components/Talent.vue |   22 +-
 src/modules/04_registry/components/Train.vue  |   22 +-
 src/modules/04_registry/components/Work.vue   |   22 +-
 src/modules/04_registry/views/Main.vue        |   13 +-
 .../OrderPlacement/MainOrderPlacement.vue     |    4 +-
 .../OrderPlacement/addOrderPlacement.vue      |    7 +-
 .../components/RepatriationOrder/List.vue     |    4 +-
 .../components/DismissOrder/DismissOrder.vue  |    4 +-
 .../components/resign/ResignOrder.vue         |    4 +-
 .../08_registryEmployee/views/Assessment.vue  |   22 +-
 .../08_registryEmployee/views/Detail.vue      |   38 +-
 .../08_registryEmployee/views/Discipline.vue  |   22 +-
 .../08_registryEmployee/views/Document.vue    |   14 +-
 .../08_registryEmployee/views/EditDetail.vue  |   42 +-
 .../08_registryEmployee/views/Education.vue   |   30 +-
 .../views/Information/Address.vue             |   31 +-
 .../views/Information/Certicate.vue           |   22 +-
 .../views/Information/Family.vue              |   23 +-
 .../views/Information/Government.vue          |   22 +-
 .../views/Information/Information.vue         |   39 +-
 .../views/Information/OldName.vue             |   25 +-
 .../08_registryEmployee/views/Leave.vue       |   25 +-
 .../08_registryEmployee/views/Other.vue       |   21 +-
 .../08_registryEmployee/views/Record.vue      |   28 +-
 .../08_registryEmployee/views/Salary.vue      |   38 +-
 .../views/SalaryEmployee.vue                  |   41 +-
 .../08_registryEmployee/views/Talent.vue      |   22 +-
 .../08_registryEmployee/views/Train.vue       |   22 +-
 .../08_registryEmployee/views/Work.vue        |   22 +-
 .../08_registryEmployee/views/information.vue |   45 +-
 147 files changed, 3095 insertions(+), 3256 deletions(-)

diff --git a/src/components/information/Address.vue b/src/components/information/Address.vue
index 0e0af573c..525e7ad64 100644
--- a/src/components/information/Address.vue
+++ b/src/components/information/Address.vue
@@ -289,7 +289,7 @@
 <script setup lang="ts">
 import { ref, onMounted } from "vue";
 import { useCounterMixin } from "@/stores/mixin";
-import { useDataStore } from "@/stores/data";
+
 import { useQuasar } from "quasar";
 import http from "@/plugins/http";
 import config from "@/app.config";
@@ -321,10 +321,8 @@ const emit = defineEmits(["update:statusEdit"]);
 
 const route = useRoute();
 const $q = useQuasar();
-const dataStore = useDataStore();
-const { loaderPage } = dataStore;
 const mixin = useCounterMixin();
-const { date2Thai, success, messageError } = mixin;
+const { date2Thai, success, messageError, showLoader, hideLoader } = mixin;
 const edit = ref<boolean>(false);
 const addressData = ref<Address>(defaultAddress);
 const myform = ref<any>();
@@ -582,7 +580,7 @@ const filterSelector = (val: any, update: Function, refData: string) => {
  */
 const clickHistory = async () => {
   modalHistory.value = true;
-  loaderPage(true);
+  showLoader();
   await http
     .get(config.API.profileAdrsHisId(route.params.id.toString()))
     .then((res) => {
@@ -610,7 +608,7 @@ const clickHistory = async () => {
       messageError($q, e);
     })
     .finally(() => {
-      loaderPage(false);
+      hideLoader();
     });
 };
 
@@ -630,7 +628,7 @@ const getNewData = async () => {
 
 const fetchData = async () => {
   if (route.params.id) {
-    loaderPage(true);
+    showLoader();
     await http
       .get(config.API.profileAdrsId(route.params.id.toString()))
       .then((res) => {
@@ -649,7 +647,7 @@ const fetchData = async () => {
         messageError($q, e);
       })
       .finally(() => {
-        loaderPage(false);
+        hideLoader();
       });
   }
 };
@@ -682,7 +680,7 @@ const editData = async () => {
     createdAt: new Date(),
     createdFullName: "-",
   };
-  loaderPage(true);
+  showLoader();
   await http
     .put(config.API.profileAdrsId(route.params.id.toString()), body)
     .then((res) => {
@@ -699,7 +697,7 @@ const editData = async () => {
 };
 
 const addData = async () => {
-  //     loaderPage(true);
+  //     showLoader();
   //   await http
   //     .put(config.API.profileInforId(route.params.id.toString()), body)
   //     .then((res) => {
@@ -774,7 +772,7 @@ const selectSubDistrict = (e: string | null, name: string) => {
 };
 
 const fetchProvince = async () => {
-  loaderPage(true);
+  showLoader();
   await http
     .get(config.API.province)
     .then((res) => {
@@ -790,13 +788,13 @@ const fetchProvince = async () => {
       messageError($q, e);
     })
     .finally(() => {
-      loaderPage(false);
+      hideLoader();
     });
 };
 
 const fetchDistrict = async (id: string | null, position: string) => {
   if (id != null && id != "") {
-    loaderPage(true);
+    showLoader();
     await http
       .get(config.API.listDistrict(id))
       .then((res) => {
@@ -817,14 +815,14 @@ const fetchDistrict = async (id: string | null, position: string) => {
         messageError($q, e);
       })
       .finally(() => {
-        loaderPage(false);
+        hideLoader();
       });
   }
 };
 
 const fetchSubDistrict = async (id: string | null, position: string) => {
   if (id != null && id != "") {
-    loaderPage(true);
+    showLoader();
     await http
       .get(config.API.listSubDistrict(id))
       .then((res) => {
@@ -849,7 +847,7 @@ const fetchSubDistrict = async (id: string | null, position: string) => {
         messageError($q, e);
       })
       .finally(() => {
-        loaderPage(false);
+        hideLoader();
       });
   }
 };
diff --git a/src/components/information/Assessment.vue b/src/components/information/Assessment.vue
index 5d42ad985..981e8cc44 100644
--- a/src/components/information/Assessment.vue
+++ b/src/components/information/Assessment.vue
@@ -308,7 +308,7 @@ import { onMounted, ref, watch } from "vue";
 import { useRoute } from "vue-router";
 import { useCounterMixin } from "@/stores/mixin";
 import { useProfileDataStore } from "@/modules/04_registry/store";
-import { useDataStore } from "@/stores/data";
+
 import ProfileTable from "@/modules/04_registry/components/Table.vue";
 import DialogHeader from "@/modules/04_registry/components/DialogHeader.vue";
 import DialogFooter from "@/modules/04_registry/components/DialogFooter.vue";
@@ -338,10 +338,10 @@ const props = defineProps({
 const $q = useQuasar();
 const store = useProfileDataStore();
 const { profileData, changeProfileColumns } = store;
-const dataStore = useDataStore();
-const { loaderPage } = dataStore;
+
 const mixin = useCounterMixin();
-const { date2Thai, success, dateToISO, messageError } = mixin;
+const { date2Thai, success, dateToISO, messageError, showLoader, hideLoader } =
+  mixin;
 const route = useRoute();
 const id = ref<string>("");
 const name = ref<string>();
@@ -598,7 +598,7 @@ onMounted(async () => {
 
 const fetchData = async () => {
   if (profileId.value) {
-    loaderPage(true);
+    showLoader();
     await http
       .get(config.API.profileAssessmentId(profileId.value))
       .then((res) => {
@@ -624,7 +624,7 @@ const fetchData = async () => {
         messageError($q, e);
       })
       .finally(() => {
-        loaderPage(false);
+        hideLoader();
       });
   }
 };
@@ -717,7 +717,7 @@ const clickSave = async () => {
  */
 const saveData = async () => {
   if (profileId.value) {
-    loaderPage(true);
+    showLoader();
     await http
       .post(config.API.profileAssessmentId(profileId.value), {
         id: id.value,
@@ -747,7 +747,7 @@ const saveData = async () => {
  * บันทึกแก้ไขข้อมูล
  */
 const editData = async () => {
-  loaderPage(true);
+  showLoader();
   await http
     .put(config.API.profileAssessmentId(id.value), {
       id: id.value,
@@ -784,7 +784,7 @@ const clickDelete = async () => {
     persistent: true,
   })
     .onOk(async () => {
-      loaderPage(true);
+      showLoader();
       await http
         .delete(config.API.profileAssessmentId(id.value))
         .then((res) => {
@@ -901,7 +901,7 @@ const clickEditRow = () => {
 const clickHistory = async (row: RequestItemsObject) => {
   tittleHistory.value = "ประวัติแก้ไขผลการประเมินการปฏิบัติราชการ";
   modalHistory.value = true;
-  loaderPage(true);
+  showLoader();
   await http
     .get(config.API.profileAssessmentHisId(row.id))
     .then((res) => {
@@ -927,7 +927,7 @@ const clickHistory = async (row: RequestItemsObject) => {
       messageError($q, e);
     })
     .finally(() => {
-      loaderPage(false);
+      hideLoader();
     });
 };
 
diff --git a/src/components/information/Certicate.vue b/src/components/information/Certicate.vue
index fe17fc0f4..1de0eea25 100644
--- a/src/components/information/Certicate.vue
+++ b/src/components/information/Certicate.vue
@@ -261,7 +261,7 @@ import { onMounted, ref, watch } from "vue";
 import { useRoute } from "vue-router";
 import { useComponentProfileDataStore } from "@/components/information/store/store";
 import { useCounterMixin } from "@/stores/mixin";
-import { useDataStore } from "@/stores/data";
+
 import ProfileTable from "@/components/information/Table.vue";
 import DialogHeader from "@/components/information/DialogHeader.vue";
 import DialogFooter from "@/components/information/DialogFooter.vue";
@@ -290,10 +290,9 @@ const props = defineProps({
 const $q = useQuasar();
 const store = useComponentProfileDataStore();
 const { profileData, changeProfileColumns } = store;
-const dataStore = useDataStore();
-const { loaderPage } = dataStore;
 const mixin = useCounterMixin();
-const { date2Thai, success, dateToISO, messageError } = mixin;
+const { date2Thai, success, dateToISO, messageError, showLoader, hideLoader } =
+  mixin;
 const route = useRoute();
 const id = ref<string>("");
 const certificateNo = ref<string>();
@@ -487,7 +486,7 @@ onMounted(async () => {
 
 const fetchData = async () => {
   if (profileId.value) {
-    loaderPage(true);
+    showLoader();
     await http
       .get(config.API.profileCertId(profileId.value))
       .then((res) => {
@@ -510,7 +509,7 @@ const fetchData = async () => {
         messageError($q, e);
       })
       .finally(() => {
-        loaderPage(false);
+        hideLoader();
       });
   }
 };
@@ -599,7 +598,7 @@ const clickSave = async () => {
  * บันทึกเพิ่มข้อมูล
  */
 const saveData = async () => {
-  loaderPage(true);
+  showLoader();
   await http
     .post(config.API.profileCertId(profileId.value), {
       id: id.value,
@@ -625,7 +624,7 @@ const saveData = async () => {
  * บันทึกแก้ไขข้อมูล
  */
 const editData = async () => {
-  loaderPage(true);
+  showLoader();
   await http
     .put(config.API.profileCertId(id.value), {
       id: id.value,
@@ -659,7 +658,7 @@ const clickDelete = async () => {
     persistent: true,
   })
     .onOk(async () => {
-      loaderPage(true);
+      showLoader();
       await http
         .delete(config.API.profileCertId(id.value))
         .then((res) => {
@@ -773,7 +772,7 @@ const clickHistory = async (row: RequestItemsObject) => {
       ? "ประวัติแก้ไขใบอนุญาตของลูกจ้าง"
       : "ประวัติแก้ไขใบอนุญาตประกอบอาชีพ";
   modalHistory.value = true;
-  loaderPage(true);
+  showLoader();
   await http
     .get(config.API.profileCertHisId(row.id))
     .then((res) => {
@@ -796,7 +795,7 @@ const clickHistory = async (row: RequestItemsObject) => {
       messageError($q, e);
     })
     .finally(() => {
-      loaderPage(false);
+      hideLoader();
     });
 };
 
diff --git a/src/components/information/Coin.vue b/src/components/information/Coin.vue
index 509123a34..8e676419e 100644
--- a/src/components/information/Coin.vue
+++ b/src/components/information/Coin.vue
@@ -264,7 +264,7 @@ import { onMounted, ref, watch } from "vue";
 import { useRoute } from "vue-router";
 import { useCounterMixin } from "@/stores/mixin";
 import { useComponentProfileDataStore } from "@/components/information/store/store";
-import { useDataStore } from "@/stores/data";
+
 import ProfileTable from "@/components/information/Table.vue";
 import DialogHeader from "@/components/information/DialogHeader.vue";
 import DialogFooter from "@/components/information/DialogFooter.vue";
@@ -294,10 +294,10 @@ const props = defineProps({
 const $q = useQuasar();
 const store = useComponentProfileDataStore();
 const { profileData, changeProfileColumns } = store;
-const dataStore = useDataStore();
-const { loaderPage } = dataStore;
+
 const mixin = useCounterMixin();
-const { date2Thai, success, dateToISO, messageError } = mixin;
+const { date2Thai, success, dateToISO, messageError, showLoader, hideLoader } =
+  mixin;
 const route = useRoute();
 const id = ref<string>("");
 const issuer = ref<string>();
@@ -490,7 +490,7 @@ onMounted(async () => {
 
 const fetchData = async () => {
   if (profileId.value) {
-    loaderPage(true);
+    showLoader();
     await http
       .get(config.API.profileHonorId(profileId.value))
       .then((res) => {
@@ -514,7 +514,7 @@ const fetchData = async () => {
         messageError($q, e);
       })
       .finally(() => {
-        loaderPage(false);
+        hideLoader();
       });
   }
 };
@@ -604,7 +604,7 @@ const clickSave = async () => {
  */
 const saveData = async () => {
   if (profileId.value) {
-    loaderPage(true);
+    showLoader();
     await http
       .post(config.API.profileHonorId(profileId.value), {
         id: id.value,
@@ -632,7 +632,7 @@ const saveData = async () => {
  * บันทึกแก้ไขข้อมูล
  */
 const editData = async () => {
-  loaderPage(true);
+  showLoader();
   await http
     .put(config.API.profileHonorId(id.value), {
       id: id.value,
@@ -667,7 +667,7 @@ const clickDelete = async () => {
     persistent: true,
   })
     .onOk(async () => {
-      loaderPage(true);
+      showLoader();
       await http
         .delete(config.API.profileHonorId(id.value))
         .then((res) => {
@@ -781,7 +781,7 @@ const clickHistory = async (row: RequestItemsObject) => {
       ? "ประวัติแก้ไขประกาศลูกจ้างดีเด่น"
       : "ประวัติแก้ไขประกาศเกียรติคุณ";
   modalHistory.value = true;
-  loaderPage(true);
+  showLoader();
   await http
     .get(config.API.profileHonorHisId(row.id))
     .then((res) => {
@@ -805,7 +805,7 @@ const clickHistory = async (row: RequestItemsObject) => {
       messageError($q, e);
     })
     .finally(() => {
-      loaderPage(false);
+      hideLoader();
     });
 };
 
diff --git a/src/components/information/Discipline.vue b/src/components/information/Discipline.vue
index 01bbddae1..493163918 100644
--- a/src/components/information/Discipline.vue
+++ b/src/components/information/Discipline.vue
@@ -278,7 +278,7 @@ import { onMounted, ref, watch } from "vue";
 import { useRoute } from "vue-router";
 import { useCounterMixin } from "@/stores/mixin";
 import { useComponentProfileDataStore } from "@/components/information/store/store";
-import { useDataStore } from "@/stores/data";
+
 import ProfileTable from "@/components/information/Table.vue";
 import DialogHeader from "@/components/information/DialogHeader.vue";
 import DialogFooter from "@/components/information/DialogFooter.vue";
@@ -307,10 +307,10 @@ const props = defineProps({
 const $q = useQuasar();
 const store = useComponentProfileDataStore();
 const { profileData, changeProfileColumns } = store;
-const dataStore = useDataStore();
-const { loaderPage } = dataStore;
+
 const mixin = useCounterMixin();
-const { date2Thai, success, dateToISO, messageError } = mixin;
+const { date2Thai, success, dateToISO, messageError, showLoader, hideLoader } =
+  mixin;
 const route = useRoute();
 const id = ref<string>("");
 const level = ref<string>();
@@ -590,7 +590,7 @@ const filterSelector = (val: string, update: Function, refData: string) => {
 
 const fetchData = async () => {
   if (profileId.value) {
-    loaderPage(true);
+    showLoader();
     await http
       .get(config.API.profileDisId(profileId.value))
       .then((res) => {
@@ -615,7 +615,7 @@ const fetchData = async () => {
         messageError($q, e);
       })
       .finally(() => {
-        loaderPage(false);
+        hideLoader();
       });
   }
 };
@@ -706,7 +706,7 @@ const clickSave = async () => {
  */
 const saveData = async () => {
   if (profileId.value) {
-    loaderPage(true);
+    showLoader();
     await http
       .post(config.API.profileDisId(profileId.value), {
         id: id.value,
@@ -735,7 +735,7 @@ const saveData = async () => {
  * บันทึกแก้ไขข้อมูล
  */
 const editData = async () => {
-  loaderPage(true);
+  showLoader();
   await http
     .put(config.API.profileDisId(id.value), {
       id: id.value,
@@ -771,7 +771,7 @@ const clickDelete = async () => {
     persistent: true,
   })
     .onOk(async () => {
-      loaderPage(true);
+      showLoader();
       await http
         .delete(config.API.profileDisId(id.value))
         .then((res) => {
@@ -883,7 +883,7 @@ const clickEditRow = () => {
  */
 const clickHistory = async (row: RequestItemsObject) => {
   modalHistory.value = true;
-  loaderPage(true);
+  showLoader();
   await http
     .get(config.API.profileDisHisId(row.id))
     .then((res) => {
@@ -908,7 +908,7 @@ const clickHistory = async (row: RequestItemsObject) => {
       messageError($q, e);
     })
     .finally(() => {
-      loaderPage(false);
+      hideLoader();
     });
 };
 
diff --git a/src/components/information/Document.vue b/src/components/information/Document.vue
index a73fe0fb3..0484fbf68 100644
--- a/src/components/information/Document.vue
+++ b/src/components/information/Document.vue
@@ -138,7 +138,7 @@ import { onMounted, computed, ref, watch } from "vue";
 import { useQuasar, QForm } from "quasar";
 import { useCounterMixin } from "@/stores/mixin";
 import { useRoute } from "vue-router";
-import { useDataStore } from "@/stores/data";
+
 import HeaderTop from "@/components/information/top.vue";
 import http from "@/plugins/http";
 import config from "@/app.config";
@@ -156,12 +156,10 @@ const props = defineProps({
 });
 const emit = defineEmits(["update:statusEdit"]);
 
-const dataStore = useDataStore();
-const { loaderPage } = dataStore;
 const $q = useQuasar(); // show dialog
 const mixin = useCounterMixin();
 const route = useRoute();
-const { success, messageError } = mixin;
+const { success, messageError, showLoader, hideLoader } = mixin;
 const profileId = ref<string>(
   route.params.id ? route.params.id.toString() : ""
 );
@@ -177,7 +175,7 @@ onMounted(async () => {
 
 const getData = async () => {
   if (profileId.value) {
-    loaderPage(true);
+    showLoader();
     await http
       .get(config.API.profilePaperId(profileId.value))
       .then((res) => {
@@ -188,13 +186,13 @@ const getData = async () => {
         messageError($q, e);
       })
       .finally(() => {
-        loaderPage(false);
+        hideLoader();
       });
   }
 };
 
 const deleteData = async (id: string) => {
-  loaderPage(true);
+  showLoader();
   await http
     .delete(config.API.profilePaperId(id))
     .then((res) => {
@@ -219,7 +217,7 @@ const uploadData = async () => {
       formData.append("avatar", newFile);
       formData.append("moss", "newFile");
       console.log(formData);
-      loaderPage(true);
+      showLoader();
       await http
         .post(config.API.profilePaperId(profileId.value), formData)
         .then((res) => {
diff --git a/src/components/information/Education.vue b/src/components/information/Education.vue
index 5572bc881..811f60920 100644
--- a/src/components/information/Education.vue
+++ b/src/components/information/Education.vue
@@ -582,7 +582,7 @@ import { onMounted, ref, watch } from "vue";
 import { useRoute } from "vue-router";
 import { useComponentProfileDataStore } from "@/components/information/store/store";
 import { useCounterMixin } from "@/stores/mixin";
-import { useDataStore } from "@/stores/data";
+
 import ProfileTable from "@/components/information/Table.vue";
 import DialogHeader from "@/components/information/DialogHeader.vue";
 import DialogFooter from "@/components/information/DialogFooter.vue";
@@ -609,10 +609,9 @@ const props = defineProps({
 const $q = useQuasar();
 const store = useComponentProfileDataStore();
 const { profileData, changeProfileColumns } = store;
-const dataStore = useDataStore();
-const { loaderPage } = dataStore;
 const mixin = useCounterMixin();
-const { success, dateToISO, date2Thai, messageError } = mixin;
+const { success, dateToISO, date2Thai, messageError, showLoader, hideLoader } =
+  mixin;
 const route = useRoute();
 const id = ref<string>("");
 const levelId = ref<string>();
@@ -1047,7 +1046,7 @@ onMounted(async () => {
 });
 
 const fetchLevel = async () => {
-  loaderPage(true);
+  showLoader();
   await http
     .get(config.API.educationLevel)
     .then((res) => {
@@ -1063,12 +1062,12 @@ const fetchLevel = async () => {
       messageError($q, e);
     })
     .finally(() => {
-      loaderPage(false);
+      hideLoader();
     });
 };
 
 const fetchPositionPath = async () => {
-  loaderPage(true);
+  showLoader();
   await http
     .get(config.API.positionPath)
     .then((res) => {
@@ -1085,7 +1084,7 @@ const fetchPositionPath = async () => {
       messageError($q, e);
     })
     .finally(() => {
-      loaderPage(false);
+      hideLoader();
     });
 };
 
@@ -1113,7 +1112,7 @@ const filterSelector = (val: any, update: Function, refData: string) => {
 
 const fetchData = async () => {
   if (profileId.value) {
-    loaderPage(true);
+    showLoader();
     await http
       .get(config.API.profileEduId(profileId.value))
       .then((res) => {
@@ -1150,7 +1149,7 @@ const fetchData = async () => {
         messageError($q, e);
       })
       .finally(() => {
-        loaderPage(false);
+        hideLoader();
       });
   }
 };
@@ -1258,7 +1257,7 @@ const saveData = async () => {
   //     (r: any) => r.id == isEducation.value
   //   );
   if (profileId.value) {
-    loaderPage(true);
+    showLoader();
     await http
       .post(config.API.profileEduId(profileId.value), {
         id: id.value,
@@ -1308,7 +1307,7 @@ const editData = async () => {
   //   const filterPositionPath = OpsFilter.value.positionPathOptions.filter(
   //     (r: any) => r.id == isEducation.value
   //   );
-  loaderPage(true);
+  showLoader();
   await http
     .put(config.API.profileEduId(id.value), {
       id: id.value,
@@ -1359,7 +1358,7 @@ const clickDelete = async () => {
     persistent: true,
   })
     .onOk(async () => {
-      loaderPage(true);
+      showLoader();
       await http
         .delete(config.API.profileEduId(id.value))
         .then((res) => {
@@ -1493,7 +1492,7 @@ const clickEditRow = () => {
  */
 const clickHistory = async (row: RequestItemsObject) => {
   modalHistory.value = true;
-  loaderPage(true);
+  showLoader();
   await http
     .get(config.API.profileEduHisId(row.id))
     .then((res) => {
@@ -1530,7 +1529,7 @@ const clickHistory = async (row: RequestItemsObject) => {
       messageError($q, e);
     })
     .finally(() => {
-      loaderPage(false);
+      hideLoader();
     });
 };
 
diff --git a/src/components/information/Family.vue b/src/components/information/Family.vue
index f6b3aab4d..e2e89fc9a 100644
--- a/src/components/information/Family.vue
+++ b/src/components/information/Family.vue
@@ -1089,7 +1089,6 @@
 import { ref, onMounted } from "vue";
 import type { QForm } from "quasar";
 import { useCounterMixin } from "@/stores/mixin";
-import { useDataStore } from "@/stores/data";
 import { useQuasar } from "quasar";
 import type {
   Family,
@@ -1124,10 +1123,8 @@ const emit = defineEmits(["update:statusEdit"]);
 
 const route = useRoute();
 const $q = useQuasar();
-const dataStore = useDataStore();
-const { loaderPage } = dataStore;
 const mixin = useCounterMixin();
-const { date2Thai, success, messageError } = mixin;
+const { date2Thai, success, messageError, showLoader, hideLoader } = mixin;
 const edit = ref<boolean>(false);
 const fix = ref<boolean>(true);
 const myform = ref<QForm | null>(null);
@@ -1233,7 +1230,7 @@ const refreshData = async () => {
 };
 
 const fetchPrefix = async () => {
-  loaderPage(true);
+  showLoader();
   await http
     .get(config.API.prefix)
     .then((res) => {
@@ -1249,7 +1246,7 @@ const fetchPrefix = async () => {
       messageError($q, e);
     })
     .finally(() => {
-      loaderPage(false);
+      hideLoader();
     });
 };
 
@@ -1279,7 +1276,7 @@ const deleteChildren = (items: childrenFamily) => {
 
 const fetchHistory = async () => {
   familyDataHistory.value = [];
-  loaderPage(true);
+  showLoader();
   await http
     .get(config.API.profileFamiHisId(route.params.id.toString()))
     .then((res) => {
@@ -1317,7 +1314,7 @@ const fetchHistory = async () => {
       messageError($q, e);
     })
     .finally(async () => {
-      loaderPage(false);
+      hideLoader();
       if (familyDataHistory.value.length == 0) {
         // modalError(
         //   $q,
@@ -1340,7 +1337,7 @@ const fetchHistory = async () => {
 
 const fetchData = async () => {
   if (route.params.id) {
-    loaderPage(true);
+    showLoader();
     await http
       .get(config.API.profileFamiId(route.params.id.toString()))
       .then((res) => {
@@ -1393,13 +1390,13 @@ const fetchData = async () => {
         messageError($q, e);
       })
       .finally(async () => {
-        loaderPage(false);
+        hideLoader();
       });
   }
 };
 
 const editData = async () => {
-  loaderPage(true);
+  showLoader();
   const body: ResponseObject = {
     couple: familyData.value.same == "1",
     couplePrefixId: familyData.value.prefixIdC,
@@ -1441,7 +1438,7 @@ const editData = async () => {
 };
 
 const addData = async () => {
-  //     loaderPage(true);
+  //     showLoader();
   //   await http
   //     .put(config.API.profileInforId(route.params.id.toString()), body)
   //     .then((res) => {
diff --git a/src/components/information/Government.vue b/src/components/information/Government.vue
index fc7e75809..30e7a13be 100644
--- a/src/components/information/Government.vue
+++ b/src/components/information/Government.vue
@@ -330,7 +330,7 @@
 <script setup lang="ts">
 import { onMounted, ref, watch } from "vue";
 import { useCounterMixin } from "@/stores/mixin";
-import { useDataStore } from "@/stores/data";
+
 import { useQuasar } from "quasar";
 import type { Goverment } from "@/components/information/interface/profileType";
 import { defaultGoverment } from "@/components/information/interface/profileType";
@@ -363,10 +363,10 @@ const emit = defineEmits(["update:statusEdit"]);
 
 const route = useRoute();
 const $q = useQuasar();
-const dataStore = useDataStore();
-const { loaderPage } = dataStore;
+
 const mixin = useCounterMixin();
-const { date2Thai, success, dateToISO, messageError } = mixin;
+const { date2Thai, success, dateToISO, messageError, showLoader, hideLoader } =
+  mixin;
 const profileStore = useComponentProfileDataStore();
 const { birthDate, retireText } = storeToRefs(profileStore);
 const edit = ref<boolean>(false);
@@ -611,7 +611,7 @@ watch(retireText, async () => {
 });
 
 const fetchData = async () => {
-  loaderPage(true);
+  showLoader();
   await http
     .get(config.API.profileGovId(route.params.id.toString()))
     .then((res) => {
@@ -637,7 +637,7 @@ const fetchData = async () => {
       messageError($q, e);
     })
     .finally(async () => {
-      loaderPage(false);
+      hideLoader();
     });
 };
 
@@ -647,7 +647,7 @@ const refreshData = async () => {
 };
 
 const editData = async () => {
-  loaderPage(true);
+  showLoader();
   await http
     .put(config.API.profileGovId(route.params.id.toString()), {
       dateAppoint: dateToISO(govermentData.value.containDate),
@@ -682,7 +682,7 @@ const handleDate = async (modelData: Date) => {
 };
 
 const fetchCalAgeGov = async (date: Date) => {
-  loaderPage(true);
+  showLoader();
   const body = {
     dateAppoint: date,
   };
@@ -696,7 +696,7 @@ const fetchCalAgeGov = async (date: Date) => {
       messageError($q, e);
     })
     .finally(async () => {
-      loaderPage(false);
+      hideLoader();
     });
 };
 
@@ -705,7 +705,7 @@ const fetchCalAgeGov = async (date: Date) => {
  */
 const clickHistory = async () => {
   modalHistory.value = true;
-  loaderPage(true);
+  showLoader();
   await http
     .get(config.API.profileGovHisId(route.params.id.toString()))
     .then((res) => {
@@ -738,7 +738,7 @@ const clickHistory = async () => {
       messageError($q, e);
     })
     .finally(() => {
-      loaderPage(false);
+      hideLoader();
     });
 };
 
diff --git a/src/components/information/Information.vue b/src/components/information/Information.vue
index ae55733a1..a8a17d386 100644
--- a/src/components/information/Information.vue
+++ b/src/components/information/Information.vue
@@ -409,7 +409,7 @@
 <script setup lang="ts">
 import { ref, onMounted } from "vue";
 import { useCounterMixin } from "@/stores/mixin";
-import { useDataStore } from "@/stores/data";
+
 import { useQuasar } from "quasar";
 import type {
   Information,
@@ -447,9 +447,16 @@ const emit = defineEmits(["update:statusEdit"]);
 const route = useRoute();
 const $q = useQuasar();
 const mixin = useCounterMixin();
-const { date2Thai, success, dateToISO, messageError, dialogMessage } = mixin;
-const dataStore = useDataStore();
-const { loaderPage } = dataStore;
+const {
+  date2Thai,
+  success,
+  dateToISO,
+  messageError,
+  dialogMessage,
+  showLoader,
+  hideLoader,
+} = mixin;
+
 const profileStore = useComponentProfileDataStore();
 const { changeRetireText, changeBirth } = profileStore;
 const edit = ref<boolean>(false);
@@ -736,7 +743,7 @@ const onCancel = async () => {
  * get รายการ ข้อมูลเกี่ยวกับบุคคล
  */
 const fetchPerson = async () => {
-  loaderPage(true);
+  showLoader();
   await http
     .get(config.API.person)
     .then((res) => {
@@ -793,7 +800,7 @@ const fetchPerson = async () => {
     })
     .catch((e: any) => {})
     .finally(() => {
-      loaderPage(false);
+      hideLoader();
     });
 };
 
@@ -819,7 +826,7 @@ const changeCardID = (value: string | number | null) => {
 };
 
 const checkCitizen = async (id: string) => {
-  loaderPage(true);
+  showLoader();
   await http
     .get(config.API.profileCitizenId(id))
     .then((res) => {
@@ -844,7 +851,7 @@ const checkCitizen = async (id: string) => {
       messageError($q, e);
     })
     .finally(() => {
-      loaderPage(false);
+      hideLoader();
     });
 };
 
@@ -853,7 +860,7 @@ const checkCitizen = async (id: string) => {
  */
 const clickHistory = async () => {
   modalHistory.value = true;
-  loaderPage(true);
+  showLoader();
   await http
     .get(config.API.profileInforHisId(route.params.id.toString()))
     .then((res) => {
@@ -894,7 +901,7 @@ const clickHistory = async () => {
       messageError($q, e);
     })
     .finally(() => {
-      loaderPage(false);
+      hideLoader();
     });
 };
 
@@ -970,7 +977,7 @@ const calRetire = async (birth: Date) => {
     birthDate: dateToISO(birth),
   };
   if (dateToISO(dateBefore.value) != dateToISO(birth)) {
-    loaderPage(true);
+    showLoader();
     await http
       .post(config.API.profileCalRetire, body)
       .then((res: any) => {
@@ -986,14 +993,14 @@ const calRetire = async (birth: Date) => {
         changeRetireText(date2Thai(retire));
       })
       .finally(() => {
-        loaderPage(false);
+        hideLoader();
       });
   }
 };
 
 const fetchData = async () => {
   if (route.params.id) {
-    loaderPage(true);
+    showLoader();
     await http
       .get(config.API.profileInforId(route.params.id.toString()))
       .then(async (res: any) => {
@@ -1031,7 +1038,7 @@ const fetchData = async () => {
         messageError($q, e);
       })
       .finally(async () => {
-        //   loaderPage(false);
+        //   hideLoader();
         await props.fetchDataProfile();
       });
   }
@@ -1058,7 +1065,7 @@ const editData = async () => {
     profileType: informaData.value.profileType,
     createdFullName: "-",
   };
-  loaderPage(true);
+  showLoader();
   await http
     .put(config.API.profileInforId(route.params.id.toString()), body)
     .then((res) => {
@@ -1076,7 +1083,7 @@ const editData = async () => {
 };
 
 const addData = async () => {
-  //     loaderPage(true);
+  //     showLoader();
   //   await http
   //     .put(config.API.profileInforId(route.params.id.toString()), body)
   //     .then((res) => {
diff --git a/src/components/information/Insignia.vue b/src/components/information/Insignia.vue
index 25d743441..8591e027f 100644
--- a/src/components/information/Insignia.vue
+++ b/src/components/information/Insignia.vue
@@ -457,7 +457,7 @@ import { onMounted, ref, watch } from "vue";
 import { useRoute } from "vue-router";
 import { useComponentProfileDataStore } from "@/components/information/store/store";
 import { useCounterMixin } from "@/stores/mixin";
-import { useDataStore } from "@/stores/data";
+
 import ProfileTable from "@/components/information/Table.vue";
 import DialogHeader from "@/components/information/DialogHeader.vue";
 import DialogFooter from "@/components/information/DialogFooter.vue";
@@ -488,10 +488,9 @@ const props = defineProps({
 const $q = useQuasar();
 const store = useComponentProfileDataStore();
 const { profileData, changeProfileColumns } = store;
-const dataStore = useDataStore();
-const { loaderPage } = dataStore;
 const mixin = useCounterMixin();
-const { date2Thai, success, dateToISO, messageError } = mixin;
+const { date2Thai, success, dateToISO, messageError, showLoader, hideLoader } =
+  mixin;
 const route = useRoute();
 const id = ref<string>("");
 const insigniaId = ref<string>("");
@@ -913,7 +912,7 @@ const filterSelector = (val: any, update: Function, refData: string) => {
 };
 
 const fetchInsignia = async () => {
-  loaderPage(true);
+  showLoader();
   await http
     .get(config.API.insignia)
     .then((res) => {
@@ -934,13 +933,13 @@ const fetchInsignia = async () => {
       messageError($q, e);
     })
     .finally(() => {
-      loaderPage(false);
+      hideLoader();
     });
 };
 
 const fetchData = async () => {
   if (profileId.value) {
-    loaderPage(true);
+    showLoader();
     await http
       .get(config.API.profileInsignId(profileId.value))
       .then((res) => {
@@ -973,7 +972,7 @@ const fetchData = async () => {
         messageError($q, e);
       })
       .finally(() => {
-        loaderPage(false);
+        hideLoader();
       });
   }
 };
@@ -1071,7 +1070,7 @@ const clickSave = async () => {
  */
 const saveData = async () => {
   if (profileId.value) {
-    loaderPage(true);
+    showLoader();
     await http
       .post(config.API.profileInsignId(profileId.value), {
         id: id.value,
@@ -1107,7 +1106,7 @@ const saveData = async () => {
  * บันทึกแก้ไขข้อมูล
  */
 const editData = async () => {
-  loaderPage(true);
+  showLoader();
   await http
     .put(config.API.profileInsignId(id.value), {
       id: id.value,
@@ -1150,7 +1149,7 @@ const clickDelete = async () => {
     persistent: true,
   })
     .onOk(async () => {
-      loaderPage(true);
+      showLoader();
       await http
         .delete(config.API.profileInsignId(id.value))
         .then((res) => {
@@ -1276,7 +1275,7 @@ const clickEditRow = () => {
  */
 const clickHistory = async (row: RequestItemsObject) => {
   modalHistory.value = true;
-  loaderPage(true);
+  showLoader();
   await http
     .get(config.API.profileInsignHisId(row.id))
     .then((res) => {
@@ -1309,7 +1308,7 @@ const clickHistory = async (row: RequestItemsObject) => {
       messageError($q, e);
     })
     .finally(() => {
-      loaderPage(false);
+      hideLoader();
     });
 };
 
diff --git a/src/components/information/Leave.vue b/src/components/information/Leave.vue
index b2b5d0b39..13588c243 100644
--- a/src/components/information/Leave.vue
+++ b/src/components/information/Leave.vue
@@ -347,7 +347,7 @@ import { onMounted, ref, watch } from "vue";
 import { useRoute } from "vue-router";
 import { useCounterMixin } from "@/stores/mixin";
 import { useComponentProfileDataStore } from "@/components/information/store/store";
-import { useDataStore } from "@/stores/data";
+
 import ProfileTable from "@/components/information/Table.vue";
 import DialogHeader from "@/components/information/DialogHeader.vue";
 import DialogFooter from "@/components/information/DialogFooter.vue";
@@ -380,8 +380,6 @@ const props = defineProps({
 const $q = useQuasar();
 const store = useComponentProfileDataStore();
 const { profileData, changeProfileColumns } = store;
-const dataStore = useDataStore();
-const { loaderPage } = dataStore;
 const mixin = useCounterMixin();
 const {
   date2Thai,
@@ -390,6 +388,8 @@ const {
   statusLeave,
   dialogMessage,
   dateToISO,
+  showLoader,
+  hideLoader,
 } = mixin;
 const route = useRoute();
 
@@ -718,7 +718,7 @@ onMounted(async () => {
 const fetchData = async () => {
   rows.value = [];
   if (profileId.value) {
-    loaderPage(true);
+    showLoader();
     await http
       .get(config.API.profileLeaveId(profileId.value))
       .then((res) => {
@@ -743,7 +743,7 @@ const fetchData = async () => {
         messageError($q, e);
       })
       .finally(() => {
-        loaderPage(false);
+        hideLoader();
       });
   }
 };
@@ -773,7 +773,7 @@ const filterSelector = (val: any, update: Function, filtername: string) => {
 
 const clickHistory = async (row: RequestItemsObject) => {
   modalHistory.value = true;
-  loaderPage(true);
+  showLoader();
   await http
     .get(config.API.profileLeaveHisId(row.id))
     .then((res) => {
@@ -798,7 +798,7 @@ const clickHistory = async (row: RequestItemsObject) => {
       messageError($q, e);
     })
     .finally(() => {
-      loaderPage(false);
+      hideLoader();
     });
 };
 
@@ -969,7 +969,7 @@ const saveData = async () => {
   const sum = Number(numLeave.value) + Number(numUsedLeave.value);
 
   if (profileId.value) {
-    loaderPage(true);
+    showLoader();
     await http
       .post(config.API.profileLeaveId(profileId.value), {
         dateStartLeave: dateToISO(dateRange.value[0]),
@@ -1000,7 +1000,7 @@ const saveData = async () => {
 const editData = async () => {
   const sum = Number(numLeave.value) + Number(numUsedLeave.value);
 
-  loaderPage(true);
+  showLoader();
   await http
     .put(config.API.profileLeaveId(id.value), {
       dateStartLeave: dateToISO(dateRange.value[0]),
@@ -1025,7 +1025,7 @@ const editData = async () => {
 };
 
 const deleteData = async () => {
-  loaderPage(true);
+  showLoader();
   await http
     .delete(config.API.profileLeaveId(id.value))
     .then((res) => {
@@ -1192,7 +1192,7 @@ const addData = async () => {
 const clickTotal = async () => {
   rowsTotal.value = [];
   if (profileId.value) {
-    loaderPage(true);
+    showLoader();
     await http
       .get(config.API.profileLeaveTotalId(profileId.value))
       .then((res) => {
@@ -1211,7 +1211,7 @@ const clickTotal = async () => {
         messageError($q, e);
       })
       .finally(() => {
-        loaderPage(false);
+        hideLoader();
       });
   }
 };
diff --git a/src/components/information/OldName.vue b/src/components/information/OldName.vue
index 54ee056a7..98021b07e 100644
--- a/src/components/information/OldName.vue
+++ b/src/components/information/OldName.vue
@@ -296,7 +296,7 @@ import { onMounted, ref, watch } from "vue";
 import { useRoute } from "vue-router";
 import { useComponentProfileDataStore } from "@/components/information/store/store";
 import { useCounterMixin } from "@/stores/mixin";
-import { useDataStore } from "@/stores/data";
+
 import ProfileTable from "@/components/information/Table.vue";
 import DialogHeader from "@/components/information/DialogHeader.vue";
 import DialogFooter from "@/components/information/DialogFooter.vue";
@@ -341,8 +341,6 @@ const props = defineProps({
 const $q = useQuasar();
 const store = useComponentProfileDataStore();
 const { profileData, changeProfileColumns } = store;
-const dataStore = useDataStore();
-const { loaderPage } = dataStore;
 const mixin = useCounterMixin();
 const {
   date2Thai,
@@ -351,6 +349,8 @@ const {
   messageError,
   typeChangeName,
   dialogMessage,
+  showLoader,
+  hideLoader,
 } = mixin;
 const route = useRoute();
 const id = ref<string>("");
@@ -550,7 +550,7 @@ onMounted(async () => {
 });
 
 const fetchData = async () => {
-  loaderPage(true);
+  showLoader();
   await http
     .get(config.API.profileChangeNameId(profileId.value))
     .then((res) => {
@@ -574,7 +574,7 @@ const fetchData = async () => {
       messageError($q, e);
     })
     .finally(() => {
-      loaderPage(false);
+      hideLoader();
     });
 };
 
@@ -582,7 +582,7 @@ const fetchData = async () => {
  * get รายการ ข้อมูลเกี่ยวกับบุคคล
  */
 const fetchPerson = async () => {
-  loaderPage(true);
+  showLoader();
   await http
     .get(config.API.person)
     .then((res) => {
@@ -599,7 +599,7 @@ const fetchPerson = async () => {
     })
     .catch((e: any) => {})
     .finally(() => {
-      loaderPage(false);
+      hideLoader();
     });
 };
 
@@ -701,7 +701,7 @@ const saveData = async () => {
     if (lastName.value != undefined)
       formData.append("lastName", lastName.value);
     if (status.value != undefined) formData.append("status", status.value);
-    loaderPage(true);
+    showLoader();
     await http
       .post(config.API.profileChangeNameId(profileId.value), formData)
       .then((res) => {
@@ -747,7 +747,7 @@ const editData = async () => {
     formData.append("firstName", firstName.value);
   if (lastName.value != undefined) formData.append("lastName", lastName.value);
   if (status.value != undefined) formData.append("status", status.value);
-  loaderPage(true);
+  showLoader();
   await http
     .put(config.API.profileChangeNameId(id.value), formData)
     .then((res) => {
@@ -775,7 +775,7 @@ const clickDelete = async () => {
     persistent: true,
   })
     .onOk(async () => {
-      loaderPage(true);
+      showLoader();
       await http
         .delete(config.API.profileChangeNameId(id.value))
         .then((res) => {
@@ -885,7 +885,7 @@ const clickEditRow = () => {
  */
 const clickHistory = async (row: RequestItemsObject) => {
   modalHistory.value = true;
-  loaderPage(true);
+  showLoader();
   await http
     .get(config.API.profileChangeNameHisId(row.id))
     .then((res) => {
@@ -909,7 +909,7 @@ const clickHistory = async (row: RequestItemsObject) => {
       messageError($q, e);
     })
     .finally(() => {
-      loaderPage(false);
+      hideLoader();
     });
 };
 
diff --git a/src/components/information/Other.vue b/src/components/information/Other.vue
index da69c2966..6a360745d 100644
--- a/src/components/information/Other.vue
+++ b/src/components/information/Other.vue
@@ -166,7 +166,7 @@ import { onMounted, ref, watch } from "vue";
 import { useRoute } from "vue-router";
 import { useComponentProfileDataStore } from "@/components/information/store/store";
 import { useCounterMixin } from "@/stores/mixin";
-import { useDataStore } from "@/stores/data";
+
 import ProfileTable from "@/components/information/Table.vue";
 import DialogHeader from "@/components/information/DialogHeader.vue";
 import DialogFooter from "@/components/information/DialogFooter.vue";
@@ -191,10 +191,9 @@ const props = defineProps({
 const $q = useQuasar();
 const store = useComponentProfileDataStore();
 const { profileData, changeProfileColumns } = store;
-const dataStore = useDataStore();
-const { loaderPage } = dataStore;
+
 const mixin = useCounterMixin();
-const { date2Thai, success, messageError } = mixin;
+const { date2Thai, success, messageError, showLoader, hideLoader } = mixin;
 const route = useRoute();
 const id = ref<string>("");
 const date = ref<Date>(new Date());
@@ -305,7 +304,7 @@ onMounted(async () => {
 
 const fetchData = async () => {
   if (profileId.value) {
-    loaderPage(true);
+    showLoader();
     await http
       .get(config.API.profileOtherId(profileId.value))
       .then((res) => {
@@ -325,7 +324,7 @@ const fetchData = async () => {
         messageError($q, e);
       })
       .finally(() => {
-        loaderPage(false);
+        hideLoader();
       });
   }
 };
@@ -412,7 +411,7 @@ const clickSave = async () => {
  */
 const saveData = async () => {
   if (profileId.value) {
-    loaderPage(true);
+    showLoader();
     await http
       .post(config.API.profileOtherId(profileId.value), {
         id: id.value,
@@ -436,7 +435,7 @@ const saveData = async () => {
  * บันทึกแก้ไขข้อมูล
  */
 const editData = async () => {
-  loaderPage(true);
+  showLoader();
   await http
     .put(config.API.profileOtherId(id.value), {
       id: id.value,
@@ -467,7 +466,7 @@ const clickDelete = async () => {
     persistent: true,
   })
     .onOk(async () => {
-      loaderPage(true);
+      showLoader();
       await http
         .delete(config.API.profileOtherId(id.value))
         .then((res) => {
@@ -571,7 +570,7 @@ const clickEditRow = () => {
  */
 const clickHistory = async (row: RequestItemsObject) => {
   modalHistory.value = true;
-  loaderPage(true);
+  showLoader();
   await http
     .get(config.API.profileOtherHisId(row.id))
     .then((res) => {
@@ -591,7 +590,7 @@ const clickHistory = async (row: RequestItemsObject) => {
       messageError($q, e);
     })
     .finally(() => {
-      loaderPage(false);
+      hideLoader();
     });
 };
 
diff --git a/src/components/information/Record.vue b/src/components/information/Record.vue
index 05d84fd76..e6a1f5115 100644
--- a/src/components/information/Record.vue
+++ b/src/components/information/Record.vue
@@ -258,7 +258,7 @@ import { onMounted, ref, watch } from "vue";
 import { useRoute } from "vue-router";
 import { useComponentProfileDataStore } from "@/components/information/store/store";
 import { useCounterMixin } from "@/stores/mixin";
-import { useDataStore } from "@/stores/data";
+
 import ProfileTable from "@/components/information/Table.vue";
 import DialogHeader from "@/components/information/DialogHeader.vue";
 import DialogFooter from "@/components/information/DialogFooter.vue";
@@ -283,10 +283,9 @@ const props = defineProps({
 const $q = useQuasar();
 const store = useComponentProfileDataStore();
 const { profileData, changeProfileColumns } = store;
-const dataStore = useDataStore();
-const { loaderPage } = dataStore;
 const mixin = useCounterMixin();
-const { date2Thai, success, dateToISO, messageError } = mixin;
+const { date2Thai, success, dateToISO, messageError, showLoader, hideLoader } =
+  mixin;
 const route = useRoute();
 const id = ref<string>("");
 const date = ref<Date>(new Date());
@@ -481,7 +480,7 @@ onMounted(async () => {
 
 const fetchData = async () => {
   if (profileId.value != "") {
-    loaderPage(true);
+    showLoader();
     await http
       .get(config.API.profileNopaidId(profileId.value))
       .then((res) => {
@@ -505,7 +504,7 @@ const fetchData = async () => {
         messageError($q, e);
       })
       .finally(() => {
-        loaderPage(false);
+        hideLoader();
       });
   }
 };
@@ -595,7 +594,7 @@ const clickSave = async () => {
  */
 const saveData = async () => {
   if (profileId.value) {
-    loaderPage(true);
+    showLoader();
     await http
       .post(config.API.profileNopaidId(profileId.value), {
         id: id.value,
@@ -623,7 +622,7 @@ const saveData = async () => {
  * บันทึกแก้ไขข้อมูล
  */
 const editData = async () => {
-  loaderPage(true);
+  showLoader();
   await http
     .put(config.API.profileNopaidId(id.value), {
       id: id.value,
@@ -658,7 +657,7 @@ const clickDelete = async () => {
     persistent: true,
   })
     .onOk(async () => {
-      loaderPage(true);
+      showLoader();
       await http
         .delete(config.API.profileNopaidId(id.value))
         .then((res) => {
@@ -768,7 +767,7 @@ const clickEditRow = () => {
  */
 const clickHistory = async (row: RequestItemsObject) => {
   modalHistory.value = true;
-  loaderPage(true);
+  showLoader();
   await http
     .get(config.API.profileNopaidHisId(row.id))
     .then((res) => {
@@ -792,7 +791,7 @@ const clickHistory = async (row: RequestItemsObject) => {
       messageError($q, e);
     })
     .finally(() => {
-      loaderPage(false);
+      hideLoader();
     });
 };
 
diff --git a/src/components/information/Salary.vue b/src/components/information/Salary.vue
index 766312977..4db908a90 100644
--- a/src/components/information/Salary.vue
+++ b/src/components/information/Salary.vue
@@ -552,7 +552,7 @@ import { onMounted, ref, watch } from "vue";
 import { useRoute } from "vue-router";
 import { useComponentProfileDataStore } from "@/components/information/store/store";
 import { useCounterMixin } from "@/stores/mixin";
-import { useDataStore } from "@/stores/data";
+
 import ProfileTable from "@/components/information/Table.vue";
 import DialogHeader from "@/components/information/DialogHeader.vue";
 import DialogFooter from "@/components/information/DialogFooter.vue";
@@ -581,10 +581,10 @@ const props = defineProps({
 const $q = useQuasar();
 const store = useComponentProfileDataStore();
 const { profileData, changeProfileColumns } = store;
-const dataStore = useDataStore();
-const { loaderPage } = dataStore;
+
 const mixin = useCounterMixin();
-const { date2Thai, success, dateToISO, messageError } = mixin;
+const { date2Thai, success, dateToISO, messageError, showLoader, hideLoader } =
+  mixin;
 const route = useRoute();
 const id = ref<string>("");
 const date = ref<Date>(new Date());
@@ -1410,7 +1410,7 @@ const filterSelector = (val: any, update: Function, filtername: string) => {
 };
 
 const nodeTree = async () => {
-  loaderPage(true);
+  showLoader();
   await http
     .get(config.API.profileOrganizRoot)
     .then((res: any) => {
@@ -1424,7 +1424,7 @@ const nodeTree = async () => {
       messageError($q, e);
     })
     .finally(() => {
-      loaderPage(false);
+      hideLoader();
     });
 };
 
@@ -1432,7 +1432,7 @@ const nodeTree = async () => {
  * get รายการ ตำแหน่ง
  */
 const fetchPosition = async () => {
-  loaderPage(true);
+  showLoader();
   await http
     .get(config.API.position)
     .then((res) => {
@@ -1509,13 +1509,13 @@ const fetchPosition = async () => {
     })
     .catch((e: any) => {})
     .finally(() => {
-      loaderPage(false);
+      hideLoader();
     });
 };
 
 const fetchData = async () => {
   if (profileId.value) {
-    loaderPage(true);
+    showLoader();
     await http
       .get(config.API.profileSalaryId(profileId.value))
       .then((res) => {
@@ -1558,7 +1558,7 @@ const fetchData = async () => {
         messageError($q, e);
       })
       .finally(() => {
-        loaderPage(false);
+        hideLoader();
       });
   }
 };
@@ -1569,7 +1569,7 @@ const onSelected = async (id: string) => {
 
 const fetchOrganization = async (id: string) => {
   if (selected.value != "") {
-    loaderPage(true);
+    showLoader();
     await http
       .get(config.API.organizationName(id))
       .then((res) => {
@@ -1580,13 +1580,13 @@ const fetchOrganization = async (id: string) => {
         messageError($q, e);
       })
       .finally(() => {
-        loaderPage(false);
+        hideLoader();
       });
   }
 };
 
 const fetchPositionNumber = async (id: string) => {
-  loaderPage(true);
+  showLoader();
   await http
     .get(config.API.getPositionNumberIdByOcId(id))
     .then((res) => {
@@ -1602,7 +1602,7 @@ const fetchPositionNumber = async (id: string) => {
       messageError($q, e);
     })
     .finally(() => {
-      loaderPage(false);
+      hideLoader();
     });
 };
 
@@ -1767,7 +1767,7 @@ const clickSave = async () => {
  */
 const saveData = async () => {
   if (profileId.value) {
-    loaderPage(true);
+    showLoader();
     await http
       .post(config.API.profileSalaryId(profileId.value), {
         date: dateToISO(date.value),
@@ -1804,7 +1804,7 @@ const saveData = async () => {
  * บันทึกแก้ไขข้อมูล
  */
 const editData = async () => {
-  loaderPage(true);
+  showLoader();
   await http
     .put(config.API.profileSalaryId(id.value), {
       date: dateToISO(date.value),
@@ -1848,7 +1848,7 @@ const clickDelete = async () => {
     persistent: true,
   })
     .onOk(async () => {
-      loaderPage(true);
+      showLoader();
       await http
         .delete(config.API.profileSalaryId(id.value))
         .then((res) => {
@@ -1992,7 +1992,7 @@ const clickEditRowRef = () => {
  */
 const clickHistory = async (row: RequestItemsObject) => {
   modalHistory.value = true;
-  loaderPage(true);
+  showLoader();
   await http
     .get(config.API.profileSalaryHisId(row.id))
     .then((res) => {
@@ -2035,7 +2035,7 @@ const clickHistory = async (row: RequestItemsObject) => {
       messageError($q, e);
     })
     .finally(() => {
-      loaderPage(false);
+      hideLoader();
     });
 };
 
diff --git a/src/components/information/SalaryEmployee.vue b/src/components/information/SalaryEmployee.vue
index 3e013336b..97856d8eb 100644
--- a/src/components/information/SalaryEmployee.vue
+++ b/src/components/information/SalaryEmployee.vue
@@ -563,7 +563,6 @@ import { onMounted, ref, watch } from "vue";
 import { useRoute } from "vue-router";
 import { useComponentProfileDataStore } from "@/components/information/store/store";
 import { useCounterMixin } from "@/stores/mixin";
-import { useDataStore } from "@/stores/data";
 import ProfileTable from "@/components/information/Table.vue";
 import DialogHeader from "@/components/information/DialogHeader.vue";
 import DialogFooter from "@/components/information/DialogFooter.vue";
@@ -592,10 +591,16 @@ const props = defineProps({
 const $q = useQuasar();
 const store = useComponentProfileDataStore();
 const { profileData, changeProfileColumns } = store;
-const dataStore = useDataStore();
-const { loaderPage } = dataStore;
 const mixin = useCounterMixin();
-const { date2Thai, success, dateToISO, messageError, dialogMessage } = mixin;
+const {
+  date2Thai,
+  success,
+  dateToISO,
+  messageError,
+  dialogMessage,
+  showLoader,
+  hideLoader,
+} = mixin;
 const route = useRoute();
 const id = ref<string>("");
 const date = ref<Date>(new Date());
@@ -1281,14 +1286,14 @@ onMounted(async () => {
 });
 
 const fetchDataSelector = async () => {
-  loaderPage(true);
+  showLoader();
   await fetchEmployeePosition();
   await fetchEmployeePositionSide();
   await fetchEmployeeLevel();
   await fetchEmployeeGroup();
   await fetchAgency();
   await nodeTree();
-  loaderPage(false);
+  hideLoader();
 };
 // ตำแหน่ง
 const fetchEmployeePosition = async () => {
@@ -1383,7 +1388,7 @@ const fetchAgency = async () => {
 };
 
 const nodeTree = async () => {
-  loaderPage(true);
+  showLoader();
   await http
     .get(config.API.profileOrganizRoot)
     .then((res: any) => {
@@ -1397,7 +1402,7 @@ const nodeTree = async () => {
       messageError($q, e);
     })
     .finally(() => {
-      loaderPage(false);
+      hideLoader();
     });
 };
 
@@ -1469,7 +1474,7 @@ const filterSelector = (val: any, update: Function, filtername: string) => {
 
 const fetchData = async () => {
   if (profileId.value) {
-    loaderPage(true);
+    showLoader();
     await http
       .get(config.API.profileSalaryEmployeeId(profileId.value))
       .then((res) => {
@@ -1509,13 +1514,13 @@ const fetchData = async () => {
         messageError($q, e);
       })
       .finally(() => {
-        loaderPage(false);
+        hideLoader();
       });
   }
 };
 
 const fetchPositionNumber = async (id: string) => {
-  //   loaderPage(true);
+  //   showLoader();
   if (id == null || id == "") return;
   await http
     .get(config.API.getPositionNumberIdByOcId(id))
@@ -1532,7 +1537,7 @@ const fetchPositionNumber = async (id: string) => {
       messageError($q, e);
     })
     .finally(() => {
-      loaderPage(false);
+      hideLoader();
     });
 };
 
@@ -1696,7 +1701,7 @@ const clickSave = async () => {
  */
 const saveData = async () => {
   if (profileId.value) {
-    loaderPage(true);
+    showLoader();
     await http
       .post(config.API.profileSalaryEmployeeId(profileId.value), {
         amount: amount.value,
@@ -1731,7 +1736,7 @@ const saveData = async () => {
  * บันทึกแก้ไขข้อมูล
  */
 const editData = async () => {
-  loaderPage(true);
+  showLoader();
   await http
     .put(config.API.profileSalaryEmployeeId(id.value), {
       amount: amount.value,
@@ -1765,7 +1770,7 @@ const editData = async () => {
  * ลบข้อมูล
  */
 const fetchDataDelete = async () => {
-  loaderPage(true);
+  showLoader();
   await http
     .delete(config.API.profileSalaryId(id.value))
     .then((res) => {
@@ -1935,7 +1940,7 @@ const clickEditRowRef = () => {
  */
 const clickHistory = async (row: RequestItemsEmployee) => {
   modalHistory.value = true;
-  loaderPage(true);
+  showLoader();
   await http
     .get(config.API.profileSalaryHisId(row.id))
     .then((res) => {
@@ -1974,7 +1979,7 @@ const clickHistory = async (row: RequestItemsEmployee) => {
       messageError($q, e);
     })
     .finally(() => {
-      loaderPage(false);
+      hideLoader();
     });
 };
 
diff --git a/src/components/information/SalaryEmployeeTemp.vue b/src/components/information/SalaryEmployeeTemp.vue
index de93b4ee8..7e2be28a6 100644
--- a/src/components/information/SalaryEmployeeTemp.vue
+++ b/src/components/information/SalaryEmployeeTemp.vue
@@ -538,7 +538,7 @@ import { onMounted, ref, watch } from "vue";
 import { useRoute } from "vue-router";
 import { useComponentProfileDataStore } from "@/components/information/store/store";
 import { useCounterMixin } from "@/stores/mixin";
-import { useDataStore } from "@/stores/data";
+
 import ProfileTable from "@/components/information/Table.vue";
 import DialogHeader from "@/components/information/DialogHeader.vue";
 import DialogFooter from "@/components/information/DialogFooter.vue";
@@ -567,10 +567,16 @@ const props = defineProps({
 const $q = useQuasar();
 const store = useComponentProfileDataStore();
 const { profileData, changeProfileColumns } = store;
-const dataStore = useDataStore();
-const { loaderPage } = dataStore;
 const mixin = useCounterMixin();
-const { date2Thai, success, dateToISO, messageError, dialogMessage } = mixin;
+const {
+  date2Thai,
+  success,
+  dateToISO,
+  messageError,
+  dialogMessage,
+  showLoader,
+  hideLoader,
+} = mixin;
 const route = useRoute();
 const id = ref<string>("");
 const date = ref<Date>(new Date());
@@ -1310,14 +1316,14 @@ onMounted(async () => {
 });
 
 const fetchDataSelector = async () => {
-  loaderPage(true);
+  showLoader();
   await fetchEmployeePosition();
   await fetchEmployeePositionSide();
   await fetchEmployeeLevel();
   await fetchEmployeeGroup();
   await fetchAgency();
   await nodeTree();
-  loaderPage(false);
+  hideLoader();
 };
 // ตำแหน่ง
 const fetchEmployeePosition = async () => {
@@ -1412,7 +1418,7 @@ const fetchAgency = async () => {
 };
 
 const nodeTree = async () => {
-  loaderPage(true);
+  showLoader();
   await http
     .get(config.API.profileOrganizRoot)
     .then((res: any) => {
@@ -1426,7 +1432,7 @@ const nodeTree = async () => {
       messageError($q, e);
     })
     .finally(() => {
-      loaderPage(false);
+      hideLoader();
     });
 };
 
@@ -1498,7 +1504,7 @@ const filterSelector = (val: any, update: Function, filtername: string) => {
 
 const fetchData = async () => {
   if (profileId.value) {
-    loaderPage(true);
+    showLoader();
     await http
       .get(config.API.profileSalaryEmployeeId(profileId.value))
       .then((res) => {
@@ -1537,13 +1543,13 @@ const fetchData = async () => {
         messageError($q, e);
       })
       .finally(() => {
-        loaderPage(false);
+        hideLoader();
       });
   }
 };
 
 const fetchPositionNumber = async (id: string) => {
-  //   loaderPage(true);
+  //   showLoader();
   if (id == null || id == "") return;
   await http
     .get(config.API.getPositionNumberIdByOcId(id))
@@ -1560,7 +1566,7 @@ const fetchPositionNumber = async (id: string) => {
       messageError($q, e);
     })
     .finally(() => {
-      loaderPage(false);
+      hideLoader();
     });
 };
 
@@ -1725,7 +1731,7 @@ const clickSave = async () => {
  */
 const saveData = async () => {
   if (profileId.value) {
-    loaderPage(true);
+    showLoader();
     await http
       .post(config.API.profileSalaryEmployeeId(profileId.value), {
         amount: amount.value,
@@ -1760,7 +1766,7 @@ const saveData = async () => {
  * บันทึกแก้ไขข้อมูล
  */
 const editData = async () => {
-  loaderPage(true);
+  showLoader();
   await http
     .put(config.API.profileSalaryEmployeeId(id.value), {
       amount: amount.value,
@@ -1794,7 +1800,7 @@ const editData = async () => {
  * ลบข้อมูล
  */
 const fetchDataDelete = async () => {
-  loaderPage(true);
+  showLoader();
   await http
     .delete(config.API.profileSalaryId(id.value))
     .then((res) => {
@@ -1964,7 +1970,7 @@ const clickEditRowRef = () => {
  */
 const clickHistory = async (row: RequestItemsEmployee) => {
   modalHistory.value = true;
-  loaderPage(true);
+  showLoader();
   await http
     .get(config.API.profileSalaryHisId(row.id))
     .then((res) => {
@@ -2003,7 +2009,7 @@ const clickHistory = async (row: RequestItemsEmployee) => {
       messageError($q, e);
     })
     .finally(() => {
-      loaderPage(false);
+      hideLoader();
     });
 };
 
diff --git a/src/components/information/Talent.vue b/src/components/information/Talent.vue
index 5cf4e24dd..607eee424 100644
--- a/src/components/information/Talent.vue
+++ b/src/components/information/Talent.vue
@@ -164,7 +164,6 @@ import { onMounted, ref, watch } from "vue";
 import { useRoute } from "vue-router";
 import { useComponentProfileDataStore } from "@/components/information/store/store";
 import { useCounterMixin } from "@/stores/mixin";
-import { useDataStore } from "@/stores/data";
 import ProfileTable from "@/components/information/Table.vue";
 import DialogHeader from "@/components/information/DialogHeader.vue";
 import DialogFooter from "@/components/information/DialogFooter.vue";
@@ -189,10 +188,10 @@ const props = defineProps({
 const $q = useQuasar();
 const store = useComponentProfileDataStore();
 const { profileData, changeProfileColumns } = store;
-const dataStore = useDataStore();
-const { loaderPage } = dataStore;
+
 const mixin = useCounterMixin();
-const { date2Thai, success, dateToISO, messageError } = mixin;
+const { date2Thai, success, dateToISO, messageError, showLoader, hideLoader } =
+  mixin;
 const route = useRoute();
 const id = ref<string>("");
 const field = ref<string>();
@@ -355,7 +354,7 @@ onMounted(async () => {
 
 const fetchData = async () => {
   if (profileId.value) {
-    loaderPage(true);
+    showLoader();
     await http
       .get(config.API.profileAbiliId(profileId.value))
       .then((res) => {
@@ -377,7 +376,7 @@ const fetchData = async () => {
         messageError($q, e);
       })
       .finally(() => {
-        loaderPage(false);
+        hideLoader();
       });
   }
 };
@@ -466,7 +465,7 @@ const clickSave = async () => {
  */
 const saveData = async () => {
   if (profileId.value) {
-    loaderPage(true);
+    showLoader();
     await http
       .post(config.API.profileAbiliId(profileId.value), {
         id: id.value,
@@ -492,7 +491,7 @@ const saveData = async () => {
  * บันทึกแก้ไขข้อมูล
  */
 const editData = async () => {
-  loaderPage(true);
+  showLoader();
   await http
     .put(config.API.profileAbiliId(id.value), {
       id: id.value,
@@ -525,7 +524,7 @@ const clickDelete = async () => {
     persistent: true,
   })
     .onOk(async () => {
-      loaderPage(true);
+      showLoader();
       await http
         .delete(config.API.profileAbiliId(id.value))
         .then((res) => {
@@ -633,7 +632,7 @@ const clickEditRow = () => {
  */
 const clickHistory = async (row: RequestItemsObject) => {
   modalHistory.value = true;
-  loaderPage(true);
+  showLoader();
   await http
     .get(config.API.profileAbiliHisId(row.id))
     .then((res) => {
@@ -655,7 +654,7 @@ const clickHistory = async (row: RequestItemsObject) => {
       messageError($q, e);
     })
     .finally(() => {
-      loaderPage(false);
+      hideLoader();
     });
 };
 
diff --git a/src/components/information/Train.vue b/src/components/information/Train.vue
index 965c5aa2d..d85fb0b5c 100644
--- a/src/components/information/Train.vue
+++ b/src/components/information/Train.vue
@@ -403,7 +403,6 @@ import { onMounted, ref, watch } from "vue";
 import { useRoute } from "vue-router";
 import { useCounterMixin } from "@/stores/mixin";
 import { useComponentProfileDataStore } from "@/components/information/store/store";
-import { useDataStore } from "@/stores/data";
 import ProfileTable from "@/components/information/Table.vue";
 import DialogHeader from "@/components/information/DialogHeader.vue";
 import DialogFooter from "@/components/information/DialogFooter.vue";
@@ -428,10 +427,9 @@ const props = defineProps({
 const $q = useQuasar();
 const store = useComponentProfileDataStore();
 const { profileData, changeProfileColumns } = store;
-const dataStore = useDataStore();
-const { loaderPage } = dataStore;
 const mixin = useCounterMixin();
-const { date2Thai, success, dateToISO, messageError } = mixin;
+const { date2Thai, success, dateToISO, messageError, showLoader, hideLoader } =
+  mixin;
 const route = useRoute();
 const id = ref<string>("");
 const name = ref<string>();
@@ -754,7 +752,7 @@ onMounted(async () => {
 
 const fetchData = async () => {
   if (profileId.value) {
-    loaderPage(true);
+    showLoader();
     await http
       .get(config.API.profileTrainId(profileId.value))
       .then((res) => {
@@ -782,7 +780,7 @@ const fetchData = async () => {
         messageError($q, e);
       })
       .finally(() => {
-        loaderPage(false);
+        hideLoader();
       });
   }
 };
@@ -877,7 +875,7 @@ const clickSave = async () => {
  */
 const saveData = async () => {
   if (profileId.value) {
-    loaderPage(true);
+    showLoader();
     await http
       .post(config.API.profileTrainId(profileId.value), {
         id: id.value,
@@ -909,7 +907,7 @@ const saveData = async () => {
  * บันทึกแก้ไขข้อมูล
  */
 const editData = async () => {
-  loaderPage(true);
+  showLoader();
   await http
     .put(config.API.profileTrainId(id.value), {
       id: id.value,
@@ -948,7 +946,7 @@ const clickDelete = async () => {
     persistent: true,
   })
     .onOk(async () => {
-      loaderPage(true);
+      showLoader();
       await http
         .delete(config.API.profileTrainId(id.value))
         .then((res) => {
@@ -1068,7 +1066,7 @@ const clickEditRow = () => {
  */
 const clickHistory = async (row: RequestItemsObject) => {
   modalHistory.value = true;
-  loaderPage(true);
+  showLoader();
   await http
     .get(config.API.profileTrainHisId(row.id))
     .then((res) => {
@@ -1096,7 +1094,7 @@ const clickHistory = async (row: RequestItemsObject) => {
       messageError($q, e);
     })
     .finally(() => {
-      loaderPage(false);
+      hideLoader();
     });
 };
 
diff --git a/src/components/information/Work.vue b/src/components/information/Work.vue
index 000369e54..a27025825 100644
--- a/src/components/information/Work.vue
+++ b/src/components/information/Work.vue
@@ -304,7 +304,7 @@ import { onMounted, ref, watch } from "vue";
 import { useRoute } from "vue-router";
 import { useComponentProfileDataStore } from "@/components/information/store/store";
 import { useCounterMixin } from "@/stores/mixin";
-import { useDataStore } from "@/stores/data";
+
 import ProfileTable from "@/components/information/Table.vue";
 import DialogHeader from "@/components/information/DialogHeader.vue";
 import DialogFooter from "@/components/information/DialogFooter.vue";
@@ -329,10 +329,9 @@ const props = defineProps({
 const $q = useQuasar();
 const store = useComponentProfileDataStore();
 const { profileData, changeProfileColumns } = store;
-const dataStore = useDataStore();
-const { loaderPage } = dataStore;
 const mixin = useCounterMixin();
-const { date2Thai, success, dateToISO, messageError } = mixin;
+const { date2Thai, success, dateToISO, messageError, showLoader, hideLoader } =
+  mixin;
 const route = useRoute();
 const id = ref<string>("");
 const dateStart = ref<Date>(new Date());
@@ -555,7 +554,7 @@ onMounted(async () => {
 
 const fetchData = async () => {
   if (profileId.value) {
-    loaderPage(true);
+    showLoader();
     await http
       .get(config.API.profileDutyId(profileId.value))
       .then((res) => {
@@ -580,7 +579,7 @@ const fetchData = async () => {
         messageError($q, e);
       })
       .finally(() => {
-        loaderPage(false);
+        hideLoader();
       });
   }
 };
@@ -671,7 +670,7 @@ const clickSave = async () => {
  */
 const saveData = async () => {
   if (profileId.value) {
-    loaderPage(true);
+    showLoader();
     await http
       .post(config.API.profileDutyId(profileId.value), {
         id: id.value,
@@ -700,7 +699,7 @@ const saveData = async () => {
  * บันทึกแก้ไขข้อมูล
  */
 const editData = async () => {
-  loaderPage(true);
+  showLoader();
   await http
     .put(config.API.profileDutyId(id.value), {
       id: id.value,
@@ -736,7 +735,7 @@ const clickDelete = async () => {
     persistent: true,
   })
     .onOk(async () => {
-      loaderPage(true);
+      showLoader();
       await http
         .delete(config.API.profileDutyId(id.value))
         .then((res) => {
@@ -848,7 +847,7 @@ const clickEditRow = () => {
  */
 const clickHistory = async (row: RequestItemsObject) => {
   modalHistory.value = true;
-  loaderPage(true);
+  showLoader();
   await http
     .get(config.API.profileDutyHisId(row.id))
     .then((res) => {
@@ -873,7 +872,7 @@ const clickHistory = async (row: RequestItemsObject) => {
       messageError($q, e);
     })
     .finally(() => {
-      loaderPage(false);
+      hideLoader();
     });
 };
 
diff --git a/src/modules/01_metadata/components/Calendar.vue b/src/modules/01_metadata/components/Calendar.vue
index b4868aef5..43c1c831d 100644
--- a/src/modules/01_metadata/components/Calendar.vue
+++ b/src/modules/01_metadata/components/Calendar.vue
@@ -121,7 +121,8 @@
             color="red"
             @click="cancelClick()"
             label="ยกเลิกแก้ไข"
-          > <!-- icon="mdi-undo"
+          >
+            <!-- icon="mdi-undo"
             <q-tooltip>ยกเลิก</q-tooltip> -->
           </q-btn>
           <q-btn
@@ -130,7 +131,8 @@
             color="red"
             @click="deleteClick()"
             label="ลบวันหยุด"
-          > <!-- icon="mdi-delete"
+          >
+            <!-- icon="mdi-delete"
             <q-tooltip>ลบ</q-tooltip> -->
           </q-btn>
           <q-btn
@@ -215,7 +217,6 @@ import type {
   DataDateRowObject,
   DataDateAddObject,
 } from "@/modules/01_metadata/interface/request/Calendar";
-import { useDataStore } from "@/stores/data";
 
 const props = defineProps({
   dateYear: {
@@ -240,8 +241,6 @@ const props = defineProps({
   },
 });
 
-const store = useDataStore();
-const { loaderPage } = store;
 const mixin = useCounterMixin(); //เรียกฟังก์ชันกลาง
 const { success, dateToISO, date2Thai, messageError, showLoader, hideLoader } =
   mixin;
diff --git a/src/modules/01_metadata/components/CalendarList.vue b/src/modules/01_metadata/components/CalendarList.vue
index 8a700ffd5..993a519ce 100644
--- a/src/modules/01_metadata/components/CalendarList.vue
+++ b/src/modules/01_metadata/components/CalendarList.vue
@@ -156,13 +156,8 @@
         </q-card-section>
         <q-separator />
         <q-card-actions align="right" class="text-primary">
-          <q-btn
-            unelevated
-            label="บันทึก"
-            color="public"
-            type="submit"
-            
-          > <!-- icon="mdi-content-save-outline"
+          <q-btn unelevated label="บันทึก" color="public" type="submit">
+            <!-- icon="mdi-content-save-outline"
             <q-tooltip>บันทึก</q-tooltip> -->
           </q-btn>
         </q-card-actions>
@@ -221,7 +216,6 @@ import type {
   DataDateListsObject,
   TabsObject,
 } from "@/modules/01_metadata/interface/request/Calendar";
-import { useDataStore } from "@/stores/data";
 
 const props = defineProps({
   dateYear: {
@@ -241,8 +235,6 @@ const props = defineProps({
   },
 });
 
-const store = useDataStore();
-const { loaderPage } = store;
 const mixin = useCounterMixin(); //เรียกฟังก์ชันกลาง
 const {
   success,
diff --git a/src/modules/01_metadata/components/insignia/Insignia.vue b/src/modules/01_metadata/components/insignia/Insignia.vue
index 6710add80..fa149da94 100644
--- a/src/modules/01_metadata/components/insignia/Insignia.vue
+++ b/src/modules/01_metadata/components/insignia/Insignia.vue
@@ -289,7 +289,6 @@ import type {
 import type { ResponseHistoryObject } from "@/modules/01_metadata/interface/response/insignia/Insignia";
 import type { DataOption } from "@/modules/01_metadata/interface/index/Main";
 import HistoryTable from "@/components/TableHistory.vue";
-import { useDataStore } from "@/stores/data";
 
 const props = defineProps({
   fetchDataComponent: {
@@ -298,8 +297,6 @@ const props = defineProps({
   },
 });
 
-const dataStore = useDataStore();
-const { loaderPage } = dataStore;
 const mixin = useCounterMixin();
 const { success, dateText, messageError, showLoader, hideLoader } = mixin;
 const store = useManageDataStore();
diff --git a/src/modules/01_metadata/components/insignia/InsigniaType.vue b/src/modules/01_metadata/components/insignia/InsigniaType.vue
index ec4d62557..7e4105f79 100644
--- a/src/modules/01_metadata/components/insignia/InsigniaType.vue
+++ b/src/modules/01_metadata/components/insignia/InsigniaType.vue
@@ -190,7 +190,6 @@ import type {
 } from "@/modules/01_metadata/interface/request/insignia/InsigniaType";
 import type { ResponseHistoryObject } from "@/modules/01_metadata/interface/response/insignia/InsigniaType";
 import HistoryTable from "@/components/TableHistory.vue";
-import { useDataStore } from "@/stores/data";
 
 const props = defineProps({
   fetchDataComponent: {
@@ -199,8 +198,6 @@ const props = defineProps({
   },
 });
 
-const dataStore = useDataStore();
-const { loaderPage } = dataStore;
 const mixin = useCounterMixin();
 const { success, dateText, messageError, showLoader, hideLoader } = mixin;
 const store = useManageDataStore();
diff --git a/src/modules/01_metadata/components/organization/Agency.vue b/src/modules/01_metadata/components/organization/Agency.vue
index b6b52f80e..fd9ece75d 100644
--- a/src/modules/01_metadata/components/organization/Agency.vue
+++ b/src/modules/01_metadata/components/organization/Agency.vue
@@ -190,7 +190,6 @@ import type {
 } from "@/modules/01_metadata/interface/request/organization/Agency";
 import type { ResponseHistoryObject } from "@/modules/01_metadata/interface/response/organization/Agency";
 import HistoryTable from "@/components/TableHistory.vue";
-import { useDataStore } from "@/stores/data";
 
 const props = defineProps({
   fetchDataComponent: {
@@ -199,8 +198,6 @@ const props = defineProps({
   },
 });
 
-const dataStore = useDataStore();
-const { loaderPage } = dataStore;
 const mixin = useCounterMixin();
 const { success, dateText, messageError, showLoader, hideLoader } = mixin;
 const store = useManageDataStore();
diff --git a/src/modules/01_metadata/components/organization/Fax.vue b/src/modules/01_metadata/components/organization/Fax.vue
index 11a675e39..0b20d8d82 100644
--- a/src/modules/01_metadata/components/organization/Fax.vue
+++ b/src/modules/01_metadata/components/organization/Fax.vue
@@ -190,7 +190,6 @@ import type {
 } from "@/modules/01_metadata/interface/request/organization/Fax";
 import type { ResponseHistoryObject } from "@/modules/01_metadata/interface/response/organization/Fax";
 import HistoryTable from "@/components/TableHistory.vue";
-import { useDataStore } from "@/stores/data";
 
 const props = defineProps({
   fetchDataComponent: {
@@ -199,8 +198,6 @@ const props = defineProps({
   },
 });
 
-const dataStore = useDataStore();
-const { loaderPage } = dataStore;
 const mixin = useCounterMixin();
 const { success, dateText, messageError, showLoader, hideLoader } = mixin;
 const store = useManageDataStore();
diff --git a/src/modules/01_metadata/components/organization/GovernmentAgency.vue b/src/modules/01_metadata/components/organization/GovernmentAgency.vue
index fef75a7f7..79dd31c96 100644
--- a/src/modules/01_metadata/components/organization/GovernmentAgency.vue
+++ b/src/modules/01_metadata/components/organization/GovernmentAgency.vue
@@ -190,7 +190,6 @@ import type {
 } from "@/modules/01_metadata/interface/request/organization/GovernmentAgency";
 import type { ResponseHistoryObject } from "@/modules/01_metadata/interface/response/organization/GovernmentAgency";
 import HistoryTable from "@/components/TableHistory.vue";
-import { useDataStore } from "@/stores/data";
 
 const props = defineProps({
   fetchDataComponent: {
@@ -199,8 +198,6 @@ const props = defineProps({
   },
 });
 
-const dataStore = useDataStore();
-const { loaderPage } = dataStore;
 const mixin = useCounterMixin();
 const { success, dateText, messageError, showLoader, hideLoader } = mixin;
 const store = useManageDataStore();
diff --git a/src/modules/01_metadata/components/organization/Level.vue b/src/modules/01_metadata/components/organization/Level.vue
index 38b3efe00..df36d79ea 100644
--- a/src/modules/01_metadata/components/organization/Level.vue
+++ b/src/modules/01_metadata/components/organization/Level.vue
@@ -190,7 +190,6 @@ import type {
 } from "@/modules/01_metadata/interface/request/organization/Level";
 import type { ResponseHistoryObject } from "@/modules/01_metadata/interface/response/organization/Level";
 import HistoryTable from "@/components/TableHistory.vue";
-import { useDataStore } from "@/stores/data";
 
 const props = defineProps({
   fetchDataComponent: {
@@ -199,8 +198,6 @@ const props = defineProps({
   },
 });
 
-const dataStore = useDataStore();
-const { loaderPage } = dataStore;
 const mixin = useCounterMixin();
 const { success, dateText, messageError, showLoader, hideLoader } = mixin;
 const store = useManageDataStore();
diff --git a/src/modules/01_metadata/components/organization/Organization.vue b/src/modules/01_metadata/components/organization/Organization.vue
index 4e5b34c58..e88a52e75 100644
--- a/src/modules/01_metadata/components/organization/Organization.vue
+++ b/src/modules/01_metadata/components/organization/Organization.vue
@@ -202,7 +202,6 @@ import type {
 } from "@/modules/01_metadata/interface/request/organization/Organization";
 import type { ResponseHistoryObject } from "@/modules/01_metadata/interface/response/organization/Organization";
 import HistoryTable from "@/components/TableHistory.vue";
-import { useDataStore } from "@/stores/data";
 
 const props = defineProps({
   fetchDataComponent: {
@@ -211,8 +210,6 @@ const props = defineProps({
   },
 });
 
-const dataStore = useDataStore();
-const { loaderPage } = dataStore;
 const mixin = useCounterMixin();
 const { success, dateText, messageError, showLoader, hideLoader } = mixin;
 const store = useManageDataStore();
diff --git a/src/modules/01_metadata/components/organization/ShortName.vue b/src/modules/01_metadata/components/organization/ShortName.vue
index 10d6ade7a..10e543aff 100644
--- a/src/modules/01_metadata/components/organization/ShortName.vue
+++ b/src/modules/01_metadata/components/organization/ShortName.vue
@@ -243,7 +243,6 @@ import type {
 } from "@/modules/01_metadata/interface/request/organization/ShortName";
 import type { ResponseHistoryObject } from "@/modules/01_metadata/interface/response/organization/ShortName";
 import HistoryTable from "@/components/TableHistory.vue";
-import { useDataStore } from "@/stores/data";
 
 const props = defineProps({
   fetchDataComponent: {
@@ -252,8 +251,6 @@ const props = defineProps({
   },
 });
 
-const dataStore = useDataStore();
-const { loaderPage } = dataStore;
 const mixin = useCounterMixin();
 const { success, dateText, messageError, showLoader, hideLoader } = mixin;
 const store = useManageDataStore();
diff --git a/src/modules/01_metadata/components/organization/Status.vue b/src/modules/01_metadata/components/organization/Status.vue
index cb94b07cd..bc875cec7 100644
--- a/src/modules/01_metadata/components/organization/Status.vue
+++ b/src/modules/01_metadata/components/organization/Status.vue
@@ -190,7 +190,6 @@ import type {
 } from "@/modules/01_metadata/interface/request/organization/Status";
 import type { ResponseHistoryObject } from "@/modules/01_metadata/interface/response/organization/Status";
 import HistoryTable from "@/components/TableHistory.vue";
-import { useDataStore } from "@/stores/data";
 
 const props = defineProps({
   fetchDataComponent: {
@@ -199,8 +198,6 @@ const props = defineProps({
   },
 });
 
-const dataStore = useDataStore();
-const { loaderPage } = dataStore;
 const mixin = useCounterMixin();
 const { success, dateText, messageError, showLoader, hideLoader } = mixin;
 const store = useManageDataStore();
diff --git a/src/modules/01_metadata/components/organization/TelExternal.vue b/src/modules/01_metadata/components/organization/TelExternal.vue
index 677bc905a..7873c89f6 100644
--- a/src/modules/01_metadata/components/organization/TelExternal.vue
+++ b/src/modules/01_metadata/components/organization/TelExternal.vue
@@ -190,7 +190,6 @@ import type {
 } from "@/modules/01_metadata/interface/request/organization/TelExternal";
 import type { ResponseHistoryObject } from "@/modules/01_metadata/interface/response/organization/TelExternal";
 import HistoryTable from "@/components/TableHistory.vue";
-import { useDataStore } from "@/stores/data";
 
 const props = defineProps({
   fetchDataComponent: {
@@ -199,8 +198,6 @@ const props = defineProps({
   },
 });
 
-const dataStore = useDataStore();
-const { loaderPage } = dataStore;
 const mixin = useCounterMixin();
 const { success, dateText, messageError, showLoader, hideLoader } = mixin;
 const store = useManageDataStore();
diff --git a/src/modules/01_metadata/components/organization/TelInternal.vue b/src/modules/01_metadata/components/organization/TelInternal.vue
index 61365f3d8..cbe4f7e7a 100644
--- a/src/modules/01_metadata/components/organization/TelInternal.vue
+++ b/src/modules/01_metadata/components/organization/TelInternal.vue
@@ -190,7 +190,6 @@ import type {
 } from "@/modules/01_metadata/interface/request/organization/TelInternal";
 import type { ResponseHistoryObject } from "@/modules/01_metadata/interface/response/organization/TelInternal";
 import HistoryTable from "@/components/TableHistory.vue";
-import { useDataStore } from "@/stores/data";
 
 const props = defineProps({
   fetchDataComponent: {
@@ -199,8 +198,6 @@ const props = defineProps({
   },
 });
 
-const dataStore = useDataStore();
-const { loaderPage } = dataStore;
 const mixin = useCounterMixin();
 const { success, dateText, messageError, showLoader, hideLoader } = mixin;
 const store = useManageDataStore();
diff --git a/src/modules/01_metadata/components/organization/Type.vue b/src/modules/01_metadata/components/organization/Type.vue
index e078fcfe6..bd3883926 100644
--- a/src/modules/01_metadata/components/organization/Type.vue
+++ b/src/modules/01_metadata/components/organization/Type.vue
@@ -190,7 +190,6 @@ import type {
 } from "@/modules/01_metadata/interface/request/organization/Type";
 import type { ResponseHistoryObject } from "@/modules/01_metadata/interface/response/organization/Type";
 import HistoryTable from "@/components/TableHistory.vue";
-import { useDataStore } from "@/stores/data";
 
 const props = defineProps({
   fetchDataComponent: {
@@ -199,8 +198,6 @@ const props = defineProps({
   },
 });
 
-const dataStore = useDataStore();
-const { loaderPage } = dataStore;
 const mixin = useCounterMixin();
 const { success, dateText, messageError, showLoader, hideLoader } = mixin;
 const store = useManageDataStore();
diff --git a/src/modules/01_metadata/components/person/Blood.vue b/src/modules/01_metadata/components/person/Blood.vue
index 96e057c6a..3b7094181 100644
--- a/src/modules/01_metadata/components/person/Blood.vue
+++ b/src/modules/01_metadata/components/person/Blood.vue
@@ -194,7 +194,6 @@ import type {
 } from "@/modules/01_metadata/interface/request/person/Blood";
 import type { ResponseHistoryObject } from "@/modules/01_metadata/interface/response/person/Blood";
 import HistoryTable from "@/components/TableHistory.vue";
-import { useDataStore } from "@/stores/data";
 
 const props = defineProps({
   fetchDataComponent: {
@@ -203,8 +202,6 @@ const props = defineProps({
   },
 });
 
-const dataStore = useDataStore();
-const { loaderPage } = dataStore;
 const mixin = useCounterMixin();
 const { success, dateText, messageError, showLoader, hideLoader } = mixin;
 const store = useManageDataStore();
diff --git a/src/modules/01_metadata/components/person/District.vue b/src/modules/01_metadata/components/person/District.vue
index ec0f5a9e8..440904a37 100644
--- a/src/modules/01_metadata/components/person/District.vue
+++ b/src/modules/01_metadata/components/person/District.vue
@@ -13,25 +13,20 @@
     >
       <q-tooltip>กลับ</q-tooltip>
     </q-btn>
-    
 
     <div class="text-h6 text-dark text-weight-bold">การจัดการข้อมูลเขต</div>
     <q-space />
     <q-breadcrumbs class="text-grey" active-color="blue">
       <template v-slot:separator>
-        <q-icon
-          size="1.2em"
-          name="chevron_right"
-          color="blue"
-        />
+        <q-icon size="1.2em" name="chevron_right" color="blue" />
       </template>
 
-      <q-breadcrumbs-el  to="/metadata"  label="การจัดการข้อมูลจังหวัด" />
+      <q-breadcrumbs-el to="/metadata" label="การจัดการข้อมูลจังหวัด" />
       <q-breadcrumbs-el label="การจัดการข้อมูลเขต" />
     </q-breadcrumbs>
   </div>
   <q-form ref="myForm">
-    <q-card flat bordered class=" row col-12">
+    <q-card flat bordered class="row col-12">
       <div class="col-xs-12">
         <div class="q-mt-sm">
           <data-table
@@ -247,14 +242,13 @@ import type {
 import type { ResponseHistoryObject } from "@/modules/01_metadata/interface/response/person/District";
 import HistoryTable from "@/components/TableHistory.vue";
 import { useRoute, useRouter } from "vue-router";
-import { useDataStore } from "@/stores/data";
 
 const mixin = useCounterMixin();
 const { success, dateText, messageError, showLoader, hideLoader } = mixin;
 const store = useManageDataStore();
-const dataStore = useDataStore();
+
 const { manageData, changeManageColumns, changeManageCurrentTab } = store;
-const { loaderPage } = dataStore; //ขึ้นหน้า load ขณะเรียก api
+
 const rows = ref<RequestItemsHistoryObject[]>([]); //list data table
 const rowsHistory = ref<RequestItemsHistoryObject[]>([]); //select data history
 const rawHistory = ref<RequestItemsHistoryObject[]>([]); //raw data history
diff --git a/src/modules/01_metadata/components/person/Education.vue b/src/modules/01_metadata/components/person/Education.vue
index 7c2499371..b951bdc04 100644
--- a/src/modules/01_metadata/components/person/Education.vue
+++ b/src/modules/01_metadata/components/person/Education.vue
@@ -191,7 +191,6 @@ import type {
 } from "@/modules/01_metadata/interface/request/person/Education";
 import type { ResponseHistoryObject } from "@/modules/01_metadata/interface/response/person/Education";
 import HistoryTable from "@/components/TableHistory.vue";
-import { useDataStore } from "@/stores/data";
 
 const props = defineProps({
   fetchDataComponent: {
@@ -200,8 +199,6 @@ const props = defineProps({
   },
 });
 
-const dataStore = useDataStore();
-const { loaderPage } = dataStore;
 const mixin = useCounterMixin();
 const { success, dateText, messageError, showLoader, hideLoader } = mixin;
 const store = useManageDataStore();
diff --git a/src/modules/01_metadata/components/person/Gender.vue b/src/modules/01_metadata/components/person/Gender.vue
index 2f29725dd..ad3a88fc5 100644
--- a/src/modules/01_metadata/components/person/Gender.vue
+++ b/src/modules/01_metadata/components/person/Gender.vue
@@ -191,7 +191,6 @@ import type {
 } from "@/modules/01_metadata/interface/request/person/Gender";
 import type { ResponseHistoryObject } from "@/modules/01_metadata/interface/response/person/Gender";
 import HistoryTable from "@/components/TableHistory.vue";
-import { useDataStore } from "@/stores/data";
 
 const props = defineProps({
   fetchDataComponent: {
@@ -200,8 +199,6 @@ const props = defineProps({
   },
 });
 
-const dataStore = useDataStore();
-const { loaderPage } = dataStore;
 const mixin = useCounterMixin();
 const { success, dateText, messageError, showLoader, hideLoader } = mixin;
 const store = useManageDataStore();
diff --git a/src/modules/01_metadata/components/person/Prefix.vue b/src/modules/01_metadata/components/person/Prefix.vue
index f3e08a01b..47d43e96a 100644
--- a/src/modules/01_metadata/components/person/Prefix.vue
+++ b/src/modules/01_metadata/components/person/Prefix.vue
@@ -191,7 +191,6 @@ import type {
 } from "@/modules/01_metadata/interface/request/person/Prefix";
 import type { ResponseHistoryObject } from "@/modules/01_metadata/interface/response/person/Prefix";
 import HistoryTable from "@/components/TableHistory.vue";
-import { useDataStore } from "@/stores/data";
 
 const props = defineProps({
   fetchDataComponent: {
@@ -200,8 +199,6 @@ const props = defineProps({
   },
 });
 
-const dataStore = useDataStore();
-const { loaderPage } = dataStore;
 const mixin = useCounterMixin();
 const { success, dateText, messageError, showLoader, hideLoader } = mixin;
 const store = useManageDataStore();
diff --git a/src/modules/01_metadata/components/person/Province.vue b/src/modules/01_metadata/components/person/Province.vue
index 3d30440fa..155d85c66 100644
--- a/src/modules/01_metadata/components/person/Province.vue
+++ b/src/modules/01_metadata/components/person/Province.vue
@@ -204,7 +204,7 @@ import type {
 import type { ResponseHistoryObject } from "@/modules/01_metadata/interface/response/person/Province";
 import HistoryTable from "@/components/TableHistory.vue";
 import { useRouter } from "vue-router";
-import { useDataStore } from "@/stores/data";
+
 const props = defineProps({
   fetchDataComponent: {
     type: Function,
@@ -212,8 +212,6 @@ const props = defineProps({
   },
 });
 
-const dataStore = useDataStore();
-const { loaderPage } = dataStore; //ขึ้นหน้า load ขณะเรียก api
 const mixin = useCounterMixin();
 const { success, dateText, messageError, showLoader, hideLoader } = mixin;
 const store = useManageDataStore();
diff --git a/src/modules/01_metadata/components/person/Relationship.vue b/src/modules/01_metadata/components/person/Relationship.vue
index f38aae780..2bc318e44 100644
--- a/src/modules/01_metadata/components/person/Relationship.vue
+++ b/src/modules/01_metadata/components/person/Relationship.vue
@@ -191,7 +191,6 @@ import type {
 } from "@/modules/01_metadata/interface/request/person/Relationship";
 import type { ResponseHistoryObject } from "@/modules/01_metadata/interface/response/person/Relationship";
 import HistoryTable from "@/components/TableHistory.vue";
-import { useDataStore } from "@/stores/data";
 
 const props = defineProps({
   fetchDataComponent: {
@@ -200,8 +199,6 @@ const props = defineProps({
   },
 });
 
-const dataStore = useDataStore();
-const { loaderPage } = dataStore;
 const mixin = useCounterMixin();
 const { success, dateText, messageError, showLoader, hideLoader } = mixin;
 const store = useManageDataStore();
diff --git a/src/modules/01_metadata/components/person/Religion.vue b/src/modules/01_metadata/components/person/Religion.vue
index 302b6084f..4ff8f724e 100644
--- a/src/modules/01_metadata/components/person/Religion.vue
+++ b/src/modules/01_metadata/components/person/Religion.vue
@@ -191,7 +191,6 @@ import type {
 } from "@/modules/01_metadata/interface/request/person/Religion";
 import type { ResponseHistoryObject } from "@/modules/01_metadata/interface/response/person/Religion";
 import HistoryTable from "@/components/TableHistory.vue";
-import { useDataStore } from "@/stores/data";
 
 const props = defineProps({
   fetchDataComponent: {
@@ -200,8 +199,6 @@ const props = defineProps({
   },
 });
 
-const dataStore = useDataStore();
-const { loaderPage } = dataStore;
 const mixin = useCounterMixin();
 const { success, dateText, messageError, showLoader, hideLoader } = mixin;
 const store = useManageDataStore();
diff --git a/src/modules/01_metadata/components/person/SubDistrict.vue b/src/modules/01_metadata/components/person/SubDistrict.vue
index 8b12362b3..7ebd6b9da 100644
--- a/src/modules/01_metadata/components/person/SubDistrict.vue
+++ b/src/modules/01_metadata/components/person/SubDistrict.vue
@@ -14,19 +14,21 @@
       <q-tooltip>กลับ</q-tooltip>
     </q-btn>
 
-    <div class="text-h6 text-dark text-weight-bold">การจัดการข้อมูลแขวง/ตำบล</div>
+    <div class="text-h6 text-dark text-weight-bold">
+      การจัดการข้อมูลแขวง/ตำบล
+    </div>
     <q-space />
     <q-breadcrumbs class="text-grey" active-color="blue">
       <template v-slot:separator>
-        <q-icon
-          size="1.2em"
-          name="chevron_right"
-          color="blue"
-        />
+        <q-icon size="1.2em" name="chevron_right" color="blue" />
       </template>
 
-      <q-breadcrumbs-el to="/metadata"  label="การจัดการข้อมูลจังหวัด" />
-      <q-breadcrumbs-el @click="goToProvince()" class="cursor-pointer" label="การจัดการข้อมูลเขต" />
+      <q-breadcrumbs-el to="/metadata" label="การจัดการข้อมูลจังหวัด" />
+      <q-breadcrumbs-el
+        @click="goToProvince()"
+        class="cursor-pointer"
+        label="การจัดการข้อมูลเขต"
+      />
       <q-breadcrumbs-el label="การจัดการข้อมูลแขวง/ตำบล" />
     </q-breadcrumbs>
   </div>
@@ -254,14 +256,13 @@ import type {
 import type { ResponseHistoryObject } from "@/modules/01_metadata/interface/response/person/SubDistrict";
 import HistoryTable from "@/components/TableHistory.vue";
 import { useRoute, useRouter } from "vue-router";
-import { useDataStore } from "@/stores/data";
 
 const mixin = useCounterMixin();
 const { success, dateText, messageError, showLoader, hideLoader } = mixin;
 const store = useManageDataStore();
-const dataStore = useDataStore();
+
 const { manageData, changeManageColumns, changeManageCurrentTab } = store;
-const { loaderPage } = dataStore; //ขึ้นหน้า load ขณะเรียก api
+
 const rows = ref<RequestItemsHistoryObject[]>([]); //list data table
 const rowsHistory = ref<RequestItemsHistoryObject[]>([]); //select data history
 const rawHistory = ref<RequestItemsHistoryObject[]>([]); //raw data history
diff --git a/src/modules/01_metadata/components/position/Executive.vue b/src/modules/01_metadata/components/position/Executive.vue
index e1b406282..7092c58f6 100644
--- a/src/modules/01_metadata/components/position/Executive.vue
+++ b/src/modules/01_metadata/components/position/Executive.vue
@@ -191,7 +191,6 @@ import type {
 } from "@/modules/01_metadata/interface/request/position/Executive";
 import type { ResponseHistoryObject } from "@/modules/01_metadata/interface/response/position/Executive";
 import HistoryTable from "@/components/TableHistory.vue";
-import { useDataStore } from "@/stores/data";
 
 const props = defineProps({
   fetchDataComponent: {
@@ -200,8 +199,6 @@ const props = defineProps({
   },
 });
 
-const dataStore = useDataStore();
-const { loaderPage } = dataStore;
 const mixin = useCounterMixin();
 const { success, dateText, messageError, showLoader, hideLoader } = mixin;
 const store = useManageDataStore();
diff --git a/src/modules/01_metadata/components/position/ExecutiveSide.vue b/src/modules/01_metadata/components/position/ExecutiveSide.vue
index a601a0d88..1e3ef0106 100644
--- a/src/modules/01_metadata/components/position/ExecutiveSide.vue
+++ b/src/modules/01_metadata/components/position/ExecutiveSide.vue
@@ -203,7 +203,6 @@ import type {
 } from "@/modules/01_metadata/interface/request/position/ExecutiveSide";
 import type { ResponseHistoryObject } from "@/modules/01_metadata/interface/response/position/ExecutiveSide";
 import HistoryTable from "@/components/TableHistory.vue";
-import { useDataStore } from "@/stores/data";
 
 const props = defineProps({
   fetchDataComponent: {
@@ -212,8 +211,6 @@ const props = defineProps({
   },
 });
 
-const dataStore = useDataStore();
-const { loaderPage } = dataStore;
 const mixin = useCounterMixin();
 const { success, dateText, messageError, showLoader, hideLoader } = mixin;
 const store = useManageDataStore();
diff --git a/src/modules/01_metadata/components/position/Level.vue b/src/modules/01_metadata/components/position/Level.vue
index d9c908026..d72c3cd0d 100644
--- a/src/modules/01_metadata/components/position/Level.vue
+++ b/src/modules/01_metadata/components/position/Level.vue
@@ -254,7 +254,6 @@ import type {
 } from "@/modules/01_metadata/interface/request/position/Level";
 import type { ResponseHistoryObject } from "@/modules/01_metadata/interface/response/position/Level";
 import HistoryTable from "@/components/TableHistory.vue";
-import { useDataStore } from "@/stores/data";
 
 const props = defineProps({
   fetchDataComponent: {
@@ -263,8 +262,6 @@ const props = defineProps({
   },
 });
 
-const dataStore = useDataStore();
-const { loaderPage } = dataStore;
 const mixin = useCounterMixin();
 const { success, dateText, messageError, showLoader, hideLoader } = mixin;
 const store = useManageDataStore();
diff --git a/src/modules/01_metadata/components/position/Line.vue b/src/modules/01_metadata/components/position/Line.vue
index 71b36a8a7..ebbd22007 100644
--- a/src/modules/01_metadata/components/position/Line.vue
+++ b/src/modules/01_metadata/components/position/Line.vue
@@ -191,7 +191,6 @@ import type {
 } from "@/modules/01_metadata/interface/request/position/Line";
 import type { ResponseHistoryObject } from "@/modules/01_metadata/interface/response/position/Line";
 import HistoryTable from "@/components/TableHistory.vue";
-import { useDataStore } from "@/stores/data";
 
 const props = defineProps({
   fetchDataComponent: {
@@ -200,8 +199,6 @@ const props = defineProps({
   },
 });
 
-const dataStore = useDataStore();
-const { loaderPage } = dataStore;
 const mixin = useCounterMixin();
 const { success, dateText, messageError, showLoader, hideLoader } = mixin;
 const store = useManageDataStore();
diff --git a/src/modules/01_metadata/components/position/Path.vue b/src/modules/01_metadata/components/position/Path.vue
index ec99114dd..8b32a18e4 100644
--- a/src/modules/01_metadata/components/position/Path.vue
+++ b/src/modules/01_metadata/components/position/Path.vue
@@ -203,7 +203,6 @@ import type {
 } from "@/modules/01_metadata/interface/request/position/Path";
 import type { ResponseHistoryObject } from "@/modules/01_metadata/interface/response/position/Path";
 import HistoryTable from "@/components/TableHistory.vue";
-import { useDataStore } from "@/stores/data";
 
 const props = defineProps({
   fetchDataComponent: {
@@ -212,8 +211,6 @@ const props = defineProps({
   },
 });
 
-const dataStore = useDataStore();
-const { loaderPage } = dataStore;
 const mixin = useCounterMixin();
 const { success, dateText, messageError, showLoader, hideLoader } = mixin;
 const store = useManageDataStore();
diff --git a/src/modules/01_metadata/components/position/PathSide.vue b/src/modules/01_metadata/components/position/PathSide.vue
index 25f500cfb..60f58c4d2 100644
--- a/src/modules/01_metadata/components/position/PathSide.vue
+++ b/src/modules/01_metadata/components/position/PathSide.vue
@@ -203,7 +203,6 @@ import type {
 } from "@/modules/01_metadata/interface/request/position/PathSide";
 import type { ResponseHistoryObject } from "@/modules/01_metadata/interface/response/position/PathSide";
 import HistoryTable from "@/components/TableHistory.vue";
-import { useDataStore } from "@/stores/data";
 
 const props = defineProps({
   fetchDataComponent: {
@@ -212,8 +211,6 @@ const props = defineProps({
   },
 });
 
-const dataStore = useDataStore();
-const { loaderPage } = dataStore;
 const mixin = useCounterMixin();
 const { success, dateText, messageError, showLoader, hideLoader } = mixin;
 const store = useManageDataStore();
diff --git a/src/modules/01_metadata/components/position/Status.vue b/src/modules/01_metadata/components/position/Status.vue
index 8c9bd287e..b7552d0cf 100644
--- a/src/modules/01_metadata/components/position/Status.vue
+++ b/src/modules/01_metadata/components/position/Status.vue
@@ -191,7 +191,6 @@ import type {
 } from "@/modules/01_metadata/interface/request/position/Status";
 import type { ResponseHistoryObject } from "@/modules/01_metadata/interface/response/position/Status";
 import HistoryTable from "@/components/TableHistory.vue";
-import { useDataStore } from "@/stores/data";
 
 const props = defineProps({
   fetchDataComponent: {
@@ -200,8 +199,6 @@ const props = defineProps({
   },
 });
 
-const dataStore = useDataStore();
-const { loaderPage } = dataStore;
 const mixin = useCounterMixin();
 const { success, dateText, messageError, showLoader, hideLoader } = mixin;
 const store = useManageDataStore();
diff --git a/src/modules/01_metadata/components/position/Type.vue b/src/modules/01_metadata/components/position/Type.vue
index 34b069487..ff1dd7eee 100644
--- a/src/modules/01_metadata/components/position/Type.vue
+++ b/src/modules/01_metadata/components/position/Type.vue
@@ -191,7 +191,6 @@ import type {
 } from "@/modules/01_metadata/interface/request/position/Type";
 import type { ResponseHistoryObject } from "@/modules/01_metadata/interface/response/position/Type";
 import HistoryTable from "@/components/TableHistory.vue";
-import { useDataStore } from "@/stores/data";
 
 const props = defineProps({
   fetchDataComponent: {
@@ -200,8 +199,6 @@ const props = defineProps({
   },
 });
 
-const dataStore = useDataStore();
-const { loaderPage } = dataStore;
 const mixin = useCounterMixin();
 const { success, dateText, messageError, showLoader, hideLoader } = mixin;
 const store = useManageDataStore();
diff --git a/src/modules/01_metadata/components/positionEmployee/Group.vue b/src/modules/01_metadata/components/positionEmployee/Group.vue
index 7d8f70425..2413b12f4 100644
--- a/src/modules/01_metadata/components/positionEmployee/Group.vue
+++ b/src/modules/01_metadata/components/positionEmployee/Group.vue
@@ -190,7 +190,6 @@ import type {
 } from "@/modules/01_metadata/interface/request/positionEmployee/Group";
 import type { ResponseHistoryObject } from "@/modules/01_metadata/interface/response/positionEmployee/Group";
 import HistoryTable from "@/components/TableHistory.vue";
-import { useDataStore } from "@/stores/data";
 
 const props = defineProps({
   fetchDataComponent: {
@@ -199,8 +198,6 @@ const props = defineProps({
   },
 });
 
-const dataStore = useDataStore();
-const { loaderPage } = dataStore;
 const mixin = useCounterMixin();
 const { success, dateText, messageError, showLoader, hideLoader } = mixin;
 const store = useManageDataStore();
diff --git a/src/modules/01_metadata/components/positionEmployee/Level.vue b/src/modules/01_metadata/components/positionEmployee/Level.vue
index e13ba6cdc..6953be8e3 100644
--- a/src/modules/01_metadata/components/positionEmployee/Level.vue
+++ b/src/modules/01_metadata/components/positionEmployee/Level.vue
@@ -190,7 +190,6 @@ import type {
 } from "@/modules/01_metadata/interface/request/positionEmployee/Level";
 import type { ResponseHistoryObject } from "@/modules/01_metadata/interface/response/positionEmployee/Level";
 import HistoryTable from "@/components/TableHistory.vue";
-import { useDataStore } from "@/stores/data";
 
 const props = defineProps({
   fetchDataComponent: {
@@ -199,8 +198,6 @@ const props = defineProps({
   },
 });
 
-const dataStore = useDataStore();
-const { loaderPage } = dataStore;
 const mixin = useCounterMixin();
 const { success, dateText, messageError, showLoader, hideLoader } = mixin;
 const store = useManageDataStore();
diff --git a/src/modules/01_metadata/components/positionEmployee/Line.vue b/src/modules/01_metadata/components/positionEmployee/Line.vue
index 5baf19592..57852b3df 100644
--- a/src/modules/01_metadata/components/positionEmployee/Line.vue
+++ b/src/modules/01_metadata/components/positionEmployee/Line.vue
@@ -190,7 +190,6 @@ import type {
 } from "@/modules/01_metadata/interface/request/positionEmployee/Line";
 import type { ResponseHistoryObject } from "@/modules/01_metadata/interface/response/positionEmployee/Line";
 import HistoryTable from "@/components/TableHistory.vue";
-import { useDataStore } from "@/stores/data";
 
 const props = defineProps({
   fetchDataComponent: {
@@ -199,8 +198,6 @@ const props = defineProps({
   },
 });
 
-const dataStore = useDataStore();
-const { loaderPage } = dataStore;
 const mixin = useCounterMixin();
 const { success, dateText, messageError, showLoader, hideLoader } = mixin;
 const store = useManageDataStore();
diff --git a/src/modules/01_metadata/components/positionEmployee/Position.vue b/src/modules/01_metadata/components/positionEmployee/Position.vue
index fabc8e0b6..c076f80e5 100644
--- a/src/modules/01_metadata/components/positionEmployee/Position.vue
+++ b/src/modules/01_metadata/components/positionEmployee/Position.vue
@@ -202,7 +202,6 @@ import type {
 } from "@/modules/01_metadata/interface/request/positionEmployee/Position";
 import type { ResponseHistoryObject } from "@/modules/01_metadata/interface/response/positionEmployee/Position";
 import HistoryTable from "@/components/TableHistory.vue";
-import { useDataStore } from "@/stores/data";
 
 const props = defineProps({
   fetchDataComponent: {
@@ -211,8 +210,6 @@ const props = defineProps({
   },
 });
 
-const dataStore = useDataStore();
-const { loaderPage } = dataStore;
 const mixin = useCounterMixin();
 const { success, dateText, messageError, showLoader, hideLoader } = mixin;
 const store = useManageDataStore();
diff --git a/src/modules/01_metadata/components/positionEmployee/PositionSide.vue b/src/modules/01_metadata/components/positionEmployee/PositionSide.vue
index 6e5a6bbbb..81d5d9ba1 100644
--- a/src/modules/01_metadata/components/positionEmployee/PositionSide.vue
+++ b/src/modules/01_metadata/components/positionEmployee/PositionSide.vue
@@ -202,7 +202,6 @@ import type {
 } from "@/modules/01_metadata/interface/request/positionEmployee/PositionSide";
 import type { ResponseHistoryObject } from "@/modules/01_metadata/interface/response/positionEmployee/PositionSide";
 import HistoryTable from "@/components/TableHistory.vue";
-import { useDataStore } from "@/stores/data";
 
 const props = defineProps({
   fetchDataComponent: {
@@ -211,8 +210,6 @@ const props = defineProps({
   },
 });
 
-const dataStore = useDataStore();
-const { loaderPage } = dataStore;
 const mixin = useCounterMixin();
 const { success, dateText, messageError, showLoader, hideLoader } = mixin;
 const store = useManageDataStore();
diff --git a/src/modules/01_metadata/components/positionEmployee/Status.vue b/src/modules/01_metadata/components/positionEmployee/Status.vue
index 240deb801..b3b358ccc 100644
--- a/src/modules/01_metadata/components/positionEmployee/Status.vue
+++ b/src/modules/01_metadata/components/positionEmployee/Status.vue
@@ -190,7 +190,6 @@ import type {
 } from "@/modules/01_metadata/interface/request/positionEmployee/Status";
 import type { ResponseHistoryObject } from "@/modules/01_metadata/interface/response/positionEmployee/Status";
 import HistoryTable from "@/components/TableHistory.vue";
-import { useDataStore } from "@/stores/data";
 
 const props = defineProps({
   fetchDataComponent: {
@@ -199,8 +198,6 @@ const props = defineProps({
   },
 });
 
-const dataStore = useDataStore();
-const { loaderPage } = dataStore;
 const mixin = useCounterMixin();
 const { success, dateText, messageError, showLoader, hideLoader } = mixin;
 const store = useManageDataStore();
diff --git a/src/modules/01_metadata/views/Main.vue b/src/modules/01_metadata/views/Main.vue
index 72230ca57..56a9d318f 100644
--- a/src/modules/01_metadata/views/Main.vue
+++ b/src/modules/01_metadata/views/Main.vue
@@ -396,7 +396,6 @@ import insigniaType from "@/modules/01_metadata/components/insignia/InsigniaType
 
 import { useCounterMixin } from "@/stores/mixin";
 import { useManageDataStore } from "@/modules/01_metadata/store";
-import { useDataStore } from "@/stores/data";
 
 import type {
   DataSumCalendarObject,
@@ -409,8 +408,6 @@ const $q = useQuasar();
 const mixin = useCounterMixin(); //เรียกฟังก์ชันกลาง
 const { genColor15, messageError, showLoader, hideLoader } = mixin;
 const store = useManageDataStore();
-const dataStore = useDataStore();
-const { loaderPage } = dataStore; //ขึ้นหน้า load ขณะเรียก api
 
 const visible = ref(true); //เปิดปิด card สรุปข้อมูล
 const link = ref<number>(store.manageData.link); //เลือก tab หลัก
diff --git a/src/modules/01_metadata/views/MainCalendar.vue b/src/modules/01_metadata/views/MainCalendar.vue
index 1240daf0d..1c7b7f887 100644
--- a/src/modules/01_metadata/views/MainCalendar.vue
+++ b/src/modules/01_metadata/views/MainCalendar.vue
@@ -217,12 +217,8 @@
         </q-card-section>
         <q-separator />
         <q-card-actions align="right" class="text-primary">
-          <q-btn
-            unelevated
-            label="บันทึก"
-            color="public"
-            type="submit"
-          > <!-- icon="mdi-content-save-outline"
+          <q-btn unelevated label="บันทึก" color="public" type="submit">
+            <!-- icon="mdi-content-save-outline"
             <q-tooltip>บันทึก</q-tooltip> -->
           </q-btn>
         </q-card-actions>
@@ -314,12 +310,8 @@
         </q-card-section>
         <q-separator />
         <q-card-actions align="right" class="text-primary">
-          <q-btn
-            unelevated
-            label="บันทึก"
-            color="public"
-            type="submit"
-          > <!-- icon="mdi-content-save-outline"
+          <q-btn unelevated label="บันทึก" color="public" type="submit">
+            <!-- icon="mdi-content-save-outline"
             <q-tooltip>บันทึก</q-tooltip> -->
           </q-btn>
         </q-card-actions>
@@ -335,7 +327,7 @@ import { reactive, ref, watch } from "vue";
 import http from "@/plugins/http";
 import config from "@/app.config";
 import { useQuasar } from "quasar";
-import { useDataStore } from "@/stores/data";
+
 import { useCounterMixin } from "@/stores/mixin";
 import { useManageDataStore } from "@/modules/01_metadata/store";
 import type {
@@ -354,7 +346,6 @@ const props = defineProps({
   },
 });
 
-const dataStore = useDataStore();
 const mixin = useCounterMixin(); //เรียกฟังก์ชันกลาง
 const {
   success,
@@ -366,7 +357,7 @@ const {
   showLoader,
   hideLoader,
 } = mixin;
-const { loaderPage } = dataStore; //รอโหลด
+
 const store = useManageDataStore();
 const $q = useQuasar(); //ใช้ noti quasar
 const currentTab = ref<string>(
diff --git a/src/modules/02_organizational/components/AddMappingPositions.vue b/src/modules/02_organizational/components/AddMappingPositions.vue
index 32a3e6c6f..2f531fe58 100644
--- a/src/modules/02_organizational/components/AddMappingPositions.vue
+++ b/src/modules/02_organizational/components/AddMappingPositions.vue
@@ -432,15 +432,19 @@ import type { DataOption } from "@/modules/02_organizational/interface/index/Mai
 import HistoryTable from "@/components/TableHistory.vue";
 import http from "@/plugins/http";
 import config from "@/app.config";
-import { useDataStore } from "@/stores/data";
-import type { QTableProps } from "quasar";
 
-const dataStore = useDataStore();
-const { loaderPage } = dataStore;
+import type { QTableProps } from "quasar";
 
 const $q = useQuasar(); // show dialog
 const mixin = useCounterMixin();
-const { success, modalConfirm, modalError, modalDelete } = mixin;
+const {
+  success,
+  modalConfirm,
+  modalError,
+  modalDelete,
+  showLoader,
+  hideLoader,
+} = mixin;
 const { date2Thai } = mixin;
 const store = useOrganizationalDataStore();
 const { organizationalData, changeOrganizationalColumns } = store;
@@ -843,7 +847,7 @@ watch(visibleColumns, async (count: String[], prevCount: String[]) => {
 });
 
 onMounted(async () => {
-  loaderPage(false);
+  hideLoader();
   await fetchPosition();
   await fetchData();
   await fetchHistory();
@@ -853,7 +857,7 @@ onMounted(async () => {
  * ฟังก์ชัน get data ล่าสุด
  */
 const fetchData = async () => {
-  loaderPage(true);
+  showLoader();
   await http
     .get(config.API.getPostionMasterDraft(true))
     .then((res) => {
@@ -897,7 +901,7 @@ const fetchData = async () => {
     })
     .finally(() => {
       //   updateData.value = false;
-      loaderPage(false);
+      hideLoader();
     });
 };
 
@@ -905,7 +909,7 @@ const fetchData = async () => {
  * ฟังชั้นดูข้อมูลประวัติแก้ไขข้อมูลทั้งหมด
  */
 const fetchHistory = async () => {
-  //   loaderPage(true);
+  //   showLoader();
   //   await http
   //     .get(config.API.listxxxxxxxxPublishedHistory)
   //     .then((res) => {
@@ -937,7 +941,7 @@ const fetchHistory = async () => {
   //       statusCode.value = e.response.data.status;
   //     })
   //     .finally(async () => {
-  //       loaderPage(false);
+  //       hideLoader();
   //     });
 };
 
@@ -945,7 +949,7 @@ const fetchHistory = async () => {
  * get รายการ ตำแหน่ง
  */
 const fetchPosition = async () => {
-  loaderPage(true);
+  showLoader();
   await http
     .get(config.API.position)
     .then((res) => {
@@ -1036,7 +1040,7 @@ const fetchPosition = async () => {
     })
     .catch((e: any) => {})
     .finally(() => {
-      loaderPage(false);
+      hideLoader();
     });
 };
 
@@ -1185,7 +1189,7 @@ const clickSave = async () => {
  */
 const saveData = async () => {
   modal.value = false;
-  loaderPage(true);
+  showLoader();
   await http
     .post(config.API.getPositionMaster, {
       positionTypeId: positionTypeId.value,
@@ -1218,7 +1222,7 @@ const saveData = async () => {
  */
 const editData = async () => {
   modal.value = false;
-  loaderPage(true);
+  showLoader();
   await http
     .put(config.API.getPositionMasterId(positionMasterId.value), {
       positionMasterId: positionMasterId.value,
@@ -1252,7 +1256,7 @@ const editData = async () => {
  * เมื่อเรียก api เสร็จแล้วจะ get data มาใหม่
  */
 const clearPublishedData = async () => {
-  loaderPage(true);
+  showLoader();
   await http
     .put(config.API.getPositionMasterSync)
     .then((res) => {
@@ -1265,7 +1269,7 @@ const clearPublishedData = async () => {
       statusCode.value = e.response.data.status;
     })
     .finally(async () => {
-      loaderPage(false);
+      hideLoader();
       await fetchHistory();
       await fetchData();
     });
@@ -1277,7 +1281,7 @@ const clearPublishedData = async () => {
  */
 const publishedData = async () => {
   //   editvisible.value = false;
-  loaderPage(true);
+  showLoader();
   await http
     .put(config.API.getPositionMasterPublish)
     .then((res) => {
@@ -1287,7 +1291,7 @@ const publishedData = async () => {
       statusCode.value = e.response.data.status;
     })
     .finally(async () => {
-      loaderPage(false);
+      hideLoader();
       await fetchData();
     });
 };
@@ -1383,7 +1387,7 @@ const clickAdd = () => {
  * @param row ข้อมูล row ที่ดูประวัติการแก้ไข
  */
 const clickHistory = async (row: RequestItemsObject) => {
-  loaderPage(true);
+  showLoader();
   await http
     .get(config.API.getPositionMasterHistoryId(row.id))
     .then((res) => {
@@ -1427,7 +1431,7 @@ const clickHistory = async (row: RequestItemsObject) => {
     })
     .finally(async () => {
       modalHistory.value = true;
-      loaderPage(false);
+      hideLoader();
     });
 };
 
@@ -1470,7 +1474,7 @@ const clickIsActive = async (val: string, status: boolean) => {
   })
     .onOk(async () => {
       // edit.value = false;
-      loaderPage(true);
+      showLoader();
       await http
         .delete(config.API.getPositionMasterId(val) + `?Id=${val}`)
         .then((res) => {
diff --git a/src/modules/02_organizational/components/Tree/MappingPositions.vue b/src/modules/02_organizational/components/Tree/MappingPositions.vue
index 5e4889322..a0ce10254 100644
--- a/src/modules/02_organizational/components/Tree/MappingPositions.vue
+++ b/src/modules/02_organizational/components/Tree/MappingPositions.vue
@@ -374,7 +374,8 @@
 import { ref, defineAsyncComponent, watch, onMounted } from "vue";
 import { useQuasar, QForm } from "quasar";
 import type { PropType } from "vue";
-import { useDataStore } from "@/stores/data";
+
+import { useCounterMixin } from "@/stores/mixin";
 import http from "@/plugins/http";
 import config from "@/app.config";
 import type { DataOption } from "../../interface/index/Main";
@@ -382,8 +383,9 @@ import type { DataOption } from "../../interface/index/Main";
 const ddNoResultMsg = defineAsyncComponent(
   () => import("@/components/DropDownNoResultMsg.vue")
 ); //แสดงข้อความเมื่อ Dropdown Filter ไม่เจอข้อมูล
-const dataStore = useDataStore();
-const { loaderPage } = dataStore;
+
+const mixin = useCounterMixin();
+const { showLoader, hideLoader } = mixin;
 const $q = useQuasar(); // show dialog
 const emit = defineEmits(["update:positions", "update:formprops"]);
 const props = defineProps({
@@ -430,12 +432,12 @@ const positionFilter = ref<Array<any>>([]); //for DropDown
 const position = ref<Array<any>>([]); //for DropDown
 
 onMounted(async () => {
-  loaderPage(false);
+  hideLoader();
   await fetchPositionMaster();
 });
 
 const fetchPositionMaster = async () => {
-  loaderPage(true);
+  showLoader();
   await http
     // .get(config.API.getPostionMasterDraft(false))
     .get(config.API.getPostionMaster(false))
@@ -476,7 +478,7 @@ const fetchPositionMaster = async () => {
       console.log(e);
     })
     .finally(() => {
-      loaderPage(false);
+      hideLoader();
     });
 };
 
diff --git a/src/modules/02_organizational/components/Tree/OrganizationDialog.vue b/src/modules/02_organizational/components/Tree/OrganizationDialog.vue
index a0c3f66f7..506d9e096 100644
--- a/src/modules/02_organizational/components/Tree/OrganizationDialog.vue
+++ b/src/modules/02_organizational/components/Tree/OrganizationDialog.vue
@@ -333,8 +333,9 @@ import type {
   GovermentOption,
 } from "../../interface/index/Main";
 import { log } from "console";
-import { useDataStore } from "@/stores/data";
+
 // import { organizationSet } from "../interface/index/Main";
+import { useCounterMixin } from "@/stores/mixin";
 
 const props = defineProps({
   organizprops: Array as PropType<OrganizaOption[]>,
@@ -343,8 +344,9 @@ const props = defineProps({
 
 const emit = defineEmits(["update:organizprops", "update:formprops"]);
 
-const dataStore = useDataStore();
-const { loaderPage } = dataStore;
+const mixin = useCounterMixin();
+const { showLoader, hideLoader } = mixin;
+
 const $q = useQuasar(); // show dialog
 const myForm = ref<QForm | null>(null);
 
@@ -381,7 +383,7 @@ const organizationAgencyCode = ref<GovermentOption[]>([]);
 const organizationAgencyCodeFilter = ref<GovermentOption[]>([]);
 
 onMounted(async () => {
-  loaderPage(false);
+  hideLoader();
   await fetchOrganizationOri();
   await fetchOrganizationAgencyCode();
   await fetchOrganizationGovernmentCode();
@@ -400,7 +402,7 @@ onMounted(async () => {
  *  หน่วยงาน
  */
 const fetchOrganizationOri = async () => {
-  loaderPage(true);
+  showLoader();
   await http
     .get(config.API.organization)
     .then((res) => {
@@ -416,14 +418,14 @@ const fetchOrganizationOri = async () => {
       console.log(e);
     })
     .finally(() => {
-      loaderPage(false);
+      hideLoader();
     });
 };
 /**
  *  รหัสหน่วยงาน
  */
 const fetchOrganizationAgencyCode = async () => {
-  loaderPage(true);
+  showLoader();
   await http
     .get(config.API.organizationCode)
     .then((res) => {
@@ -445,14 +447,14 @@ const fetchOrganizationAgencyCode = async () => {
       console.log(e);
     })
     .finally(() => {
-      loaderPage(false);
+      hideLoader();
     });
 };
 /**
  *  รหัสส่วนราชการ
  */
 const fetchOrganizationGovernmentCode = async () => {
-  loaderPage(true);
+  showLoader();
   await http
     .get(config.API.organizationShortName)
     .then((res) => {
@@ -474,14 +476,14 @@ const fetchOrganizationGovernmentCode = async () => {
       console.log(e);
     })
     .finally(() => {
-      loaderPage(false);
+      hideLoader();
     });
 };
 // /**
 //  *  ชื่อย่อหน่วยงาน
 //  */
 // const fetchOrganizationShortName = async () => {
-//   loaderPage(true);
+//   showLoader();
 //   await http
 //     .get(config.API.organizationShortName)
 //     .then((res) => {
@@ -503,14 +505,14 @@ const fetchOrganizationGovernmentCode = async () => {
 //       console.log(e);
 //     })
 //     .finally(() => {
-//       loaderPage(false);
+//       hideLoader();
 //     });
 // };
 /**
  *  หน่วยงานต้นสังกัด
  */
 const fetchOrganizationAgency = async () => {
-  loaderPage(true);
+  showLoader();
   await http
     .get(config.API.listOrganizationHistoryAgency("หน่วยงาน"))
     .then((res) => {
@@ -529,14 +531,14 @@ const fetchOrganizationAgency = async () => {
       console.log(e);
     })
     .finally(() => {
-      loaderPage(false);
+      hideLoader();
     });
 };
 /**
  *  ส่วนราชการต้นสังกัด
  */
 const fetchOrganizationGovernmentAgency = async () => {
-  loaderPage(true);
+  showLoader();
   await http
     .get(config.API.listOrganizationHistoryAgency("ส่วนราชการ"))
     .then((res) => {
@@ -555,14 +557,14 @@ const fetchOrganizationGovernmentAgency = async () => {
       console.log(e);
     })
     .finally(() => {
-      loaderPage(false);
+      hideLoader();
     });
 };
 /**
  *   ประเภทหน่วยงาน
  */
 const fetchOrganizationType = async () => {
-  loaderPage(true);
+  showLoader();
   await http
     .get(config.API.organizationType)
     .then((res) => {
@@ -578,14 +580,14 @@ const fetchOrganizationType = async () => {
       console.log(e);
     })
     .finally(() => {
-      loaderPage(false);
+      hideLoader();
     });
 };
 /**
  *  ระดับหน่วยงาน
  */
 const fetchOrganizationLevel = async () => {
-  loaderPage(true);
+  showLoader();
   await http
     .get(config.API.organizationLevel)
     .then((res) => {
@@ -601,14 +603,14 @@ const fetchOrganizationLevel = async () => {
       console.log(e);
     })
     .finally(() => {
-      loaderPage(false);
+      hideLoader();
     });
 };
 /**
  *  เบอร์ติดต่อภายใน
  */
 const fetchOrganizationTelInternal = async () => {
-  loaderPage(true);
+  showLoader();
   await http
     .get(config.API.organizationTelInternal)
     .then((res) => {
@@ -624,14 +626,14 @@ const fetchOrganizationTelInternal = async () => {
       console.log(e);
     })
     .finally(() => {
-      loaderPage(false);
+      hideLoader();
     });
 };
 /**
  *  เบอร์ติดต่อภายนอก
  */
 const fetchOrganizationTelExternal = async () => {
-  loaderPage(true);
+  showLoader();
   await http
     .get(config.API.organizationTelExternal)
     .then((res) => {
@@ -647,14 +649,14 @@ const fetchOrganizationTelExternal = async () => {
       console.log(e);
     })
     .finally(() => {
-      loaderPage(false);
+      hideLoader();
     });
 };
 /**
  *  เบอร์โทรสาร
  */
 const fetchOrganizationFax = async () => {
-  loaderPage(true);
+  showLoader();
   await http
     .get(config.API.organizationFax)
     .then((res) => {
@@ -670,7 +672,7 @@ const fetchOrganizationFax = async () => {
       console.log(e);
     })
     .finally(() => {
-      loaderPage(false);
+      hideLoader();
     });
 };
 
@@ -772,7 +774,7 @@ const addOrganizationItem = async () => {
 
 const fetchAgencyCode = async (val: string, item: OrganizaOption) => {
   let option: GovermentOption[] = [];
-  loaderPage(true);
+  showLoader();
   await http
     .get(config.API.organizationGovernmentCode(val))
     .then((res) => {
@@ -792,14 +794,14 @@ const fetchAgencyCode = async (val: string, item: OrganizaOption) => {
       console.log(e);
     })
     .finally(() => {
-      loaderPage(false);
+      hideLoader();
     });
   return option;
 };
 
 const fetchGovernmentCode = async (val: string, item: OrganizaOption) => {
   let option: GovermentOption[] = [];
-  loaderPage(true);
+  showLoader();
   await http
     .get(config.API.organizationAgencyCode(val))
     .then((res) => {
@@ -819,7 +821,7 @@ const fetchGovernmentCode = async (val: string, item: OrganizaOption) => {
       console.log(e);
     })
     .finally(() => {
-      loaderPage(false);
+      hideLoader();
     });
   return option;
 };
diff --git a/src/modules/02_organizational/components/Tree/OrganizationDialogAddEdit.vue b/src/modules/02_organizational/components/Tree/OrganizationDialogAddEdit.vue
index eddae0331..383e9a953 100644
--- a/src/modules/02_organizational/components/Tree/OrganizationDialogAddEdit.vue
+++ b/src/modules/02_organizational/components/Tree/OrganizationDialogAddEdit.vue
@@ -310,9 +310,13 @@ import type {
   GovermentOption,
 } from "../../interface/index/Main";
 import { log } from "console";
-import { useDataStore } from "@/stores/data";
+
 import type { EnumStringMember } from "@babel/types";
 // import { organizationSet } from "../interface/index/Main";
+import { useCounterMixin } from "@/stores/mixin";
+
+const mixin = useCounterMixin();
+const { showLoader, hideLoader } = mixin;
 
 const props = defineProps({
   organizprops: Object as PropType<OrganizaOption>,
@@ -323,8 +327,6 @@ const props = defineProps({
   },
 });
 
-const dataStore = useDataStore();
-const { loaderPage } = dataStore;
 const emit = defineEmits(["update:organizprops", "update:formprops"]);
 
 const $q = useQuasar(); // show dialog
@@ -393,7 +395,7 @@ const organization = ref<OrganizaOption>({
 emit("update:organizprops", organization.value);
 
 onMounted(async () => {
-  loaderPage(false);
+  hideLoader();
   //   await fillOrgEdit(); //มาแค่ตรง selector(q-select)
   await fetchOrganizationOri();
   //   await fetchOrganizationShortName();
@@ -427,7 +429,7 @@ const getClass = (val: boolean) => {
  * @param node node that you want to edit data
  */
 const fillOrgEdit = async () => {
-  loaderPage(true);
+  showLoader();
   await http
     .get(config.API.getOrgDraft(props.org.organizationId))
     .then((res) => {
@@ -499,7 +501,7 @@ const fillOrgEdit = async () => {
       console.log(e);
     })
     .finally(async () => {
-      loaderPage(false);
+      hideLoader();
     });
   console.log("success");
 };
@@ -508,7 +510,7 @@ const fillOrgEdit = async () => {
  *  หน่วยงาน
  */
 const fetchOrganizationOri = async () => {
-  loaderPage(true);
+  showLoader();
   await http
     .get(config.API.organization)
     .then((res) => {
@@ -524,14 +526,14 @@ const fetchOrganizationOri = async () => {
       console.log(e);
     })
     .finally(() => {
-      loaderPage(false);
+      hideLoader();
     });
 };
 /**
  *  รหัสหน่วยงาน
  */
 const fetchOrganizationAgencyCode = async () => {
-  loaderPage(true);
+  showLoader();
   await http
     .get(config.API.organizationCode)
     .then((res) => {
@@ -553,14 +555,14 @@ const fetchOrganizationAgencyCode = async () => {
       console.log(e);
     })
     .finally(() => {
-      loaderPage(false);
+      hideLoader();
     });
 };
 /**
  *  รหัสส่วนราชการ
  */
 const fetchOrganizationGovernmentCode = async () => {
-  loaderPage(true);
+  showLoader();
   await http
     .get(config.API.organizationShortName)
     .then((res) => {
@@ -585,14 +587,14 @@ const fetchOrganizationGovernmentCode = async () => {
       console.log(e);
     })
     .finally(() => {
-      loaderPage(false);
+      hideLoader();
     });
 };
 // /**
 //  *  ชื่อย่อหน่วยงาน
 //  */
 // const fetchOrganizationShortName = async () => {
-//   loaderPage(true);
+//   showLoader();
 //   await http
 //     .get(config.API.organizationShortName)
 //     .then((res) => {
@@ -614,14 +616,14 @@ const fetchOrganizationGovernmentCode = async () => {
 //       console.log(e);
 //     })
 //     .finally(() => {
-//       loaderPage(false);
+//       hideLoader();
 //     });
 // };
 /**
  *  หน่วยงานต้นสังกัด
  */
 const fetchOrganizationAgency = async () => {
-  loaderPage(true);
+  showLoader();
   await http
     // .get(config.API.organizationAgency)
     .get(config.API.listOrganizationHistoryAgency("หน่วยงาน"))
@@ -641,14 +643,14 @@ const fetchOrganizationAgency = async () => {
       console.log(e);
     })
     .finally(() => {
-      loaderPage(false);
+      hideLoader();
     });
 };
 /**
  *  ส่วนราชการต้นสังกัด
  */
 const fetchOrganizationGovernmentAgency = async () => {
-  loaderPage(true);
+  showLoader();
   await http
     // .get(config.API.organizationGovernmentAgency)
     .get(config.API.listOrganizationHistoryAgency("ส่วนราชการ"))
@@ -669,14 +671,14 @@ const fetchOrganizationGovernmentAgency = async () => {
       console.log(e);
     })
     .finally(() => {
-      loaderPage(false);
+      hideLoader();
     });
 };
 /**
  *   ประเภทหน่วยงาน
  */
 const fetchOrganizationType = async () => {
-  loaderPage(true);
+  showLoader();
   await http
     .get(config.API.organizationType)
     .then((res) => {
@@ -692,7 +694,7 @@ const fetchOrganizationType = async () => {
       console.log(e);
     })
     .finally(() => {
-      loaderPage(false);
+      hideLoader();
     });
 };
 
@@ -700,7 +702,7 @@ const fetchOrganizationType = async () => {
  *   สถานะหน่วยงาน
  */
 const fetchOrganizationStatus = async () => {
-  loaderPage(true);
+  showLoader();
   await http
     .get(config.API.organizationStatus)
     .then((res) => {
@@ -716,7 +718,7 @@ const fetchOrganizationStatus = async () => {
       console.log(e);
     })
     .finally(() => {
-      loaderPage(false);
+      hideLoader();
     });
 };
 
@@ -724,7 +726,7 @@ const fetchOrganizationStatus = async () => {
  *  ระดับหน่วยงาน
  */
 const fetchOrganizationLevel = async () => {
-  loaderPage(true);
+  showLoader();
   await http
     .get(config.API.organizationLevel)
     .then((res) => {
@@ -740,14 +742,14 @@ const fetchOrganizationLevel = async () => {
       console.log(e);
     })
     .finally(() => {
-      loaderPage(false);
+      hideLoader();
     });
 };
 /**
  *  เบอร์ติดต่อภายใน
  */
 const fetchOrganizationTelInternal = async () => {
-  loaderPage(true);
+  showLoader();
   await http
     .get(config.API.organizationTelInternal)
     .then((res) => {
@@ -763,14 +765,14 @@ const fetchOrganizationTelInternal = async () => {
       console.log(e);
     })
     .finally(() => {
-      loaderPage(false);
+      hideLoader();
     });
 };
 /**
  *  เบอร์ติดต่อภายนอก
  */
 const fetchOrganizationTelExternal = async () => {
-  loaderPage(true);
+  showLoader();
   await http
     .get(config.API.organizationTelExternal)
     .then((res) => {
@@ -786,14 +788,14 @@ const fetchOrganizationTelExternal = async () => {
       console.log(e);
     })
     .finally(() => {
-      loaderPage(false);
+      hideLoader();
     });
 };
 /**
  *  เบอร์โทรสาร
  */
 const fetchOrganizationFax = async () => {
-  loaderPage(true);
+  showLoader();
   await http
     .get(config.API.organizationFax)
     .then((res) => {
@@ -809,13 +811,13 @@ const fetchOrganizationFax = async () => {
       console.log(e);
     })
     .finally(() => {
-      loaderPage(false);
+      hideLoader();
     });
 };
 
 const fetchAgencyCode = async (val: string, item: OrganizaOption) => {
   let option: GovermentOption[] = [];
-  loaderPage(true);
+  showLoader();
   await http
     .get(config.API.organizationGovernmentCode(val))
     .then((res) => {
@@ -835,14 +837,14 @@ const fetchAgencyCode = async (val: string, item: OrganizaOption) => {
       console.log(e);
     })
     .finally(() => {
-      loaderPage(false);
+      hideLoader();
     });
   return option;
 };
 
 const fetchGovernmentCode = async (val: string, item: OrganizaOption) => {
   let option: GovermentOption[] = [];
-  loaderPage(true);
+  showLoader();
   await http
     .get(config.API.organizationAgencyCode(val))
     .then((res) => {
@@ -862,7 +864,7 @@ const fetchGovernmentCode = async (val: string, item: OrganizaOption) => {
       console.log(e);
     })
     .finally(() => {
-      loaderPage(false);
+      hideLoader();
     });
   return option;
 };
diff --git a/src/modules/02_organizational/views/MainOrgChart.vue b/src/modules/02_organizational/views/MainOrgChart.vue
index 6b3b16408..ffdd432d9 100644
--- a/src/modules/02_organizational/views/MainOrgChart.vue
+++ b/src/modules/02_organizational/views/MainOrgChart.vue
@@ -6,8 +6,13 @@ import config from "@/app.config";
 
 import { OrgChart } from "bma-org-chart";
 import "bma-org-chart/org-chart.css";
+import { useCounterMixin } from "@/stores/mixin";
 
 import chartData from "@/assets/orgChartData";
+
+const mixin = useCounterMixin();
+const { showLoader, hideLoader } = mixin;
+
 const dataSource = ref(chartData);
 // const dataSource = ref() // ข้อมูล Chart
 
@@ -21,8 +26,6 @@ const savePDF = () => {
   chartRef.value.savePDF();
 };
 
-const loader = ref<boolean>(false); //รอโหลด
-
 onMounted(async () => {
   await fetchTreeRoot();
   await fetchOrgChart();
@@ -32,7 +35,7 @@ onMounted(async () => {
  * อ่าน Root ของข้อมูลทั้งหมดก่อน
  */
 const fetchTreeRoot = async () => {
-  loader.value = true;
+  showLoader();
   let urlRequest = config.API.chartGetTreeRoot;
   await http
     .get(urlRequest)
@@ -45,12 +48,12 @@ const fetchTreeRoot = async () => {
       console.log(e);
     })
     .finally(() => {
-      loader.value = false;
+      hideLoader();
     });
 };
 
 const fetchOrgChart = async () => {
-  loader.value = true;
+  showLoader();
   let urlRequest = config.API.chartGetOrg(rootOrgID.value);
   await http
     .get(urlRequest)
@@ -65,7 +68,7 @@ const fetchOrgChart = async () => {
       console.log(e);
     })
     .finally(() => {
-      loader.value = false;
+      hideLoader();
     });
 };
 
@@ -111,7 +114,6 @@ const refreshChart = async (data: any) => {
       </div>
     </q-card>
   </div>
-  <full-loader :visibility="loader"></full-loader>
 </template>
 
 <style>
diff --git a/src/modules/02_organizational/views/MainReport.vue b/src/modules/02_organizational/views/MainReport.vue
index cef5c27fb..98ef135ef 100644
--- a/src/modules/02_organizational/views/MainReport.vue
+++ b/src/modules/02_organizational/views/MainReport.vue
@@ -1,123 +1,123 @@
 <template>
-	<div class="toptitle text-dark col-12 row items-center">รายงานบัญชี</div>
-	<q-card flat bordered class="col-12">
-		<div class="row col-12">
-			<q-tabs
-				v-model="tab"
-				no-caps
-				inline-label
-				align="left"
-				class="text-primary"
-			>
-				<q-tab name="audit1" label="บัญชี 1" />
-				<q-tab name="audit2" label="บัญชี 2" />
-				<q-tab name="audit3" label="บัญชี 3" />
-			</q-tabs>
-		</div>
-		<q-separator />
-		<q-tab-panels
-			v-model="tab"
-			transition-prev="jump-up"
-			transition-next="jump-up"
-			animated
-			swipeable
-			class="row col-12 text-dark"
-		>
-			<q-tab-panel name="audit1">
-				<div class="row col-12 items-center q-gutter-md">
-					<q-select
-						class="col-xs-12 col-sm-6"
-						v-model="goverment"
-						label="ระบุหน่วยงานที่ต้องการออกรายงาน"
-						dense
-						:options="govermentOP"
-						lazy-rules
-						hide-bottom-space
-						:readonly="false"
-						:borderless="false"
-						:outlined="true"
-						:hide-dropdown-icon="false"
-					/>
-					<q-btn
-						size="md"
-						icon="mdi-download"
-						round
-						flat
-						color="primary"
-						@click="clickAccount1"
-					>
-						<q-tooltip>ดาวน์โหลด</q-tooltip>
-					</q-btn>
-				</div>
-			</q-tab-panel>
-			<q-tab-panel name="audit2">
-				<div class="row col-12 items-center q-gutter-md">
-					<q-select
-						class="col-xs-12 col-sm-6"
-						v-model="goverment"
-						label="ระบุรหัสส่วนราชการ"
-						dense
-						:options="govermentOP"
-						lazy-rules
-						hide-bottom-space
-						:readonly="false"
-						:borderless="false"
-						:outlined="true"
-						:hide-dropdown-icon="false"
-					/>
+  <div class="toptitle text-dark col-12 row items-center">รายงานบัญชี</div>
+  <q-card flat bordered class="col-12">
+    <div class="row col-12">
+      <q-tabs
+        v-model="tab"
+        no-caps
+        inline-label
+        align="left"
+        class="text-primary"
+      >
+        <q-tab name="audit1" label="บัญชี 1" />
+        <q-tab name="audit2" label="บัญชี 2" />
+        <q-tab name="audit3" label="บัญชี 3" />
+      </q-tabs>
+    </div>
+    <q-separator />
+    <q-tab-panels
+      v-model="tab"
+      transition-prev="jump-up"
+      transition-next="jump-up"
+      animated
+      swipeable
+      class="row col-12 text-dark"
+    >
+      <q-tab-panel name="audit1">
+        <div class="row col-12 items-center q-gutter-md">
+          <q-select
+            class="col-xs-12 col-sm-6"
+            v-model="goverment"
+            label="ระบุหน่วยงานที่ต้องการออกรายงาน"
+            dense
+            :options="govermentOP"
+            lazy-rules
+            hide-bottom-space
+            :readonly="false"
+            :borderless="false"
+            :outlined="true"
+            :hide-dropdown-icon="false"
+          />
+          <q-btn
+            size="md"
+            icon="mdi-download"
+            round
+            flat
+            color="primary"
+            @click="clickAccount1"
+          >
+            <q-tooltip>ดาวน์โหลด</q-tooltip>
+          </q-btn>
+        </div>
+      </q-tab-panel>
+      <q-tab-panel name="audit2">
+        <div class="row col-12 items-center q-gutter-md">
+          <q-select
+            class="col-xs-12 col-sm-6"
+            v-model="goverment"
+            label="ระบุรหัสส่วนราชการ"
+            dense
+            :options="govermentOP"
+            lazy-rules
+            hide-bottom-space
+            :readonly="false"
+            :borderless="false"
+            :outlined="true"
+            :hide-dropdown-icon="false"
+          />
 
-					<q-btn
-						size="md"
-						icon="mdi-download"
-						flat
-						round
-						color="primary"
-						@click="clickAccount2"
-					>
-						<q-tooltip>ดาวน์โหลด</q-tooltip>
-					</q-btn>
-				</div>
-			</q-tab-panel>
-			<q-tab-panel name="audit3">
-				<div class="row col-12 items-center q-gutter-md">
-					<q-select
-						class="col-xs-12 col-sm-6"
-						v-model="goverment"
-						label="ระบุรหัสส่วนราชการ"
-						dense
-						:options="govermentOP"
-						lazy-rules
-						hide-bottom-space
-						:readonly="false"
-						:borderless="false"
-						:outlined="true"
-						:hide-dropdown-icon="false"
-					/>
-					<q-btn
-						size="md"
-						icon="mdi-download"
-						flat
-						round
-						color="primary"
-						@click="clickAccount3"
-					>
-						<q-tooltip>ดาวน์โหลด</q-tooltip>
-						<!-- <viewpdf 
+          <q-btn
+            size="md"
+            icon="mdi-download"
+            flat
+            round
+            color="primary"
+            @click="clickAccount2"
+          >
+            <q-tooltip>ดาวน์โหลด</q-tooltip>
+          </q-btn>
+        </div>
+      </q-tab-panel>
+      <q-tab-panel name="audit3">
+        <div class="row col-12 items-center q-gutter-md">
+          <q-select
+            class="col-xs-12 col-sm-6"
+            v-model="goverment"
+            label="ระบุรหัสส่วนราชการ"
+            dense
+            :options="govermentOP"
+            lazy-rules
+            hide-bottom-space
+            :readonly="false"
+            :borderless="false"
+            :outlined="true"
+            :hide-dropdown-icon="false"
+          />
+          <q-btn
+            size="md"
+            icon="mdi-download"
+            flat
+            round
+            color="primary"
+            @click="clickAccount3"
+          >
+            <q-tooltip>ดาวน์โหลด</q-tooltip>
+            <!-- <viewpdf 
                         :src="pdfSrc" 
                         :currentpage="pdfCurrentPage" 
                         :totalpage="pdfTotalPage" /> -->
-					</q-btn>
-				</div>
-			</q-tab-panel>
-		</q-tab-panels>
-	</q-card>
+          </q-btn>
+        </div>
+      </q-tab-panel>
+    </q-tab-panels>
+  </q-card>
 </template>
 <script setup lang="ts">
 import { onMounted, computed, ref, watch } from "vue";
 import { useQuasar } from "quasar";
 import { useCounterMixin } from "@/stores/mixin";
 import { useRouter, useRoute } from "vue-router";
-import { useDataStore } from "@/stores/data";
+
 import TableReport from "@/modules/02_organizational/components/TableReport.vue";
 import DialogHeader from "@/modules/02_organizational/components/DialogHeader.vue";
 import DialogFooter from "@/modules/02_organizational/components/DialogFooter.vue";
@@ -128,11 +128,10 @@ import type { RequestReport2 } from "@/modules/02_organizational/interface/reque
 import http from "@/plugins/http";
 import config from "@/app.config";
 
-const dataStore = useDataStore();
-const { loaderPage } = dataStore;
 const $q = useQuasar(); // show dialog
 const mixin = useCounterMixin();
-const { messageError, modalError, modalWarning } = mixin;
+const { messageError, modalError, modalWarning, showLoader, hideLoader } =
+  mixin;
 const router = useRouter();
 const route = useRoute();
 const { date2Thai, success, dateToISO } = mixin;
@@ -143,112 +142,112 @@ const goverment = ref<any>();
 const tab = ref<string>("audit1");
 
 const clickAccount1 = async () => {
-	if (goverment.value === null || goverment.value === undefined) {
-		modalWarning($q, "คำเตือน", "กรุณาเลือกหน่วยงานที่ต้องการออกรายงาน!");
-		return;
-	}
-	loaderPage(true);
-	await http
-		.get(config.API.getReportAccount1(goverment.value?.value as string), {
-			responseType: "blob",
-		})
-		.then((res) => {
-			var a = document.createElement("a");
-			a.href = URL.createObjectURL(res.data);
-			a.download = `รายงานบัญชี1_${goverment.value?.label}.pdf`;
-			// start download
-			a.click();
-		})
-		.catch((e) => {
-			messageError($q, e);
-		})
-		.finally(() => {
-			loaderPage(false);
-		});
+  if (goverment.value === null || goverment.value === undefined) {
+    modalWarning($q, "คำเตือน", "กรุณาเลือกหน่วยงานที่ต้องการออกรายงาน!");
+    return;
+  }
+  showLoader();
+  await http
+    .get(config.API.getReportAccount1(goverment.value?.value as string), {
+      responseType: "blob",
+    })
+    .then((res) => {
+      var a = document.createElement("a");
+      a.href = URL.createObjectURL(res.data);
+      a.download = `รายงานบัญชี1_${goverment.value?.label}.pdf`;
+      // start download
+      a.click();
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
 
-	// window.open(config.API.getReportAccount1(goverment.value));
+  // window.open(config.API.getReportAccount1(goverment.value));
 };
 
 const clickAccount2 = async () => {
-	if (goverment.value === null || goverment.value === undefined) {
-		modalWarning($q, "คำเตือน", "กรุณาเลือกหน่วยงานที่ต้องการออกรายงาน!");
-		return;
-	}
-	loaderPage(true);
-	await http
-		.get(config.API.getReportAccount2(goverment.value?.value as string), {
-			responseType: "blob",
-		})
-		.then((res) => {
-			var a = document.createElement("a");
-			a.href = URL.createObjectURL(res.data);
-			a.download = `รายงานบัญชี2_${goverment.value?.label}.pdf`;
-			// start download
-			a.click();
-		})
-		.catch((e) => {
-			messageError($q, e);
-		})
-		.finally(() => {
-			loaderPage(false);
-		});
-	//window.open(config.API.getReportAccount2(goverment.value));
+  if (goverment.value === null || goverment.value === undefined) {
+    modalWarning($q, "คำเตือน", "กรุณาเลือกหน่วยงานที่ต้องการออกรายงาน!");
+    return;
+  }
+  showLoader();
+  await http
+    .get(config.API.getReportAccount2(goverment.value?.value as string), {
+      responseType: "blob",
+    })
+    .then((res) => {
+      var a = document.createElement("a");
+      a.href = URL.createObjectURL(res.data);
+      a.download = `รายงานบัญชี2_${goverment.value?.label}.pdf`;
+      // start download
+      a.click();
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+  //window.open(config.API.getReportAccount2(goverment.value));
 };
 
 const clickAccount3 = async () => {
-	if (goverment.value === null || goverment.value === undefined) {
-		modalWarning($q, "คำเตือน", "กรุณาเลือกหน่วยงานที่ต้องการออกรายงาน!");
-		return;
-	}
-	loaderPage(true);
-	await http
-		.get(config.API.getReportAccount3(goverment.value?.value as string), {
-			responseType: "blob",
-		})
-		.then((res) => {
-			var a = document.createElement("a");
-			a.href = URL.createObjectURL(res.data);
-			a.download = `รายงานบัญชี3_${goverment.value?.label}.pdf`;
-			// start download
-			a.click();
-		})
-		.catch((e) => {
-			messageError($q, e);
-		})
-		.finally(() => {
-			loaderPage(false);
-		});
-	// window.open(config.API.getReportAccount3(goverment.value));
+  if (goverment.value === null || goverment.value === undefined) {
+    modalWarning($q, "คำเตือน", "กรุณาเลือกหน่วยงานที่ต้องการออกรายงาน!");
+    return;
+  }
+  showLoader();
+  await http
+    .get(config.API.getReportAccount3(goverment.value?.value as string), {
+      responseType: "blob",
+    })
+    .then((res) => {
+      var a = document.createElement("a");
+      a.href = URL.createObjectURL(res.data);
+      a.download = `รายงานบัญชี3_${goverment.value?.label}.pdf`;
+      // start download
+      a.click();
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+  // window.open(config.API.getReportAccount3(goverment.value));
 };
 
 const fetchOrganizationAgency = async () => {
-	loaderPage(true);
-	await http
-		// .get(config.API.organizationAgency)
-		.get(config.API.getOCType)
-		.then((res) => {
-			const data = res.data.result;
-			let option: any[] = [];
-			data.map((r: any) => {
-				option.push({
-					value: r.organizationId.toString(),
-					label: r.organizationName.toString(),
-				});
-			});
-			govermentOP.value = option;
-			govermentOPfilter.value = option;
-		})
-		.catch((e) => {
-			console.log(e);
-		})
-		.finally(() => {
-			loaderPage(false);
-		});
+  showLoader();
+  await http
+    // .get(config.API.organizationAgency)
+    .get(config.API.getOCType)
+    .then((res) => {
+      const data = res.data.result;
+      let option: any[] = [];
+      data.map((r: any) => {
+        option.push({
+          value: r.organizationId.toString(),
+          label: r.organizationName.toString(),
+        });
+      });
+      govermentOP.value = option;
+      govermentOPfilter.value = option;
+    })
+    .catch((e) => {
+      console.log(e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
 };
 
 onMounted(async () => {
-	loaderPage(false);
-	await fetchOrganizationAgency();
-	console.log(govermentOP.value);
+  hideLoader();
+  await fetchOrganizationAgency();
+  console.log(govermentOP.value);
 });
 </script>
diff --git a/src/modules/02_organizational/views/MainStructChart.vue b/src/modules/02_organizational/views/MainStructChart.vue
index 457afb226..faff8192b 100644
--- a/src/modules/02_organizational/views/MainStructChart.vue
+++ b/src/modules/02_organizational/views/MainStructChart.vue
@@ -5,84 +5,88 @@ import { ref, onMounted } from "vue";
 import http from "@/plugins/http";
 import config from "@/app.config";
 
+import { StructChart } from "structure-chart";
+import "structure-chart/structure-chart.css";
+import { useCounterMixin } from "@/stores/mixin";
 
-import { StructChart } from 'structure-chart'
-import 'structure-chart/structure-chart.css'
+const mixin = useCounterMixin();
+const { showLoader, hideLoader } = mixin;
 
 // import chartData from '@/assets/structChartData'
 // const dataSource = ref(chartData)
-const dataSource = ref() // ข้อมูล Chart
-const rootOrgID = ref() // org id ของ root ตัวปัจจุบันที่เลือกอยู่
-const dataSourceLock = ref() // ข้อมูลตั้งต้นของ Chart ใช้ให้กดกลับไปที่ home
-const chartRef = ref() // อ้างอิงไปที่ตัว chart
+const dataSource = ref(); // ข้อมูล Chart
+const rootOrgID = ref(); // org id ของ root ตัวปัจจุบันที่เลือกอยู่
+const dataSourceLock = ref(); // ข้อมูลตั้งต้นของ Chart ใช้ให้กดกลับไปที่ home
+const chartRef = ref(); // อ้างอิงไปที่ตัว chart
 const savePNG = () => {
-	chartRef.value.savePNG()
-}
+  chartRef.value.savePNG();
+};
 const savePDF = () => {
-	chartRef.value.savePDF()
-}
+  chartRef.value.savePDF();
+};
 
-const loader = ref<boolean>(false) // Loader
+const loader = ref<boolean>(false); // Loader
 
-onMounted(async() => {
-	await fetchTreeRoot()
-	await fetchStructChart()
-})
+onMounted(async () => {
+  await fetchTreeRoot();
+  await fetchStructChart();
+});
 
 /**
  * อ่าน Root ของข้อมูลทั้งหมดจาก ​​API ต้องทำเป็นอันดับแรก เพื่อจะได้รู้รากของข้อมูล
  */
 const fetchTreeRoot = async () => {
-	loader.value = true
-	let urlRequest = config.API.chartGetTreeRoot
-	await http.get(urlRequest)
-		.then((response) => {
-			if (response.data.result.length > 0) {
-				rootOrgID.value = response.data.result[0].organizationId
-			}
-		})
-		.catch((e) => {
-			console.log(e)
-		})
-		.finally(() => {
-			loader.value = false
-		})
+  showLoader();
+  let urlRequest = config.API.chartGetTreeRoot;
+  await http
+    .get(urlRequest)
+    .then((response) => {
+      if (response.data.result.length > 0) {
+        rootOrgID.value = response.data.result[0].organizationId;
+      }
+    })
+    .catch((e) => {
+      console.log(e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
 };
 
 /**
  * อ่านข้อมูล organization id ปัจจุบันจาก API ข้อมูลที่ได้เอามาสร้าง Structure Chart
  */
 const fetchStructChart = async () => {
-	loader.value = true
-	let urlRequest = config.API.chartGetStructure(rootOrgID.value)
-	await http.get(urlRequest)
-		.then((response) => {
-			if (response.data.result.length > 0) {
-				dataSource.value = response.data.result[0]
-				if (dataSourceLock.value === undefined)
-					dataSourceLock.value = dataSource.value
-				breadcrumbsGen()
-			}
-		})
-		.catch((e) => {
-			console.log(e)
-		})
-		.finally(() => {
-			loader.value = false
-		})
-}
+  showLoader();
+  let urlRequest = config.API.chartGetStructure(rootOrgID.value);
+  await http
+    .get(urlRequest)
+    .then((response) => {
+      if (response.data.result.length > 0) {
+        dataSource.value = response.data.result[0];
+        if (dataSourceLock.value === undefined)
+          dataSourceLock.value = dataSource.value;
+        breadcrumbsGen();
+      }
+    })
+    .catch((e) => {
+      console.log(e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+};
 
 /**
  * เมื่อมีการคลิกที่ Chart ให้อ่าน ID ของหน่วยงานที่ถูกคลิก แล้วดึงข้อมูล Chart ของหน่วยงานนั้น ๆ จาก API
  * @param data
  */
 const refreshChart = async (data: any) => {
-	if (data.value !== undefined)
-		rootOrgID.value = data.value
-	else rootOrgID.value = data
-	if (rootOrgID.value !== 0) await fetchStructChart()
-	if (data.value !== undefined) data.value = 0
-}
+  if (data.value !== undefined) rootOrgID.value = data.value;
+  else rootOrgID.value = data;
+  if (rootOrgID.value !== 0) await fetchStructChart();
+  if (data.value !== undefined) data.value = 0;
+};
 
 /**
  * === กระบวนการสร้าง Path ===
@@ -93,133 +97,142 @@ const refreshChart = async (data: any) => {
  * @param chart Array ของ Object ของหน่วยงานย่อยใน Tree นั้น ๆ
  */
 const chartTraverse = (id: any, chart: any): any => {
-	let _returnPath = []
-	for (const child of chart) {
-		if (child.deptID === id) {
-			_returnPath.push({
-				label: child.departmentName,
-				id: child.deptID
-			})
-			return _returnPath
-		} else {
-			if (typeof child.children !== "undefined" &&
-				child.children !== null &&
-				child.children.length > 0) {
-					let _result = chartTraverse(id, child.children)
-					if (typeof _result !== "undefined" && _result !== null) {
-						_returnPath.push({
-							label: child.departmentName,
-							id: child.deptID
-						})
-						return [..._returnPath, ...(_result ?? [])]
-					}
-				}
-		}
-	}
-}
+  let _returnPath = [];
+  for (const child of chart) {
+    if (child.deptID === id) {
+      _returnPath.push({
+        label: child.departmentName,
+        id: child.deptID,
+      });
+      return _returnPath;
+    } else {
+      if (
+        typeof child.children !== "undefined" &&
+        child.children !== null &&
+        child.children.length > 0
+      ) {
+        let _result = chartTraverse(id, child.children);
+        if (typeof _result !== "undefined" && _result !== null) {
+          _returnPath.push({
+            label: child.departmentName,
+            id: child.deptID,
+          });
+          return [..._returnPath, ...(_result ?? [])];
+        }
+      }
+    }
+  }
+};
 
 const findPath = (id: any) => {
-	let _path = []
-	_path.push({
-		label: dataSourceLock.value.departmentName,
-		id: dataSourceLock.value.deptID
-	})
-	if (dataSourceLock.value.deptID === id) return _path
-	if (dataSourceLock.value.children.length > 0) {
-		let _returnPath = chartTraverse(id, dataSourceLock.value.children)
-		return [..._path, ...(_returnPath ?? [])]
-	}
-}
+  let _path = [];
+  _path.push({
+    label: dataSourceLock.value.departmentName,
+    id: dataSourceLock.value.deptID,
+  });
+  if (dataSourceLock.value.deptID === id) return _path;
+  if (dataSourceLock.value.children.length > 0) {
+    let _returnPath = chartTraverse(id, dataSourceLock.value.children);
+    return [..._path, ...(_returnPath ?? [])];
+  }
+};
 
-const theBreadcrumb = ref()
+const theBreadcrumb = ref();
 /**
  * สร้าง Path Breadcrumbs
  */
 const breadcrumbsGen = () => {
-	if (rootOrgID.value !== 0) {
-		theBreadcrumb.value = []
-		const newPath = findPath(rootOrgID.value)
-		theBreadcrumb.value = newPath
-	}
-}
+  if (rootOrgID.value !== 0) {
+    theBreadcrumb.value = [];
+    const newPath = findPath(rootOrgID.value);
+    theBreadcrumb.value = newPath;
+  }
+};
 </script>
 
 <template>
-	<div class="toptitle text-dark col-12 row items-center">แผนภูมิโครงสร้าง</div>
-	<div class="text-dark">
-		<q-card flat bordered class="col-12 q-mt-sm">
-			<div class="q-pa-sm row wrap items-center">
-				<q-btn flat round color="primary" @click="savePNG()" icon="mdi-image">
-					<q-tooltip>
-						ดาวน์โหลด PNG
-					</q-tooltip>
-				</q-btn>
-				<q-btn flat round color="red-7" @click="savePDF()" icon="mdi-file-pdf-box">
-					<q-tooltip>
-						ดาวน์โหลด PDF
-					</q-tooltip>
-				</q-btn>
-				<div class="bg-grey-2 q-py-xs q-px-sm rounded-borders">
-					<q-breadcrumbs>
-						<template v-slot:separator>
-							<q-icon
-								size="1.5em"
-								name="chevron_right"
-								color="primary" />
-						</template>
-						<template v-for="link in theBreadcrumb" :key="link.id">
-							<q-breadcrumbs-el :label="link.label" @click="refreshChart(link.id)" class="breadcrumbs-link"/>
-						</template>
-					</q-breadcrumbs>
-				</div>
-			</div>
-			<q-separator/>
-			<div style="overflow-x: auto; overflow-y: auto" class="q-pt-md">
-				<StructChart
-					style="height: 70vh;"
-					ref="chartRef"
-					class="struct"
-					:dataSource="dataSource"
-					@onElementClick="refreshChart"
-				/>
-			</div>
-		</q-card>
-	</div>
-	<full-loader :visibility="loader"></full-loader>
+  <div class="toptitle text-dark col-12 row items-center">แผนภูมิโครงสร้าง</div>
+  <div class="text-dark">
+    <q-card flat bordered class="col-12 q-mt-sm">
+      <div class="q-pa-sm row wrap items-center">
+        <q-btn flat round color="primary" @click="savePNG()" icon="mdi-image">
+          <q-tooltip> ดาวน์โหลด PNG </q-tooltip>
+        </q-btn>
+        <q-btn
+          flat
+          round
+          color="red-7"
+          @click="savePDF()"
+          icon="mdi-file-pdf-box"
+        >
+          <q-tooltip> ดาวน์โหลด PDF </q-tooltip>
+        </q-btn>
+        <div class="bg-grey-2 q-py-xs q-px-sm rounded-borders">
+          <q-breadcrumbs>
+            <template v-slot:separator>
+              <q-icon size="1.5em" name="chevron_right" color="primary" />
+            </template>
+            <template v-for="link in theBreadcrumb" :key="link.id">
+              <q-breadcrumbs-el
+                :label="link.label"
+                @click="refreshChart(link.id)"
+                class="breadcrumbs-link"
+              />
+            </template>
+          </q-breadcrumbs>
+        </div>
+      </div>
+      <q-separator />
+      <div style="overflow-x: auto; overflow-y: auto" class="q-pt-md">
+        <StructChart
+          style="height: 70vh"
+          ref="chartRef"
+          class="struct"
+          :dataSource="dataSource"
+          @onElementClick="refreshChart"
+        />
+      </div>
+    </q-card>
+  </div>
+  <full-loader :visibility="loader"></full-loader>
 </template>
 
 <style>
 .breadcrumbs-link {
-	cursor: pointer;
+  cursor: pointer;
 }
-.struct .section-primary .header,.struct .section-secondary .header,.struct .section-tertiary .header {
-    font-size: 1rem !important;
+.struct .section-primary .header,
+.struct .section-secondary .header,
+.struct .section-tertiary .header {
+  font-size: 1rem !important;
 }
 
-.struct .section-primary .column-side .side-button,.struct .section-secondary .column-side .side-button, .struct .section-list .column-side .side-button{
-    background-color: #d9d9d96b !important;
-    color:#545459 !important;
-    width: 25px !important;
-    height: 25px !important;
-    font-size: 11px !important;
-    padding: 0px;
+.struct .section-primary .column-side .side-button,
+.struct .section-secondary .column-side .side-button,
+.struct .section-list .column-side .side-button {
+  background-color: #d9d9d96b !important;
+  color: #545459 !important;
+  width: 25px !important;
+  height: 25px !important;
+  font-size: 11px !important;
+  padding: 0px;
 }
 
-.struct .section-primary, .section-secondary,.struct .section-list{
-    padding: 6px 15px 6px 15px;
+.struct .section-primary,
+.section-secondary,
+.struct .section-list {
+  padding: 6px 15px 6px 15px;
 }
-.struct .section-primary .header{
-    font-weight: 600 !important;
+.struct .section-primary .header {
+  font-weight: 600 !important;
 }
 
-.struct .section-secondary .header{
-    font-weight: 400 !important;
+.struct .section-secondary .header {
+  font-weight: 400 !important;
 }
 
-
-.struct .subchild-more{
-    background-position: center  !important;
-    background-size: 14px  !important;
+.struct .subchild-more {
+  background-position: center !important;
+  background-size: 14px !important;
 }
-
 </style>
diff --git a/src/modules/02_organizational/views/MainTree.vue b/src/modules/02_organizational/views/MainTree.vue
index 9d5441556..c81ff4cbe 100644
--- a/src/modules/02_organizational/views/MainTree.vue
+++ b/src/modules/02_organizational/views/MainTree.vue
@@ -820,7 +820,7 @@ import http from "@/plugins/http";
 import config from "@/app.config";
 import { useCounterMixin } from "@/stores/mixin";
 import type { OrganizaOption } from "../interface/index/Main";
-import { useDataStore } from "@/stores/data";
+
 // import manageApiErrorMsg from "@/global/user_response_msg";
 import HistoryTable from "@/components/TableHistory.vue";
 import type { QTableProps } from "quasar";
@@ -857,11 +857,10 @@ const filterHistory = ref<string>(""); //search data table history
 const modalHistory = ref<boolean>(false); //modal ประวัติการแก้ไขข้อมูล
 
 //Global Variable
-const store = useDataStore();
+
 const mixin = useCounterMixin();
 
-const { loaderPage } = store; //แสดง load windows ขณะเรียก api
-const { success, messageError, dialogMessage } = mixin;
+const { success, messageError, dialogMessage, showLoader, hideLoader } = mixin;
 
 //Notification Component Variable
 const $q = useQuasar(); // show dialog
@@ -1029,7 +1028,7 @@ const loadJsonTree = async (fileName: string) => {
       manageApiErrorMsg(e);
     })
     .finally(() => {
-      //   loaderPage(false);
+      //   hideLoader();
     });
 };
 
@@ -1051,12 +1050,12 @@ const loadFileServer = async (node: any) => {
       manageApiErrorMsg(e);
     })
     .finally(() => {
-      //   loaderPage(false);
+      //   hideLoader();
     });
 };
 
 const isTreeHasDraft = async () => {
-  //   loaderPage(true);
+  //   showLoader();
   let orgHasDraft = false;
   let orgPoHasDraft = false;
   await http
@@ -1072,7 +1071,7 @@ const isTreeHasDraft = async () => {
       messageError($q, e);
     })
     .finally(() => {
-      //   loaderPage(false);
+      //   hideLoader();
     });
 
   await http
@@ -1088,7 +1087,7 @@ const isTreeHasDraft = async () => {
       messageError($q, e);
     })
     .finally(() => {
-      //   loaderPage(false);
+      //   hideLoader();
     });
 
   if (orgHasDraft || orgPoHasDraft) {
@@ -1103,7 +1102,7 @@ const isTreeHasDraft = async () => {
  */
 const fetchTreeRoot = async (isDraft: boolean) => {
   //   console.log(isDraft);
-  loaderPage(true);
+  showLoader();
   console.log("Call API14 GetTreeRoot");
   isShowEditTree.value = isDraft; // to show same tree that we fetch
   let request = "";
@@ -1130,7 +1129,7 @@ const fetchTreeRoot = async (isDraft: boolean) => {
       //   messageError($q, e);
     })
     .finally(() => {
-      loaderPage(false);
+      hideLoader();
       if (isDraft) {
         // ถ้าไม่ต้องการให้แตก node root on first load ก็ไม่ต้องใส่
         // ต้องอยู่ตรงนี้ ถ้าอยู่ตรง .then จะ error คาดว่ามันทำงานก่อนที่ tree จะ render เสร็จ แต่ก็อาจจะไม่ใช่
@@ -1148,7 +1147,7 @@ const fetchTreeRoot = async (isDraft: boolean) => {
 const fetchChildrenByParentId = async (node: any) => {
   //   console.log(isDraft);
   console.log("Call API4");
-  loaderPage(true);
+  showLoader();
   let request = "";
   if (isShowEditTree.value) {
     request = config.API.getDraftTreeNode(node.organizationId, node.keyId);
@@ -1168,12 +1167,12 @@ const fetchChildrenByParentId = async (node: any) => {
       manageApiErrorMsg(e);
     })
     .finally(() => {
-      loaderPage(false);
+      hideLoader();
     });
 };
 
 const fetchPublishFile = async () => {
-  loaderPage(true);
+  showLoader();
   await http
     .get(config.API.getPublishFileHistory)
     .then((res) => {
@@ -1191,7 +1190,7 @@ const fetchPublishFile = async () => {
       messageError($q, e);
     })
     .finally(async () => {
-      loaderPage(false);
+      hideLoader();
     });
 };
 
@@ -1207,7 +1206,7 @@ const onLazyLoad = (node: any) => {
      */
     console.log("Call LazyLoad");
     await fetchChildrenByParentId(node.node);
-    /**   loaderPage(true);
+    /**   showLoader();
     let request = "";
     if (isShowEditTree.value) {
       request = config.API.getDraftTreeNode(
@@ -1244,7 +1243,7 @@ const onLazyLoad = (node: any) => {
         // messageError($q, e);
       })
       .finally(() => {
-        loaderPage(false);
+        hideLoader();
       });*/
 
     node.done(node.node.children); //return ค่าให้ q-tree generate children
@@ -1299,7 +1298,7 @@ const apiDeleteOrg = () => {
   //   console.log("isShowEditTree", isShowEditTree.value);
   setTimeout(async () => {
     //delay for lazyLoad to be able to tricker again
-    loaderPage(true);
+    showLoader();
     isShowEditTree.value = true;
     await http
       .delete(config.API.delTreeOrgDraft(delStructureId.value))
@@ -1318,7 +1317,7 @@ const apiDeleteOrg = () => {
         messageError($q, e);
       })
       .finally(async () => {
-        loaderPage(false);
+        hideLoader();
         await isTreeHasDraft();
       });
   }, 20);
@@ -1347,7 +1346,7 @@ const apiDeletePosition = () => {
   isShowEditTree.value = false;
   setTimeout(async () => {
     //delay for lazyLoad to be able to tricker again
-    loaderPage(true);
+    showLoader();
     isShowEditTree.value = true;
     await http
       .delete(config.API.delTreePositionDraft(delStructureId.value))
@@ -1364,7 +1363,7 @@ const apiDeletePosition = () => {
         messageError($q, e);
       })
       .finally(async () => {
-        loaderPage(false);
+        hideLoader();
         await isTreeHasDraft();
       });
   }, 20);
@@ -1377,7 +1376,7 @@ const apiDeletePosition = () => {
  * ฟังก์ชัน clear data แบบร่าง
  */
 const deleteDraft = async () => {
-  loaderPage(true);
+  showLoader();
   await http
     .put(config.API.delTreeOrgPoDraft)
     .then((res) => {
@@ -1389,7 +1388,7 @@ const deleteDraft = async () => {
       messageError($q, e);
     })
     .finally(async () => {
-      loaderPage(false);
+      hideLoader();
       router.go(0);
       await isTreeHasDraft();
     });
@@ -1399,7 +1398,7 @@ const deleteDraft = async () => {
  * ฟังก์ชันเผยแพร่แบบร่าง
  */
 const publishDraft = async () => {
-  loaderPage(true);
+  showLoader();
   await http
     .put(config.API.publishOrgPoDraft)
     .then((res) => {
@@ -1425,7 +1424,7 @@ const publishDraft = async () => {
       messageError($q, e);
     })
     .finally(async () => {
-      loaderPage(false);
+      hideLoader();
       await isTreeHasDraft();
     });
 };
@@ -1536,7 +1535,7 @@ const addStructure = async (node: any) => {
     });
     // console.log(node.organizationId);
     console.log("Call API1");
-    loaderPage(true);
+    showLoader();
     isShowEditTree.value = true; //ต้องกลับมาแสดง editTree อีกครั้ง & trigger lazyLoad โดย setExpanded
     await http
       .post(config.API.addTreeDraft, {
@@ -1557,7 +1556,7 @@ const addStructure = async (node: any) => {
         messageError($q, e);
       })
       .finally(async () => {
-        loaderPage(false);
+        hideLoader();
 
         popupAddOrganization.value = false;
         await isTreeHasDraft();
@@ -1589,7 +1588,7 @@ const editOrgStructure = async (node: any) => {
   if (organizCheck == true) {
     // console.log(node.organizationId);
     console.log("Call API13");
-    loaderPage(true);
+    showLoader();
     isShowEditTree.value = true; //end prepare for tricker LazyLoad
     await http
       .put(config.API.editTreeOrgDraft(node.organizationId), {
@@ -1629,7 +1628,7 @@ const editOrgStructure = async (node: any) => {
         messageError($q, e);
       })
       .finally(async () => {
-        loaderPage(false);
+        hideLoader();
         popupEditSelectedOrganization.value = false;
         await isTreeHasDraft();
       });
@@ -1655,7 +1654,7 @@ const editPositionStructure = async (node: any) => {
 
   if (positionCheck == true) {
     console.log("Call API3");
-    loaderPage(true);
+    showLoader();
     isShowEditTree.value = true; //end prepare for tricker LazyLoad
     await http
       .put(config.API.editTreePositionDraft(node.organizationPositionId), {
@@ -1680,7 +1679,7 @@ const editPositionStructure = async (node: any) => {
         messageError($q, e);
       })
       .finally(async () => {
-        loaderPage(false);
+        hideLoader();
         popupEditSelectedPosition.value = false;
         await isTreeHasDraft();
       });
@@ -1696,7 +1695,7 @@ const clickHistory = async () => {
   modalHistory.value = true;
   //   rowsHistory.value = rawHistory.value.filter((f: any) => f.id == row.id);
 
-  loaderPage(true);
+  showLoader();
   await http
     .get(config.API.getTreeHistory)
     .then((res) => {
@@ -1722,7 +1721,7 @@ const clickHistory = async () => {
       //   messageError($q, e);
     })
     .finally(() => {
-      loaderPage(false);
+      hideLoader();
     });
 };
 
diff --git a/src/modules/02_organizational/views/MainTreeEmployee.vue b/src/modules/02_organizational/views/MainTreeEmployee.vue
index dd56b1aa5..8278e3329 100644
--- a/src/modules/02_organizational/views/MainTreeEmployee.vue
+++ b/src/modules/02_organizational/views/MainTreeEmployee.vue
@@ -674,15 +674,13 @@ import type {
 import type { Pagination } from "@/modules/03_recruiting/interface/index/Main";
 import http from "@/plugins/http";
 import config from "@/app.config";
-import { useDataStore } from "@/stores/data";
-import type { QTableProps } from "quasar";
 
-const dataStore = useDataStore();
-const { loaderPage } = dataStore;
+import type { QTableProps } from "quasar";
 
 const $q = useQuasar(); // show dialog
 const mixin = useCounterMixin();
-const { date2Thai, success, modalError, messageError } = mixin;
+const { date2Thai, success, modalError, messageError, showLoader, hideLoader } =
+  mixin;
 const store = useOrganizationalDataStore();
 const { organizationalData, changeOrganizationalColumns } = store;
 const initialPagination = ref<Pagination>({
@@ -893,7 +891,7 @@ watch(visibleColumns, async (count: String[], prevCount: String[]) => {
 });
 
 onMounted(async () => {
-  loaderPage(false);
+  hideLoader();
   await fetchOrganization();
   await fetchOrganizationAgency();
   await fetchOrganizationGovernmentAgency();
@@ -906,7 +904,7 @@ onMounted(async () => {
  * ฟังก์ชัน get data ล่าสุด
  */
 const fetchData = async () => {
-  loaderPage(true);
+  showLoader();
   await http
     .get(config.API.organizationEmployee)
     .then((res) => {
@@ -1008,7 +1006,7 @@ const fetchData = async () => {
       messageError($q, e);
     })
     .finally(() => {
-      loaderPage(false);
+      hideLoader();
     });
 };
 
@@ -1016,7 +1014,7 @@ const fetchData = async () => {
  * get รายการ โครงสร้าง
  */
 const fetchOrganization = async () => {
-  loaderPage(true);
+  showLoader();
   await http
     .get(config.API.organizationMain)
     .then((res) => {
@@ -1075,7 +1073,7 @@ const fetchOrganization = async () => {
       messageError($q, e);
     })
     .finally(() => {
-      loaderPage(false);
+      hideLoader();
     });
 };
 
@@ -1083,7 +1081,7 @@ const fetchOrganization = async () => {
  *  หน่วยงานต้นสังกัด
  */
 const fetchOrganizationAgency = async () => {
-  loaderPage(true);
+  showLoader();
   await http
     .get(config.API.listOrganizationHistoryAgency("หน่วยงาน"))
     .then((res) => {
@@ -1102,7 +1100,7 @@ const fetchOrganizationAgency = async () => {
       messageError($q, e);
     })
     .finally(() => {
-      loaderPage(false);
+      hideLoader();
     });
 };
 
@@ -1110,7 +1108,7 @@ const fetchOrganizationAgency = async () => {
  *  ส่วนราชการต้นสังกัด
  */
 const fetchOrganizationGovernmentAgency = async () => {
-  loaderPage(true);
+  showLoader();
   await http
     .get(config.API.listOrganizationHistoryAgency("ส่วนราชการ"))
     .then((res) => {
@@ -1129,7 +1127,7 @@ const fetchOrganizationGovernmentAgency = async () => {
       messageError($q, e);
     })
     .finally(() => {
-      loaderPage(false);
+      hideLoader();
     });
 };
 
@@ -1137,7 +1135,7 @@ const fetchOrganizationGovernmentAgency = async () => {
  *  รหัสหน่วยงาน
  */
 const fetchOrganizationAgencyCode = async () => {
-  loaderPage(true);
+  showLoader();
   await http
     .get(config.API.organizationCode)
     .then((res) => {
@@ -1158,13 +1156,13 @@ const fetchOrganizationAgencyCode = async () => {
       messageError($q, e);
     })
     .finally(() => {
-      loaderPage(false);
+      hideLoader();
     });
 };
 
 const fetchAgencyCode = async (val: string) => {
   let option: GovermentOption[] = [];
-  loaderPage(true);
+  showLoader();
   await http
     .get(config.API.organizationAgencyCode(val))
     .then((res) => {
@@ -1184,7 +1182,7 @@ const fetchAgencyCode = async (val: string) => {
       messageError($q, e);
     })
     .finally(() => {
-      loaderPage(false);
+      hideLoader();
     });
   return option;
 };
@@ -1193,7 +1191,7 @@ const fetchAgencyCode = async (val: string) => {
  * get รายการ ตำแหน่ง
  */
 const fetchPosition = async () => {
-  loaderPage(true);
+  showLoader();
   await http
     .get(config.API.positionEmployee)
     .then((res) => {
@@ -1285,7 +1283,7 @@ const fetchPosition = async () => {
       messageError($q, e);
     })
     .finally(() => {
-      loaderPage(false);
+      hideLoader();
     });
 };
 
@@ -1309,7 +1307,7 @@ const clickSave = async () => {
  */
 const saveData = async () => {
   modal.value = false;
-  loaderPage(true);
+  showLoader();
   await http
     .post(config.API.organizationEmployee, {
       organizationOrganizationId: organizationOrganizationId.value,
@@ -1361,7 +1359,7 @@ const saveData = async () => {
  */
 const editData = async () => {
   modal.value = false;
-  loaderPage(true);
+  showLoader();
   await http
     .put(config.API.organizationEmployeeId(id.value), {
       organizationOrganizationId: organizationOrganizationId.value,
@@ -1426,7 +1424,7 @@ const clickDelete = (id: string) => {
 };
 
 const deleteData = async (id: string) => {
-  loaderPage(true);
+  showLoader();
   await http
     .delete(config.API.organizationEmployeeId(id))
     .then((res) => {
@@ -1436,7 +1434,7 @@ const deleteData = async (id: string) => {
       messageError($q, e);
     })
     .finally(async () => {
-      loaderPage(false);
+      hideLoader();
       await fetchData();
     });
 };
diff --git a/src/modules/02_organizational/views/ManageReport2.vue b/src/modules/02_organizational/views/ManageReport2.vue
index 7e73944a7..c8a146dc6 100644
--- a/src/modules/02_organizational/views/ManageReport2.vue
+++ b/src/modules/02_organizational/views/ManageReport2.vue
@@ -108,7 +108,7 @@ import { onMounted, computed, ref, watch } from "vue";
 import { useQuasar, QForm } from "quasar";
 import { useCounterMixin } from "@/stores/mixin";
 import { useRouter, useRoute } from "vue-router";
-import { useDataStore } from "@/stores/data";
+
 import TableReport from "@/modules/02_organizational/components/TableReport.vue";
 import type { Columns } from "@/modules/02_organizational/interface/index/Main";
 import http from "@/plugins/http";
@@ -116,13 +116,12 @@ import config from "@/app.config";
 import type { treeTab } from "@/modules/04_registry/interface/index/Main";
 import type { ResponseTree } from "@/modules/02_organizational/interface/response/Mapping";
 
-const dataStore = useDataStore();
-const { loaderPage } = dataStore;
 const $q = useQuasar(); // show dialog
 const mixin = useCounterMixin();
 const router = useRouter();
 const route = useRoute();
-const { date2Thai, success, dateToISO, modalError } = mixin;
+const { date2Thai, success, dateToISO, modalError, showLoader, hideLoader } =
+  mixin;
 const filter = ref<string>(""); //search data table
 const visibleColumns = ref<String[]>([]);
 
@@ -273,7 +272,7 @@ onMounted(async () => {
 });
 
 const nodeTree = async () => {
-  loaderPage(true);
+  showLoader();
   await http
     .get(config.API.profileOrganizRoot)
     .then((res: any) => {
@@ -292,7 +291,7 @@ const nodeTree = async () => {
     })
     .catch((e: any) => {})
     .finally(() => {
-      loaderPage(false);
+      hideLoader();
     });
 };
 
@@ -306,7 +305,7 @@ const clickTree = () => {
 };
 
 const onHistory = async () => {
-  loaderPage(true);
+  showLoader();
   await http
     .get(config.API.report2HistoryId(selected.value))
     .then((res) => {
@@ -329,13 +328,13 @@ const onHistory = async () => {
       );
     })
     .finally(async () => {
-      loaderPage(false);
+      hideLoader();
     });
 };
 
 const doSearch = async () => {
   //ทำไว้แล้ว เหลือ ใส่ type
-  loaderPage(true);
+  showLoader();
   await http
     .get(config.API.report2TreeId(selected.value))
     .then((res) => {
@@ -370,7 +369,7 @@ const doSearch = async () => {
     })
     .catch((e) => {})
     .finally(() => {
-      loaderPage(false);
+      hideLoader();
     });
 };
 
@@ -386,7 +385,7 @@ const onConfirm = async () => {
     ok: "ยืนยัน",
     persistent: true,
   }).onOk(async () => {
-    loaderPage(true);
+    showLoader();
     await http
       .get(config.API.report2DoneId(selected.value))
       .then((res) => {
@@ -394,7 +393,7 @@ const onConfirm = async () => {
       })
       .catch((e) => {})
       .finally(async () => {
-        loaderPage(false);
+        hideLoader();
         await doSearch();
       });
   });
diff --git a/src/modules/02_organizational/views/ManageReport2Add.vue b/src/modules/02_organizational/views/ManageReport2Add.vue
index bb0d3e27b..ea5e8c89a 100644
--- a/src/modules/02_organizational/views/ManageReport2Add.vue
+++ b/src/modules/02_organizational/views/ManageReport2Add.vue
@@ -574,7 +574,7 @@ import { onMounted, computed, ref, watch } from "vue";
 import { useQuasar } from "quasar";
 import { useCounterMixin } from "@/stores/mixin";
 import { useRouter, useRoute } from "vue-router";
-import { useDataStore } from "@/stores/data";
+
 import TableReport from "@/modules/02_organizational/components/TableReport.vue";
 import DialogHeader from "@/modules/02_organizational/components/DialogHeader.vue";
 import DialogFooter from "@/modules/02_organizational/components/DialogFooter.vue";
@@ -585,13 +585,11 @@ import type { RequestReport2 } from "@/modules/02_organizational/interface/reque
 import http from "@/plugins/http";
 import config from "@/app.config";
 
-const dataStore = useDataStore();
-const { loaderPage } = dataStore;
 const $q = useQuasar(); // show dialog
 const mixin = useCounterMixin();
 const router = useRouter();
 const route = useRoute();
-const { date2Thai, success, dateToISO } = mixin;
+const { date2Thai, success, dateToISO, showLoader, hideLoader } = mixin;
 const id = ref<string>("");
 const myForm = ref<QForm | null>(null); //form data input
 
@@ -669,10 +667,10 @@ const sideWorkOPfilter = ref<DataOption[]>([]);
 const levelOPfilter = ref<DataOption[]>([]);
 
 onMounted(async () => {
-  loaderPage(false);
+  hideLoader();
   if (route.params.id != undefined) {
     id.value = route.params.id.toString();
-    loaderPage(true);
+    showLoader();
 
     await fetchGoverment();
     // await fetchAgency();
@@ -685,12 +683,12 @@ onMounted(async () => {
     await fetchLevel();
 
     await fetchData();
-    loaderPage(false);
+    hideLoader();
   }
 });
 
 const fetchData = async () => {
-  loaderPage(true);
+  showLoader();
   await http
     .get(config.API.report2Id(id.value))
     .then(async (res) => {
@@ -750,7 +748,7 @@ const fetchData = async () => {
     })
     .catch((e) => {})
     .finally(() => {
-      loaderPage(false);
+      hideLoader();
     });
 };
 
@@ -766,7 +764,7 @@ const checkSave = async () => {
 
 const saveData = async () => {
   //   console.log(myData.value);
-  loaderPage(true);
+  showLoader();
   const body: RequestReport2 = {
     organizationShortNameId: myData.value.goverment2,
     organizationOrganizationId: myData.value.agency2,
@@ -787,7 +785,7 @@ const saveData = async () => {
     })
     .catch((e) => {})
     .finally(() => {
-      loaderPage(false);
+      hideLoader();
     });
 };
 
@@ -797,7 +795,7 @@ const clickBack = () => {
 
 //รหัสส่วนราชการ
 const fetchGoverment = async () => {
-  //   loaderPage(true);
+  //   showLoader();
   await http
     .get(config.API.organizationShortName)
     .then((res) => {
@@ -823,12 +821,12 @@ const fetchGoverment = async () => {
     })
     .catch((e) => {})
     .finally(() => {
-      //   loaderPage(false);
+      //   hideLoader();
     });
 };
 
 const updateGoverment = async (id: string) => {
-  //   loaderPage(true);
+  //   showLoader();
   await http
     .get(config.API.getPositionMasterPositionNumberId(id))
     .then((res) => {
@@ -917,13 +915,13 @@ const updateGoverment = async (id: string) => {
     })
     .catch((e) => {})
     .finally(() => {
-      //   loaderPage(false);
+      //   hideLoader();
     });
 };
 
 // //ตำแหน่งเลขที่
 const fetchPositionNum = async () => {
-  //   loaderPage(true);
+  //   showLoader();
   await http
     .get(config.API.getPositionMasterPositionNumber)
     .then((res) => {
@@ -937,13 +935,13 @@ const fetchPositionNum = async () => {
     })
     .catch((e) => {})
     .finally(() => {
-      //   loaderPage(false);
+      //   hideLoader();
     });
 };
 
 //ตำแหน่งประเภท
 const fetchCategory = async () => {
-  //   loaderPage(true);
+  //   showLoader();
   await http
     .get(config.API.positionType)
     .then((res) => {
@@ -957,13 +955,13 @@ const fetchCategory = async () => {
     })
     .catch((e) => {})
     .finally(() => {
-      //   loaderPage(false);
+      //   hideLoader();
     });
 };
 
 //ตำแหน่งทางการบริหาร
 const fetchPositionManage = async () => {
-  //   loaderPage(true);
+  //   showLoader();
   await http
     .get(config.API.positionExecutive)
     .then((res) => {
@@ -977,13 +975,13 @@ const fetchPositionManage = async () => {
     })
     .catch((e) => {})
     .finally(() => {
-      //   loaderPage(false);
+      //   hideLoader();
     });
 };
 
 //ด้านทางบริหาร
 const fetchSideManage = async () => {
-  //   loaderPage(true);
+  //   showLoader();
   await http
     .get(config.API.positionExecutiveSide)
     .then((res) => {
@@ -997,13 +995,13 @@ const fetchSideManage = async () => {
     })
     .catch((e) => {})
     .finally(() => {
-      //   loaderPage(false);
+      //   hideLoader();
     });
 };
 
 //ตำแหน่งในสายงาน
 const fetchPositionWork = async () => {
-  //   loaderPage(true);
+  //   showLoader();
   await http
     .get(config.API.positionPath)
     .then((res) => {
@@ -1017,13 +1015,13 @@ const fetchPositionWork = async () => {
     })
     .catch((e) => {})
     .finally(() => {
-      //   loaderPage(false);
+      //   hideLoader();
     });
 };
 
 //ด้าน/สาขา
 const fetchSideWork = async () => {
-  //   loaderPage(true);
+  //   showLoader();
   await http
     .get(config.API.positionSide)
     .then((res) => {
@@ -1037,13 +1035,13 @@ const fetchSideWork = async () => {
     })
     .catch((e) => {})
     .finally(() => {
-      //   loaderPage(false);
+      //   hideLoader();
     });
 };
 
 //ระดับตำแหน่ง
 const fetchLevel = async () => {
-  //   loaderPage(true);
+  //   showLoader();
   await http
     .get(config.API.positionLevel)
     .then((res) => {
@@ -1057,7 +1055,7 @@ const fetchLevel = async () => {
     })
     .catch((e) => {})
     .finally(() => {
-      //   loaderPage(false);
+      //   hideLoader();
     });
 };
 
diff --git a/src/modules/02_organizational/views/ManageReport2History.vue b/src/modules/02_organizational/views/ManageReport2History.vue
index ae8be4187..89983c82d 100644
--- a/src/modules/02_organizational/views/ManageReport2History.vue
+++ b/src/modules/02_organizational/views/ManageReport2History.vue
@@ -336,7 +336,7 @@ import { onMounted, ref } from "vue";
 import { useCounterMixin } from "@/stores/mixin";
 import { useRouter, useRoute } from "vue-router";
 import { useQuasar } from "quasar";
-import { useDataStore } from "@/stores/data";
+
 import http from "@/plugins/http";
 import config from "@/app.config";
 import type {
@@ -344,14 +344,12 @@ import type {
   ResponseHistoryHead,
 } from "@/modules/02_organizational/interface/response/Mapping";
 
-const dataStore = useDataStore();
 const $q = useQuasar(); // show dia
 const mixin = useCounterMixin();
 const router = useRouter();
 const route = useRoute();
 
-const { loaderPage } = dataStore;
-const { date2Thai, success, dateToISO } = mixin;
+const { date2Thai, success, dateToISO, showLoader, hideLoader } = mixin;
 const id = ref<string>("");
 const previous = ref<boolean>(false);
 const next = ref<boolean>(false);
@@ -360,7 +358,7 @@ const historyHead = ref<ResponseHistoryHead[]>([]);
 const historyData = ref<ResponseHistory[]>([]);
 
 onMounted(async () => {
-  loaderPage(false);
+  hideLoader();
   if (route.params.id != undefined) {
     id.value = route.params.id.toString();
 
@@ -386,7 +384,7 @@ const clickPreviousNext = async (page: string) => {
 };
 
 const fetchHistory = async () => {
-  loaderPage(true);
+  showLoader();
   await http
     .get(config.API.report2HistoryId(id.value))
     .then((res) => {
@@ -402,7 +400,7 @@ const fetchHistory = async () => {
     })
     .catch((e) => {})
     .finally(async () => {
-      loaderPage(false);
+      hideLoader();
       if (historyHead.value.length > 1) {
         next.value = true;
         previous.value = false;
@@ -414,7 +412,7 @@ const fetchHistory = async () => {
 };
 
 const fetchData = async () => {
-  loaderPage(true);
+  showLoader();
   await http
     .get(
       config.API.report2HistoryDetailId(
@@ -455,7 +453,7 @@ const fetchData = async () => {
     })
     .catch((e) => {})
     .finally(async () => {
-      loaderPage(false);
+      hideLoader();
     });
 };
 </script>
diff --git a/src/modules/02_organizational/views/Report.vue b/src/modules/02_organizational/views/Report.vue
index 4e8b2998a..ccc0d7cc5 100644
--- a/src/modules/02_organizational/views/Report.vue
+++ b/src/modules/02_organizational/views/Report.vue
@@ -1,116 +1,98 @@
 <template>
-	<div class="toptitle text-dark col-12 row items-center">รายงานบัญชี</div>
-	<div class="col-12 row"></div>
-	<q-card flat bordered class="col-12">
-		<div class="row col-12">
-			<q-tabs
-				v-model="tab"
-				no-caps
-				inline-label
-				align="left"
-				active-class="text-primary"
-				class="text-grey-7"
-			>
-				<q-tab name="audit1" label="บัญชี 1" />
-				<q-tab name="audit2" label="บัญชี 2" />
-				<q-tab name="audit3" label="บัญชี 3" />
-			</q-tabs>
-		</div>
-		<q-separator />
-		<q-tab-panels
-			v-model="tab"
-			transition-prev="jump-up"
-			transition-next="jump-up"
-			animated
-			swipeable
-			class="row col-12 text-dark"
-		>
-			<q-tab-panel name="audit1">
-				<div class="row col-12 items-center q-gutter-md">
-					<span class="text-subtitle1 text-weight-medium"
-						>รายงานบัญชีฉบับที่ 1</span
-					>
-					<q-select
-						class="col-xs-12 col-sm-6"
-						v-model="goverment"
-						label="รหัสส่วนราชการ"
-						dense
-						emit-value
-						map-options
-						option-label="name"
-						:options="govermentOP"
-						option-value="id"
-						lazy-rules
-						hide-bottom-space
-						:readonly="true"
-						:borderless="true"
-						:outlined="false"
-						:hide-dropdown-icon="true"
-					/>
-					<q-btn
-						size="md"
-						icon="mdi-download"
-						round
-						flat
-						color="primary"
-					>
-						<q-tooltip>ดาวน์โหลด</q-tooltip>
-					</q-btn>
-					<!-- <viewpdf 
+  <div class="toptitle text-dark col-12 row items-center">รายงานบัญชี</div>
+  <div class="col-12 row"></div>
+  <q-card flat bordered class="col-12">
+    <div class="row col-12">
+      <q-tabs
+        v-model="tab"
+        no-caps
+        inline-label
+        align="left"
+        active-class="text-primary"
+        class="text-grey-7"
+      >
+        <q-tab name="audit1" label="บัญชี 1" />
+        <q-tab name="audit2" label="บัญชี 2" />
+        <q-tab name="audit3" label="บัญชี 3" />
+      </q-tabs>
+    </div>
+    <q-separator />
+    <q-tab-panels
+      v-model="tab"
+      transition-prev="jump-up"
+      transition-next="jump-up"
+      animated
+      swipeable
+      class="row col-12 text-dark"
+    >
+      <q-tab-panel name="audit1">
+        <div class="row col-12 items-center q-gutter-md">
+          <span class="text-subtitle1 text-weight-medium"
+            >รายงานบัญชีฉบับที่ 1</span
+          >
+          <q-select
+            class="col-xs-12 col-sm-6"
+            v-model="goverment"
+            label="รหัสส่วนราชการ"
+            dense
+            emit-value
+            map-options
+            option-label="name"
+            :options="govermentOP"
+            option-value="id"
+            lazy-rules
+            hide-bottom-space
+            :readonly="true"
+            :borderless="true"
+            :outlined="false"
+            :hide-dropdown-icon="true"
+          />
+          <q-btn size="md" icon="mdi-download" round flat color="primary">
+            <q-tooltip>ดาวน์โหลด</q-tooltip>
+          </q-btn>
+          <!-- <viewpdf 
                         :src="pdfSrc" 
                         :currentpage="pdfCurrentPage" 
                         :totalpage="pdfTotalPage" /> -->
-				</div>
-			</q-tab-panel>
-			<q-tab-panel name="audit2">
-				<div class="row col-12 items-center q-gutter-md">
-					<span class="text-subtitle1 text-weight-medium"
-						>รายงานบัญชีฉบับที่ 2</span
-					>
-					<q-btn
-						size="md"
-						icon="mdi-download"
-						flat
-						round
-						color="primary"
-					>
-						<q-tooltip>ดาวน์โหลด</q-tooltip>
-					</q-btn>
-					<!-- <viewpdf 
+        </div>
+      </q-tab-panel>
+      <q-tab-panel name="audit2">
+        <div class="row col-12 items-center q-gutter-md">
+          <span class="text-subtitle1 text-weight-medium"
+            >รายงานบัญชีฉบับที่ 2</span
+          >
+          <q-btn size="md" icon="mdi-download" flat round color="primary">
+            <q-tooltip>ดาวน์โหลด</q-tooltip>
+          </q-btn>
+          <!-- <viewpdf 
                         :src="pdfSrc" 
                         :currentpage="pdfCurrentPage" 
                         :totalpage="pdfTotalPage" /> -->
-				</div>
-			</q-tab-panel>
-			<q-tab-panel name="audit3">
-				<div class="row col-12 items-center q-gutter-md">
-					<span class="text-subtitle1 text-weight-medium"
-						>รายงานบัญชีฉบับที่ 3</span
-					>
-					<q-btn
-						size="md"
-						icon="mdi-download"
-						flat
-						round
-						color="primary"
-					>
-						<q-tooltip>ดาวน์โหลด</q-tooltip>
-					</q-btn>
-					<!-- <viewpdf 
+        </div>
+      </q-tab-panel>
+      <q-tab-panel name="audit3">
+        <div class="row col-12 items-center q-gutter-md">
+          <span class="text-subtitle1 text-weight-medium"
+            >รายงานบัญชีฉบับที่ 3</span
+          >
+          <q-btn size="md" icon="mdi-download" flat round color="primary">
+            <q-tooltip>ดาวน์โหลด</q-tooltip>
+          </q-btn>
+          <!-- <viewpdf 
                         :src="pdfSrc" 
                         :currentpage="pdfCurrentPage" 
                         :totalpage="pdfTotalPage" /> -->
-				</div>
-			</q-tab-panel>
-		</q-tab-panels>
-	</q-card>
+        </div>
+      </q-tab-panel>
+    </q-tab-panels>
+  </q-card>
 </template>
 <script setup lang="ts">
 import { onMounted, computed, ref, watch } from "vue";
 import { useQuasar } from "quasar";
 import { useCounterMixin } from "@/stores/mixin";
 import { useRouter, useRoute } from "vue-router";
-import { useDataStore } from "@/stores/data";
+
 import TableReport from "@/modules/02_organizational/components/TableReport.vue";
 import DialogHeader from "@/modules/02_organizational/components/DialogHeader.vue";
 import DialogFooter from "@/modules/02_organizational/components/DialogFooter.vue";
@@ -121,13 +103,11 @@ import type { RequestReport2 } from "@/modules/02_organizational/interface/reque
 import http from "@/plugins/http";
 import config from "@/app.config";
 
-const dataStore = useDataStore();
-const { loaderPage } = dataStore;
 const $q = useQuasar(); // show dialog
 const mixin = useCounterMixin();
 const router = useRouter();
 const route = useRoute();
-const { date2Thai, success, dateToISO } = mixin;
+const { date2Thai, success, dateToISO, showLoader, hideLoader } = mixin;
 
 const govermentOP = ref<DataOption[]>([]);
 const govermentOPfilter = ref<DataOption[]>([]);
@@ -135,32 +115,32 @@ const goverment = ref<string>("");
 const tab = ref<string>("audit1");
 
 const fetchOrganizationAgency = async () => {
-	loaderPage(true);
-	await http
-		// .get(config.API.organizationAgency)
-		.get(config.API.listOrganizationAgency("หน่วยงาน"))
-		.then((res) => {
-			const data = res.data.result;
-			let option: DataOption[] = [];
-			data.map((r: any) => {
-				option.push({
-					id: r.organizationId.toString(),
-					name: r.organizationName.toString(),
-				});
-			});
-			govermentOP.value = option;
-			govermentOPfilter.value = option;
-		})
-		.catch((e) => {
-			console.log(e);
-		})
-		.finally(() => {
-			loaderPage(false);
-		});
+  showLoader();
+  await http
+    // .get(config.API.organizationAgency)
+    .get(config.API.listOrganizationAgency("หน่วยงาน"))
+    .then((res) => {
+      const data = res.data.result;
+      let option: DataOption[] = [];
+      data.map((r: any) => {
+        option.push({
+          id: r.organizationId.toString(),
+          name: r.organizationName.toString(),
+        });
+      });
+      govermentOP.value = option;
+      govermentOPfilter.value = option;
+    })
+    .catch((e) => {
+      console.log(e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
 };
 
 onMounted(async () => {
-	loaderPage(false);
-	await fetchOrganizationAgency();
+  hideLoader();
+  await fetchOrganizationAgency();
 });
 </script>
diff --git a/src/modules/03_recruiting/components/Address.vue b/src/modules/03_recruiting/components/Address.vue
index 4ee38e840..7d58fa270 100644
--- a/src/modules/03_recruiting/components/Address.vue
+++ b/src/modules/03_recruiting/components/Address.vue
@@ -245,7 +245,6 @@ import HeaderTop from "@/modules/03_recruiting/components/top.vue";
 import { useRoute } from "vue-router";
 import { useCounterMixin } from "@/stores/mixin";
 import { useQuasar } from "quasar";
-import { useDataStore } from "@/stores/data";
 
 const props = defineProps({
   provinceOptions: {
@@ -266,15 +265,14 @@ const route = useRoute();
 const candidateId = ref<string>(route.params.candidateId.toString());
 const edit = ref<boolean>(true);
 const myform = ref<any>({});
-const loader = ref<boolean>(false);
+
 const districtOptions = ref<DataOption[]>([]);
 const districtCOptions = ref<DataOption[]>([]);
 const subdistrictOptions = ref<DataOption[]>([]);
 const subdistrictCOptions = ref<DataOption[]>([]);
-const dataStore = useDataStore();
-const { loaderPage } = dataStore;
+
 const mixin = useCounterMixin();
-const { messageError } = mixin;
+const { messageError, showLoader, hideLoader } = mixin;
 const emit = defineEmits(["update:form"]);
 
 watch(myform, async (count: any, prevCount: any) => {
@@ -319,7 +317,7 @@ const fetchData = async () => {
       messageError($q, e);
     })
     .finally(() => {
-      loaderPage(false);
+      hideLoader();
     });
 };
 
@@ -362,7 +360,7 @@ const selectSubDistrict = (e: string, name: string) => {
 };
 
 const fetchDistrict = async (id: string, position: string) => {
-  loader.value = true;
+  showLoader();
   await http
     .get(config.API.listDistrict(id))
     .then((res) => {
@@ -381,12 +379,12 @@ const fetchDistrict = async (id: string, position: string) => {
       messageError($q, e);
     })
     .finally(() => {
-      loaderPage(false);
+      hideLoader();
     });
 };
 
 const fetchSubDistrict = async (id: string, position: string) => {
-  loader.value = true;
+  showLoader();
   await http
     .get(config.API.listSubDistrict(id))
     .then((res) => {
@@ -409,7 +407,7 @@ const fetchSubDistrict = async (id: string, position: string) => {
       messageError($q, e);
     })
     .finally(() => {
-      loaderPage(false);
+      hideLoader();
     });
 };
 
diff --git a/src/modules/03_recruiting/components/Career.vue b/src/modules/03_recruiting/components/Career.vue
index ea833743b..a77a38f83 100644
--- a/src/modules/03_recruiting/components/Career.vue
+++ b/src/modules/03_recruiting/components/Career.vue
@@ -202,7 +202,6 @@ import Table from "@/modules/03_recruiting/components/TableCan.vue";
 import DialogHeader from "@/modules/03_recruiting/components/DialogHeader.vue";
 import DialogFooter from "@/modules/03_recruiting/components/DialogFooter.vue";
 import { useRoute } from "vue-router";
-import { useDataStore } from "@/stores/data";
 
 const props = defineProps({
   status: {
@@ -229,7 +228,7 @@ const modalEdit = ref<boolean>(false); //modal ที่แสดงใช้ส
 const rawItem = ref<RequestItemsObject>(); //ข้อมูลเดิมที่เลือกใน row นั้น
 const rowIndex = ref<number>(0); //indexข้อมูลเดิมที่เลือกใน row นั้น
 const previous = ref<boolean>(); //แสดงปุ่มดูข้อมูลก่อนหน้า
-const dataStore = useDataStore();
+
 const next = ref<boolean>(); //แสดงปุ่มดูข้อมูลต่อไป
 const editRow = ref<boolean>(false); //เช็คมีการแก้ไขข้อมูล
 const checkValidate = ref<boolean>(false); //validate data ผ่านหรือไม่
@@ -237,8 +236,8 @@ const route = useRoute();
 const candidateId = ref<string>(route.params.candidateId.toString());
 const rows = ref<RequestItemsObject[]>([]);
 const filter = ref<string>(""); //search data table
-const { messageError } = mixin;
-const { loaderPage } = dataStore;
+const { messageError, showLoader, hideLoader } = mixin;
+
 const visibleColumns = ref<String[]>([]);
 
 examData.career.columns.length == 0
@@ -318,7 +317,7 @@ onMounted(async () => {
 });
 
 const fetchData = async () => {
-  loaderPage(true);
+  showLoader();
   await http
     .get(config.API.candidateCareer(candidateId.value))
     .then((res) => {
@@ -336,7 +335,7 @@ const fetchData = async () => {
       messageError($q, e);
     })
     .finally(() => {
-      loaderPage(false);
+      hideLoader();
     });
 };
 
@@ -415,7 +414,7 @@ const checkDelete = (row: RequestItemsObject) => {
  */
 const clickDeleteRow = async () => {
   if (rawItem.value != null) {
-    loaderPage(true);
+    showLoader();
     await http
       .delete(config.API.candidateAdminCareer(rawItem.value.id))
       .then(() => {
@@ -451,7 +450,7 @@ const clickSave = async () => {
  * บันทึกเพิ่มข้อมูล
  */
 const saveData = async () => {
-  loaderPage(true);
+  showLoader();
   await http
     .post(config.API.candidateAdminCareer(candidateId.value), {
       name: location.value,
@@ -477,7 +476,7 @@ const saveData = async () => {
  * บันทึกแก้ไขข้อมูล
  */
 const editData = async () => {
-  loaderPage(true);
+  showLoader();
   await http
     .put(config.API.candidateAdminCareer(id.value), {
       name: location.value,
diff --git a/src/modules/03_recruiting/components/Document.vue b/src/modules/03_recruiting/components/Document.vue
index 03ab790a9..ff6e9a764 100644
--- a/src/modules/03_recruiting/components/Document.vue
+++ b/src/modules/03_recruiting/components/Document.vue
@@ -146,7 +146,7 @@ import HeaderTop from "@/modules/03_recruiting/components/top.vue";
 import http from "@/plugins/http";
 import config from "@/app.config";
 import { useRoute } from "vue-router";
-import { useDataStore } from "@/stores/data";
+
 import type { UploadType } from "@/modules/03_recruiting/interface/index/Main";
 import { useCounterMixin } from "@/stores/mixin";
 import { useQuasar } from "quasar";
@@ -161,14 +161,13 @@ const $q = useQuasar();
 const route = useRoute();
 const candidateId = ref<string>(route.params.candidateId.toString());
 const uploader = ref<any>();
-const dataStore = useDataStore();
-const { loaderPage } = dataStore;
+
 const edit = ref<boolean>(props.status == "checkRegister");
 const name = ref<string>("");
 const files = ref<UploadType[]>([]);
 const file = ref<File[]>([]);
 const mixin = useCounterMixin();
-const { messageError } = mixin;
+const { messageError, showLoader, hideLoader } = mixin;
 
 onMounted(async () => {
   await getData();
@@ -180,7 +179,7 @@ const fileAdd = async (val: any) => {
 };
 
 const getData = async () => {
-  loaderPage(true);
+  showLoader();
   await http
     .get(config.API.candidateUpload(candidateId.value))
     .then((res) => {
@@ -191,7 +190,7 @@ const getData = async () => {
       messageError($q, e);
     })
     .finally(() => {
-      loaderPage(false);
+      hideLoader();
     });
 };
 
@@ -199,7 +198,7 @@ const deleteData = async (id: string) => {
   const params = {
     documentId: id,
   };
-  loaderPage(true);
+  showLoader();
   await http
     .delete(config.API.candidateUpload(candidateId.value), {
       params,
@@ -211,7 +210,7 @@ const deleteData = async (id: string) => {
       messageError($q, e);
     })
     .finally(async () => {
-      loaderPage(false);
+      hideLoader();
       await getData();
     });
 };
@@ -223,7 +222,7 @@ const uploadData = async () => {
   });
   const formData = new FormData();
   formData.append("", newFile);
-  loaderPage(true);
+  showLoader();
   await http
     .put(config.API.candidateUpload(candidateId.value), formData)
     .then((res) => {
@@ -233,7 +232,7 @@ const uploadData = async () => {
       messageError($q, e);
     })
     .finally(async () => {
-      loaderPage(false);
+      hideLoader();
       name.value = "";
       uploader.value.reset();
       await getData();
diff --git a/src/modules/03_recruiting/components/Education.vue b/src/modules/03_recruiting/components/Education.vue
index b7f73f24e..c55d7a4bf 100644
--- a/src/modules/03_recruiting/components/Education.vue
+++ b/src/modules/03_recruiting/components/Education.vue
@@ -193,7 +193,7 @@ import { useQuasar } from "quasar";
 import { useCounterMixin } from "@/stores/mixin";
 import http from "@/plugins/http";
 import config from "@/app.config";
-import { useDataStore } from "@/stores/data";
+
 import { useExamDataStore } from "@/modules/03_recruiting/store";
 import type {
   RequestItemsObject,
@@ -238,9 +238,8 @@ const editRow = ref<boolean>(false); //เช็คมีการแก้ไ
 const checkValidate = ref<boolean>(false); //validate data ผ่านหรือไม่
 const rows = ref<RequestItemsObject[]>([]);
 const route = useRoute();
-const dataStore = useDataStore();
-const { loaderPage } = dataStore;
-const { messageError } = mixin;
+
+const { messageError, showLoader, hideLoader } = mixin;
 const candidateId = ref<string>(route.params.candidateId.toString());
 const filter = ref<string>(""); //search data table
 
@@ -324,7 +323,7 @@ onMounted(async () => {
 });
 
 const fetchData = async () => {
-  loaderPage(true);
+  showLoader();
   await http
     .get(config.API.candidateEducation(candidateId.value))
     .then((res) => {
@@ -343,12 +342,12 @@ const fetchData = async () => {
       messageError($q, e);
     })
     .finally(() => {
-      loaderPage(false);
+      hideLoader();
     });
 };
 
 const fetcheducationLevel = async () => {
-  loaderPage(true);
+  showLoader();
   await http
     .get(config.API.educationLevel)
     .then((res) => {
@@ -363,7 +362,7 @@ const fetcheducationLevel = async () => {
       messageError($q, e);
     })
     .finally(() => {
-      loaderPage(false);
+      hideLoader();
     });
 };
 
@@ -444,7 +443,7 @@ const checkDelete = (row: RequestItemsObject) => {
  */
 const clickDeleteRow = async () => {
   if (rawItem.value != null) {
-    loaderPage(true);
+    showLoader();
     await http
       .delete(config.API.candidateAdminEducation(rawItem.value.id))
       .then(() => {
@@ -480,7 +479,7 @@ const clickSave = async () => {
  * บันทึกเพิ่มข้อมูล
  */
 const saveData = async () => {
-  loaderPage(true);
+  showLoader();
   await http
     .post(config.API.candidateAdminEducation(candidateId.value), {
       educationLevelId: educationLevelId.value,
@@ -506,7 +505,7 @@ const saveData = async () => {
  * บันทึกแก้ไขข้อมูล
  */
 const editData = async () => {
-  loaderPage(true);
+  showLoader();
   await http
     .put(config.API.candidateAdminEducation(id.value), {
       educationLevelId: educationLevelId.value,
diff --git a/src/modules/03_recruiting/components/ExamFinished.vue b/src/modules/03_recruiting/components/ExamFinished.vue
index 99060e6f1..4deab82d5 100644
--- a/src/modules/03_recruiting/components/ExamFinished.vue
+++ b/src/modules/03_recruiting/components/ExamFinished.vue
@@ -113,7 +113,7 @@ import { onMounted, ref } from "vue";
 import { useCounterMixin } from "@/stores/mixin";
 import http from "@/plugins/http";
 import config from "@/app.config";
-import { useDataStore } from "@/stores/data";
+
 import { useQuasar } from "quasar";
 
 const props = defineProps({
@@ -129,9 +129,8 @@ const props = defineProps({
 
 const $q = useQuasar();
 const mixin = useCounterMixin(); //เรียกฟังก์ชันกลาง
-const { messageError, date2Thai } = mixin;
-const dataStore = useDataStore();
-const { loaderPage } = dataStore;
+const { messageError, date2Thai, showLoader, hideLoader } = mixin;
+
 const fullName = ref<string>("");
 const examNumber = ref<string>("");
 const citizenId = ref<string>("");
@@ -152,7 +151,7 @@ onMounted(async () => {
 });
 
 const fetchCard = async () => {
-  loaderPage(true);
+  showLoader();
   await http
     .get(config.API.candidateCard(props.candidateId))
     .then((res) => {
@@ -194,7 +193,7 @@ const fetchCard = async () => {
       messageError($q, e);
     })
     .finally(() => {
-      loaderPage(false);
+      hideLoader();
     });
 };
 </script>
diff --git a/src/modules/03_recruiting/components/Family.vue b/src/modules/03_recruiting/components/Family.vue
index 7d0f903d9..6dc72adc8 100644
--- a/src/modules/03_recruiting/components/Family.vue
+++ b/src/modules/03_recruiting/components/Family.vue
@@ -282,7 +282,7 @@ import {
 import HeaderTop from "@/modules/03_recruiting/components/top.vue";
 import { useRoute } from "vue-router";
 import { useCounterMixin } from "@/stores/mixin";
-import { useDataStore } from "@/stores/data";
+
 import { useQuasar } from "quasar";
 
 const props = defineProps({
@@ -300,10 +300,9 @@ const props = defineProps({
   },
 });
 const $q = useQuasar();
-const dataStore = useDataStore();
-const { loaderPage } = dataStore;
+
 const mixin = useCounterMixin();
-const { messageError } = mixin;
+const { messageError, showLoader, hideLoader } = mixin;
 const edit = ref<boolean>(true);
 const myform = ref<any>({});
 const route = useRoute();
@@ -324,7 +323,7 @@ onMounted(async () => {
 });
 
 const fetchData = async () => {
-  loaderPage(true);
+  showLoader();
   await http
     .get(config.API.candidateFamily(candidateId.value))
     .then((res) => {
@@ -351,7 +350,7 @@ const fetchData = async () => {
       messageError($q, e);
     })
     .finally(() => {
-      loaderPage(false);
+      hideLoader();
     });
 };
 
diff --git a/src/modules/03_recruiting/components/Information.vue b/src/modules/03_recruiting/components/Information.vue
index cf1bc5f3c..9c289d913 100644
--- a/src/modules/03_recruiting/components/Information.vue
+++ b/src/modules/03_recruiting/components/Information.vue
@@ -403,7 +403,6 @@ import HeaderTop from "@/modules/03_recruiting/components/top.vue";
 import { useRoute } from "vue-router";
 import keycloak from "@/plugins/keycloak";
 import { useQuasar } from "quasar";
-import { useDataStore } from "@/stores/data";
 
 const props = defineProps({
   prefixOptions: {
@@ -438,9 +437,8 @@ const edit = ref<boolean>(true);
 const myform = ref<any>({});
 const img = ref<string>("");
 const fileProfile = ref<File[]>([]);
-const dataStore = useDataStore();
-const { loaderPage } = dataStore;
-const { messageError } = mixin;
+
+const { messageError, showLoader, hideLoader } = mixin;
 
 const emit = defineEmits(["update:form"]);
 
@@ -463,7 +461,7 @@ onMounted(async () => {
 });
 
 const fetchData = async () => {
-  loaderPage(true);
+  showLoader();
   await http
     .get(config.API.candidateInformation(candidateId.value))
     .then((res) => {
@@ -494,12 +492,12 @@ const fetchData = async () => {
         keycloak.tokenParsed == null ? "" : keycloak.tokenParsed.family_name;
     })
     .finally(() => {
-      loaderPage(false);
+      hideLoader();
     });
 };
 
 const fetchImgData = async () => {
-  loaderPage(true);
+  showLoader();
   await http
     .get(config.API.candidateProfile(candidateId.value))
     .then((res) => {
@@ -510,7 +508,7 @@ const fetchImgData = async () => {
       messageError($q, e);
     })
     .finally(async () => {
-      loaderPage(false);
+      hideLoader();
     });
 };
 
@@ -542,7 +540,7 @@ const selectProvince = (val: string) => {
 };
 
 const fetchDistrict = async (id: string) => {
-  loaderPage(true);
+  showLoader();
   await http
     .get(config.API.listDistrict(id))
     .then((res) => {
@@ -557,7 +555,7 @@ const fetchDistrict = async (id: string) => {
       messageError($q, e);
     })
     .finally(() => {
-      loaderPage(false);
+      hideLoader();
     });
 };
 
diff --git a/src/modules/03_recruiting/components/Occupation.vue b/src/modules/03_recruiting/components/Occupation.vue
index fce1b52a6..f80810242 100644
--- a/src/modules/03_recruiting/components/Occupation.vue
+++ b/src/modules/03_recruiting/components/Occupation.vue
@@ -260,7 +260,7 @@ import {
 } from "@/modules/03_recruiting/interface/index/Main";
 import HeaderTop from "@/modules/03_recruiting/components/top.vue";
 import { useRoute } from "vue-router";
-import { useDataStore } from "@/stores/data";
+
 import { useCounterMixin } from "@/stores/mixin";
 import { useQuasar } from "quasar";
 
@@ -280,10 +280,9 @@ const edit = ref<boolean>(true);
 const myform = ref<any>({});
 const route = useRoute();
 const candidateId = ref<string>(route.params.candidateId.toString());
-const dataStore = useDataStore();
-const { loaderPage } = dataStore;
+
 const mixin = useCounterMixin();
-const { messageError } = mixin;
+const { messageError, showLoader, hideLoader } = mixin;
 
 const emit = defineEmits(["update:form"]);
 
@@ -300,7 +299,7 @@ onMounted(async () => {
 });
 
 const fetchData = async () => {
-  loaderPage(true);
+  showLoader();
   await http
     .get(config.API.candidateOccupation(candidateId.value))
     .then((res) => {
@@ -327,7 +326,7 @@ const fetchData = async () => {
       messageError($q, e);
     })
     .finally(() => {
-      loaderPage(false);
+      hideLoader();
     });
 };
 
diff --git a/src/modules/03_recruiting/components/Profile.vue b/src/modules/03_recruiting/components/Profile.vue
index 0d70ca2d0..8914ba286 100644
--- a/src/modules/03_recruiting/components/Profile.vue
+++ b/src/modules/03_recruiting/components/Profile.vue
@@ -21,7 +21,11 @@
 
   <q-separator class="q-my-lg bg-gray" size="5px" />
   <div class="q-px-sm">
-    <Family :prefixOptions="prefixOptions" :status="status" v-model:form="formFamily" />
+    <Family
+      :prefixOptions="prefixOptions"
+      :status="status"
+      v-model:form="formFamily"
+    />
   </div>
 
   <q-separator class="q-my-lg bg-gray" size="5px" />
@@ -56,7 +60,7 @@ import Occupation from "@/modules/03_recruiting/components/Occupation.vue";
 import Education from "@/modules/03_recruiting/components/Education.vue";
 import Career from "@/modules/03_recruiting/components/Career.vue";
 import Document from "@/modules/03_recruiting/components/Document.vue";
-import { useDataStore } from "@/stores/data";
+
 import { useQuasar } from "quasar";
 import { useCounterMixin } from "@/stores/mixin";
 
@@ -84,8 +88,7 @@ const props = defineProps({
 });
 
 const $q = useQuasar();
-const dataStore = useDataStore();
-const { loaderPage } = dataStore;
+
 const prefixOptions = ref<DataOption[]>([]);
 const relationshipOptions = ref<DataOption[]>([]);
 const provinceOptions = ref<DataOption[]>([]);
@@ -94,7 +97,7 @@ const formAddress = ref<any>({});
 const formFamily = ref<any>({});
 const formOccupation = ref<any>({});
 const mixin = useCounterMixin();
-const { messageError } = mixin;
+const { messageError, showLoader, hideLoader } = mixin;
 
 const emit = defineEmits([
   "update:formInformation",
@@ -120,14 +123,14 @@ watch(formOccupation, async (count: Object, prevCount: Object) => {
 });
 
 onMounted(() => {
-  loaderPage(false);
+  hideLoader();
   fetchPrefix();
   fetchRelationship();
   fetchProvince();
 });
 
 const fetchPrefix = async () => {
-  loaderPage(true);
+  showLoader();
   await http
     .get(config.API.prefix)
     .then((res) => {
@@ -142,12 +145,12 @@ const fetchPrefix = async () => {
       messageError($q, e);
     })
     .finally(() => {
-      loaderPage(false);
+      hideLoader();
     });
 };
 
 const fetchRelationship = async () => {
-  loaderPage(true);
+  showLoader();
   await http
     .get(config.API.relationship)
     .then((res) => {
@@ -162,12 +165,12 @@ const fetchRelationship = async () => {
       messageError($q, e);
     })
     .finally(() => {
-      loaderPage(false);
+      hideLoader();
     });
 };
 
 const fetchProvince = async () => {
-  loaderPage(true);
+  showLoader();
   await http
     .get(config.API.province)
     .then((res) => {
@@ -182,7 +185,7 @@ const fetchProvince = async () => {
       messageError($q, e);
     })
     .finally(() => {
-      loaderPage(false);
+      hideLoader();
     });
 };
 </script>
diff --git a/src/modules/03_recruiting/components/TableCandidate.vue b/src/modules/03_recruiting/components/TableCandidate.vue
index 717b31e44..da528e9b1 100644
--- a/src/modules/03_recruiting/components/TableCandidate.vue
+++ b/src/modules/03_recruiting/components/TableCandidate.vue
@@ -149,7 +149,7 @@
 <script setup lang="ts">
 import { ref, useAttrs } from "vue";
 import { useRoute, useRouter } from "vue-router";
-import { useDataStore } from "@/stores/data";
+
 import { useCounterMixin } from "@/stores/mixin";
 import http from "@/plugins/http";
 import config from "@/app.config";
@@ -157,8 +157,7 @@ import { useQuasar } from "quasar";
 
 const route = useRoute();
 const router = useRouter();
-const dataStore = useDataStore();
-const { loaderPage } = dataStore;
+
 const mixin = useCounterMixin();
 const { dateToISO, success, modalError, dialogMessage } = mixin;
 const $q = useQuasar(); // show dialog
@@ -167,7 +166,7 @@ const table = ref<any>(null);
 const files = ref<File[]>([]);
 const filterRef = ref<any>(null);
 const examId = ref<string>(route.params.examId.toString());
-const { messageError } = mixin;
+const { messageError, showLoader, hideLoader } = mixin;
 const props = defineProps({
   inputfilter: String,
   inputvisible: Array,
@@ -309,7 +308,7 @@ const candidateToPlacement = async () => {
           messageError($q, e);
         })
         .finally(async () => {
-          loaderPage(false);
+          hideLoader();
           router.go(-1);
         });
     })
@@ -318,7 +317,7 @@ const candidateToPlacement = async () => {
 };
 
 const uploadDataSeat = async () => {
-  loaderPage(true);
+  showLoader();
   const formData = new FormData();
   formData.append("", files.value[0]);
   await http
@@ -330,14 +329,14 @@ const uploadDataSeat = async () => {
       messageError($q, e);
     })
     .finally(async () => {
-      loaderPage(false);
+      hideLoader();
       files.value = [];
       props.fetchData();
     });
 };
 
 const uploadDataPoint = async () => {
-  loaderPage(true);
+  showLoader();
   const formData = new FormData();
   formData.append("", files.value[0]);
   await http
@@ -350,14 +349,14 @@ const uploadDataPoint = async () => {
       messageError($q, e);
     })
     .finally(async () => {
-      loaderPage(false);
+      hideLoader();
       files.value = [];
       props.fetchData();
     });
 };
 
 const downloadFile = async () => {
-  loaderPage(true);
+  showLoader();
   await http
     .get(config.API.periodExamDownload(examId.value), {
       responseType: "blob",
@@ -370,12 +369,12 @@ const downloadFile = async () => {
       messageError($q, e);
     })
     .finally(() => {
-      loaderPage(false);
+      hideLoader();
     });
 };
 
 const downloadFileDetail = async () => {
-  loaderPage(true);
+  showLoader();
   await http
     .get(config.API.periodExamDownloadDetail(examId.value), {
       responseType: "blob",
@@ -388,7 +387,7 @@ const downloadFileDetail = async () => {
       messageError($q, e);
     })
     .finally(() => {
-      loaderPage(false);
+      hideLoader();
     });
 };
 
diff --git a/src/modules/03_recruiting/views/01_compete/Detail.vue b/src/modules/03_recruiting/views/01_compete/Detail.vue
index ff4b32fcb..a13759474 100644
--- a/src/modules/03_recruiting/views/01_compete/Detail.vue
+++ b/src/modules/03_recruiting/views/01_compete/Detail.vue
@@ -121,19 +121,19 @@ import { ref, onMounted } from "vue";
 import { useRouter, useRoute } from "vue-router";
 import type { RecruitDetailResponse } from "@/modules/03_recruiting/interface/response/Period";
 import Table from "@/modules/03_recruiting/components/Table.vue";
-import { useDataStore } from "@/stores/data";
+
 import http from "@/plugins/http";
 import config from "@/app.config";
 import { useCounterMixin } from "@/stores/mixin";
 import { useQuasar } from "quasar";
 
 const $q = useQuasar();
-const dataStore = useDataStore();
+
 const router = useRouter();
 const route = useRoute();
-const { loaderPage } = dataStore;
+
 const mixin = useCounterMixin();
-const { messageError, success } = mixin;
+const { messageError, success, showLoader, hideLoader } = mixin;
 const year = ref<string>("");
 const round = ref<string>("");
 const name = ref<string>("");
@@ -365,7 +365,7 @@ const columns = ref<QTableProps["columns"]>([
 ]);
 
 onMounted(async () => {
-  loaderPage(false);
+  hideLoader();
   await fetchData();
 });
 
@@ -374,7 +374,7 @@ const clickDetail = (examID: string) => {
 };
 
 const downloadExam = async () => {
-  loaderPage(true);
+  showLoader();
   await http
     .get(config.API.exportExam(importId.value), {
       responseType: "blob",
@@ -390,12 +390,12 @@ const downloadExam = async () => {
       messageError($q, e);
     })
     .finally(() => {
-      loaderPage(false);
+      hideLoader();
     });
 };
 
 const downloadPassExam = async () => {
-  loaderPage(true);
+  showLoader();
   await http
     .get(config.API.exportPassExam(importId.value), {
       responseType: "blob",
@@ -411,12 +411,12 @@ const downloadPassExam = async () => {
       messageError($q, e);
     })
     .finally(() => {
-      loaderPage(false);
+      hideLoader();
     });
 };
 
 const downloadPassResultExam = async () => {
-  loaderPage(true);
+  showLoader();
   await http
     .get(config.API.exportPassResultExam(importId.value), {
       responseType: "blob",
@@ -432,12 +432,12 @@ const downloadPassResultExam = async () => {
       messageError($q, e);
     })
     .finally(() => {
-      loaderPage(false);
+      hideLoader();
     });
 };
 
 const fetchData = async () => {
-  loaderPage(true);
+  showLoader();
   await http
     .post(config.API.getExamResultById(importId.value), {
       examAttribute: "",
@@ -474,7 +474,7 @@ const fetchData = async () => {
       messageError($q, e);
     })
     .finally(() => {
-      loaderPage(false);
+      hideLoader();
     });
 };
 
@@ -489,7 +489,7 @@ const candidateToPlacement = async () => {
     persistent: true,
   })
     .onOk(async () => {
-      loaderPage(true);
+      showLoader();
       await http
         .get(config.API.periodRecruitToPlacement(importId.value))
         .then((res) => {
@@ -499,7 +499,7 @@ const candidateToPlacement = async () => {
           messageError($q, e);
         })
         .finally(async () => {
-          loaderPage(false);
+          hideLoader();
           router.go(-1);
         });
     })
diff --git a/src/modules/03_recruiting/views/01_compete/DetailEx.vue b/src/modules/03_recruiting/views/01_compete/DetailEx.vue
index 89dd0b905..3ed5ce89c 100644
--- a/src/modules/03_recruiting/views/01_compete/DetailEx.vue
+++ b/src/modules/03_recruiting/views/01_compete/DetailEx.vue
@@ -236,17 +236,17 @@
 <script setup lang="ts">
 import { ref, onMounted } from "vue";
 import { useRouter, useRoute } from "vue-router";
-import { useDataStore } from "@/stores/data";
+
 import http from "@/plugins/http";
 import config from "@/app.config";
 import { useCounterMixin } from "@/stores/mixin";
 import { useQuasar } from "quasar";
 
 const $q = useQuasar();
-const dataStore = useDataStore();
+
 const router = useRouter();
 const route = useRoute();
-const { loaderPage } = dataStore;
+
 const profile_id = ref<string>("");
 const birthdate = ref<string>("");
 const gender = ref<string>("");
@@ -269,7 +269,7 @@ const examOrder = ref<string>("");
 const number = ref<string>("");
 const score_expired = ref<string>("");
 const mixin = useCounterMixin();
-const { messageError } = mixin;
+const { messageError, showLoader, hideLoader } = mixin;
 const examID = ref<string>("62150001");
 const prefix = ref<string>("นาย");
 const fullname = ref<string>("เกียรติศักดิ์ บัณฑิต");
@@ -281,7 +281,7 @@ onMounted(async () => {
 });
 
 const fetchData = async () => {
-  loaderPage(true);
+  showLoader();
   await http
     .get(config.API.getExamDetail(importId.value, examId.value))
     .then((res) => {
@@ -319,12 +319,12 @@ const fetchData = async () => {
       messageError($q, e);
     })
     .finally(() => {
-      loaderPage(false);
+      hideLoader();
     });
 };
 
 const downloadScore = async () => {
-  loaderPage(true);
+  showLoader();
   await http
     .get(config.API.downloadScoreReport(importId.value, examId.value), {
       responseType: "blob",
@@ -340,12 +340,12 @@ const downloadScore = async () => {
       messageError($q, e);
     })
     .finally(() => {
-      loaderPage(false);
+      hideLoader();
     });
 };
 
 const downloadCertificate = async () => {
-  loaderPage(true);
+  showLoader();
   let type = degree.value.includes("บัณฑิต") ? 2 : 1;
   await http
     .get(config.API.downloadExamReport(importId.value, examId.value, type), {
@@ -362,7 +362,7 @@ const downloadCertificate = async () => {
       messageError($q, e);
     })
     .finally(() => {
-      loaderPage(false);
+      hideLoader();
     });
 };
 </script>
diff --git a/src/modules/03_recruiting/views/01_compete/Period.vue b/src/modules/03_recruiting/views/01_compete/Period.vue
index 6ba96b5e6..596fc4af5 100644
--- a/src/modules/03_recruiting/views/01_compete/Period.vue
+++ b/src/modules/03_recruiting/views/01_compete/Period.vue
@@ -1,408 +1,362 @@
 <!-- page:จัดการรอบการสอบ สรรหา -->
 <template>
-	<div class="toptitle text-dark col-12 row items-center">
-		จัดการรอบสอบแข่งขัน
-	</div>
-	<q-card flat bordered class="col-12 q-mt-sm q-pt-sm q-pa-md">
-		<div>
-			<Table
-				style="max-height: 80vh"
-				:rows="rows"
-				:columns="columns"
-				:filter="filter"
-				:visible-columns="visibleColumns"
-				v-model:inputfilter="filter"
-				v-model:inputvisible="visibleColumns"
-				:pagination="initialPagination"
-				:nornmalData="true"
-				:add="clickAdd"
-				:paging="true"
-				:titleText="''"
-			>
-				<template #columns="props">
-					<q-tr :props="props" class="cursor-pointer">
-						<q-td
-							v-for="col in props.cols"
-							:key="col.name"
-							:props="props"
-							@click="clickDetail(props.row.id)"
-						>
-							<div v-if="col.name == 'no'">
-								{{ props.rowIndex + 1 }}
-							</div>
-							<div
-								v-else-if="col.name == 'name'"
-								class="table_ellipsis2"
-							>
-								{{ col.value }}
-							</div>
-							<div
-								v-else-if="col.name == 'year'"
-								class="table_ellipsis2"
-							>
-								{{ col.value + 543 }}
-							</div>
-							<div
-								v-else-if="col.name == 'scoreCount'"
-								class="table_ellipsis2"
-							>
-								<q-btn
-									flat
-									dense
-									size="12px"
-									round
-									color="green"
-									@click.stop.prevent="
-										clickEdit(props.row.id)
-									"
-									v-if="col.value == null"
-								>
-									<q-icon
-										name="mdi-file-excel-outline"
-										size="20px"
-									/>
-									<!-- นำเข้าไฟล์ผลคะแนนสอบ -->
-									<q-tooltip>นำเข้าไฟล์ผลคะแนนสอบ</q-tooltip>
-								</q-btn>
-								<div v-else>
-									{{ col.value }}
-									<q-btn
-										dense
-										size="12px"
-										flat
-										round
-										color="green"
-										@click.stop.prevent="
-											clickEdit(props.row.id)
-										"
-										icon="mdi-file-excel-outline"
-									>
-										<q-tooltip
-											>นำเข้าไฟล์ผลคะแนนสอบอีกครั้ง</q-tooltip
-										>
-									</q-btn>
+  <div class="toptitle text-dark col-12 row items-center">
+    จัดการรอบสอบแข่งขัน
+  </div>
+  <q-card flat bordered class="col-12 q-mt-sm q-pt-sm q-pa-md">
+    <div>
+      <Table
+        style="max-height: 80vh"
+        :rows="rows"
+        :columns="columns"
+        :filter="filter"
+        :visible-columns="visibleColumns"
+        v-model:inputfilter="filter"
+        v-model:inputvisible="visibleColumns"
+        :pagination="initialPagination"
+        :nornmalData="true"
+        :add="clickAdd"
+        :paging="true"
+        :titleText="''"
+      >
+        <template #columns="props">
+          <q-tr :props="props" class="cursor-pointer">
+            <q-td
+              v-for="col in props.cols"
+              :key="col.name"
+              :props="props"
+              @click="clickDetail(props.row.id)"
+            >
+              <div v-if="col.name == 'no'">
+                {{ props.rowIndex + 1 }}
+              </div>
+              <div v-else-if="col.name == 'name'" class="table_ellipsis2">
+                {{ col.value }}
+              </div>
+              <div v-else-if="col.name == 'year'" class="table_ellipsis2">
+                {{ col.value + 543 }}
+              </div>
+              <div v-else-if="col.name == 'scoreCount'" class="table_ellipsis2">
+                <q-btn
+                  flat
+                  dense
+                  size="12px"
+                  round
+                  color="green"
+                  @click.stop.prevent="clickEdit(props.row.id)"
+                  v-if="col.value == null"
+                >
+                  <q-icon name="mdi-file-excel-outline" size="20px" />
+                  <!-- นำเข้าไฟล์ผลคะแนนสอบ -->
+                  <q-tooltip>นำเข้าไฟล์ผลคะแนนสอบ</q-tooltip>
+                </q-btn>
+                <div v-else>
+                  {{ col.value }}
+                  <q-btn
+                    dense
+                    size="12px"
+                    flat
+                    round
+                    color="green"
+                    @click.stop.prevent="clickEdit(props.row.id)"
+                    icon="mdi-file-excel-outline"
+                  >
+                    <q-tooltip>นำเข้าไฟล์ผลคะแนนสอบอีกครั้ง</q-tooltip>
+                  </q-btn>
 
-									<q-btn
-										dense
-										size="12px"
-										flat
-										round
-										color="indigo"
-										@click.stop.prevent="
-											clickPassExam(props.row.id)
-										"
-										icon="mdi-clipboard-arrow-down"
-									>
-										<q-tooltip
-											>ดาวน์โหลดรายชื่อผู้สอบแข่งขันได้</q-tooltip
-										>
-									</q-btn>
-								</div>
-							</div>
-							<div
-								v-else-if="col.name == 'examCount'"
-								class="table_ellipsis2"
-							>
-								<q-btn
-									flat
-									dense
-									size="12px"
-									color="green"
-									round
-									@click.stop.prevent="
-										clickUpload(props.row.id)
-									"
-									v-if="col.value == null || col.value == '0'"
-								>
-									<q-icon
-										name="mdi-file-excel-outline"
-										size="20px"
-									/>
-									<q-tooltip>นำเข้าไฟล์ผู้สมัครสอบ</q-tooltip>
-								</q-btn>
-								<div v-else>
-									{{ col.value }}
+                  <q-btn
+                    dense
+                    size="12px"
+                    flat
+                    round
+                    color="indigo"
+                    @click.stop.prevent="clickPassExam(props.row.id)"
+                    icon="mdi-clipboard-arrow-down"
+                  >
+                    <q-tooltip>ดาวน์โหลดรายชื่อผู้สอบแข่งขันได้</q-tooltip>
+                  </q-btn>
+                </div>
+              </div>
+              <div v-else-if="col.name == 'examCount'" class="table_ellipsis2">
+                <q-btn
+                  flat
+                  dense
+                  size="12px"
+                  color="green"
+                  round
+                  @click.stop.prevent="clickUpload(props.row.id)"
+                  v-if="col.value == null || col.value == '0'"
+                >
+                  <q-icon name="mdi-file-excel-outline" size="20px" />
+                  <q-tooltip>นำเข้าไฟล์ผู้สมัครสอบ</q-tooltip>
+                </q-btn>
+                <div v-else>
+                  {{ col.value }}
 
-									<q-btn
-										dense
-										size="12px"
-										flat
-										round
-										color="green"
-										@click.stop.prevent="
-											clickUpload(props.row.id)
-										"
-										icon="mdi-file-excel-outline"
-									>
-										<q-tooltip
-											>นำเข้าไฟล์ผู้สมัครสอบอีกครั้ง</q-tooltip
-										>
-									</q-btn>
+                  <q-btn
+                    dense
+                    size="12px"
+                    flat
+                    round
+                    color="green"
+                    @click.stop.prevent="clickUpload(props.row.id)"
+                    icon="mdi-file-excel-outline"
+                  >
+                    <q-tooltip>นำเข้าไฟล์ผู้สมัครสอบอีกครั้ง</q-tooltip>
+                  </q-btn>
 
-									<q-btn
-										dense
-										size="12px"
-										flat
-										round
-										color="indigo"
-										@click.stop.prevent="
-											clickCandidateList(props.row.id)
-										"
-										icon="mdi-clipboard-arrow-down"
-									>
-										<q-tooltip
-											>ดาวน์โหลดรายชื่อผู้มีสิทธิ์สอบ</q-tooltip
-										>
-									</q-btn>
-								</div>
-							</div>
-							<div v-else>
-								{{ col.value }}
-							</div>
-						</q-td>
-						<q-td>
-							<q-btn
-								dense
-								size="12px"
-								flat
-								round
-								color="primary"
-								@click="clickEditPeriod(props.row.id)"
-								icon="mdi-pencil-outline"
-							>
-								<q-tooltip>แก้ไขข้อมูล</q-tooltip>
-							</q-btn>
-							<q-btn
-								dense
-								size="12px"
-								flat
-								round
-								color="red"
-								@click="clickDelete(props.row.id)"
-								icon="mdi-delete"
-							>
-								<q-tooltip>ลบข้อมูล</q-tooltip>
-							</q-btn>
+                  <q-btn
+                    dense
+                    size="12px"
+                    flat
+                    round
+                    color="indigo"
+                    @click.stop.prevent="clickCandidateList(props.row.id)"
+                    icon="mdi-clipboard-arrow-down"
+                  >
+                    <q-tooltip>ดาวน์โหลดรายชื่อผู้มีสิทธิ์สอบ</q-tooltip>
+                  </q-btn>
+                </div>
+              </div>
+              <div v-else>
+                {{ col.value }}
+              </div>
+            </q-td>
+            <q-td>
+              <q-btn
+                dense
+                size="12px"
+                flat
+                round
+                color="primary"
+                @click="clickEditPeriod(props.row.id)"
+                icon="mdi-pencil-outline"
+              >
+                <q-tooltip>แก้ไขข้อมูล</q-tooltip>
+              </q-btn>
+              <q-btn
+                dense
+                size="12px"
+                flat
+                round
+                color="red"
+                @click="clickDelete(props.row.id)"
+                icon="mdi-delete"
+              >
+                <q-tooltip>ลบข้อมูล</q-tooltip>
+              </q-btn>
 
-							<q-btn
-								color="info"
-								flat
-								dense
-								round
-								size="12px"
-								icon="mdi-history"
-								@click="clickHistory(props.row.id)"
-							>
-								<q-tooltip>แสดงประวัติการทำงาน</q-tooltip>
-							</q-btn>
-						</q-td>
-					</q-tr>
-				</template>
-			</Table>
-		</div>
-	</q-card>
+              <q-btn
+                color="info"
+                flat
+                dense
+                round
+                size="12px"
+                icon="mdi-history"
+                @click="clickHistory(props.row.id)"
+              >
+                <q-tooltip>แสดงประวัติการทำงาน</q-tooltip>
+              </q-btn>
+            </q-td>
+          </q-tr>
+        </template>
+      </Table>
+    </div>
+  </q-card>
 
-	<HistoryTable
-		:rows="rowsHistory"
-		:columns="columnsHistory"
-		:filter="filterHistory"
-		:visible-columns="visibleColumnsHistory"
-		v-model:modal="modalHistory"
-		v-model:inputvisible="visibleColumnsHistory"
-		v-model:tittle="tittleHistory"
-		v-model:inputfilter="filterHistory"
-	>
-		<template #columns="props">
-			<q-tr :props="props">
-				<q-td v-for="col in props.cols" :key="col.name" :props="props">
-					<div v-if="col.name == 'isActive'" class="">
-						<q-icon
-							v-if="col.value == false"
-							name="mdi-close"
-							color="red"
-							class="text-h5"
-						/>
-						<q-icon
-							v-else
-							name="mdi-check"
-							color="positive"
-							class="text-h5"
-						/>
-					</div>
-					<div v-else-if="col.name == 'createdAt'" class="">
-						{{ textDate(col.value) }}
-					</div>
+  <HistoryTable
+    :rows="rowsHistory"
+    :columns="columnsHistory"
+    :filter="filterHistory"
+    :visible-columns="visibleColumnsHistory"
+    v-model:modal="modalHistory"
+    v-model:inputvisible="visibleColumnsHistory"
+    v-model:tittle="tittleHistory"
+    v-model:inputfilter="filterHistory"
+  >
+    <template #columns="props">
+      <q-tr :props="props">
+        <q-td v-for="col in props.cols" :key="col.name" :props="props">
+          <div v-if="col.name == 'isActive'" class="">
+            <q-icon
+              v-if="col.value == false"
+              name="mdi-close"
+              color="red"
+              class="text-h5"
+            />
+            <q-icon v-else name="mdi-check" color="positive" class="text-h5" />
+          </div>
+          <div v-else-if="col.name == 'createdAt'" class="">
+            {{ textDate(col.value) }}
+          </div>
 
-					<div v-else class="">
-						{{ col.value }}
-					</div>
-				</q-td>
-			</q-tr>
-		</template>
-	</HistoryTable>
+          <div v-else class="">
+            {{ col.value }}
+          </div>
+        </q-td>
+      </q-tr>
+    </template>
+  </HistoryTable>
 
-	<!-- popup Edit window-->
-	<q-dialog v-model="modalAdd" persistent>
-		<q-card style="width: 600px">
-			<q-form ref="myForm">
-				<DialogHeader :tittle="textTittle" :close="clickClose" />
-				<q-separator />
-				<q-card-section>
-					<div class="col-12 row items-center q-col-gutter-sm">
-						<div class="col-12">
-							<q-input
-								outlined
-								v-model="name"
-								label="ชื่อการสอบแข่งขัน"
-								dense
-								autogrow
-								lazy-rules
-								autofocus
-								hide-bottom-space
-							></q-input>
-						</div>
-						<div class="col-12">
-							<q-input
-								outlined
-								v-model="order"
-								label="ครั้งที่"
-								dense
-								autogrow
-								lazy-rules
-								autofocus
-								hide-bottom-space
-							></q-input>
-						</div>
-						<div class="col-12">
-							<q-input
-								outlined
-								v-model="year"
-								label="ปีงบประมาณ"
-								dense
-								autogrow
-								lazy-rules
-								autofocus
-								hide-bottom-space
-							></q-input>
-						</div>
-						<div class="col-12">
-							<q-file
-								v-model="files"
-								dense
-								label="เลือกไฟล์รายชื่อผู้สมัครสอบแข่งขัน"
-								outlined
-								use-chips
-								multiple
-							>
-								<template v-slot:prepend>
-									<q-icon name="attach_file" />
-								</template>
-							</q-file>
-						</div>
-					</div>
-				</q-card-section>
-				<q-separator />
-				<q-card-actions class="text-primary q-py-sm">
-					<q-space />
-					<q-btn
-						flat
-						round
-						color="public"
-						@click="checkSave"
-						icon="mdi-content-save-outline"
-					>
-						<q-tooltip>บันทึก</q-tooltip>
-					</q-btn>
-				</q-card-actions>
-			</q-form>
-		</q-card>
-	</q-dialog>
+  <!-- popup Edit window-->
+  <q-dialog v-model="modalAdd" persistent>
+    <q-card style="width: 600px">
+      <q-form ref="myForm">
+        <DialogHeader :tittle="textTittle" :close="clickClose" />
+        <q-separator />
+        <q-card-section>
+          <div class="col-12 row items-center q-col-gutter-sm">
+            <div class="col-12">
+              <q-input
+                outlined
+                v-model="name"
+                label="ชื่อการสอบแข่งขัน"
+                dense
+                autogrow
+                lazy-rules
+                autofocus
+                hide-bottom-space
+              ></q-input>
+            </div>
+            <div class="col-12">
+              <q-input
+                outlined
+                v-model="order"
+                label="ครั้งที่"
+                dense
+                autogrow
+                lazy-rules
+                autofocus
+                hide-bottom-space
+              ></q-input>
+            </div>
+            <div class="col-12">
+              <q-input
+                outlined
+                v-model="year"
+                label="ปีงบประมาณ"
+                dense
+                autogrow
+                lazy-rules
+                autofocus
+                hide-bottom-space
+              ></q-input>
+            </div>
+            <div class="col-12">
+              <q-file
+                v-model="files"
+                dense
+                label="เลือกไฟล์รายชื่อผู้สมัครสอบแข่งขัน"
+                outlined
+                use-chips
+                multiple
+              >
+                <template v-slot:prepend>
+                  <q-icon name="attach_file" />
+                </template>
+              </q-file>
+            </div>
+          </div>
+        </q-card-section>
+        <q-separator />
+        <q-card-actions class="text-primary q-py-sm">
+          <q-space />
+          <q-btn
+            flat
+            round
+            color="public"
+            @click="checkSave"
+            icon="mdi-content-save-outline"
+          >
+            <q-tooltip>บันทึก</q-tooltip>
+          </q-btn>
+        </q-card-actions>
+      </q-form>
+    </q-card>
+  </q-dialog>
 
-	<q-dialog v-model="modalScore" persistent>
-		<q-card style="width: 600px">
-			<q-form ref="myFormScore">
-				<DialogHeader
-					:tittle="textTittleScore"
-					:close="clickCloseScore"
-				/>
-				<q-separator />
-				<q-card-section>
-					<div class="col-12 row items-center q-col-gutter-sm">
-						<div class="col-12">
-							<q-file
-								v-model="files_score"
-								dense
-								label="เลือกไฟล์ผลคะแนนสอบแข่งขัน"
-								outlined
-								use-chips
-								multiple
-							>
-								<template v-slot:prepend>
-									<q-icon name="attach_file" />
-								</template>
-							</q-file>
-						</div>
-					</div>
-				</q-card-section>
-				<q-separator />
-				<q-card-actions class="text-primary q-py-sm">
-					<q-space />
-					<q-btn
-						flat
-						round
-						color="public"
-						@click="checkSaveScore"
-						icon="mdi-content-save-outline"
-					>
-						<q-tooltip>บันทึก</q-tooltip>
-					</q-btn>
-				</q-card-actions>
-			</q-form>
-		</q-card>
-	</q-dialog>
+  <q-dialog v-model="modalScore" persistent>
+    <q-card style="width: 600px">
+      <q-form ref="myFormScore">
+        <DialogHeader :tittle="textTittleScore" :close="clickCloseScore" />
+        <q-separator />
+        <q-card-section>
+          <div class="col-12 row items-center q-col-gutter-sm">
+            <div class="col-12">
+              <q-file
+                v-model="files_score"
+                dense
+                label="เลือกไฟล์ผลคะแนนสอบแข่งขัน"
+                outlined
+                use-chips
+                multiple
+              >
+                <template v-slot:prepend>
+                  <q-icon name="attach_file" />
+                </template>
+              </q-file>
+            </div>
+          </div>
+        </q-card-section>
+        <q-separator />
+        <q-card-actions class="text-primary q-py-sm">
+          <q-space />
+          <q-btn
+            flat
+            round
+            color="public"
+            @click="checkSaveScore"
+            icon="mdi-content-save-outline"
+          >
+            <q-tooltip>บันทึก</q-tooltip>
+          </q-btn>
+        </q-card-actions>
+      </q-form>
+    </q-card>
+  </q-dialog>
 
-	<q-dialog v-model="modalCandidate" persistent>
-		<q-card style="width: 600px">
-			<q-form ref="myFormScore">
-				<DialogHeader
-					:tittle="textTittleCandidate"
-					:close="clickCloseCandidate"
-				/>
-				<q-separator />
-				<q-card-section>
-					<div class="col-12 row items-center q-col-gutter-sm">
-						<div class="col-12">
-							<q-file
-								v-model="files_candidate"
-								dense
-								label="เลือกไฟล์ผู้สมัครสอบแข่งขัน"
-								outlined
-								use-chips
-								multiple
-							>
-								<template v-slot:prepend>
-									<q-icon name="attach_file" />
-								</template>
-							</q-file>
-						</div>
-					</div>
-				</q-card-section>
-				<q-separator />
-				<q-card-actions class="text-primary q-py-sm">
-					<q-space />
-					<q-btn
-						flat
-						round
-						color="public"
-						@click="checkSaveCandidate"
-						icon="mdi-content-save-outline"
-					>
-						<q-tooltip>บันทึก</q-tooltip>
-					</q-btn>
-				</q-card-actions>
-			</q-form>
-		</q-card>
-	</q-dialog>
+  <q-dialog v-model="modalCandidate" persistent>
+    <q-card style="width: 600px">
+      <q-form ref="myFormScore">
+        <DialogHeader
+          :tittle="textTittleCandidate"
+          :close="clickCloseCandidate"
+        />
+        <q-separator />
+        <q-card-section>
+          <div class="col-12 row items-center q-col-gutter-sm">
+            <div class="col-12">
+              <q-file
+                v-model="files_candidate"
+                dense
+                label="เลือกไฟล์ผู้สมัครสอบแข่งขัน"
+                outlined
+                use-chips
+                multiple
+              >
+                <template v-slot:prepend>
+                  <q-icon name="attach_file" />
+                </template>
+              </q-file>
+            </div>
+          </div>
+        </q-card-section>
+        <q-separator />
+        <q-card-actions class="text-primary q-py-sm">
+          <q-space />
+          <q-btn
+            flat
+            round
+            color="public"
+            @click="checkSaveCandidate"
+            icon="mdi-content-save-outline"
+          >
+            <q-tooltip>บันทึก</q-tooltip>
+          </q-btn>
+        </q-card-actions>
+      </q-form>
+    </q-card>
+  </q-dialog>
 </template>
 <script setup lang="ts">
 import type { QTableProps } from "quasar";
@@ -411,26 +365,24 @@ import { useRouter } from "vue-router";
 import { useQuasar } from "quasar";
 import { useCounterMixin } from "@/stores/mixin";
 import type {
-	ResponseRecruitPeriod,
-	ResponseHistoryObject,
+  ResponseRecruitPeriod,
+  ResponseHistoryObject,
 } from "@/modules/03_recruiting/interface/response/Period";
 import type { Pagination } from "@/modules/03_recruiting/interface/index/Main";
 import Table from "@/modules/03_recruiting/components/Table.vue";
 import DialogHeader from "@/components/DialogHeader.vue";
-import { useDataStore } from "@/stores/data";
+
 import http from "@/plugins/http";
 import config from "@/app.config";
 import HistoryTable from "@/components/TableHistory.vue";
 
-const dataStore = useDataStore();
-const { loaderPage } = dataStore;
 const $q = useQuasar(); // show dialog
 const router = useRouter();
 const name = ref<string>("");
 const year = ref<number>(new Date().getFullYear() + 543);
 const order = ref<number>(1);
 const mixin = useCounterMixin();
-const { success, dateToISO, dateText } = mixin;
+const { success, dateToISO, dateText, showLoader, hideLoader } = mixin;
 const files = ref<any>(null);
 const files_score = ref<any>(null);
 const files_candidate = ref<any>(null);
@@ -453,113 +405,113 @@ const textTittleScore = ref<string>("");
 const textTittleCandidate = ref<string>("");
 const rows = ref<any>([]);
 const initialPagination = ref<Pagination>({
-	rowsPerPage: 0,
+  rowsPerPage: 0,
 });
 const visibleColumns = ref<String[]>([
-	"no",
-	"name",
-	"order",
-	"year",
-	"examCount",
-	"scoreCount",
+  "no",
+  "name",
+  "order",
+  "year",
+  "examCount",
+  "scoreCount",
 ]);
 
 const columns = ref<QTableProps["columns"]>([
-	{
-		name: "no",
-		align: "left",
-		label: "ลำดับ",
-		sortable: true,
-		field: "no",
-		headerStyle: "font-size: 14px",
-		style: "font-size: 14px",
-	},
-	{
-		name: "name",
-		align: "left",
-		label: "รอบสอบแข่งขัน",
-		sortable: true,
-		field: "name",
-		headerStyle: "font-size: 14px",
-		style: "font-size: 14px",
-	},
-	{
-		name: "order",
-		align: "left",
-		label: "ครั้งที่",
-		sortable: true,
-		field: "order",
-		headerStyle: "font-size: 14px",
-		style: "font-size: 14px",
-	},
-	{
-		name: "year",
-		align: "left",
-		label: "ปีงบประมาณ",
-		sortable: true,
-		field: "year",
-		headerStyle: "font-size: 14px",
-		style: "font-size: 14px",
-	},
-	{
-		name: "examCount",
-		label: "จำนวนผู้สอบทั้งหมด",
-		align: "right",
-		field: "examCount",
-		sortable: true,
-		headerStyle: "font-size: 14px",
-		style: "font-size: 14px",
-	},
-	{
-		name: "scoreCount",
-		label: "จำนวนที่บันทึกผลสอบ",
-		align: "right",
-		field: "scoreCount",
-		sortable: true,
-		headerStyle: "font-size: 14px",
-		style: "font-size: 14px",
-	},
+  {
+    name: "no",
+    align: "left",
+    label: "ลำดับ",
+    sortable: true,
+    field: "no",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "name",
+    align: "left",
+    label: "รอบสอบแข่งขัน",
+    sortable: true,
+    field: "name",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "order",
+    align: "left",
+    label: "ครั้งที่",
+    sortable: true,
+    field: "order",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "year",
+    align: "left",
+    label: "ปีงบประมาณ",
+    sortable: true,
+    field: "year",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "examCount",
+    label: "จำนวนผู้สอบทั้งหมด",
+    align: "right",
+    field: "examCount",
+    sortable: true,
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "scoreCount",
+    label: "จำนวนที่บันทึกผลสอบ",
+    align: "right",
+    field: "scoreCount",
+    sortable: true,
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
 ]);
 
 const columnsHistory = ref<QTableProps["columns"]>([
-	{
-		name: "description",
-		align: "left",
-		label: "รายละเอียด",
-		sortable: true,
-		field: "description",
-		headerStyle: "font-size: 14px",
-		style: "font-size: 14px",
-	},
-	{
-		name: "createdAt",
-		align: "center",
-		label: "วันที่ดำเนินการ",
-		sortable: true,
-		field: "createdAt",
-		headerStyle: "font-size: 14px",
-		style: "font-size: 14px",
-	},
-	{
-		name: "createdFullName",
-		align: "left",
-		label: "ผู้ดำเนินการ",
-		sortable: true,
-		field: "createdFullName",
-		headerStyle: "font-size: 14px",
-		style: "font-size: 14px",
-	},
+  {
+    name: "description",
+    align: "left",
+    label: "รายละเอียด",
+    sortable: true,
+    field: "description",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "createdAt",
+    align: "center",
+    label: "วันที่ดำเนินการ",
+    sortable: true,
+    field: "createdAt",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "createdFullName",
+    align: "left",
+    label: "ผู้ดำเนินการ",
+    sortable: true,
+    field: "createdFullName",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
 ]);
 
 const visibleColumnsHistory = ref<String[]>([
-	"description",
-	"createdAt",
-	"createdFullName",
+  "description",
+  "createdAt",
+  "createdFullName",
 ]);
 
 onMounted(async () => {
-	loaderPage(false);
-	await fetchData();
+  hideLoader();
+  await fetchData();
 });
 
 /**
@@ -567,207 +519,207 @@ onMounted(async () => {
  * @param value วันที่ type datetime ที่จะแปลงเป็นไทย
  */
 const textDate = (value: Date) => {
-	return dateText(value);
+  return dateText(value);
 };
 
 const fetchData = async () => {
-	loaderPage(true);
-	await http
-		.get(config.API.getCandidates)
-		.then((res) => {
-			const data = res.data.result;
-			let result: ResponseRecruitPeriod[] = [];
-			if (data.length > 0) {
-				data.map((r: ResponseRecruitPeriod) => {
-					if (r.score != null) {
-						r.scoreCount = r.score.scoreCount;
-						r.scoreImportDate = r.score.importDate;
-					}
-					result.push(r);
-				});
-			}
+  showLoader();
+  await http
+    .get(config.API.getCandidates)
+    .then((res) => {
+      const data = res.data.result;
+      let result: ResponseRecruitPeriod[] = [];
+      if (data.length > 0) {
+        data.map((r: ResponseRecruitPeriod) => {
+          if (r.score != null) {
+            r.scoreCount = r.score.scoreCount;
+            r.scoreImportDate = r.score.importDate;
+          }
+          result.push(r);
+        });
+      }
 
-			rows.value = result;
-		})
-		.catch((e) => {
-			messageError($q, e);
-		})
-		.finally(() => {
-			loaderPage(false);
-		});
+      rows.value = result;
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
 };
 
 const clickPassExam = (id: string) => {
-	window.open(config.API.exportPassExamList(id));
+  window.open(config.API.exportPassExamList(id));
 };
 
 const clickCandidateList = (id: string) => {
-	window.open(config.API.exportCandidateList(id));
+  window.open(config.API.exportCandidateList(id));
 };
 
 const clickDetail = (id: string) => {
-	router.push(`/compete/import/${id}`);
+  router.push(`/compete/import/${id}`);
 };
 
 const clickEdit = async (id: string) => {
-	modalScore.value = true;
-	textTittleScore.value = "นำเข้าผลคะแนนสอบแข่งขัน";
-	selected_row_id.value = id;
+  modalScore.value = true;
+  textTittleScore.value = "นำเข้าผลคะแนนสอบแข่งขัน";
+  selected_row_id.value = id;
 };
 
 const clickUpload = async (id: string) => {
-	modalCandidate.value = true;
-	textTittleCandidate.value = "นำเข้าผู้สมัครสอบแข่งขัน";
-	selected_row_id.value = id;
+  modalCandidate.value = true;
+  textTittleCandidate.value = "นำเข้าผู้สมัครสอบแข่งขัน";
+  selected_row_id.value = id;
 };
 
 const clickEditPeriod = (id: string) => {
-	router.push(`/compete/period/${id}`);
+  router.push(`/compete/period/${id}`);
 };
 
 const clickHistory = async (id: string) => {
-	modalHistory.value = true;
-	loaderPage(true);
-	await http
-		.get(config.API.getImportHistory(id))
-		.then((res) => {
-			const data = res.data.result;
-			rowsHistory.value = [];
-			if (data.length > 0) {
-				data.map((i: ResponseHistoryObject) => {
-					rowsHistory.value.push({
-						createdAt: i.createdAt,
-						createdFullName: i.createdFullName,
-						createdUserId: i.createdUserId,
-						id: i.id,
-						isActive: i.isActive,
-						lastUpdateFullName: i.lastUpdateFullName,
-						lastUpdateUserId: i.lastUpdateUserId,
-						lastUpdatedAt: i.lastUpdatedAt,
-						description: i.description,
-					});
-				});
-			}
-		})
-		.catch((e) => {
-			modalError.value = true;
-			modalErrorTittle.value = "ไม่พบประวัติการเผยแพร่";
-			modalErrorDetail.value = e.response.data.message;
-			statusCode.value = e.response.data.status;
-		})
-		.finally(async () => {
-			loaderPage(false);
-		});
+  modalHistory.value = true;
+  showLoader();
+  await http
+    .get(config.API.getImportHistory(id))
+    .then((res) => {
+      const data = res.data.result;
+      rowsHistory.value = [];
+      if (data.length > 0) {
+        data.map((i: ResponseHistoryObject) => {
+          rowsHistory.value.push({
+            createdAt: i.createdAt,
+            createdFullName: i.createdFullName,
+            createdUserId: i.createdUserId,
+            id: i.id,
+            isActive: i.isActive,
+            lastUpdateFullName: i.lastUpdateFullName,
+            lastUpdateUserId: i.lastUpdateUserId,
+            lastUpdatedAt: i.lastUpdatedAt,
+            description: i.description,
+          });
+        });
+      }
+    })
+    .catch((e) => {
+      modalError.value = true;
+      modalErrorTittle.value = "ไม่พบประวัติการเผยแพร่";
+      modalErrorDetail.value = e.response.data.message;
+      statusCode.value = e.response.data.status;
+    })
+    .finally(async () => {
+      hideLoader();
+    });
 };
 
 const clickDelete = (id: string) => {
-	$q.dialog({
-		title: "ยืนยันการลบข้อมูล",
-		message: "ต้องการลบข้อมูลนี้ใช่หรือไม่?",
-		cancel: {
-			flat: true,
-			color: "negative",
-		},
-		persistent: true,
-	})
-		.onOk(async () => {
-			loaderPage(true);
-			await http
-				.delete(config.API.deleteCandidates(id))
-				.then((res) => {
-					success($q, "ลบข้อมูลการสอบสำเร็จ");
-					fetchData();
-				})
-				.catch((e) => {
-					messageError($q, e);
-				})
-				.finally(() => {
-					loaderPage(false);
-				});
-		})
-		.onCancel(() => {})
-		.onDismiss(() => {});
+  $q.dialog({
+    title: "ยืนยันการลบข้อมูล",
+    message: "ต้องการลบข้อมูลนี้ใช่หรือไม่?",
+    cancel: {
+      flat: true,
+      color: "negative",
+    },
+    persistent: true,
+  })
+    .onOk(async () => {
+      showLoader();
+      await http
+        .delete(config.API.deleteCandidates(id))
+        .then((res) => {
+          success($q, "ลบข้อมูลการสอบสำเร็จ");
+          fetchData();
+        })
+        .catch((e) => {
+          messageError($q, e);
+        })
+        .finally(() => {
+          hideLoader();
+        });
+    })
+    .onCancel(() => {})
+    .onDismiss(() => {});
 };
 
 const clickAdd = () => {
-	router.push({ name: "competePeriodAdd" });
+  router.push({ name: "competePeriodAdd" });
 };
 
 const clickClose = async () => {
-	modalAdd.value = false;
-	await fetchData();
+  modalAdd.value = false;
+  await fetchData();
 };
 
 const clickCloseScore = async () => {
-	modalScore.value = false;
-	await fetchData();
+  modalScore.value = false;
+  await fetchData();
 };
 
 const clickCloseCandidate = async () => {
-	modalCandidate.value = false;
-	await fetchData();
+  modalCandidate.value = false;
+  await fetchData();
 };
 
 const checkSaveCandidate = async () => {
-	const fd = new FormData();
-	fd.append("attachment", files_candidate.value[0]);
-	loaderPage(true);
-	await http
-		.post(config.API.uploadCandidates(selected_row_id.value), fd)
-		.then((res) => {
-			success($q, "นำเข้าข้อมูลผู้สมัครสอบสำเร็จ");
-			modalCandidate.value = false;
-			selected_row_id.value = "";
-			fetchData();
-		})
-		.catch((e) => {
-			messageError($q, e);
-		})
-		.finally(() => {
-			loaderPage(false);
-		});
+  const fd = new FormData();
+  fd.append("attachment", files_candidate.value[0]);
+  showLoader();
+  await http
+    .post(config.API.uploadCandidates(selected_row_id.value), fd)
+    .then((res) => {
+      success($q, "นำเข้าข้อมูลผู้สมัครสอบสำเร็จ");
+      modalCandidate.value = false;
+      selected_row_id.value = "";
+      fetchData();
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
 };
 
 const checkSaveScore = async () => {
-	const fd = new FormData();
-	fd.append("attachment", files_score.value[0]);
-	loaderPage(true);
-	await http
-		.post(config.API.saveScores(selected_row_id.value), fd)
-		.then((res) => {
-			success($q, "นำเข้าข้อมูลผลคะแนนสอบสำเร็จ");
-			modalScore.value = false;
-			selected_row_id.value = "";
-			fetchData();
-		})
-		.catch((e) => {
-			messageError($q, e);
-		})
-		.finally(() => {
-			loaderPage(false);
-		});
+  const fd = new FormData();
+  fd.append("attachment", files_score.value[0]);
+  showLoader();
+  await http
+    .post(config.API.saveScores(selected_row_id.value), fd)
+    .then((res) => {
+      success($q, "นำเข้าข้อมูลผลคะแนนสอบสำเร็จ");
+      modalScore.value = false;
+      selected_row_id.value = "";
+      fetchData();
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
 };
 
 const checkSave = async () => {
-	const fd = new FormData();
-	fd.append("attachment", files.value[0]);
-	fd.append("year", year.value.toString());
-	fd.append("order", order.value.toString());
-	fd.append("name", name.value);
-	loaderPage(true);
-	await http
-		.post(config.API.saveCandidates, fd)
-		.then((res) => {
-			success($q, "นำเข้าข้อมูลผู้สมัครสอบแข่งขันสำเร็จ");
-			modalAdd.value = false;
-			fetchData();
-		})
-		.catch((e) => {
-			messageError($q, e);
-		})
-		.finally(() => {
-			loaderPage(false);
-		});
+  const fd = new FormData();
+  fd.append("attachment", files.value[0]);
+  fd.append("year", year.value.toString());
+  fd.append("order", order.value.toString());
+  fd.append("name", name.value);
+  showLoader();
+  await http
+    .post(config.API.saveCandidates, fd)
+    .then((res) => {
+      success($q, "นำเข้าข้อมูลผู้สมัครสอบแข่งขันสำเร็จ");
+      modalAdd.value = false;
+      fetchData();
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
 };
 </script>
 
diff --git a/src/modules/03_recruiting/views/01_compete/PeriodAdd.vue b/src/modules/03_recruiting/views/01_compete/PeriodAdd.vue
index fc0d44ffb..d1ddda8e6 100644
--- a/src/modules/03_recruiting/views/01_compete/PeriodAdd.vue
+++ b/src/modules/03_recruiting/views/01_compete/PeriodAdd.vue
@@ -806,15 +806,14 @@ import type {
 } from "@/modules/02_organizational/interface/index/Main";
 import http from "@/plugins/http";
 import config from "@/app.config";
-import { useDataStore } from "@/stores/data";
 
-const dataStore = useDataStore();
-const { loaderPage } = dataStore;
+
+
 const $q = useQuasar(); // show dialog
 const mixin = useCounterMixin();
 const router = useRouter();
 const route = useRoute();
-const { date2Thai, success, dateToISO, notifyError } = mixin;
+const { date2Thai, success, dateToISO, notifyError, showLoader, hideLoader } = mixin;
 const myForm = ref<QForm | null>(null); //form data input
 const name = ref<string>("");
 const note = ref<string>("");
@@ -925,7 +924,7 @@ watch(organizationName, (count: DataOption, prevCount: DataOption) => {
 });
 
 onMounted(async () => {
-	loaderPage(false);
+	hideLoader();
 	if (route.params.id != undefined) {
 		edit.value = true;
 		id.value = route.params.id.toString();
@@ -940,7 +939,7 @@ const clickBack = () => {
 };
 
 const fetchData = async () => {
-	loaderPage(true);
+	showLoader();
 	await http
 		.get(config.API.getPeriodById(id.value))
 		.then((res) => {
@@ -992,7 +991,7 @@ const fetchData = async () => {
 			messageError($q, e);
 		})
 		.finally(() => {
-			loaderPage(false);
+			hideLoader();
 		});
 };
 
@@ -1019,7 +1018,7 @@ const uploadDocData = async () => {
 		fileDocDataUpload.value.forEach((file: any) => {
 			formData.append("", file);
 		});
-		loaderPage(true);
+		showLoader();
 		await http
 			.put(config.API.periodRecruitDoc(id.value), formData)
 			.then((res) => {})
@@ -1027,7 +1026,7 @@ const uploadDocData = async () => {
 				messageError($q, e);
 			})
 			.finally(async () => {
-				loaderPage(false);
+				hideLoader();
 				success($q, "บันทึกข้อมูลสำเร็จ");
 				clickBack();
 			});
@@ -1043,7 +1042,7 @@ const uploadImgData = async () => {
 		fileImgDataUpload.value.forEach((file: any) => {
 			formData.append("", file);
 		});
-		loaderPage(true);
+		showLoader();
 		await http
 			.put(config.API.periodRecruitImg(id.value), formData)
 			.then((res) => {})
@@ -1051,7 +1050,7 @@ const uploadImgData = async () => {
 				messageError($q, e);
 			})
 			.finally(async () => {
-				loaderPage(false);
+				hideLoader();
 			});
 	}
 };
@@ -1132,7 +1131,7 @@ const sendData = () => {
 };
 
 const deleteDocData = async (docId: string) => {
-	loaderPage(true);
+	showLoader();
 	await http
 		.delete(config.API.periodDeleteDoc(docId))
 		.then(async () => {
@@ -1142,12 +1141,12 @@ const deleteDocData = async (docId: string) => {
 			messageError($q, e);
 		})
 		.finally(async () => {
-			loaderPage(false);
+			hideLoader();
 		});
 };
 
 const deleteImgData = async (docId: string) => {
-	loaderPage(true);
+	showLoader();
 	await http
 		.delete(config.API.periodDeleteImg(docId))
 		.then(async () => {
@@ -1157,12 +1156,12 @@ const deleteImgData = async (docId: string) => {
 			messageError($q, e);
 		})
 		.finally(async () => {
-			loaderPage(false);
+			hideLoader();
 		});
 };
 
 const addData = async () => {
-	loaderPage(true);
+	showLoader();
 	await http
 		.post(config.API.savePeriod, sendData())
 		.then(async (res) => {
@@ -1175,12 +1174,12 @@ const addData = async () => {
 			messageError($q, e);
 		})
 		.finally(async () => {
-			loaderPage(false);
+			hideLoader();
 		});
 };
 
 const editData = async (id: string) => {
-	loaderPage(true);
+	showLoader();
 	await http
 		.put(config.API.editPeriod(id), sendData())
 		.then(async () => {
@@ -1191,7 +1190,7 @@ const editData = async (id: string) => {
 			messageError($q, e);
 		})
 		.finally(async () => {
-			loaderPage(false);
+			hideLoader();
 		});
 };
 
diff --git a/src/modules/03_recruiting/views/02_qualify/DisableDetail.vue b/src/modules/03_recruiting/views/02_qualify/DisableDetail.vue
index 91b22c7ed..774081eb1 100644
--- a/src/modules/03_recruiting/views/02_qualify/DisableDetail.vue
+++ b/src/modules/03_recruiting/views/02_qualify/DisableDetail.vue
@@ -121,15 +121,14 @@ import { ref, onMounted } from "vue";
 import { useRouter, useRoute } from "vue-router";
 import type { RecruitDetailResponse } from "@/modules/03_recruiting/interface/response/Period";
 import Table from "@/modules/03_recruiting/components/Table.vue";
-import { useDataStore } from "@/stores/data";
+
 import http from "@/plugins/http";
 import config from "@/app.config";
 import { useCounterMixin } from "@/stores/mixin";
 import { useQuasar } from "quasar";
 
 const $q = useQuasar();
-const dataStore = useDataStore();
-const { loaderPage } = dataStore;
+
 const year = ref<string>("2566");
 const round = ref<string>("1");
 const name = ref<string>("");
@@ -140,7 +139,7 @@ const pass = ref<number>(0);
 const notpass = ref<number>(0);
 const importId = ref<string>(route.params.id as string); // Period Import Id
 const mixin = useCounterMixin();
-const { messageError, success } = mixin;
+const { messageError, success, showLoader, hideLoader } = mixin;
 const filter = ref<string>(""); //search data table
 const visibleColumns = ref<String[]>([
   "examID",
@@ -328,12 +327,12 @@ const clickDetail = (examID: string) => {
 };
 
 onMounted(async () => {
-  loaderPage(false);
+  hideLoader();
   await fetchData();
 });
 
 const downloadExam = async () => {
-  loaderPage(true);
+  showLoader();
   await http
     .get(config.API.exportDisableExam(importId.value), {
       responseType: "blob",
@@ -349,12 +348,12 @@ const downloadExam = async () => {
       messageError($q, e);
     })
     .finally(() => {
-      loaderPage(false);
+      hideLoader();
     });
 };
 
 const downloadPassExam = async () => {
-  loaderPage(true);
+  showLoader();
   await http
     .get(config.API.exportDisablePassExam(importId.value), {
       responseType: "blob",
@@ -370,12 +369,12 @@ const downloadPassExam = async () => {
       messageError($q, e);
     })
     .finally(() => {
-      loaderPage(false);
+      hideLoader();
     });
 };
 
 const downloadPassResultExam = async () => {
-  loaderPage(true);
+  showLoader();
   await http
     .get(config.API.exportDisablePassResultExam(importId.value), {
       responseType: "blob",
@@ -391,12 +390,12 @@ const downloadPassResultExam = async () => {
       messageError($q, e);
     })
     .finally(() => {
-      loaderPage(false);
+      hideLoader();
     });
 };
 
 const fetchData = async () => {
-  loaderPage(true);
+  showLoader();
   await http
     .post(config.API.getDisableExamResultById(importId.value), {
       examAttribute: "",
@@ -427,7 +426,7 @@ const fetchData = async () => {
       messageError($q, e);
     })
     .finally(() => {
-      loaderPage(false);
+      hideLoader();
     });
 };
 
@@ -442,7 +441,7 @@ const candidateToPlacement = async () => {
     persistent: true,
   })
     .onOk(async () => {
-      loaderPage(true);
+      showLoader();
       await http
         .get(config.API.periodDisableToPlacement(importId.value))
         .then((res) => {
@@ -452,7 +451,7 @@ const candidateToPlacement = async () => {
           messageError($q, e);
         })
         .finally(async () => {
-          loaderPage(false);
+          hideLoader();
           router.go(-1);
         });
     })
diff --git a/src/modules/03_recruiting/views/02_qualify/DisableDetailEx.vue b/src/modules/03_recruiting/views/02_qualify/DisableDetailEx.vue
index 2908324fb..60d5f3982 100644
--- a/src/modules/03_recruiting/views/02_qualify/DisableDetailEx.vue
+++ b/src/modules/03_recruiting/views/02_qualify/DisableDetailEx.vue
@@ -237,19 +237,19 @@
 import type { QTableProps } from "quasar";
 import { ref, onMounted } from "vue";
 import { useRouter, useRoute } from "vue-router";
-import { useDataStore } from "@/stores/data";
+
 import http from "@/plugins/http";
 import config from "@/app.config";
 import { useCounterMixin } from "@/stores/mixin";
 import { useQuasar } from "quasar";
 
 const $q = useQuasar();
-const dataStore = useDataStore();
+
 const router = useRouter();
 const route = useRoute();
 const mixin = useCounterMixin();
-const { messageError } = mixin;
-const { loaderPage } = dataStore;
+const { messageError, showLoader, hideLoader } = mixin;
+
 const date = ref<any>();
 const profile_id = ref<string>("");
 const birthdate = ref<string>("");
@@ -289,7 +289,7 @@ onMounted(async () => {
 });
 
 const fetchData = async () => {
-  loaderPage(true);
+  showLoader();
   await http
     .get(config.API.getDisableExamDetail(importId.value, examId.value))
     .then((res) => {
@@ -328,12 +328,12 @@ const fetchData = async () => {
       messageError($q, e);
     })
     .finally(() => {
-      loaderPage(false);
+      hideLoader();
     });
 };
 
 const downloadScore = async () => {
-  loaderPage(true);
+  showLoader();
   await http
     .get(config.API.downloadDisableScoreReport(importId.value, examId.value), {
       responseType: "blob",
@@ -349,12 +349,12 @@ const downloadScore = async () => {
       messageError($q, e);
     })
     .finally(() => {
-      loaderPage(false);
+      hideLoader();
     });
 };
 
 const downloadCertificate = async () => {
-  loaderPage(true);
+  showLoader();
   await http
     .get(
       config.API.downloadDisableExamReport(importId.value, examId.value, 2),
@@ -373,7 +373,7 @@ const downloadCertificate = async () => {
       messageError($q, e);
     })
     .finally(() => {
-      loaderPage(false);
+      hideLoader();
     });
 };
 </script>
diff --git a/src/modules/03_recruiting/views/02_qualify/DisablePeriod.vue b/src/modules/03_recruiting/views/02_qualify/DisablePeriod.vue
index ccb021623..bf72c934b 100644
--- a/src/modules/03_recruiting/views/02_qualify/DisablePeriod.vue
+++ b/src/modules/03_recruiting/views/02_qualify/DisablePeriod.vue
@@ -1,406 +1,360 @@
 <!-- page:จัดการรอบการสอบ สรรหา -->
 <template>
-	<div class="toptitle text-dark col-12 row items-center">
-		จัดการรอบคัดเลือกคนพิการ
-	</div>
-	<q-card flat bordered class="col-12 q-mt-sm q-pt-sm q-pa-md">
-		<div>
-			<Table
-				style="max-height: 80vh"
-				:rows="rows"
-				:columns="columns"
-				:filter="filter"
-				:visible-columns="visibleColumns"
-				v-model:inputfilter="filter"
-				v-model:inputvisible="visibleColumns"
-				:pagination="initialPagination"
-				:nornmalData="true"
-				:add="clickAdd"
-				:paging="true"
-				:titleText="''"
-			>
-				<template #columns="props">
-					<q-tr :props="props" class="cursor-pointer">
-						<q-td
-							v-for="col in props.cols"
-							:key="col.name"
-							:props="props"
-							@click="clickDetail(props.row.id)"
-						>
-							<div v-if="col.name == 'no'">
-								{{ props.rowIndex + 1 }}
-							</div>
-							<div
-								v-else-if="col.name == 'name'"
-								class="table_ellipsis2"
-							>
-								{{ col.value }}
-							</div>
-							<div
-								v-else-if="col.name == 'year'"
-								class="table_ellipsis2"
-							>
-								{{ col.value + 543 }}
-							</div>
-							<div
-								v-else-if="col.name == 'scoreCount'"
-								class="table_ellipsis2"
-							>
-								<q-btn
-									flat
-									dense
-									size="12px"
-									round
-									color="green"
-									@click.stop.prevent="
-										clickEdit(props.row.id)
-									"
-									v-if="col.value == null"
-								>
-									<q-icon
-										name="mdi-file-excel-outline"
-										size="20px"
-									/>
-									<!-- นำเข้าไฟล์ผลคะแนนสอบ -->
-									<q-tooltip>นำเข้าไฟล์ผลคะแนนสอบ</q-tooltip>
-								</q-btn>
-								<div v-else>
-									{{ col.value }}
-									<q-btn
-										dense
-										size="12px"
-										flat
-										round
-										color="green"
-										@click.stop.prevent="
-											clickEdit(props.row.id)
-										"
-										icon="mdi-file-excel-outline"
-									>
-										<q-tooltip
-											>นำเข้าไฟล์ผลคะแนนสอบอีกครั้ง</q-tooltip
-										>
-									</q-btn>
+  <div class="toptitle text-dark col-12 row items-center">
+    จัดการรอบคัดเลือกคนพิการ
+  </div>
+  <q-card flat bordered class="col-12 q-mt-sm q-pt-sm q-pa-md">
+    <div>
+      <Table
+        style="max-height: 80vh"
+        :rows="rows"
+        :columns="columns"
+        :filter="filter"
+        :visible-columns="visibleColumns"
+        v-model:inputfilter="filter"
+        v-model:inputvisible="visibleColumns"
+        :pagination="initialPagination"
+        :nornmalData="true"
+        :add="clickAdd"
+        :paging="true"
+        :titleText="''"
+      >
+        <template #columns="props">
+          <q-tr :props="props" class="cursor-pointer">
+            <q-td
+              v-for="col in props.cols"
+              :key="col.name"
+              :props="props"
+              @click="clickDetail(props.row.id)"
+            >
+              <div v-if="col.name == 'no'">
+                {{ props.rowIndex + 1 }}
+              </div>
+              <div v-else-if="col.name == 'name'" class="table_ellipsis2">
+                {{ col.value }}
+              </div>
+              <div v-else-if="col.name == 'year'" class="table_ellipsis2">
+                {{ col.value + 543 }}
+              </div>
+              <div v-else-if="col.name == 'scoreCount'" class="table_ellipsis2">
+                <q-btn
+                  flat
+                  dense
+                  size="12px"
+                  round
+                  color="green"
+                  @click.stop.prevent="clickEdit(props.row.id)"
+                  v-if="col.value == null"
+                >
+                  <q-icon name="mdi-file-excel-outline" size="20px" />
+                  <!-- นำเข้าไฟล์ผลคะแนนสอบ -->
+                  <q-tooltip>นำเข้าไฟล์ผลคะแนนสอบ</q-tooltip>
+                </q-btn>
+                <div v-else>
+                  {{ col.value }}
+                  <q-btn
+                    dense
+                    size="12px"
+                    flat
+                    round
+                    color="green"
+                    @click.stop.prevent="clickEdit(props.row.id)"
+                    icon="mdi-file-excel-outline"
+                  >
+                    <q-tooltip>นำเข้าไฟล์ผลคะแนนสอบอีกครั้ง</q-tooltip>
+                  </q-btn>
 
-									<q-btn
-										dense
-										size="12px"
-										flat
-										round
-										color="indigo"
-										@click.stop.prevent="
-											clickPassExam(props.row.id)
-										"
-										icon="mdi-clipboard-arrow-down"
-									>
-										<q-tooltip
-											>ดาวน์โหลดรายชื่อผู้สอบแข่งขันได้</q-tooltip
-										>
-									</q-btn>
-								</div>
-							</div>
-							<div
-								v-else-if="col.name == 'examCount'"
-								class="table_ellipsis2"
-							>
-								<q-btn
-									flat
-									dense
-									size="12px"
-									color="green"
-									round
-									@click.stop.prevent="
-										clickUpload(props.row.id)
-									"
-									v-if="col.value == null || col.value == '0'"
-								>
-									<q-icon
-										name="mdi-file-excel-outline"
-										size="20px"
-									/>
-									<q-tooltip>นำเข้าไฟล์ผู้สมัครสอบ</q-tooltip>
-								</q-btn>
-								<div v-else>
-									{{ col.value }}
+                  <q-btn
+                    dense
+                    size="12px"
+                    flat
+                    round
+                    color="indigo"
+                    @click.stop.prevent="clickPassExam(props.row.id)"
+                    icon="mdi-clipboard-arrow-down"
+                  >
+                    <q-tooltip>ดาวน์โหลดรายชื่อผู้สอบแข่งขันได้</q-tooltip>
+                  </q-btn>
+                </div>
+              </div>
+              <div v-else-if="col.name == 'examCount'" class="table_ellipsis2">
+                <q-btn
+                  flat
+                  dense
+                  size="12px"
+                  color="green"
+                  round
+                  @click.stop.prevent="clickUpload(props.row.id)"
+                  v-if="col.value == null || col.value == '0'"
+                >
+                  <q-icon name="mdi-file-excel-outline" size="20px" />
+                  <q-tooltip>นำเข้าไฟล์ผู้สมัครสอบ</q-tooltip>
+                </q-btn>
+                <div v-else>
+                  {{ col.value }}
 
-									<q-btn
-										dense
-										size="12px"
-										flat
-										round
-										color="green"
-										@click.stop.prevent="
-											clickUpload(props.row.id)
-										"
-										icon="mdi-file-excel-outline"
-									>
-										<q-tooltip
-											>นำเข้าไฟล์ผู้สมัครสอบอีกครั้ง</q-tooltip
-										>
-									</q-btn>
+                  <q-btn
+                    dense
+                    size="12px"
+                    flat
+                    round
+                    color="green"
+                    @click.stop.prevent="clickUpload(props.row.id)"
+                    icon="mdi-file-excel-outline"
+                  >
+                    <q-tooltip>นำเข้าไฟล์ผู้สมัครสอบอีกครั้ง</q-tooltip>
+                  </q-btn>
 
-									<q-btn
-										dense
-										size="12px"
-										flat
-										round
-										color="indigo"
-										@click.stop.prevent="
-											clickCandidateList(props.row.id)
-										"
-										icon="mdi-clipboard-arrow-down"
-									>
-										<q-tooltip
-											>ดาวน์โหลดรายชื่อผู้มีสิทธิ์สอบ</q-tooltip
-										>
-									</q-btn>
-								</div>
-							</div>
-							<div v-else>
-								{{ col.value }}
-							</div>
-						</q-td>
-						<q-td>
-							<q-btn
-								dense
-								size="12px"
-								flat
-								round
-								color="primary"
-								@click="clickEditPeriod(props.row.id)"
-								icon="mdi-pencil-outline"
-							>
-								<q-tooltip>แก้ไขข้อมูล</q-tooltip>
-							</q-btn>
-							<q-btn
-								dense
-								size="12px"
-								flat
-								round
-								color="red"
-								@click="clickDelete(props.row.id)"
-								icon="mdi-delete"
-							>
-								<q-tooltip>ลบข้อมูล</q-tooltip>
-							</q-btn>
+                  <q-btn
+                    dense
+                    size="12px"
+                    flat
+                    round
+                    color="indigo"
+                    @click.stop.prevent="clickCandidateList(props.row.id)"
+                    icon="mdi-clipboard-arrow-down"
+                  >
+                    <q-tooltip>ดาวน์โหลดรายชื่อผู้มีสิทธิ์สอบ</q-tooltip>
+                  </q-btn>
+                </div>
+              </div>
+              <div v-else>
+                {{ col.value }}
+              </div>
+            </q-td>
+            <q-td>
+              <q-btn
+                dense
+                size="12px"
+                flat
+                round
+                color="primary"
+                @click="clickEditPeriod(props.row.id)"
+                icon="mdi-pencil-outline"
+              >
+                <q-tooltip>แก้ไขข้อมูล</q-tooltip>
+              </q-btn>
+              <q-btn
+                dense
+                size="12px"
+                flat
+                round
+                color="red"
+                @click="clickDelete(props.row.id)"
+                icon="mdi-delete"
+              >
+                <q-tooltip>ลบข้อมูล</q-tooltip>
+              </q-btn>
 
-							<q-btn
-								color="info"
-								flat
-								dense
-								round
-								size="12px"
-								icon="mdi-history"
-								@click="clickHistory(props.row.id)"
-							>
-								<q-tooltip>แสดงประวัติการทำงาน</q-tooltip>
-							</q-btn>
-						</q-td>
-					</q-tr>
-				</template>
-			</Table>
-		</div>
-	</q-card>
+              <q-btn
+                color="info"
+                flat
+                dense
+                round
+                size="12px"
+                icon="mdi-history"
+                @click="clickHistory(props.row.id)"
+              >
+                <q-tooltip>แสดงประวัติการทำงาน</q-tooltip>
+              </q-btn>
+            </q-td>
+          </q-tr>
+        </template>
+      </Table>
+    </div>
+  </q-card>
 
-	<HistoryTable
-		:rows="rowsHistory"
-		:columns="columnsHistory"
-		:visible-columns="visibleColumnsHistory"
-		v-model:modal="modalHistory"
-		v-model:inputvisible="visibleColumnsHistory"
-		v-model:tittle="tittleHistory"
-	>
-		<template #columns="props">
-			<q-tr :props="props">
-				<q-td v-for="col in props.cols" :key="col.name" :props="props">
-					<div v-if="col.name == 'isActive'" class="">
-						<q-icon
-							v-if="col.value == false"
-							name="mdi-close"
-							color="red"
-							class="text-h5"
-						/>
-						<q-icon
-							v-else
-							name="mdi-check"
-							color="positive"
-							class="text-h5"
-						/>
-					</div>
-					<div v-else-if="col.name == 'createdAt'" class="">
-						{{ textDate(col.value) }}
-					</div>
+  <HistoryTable
+    :rows="rowsHistory"
+    :columns="columnsHistory"
+    :visible-columns="visibleColumnsHistory"
+    v-model:modal="modalHistory"
+    v-model:inputvisible="visibleColumnsHistory"
+    v-model:tittle="tittleHistory"
+  >
+    <template #columns="props">
+      <q-tr :props="props">
+        <q-td v-for="col in props.cols" :key="col.name" :props="props">
+          <div v-if="col.name == 'isActive'" class="">
+            <q-icon
+              v-if="col.value == false"
+              name="mdi-close"
+              color="red"
+              class="text-h5"
+            />
+            <q-icon v-else name="mdi-check" color="positive" class="text-h5" />
+          </div>
+          <div v-else-if="col.name == 'createdAt'" class="">
+            {{ textDate(col.value) }}
+          </div>
 
-					<div v-else class="">
-						{{ col.value }}
-					</div>
-				</q-td>
-			</q-tr>
-		</template>
-	</HistoryTable>
+          <div v-else class="">
+            {{ col.value }}
+          </div>
+        </q-td>
+      </q-tr>
+    </template>
+  </HistoryTable>
 
-	<!-- popup Edit window-->
-	<q-dialog v-model="modalAdd" persistent>
-		<q-card style="width: 600px">
-			<q-form ref="myForm">
-				<DialogHeader :tittle="textTittle" :close="clickClose" />
-				<q-separator />
-				<q-card-section>
-					<div class="col-12 row items-center q-col-gutter-sm">
-						<div class="col-12">
-							<q-input
-								outlined
-								v-model="name"
-								label="ชื่อการคัดเลือกคนพิการ"
-								dense
-								autogrow
-								lazy-rules
-								autofocus
-								hide-bottom-space
-							></q-input>
-						</div>
-						<div class="col-12">
-							<q-input
-								outlined
-								v-model="round"
-								label="ครั้งที่"
-								dense
-								autogrow
-								lazy-rules
-								autofocus
-								hide-bottom-space
-							></q-input>
-						</div>
-						<div class="col-12">
-							<q-input
-								outlined
-								v-model="year"
-								label="ปีงบประมาณ"
-								dense
-								autogrow
-								lazy-rules
-								autofocus
-								hide-bottom-space
-							></q-input>
-						</div>
-						<div class="col-12">
-							<q-file
-								v-model="files"
-								dense
-								label="เลือกไฟล์รายชื่อผู้สมัครคัดเลือกคนพิการ"
-								outlined
-								use-chips
-								multiple
-							>
-								<template v-slot:prepend>
-									<q-icon name="attach_file" />
-								</template>
-							</q-file>
-						</div>
-					</div>
-				</q-card-section>
-				<q-separator />
-				<q-card-actions class="text-primary q-py-sm">
-					<q-space />
-					<q-btn
-						flat
-						round
-						color="public"
-						@click="checkSave"
-						icon="mdi-content-save-outline"
-					>
-						<q-tooltip>บันทึก</q-tooltip>
-					</q-btn>
-				</q-card-actions>
-			</q-form>
-		</q-card>
-	</q-dialog>
+  <!-- popup Edit window-->
+  <q-dialog v-model="modalAdd" persistent>
+    <q-card style="width: 600px">
+      <q-form ref="myForm">
+        <DialogHeader :tittle="textTittle" :close="clickClose" />
+        <q-separator />
+        <q-card-section>
+          <div class="col-12 row items-center q-col-gutter-sm">
+            <div class="col-12">
+              <q-input
+                outlined
+                v-model="name"
+                label="ชื่อการคัดเลือกคนพิการ"
+                dense
+                autogrow
+                lazy-rules
+                autofocus
+                hide-bottom-space
+              ></q-input>
+            </div>
+            <div class="col-12">
+              <q-input
+                outlined
+                v-model="round"
+                label="ครั้งที่"
+                dense
+                autogrow
+                lazy-rules
+                autofocus
+                hide-bottom-space
+              ></q-input>
+            </div>
+            <div class="col-12">
+              <q-input
+                outlined
+                v-model="year"
+                label="ปีงบประมาณ"
+                dense
+                autogrow
+                lazy-rules
+                autofocus
+                hide-bottom-space
+              ></q-input>
+            </div>
+            <div class="col-12">
+              <q-file
+                v-model="files"
+                dense
+                label="เลือกไฟล์รายชื่อผู้สมัครคัดเลือกคนพิการ"
+                outlined
+                use-chips
+                multiple
+              >
+                <template v-slot:prepend>
+                  <q-icon name="attach_file" />
+                </template>
+              </q-file>
+            </div>
+          </div>
+        </q-card-section>
+        <q-separator />
+        <q-card-actions class="text-primary q-py-sm">
+          <q-space />
+          <q-btn
+            flat
+            round
+            color="public"
+            @click="checkSave"
+            icon="mdi-content-save-outline"
+          >
+            <q-tooltip>บันทึก</q-tooltip>
+          </q-btn>
+        </q-card-actions>
+      </q-form>
+    </q-card>
+  </q-dialog>
 
-	<q-dialog v-model="modalScore" persistent>
-		<q-card style="width: 600px">
-			<q-form ref="myFormScore">
-				<DialogHeader
-					:tittle="textTittleScore"
-					:close="clickCloseScore"
-				/>
-				<q-separator />
-				<q-card-section>
-					<div class="col-12 row items-center q-col-gutter-sm">
-						<div class="col-12">
-							<q-file
-								v-model="files_score"
-								dense
-								label="เลือกไฟล์ผลการคัดเลือกคนพิการ"
-								outlined
-								use-chips
-								multiple
-							>
-								<template v-slot:prepend>
-									<q-icon name="attach_file" />
-								</template>
-							</q-file>
-						</div>
-					</div>
-				</q-card-section>
-				<q-separator />
-				<q-card-actions class="text-primary q-py-sm">
-					<q-space />
-					<q-btn
-						flat
-						round
-						color="public"
-						@click="checkSaveScore"
-						icon="mdi-content-save-outline"
-					>
-						<q-tooltip>บันทึก</q-tooltip>
-					</q-btn>
-				</q-card-actions>
-			</q-form>
-		</q-card>
-	</q-dialog>
+  <q-dialog v-model="modalScore" persistent>
+    <q-card style="width: 600px">
+      <q-form ref="myFormScore">
+        <DialogHeader :tittle="textTittleScore" :close="clickCloseScore" />
+        <q-separator />
+        <q-card-section>
+          <div class="col-12 row items-center q-col-gutter-sm">
+            <div class="col-12">
+              <q-file
+                v-model="files_score"
+                dense
+                label="เลือกไฟล์ผลการคัดเลือกคนพิการ"
+                outlined
+                use-chips
+                multiple
+              >
+                <template v-slot:prepend>
+                  <q-icon name="attach_file" />
+                </template>
+              </q-file>
+            </div>
+          </div>
+        </q-card-section>
+        <q-separator />
+        <q-card-actions class="text-primary q-py-sm">
+          <q-space />
+          <q-btn
+            flat
+            round
+            color="public"
+            @click="checkSaveScore"
+            icon="mdi-content-save-outline"
+          >
+            <q-tooltip>บันทึก</q-tooltip>
+          </q-btn>
+        </q-card-actions>
+      </q-form>
+    </q-card>
+  </q-dialog>
 
-	<q-dialog v-model="modalCandidate" persistent>
-		<q-card style="width: 600px">
-			<q-form ref="myFormScore">
-				<DialogHeader
-					:tittle="textTittleCandidate"
-					:close="clickCloseCandidate"
-				/>
-				<q-separator />
-				<q-card-section>
-					<div class="col-12 row items-center q-col-gutter-sm">
-						<div class="col-12">
-							<q-file
-								v-model="files_candidate"
-								dense
-								label="เลือกไฟล์ผู้สมัครคัดเลือกคนพิการ"
-								outlined
-								use-chips
-								multiple
-							>
-								<template v-slot:prepend>
-									<q-icon name="attach_file" />
-								</template>
-							</q-file>
-						</div>
-					</div>
-				</q-card-section>
-				<q-separator />
-				<q-card-actions class="text-primary q-py-sm">
-					<q-space />
-					<q-btn
-						flat
-						round
-						color="public"
-						@click="checkSaveCandidate"
-						icon="mdi-content-save-outline"
-					>
-						<q-tooltip>บันทึก</q-tooltip>
-					</q-btn>
-				</q-card-actions>
-			</q-form>
-		</q-card>
-	</q-dialog>
+  <q-dialog v-model="modalCandidate" persistent>
+    <q-card style="width: 600px">
+      <q-form ref="myFormScore">
+        <DialogHeader
+          :tittle="textTittleCandidate"
+          :close="clickCloseCandidate"
+        />
+        <q-separator />
+        <q-card-section>
+          <div class="col-12 row items-center q-col-gutter-sm">
+            <div class="col-12">
+              <q-file
+                v-model="files_candidate"
+                dense
+                label="เลือกไฟล์ผู้สมัครคัดเลือกคนพิการ"
+                outlined
+                use-chips
+                multiple
+              >
+                <template v-slot:prepend>
+                  <q-icon name="attach_file" />
+                </template>
+              </q-file>
+            </div>
+          </div>
+        </q-card-section>
+        <q-separator />
+        <q-card-actions class="text-primary q-py-sm">
+          <q-space />
+          <q-btn
+            flat
+            round
+            color="public"
+            @click="checkSaveCandidate"
+            icon="mdi-content-save-outline"
+          >
+            <q-tooltip>บันทึก</q-tooltip>
+          </q-btn>
+        </q-card-actions>
+      </q-form>
+    </q-card>
+  </q-dialog>
 </template>
 <script setup lang="ts">
 import type { QTableProps } from "quasar";
@@ -409,26 +363,24 @@ import { useRouter } from "vue-router";
 import { useQuasar } from "quasar";
 import { useCounterMixin } from "@/stores/mixin";
 import type {
-	ResponseRecruitPeriod,
-	ResponseHistoryObject,
+  ResponseRecruitPeriod,
+  ResponseHistoryObject,
 } from "@/modules/03_recruiting/interface/response/Period";
 import type { Pagination } from "@/modules/03_recruiting/interface/index/Main";
 import Table from "@/modules/03_recruiting/components/Table.vue";
 import DialogHeader from "@/components/DialogHeader.vue";
-import { useDataStore } from "@/stores/data";
+
 import http from "@/plugins/http";
 import config from "@/app.config";
 import HistoryTable from "@/components/TableHistory.vue";
 
-const dataStore = useDataStore();
-const { loaderPage } = dataStore;
 const $q = useQuasar(); // show dialog
 const router = useRouter();
 const name = ref<string>("");
 const year = ref<number>(new Date().getFullYear() + 543);
 const round = ref<number>(1);
 const mixin = useCounterMixin();
-const { success, dateText, messageError } = mixin;
+const { success, dateText, messageError, showLoader, hideLoader } = mixin;
 const files = ref<any>(null);
 const files_score = ref<any>(null);
 const files_candidate = ref<any>(null);
@@ -445,121 +397,121 @@ const textTittle = ref<string>("");
 const textTittleScore = ref<string>("");
 const textTittleCandidate = ref<string>("");
 const initialPagination = ref<Pagination>({
-	rowsPerPage: 0,
+  rowsPerPage: 0,
 });
 const visibleColumns = ref<String[]>([
-	"no",
-	"name",
-	"round",
-	"year",
-	"examCount",
-	"scoreCount",
+  "no",
+  "name",
+  "round",
+  "year",
+  "examCount",
+  "scoreCount",
 ]);
 
 const columns = ref<QTableProps["columns"]>([
-	{
-		name: "no",
-		align: "left",
-		label: "ลำดับ",
-		sortable: true,
-		field: "no",
-		headerStyle: "font-size: 14px",
-		style: "font-size: 14px",
-	},
-	{
-		name: "name",
-		align: "left",
-		label: "รอบคัดเลือกคนพิการ",
-		sortable: true,
-		field: "name",
-		headerStyle: "font-size: 14px",
-		style: "font-size: 14px",
-	},
-	{
-		name: "round",
-		align: "left",
-		label: "ครั้งที่",
-		sortable: true,
-		field: "round",
-		headerStyle: "font-size: 14px",
-		style: "font-size: 14px",
-	},
-	{
-		name: "year",
-		align: "left",
-		label: "ปีงบประมาณ",
-		sortable: true,
-		field: "year",
-		headerStyle: "font-size: 14px",
-		style: "font-size: 14px",
-	},
-	{
-		name: "examCount",
-		label: "จำนวนผู้สอบทั้งหมด",
-		align: "right",
-		field: "examCount",
-		sortable: true,
-		headerStyle: "font-size: 14px",
-		style: "font-size: 14px",
-	},
-	{
-		name: "scoreCount",
-		label: "จำนวนที่บันทึกผลสอบ",
-		align: "right",
-		field: "scoreCount",
-		sortable: true,
-		headerStyle: "font-size: 14px",
-		style: "font-size: 14px",
-	},
+  {
+    name: "no",
+    align: "left",
+    label: "ลำดับ",
+    sortable: true,
+    field: "no",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "name",
+    align: "left",
+    label: "รอบคัดเลือกคนพิการ",
+    sortable: true,
+    field: "name",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "round",
+    align: "left",
+    label: "ครั้งที่",
+    sortable: true,
+    field: "round",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "year",
+    align: "left",
+    label: "ปีงบประมาณ",
+    sortable: true,
+    field: "year",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "examCount",
+    label: "จำนวนผู้สอบทั้งหมด",
+    align: "right",
+    field: "examCount",
+    sortable: true,
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "scoreCount",
+    label: "จำนวนที่บันทึกผลสอบ",
+    align: "right",
+    field: "scoreCount",
+    sortable: true,
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
 ]);
 
 const columnsHistory = ref<QTableProps["columns"]>([
-	{
-		name: "description",
-		align: "left",
-		label: "รายละเอียด",
-		sortable: true,
-		field: "description",
-		headerStyle: "font-size: 14px",
-		style: "font-size: 14px",
-	},
-	{
-		name: "createdAt",
-		align: "center",
-		label: "วันที่ดำเนินการ",
-		sortable: true,
-		field: "createdAt",
-		headerStyle: "font-size: 14px",
-		style: "font-size: 14px",
-	},
-	{
-		name: "createdFullName",
-		align: "left",
-		label: "ผู้ดำเนินการ",
-		sortable: true,
-		field: "createdFullName",
-		headerStyle: "font-size: 14px",
-		style: "font-size: 14px",
-	},
+  {
+    name: "description",
+    align: "left",
+    label: "รายละเอียด",
+    sortable: true,
+    field: "description",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "createdAt",
+    align: "center",
+    label: "วันที่ดำเนินการ",
+    sortable: true,
+    field: "createdAt",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "createdFullName",
+    align: "left",
+    label: "ผู้ดำเนินการ",
+    sortable: true,
+    field: "createdFullName",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
 ]);
 
 const visibleColumnsHistory = ref<String[]>([
-	"description",
-	"createdAt",
-	"createdFullName",
+  "description",
+  "createdAt",
+  "createdFullName",
 ]);
 
 onMounted(async () => {
-	loaderPage(false);
-	await fetchData();
+  hideLoader();
+  await fetchData();
 });
 
 const clickPassExam = (id: string) => {
-	window.open(config.API.exportDisablePassExamList(id));
+  window.open(config.API.exportDisablePassExamList(id));
 };
 
 const clickCandidateList = (id: string) => {
-	window.open(config.API.exportDisableCandidateList(id));
+  window.open(config.API.exportDisableCandidateList(id));
 };
 
 /**
@@ -567,196 +519,196 @@ const clickCandidateList = (id: string) => {
  * @param value วันที่ type datetime ที่จะแปลงเป็นไทย
  */
 const textDate = (value: Date) => {
-	return dateText(value);
+  return dateText(value);
 };
 
 const fetchData = async () => {
-	loaderPage(true);
-	await http
-		.get(config.API.getDisableCandidates)
-		.then((res) => {
-			const data = res.data.result;
-			let result: ResponseRecruitPeriod[] = [];
-			if (data.length > 0) {
-				data.map((r: ResponseRecruitPeriod) => {
-					if (r.score != null) {
-						r.scoreCount = r.score.scoreCount;
-						r.scoreImportDate = r.score.importDate;
-					}
-					result.push(r);
-				});
-			}
+  showLoader();
+  await http
+    .get(config.API.getDisableCandidates)
+    .then((res) => {
+      const data = res.data.result;
+      let result: ResponseRecruitPeriod[] = [];
+      if (data.length > 0) {
+        data.map((r: ResponseRecruitPeriod) => {
+          if (r.score != null) {
+            r.scoreCount = r.score.scoreCount;
+            r.scoreImportDate = r.score.importDate;
+          }
+          result.push(r);
+        });
+      }
 
-			rows.value = result;
-		})
-		.catch((e) => {
-			messageError($q, e);
-		})
-		.finally(() => {
-			loaderPage(false);
-		});
+      rows.value = result;
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
 };
 
 const clickDetail = (id: string) => {
-	router.push(`/disable/import/${id}`);
+  router.push(`/disable/import/${id}`);
 };
 
 const clickEdit = async (id: string) => {
-	modalScore.value = true;
-	textTittleScore.value = "นำเข้าผลการคัดเลือกคนพิการ";
-	selected_row_id.value = id;
+  modalScore.value = true;
+  textTittleScore.value = "นำเข้าผลการคัดเลือกคนพิการ";
+  selected_row_id.value = id;
 };
 
 const clickUpload = async (id: string) => {
-	modalCandidate.value = true;
-	textTittleCandidate.value = "นำเข้าผู้สมัครคัดเลือกคนพิการ";
-	selected_row_id.value = id;
+  modalCandidate.value = true;
+  textTittleCandidate.value = "นำเข้าผู้สมัครคัดเลือกคนพิการ";
+  selected_row_id.value = id;
 };
 
 const clickEditPeriod = (id: string) => {
-	router.push(`/disable/period/${id}`);
+  router.push(`/disable/period/${id}`);
 };
 
 const clickHistory = async (id: string) => {
-	modalHistory.value = true;
-	loaderPage(true);
-	await http
-		.get(config.API.getDisableImportHistory(id))
-		.then((res) => {
-			const data = res.data.result;
-			rowsHistory.value = [];
-			if (data.length > 0) {
-				data.map((i: ResponseHistoryObject) => {
-					rowsHistory.value.push({
-						createdAt: i.createdAt,
-						createdFullName: i.createdFullName,
-						createdUserId: i.createdUserId,
-						id: i.id,
-						isActive: i.isActive,
-						lastUpdateFullName: i.lastUpdateFullName,
-						lastUpdateUserId: i.lastUpdateUserId,
-						lastUpdatedAt: i.lastUpdatedAt,
-						description: i.description,
-					});
-				});
-			}
-		})
-		.catch((e) => {
-			messageError($q, e);
-		})
-		.finally(async () => {
-			loaderPage(false);
-		});
+  modalHistory.value = true;
+  showLoader();
+  await http
+    .get(config.API.getDisableImportHistory(id))
+    .then((res) => {
+      const data = res.data.result;
+      rowsHistory.value = [];
+      if (data.length > 0) {
+        data.map((i: ResponseHistoryObject) => {
+          rowsHistory.value.push({
+            createdAt: i.createdAt,
+            createdFullName: i.createdFullName,
+            createdUserId: i.createdUserId,
+            id: i.id,
+            isActive: i.isActive,
+            lastUpdateFullName: i.lastUpdateFullName,
+            lastUpdateUserId: i.lastUpdateUserId,
+            lastUpdatedAt: i.lastUpdatedAt,
+            description: i.description,
+          });
+        });
+      }
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(async () => {
+      hideLoader();
+    });
 };
 
 const clickDelete = (id: string) => {
-	$q.dialog({
-		title: "ยืนยันการลบข้อมูล",
-		message: "ต้องการลบข้อมูลนี้ใช่หรือไม่?",
-		cancel: {
-			flat: true,
-			color: "negative",
-		},
-		persistent: true,
-	})
-		.onOk(async () => {
-			loaderPage(true);
-			await http
-				.delete(config.API.deleteDisableCandidates(id))
-				.then((res) => {
-					success($q, "ลบข้อมูลการสอบสำเร็จ");
-					fetchData();
-				})
-				.catch((e) => {
-					messageError($q, e);
-				})
-				.finally(() => {
-					loaderPage(false);
-				});
-		})
-		.onCancel(() => {})
-		.onDismiss(() => {});
+  $q.dialog({
+    title: "ยืนยันการลบข้อมูล",
+    message: "ต้องการลบข้อมูลนี้ใช่หรือไม่?",
+    cancel: {
+      flat: true,
+      color: "negative",
+    },
+    persistent: true,
+  })
+    .onOk(async () => {
+      showLoader();
+      await http
+        .delete(config.API.deleteDisableCandidates(id))
+        .then((res) => {
+          success($q, "ลบข้อมูลการสอบสำเร็จ");
+          fetchData();
+        })
+        .catch((e) => {
+          messageError($q, e);
+        })
+        .finally(() => {
+          hideLoader();
+        });
+    })
+    .onCancel(() => {})
+    .onDismiss(() => {});
 };
 
 const clickAdd = () => {
-	router.push({ name: "disablePeriodAdd" });
+  router.push({ name: "disablePeriodAdd" });
 };
 
 const clickClose = async () => {
-	modalAdd.value = false;
-	await fetchData();
+  modalAdd.value = false;
+  await fetchData();
 };
 
 const clickCloseScore = async () => {
-	modalScore.value = false;
-	await fetchData();
+  modalScore.value = false;
+  await fetchData();
 };
 
 const clickCloseCandidate = async () => {
-	modalCandidate.value = false;
-	await fetchData();
+  modalCandidate.value = false;
+  await fetchData();
 };
 
 const checkSaveCandidate = async () => {
-	const fd = new FormData();
-	fd.append("attachment", files_candidate.value[0]);
-	loaderPage(true);
-	await http
-		.post(config.API.uploadDisableCandidates(selected_row_id.value), fd)
-		.then((res) => {
-			success($q, "นำเข้าข้อมูลผู้สมัครสอบสำเร็จ");
-			modalCandidate.value = false;
-			selected_row_id.value = "";
-			fetchData();
-		})
-		.catch((e) => {
-			messageError($q, e);
-		})
-		.finally(() => {
-			loaderPage(false);
-		});
+  const fd = new FormData();
+  fd.append("attachment", files_candidate.value[0]);
+  showLoader();
+  await http
+    .post(config.API.uploadDisableCandidates(selected_row_id.value), fd)
+    .then((res) => {
+      success($q, "นำเข้าข้อมูลผู้สมัครสอบสำเร็จ");
+      modalCandidate.value = false;
+      selected_row_id.value = "";
+      fetchData();
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
 };
 
 const checkSaveScore = async () => {
-	const fd = new FormData();
-	fd.append("attachment", files_score.value[0]);
-	loaderPage(true);
-	await http
-		.post(config.API.saveDisableScores(selected_row_id.value), fd)
-		.then((res) => {
-			success($q, "นำเข้าข้อมูลผลคะแนนสอบสำเร็จ");
-			modalScore.value = false;
-			selected_row_id.value = "";
-			fetchData();
-		})
-		.catch((e) => {
-			messageError($q, e);
-		})
-		.finally(() => {
-			loaderPage(false);
-		});
+  const fd = new FormData();
+  fd.append("attachment", files_score.value[0]);
+  showLoader();
+  await http
+    .post(config.API.saveDisableScores(selected_row_id.value), fd)
+    .then((res) => {
+      success($q, "นำเข้าข้อมูลผลคะแนนสอบสำเร็จ");
+      modalScore.value = false;
+      selected_row_id.value = "";
+      fetchData();
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
 };
 
 const checkSave = async () => {
-	const fd = new FormData();
-	fd.append("attachment", files.value[0]);
-	fd.append("year", year.value.toString());
-	fd.append("round", round.value.toString());
-	fd.append("name", name.value);
-	loaderPage(true);
-	await http
-		.post(config.API.saveDisableCandidates, fd)
-		.then((res) => {
-			success($q, "นำเข้าข้อมูลผู้สมัครคัดเลือกคนพิการสำเร็จ");
-			modalAdd.value = false;
-			fetchData();
-		})
-		.catch((e) => {
-			messageError($q, e);
-		})
-		.finally(() => {
-			loaderPage(false);
-		});
+  const fd = new FormData();
+  fd.append("attachment", files.value[0]);
+  fd.append("year", year.value.toString());
+  fd.append("round", round.value.toString());
+  fd.append("name", name.value);
+  showLoader();
+  await http
+    .post(config.API.saveDisableCandidates, fd)
+    .then((res) => {
+      success($q, "นำเข้าข้อมูลผู้สมัครคัดเลือกคนพิการสำเร็จ");
+      modalAdd.value = false;
+      fetchData();
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
 };
 </script>
 
diff --git a/src/modules/03_recruiting/views/02_qualify/DisablePeriodAdd.vue b/src/modules/03_recruiting/views/02_qualify/DisablePeriodAdd.vue
index 8630c1005..1b1b106cc 100644
--- a/src/modules/03_recruiting/views/02_qualify/DisablePeriodAdd.vue
+++ b/src/modules/03_recruiting/views/02_qualify/DisablePeriodAdd.vue
@@ -669,15 +669,20 @@ import type {
 } from "@/modules/02_organizational/interface/index/Main";
 import http from "@/plugins/http";
 import config from "@/app.config";
-import { useDataStore } from "@/stores/data";
 
-const dataStore = useDataStore();
-const { loaderPage } = dataStore;
 const $q = useQuasar(); // show dialog
 const mixin = useCounterMixin();
 const router = useRouter();
 const route = useRoute();
-const { date2Thai, success, dateToISO, notifyError, messageError } = mixin;
+const {
+  date2Thai,
+  success,
+  dateToISO,
+  notifyError,
+  messageError,
+  showLoader,
+  hideLoader,
+} = mixin;
 const myForm = ref<QForm | null>(null); //form data input
 const name = ref<string>("");
 const note = ref<string>("");
@@ -725,7 +730,7 @@ onMounted(async () => {
   if (route.params.id != undefined) {
     edit.value = true;
     id.value = route.params.id.toString();
-    loaderPage(false);
+    hideLoader();
     await fetchData();
   } else {
     edit.value = false;
@@ -737,7 +742,7 @@ const clickBack = () => {
 };
 
 const fetchData = async () => {
-  loaderPage(true);
+  showLoader();
   await http
     .get(config.API.getDisablePeriodById(id.value))
     .then((res) => {
@@ -774,7 +779,7 @@ const fetchData = async () => {
       messageError($q, e);
     })
     .finally(() => {
-      loaderPage(false);
+      hideLoader();
     });
 };
 
@@ -829,7 +834,7 @@ const sendData = () => {
 };
 
 const addData = async () => {
-  loaderPage(true);
+  showLoader();
   await http
     .post(config.API.saveDisablePeriod, sendData())
     .then(async (res) => {
@@ -844,12 +849,12 @@ const addData = async () => {
       messageError($q, e);
     })
     .finally(async () => {
-      loaderPage(false);
+      hideLoader();
     });
 };
 
 const editData = async (id: string) => {
-  loaderPage(true);
+  showLoader();
   await http
     .put(config.API.editDisablePeriod(id), sendData())
     .then(async () => {
@@ -862,7 +867,7 @@ const editData = async (id: string) => {
       messageError($q, e);
     })
     .finally(async () => {
-      loaderPage(false);
+      hideLoader();
     });
 };
 
@@ -889,7 +894,7 @@ const uploadImgData = async () => {
     fileImgDataUpload.value.forEach((file: any) => {
       formData.append("", file);
     });
-    loaderPage(true);
+    showLoader();
     await http
       .put(config.API.periodExamImg(id.value), formData)
       .then((res) => {})
@@ -897,7 +902,7 @@ const uploadImgData = async () => {
         messageError($q, e);
       })
       .finally(async () => {
-        loaderPage(false);
+        hideLoader();
       });
   }
 };
@@ -906,7 +911,7 @@ const deleteDocData = async (docId: string) => {
   const params = {
     documentId: docId,
   };
-  loaderPage(true);
+  showLoader();
   await http
     .delete(config.API.periodExamDoc(id.value.toString()), {
       params,
@@ -919,7 +924,7 @@ const deleteDocData = async (docId: string) => {
     })
     .finally(async () => {
       await fetchData();
-      loaderPage(false);
+      hideLoader();
     });
 };
 
@@ -950,7 +955,7 @@ const uploadDocData = async () => {
     fileDocDataUpload.value.forEach((file: any) => {
       formData.append("", file);
     });
-    loaderPage(true);
+    showLoader();
     await http
       .put(config.API.periodExamDoc(id.value), formData)
       .then((res) => {})
@@ -958,7 +963,7 @@ const uploadDocData = async () => {
         messageError($q, e);
       })
       .finally(async () => {
-        loaderPage(false);
+        hideLoader();
       });
   } else {
     clickBack();
diff --git a/src/modules/03_recruiting/views/02_qualify/ExamForm.vue b/src/modules/03_recruiting/views/02_qualify/ExamForm.vue
index 1f8ee5efa..1ba95a2f0 100644
--- a/src/modules/03_recruiting/views/02_qualify/ExamForm.vue
+++ b/src/modules/03_recruiting/views/02_qualify/ExamForm.vue
@@ -138,14 +138,11 @@ import { useRoute, useRouter } from "vue-router";
 import { useQuasar } from "quasar";
 import http from "@/plugins/http";
 import config from "@/app.config";
-import { useDataStore } from "@/stores/data";
 
-const dataStore = useDataStore();
-const { loaderPage } = dataStore;
 const router = useRouter();
 const $q = useQuasar();
 const mixin = useCounterMixin(); //เรียกฟังก์ชันกลาง
-const { success, dateToISO, messageError } = mixin;
+const { success, dateToISO, messageError, showLoader, hideLoader } = mixin;
 const route = useRoute();
 const examId = ref<string>(route.params.examId.toString());
 const candidateId = ref<string>(route.params.candidateId.toString());
@@ -163,7 +160,7 @@ onMounted(async () => {
 });
 
 const fetchStatus = async () => {
-  loaderPage(true);
+  showLoader();
   await http
     .get(config.API.candidateId(candidateId.value))
     .then((res) => {
@@ -174,12 +171,12 @@ const fetchStatus = async () => {
       messageError($q, e);
     })
     .finally(async () => {
-      loaderPage(false);
+      hideLoader();
     });
 };
 
 const confirm = async (status: boolean, reason: string) => {
-  loaderPage(true);
+  showLoader();
   await http
     .put(config.API.candidateCheckRegister(candidateId.value), {
       status: status,
@@ -190,14 +187,14 @@ const confirm = async (status: boolean, reason: string) => {
       messageError($q, e);
     })
     .finally(async () => {
-      loaderPage(false);
+      hideLoader();
       success($q, "ตรวจสอบข้อมูลสำเร็จ");
       router.push(`/qualify/manage/${examId.value}`);
     });
 };
 
 const reject = async (reason: string) => {
-  loaderPage(true);
+  showLoader();
   await http
     .put(config.API.candidateRejectRegister(candidateId.value), {
       reason: reason,
@@ -207,7 +204,7 @@ const reject = async (reason: string) => {
       messageError($q, e);
     })
     .finally(async () => {
-      loaderPage(false);
+      hideLoader();
       success($q, "ตรวจสอบข้อมูลสำเร็จ");
       router.push(`/qualify/manage/${examId.value}`);
     });
@@ -253,7 +250,7 @@ const clickSave = async () => {
                       type.value = defaultOccupation.value.employee;
                     if (defaultOccupation.value.status == "other")
                       type.value = defaultOccupation.value.other;
-                    loaderPage(true);
+                    showLoader();
                     await http
                       .post(config.API.candidateId(candidateId.value), {
                         prefixId: defaultInformation.value.prefixId,
@@ -329,7 +326,7 @@ const clickSave = async () => {
                         messageError($q, e);
                       })
                       .finally(async () => {
-                        loaderPage(false);
+                        hideLoader();
                       });
                   }
                 });
diff --git a/src/modules/03_recruiting/views/02_qualify/Manage.vue b/src/modules/03_recruiting/views/02_qualify/Manage.vue
index 6702dd063..479849cb3 100644
--- a/src/modules/03_recruiting/views/02_qualify/Manage.vue
+++ b/src/modules/03_recruiting/views/02_qualify/Manage.vue
@@ -55,17 +55,16 @@ import { useCounterMixin } from "@/stores/mixin";
 import type { Pagination } from "@/modules/03_recruiting/interface/index/Main";
 import http from "@/plugins/http";
 import config from "@/app.config";
-import { useDataStore } from "@/stores/data";
+
 import type { RequestPeriodExam } from "@/modules/03_recruiting/interface/request/Period";
 import type { ResponsePeriodExam } from "@/modules/03_recruiting/interface/response/Period";
 import { useQuasar } from "quasar";
 
 const $q = useQuasar();
-const dataStore = useDataStore();
-const { loaderPage } = dataStore;
+
 const router = useRouter();
 const mixin = useCounterMixin();
-const { date2Thai, messageError } = mixin;
+const { date2Thai, messageError, showLoader, hideLoader } = mixin;
 const rows = ref<ResponsePeriodExam[]>([]);
 const initialPagination = ref<Pagination>({
   rowsPerPage: 0,
@@ -163,12 +162,12 @@ const columns = ref<QTableProps["columns"]>([
 ]);
 
 onMounted(async () => {
-  loaderPage(false);
+  hideLoader();
   await fetchData();
 });
 
 const fetchData = async () => {
-  loaderPage(true);
+  showLoader();
   await http
     .get(config.API.periodExamType("exam"))
     .then((res) => {
@@ -223,7 +222,7 @@ const fetchData = async () => {
       messageError($q, e);
     })
     .finally(() => {
-      loaderPage(false);
+      hideLoader();
     });
 };
 
diff --git a/src/modules/03_recruiting/views/02_qualify/Payment.vue b/src/modules/03_recruiting/views/02_qualify/Payment.vue
index 3891cea5f..6e276cc1f 100644
--- a/src/modules/03_recruiting/views/02_qualify/Payment.vue
+++ b/src/modules/03_recruiting/views/02_qualify/Payment.vue
@@ -278,17 +278,14 @@ import { useQuasar } from "quasar";
 import { useCounterMixin } from "@/stores/mixin";
 import http from "@/plugins/http";
 import config from "@/app.config";
-import { useDataStore } from "@/stores/data";
 
-const dataStore = useDataStore();
-const { loaderPage } = dataStore;
 const filePayment = ref<File[]>([]);
 const bank = ref<any>([]);
 const fee = ref<number>();
 const $q = useQuasar();
 const router = useRouter();
 const mixin = useCounterMixin(); //เรียกฟังก์ชันกลาง
-const { success, messageError } = mixin;
+const { success, messageError, showLoader, hideLoader } = mixin;
 const route = useRoute();
 const examId = ref<string>(route.params.examId.toString());
 const candidateId = ref<string>(route.params.candidateId.toString());
@@ -308,13 +305,13 @@ const props = defineProps({
 });
 
 onMounted(async () => {
-  loaderPage(false);
+  hideLoader();
   await fetchPaymentExam();
   await fetchData();
 });
 
 const fetchData = async () => {
-  loaderPage(true);
+  showLoader();
   await http
     .get(config.API.candidatePayment(candidateId.value))
     .then((res) => {
@@ -325,12 +322,12 @@ const fetchData = async () => {
       messageError($q, e);
     })
     .finally(() => {
-      loaderPage(false);
+      hideLoader();
     });
 };
 
 const fetchPaymentExam = async () => {
-  loaderPage(true);
+  showLoader();
   await http
     .get(config.API.periodExamPayment(examId.value))
     .then((res) => {
@@ -342,12 +339,12 @@ const fetchPaymentExam = async () => {
       messageError($q, e);
     })
     .finally(async () => {
-      loaderPage(false);
+      hideLoader();
     });
 };
 
 const confirm = async (status: boolean, reason: string) => {
-  loaderPage(true);
+  showLoader();
   await http
     .put(config.API.candidateCheckPayment(candidateId.value), {
       status: status,
@@ -358,7 +355,7 @@ const confirm = async (status: boolean, reason: string) => {
       messageError($q, e);
     })
     .finally(async () => {
-      loaderPage(false);
+      hideLoader();
       success($q, "ตรวจสอบข้อมูลชำระเงินสำเร็จ");
       router.push(`/qualify/manage/${examId.value}`);
     });
diff --git a/src/modules/03_recruiting/views/02_qualify/Period.vue b/src/modules/03_recruiting/views/02_qualify/Period.vue
index 724d935ef..5e860fef2 100644
--- a/src/modules/03_recruiting/views/02_qualify/Period.vue
+++ b/src/modules/03_recruiting/views/02_qualify/Period.vue
@@ -94,15 +94,20 @@ import type { Pagination } from "@/modules/03_recruiting/interface/index/Main";
 import Table from "@/modules/03_recruiting/components/Table.vue";
 import http from "@/plugins/http";
 import config from "@/app.config";
-import { useDataStore } from "@/stores/data";
+
 import { useRouter } from "vue-router";
 
-const dataStore = useDataStore();
-const { loaderPage } = dataStore;
 const $q = useQuasar(); // show dialog
 const mixin = useCounterMixin();
 const router = useRouter();
-const { date2Thai, success, typeCategoryExam, messageError } = mixin;
+const {
+  date2Thai,
+  success,
+  typeCategoryExam,
+  messageError,
+  showLoader,
+  hideLoader,
+} = mixin;
 const filter = ref<string>(""); //search data table
 const initialPagination = ref<Pagination>({
   rowsPerPage: 0,
@@ -205,12 +210,12 @@ const columns = ref<QTableProps["columns"]>([
 ]);
 
 onMounted(async () => {
-  loaderPage(false);
+  hideLoader();
   await fetchData();
 });
 
 const fetchData = async () => {
-  loaderPage(true);
+  showLoader();
   await http
     .get(config.API.periodExamType("all"))
     .then((res) => {
@@ -292,7 +297,7 @@ const fetchData = async () => {
       messageError($q, e);
     })
     .finally(() => {
-      loaderPage(false);
+      hideLoader();
     });
 };
 
@@ -322,7 +327,7 @@ const clickAdd = () => {
 };
 
 const deleteData = async (id: string) => {
-  loaderPage(true);
+  showLoader();
   await http
     .delete(config.API.periodExamId(id))
     .then((res) => {
@@ -332,7 +337,7 @@ const deleteData = async (id: string) => {
       messageError($q, e);
     })
     .finally(async () => {
-      loaderPage(false);
+      hideLoader();
       await fetchData();
     });
 };
diff --git a/src/modules/03_recruiting/views/02_qualify/PeriodAdd.vue b/src/modules/03_recruiting/views/02_qualify/PeriodAdd.vue
index 83381a653..90be47bd8 100644
--- a/src/modules/03_recruiting/views/02_qualify/PeriodAdd.vue
+++ b/src/modules/03_recruiting/views/02_qualify/PeriodAdd.vue
@@ -986,16 +986,15 @@ import type {
 } from "@/modules/02_organizational/interface/index/Main";
 import http from "@/plugins/http";
 import config from "@/app.config";
-import { useDataStore } from "@/stores/data";
+
 import ProfileTable from "@/modules/04_registry/components/Table.vue";
 
-const dataStore = useDataStore();
-const { loaderPage } = dataStore;
 const $q = useQuasar(); // show dialog
 const mixin = useCounterMixin();
 const router = useRouter();
 const route = useRoute();
-const { date2Thai, success, dateToISO, messageError } = mixin;
+const { date2Thai, success, dateToISO, messageError, showLoader, hideLoader } =
+  mixin;
 const myForm = ref<QForm | null>(null); //form data input
 const name = ref<string>("");
 const note = ref<string>("");
@@ -1137,7 +1136,7 @@ watch(organizationName, (count: DataOption, prevCount: DataOption) => {
 });
 
 onMounted(async () => {
-  loaderPage(false);
+  hideLoader();
   if (route.params.id != undefined) {
     edit.value = true;
     id.value = route.params.id.toString();
@@ -1160,7 +1159,7 @@ const clickBack = () => {
 };
 
 const fetchData = async () => {
-  loaderPage(true);
+  showLoader();
   await http
     .get(config.API.periodExamId(id.value))
     .then((res) => {
@@ -1239,7 +1238,7 @@ const fetchData = async () => {
       messageError($q, e);
     })
     .finally(() => {
-      loaderPage(false);
+      hideLoader();
     });
 };
 
@@ -1247,7 +1246,7 @@ const fetchData = async () => {
  * get รายการ รหัสหน่วยงาน
  */
 const fetchOrganizationShortName = async () => {
-  loaderPage(true);
+  showLoader();
   await http
     .get(config.API.organizationShortName)
     .then((res) => {
@@ -1265,7 +1264,7 @@ const fetchOrganizationShortName = async () => {
       messageError($q, e);
     })
     .finally(() => {
-      loaderPage(false);
+      hideLoader();
     });
 };
 
@@ -1273,7 +1272,7 @@ const fetchOrganizationShortName = async () => {
  * get รายการ หน่วยงาน
  */
 const fetchOrganizationOrganization = async (val: string) => {
-  loaderPage(true);
+  showLoader();
   await http
     .get(config.API.organization)
     .then((res) => {
@@ -1291,7 +1290,7 @@ const fetchOrganizationOrganization = async (val: string) => {
       messageError($q, e);
     })
     .finally(() => {
-      loaderPage(false);
+      hideLoader();
     });
 };
 
@@ -1299,7 +1298,7 @@ const fetchOrganizationOrganization = async (val: string) => {
  * get รายการ ตำแหน่งในสายงาน
  */
 const fetchPositionPath = async (val: string) => {
-  loaderPage(true);
+  showLoader();
   await http
     .get(config.API.positionPath)
     .then((res) => {
@@ -1317,7 +1316,7 @@ const fetchPositionPath = async (val: string) => {
       messageError($q, e);
     })
     .finally(() => {
-      loaderPage(false);
+      hideLoader();
     });
 };
 
@@ -1410,7 +1409,7 @@ const sendData = () => {
 };
 
 const addData = async () => {
-  loaderPage(true);
+  showLoader();
   await http
     .post(config.API.periodExam, sendData())
     .then(async (res) => {
@@ -1425,12 +1424,12 @@ const addData = async () => {
       messageError($q, e);
     })
     .finally(async () => {
-      loaderPage(false);
+      hideLoader();
     });
 };
 
 const editData = async (id: string) => {
-  loaderPage(true);
+  showLoader();
   await http
     .put(config.API.periodExamId(id), sendData())
     .then(async (res) => {
@@ -1443,7 +1442,7 @@ const editData = async (id: string) => {
       messageError($q, e);
     })
     .finally(async () => {
-      loaderPage(false);
+      hideLoader();
     });
 };
 
@@ -1470,13 +1469,13 @@ const uploadDocData = async () => {
     fileDocDataUpload.value.forEach((file: any) => {
       formData.append("", file);
     });
-    loaderPage(true);
+    showLoader();
     await http
       .put(config.API.periodExamDoc(id.value), formData)
       .then((res) => {})
       .catch((e) => {})
       .finally(async () => {
-        loaderPage(false);
+        hideLoader();
       });
   } else {
     clickBack();
@@ -1506,13 +1505,13 @@ const uploadImgData = async () => {
     fileImgDataUpload.value.forEach((file: any) => {
       formData.append("", file);
     });
-    loaderPage(true);
+    showLoader();
     await http
       .put(config.API.periodExamImg(id.value), formData)
       .then((res) => {})
       .catch((e) => {})
       .finally(async () => {
-        loaderPage(false);
+        hideLoader();
       });
   }
 };
@@ -1521,7 +1520,7 @@ const deleteDocData = async (docId: string) => {
   const params = {
     documentId: docId,
   };
-  loaderPage(true);
+  showLoader();
   await http
     .delete(config.API.periodExamDoc(id.value.toString()), {
       params,
diff --git a/src/modules/03_recruiting/views/02_qualify/manageDetail.vue b/src/modules/03_recruiting/views/02_qualify/manageDetail.vue
index 91a8195ee..f6c7b6e85 100644
--- a/src/modules/03_recruiting/views/02_qualify/manageDetail.vue
+++ b/src/modules/03_recruiting/views/02_qualify/manageDetail.vue
@@ -37,7 +37,9 @@
         <div class="q-pa-md row col-12 no-wrap">
           <!-- การ์ดแสดงจำนวนข้อมูล -->
           <div class="col-12 row">
-            <div class="text-grey-7 q-pb-sm row text-weight-medium col-12 items-center">
+            <div
+              class="text-grey-7 q-pb-sm row text-weight-medium col-12 items-center"
+            >
               <!-- สรุปจำนวนผู้สมัครคัดเลือก -->
               <datepicker
                 v-model="dateFilter"
@@ -120,7 +122,8 @@
                     <div class="col-12 row items-center q-pa-sm">
                       <div
                         :class="
-                          'col-12 text-h5 text-weight-bold text-' + `${num.color}`
+                          'col-12 text-h5 text-weight-bold text-' +
+                          `${num.color}`
                         "
                       >
                         {{
@@ -282,7 +285,7 @@ import { useCounterMixin } from "@/stores/mixin";
 import type { Pagination } from "@/modules/03_recruiting/interface/index/Main";
 import http from "@/plugins/http";
 import config from "@/app.config";
-import { useDataStore } from "@/stores/data";
+
 import TableCandidate from "@/modules/03_recruiting/components/TableCandidate.vue";
 import ExamFinished from "@/modules/03_recruiting/components/ExamFinished.vue";
 import type { DataNumObject } from "@/modules/01_metadata/interface/request/Calendar";
@@ -290,9 +293,15 @@ import { useQuasar } from "quasar";
 
 const $q = useQuasar();
 const mixin = useCounterMixin(); //เรียกฟังก์ชันกลาง
-const { genColor15, dateToISO, date2Thai, messageError } = mixin;
-const dataStore = useDataStore();
-const { loaderPage } = dataStore;
+const {
+  genColor15,
+  dateToISO,
+  date2Thai,
+  messageError,
+  showLoader,
+  hideLoader,
+} = mixin;
+
 const router = useRouter();
 const route = useRoute();
 const status = ref<string>("all");
@@ -483,7 +492,7 @@ watch(status, (count: String, prevCount: String) => {
 });
 
 onMounted(async () => {
-  loaderPage(false);
+  hideLoader();
   await fetchDataCom();
 });
 
@@ -502,7 +511,7 @@ const fetchDataCom = async () => {
 };
 
 const fetchData = async () => {
-  loaderPage(true);
+  showLoader();
   await http
     .get(config.API.candidateOfPeriodExam(status.value, examId.value))
     .then((res) => {
@@ -530,12 +539,12 @@ const fetchData = async () => {
       messageError($q, e);
     })
     .finally(() => {
-      loaderPage(false);
+      hideLoader();
     });
 };
 
 const fetchPeriodExam = async () => {
-  loaderPage(true);
+  showLoader();
   await http
     .get(config.API.periodExamStatus(examId.value))
     .then((res) => {
@@ -550,7 +559,7 @@ const fetchPeriodExam = async () => {
       messageError($q, e);
     })
     .finally(() => {
-      loaderPage(false);
+      hideLoader();
     });
 };
 
@@ -559,7 +568,7 @@ const fetchPeriodExam = async () => {
  */
 const fetchDataSummary = async () => {
   dataNum.value = [];
-  loaderPage(true);
+  showLoader();
   await http
     .get(config.API.countDashbordPeriodExam(examId.value))
     .then((res) => {
@@ -577,12 +586,12 @@ const fetchDataSummary = async () => {
       dataNum.value = [];
     })
     .finally(() => {
-      loaderPage(false);
+      hideLoader();
     });
 };
 
 const downloadFileDashboard = async () => {
-  loaderPage(true);
+  showLoader();
   await http
     .put(
       config.API.periodExamDownloadDashboard(examId.value),
@@ -606,7 +615,7 @@ const downloadFileDashboard = async () => {
       messageError($q, e);
     })
     .finally(() => {
-      loaderPage(false);
+      hideLoader();
     });
 };
 
diff --git a/src/modules/03_recruiting/views/03_editor/index.vue b/src/modules/03_recruiting/views/03_editor/index.vue
index 2e52b3840..167e0c0be 100644
--- a/src/modules/03_recruiting/views/03_editor/index.vue
+++ b/src/modules/03_recruiting/views/03_editor/index.vue
@@ -571,14 +571,13 @@ import http from "@/plugins/http";
 import config from "@/app.config";
 import HeaderTop from "@/modules/04_registry/components/Information/top.vue";
 import ProfileTable from "@/modules/04_registry/components/Table.vue";
-import { useDataStore } from "@/stores/data";
+
 import { useQuasar } from "quasar";
 
 const $q = useQuasar();
 const mixin = useCounterMixin(); //เรียกฟังก์ชันกลาง
-const store = useDataStore();
-const { loaderPage } = store;
-const { date2Thai, messageError } = mixin;
+
+const { date2Thai, messageError, showLoader, hideLoader } = mixin;
 const previous = ref<boolean>(false);
 const next = ref<boolean>(false);
 const addDialog = ref<boolean>(false);
@@ -870,7 +869,7 @@ const saveEdit = async () => {
 };
 
 const saveDataAgency = async (data: DataLink[]) => {
-  loaderPage(true);
+  showLoader();
   await http
     .post(config.API.cmsAgency, data)
     .then((res) => {})
@@ -883,7 +882,7 @@ const saveDataAgency = async (data: DataLink[]) => {
 };
 
 const saveDataGoverment = async (data: DataLink[]) => {
-  loaderPage(true);
+  showLoader();
 
   await http
     .post(config.API.cmsGoverment, data)
@@ -897,7 +896,7 @@ const saveDataGoverment = async (data: DataLink[]) => {
 };
 
 const fetchData = async () => {
-  loaderPage(true);
+  showLoader();
   await http
     .get(config.API.cms)
     .then((res) => {
@@ -952,12 +951,12 @@ const fetchData = async () => {
       messageError($q, e);
     })
     .finally(() => {
-      loaderPage(false);
+      hideLoader();
     });
 };
 
 const takeLogo = async () => {
-  loaderPage(true);
+  showLoader();
   const formData = new FormData();
   formData.append("FileData", imageFileLogo.value);
   await http
@@ -974,7 +973,7 @@ const takeLogo = async () => {
 };
 
 const takeBanner = async () => {
-  loaderPage(true);
+  showLoader();
   const formData = new FormData();
   formData.append("FileData", imageFile.value);
   await http
@@ -999,7 +998,7 @@ const sendDataDetail = async () => {
         description: web.value.descripstion,
         shortName: web.value.by,
       };
-      loaderPage(true);
+      showLoader();
       await http
         .post(config.API.cmsDeatail, data)
         .then((res) => {})
@@ -1026,7 +1025,7 @@ const sendDataAbout = async () => {
         zipCode: address.value.code,
         telephone: address.value.tel,
       };
-      loaderPage(true);
+      showLoader();
       await http
         .post(config.API.cmsAbout, data)
         .then((res) => {})
@@ -1042,7 +1041,7 @@ const sendDataAbout = async () => {
 };
 
 const fetchProvince = async () => {
-  loaderPage(true);
+  showLoader();
   await http
     .get(config.API.province)
     .then((res) => {
@@ -1057,13 +1056,13 @@ const fetchProvince = async () => {
       messageError($q, e);
     })
     .finally(() => {
-      loaderPage(false);
+      hideLoader();
     });
 };
 
 const fetchDistrict = async (id: string | null) => {
   if (id !== null && id != "") {
-    loaderPage(true);
+    showLoader();
     await http
       .get(config.API.listDistrict(id))
       .then((res) => {
@@ -1078,14 +1077,14 @@ const fetchDistrict = async (id: string | null) => {
         messageError($q, e);
       })
       .finally(() => {
-        loaderPage(false);
+        hideLoader();
       });
   }
 };
 
 const fetchSubDistrict = async (id: string | null) => {
   if (id !== null && id != "") {
-    loaderPage(true);
+    showLoader();
     await http
       .get(config.API.listSubDistrict(id))
       .then((res) => {
@@ -1104,7 +1103,7 @@ const fetchSubDistrict = async (id: string | null) => {
         messageError($q, e);
       })
       .finally(() => {
-        loaderPage(false);
+        hideLoader();
       });
   }
 };
diff --git a/src/modules/04_registry/components/Assessment.vue b/src/modules/04_registry/components/Assessment.vue
index 5d42ad985..981e8cc44 100644
--- a/src/modules/04_registry/components/Assessment.vue
+++ b/src/modules/04_registry/components/Assessment.vue
@@ -308,7 +308,7 @@ import { onMounted, ref, watch } from "vue";
 import { useRoute } from "vue-router";
 import { useCounterMixin } from "@/stores/mixin";
 import { useProfileDataStore } from "@/modules/04_registry/store";
-import { useDataStore } from "@/stores/data";
+
 import ProfileTable from "@/modules/04_registry/components/Table.vue";
 import DialogHeader from "@/modules/04_registry/components/DialogHeader.vue";
 import DialogFooter from "@/modules/04_registry/components/DialogFooter.vue";
@@ -338,10 +338,10 @@ const props = defineProps({
 const $q = useQuasar();
 const store = useProfileDataStore();
 const { profileData, changeProfileColumns } = store;
-const dataStore = useDataStore();
-const { loaderPage } = dataStore;
+
 const mixin = useCounterMixin();
-const { date2Thai, success, dateToISO, messageError } = mixin;
+const { date2Thai, success, dateToISO, messageError, showLoader, hideLoader } =
+  mixin;
 const route = useRoute();
 const id = ref<string>("");
 const name = ref<string>();
@@ -598,7 +598,7 @@ onMounted(async () => {
 
 const fetchData = async () => {
   if (profileId.value) {
-    loaderPage(true);
+    showLoader();
     await http
       .get(config.API.profileAssessmentId(profileId.value))
       .then((res) => {
@@ -624,7 +624,7 @@ const fetchData = async () => {
         messageError($q, e);
       })
       .finally(() => {
-        loaderPage(false);
+        hideLoader();
       });
   }
 };
@@ -717,7 +717,7 @@ const clickSave = async () => {
  */
 const saveData = async () => {
   if (profileId.value) {
-    loaderPage(true);
+    showLoader();
     await http
       .post(config.API.profileAssessmentId(profileId.value), {
         id: id.value,
@@ -747,7 +747,7 @@ const saveData = async () => {
  * บันทึกแก้ไขข้อมูล
  */
 const editData = async () => {
-  loaderPage(true);
+  showLoader();
   await http
     .put(config.API.profileAssessmentId(id.value), {
       id: id.value,
@@ -784,7 +784,7 @@ const clickDelete = async () => {
     persistent: true,
   })
     .onOk(async () => {
-      loaderPage(true);
+      showLoader();
       await http
         .delete(config.API.profileAssessmentId(id.value))
         .then((res) => {
@@ -901,7 +901,7 @@ const clickEditRow = () => {
 const clickHistory = async (row: RequestItemsObject) => {
   tittleHistory.value = "ประวัติแก้ไขผลการประเมินการปฏิบัติราชการ";
   modalHistory.value = true;
-  loaderPage(true);
+  showLoader();
   await http
     .get(config.API.profileAssessmentHisId(row.id))
     .then((res) => {
@@ -927,7 +927,7 @@ const clickHistory = async (row: RequestItemsObject) => {
       messageError($q, e);
     })
     .finally(() => {
-      loaderPage(false);
+      hideLoader();
     });
 };
 
diff --git a/src/modules/04_registry/components/Coin.vue b/src/modules/04_registry/components/Coin.vue
index a478b85b7..f189eff8b 100644
--- a/src/modules/04_registry/components/Coin.vue
+++ b/src/modules/04_registry/components/Coin.vue
@@ -264,7 +264,7 @@ import { onMounted, ref, watch } from "vue";
 import { useRoute } from "vue-router";
 import { useCounterMixin } from "@/stores/mixin";
 import { useProfileDataStore } from "@/modules/04_registry/store";
-import { useDataStore } from "@/stores/data";
+
 import ProfileTable from "@/modules/04_registry/components/Table.vue";
 import DialogHeader from "@/modules/04_registry/components/DialogHeader.vue";
 import DialogFooter from "@/modules/04_registry/components/DialogFooter.vue";
@@ -294,10 +294,10 @@ const props = defineProps({
 const $q = useQuasar();
 const store = useProfileDataStore();
 const { profileData, changeProfileColumns } = store;
-const dataStore = useDataStore();
-const { loaderPage } = dataStore;
+
 const mixin = useCounterMixin();
-const { date2Thai, success, dateToISO, messageError } = mixin;
+const { date2Thai, success, dateToISO, messageError, showLoader, hideLoader } =
+  mixin;
 const route = useRoute();
 const id = ref<string>("");
 const issuer = ref<string>();
@@ -490,7 +490,7 @@ onMounted(async () => {
 
 const fetchData = async () => {
   if (profileId.value) {
-    loaderPage(true);
+    showLoader();
     await http
       .get(config.API.profileHonorId(profileId.value))
       .then((res) => {
@@ -514,7 +514,7 @@ const fetchData = async () => {
         messageError($q, e);
       })
       .finally(() => {
-        loaderPage(false);
+        hideLoader();
       });
   }
 };
@@ -604,7 +604,7 @@ const clickSave = async () => {
  */
 const saveData = async () => {
   if (profileId.value) {
-    loaderPage(true);
+    showLoader();
     await http
       .post(config.API.profileHonorId(profileId.value), {
         id: id.value,
@@ -632,7 +632,7 @@ const saveData = async () => {
  * บันทึกแก้ไขข้อมูล
  */
 const editData = async () => {
-  loaderPage(true);
+  showLoader();
   await http
     .put(config.API.profileHonorId(id.value), {
       id: id.value,
@@ -667,7 +667,7 @@ const clickDelete = async () => {
     persistent: true,
   })
     .onOk(async () => {
-      loaderPage(true);
+      showLoader();
       await http
         .delete(config.API.profileHonorId(id.value))
         .then((res) => {
@@ -781,7 +781,7 @@ const clickHistory = async (row: RequestItemsObject) => {
       ? "ประวัติแก้ไขประกาศลูกจ้างดีเด่น"
       : "ประวัติแก้ไขประกาศเกียรติคุณ";
   modalHistory.value = true;
-  loaderPage(true);
+  showLoader();
   await http
     .get(config.API.profileHonorHisId(row.id))
     .then((res) => {
@@ -805,7 +805,7 @@ const clickHistory = async (row: RequestItemsObject) => {
       messageError($q, e);
     })
     .finally(() => {
-      loaderPage(false);
+      hideLoader();
     });
 };
 
diff --git a/src/modules/04_registry/components/Discipline.vue b/src/modules/04_registry/components/Discipline.vue
index ae43a8383..b2c4f2bc0 100644
--- a/src/modules/04_registry/components/Discipline.vue
+++ b/src/modules/04_registry/components/Discipline.vue
@@ -278,7 +278,7 @@ import { onMounted, ref, watch } from "vue";
 import { useRoute } from "vue-router";
 import { useCounterMixin } from "@/stores/mixin";
 import { useProfileDataStore } from "@/modules/04_registry/store";
-import { useDataStore } from "@/stores/data";
+
 import ProfileTable from "@/modules/04_registry/components/Table.vue";
 import DialogHeader from "@/modules/04_registry/components/DialogHeader.vue";
 import DialogFooter from "@/modules/04_registry/components/DialogFooter.vue";
@@ -307,10 +307,10 @@ const props = defineProps({
 const $q = useQuasar();
 const store = useProfileDataStore();
 const { profileData, changeProfileColumns } = store;
-const dataStore = useDataStore();
-const { loaderPage } = dataStore;
+
 const mixin = useCounterMixin();
-const { date2Thai, success, dateToISO, messageError } = mixin;
+const { date2Thai, success, dateToISO, messageError, showLoader, hideLoader } =
+  mixin;
 const route = useRoute();
 const id = ref<string>("");
 const level = ref<string>();
@@ -590,7 +590,7 @@ const filterSelector = (val: string, update: Function, refData: string) => {
 
 const fetchData = async () => {
   if (profileId.value) {
-    loaderPage(true);
+    showLoader();
     await http
       .get(config.API.profileDisId(profileId.value))
       .then((res) => {
@@ -615,7 +615,7 @@ const fetchData = async () => {
         messageError($q, e);
       })
       .finally(() => {
-        loaderPage(false);
+        hideLoader();
       });
   }
 };
@@ -706,7 +706,7 @@ const clickSave = async () => {
  */
 const saveData = async () => {
   if (profileId.value) {
-    loaderPage(true);
+    showLoader();
     await http
       .post(config.API.profileDisId(profileId.value), {
         id: id.value,
@@ -735,7 +735,7 @@ const saveData = async () => {
  * บันทึกแก้ไขข้อมูล
  */
 const editData = async () => {
-  loaderPage(true);
+  showLoader();
   await http
     .put(config.API.profileDisId(id.value), {
       id: id.value,
@@ -771,7 +771,7 @@ const clickDelete = async () => {
     persistent: true,
   })
     .onOk(async () => {
-      loaderPage(true);
+      showLoader();
       await http
         .delete(config.API.profileDisId(id.value))
         .then((res) => {
@@ -883,7 +883,7 @@ const clickEditRow = () => {
  */
 const clickHistory = async (row: RequestItemsObject) => {
   modalHistory.value = true;
-  loaderPage(true);
+  showLoader();
   await http
     .get(config.API.profileDisHisId(row.id))
     .then((res) => {
@@ -908,7 +908,7 @@ const clickHistory = async (row: RequestItemsObject) => {
       messageError($q, e);
     })
     .finally(() => {
-      loaderPage(false);
+      hideLoader();
     });
 };
 
diff --git a/src/modules/04_registry/components/Document.vue b/src/modules/04_registry/components/Document.vue
index 4b6bfe21b..f9f5f32fb 100644
--- a/src/modules/04_registry/components/Document.vue
+++ b/src/modules/04_registry/components/Document.vue
@@ -138,7 +138,7 @@ import { onMounted, computed, ref, watch } from "vue";
 import { useQuasar, QForm } from "quasar";
 import { useCounterMixin } from "@/stores/mixin";
 import { useRoute } from "vue-router";
-import { useDataStore } from "@/stores/data";
+
 import HeaderTop from "@/modules/04_registry/components/Information/top.vue";
 import http from "@/plugins/http";
 import config from "@/app.config";
@@ -156,12 +156,10 @@ const props = defineProps({
 });
 const emit = defineEmits(["update:statusEdit"]);
 
-const dataStore = useDataStore();
-const { loaderPage } = dataStore;
 const $q = useQuasar(); // show dialog
 const mixin = useCounterMixin();
 const route = useRoute();
-const { success, messageError } = mixin;
+const { success, messageError, showLoader, hideLoader } = mixin;
 const profileId = ref<string>(
   route.params.id ? route.params.id.toString() : ""
 );
@@ -177,7 +175,7 @@ onMounted(async () => {
 
 const getData = async () => {
   if (profileId.value) {
-    loaderPage(true);
+    showLoader();
     await http
       .get(config.API.profilePaperId(profileId.value))
       .then((res) => {
@@ -188,13 +186,13 @@ const getData = async () => {
         messageError($q, e);
       })
       .finally(() => {
-        loaderPage(false);
+        hideLoader();
       });
   }
 };
 
 const deleteData = async (id: string) => {
-  loaderPage(true);
+  showLoader();
   await http
     .delete(config.API.profilePaperId(id))
     .then((res) => {
@@ -219,7 +217,7 @@ const uploadData = async () => {
       formData.append("avatar", newFile);
       formData.append("moss", "newFile");
       console.log(formData);
-      loaderPage(true);
+      showLoader();
       await http
         .post(config.API.profilePaperId(profileId.value), formData)
         .then((res) => {
diff --git a/src/modules/04_registry/components/Education.vue b/src/modules/04_registry/components/Education.vue
index e3c38afce..75756891b 100644
--- a/src/modules/04_registry/components/Education.vue
+++ b/src/modules/04_registry/components/Education.vue
@@ -582,7 +582,7 @@ import { onMounted, ref, watch } from "vue";
 import { useRoute } from "vue-router";
 import { useProfileDataStore } from "@/modules/04_registry/store";
 import { useCounterMixin } from "@/stores/mixin";
-import { useDataStore } from "@/stores/data";
+
 import ProfileTable from "@/modules/04_registry/components/Table.vue";
 import DialogHeader from "@/modules/04_registry/components/DialogHeader.vue";
 import DialogFooter from "@/modules/04_registry/components/DialogFooter.vue";
@@ -609,10 +609,10 @@ const props = defineProps({
 const $q = useQuasar();
 const store = useProfileDataStore();
 const { profileData, changeProfileColumns } = store;
-const dataStore = useDataStore();
-const { loaderPage } = dataStore;
+
 const mixin = useCounterMixin();
-const { success, dateToISO, date2Thai, messageError } = mixin;
+const { success, dateToISO, date2Thai, messageError, showLoader, hideLoader } =
+  mixin;
 const route = useRoute();
 const id = ref<string>("");
 const levelId = ref<string>();
@@ -1047,7 +1047,7 @@ onMounted(async () => {
 });
 
 const fetchLevel = async () => {
-  loaderPage(true);
+  showLoader();
   await http
     .get(config.API.educationLevel)
     .then((res) => {
@@ -1063,12 +1063,12 @@ const fetchLevel = async () => {
       messageError($q, e);
     })
     .finally(() => {
-      loaderPage(false);
+      hideLoader();
     });
 };
 
 const fetchPositionPath = async () => {
-  loaderPage(true);
+  showLoader();
   await http
     .get(config.API.positionPath)
     .then((res) => {
@@ -1085,7 +1085,7 @@ const fetchPositionPath = async () => {
       messageError($q, e);
     })
     .finally(() => {
-      loaderPage(false);
+      hideLoader();
     });
 };
 
@@ -1113,7 +1113,7 @@ const filterSelector = (val: any, update: Function, refData: string) => {
 
 const fetchData = async () => {
   if (profileId.value) {
-    loaderPage(true);
+    showLoader();
     await http
       .get(config.API.profileEduId(profileId.value))
       .then((res) => {
@@ -1150,7 +1150,7 @@ const fetchData = async () => {
         messageError($q, e);
       })
       .finally(() => {
-        loaderPage(false);
+        hideLoader();
       });
   }
 };
@@ -1258,7 +1258,7 @@ const saveData = async () => {
   //     (r: any) => r.id == isEducation.value
   //   );
   if (profileId.value) {
-    loaderPage(true);
+    showLoader();
     await http
       .post(config.API.profileEduId(profileId.value), {
         id: id.value,
@@ -1308,7 +1308,7 @@ const editData = async () => {
   //   const filterPositionPath = OpsFilter.value.positionPathOptions.filter(
   //     (r: any) => r.id == isEducation.value
   //   );
-  loaderPage(true);
+  showLoader();
   await http
     .put(config.API.profileEduId(id.value), {
       id: id.value,
@@ -1359,7 +1359,7 @@ const clickDelete = async () => {
     persistent: true,
   })
     .onOk(async () => {
-      loaderPage(true);
+      showLoader();
       await http
         .delete(config.API.profileEduId(id.value))
         .then((res) => {
@@ -1493,7 +1493,7 @@ const clickEditRow = () => {
  */
 const clickHistory = async (row: RequestItemsObject) => {
   modalHistory.value = true;
-  loaderPage(true);
+  showLoader();
   await http
     .get(config.API.profileEduHisId(row.id))
     .then((res) => {
@@ -1530,7 +1530,7 @@ const clickHistory = async (row: RequestItemsObject) => {
       messageError($q, e);
     })
     .finally(() => {
-      loaderPage(false);
+      hideLoader();
     });
 };
 
diff --git a/src/modules/04_registry/components/Information/Address.vue b/src/modules/04_registry/components/Information/Address.vue
index 8881a3505..95c6d657e 100644
--- a/src/modules/04_registry/components/Information/Address.vue
+++ b/src/modules/04_registry/components/Information/Address.vue
@@ -289,7 +289,7 @@
 <script setup lang="ts">
 import { ref, onMounted } from "vue";
 import { useCounterMixin } from "@/stores/mixin";
-import { useDataStore } from "@/stores/data";
+
 import { useQuasar } from "quasar";
 import http from "@/plugins/http";
 import config from "@/app.config";
@@ -321,10 +321,9 @@ const emit = defineEmits(["update:statusEdit"]);
 
 const route = useRoute();
 const $q = useQuasar();
-const dataStore = useDataStore();
-const { loaderPage } = dataStore;
+
 const mixin = useCounterMixin();
-const { date2Thai, success, messageError } = mixin;
+const { date2Thai, success, messageError, showLoader, hideLoader } = mixin;
 const edit = ref<boolean>(false);
 const addressData = ref<Address>(defaultAddress);
 const myform = ref<any>();
@@ -582,7 +581,7 @@ const filterSelector = (val: any, update: Function, refData: string) => {
  */
 const clickHistory = async () => {
   modalHistory.value = true;
-  loaderPage(true);
+  showLoader();
   await http
     .get(config.API.profileAdrsHisId(route.params.id.toString()))
     .then((res) => {
@@ -610,7 +609,7 @@ const clickHistory = async () => {
       messageError($q, e);
     })
     .finally(() => {
-      loaderPage(false);
+      hideLoader();
     });
 };
 
@@ -630,7 +629,7 @@ const getNewData = async () => {
 
 const fetchData = async () => {
   if (route.params.id) {
-    loaderPage(true);
+    showLoader();
     await http
       .get(config.API.profileAdrsId(route.params.id.toString()))
       .then((res) => {
@@ -649,7 +648,7 @@ const fetchData = async () => {
         messageError($q, e);
       })
       .finally(() => {
-        loaderPage(false);
+        hideLoader();
       });
   }
 };
@@ -682,7 +681,7 @@ const editData = async () => {
     createdAt: new Date(),
     createdFullName: "-",
   };
-  loaderPage(true);
+  showLoader();
   await http
     .put(config.API.profileAdrsId(route.params.id.toString()), body)
     .then((res) => {
@@ -699,7 +698,7 @@ const editData = async () => {
 };
 
 const addData = async () => {
-  //     loaderPage(true);
+  //     showLoader();
   //   await http
   //     .put(config.API.profileInforId(route.params.id.toString()), body)
   //     .then((res) => {
@@ -774,7 +773,7 @@ const selectSubDistrict = (e: string | null, name: string) => {
 };
 
 const fetchProvince = async () => {
-  loaderPage(true);
+  showLoader();
   await http
     .get(config.API.province)
     .then((res) => {
@@ -790,13 +789,13 @@ const fetchProvince = async () => {
       messageError($q, e);
     })
     .finally(() => {
-      loaderPage(false);
+      hideLoader();
     });
 };
 
 const fetchDistrict = async (id: string | null, position: string) => {
   if (id != null && id != "") {
-    loaderPage(true);
+    showLoader();
     await http
       .get(config.API.listDistrict(id))
       .then((res) => {
@@ -817,14 +816,14 @@ const fetchDistrict = async (id: string | null, position: string) => {
         messageError($q, e);
       })
       .finally(() => {
-        loaderPage(false);
+        hideLoader();
       });
   }
 };
 
 const fetchSubDistrict = async (id: string | null, position: string) => {
   if (id != null && id != "") {
-    loaderPage(true);
+    showLoader();
     await http
       .get(config.API.listSubDistrict(id))
       .then((res) => {
@@ -849,7 +848,7 @@ const fetchSubDistrict = async (id: string | null, position: string) => {
         messageError($q, e);
       })
       .finally(() => {
-        loaderPage(false);
+        hideLoader();
       });
   }
 };
diff --git a/src/modules/04_registry/components/Information/Certicate.vue b/src/modules/04_registry/components/Information/Certicate.vue
index d08e8c3b2..009b7a290 100644
--- a/src/modules/04_registry/components/Information/Certicate.vue
+++ b/src/modules/04_registry/components/Information/Certicate.vue
@@ -261,7 +261,7 @@ import { onMounted, ref, watch } from "vue";
 import { useRoute } from "vue-router";
 import { useProfileDataStore } from "@/modules/04_registry/store";
 import { useCounterMixin } from "@/stores/mixin";
-import { useDataStore } from "@/stores/data";
+
 import ProfileTable from "@/modules/04_registry/components/Table.vue";
 import DialogHeader from "@/modules/04_registry/components/DialogHeader.vue";
 import DialogFooter from "@/modules/04_registry/components/DialogFooter.vue";
@@ -290,8 +290,7 @@ const props = defineProps({
 const $q = useQuasar();
 const store = useProfileDataStore();
 const { profileData, changeProfileColumns } = store;
-const dataStore = useDataStore();
-const { loaderPage } = dataStore;
+
 const mixin = useCounterMixin();
 const { date2Thai, success, dateToISO, messageError } = mixin;
 const route = useRoute();
@@ -487,7 +486,7 @@ onMounted(async () => {
 
 const fetchData = async () => {
   if (profileId.value) {
-    loaderPage(true);
+    showLoader();
     await http
       .get(config.API.profileCertId(profileId.value))
       .then((res) => {
@@ -510,7 +509,7 @@ const fetchData = async () => {
         messageError($q, e);
       })
       .finally(() => {
-        loaderPage(false);
+        hideLoader();
       });
   }
 };
@@ -599,7 +598,7 @@ const clickSave = async () => {
  * บันทึกเพิ่มข้อมูล
  */
 const saveData = async () => {
-  loaderPage(true);
+  showLoader();
   await http
     .post(config.API.profileCertId(profileId.value), {
       id: id.value,
@@ -625,7 +624,7 @@ const saveData = async () => {
  * บันทึกแก้ไขข้อมูล
  */
 const editData = async () => {
-  loaderPage(true);
+  showLoader();
   await http
     .put(config.API.profileCertId(id.value), {
       id: id.value,
@@ -659,7 +658,7 @@ const clickDelete = async () => {
     persistent: true,
   })
     .onOk(async () => {
-      loaderPage(true);
+      showLoader();
       await http
         .delete(config.API.profileCertId(id.value))
         .then((res) => {
@@ -773,7 +772,7 @@ const clickHistory = async (row: RequestItemsObject) => {
       ? "ประวัติแก้ไขใบอนุญาตของลูกจ้าง"
       : "ประวัติแก้ไขใบอนุญาตประกอบอาชีพ";
   modalHistory.value = true;
-  loaderPage(true);
+  showLoader();
   await http
     .get(config.API.profileCertHisId(row.id))
     .then((res) => {
@@ -796,7 +795,7 @@ const clickHistory = async (row: RequestItemsObject) => {
       messageError($q, e);
     })
     .finally(() => {
-      loaderPage(false);
+      hideLoader();
     });
 };
 
diff --git a/src/modules/04_registry/components/Information/Family.vue b/src/modules/04_registry/components/Information/Family.vue
index 8b9eaf90c..346a2ad9e 100644
--- a/src/modules/04_registry/components/Information/Family.vue
+++ b/src/modules/04_registry/components/Information/Family.vue
@@ -1089,7 +1089,7 @@
 import { ref, onMounted } from "vue";
 import type { QForm } from "quasar";
 import { useCounterMixin } from "@/stores/mixin";
-import { useDataStore } from "@/stores/data";
+
 import { useQuasar } from "quasar";
 import type {
   Family,
@@ -1124,10 +1124,9 @@ const emit = defineEmits(["update:statusEdit"]);
 
 const route = useRoute();
 const $q = useQuasar();
-const dataStore = useDataStore();
-const { loaderPage } = dataStore;
+
 const mixin = useCounterMixin();
-const { date2Thai, success, messageError } = mixin;
+const { date2Thai, success, messageError, showLoader, hideLoader } = mixin;
 const edit = ref<boolean>(false);
 const fix = ref<boolean>(true);
 const myform = ref<QForm | null>(null);
@@ -1233,7 +1232,7 @@ const refreshData = async () => {
 };
 
 const fetchPrefix = async () => {
-  loaderPage(true);
+  showLoader();
   await http
     .get(config.API.prefix)
     .then((res) => {
@@ -1249,7 +1248,7 @@ const fetchPrefix = async () => {
       messageError($q, e);
     })
     .finally(() => {
-      loaderPage(false);
+      hideLoader();
     });
 };
 
@@ -1279,7 +1278,7 @@ const deleteChildren = (items: childrenFamily) => {
 
 const fetchHistory = async () => {
   familyDataHistory.value = [];
-  loaderPage(true);
+  showLoader();
   await http
     .get(config.API.profileFamiHisId(route.params.id.toString()))
     .then((res) => {
@@ -1317,7 +1316,7 @@ const fetchHistory = async () => {
       messageError($q, e);
     })
     .finally(async () => {
-      loaderPage(false);
+      hideLoader();
       if (familyDataHistory.value.length == 0) {
         // modalError(
         //   $q,
@@ -1340,7 +1339,7 @@ const fetchHistory = async () => {
 
 const fetchData = async () => {
   if (route.params.id) {
-    loaderPage(true);
+    showLoader();
     await http
       .get(config.API.profileFamiId(route.params.id.toString()))
       .then((res) => {
@@ -1393,13 +1392,13 @@ const fetchData = async () => {
         messageError($q, e);
       })
       .finally(async () => {
-        loaderPage(false);
+        hideLoader();
       });
   }
 };
 
 const editData = async () => {
-  loaderPage(true);
+  showLoader();
   const body: ResponseObject = {
     couple: familyData.value.same == "1",
     couplePrefixId: familyData.value.prefixIdC,
@@ -1441,7 +1440,7 @@ const editData = async () => {
 };
 
 const addData = async () => {
-  //     loaderPage(true);
+  //     showLoader();
   //   await http
   //     .put(config.API.profileInforId(route.params.id.toString()), body)
   //     .then((res) => {
diff --git a/src/modules/04_registry/components/Information/Government.vue b/src/modules/04_registry/components/Information/Government.vue
index 35d6fca2a..3ae4aa7af 100644
--- a/src/modules/04_registry/components/Information/Government.vue
+++ b/src/modules/04_registry/components/Information/Government.vue
@@ -330,7 +330,7 @@
 <script setup lang="ts">
 import { onMounted, ref, watch } from "vue";
 import { useCounterMixin } from "@/stores/mixin";
-import { useDataStore } from "@/stores/data";
+
 import { useQuasar } from "quasar";
 import type { Goverment } from "@/modules/04_registry/components/profileType";
 import { defaultGoverment } from "@/modules/04_registry/components/profileType";
@@ -363,10 +363,10 @@ const emit = defineEmits(["update:statusEdit"]);
 
 const route = useRoute();
 const $q = useQuasar();
-const dataStore = useDataStore();
-const { loaderPage } = dataStore;
+
 const mixin = useCounterMixin();
-const { date2Thai, success, dateToISO, messageError } = mixin;
+const { date2Thai, success, dateToISO, messageError, showLoader, hideLoader } =
+  mixin;
 const profileStore = useProfileDataStore();
 const { birthDate, retireText } = storeToRefs(profileStore);
 const edit = ref<boolean>(false);
@@ -611,7 +611,7 @@ watch(retireText, async () => {
 });
 
 const fetchData = async () => {
-  loaderPage(true);
+  showLoader();
   await http
     .get(config.API.profileGovId(route.params.id.toString()))
     .then((res) => {
@@ -637,7 +637,7 @@ const fetchData = async () => {
       messageError($q, e);
     })
     .finally(async () => {
-      loaderPage(false);
+      hideLoader();
     });
 };
 
@@ -647,7 +647,7 @@ const refreshData = async () => {
 };
 
 const editData = async () => {
-  loaderPage(true);
+  showLoader();
   await http
     .put(config.API.profileGovId(route.params.id.toString()), {
       dateAppoint: dateToISO(govermentData.value.containDate),
@@ -682,7 +682,7 @@ const handleDate = async (modelData: Date) => {
 };
 
 const fetchCalAgeGov = async (date: Date) => {
-  loaderPage(true);
+  showLoader();
   const body = {
     dateAppoint: date,
   };
@@ -696,7 +696,7 @@ const fetchCalAgeGov = async (date: Date) => {
       messageError($q, e);
     })
     .finally(async () => {
-      loaderPage(false);
+      hideLoader();
     });
 };
 
@@ -705,7 +705,7 @@ const fetchCalAgeGov = async (date: Date) => {
  */
 const clickHistory = async () => {
   modalHistory.value = true;
-  loaderPage(true);
+  showLoader();
   await http
     .get(config.API.profileGovHisId(route.params.id.toString()))
     .then((res) => {
@@ -738,7 +738,7 @@ const clickHistory = async () => {
       messageError($q, e);
     })
     .finally(() => {
-      loaderPage(false);
+      hideLoader();
     });
 };
 
diff --git a/src/modules/04_registry/components/Information/Information.vue b/src/modules/04_registry/components/Information/Information.vue
index ec7a1440b..2937e53cb 100644
--- a/src/modules/04_registry/components/Information/Information.vue
+++ b/src/modules/04_registry/components/Information/Information.vue
@@ -409,7 +409,7 @@
 <script setup lang="ts">
 import { ref, onMounted } from "vue";
 import { useCounterMixin } from "@/stores/mixin";
-import { useDataStore } from "@/stores/data";
+
 import { useQuasar } from "quasar";
 import type {
   Information,
@@ -450,9 +450,16 @@ const emit = defineEmits(["update:statusEdit"]);
 const route = useRoute();
 const $q = useQuasar();
 const mixin = useCounterMixin();
-const { date2Thai, success, dateToISO, messageError, dialogMessage } = mixin;
-const dataStore = useDataStore();
-const { loaderPage } = dataStore;
+const {
+  date2Thai,
+  success,
+  dateToISO,
+  messageError,
+  dialogMessage,
+  showLoader,
+  hideLoader,
+} = mixin;
+
 const profileStore = useProfileDataStore();
 const { changeRetireText, changeBirth } = profileStore;
 const edit = ref<boolean>(false);
@@ -739,7 +746,7 @@ const onCancel = async () => {
  * get รายการ ข้อมูลเกี่ยวกับบุคคล
  */
 const fetchPerson = async () => {
-  loaderPage(true);
+  showLoader();
   await http
     .get(config.API.person)
     .then((res) => {
@@ -796,7 +803,7 @@ const fetchPerson = async () => {
     })
     .catch((e: any) => {})
     .finally(() => {
-      loaderPage(false);
+      hideLoader();
     });
 };
 
@@ -822,7 +829,7 @@ const changeCardID = (value: string | number | null) => {
 };
 
 const checkCitizen = async (id: string) => {
-  loaderPage(true);
+  showLoader();
   await http
     .get(config.API.profileCitizenId(id))
     .then((res) => {
@@ -847,7 +854,7 @@ const checkCitizen = async (id: string) => {
       messageError($q, e);
     })
     .finally(() => {
-      loaderPage(false);
+      hideLoader();
     });
 };
 
@@ -856,7 +863,7 @@ const checkCitizen = async (id: string) => {
  */
 const clickHistory = async () => {
   modalHistory.value = true;
-  loaderPage(true);
+  showLoader();
   await http
     .get(config.API.profileInforHisId(route.params.id.toString()))
     .then((res) => {
@@ -897,7 +904,7 @@ const clickHistory = async () => {
       messageError($q, e);
     })
     .finally(() => {
-      loaderPage(false);
+      hideLoader();
     });
 };
 
@@ -973,7 +980,7 @@ const calRetire = async (birth: Date) => {
     birthDate: dateToISO(birth),
   };
   if (dateToISO(dateBefore.value) != dateToISO(birth)) {
-    loaderPage(true);
+    showLoader();
     await http
       .post(config.API.profileCalRetire, body)
       .then((res: any) => {
@@ -989,14 +996,14 @@ const calRetire = async (birth: Date) => {
         changeRetireText(date2Thai(retire));
       })
       .finally(() => {
-        loaderPage(false);
+        hideLoader();
       });
   }
 };
 
 const fetchData = async () => {
   if (route.params.id) {
-    loaderPage(true);
+    showLoader();
     await http
       .get(config.API.profileInforId(route.params.id.toString()))
       .then(async (res: any) => {
@@ -1034,7 +1041,7 @@ const fetchData = async () => {
         messageError($q, e);
       })
       .finally(async () => {
-        //   loaderPage(false);
+        //   hideLoader();
         await props.fetchDataProfile();
       });
   }
@@ -1061,7 +1068,7 @@ const editData = async () => {
     profileType: informaData.value.profileType,
     createdFullName: "-",
   };
-  loaderPage(true);
+  showLoader();
   await http
     .put(config.API.profileInforId(route.params.id.toString()), body)
     .then((res) => {
@@ -1079,7 +1086,7 @@ const editData = async () => {
 };
 
 const addData = async () => {
-  //     loaderPage(true);
+  //     showLoader();
   //   await http
   //     .put(config.API.profileInforId(route.params.id.toString()), body)
   //     .then((res) => {
diff --git a/src/modules/04_registry/components/Information/OldName.vue b/src/modules/04_registry/components/Information/OldName.vue
index 6c6cefadc..3aa1e5125 100644
--- a/src/modules/04_registry/components/Information/OldName.vue
+++ b/src/modules/04_registry/components/Information/OldName.vue
@@ -296,7 +296,7 @@ import { onMounted, ref, watch } from "vue";
 import { useRoute } from "vue-router";
 import { useProfileDataStore } from "@/modules/04_registry/store";
 import { useCounterMixin } from "@/stores/mixin";
-import { useDataStore } from "@/stores/data";
+
 import ProfileTable from "@/modules/04_registry/components/Table.vue";
 import DialogHeader from "@/modules/04_registry/components/DialogHeader.vue";
 import DialogFooter from "@/modules/04_registry/components/DialogFooter.vue";
@@ -341,8 +341,7 @@ const props = defineProps({
 const $q = useQuasar();
 const store = useProfileDataStore();
 const { profileData, changeProfileColumns } = store;
-const dataStore = useDataStore();
-const { loaderPage } = dataStore;
+
 const mixin = useCounterMixin();
 const {
   date2Thai,
@@ -351,6 +350,8 @@ const {
   messageError,
   typeChangeName,
   dialogMessage,
+  showLoader,
+  hideLoader,
 } = mixin;
 const route = useRoute();
 const id = ref<string>("");
@@ -550,7 +551,7 @@ onMounted(async () => {
 });
 
 const fetchData = async () => {
-  loaderPage(true);
+  showLoader();
   await http
     .get(config.API.profileChangeNameId(profileId.value))
     .then((res) => {
@@ -574,7 +575,7 @@ const fetchData = async () => {
       messageError($q, e);
     })
     .finally(() => {
-      loaderPage(false);
+      hideLoader();
     });
 };
 
@@ -582,7 +583,7 @@ const fetchData = async () => {
  * get รายการ ข้อมูลเกี่ยวกับบุคคล
  */
 const fetchPerson = async () => {
-  loaderPage(true);
+  showLoader();
   await http
     .get(config.API.person)
     .then((res) => {
@@ -599,7 +600,7 @@ const fetchPerson = async () => {
     })
     .catch((e: any) => {})
     .finally(() => {
-      loaderPage(false);
+      hideLoader();
     });
 };
 
@@ -701,7 +702,7 @@ const saveData = async () => {
     if (lastName.value != undefined)
       formData.append("lastName", lastName.value);
     if (status.value != undefined) formData.append("status", status.value);
-    loaderPage(true);
+    showLoader();
     await http
       .post(config.API.profileChangeNameId(profileId.value), formData)
       .then((res) => {
@@ -747,7 +748,7 @@ const editData = async () => {
     formData.append("firstName", firstName.value);
   if (lastName.value != undefined) formData.append("lastName", lastName.value);
   if (status.value != undefined) formData.append("status", status.value);
-  loaderPage(true);
+  showLoader();
   await http
     .put(config.API.profileChangeNameId(id.value), formData)
     .then((res) => {
@@ -775,7 +776,7 @@ const clickDelete = async () => {
     persistent: true,
   })
     .onOk(async () => {
-      loaderPage(true);
+      showLoader();
       await http
         .delete(config.API.profileChangeNameId(id.value))
         .then((res) => {
@@ -885,7 +886,7 @@ const clickEditRow = () => {
  */
 const clickHistory = async (row: RequestItemsObject) => {
   modalHistory.value = true;
-  loaderPage(true);
+  showLoader();
   await http
     .get(config.API.profileChangeNameHisId(row.id))
     .then((res) => {
@@ -909,7 +910,7 @@ const clickHistory = async (row: RequestItemsObject) => {
       messageError($q, e);
     })
     .finally(() => {
-      loaderPage(false);
+      hideLoader();
     });
 };
 
diff --git a/src/modules/04_registry/components/Insignia.vue b/src/modules/04_registry/components/Insignia.vue
index fb97d8513..51aebe218 100644
--- a/src/modules/04_registry/components/Insignia.vue
+++ b/src/modules/04_registry/components/Insignia.vue
@@ -457,7 +457,7 @@ import { onMounted, ref, watch } from "vue";
 import { useRoute } from "vue-router";
 import { useProfileDataStore } from "@/modules/04_registry/store";
 import { useCounterMixin } from "@/stores/mixin";
-import { useDataStore } from "@/stores/data";
+
 import ProfileTable from "@/modules/04_registry/components/Table.vue";
 import DialogHeader from "@/modules/04_registry/components/DialogHeader.vue";
 import DialogFooter from "@/modules/04_registry/components/DialogFooter.vue";
@@ -488,10 +488,10 @@ const props = defineProps({
 const $q = useQuasar();
 const store = useProfileDataStore();
 const { profileData, changeProfileColumns } = store;
-const dataStore = useDataStore();
-const { loaderPage } = dataStore;
+
 const mixin = useCounterMixin();
-const { date2Thai, success, dateToISO, messageError } = mixin;
+const { date2Thai, success, dateToISO, messageError, showLoader, hideLoader } =
+  mixin;
 const route = useRoute();
 const id = ref<string>("");
 const insigniaId = ref<string>("");
@@ -913,7 +913,7 @@ const filterSelector = (val: any, update: Function, refData: string) => {
 };
 
 const fetchInsignia = async () => {
-  loaderPage(true);
+  showLoader();
   await http
     .get(config.API.insignia)
     .then((res) => {
@@ -934,13 +934,13 @@ const fetchInsignia = async () => {
       messageError($q, e);
     })
     .finally(() => {
-      loaderPage(false);
+      hideLoader();
     });
 };
 
 const fetchData = async () => {
   if (profileId.value) {
-    loaderPage(true);
+    showLoader();
     await http
       .get(config.API.profileInsignId(profileId.value))
       .then((res) => {
@@ -973,7 +973,7 @@ const fetchData = async () => {
         messageError($q, e);
       })
       .finally(() => {
-        loaderPage(false);
+        hideLoader();
       });
   }
 };
@@ -1071,7 +1071,7 @@ const clickSave = async () => {
  */
 const saveData = async () => {
   if (profileId.value) {
-    loaderPage(true);
+    showLoader();
     await http
       .post(config.API.profileInsignId(profileId.value), {
         id: id.value,
@@ -1107,7 +1107,7 @@ const saveData = async () => {
  * บันทึกแก้ไขข้อมูล
  */
 const editData = async () => {
-  loaderPage(true);
+  showLoader();
   await http
     .put(config.API.profileInsignId(id.value), {
       id: id.value,
@@ -1150,7 +1150,7 @@ const clickDelete = async () => {
     persistent: true,
   })
     .onOk(async () => {
-      loaderPage(true);
+      showLoader();
       await http
         .delete(config.API.profileInsignId(id.value))
         .then((res) => {
@@ -1276,7 +1276,7 @@ const clickEditRow = () => {
  */
 const clickHistory = async (row: RequestItemsObject) => {
   modalHistory.value = true;
-  loaderPage(true);
+  showLoader();
   await http
     .get(config.API.profileInsignHisId(row.id))
     .then((res) => {
@@ -1309,7 +1309,7 @@ const clickHistory = async (row: RequestItemsObject) => {
       messageError($q, e);
     })
     .finally(() => {
-      loaderPage(false);
+      hideLoader();
     });
 };
 
diff --git a/src/modules/04_registry/components/Leave.vue b/src/modules/04_registry/components/Leave.vue
index 1c3ecf5fe..ff4f5da94 100644
--- a/src/modules/04_registry/components/Leave.vue
+++ b/src/modules/04_registry/components/Leave.vue
@@ -347,7 +347,7 @@ import { onMounted, ref, watch } from "vue";
 import { useRoute } from "vue-router";
 import { useCounterMixin } from "@/stores/mixin";
 import { useProfileDataStore } from "@/modules/04_registry/store";
-import { useDataStore } from "@/stores/data";
+
 import ProfileTable from "@/modules/04_registry/components/Table.vue";
 import DialogHeader from "@/modules/04_registry/components/DialogHeader.vue";
 import DialogFooter from "@/modules/04_registry/components/DialogFooter.vue";
@@ -380,8 +380,7 @@ const props = defineProps({
 const $q = useQuasar();
 const store = useProfileDataStore();
 const { profileData, changeProfileColumns } = store;
-const dataStore = useDataStore();
-const { loaderPage } = dataStore;
+
 const mixin = useCounterMixin();
 const {
   date2Thai,
@@ -390,6 +389,8 @@ const {
   statusLeave,
   dialogMessage,
   dateToISO,
+  showLoader,
+  hideLoader,
 } = mixin;
 const route = useRoute();
 
@@ -718,7 +719,7 @@ onMounted(async () => {
 const fetchData = async () => {
   rows.value = [];
   if (profileId.value) {
-    loaderPage(true);
+    showLoader();
     await http
       .get(config.API.profileLeaveId(profileId.value))
       .then((res) => {
@@ -743,7 +744,7 @@ const fetchData = async () => {
         messageError($q, e);
       })
       .finally(() => {
-        loaderPage(false);
+        hideLoader();
       });
   }
 };
@@ -773,7 +774,7 @@ const filterSelector = (val: any, update: Function, filtername: string) => {
 
 const clickHistory = async (row: RequestItemsObject) => {
   modalHistory.value = true;
-  loaderPage(true);
+  showLoader();
   await http
     .get(config.API.profileLeaveHisId(row.id))
     .then((res) => {
@@ -798,7 +799,7 @@ const clickHistory = async (row: RequestItemsObject) => {
       messageError($q, e);
     })
     .finally(() => {
-      loaderPage(false);
+      hideLoader();
     });
 };
 
@@ -969,7 +970,7 @@ const saveData = async () => {
   const sum = Number(numLeave.value) + Number(numUsedLeave.value);
 
   if (profileId.value) {
-    loaderPage(true);
+    showLoader();
     await http
       .post(config.API.profileLeaveId(profileId.value), {
         dateStartLeave: dateToISO(dateRange.value[0]),
@@ -1000,7 +1001,7 @@ const saveData = async () => {
 const editData = async () => {
   const sum = Number(numLeave.value) + Number(numUsedLeave.value);
 
-  loaderPage(true);
+  showLoader();
   await http
     .put(config.API.profileLeaveId(id.value), {
       dateStartLeave: dateToISO(dateRange.value[0]),
@@ -1025,7 +1026,7 @@ const editData = async () => {
 };
 
 const deleteData = async () => {
-  loaderPage(true);
+  showLoader();
   await http
     .delete(config.API.profileLeaveId(id.value))
     .then((res) => {
@@ -1192,7 +1193,7 @@ const addData = async () => {
 const clickTotal = async () => {
   rowsTotal.value = [];
   if (profileId.value) {
-    loaderPage(true);
+    showLoader();
     await http
       .get(config.API.profileLeaveTotalId(profileId.value))
       .then((res) => {
@@ -1211,7 +1212,7 @@ const clickTotal = async () => {
         messageError($q, e);
       })
       .finally(() => {
-        loaderPage(false);
+        hideLoader();
       });
   }
 };
diff --git a/src/modules/04_registry/components/Other.vue b/src/modules/04_registry/components/Other.vue
index 715ce6256..5acb4b600 100644
--- a/src/modules/04_registry/components/Other.vue
+++ b/src/modules/04_registry/components/Other.vue
@@ -166,7 +166,7 @@ import { onMounted, ref, watch } from "vue";
 import { useRoute } from "vue-router";
 import { useProfileDataStore } from "@/modules/04_registry/store";
 import { useCounterMixin } from "@/stores/mixin";
-import { useDataStore } from "@/stores/data";
+
 import ProfileTable from "@/modules/04_registry/components/Table.vue";
 import DialogHeader from "@/modules/04_registry/components/DialogHeader.vue";
 import DialogFooter from "@/modules/04_registry/components/DialogFooter.vue";
@@ -191,10 +191,9 @@ const props = defineProps({
 const $q = useQuasar();
 const store = useProfileDataStore();
 const { profileData, changeProfileColumns } = store;
-const dataStore = useDataStore();
-const { loaderPage } = dataStore;
+
 const mixin = useCounterMixin();
-const { date2Thai, success, messageError } = mixin;
+const { date2Thai, success, messageError, showLoader, hideLoader } = mixin;
 const route = useRoute();
 const id = ref<string>("");
 const date = ref<Date>(new Date());
@@ -305,7 +304,7 @@ onMounted(async () => {
 
 const fetchData = async () => {
   if (profileId.value) {
-    loaderPage(true);
+    showLoader();
     await http
       .get(config.API.profileOtherId(profileId.value))
       .then((res) => {
@@ -325,7 +324,7 @@ const fetchData = async () => {
         messageError($q, e);
       })
       .finally(() => {
-        loaderPage(false);
+        hideLoader();
       });
   }
 };
@@ -412,7 +411,7 @@ const clickSave = async () => {
  */
 const saveData = async () => {
   if (profileId.value) {
-    loaderPage(true);
+    showLoader();
     await http
       .post(config.API.profileOtherId(profileId.value), {
         id: id.value,
@@ -436,7 +435,7 @@ const saveData = async () => {
  * บันทึกแก้ไขข้อมูล
  */
 const editData = async () => {
-  loaderPage(true);
+  showLoader();
   await http
     .put(config.API.profileOtherId(id.value), {
       id: id.value,
@@ -467,7 +466,7 @@ const clickDelete = async () => {
     persistent: true,
   })
     .onOk(async () => {
-      loaderPage(true);
+      showLoader();
       await http
         .delete(config.API.profileOtherId(id.value))
         .then((res) => {
@@ -571,7 +570,7 @@ const clickEditRow = () => {
  */
 const clickHistory = async (row: RequestItemsObject) => {
   modalHistory.value = true;
-  loaderPage(true);
+  showLoader();
   await http
     .get(config.API.profileOtherHisId(row.id))
     .then((res) => {
@@ -591,7 +590,7 @@ const clickHistory = async (row: RequestItemsObject) => {
       messageError($q, e);
     })
     .finally(() => {
-      loaderPage(false);
+      hideLoader();
     });
 };
 
diff --git a/src/modules/04_registry/components/Profile.vue b/src/modules/04_registry/components/Profile.vue
index a1e71a961..468079674 100644
--- a/src/modules/04_registry/components/Profile.vue
+++ b/src/modules/04_registry/components/Profile.vue
@@ -675,12 +675,20 @@ import config from "@/app.config";
 
 const $q = useQuasar();
 const store = useDataStore();
-const { changeTab, loaderPage } = store;
+const { changeTab } = store;
 const reasonDeath = ref("");
 const deathCertificateNo = ref("");
 const placeDeathCertificate = ref("");
 const mixin = useCounterMixin();
-const { date2Thai, dateToISO, messageError, dialogMessage, success } = mixin;
+const {
+  date2Thai,
+  dateToISO,
+  messageError,
+  dialogMessage,
+  success,
+  showLoader,
+  hideLoader,
+} = mixin;
 const route = useRoute();
 const router = useRouter();
 const imageUrl = ref<any>(null);
@@ -759,7 +767,7 @@ onMounted(async () => {
 });
 
 const fetchData = async () => {
-  loaderPage(true);
+  showLoader();
   await http
     .get(config.API.profileAvatarId(profileId.value))
     .then((res) => {
@@ -785,12 +793,12 @@ const fetchData = async () => {
       messageError($q, e);
     })
     .finally(() => {
-      loaderPage(false);
+      hideLoader();
     });
 };
 
 const checkProfileData = async () => {
-  loaderPage(true);
+  showLoader();
   await http
     .get(config.API.profileCheckId(profileId.value))
     .then((res) => {
@@ -801,12 +809,12 @@ const checkProfileData = async () => {
       router.push("/registry");
     })
     .finally(() => {
-      loaderPage(false);
+      hideLoader();
     });
 };
 
 const fetchAvatarHistory = async () => {
-  loaderPage(true);
+  showLoader();
   await http
     .get(config.API.profileAvatarHistoryId(profileId.value))
     .then((res) => {
@@ -826,7 +834,7 @@ const fetchAvatarHistory = async () => {
       messageError($q, e);
     })
     .finally(() => {
-      loaderPage(false);
+      hideLoader();
     });
 };
 
@@ -835,7 +843,7 @@ const uploadImage = async (e: any) => {
   if (input.length > 0) {
     const formData = new FormData();
     formData.append("FileData", input[0]);
-    loaderPage(true);
+    showLoader();
     await http
       .post(config.API.profileAvatarId(profileId.value), formData)
       .then((res) => {})
@@ -851,7 +859,7 @@ const uploadImage = async (e: any) => {
 };
 
 const fetchDataDelete = async (id: string) => {
-  loaderPage(true);
+  showLoader();
   await http
     .delete(config.API.profileAvatarHistoryId(id))
     .then((res) => {
@@ -896,7 +904,7 @@ const selectAvatarHistory = async () => {
     );
     return;
   }
-  loaderPage(true);
+  showLoader();
   await http
     .put(config.API.profileAvatarId(profileId.value), {
       avatar: activeImage.value.avatarId,
@@ -972,7 +980,7 @@ const downloadKP7Short = () => {};
 
 const clickKp7 = async () => {
   window.open(config.API.profileReportId(profileId.value));
-  //   loaderPage(true);
+  //   showLoader();
   //   await http
   //     .get(config.API.profileReportId(profileId.value))
   //     .then((res) => {
@@ -985,7 +993,7 @@ const clickKp7 = async () => {
   //     })
   //     .catch((e) => {messageError($q, e);})
   //     .finally(() => {
-  //       loaderPage(false);
+  //       hideLoader();
   //     });
 };
 
@@ -1009,7 +1017,7 @@ const clickSave = async () => {
  */
 const editData = async () => {
   //   modal.value = false;
-  //   loaderPage(true);
+  //   showLoader();
   //   await http
   //     .put(config.API.getPositionMasterId(positionMasterId.value), {
   //       positionMasterId: positionMasterId.value,
@@ -1043,7 +1051,7 @@ const editData = async () => {
  */
 const saveData = async () => {
   //   modal.value = false;
-  //   loaderPage(true);
+  //   showLoader();
   //   await http
   //     .post(config.API.getPositionMaster, {
   //       positionTypeId: positionTypeId.value,
@@ -1097,7 +1105,7 @@ const downloadFilePDF = async (res: string, fileName: string) => {
 
 const clickKp7Short = async () => {
   window.open(config.API.profileKp7ShortId(profileId.value));
-  //   loaderPage(true);
+  //   showLoader();
   //   await http
   //     .get(config.API.profileKp7ShortId(profileId.value))
   //     .then((res) => {
@@ -1110,7 +1118,7 @@ const clickKp7Short = async () => {
   //     })
   //     .catch((e) => {messageError($q, e);})
   //     .finally(() => {
-  //       loaderPage(false);
+  //       hideLoader();
   //     });
 };
 
@@ -1143,7 +1151,7 @@ const clickPassaway = async () => {
 
 const Retire = async () => {
   if (reasonStatus.value == true) {
-    loaderPage(true);
+    showLoader();
     await http
       .put(config.API.profileReactive(profileId.value))
       .then((res) => {
@@ -1158,7 +1166,7 @@ const Retire = async () => {
         router.push("/registry");
       });
   } else {
-    loaderPage(true);
+    showLoader();
     await http
       .put(config.API.profileDeactive(profileId.value), {
         leaveDate: dateToISO(leaveDate.value),
diff --git a/src/modules/04_registry/components/Record.vue b/src/modules/04_registry/components/Record.vue
index 37ad44982..a3fb990ee 100644
--- a/src/modules/04_registry/components/Record.vue
+++ b/src/modules/04_registry/components/Record.vue
@@ -258,7 +258,7 @@ import { onMounted, ref, watch } from "vue";
 import { useRoute } from "vue-router";
 import { useProfileDataStore } from "@/modules/04_registry/store";
 import { useCounterMixin } from "@/stores/mixin";
-import { useDataStore } from "@/stores/data";
+
 import ProfileTable from "@/modules/04_registry/components/Table.vue";
 import DialogHeader from "@/modules/04_registry/components/DialogHeader.vue";
 import DialogFooter from "@/modules/04_registry/components/DialogFooter.vue";
@@ -283,10 +283,10 @@ const props = defineProps({
 const $q = useQuasar();
 const store = useProfileDataStore();
 const { profileData, changeProfileColumns } = store;
-const dataStore = useDataStore();
-const { loaderPage } = dataStore;
+
 const mixin = useCounterMixin();
-const { date2Thai, success, dateToISO, messageError } = mixin;
+const { date2Thai, success, dateToISO, messageError, showLoader, hideLoader } =
+  mixin;
 const route = useRoute();
 const id = ref<string>("");
 const date = ref<Date>(new Date());
@@ -309,7 +309,9 @@ const tittleHistory = ref<string>(
 );
 const filterHistory = ref<string>(""); //search data table history
 const modalHistory = ref<boolean>(false); //modal ประวัติการแก้ไขข้อมูล
-const profileId = ref<string>(route.params.id ? route.params.id.toString():'');
+const profileId = ref<string>(
+  route.params.id ? route.params.id.toString() : ""
+);
 const checkValidate = ref<boolean>(false); //validate data ผ่านหรือไม่
 const rows = ref<RequestItemsObject[]>([]);
 const filter = ref<string>(""); //search data table
@@ -478,8 +480,8 @@ onMounted(async () => {
 });
 
 const fetchData = async () => {
-  if (profileId.value!='') {
-    loaderPage(true);
+  if (profileId.value != "") {
+    showLoader();
     await http
       .get(config.API.profileNopaidId(profileId.value))
       .then((res) => {
@@ -503,7 +505,7 @@ const fetchData = async () => {
         messageError($q, e);
       })
       .finally(() => {
-        loaderPage(false);
+        hideLoader();
       });
   }
 };
@@ -593,7 +595,7 @@ const clickSave = async () => {
  */
 const saveData = async () => {
   if (profileId.value) {
-    loaderPage(true);
+    showLoader();
     await http
       .post(config.API.profileNopaidId(profileId.value), {
         id: id.value,
@@ -621,7 +623,7 @@ const saveData = async () => {
  * บันทึกแก้ไขข้อมูล
  */
 const editData = async () => {
-  loaderPage(true);
+  showLoader();
   await http
     .put(config.API.profileNopaidId(id.value), {
       id: id.value,
@@ -656,7 +658,7 @@ const clickDelete = async () => {
     persistent: true,
   })
     .onOk(async () => {
-      loaderPage(true);
+      showLoader();
       await http
         .delete(config.API.profileNopaidId(id.value))
         .then((res) => {
@@ -766,7 +768,7 @@ const clickEditRow = () => {
  */
 const clickHistory = async (row: RequestItemsObject) => {
   modalHistory.value = true;
-  loaderPage(true);
+  showLoader();
   await http
     .get(config.API.profileNopaidHisId(row.id))
     .then((res) => {
@@ -790,7 +792,7 @@ const clickHistory = async (row: RequestItemsObject) => {
       messageError($q, e);
     })
     .finally(() => {
-      loaderPage(false);
+      hideLoader();
     });
 };
 
diff --git a/src/modules/04_registry/components/Salary.vue b/src/modules/04_registry/components/Salary.vue
index 1f2a9c562..8d6446bbf 100644
--- a/src/modules/04_registry/components/Salary.vue
+++ b/src/modules/04_registry/components/Salary.vue
@@ -552,7 +552,7 @@ import { onMounted, ref, watch } from "vue";
 import { useRoute } from "vue-router";
 import { useProfileDataStore } from "@/modules/04_registry/store";
 import { useCounterMixin } from "@/stores/mixin";
-import { useDataStore } from "@/stores/data";
+
 import ProfileTable from "@/modules/04_registry/components/Table.vue";
 import DialogHeader from "@/modules/04_registry/components/DialogHeader.vue";
 import DialogFooter from "@/modules/04_registry/components/DialogFooter.vue";
@@ -581,10 +581,10 @@ const props = defineProps({
 const $q = useQuasar();
 const store = useProfileDataStore();
 const { profileData, changeProfileColumns } = store;
-const dataStore = useDataStore();
-const { loaderPage } = dataStore;
+
 const mixin = useCounterMixin();
-const { date2Thai, success, dateToISO, messageError } = mixin;
+const { date2Thai, success, dateToISO, messageError, showLoader, hideLoader } =
+  mixin;
 const route = useRoute();
 const id = ref<string>("");
 const date = ref<Date>(new Date());
@@ -1410,7 +1410,7 @@ const filterSelector = (val: any, update: Function, filtername: string) => {
 };
 
 const nodeTree = async () => {
-  loaderPage(true);
+  showLoader();
   await http
     .get(config.API.profileOrganizRoot)
     .then((res: any) => {
@@ -1424,7 +1424,7 @@ const nodeTree = async () => {
       messageError($q, e);
     })
     .finally(() => {
-      loaderPage(false);
+      hideLoader();
     });
 };
 
@@ -1432,7 +1432,7 @@ const nodeTree = async () => {
  * get รายการ ตำแหน่ง
  */
 const fetchPosition = async () => {
-  loaderPage(true);
+  showLoader();
   await http
     .get(config.API.position)
     .then((res) => {
@@ -1509,13 +1509,13 @@ const fetchPosition = async () => {
     })
     .catch((e: any) => {})
     .finally(() => {
-      loaderPage(false);
+      hideLoader();
     });
 };
 
 const fetchData = async () => {
   if (profileId.value) {
-    loaderPage(true);
+    showLoader();
     await http
       .get(config.API.profileSalaryId(profileId.value))
       .then((res) => {
@@ -1558,7 +1558,7 @@ const fetchData = async () => {
         messageError($q, e);
       })
       .finally(() => {
-        loaderPage(false);
+        hideLoader();
       });
   }
 };
@@ -1569,7 +1569,7 @@ const onSelected = async (id: string) => {
 
 const fetchOrganization = async (id: string) => {
   if (selected.value != "") {
-    loaderPage(true);
+    showLoader();
     await http
       .get(config.API.organizationName(id))
       .then((res) => {
@@ -1580,13 +1580,13 @@ const fetchOrganization = async (id: string) => {
         messageError($q, e);
       })
       .finally(() => {
-        loaderPage(false);
+        hideLoader();
       });
   }
 };
 
 const fetchPositionNumber = async (id: string) => {
-  loaderPage(true);
+  showLoader();
   await http
     .get(config.API.getPositionNumberIdByOcId(id))
     .then((res) => {
@@ -1602,7 +1602,7 @@ const fetchPositionNumber = async (id: string) => {
       messageError($q, e);
     })
     .finally(() => {
-      loaderPage(false);
+      hideLoader();
     });
 };
 
@@ -1767,7 +1767,7 @@ const clickSave = async () => {
  */
 const saveData = async () => {
   if (profileId.value) {
-    loaderPage(true);
+    showLoader();
     await http
       .post(config.API.profileSalaryId(profileId.value), {
         date: dateToISO(date.value),
@@ -1804,7 +1804,7 @@ const saveData = async () => {
  * บันทึกแก้ไขข้อมูล
  */
 const editData = async () => {
-  loaderPage(true);
+  showLoader();
   await http
     .put(config.API.profileSalaryId(id.value), {
       date: dateToISO(date.value),
@@ -1848,7 +1848,7 @@ const clickDelete = async () => {
     persistent: true,
   })
     .onOk(async () => {
-      loaderPage(true);
+      showLoader();
       await http
         .delete(config.API.profileSalaryId(id.value))
         .then((res) => {
@@ -1992,7 +1992,7 @@ const clickEditRowRef = () => {
  */
 const clickHistory = async (row: RequestItemsObject) => {
   modalHistory.value = true;
-  loaderPage(true);
+  showLoader();
   await http
     .get(config.API.profileSalaryHisId(row.id))
     .then((res) => {
@@ -2035,7 +2035,7 @@ const clickHistory = async (row: RequestItemsObject) => {
       messageError($q, e);
     })
     .finally(() => {
-      loaderPage(false);
+      hideLoader();
     });
 };
 
diff --git a/src/modules/04_registry/components/SalaryEmployee.vue b/src/modules/04_registry/components/SalaryEmployee.vue
index b38af4d3d..e7df68c72 100644
--- a/src/modules/04_registry/components/SalaryEmployee.vue
+++ b/src/modules/04_registry/components/SalaryEmployee.vue
@@ -563,7 +563,7 @@ import { onMounted, ref, watch } from "vue";
 import { useRoute } from "vue-router";
 import { useProfileDataStore } from "@/modules/04_registry/store";
 import { useCounterMixin } from "@/stores/mixin";
-import { useDataStore } from "@/stores/data";
+
 import ProfileTable from "@/modules/04_registry/components/Table.vue";
 import DialogHeader from "@/modules/04_registry/components/DialogHeader.vue";
 import DialogFooter from "@/modules/04_registry/components/DialogFooter.vue";
@@ -592,10 +592,17 @@ const props = defineProps({
 const $q = useQuasar();
 const store = useProfileDataStore();
 const { profileData, changeProfileColumns } = store;
-const dataStore = useDataStore();
-const { loaderPage } = dataStore;
+
 const mixin = useCounterMixin();
-const { date2Thai, success, dateToISO, messageError, dialogMessage } = mixin;
+const {
+  date2Thai,
+  success,
+  dateToISO,
+  messageError,
+  dialogMessage,
+  showLoader,
+  hideLoader,
+} = mixin;
 const route = useRoute();
 const id = ref<string>("");
 const date = ref<Date>(new Date());
@@ -1281,14 +1288,14 @@ onMounted(async () => {
 });
 
 const fetchDataSelector = async () => {
-  loaderPage(true);
+  showLoader();
   await fetchEmployeePosition();
   await fetchEmployeePositionSide();
   await fetchEmployeeLevel();
   await fetchEmployeeGroup();
   await fetchAgency();
   await nodeTree();
-  loaderPage(false);
+  hideLoader();
 };
 // ตำแหน่ง
 const fetchEmployeePosition = async () => {
@@ -1383,7 +1390,7 @@ const fetchAgency = async () => {
 };
 
 const nodeTree = async () => {
-  loaderPage(true);
+  showLoader();
   await http
     .get(config.API.profileOrganizRoot)
     .then((res: any) => {
@@ -1397,7 +1404,7 @@ const nodeTree = async () => {
       messageError($q, e);
     })
     .finally(() => {
-      loaderPage(false);
+      hideLoader();
     });
 };
 
@@ -1469,7 +1476,7 @@ const filterSelector = (val: any, update: Function, filtername: string) => {
 
 const fetchData = async () => {
   if (profileId.value) {
-    loaderPage(true);
+    showLoader();
     await http
       .get(config.API.profileSalaryEmployeeId(profileId.value))
       .then((res) => {
@@ -1509,13 +1516,13 @@ const fetchData = async () => {
         messageError($q, e);
       })
       .finally(() => {
-        loaderPage(false);
+        hideLoader();
       });
   }
 };
 
 const fetchPositionNumber = async (id: string) => {
-  //   loaderPage(true);
+  //   showLoader();
   if (id == null || id == "") return;
   await http
     .get(config.API.getPositionNumberIdByOcId(id))
@@ -1532,7 +1539,7 @@ const fetchPositionNumber = async (id: string) => {
       messageError($q, e);
     })
     .finally(() => {
-      loaderPage(false);
+      hideLoader();
     });
 };
 
@@ -1696,7 +1703,7 @@ const clickSave = async () => {
  */
 const saveData = async () => {
   if (profileId.value) {
-    loaderPage(true);
+    showLoader();
     await http
       .post(config.API.profileSalaryEmployeeId(profileId.value), {
         amount: amount.value,
@@ -1731,7 +1738,7 @@ const saveData = async () => {
  * บันทึกแก้ไขข้อมูล
  */
 const editData = async () => {
-  loaderPage(true);
+  showLoader();
   await http
     .put(config.API.profileSalaryEmployeeId(id.value), {
       amount: amount.value,
@@ -1765,7 +1772,7 @@ const editData = async () => {
  * ลบข้อมูล
  */
 const fetchDataDelete = async () => {
-  loaderPage(true);
+  showLoader();
   await http
     .delete(config.API.profileSalaryId(id.value))
     .then((res) => {
@@ -1935,7 +1942,7 @@ const clickEditRowRef = () => {
  */
 const clickHistory = async (row: RequestItemsEmployee) => {
   modalHistory.value = true;
-  loaderPage(true);
+  showLoader();
   await http
     .get(config.API.profileSalaryHisId(row.id))
     .then((res) => {
@@ -1974,7 +1981,7 @@ const clickHistory = async (row: RequestItemsEmployee) => {
       messageError($q, e);
     })
     .finally(() => {
-      loaderPage(false);
+      hideLoader();
     });
 };
 
diff --git a/src/modules/04_registry/components/SalaryEmployeeTemp.vue b/src/modules/04_registry/components/SalaryEmployeeTemp.vue
index f3cda3a29..373848dec 100644
--- a/src/modules/04_registry/components/SalaryEmployeeTemp.vue
+++ b/src/modules/04_registry/components/SalaryEmployeeTemp.vue
@@ -538,7 +538,7 @@ import { onMounted, ref, watch } from "vue";
 import { useRoute } from "vue-router";
 import { useProfileDataStore } from "@/modules/04_registry/store";
 import { useCounterMixin } from "@/stores/mixin";
-import { useDataStore } from "@/stores/data";
+
 import ProfileTable from "@/modules/04_registry/components/Table.vue";
 import DialogHeader from "@/modules/04_registry/components/DialogHeader.vue";
 import DialogFooter from "@/modules/04_registry/components/DialogFooter.vue";
@@ -567,10 +567,17 @@ const props = defineProps({
 const $q = useQuasar();
 const store = useProfileDataStore();
 const { profileData, changeProfileColumns } = store;
-const dataStore = useDataStore();
-const { loaderPage } = dataStore;
+
 const mixin = useCounterMixin();
-const { date2Thai, success, dateToISO, messageError, dialogMessage } = mixin;
+const {
+  date2Thai,
+  success,
+  dateToISO,
+  messageError,
+  dialogMessage,
+  showLoader,
+  hideLoader,
+} = mixin;
 const route = useRoute();
 const id = ref<string>("");
 const date = ref<Date>(new Date());
@@ -1310,14 +1317,14 @@ onMounted(async () => {
 });
 
 const fetchDataSelector = async () => {
-  loaderPage(true);
+  showLoader();
   await fetchEmployeePosition();
   await fetchEmployeePositionSide();
   await fetchEmployeeLevel();
   await fetchEmployeeGroup();
   await fetchAgency();
   await nodeTree();
-  loaderPage(false);
+  hideLoader();
 };
 // ตำแหน่ง
 const fetchEmployeePosition = async () => {
@@ -1412,7 +1419,7 @@ const fetchAgency = async () => {
 };
 
 const nodeTree = async () => {
-  loaderPage(true);
+  showLoader();
   await http
     .get(config.API.profileOrganizRoot)
     .then((res: any) => {
@@ -1426,7 +1433,7 @@ const nodeTree = async () => {
       messageError($q, e);
     })
     .finally(() => {
-      loaderPage(false);
+      hideLoader();
     });
 };
 
@@ -1498,7 +1505,7 @@ const filterSelector = (val: any, update: Function, filtername: string) => {
 
 const fetchData = async () => {
   if (profileId.value) {
-    loaderPage(true);
+    showLoader();
     await http
       .get(config.API.profileSalaryEmployeeId(profileId.value))
       .then((res) => {
@@ -1537,13 +1544,13 @@ const fetchData = async () => {
         messageError($q, e);
       })
       .finally(() => {
-        loaderPage(false);
+        hideLoader();
       });
   }
 };
 
 const fetchPositionNumber = async (id: string) => {
-  //   loaderPage(true);
+  //   showLoader();
   if (id == null || id == "") return;
   await http
     .get(config.API.getPositionNumberIdByOcId(id))
@@ -1560,7 +1567,7 @@ const fetchPositionNumber = async (id: string) => {
       messageError($q, e);
     })
     .finally(() => {
-      loaderPage(false);
+      hideLoader();
     });
 };
 
@@ -1725,7 +1732,7 @@ const clickSave = async () => {
  */
 const saveData = async () => {
   if (profileId.value) {
-    loaderPage(true);
+    showLoader();
     await http
       .post(config.API.profileSalaryEmployeeId(profileId.value), {
         amount: amount.value,
@@ -1760,7 +1767,7 @@ const saveData = async () => {
  * บันทึกแก้ไขข้อมูล
  */
 const editData = async () => {
-  loaderPage(true);
+  showLoader();
   await http
     .put(config.API.profileSalaryEmployeeId(id.value), {
       amount: amount.value,
@@ -1794,7 +1801,7 @@ const editData = async () => {
  * ลบข้อมูล
  */
 const fetchDataDelete = async () => {
-  loaderPage(true);
+  showLoader();
   await http
     .delete(config.API.profileSalaryId(id.value))
     .then((res) => {
@@ -1964,7 +1971,7 @@ const clickEditRowRef = () => {
  */
 const clickHistory = async (row: RequestItemsEmployee) => {
   modalHistory.value = true;
-  loaderPage(true);
+  showLoader();
   await http
     .get(config.API.profileSalaryHisId(row.id))
     .then((res) => {
@@ -2003,7 +2010,7 @@ const clickHistory = async (row: RequestItemsEmployee) => {
       messageError($q, e);
     })
     .finally(() => {
-      loaderPage(false);
+      hideLoader();
     });
 };
 
diff --git a/src/modules/04_registry/components/Talent.vue b/src/modules/04_registry/components/Talent.vue
index c964bd194..868a2305e 100644
--- a/src/modules/04_registry/components/Talent.vue
+++ b/src/modules/04_registry/components/Talent.vue
@@ -164,7 +164,7 @@ import { onMounted, ref, watch } from "vue";
 import { useRoute } from "vue-router";
 import { useProfileDataStore } from "@/modules/04_registry/store";
 import { useCounterMixin } from "@/stores/mixin";
-import { useDataStore } from "@/stores/data";
+
 import ProfileTable from "@/modules/04_registry/components/Table.vue";
 import DialogHeader from "@/modules/04_registry/components/DialogHeader.vue";
 import DialogFooter from "@/modules/04_registry/components/DialogFooter.vue";
@@ -189,10 +189,10 @@ const props = defineProps({
 const $q = useQuasar();
 const store = useProfileDataStore();
 const { profileData, changeProfileColumns } = store;
-const dataStore = useDataStore();
-const { loaderPage } = dataStore;
+
 const mixin = useCounterMixin();
-const { date2Thai, success, dateToISO, messageError } = mixin;
+const { date2Thai, success, dateToISO, messageError, showLoader, hideLoader } =
+  mixin;
 const route = useRoute();
 const id = ref<string>("");
 const field = ref<string>();
@@ -355,7 +355,7 @@ onMounted(async () => {
 
 const fetchData = async () => {
   if (profileId.value) {
-    loaderPage(true);
+    showLoader();
     await http
       .get(config.API.profileAbiliId(profileId.value))
       .then((res) => {
@@ -377,7 +377,7 @@ const fetchData = async () => {
         messageError($q, e);
       })
       .finally(() => {
-        loaderPage(false);
+        hideLoader();
       });
   }
 };
@@ -466,7 +466,7 @@ const clickSave = async () => {
  */
 const saveData = async () => {
   if (profileId.value) {
-    loaderPage(true);
+    showLoader();
     await http
       .post(config.API.profileAbiliId(profileId.value), {
         id: id.value,
@@ -492,7 +492,7 @@ const saveData = async () => {
  * บันทึกแก้ไขข้อมูล
  */
 const editData = async () => {
-  loaderPage(true);
+  showLoader();
   await http
     .put(config.API.profileAbiliId(id.value), {
       id: id.value,
@@ -525,7 +525,7 @@ const clickDelete = async () => {
     persistent: true,
   })
     .onOk(async () => {
-      loaderPage(true);
+      showLoader();
       await http
         .delete(config.API.profileAbiliId(id.value))
         .then((res) => {
@@ -633,7 +633,7 @@ const clickEditRow = () => {
  */
 const clickHistory = async (row: RequestItemsObject) => {
   modalHistory.value = true;
-  loaderPage(true);
+  showLoader();
   await http
     .get(config.API.profileAbiliHisId(row.id))
     .then((res) => {
@@ -655,7 +655,7 @@ const clickHistory = async (row: RequestItemsObject) => {
       messageError($q, e);
     })
     .finally(() => {
-      loaderPage(false);
+      hideLoader();
     });
 };
 
diff --git a/src/modules/04_registry/components/Train.vue b/src/modules/04_registry/components/Train.vue
index 284272588..8928f623c 100644
--- a/src/modules/04_registry/components/Train.vue
+++ b/src/modules/04_registry/components/Train.vue
@@ -403,7 +403,7 @@ import { onMounted, ref, watch } from "vue";
 import { useRoute } from "vue-router";
 import { useCounterMixin } from "@/stores/mixin";
 import { useProfileDataStore } from "@/modules/04_registry/store";
-import { useDataStore } from "@/stores/data";
+
 import ProfileTable from "@/modules/04_registry/components/Table.vue";
 import DialogHeader from "@/modules/04_registry/components/DialogHeader.vue";
 import DialogFooter from "@/modules/04_registry/components/DialogFooter.vue";
@@ -428,10 +428,10 @@ const props = defineProps({
 const $q = useQuasar();
 const store = useProfileDataStore();
 const { profileData, changeProfileColumns } = store;
-const dataStore = useDataStore();
-const { loaderPage } = dataStore;
+
 const mixin = useCounterMixin();
-const { date2Thai, success, dateToISO, messageError } = mixin;
+const { date2Thai, success, dateToISO, messageError, showLoader, hideLoader } =
+  mixin;
 const route = useRoute();
 const id = ref<string>("");
 const name = ref<string>();
@@ -754,7 +754,7 @@ onMounted(async () => {
 
 const fetchData = async () => {
   if (profileId.value) {
-    loaderPage(true);
+    showLoader();
     await http
       .get(config.API.profileTrainId(profileId.value))
       .then((res) => {
@@ -782,7 +782,7 @@ const fetchData = async () => {
         messageError($q, e);
       })
       .finally(() => {
-        loaderPage(false);
+        hideLoader();
       });
   }
 };
@@ -877,7 +877,7 @@ const clickSave = async () => {
  */
 const saveData = async () => {
   if (profileId.value) {
-    loaderPage(true);
+    showLoader();
     await http
       .post(config.API.profileTrainId(profileId.value), {
         id: id.value,
@@ -909,7 +909,7 @@ const saveData = async () => {
  * บันทึกแก้ไขข้อมูล
  */
 const editData = async () => {
-  loaderPage(true);
+  showLoader();
   await http
     .put(config.API.profileTrainId(id.value), {
       id: id.value,
@@ -948,7 +948,7 @@ const clickDelete = async () => {
     persistent: true,
   })
     .onOk(async () => {
-      loaderPage(true);
+      showLoader();
       await http
         .delete(config.API.profileTrainId(id.value))
         .then((res) => {
@@ -1068,7 +1068,7 @@ const clickEditRow = () => {
  */
 const clickHistory = async (row: RequestItemsObject) => {
   modalHistory.value = true;
-  loaderPage(true);
+  showLoader();
   await http
     .get(config.API.profileTrainHisId(row.id))
     .then((res) => {
@@ -1096,7 +1096,7 @@ const clickHistory = async (row: RequestItemsObject) => {
       messageError($q, e);
     })
     .finally(() => {
-      loaderPage(false);
+      hideLoader();
     });
 };
 
diff --git a/src/modules/04_registry/components/Work.vue b/src/modules/04_registry/components/Work.vue
index 14f78c39b..1754fcaa6 100644
--- a/src/modules/04_registry/components/Work.vue
+++ b/src/modules/04_registry/components/Work.vue
@@ -304,7 +304,7 @@ import { onMounted, ref, watch } from "vue";
 import { useRoute } from "vue-router";
 import { useProfileDataStore } from "@/modules/04_registry/store";
 import { useCounterMixin } from "@/stores/mixin";
-import { useDataStore } from "@/stores/data";
+
 import ProfileTable from "@/modules/04_registry/components/Table.vue";
 import DialogHeader from "@/modules/04_registry/components/DialogHeader.vue";
 import DialogFooter from "@/modules/04_registry/components/DialogFooter.vue";
@@ -329,10 +329,10 @@ const props = defineProps({
 const $q = useQuasar();
 const store = useProfileDataStore();
 const { profileData, changeProfileColumns } = store;
-const dataStore = useDataStore();
-const { loaderPage } = dataStore;
+
 const mixin = useCounterMixin();
-const { date2Thai, success, dateToISO, messageError } = mixin;
+const { date2Thai, success, dateToISO, messageError, showLoader, hideLoader } =
+  mixin;
 const route = useRoute();
 const id = ref<string>("");
 const dateStart = ref<Date>(new Date());
@@ -555,7 +555,7 @@ onMounted(async () => {
 
 const fetchData = async () => {
   if (profileId.value) {
-    loaderPage(true);
+    showLoader();
     await http
       .get(config.API.profileDutyId(profileId.value))
       .then((res) => {
@@ -580,7 +580,7 @@ const fetchData = async () => {
         messageError($q, e);
       })
       .finally(() => {
-        loaderPage(false);
+        hideLoader();
       });
   }
 };
@@ -671,7 +671,7 @@ const clickSave = async () => {
  */
 const saveData = async () => {
   if (profileId.value) {
-    loaderPage(true);
+    showLoader();
     await http
       .post(config.API.profileDutyId(profileId.value), {
         id: id.value,
@@ -700,7 +700,7 @@ const saveData = async () => {
  * บันทึกแก้ไขข้อมูล
  */
 const editData = async () => {
-  loaderPage(true);
+  showLoader();
   await http
     .put(config.API.profileDutyId(id.value), {
       id: id.value,
@@ -736,7 +736,7 @@ const clickDelete = async () => {
     persistent: true,
   })
     .onOk(async () => {
-      loaderPage(true);
+      showLoader();
       await http
         .delete(config.API.profileDutyId(id.value))
         .then((res) => {
@@ -848,7 +848,7 @@ const clickEditRow = () => {
  */
 const clickHistory = async (row: RequestItemsObject) => {
   modalHistory.value = true;
-  loaderPage(true);
+  showLoader();
   await http
     .get(config.API.profileDutyHisId(row.id))
     .then((res) => {
@@ -873,7 +873,7 @@ const clickHistory = async (row: RequestItemsObject) => {
       messageError($q, e);
     })
     .finally(() => {
-      loaderPage(false);
+      hideLoader();
     });
 };
 
diff --git a/src/modules/04_registry/views/Main.vue b/src/modules/04_registry/views/Main.vue
index 0168d9cd5..d966262ad 100644
--- a/src/modules/04_registry/views/Main.vue
+++ b/src/modules/04_registry/views/Main.vue
@@ -132,7 +132,7 @@ import { onMounted, ref, watch } from "vue";
 import { useRouter } from "vue-router";
 import { useProfileDataStore } from "@/modules/04_registry/store";
 import { useCounterMixin } from "@/stores/mixin";
-import { useDataStore } from "@/stores/data";
+
 import { useQuasar } from "quasar";
 import type { RequestItemsObject } from "@/modules/04_registry/interface/request/Main";
 import type { ResponseObject } from "@/modules/04_registry/interface/response/Main";
@@ -149,10 +149,9 @@ import type { QTableProps } from "quasar";
 const $q = useQuasar();
 const store = useProfileDataStore();
 const { profileData, changeProfileColumns } = store;
-const dataStore = useDataStore();
-const { loaderPage } = dataStore;
+
 const mixin = useCounterMixin();
-const { date2Thai, messageError, typeRetire } = mixin;
+const { date2Thai, messageError, typeRetire, showLoader, hideLoader } = mixin;
 const router = useRouter();
 const isDrawer = ref<boolean>(true);
 const filter = ref<string>(""); //search data table
@@ -1167,7 +1166,7 @@ const clickTree = () => {
 };
 
 const nodeTree = async () => {
-  loaderPage(true);
+  showLoader();
   await http
     .get(config.API.profileOrganizRoot)
     .then((res: any) => {
@@ -1311,7 +1310,7 @@ const doSearch = async () => {
   }
 
   if (selected.value == null || selected.value == "") return;
-  loaderPage(true);
+  showLoader();
   await http
     .post(config.API.searchProfileByOcId(selected.value, profileType.value), {
       criterias: cirteria,
@@ -1367,7 +1366,7 @@ const doSearch = async () => {
       messageError($q, e);
     })
     .finally(() => {
-      loaderPage(false);
+      hideLoader();
     });
 };
 
diff --git a/src/modules/05_placement/components/OrderPlacement/MainOrderPlacement.vue b/src/modules/05_placement/components/OrderPlacement/MainOrderPlacement.vue
index 6894b70cd..a20b4a822 100644
--- a/src/modules/05_placement/components/OrderPlacement/MainOrderPlacement.vue
+++ b/src/modules/05_placement/components/OrderPlacement/MainOrderPlacement.vue
@@ -556,7 +556,7 @@ const clickDelete = (id: string) => {
 };
 
 // const deleteData = async (id: string) => {
-//   loaderPage(true);
+//   showLoader();
 //   await http
 //     .delete(config.API.orderReplace(id))
 //     .then((res) => {
@@ -566,7 +566,7 @@ const clickDelete = (id: string) => {
 //       messageError($q, e);
 //     })
 //     .finally(async () => {
-//       loaderPage(false);
+//       hideLoader();
 //       await fetchData();
 //     });
 // };
diff --git a/src/modules/05_placement/components/OrderPlacement/addOrderPlacement.vue b/src/modules/05_placement/components/OrderPlacement/addOrderPlacement.vue
index 5a060daeb..5ba8d1721 100644
--- a/src/modules/05_placement/components/OrderPlacement/addOrderPlacement.vue
+++ b/src/modules/05_placement/components/OrderPlacement/addOrderPlacement.vue
@@ -85,16 +85,15 @@
 import { onMounted, ref } from "vue";
 import { useRoute } from "vue-router";
 import { useCounterMixin } from "@/stores/mixin";
-import { useDataStore } from "@/stores/data";
+
 import { useQuasar } from "quasar";
 import http from "@/plugins/http";
 import config from "@/app.config";
 
 const $q = useQuasar();
 const mixin = useCounterMixin();
-const { modalError, messageError } = mixin;
-const dataStore = useDataStore();
-const { loaderPage } = dataStore;
+const { modalError, messageError, showLoader, hideLoader } = mixin;
+
 const step = ref<number>(1);
 const stepRaw = ref<number>(1);
 const tittle = ref<string>("");
diff --git a/src/modules/05_placement/components/RepatriationOrder/List.vue b/src/modules/05_placement/components/RepatriationOrder/List.vue
index 6aa4fe9e8..a63dda8e4 100644
--- a/src/modules/05_placement/components/RepatriationOrder/List.vue
+++ b/src/modules/05_placement/components/RepatriationOrder/List.vue
@@ -506,7 +506,7 @@ const clickDelete = (id: string) => {
 };
 
 // const deleteData = async (id: string) => {
-//   loaderPage(true);
+//   showLoader();
 //   await http
 //     .delete(config.API.orderReplace(id))
 //     .then((res) => {
@@ -516,7 +516,7 @@ const clickDelete = (id: string) => {
 //       messageError($q, e);
 //     })
 //     .finally(async () => {
-//       loaderPage(false);
+//       hideLoader();
 //       await fetchData();
 //     });
 // };
diff --git a/src/modules/06_retirement/components/DismissOrder/DismissOrder.vue b/src/modules/06_retirement/components/DismissOrder/DismissOrder.vue
index c133c9f0b..a8024c37a 100644
--- a/src/modules/06_retirement/components/DismissOrder/DismissOrder.vue
+++ b/src/modules/06_retirement/components/DismissOrder/DismissOrder.vue
@@ -506,7 +506,7 @@ const clickDelete = (id: string) => {
 };
 
 // const deleteData = async (id: string) => {
-//   loaderPage(true);
+//   showLoader();
 //   await http
 //     .delete(config.API.orderReplace(id))
 //     .then((res) => {
@@ -516,7 +516,7 @@ const clickDelete = (id: string) => {
 //       messageError($q, e);
 //     })
 //     .finally(async () => {
-//       loaderPage(false);
+//       hideLoader();
 //       await fetchData();
 //     });
 // };
diff --git a/src/modules/06_retirement/components/resign/ResignOrder.vue b/src/modules/06_retirement/components/resign/ResignOrder.vue
index d4ac841a2..ad415e76a 100644
--- a/src/modules/06_retirement/components/resign/ResignOrder.vue
+++ b/src/modules/06_retirement/components/resign/ResignOrder.vue
@@ -556,7 +556,7 @@
   };
   
   // const deleteData = async (id: string) => {
-  //   loaderPage(true);
+  //   showLoader();
   //   await http
   //     .delete(config.API.orderReplace(id))
   //     .then((res) => {
@@ -566,7 +566,7 @@
   //       messageError($q, e);
   //     })
   //     .finally(async () => {
-  //       loaderPage(false);
+  //       hideLoader();
   //       await fetchData();
   //     });
   // };
diff --git a/src/modules/08_registryEmployee/views/Assessment.vue b/src/modules/08_registryEmployee/views/Assessment.vue
index 5d42ad985..981e8cc44 100644
--- a/src/modules/08_registryEmployee/views/Assessment.vue
+++ b/src/modules/08_registryEmployee/views/Assessment.vue
@@ -308,7 +308,7 @@ import { onMounted, ref, watch } from "vue";
 import { useRoute } from "vue-router";
 import { useCounterMixin } from "@/stores/mixin";
 import { useProfileDataStore } from "@/modules/04_registry/store";
-import { useDataStore } from "@/stores/data";
+
 import ProfileTable from "@/modules/04_registry/components/Table.vue";
 import DialogHeader from "@/modules/04_registry/components/DialogHeader.vue";
 import DialogFooter from "@/modules/04_registry/components/DialogFooter.vue";
@@ -338,10 +338,10 @@ const props = defineProps({
 const $q = useQuasar();
 const store = useProfileDataStore();
 const { profileData, changeProfileColumns } = store;
-const dataStore = useDataStore();
-const { loaderPage } = dataStore;
+
 const mixin = useCounterMixin();
-const { date2Thai, success, dateToISO, messageError } = mixin;
+const { date2Thai, success, dateToISO, messageError, showLoader, hideLoader } =
+  mixin;
 const route = useRoute();
 const id = ref<string>("");
 const name = ref<string>();
@@ -598,7 +598,7 @@ onMounted(async () => {
 
 const fetchData = async () => {
   if (profileId.value) {
-    loaderPage(true);
+    showLoader();
     await http
       .get(config.API.profileAssessmentId(profileId.value))
       .then((res) => {
@@ -624,7 +624,7 @@ const fetchData = async () => {
         messageError($q, e);
       })
       .finally(() => {
-        loaderPage(false);
+        hideLoader();
       });
   }
 };
@@ -717,7 +717,7 @@ const clickSave = async () => {
  */
 const saveData = async () => {
   if (profileId.value) {
-    loaderPage(true);
+    showLoader();
     await http
       .post(config.API.profileAssessmentId(profileId.value), {
         id: id.value,
@@ -747,7 +747,7 @@ const saveData = async () => {
  * บันทึกแก้ไขข้อมูล
  */
 const editData = async () => {
-  loaderPage(true);
+  showLoader();
   await http
     .put(config.API.profileAssessmentId(id.value), {
       id: id.value,
@@ -784,7 +784,7 @@ const clickDelete = async () => {
     persistent: true,
   })
     .onOk(async () => {
-      loaderPage(true);
+      showLoader();
       await http
         .delete(config.API.profileAssessmentId(id.value))
         .then((res) => {
@@ -901,7 +901,7 @@ const clickEditRow = () => {
 const clickHistory = async (row: RequestItemsObject) => {
   tittleHistory.value = "ประวัติแก้ไขผลการประเมินการปฏิบัติราชการ";
   modalHistory.value = true;
-  loaderPage(true);
+  showLoader();
   await http
     .get(config.API.profileAssessmentHisId(row.id))
     .then((res) => {
@@ -927,7 +927,7 @@ const clickHistory = async (row: RequestItemsObject) => {
       messageError($q, e);
     })
     .finally(() => {
-      loaderPage(false);
+      hideLoader();
     });
 };
 
diff --git a/src/modules/08_registryEmployee/views/Detail.vue b/src/modules/08_registryEmployee/views/Detail.vue
index 9bff1cb28..6d63b4166 100644
--- a/src/modules/08_registryEmployee/views/Detail.vue
+++ b/src/modules/08_registryEmployee/views/Detail.vue
@@ -298,9 +298,17 @@ import config from "@/app.config";
 
 const $q = useQuasar();
 const store = useDataStore();
-const { changeTab, loaderPage } = store;
+const { changeTab } = store;
 const mixin = useCounterMixin();
-const { date2Thai, dateToISO, messageError, dialogMessage, success } = mixin;
+const {
+  date2Thai,
+  dateToISO,
+  messageError,
+  dialogMessage,
+  success,
+  showLoader,
+  hideLoader,
+} = mixin;
 const route = useRoute();
 const router = useRouter();
 const imageUrl = ref<any>(null);
@@ -374,7 +382,7 @@ onMounted(async () => {
 
 const fetchData = async () => {
   if (profileId.value !== "") {
-    loaderPage(true);
+    showLoader();
     await http
       .get(config.API.profileAvatarId(profileId.value))
       .then((res) => {
@@ -398,14 +406,14 @@ const fetchData = async () => {
         messageError($q, e);
       })
       .finally(() => {
-        loaderPage(false);
+        hideLoader();
       });
   }
 };
 
 const checkProfileData = async () => {
   if (profileId.value !== "") {
-    loaderPage(true);
+    showLoader();
     await http
       .get(config.API.profileCheckId(profileId.value))
       .then((res) => {
@@ -416,14 +424,14 @@ const checkProfileData = async () => {
         router.push("/registry");
       })
       .finally(() => {
-        loaderPage(false);
+        hideLoader();
       });
   }
 };
 
 const fetchAvatarHistory = async () => {
   if (profileId.value !== "") {
-    loaderPage(true);
+    showLoader();
     await http
       .get(config.API.profileAvatarHistoryId(profileId.value))
       .then((res) => {
@@ -443,7 +451,7 @@ const fetchAvatarHistory = async () => {
         messageError($q, e);
       })
       .finally(() => {
-        loaderPage(false);
+        hideLoader();
       });
   }
 };
@@ -454,7 +462,7 @@ const uploadImage = async (e: any) => {
     if (input.length > 0) {
       const formData = new FormData();
       formData.append("FileData", input[0]);
-      loaderPage(true);
+      showLoader();
       await http
         .post(config.API.profileAvatarId(profileId.value), formData)
         .then((res) => {})
@@ -471,7 +479,7 @@ const uploadImage = async (e: any) => {
 };
 
 const fetchDataDelete = async (id: string) => {
-  loaderPage(true);
+  showLoader();
   await http
     .delete(config.API.profileAvatarHistoryId(id))
     .then((res) => {
@@ -517,7 +525,7 @@ const selectAvatarHistory = async () => {
     return;
   }
   if (profileId.value !== "") {
-    loaderPage(true);
+    showLoader();
     await http
       .put(config.API.profileAvatarId(profileId.value), {
         avatar: activeImage.value.avatarId,
@@ -588,7 +596,7 @@ const clickKp7 = async () => {
   if (profileId.value !== "") {
     window.open(config.API.profileReportId(profileId.value));
   }
-  //   loaderPage(true);
+  //   showLoader();
   //   await http
   //     .get(config.API.profileReportId(profileId.value))
   //     .then((res) => {
@@ -601,7 +609,7 @@ const clickKp7 = async () => {
   //     })
   //     .catch((e) => {messageError($q, e);})
   //     .finally(() => {
-  //       loaderPage(false);
+  //       hideLoader();
   //     });
 };
 
@@ -609,7 +617,7 @@ const clickKp7Short = async () => {
   if (profileId.value !== "") {
     window.open(config.API.profileKp7ShortId(profileId.value));
   }
-  //   loaderPage(true);
+  //   showLoader();
   //   await http
   //     .get(config.API.profileKp7ShortId(profileId.value))
   //     .then((res) => {
@@ -622,7 +630,7 @@ const clickKp7Short = async () => {
   //     })
   //     .catch((e) => {messageError($q, e);})
   //     .finally(() => {
-  //       loaderPage(false);
+  //       hideLoader();
   //     });
 };
 </script>
diff --git a/src/modules/08_registryEmployee/views/Discipline.vue b/src/modules/08_registryEmployee/views/Discipline.vue
index ae43a8383..b2c4f2bc0 100644
--- a/src/modules/08_registryEmployee/views/Discipline.vue
+++ b/src/modules/08_registryEmployee/views/Discipline.vue
@@ -278,7 +278,7 @@ import { onMounted, ref, watch } from "vue";
 import { useRoute } from "vue-router";
 import { useCounterMixin } from "@/stores/mixin";
 import { useProfileDataStore } from "@/modules/04_registry/store";
-import { useDataStore } from "@/stores/data";
+
 import ProfileTable from "@/modules/04_registry/components/Table.vue";
 import DialogHeader from "@/modules/04_registry/components/DialogHeader.vue";
 import DialogFooter from "@/modules/04_registry/components/DialogFooter.vue";
@@ -307,10 +307,10 @@ const props = defineProps({
 const $q = useQuasar();
 const store = useProfileDataStore();
 const { profileData, changeProfileColumns } = store;
-const dataStore = useDataStore();
-const { loaderPage } = dataStore;
+
 const mixin = useCounterMixin();
-const { date2Thai, success, dateToISO, messageError } = mixin;
+const { date2Thai, success, dateToISO, messageError, showLoader, hideLoader } =
+  mixin;
 const route = useRoute();
 const id = ref<string>("");
 const level = ref<string>();
@@ -590,7 +590,7 @@ const filterSelector = (val: string, update: Function, refData: string) => {
 
 const fetchData = async () => {
   if (profileId.value) {
-    loaderPage(true);
+    showLoader();
     await http
       .get(config.API.profileDisId(profileId.value))
       .then((res) => {
@@ -615,7 +615,7 @@ const fetchData = async () => {
         messageError($q, e);
       })
       .finally(() => {
-        loaderPage(false);
+        hideLoader();
       });
   }
 };
@@ -706,7 +706,7 @@ const clickSave = async () => {
  */
 const saveData = async () => {
   if (profileId.value) {
-    loaderPage(true);
+    showLoader();
     await http
       .post(config.API.profileDisId(profileId.value), {
         id: id.value,
@@ -735,7 +735,7 @@ const saveData = async () => {
  * บันทึกแก้ไขข้อมูล
  */
 const editData = async () => {
-  loaderPage(true);
+  showLoader();
   await http
     .put(config.API.profileDisId(id.value), {
       id: id.value,
@@ -771,7 +771,7 @@ const clickDelete = async () => {
     persistent: true,
   })
     .onOk(async () => {
-      loaderPage(true);
+      showLoader();
       await http
         .delete(config.API.profileDisId(id.value))
         .then((res) => {
@@ -883,7 +883,7 @@ const clickEditRow = () => {
  */
 const clickHistory = async (row: RequestItemsObject) => {
   modalHistory.value = true;
-  loaderPage(true);
+  showLoader();
   await http
     .get(config.API.profileDisHisId(row.id))
     .then((res) => {
@@ -908,7 +908,7 @@ const clickHistory = async (row: RequestItemsObject) => {
       messageError($q, e);
     })
     .finally(() => {
-      loaderPage(false);
+      hideLoader();
     });
 };
 
diff --git a/src/modules/08_registryEmployee/views/Document.vue b/src/modules/08_registryEmployee/views/Document.vue
index 4b6bfe21b..f9f5f32fb 100644
--- a/src/modules/08_registryEmployee/views/Document.vue
+++ b/src/modules/08_registryEmployee/views/Document.vue
@@ -138,7 +138,7 @@ import { onMounted, computed, ref, watch } from "vue";
 import { useQuasar, QForm } from "quasar";
 import { useCounterMixin } from "@/stores/mixin";
 import { useRoute } from "vue-router";
-import { useDataStore } from "@/stores/data";
+
 import HeaderTop from "@/modules/04_registry/components/Information/top.vue";
 import http from "@/plugins/http";
 import config from "@/app.config";
@@ -156,12 +156,10 @@ const props = defineProps({
 });
 const emit = defineEmits(["update:statusEdit"]);
 
-const dataStore = useDataStore();
-const { loaderPage } = dataStore;
 const $q = useQuasar(); // show dialog
 const mixin = useCounterMixin();
 const route = useRoute();
-const { success, messageError } = mixin;
+const { success, messageError, showLoader, hideLoader } = mixin;
 const profileId = ref<string>(
   route.params.id ? route.params.id.toString() : ""
 );
@@ -177,7 +175,7 @@ onMounted(async () => {
 
 const getData = async () => {
   if (profileId.value) {
-    loaderPage(true);
+    showLoader();
     await http
       .get(config.API.profilePaperId(profileId.value))
       .then((res) => {
@@ -188,13 +186,13 @@ const getData = async () => {
         messageError($q, e);
       })
       .finally(() => {
-        loaderPage(false);
+        hideLoader();
       });
   }
 };
 
 const deleteData = async (id: string) => {
-  loaderPage(true);
+  showLoader();
   await http
     .delete(config.API.profilePaperId(id))
     .then((res) => {
@@ -219,7 +217,7 @@ const uploadData = async () => {
       formData.append("avatar", newFile);
       formData.append("moss", "newFile");
       console.log(formData);
-      loaderPage(true);
+      showLoader();
       await http
         .post(config.API.profilePaperId(profileId.value), formData)
         .then((res) => {
diff --git a/src/modules/08_registryEmployee/views/EditDetail.vue b/src/modules/08_registryEmployee/views/EditDetail.vue
index 0a123b88d..031332411 100644
--- a/src/modules/08_registryEmployee/views/EditDetail.vue
+++ b/src/modules/08_registryEmployee/views/EditDetail.vue
@@ -521,9 +521,17 @@ import config from "@/app.config";
 
 const $q = useQuasar();
 const store = useDataStore();
-const { changeTab, loaderPage } = store;
+const { changeTab } = store;
 const mixin = useCounterMixin();
-const { date2Thai, dateToISO, messageError, dialogMessage, success } = mixin;
+const {
+  date2Thai,
+  dateToISO,
+  messageError,
+  dialogMessage,
+  success,
+  showLoader,
+  hideLoader,
+} = mixin;
 const route = useRoute();
 const router = useRouter();
 const imageUrl = ref<any>(null);
@@ -603,7 +611,7 @@ onMounted(async () => {
 
 const fetchData = async () => {
   if (profileId.value !== "") {
-    loaderPage(true);
+    showLoader();
     await http
       .get(config.API.profileAvatarId(profileId.value))
       .then((res) => {
@@ -627,14 +635,14 @@ const fetchData = async () => {
         messageError($q, e);
       })
       .finally(() => {
-        loaderPage(false);
+        hideLoader();
       });
   }
 };
 
 const checkProfileData = async () => {
   if (profileId.value !== "") {
-    loaderPage(true);
+    showLoader();
     await http
       .get(config.API.profileCheckId(profileId.value))
       .then((res) => {
@@ -645,14 +653,14 @@ const checkProfileData = async () => {
         router.push("/registry");
       })
       .finally(() => {
-        loaderPage(false);
+        hideLoader();
       });
   }
 };
 
 const fetchAvatarHistory = async () => {
   if (profileId.value !== "") {
-    loaderPage(true);
+    showLoader();
     await http
       .get(config.API.profileAvatarHistoryId(profileId.value))
       .then((res) => {
@@ -672,7 +680,7 @@ const fetchAvatarHistory = async () => {
         messageError($q, e);
       })
       .finally(() => {
-        loaderPage(false);
+        hideLoader();
       });
   }
 };
@@ -683,7 +691,7 @@ const uploadImage = async (e: any) => {
     if (input.length > 0) {
       const formData = new FormData();
       formData.append("FileData", input[0]);
-      loaderPage(true);
+      showLoader();
       await http
         .post(config.API.profileAvatarId(profileId.value), formData)
         .then((res) => {})
@@ -700,7 +708,7 @@ const uploadImage = async (e: any) => {
 };
 
 const fetchDataDelete = async (id: string) => {
-  loaderPage(true);
+  showLoader();
   await http
     .delete(config.API.profileAvatarHistoryId(id))
     .then((res) => {
@@ -746,7 +754,7 @@ const selectAvatarHistory = async () => {
     return;
   }
   if (profileId.value !== "") {
-    loaderPage(true);
+    showLoader();
     await http
       .put(config.API.profileAvatarId(profileId.value), {
         avatar: activeImage.value.avatarId,
@@ -817,7 +825,7 @@ const clickKp7 = async () => {
   if (profileId.value !== "") {
     window.open(config.API.profileReportId(profileId.value));
   }
-  //   loaderPage(true);
+  //   showLoader();
   //   await http
   //     .get(config.API.profileReportId(profileId.value))
   //     .then((res) => {
@@ -830,7 +838,7 @@ const clickKp7 = async () => {
   //     })
   //     .catch((e) => {messageError($q, e);})
   //     .finally(() => {
-  //       loaderPage(false);
+  //       hideLoader();
   //     });
 };
 
@@ -851,7 +859,7 @@ const clickKp7Short = async () => {
   if (profileId.value !== "") {
     window.open(config.API.profileKp7ShortId(profileId.value));
   }
-  //   loaderPage(true);
+  //   showLoader();
   //   await http
   //     .get(config.API.profileKp7ShortId(profileId.value))
   //     .then((res) => {
@@ -864,7 +872,7 @@ const clickKp7Short = async () => {
   //     })
   //     .catch((e) => {messageError($q, e);})
   //     .finally(() => {
-  //       loaderPage(false);
+  //       hideLoader();
   //     });
 };
 
@@ -894,7 +902,7 @@ const clickRetire = async () => {
 const Retire = async () => {
   if (profileId.value !== "") {
     if (reasonStatus.value == true) {
-      loaderPage(true);
+      showLoader();
       await http
         .put(config.API.profileReactive(profileId.value))
         .then((res) => {
@@ -909,7 +917,7 @@ const Retire = async () => {
           router.push("/registry");
         });
     } else {
-      loaderPage(true);
+      showLoader();
       await http
         .put(config.API.profileDeactive(profileId.value), {
           leaveDate: dateToISO(leaveDate.value),
diff --git a/src/modules/08_registryEmployee/views/Education.vue b/src/modules/08_registryEmployee/views/Education.vue
index e3c38afce..75756891b 100644
--- a/src/modules/08_registryEmployee/views/Education.vue
+++ b/src/modules/08_registryEmployee/views/Education.vue
@@ -582,7 +582,7 @@ import { onMounted, ref, watch } from "vue";
 import { useRoute } from "vue-router";
 import { useProfileDataStore } from "@/modules/04_registry/store";
 import { useCounterMixin } from "@/stores/mixin";
-import { useDataStore } from "@/stores/data";
+
 import ProfileTable from "@/modules/04_registry/components/Table.vue";
 import DialogHeader from "@/modules/04_registry/components/DialogHeader.vue";
 import DialogFooter from "@/modules/04_registry/components/DialogFooter.vue";
@@ -609,10 +609,10 @@ const props = defineProps({
 const $q = useQuasar();
 const store = useProfileDataStore();
 const { profileData, changeProfileColumns } = store;
-const dataStore = useDataStore();
-const { loaderPage } = dataStore;
+
 const mixin = useCounterMixin();
-const { success, dateToISO, date2Thai, messageError } = mixin;
+const { success, dateToISO, date2Thai, messageError, showLoader, hideLoader } =
+  mixin;
 const route = useRoute();
 const id = ref<string>("");
 const levelId = ref<string>();
@@ -1047,7 +1047,7 @@ onMounted(async () => {
 });
 
 const fetchLevel = async () => {
-  loaderPage(true);
+  showLoader();
   await http
     .get(config.API.educationLevel)
     .then((res) => {
@@ -1063,12 +1063,12 @@ const fetchLevel = async () => {
       messageError($q, e);
     })
     .finally(() => {
-      loaderPage(false);
+      hideLoader();
     });
 };
 
 const fetchPositionPath = async () => {
-  loaderPage(true);
+  showLoader();
   await http
     .get(config.API.positionPath)
     .then((res) => {
@@ -1085,7 +1085,7 @@ const fetchPositionPath = async () => {
       messageError($q, e);
     })
     .finally(() => {
-      loaderPage(false);
+      hideLoader();
     });
 };
 
@@ -1113,7 +1113,7 @@ const filterSelector = (val: any, update: Function, refData: string) => {
 
 const fetchData = async () => {
   if (profileId.value) {
-    loaderPage(true);
+    showLoader();
     await http
       .get(config.API.profileEduId(profileId.value))
       .then((res) => {
@@ -1150,7 +1150,7 @@ const fetchData = async () => {
         messageError($q, e);
       })
       .finally(() => {
-        loaderPage(false);
+        hideLoader();
       });
   }
 };
@@ -1258,7 +1258,7 @@ const saveData = async () => {
   //     (r: any) => r.id == isEducation.value
   //   );
   if (profileId.value) {
-    loaderPage(true);
+    showLoader();
     await http
       .post(config.API.profileEduId(profileId.value), {
         id: id.value,
@@ -1308,7 +1308,7 @@ const editData = async () => {
   //   const filterPositionPath = OpsFilter.value.positionPathOptions.filter(
   //     (r: any) => r.id == isEducation.value
   //   );
-  loaderPage(true);
+  showLoader();
   await http
     .put(config.API.profileEduId(id.value), {
       id: id.value,
@@ -1359,7 +1359,7 @@ const clickDelete = async () => {
     persistent: true,
   })
     .onOk(async () => {
-      loaderPage(true);
+      showLoader();
       await http
         .delete(config.API.profileEduId(id.value))
         .then((res) => {
@@ -1493,7 +1493,7 @@ const clickEditRow = () => {
  */
 const clickHistory = async (row: RequestItemsObject) => {
   modalHistory.value = true;
-  loaderPage(true);
+  showLoader();
   await http
     .get(config.API.profileEduHisId(row.id))
     .then((res) => {
@@ -1530,7 +1530,7 @@ const clickHistory = async (row: RequestItemsObject) => {
       messageError($q, e);
     })
     .finally(() => {
-      loaderPage(false);
+      hideLoader();
     });
 };
 
diff --git a/src/modules/08_registryEmployee/views/Information/Address.vue b/src/modules/08_registryEmployee/views/Information/Address.vue
index 8881a3505..95c6d657e 100644
--- a/src/modules/08_registryEmployee/views/Information/Address.vue
+++ b/src/modules/08_registryEmployee/views/Information/Address.vue
@@ -289,7 +289,7 @@
 <script setup lang="ts">
 import { ref, onMounted } from "vue";
 import { useCounterMixin } from "@/stores/mixin";
-import { useDataStore } from "@/stores/data";
+
 import { useQuasar } from "quasar";
 import http from "@/plugins/http";
 import config from "@/app.config";
@@ -321,10 +321,9 @@ const emit = defineEmits(["update:statusEdit"]);
 
 const route = useRoute();
 const $q = useQuasar();
-const dataStore = useDataStore();
-const { loaderPage } = dataStore;
+
 const mixin = useCounterMixin();
-const { date2Thai, success, messageError } = mixin;
+const { date2Thai, success, messageError, showLoader, hideLoader } = mixin;
 const edit = ref<boolean>(false);
 const addressData = ref<Address>(defaultAddress);
 const myform = ref<any>();
@@ -582,7 +581,7 @@ const filterSelector = (val: any, update: Function, refData: string) => {
  */
 const clickHistory = async () => {
   modalHistory.value = true;
-  loaderPage(true);
+  showLoader();
   await http
     .get(config.API.profileAdrsHisId(route.params.id.toString()))
     .then((res) => {
@@ -610,7 +609,7 @@ const clickHistory = async () => {
       messageError($q, e);
     })
     .finally(() => {
-      loaderPage(false);
+      hideLoader();
     });
 };
 
@@ -630,7 +629,7 @@ const getNewData = async () => {
 
 const fetchData = async () => {
   if (route.params.id) {
-    loaderPage(true);
+    showLoader();
     await http
       .get(config.API.profileAdrsId(route.params.id.toString()))
       .then((res) => {
@@ -649,7 +648,7 @@ const fetchData = async () => {
         messageError($q, e);
       })
       .finally(() => {
-        loaderPage(false);
+        hideLoader();
       });
   }
 };
@@ -682,7 +681,7 @@ const editData = async () => {
     createdAt: new Date(),
     createdFullName: "-",
   };
-  loaderPage(true);
+  showLoader();
   await http
     .put(config.API.profileAdrsId(route.params.id.toString()), body)
     .then((res) => {
@@ -699,7 +698,7 @@ const editData = async () => {
 };
 
 const addData = async () => {
-  //     loaderPage(true);
+  //     showLoader();
   //   await http
   //     .put(config.API.profileInforId(route.params.id.toString()), body)
   //     .then((res) => {
@@ -774,7 +773,7 @@ const selectSubDistrict = (e: string | null, name: string) => {
 };
 
 const fetchProvince = async () => {
-  loaderPage(true);
+  showLoader();
   await http
     .get(config.API.province)
     .then((res) => {
@@ -790,13 +789,13 @@ const fetchProvince = async () => {
       messageError($q, e);
     })
     .finally(() => {
-      loaderPage(false);
+      hideLoader();
     });
 };
 
 const fetchDistrict = async (id: string | null, position: string) => {
   if (id != null && id != "") {
-    loaderPage(true);
+    showLoader();
     await http
       .get(config.API.listDistrict(id))
       .then((res) => {
@@ -817,14 +816,14 @@ const fetchDistrict = async (id: string | null, position: string) => {
         messageError($q, e);
       })
       .finally(() => {
-        loaderPage(false);
+        hideLoader();
       });
   }
 };
 
 const fetchSubDistrict = async (id: string | null, position: string) => {
   if (id != null && id != "") {
-    loaderPage(true);
+    showLoader();
     await http
       .get(config.API.listSubDistrict(id))
       .then((res) => {
@@ -849,7 +848,7 @@ const fetchSubDistrict = async (id: string | null, position: string) => {
         messageError($q, e);
       })
       .finally(() => {
-        loaderPage(false);
+        hideLoader();
       });
   }
 };
diff --git a/src/modules/08_registryEmployee/views/Information/Certicate.vue b/src/modules/08_registryEmployee/views/Information/Certicate.vue
index d08e8c3b2..0c8754f2e 100644
--- a/src/modules/08_registryEmployee/views/Information/Certicate.vue
+++ b/src/modules/08_registryEmployee/views/Information/Certicate.vue
@@ -261,7 +261,7 @@ import { onMounted, ref, watch } from "vue";
 import { useRoute } from "vue-router";
 import { useProfileDataStore } from "@/modules/04_registry/store";
 import { useCounterMixin } from "@/stores/mixin";
-import { useDataStore } from "@/stores/data";
+
 import ProfileTable from "@/modules/04_registry/components/Table.vue";
 import DialogHeader from "@/modules/04_registry/components/DialogHeader.vue";
 import DialogFooter from "@/modules/04_registry/components/DialogFooter.vue";
@@ -290,10 +290,10 @@ const props = defineProps({
 const $q = useQuasar();
 const store = useProfileDataStore();
 const { profileData, changeProfileColumns } = store;
-const dataStore = useDataStore();
-const { loaderPage } = dataStore;
+
 const mixin = useCounterMixin();
-const { date2Thai, success, dateToISO, messageError } = mixin;
+const { date2Thai, success, dateToISO, messageError, showLoader, hideLoader } =
+  mixin;
 const route = useRoute();
 const id = ref<string>("");
 const certificateNo = ref<string>();
@@ -487,7 +487,7 @@ onMounted(async () => {
 
 const fetchData = async () => {
   if (profileId.value) {
-    loaderPage(true);
+    showLoader();
     await http
       .get(config.API.profileCertId(profileId.value))
       .then((res) => {
@@ -510,7 +510,7 @@ const fetchData = async () => {
         messageError($q, e);
       })
       .finally(() => {
-        loaderPage(false);
+        hideLoader();
       });
   }
 };
@@ -599,7 +599,7 @@ const clickSave = async () => {
  * บันทึกเพิ่มข้อมูล
  */
 const saveData = async () => {
-  loaderPage(true);
+  showLoader();
   await http
     .post(config.API.profileCertId(profileId.value), {
       id: id.value,
@@ -625,7 +625,7 @@ const saveData = async () => {
  * บันทึกแก้ไขข้อมูล
  */
 const editData = async () => {
-  loaderPage(true);
+  showLoader();
   await http
     .put(config.API.profileCertId(id.value), {
       id: id.value,
@@ -659,7 +659,7 @@ const clickDelete = async () => {
     persistent: true,
   })
     .onOk(async () => {
-      loaderPage(true);
+      showLoader();
       await http
         .delete(config.API.profileCertId(id.value))
         .then((res) => {
@@ -773,7 +773,7 @@ const clickHistory = async (row: RequestItemsObject) => {
       ? "ประวัติแก้ไขใบอนุญาตของลูกจ้าง"
       : "ประวัติแก้ไขใบอนุญาตประกอบอาชีพ";
   modalHistory.value = true;
-  loaderPage(true);
+  showLoader();
   await http
     .get(config.API.profileCertHisId(row.id))
     .then((res) => {
@@ -796,7 +796,7 @@ const clickHistory = async (row: RequestItemsObject) => {
       messageError($q, e);
     })
     .finally(() => {
-      loaderPage(false);
+      hideLoader();
     });
 };
 
diff --git a/src/modules/08_registryEmployee/views/Information/Family.vue b/src/modules/08_registryEmployee/views/Information/Family.vue
index 8b9eaf90c..346a2ad9e 100644
--- a/src/modules/08_registryEmployee/views/Information/Family.vue
+++ b/src/modules/08_registryEmployee/views/Information/Family.vue
@@ -1089,7 +1089,7 @@
 import { ref, onMounted } from "vue";
 import type { QForm } from "quasar";
 import { useCounterMixin } from "@/stores/mixin";
-import { useDataStore } from "@/stores/data";
+
 import { useQuasar } from "quasar";
 import type {
   Family,
@@ -1124,10 +1124,9 @@ const emit = defineEmits(["update:statusEdit"]);
 
 const route = useRoute();
 const $q = useQuasar();
-const dataStore = useDataStore();
-const { loaderPage } = dataStore;
+
 const mixin = useCounterMixin();
-const { date2Thai, success, messageError } = mixin;
+const { date2Thai, success, messageError, showLoader, hideLoader } = mixin;
 const edit = ref<boolean>(false);
 const fix = ref<boolean>(true);
 const myform = ref<QForm | null>(null);
@@ -1233,7 +1232,7 @@ const refreshData = async () => {
 };
 
 const fetchPrefix = async () => {
-  loaderPage(true);
+  showLoader();
   await http
     .get(config.API.prefix)
     .then((res) => {
@@ -1249,7 +1248,7 @@ const fetchPrefix = async () => {
       messageError($q, e);
     })
     .finally(() => {
-      loaderPage(false);
+      hideLoader();
     });
 };
 
@@ -1279,7 +1278,7 @@ const deleteChildren = (items: childrenFamily) => {
 
 const fetchHistory = async () => {
   familyDataHistory.value = [];
-  loaderPage(true);
+  showLoader();
   await http
     .get(config.API.profileFamiHisId(route.params.id.toString()))
     .then((res) => {
@@ -1317,7 +1316,7 @@ const fetchHistory = async () => {
       messageError($q, e);
     })
     .finally(async () => {
-      loaderPage(false);
+      hideLoader();
       if (familyDataHistory.value.length == 0) {
         // modalError(
         //   $q,
@@ -1340,7 +1339,7 @@ const fetchHistory = async () => {
 
 const fetchData = async () => {
   if (route.params.id) {
-    loaderPage(true);
+    showLoader();
     await http
       .get(config.API.profileFamiId(route.params.id.toString()))
       .then((res) => {
@@ -1393,13 +1392,13 @@ const fetchData = async () => {
         messageError($q, e);
       })
       .finally(async () => {
-        loaderPage(false);
+        hideLoader();
       });
   }
 };
 
 const editData = async () => {
-  loaderPage(true);
+  showLoader();
   const body: ResponseObject = {
     couple: familyData.value.same == "1",
     couplePrefixId: familyData.value.prefixIdC,
@@ -1441,7 +1440,7 @@ const editData = async () => {
 };
 
 const addData = async () => {
-  //     loaderPage(true);
+  //     showLoader();
   //   await http
   //     .put(config.API.profileInforId(route.params.id.toString()), body)
   //     .then((res) => {
diff --git a/src/modules/08_registryEmployee/views/Information/Government.vue b/src/modules/08_registryEmployee/views/Information/Government.vue
index 35d6fca2a..3ae4aa7af 100644
--- a/src/modules/08_registryEmployee/views/Information/Government.vue
+++ b/src/modules/08_registryEmployee/views/Information/Government.vue
@@ -330,7 +330,7 @@
 <script setup lang="ts">
 import { onMounted, ref, watch } from "vue";
 import { useCounterMixin } from "@/stores/mixin";
-import { useDataStore } from "@/stores/data";
+
 import { useQuasar } from "quasar";
 import type { Goverment } from "@/modules/04_registry/components/profileType";
 import { defaultGoverment } from "@/modules/04_registry/components/profileType";
@@ -363,10 +363,10 @@ const emit = defineEmits(["update:statusEdit"]);
 
 const route = useRoute();
 const $q = useQuasar();
-const dataStore = useDataStore();
-const { loaderPage } = dataStore;
+
 const mixin = useCounterMixin();
-const { date2Thai, success, dateToISO, messageError } = mixin;
+const { date2Thai, success, dateToISO, messageError, showLoader, hideLoader } =
+  mixin;
 const profileStore = useProfileDataStore();
 const { birthDate, retireText } = storeToRefs(profileStore);
 const edit = ref<boolean>(false);
@@ -611,7 +611,7 @@ watch(retireText, async () => {
 });
 
 const fetchData = async () => {
-  loaderPage(true);
+  showLoader();
   await http
     .get(config.API.profileGovId(route.params.id.toString()))
     .then((res) => {
@@ -637,7 +637,7 @@ const fetchData = async () => {
       messageError($q, e);
     })
     .finally(async () => {
-      loaderPage(false);
+      hideLoader();
     });
 };
 
@@ -647,7 +647,7 @@ const refreshData = async () => {
 };
 
 const editData = async () => {
-  loaderPage(true);
+  showLoader();
   await http
     .put(config.API.profileGovId(route.params.id.toString()), {
       dateAppoint: dateToISO(govermentData.value.containDate),
@@ -682,7 +682,7 @@ const handleDate = async (modelData: Date) => {
 };
 
 const fetchCalAgeGov = async (date: Date) => {
-  loaderPage(true);
+  showLoader();
   const body = {
     dateAppoint: date,
   };
@@ -696,7 +696,7 @@ const fetchCalAgeGov = async (date: Date) => {
       messageError($q, e);
     })
     .finally(async () => {
-      loaderPage(false);
+      hideLoader();
     });
 };
 
@@ -705,7 +705,7 @@ const fetchCalAgeGov = async (date: Date) => {
  */
 const clickHistory = async () => {
   modalHistory.value = true;
-  loaderPage(true);
+  showLoader();
   await http
     .get(config.API.profileGovHisId(route.params.id.toString()))
     .then((res) => {
@@ -738,7 +738,7 @@ const clickHistory = async () => {
       messageError($q, e);
     })
     .finally(() => {
-      loaderPage(false);
+      hideLoader();
     });
 };
 
diff --git a/src/modules/08_registryEmployee/views/Information/Information.vue b/src/modules/08_registryEmployee/views/Information/Information.vue
index ec7a1440b..2937e53cb 100644
--- a/src/modules/08_registryEmployee/views/Information/Information.vue
+++ b/src/modules/08_registryEmployee/views/Information/Information.vue
@@ -409,7 +409,7 @@
 <script setup lang="ts">
 import { ref, onMounted } from "vue";
 import { useCounterMixin } from "@/stores/mixin";
-import { useDataStore } from "@/stores/data";
+
 import { useQuasar } from "quasar";
 import type {
   Information,
@@ -450,9 +450,16 @@ const emit = defineEmits(["update:statusEdit"]);
 const route = useRoute();
 const $q = useQuasar();
 const mixin = useCounterMixin();
-const { date2Thai, success, dateToISO, messageError, dialogMessage } = mixin;
-const dataStore = useDataStore();
-const { loaderPage } = dataStore;
+const {
+  date2Thai,
+  success,
+  dateToISO,
+  messageError,
+  dialogMessage,
+  showLoader,
+  hideLoader,
+} = mixin;
+
 const profileStore = useProfileDataStore();
 const { changeRetireText, changeBirth } = profileStore;
 const edit = ref<boolean>(false);
@@ -739,7 +746,7 @@ const onCancel = async () => {
  * get รายการ ข้อมูลเกี่ยวกับบุคคล
  */
 const fetchPerson = async () => {
-  loaderPage(true);
+  showLoader();
   await http
     .get(config.API.person)
     .then((res) => {
@@ -796,7 +803,7 @@ const fetchPerson = async () => {
     })
     .catch((e: any) => {})
     .finally(() => {
-      loaderPage(false);
+      hideLoader();
     });
 };
 
@@ -822,7 +829,7 @@ const changeCardID = (value: string | number | null) => {
 };
 
 const checkCitizen = async (id: string) => {
-  loaderPage(true);
+  showLoader();
   await http
     .get(config.API.profileCitizenId(id))
     .then((res) => {
@@ -847,7 +854,7 @@ const checkCitizen = async (id: string) => {
       messageError($q, e);
     })
     .finally(() => {
-      loaderPage(false);
+      hideLoader();
     });
 };
 
@@ -856,7 +863,7 @@ const checkCitizen = async (id: string) => {
  */
 const clickHistory = async () => {
   modalHistory.value = true;
-  loaderPage(true);
+  showLoader();
   await http
     .get(config.API.profileInforHisId(route.params.id.toString()))
     .then((res) => {
@@ -897,7 +904,7 @@ const clickHistory = async () => {
       messageError($q, e);
     })
     .finally(() => {
-      loaderPage(false);
+      hideLoader();
     });
 };
 
@@ -973,7 +980,7 @@ const calRetire = async (birth: Date) => {
     birthDate: dateToISO(birth),
   };
   if (dateToISO(dateBefore.value) != dateToISO(birth)) {
-    loaderPage(true);
+    showLoader();
     await http
       .post(config.API.profileCalRetire, body)
       .then((res: any) => {
@@ -989,14 +996,14 @@ const calRetire = async (birth: Date) => {
         changeRetireText(date2Thai(retire));
       })
       .finally(() => {
-        loaderPage(false);
+        hideLoader();
       });
   }
 };
 
 const fetchData = async () => {
   if (route.params.id) {
-    loaderPage(true);
+    showLoader();
     await http
       .get(config.API.profileInforId(route.params.id.toString()))
       .then(async (res: any) => {
@@ -1034,7 +1041,7 @@ const fetchData = async () => {
         messageError($q, e);
       })
       .finally(async () => {
-        //   loaderPage(false);
+        //   hideLoader();
         await props.fetchDataProfile();
       });
   }
@@ -1061,7 +1068,7 @@ const editData = async () => {
     profileType: informaData.value.profileType,
     createdFullName: "-",
   };
-  loaderPage(true);
+  showLoader();
   await http
     .put(config.API.profileInforId(route.params.id.toString()), body)
     .then((res) => {
@@ -1079,7 +1086,7 @@ const editData = async () => {
 };
 
 const addData = async () => {
-  //     loaderPage(true);
+  //     showLoader();
   //   await http
   //     .put(config.API.profileInforId(route.params.id.toString()), body)
   //     .then((res) => {
diff --git a/src/modules/08_registryEmployee/views/Information/OldName.vue b/src/modules/08_registryEmployee/views/Information/OldName.vue
index 6c6cefadc..3aa1e5125 100644
--- a/src/modules/08_registryEmployee/views/Information/OldName.vue
+++ b/src/modules/08_registryEmployee/views/Information/OldName.vue
@@ -296,7 +296,7 @@ import { onMounted, ref, watch } from "vue";
 import { useRoute } from "vue-router";
 import { useProfileDataStore } from "@/modules/04_registry/store";
 import { useCounterMixin } from "@/stores/mixin";
-import { useDataStore } from "@/stores/data";
+
 import ProfileTable from "@/modules/04_registry/components/Table.vue";
 import DialogHeader from "@/modules/04_registry/components/DialogHeader.vue";
 import DialogFooter from "@/modules/04_registry/components/DialogFooter.vue";
@@ -341,8 +341,7 @@ const props = defineProps({
 const $q = useQuasar();
 const store = useProfileDataStore();
 const { profileData, changeProfileColumns } = store;
-const dataStore = useDataStore();
-const { loaderPage } = dataStore;
+
 const mixin = useCounterMixin();
 const {
   date2Thai,
@@ -351,6 +350,8 @@ const {
   messageError,
   typeChangeName,
   dialogMessage,
+  showLoader,
+  hideLoader,
 } = mixin;
 const route = useRoute();
 const id = ref<string>("");
@@ -550,7 +551,7 @@ onMounted(async () => {
 });
 
 const fetchData = async () => {
-  loaderPage(true);
+  showLoader();
   await http
     .get(config.API.profileChangeNameId(profileId.value))
     .then((res) => {
@@ -574,7 +575,7 @@ const fetchData = async () => {
       messageError($q, e);
     })
     .finally(() => {
-      loaderPage(false);
+      hideLoader();
     });
 };
 
@@ -582,7 +583,7 @@ const fetchData = async () => {
  * get รายการ ข้อมูลเกี่ยวกับบุคคล
  */
 const fetchPerson = async () => {
-  loaderPage(true);
+  showLoader();
   await http
     .get(config.API.person)
     .then((res) => {
@@ -599,7 +600,7 @@ const fetchPerson = async () => {
     })
     .catch((e: any) => {})
     .finally(() => {
-      loaderPage(false);
+      hideLoader();
     });
 };
 
@@ -701,7 +702,7 @@ const saveData = async () => {
     if (lastName.value != undefined)
       formData.append("lastName", lastName.value);
     if (status.value != undefined) formData.append("status", status.value);
-    loaderPage(true);
+    showLoader();
     await http
       .post(config.API.profileChangeNameId(profileId.value), formData)
       .then((res) => {
@@ -747,7 +748,7 @@ const editData = async () => {
     formData.append("firstName", firstName.value);
   if (lastName.value != undefined) formData.append("lastName", lastName.value);
   if (status.value != undefined) formData.append("status", status.value);
-  loaderPage(true);
+  showLoader();
   await http
     .put(config.API.profileChangeNameId(id.value), formData)
     .then((res) => {
@@ -775,7 +776,7 @@ const clickDelete = async () => {
     persistent: true,
   })
     .onOk(async () => {
-      loaderPage(true);
+      showLoader();
       await http
         .delete(config.API.profileChangeNameId(id.value))
         .then((res) => {
@@ -885,7 +886,7 @@ const clickEditRow = () => {
  */
 const clickHistory = async (row: RequestItemsObject) => {
   modalHistory.value = true;
-  loaderPage(true);
+  showLoader();
   await http
     .get(config.API.profileChangeNameHisId(row.id))
     .then((res) => {
@@ -909,7 +910,7 @@ const clickHistory = async (row: RequestItemsObject) => {
       messageError($q, e);
     })
     .finally(() => {
-      loaderPage(false);
+      hideLoader();
     });
 };
 
diff --git a/src/modules/08_registryEmployee/views/Leave.vue b/src/modules/08_registryEmployee/views/Leave.vue
index 1c3ecf5fe..ff4f5da94 100644
--- a/src/modules/08_registryEmployee/views/Leave.vue
+++ b/src/modules/08_registryEmployee/views/Leave.vue
@@ -347,7 +347,7 @@ import { onMounted, ref, watch } from "vue";
 import { useRoute } from "vue-router";
 import { useCounterMixin } from "@/stores/mixin";
 import { useProfileDataStore } from "@/modules/04_registry/store";
-import { useDataStore } from "@/stores/data";
+
 import ProfileTable from "@/modules/04_registry/components/Table.vue";
 import DialogHeader from "@/modules/04_registry/components/DialogHeader.vue";
 import DialogFooter from "@/modules/04_registry/components/DialogFooter.vue";
@@ -380,8 +380,7 @@ const props = defineProps({
 const $q = useQuasar();
 const store = useProfileDataStore();
 const { profileData, changeProfileColumns } = store;
-const dataStore = useDataStore();
-const { loaderPage } = dataStore;
+
 const mixin = useCounterMixin();
 const {
   date2Thai,
@@ -390,6 +389,8 @@ const {
   statusLeave,
   dialogMessage,
   dateToISO,
+  showLoader,
+  hideLoader,
 } = mixin;
 const route = useRoute();
 
@@ -718,7 +719,7 @@ onMounted(async () => {
 const fetchData = async () => {
   rows.value = [];
   if (profileId.value) {
-    loaderPage(true);
+    showLoader();
     await http
       .get(config.API.profileLeaveId(profileId.value))
       .then((res) => {
@@ -743,7 +744,7 @@ const fetchData = async () => {
         messageError($q, e);
       })
       .finally(() => {
-        loaderPage(false);
+        hideLoader();
       });
   }
 };
@@ -773,7 +774,7 @@ const filterSelector = (val: any, update: Function, filtername: string) => {
 
 const clickHistory = async (row: RequestItemsObject) => {
   modalHistory.value = true;
-  loaderPage(true);
+  showLoader();
   await http
     .get(config.API.profileLeaveHisId(row.id))
     .then((res) => {
@@ -798,7 +799,7 @@ const clickHistory = async (row: RequestItemsObject) => {
       messageError($q, e);
     })
     .finally(() => {
-      loaderPage(false);
+      hideLoader();
     });
 };
 
@@ -969,7 +970,7 @@ const saveData = async () => {
   const sum = Number(numLeave.value) + Number(numUsedLeave.value);
 
   if (profileId.value) {
-    loaderPage(true);
+    showLoader();
     await http
       .post(config.API.profileLeaveId(profileId.value), {
         dateStartLeave: dateToISO(dateRange.value[0]),
@@ -1000,7 +1001,7 @@ const saveData = async () => {
 const editData = async () => {
   const sum = Number(numLeave.value) + Number(numUsedLeave.value);
 
-  loaderPage(true);
+  showLoader();
   await http
     .put(config.API.profileLeaveId(id.value), {
       dateStartLeave: dateToISO(dateRange.value[0]),
@@ -1025,7 +1026,7 @@ const editData = async () => {
 };
 
 const deleteData = async () => {
-  loaderPage(true);
+  showLoader();
   await http
     .delete(config.API.profileLeaveId(id.value))
     .then((res) => {
@@ -1192,7 +1193,7 @@ const addData = async () => {
 const clickTotal = async () => {
   rowsTotal.value = [];
   if (profileId.value) {
-    loaderPage(true);
+    showLoader();
     await http
       .get(config.API.profileLeaveTotalId(profileId.value))
       .then((res) => {
@@ -1211,7 +1212,7 @@ const clickTotal = async () => {
         messageError($q, e);
       })
       .finally(() => {
-        loaderPage(false);
+        hideLoader();
       });
   }
 };
diff --git a/src/modules/08_registryEmployee/views/Other.vue b/src/modules/08_registryEmployee/views/Other.vue
index 715ce6256..5acb4b600 100644
--- a/src/modules/08_registryEmployee/views/Other.vue
+++ b/src/modules/08_registryEmployee/views/Other.vue
@@ -166,7 +166,7 @@ import { onMounted, ref, watch } from "vue";
 import { useRoute } from "vue-router";
 import { useProfileDataStore } from "@/modules/04_registry/store";
 import { useCounterMixin } from "@/stores/mixin";
-import { useDataStore } from "@/stores/data";
+
 import ProfileTable from "@/modules/04_registry/components/Table.vue";
 import DialogHeader from "@/modules/04_registry/components/DialogHeader.vue";
 import DialogFooter from "@/modules/04_registry/components/DialogFooter.vue";
@@ -191,10 +191,9 @@ const props = defineProps({
 const $q = useQuasar();
 const store = useProfileDataStore();
 const { profileData, changeProfileColumns } = store;
-const dataStore = useDataStore();
-const { loaderPage } = dataStore;
+
 const mixin = useCounterMixin();
-const { date2Thai, success, messageError } = mixin;
+const { date2Thai, success, messageError, showLoader, hideLoader } = mixin;
 const route = useRoute();
 const id = ref<string>("");
 const date = ref<Date>(new Date());
@@ -305,7 +304,7 @@ onMounted(async () => {
 
 const fetchData = async () => {
   if (profileId.value) {
-    loaderPage(true);
+    showLoader();
     await http
       .get(config.API.profileOtherId(profileId.value))
       .then((res) => {
@@ -325,7 +324,7 @@ const fetchData = async () => {
         messageError($q, e);
       })
       .finally(() => {
-        loaderPage(false);
+        hideLoader();
       });
   }
 };
@@ -412,7 +411,7 @@ const clickSave = async () => {
  */
 const saveData = async () => {
   if (profileId.value) {
-    loaderPage(true);
+    showLoader();
     await http
       .post(config.API.profileOtherId(profileId.value), {
         id: id.value,
@@ -436,7 +435,7 @@ const saveData = async () => {
  * บันทึกแก้ไขข้อมูล
  */
 const editData = async () => {
-  loaderPage(true);
+  showLoader();
   await http
     .put(config.API.profileOtherId(id.value), {
       id: id.value,
@@ -467,7 +466,7 @@ const clickDelete = async () => {
     persistent: true,
   })
     .onOk(async () => {
-      loaderPage(true);
+      showLoader();
       await http
         .delete(config.API.profileOtherId(id.value))
         .then((res) => {
@@ -571,7 +570,7 @@ const clickEditRow = () => {
  */
 const clickHistory = async (row: RequestItemsObject) => {
   modalHistory.value = true;
-  loaderPage(true);
+  showLoader();
   await http
     .get(config.API.profileOtherHisId(row.id))
     .then((res) => {
@@ -591,7 +590,7 @@ const clickHistory = async (row: RequestItemsObject) => {
       messageError($q, e);
     })
     .finally(() => {
-      loaderPage(false);
+      hideLoader();
     });
 };
 
diff --git a/src/modules/08_registryEmployee/views/Record.vue b/src/modules/08_registryEmployee/views/Record.vue
index 37ad44982..a3fb990ee 100644
--- a/src/modules/08_registryEmployee/views/Record.vue
+++ b/src/modules/08_registryEmployee/views/Record.vue
@@ -258,7 +258,7 @@ import { onMounted, ref, watch } from "vue";
 import { useRoute } from "vue-router";
 import { useProfileDataStore } from "@/modules/04_registry/store";
 import { useCounterMixin } from "@/stores/mixin";
-import { useDataStore } from "@/stores/data";
+
 import ProfileTable from "@/modules/04_registry/components/Table.vue";
 import DialogHeader from "@/modules/04_registry/components/DialogHeader.vue";
 import DialogFooter from "@/modules/04_registry/components/DialogFooter.vue";
@@ -283,10 +283,10 @@ const props = defineProps({
 const $q = useQuasar();
 const store = useProfileDataStore();
 const { profileData, changeProfileColumns } = store;
-const dataStore = useDataStore();
-const { loaderPage } = dataStore;
+
 const mixin = useCounterMixin();
-const { date2Thai, success, dateToISO, messageError } = mixin;
+const { date2Thai, success, dateToISO, messageError, showLoader, hideLoader } =
+  mixin;
 const route = useRoute();
 const id = ref<string>("");
 const date = ref<Date>(new Date());
@@ -309,7 +309,9 @@ const tittleHistory = ref<string>(
 );
 const filterHistory = ref<string>(""); //search data table history
 const modalHistory = ref<boolean>(false); //modal ประวัติการแก้ไขข้อมูล
-const profileId = ref<string>(route.params.id ? route.params.id.toString():'');
+const profileId = ref<string>(
+  route.params.id ? route.params.id.toString() : ""
+);
 const checkValidate = ref<boolean>(false); //validate data ผ่านหรือไม่
 const rows = ref<RequestItemsObject[]>([]);
 const filter = ref<string>(""); //search data table
@@ -478,8 +480,8 @@ onMounted(async () => {
 });
 
 const fetchData = async () => {
-  if (profileId.value!='') {
-    loaderPage(true);
+  if (profileId.value != "") {
+    showLoader();
     await http
       .get(config.API.profileNopaidId(profileId.value))
       .then((res) => {
@@ -503,7 +505,7 @@ const fetchData = async () => {
         messageError($q, e);
       })
       .finally(() => {
-        loaderPage(false);
+        hideLoader();
       });
   }
 };
@@ -593,7 +595,7 @@ const clickSave = async () => {
  */
 const saveData = async () => {
   if (profileId.value) {
-    loaderPage(true);
+    showLoader();
     await http
       .post(config.API.profileNopaidId(profileId.value), {
         id: id.value,
@@ -621,7 +623,7 @@ const saveData = async () => {
  * บันทึกแก้ไขข้อมูล
  */
 const editData = async () => {
-  loaderPage(true);
+  showLoader();
   await http
     .put(config.API.profileNopaidId(id.value), {
       id: id.value,
@@ -656,7 +658,7 @@ const clickDelete = async () => {
     persistent: true,
   })
     .onOk(async () => {
-      loaderPage(true);
+      showLoader();
       await http
         .delete(config.API.profileNopaidId(id.value))
         .then((res) => {
@@ -766,7 +768,7 @@ const clickEditRow = () => {
  */
 const clickHistory = async (row: RequestItemsObject) => {
   modalHistory.value = true;
-  loaderPage(true);
+  showLoader();
   await http
     .get(config.API.profileNopaidHisId(row.id))
     .then((res) => {
@@ -790,7 +792,7 @@ const clickHistory = async (row: RequestItemsObject) => {
       messageError($q, e);
     })
     .finally(() => {
-      loaderPage(false);
+      hideLoader();
     });
 };
 
diff --git a/src/modules/08_registryEmployee/views/Salary.vue b/src/modules/08_registryEmployee/views/Salary.vue
index 1f2a9c562..8d6446bbf 100644
--- a/src/modules/08_registryEmployee/views/Salary.vue
+++ b/src/modules/08_registryEmployee/views/Salary.vue
@@ -552,7 +552,7 @@ import { onMounted, ref, watch } from "vue";
 import { useRoute } from "vue-router";
 import { useProfileDataStore } from "@/modules/04_registry/store";
 import { useCounterMixin } from "@/stores/mixin";
-import { useDataStore } from "@/stores/data";
+
 import ProfileTable from "@/modules/04_registry/components/Table.vue";
 import DialogHeader from "@/modules/04_registry/components/DialogHeader.vue";
 import DialogFooter from "@/modules/04_registry/components/DialogFooter.vue";
@@ -581,10 +581,10 @@ const props = defineProps({
 const $q = useQuasar();
 const store = useProfileDataStore();
 const { profileData, changeProfileColumns } = store;
-const dataStore = useDataStore();
-const { loaderPage } = dataStore;
+
 const mixin = useCounterMixin();
-const { date2Thai, success, dateToISO, messageError } = mixin;
+const { date2Thai, success, dateToISO, messageError, showLoader, hideLoader } =
+  mixin;
 const route = useRoute();
 const id = ref<string>("");
 const date = ref<Date>(new Date());
@@ -1410,7 +1410,7 @@ const filterSelector = (val: any, update: Function, filtername: string) => {
 };
 
 const nodeTree = async () => {
-  loaderPage(true);
+  showLoader();
   await http
     .get(config.API.profileOrganizRoot)
     .then((res: any) => {
@@ -1424,7 +1424,7 @@ const nodeTree = async () => {
       messageError($q, e);
     })
     .finally(() => {
-      loaderPage(false);
+      hideLoader();
     });
 };
 
@@ -1432,7 +1432,7 @@ const nodeTree = async () => {
  * get รายการ ตำแหน่ง
  */
 const fetchPosition = async () => {
-  loaderPage(true);
+  showLoader();
   await http
     .get(config.API.position)
     .then((res) => {
@@ -1509,13 +1509,13 @@ const fetchPosition = async () => {
     })
     .catch((e: any) => {})
     .finally(() => {
-      loaderPage(false);
+      hideLoader();
     });
 };
 
 const fetchData = async () => {
   if (profileId.value) {
-    loaderPage(true);
+    showLoader();
     await http
       .get(config.API.profileSalaryId(profileId.value))
       .then((res) => {
@@ -1558,7 +1558,7 @@ const fetchData = async () => {
         messageError($q, e);
       })
       .finally(() => {
-        loaderPage(false);
+        hideLoader();
       });
   }
 };
@@ -1569,7 +1569,7 @@ const onSelected = async (id: string) => {
 
 const fetchOrganization = async (id: string) => {
   if (selected.value != "") {
-    loaderPage(true);
+    showLoader();
     await http
       .get(config.API.organizationName(id))
       .then((res) => {
@@ -1580,13 +1580,13 @@ const fetchOrganization = async (id: string) => {
         messageError($q, e);
       })
       .finally(() => {
-        loaderPage(false);
+        hideLoader();
       });
   }
 };
 
 const fetchPositionNumber = async (id: string) => {
-  loaderPage(true);
+  showLoader();
   await http
     .get(config.API.getPositionNumberIdByOcId(id))
     .then((res) => {
@@ -1602,7 +1602,7 @@ const fetchPositionNumber = async (id: string) => {
       messageError($q, e);
     })
     .finally(() => {
-      loaderPage(false);
+      hideLoader();
     });
 };
 
@@ -1767,7 +1767,7 @@ const clickSave = async () => {
  */
 const saveData = async () => {
   if (profileId.value) {
-    loaderPage(true);
+    showLoader();
     await http
       .post(config.API.profileSalaryId(profileId.value), {
         date: dateToISO(date.value),
@@ -1804,7 +1804,7 @@ const saveData = async () => {
  * บันทึกแก้ไขข้อมูล
  */
 const editData = async () => {
-  loaderPage(true);
+  showLoader();
   await http
     .put(config.API.profileSalaryId(id.value), {
       date: dateToISO(date.value),
@@ -1848,7 +1848,7 @@ const clickDelete = async () => {
     persistent: true,
   })
     .onOk(async () => {
-      loaderPage(true);
+      showLoader();
       await http
         .delete(config.API.profileSalaryId(id.value))
         .then((res) => {
@@ -1992,7 +1992,7 @@ const clickEditRowRef = () => {
  */
 const clickHistory = async (row: RequestItemsObject) => {
   modalHistory.value = true;
-  loaderPage(true);
+  showLoader();
   await http
     .get(config.API.profileSalaryHisId(row.id))
     .then((res) => {
@@ -2035,7 +2035,7 @@ const clickHistory = async (row: RequestItemsObject) => {
       messageError($q, e);
     })
     .finally(() => {
-      loaderPage(false);
+      hideLoader();
     });
 };
 
diff --git a/src/modules/08_registryEmployee/views/SalaryEmployee.vue b/src/modules/08_registryEmployee/views/SalaryEmployee.vue
index b38af4d3d..e7df68c72 100644
--- a/src/modules/08_registryEmployee/views/SalaryEmployee.vue
+++ b/src/modules/08_registryEmployee/views/SalaryEmployee.vue
@@ -563,7 +563,7 @@ import { onMounted, ref, watch } from "vue";
 import { useRoute } from "vue-router";
 import { useProfileDataStore } from "@/modules/04_registry/store";
 import { useCounterMixin } from "@/stores/mixin";
-import { useDataStore } from "@/stores/data";
+
 import ProfileTable from "@/modules/04_registry/components/Table.vue";
 import DialogHeader from "@/modules/04_registry/components/DialogHeader.vue";
 import DialogFooter from "@/modules/04_registry/components/DialogFooter.vue";
@@ -592,10 +592,17 @@ const props = defineProps({
 const $q = useQuasar();
 const store = useProfileDataStore();
 const { profileData, changeProfileColumns } = store;
-const dataStore = useDataStore();
-const { loaderPage } = dataStore;
+
 const mixin = useCounterMixin();
-const { date2Thai, success, dateToISO, messageError, dialogMessage } = mixin;
+const {
+  date2Thai,
+  success,
+  dateToISO,
+  messageError,
+  dialogMessage,
+  showLoader,
+  hideLoader,
+} = mixin;
 const route = useRoute();
 const id = ref<string>("");
 const date = ref<Date>(new Date());
@@ -1281,14 +1288,14 @@ onMounted(async () => {
 });
 
 const fetchDataSelector = async () => {
-  loaderPage(true);
+  showLoader();
   await fetchEmployeePosition();
   await fetchEmployeePositionSide();
   await fetchEmployeeLevel();
   await fetchEmployeeGroup();
   await fetchAgency();
   await nodeTree();
-  loaderPage(false);
+  hideLoader();
 };
 // ตำแหน่ง
 const fetchEmployeePosition = async () => {
@@ -1383,7 +1390,7 @@ const fetchAgency = async () => {
 };
 
 const nodeTree = async () => {
-  loaderPage(true);
+  showLoader();
   await http
     .get(config.API.profileOrganizRoot)
     .then((res: any) => {
@@ -1397,7 +1404,7 @@ const nodeTree = async () => {
       messageError($q, e);
     })
     .finally(() => {
-      loaderPage(false);
+      hideLoader();
     });
 };
 
@@ -1469,7 +1476,7 @@ const filterSelector = (val: any, update: Function, filtername: string) => {
 
 const fetchData = async () => {
   if (profileId.value) {
-    loaderPage(true);
+    showLoader();
     await http
       .get(config.API.profileSalaryEmployeeId(profileId.value))
       .then((res) => {
@@ -1509,13 +1516,13 @@ const fetchData = async () => {
         messageError($q, e);
       })
       .finally(() => {
-        loaderPage(false);
+        hideLoader();
       });
   }
 };
 
 const fetchPositionNumber = async (id: string) => {
-  //   loaderPage(true);
+  //   showLoader();
   if (id == null || id == "") return;
   await http
     .get(config.API.getPositionNumberIdByOcId(id))
@@ -1532,7 +1539,7 @@ const fetchPositionNumber = async (id: string) => {
       messageError($q, e);
     })
     .finally(() => {
-      loaderPage(false);
+      hideLoader();
     });
 };
 
@@ -1696,7 +1703,7 @@ const clickSave = async () => {
  */
 const saveData = async () => {
   if (profileId.value) {
-    loaderPage(true);
+    showLoader();
     await http
       .post(config.API.profileSalaryEmployeeId(profileId.value), {
         amount: amount.value,
@@ -1731,7 +1738,7 @@ const saveData = async () => {
  * บันทึกแก้ไขข้อมูล
  */
 const editData = async () => {
-  loaderPage(true);
+  showLoader();
   await http
     .put(config.API.profileSalaryEmployeeId(id.value), {
       amount: amount.value,
@@ -1765,7 +1772,7 @@ const editData = async () => {
  * ลบข้อมูล
  */
 const fetchDataDelete = async () => {
-  loaderPage(true);
+  showLoader();
   await http
     .delete(config.API.profileSalaryId(id.value))
     .then((res) => {
@@ -1935,7 +1942,7 @@ const clickEditRowRef = () => {
  */
 const clickHistory = async (row: RequestItemsEmployee) => {
   modalHistory.value = true;
-  loaderPage(true);
+  showLoader();
   await http
     .get(config.API.profileSalaryHisId(row.id))
     .then((res) => {
@@ -1974,7 +1981,7 @@ const clickHistory = async (row: RequestItemsEmployee) => {
       messageError($q, e);
     })
     .finally(() => {
-      loaderPage(false);
+      hideLoader();
     });
 };
 
diff --git a/src/modules/08_registryEmployee/views/Talent.vue b/src/modules/08_registryEmployee/views/Talent.vue
index c964bd194..868a2305e 100644
--- a/src/modules/08_registryEmployee/views/Talent.vue
+++ b/src/modules/08_registryEmployee/views/Talent.vue
@@ -164,7 +164,7 @@ import { onMounted, ref, watch } from "vue";
 import { useRoute } from "vue-router";
 import { useProfileDataStore } from "@/modules/04_registry/store";
 import { useCounterMixin } from "@/stores/mixin";
-import { useDataStore } from "@/stores/data";
+
 import ProfileTable from "@/modules/04_registry/components/Table.vue";
 import DialogHeader from "@/modules/04_registry/components/DialogHeader.vue";
 import DialogFooter from "@/modules/04_registry/components/DialogFooter.vue";
@@ -189,10 +189,10 @@ const props = defineProps({
 const $q = useQuasar();
 const store = useProfileDataStore();
 const { profileData, changeProfileColumns } = store;
-const dataStore = useDataStore();
-const { loaderPage } = dataStore;
+
 const mixin = useCounterMixin();
-const { date2Thai, success, dateToISO, messageError } = mixin;
+const { date2Thai, success, dateToISO, messageError, showLoader, hideLoader } =
+  mixin;
 const route = useRoute();
 const id = ref<string>("");
 const field = ref<string>();
@@ -355,7 +355,7 @@ onMounted(async () => {
 
 const fetchData = async () => {
   if (profileId.value) {
-    loaderPage(true);
+    showLoader();
     await http
       .get(config.API.profileAbiliId(profileId.value))
       .then((res) => {
@@ -377,7 +377,7 @@ const fetchData = async () => {
         messageError($q, e);
       })
       .finally(() => {
-        loaderPage(false);
+        hideLoader();
       });
   }
 };
@@ -466,7 +466,7 @@ const clickSave = async () => {
  */
 const saveData = async () => {
   if (profileId.value) {
-    loaderPage(true);
+    showLoader();
     await http
       .post(config.API.profileAbiliId(profileId.value), {
         id: id.value,
@@ -492,7 +492,7 @@ const saveData = async () => {
  * บันทึกแก้ไขข้อมูล
  */
 const editData = async () => {
-  loaderPage(true);
+  showLoader();
   await http
     .put(config.API.profileAbiliId(id.value), {
       id: id.value,
@@ -525,7 +525,7 @@ const clickDelete = async () => {
     persistent: true,
   })
     .onOk(async () => {
-      loaderPage(true);
+      showLoader();
       await http
         .delete(config.API.profileAbiliId(id.value))
         .then((res) => {
@@ -633,7 +633,7 @@ const clickEditRow = () => {
  */
 const clickHistory = async (row: RequestItemsObject) => {
   modalHistory.value = true;
-  loaderPage(true);
+  showLoader();
   await http
     .get(config.API.profileAbiliHisId(row.id))
     .then((res) => {
@@ -655,7 +655,7 @@ const clickHistory = async (row: RequestItemsObject) => {
       messageError($q, e);
     })
     .finally(() => {
-      loaderPage(false);
+      hideLoader();
     });
 };
 
diff --git a/src/modules/08_registryEmployee/views/Train.vue b/src/modules/08_registryEmployee/views/Train.vue
index 284272588..8928f623c 100644
--- a/src/modules/08_registryEmployee/views/Train.vue
+++ b/src/modules/08_registryEmployee/views/Train.vue
@@ -403,7 +403,7 @@ import { onMounted, ref, watch } from "vue";
 import { useRoute } from "vue-router";
 import { useCounterMixin } from "@/stores/mixin";
 import { useProfileDataStore } from "@/modules/04_registry/store";
-import { useDataStore } from "@/stores/data";
+
 import ProfileTable from "@/modules/04_registry/components/Table.vue";
 import DialogHeader from "@/modules/04_registry/components/DialogHeader.vue";
 import DialogFooter from "@/modules/04_registry/components/DialogFooter.vue";
@@ -428,10 +428,10 @@ const props = defineProps({
 const $q = useQuasar();
 const store = useProfileDataStore();
 const { profileData, changeProfileColumns } = store;
-const dataStore = useDataStore();
-const { loaderPage } = dataStore;
+
 const mixin = useCounterMixin();
-const { date2Thai, success, dateToISO, messageError } = mixin;
+const { date2Thai, success, dateToISO, messageError, showLoader, hideLoader } =
+  mixin;
 const route = useRoute();
 const id = ref<string>("");
 const name = ref<string>();
@@ -754,7 +754,7 @@ onMounted(async () => {
 
 const fetchData = async () => {
   if (profileId.value) {
-    loaderPage(true);
+    showLoader();
     await http
       .get(config.API.profileTrainId(profileId.value))
       .then((res) => {
@@ -782,7 +782,7 @@ const fetchData = async () => {
         messageError($q, e);
       })
       .finally(() => {
-        loaderPage(false);
+        hideLoader();
       });
   }
 };
@@ -877,7 +877,7 @@ const clickSave = async () => {
  */
 const saveData = async () => {
   if (profileId.value) {
-    loaderPage(true);
+    showLoader();
     await http
       .post(config.API.profileTrainId(profileId.value), {
         id: id.value,
@@ -909,7 +909,7 @@ const saveData = async () => {
  * บันทึกแก้ไขข้อมูล
  */
 const editData = async () => {
-  loaderPage(true);
+  showLoader();
   await http
     .put(config.API.profileTrainId(id.value), {
       id: id.value,
@@ -948,7 +948,7 @@ const clickDelete = async () => {
     persistent: true,
   })
     .onOk(async () => {
-      loaderPage(true);
+      showLoader();
       await http
         .delete(config.API.profileTrainId(id.value))
         .then((res) => {
@@ -1068,7 +1068,7 @@ const clickEditRow = () => {
  */
 const clickHistory = async (row: RequestItemsObject) => {
   modalHistory.value = true;
-  loaderPage(true);
+  showLoader();
   await http
     .get(config.API.profileTrainHisId(row.id))
     .then((res) => {
@@ -1096,7 +1096,7 @@ const clickHistory = async (row: RequestItemsObject) => {
       messageError($q, e);
     })
     .finally(() => {
-      loaderPage(false);
+      hideLoader();
     });
 };
 
diff --git a/src/modules/08_registryEmployee/views/Work.vue b/src/modules/08_registryEmployee/views/Work.vue
index 14f78c39b..1754fcaa6 100644
--- a/src/modules/08_registryEmployee/views/Work.vue
+++ b/src/modules/08_registryEmployee/views/Work.vue
@@ -304,7 +304,7 @@ import { onMounted, ref, watch } from "vue";
 import { useRoute } from "vue-router";
 import { useProfileDataStore } from "@/modules/04_registry/store";
 import { useCounterMixin } from "@/stores/mixin";
-import { useDataStore } from "@/stores/data";
+
 import ProfileTable from "@/modules/04_registry/components/Table.vue";
 import DialogHeader from "@/modules/04_registry/components/DialogHeader.vue";
 import DialogFooter from "@/modules/04_registry/components/DialogFooter.vue";
@@ -329,10 +329,10 @@ const props = defineProps({
 const $q = useQuasar();
 const store = useProfileDataStore();
 const { profileData, changeProfileColumns } = store;
-const dataStore = useDataStore();
-const { loaderPage } = dataStore;
+
 const mixin = useCounterMixin();
-const { date2Thai, success, dateToISO, messageError } = mixin;
+const { date2Thai, success, dateToISO, messageError, showLoader, hideLoader } =
+  mixin;
 const route = useRoute();
 const id = ref<string>("");
 const dateStart = ref<Date>(new Date());
@@ -555,7 +555,7 @@ onMounted(async () => {
 
 const fetchData = async () => {
   if (profileId.value) {
-    loaderPage(true);
+    showLoader();
     await http
       .get(config.API.profileDutyId(profileId.value))
       .then((res) => {
@@ -580,7 +580,7 @@ const fetchData = async () => {
         messageError($q, e);
       })
       .finally(() => {
-        loaderPage(false);
+        hideLoader();
       });
   }
 };
@@ -671,7 +671,7 @@ const clickSave = async () => {
  */
 const saveData = async () => {
   if (profileId.value) {
-    loaderPage(true);
+    showLoader();
     await http
       .post(config.API.profileDutyId(profileId.value), {
         id: id.value,
@@ -700,7 +700,7 @@ const saveData = async () => {
  * บันทึกแก้ไขข้อมูล
  */
 const editData = async () => {
-  loaderPage(true);
+  showLoader();
   await http
     .put(config.API.profileDutyId(id.value), {
       id: id.value,
@@ -736,7 +736,7 @@ const clickDelete = async () => {
     persistent: true,
   })
     .onOk(async () => {
-      loaderPage(true);
+      showLoader();
       await http
         .delete(config.API.profileDutyId(id.value))
         .then((res) => {
@@ -848,7 +848,7 @@ const clickEditRow = () => {
  */
 const clickHistory = async (row: RequestItemsObject) => {
   modalHistory.value = true;
-  loaderPage(true);
+  showLoader();
   await http
     .get(config.API.profileDutyHisId(row.id))
     .then((res) => {
@@ -873,7 +873,7 @@ const clickHistory = async (row: RequestItemsObject) => {
       messageError($q, e);
     })
     .finally(() => {
-      loaderPage(false);
+      hideLoader();
     });
 };
 
diff --git a/src/modules/08_registryEmployee/views/information.vue b/src/modules/08_registryEmployee/views/information.vue
index 6be674a11..8a030d692 100644
--- a/src/modules/08_registryEmployee/views/information.vue
+++ b/src/modules/08_registryEmployee/views/information.vue
@@ -393,7 +393,7 @@
 <script setup lang="ts">
 import { ref, onMounted } from "vue";
 import { useCounterMixin } from "@/stores/mixin";
-import { useDataStore } from "@/stores/data";
+
 import { useQuasar } from "quasar";
 import type {
   Information,
@@ -434,9 +434,16 @@ const router = useRouter();
 const route = useRoute();
 const $q = useQuasar();
 const mixin = useCounterMixin();
-const { date2Thai, success, dateToISO, messageError, dialogMessage } = mixin;
-const dataStore = useDataStore();
-const { loaderPage } = dataStore;
+const {
+  date2Thai,
+  success,
+  dateToISO,
+  messageError,
+  dialogMessage,
+  showLoader,
+  hideLoader,
+} = mixin;
+
 const profileStore = useProfileDataStore();
 const { changeRetireText, changeBirth } = profileStore;
 const edit = ref<boolean>(false);
@@ -722,7 +729,7 @@ const onCancel = async () => {
  * get รายการ ข้อมูลเกี่ยวกับบุคคล
  */
 const fetchPerson = async () => {
-  loaderPage(true);
+  showLoader();
   await http
     .get(config.API.person)
     .then((res) => {
@@ -779,7 +786,7 @@ const fetchPerson = async () => {
     })
     .catch((e: any) => {})
     .finally(() => {
-      loaderPage(false);
+      hideLoader();
     });
 };
 
@@ -794,7 +801,7 @@ const changeCardID = async (value: string | number | null) => {
 
 const checkCitizen = async (id: string) => {
   console.log("String");
-  loaderPage(true);
+  showLoader();
   await http
     .get(config.API.profileCitizenId(id))
     .then((res) => {
@@ -819,7 +826,7 @@ const checkCitizen = async (id: string) => {
       messageError($q, e);
     })
     .finally(() => {
-      loaderPage(false);
+      hideLoader();
     });
 };
 
@@ -828,7 +835,7 @@ const checkCitizen = async (id: string) => {
  */
 const clickHistory = async () => {
   modalHistory.value = true;
-  loaderPage(true);
+  showLoader();
   await http
     .get(config.API.profileInforHisId(route.params.id.toString()))
     .then((res) => {
@@ -869,7 +876,7 @@ const clickHistory = async () => {
       messageError($q, e);
     })
     .finally(() => {
-      loaderPage(false);
+      hideLoader();
     });
 };
 
@@ -945,7 +952,7 @@ const calRetire = async (birth: Date) => {
     birthDate: dateToISO(birth),
   };
   if (dateToISO(dateBefore.value) != dateToISO(birth)) {
-    loaderPage(true);
+    showLoader();
     await http
       .post(config.API.profileCalRetire, body)
       .then((res: any) => {
@@ -961,14 +968,14 @@ const calRetire = async (birth: Date) => {
         changeRetireText(date2Thai(retire));
       })
       .finally(() => {
-        loaderPage(false);
+        hideLoader();
       });
   }
 };
 
 const fetchData = async () => {
   if (route.params.id) {
-    loaderPage(true);
+    showLoader();
     await http
       .get(config.API.profileInforId(route.params.id.toString()))
       .then(async (res: any) => {
@@ -1006,7 +1013,7 @@ const fetchData = async () => {
         messageError($q, e);
       })
       .finally(async () => {
-        //   loaderPage(false);
+        //   hideLoader();
         await props.fetchDataProfile();
       });
   }
@@ -1033,7 +1040,7 @@ const editData = async () => {
     profileType: informaData.value.profileType,
     createdFullName: "-",
   };
-  loaderPage(true);
+  showLoader();
   await http
     .put(config.API.profileInforId(route.params.id.toString()), body)
     .then((res) => {
@@ -1047,7 +1054,7 @@ const editData = async () => {
       emit("update:statusEdit", false);
       await fetchData();
       await changeBirth(informaData.value.birthDate ?? new Date());
-      loaderPage(false);
+      hideLoader();
     });
 };
 
@@ -1072,7 +1079,7 @@ const addData = async () => {
     profileType: informaData.value.profileType,
     createdFullName: "-",
   };
-  loaderPage(true);
+  showLoader();
   await http
     .post(config.API.profileEmployeeIn, body)
     .then((res) => {
@@ -1086,10 +1093,10 @@ const addData = async () => {
       emit("update:statusEdit", false);
       await fetchData();
       await changeBirth(informaData.value.birthDate ?? new Date());
-      loaderPage(false);
+      hideLoader();
     });
   console.log(body);
-  loaderPage(false);
+  hideLoader();
 };
 
 const saveData = async () => {

From dd325e5368b551fdbdb784022533bd19b8e65323 Mon Sep 17 00:00:00 2001
From: setthawutttty <stw.ttty@gmail.com>
Date: Fri, 4 Aug 2023 10:08:46 +0700
Subject: [PATCH 023/113] =?UTF-8?q?ui=20=E0=B8=AB=E0=B8=99=E0=B9=89?=
 =?UTF-8?q?=E0=B8=B2=20=E0=B9=80=E0=B8=9E=E0=B8=B4=E0=B9=88=E0=B8=A1?=
 =?UTF-8?q?=E0=B9=81=E0=B8=9A=E0=B8=9A=E0=B8=A1=E0=B8=AD=E0=B8=9A=E0=B8=AB?=
 =?UTF-8?q?=E0=B8=A1=E0=B8=B2=E0=B8=A2=E0=B8=87=E0=B8=B2=E0=B8=99=E0=B8=81?=
 =?UTF-8?q?=E0=B8=B2=E0=B8=A3=E0=B8=97=E0=B8=94=E0=B8=A5=E0=B8=AD=E0=B8=87?=
 =?UTF-8?q?=E0=B8=9B=E0=B8=8F=E0=B8=B4=E0=B8=9A=E0=B8=B1=E0=B8=95=E0=B8=B4?=
 =?UTF-8?q?=E0=B8=AB=E0=B8=99=E0=B9=89=E0=B8=B2=E0=B8=97=E0=B8=B5=E0=B9=88?=
 =?UTF-8?q?=E0=B8=A3=E0=B8=B2=E0=B8=8A=E0=B8=81=E0=B8=B2=E0=B8=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/probation/FormAssign.vue       | 726 +++++++++++++-----
 1 file changed, 554 insertions(+), 172 deletions(-)

diff --git a/src/modules/05_placement/components/probation/FormAssign.vue b/src/modules/05_placement/components/probation/FormAssign.vue
index 3146c96b2..895acb766 100644
--- a/src/modules/05_placement/components/probation/FormAssign.vue
+++ b/src/modules/05_placement/components/probation/FormAssign.vue
@@ -99,6 +99,7 @@
                         "
                         :label="`${'ตั้งเเต่วันที่'}`"
                         clearable
+                        outlined
                         @clear="clearDateExam"
                       >
                       </q-input>
@@ -125,6 +126,7 @@
                     <template #trigger>
                       <q-input
                         dense
+                        outlined
                         readonly
                         class="full-width datepicker q-mb-md"
                         :model-value="
@@ -133,7 +135,7 @@
                         :label="`${'ถึงวันที่'}`"
                         clearable
                         @clear="clearDateExam2"
-                        >
+                      >
                       </q-input>
                     </template>
                   </datepicker>
@@ -338,106 +340,139 @@
                       style="max-height: 500px; overflow-y: scroll"
                     >
                       <div class="example-row-column-width">
-                        <div
-                          v-for="item in val1"
-                          :key="item.id"
-                          class="row bg-grey-3 q-py-xs"
-                        >
-                          <div class="col-1 text-center">
-                            <q-checkbox
-                              v-model="item.checked"
-                              dense
-                              :disable="routeName != 'probationWorkAdd'"
-                            />
-                          </div>
-                          <div class="col-9">1. รัฐธรรมนูญ</div>
-                        </div>
-
-                        <div class="row q-mt-xs bg-grey-3 q-py-xs">
-                          <div class="col-1"></div>
-                          <div class="col-2">2.กฎหมายปกครอง</div>
-                        </div>
-                        <div class="row bg-grey-2 q-py-xs borderCheck">
-                          <div class="col-1"></div>
-                          <div class="col-10 q-pl-md">2.1 ทำงานได้</div>
-                        </div>
-                        <div
-                          v-for="item in checkList21"
-                          :key="item.id"
-                          class="row q-py-xs borderCheck border_y"
-                        >
-                          <div class="col-1 text-center">
-                            <q-checkbox
-                              v-model="item.checked"
-                              dense
-                              :disable="routeName != 'probationWorkAdd'"
-                            />
-                          </div>
-
-                          <div class="col-9 q-pl-xl">{{ item.text }}</div>
-                        </div>
-                        <div class="row bg-grey-2 q-py-xs borderCheck">
-                          <div class="col-1"></div>
-                          <div class="col-10 q-pl-md">
-                            2.2 ด้านการปฏิบัติราชการ
+                        <div class="bg-grey-3 q-py-xs">
+                          <div
+                            class="row"
+                            v-for="(item, index) in checkRule"
+                            :key="item.id"
+                          >
+                            <div v-if="index == 0" class="col-1 text-center">
+                              <q-checkbox
+                                v-show="item.status_select === 1"
+                                v-model="item.checked"
+                                dense
+                                :disable="routeName != 'probationWorkAdd'"
+                              />
+                            </div>
+                            <div v-if="index == 0" class="col-11">
+                              {{ item.description }}
+                            </div>
                           </div>
                         </div>
-                        <div
-                          v-for="item in checkList22"
-                          :key="item.id"
-                          class="row q-py-xs borderCheck border_y"
-                        >
-                          <div class="col-1 text-center">
-                            <q-checkbox
-                              v-model="item.checked"
-                              dense
-                              :disable="routeName != 'probationWorkAdd'"
-                            />
+                        <div v-for="(item, index) in checkRule" :key="item.id">
+                          <div
+                            v-if="index === 1"
+                            class="row bg-grey-2 q-py-xs borderCheck"
+                          >
+                            <div class="col-1"></div>
+                            <div class="col-10 ">
+                              {{ item.description }}
+                            </div>
                           </div>
-
-                          <div class="col-9 q-pl-xl">{{ item.text }}</div>
-                        </div>
-                        <div class="row bg-grey-2 q-py-xs borderCheck">
-                          <div class="col-1"></div>
-                          <div class="col-10 q-pl-md">
-                            2.3 ด้านการบริหารทรัพยากรบุคคล
+                          </div>
+                        <div v-for="(item, index) in checkRule" :key="item.id">
+                          <div
+                            v-if="index === 2"
+                            class="row bg-grey-2 q-py-xs borderCheck"
+                          >
+                            <div class="col-1"></div>
+                            <div class="col-10 q-pl-md">
+                              {{ item.description }}
+                            </div>
+                          </div>
+                          <div
+                            v-else-if="index > 2 && index < 9"
+                            class="row borderCheck border_y q-py-xs"
+                          >
+                            <div class="col-1 text-center">
+                              <q-checkbox
+                                v-model="item.checked"
+                                dense
+                                :disable="routeName != 'probationWorkAdd'"
+                              />
+                            </div>
+                            <div class="col-9 q-pl-xl">
+                              {{ item.description }}
+                            </div>
                           </div>
                         </div>
-                        <div
-                          v-for="item in checkList23"
-                          :key="item.id"
-                          class="row q-py-xs borderCheck border_y"
-                        >
-                          <div class="col-1 text-center">
-                            <q-checkbox
-                              v-model="item.checked"
-                              dense
-                              :disable="routeName != 'probationWorkAdd'"
-                            />
+                        <div v-for="(item, index) in checkRule" :key="item.id">
+                          <div
+                            v-if="index === 9"
+                            class="row bg-grey-2 q-py-xs borderCheck"
+                          >
+                            <div class="col-1"></div>
+                            <div class="col-10 q-pl-md">
+                              {{ item.description }}
+                            </div>
                           </div>
-
-                          <div class="col-9 q-pl-xl">{{ item.text }}</div>
-                        </div>
-                        <div class="row bg-grey-2 q-py-xs borderCheck">
-                          <div class="col-1"></div>
-                          <div class="col-10 q-pl-md">
-                            2.4 ด้านการบริหารงบประมาณและการคลัง
+                          <div
+                            v-else-if="index > 9 && index < 16"
+                            class="row borderCheck border_y q-py-xs"
+                          >
+                            <div class="col-1 text-center">
+                              <q-checkbox
+                                v-model="item.checked"
+                                dense
+                                :disable="routeName != 'probationWorkAdd'"
+                              />
+                            </div>
+                            <div class="col-9 q-pl-xl">
+                              {{ item.description }}
+                            </div>
                           </div>
                         </div>
-                        <div
-                          v-for="item in checkList24"
-                          :key="item.id"
-                          class="row q-py-xs borderCheck border_y"
-                        >
-                          <div class="col-1 text-center">
-                            <q-checkbox
-                              v-model="item.checked"
-                              dense
-                              :disable="routeName != 'probationWorkAdd'"
-                            />
+                        <div v-for="(item, index) in checkRule" :key="item.id">
+                          <div
+                            v-if="index === 16"
+                            class="row bg-grey-2 q-py-xs borderCheck"
+                          >
+                            <div class="col-1"></div>
+                            <div class="col-10 q-pl-md">
+                              {{ item.description }}
+                            </div>
+                          </div>
+                          <div
+                            v-else-if="index > 16 && index < 19"
+                            class="row borderCheck border_y q-py-xs"
+                          >
+                            <div class="col-1 text-center">
+                              <q-checkbox
+                                v-model="item.checked"
+                                dense
+                                :disable="routeName != 'probationWorkAdd'"
+                              />
+                            </div>
+                            <div class="col-9 q-pl-xl">
+                              {{ item.description }}
+                            </div>
+                          </div>
+                        </div>
+                        <div v-for="(item, index) in checkRule" :key="item.id">
+                          <div
+                            v-if="index === 19"
+                            class="row bg-grey-2 q-py-xs borderCheck"
+                          >
+                            <div class="col-1"></div>
+                            <div class="col-10 q-pl-md">
+                              {{ item.description }}
+                            </div>
+                          </div>
+                          <div
+                            v-else-if="index > 19 && index < 30"
+                            class="row borderCheck border_y q-py-xs"
+                          >
+                            <div class="col-1 text-center">
+                              <q-checkbox
+                                v-model="item.checked"
+                                dense
+                                :disable="routeName != 'probationWorkAdd'"
+                              />
+                            </div>
+                            <div class="col-9 q-pl-xl">
+                              {{ item.description }}
+                            </div>
                           </div>
-
-                          <div class="col-9 q-pl-xl">{{ item.text }}</div>
                         </div>
                         <!-- <div class="row q-mt-xs bg-grey-3 q-py-xs">
                         <div class="col-1 text-center"></div>
@@ -485,8 +520,10 @@
                     <div class="col-12 row q-col-gutter-sm">
                       <div class="col-xs-12 col-sm-6">
                         <q-select
-                        hide-bottom-space
-                        :rules="[(val) => !!val || 'กรุณาเลือกความรู้ความสามารถ']"
+                          hide-bottom-space
+                          :rules="[
+                            (val) => !!val || 'กรุณาเลือกความรู้ความสามารถ',
+                          ]"
                           :options="OPskill"
                           class="bg-white"
                           :readonly="routeName != 'probationWorkAdd'"
@@ -499,8 +536,10 @@
                       </div>
                       <div class="col-xs-12 col-sm-6">
                         <q-select
-                        hide-bottom-space
-                        :rules="[(val) => !!val || 'กรุณาเลือกความรู้ความสามารถ']"
+                          hide-bottom-space
+                          :rules="[
+                            (val) => !!val || 'กรุณาเลือกความรู้ความสามารถ',
+                          ]"
                           :options="OPskill"
                           class="bg-white"
                           :readonly="routeName != 'probationWorkAdd'"
@@ -513,8 +552,10 @@
                       </div>
                       <div class="col-xs-12 col-sm-6">
                         <q-select
-                        hide-bottom-space
-                        :rules="[(val) => !!val || 'กรุณาเลือกความรู้ความสามารถ']"
+                          hide-bottom-space
+                          :rules="[
+                            (val) => !!val || 'กรุณาเลือกความรู้ความสามารถ',
+                          ]"
                           :options="OPskill"
                           class="bg-white"
                           :readonly="routeName != 'probationWorkAdd'"
@@ -527,8 +568,10 @@
                       </div>
                       <div class="col-xs-12 col-sm-6">
                         <q-select
-                        hide-bottom-space
-                        :rules="[(val) => !!val || 'กรุณาเลือกความรู้ความสามารถ']"
+                          hide-bottom-space
+                          :rules="[
+                            (val) => !!val || 'กรุณาเลือกความรู้ความสามารถ',
+                          ]"
                           :options="OPskill"
                           class="bg-white"
                           :readonly="routeName != 'probationWorkAdd'"
@@ -557,8 +600,8 @@
                     <div class="col-12 row q-col-gutter-sm">
                       <div class="col-xs-12 col-sm-6">
                         <q-select
-                        hide-bottom-space
-                        :rules="[(val) => !!val || 'กรุณาเลือกสมรรถนะ']"
+                          hide-bottom-space
+                          :rules="[(val) => !!val || 'กรุณาเลือกสมรรถนะ']"
                           :options="OPmain"
                           class="bg-white"
                           :readonly="routeName != 'probationWorkAdd'"
@@ -571,8 +614,8 @@
                       </div>
                       <div class="col-xs-12 col-sm-6">
                         <q-select
-                        hide-bottom-space
-                        :rules="[(val) => !!val || 'กรุณาเลือกสมรรถนะ']"
+                          hide-bottom-space
+                          :rules="[(val) => !!val || 'กรุณาเลือกสมรรถนะ']"
                           :options="OPmain"
                           class="bg-white"
                           :readonly="routeName != 'probationWorkAdd'"
@@ -585,8 +628,8 @@
                       </div>
                       <div class="col-xs-12 col-sm-6">
                         <q-select
-                        hide-bottom-space
-                        :rules="[(val) => !!val || 'กรุณาเลือกสมรรถนะ']"
+                          hide-bottom-space
+                          :rules="[(val) => !!val || 'กรุณาเลือกสมรรถนะ']"
                           :options="OPmain"
                           class="bg-white"
                           :readonly="routeName != 'probationWorkAdd'"
@@ -599,8 +642,8 @@
                       </div>
                       <div class="col-xs-12 col-sm-6">
                         <q-select
-                        hide-bottom-space
-                        :rules="[(val) => !!val || 'กรุณาเลือกสมรรถนะ']"
+                          hide-bottom-space
+                          :rules="[(val) => !!val || 'กรุณาเลือกสมรรถนะ']"
                           :options="OPmain"
                           class="bg-white"
                           :readonly="routeName != 'probationWorkAdd'"
@@ -613,8 +656,8 @@
                       </div>
                       <div class="col-xs-12 col-sm-6">
                         <q-select
-                        hide-bottom-space
-                        :rules="[(val) => !!val || 'กรุณาเลือกสมรรถนะ']"
+                          hide-bottom-space
+                          :rules="[(val) => !!val || 'กรุณาเลือกสมรรถนะ']"
                           :options="OPmain"
                           class="bg-white"
                           :readonly="routeName != 'probationWorkAdd'"
@@ -622,7 +665,7 @@
                           borderless
                           :outlined="routeName == 'probationWorkAdd'"
                           v-model="main5"
-                          label="ตัวที่ 4"
+                          label="ตัวที่ 5"
                         />
                       </div>
                     </div>
@@ -632,8 +675,10 @@
                     <div class="col-12 row q-col-gutter-sm">
                       <div class="col-xs-12 col-sm-6">
                         <q-select
-                        hide-bottom-space
-                        :rules="[(val) => !!val || 'กรุณาเลือกสมรรถนะประจํากลุ่มงาน']"
+                          hide-bottom-space
+                          :rules="[
+                            (val) => !!val || 'กรุณาเลือกสมรรถนะประจํากลุ่มงาน',
+                          ]"
                           :options="OPgroup"
                           class="bg-white"
                           :readonly="routeName != 'probationWorkAdd'"
@@ -646,8 +691,10 @@
                       </div>
                       <div class="col-xs-12 col-sm-6">
                         <q-select
-                        hide-bottom-space
-                        :rules="[(val) => !!val || 'กรุณาเลือกสมรรถนะประจํากลุ่มงาน']"
+                          hide-bottom-space
+                          :rules="[
+                            (val) => !!val || 'กรุณาเลือกสมรรถนะประจํากลุ่มงาน',
+                          ]"
                           :options="OPgroup"
                           class="bg-white"
                           :readonly="routeName != 'probationWorkAdd'"
@@ -660,8 +707,10 @@
                       </div>
                       <div class="col-xs-12 col-sm-6">
                         <q-select
-                        hide-bottom-space
-                        :rules="[(val) => !!val || 'กรุณาเลือกสมรรถนะประจํากลุ่มงาน']"
+                          hide-bottom-space
+                          :rules="[
+                            (val) => !!val || 'กรุณาเลือกสมรรถนะประจํากลุ่มงาน',
+                          ]"
                           :options="OPgroup"
                           class="bg-white"
                           :readonly="routeName != 'probationWorkAdd'"
@@ -787,7 +836,7 @@
               </div>
               <div class="col-12 row q-gutter-md">
                 <q-card
-                  v-for="(item, index) in productivityCount"
+                  v-for="(item, index) in ProductivityArray"
                   flat
                   bordered
                   class="col-12 q-pa-sm bg-grey-1"
@@ -805,7 +854,7 @@
                         dense
                         borderless
                         :outlined="routeName == 'probationWorkAdd'"
-                        v-model="Productivitys[index]"
+                        v-model="output_desc[index]"
                         label="ผลผลิตของงานที่คาดหวัง (ไม่เกิน 10 บรรทัด)"
                       />
                     </div>
@@ -821,7 +870,7 @@
                         dense
                         borderless
                         :outlined="routeName == 'probationWorkAdd'"
-                        v-model="goals1[index]"
+                        v-model="indicator_desc[index]"
                         label="ตัวชี้วัดความสําเร็จของงาน (ไม่เกิน 10 บรรทัด)"
                       />
                     </div>
@@ -907,7 +956,7 @@
                         <q-input
                           dense
                           outlined
-                          v-model="Other"
+                          v-model="Other5"
                           label="กรอกอื่นๆ"
                         />
                       </li>
@@ -997,7 +1046,7 @@
                     dense
                     borderless
                     :outlined="routeName == 'probationWorkAdd'"
-                    v-model="name"
+                    v-model="fullnameFoot"
                     label="ชื่อ-สกุล"
                   />
                 </div>
@@ -1007,7 +1056,7 @@
                     dense
                     borderless
                     :outlined="routeName == 'probationWorkAdd'"
-                    v-model="position"
+                    v-model="positionFoot"
                     label="ตำแหน่ง"
                   />
                 </div>
@@ -1060,13 +1109,13 @@
               </div>
               <div class="col-12 row q-col-gutter-md">
                 <q-select
-                  :options="OPcaretaker1"
+                  :options="OPcaretaker"
                   class="col-xs-12 col-sm-8"
                   :readonly="routeName != 'probationWorkAdd'"
                   dense
                   borderless
                   :outlined="routeName == 'probationWorkAdd'"
-                  v-model="caretaker"
+                  v-model="caretakerFoot"
                   label="ผู้ดูแลคนที่ 1"
                 />
                 <div class="col-xs-12 col-sm-4">
@@ -1116,7 +1165,7 @@
                   dense
                   borderless
                   :outlined="routeName == 'probationWorkAdd'"
-                  v-model="caretaker2"
+                  v-model="caretakerFoot2"
                   label="ผู้ดูแลคนที่ 2"
                 />
                 <div class="col-xs-12 col-sm-4">
@@ -1169,7 +1218,7 @@
               </div>
               <div class="col-12 row q-col-gutter-md">
                 <q-select
-                  :options="OPcaretaker1"
+                  :options="OPcaretaker"
                   class="col-xs-12 col-sm-8"
                   :readonly="routeName != 'probationWorkAdd'"
                   dense
@@ -1239,7 +1288,6 @@ import { ref, computed, watch } from "vue";
 import { useCounterMixin } from "@/stores/mixin";
 import { useQuasar } from "quasar";
 
-
 const $q = useQuasar();
 const val1 = ref([
   {
@@ -1255,7 +1303,10 @@ const { date2Thai, notifyError } = mixin;
 
 const checkValidate = ref<boolean>(false);
 const myForm = ref<any>(null);
-
+const fullnameFoot = ref<string>("");
+const positionFoot = ref<string>("");
+const caretakerFoot = ref<string>("");
+const caretakerFoot2 = ref<string>("");
 const id = ref<number>();
 const personal_id = ref<string>();
 const fullname = ref<string>();
@@ -1266,6 +1317,7 @@ const date_finish = ref<Date | null>(null);
 const behavior_desc = ref<string>();
 const other_desc = ref<object>({});
 const other4_desc = ref<string>();
+const Other5 = ref<string>();
 const other5_no1_desc = ref<object>({});
 const other5_no2_desc = ref<object>({});
 const experimenter_dated = ref<Date>();
@@ -1299,9 +1351,9 @@ const OPcaretaker = [
 const monthOp = [{ value: "6", label: "6 เดือน" }];
 //-----------------(3.1)-----------//
 const activityCount = ref<number>(2);
+const activityDataArray = ref<any[]>([]);
 const activity_desc = ref<string[]>(Array(activityCount.value).fill(""));
 const goal_desc = ref<string[]>(Array(activityCount.value).fill(""));
-  const activityDataArray = ref<any[]>([]);
 const addActivity = () => {
   activityCount.value++;
 };
@@ -1321,6 +1373,7 @@ const resetActivity = () => {
   goal_desc.value = Array(activityCount.value).fill("");
 };
 //-----------------(3.2)-----------//
+
 const knowledgeCount = ref<number>(3);
 const knowledge = ref<string[]>(Array(knowledgeCount.value).fill(""));
 const OPknowledge = ["1", "2", "3", "4"];
@@ -1343,13 +1396,13 @@ const deleteknowledge = (item: number) => {
     knowledgeCount.value--;
   }
 };
-
+const checked = ref<boolean>(false);
 const productivityCount = ref<number>(1);
-const Productivitys = ref<string[]>(Array(productivityCount.value).fill(""));
-const goals1 = ref<string[]>(Array(productivityCount.value).fill(""));
+const output_desc = ref<string[]>(Array(productivityCount.value).fill(""));
+const indicator_desc = ref<string[]>(Array(productivityCount.value).fill(""));
 const deleteProductivitys = (item: number) => {
-  Productivitys.value.splice(item, 1);
-  goals1.value.splice(item, 1);
+  output_desc.value.splice(item, 1);
+  indicator_desc.value.splice(item, 1);
   if (productivityCount.value > 1) {
     productivityCount.value--;
   }
@@ -1357,7 +1410,313 @@ const deleteProductivitys = (item: number) => {
 const addProductivity = () => {
   productivityCount.value++;
 };
+const ProductivityArray = computed(() => {
+  return Array(productivityCount.value).fill("");
+});
 
+const checkRule = ref([
+  {
+    id: 1,
+    parent_id: 0,
+    description: "๑. รัฐธรรมนูญ",
+    status_select: 1,
+    active: 1,
+    createdAt: "2023-07-24T10:39:59.000Z",
+    updatedAt: "2023-07-24T10:39:59.000Z",
+    checked: false,
+  },
+  {
+    id: 2,
+    parent_id: 0,
+    description: "๒. กฎหมายปกครอง",
+    status_select: 0,
+    active: 1,
+    createdAt: "2023-07-24T10:39:59.000Z",
+    updatedAt: "2023-07-24T10:39:59.000Z",
+    checked: false,
+  },
+  {
+    id: 3,
+    parent_id: 2,
+    description: "๒.๑. ด้านการบริหารราชการ เช่น",
+    status_select: 0,
+    active: 1,
+    createdAt: "2023-07-24T10:39:59.000Z",
+    updatedAt: "2023-07-24T10:39:59.000Z",
+    checked: false,
+  },
+  {
+    id: 4,
+    parent_id: 3,
+    description: "๑) กฎหมายว่าด้วยระเบียบบริหารราชการกรุงเทพมหานคร",
+    status_select: 1,
+    active: 1,
+    createdAt: "2023-07-24T10:39:59.000Z",
+    updatedAt: "2023-07-24T10:39:59.000Z",
+    checked: false,
+  },
+  {
+    id: 5,
+    parent_id: 3,
+    description: "๒) กฎหมายว่าด้วยระเบียบบริหารราชการแผ่นดิน",
+    status_select: 1,
+    active: 1,
+    createdAt: "2023-07-24T10:39:59.000Z",
+    updatedAt: "2023-07-24T10:39:59.000Z",
+    checked: false,
+  },
+  {
+    id: 6,
+    parent_id: 3,
+    description: "๓) กฎหมายว่าด้วยลักษณะปกครองท้องที่",
+    status_select: 1,
+    active: 1,
+    createdAt: "2023-07-24T10:39:59.000Z",
+    updatedAt: "2023-07-24T10:39:59.000Z",
+    checked: false,
+  },
+  {
+    id: 7,
+    parent_id: 3,
+    description:
+      "๔) ระเบียบสำนักนายกรัฐมนตรี ว่าด้วยการรับฟังความคิดเห็นสาธารณะโดยวิธีประชาพิจารณ์พ.ศ.๒๕๓๙",
+    status_select: 1,
+    active: 1,
+    createdAt: "2023-07-24T10:39:59.000Z",
+    updatedAt: "2023-07-24T10:39:59.000Z",
+    checked: false,
+  },
+  {
+    id: 8,
+    parent_id: 3,
+    description:
+      "๕) ระเบียบสำนักนายกรัฐมนตรี ว่าด้วยการสร้างระบบบริหารกิจการบ้านเมืองและสังคมที่ดีพ.ศ.๒๕๔๒",
+    status_select: 1,
+    active: 1,
+    createdAt: "2023-07-24T10:40:00.000Z",
+    updatedAt: "2023-07-24T10:40:00.000Z",
+    checked: false,
+  },
+  {
+    id: 9,
+    parent_id: 3,
+    description:
+      "๖) พระราชกฤษฎีกาว่าด้วยหลักเกณฑ์และวิธีการบริหารกิจการบ้านเมืองที่ดี พ.ศ.๒๕๔๖",
+    status_select: 1,
+    active: 1,
+    createdAt: "2023-07-24T10:40:00.000Z",
+    updatedAt: "2023-07-24T10:40:00.000Z",
+    checked: false,  
+  },
+  {
+    id: 10,
+    parent_id: 2,
+    description: "๒.๒. ด้านการปฏิบัติราชการ เช่น",
+    status_select: 0,
+    active: 1,
+    createdAt: "2023-07-24T10:40:00.000Z",
+    updatedAt: "2023-07-24T10:40:00.000Z",
+    checked: false,
+  },
+  {
+    id: 11,
+    parent_id: 10,
+    description: "๑) ระเบียบกรุงเทพมหานครว่าด้วยวิธีปฏิบัติงานสารบรรณ พ.ศ.๒๕๔๖",
+    status_select: 1,
+    active: 1,
+    createdAt: "2023-07-24T10:40:00.000Z",
+    updatedAt: "2023-07-24T10:40:00.000Z",
+    checked: false,
+  },
+  {
+    id: 12,
+    parent_id: 10,
+    description: "๒) กฎหมายว่าด้วยวิธีปฏิบัติราชการทางปกครอง",
+    status_select: 1,
+    active: 1,
+    createdAt: "2023-07-24T10:40:00.000Z",
+    updatedAt: "2023-07-24T10:40:00.000Z",
+    checked: false,
+  },
+  {
+    id: 13,
+    parent_id: 10,
+    description: "๓) กฎหมายว่าด้วยความรับผิดทางละเมิดของเจ้าหน้าที่",
+    status_select: 1,
+    active: 1,
+    createdAt: "2023-07-24T10:40:00.000Z",
+    updatedAt: "2023-07-24T10:40:00.000Z",
+    checked: false,
+  },
+  {
+    id: 14,
+    parent_id: 10,
+    description: "๔) กฎหมายว่าด้วยการข้อมูลข่าวสารของทางราชการ",
+    status_select: 1,
+    active: 1,
+    createdAt: "2023-07-24T10:40:00.000Z",
+    updatedAt: "2023-07-24T10:40:00.000Z",
+    checked: false,
+  },
+  {
+    id: 15,
+    parent_id: 10,
+    description: "๕) ระเบียบสำนักนายกรัฐมนตรีว่าด้วยงานสารบรรณ พ.ศ.๒๕๒๖",
+    status_select: 1,
+    active: 1,
+    createdAt: "2023-07-24T10:40:00.000Z",
+    updatedAt: "2023-07-24T10:40:00.000Z",
+    checked: false,
+  },
+  {
+    id: 16,
+    parent_id: 10,
+    description: "๖) ระเบียบว่าด้วยการรักษาความลับของทางราชการ พ.ศ.๒๕๔๔",
+    status_select: 1,
+    active: 1,
+    createdAt: "2023-07-24T10:40:00.000Z",
+    updatedAt: "2023-07-24T10:40:00.000Z",
+    checked: false,
+  },
+  {
+    id: 17,
+    parent_id: 2,
+    description: "๒.๓ ด้านการบริหารทรัพยากรบุคคล เช่น",
+    status_select: 0,
+    active: 1,
+    createdAt: "2023-07-24T10:40:00.000Z",
+    updatedAt: "2023-07-24T10:40:00.000Z",
+    checked: false,
+  },
+  {
+    id: 18,
+    parent_id: 17,
+    description:
+      "๑) กฎหมายว่าด้วยระเบียบข้าราชการกรุงเทพมหานครและบุคลากรกรุงเทพมหานคร/กฎ ก.ก./หลักเกณฑ์ วิธีการ/มติ ก.ก. ที่เกี่ยวข้อง",
+    status_select: 1,
+    active: 1,
+    createdAt: "2023-07-24T10:40:00.000Z",
+    updatedAt: "2023-07-24T10:40:00.000Z",
+    checked: false,
+  },
+  {
+    id: 19,
+    parent_id: 17,
+    description:
+      "๒) กฎหมายว่าด้วยระเบียบข้าราชการพลเรือนและกฎ ก.พ. ที่เกี่ยวข้อง",
+    status_select: 1,
+    active: 1,
+    createdAt: "2023-07-24T10:40:00.000Z",
+    updatedAt: "2023-07-24T10:40:00.000Z",
+    checked: false,
+  },
+  {
+    id: 20,
+    parent_id: 2,
+    description: "๒.๔. ด้านการบริหารงบประมาณและการคลัง เช่น",
+    status_select: 0,
+    active: 1,
+    createdAt: "2023-07-24T10:40:00.000Z",
+    updatedAt: "2023-07-24T10:40:00.000Z",
+    checked: false,
+  },
+  {
+    id: 21,
+    parent_id: 20,
+    description:
+      "๑) ข้อบัญญัติกรุงเทพมหานคร เรื่อง วิธีการงบประมาณ พ.ศ.๒๕๒๙ ซึ่งแก้ไขเพิ่มเติมโดย(ฉบับที่๒)พ.ศ.๒๕๓๓ และ(ฉบับที่๓)พ.ศ.๒๕๓๖",
+    status_select: 1,
+    active: 1,
+    createdAt: "2023-07-24T10:40:00.000Z",
+    updatedAt: "2023-07-24T10:40:00.000Z",
+    checked: false,
+  },
+  {
+    id: 22,
+    parent_id: 20,
+    description:
+      "๒) ระเบียบกรุงเทพมหานครว่าด้วยการรับเงิน การเบิกจ่ายเงิน การเก็บรักษาเงิน การนำส่งเงินและการตรวจเงิน(ฉบับที่๘) พ.ศ.๒๕๔๔ (ฉบับที่๙)พ.ศ.๒๕๔๘",
+    status_select: 1,
+    active: 1,
+    createdAt: "2023-07-24T10:40:00.000Z",
+    updatedAt: "2023-07-24T10:40:00.000Z",
+    checked: false,
+  },
+  {
+    id: 23,
+    parent_id: 20,
+    description:
+      "๓) ระเบียบกรุงเทพมหานครว่าด้วยค่าใช้จ่ายในการฝึกอบรบ พ.ศ.๒๕๔๑",
+    status_select: 1,
+    active: 1,
+    createdAt: "2023-07-24T10:40:00.000Z",
+    updatedAt: "2023-07-24T10:40:00.000Z",
+    checked: false,
+  },
+  {
+    id: 24,
+    parent_id: 20,
+    description: "๔) พระราชบัญญัติวิธีการงบประมาณ พ.ศ.๒๕๐๒",
+    status_select: 1,
+    active: 1,
+    createdAt: "2023-07-24T10:40:00.000Z",
+    updatedAt: "2023-07-24T10:40:00.000Z",
+    checked: false,
+  },
+  {
+    id: 25,
+    parent_id: 20,
+    description:
+      "๕) ระเบียบคณะกรรมการการตรวจเงินแผ่นดินว่าด้วยวินัยทางงบประมาณและการคลัง พ.ศ.๒๕๔๔",
+    status_select: 1,
+    active: 1,
+    createdAt: "2023-07-24T10:40:00.000Z",
+    updatedAt: "2023-07-24T10:40:00.000Z",
+    checked: false,
+  },
+  {
+    id: 26,
+    parent_id: 20,
+    description: "๖) กฎหมายว่าด้วยความผิดเกี่ยวกับการเสนอราคาต่อหน่วยของรัฐ",
+    status_select: 1,
+    active: 1,
+    createdAt: "2023-07-24T10:40:00.000Z",
+    updatedAt: "2023-07-24T10:40:00.000Z",
+    checked: false,
+  },
+  {
+    id: 27,
+    parent_id: 20,
+    description:
+      "๗) พระราชกฤษฎีกาการจ่ายเงินเดือน เงินปี บำเหน็จ บำนาญ และเงินอื่นในลักษณะเดียวกัน พ.ศ.๒๕๓๕",
+    status_select: 1,
+    active: 1,
+    createdAt: "2023-07-24T10:40:00.000Z",
+    updatedAt: "2023-07-24T10:40:00.000Z",
+    checked: false,
+  },
+  {
+    id: 28,
+    parent_id: 20,
+    description: "๘) พระราชกฤษฎีกาค่าใช้จ่ายในการเดินทางไปราชการ พ.ศ.๒๕๒๖",
+    status_select: 1,
+    active: 1,
+    createdAt: "2023-07-24T10:40:00.000Z",
+    updatedAt: "2023-07-24T10:40:00.000Z",
+    checked: false,
+  },
+  {
+    id: 29,
+    parent_id: 20,
+    description:
+      "๙) ระเบียบกระทรวงการคลังว่าด้วยการเบิกจ่ายเบี้ยเลี้ยงเดินทาง และค่าเช่าที่พักในการเดินทางไปราชการ พ.ศ.๒๕๓๔ (ฉบับที่๙) พ.ศ.๒๕๔๔",
+    status_select: 1,
+    active: 1,
+    createdAt: "2023-07-24T10:40:00.000Z",
+    updatedAt: "2023-07-24T10:40:00.000Z",
+    checked: false,
+  },
+]);
 const checkList21 = ref([
   {
     id: 1,
@@ -1537,22 +1896,64 @@ interface CheckboxItem {
 // const caregiverRef1 = ref()
 // const caregiverRef2 = ref()
 
-// const workInfopRef = ref()
-const putData = () =>{
+const putData = () => {
+  const checkboxData: Record<string, CheckboxItem[]> = {
+    checkRule: checkRule.value.filter((item) => item.checked),
+  };
+
+  const assign_job = activityArray.value.map((item, index) => ({
+    id: index + 1,
+    activity_desc: activity_desc.value[index],
+    goal_desc: goal_desc.value[index],
+  }));
+  const know_ledge = knowledgeArray.value.map((item, index) => ({
+    id: index + 1,
+    knowledge: knowledge.value[index],
+  }));
+  const Productivity_assign = ProductivityArray.value.map((item, index) => ({
+    id: index + 1,
+    output_desc: output_desc.value[index],
+    indicator_desc: indicator_desc.value[index],
+  }));
   const data = {
-    fullname:fullname.value,
-    position:position.value,
-    monthSelect:monthSelect.value,
-    date_start:date_start.value,
-    date_finish:date_finish.value,
-    caretaker1:caretaker1.value,
-    caretaker2:caretaker2.value,
-    activity_desc:activity_desc.value,
-    goal_desc:goal_desc.value,
-    knowledge:knowledge.value,
-  }
-  console.log("test",data)
-}
+    fullname: fullname.value,
+    position: position.value,
+    monthSelect: monthSelect.value,
+    date_start: date_start.value,
+    date_finish: date_finish.value,
+    caretaker_1: caretaker1.value,
+    caretaker_2: caretaker2.value,
+    knowledge: know_ledge,
+    assign_job: assign_job,
+    otherlaw: OtherLaw.value,
+    skill: skill.value,
+    skill_2: skill2.value,
+    skill_3: skill3.value,
+    skill_4: skill4.value,
+    main: main.value,
+    main_2: main2.value,
+    main_3: main3.value,
+    main_4: main4.value,
+    main_5: main5.value,
+    group: group.value,
+    group_2: group2.value,
+    group_3: group3.value,
+    other: Other.value,
+    other_5: Other5.value,
+    productivity_assign: Productivity_assign,
+    commander: commander.value,
+    date_1: date1.value,
+    date_2: date2.value,
+    date_3: date3.value,
+    date_4: date4.value,
+    fullname_foot: fullnameFoot.value,
+    position_foot: positionFoot.value,
+    caretaker_foot: caretakerFoot.value,
+    caretaker_foot2: caretakerFoot2.value,
+    checkarray: checkboxData,
+  };
+  console.log("test", data);
+};
 
 const saveData = async () => {
   // myForm.value.resetValidation();
@@ -1565,7 +1966,6 @@ const saveData = async () => {
   // workInfopRef.value.validate();
   myForm.value.validate().then(async (result: boolean) => {
     if (result) {
-
       // แสดงข้อมูลใน Console
 
       $q.dialog({
@@ -1577,34 +1977,16 @@ const saveData = async () => {
         },
       })
         .onOk(async () => {
-          const checkboxData: Record<string, CheckboxItem[]> = {
-            val1: val1.value.filter((item) => item.checked),
-            checkList21: checkList21.value.filter((item) => item.checked),
-            checkList22: checkList22.value.filter((item) => item.checked),
-            checkList23: checkList23.value.filter((item) => item.checked),
-            checkList24: checkList24.value.filter((item) => item.checked),
-          };
-          console.log("3.2 ข้อมูลติ๊ก", checkboxData);
+          putData();
         })
         .onCancel(() => {})
         .onDismiss(() => {});
     } else {
-      putData()
-    // ลองดูlog
-      activityDataArray.value = activity_desc.value.map((activity, index) => ({
-        id: index + 1,
-        activity_desc: activity,
-        goal_desc: goal_desc.value[index],
-      }));
-      // showLoader();
-      console.log("activity_desc:", activity_desc.value);
-  console.log("goal_desc:", goal_desc.value);
-  console.log(activityDataArray.value);
-      // Validation ไม่ผ่าน
+      // ลอง
+      // putData();
       notifyError($q, "กรุณากรอกข้อมูลให้ครบ");
     }
   });
-  // สร้าง Object ที่เก็บข้อมูล Checkbox
 };
 const OtherLaw = ref<string>("");
 

From 7de96b1286f03548488a67ff391dc677e6efc910 Mon Sep 17 00:00:00 2001
From: waruneeta <warunee.auy@gmail.com>
Date: Fri, 4 Aug 2023 10:35:17 +0700
Subject: [PATCH 024/113] =?UTF-8?q?=E0=B8=A3=E0=B8=B0=E0=B8=9A=E0=B8=9A?=
 =?UTF-8?q?=E0=B8=97=E0=B8=94=E0=B8=A5=E0=B8=AD=E0=B8=87=E0=B8=87=E0=B8=B2?=
 =?UTF-8?q?=E0=B8=99=20change=20field?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../probation/FormEvaluation/FormEvaluate.vue | 12 +++++------
 .../FormEvaluation/FormEvaluateScore.vue      |  4 ++--
 .../FormEvaluation/FormSaveResult.vue         | 20 +++++++++----------
 3 files changed, 18 insertions(+), 18 deletions(-)

diff --git a/src/modules/05_placement/components/probation/FormEvaluation/FormEvaluate.vue b/src/modules/05_placement/components/probation/FormEvaluation/FormEvaluate.vue
index 54a5edc4c..e07a256f1 100644
--- a/src/modules/05_placement/components/probation/FormEvaluation/FormEvaluate.vue
+++ b/src/modules/05_placement/components/probation/FormEvaluation/FormEvaluate.vue
@@ -67,15 +67,15 @@ const learn_level = ref<number>(0);
 const apply_level = ref<number>(0);
 const success_level = ref<number>(0);
 const etc = ref<any>(false);
-const achievement_other = ref<any>([{ text: "", level: 0 }]);
+const achievement_other = ref<any>({ text: "", level: 0 });
 // part 2
 const conduct_level = ref<any>([]);
 const moral_level = ref<any>([]);
 const discipline_level = ref<any>([]);
 const etc2 = ref<any>(false); // checkBox 2.4
-const behavio_orther = ref<any>([{ text: "", level: 0 }]);
+const behavio_orther = ref<any>({ text: "", level: 0 });
 const behavio_strength_desc = ref<string>("");
-const behavio_inprove_desc = ref<string>("");
+const behavior_improve_desc = ref<string>("");
 // part 3
 const orientation = ref<num>(null);
 const self_learning = ref<any>(null);
@@ -106,7 +106,7 @@ const savaForm = () => {
     moral_level.value.length < 3 ||
     discipline_level.value.length < 5 ||
     behavio_strength_desc.value === "" ||
-    behavio_inprove_desc.value === "" ||
+    behavior_improve_desc.value === "" ||
     orientation.value === null ||
     self_learning.value === null ||
     training_seminar.value === null
@@ -154,7 +154,7 @@ const putformData = () => {
     discipline5_level: discipline_level.value[4],
     behavio_orther: behavio_orther.value,
     behavio_strength_desc: behavio_strength_desc.value,
-    behavio_inprove_desc: behavio_inprove_desc.value,
+    behavior_improve_desc: behavior_improve_desc.value,
     orientation: Number(orientation.value),
     self_learning: Number(self_learning.value),
     training_seminar: Number(training_seminar.value),
@@ -755,7 +755,7 @@ const putformData = () => {
           <q-input
             outlined
             dense
-            v-model="behavio_inprove_desc"
+            v-model="behavior_improve_desc"
             class="col-xs-12 col-sm-11 col-md-10 offset-md-1"
             lazy-rules
             type="textarea"
diff --git a/src/modules/05_placement/components/probation/FormEvaluation/FormEvaluateScore.vue b/src/modules/05_placement/components/probation/FormEvaluation/FormEvaluateScore.vue
index 1d30b7941..884167ab7 100644
--- a/src/modules/05_placement/components/probation/FormEvaluation/FormEvaluateScore.vue
+++ b/src/modules/05_placement/components/probation/FormEvaluation/FormEvaluateScore.vue
@@ -64,13 +64,13 @@ const learn_level = ref<number>(0);
 const apply_level = ref<number>(0);
 const success_level = ref<number>(0);
 const etc = ref<any>(false);
-const achievement_other = ref<any>([{ text: "", level: 0 }]);
+const achievement_other = ref<any>({ text: "", level: 0 });
 // part 2
 const conduct_level = ref<any>([]);
 const moral_level = ref<any>([]);
 const discipline_level = ref<any>([]);
 const etc2 = ref<any>(false); // checkBox 2.4
-const behavio_orther = ref<any>([{ text: "", level: 0 }]);
+const behavio_orther = ref<any>({ text: "", level: 0 });
 
 // part 3
 const orientation = ref<number>(null);
diff --git a/src/modules/05_placement/components/probation/FormEvaluation/FormSaveResult.vue b/src/modules/05_placement/components/probation/FormEvaluation/FormSaveResult.vue
index fd763594d..214477fe8 100644
--- a/src/modules/05_placement/components/probation/FormEvaluation/FormSaveResult.vue
+++ b/src/modules/05_placement/components/probation/FormEvaluation/FormSaveResult.vue
@@ -99,21 +99,21 @@ const learn_level = ref<number>(0);
 const apply_level = ref<number>(0);
 const success_level = ref<number>(0);
 const etc = ref<any>(false); // checkBox 1.8
-const achievement_other = ref<any>([{ text: "", level: 0 }]);
+const achievement_other = ref<any>({ text: "", level: 0 });
 // const etc_text = ref<string>("");
 // const ext_value = ref<number>(0);
 const achievement_strength_desc = ref<string>("");
-const achievement_inprove_desc = ref<string>("");
+const achievement_improve_desc = ref<string>("");
 // part 2
 const conduct_level = ref<any>([]);
 const moral_level = ref<any>([]);
 const discipline_level = ref<any>([]);
 const etc2 = ref<any>(false); // checkBox 2.4
-const behavio_orther = ref<any>([{ text: "", level: 0 }]);
+const behavio_orther = ref<any>({ text: "", level: 0 });
 // const etc_text2 = ref<string>("");
 // const ext_value2 = ref<number>(0);
 const behavio_strength_desc = ref<string>("");
-const behavio_inprove_desc = ref<string>("");
+const behavior_improve_desc = ref<string>("");
 // part 3
 const orientation = ref<nu>(null);
 const self_learning = ref<any>(null);
@@ -168,12 +168,12 @@ const savaForm = () => {
     apply_level.value === 0 ||
     success_level.value === 0 ||
     achievement_strength_desc.value === "" ||
-    achievement_inprove_desc.value === "" ||
+    achievement_improve_desc.value === "" ||
     conduct_level.value.length < 4 ||
     moral_level.value.length < 3 ||
     discipline_level.value.length < 5 ||
     behavio_strength_desc.value === "" ||
-    behavio_inprove_desc.value === "" ||
+    behavior_improve_desc.value === "" ||
     orientation.value === null ||
     self_learning.value === null ||
     training_seminar.value === null
@@ -212,7 +212,7 @@ const putformData = () => {
     // achievement_other_desc: etc_text.value,
     // achievement_other_level: ext_value.value,
     achievement_strength_desc: achievement_strength_desc.value,
-    achievement_inprove_desc: achievement_inprove_desc.value,
+    achievement_improve_desc: achievement_improve_desc.value,
     conduct1_level: conduct_level.value[0],
     conduct2_level: conduct_level.value[1],
     conduct3_level: conduct_level.value[2],
@@ -229,7 +229,7 @@ const putformData = () => {
     // behavio_orther_level: ext_value2.value,
     behavio_orther: behavio_orther.value,
     behavio_strength_desc: behavio_strength_desc.value,
-    behavio_inprove_desc: behavio_inprove_desc.value,
+    behavior_improve_desc: behavior_improve_desc.value,
     orientation: Number(orientation.value),
     self_learning: Number(self_learning.value),
     training_seminar: Number(training_seminar.value),
@@ -728,7 +728,7 @@ const putformData = () => {
         <q-input
           outlined
           dense
-          v-model="achievement_inprove_desc"
+          v-model="achievement_improve_desc"
           class="col-xs-12 col-sm-11 col-md-10 offset-md-1"
           lazy-rules
           type="textarea"
@@ -984,7 +984,7 @@ const putformData = () => {
           <q-input
             outlined
             dense
-            v-model="behavio_inprove_desc"
+            v-model="behavior_improve_desc"
             class="col-xs-12 col-sm-11 col-md-10 offset-md-1"
             lazy-rules
             type="textarea"

From fb3614d88f579cb2a75e7a13f9c0d40ee347fb0c Mon Sep 17 00:00:00 2001
From: waruneeta <warunee.auy@gmail.com>
Date: Fri, 4 Aug 2023 10:40:04 +0700
Subject: [PATCH 025/113] probation add api

---
 src/api/05_placement/api.probation.ts            | 14 ++++++++++++++
 src/api/index.ts                                 |  3 +++
 src/app.config.ts                                |  2 ++
 .../components/probation/MainProbation.vue       | 16 +++++++++++++---
 4 files changed, 32 insertions(+), 3 deletions(-)
 create mode 100644 src/api/05_placement/api.probation.ts

diff --git a/src/api/05_placement/api.probation.ts b/src/api/05_placement/api.probation.ts
new file mode 100644
index 000000000..351a6685a
--- /dev/null
+++ b/src/api/05_placement/api.probation.ts
@@ -0,0 +1,14 @@
+import env from "../index";
+const dataOptions = `${env.API_PROBATION_URI}/data-options`;
+const personal = `${env.API_PROBATION_URI}/personal`;
+
+export default {
+  competencyOptions: () => `${dataOptions}/competency`,
+  competencyGroupOptions: () => `${dataOptions}/competency-group`,
+  knowledgeOptions: () => `${dataOptions}/knowledge`,
+  skillOptions: () => `${dataOptions}/skill`,
+  lawOptions: () => `${dataOptions}/law`,
+
+  personalAdd: () => `${personal}/add`,
+  // clearPosition: (personalId:string) => `${placement}/position/clear/${personalId}`
+};
diff --git a/src/api/index.ts b/src/api/index.ts
index 4ca191632..660556e1d 100644
--- a/src/api/index.ts
+++ b/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: "http://192.168.1.151:7776/v1",
   },
   test: {
     API_URI: "http://localhost:5010/api/v1",
@@ -70,6 +71,7 @@ const API_RETIREMENT_URI = ref<string>(
   config.value[env.value].API_RETIREMENT_URI
 );
 const API_URI_ORG_TREE = ref<string>(config.value[env.value].API_URI_ORG_TREE);
+const API_PROBATION_URI = ref<string>(config.value[env.value].API_PROBATION_URI);
 
 export default {
   env: env.value,
@@ -84,4 +86,5 @@ export default {
   API_URI_ORG_TREE: API_URI_ORG_TREE.value,
   MEET_URI: MEET_URI.value,
   API_RETIREMENT_URI:API_RETIREMENT_URI.value,
+  API_PROBATION_URI: API_PROBATION_URI.value
 };
diff --git a/src/app.config.ts b/src/app.config.ts
index 5fe96eab7..ef0aa5f39 100644
--- a/src/app.config.ts
+++ b/src/app.config.ts
@@ -29,6 +29,7 @@ import report2 from "./api/recruiting/api.report2";
 
 /** API ระบบการบรรจุ แต่งตั้ง ย้าย โอน List */
 import placement from "./api/05_placement/api.placement";
+import probation from "./api/05_placement/api.probation";
 
 /** API ระบบการพ้นจากราชการ List */
 import retirement from "./api/06_retirement/api.retirement";
@@ -70,6 +71,7 @@ const API = {
   ...report2,
 
   ...placement,
+  ...probation,
   ...retirement,
   ...insignia,
 };
diff --git a/src/modules/05_placement/components/probation/MainProbation.vue b/src/modules/05_placement/components/probation/MainProbation.vue
index f28af5a48..8467377f8 100644
--- a/src/modules/05_placement/components/probation/MainProbation.vue
+++ b/src/modules/05_placement/components/probation/MainProbation.vue
@@ -513,10 +513,10 @@ const fecthOrganiz = async () => {
 const findlist = async (id: string) => {
   let data = [
     { criteriaType: "is_retire", criteriaValue: "false" },
-    { criteriaType: "is_probation", criteriaValue: "true" },
+    { criteriaType: "is_probation", criteriaValue: "false" },
   ];
   await http
-    .post(config.API.profileSearchNewOcIdType(id, "all"), {
+    .post(config.API.profileSearchNewOcIdType(id, "officer"), {
       criterias: data,
     })
     .then((res) => {
@@ -557,7 +557,17 @@ const clickAdd = (id: string) => {
     persistent: true,
   })
     .onOk(async () => {
-      console.log("เพิ่ม:", id);
+      const postData = {
+        personal_id: id,
+      }
+      console.log("postData:", postData);
+      await http
+    .post(config.API.personalAdd(), postData)
+    .then((res) => {
+      console.log("res:", res);
+      
+    });
+
     })
     .onCancel(() => {})
     .onDismiss(() => {});

From 92edcfb5338b39c1c0347f09908c3a92ad2cd44a Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Fri, 4 Aug 2023 12:07:24 +0700
Subject: [PATCH 026/113] list Order

---
 src/api/05_placement/api.placement.ts         |  11 +-
 .../OrderPlacement/MainOrderPlacement.vue     | 187 ++--
 .../OrderPlacement/detailOrderPlacement.vue   |  15 +-
 .../components/OrderPlacement/step/step01.vue | 943 ++++++++++--------
 src/modules/05_placement/router.ts            |  12 +-
 src/modules/05_placement/store.ts             |   2 +
 6 files changed, 658 insertions(+), 512 deletions(-)

diff --git a/src/api/05_placement/api.placement.ts b/src/api/05_placement/api.placement.ts
index 6be4c2dde..5ca86af6d 100644
--- a/src/api/05_placement/api.placement.ts
+++ b/src/api/05_placement/api.placement.ts
@@ -1,6 +1,7 @@
 import env from "../index";
 const placement = `${env.API_PLACEMENT_URI}/placement`;
 const orgTree = `${env.API_URI_ORG_TREE}`;
+const order = `${env.API_PLACEMENT_URI}`;
 
 export default {
   MainDetail: (year: number) => `${placement}/exam/${year}`,
@@ -47,7 +48,13 @@ export default {
   // position 
   placementPosition: () => `${placement}/position/use`,
   // putPositiom
-  putPosition: (id:any) => `${placement}/position/${id}`,
+  putPosition: (id: any) => `${placement}/position/${id}`,
   // clear Position
-  clearPosition: (personalId:string) => `${placement}/position/clear/${personalId}`
+  clearPosition: (personalId: string) => `${placement}/position/clear/${personalId}`,
+
+  // order
+  yearOptionsOrder: () => `${order}/order/fiscal-year`,
+  listOrder: () => `${order}/order`,
+  typeOrder: () => `${order}/order/order-type`,
+  examroundOrder: () => `${order}/order/detail/exam-round`,
 };
diff --git a/src/modules/05_placement/components/OrderPlacement/MainOrderPlacement.vue b/src/modules/05_placement/components/OrderPlacement/MainOrderPlacement.vue
index 6894b70cd..efc769971 100644
--- a/src/modules/05_placement/components/OrderPlacement/MainOrderPlacement.vue
+++ b/src/modules/05_placement/components/OrderPlacement/MainOrderPlacement.vue
@@ -97,7 +97,7 @@
                 map-options
                 option-label="name"
                 :options="OrderTypeOption"
-                option-value="id"
+                option-value="name"
                 lazy-rules
                 hide-bottom-space
                 :readonly="false"
@@ -115,7 +115,7 @@
                 map-options
                 option-label="name"
                 :options="OrderStatusOption"
-                option-value="id"
+                option-value="name"
                 lazy-rules
                 hide-bottom-space
                 :readonly="false"
@@ -153,54 +153,30 @@
               </q-tr>
             </template>
             <template v-slot:body="props">
-              <q-tr :props="props" class="cursor-pointer">
-                <q-td
-                  key="Order"
-                  :props="props"
-                  @click="redirectToPage(props.row.Order)"
-                >
+              <q-tr
+                :props="props"
+                class="cursor-pointer"
+                @click="redirectToPage(props.row.Order)"
+              >
+                <q-td key="Order" :props="props">
                   {{ props.row.Order }}
                 </q-td>
-                <q-td
-                  key="OrderNum"
-                  :props="props"
-                  @click="redirectToPage(props.row.Order)"
-                >
+                <q-td key="OrderNum" :props="props">
                   {{ props.row.OrderNum }}
                 </q-td>
-                <q-td
-                  key="OrderType"
-                  :props="props"
-                  @click="redirectToPage(props.row.OrderType)"
-                >
+                <q-td key="OrderType" :props="props">
                   {{ props.row.OrderType }}
                 </q-td>
-                <q-td
-                  key="OrderDate"
-                  :props="props"
-                  @click="redirectToPage(props.row.Order)"
-                >
+                <q-td key="OrderDate" :props="props">
                   {{ props.row.OrderDate }}
                 </q-td>
-                <q-td
-                  key="OrderBy"
-                  :props="props"
-                  @click="redirectToPage(props.row.Order)"
-                >
+                <q-td key="OrderBy" :props="props">
                   {{ props.row.OrderBy }}
                 </q-td>
-                <q-td
-                  key="Signer"
-                  :props="props"
-                  @click="redirectToPage(props.row.Order)"
-                >
+                <q-td key="Signer" :props="props">
                   {{ props.row.Signer }}
                 </q-td>
-                <q-td
-                  key="OrderStatus"
-                  :props="props"
-                  @click="redirectToPage(props.row.Order)"
-                >
+                <q-td key="OrderStatus" :props="props">
                   {{ props.row.OrderStatus }}
                 </q-td>
                 <q-td auto-width>
@@ -210,7 +186,7 @@
                     flat
                     round
                     color="red"
-                    @click="clickDelete(props.row.id)"
+                    @click.stop="clickDelete(props.row.id)"
                     icon="mdi-delete"
                   >
                     <q-tooltip>ลบข้อมูล</q-tooltip>
@@ -246,9 +222,16 @@ import { useCounterMixin } from "@/stores/mixin";
 import { useOrderPlacementDataStore } from "@/modules/05_placement/store";
 import router from "@/router";
 import { useQuasar } from "quasar";
+import http from "@/plugins/http";
+import config from "@/app.config";
 
 const $q = useQuasar(); //ใช้ noti quasar
+const mixin = useCounterMixin();
+const { showLoader, hideLoader, messageError, date2Thai, dateText } = mixin;
 const DataStore = useOrderPlacementDataStore();
+
+
+
 const pagination = ref({
   sortBy: "desc",
   descending: false,
@@ -256,9 +239,6 @@ const pagination = ref({
   rowsPerPage: 10,
 });
 
-const mixin = useCounterMixin();
-const { dateText } = mixin;
-
 // แปลงเวลา ค.ศ ให้เป็น พ.ศ
 const textDate = (value: Date) => {
   return dateText(value);
@@ -518,13 +498,12 @@ onMounted(async () => {
 
 const OriginalDataFetch = async () => {
   // API
-  // await http
-  //   .get(config.API.// ตัวอย่าง)
-  //   .then((res: any) => {
-  //   })
-  //   .catch((e: any) => {
-  //     messageError($q, e);
-  //   })
+  // await http.get(config.API.listOrder()).then((res: any) => {
+  //   console.log("list", res);
+  // });
+  // .catch((e: any) => {
+  //   messageError($q, e);
+  // })
   //   .finally(async () => {
   //   });
   await DataStore.DataMainOrder(rows.value);
@@ -533,9 +512,9 @@ const OriginalDataFetch = async () => {
 };
 
 // ดูรายการหน้าต่อไป
-const redirectToPage = (id?: number) => {
-  // router.push({ name: "placementDetail" });
-  router.push(`/placement/order/detail`);
+const redirectToPage = (id?: string) => {
+  console.log(id);
+  router.push(`/placement/order/detail/${id}`);
 };
 
 const clickDelete = (id: string) => {
@@ -572,7 +551,7 @@ const clickDelete = (id: string) => {
 // };
 
 const clickAdd = () => {
-  router.push({ name: "OrderplacementDetail" });
+  router.push({ name: "Orderplacementadd" });
 };
 
 // const viewDetail = (id: string, status: string) => {
@@ -588,6 +567,16 @@ const fiscalyear = ref<number | null>(0);
 const fiscalyearOP = reactive<DataOption[]>([{ id: 0, name: "ทั้งหมด" }]);
 const addedfiscalYearValues: number[] = [];
 const fiscalYearFilter = async () => {
+  await http.get(config.API.yearOptionsOrder()).then((res) => {
+    console.log(res);
+    const response = res.data.result;
+    fiscalyearOP.push(...response);
+    // const maxNumber = fiscalyearOP.reduce((max: any, e: any) => {
+    //   return e.id > max ? e.id : max;
+    // }, "");
+    // fiscalyear.value = maxNumber;
+    // console.log(fiscalyear.value);
+  });
   // API
   // await http
   //   .get(config.API.// ตัวอย่าง)
@@ -600,25 +589,37 @@ const fiscalYearFilter = async () => {
   //   })
   //   .finally(async () => {
   //   });
-  for (let data of OriginalData.value) {
-    const year = data.fiscalYear;
-    console.log(year);
+  // for (let data of OriginalData.value) {
+  //   console.log(OriginalData.value);
 
-    if (fiscalyear.value === null || year > fiscalyear.value) {
-      fiscalyear.value = year;
-    }
+  //   const year = data.fiscalYear;
+  //   console.log(year);
 
-    if (!addedfiscalYearValues.includes(year)) {
-      fiscalyearOP.push({ id: year, name: year.toString() });
-      addedfiscalYearValues.push(year);
-    }
-  }
+  //   if (fiscalyear.value === null || year > fiscalyear.value) {
+  //     fiscalyear.value = year;
+  //   }
+
+  //   if (!addedfiscalYearValues.includes(year)) {
+  //     fiscalyearOP.push({ id: year, name: year.toString() });
+  //     addedfiscalYearValues.push(year);
+  //   }
+  // }
 };
 
 const OrderType = ref<string>("");
 const OrderTypeOption = reactive<DataOption[]>([{ id: 0, name: "ทั้งหมด" }]);
 const addedOrderTypeValues: string[] = [];
 const OrderTypeFilter = async () => {
+  await http
+    .get(config.API.typeOrder())
+    .then((res) => {
+      console.log(res.data);
+      const response = res.data.result;
+      OrderTypeOption.push(...response);
+    })
+    .catch((e) => {
+      messageError($q, e);
+    });
   // API
   // await http
   //   .get(config.API.// ตัวอย่าง)
@@ -631,29 +632,29 @@ const OrderTypeFilter = async () => {
   //   })
   //   .finally(async () => {
   //   });
-  for (let data of OriginalData.value) {
-    const OrderTypeValue = data.OrderType;
-    console.log(OrderTypeValue);
+  // for (let data of OriginalData.value) {
+  //   const OrderTypeValue = data.OrderType;
+  //   console.log(OrderTypeValue);
 
-    // if (OrderTypeValue === null || OrderType > OrderTypeValue) {
-    //   OrderTypeValue = OrderType;
-    // }
-    if (!addedOrderTypeValues.includes(OrderTypeValue)) {
-      OrderTypeOption.push({
-        // id: OrderTypeValue ?? 0,
-        id: OrderTypeOption.length,
-        name: OrderTypeValue,
-      });
-      addedOrderTypeValues.push(OrderTypeValue);
-    }
-    // if (!addedOrderTypeValues.includes(OrderTypeValue)) {
-    //   OrderTypeOption.push({
-    //     id: OrderTypeValue,
-    //     name: OrderTypeValue.toString(),
-    //   });
-    //   addedOrderTypeValues.push(OrderTypeValue);
-    // }
-  }
+  // if (OrderTypeValue === null || OrderType > OrderTypeValue) {
+  //   OrderTypeValue = OrderType;
+  // }
+  // if (!addedOrderTypeValues.includes(OrderTypeValue)) {
+  //   OrderTypeOption.push({
+  //     // id: OrderTypeValue ?? 0,
+  //     id: OrderTypeOption.length,
+  //     name: OrderTypeValue,
+  //   });
+  //   addedOrderTypeValues.push(OrderTypeValue);
+  // }
+  // if (!addedOrderTypeValues.includes(OrderTypeValue)) {
+  //   OrderTypeOption.push({
+  //     id: OrderTypeValue,
+  //     name: OrderTypeValue.toString(),
+  //   });
+  //   addedOrderTypeValues.push(OrderTypeValue);
+  // }
+  // }
 };
 const OrderStatus = ref<string>("");
 const OrderStatusText = ref<FormOrderPlacementMainData[]>(
@@ -697,8 +698,12 @@ const OrderStatusFilter = async () => {
 };
 
 // เลือกปีงบประมาณตาม API
-const searchfiscalyear = () => {
-  console.log("Input value changed:", fiscalyear.value);
+const searchfiscalyear = async () => {
+  const yearNum = fiscalyear.value! + 543;
+
+  await DataStore.DataUpdateOrder(OrderType.value, OrderStatus.value, yearNum);
+  UpdataData.value = DataStore.DataMainUpdateOrder;
+
   // API
   // await http
   //   .get(config.API.// ตัวอย่าง)
@@ -722,6 +727,11 @@ const resetFilter = () => {
 const attrs = ref<any>(useAttrs());
 
 const searchFilterTable = async () => {
+  if (fiscalyear.value !== null && fiscalyear.value !== 0) {
+    fiscalyear.value += 543;
+  }
+  console.log(fiscalyear.value, OrderType.value, OrderStatus.value);
+
   // console.log('Input value changed:', examTime.value, examType.value, expiredAccount.value);
   await DataStore.DataUpdateOrder(
     OrderType.value,
@@ -729,6 +739,7 @@ const searchFilterTable = async () => {
     fiscalyear.value
   );
   UpdataData.value = DataStore.DataMainUpdateOrder;
+  console.log(UpdataData.value);
 };
 //   UpdataData.value = DataStore.DataMainUpdate;
 // console.log("Input value changed:", OrderStatus.value, OrderType.value);
diff --git a/src/modules/05_placement/components/OrderPlacement/detailOrderPlacement.vue b/src/modules/05_placement/components/OrderPlacement/detailOrderPlacement.vue
index 790db1c27..6c17f39fd 100644
--- a/src/modules/05_placement/components/OrderPlacement/detailOrderPlacement.vue
+++ b/src/modules/05_placement/components/OrderPlacement/detailOrderPlacement.vue
@@ -8,7 +8,7 @@
       flat
       color="primary"
       class="q-mr-sm"
-      @click="router.go(-1)"
+      @click="router.go(-1), destroyLocalStorage()"
     />
     ออกคำสั่ง
   </div>
@@ -61,7 +61,7 @@
 </template>
 <script setup lang="ts">
 import { useRouter } from "vue-router";
-import { ref, defineAsyncComponent } from "vue";
+import { ref, defineAsyncComponent, onMounted } from "vue";
 import type { QStepper } from "quasar";
 
 const step01 = defineAsyncComponent(
@@ -87,11 +87,22 @@ const stepper = ref<QStepper>();
 
 const nextStep = () => {
   stepper.value!.next();
+  localStorage.setItem("currentStep", step.value.toString());
 };
 
 const previousStep = () => {
   stepper.value!.previous();
+  localStorage.setItem("currentStep", step.value.toString());
 };
+const destroyLocalStorage = () => {
+  localStorage.clear();
+};
+onMounted(() => {
+  const currentStep = localStorage.getItem("currentStep");
+  if (currentStep) {
+    step.value = Number(currentStep);
+  }
+});
 </script>
 <style>
 .q-stepper--horizontal .q-stepper__step-inner {
diff --git a/src/modules/05_placement/components/OrderPlacement/step/step01.vue b/src/modules/05_placement/components/OrderPlacement/step/step01.vue
index b9d1489f8..250093399 100644
--- a/src/modules/05_placement/components/OrderPlacement/step/step01.vue
+++ b/src/modules/05_placement/components/OrderPlacement/step/step01.vue
@@ -1,394 +1,398 @@
 <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 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">
-            <!-- :readonly="!edit"
+        <div class="col-xs-12 col-md-6">
+          <!-- :readonly="!edit"
                 :borderless="!edit" -->
+          <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="nameOrder"
-              :rules="[(val) => !!val || `${'กรุณากรอกคำสั่งเรื่อง'}`]"
-              :label="`${'คำสั่งเรื่อง'}`"
+              v-model="command"
+              :rules="[(val) => !!val || `${'กรุณากรอกคำสั่ง'}`]"
+              :label="`${'คำสั่ง'}`"
               @update:modelValue="clickEditRow"
               hide-bottom-space
+              type="number"
             />
           </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">
+          <label class="col-1 flex justify-center items-center text-bold"
+            >/</label
+          >
+          <div class="col-5">
             <datepicker
-              menu-class-name="modalfix"
-              v-model="dateCommand"
+              v-model="dateYear"
               :locale="'th'"
               autoApply
-              borderless
+              year-picker
               :enableTimePicker="false"
-              week-start="0"
+              @update:modelValue="clickEditRow"
             >
-              <template #year="{ year }">
-                {{ year + 543 }}
-              </template>
-              <template #year-overlay-value="{ value }">
-                {{ parseInt(value + 543) }}
-              </template>
+              <template #year="{ year }">{{ year + 543 }}</template>
+              <template #year-overlay-value="{ value }">{{
+                parseInt(value + 543)
+              }}</template>
               <template #trigger>
                 <q-input
-                  outlined
+                  :model-value="dateYear + 543"
+                  :rules="[(val) => !!val || `${'กรุณากรอก พ.ศ.'}`]"
+                  :label="`${'พ.ศ.'}`"
                   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 class="col-xs-12 col-md-6">
-            <selector
-              :class="getClass(true)"
-              outlined
-              dense
-              lazy-rules
-              v-model="position"
-              :rules="[(val:string) => !!val || `${'กรุณาเลือกตำแหน่งรับสมัคร'}`]"
-              hide-bottom-space
-              :label="`${'ตำแหน่งรับสมัคร'}`"
-              @update:modelValue="clickEditRow"
-              emit-value
-              map-options
-              option-label="name"
-              :options="positionOption"
-              option-value="id"
-              use-input
-              input-debounce="0"
-              @filter="(inputValue:string,
-                      doneFn:Function) => filterSelector(inputValue, doneFn,'positionOption'
-                      ) "
-            />
-          </div>
-          <div class="col-xs-12 col-md-6">
-            <selector
-              :class="getClass(true)"
-              outlined
-              dense
-              lazy-rules
-              v-model="register"
-              :rules="[(val:string) => !!val || `${'กรุณาเลือกมติ กก. ครั้งที่ (เรื่อง รับสมัครสอบฯ)'}`]"
-              hide-bottom-space
-              :label="`${'มติ กก. ครั้งที่ (เรื่อง รับสมัครสอบฯ)'}`"
-              @update:modelValue="clickEditRow"
-              emit-value
-              map-options
-              option-label="name"
-              :options="registerOption"
-              option-value="id"
-              use-input
-              input-debounce="0"
-              @filter="(inputValue:string,
-                      doneFn:Function) => filterSelector(inputValue, doneFn,'registerOption'
-                      ) "
-            />
-          </div>
-
-          <div class="col-xs-12 col-md-6">
-            <datepicker
-              menu-class-name="modalfix"
-              v-model="dateRegister"
-              :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="
-                    dateRegister != null ? date2Thai(dateRegister) : 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="announce"
-              :rules="[(val:string) => !!val || `${'กรุณาเลือกมติ กก. ครั้งที่ (เรื่อง ผลการสอบแข่งขัน)'}`]"
-              hide-bottom-space
-              :label="`${'มติ กก. ครั้งที่ (เรื่อง ผลการสอบแข่งขัน)'}`"
-              @update:modelValue="clickEditRow"
-              emit-value
-              map-options
-              option-label="name"
-              :options="announceOption"
-              option-value="id"
-              use-input
-              input-debounce="0"
-              @filter="(inputValue:string,
-                      doneFn:Function) => filterSelector(inputValue, doneFn,'announceOption'
-                      ) "
-            />
-          </div>
-          <div class="col-xs-12 col-md-6">
-            <datepicker
-              menu-class-name="modalfix"
-              v-model="dateAnnounce"
-              :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="
-                    dateAnnounce != null ? date2Thai(dateAnnounce) : 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>
-      </q-form>
-    </div>
-    <q-separator />
-    <div class="flex justify-end q-pa-sm q-gutter-sm">
-      <q-btn unelevated label="บันทึก" color="public" @click="submit"
-        ><!-- icon="mdi-content-save-outline"
-        <q-tooltip>บันทึก</q-tooltip> -->
-      </q-btn>
-      <!-- <q-btn flat round color="primary" icon="chevron_left" @click="previous">
+        <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="examRound"
+            :rules="[(val:string) => !!val || `${'กรุณาเลือกรอบการสอบ'}`]"
+            hide-bottom-space
+            :label="`${'รอบการสอบ'}`"
+            @update:modelValue="clickEditRow"
+            emit-value
+            map-options
+            option-label="examRoundName"
+            :options="examRoundOption"
+            option-value="examRoundValue"
+            use-input
+            input-debounce="0"
+          />
+          <!-- @filter="(inputValue:string,
+          doneFn:Function) => filterSelector(inputValue, doneFn,'testOption'
+          ) " -->
+        </div>
+        <div class="col-xs-12 col-md-6">
+          <selector
+            :class="getClass(true)"
+            outlined
+            dense
+            lazy-rules
+            v-model="position"
+            :rules="[(val:string) => !!val || `${'กรุณาเลือกตำแหน่งรับสมัคร'}`]"
+            hide-bottom-space
+            :label="`${'ตำแหน่งรับสมัคร'}`"
+            @update:modelValue="clickEditRow"
+            emit-value
+            map-options
+            option-label="name"
+            :options="positionOption"
+            option-value="id"
+            use-input
+            input-debounce="0"
+          />
+          <!-- @filter="(inputValue:string, doneFn:Function) =>
+          filterSelector(inputValue, doneFn,'positionOption' ) " -->
+        </div>
+        <div class="col-xs-12 col-md-6">
+          <selector
+            :class="getClass(true)"
+            outlined
+            dense
+            lazy-rules
+            v-model="register"
+            :rules="[(val:string) => !!val || `${'กรุณาเลือกมติ กก. ครั้งที่ (เรื่อง รับสมัครสอบฯ)'}`]"
+            hide-bottom-space
+            :label="`${'มติ กก. ครั้งที่ (เรื่อง รับสมัครสอบฯ)'}`"
+            @update:modelValue="clickEditRow"
+            emit-value
+            map-options
+            option-label="name"
+            :options="registerOption"
+            option-value="id"
+            use-input
+            input-debounce="0"
+          />
+        </div>
+        <!-- @filter="(inputValue:string,
+        doneFn:Function) => filterSelector(inputValue, doneFn,'registerOption'
+        ) " -->
+
+        <div class="col-xs-12 col-md-6">
+          <datepicker
+            menu-class-name="modalfix"
+            v-model="dateRegister"
+            :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="
+                  dateRegister != null ? date2Thai(dateRegister) : 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="announce"
+            :rules="[(val:string) => !!val || `${'กรุณาเลือกมติ กก. ครั้งที่ (เรื่อง ผลการสอบแข่งขัน)'}`]"
+            hide-bottom-space
+            :label="`${'มติ กก. ครั้งที่ (เรื่อง ผลการสอบแข่งขัน)'}`"
+            @update:modelValue="clickEditRow"
+            emit-value
+            map-options
+            option-label="name"
+            :options="announceOption"
+            option-value="id"
+            use-input
+            input-debounce="0"
+          />
+          <!-- @filter="(inputValue:string,
+          doneFn:Function) => filterSelector(inputValue, doneFn,'announceOption'
+          ) "  -->
+        </div>
+        <div class="col-xs-12 col-md-6">
+          <datepicker
+            menu-class-name="modalfix"
+            v-model="dateAnnounce"
+            :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="
+                  dateAnnounce != null ? date2Thai(dateAnnounce) : 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>
+    </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-tooltip>บันทึก</q-tooltip>
+    </q-btn>
+    <!-- <q-btn flat round color="primary" icon="chevron_left" @click="previous">
         <q-tooltip>ย้อนกลับ</q-tooltip>
       </q-btn> -->
-      <!-- <q-btn flat round color="primary" icon="chevron_right" @click="next">
+    <!-- <q-btn flat round color="primary" icon="chevron_right" @click="next">
         <q-tooltip>ต่อไป</q-tooltip>
       </q-btn> -->
-    </div>
+  </div>
 </template>
 <script setup lang="ts">
-import { ref } from "vue";
-import type { DataOption } from "@/modules/05_placement/interface/index/Main";
+import { ref, onMounted } from "vue";
+import type {
+  DataOption1,
+  DataOption,
+} from "@/modules/05_placement/interface/index/Main";
 import { useCounterMixin } from "@/stores/mixin";
 import type { QForm } from "quasar";
+import http from "@/plugins/http";
+import { useQuasar } from "quasar";
+import config from "@/app.config";
+import { useRoute } from "vue-router";
 
 const mixin = useCounterMixin();
-const { date2Thai } = mixin;
+const { date2Thai, messageError, showLoader, hideLoader } = mixin;
+const $q = useQuasar(); //ใช้ noti quasar
+const route = useRoute();
 
 const props = defineProps({
   next: {
@@ -402,6 +406,7 @@ const props = defineProps({
 });
 const next = () => props.next();
 const previous = () => props.previous();
+const orderId = route.params.orderid;
 
 const myForm = ref<QForm>();
 
@@ -411,98 +416,198 @@ const nameOrder = ref<string>("");
 const nameCommand = ref<string>("");
 const positionCommand = ref<string>("");
 const dateYear = ref<number>(new Date().getFullYear());
-const command = ref<string>("");
+const command = ref<number>();
 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 typeOrder = ref<number>();
+const typeOrderOption = ref<DataOption1[]>([
+  { name: "คำสั่งที่ 1", id: "3fa85f64-5717-4562-b3fc-2c963f66afa6" },
+]);
+const typeOrderOptionFilter = ref<DataOption1[]>([]);
 
 const byOrder = ref<string>("");
-const byOrderOption = ref<DataOption[]>([]);
-const byOrderOptionFilter = ref<DataOption[]>([]);
+const byOrderOption = ref<DataOption1[]>([
+  { name: "นายคำสั่งที่ 1", id: "3fa85f64-5717-4562-b3fc-2c963f66afa6" },
+]);
+const byOrderOptionFilter = ref<DataOption1[]>([]);
 
 const register = ref<string>("");
-const registerOption = ref<DataOption[]>([]);
+const registerOption = ref<DataOption1[]>([
+  { name: "ครั้งที่ 1", id: "3fa85f64-5717-4562-b3fc-2c963f66afa6" },
+]);
 const registerOptionFilter = ref<DataOption[]>([]);
 
 const announce = ref<string>("");
-const announceOption = ref<DataOption[]>([]);
+const announceOption = ref<DataOption1[]>([
+  { name: "ครั้งที่ 1", id: "3fa85f64-5717-4562-b3fc-2c963f66afa6" },
+]);
 const announceOptionFilter = ref<DataOption[]>([]);
 
 const position = ref<string>("");
-const positionOption = ref<DataOption[]>([]);
+const positionOption = ref<DataOption1[]>([
+  { name: "นายก", id: "3fa85f64-5717-4562-b3fc-2c963f66afa6" },
+]);
 const positionOptionFilter = ref<DataOption[]>([]);
 
-const test = ref<string>("");
-const testOption = ref<DataOption[]>([]);
+const examRound = ref<string>("");
+const examRoundOption = ref<DataOption1[]>([]);
 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;
+// 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 "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 "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;
+//     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;
+//   }
+// };
+onMounted(async () => {
+  if (orderId) {
+    await fetchdetailOrder();
   }
-};
+  fecthTypeOption();
+  fecthExamRoundOption();
 
+  // const data = localStorage.getItem("formData");
+  // if (data) {
+  //   const parsedData = JSON.parse(data);
+  //   typeOrder.value = parsedData.orderTypeValue;
+  //   nameOrder.value = parsedData.orderTitle;
+  //   command.value = parsedData.orderNo;
+  //   dateYear.value = parsedData.orderYear;
+  //   dateCommand.value = parsedData.orderDate;
+  //   byOrder.value = parsedData.orderBy;
+  //   nameCommand.value = parsedData.signatoryBy;
+  //   positionCommand.value = parsedData.signatoryPosition;
+  //   test.value = parsedData.examRound;
+  //   position.value = parsedData.registerPosition;
+  //   register.value = parsedData.conclusionRegisterNo;
+  //   dateRegister.value = parsedData.conclusionRegisterDate;
+  //   announce.value = parsedData.conclusionResultNo;
+  //   dateAnnounce.value = parsedData.conclusionResultDate;
+  // }
+});
+const fetchdetailOrder = async () => {
+  showLoader();
+  console.log(orderId);
+};
+const fecthTypeOption = async () => {
+  await http
+    .get(config.API.typeOrder())
+    .then((res) => {
+      typeOrderOption.value = res.data.result;
+    })
+    .catch((e) => {
+      messageError($q, e);
+    });
+};
+const fecthExamRoundOption = async () => {
+  await http
+    .get(config.API.examroundOrder())
+    .then((res) => {
+      examRoundOption.value = res.data.result;
+      console.log(examRoundOption.value);
+    })
+    .catch((e) => {});
+};
 const submit = async () => {
-  next();
-  //   await myForm.value!.validate().then((result: boolean) => {
-  //     if (result) {
-  //       next();
-  //     }
-  //   });
+  const formdata = {
+    orderTypeValue: typeOrder.value,
+    orderTitle: nameOrder.value,
+    orderNo: Number(command.value),
+    orderYear: dateYear.value,
+    orderDate: dateCommand.value,
+    orderBy: byOrder.value,
+    signatoryBy: nameCommand.value,
+    signatoryPosition: positionCommand.value,
+    examRound: test.value,
+    registerPosition: position.value,
+    conclusionRegisterNo: register.value,
+    conclusionRegisterDate: dateRegister.value,
+    conclusionResultNo: announce.value.toString(),
+    conclusionResultDate: dateAnnounce.value,
+  };
+  await myForm.value!.validate().then((result: boolean) => {
+    if (result) {
+      $q.dialog({
+        title: "ยืนยันการบันทึกข้อมูล",
+        message: "ต้องการบันทึกข้อมูลนี้ใช่หรือไม่?",
+        cancel: {
+          flat: true,
+          color: "negative",
+        },
+        persistent: true,
+      }).onOk(async () => {
+        showLoader();
+        // localStorage.setItem("formData", JSON.stringify(formdata));
+        createListOrder(formdata);
+        // next();
+      });
+    }
+  });
+};
+const createListOrder = async (formData: Object) => {
+  console.log(formData);
+  await http
+    .post(config.API.listOrder(), formData)
+    .then((res) => {
+      console.log(res);
+      next();
+    })
+    .catch((e) => {
+      console.log(e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
 };
-
 /**
  * class จัดรูปแบบแสดงระหว่างข้อมูลที่แก้ไขหรือแสดงเฉยๆ
  * @param val ข้อมูล input สำหรับแก้ไขหรือไม่
diff --git a/src/modules/05_placement/router.ts b/src/modules/05_placement/router.ts
index 93d3af33f..b0ed8b479 100644
--- a/src/modules/05_placement/router.ts
+++ b/src/modules/05_placement/router.ts
@@ -92,7 +92,17 @@ export default [
     },
   },
   {
-    path: "/placement/order/detail",
+    path: "/placement/order/add",
+    name: "Orderplacementadd",
+    component: detailOrderReplace,
+    meta: {
+      Auth: true,
+      Key: [6.9],
+      Role: "placement",
+    },
+  },
+  {
+    path: "/placement/order/detail/:orderid",
     name: "OrderplacementDetail",
     component: detailOrderReplace,
     meta: {
diff --git a/src/modules/05_placement/store.ts b/src/modules/05_placement/store.ts
index 29f73c9b7..283530593 100644
--- a/src/modules/05_placement/store.ts
+++ b/src/modules/05_placement/store.ts
@@ -229,6 +229,8 @@ export const useOrderPlacementDataStore = defineStore("placementOrder", () => {
   ) => {
     DataMainUpdateOrder.value = [];
 
+
+
     if (filter_1 === "" && filter_2 === "" && filterYear === 0) {
       DataMainUpdateOrder.value = DataMainOrigOrder.value;
     } else if (filter_1 !== "" && filter_2 === "" && filterYear === 0) {

From c53e6b535905edb58c23b0cfe002f336e5cbc0c1 Mon Sep 17 00:00:00 2001
From: Thanit Konmek <thanit@frappet.com>
Date: Fri, 4 Aug 2023 12:29:38 +0700
Subject: [PATCH 027/113] =?UTF-8?q?=E0=B9=81=E0=B8=81=E0=B9=89=E0=B9=84?=
 =?UTF-8?q?=E0=B8=82=20=E0=B8=9A=E0=B8=B1=E0=B8=84=20store=20,=20=E0=B8=9B?=
 =?UTF-8?q?=E0=B8=A3=E0=B8=B1=E0=B8=9A=20component=20=E0=B8=A3=E0=B8=B9?=
 =?UTF-8?q?=E0=B8=9B=E0=B8=A0=E0=B8=B2=E0=B8=9E?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/information/Image.vue          | 160 ++++++++++++++----
 .../02_organizational/views/ManageReport2.vue |  14 +-
 src/modules/04_registry/views/Main.vue        |  15 +-
 .../components/Receive/receiveDetail.vue      |  10 +-
 .../components/Receive/receiveMain.vue        |  43 ++---
 5 files changed, 160 insertions(+), 82 deletions(-)

diff --git a/src/components/information/Image.vue b/src/components/information/Image.vue
index 30efcc2a7..5291f27b8 100644
--- a/src/components/information/Image.vue
+++ b/src/components/information/Image.vue
@@ -66,9 +66,9 @@
       <div class="row items-center text-dark q-ml-md">
         <div class="column">
           <div class="text-bold q-pb-xs text-name">
-            {{ props.fullName }}
+            {{ fullname }}
           </div>
-          <div>{{ props.position }}</div>
+          <div>{{ position }}</div>
         </div>
       </div>
       <q-space />
@@ -164,22 +164,14 @@
   </q-dialog>
 </template>
 <script setup lang="ts">
-import { ref } from "vue";
+import { ref, onMounted } from "vue";
 import { useRoute, useRouter } from "vue-router";
 import { useCounterMixin } from "@/stores/mixin";
 import { useQuasar } from "quasar";
+import http from "@/plugins/http";
+import config from "@/app.config";
 
 const props = defineProps({
-  fullName: {
-    type: String,
-    default: "ชื่อ สกุล",
-    required: true,
-  },
-  position: {
-    type: String,
-    default: "ตำแหน่ง",
-    required: true,
-  },
   fetchData: {
     type: Function,
     default: () => console.log("not function"),
@@ -200,15 +192,33 @@ const props = defineProps({
 
 const $q = useQuasar();
 const mixin = useCounterMixin();
-const { date2Thai, dateToISO, messageError, dialogMessage, success } = mixin;
+const {
+  date2Thai,
+  dateToISO,
+  messageError,
+  dialogMessage,
+  success,
+  showLoader,
+  hideLoader,
+} = mixin;
 
+const route = useRoute();
 const router = useRouter();
+
+const fullname = ref<string>("");
+const position = ref<string>("");
+
 const imageUrl = ref<any>(null);
 const inputImage = ref<any>(null);
-const dialogImage = ref<boolean>(false);
-const images = ref<any>([]);
 const activeImage = ref<any | null>(null);
-const profileId = ref<string>("");
+
+const dialogImage = ref<boolean>(false);
+
+const images = ref<any>([]);
+
+onMounted(async () => {
+  await fetchData();
+});
 
 const closeImage = () => {
   dialogImage.value = false;
@@ -218,7 +228,7 @@ const clickImage = async () => {
   // ***************************************************************************************************
   //                  ****************** fetch data รูปภาพทั้งหมด ******************
   // ***************************************************************************************************
-
+  await fetchAvatarHistory();
   dialogImage.value = true;
 };
 
@@ -227,14 +237,18 @@ const uploadImage = async (e: any) => {
   if (input.length > 0) {
     const formData = new FormData();
     formData.append("FileData", input[0]);
-    await props.fetchUpload(profileId.value, formData).then(async () => {
-      await props.fetchData();
-      closeImage();
-    });
-    // ***************************************************************************************************
-    //          ****************** ต้องทำ function props รับ formData กลับ ******************
-    //     ****************** finally ทำการ fetch data,dialogImage.value = false ******************
-    // ***************************************************************************************************
+    showLoader();
+    await http
+      .post(config.API.profileAvatarId(route.params.id.toString()), formData)
+      .then((res) => {})
+      .catch((e) => {
+        messageError($q, e);
+      })
+      .finally(async () => {
+        await fetchData();
+        dialogImage.value = false;
+      });
+    return;
   }
 };
 
@@ -253,7 +267,20 @@ const selectAvatarHistory = async () => {
     );
     return;
   }
-  await props.fetchSave(profileId.value);
+  showLoader();
+  await http
+    .put(config.API.profileAvatarId(route.params.id.toString()), {
+      avatar: activeImage.value.avatarId,
+    })
+    .then((res) => {
+      dialogImage.value = false;
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(async () => {
+      await fetchData();
+    });
   // ***************************************************************************************************
   //                 ****************** fetch data เปลี่ยนรูปภาพ ส่ง ID กลับ******************
   // ***************************************************************************************************
@@ -283,14 +310,77 @@ const deletePhoto = async (id: string) => {
 };
 
 const fetchDataDelete = async (id: string) => {
-  await props.fetchDelete(id).then(async () => {
-    await props.fetchData();
-    await clickImage();
-  });
-  // ***************************************************************************************************
-  //                  ****************** fetch delete รูปภาพ ******************
-  //          ****************** finally ทำการ fetch data,clickImage() ******************
-  // ***************************************************************************************************
+  showLoader();
+  await http
+    .delete(config.API.profileAvatarHistoryId(id))
+    .then((res) => {
+      success($q, "ลบรูปภาพสำเร็จ");
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(async () => {
+      await fetchData();
+      await clickImage();
+      //   dialogImage.value = false;
+    });
+};
+
+const fetchData = async () => {
+  showLoader();
+  await http
+    .get(config.API.profileAvatarId(route.params.id.toString()))
+    .then((res) => {
+      const data = res.data.result;
+      //   console.log(data);
+      fullname.value = data.fullname;
+      imageUrl.value = data.avatar;
+      position.value = data.position;
+      //   profileType.value = data.profileType;
+      //   employeeClass.value =
+      //     data.employeeClass == null ? "" : data.employeeClass;
+      //   const reason = reasonOptions.value.filter(
+      //     (r: DataOption) => r.id == data.leaveReason
+      //   );
+      //   if (reason.length > 0) {
+      //     leaveReason.value = ` (พ้นจากราชการด้วยสาเหตุ: ${reason[0].name})`;
+      //   } else {
+      //     leaveReason.value = "";
+      //   }
+      //   reasonStatus.value = reason.length > 0 ? true : false;
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+};
+
+const fetchAvatarHistory = async () => {
+  showLoader();
+  await http
+    .get(config.API.profileAvatarHistoryId(route.params.id.toString()))
+    .then((res) => {
+      const data = res.data.result;
+      console.log(data);
+      images.value = [];
+      data.map((e: any) => {
+        images.value.push({
+          id: e.id,
+          avatar: e.avatar,
+          avatarId: e.avatarId,
+          createdDate: new Date(e.createdDate),
+          isActive: e.isActive,
+        });
+      });
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
 };
 
 const imageClass = (n: any) => {
diff --git a/src/modules/02_organizational/views/ManageReport2.vue b/src/modules/02_organizational/views/ManageReport2.vue
index c8a146dc6..40e8c4190 100644
--- a/src/modules/02_organizational/views/ManageReport2.vue
+++ b/src/modules/02_organizational/views/ManageReport2.vue
@@ -115,11 +115,14 @@ import http from "@/plugins/http";
 import config from "@/app.config";
 import type { treeTab } from "@/modules/04_registry/interface/index/Main";
 import type { ResponseTree } from "@/modules/02_organizational/interface/response/Mapping";
+import { useDataStore } from "@/stores/data";
 
+const dataStore = useDataStore();
 const $q = useQuasar(); // show dialog
 const mixin = useCounterMixin();
 const router = useRouter();
 const route = useRoute();
+const { selectedReport2, expandedReport2, changeTreeReport2 } = dataStore;
 const { date2Thai, success, dateToISO, modalError, showLoader, hideLoader } =
   mixin;
 const filter = ref<string>(""); //search data table
@@ -279,14 +282,9 @@ const nodeTree = async () => {
       const data = res.data.result;
       nodesTree.value = data;
       if (data.length > 0) {
-        selected.value =
-          dataStore.selectedReport2 == ""
-            ? data[0].id
-            : dataStore.selectedReport2;
+        selected.value = selectedReport2 == "" ? data[0].id : selectedReport2;
         expanded.value =
-          dataStore.expandedReport2.length == 0
-            ? [data[0].id]
-            : dataStore.expandedReport2;
+          expandedReport2.length == 0 ? [data[0].id] : expandedReport2;
       }
     })
     .catch((e: any) => {})
@@ -301,7 +299,7 @@ const onSelected = async (id: string) => {
 };
 
 const clickTree = () => {
-  dataStore.changeTreeReport2(expanded.value, selected.value);
+  changeTreeReport2(expanded.value, selected.value);
 };
 
 const onHistory = async () => {
diff --git a/src/modules/04_registry/views/Main.vue b/src/modules/04_registry/views/Main.vue
index d966262ad..94f3e8963 100644
--- a/src/modules/04_registry/views/Main.vue
+++ b/src/modules/04_registry/views/Main.vue
@@ -144,11 +144,13 @@ import ProfileTable from "@/modules/04_registry/components/TableProfile.vue";
 import http from "@/plugins/http";
 import config from "@/app.config";
 import type { QTableProps } from "quasar";
-// import { jsontoexcel } from "vue-table-to-excel";
+import { useDataStore } from "@/stores/data";
 
+const dataStore = useDataStore();
 const $q = useQuasar();
 const store = useProfileDataStore();
 const { profileData, changeProfileColumns } = store;
+const { changeTreeRegister, selectedRegister, expandedRegister } = dataStore;
 
 const mixin = useCounterMixin();
 const { date2Thai, messageError, typeRetire, showLoader, hideLoader } = mixin;
@@ -1162,7 +1164,7 @@ const onSelected = async (id: string) => {
 };
 
 const clickTree = () => {
-  dataStore.changeTreeRegister(expanded.value, selected.value);
+  changeTreeRegister(expanded.value, selected.value);
 };
 
 const nodeTree = async () => {
@@ -1173,14 +1175,9 @@ const nodeTree = async () => {
       const data = res.data.result;
       nodesTree.value = data;
       if (data.length > 0) {
-        selected.value =
-          dataStore.selectedRegister == ""
-            ? data[0].id
-            : dataStore.selectedRegister;
+        selected.value = selectedRegister == "" ? data[0].id : selectedRegister;
         expanded.value =
-          dataStore.expandedRegister.length == 0
-            ? [data[0].id]
-            : dataStore.expandedRegister;
+          expandedRegister.length == 0 ? [data[0].id] : expandedRegister;
       }
     })
     .catch((e: any) => {
diff --git a/src/modules/05_placement/components/Receive/receiveDetail.vue b/src/modules/05_placement/components/Receive/receiveDetail.vue
index f25b95658..6ce3b0632 100644
--- a/src/modules/05_placement/components/Receive/receiveDetail.vue
+++ b/src/modules/05_placement/components/Receive/receiveDetail.vue
@@ -5,7 +5,12 @@
         <Information v-model:statusEdit="statusEdit" :statusAdd="false" />
       </div>
       <div id="government" name="16" class="row col-12 q-mt-md">
-        <Government v-model:statusEdit="statusEdit" :statusAdd="false" />
+        <Government
+          v-model:statusEdit="statusEdit"
+          :statusAdd="false"
+          profileType="test"
+          employeeClass="test"
+        />
       </div>
       <div id="address" name="17" class="row col-12 q-mt-md">
         <Address v-model:statusEdit="statusEdit" :statusAdd="false" />
@@ -14,7 +19,7 @@
         <Family v-model:statusEdit="statusEdit" :statusAdd="false" />
       </div>
       <div id="certicate" name="15" class="row col-12 q-mt-md">
-        <Certicate v-model:statusEdit="statusEdit" />
+        <Certicate v-model:statusEdit="statusEdit" profileType="test" />
       </div>
       <div id="education" name="2" class="row col-12 q-mt-md">
         <EducationVue v-model:statusEdit="statusEdit" />
@@ -70,6 +75,7 @@
 </template>
 <script setup lang="ts">
 import { ref } from "vue";
+
 import Image from "@/components/information/Image.vue";
 import Information from "@/components/information/Information.vue";
 import Government from "@/components/information/Government.vue";
diff --git a/src/modules/05_placement/components/Receive/receiveMain.vue b/src/modules/05_placement/components/Receive/receiveMain.vue
index 007a3b7e8..7dc840540 100644
--- a/src/modules/05_placement/components/Receive/receiveMain.vue
+++ b/src/modules/05_placement/components/Receive/receiveMain.vue
@@ -282,10 +282,10 @@ const columns2 = ref<QTableProps["columns"]>([
   },
 ]);
 
-const openModalTree = (pid: string) => {
-  modalTree.value = true;
-  personalId.value = pid;
+const openModalTree = (id: string) => {
+  personalId.value = id;
   personal.value = [];
+  modalTree.value = true;
 };
 
 const closeModalTree = async () => {
@@ -293,8 +293,10 @@ const closeModalTree = async () => {
   modalTree.value = false;
 };
 
-const nextPage = (id: string) => {
-  router.push(`/receive/${id}`);
+const nextPage = (row: any) => {
+  router.push({
+    path: `/receive/${row.personalId}`,
+  });
 };
 </script>
 <template>
@@ -367,57 +369,42 @@ const nextPage = (id: string) => {
                 <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.personalId)"
-                >
+                <q-td key="no" :props="props" @click="nextPage(props.row)">
                   {{ props.rowIndex + 1 }}
                 </q-td>
                 <q-td
                   key="fullname"
                   :props="props"
-                  @click="nextPage(props.row.personalId)"
+                  @click="nextPage(props.row)"
                 >
                   {{ props.row.fullname }}
                 </q-td>
                 <q-td
                   key="position"
                   :props="props"
-                  @click="nextPage(props.row.personalId)"
+                  @click="nextPage(props.row)"
                 >
                   {{ props.row.position }}
                 </q-td>
                 <q-td
                   key="positionLevel"
                   :props="props"
-                  @click="nextPage(props.row.personalId)"
+                  @click="nextPage(props.row)"
                 >
                   {{ props.row.positionLevel }}
                 </q-td>
-                <q-td
-                  key="oc"
-                  :props="props"
-                  @click="nextPage(props.row.personalId)"
-                >
+                <q-td key="oc" :props="props" @click="nextPage(props.row)">
                   {{ props.row.oc }}
                 </q-td>
-                <q-td
-                  key="agency"
-                  :props="props"
-                  @click="nextPage(props.row.personalId)"
-                >
+                <q-td key="agency" :props="props" @click="nextPage(props.row)">
                   {{ props.row.agency }}
                 </q-td>
-                <q-td
-                  key="status"
-                  :props="props"
-                  @click="nextPage(props.row.personalId)"
-                >
+                <q-td key="status" :props="props" @click="nextPage(props.row)">
                   {{ props.row.status }}
                 </q-td>
                 <q-td auto-width>

From e095ef31862a60e75ffb693473514582f9baf01b Mon Sep 17 00:00:00 2001
From: Thanit Konmek <thanit@frappet.com>
Date: Fri, 4 Aug 2023 12:43:06 +0700
Subject: [PATCH 028/113] =?UTF-8?q?=E0=B9=81=E0=B8=81=E0=B9=89=E0=B9=84?=
 =?UTF-8?q?=E0=B8=82=20=E0=B8=AD=E0=B8=AD=E0=B8=81=E0=B8=84=E0=B8=B3?=
 =?UTF-8?q?=E0=B8=AA=E0=B8=B1=E0=B9=88=E0=B8=87?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/OrderPlacement/MainOrderPlacement.vue          | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/modules/05_placement/components/OrderPlacement/MainOrderPlacement.vue b/src/modules/05_placement/components/OrderPlacement/MainOrderPlacement.vue
index a20b4a822..b9b5f9197 100644
--- a/src/modules/05_placement/components/OrderPlacement/MainOrderPlacement.vue
+++ b/src/modules/05_placement/components/OrderPlacement/MainOrderPlacement.vue
@@ -171,7 +171,7 @@
                 <q-td
                   key="OrderType"
                   :props="props"
-                  @click="redirectToPage(props.row.OrderType)"
+                  @click="redirectToPage(props.row.Order)"
                 >
                   {{ props.row.OrderType }}
                 </q-td>
@@ -533,7 +533,7 @@ const OriginalDataFetch = async () => {
 };
 
 // ดูรายการหน้าต่อไป
-const redirectToPage = (id?: number) => {
+const redirectToPage = () => {
   // router.push({ name: "placementDetail" });
   router.push(`/placement/order/detail`);
 };

From 482e44815e6abfb1a621d4cb801450273be2b847 Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Fri, 4 Aug 2023 12:54:59 +0700
Subject: [PATCH 029/113] no message

---
 .../OrderPlacement/MainOrderPlacement.vue          | 14 --------------
 1 file changed, 14 deletions(-)

diff --git a/src/modules/05_placement/components/OrderPlacement/MainOrderPlacement.vue b/src/modules/05_placement/components/OrderPlacement/MainOrderPlacement.vue
index ca3fdaba1..b00790382 100644
--- a/src/modules/05_placement/components/OrderPlacement/MainOrderPlacement.vue
+++ b/src/modules/05_placement/components/OrderPlacement/MainOrderPlacement.vue
@@ -164,15 +164,7 @@
                 <q-td key="OrderNum" :props="props">
                   {{ props.row.OrderNum }}
                 </q-td>
-<<<<<<< HEAD
-                <q-td
-                  key="OrderType"
-                  :props="props"
-                  @click="redirectToPage(props.row.Order)"
-                >
-=======
                 <q-td key="OrderType" :props="props">
->>>>>>> nice_dev
                   {{ props.row.OrderType }}
                 </q-td>
                 <q-td key="OrderDate" :props="props">
@@ -520,15 +512,9 @@ const OriginalDataFetch = async () => {
 };
 
 // ดูรายการหน้าต่อไป
-<<<<<<< HEAD
-const redirectToPage = () => {
-  // router.push({ name: "placementDetail" });
-  router.push(`/placement/order/detail`);
-=======
 const redirectToPage = (id?: string) => {
   console.log(id);
   router.push(`/placement/order/detail/${id}`);
->>>>>>> nice_dev
 };
 
 const clickDelete = (id: string) => {

From b124da1448cdc58a583dff5e205f3334dde19e8d Mon Sep 17 00:00:00 2001
From: AnandaTon <125332905+anandaAiemvong@users.noreply.github.com>
Date: Fri, 4 Aug 2023 13:48:56 +0700
Subject: [PATCH 030/113] =?UTF-8?q?=E0=B9=81=E0=B8=81=E0=B9=89=E0=B9=84?=
 =?UTF-8?q?=E0=B8=82=20/=E0=B9=80=E0=B8=9E=E0=B8=B4=E0=B9=88=E0=B8=A1=20ui?=
 =?UTF-8?q?=20insignia=20(=E0=B9=80=E0=B8=88=E0=B9=89=E0=B8=B2=E0=B8=AB?=
 =?UTF-8?q?=E0=B8=99=E0=B9=89=E0=B8=B2=E0=B8=97=E0=B8=B5=E0=B9=88=E0=B8=81?=
 =?UTF-8?q?=E0=B8=A5=E0=B8=B2=E0=B8=87)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/interface/request/main/main.ts            |  16 +-
 .../components/1_Proposals/listProposals.vue  |  29 +
 .../components/2_Manage/StatCard.vue          |  43 ++
 .../components/2_Manage/listManage.vue        | 715 ++++++++++++++++++
 .../components/4_Allocate/addDetail.vue       | 678 +++++++++++++++++
 .../components/4_Allocate/allocateAdd.vue     |  77 ++
 .../components/4_Allocate/detail.vue          | 353 +++++++++
 .../components/4_Allocate/listAllocate.vue    | 359 +++++++++
 .../07_insignia/components/DialogHeader.vue   |  27 +
 .../07_insignia/components/RecordInsignia.vue | 154 ++--
 src/modules/07_insignia/router.ts             |  61 +-
 11 files changed, 2428 insertions(+), 84 deletions(-)
 create mode 100644 src/modules/07_insignia/components/2_Manage/StatCard.vue
 create mode 100644 src/modules/07_insignia/components/2_Manage/listManage.vue
 create mode 100644 src/modules/07_insignia/components/4_Allocate/addDetail.vue
 create mode 100644 src/modules/07_insignia/components/4_Allocate/allocateAdd.vue
 create mode 100644 src/modules/07_insignia/components/4_Allocate/detail.vue
 create mode 100644 src/modules/07_insignia/components/4_Allocate/listAllocate.vue
 create mode 100644 src/modules/07_insignia/components/DialogHeader.vue

diff --git a/src/interface/request/main/main.ts b/src/interface/request/main/main.ts
index fe7b5080c..8b9fda266 100644
--- a/src/interface/request/main/main.ts
+++ b/src/interface/request/main/main.ts
@@ -291,20 +291,20 @@ const menuList = readonly<any[]>([
             role: "insignia",
           },
           {
-            label: "จัดทำรายชื่อข้าราชการสามัญ",
-            path: "insigniaNameList",
+            label: "จัดการคำขอ",
+            path: "insigniaManage",
             role: "insignia",
           },
           {
-            label: "อนุมัติรายชื่อข้าราชการสามัญ",
-            path: "insigniaNameApprove",
-            role: "insignia",
-          },
-          {
-            label: "บันทึกผลการได้รับพระราชทานเครื่องราชย์อิสริยสภรณ์",
+            label: "บันทึกผลการได้รับพระราช...",
             path: "insigniaRecord",
             role: "insignia",
           },
+          {
+            label: "จัดสรรเครื่องราชฯ",
+            path: "insigniaAllocate",
+            role: "insignia",
+          },
           {
             label: "รายงาน",
             path: "insigniaReport",
diff --git a/src/modules/07_insignia/components/1_Proposals/listProposals.vue b/src/modules/07_insignia/components/1_Proposals/listProposals.vue
index 48d761c5d..1969ecb05 100644
--- a/src/modules/07_insignia/components/1_Proposals/listProposals.vue
+++ b/src/modules/07_insignia/components/1_Proposals/listProposals.vue
@@ -110,6 +110,20 @@
                   class="text-h5"
                 />
               </q-td>
+              <q-td key="statusRoyal" :props="props">
+                <q-icon
+                  v-if="props.row.statusRoyal == 'ยังไม่ได้เสนอ'"
+                  name="mdi-timer-sand"
+                  color="orange"
+                  class="text-h5"
+                />
+                <q-icon
+                  v-else
+                  name="mdi-check"
+                  color="positive"
+                  class="text-h5"
+                />
+              </q-td>
               <q-td auto-width>
                 <q-btn
                   dense
@@ -178,6 +192,7 @@ const visibleColumns = ref<string[]>([
   "startDate",
   "endDate",
   "status",
+  "statusRoyal",
 ]); //ค้นหา คอลัมน์ คอลัมน์ที่แสดง
 
 // หัวตาราง
@@ -227,6 +242,15 @@ const columns = ref<QTableProps["columns"]>([
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
+  {
+    name: "statusRoyal",
+    align: "center",
+    label: "สถานะราชกิจจานุเบกษา",
+    sortable: true,
+    field: "institution",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
 ]);
 
 // ข้อมูลตาราง (จำลอง)
@@ -237,6 +261,7 @@ const rows = ref<FormProprsalsRound[]>([
     startDate: "2566",
     endDate: "31 พ.ค. 2566",
     status: "เสนอเเล้ว",
+    statusRoyal: "เสนอเเล้ว",
   },
   {
     round: "รอบการเสนอขอพระราชทานเครื่องราชฯ",
@@ -244,6 +269,7 @@ const rows = ref<FormProprsalsRound[]>([
     startDate: "2566",
     endDate: "31 พ.ค. 2566",
     status: "เสนอเเล้ว",
+    statusRoyal: "เสนอเเล้ว",
   },
   {
     round: "รอบการเสนอขอพระราชทานเครื่องราชฯ",
@@ -251,6 +277,7 @@ const rows = ref<FormProprsalsRound[]>([
     startDate: "2566",
     endDate: "31 พ.ค. 2566",
     status: "เสนอเเล้ว",
+    statusRoyal: "เสนอเเล้ว",
   },
   {
     round: "รอบการเสนอขอพระราชทานเครื่องราชฯ",
@@ -258,6 +285,7 @@ const rows = ref<FormProprsalsRound[]>([
     startDate: "2566",
     endDate: "31 พ.ค. 2566",
     status: "ยังไม่ได้เสนอ",
+    statusRoyal: "ยังไม่ได้เสนอ",
   },
   {
     round: "รอบการเสนอขอพระราชทานเครื่องราชฯ",
@@ -265,6 +293,7 @@ const rows = ref<FormProprsalsRound[]>([
     startDate: "2566",
     endDate: "31 พ.ค. 2566",
     status: "เสนอเเล้ว",
+    statusRoyal: "ยังไม่ได้เสนอ",
   },
 ]);
 
diff --git a/src/modules/07_insignia/components/2_Manage/StatCard.vue b/src/modules/07_insignia/components/2_Manage/StatCard.vue
new file mode 100644
index 000000000..67ddb48bc
--- /dev/null
+++ b/src/modules/07_insignia/components/2_Manage/StatCard.vue
@@ -0,0 +1,43 @@
+<script setup lang="ts">
+const sizeCard = (val: number) => {
+  if (val === 5) {
+    return "width:15%;";
+  }
+};
+const props = defineProps({
+  color: {
+    type: String,
+    default: "",
+  },
+  label: {
+    type: String,
+    default: "",
+  },
+  amount: {
+    type: Number,
+    default: 0,
+  },
+});
+</script>
+<template>
+  <div
+    :style="$q.screen.lt.md ? '' : sizeCard(5)"
+    :class="$q.screen.lt.sm ? 'col-4' : ''"
+  >
+    <div
+      class="q-card q-card--bordered q-card--flat no-shadow row fit cardNum items-center q-px-sm"
+    >
+      <div class="col-12 row items-center q-pa-sm">
+        <div
+          class="col-12 text-h5 text-weight-bold"
+          :style="{ color: props.color }"
+        >
+          {{ props.amount }}
+        </div>
+        <div class="col-12 text-dark ellipsis">
+          {{ props.label }}
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/src/modules/07_insignia/components/2_Manage/listManage.vue b/src/modules/07_insignia/components/2_Manage/listManage.vue
new file mode 100644
index 000000000..6b57e514f
--- /dev/null
+++ b/src/modules/07_insignia/components/2_Manage/listManage.vue
@@ -0,0 +1,715 @@
+<template>
+  <div class="toptitle text-dark col-12 row items-center">
+    รายชื่อข้าราชการสามัญฯ ที่มีสิทธิ์ยื่นขอพระราชทานเครื่องราชย์อิสริยาภรณ์
+  </div>
+  <q-card bordered class="q-py-sm row col-12">
+    <div class="col-12 row bg-white">
+      <div class="fit q-px-md q-py-sm">
+        <div class="row col-12 q-col-gutter-md fit">
+          <cardTop
+            :amount="stat.total"
+            label="หน่วยงานทั้งหมด"
+            color="#016987"
+          />
+          <cardTop
+            :amount="stat.sendName"
+            label="หน่วยงานที่ส่งรายชื่อเเล้ว"
+            color="#02A998"
+          />
+          <cardTop
+            :amount="stat.nonSend"
+            label="หน่วยงานที่ยังไม่ได้ส่งรายชื่อ"
+            color="#2EA0FF"
+          />
+          <cardTop
+            :amount="stat.personSend"
+            label="จำนวนคนที่ยื่นขอ"
+            color="#4154B3"
+          />
+        </div>
+      </div>
+    </div>
+  </q-card>
+  <q-card flat bordered class="col-12 q-mt-sm">
+    <div class="row col-12">
+      <q-tabs
+        v-model="tab"
+        dense
+        class="text-grey"
+        active-color="primary"
+        active-class="bg-teal-1"
+        indicator-color="primary"
+        align="left"
+      >
+        <q-tab name="haveInsignia" label="ผู้ที่ได้รับพระราชทานเครื่องราชฯ" />
+        <q-tab name="rightInsignia" label="ผู้ที่มีสิทธ์ที่จะไม่ยื่นขอ" />
+        <q-tab name="nonInsignia" label="หน่วยงานที่ยังไม่ได้ส่งรายชื่อ" />
+      </q-tabs>
+    </div>
+    <q-separator />
+    <div class="col-12 row q-pa-md">
+      <div class="row col-12">
+        <div class="row col-12 q-col-gutter-sm">
+          <q-select
+            v-model="organization"
+            label="หน่วยงาน"
+            dense
+            emit-value
+            map-options
+            :options="organizationOptions"
+            option-value="id"
+            option-label="name"
+            lazy-rules
+            hide-bottom-space
+            :readonly="false"
+            :borderless="false"
+            :outlined="true"
+            :hide-dropdown-icon="false"
+            style="min-width: 150px"
+          />
+          <div>
+            <q-btn
+              @click="clickAdd()"
+              size="12px"
+              flat
+              round
+              color="add"
+              icon="mdi-plus"
+            >
+              <q-tooltip>เพิ่ม</q-tooltip>
+            </q-btn>
+            <q-btn size="md" icon="mdi-download" flat round color="primary">
+              <q-tooltip>ดาวน์โหลด</q-tooltip>
+            </q-btn>
+            <!-- <q-menu>
+                <q-list style="min-width: 100px">
+                  <q-item clickable @click="clickAdd">
+                    <q-item-section>ขรก.กทม.สามัญ</q-item-section>
+                  </q-item>
+                  <q-item clickable @click="clickAdd">
+                    <q-item-section>ลูกจ้างประจำ</q-item-section>
+                  </q-item>
+                </q-list>
+              </q-menu> -->
+          </div>
+          <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"
+          />
+        </div>
+        <div class="col-12 q-pt-sm">
+          <q-table
+            ref="table"
+            :columns="columns"
+            :rows="rows"
+            :filter="filterKeyword"
+            row-key="name"
+            flat
+            bordered
+            :paging="true"
+            dense
+            class="custom-header-table"
+            v-bind="attrs"
+            :visible-columns="visibleColumns"
+            :pagination-label="paginationLabel"
+            v-model:pagination="pagination"
+          >
+            <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-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="citizenId" :props="props">
+                  {{ props.row.citizenId }}
+                </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="level" :props="props">
+                  {{ props.row.level }}
+                </q-td>
+                <q-td key="salary" :props="props">
+                  {{ props.row.salary }}
+                </q-td>
+                <q-td key="organization" :props="props">
+                  {{ props.row.organization }}
+                </q-td>
+                <q-td key="insigniaType" :props="props">
+                  {{ props.row.insigniaType }}
+                </q-td>
+                <q-td key="insigniaSend" :props="props">
+                  {{ props.row.insigniaSend }}
+                </q-td>
+                <q-td key="insigniaLevel" :props="props">
+                  {{ props.row.insigniaLevel }}
+                </q-td>
+                <q-td key="dateSend" :props="props">
+                  {{ props.row.dateSend }}
+                </q-td>
+                <q-td auto-width>
+                  <q-btn
+                    dense
+                    size="12px"
+                    flat
+                    round
+                    color="blue"
+                    @click="clickNote(props.row.id)"
+                    icon="mdi-alert-circle-outline"
+                  >
+                    <q-tooltip>หมายเหตุ</q-tooltip>
+                  </q-btn>
+                </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>
+            <template v-slot:pagination="scope">
+              <q-pagination
+                v-model="pagination.page"
+                active-color="primary"
+                color="primary"
+                :max="scope.pagesNumber"
+                :max-pages="5"
+                size="sm"
+                boundary-links
+                direction-links
+              ></q-pagination>
+            </template>
+          </q-table>
+        </div>
+      </div>
+    </div>
+  </q-card>
+
+  <q-dialog v-model="addNote" persistent>
+    <q-card style="min-width: 350px">
+      <DialogHeader tittle="หมายเหตุ " :close="clickClose" />
+
+      <q-card-section class="q-pt-none">
+        <q-input
+          dense
+          type="textarea"
+          label="กรอกหมายเหตุ"
+          v-model="Note"
+          autofocus
+          @keyup.enter="addNote = false"
+        />
+      </q-card-section>
+      <q-card-actions align="right" class="bg-white text-teal">
+        <q-btn label="บันทึก" @click="saveNote" color="public" />
+      </q-card-actions>
+    </q-card>
+  </q-dialog>
+</template>
+
+<script setup lang="ts">
+import { onMounted, ref, useAttrs, reactive, watch } from "vue";
+import type { QTableProps } from "quasar";
+import type {
+  FormMainProbation,
+  FormMainProbation2,
+} from "@/modules/05_placement/interface/request/Main";
+import { useQuasar } from "quasar";
+import { useRouter } from "vue-router";
+import http from "@/plugins/http";
+import config from "@/app.config";
+import DialogHeader from "@/modules/07_insignia/components/DialogHeader.vue";
+import { useCounterMixin } from "@/stores/mixin";
+import type { resMain } from "@/modules/06_retirement/interface/response/Main";
+const yearOptions = reactive<any[]>([]);
+import cardTop from "@/modules/07_insignia/components/2_Manage/StatCard.vue";
+
+const Note = ref<string>("");
+const addNote = ref<boolean>(false);
+const saveWriteNote = ref<any[]>([]);
+const mixin = useCounterMixin();
+const { messageError, date2Thai, showLoader, hideLoader, dialogMessage } =
+  mixin;
+const router = useRouter();
+const $q = useQuasar(); //ใช้ noti quasar
+const modal = ref<boolean>(false);
+const pagination = ref({
+  sortBy: "desc",
+  descending: false,
+  page: 1,
+  rowsPerPage: 10,
+});
+
+const visibleColumns = ref<string[]>([
+  "no",
+  "citizenId",
+  "name",
+  "position",
+  "level",
+  "salary",
+  "organization",
+  "insigniaType",
+  "insigniaSend",
+  "insigniaLevel",
+  "dateSend",
+]); //ค้นหา คอลัมน์ คอลัมน์ที่แสดง
+
+// หัวตาราง
+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: "citizenId",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "name",
+    align: "left",
+    label: "ชื่อ-นามสกุล",
+    sortable: true,
+    field: "name",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "position",
+    align: "left",
+    label: "ตำแหน่ง",
+    sortable: true,
+    field: "position",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "level",
+    align: "left",
+    label: "อันดับ/ระดับ",
+    sortable: true,
+    field: "level",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "salary",
+    align: "left",
+    label: "เงินเดือน",
+    sortable: true,
+    field: "salary",
+    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: "insigniaType",
+    align: "left",
+    label: "ประเภทเครื่องราชฯ ปัจจุบัน",
+    sortable: true,
+    field: "insigniaType",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "insigniaSend",
+    align: "left",
+    label: "ประเภทเครื่องราชฯ ที่ยื่นขอ",
+    sortable: true,
+    field: "insigniaSend",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "insigniaLevel",
+    align: "left",
+    label: "ชั้นเครื่องราชฯ",
+    sortable: true,
+    field: "insigniaLevel",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "dateSend",
+    align: "left",
+    label: "วันที่ยื่นขอ",
+    sortable: true,
+    field: "dateSend",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+]);
+
+// ข้อมูลตาราง (จำลอง)
+const rows = ref<any[]>([
+  {
+    no: "1",
+    citizenId: "1xxxxxxxxxx",
+    name: "นายใจดี ยอดใจ ",
+    position: "นักวิชาการพัสดุ",
+    level: "1",
+    salary: "15000",
+    organization: "บริหาร",
+    insigniaType: "ทวีติยาภรณ์ช้างเผือก",
+    insigniaSend: "ตริตาภรณ์ช้างเผือก",
+    insigniaLevel: "ต่ำกว่าสายสะพาย",
+    dateSend: "31 ม.ค. 2566",
+  },
+  {
+    no: "2",
+    citizenId: "1xxxxxxxxxx",
+    name: "นายจักกริน บัณฑิต",
+    position: "นักวิชาการพัสดุ",
+    level: "ปฏิบัติการ",
+    salary: "15000",
+    organization: "บริหาร",
+    insigniaType: "ทวีติยาภรณ์ช้างเผือก",
+    insigniaSend: "ตริตาภรณ์ช้างเผือก",
+    insigniaLevel: "ต่ำกว่าสายสะพาย",
+    dateSend: "31 ม.ค. 2566",
+  },
+  {
+    no: "3",
+    citizenId: "1xxxxxxxxxx",
+    name: "นางสาวกัณฐิมา กาฬสินธุ์",
+    position: "นักจัดการงานทั่วไป",
+    level: "ปฏิบัติการ",
+    salary: "15000",
+    organization: "บริหาร",
+    insigniaType: "ทวีติยาภรณ์ช้างเผือก",
+    insigniaSend: "ตริตาภรณ์ช้างเผือก",
+    insigniaLevel: "ต่ำกว่าสายสะพาย",
+    dateSend: "31 ม.ค. 2566",
+  },
+  {
+    no: "4",
+    citizenId: "1xxxxxxxxxx",
+    name: "นางสาวเมขลา กระจ่างมนตรี",
+    position: "นักจัดการงานทั่วไป",
+    level: "ปฏิบัติการ",
+    salary: "15000",
+    organization: "บริหาร",
+    insigniaType: "ทวีติยาภรณ์ช้างเผือก",
+    insigniaSend: "ตริตาภรณ์ช้างเผือก",
+    insigniaLevel: "ต่ำกว่าสายสะพาย",
+    dateSend: "31 ม.ค. 2566",
+  },
+]);
+
+// ข้อมูลตาราง (จำลอง)
+const currentYear = new Date().getFullYear();
+const tab = ref<any>("haveInsignia");
+const visibleColumns2 = ref<string[]>(["no", "name", "retireNumber"]);
+// หัวตาราง2
+const columns2 = ref<QTableProps["columns"]>([
+  {
+    name: "no",
+    align: "left",
+    label: "ลำดับ",
+    sortable: true,
+    field: "no",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "name",
+    align: "left",
+    label: "วันที่สร้าง",
+    sortable: true,
+    field: "name",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "retireNumber",
+    align: "left",
+    label: "จำนวนผู้เกษียณ",
+    sortable: true,
+    field: "total",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+]);
+
+// ข้อมูลตาราง (จำลอง)
+const rows2 = ref<FormMainProbation2[]>([
+  {
+    no: "1",
+    name: "นายใจดี ยอดใจ ",
+    position: "นักวิชาการพัสดุ",
+    level: "ปฏิบัติการ",
+    institution: "กลุ่มงานโครงสร้างและอัตรากำลัง ๒",
+  },
+  {
+    no: "2",
+    name: "นายจักกริน บัณฑิต",
+    position: "นักวิชาการพัสดุ",
+    level: "ปฏิบัติการ",
+    institution: "กลุ่มงานโครงสร้างและอัตรากำลัง ๒",
+  },
+  {
+    no: "3",
+    name: "นางสาวกัณฐิมา กาฬสินธุ์",
+    position: "นักจัดการงานทั่วไป",
+    level: "ปฏิบัติการ",
+    institution: "กลุ่มงานช่วยนักบริหาร",
+  },
+  {
+    no: "4",
+    name: "นางสาวเมขลา กระจ่างมนตรี",
+    position: "นักจัดการงานทั่วไป",
+    level: "ปฏิบัติการ",
+    institution: "กลุ่มงานช่วยนักบริหาร",
+  },
+  {
+    no: "5",
+    name: "นางสาวฐิติรัตน์ พงษ์ศิริ",
+    position: "นักจัดการงานทั่วไป",
+    level: "ปฏิบัติการ",
+    institution: "กลุ่มงานช่วยนักบริหาร",
+  },
+]);
+
+const clickDelete = (id: string) => {
+  $q.dialog({
+    title: "ยืนยันการลบข้อมูล",
+    message: "ต้องการลบข้อมูลนี้ใช่หรือไม่?",
+    cancel: {
+      flat: true,
+      color: "negative",
+    },
+    persistent: true,
+  })
+    .onOk(async () => {})
+    .onCancel(() => {})
+    .onDismiss(() => {});
+};
+const clickNote = () => {
+  addNote.value = true;
+};
+const clickAdd = () => {
+  //   modal.value = true;
+  $q.dialog({
+    title: "เพิ่มประกาศ",
+    message: "เลือกประกาศที่ต้องการเพิ่มข้อมูล",
+    options: {
+      type: "radio",
+      model: "opt1",
+      // inline: true
+      items: [
+        { label: "ประกาศเพิ่มผู้เกษียณ", value: "ADD" },
+        { label: "ประกาศแก้ไขข้อมูลผู้เกษียน", value: "EDIT" },
+        { label: "ประกาศยกเลิกผู้เกษียณ", value: "REMOVE" },
+      ],
+    },
+    cancel: {
+      flat: true,
+      color: "negative",
+    },
+    persistent: true,
+  })
+    .onOk((data) => {
+      console.log("option===>", data);
+      router.push(`/retirement/list/${type.value}/${currentYear}`);
+    })
+    .onCancel(() => {})
+    .onDismiss(() => {});
+  /* $q.dialog({
+      title: "ยืนยันการเพิ่มข้อมูลประกาศเกษียณ",
+      message: "ต้องการเพิ่มข้อมูลประกาศเกษียณใช่หรือไม่?",
+      cancel: {
+        flat: true,
+        color: "negative",
+      },
+      persistent: true,
+    })
+      .onOk(async () => {
+        router.push(`/retirement/list/${type.value}/${currentYear}`);
+      })
+      .onCancel(() => {})
+      .onDismiss(() => {}); */
+};
+const clickClose = async () => {
+  addNote.value = false;
+};
+const organization = ref<string>();
+const organizationOptions = ref<any>([{ id: 1, name: "ทั้งหมด" }]);
+const stat = ref<any>({
+  total: 0,
+  sendName: 0,
+  nonSend: 0,
+  personSend: 0,
+  disclaim: 0,
+});
+
+const saveNote = async () => {
+  if (saveWriteNote.value.length == 0) {
+    dialogMessage(
+      $q,
+      "ไม่สามารถบันทึกข้อมูลได้",
+      "กรุณาเพิ่มหมายเหตุ",
+      "warning",
+      undefined,
+      "orange",
+      undefined,
+      undefined,
+      true
+    );
+    return;
+  } else {
+    await saveTextNote();
+  }
+};
+
+const saveTextNote = async () => {};
+
+// ค้นหาในตาราง
+const filterKeyword = ref<string>("");
+const filterRef = ref<any>(null);
+const resetFilter = () => {
+  filterKeyword.value = "";
+  filterRef.value.focus();
+};
+
+const filterKeyword2 = ref<string>("");
+const filterRef2 = ref<any>(null);
+const resetFilter2 = () => {
+  filterKeyword2.value = "";
+  filterRef2.value.focus();
+};
+
+const attrs = ref<any>(useAttrs());
+
+const paging = ref<boolean>(true);
+const paginationLabel = (start: string, end: string, total: string) => {
+  if (paging.value == true) return " " + start + "-" + end + " ใน " + total;
+  else return start + "-" + end + " ใน " + total;
+};
+const nextPage = (prop: any) => {
+  // console.log(prop.id);
+
+  router.push(`/retirement/listretire/${prop.id}/${type.value}`);
+};
+</script>
+
+<style lang="scss" scope>
+.filter-card {
+  background-color: #f1f1f1b0;
+}
+
+.toggle-expired-account {
+  font-size: 12px;
+  font-weight: 400;
+  font-size: 15px;
+  line-height: 150%;
+  color: #35373c;
+}
+
+.icon-color {
+  color: #4154b3;
+}
+
+.custom-header-table {
+  max-height: 64vh;
+
+  .q-table tr:nth-child(odd) td {
+    background: white;
+  }
+
+  .q-table tr:nth-child(even) td {
+    background: #f8f8f8;
+  }
+
+  .q-table thead tr {
+    background: #ecebeb;
+  }
+
+  .q-table thead tr th {
+    position: sticky;
+    z-index: 1;
+  }
+
+  /* this will be the loading indicator */
+  .q-table thead tr:last-child th {
+    /* height of all previous header rows */
+    top: 48px;
+  }
+
+  .q-table thead tr:first-child th {
+    top: 0;
+  }
+}
+</style>
diff --git a/src/modules/07_insignia/components/4_Allocate/addDetail.vue b/src/modules/07_insignia/components/4_Allocate/addDetail.vue
new file mode 100644
index 000000000..7095a5a26
--- /dev/null
+++ b/src/modules/07_insignia/components/4_Allocate/addDetail.vue
@@ -0,0 +1,678 @@
+<template>
+  <div class="toptitle text-dark col-12 row items-center">
+    รายชื่อที่จัดสรรเครื่องราชอิสริยาภรณ์ {{ name }} {{ organization }}
+  </div>
+  <q-card bordered class="q-py-sm row col-12">
+    <div class="col-12 row bg-white">
+      <div class="fit q-px-md q-py-sm">
+        <div class="row col-12 q-col-gutter-md fit">
+          <cardTop
+            :amount="stat.total"
+            label="จำนวนเครื่องราช ฯ ทั้งหมด"
+            color="#016987"
+          />
+          <cardTop
+            :amount="stat.sendInsig"
+            label="จำนวนเครื่องราช ฯ ที่จัดสรรให้หน่วยงานแล้ว"
+            color="#02A998"
+          />
+          <cardTop
+            :amount="stat.remainInsig"
+            label="จำนวนเครื่องราช ฯ คงเหลือ"
+            color="#2EA0FF"
+          />
+        </div>
+      </div>
+    </div>
+  </q-card>
+  <q-card flat bordered class="col-12 q-mt-sm q-pa-md">
+    <div class="row q-col-gutter-sm">
+      <div class="row col-12 q-col-gutter-sm">
+        <div>
+          <q-btn
+            @click="clickAdd()"
+            size="12px"
+            flat
+            round
+            color="add"
+            icon="mdi-plus"
+          >
+            <q-tooltip>เพิ่มรายการจัดสรรเครื่องราชอิสริยาภรณ์</q-tooltip>
+          </q-btn>
+        </div>
+        <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"
+        />
+      </div>
+      <div class="col-12">
+        <q-table
+          ref="table"
+          :columns="columns"
+          :rows="rows"
+          :filter="filterKeyword"
+          row-key="id"
+          flat
+          bordered
+          :paging="true"
+          dense
+          class="custom-header-table"
+          v-bind="attrs"
+          :visible-columns="visibleColumns"
+          :pagination-label="paginationLabel"
+          v-model:pagination="pagination"
+        >
+          <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-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="citizenId" :props="props">
+                {{ props.row.citizenId }}
+              </q-td>
+              <q-td key="name" :props="props">
+                {{ props.row.name }}
+              </q-td>
+              <q-td key="organization" :props="props">
+                {{ props.row.organization }}
+              </q-td>
+              <q-td key="positionType" :props="props">
+                {{ props.row.positionType }}
+              </q-td>
+              <q-td key="positionAdmin" :props="props">
+                {{ props.row.positionAdmin }}
+              </q-td>
+              <q-td key="positionLine" :props="props">
+                {{ props.row.positionLine }}
+              </q-td>
+              <q-td key="positionNum" :props="props">
+                {{ props.row.positionNum }}
+              </q-td>
+              <q-td key="status" :props="props">
+                {{ props.row.status }}
+              </q-td>
+              <q-td auto-width>
+                <q-btn
+                  dense
+                  size="12px"
+                  flat
+                  round
+                  color="blue"
+                  icon="mdi-alert-circle-outline"
+                >
+                  <q-tooltip>หมายเหตุ</q-tooltip>
+                </q-btn>
+              </q-td>
+              <q-td>
+                <q-btn
+                  label="คืนแล้ว"
+                  @click="clickNote(props.row.id)"
+                  color="blue"
+                />
+              </q-td>
+            </q-tr>
+          </template>
+          <template v-slot:pagination="scope">
+            <q-pagination
+              v-model="pagination.page"
+              active-color="primary"
+              color="dark"
+              :max="scope.pagesNumber"
+              :max-pages="5"
+              size="sm"
+              boundary-links
+              direction-links
+            ></q-pagination>
+          </template>
+        </q-table>
+      </div>
+    </div>
+  </q-card>
+
+  <q-dialog v-model="modal" persistent>
+    <q-card style="width: 900px; max-width: 80vw">
+      <q-form ref="myForm">
+        <DialogHeader tittle="เพิ่มรายชื่อ " :close="clickClose" />
+        <q-separator />
+        <q-card-section class="q-pa-md q-col-gutter-sm">
+          <q-input
+            class="col-12"
+            standout
+            dense
+            v-model="filterKeyword2"
+            ref="filterRef2"
+            outlined
+            debounce="300"
+            placeholder="ค้นหา"
+          >
+            <template v-slot:append>
+              <q-icon v-if="filterKeyword2 == ''" name="search" />
+              <q-icon
+                v-if="filterKeyword2 !== ''"
+                name="clear"
+                class="cursor-pointer"
+                @click="resetFilter2"
+              />
+            </template>
+          </q-input>
+          <div class="col-12">
+            <q-table
+              ref="table2"
+              :columns="columns2"
+              :rows="rows2"
+              :filter="filterKeyword2"
+              row-key="Order"
+              flat
+              bordered
+              :paging="true"
+              dense
+              class="custom-header-table"
+              v-bind="attrs"
+              :visible-columns="visibleColumns2"
+              :pagination-label="paginationLabel"
+              v-model:pagination="pagination"
+            >
+              <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
+                    v-for="col in props.cols"
+                    :key="col.name"
+                    :props="props"
+                  >
+                    <div v-if="col.name == 'no'">
+                      {{ props.rowIndex + 1 }}
+                    </div>
+                    <div v-else>
+                      {{ col.value }}
+                    </div>
+                  </q-td>
+                  <q-td auto-width>
+                    <q-btn
+                      dense
+                      class="q-px-md"
+                      outline
+                      color="primary"
+                      v-close-popup
+                      label="เพิ่ม"
+                    >
+                    </q-btn>
+                  </q-td>
+                </q-tr>
+              </template>
+              <template v-slot:pagination="scope">
+                <q-pagination
+                  v-model="pagination.page"
+                  active-color="primary"
+                  color="dark"
+                  :max="scope.pagesNumber"
+                  :max-pages="5"
+                  size="sm"
+                  boundary-links
+                  direction-links
+                ></q-pagination>
+              </template>
+            </q-table>
+          </div>
+        </q-card-section>
+      </q-form>
+    </q-card>
+  </q-dialog>
+  <q-dialog v-model="addNote" persistent>
+    <q-card style="min-width: 350px">
+      <DialogHeader tittle="คืนเครื่องราชฯ  " :close="clickCloseNote" />
+
+      <q-card-section class="q-pt-none">
+        <q-input
+          dense
+          type="textarea"
+          v-model="Note"
+          label="กรอกเหตุผลที่ต้องการคืนเครื่องราชฯ "
+          autofocus
+          @keyup.enter="addNote = false"
+        />
+      </q-card-section>
+      <q-card-actions align="right" class="bg-white text-teal">
+        <q-btn label="บันทึก" @click="saveNote" color="public" />
+      </q-card-actions>
+    </q-card>
+  </q-dialog>
+</template>
+
+<script setup lang="ts">
+import { ref, useAttrs } from "vue";
+import type { QTableProps } from "quasar";
+import router from "@/router";
+import { useQuasar } from "quasar";
+import { useCounterMixin } from "@/stores/mixin";
+
+import DialogHeader from "@/modules/07_insignia/components/DialogHeader.vue";
+import cardTop from "@/modules/07_insignia/components/2_Manage/StatCard.vue";
+import type { FormProprsalsRound } from " @/modules/07_insignia/interface/request/Main.ts";
+
+const mixin = useCounterMixin();
+const { messageError, date2Thai, showLoader, hideLoader, dialogMessage } =
+  mixin;
+const name = ref<string>("");
+const $q = useQuasar(); //ใช้ noti quasar
+const modal = ref<boolean>(false);
+const saveWriteNote = ref<any[]>([]);
+const addNote = ref<boolean>(false);
+const clickNote = () => {
+  addNote.value = true;
+};
+const pagination = ref({
+  sortBy: "desc",
+  descending: false,
+  page: 1,
+  rowsPerPage: 10,
+});
+const stat = ref<any>({
+  total: 3,
+  sendInsig: 2,
+  remainInsig: 1,
+});
+
+const visibleColumns = ref<string[]>([
+  "no",
+  "citizenId",
+  "name",
+  "organization",
+  "positionType",
+  "positionAdmin",
+  "positionLine",
+  "positionNum",
+  "status",
+]); //ค้นหา คอลัมน์ คอลัมน์ที่แสดง
+
+// หัวตาราง
+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: "citizenId",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "name",
+    align: "left",
+    label: "ชื่อ - นามสกุล",
+    sortable: true,
+    field: "name",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "organization",
+    align: "left",
+    label: "สังกัด",
+    sortable: true,
+    field: "organization",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "positionType",
+    align: "left",
+    label: "ตำแหน่งประเภท",
+    sortable: true,
+    field: "positionType",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "positionAdmin",
+    align: "left",
+    label: "ตำแหน่งทางการบริหาร",
+    sortable: true,
+    field: "positionAdmin",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "positionLine",
+    align: "left",
+    label: "ตำแหน่งในสายงาน/ระดับ",
+    sortable: true,
+    field: "positionLine",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "positionNum",
+    align: "left",
+    label: "ตำแหน่ง เลขที่",
+    sortable: true,
+    field: "positionNum",
+    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 rows = ref<any[]>([
+  {
+    no: "1",
+    citizenId: "1XXXXXXXXXXXX",
+    name: "นางสาวรัชภรณ์ ภักดี",
+    organization: "ฝ่ายบริหารงานทั่วไป",
+    positionType: "บริหาร",
+    positionAdmin: "บริหาร",
+    positionLine: "ชำนาญการพิเศษ",
+    positionNum: "ลกก.3",
+    status: "ยังมีชีวิต",
+  },
+  {
+    no: "2",
+    citizenId: "1XXXXXXXXXXXX",
+    name: "นางสาวภาพรรณ ลออ",
+    organization: "ฝ่ายบริหารงานทั่วไป",
+    positionType: "บริหาร",
+    positionAdmin: "จัดการงานทั่วไป",
+    positionLine: "ชำนาญงาน",
+    positionNum: "กบห.2",
+    status: "ยังมีชีวิต",
+  },
+  {
+    no: "3",
+    citizenId: "1XXXXXXXXXXXX",
+    name: "นางสาวรัชภรณ์ ภักดี",
+    organization: "ฝ่ายบริหารงานทั่วไป",
+    positionType: "บริหาร",
+    positionAdmin: "บริหาร",
+    positionLine: "ชำนาญการพิเศษ",
+    positionNum: "ลกก.3",
+    status: "ยังมีชีวิต",
+  },
+]);
+
+const visibleColumns2 = ref<string[]>([
+  "no",
+  "name",
+  "position",
+  "level",
+  "institution",
+]);
+// หัวตาราง2
+const columns2 = ref<QTableProps["columns"]>([
+  {
+    name: "no",
+    align: "left",
+    label: "ลำดับ",
+    sortable: true,
+    field: "no",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "name",
+    align: "left",
+    label: "ชื่อ-สกุล",
+    sortable: true,
+    field: "name",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "position",
+    align: "left",
+    label: "ตำแหน่งในสายงาน",
+    sortable: true,
+    field: "position",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "level",
+    align: "left",
+    label: "ระดับ",
+    sortable: true,
+    field: "level",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "institution",
+    align: "left",
+    label: "สังกัด",
+    sortable: true,
+    field: "institution",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+]);
+
+// ข้อมูลตาราง2 (จำลอง)
+const rows2 = ref<any[]>([
+  {
+    no: "1",
+    name: "นายใจดี ยอดใจ ",
+    position: "นักวิชาการพัสดุ",
+    level: "ปฏิบัติการ",
+    institution: "กลุ่มงานโครงสร้างและอัตรากำลัง ๒",
+  },
+  {
+    no: "2",
+    name: "นายจักกริน บัณฑิต",
+    position: "นักวิชาการพัสดุ",
+    level: "ปฏิบัติการ",
+    institution: "กลุ่มงานโครงสร้างและอัตรากำลัง ๒",
+  },
+  {
+    no: "3",
+    name: "นางสาวกัณฐิมา กาฬสินธุ์",
+    position: "นักจัดการงานทั่วไป",
+    level: "ปฏิบัติการ",
+    institution: "กลุ่มงานช่วยนักบริหาร",
+  },
+  {
+    no: "4",
+    name: "นางสาวเมขลา กระจ่างมนตรี",
+    position: "นักจัดการงานทั่วไป",
+    level: "ปฏิบัติการ",
+    institution: "กลุ่มงานช่วยนักบริหาร",
+  },
+  {
+    no: "5",
+    name: "นางสาวฐิติรัตน์ พงษ์ศิริ",
+    position: "นักจัดการงานทั่วไป",
+    level: "ปฏิบัติการ",
+    institution: "กลุ่มงานช่วยนักบริหาร",
+  },
+]);
+
+// หัวตาราง2
+const clickDelete = (id: string) => {
+  $q.dialog({
+    title: "ยืนยันการลบข้อมูล",
+    message: "ต้องการลบข้อมูลนี้ใช่หรือไม่?",
+    cancel: {
+      flat: true,
+      color: "negative",
+    },
+    persistent: true,
+  })
+    .onOk(async () => {})
+    .onCancel(() => {})
+    .onDismiss(() => {});
+};
+const clickClose = async () => {
+  modal.value = false;
+};
+
+const clickCloseNote = async () => {
+  addNote.value = false;
+};
+const clickAdd = () => {
+  modal.value = true;
+};
+const saveNote = async () => {
+  if (saveWriteNote.value.length == 0) {
+    dialogMessage(
+      $q,
+      "ไม่สามารถบันทึกข้อมูลได้",
+      "กรุณาเพิ่มหมายเหตุ",
+      "warning",
+      undefined,
+      "orange",
+      undefined,
+      undefined,
+      true
+    );
+    return;
+  } else {
+    await saveTextNote();
+  }
+};
+const saveTextNote = async () => {};
+
+const redirectToPage = (id?: string) => {
+  router.push({ name: "allocateDetail" });
+};
+// ค้นหาในตาราง
+const filterKeyword = ref<string>("");
+const filterRef = ref<any>(null);
+const resetFilter = () => {
+  filterKeyword.value = "";
+  filterRef.value.focus();
+};
+
+const filterKeyword2 = ref<string>("");
+const filterRef2 = ref<any>(null);
+const resetFilter2 = () => {
+  filterKeyword2.value = "";
+  filterRef2.value.focus();
+};
+
+const attrs = ref<any>(useAttrs());
+
+const paging = ref<boolean>(true);
+const paginationLabel = (start: string, end: string, total: string) => {
+  if (paging.value == true) return " " + start + "-" + end + " ใน " + total;
+  else return start + "-" + end + " ใน " + total;
+};
+</script>
+
+<style lang="scss" scope>
+.filter-card {
+  background-color: #f1f1f1b0;
+}
+
+.toggle-expired-account {
+  font-size: 12px;
+  font-weight: 400;
+  font-size: 15px;
+  line-height: 150%;
+  color: #35373c;
+}
+
+.icon-color {
+  color: #4154b3;
+}
+
+.custom-header-table {
+  max-height: 64vh;
+
+  .q-table tr:nth-child(odd) td {
+    background: white;
+  }
+
+  .q-table tr:nth-child(even) td {
+    background: #f8f8f8;
+  }
+
+  .q-table thead tr {
+    background: #ecebeb;
+  }
+
+  .q-table thead tr th {
+    position: sticky;
+    z-index: 1;
+  }
+
+  /* this will be the loading indicator */
+  .q-table thead tr:last-child th {
+    /* height of all previous header rows */
+    top: 48px;
+  }
+
+  .q-table thead tr:first-child th {
+    top: 0;
+  }
+}
+</style>
diff --git a/src/modules/07_insignia/components/4_Allocate/allocateAdd.vue b/src/modules/07_insignia/components/4_Allocate/allocateAdd.vue
new file mode 100644
index 000000000..9b3597e6a
--- /dev/null
+++ b/src/modules/07_insignia/components/4_Allocate/allocateAdd.vue
@@ -0,0 +1,77 @@
+<template>
+  <div class="col-xs-12 col-sm-12 col-md-11">
+    <div class="toptitle 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>เพิ่มรายการเครื่องราชอิสริยาภรณ์</div>
+    </div>
+    <div class="col-12">
+      <q-card bordered>
+        <div class="col-12 row q-col-gutter-md q-pa-md">
+          <div class="col-xs-12 col-sm-12 row">
+            <q-separator />
+            <div class="col-12 row q-pa-sm q-col-gutter-sm">
+              <q-input class="col-2" dense outlined v-model="year" label="ปี" />
+              <q-input
+                class="col-8"
+                dense
+                outlined
+                v-model="typeInsig"
+                label="ประเภทเครื่องราชอิสริยาภรณ์"
+              />
+              <q-input
+                class="col-2"
+                dense
+                outlined
+                v-model="total"
+                label="จำนวน"
+              />
+            </div>
+          </div>
+        </div>
+        <q-separator />
+        <q-separator />
+        <div class="row col-12 q-pa-sm">
+          <q-space />
+          <q-btn
+            unelevated
+            dense
+            class="q-px-md items-center"
+            color="light-blue-10"
+            label="บันทึก"
+            @click="router.go(-1)"
+          />
+        </div>
+      </q-card>
+    </div>
+  </div>
+</template>
+<script setup lang="ts">
+import type { QTableProps } from "quasar";
+import { ref } from "vue";
+import { useQuasar } from "quasar";
+import { useRouter } from "vue-router";
+import { useCounterMixin } from "@/stores/mixin";
+
+const mixin = useCounterMixin();
+const { date2Thai } = mixin;
+const router = useRouter();
+const $q = useQuasar();
+const dateStart = ref<any>(new Date());
+const dateEnd = ref<any>(new Date());
+
+const total = ref<any>("");
+const typeInsig = ref<string>("");
+const year = ref<string>("");
+const datelast = ref<string>("");
+
+const routeName = router.currentRoute.value.name;
+</script>
diff --git a/src/modules/07_insignia/components/4_Allocate/detail.vue b/src/modules/07_insignia/components/4_Allocate/detail.vue
new file mode 100644
index 000000000..514c8d7b9
--- /dev/null
+++ b/src/modules/07_insignia/components/4_Allocate/detail.vue
@@ -0,0 +1,353 @@
+<template>
+  <div class="toptitle text-dark col-12 row items-center">
+    หน่วยงานจัดสรรเครื่องราชอิสริยาภรณ์ {{ name }}
+  </div>
+  <q-card bordered class="q-py-sm row col-12">
+    <div class="col-12 row bg-white">
+      <div class="fit q-px-md q-py-sm">
+        <div class="row col-12 q-col-gutter-md fit">
+          <cardTop
+            :amount="stat.total"
+            label="จำนวนเครื่องราช ฯ ทั้งหมด"
+            color="#016987"
+          />
+          <cardTop
+            :amount="stat.sendInsig"
+            label="จำนวนเครื่องราช ฯ ที่จัดสรรให้หน่วยงานแล้ว"
+            color="#02A998"
+          />
+          <cardTop
+            :amount="stat.remainInsig"
+            label="จำนวนเครื่องราช ฯ คงเหลือ"
+            color="#2EA0FF"
+          />
+        </div>
+      </div>
+    </div>
+  </q-card>
+  <q-card flat bordered class="col-12 q-mt-sm q-pa-md">
+    <div class="row q-col-gutter-sm">
+      <div class="row col-12 q-col-gutter-sm">
+        <div>
+          <q-btn
+            @click="clickAdd()"
+            size="12px"
+            flat
+            round
+            color="add"
+            icon="mdi-plus"
+          >
+            <q-tooltip>เพิ่มรายการจัดสรรเครื่องราชอิสริยาภรณ์</q-tooltip>
+          </q-btn>
+        </div>
+        <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"
+        />
+      </div>
+      <div class="col-12">
+        <q-table
+          ref="table"
+          :columns="columns"
+          :rows="rows"
+          :filter="filterKeyword"
+          row-key="id"
+          flat
+          bordered
+          :paging="true"
+          dense
+          class="custom-header-table"
+          v-bind="attrs"
+          :visible-columns="visibleColumns"
+          :pagination-label="paginationLabel"
+          v-model:pagination="pagination"
+        >
+          <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">
+                {{ props.rowIndex + 1 }}
+              </q-td>
+              <q-td key="organization" :props="props">
+                <!-- @click="redirectToPage(props.row.id)" -->
+                {{ props.row.organization }}
+              </q-td>
+              <q-td key="totalInsignia" :props="props">
+                <!-- @click="redirectToPage(props.row.id)" -->
+                {{ props.row.totalInsignia }}
+              </q-td>
+              <q-td key="allocate" :props="props">
+                <!-- @click="redirectToPage(props.row.id)" -->
+                {{ props.row.allocate }}
+              </q-td>
+              <q-td key="remain" :props="props">
+                <!-- @click="redirectToPage(props.row.id)" -->
+                {{ props.row.remain }}
+              </q-td>
+            </q-tr>
+          </template>
+          <template v-slot:pagination="scope">
+            <q-pagination
+              v-model="pagination.page"
+              active-color="primary"
+              color="dark"
+              :max="scope.pagesNumber"
+              :max-pages="5"
+              size="sm"
+              boundary-links
+              direction-links
+            ></q-pagination>
+          </template>
+        </q-table>
+      </div>
+    </div>
+  </q-card>
+</template>
+
+<script setup lang="ts">
+import { ref, useAttrs } from "vue";
+import type { QTableProps } from "quasar";
+import router from "@/router";
+import { useQuasar } from "quasar";
+import cardTop from "@/modules/07_insignia/components/2_Manage/StatCard.vue";
+import type { FormProprsalsRound } from " @/modules/07_insignia/interface/request/Main.ts";
+
+const name = ref<string>("");
+const $q = useQuasar(); //ใช้ noti quasar
+const modal = ref<boolean>(false);
+const pagination = ref({
+  sortBy: "desc",
+  descending: false,
+  page: 1,
+  rowsPerPage: 10,
+});
+const stat = ref<any>({
+  total: 10,
+  sendInsig: 9,
+  remainInsig: 1,
+});
+
+const visibleColumns = ref<string[]>([
+  "no",
+  "organization",
+  "totalInsignia",
+  "allocate",
+  "remain",
+]); //ค้นหา คอลัมน์ คอลัมน์ที่แสดง
+
+// หัวตาราง
+const columns = ref<QTableProps["columns"]>([
+  {
+    name: "no",
+    align: "left",
+    label: "ลำดับ",
+    sortable: true,
+    field: "no",
+    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: "totalInsignia",
+    align: "left",
+    label: "จำนวนครื่องราช ฯ ที่ได้รับ",
+    sortable: true,
+    field: "totalInsignia",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "allocate",
+    align: "left",
+    label: "จัดสรรให้ข้าราชการแล้ว",
+    sortable: true,
+    field: "allocate",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "remain",
+    align: "left",
+    label: "คงเหลือ",
+    sortable: true,
+    field: "remain",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+]);
+
+// ข้อมูลตาราง (จำลอง)
+const rows = ref<any[]>([
+  {
+    no: "1",
+    organization: "โครงสร้างและอัตรากำลัง",
+    totalInsignia: "3",
+    allocate: 3,
+    remain: 0,
+  },
+  {
+    no: "2",
+    organization: "การเรียนรู้มหานคร",
+    totalInsignia: "3",
+    allocate: 0,
+    remain: 0,
+  },
+  {
+    no: "3",
+    organization: "สารสนเทศทรัพยากรบุคคล",
+    totalInsignia: "2",
+    allocate: 2,
+    remain: 0,
+  },
+  {
+    no: "4",
+    organization: "วินัยและเสริมสร้างจริยธรรม",
+    totalInsignia: "1",
+    allocate: 1,
+    remain: 0,
+  },
+]);
+
+// หัวตาราง2
+const clickDelete = (id: string) => {
+  $q.dialog({
+    title: "ยืนยันการลบข้อมูล",
+    message: "ต้องการลบข้อมูลนี้ใช่หรือไม่?",
+    cancel: {
+      flat: true,
+      color: "negative",
+    },
+    persistent: true,
+  })
+    .onOk(async () => {})
+    .onCancel(() => {})
+    .onDismiss(() => {});
+};
+
+const clickAdd = () => {
+  router.push({ name: "allocateDetailAdd" });
+};
+
+// const redirectToPage = (id?: string) => {
+//   router.push({ name: "allocateDetail" });
+// };
+// ค้นหาในตาราง
+const filterKeyword = ref<string>("");
+const filterRef = ref<any>(null);
+const resetFilter = () => {
+  filterKeyword.value = "";
+  filterRef.value.focus();
+};
+
+const filterKeyword2 = ref<string>("");
+const filterRef2 = ref<any>(null);
+const resetFilter2 = () => {
+  filterKeyword2.value = "";
+  filterRef2.value.focus();
+};
+
+const attrs = ref<any>(useAttrs());
+
+const paging = ref<boolean>(true);
+const paginationLabel = (start: string, end: string, total: string) => {
+  if (paging.value == true) return " " + start + "-" + end + " ใน " + total;
+  else return start + "-" + end + " ใน " + total;
+};
+</script>
+
+<style lang="scss" scope>
+.filter-card {
+  background-color: #f1f1f1b0;
+}
+
+.toggle-expired-account {
+  font-size: 12px;
+  font-weight: 400;
+  font-size: 15px;
+  line-height: 150%;
+  color: #35373c;
+}
+
+.icon-color {
+  color: #4154b3;
+}
+
+.custom-header-table {
+  max-height: 64vh;
+
+  .q-table tr:nth-child(odd) td {
+    background: white;
+  }
+
+  .q-table tr:nth-child(even) td {
+    background: #f8f8f8;
+  }
+
+  .q-table thead tr {
+    background: #ecebeb;
+  }
+
+  .q-table thead tr th {
+    position: sticky;
+    z-index: 1;
+  }
+
+  /* this will be the loading indicator */
+  .q-table thead tr:last-child th {
+    /* height of all previous header rows */
+    top: 48px;
+  }
+
+  .q-table thead tr:first-child th {
+    top: 0;
+  }
+}
+</style>
diff --git a/src/modules/07_insignia/components/4_Allocate/listAllocate.vue b/src/modules/07_insignia/components/4_Allocate/listAllocate.vue
new file mode 100644
index 000000000..d7834ae25
--- /dev/null
+++ b/src/modules/07_insignia/components/4_Allocate/listAllocate.vue
@@ -0,0 +1,359 @@
+<template>
+  <div class="toptitle text-dark col-12 row items-center">
+    จัดสรรเครื่องราชอิสริยาภรณ์
+  </div>
+  <q-card flat bordered class="col-12 q-mt-sm q-pa-md">
+    <div class="row q-col-gutter-sm">
+      <div class="row col-12 q-col-gutter-sm">
+        <div>
+          <q-btn
+            @click="clickAdd()"
+            size="12px"
+            flat
+            round
+            color="add"
+            icon="mdi-plus"
+          >
+            <q-tooltip>เพิ่มรายการจัดสรรเครื่องราชอิสริยาภรณ์</q-tooltip>
+          </q-btn>
+        </div>
+        <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"
+        />
+      </div>
+      <div class="col-12">
+        <q-table
+          ref="table"
+          :columns="columns"
+          :rows="rows"
+          :filter="filterKeyword"
+          row-key="id"
+          flat
+          bordered
+          :paging="true"
+          dense
+          class="custom-header-table"
+          v-bind="attrs"
+          :visible-columns="visibleColumns"
+          :pagination-label="paginationLabel"
+          v-model:pagination="pagination"
+        >
+          <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="redirectToPage(props.row.id)"
+              >
+                {{ props.rowIndex + 1 }}
+              </q-td>
+              <q-td
+                key="year"
+                :props="props"
+                @click="redirectToPage(props.row.id)"
+              >
+                {{ props.row.year }}
+              </q-td>
+              <q-td
+                key="insignia"
+                :props="props"
+                @click="redirectToPage(props.row.id)"
+              >
+                {{ props.row.insignia }}
+              </q-td>
+              <q-td
+                key="total"
+                :props="props"
+                @click="redirectToPage(props.row.id)"
+              >
+                {{ props.row.total }}
+              </q-td>
+              <q-td
+                key="done"
+                :props="props"
+                @click="redirectToPage(props.row.id)"
+              >
+                {{ props.row.done }}
+              </q-td>
+              <q-td
+                key="remain"
+                :props="props"
+                @click="redirectToPage(props.row.id)"
+              >
+                {{ props.row.remain }}
+              </q-td>
+            </q-tr>
+          </template>
+          <template v-slot:pagination="scope">
+            <q-pagination
+              v-model="pagination.page"
+              active-color="primary"
+              color="dark"
+              :max="scope.pagesNumber"
+              :max-pages="5"
+              size="sm"
+              boundary-links
+              direction-links
+            ></q-pagination>
+          </template>
+        </q-table>
+      </div>
+    </div>
+  </q-card>
+</template>
+
+<script setup lang="ts">
+import { ref, useAttrs } from "vue";
+import type { QTableProps } from "quasar";
+import router from "@/router";
+import { useQuasar } from "quasar";
+import type { FormProprsalsRound } from " @/modules/07_insignia/interface/request/Main.ts";
+
+const $q = useQuasar(); //ใช้ noti quasar
+const modal = ref<boolean>(false);
+const pagination = ref({
+  sortBy: "desc",
+  descending: false,
+  page: 1,
+  rowsPerPage: 10,
+});
+
+const visibleColumns = ref<string[]>([
+  "no",
+  "year",
+  "insignia",
+  "total",
+  "done",
+  "remain",
+]); //ค้นหา คอลัมน์ คอลัมน์ที่แสดง
+
+// หัวตาราง
+const columns = ref<QTableProps["columns"]>([
+  {
+    name: "no",
+    align: "left",
+    label: "ลำดับ",
+    sortable: true,
+    field: "no",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "year",
+    align: "left",
+    label: "ปี",
+    sortable: true,
+    field: "year",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "insignia",
+    align: "left",
+    label: "เครื่องราชอิสริยาภรณ์",
+    sortable: true,
+    field: "insignia",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "total",
+    align: "left",
+    label: "จำนวนทั้งหมด",
+    sortable: true,
+    field: "total",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "done",
+    align: "left",
+    label: "จัดสรรแล้ว",
+    sortable: true,
+    field: "done",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "remain",
+    align: "left",
+    label: "คงเหลือ",
+    sortable: true,
+    field: "remain",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+]);
+
+// ข้อมูลตาราง (จำลอง)
+const rows = ref<FormProprsalsRound[]>([
+  {
+    no: "1",
+    year: "2566",
+    insignia: "เบญจมาภรณ์มงกุฎไทย",
+    total: 10,
+    done: 9,
+    remain: 1,
+  },
+  {
+    round: "2",
+    year: "2566",
+    insignia: "จัตุรถาภรณ์มงกุฎไทย",
+    total: 20,
+    done: 18,
+    remain: 2,
+  },
+  {
+    round: "3",
+    year: "2566",
+    insignia: "ทวีติยาภรณ์มงกุฎไทย",
+    total: 15,
+    done: 10,
+    remain: 5,
+  },
+  {
+    round: "4",
+    year: "2566",
+    insignia: "เหรียญเงินช้างเผือก",
+    total: 5,
+    done: 5,
+    remain: 0,
+  },
+]);
+
+// หัวตาราง2
+const clickDelete = (id: string) => {
+  $q.dialog({
+    title: "ยืนยันการลบข้อมูล",
+    message: "ต้องการลบข้อมูลนี้ใช่หรือไม่?",
+    cancel: {
+      flat: true,
+      color: "negative",
+    },
+    persistent: true,
+  })
+    .onOk(async () => {})
+    .onCancel(() => {})
+    .onDismiss(() => {});
+};
+
+const clickAdd = () => {
+  router.push({ name: "allocateAdd" });
+};
+const redirectToPage = (id?: string) => {
+  router.push({ name: "allocateDetail" });
+};
+// ค้นหาในตาราง
+const filterKeyword = ref<string>("");
+const filterRef = ref<any>(null);
+const resetFilter = () => {
+  filterKeyword.value = "";
+  filterRef.value.focus();
+};
+
+const filterKeyword2 = ref<string>("");
+const filterRef2 = ref<any>(null);
+const resetFilter2 = () => {
+  filterKeyword2.value = "";
+  filterRef2.value.focus();
+};
+
+const attrs = ref<any>(useAttrs());
+
+const paging = ref<boolean>(true);
+const paginationLabel = (start: string, end: string, total: string) => {
+  if (paging.value == true) return " " + start + "-" + end + " ใน " + total;
+  else return start + "-" + end + " ใน " + total;
+};
+</script>
+
+<style lang="scss" scope>
+.filter-card {
+  background-color: #f1f1f1b0;
+}
+
+.toggle-expired-account {
+  font-size: 12px;
+  font-weight: 400;
+  font-size: 15px;
+  line-height: 150%;
+  color: #35373c;
+}
+
+.icon-color {
+  color: #4154b3;
+}
+
+.custom-header-table {
+  max-height: 64vh;
+
+  .q-table tr:nth-child(odd) td {
+    background: white;
+  }
+
+  .q-table tr:nth-child(even) td {
+    background: #f8f8f8;
+  }
+
+  .q-table thead tr {
+    background: #ecebeb;
+  }
+
+  .q-table thead tr th {
+    position: sticky;
+    z-index: 1;
+  }
+
+  /* this will be the loading indicator */
+  .q-table thead tr:last-child th {
+    /* height of all previous header rows */
+    top: 48px;
+  }
+
+  .q-table thead tr:first-child th {
+    top: 0;
+  }
+}
+</style>
diff --git a/src/modules/07_insignia/components/DialogHeader.vue b/src/modules/07_insignia/components/DialogHeader.vue
new file mode 100644
index 000000000..8aa03351d
--- /dev/null
+++ b/src/modules/07_insignia/components/DialogHeader.vue
@@ -0,0 +1,27 @@
+<template>
+  <q-toolbar>
+    <q-toolbar-title class="text-subtitle2 text-bold">{{
+      tittle
+    }}</q-toolbar-title>
+    <q-btn
+      icon="close"
+      unelevated
+      round
+      dense
+      @click="close"
+      style="color: #ff8080; background-color: #ffdede"
+    />
+  </q-toolbar>
+</template>
+<script setup lang="ts">
+const props = defineProps({
+  tittle: String,
+  close: {
+    type: Function,
+    default: () => console.log("not function"),
+  },
+});
+const close = async () => {
+  props.close();
+};
+</script>
diff --git a/src/modules/07_insignia/components/RecordInsignia.vue b/src/modules/07_insignia/components/RecordInsignia.vue
index 5cae3b3c6..25d261701 100644
--- a/src/modules/07_insignia/components/RecordInsignia.vue
+++ b/src/modules/07_insignia/components/RecordInsignia.vue
@@ -22,10 +22,11 @@
     >
       <q-tab name="hight" label="ขั้นสายสะพาน" />
       <q-tab name="low" label="ขั้นต่ำกว่าสายสะพาน" />
+      <q-tab name="medal" label="เหรียญบำเหน็จบำนาญ" />
     </q-tabs>
     <q-separator />
     <div class="q-py-md q-px-lg">
-      <div>
+      <!-- <div>
         <label class="q-mr-sm">รอบ</label>
         <q-btn
           flat
@@ -36,10 +37,84 @@
           :class="getArrow(arrow)"
           @click="clickRound"
         />
-      </div>
+      </div> -->
       <Transition>
         <div v-if="arrow" class="bg-base rounded-borders q-pa-md">
           <div class="row col-12 q-col-gutter-x-lg q-col-gutter-y-md">
+            <!-- <div class="col-xs-6 col-md-2">
+              <q-input
+                class="bg-white"
+                outlined
+                dense
+                lazy-rules
+                v-model="issue"
+                :label="`${'ฉบับ'}`"
+                hide-bottom-space
+              />
+            </div>
+            <div class="col-xs-6 col-md-2">
+              <q-input
+                class="bg-white"
+                outlined
+                dense
+                lazy-rules
+                v-model="book"
+                :label="`${'เล่มที่'}`"
+                hide-bottom-space
+              />
+            </div>
+            <div class="col-xs-6 col-md-2">
+              <q-input
+                class="bg-white"
+                outlined
+                dense
+                lazy-rules
+                v-model="volume"
+                :label="`${'เล่ม'}`"
+                hide-bottom-space
+              />
+            </div>
+            <div class="col-xs-6 col-md-2">
+              <q-input
+                class="bg-white"
+                outlined
+                dense
+                lazy-rules
+                v-model="section"
+                :label="`${'ตอนที่'}`"
+                hide-bottom-space
+              />
+            </div> -->
+            <div class="col-xs-12 col-md-6">
+              <q-file
+                class="bg-white"
+                outlined
+                dense
+                v-model="government"
+                label="ราชกิจจานุเบกษา"
+                hide-bottom-space
+                lazy-rules
+              >
+                <template v-slot:prepend>
+                  <q-icon name="attach_file" color="primary" />
+                </template>
+              </q-file>
+            </div>
+            <div class="col-xs-12 col-md-6">
+              <q-file
+                class="bg-white"
+                outlined
+                dense
+                v-model="document"
+                label="เอกสารประกอบ"
+                hide-bottom-space
+                lazy-rules
+              >
+                <template v-slot:prepend>
+                  <q-icon name="attach_file" color="primary" />
+                </template>
+              </q-file>
+            </div>
             <div class="col-xs-6 col-md-2">
               <datepicker
                 menu-class-name="modalfix"
@@ -116,79 +191,8 @@
                 </template>
               </datepicker>
             </div>
-            <div class="col-xs-6 col-md-2">
-              <q-input
-                class="bg-white"
-                outlined
-                dense
-                lazy-rules
-                v-model="issue"
-                :label="`${'ฉบับ'}`"
-                hide-bottom-space
-              />
-            </div>
-            <div class="col-xs-6 col-md-2">
-              <q-input
-                class="bg-white"
-                outlined
-                dense
-                lazy-rules
-                v-model="book"
-                :label="`${'เล่มที่'}`"
-                hide-bottom-space
-              />
-            </div>
-            <div class="col-xs-6 col-md-2">
-              <q-input
-                class="bg-white"
-                outlined
-                dense
-                lazy-rules
-                v-model="volume"
-                :label="`${'เล่ม'}`"
-                hide-bottom-space
-              />
-            </div>
-            <div class="col-xs-6 col-md-2">
-              <q-input
-                class="bg-white"
-                outlined
-                dense
-                lazy-rules
-                v-model="section"
-                :label="`${'ตอนที่'}`"
-                hide-bottom-space
-              />
-            </div>
-            <div class="col-xs-12 col-md-6">
-              <q-file
-                class="bg-white"
-                outlined
-                dense
-                v-model="government"
-                label="ราชกิจจานุเบกษา"
-                hide-bottom-space
-                lazy-rules
-              >
-                <template v-slot:prepend>
-                  <q-icon name="attach_file" color="primary" />
-                </template>
-              </q-file>
-            </div>
-            <div class="col-xs-12 col-md-6">
-              <q-file
-                class="bg-white"
-                outlined
-                dense
-                v-model="document"
-                label="เอกสารประกอบ"
-                hide-bottom-space
-                lazy-rules
-              >
-                <template v-slot:prepend>
-                  <q-icon name="attach_file" color="primary" />
-                </template>
-              </q-file>
+            <div class="col-xs-12 col-md-6 justify-end">
+              <q-btn label="บันทึก" @click="save" color="public" />
             </div>
           </div>
         </div>
diff --git a/src/modules/07_insignia/router.ts b/src/modules/07_insignia/router.ts
index 81ae5c6da..5eb982863 100644
--- a/src/modules/07_insignia/router.ts
+++ b/src/modules/07_insignia/router.ts
@@ -14,7 +14,16 @@ const insigniaProposals = () =>
   import("@/modules/07_insignia/components/1_Proposals/listProposals.vue");
 const roundAdd = () =>
   import("@/modules/07_insignia/components/1_Proposals/addProposals.vue");
-
+const listMange = () =>
+  import("@/modules/07_insignia/components/2_Manage/listManage.vue");
+const listAllocate = () =>
+  import("@/modules/07_insignia/components/4_Allocate/listAllocate.vue");
+const allocateAdd = () =>
+  import("@/modules/07_insignia/components/4_Allocate/allocateAdd.vue");
+const allocateDetail = () =>
+  import("@/modules/07_insignia/components/4_Allocate/detail.vue");
+const allocateDetailAdd = () =>
+  import("@/modules/07_insignia/components/4_Allocate/addDetail.vue");
 export default [
   {
     path: "/insignia",
@@ -87,4 +96,54 @@ export default [
       Role: "insignia",
     },
   },
+  {
+    path: "/insignia/manage/list-manage",
+    name: "insigniaManage",
+    component: listMange,
+    meta: {
+      Auth: true,
+      Key: [8.6],
+      Role: "insignia",
+    },
+  },
+  {
+    path: "/insignia/allocate/list-allocate",
+    name: "insigniaAllocate",
+    component: listAllocate,
+    meta: {
+      Auth: true,
+      Key: [8.7],
+      Role: "insignia",
+    },
+  },
+  {
+    path: "/insignia/allocate/allocate-add",
+    name: "allocateAdd",
+    component: allocateAdd,
+    meta: {
+      Auth: true,
+      Key: [8.8],
+      Role: "insignia",
+    },
+  },
+  {
+    path: "/insignia/allocate/detail",
+    name: "allocateDetail",
+    component: allocateDetail,
+    meta: {
+      Auth: true,
+      Key: [8.9],
+      Role: "insignia",
+    },
+  },
+  {
+    path: "/insignia/allocate/detail-add",
+    name: "allocateDetailAdd",
+    component: allocateDetailAdd,
+    meta: {
+      Auth: true,
+      Key: [8.9],
+      Role: "insignia",
+    },
+  },
 ];

From d6c5aef69e551e70b8e6e20a5faff86df7aeb9b9 Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Fri, 4 Aug 2023 14:26:13 +0700
Subject: [PATCH 031/113] api get,delete listOrder

---
 src/api/05_placement/api.placement.ts         |   1 +
 .../OrderPlacement/MainOrderPlacement.vue     | 279 +++++-------------
 .../components/OrderPlacement/step/step01.vue |  23 +-
 src/modules/05_placement/store.ts             |   2 +
 4 files changed, 97 insertions(+), 208 deletions(-)

diff --git a/src/api/05_placement/api.placement.ts b/src/api/05_placement/api.placement.ts
index 5ca86af6d..c2159003a 100644
--- a/src/api/05_placement/api.placement.ts
+++ b/src/api/05_placement/api.placement.ts
@@ -55,6 +55,7 @@ export default {
   // order
   yearOptionsOrder: () => `${order}/order/fiscal-year`,
   listOrder: () => `${order}/order`,
+  detailOrder:(orderId:string) => `${order}/order/${orderId}`,
   typeOrder: () => `${order}/order/order-type`,
   examroundOrder: () => `${order}/order/detail/exam-round`,
 };
diff --git a/src/modules/05_placement/components/OrderPlacement/MainOrderPlacement.vue b/src/modules/05_placement/components/OrderPlacement/MainOrderPlacement.vue
index b00790382..8d0e90c74 100644
--- a/src/modules/05_placement/components/OrderPlacement/MainOrderPlacement.vue
+++ b/src/modules/05_placement/components/OrderPlacement/MainOrderPlacement.vue
@@ -156,7 +156,7 @@
               <q-tr
                 :props="props"
                 class="cursor-pointer"
-                @click="redirectToPage(props.row.Order)"
+                @click="redirectToPage(props.row.orderId)"
               >
                 <q-td key="Order" :props="props">
                   {{ props.row.Order }}
@@ -186,7 +186,7 @@
                     flat
                     round
                     color="red"
-                    @click.stop="clickDelete(props.row.id)"
+                    @click.stop="clickDelete(props.row.orderId)"
                     icon="mdi-delete"
                   >
                     <q-tooltip>ลบข้อมูล</q-tooltip>
@@ -217,7 +217,10 @@
 import { onMounted, reactive, ref, useAttrs, computed } from "vue";
 import type { QTableProps } from "quasar";
 import type { FormOrderPlacementMainData } from "@/modules/05_placement/interface/request/Main";
-import type { DataOption } from "@/modules/05_placement/interface/index/Main";
+import type {
+  DataOption,
+  DataOption1,
+} from "@/modules/05_placement/interface/index/Main";
 import { useCounterMixin } from "@/stores/mixin";
 import { useOrderPlacementDataStore } from "@/modules/05_placement/store";
 import router from "@/router";
@@ -227,11 +230,10 @@ import config from "@/app.config";
 
 const $q = useQuasar(); //ใช้ noti quasar
 const mixin = useCounterMixin();
-const { showLoader, hideLoader, messageError, date2Thai, dateText } = mixin;
+const { showLoader, hideLoader, messageError, date2Thai, dateText, success } =
+  mixin;
 const DataStore = useOrderPlacementDataStore();
 
-
-
 const pagination = ref({
   sortBy: "desc",
   descending: false,
@@ -344,146 +346,17 @@ const columns = ref<QTableProps["columns"]>([
 
 // ข้อมูลตาราง (จำลอง)
 const rows = ref<FormOrderPlacementMainData[]>([
-  {
-    Order: "คำสั่งแต่งตั้งผู้สอบแข่งขันได้",
-    OrderNum: "1/2565",
-    fiscalYear: 2565,
-    OrderDate: "30 พ.ค. 2565",
-    OrderBy: "สำนักงาน กทม.",
-    Signer: "นาม สมคิด ยอดใจ ",
-    OrderStatus: "จัดทำร่างคำสั่ง",
-    OrderType: "คำสั่งย้าย",
-  },
-
-  {
-    Order: "คำสั่งแต่งตั้งผู้สอบแข่งขันได้",
-    OrderNum: "1/2565",
-    fiscalYear: 2565,
-    OrderDate: "30 พ.ค. 2565",
-    OrderBy: "สำนักงาน กทม.",
-    Signer: "นาม สมคิด ยอดใจ ",
-    OrderStatus: "จัดทำร่างคำสั่ง",
-    OrderType: "คำสั่งบรรจุและแต่งตั้ง",
-  },
-  {
-    Order: "คำสั่งแต่งตั้งผู้สอบแข่งขันได้",
-    OrderNum: "1/2564",
-    fiscalYear: 2564,
-    OrderDate: "30 พ.ค. 2564",
-    OrderBy: "สำนักงาน กทม.",
-    Signer: "นาม สมคิด ยอดใจ ",
-    OrderStatus: "บัญชีแนบท้าย",
-    OrderType: "คำสั่งบรรจุและแต่งตั้ง",
-  },
-  {
-    Order: "คำสั่งแต่งตั้งผู้สอบแข่งขันได้",
-    OrderNum: "1/2564",
-    fiscalYear: 2564,
-    OrderDate: "30 พ.ค. 2564",
-    OrderBy: "สำนักงาน กทม.",
-    Signer: "นาม สมคิด ยอดใจ ",
-    OrderStatus: "บัญชีแนบท้าย",
-    OrderType: "คำสั่งย้าย",
-  },
-  {
-    Order: "คำสั่งแต่งตั้งผู้สอบแข่งขันได้",
-    OrderNum: "1/2564",
-    fiscalYear: 2564,
-    OrderDate: "30 พ.ค. 2564",
-    OrderBy: "สำนักงาน กทม.",
-    Signer: "นาม สมคิด ยอดใจ ",
-    OrderStatus: "ส่งสำเนาคำสั่ง",
-    OrderType: "คำสั่งย้าย",
-  },
-  {
-    Order: "คำสั่งแต่งตั้งผู้สอบแข่งขันได้",
-    OrderNum: "1/2564",
-    fiscalYear: 2564,
-    OrderDate: "30 พ.ค. 2564",
-    OrderBy: "สำนักงาน กทม.",
-    Signer: "นาม สมคิด ยอดใจ ",
-    OrderStatus: "ส่งสำเนาคำสั่ง",
-    OrderType: "คำสั่งบรรจุและแต่งตั้ง",
-  },
-  {
-    Order: "คำสั่งแต่งตั้งผู้สอบแข่งขันได้",
-    OrderNum: "1/2566",
-    fiscalYear: 2566,
-    OrderDate: "30 พ.ค. 2566",
-    OrderBy: "สำนักงาน กทม.",
-    Signer: "นาม สมคิด ยอดใจ ",
-    OrderStatus: "รอลงนาม",
-    OrderType: "คำสั่งบรรจุและแต่งตั้ง",
-  },
-  {
-    Order: "คำสั่งแต่งตั้งผู้สอบแข่งขันได้",
-    OrderNum: "1/2566",
-    fiscalYear: 2566,
-    OrderDate: "30 พ.ค. 2566",
-    OrderBy: "สำนักงาน กทม.",
-    Signer: "นาม สมคิด ยอดใจ ",
-    OrderStatus: "ออกคำสั่งแล้ว",
-    OrderType: "คำสั่งแต่งตั้ง",
-  },
-  {
-    Order: "คำสั่งแต่งตั้งผู้สอบแข่งขันได้",
-    OrderNum: "1/2565",
-    fiscalYear: 2565,
-    OrderDate: "30 พ.ค. 2565",
-    OrderBy: "สำนักงาน กทม.",
-    Signer: "นาม สมคิด ยอดใจ ",
-    OrderStatus: "ออกคำสั่งแล้ว",
-    OrderType: "คำสั่งบรรจุและแต่งตั้ง",
-  },
-  {
-    Order: "คำสั่งแต่งตั้งผู้สอบแข่งขันได้",
-    OrderNum: "1/2566",
-    fiscalYear: 2566,
-    OrderDate: "30 พ.ค. 2566",
-    OrderBy: "สำนักงาน กทม.",
-    Signer: "นาม สมคิด ยอดใจ ",
-    OrderStatus: "ออกคำสั่งแล้ว",
-    OrderType: "คำสั่งแต่งตั้ง",
-  },
-  {
-    Order: "คำสั่งแต่งตั้งผู้สอบแข่งขันได้",
-    OrderNum: "1/2566",
-    fiscalYear: 2566,
-    OrderDate: "30 พ.ค. 2566",
-    OrderBy: "สำนักงาน กทม.",
-    Signer: "นาม สมคิด ยอดใจ ",
-    OrderStatus: "ออกคำสั่งแล้ว",
-    OrderType: "คำสั่งย้าย",
-  },
-
-  {
-    Order: "คำสั่งแต่งตั้งผู้สอบแข่งขันได้",
-    OrderNum: "1/2564",
-    fiscalYear: 2564,
-    OrderDate: "30 พ.ค. 2564",
-    OrderBy: "สำนักงาน กทม.",
-    Signer: "นาม สมคิด ยอดใจ ",
-    OrderStatus: "ออกคำสั่งแล้ว",
-    OrderType: "คำสั่งแต่งตั้ง",
-  },
-
-  {
-    Order: "คำสั่งแต่งตั้งผู้สอบแข่งขันได้",
-    OrderNum: "1/2566",
-    fiscalYear: 2566,
-    OrderDate: "30 พ.ค. 2566",
-    OrderBy: "สำนักงาน กทม.",
-    Signer: "นาม สมคิด ยอดใจ ",
-    OrderStatus: "ออกคำสั่งแล้ว",
-    OrderType: "คำสั่งแต่งตั้ง",
-  },
+  // {
+  // Order: "คำสั่งแต่งตั้งผู้สอบแข่งขันได้",
+  // OrderNum: "1/2565",
+  // fiscalYear: 2565,
+  // OrderDate: "30 พ.ค. 2565",
+  // OrderBy: "สำนักงาน กทม.",
+  // Signer: "นาม สมคิด ยอดใจ ",
+  // OrderStatus: "จัดทำร่างคำสั่ง",
+  // OrderType: "คำสั่งย้าย",
+  // },
 ]);
-// const OrderStatusOption = [
-//   "ทั้งหมด",
-//   "ยังไม่ได้บรรจุ",
-//   "บรรจุแล้ว",
-//   "ยังไม่ได้ออกคำสั่ง",
-// ];
 
 let OriginalData = ref<FormOrderPlacementMainData[]>([]);
 let UpdataData = ref<FormOrderPlacementMainData[]>([]);
@@ -497,13 +370,27 @@ onMounted(async () => {
 });
 
 const OriginalDataFetch = async () => {
-  // API
-  // await http.get(config.API.listOrder()).then((res: any) => {
-  //   console.log("list", res);
-  // });
-  // .catch((e: any) => {
-  //   messageError($q, e);
-  // })
+  await http
+    .get(config.API.listOrder())
+    .then((res: any) => {
+      console.log("list", res);
+      rows.value = res.data.result.map((e: any) => ({
+        orderId: e.orderId,
+        Order: e.orderName,
+        OrderNum: e.orderNo,
+        fiscalYear: Number(e.fiscalYear),
+        OrderDate: date2Thai(e.orderDate),
+        OrderBy: e.orderBy,
+        Signer: "นาม สมคิด ยอดใจ ",
+        OrderStatus: e.orderStatusName,
+        orderStatusValue: e.orderStatusValue,
+        OrderType: e.orderTypeName,
+        orderTypeValue: e.orderTypeValue,
+      }));
+    })
+    .catch((e: any) => {
+      messageError($q, e);
+    });
   //   .finally(async () => {
   //   });
   await DataStore.DataMainOrder(rows.value);
@@ -513,7 +400,6 @@ const OriginalDataFetch = async () => {
 
 // ดูรายการหน้าต่อไป
 const redirectToPage = (id?: string) => {
-  console.log(id);
   router.push(`/placement/order/detail/${id}`);
 };
 
@@ -528,27 +414,27 @@ const clickDelete = (id: string) => {
     persistent: true,
   })
     .onOk(async () => {
-      //   await deleteData(id);
+      await deleteData(id);
     })
     .onCancel(() => {})
     .onDismiss(() => {});
 };
 
-// const deleteData = async (id: string) => {
-//   showLoader();
-//   await http
-//     .delete(config.API.orderReplace(id))
-//     .then((res) => {
-//       success($q, "ลบข้อมูลสำเร็จ");
-//     })
-//     .catch((e) => {
-//       messageError($q, e);
-//     })
-//     .finally(async () => {
-//       hideLoader();
-//       await fetchData();
-//     });
-// };
+const deleteData = async (id: string) => {
+  showLoader();
+  await http
+    .delete(config.API.detailOrder(id))
+    .then((res) => {
+      success($q, "ลบข้อมูลสำเร็จ");
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(async () => {
+      hideLoader();
+      await OriginalDataFetch();
+    });
+};
 
 const clickAdd = () => {
   router.push({ name: "Orderplacementadd" });
@@ -568,14 +454,13 @@ const fiscalyearOP = reactive<DataOption[]>([{ id: 0, name: "ทั้งหม
 const addedfiscalYearValues: number[] = [];
 const fiscalYearFilter = async () => {
   await http.get(config.API.yearOptionsOrder()).then((res) => {
-    console.log(res);
+    // console.log(res);
     const response = res.data.result;
     fiscalyearOP.push(...response);
     // const maxNumber = fiscalyearOP.reduce((max: any, e: any) => {
     //   return e.id > max ? e.id : max;
     // }, "");
     // fiscalyear.value = maxNumber;
-    // console.log(fiscalyear.value);
   });
   // API
   // await http
@@ -607,13 +492,13 @@ const fiscalYearFilter = async () => {
 };
 
 const OrderType = ref<string>("");
-const OrderTypeOption = reactive<DataOption[]>([{ id: 0, name: "ทั้งหมด" }]);
+const OrderTypeOption = reactive<DataOption1[]>([{ id: "", name: "ทั้งหมด" }]);
 const addedOrderTypeValues: string[] = [];
 const OrderTypeFilter = async () => {
   await http
     .get(config.API.typeOrder())
     .then((res) => {
-      console.log(res.data);
+      // console.log(res.data);
       const response = res.data.result;
       OrderTypeOption.push(...response);
     })
@@ -660,7 +545,9 @@ const OrderStatus = ref<string>("");
 const OrderStatusText = ref<FormOrderPlacementMainData[]>(
   DataStore.DataMainOrigOrder
 );
-const OrderStatusOption = reactive<DataOption[]>([{ id: 1, name: "ทั้งหมด" }]);
+const OrderStatusOption = reactive<DataOption1[]>([
+  { id: "", name: "ทั้งหมด" },
+]);
 const addedOrderStatusValues: string[] = [];
 const OrderStatusFilter = async () => {
   // API
@@ -677,7 +564,6 @@ const OrderStatusFilter = async () => {
   //   });
   for (let data of OriginalData.value) {
     const OrderStatusValue = data.OrderStatus;
-    console.log(OrderStatusValue);
 
     if (
       OrderStatusValue === null ||
@@ -687,35 +573,17 @@ const OrderStatusFilter = async () => {
     }
 
     if (!addedOrderStatusValues.includes(OrderStatusValue)) {
+      // console.log(OrderStatusValue);
+
       OrderStatusOption.push({
         // id: OrderStatusValue,
-        id: OrderStatusOption.length,
+        id: OrderStatusOption.length.toString(),
         name: OrderStatusValue,
       });
       addedOrderStatusValues.push(OrderStatusValue);
     }
   }
 };
-
-// เลือกปีงบประมาณตาม API
-const searchfiscalyear = async () => {
-  const yearNum = fiscalyear.value! + 543;
-
-  await DataStore.DataUpdateOrder(OrderType.value, OrderStatus.value, yearNum);
-  UpdataData.value = DataStore.DataMainUpdateOrder;
-
-  // API
-  // await http
-  //   .get(config.API.// ตัวอย่าง)
-  //   .then((res: any) => {
-  //   })
-  //   .catch((e: any) => {
-  //     messageError($q, e);
-  //   })
-  //   .finally(async () => {
-  //   });
-};
-
 // ค้นหาในตาราง
 const filterKeyword = ref<string>("");
 const filterRef = ref<any>(null);
@@ -727,22 +595,27 @@ const resetFilter = () => {
 const attrs = ref<any>(useAttrs());
 
 const searchFilterTable = async () => {
-  if (fiscalyear.value !== null && fiscalyear.value !== 0) {
-    fiscalyear.value += 543;
+  if (OrderType.value == "ทั้งหมด") {
+    OrderType.value = "";
   }
-  console.log(fiscalyear.value, OrderType.value, OrderStatus.value);
+  if (OrderStatus.value == "ทั้งหมด") {
+    OrderStatus.value = "";
+  }
+  console.log(
+    "Input value changed:",
+    OrderType.value,
+    OrderStatus.value,
+    fiscalyear.value
+  );
 
-  // console.log('Input value changed:', examTime.value, examType.value, expiredAccount.value);
   await DataStore.DataUpdateOrder(
     OrderType.value,
     OrderStatus.value,
     fiscalyear.value
   );
   UpdataData.value = DataStore.DataMainUpdateOrder;
-  console.log(UpdataData.value);
+  // console.log(UpdataData.value);
 };
-//   UpdataData.value = DataStore.DataMainUpdate;
-// console.log("Input value changed:", OrderStatus.value, OrderType.value);
 
 const paging = ref<boolean>(true);
 const paginationLabel = (start: string, end: string, total: string) => {
diff --git a/src/modules/05_placement/components/OrderPlacement/step/step01.vue b/src/modules/05_placement/components/OrderPlacement/step/step01.vue
index 250093399..526d9a895 100644
--- a/src/modules/05_placement/components/OrderPlacement/step/step01.vue
+++ b/src/modules/05_placement/components/OrderPlacement/step/step01.vue
@@ -511,9 +511,10 @@ const clickEditRow = () => (editRow.value = true);
 onMounted(async () => {
   if (orderId) {
     await fetchdetailOrder();
+  } else {
+    fecthTypeOption();
+    fecthExamRoundOption();
   }
-  fecthTypeOption();
-  fecthExamRoundOption();
 
   // const data = localStorage.getItem("formData");
   // if (data) {
@@ -537,6 +538,20 @@ onMounted(async () => {
 const fetchdetailOrder = async () => {
   showLoader();
   console.log(orderId);
+  let orderIdString = orderId.toString();
+  await http
+    .get(config.API.detailOrder(orderIdString))
+    .then((res) => {
+      console.log(res);
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+      fecthTypeOption();
+      fecthExamRoundOption();
+    });
 };
 const fecthTypeOption = async () => {
   await http
@@ -567,7 +582,7 @@ const submit = async () => {
     orderBy: byOrder.value,
     signatoryBy: nameCommand.value,
     signatoryPosition: positionCommand.value,
-    examRound: test.value,
+    examRound: examRound.value,
     registerPosition: position.value,
     conclusionRegisterNo: register.value,
     conclusionRegisterDate: dateRegister.value,
@@ -586,9 +601,7 @@ const submit = async () => {
         persistent: true,
       }).onOk(async () => {
         showLoader();
-        // localStorage.setItem("formData", JSON.stringify(formdata));
         createListOrder(formdata);
-        // next();
       });
     }
   });
diff --git a/src/modules/05_placement/store.ts b/src/modules/05_placement/store.ts
index 283530593..0fca902c5 100644
--- a/src/modules/05_placement/store.ts
+++ b/src/modules/05_placement/store.ts
@@ -269,6 +269,8 @@ export const useOrderPlacementDataStore = defineStore("placementOrder", () => {
           item.OrderStatus === filter_2 &&
           item.fiscalYear === filterYear
       );
+    } else if (filter_1 == "ทั้งหมด" && filter_2 == "ทั้งหมด" && filterYear !== null) {
+      DataMainUpdateOrder.value = DataMainOrigOrder.value;
     }
   };
 

From 7ee07b9d851d28126eafe8eabeb3ac7979e4911a Mon Sep 17 00:00:00 2001
From: Thanit Konmek <thanit@frappet.com>
Date: Fri, 4 Aug 2023 14:52:57 +0700
Subject: [PATCH 032/113] =?UTF-8?q?=E0=B9=81=E0=B8=81=E0=B9=89=E0=B9=84?=
 =?UTF-8?q?=E0=B8=82=20=E0=B8=97=E0=B8=B0=E0=B9=80=E0=B8=9A=E0=B8=B5?=
 =?UTF-8?q?=E0=B8=A2=E0=B8=99=E0=B8=9B=E0=B8=A3=E0=B8=B0=E0=B8=A7=E0=B8=B1?=
 =?UTF-8?q?=E0=B8=95=E0=B8=B4=E0=B8=A5=E0=B8=B9=E0=B8=81=E0=B8=88=E0=B9=89?=
 =?UTF-8?q?=E0=B8=B2=E0=B8=87=E0=B8=8A=E0=B8=B1=E0=B9=88=E0=B8=A7=E0=B8=84?=
 =?UTF-8?q?=E0=B8=A3=E0=B8=B2=E0=B8=A7?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../08_registryEmployee/request/Main.ts       |  10 +-
 .../08_registryEmployee/views/Main.vue        | 294 +++++++++---------
 2 files changed, 160 insertions(+), 144 deletions(-)

diff --git a/src/modules/08_registryEmployee/request/Main.ts b/src/modules/08_registryEmployee/request/Main.ts
index ed0a008b2..78ad46293 100644
--- a/src/modules/08_registryEmployee/request/Main.ts
+++ b/src/modules/08_registryEmployee/request/Main.ts
@@ -16,10 +16,14 @@ interface FormRegistryEmployee {
   dateAppoint: String | null;
   dateStart: String | null;
   createdAt: String | null;
-//   salaryDate: String | null;
+  //   salaryDate: String | null;
   isLeave: String;
-//   leaveReason: string;
+  //   leaveReason: string;
   leaveDateOrder: String | null;
+  draftPositionEmployee: String | null;
+  draftOrganizationOrganization: String | null;
+  newAgency: String | null;
+  currentAgency: String | null;
 }
 interface ResponseEmployeeTemp {
   id: string;
@@ -43,5 +47,7 @@ interface ResponseEmployeeTemp {
   isLeave: boolean;
   leaveReason: string;
   leaveDateOrder: Date | null;
+  draftPositionEmployee: String | null;
+  draftOrganizationOrganization: String | null;
 }
 export type { ResponseEmployeeTemp, FormRegistryEmployee };
diff --git a/src/modules/08_registryEmployee/views/Main.vue b/src/modules/08_registryEmployee/views/Main.vue
index 4e5908aea..36e9e8553 100644
--- a/src/modules/08_registryEmployee/views/Main.vue
+++ b/src/modules/08_registryEmployee/views/Main.vue
@@ -56,18 +56,12 @@
       </div>
     </div>
     <div class="col-12 q-pt-sm">
-      <q-table
-        flat
-        bordered
-        dense
+      <d-table
         :rows="rows"
         :columns="columns"
         :visible-columns="visibleColumnsEmployeeTemp"
         :filter="filter"
         row-key="id"
-        class="custom-header-table"
-        :pagination-label="paginationLabel"
-        v-model:pagination="pagination"
       >
         <template v-slot:header="props">
           <q-tr :props="props">
@@ -90,6 +84,53 @@
               {{ props.row.fullname }}
             </q-td>
             <q-td
+              key="newAgency"
+              :props="props"
+              @click="redirectToPage(props.row.id)"
+            >
+              <div
+                class="col-12"
+                v-if="
+                  props.row.draftOrganizationOrganization == null &&
+                  props.row.draftPositionEmployee == null
+                "
+              >
+                <div class="text-weight-medium">
+                  {{ "-" }}
+                </div>
+              </div>
+              <div class="col-12" v-else>
+                <div class="text-weight-medium">
+                  {{ props.row.draftOrganizationOrganization ?? "-" }}
+                </div>
+                <div class="text-weight-light">
+                  {{ props.row.draftPositionEmployee ?? "-" }}
+                </div>
+              </div>
+            </q-td>
+            <q-td
+              key="currentAgency"
+              :props="props"
+              @click="redirectToPage(props.row.id)"
+            >
+              <div
+                class="col-12"
+                v-if="props.row.oc == null && props.row.position == null"
+              >
+                <div class="text-weight-medium">
+                  {{ "-" }}
+                </div>
+              </div>
+              <div class="col-12" v-else>
+                <div class="text-weight-medium">
+                  {{ props.row.oc ?? "-" }}
+                </div>
+                <div class="text-weight-light">
+                  {{ props.row.position ?? "-" }}
+                </div>
+              </div>
+            </q-td>
+            <!-- <q-td
               key="positionEmployeePosition"
               :props="props"
               @click="redirectToPage(props.row.id)"
@@ -119,7 +160,7 @@
             </q-td>
             <q-td key="oc" :props="props" @click="redirectToPage(props.row.id)">
               {{ props.row.oc }}
-            </q-td>
+            </q-td> -->
             <q-td
               key="amount"
               :props="props"
@@ -250,19 +291,7 @@
             </q-td>
           </q-tr>
         </template>
-        <template v-slot:pagination="scope">
-          <q-pagination
-            v-model="pagination.page"
-            active-color="primary"
-            color="dark"
-            :max="scope.pagesNumber"
-            :max-pages="5"
-            size="sm"
-            boundary-links
-            direction-links
-          ></q-pagination>
-        </template>
-      </q-table>
+      </d-table>
     </div>
   </q-card>
   <q-dialog v-model="modal" persistent>
@@ -416,18 +445,6 @@
               </q-td>
             </q-tr>
           </template>
-          <template v-slot:pagination="scope">
-            <q-pagination
-              v-model="pagination.page"
-              active-color="primary"
-              color="dark"
-              :max="scope.pagesNumber"
-              :max-pages="5"
-              size="sm"
-              boundary-links
-              direction-links
-            ></q-pagination>
-          </template>
         </d-table>
       </q-card-section>
 
@@ -439,7 +456,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted, useAttrs } from "vue";
+import { ref, onMounted } from "vue";
 import { useQuasar } from "quasar";
 import { useCounterMixin } from "@/stores/mixin";
 import type { QInput, QForm, QTableProps } from "quasar";
@@ -502,13 +519,6 @@ const columnsModal = [
   },
 ];
 
-const pagination = ref({
-  sortBy: "desc",
-  descending: false,
-  page: 1,
-  rowsPerPage: 10,
-});
-
 const visibleColumnsOrder = ref<String[]>([
   "no",
   "fullname",
@@ -548,9 +558,11 @@ visibleColumnsEmployeeTemp.value = [
   "salaryDate",
   "age",
   "amount",
-  "isLeave",
   "leaveDateOrder",
+  "newAgency",
+  "currentAgency",
 ];
+// "isLeave",
 const columns = ref<QTableProps["columns"]>([
   {
     name: "no",
@@ -575,13 +587,12 @@ const columns = ref<QTableProps["columns"]>([
     headerStyle: "font-size: 14px; min-width: 200px",
     style: "font-size: 14px; ",
   },
-
   {
-    name: "positionEmployeePosition",
+    name: "newAgency",
     align: "left",
-    label: "ตำแหน่ง",
+    label: "หน่วยงานที่รับการบรรจุ",
     sortable: true,
-    field: "positionEmployeePosition",
+    field: "newAgency",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
     sort: (a: string, b: string) =>
@@ -591,25 +602,11 @@ const columns = ref<QTableProps["columns"]>([
       }),
   },
   {
-    name: "positionEmployeePositionSide",
+    name: "currentAgency",
     align: "left",
-    label: "ด้านของตำแหน่ง",
+    label: "หน่วยงานปัจจุบัน",
     sortable: true,
-    field: "positionEmployeePositionSide",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, {
-        numeric: true,
-        sensitivity: "base",
-      }),
-  },
-  {
-    name: "positionLine",
-    align: "left",
-    label: "สายงาน",
-    sortable: true,
-    field: "positionLine",
+    field: "currentAgency",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
     sort: (a: string, b: string) =>
@@ -619,34 +616,77 @@ const columns = ref<QTableProps["columns"]>([
       }),
   },
 
-  {
-    name: "positionEmployeeGroup",
-    align: "left",
-    label: "กลุ่มงาน",
-    sortable: true,
-    field: "positionEmployeeGroup",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, {
-        numeric: true,
-        sensitivity: "base",
-      }),
-  },
-  {
-    name: "oc",
-    align: "left",
-    label: "สังกัด",
-    sortable: true,
-    field: "oc",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, {
-        numeric: true,
-        sensitivity: "base",
-      }),
-  },
+  //   {
+  //     name: "positionEmployeePosition",
+  //     align: "left",
+  //     label: "ตำแหน่ง",
+  //     sortable: true,
+  //     field: "positionEmployeePosition",
+  //     headerStyle: "font-size: 14px",
+  //     style: "font-size: 14px",
+  //     sort: (a: string, b: string) =>
+  //       a.localeCompare(b, undefined, {
+  //         numeric: true,
+  //         sensitivity: "base",
+  //       }),
+  //   },
+  //   {
+  //     name: "positionEmployeePositionSide",
+  //     align: "left",
+  //     label: "ด้านของตำแหน่ง",
+  //     sortable: true,
+  //     field: "positionEmployeePositionSide",
+  //     headerStyle: "font-size: 14px",
+  //     style: "font-size: 14px",
+  //     sort: (a: string, b: string) =>
+  //       a.localeCompare(b, undefined, {
+  //         numeric: true,
+  //         sensitivity: "base",
+  //       }),
+  //   },
+  //   {
+  //     name: "positionLine",
+  //     align: "left",
+  //     label: "สายงาน",
+  //     sortable: true,
+  //     field: "positionLine",
+  //     headerStyle: "font-size: 14px",
+  //     style: "font-size: 14px",
+  //     sort: (a: string, b: string) =>
+  //       a.localeCompare(b, undefined, {
+  //         numeric: true,
+  //         sensitivity: "base",
+  //       }),
+  //   },
+
+  //   {
+  //     name: "positionEmployeeGroup",
+  //     align: "left",
+  //     label: "กลุ่มงาน",
+  //     sortable: true,
+  //     field: "positionEmployeeGroup",
+  //     headerStyle: "font-size: 14px",
+  //     style: "font-size: 14px",
+  //     sort: (a: string, b: string) =>
+  //       a.localeCompare(b, undefined, {
+  //         numeric: true,
+  //         sensitivity: "base",
+  //       }),
+  //   },
+  //   {
+  //     name: "oc",
+  //     align: "left",
+  //     label: "สังกัด",
+  //     sortable: true,
+  //     field: "oc",
+  //     headerStyle: "font-size: 14px",
+  //     style: "font-size: 14px",
+  //     sort: (a: string, b: string) =>
+  //       a.localeCompare(b, undefined, {
+  //         numeric: true,
+  //         sensitivity: "base",
+  //       }),
+  //   },
   {
     name: "amount",
     align: "left",
@@ -751,17 +791,17 @@ const columns = ref<QTableProps["columns"]>([
     // sort: (a: string, b: string) =>
     //   a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
-  {
-    name: "isLeave",
-    align: "left",
-    label: "สถานะ",
-    sortable: true,
-    field: "isLeave",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    // sort: (a: string, b: string) =>
-    //   a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
+  //   {
+  //     name: "isLeave",
+  //     align: "left",
+  //     label: "สถานะ",
+  //     sortable: true,
+  //     field: "isLeave",
+  //     headerStyle: "font-size: 14px",
+  //     style: "font-size: 14px",
+  //     // sort: (a: string, b: string) =>
+  //     //   a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  //   },
   {
     name: "leaveDateOrder",
     align: "left",
@@ -1204,7 +1244,6 @@ const getPosition = async (id: string) => {
       hideLoader();
     });
 };
-const attrs = ref<any>(useAttrs());
 
 const clickAddOrder = () => {
   modaladdOrder.value = true;
@@ -1307,13 +1346,6 @@ const next = (id: string) => {
   router.push(`/registryEmployee/${id}`);
 };
 
-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 = "";
@@ -1462,6 +1494,10 @@ const showEmployeeTemp = async () => {
             e.leaveDateOrder == null
               ? null
               : date2Thai(new Date(e.leaveDateOrder)),
+          newAgency: "",
+          currentAgency: "",
+          draftPositionEmployee: e.draftPositionEmployee,
+          draftOrganizationOrganization: e.draftOrganizationOrganization,
         });
       });
     })
@@ -1522,6 +1558,10 @@ const showEmployeeTempOrder = async () => {
             e.leaveDateOrder == null
               ? null
               : date2Thai(new Date(e.leaveDateOrder)),
+          newAgency: "",
+          currentAgency: "",
+          draftPositionEmployee: e.draftPositionEmployee,
+          draftOrganizationOrganization: e.draftOrganizationOrganization,
         });
       });
     })
@@ -1530,7 +1570,7 @@ const showEmployeeTempOrder = async () => {
     })
     .finally(() => {
       hideLoader();
-      console.log(rowsOrder);
+      //   console.log(rowsOrder);
     });
 };
 
@@ -1540,34 +1580,4 @@ const onSelected = async (id: string) => {
 
 const deleteData = async (id: string) => {};
 </script>
-<style lang="scss">
-.icon-color {
-  color: #4154b3;
-}
-.custom-header-table {
-  max-height: 64vh;
-  .q-table tr:nth-child(odd) td {
-    background: white;
-  }
-  .q-table tr:nth-child(even) td {
-    background: #f8f8f8;
-  }
-
-  .q-table thead tr {
-    background: #ecebeb;
-  }
-
-  .q-table thead tr th {
-    position: sticky;
-    z-index: 1;
-  }
-  /* this will be the loading indicator */
-  .q-table thead tr:last-child th {
-    /* height of all previous header rows */
-    top: 48px;
-  }
-  .q-table thead tr:first-child th {
-    top: 0;
-  }
-}
-</style>
+<style lang="scss"></style>

From fef7c21fcd2125cfa1e6751d0f3d346388b74a37 Mon Sep 17 00:00:00 2001
From: waruneeta <warunee.auy@gmail.com>
Date: Fri, 4 Aug 2023 15:12:23 +0700
Subject: [PATCH 033/113] =?UTF-8?q?fix=20api=20=E0=B8=AD=E0=B8=AD=E0=B8=81?=
 =?UTF-8?q?=E0=B8=84=E0=B8=B3=E0=B8=AA=E0=B8=B1=E0=B9=88=E0=B8=87=20&=20se?=
 =?UTF-8?q?t=20value=20step=201?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/05_placement/api.placement.ts         |   4 +-
 .../OrderPlacement/MainOrderPlacement.vue     |   2 +-
 .../components/OrderPlacement/step/step01.vue | 342 +++++-------------
 3 files changed, 89 insertions(+), 259 deletions(-)

diff --git a/src/api/05_placement/api.placement.ts b/src/api/05_placement/api.placement.ts
index c2159003a..94259b628 100644
--- a/src/api/05_placement/api.placement.ts
+++ b/src/api/05_placement/api.placement.ts
@@ -54,8 +54,10 @@ export default {
 
   // order
   yearOptionsOrder: () => `${order}/order/fiscal-year`,
+  createOrder: () => `${order}/order/detail`,
   listOrder: () => `${order}/order`,
-  detailOrder:(orderId:string) => `${order}/order/${orderId}`,
+  detailOrder:(orderId:string) => `${order}/order/detail/${orderId}`,
+  deleteOrder:(orderId:string) => `${order}/order/${orderId}`,
   typeOrder: () => `${order}/order/order-type`,
   examroundOrder: () => `${order}/order/detail/exam-round`,
 };
diff --git a/src/modules/05_placement/components/OrderPlacement/MainOrderPlacement.vue b/src/modules/05_placement/components/OrderPlacement/MainOrderPlacement.vue
index 8d0e90c74..ea465c3e6 100644
--- a/src/modules/05_placement/components/OrderPlacement/MainOrderPlacement.vue
+++ b/src/modules/05_placement/components/OrderPlacement/MainOrderPlacement.vue
@@ -423,7 +423,7 @@ const clickDelete = (id: string) => {
 const deleteData = async (id: string) => {
   showLoader();
   await http
-    .delete(config.API.detailOrder(id))
+    .delete(config.API.deleteOrder(id))
     .then((res) => {
       success($q, "ลบข้อมูลสำเร็จ");
     })
diff --git a/src/modules/05_placement/components/OrderPlacement/step/step01.vue b/src/modules/05_placement/components/OrderPlacement/step/step01.vue
index 526d9a895..300a25878 100644
--- a/src/modules/05_placement/components/OrderPlacement/step/step01.vue
+++ b/src/modules/05_placement/components/OrderPlacement/step/step01.vue
@@ -3,24 +3,10 @@
     <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"
-          />
+          <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'
           ) " -->
@@ -29,73 +15,36 @@
         <div class="col-xs-12 col-md-6">
           <!-- :readonly="!edit"
                 :borderless="!edit" -->
-          <q-input
-            :class="getClass(true)"
-            outlined
-            dense
-            lazy-rules
-            v-model="nameOrder"
-            :rules="[(val) => !!val || `${'กรุณากรอกคำสั่งเรื่อง'}`]"
-            :label="`${'คำสั่งเรื่อง'}`"
-            @update:modelValue="clickEditRow"
-            hide-bottom-space
-          />
+          <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"
-            />
+            <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
-          >
+          <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"
-            >
+            <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 :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"
-          >
+          <datepicker menu-class-name="modalfix" v-model="dateCommand" :locale="'th'" autoApply borderless
+            :enableTimePicker="false" week-start="0">
             <template #year="{ year }">
               {{ year + 543 }}
             </template>
@@ -103,24 +52,12 @@
               {{ 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 || `${'กรุณาเลือกวันที่มีผลออกคำสั่ง'}`,
-                ]"
-              >
+              <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 name="event" class="cursor-pointer" style="color: var(--q-primary)">
                   </q-icon>
                 </template>
               </q-input>
@@ -129,24 +66,10 @@
         </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"
-          />
+          <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'
           ) " -->
@@ -154,115 +77,50 @@
         <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
-          />
+          <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
-          />
+          <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="examRound"
-            :rules="[(val:string) => !!val || `${'กรุณาเลือกรอบการสอบ'}`]"
-            hide-bottom-space
-            :label="`${'รอบการสอบ'}`"
-            @update:modelValue="clickEditRow"
-            emit-value
-            map-options
-            option-label="examRoundName"
-            :options="examRoundOption"
-            option-value="examRoundValue"
-            use-input
-            input-debounce="0"
-          />
+          <selector :class="getClass(true)" outlined dense lazy-rules v-model="examRound"
+            :rules="[(val: string) => !!val || `${'กรุณาเลือกรอบการสอบ'}`]" hide-bottom-space :label="`${'รอบการสอบ'}`"
+            @update:modelValue="clickEditRow" emit-value map-options option-label="examRoundName"
+            :options="examRoundOption" option-value="examRoundValue" use-input input-debounce="0" />
           <!-- @filter="(inputValue:string,
           doneFn:Function) => filterSelector(inputValue, doneFn,'testOption'
           ) " -->
         </div>
         <div class="col-xs-12 col-md-6">
-          <selector
-            :class="getClass(true)"
-            outlined
-            dense
-            lazy-rules
-            v-model="position"
-            :rules="[(val:string) => !!val || `${'กรุณาเลือกตำแหน่งรับสมัคร'}`]"
-            hide-bottom-space
-            :label="`${'ตำแหน่งรับสมัคร'}`"
-            @update:modelValue="clickEditRow"
-            emit-value
-            map-options
-            option-label="name"
-            :options="positionOption"
-            option-value="id"
-            use-input
-            input-debounce="0"
-          />
+          <selector :class="getClass(true)" outlined dense lazy-rules v-model="position"
+            :rules="[(val: string) => !!val || `${'กรุณาเลือกตำแหน่งรับสมัคร'}`]" hide-bottom-space
+            :label="`${'ตำแหน่งรับสมัคร'}`" @update:modelValue="clickEditRow" emit-value map-options option-label="name"
+            :options="positionOption" option-value="id" use-input input-debounce="0" />
           <!-- @filter="(inputValue:string, doneFn:Function) =>
           filterSelector(inputValue, doneFn,'positionOption' ) " -->
         </div>
         <div class="col-xs-12 col-md-6">
-          <selector
-            :class="getClass(true)"
-            outlined
-            dense
-            lazy-rules
-            v-model="register"
-            :rules="[(val:string) => !!val || `${'กรุณาเลือกมติ กก. ครั้งที่ (เรื่อง รับสมัครสอบฯ)'}`]"
-            hide-bottom-space
-            :label="`${'มติ กก. ครั้งที่ (เรื่อง รับสมัครสอบฯ)'}`"
-            @update:modelValue="clickEditRow"
-            emit-value
-            map-options
-            option-label="name"
-            :options="registerOption"
-            option-value="id"
-            use-input
-            input-debounce="0"
-          />
+          <selector :class="getClass(true)" outlined dense lazy-rules v-model="register"
+            :rules="[(val: string) => !!val || `${'กรุณาเลือกมติ กก. ครั้งที่ (เรื่อง รับสมัครสอบฯ)'}`]" hide-bottom-space
+            :label="`${'มติ กก. ครั้งที่ (เรื่อง รับสมัครสอบฯ)'}`" @update:modelValue="clickEditRow" emit-value
+            map-options option-label="name" :options="registerOption" option-value="id" use-input input-debounce="0" />
         </div>
         <!-- @filter="(inputValue:string,
         doneFn:Function) => filterSelector(inputValue, doneFn,'registerOption'
         ) " -->
 
         <div class="col-xs-12 col-md-6">
-          <datepicker
-            menu-class-name="modalfix"
-            v-model="dateRegister"
-            :locale="'th'"
-            autoApply
-            borderless
-            :enableTimePicker="false"
-            week-start="0"
-          >
+          <datepicker menu-class-name="modalfix" v-model="dateRegister" :locale="'th'" autoApply borderless
+            :enableTimePicker="false" week-start="0">
             <template #year="{ year }">
               {{ year + 543 }}
             </template>
@@ -270,25 +128,13 @@
               {{ parseInt(value + 543) }}
             </template>
             <template #trigger>
-              <q-input
-                outlined
-                dense
-                class="full-width datepicker"
-                :model-value="
-                  dateRegister != null ? date2Thai(dateRegister) : null
-                "
-                :label="`${'ลงวันที่ (เรื่อง รับสมัครสอบฯ)'}`"
-                :rules="[
-                  (val) =>
-                    !!val || `${'กรุณาเลือกลงวันที่ (เรื่อง รับสมัครสอบฯ)'}`,
-                ]"
-              >
+              <q-input outlined dense class="full-width datepicker" :model-value="dateRegister != null ? date2Thai(dateRegister) : null
+                " :label="`${'ลงวันที่ (เรื่อง รับสมัครสอบฯ)'}`" :rules="[
+    (val) =>
+      !!val || `${'กรุณาเลือกลงวันที่ (เรื่อง รับสมัครสอบฯ)'}`,
+  ]">
                 <template v-slot:prepend>
-                  <q-icon
-                    name="event"
-                    class="cursor-pointer"
-                    style="color: var(--q-primary)"
-                  >
+                  <q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)">
                   </q-icon>
                 </template>
               </q-input>
@@ -296,38 +142,18 @@
           </datepicker>
         </div>
         <div class="col-xs-12 col-md-6">
-          <selector
-            :class="getClass(true)"
-            outlined
-            dense
-            lazy-rules
-            v-model="announce"
-            :rules="[(val:string) => !!val || `${'กรุณาเลือกมติ กก. ครั้งที่ (เรื่อง ผลการสอบแข่งขัน)'}`]"
-            hide-bottom-space
-            :label="`${'มติ กก. ครั้งที่ (เรื่อง ผลการสอบแข่งขัน)'}`"
-            @update:modelValue="clickEditRow"
-            emit-value
-            map-options
-            option-label="name"
-            :options="announceOption"
-            option-value="id"
-            use-input
-            input-debounce="0"
-          />
+          <selector :class="getClass(true)" outlined dense lazy-rules v-model="announce"
+            :rules="[(val: string) => !!val || `${'กรุณาเลือกมติ กก. ครั้งที่ (เรื่อง ผลการสอบแข่งขัน)'}`]"
+            hide-bottom-space :label="`${'มติ กก. ครั้งที่ (เรื่อง ผลการสอบแข่งขัน)'}`" @update:modelValue="clickEditRow"
+            emit-value map-options option-label="name" :options="announceOption" option-value="id" use-input
+            input-debounce="0" />
           <!-- @filter="(inputValue:string,
           doneFn:Function) => filterSelector(inputValue, doneFn,'announceOption'
           ) "  -->
         </div>
         <div class="col-xs-12 col-md-6">
-          <datepicker
-            menu-class-name="modalfix"
-            v-model="dateAnnounce"
-            :locale="'th'"
-            autoApply
-            borderless
-            :enableTimePicker="false"
-            week-start="0"
-          >
+          <datepicker menu-class-name="modalfix" v-model="dateAnnounce" :locale="'th'" autoApply borderless
+            :enableTimePicker="false" week-start="0">
             <template #year="{ year }">
               {{ year + 543 }}
             </template>
@@ -335,25 +161,13 @@
               {{ parseInt(value + 543) }}
             </template>
             <template #trigger>
-              <q-input
-                outlined
-                dense
-                class="full-width datepicker"
-                :model-value="
-                  dateAnnounce != null ? date2Thai(dateAnnounce) : null
-                "
-                :label="`${'ลงวันที่ (เรื่อง ผลการสอบแข่งขัน)'}`"
-                :rules="[
-                  (val) =>
-                    !!val || `${'กรุณาเลือกลงวันที่ (เรื่อง ผลการสอบแข่งขัน)'}`,
-                ]"
-              >
+              <q-input outlined dense class="full-width datepicker" :model-value="dateAnnounce != null ? date2Thai(dateAnnounce) : null
+                " :label="`${'ลงวันที่ (เรื่อง ผลการสอบแข่งขัน)'}`" :rules="[
+    (val) =>
+      !!val || `${'กรุณาเลือกลงวันที่ (เรื่อง ผลการสอบแข่งขัน)'}`,
+  ]">
                 <template v-slot:prepend>
-                  <q-icon
-                    name="event"
-                    class="cursor-pointer"
-                    style="color: var(--q-primary)"
-                  >
+                  <q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)">
                   </q-icon>
                 </template>
               </q-input>
@@ -429,7 +243,7 @@ const typeOrderOptionFilter = ref<DataOption1[]>([]);
 
 const byOrder = ref<string>("");
 const byOrderOption = ref<DataOption1[]>([
-  { name: "นายคำสั่งที่ 1", id: "3fa85f64-5717-4562-b3fc-2c963f66afa6" },
+  { name: "นายดด นน", id: "3fa85f64-5717-4562-b3fc-2c963f66afa6" },
 ]);
 const byOrderOptionFilter = ref<DataOption1[]>([]);
 
@@ -447,7 +261,7 @@ const announceOptionFilter = ref<DataOption[]>([]);
 
 const position = ref<string>("");
 const positionOption = ref<DataOption1[]>([
-  { name: "นายก", id: "3fa85f64-5717-4562-b3fc-2c963f66afa6" },
+  { name: "ผู้ช่วย", id: "3fa85f64-5717-4562-b3fc-2c963f66afa6" },
 ]);
 const positionOptionFilter = ref<DataOption[]>([]);
 
@@ -541,8 +355,22 @@ const fetchdetailOrder = async () => {
   let orderIdString = orderId.toString();
   await http
     .get(config.API.detailOrder(orderIdString))
-    .then((res) => {
-      console.log(res);
+    .then((res: any) => {
+      const data = res.data.result;
+      typeOrder.value = data.orderTypeValue;
+      nameOrder.value = data.orderTitle;
+      command.value = data.orderNo;
+      dateYear.value = Number(data.orderYear);
+      dateCommand.value = data.orderDate;
+      byOrder.value = data.orderBy;
+      nameCommand.value = data.signatoryBy;
+      positionCommand.value = data.signatoryPosition;
+      examRound.value = data.examRound;
+      position.value = data.registerPosition;
+      register.value = data.conclusionRegisterNo;
+      dateRegister.value = data.conclusionRegisterDate;
+      announce.value = data.conclusionResultNo;
+      dateAnnounce.value = data.conclusionResultDate;
     })
     .catch((e) => {
       messageError($q, e);
@@ -570,7 +398,7 @@ const fecthExamRoundOption = async () => {
       examRoundOption.value = res.data.result;
       console.log(examRoundOption.value);
     })
-    .catch((e) => {});
+    .catch((e) => { });
 };
 const submit = async () => {
   const formdata = {
@@ -609,7 +437,7 @@ const submit = async () => {
 const createListOrder = async (formData: Object) => {
   console.log(formData);
   await http
-    .post(config.API.listOrder(), formData)
+    .post(config.API.createOrder(), formData)
     .then((res) => {
       console.log(res);
       next();

From a8a51c05f21f07103d09846da61387ba701909f6 Mon Sep 17 00:00:00 2001
From: waruneeta <warunee.auy@gmail.com>
Date: Fri, 4 Aug 2023 15:22:48 +0700
Subject: [PATCH 034/113] =?UTF-8?q?=E0=B8=AD=E0=B8=AD=E0=B8=81=E0=B8=84?=
 =?UTF-8?q?=E0=B8=B3=E0=B8=AA=E0=B8=B1=E0=B9=88=E0=B8=87=20-=20fix=20post?=
 =?UTF-8?q?=20or=20put?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/OrderPlacement/step/step01.vue | 26 +++++++++++++++++--
 1 file changed, 24 insertions(+), 2 deletions(-)

diff --git a/src/modules/05_placement/components/OrderPlacement/step/step01.vue b/src/modules/05_placement/components/OrderPlacement/step/step01.vue
index 300a25878..eeddc482b 100644
--- a/src/modules/05_placement/components/OrderPlacement/step/step01.vue
+++ b/src/modules/05_placement/components/OrderPlacement/step/step01.vue
@@ -351,7 +351,7 @@ onMounted(async () => {
 });
 const fetchdetailOrder = async () => {
   showLoader();
-  console.log(orderId);
+  // console.log(orderId);
   let orderIdString = orderId.toString();
   await http
     .get(config.API.detailOrder(orderIdString))
@@ -429,13 +429,18 @@ const submit = async () => {
         persistent: true,
       }).onOk(async () => {
         showLoader();
+        if (!orderId) {
         createListOrder(formdata);
+        } else {
+          let orderIdString = orderId.toString();
+          updateOrder(formdata, orderIdString);
+        }
       });
     }
   });
 };
 const createListOrder = async (formData: Object) => {
-  console.log(formData);
+  // console.log(formData);
   await http
     .post(config.API.createOrder(), formData)
     .then((res) => {
@@ -449,6 +454,23 @@ const createListOrder = async (formData: Object) => {
       hideLoader();
     });
 };
+
+const updateOrder = async (formData: Object, orderId: string) => {
+  // console.log(formData);
+  await http
+    .put(config.API.detailOrder(orderId), formData)
+    .then((res) => {
+      console.log(res);
+      next();
+    })
+    .catch((e) => {
+      console.log(e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+};
+
 /**
  * class จัดรูปแบบแสดงระหว่างข้อมูลที่แก้ไขหรือแสดงเฉยๆ
  * @param val ข้อมูล input สำหรับแก้ไขหรือไม่

From c613d3743ed281a277f87ecde8dc862f7ea2f990 Mon Sep 17 00:00:00 2001
From: waruneeta <warunee.auy@gmail.com>
Date: Fri, 4 Aug 2023 16:12:02 +0700
Subject: [PATCH 035/113] =?UTF-8?q?=E0=B8=AD=E0=B8=AD=E0=B8=81=E0=B8=84?=
 =?UTF-8?q?=E0=B8=B3=E0=B8=AA=E0=B8=B1=E0=B9=88=E0=B8=87=20=E0=B9=81?=
 =?UTF-8?q?=E0=B8=AA=E0=B8=94=E0=B8=87=E0=B8=9F=E0=B8=B4=E0=B8=A5=E0=B8=94?=
 =?UTF-8?q?=E0=B9=8C=E0=B9=83=E0=B8=99=E0=B8=AB=E0=B8=99=E0=B9=89=E0=B8=B2?=
 =?UTF-8?q?=E0=B8=A3=E0=B8=B2=E0=B8=A2=E0=B8=81=E0=B8=B2=E0=B8=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/OrderPlacement/MainOrderPlacement.vue            | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/modules/05_placement/components/OrderPlacement/MainOrderPlacement.vue b/src/modules/05_placement/components/OrderPlacement/MainOrderPlacement.vue
index ea465c3e6..0b8339982 100644
--- a/src/modules/05_placement/components/OrderPlacement/MainOrderPlacement.vue
+++ b/src/modules/05_placement/components/OrderPlacement/MainOrderPlacement.vue
@@ -381,7 +381,7 @@ const OriginalDataFetch = async () => {
         fiscalYear: Number(e.fiscalYear),
         OrderDate: date2Thai(e.orderDate),
         OrderBy: e.orderBy,
-        Signer: "นาม สมคิด ยอดใจ ",
+        Signer: e.signatoryBy,
         OrderStatus: e.orderStatusName,
         orderStatusValue: e.orderStatusValue,
         OrderType: e.orderTypeName,

From 209f0a5fa7a93f9801e77f44f34b7f1ca664428d Mon Sep 17 00:00:00 2001
From: AnandaTon <125332905+anandaAiemvong@users.noreply.github.com>
Date: Fri, 4 Aug 2023 17:56:16 +0700
Subject: [PATCH 036/113] =?UTF-8?q?=E0=B8=95=E0=B9=88=E0=B8=AD=20Api=20ins?=
 =?UTF-8?q?ignia?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/07_insignia/api.insignia.ts           |  10 +-
 .../components/1_Proposals/addProposals.vue   | 423 ++++++++++++------
 .../components/1_Proposals/listProposals.vue  |  79 +++-
 3 files changed, 367 insertions(+), 145 deletions(-)

diff --git a/src/api/07_insignia/api.insignia.ts b/src/api/07_insignia/api.insignia.ts
index 9a2b93e20..f17086d3f 100644
--- a/src/api/07_insignia/api.insignia.ts
+++ b/src/api/07_insignia/api.insignia.ts
@@ -2,5 +2,11 @@
  * api เครื่องราชอิสริยาภรณ์
  */
 import env from "../index";
-
-export default {};
+const insignia = `${env.API_URI}/insignia`;
+export default {
+  getRoundInsignia: (id: string) => `${insignia}/period/${id}`,
+  listRoundInsignia: (type: string) => `${insignia}/period/${type}`,
+  editRoundInsignia: (id: string) => `${insignia}/period/${id}`,
+  RoundInsignia: (id: string) => `${insignia}/period/${id}`,
+  docRoundInsignia: (id: string) => `${insignia}/period/${id}`,
+};
diff --git a/src/modules/07_insignia/components/1_Proposals/addProposals.vue b/src/modules/07_insignia/components/1_Proposals/addProposals.vue
index 63ee7bb6a..ba6c3ec5c 100644
--- a/src/modules/07_insignia/components/1_Proposals/addProposals.vue
+++ b/src/modules/07_insignia/components/1_Proposals/addProposals.vue
@@ -13,163 +13,304 @@
       />
       <div>เพิ่มรอบการเสนอขอพระราชทานเครื่องราชอิสริยาภรณ์</div>
     </div>
-    <div class="col-12">
-      <q-card bordered>
-        <div class="col-12 row q-col-gutter-md q-pa-md">
-          <div class="col-xs-12 col-sm-12 row">
-            <q-separator />
-            <div class="col-12 row q-pa-sm q-col-gutter-sm">
-              <q-input
-                class="col-10"
-                dense
-                outlined
-                v-model="roundInsig"
-                label="รอบการเสนอขอพระราชทานเครื่องราชฯ"
-              />
-              <q-input
-                class="col-2"
-                dense
-                outlined
-                v-model="year"
-                label="ปีที่เสนอ"
-              />
-              <datepicker
-                menu-class-name="modalfix"
-                v-model="dateStart"
-                :locale="'th'"
-                autoApply
-                class="col-xs-12 col-sm-5"
-                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="col-xs-12 col-sm-5"
-                    :model-value="
-                      dateStart != null ? date2Thai(dateStart) : 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>
-              <datepicker
-                menu-class-name="modalfix"
-                v-model="dateEnd"
-                class="col-xs-12 col-sm-5"
-                :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="col-xs-12 col-sm-4"
-                    :model-value="dateEnd != null ? date2Thai(dateEnd) : 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>
+    <q-form ref="myForm">
+      <div class="col-12">
+        <q-card bordered>
+          <div class="col-12 row q-col-gutter-md q-pa-md">
+            <div class="col-xs-12 col-sm-12 row">
+              <q-separator />
+              <div class="col-12 row q-pa-sm q-col-gutter-sm">
+                <q-input
+                  class="col-10"
+                  dense
+                  outlined
+                  v-model="roundInsig"
+                  label="รอบการเสนอขอพระราชทานเครื่องราชฯ"
+                />
+                <q-input
+                  class="col-2"
+                  dense
+                  outlined
+                  v-model="year"
+                  label="ปีที่เสนอ"
+                />
+                <datepicker
+                  menu-class-name="modalfix"
+                  v-model="dateStart"
+                  :locale="'th'"
+                  autoApply
+                  class="col-xs-12 col-sm-5"
+                  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="col-xs-12 col-sm-5"
+                      :model-value="
+                        dateStart != null ? date2Thai(dateStart) : 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>
+                <datepicker
+                  menu-class-name="modalfix"
+                  v-model="dateEnd"
+                  class="col-xs-12 col-sm-5"
+                  :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="col-xs-12 col-sm-4"
+                      :model-value="dateEnd != null ? date2Thai(dateEnd) : 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>
 
-              <q-input
-                class="col-xs-12 col-sm-2"
-                dense
-                outlined
-                v-model="datelast"
-                label="จำนวนวันแจ้งเตือนก่อนวันสิ้นสุด"
-              />
-              <q-file
-                class="col-xs-12 col-sm-10"
-                outlined
-                dense
-                v-model="files"
-                label="อัปโหลดเอกสารประกอบ"
-                hide-bottom-space
-                lazy-rules
-                :rules="[
-                  (val) => val || 'กรุณาเลือกไฟล์หนังสือถึงหน่วยงานที่รับโอน',
-                ]"
-              >
-                <template v-slot:prepend>
-                  <q-icon name="attach_file" />
-                </template>
-              </q-file>
+                <q-input
+                  class="col-xs-12 col-sm-2"
+                  dense
+                  outlined
+                  v-model="datelast"
+                  label="จำนวนวันแจ้งเตือนก่อนวันสิ้นสุด"
+                />
+                <q-file
+                  class="col-xs-12 col-sm-10"
+                  outlined
+                  dense
+                  v-model="files"
+                  @added="fileUploadDoc"
+                  label="อัปโหลดเอกสารประกอบ"
+                  hide-bottom-space
+                  lazy-rules
+                  :rules="[
+                    (val) => val || 'กรุณาเลือกไฟล์หนังสือถึงหน่วยงานที่รับโอน',
+                  ]"
+                >
+                  <template v-slot:prepend>
+                    <q-icon name="attach_file" />
+                  </template>
+                </q-file>
+              </div>
             </div>
           </div>
-        </div>
-        <q-separator />
-        <q-separator />
-        <div class="row col-12 q-pa-sm">
-          <q-space />
-          <q-btn
-            unelevated
-            dense
-            class="q-px-md items-center"
-            color="light-blue-10"
-            label="บันทึก"
-            @click="router.go(-1)"
-          />
-        </div>
-      </q-card>
-    </div>
+          <q-separator />
+          <q-separator />
+          <div class="row col-12 q-pa-sm">
+            <q-space />
+            <q-btn
+              unelevated
+              dense
+              class="q-px-md items-center"
+              color="light-blue-10"
+              label="บันทึก"
+              @click="checkSave"
+            />
+          </div>
+        </q-card>
+      </div>
+    </q-form>
   </div>
 </template>
 <script setup lang="ts">
 import type { QTableProps } from "quasar";
-import { ref } from "vue";
-import { useQuasar } from "quasar";
+import { ref, onMounted } from "vue";
+import { useQuasar, QForm } from "quasar";
 import { useRouter } from "vue-router";
 import { useCounterMixin } from "@/stores/mixin";
+import http from "@/plugins/http";
+import config from "@/app.config";
 
 const mixin = useCounterMixin();
-const { date2Thai } = mixin;
+const { date2Thai, success, dateToISO, messageError, showLoader, hideLoader } =
+  mixin;
 const router = useRouter();
 const $q = useQuasar();
+const id = ref<string>("");
+const myForm = ref<QForm | null>(null); //form data input
+const edit = ref<boolean>(false);
 const dateStart = ref<any>(new Date());
 const dateEnd = ref<any>(new Date());
-
+const files = ref<any[]>([]);
+const fileDocDataUpload = ref<File[]>([]);
 const roundInsig = ref<string>("");
-const year = ref<string>("");
-const datelast = ref<string>("");
+const yearOffer = ref<number>(0);
+const datelast = ref<number>(0);
+
+onMounted(async () => {
+  await fetchData();
+});
+
+const fetchData = async () => {
+  showLoader();
+  await http
+    .get(config.API.getRoundInsignia("insignia"))
+    .then((res) => {
+      const data = res.data.result.periods;
+      const files = res.data.result.files;
+
+      id.value = data.id;
+      roundInsig.value = data.period_name;
+      yearOffer.value = data.year;
+      datelast.value = data.amount;
+      dateStart.value = data.startDate;
+      dateEnd.value = data.endDate;
+
+      files.value = files;
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+};
 
 const routeName = router.currentRoute.value.name;
+
+const fileUploadDoc = async (files: any) => {
+  files.forEach((file: any) => {
+    fileDocDataUpload.value.push(file);
+  });
+};
+
+const uploadDocData = async () => {
+  const formData = new FormData();
+  if (fileDocDataUpload.value.length > 0) {
+    fileDocDataUpload.value.forEach((file: any) => {
+      formData.append("", file);
+    });
+    showLoader();
+    await http
+      .put(config.API.docRoundInsignia(id.value), formData)
+      .then((res) => {})
+      .catch((e) => {
+        messageError($q, e);
+      })
+      .finally(async () => {
+        hideLoader();
+        success($q, "บันทึกข้อมูลสำเร็จ");
+        clickBack();
+      });
+  } else {
+    success($q, "บันทึกข้อมูลสำเร็จ");
+    clickBack();
+  }
+};
+
+const editData = async (id: string) => {
+  showLoader();
+  await http
+    .put(config.API.editRoundInsignia(id))
+    .then(async () => {
+      await uploadDocData();
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(async () => {
+      hideLoader();
+    });
+};
+
+const checkSave = async () => {
+  if (myForm.value !== null) {
+    myForm.value.validate().then(async (success) => {
+      if (success) {
+        if (edit.value) {
+          await editData(id.value);
+        } else {
+          await addData();
+        }
+      }
+    });
+  }
+};
+
+// const sendData = () => {
+//   const valueData: any = {
+//     Name: roundInsig.value,
+//     year: year.value,
+//     Amount: datelast.value,
+//     dateStart: dateStart.value !== null ? dateToISO(dateStart.value) : null,
+//     dateEnd: dateEnd.value !== null ? dateToISO(dateEnd.value) : null,
+//   };
+//   return valueData;
+// };
+
+const addData = async () => {
+  const formData = new FormData();
+  formData.append("Name", roundInsig.value);
+  formData.append("year", parseInt(yearOffer.value).toString());
+  formData.append("Amount", files.datelast);
+  if (dateStart.value !== null) {
+    formData.append("StartDate", dateToISO(dateStart.value));
+  }
+  if (dateEnd.value !== null) {
+    formData.append("EndDate", dateToISO(dateEnd.value));
+  }
+
+  showLoader();
+  await http
+    .post(config.API.listRoundInsignia("insignia"), formData)
+    .then(async (res) => {
+      const data = res.data.result;
+      id.value = data.id;
+      await uploadDocData();
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(async () => {
+      hideLoader();
+    });
+};
+
+const clickBack = () => {
+  router.push({ name: "insigniaProposals" });
+};
 </script>
diff --git a/src/modules/07_insignia/components/1_Proposals/listProposals.vue b/src/modules/07_insignia/components/1_Proposals/listProposals.vue
index 1969ecb05..6cdff4beb 100644
--- a/src/modules/07_insignia/components/1_Proposals/listProposals.vue
+++ b/src/modules/07_insignia/components/1_Proposals/listProposals.vue
@@ -171,12 +171,29 @@
 </template>
 
 <script setup lang="ts">
-import { ref, useAttrs } from "vue";
+import { ref, useAttrs, onMounted } from "vue";
 import type { QTableProps } from "quasar";
 import router from "@/router";
+import { useCounterMixin } from "@/stores/mixin";
 import { useQuasar } from "quasar";
 import type { FormProprsalsRound } from " @/modules/07_insignia/interface/request/Main.ts";
+import { useRoute } from "vue-router";
+import config from "@/app.config";
 
+import http from "@/plugins/http";
+
+const mixin = useCounterMixin();
+const {
+  date2Thai,
+  success,
+  messageError,
+  statusLeave,
+  dialogMessage,
+  dateToISO,
+  showLoader,
+  hideLoader,
+} = mixin;
+const route = useRoute();
 const $q = useQuasar(); //ใช้ noti quasar
 const modal = ref<boolean>(false);
 const pagination = ref({
@@ -205,6 +222,8 @@ const columns = ref<QTableProps["columns"]>([
     field: "no",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
   {
     name: "year",
@@ -214,6 +233,8 @@ const columns = ref<QTableProps["columns"]>([
     field: "name",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
   {
     name: "startDate",
@@ -223,6 +244,8 @@ const columns = ref<QTableProps["columns"]>([
     field: "position",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
+    // sort: (a: string, b: string) =>
+    //   a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
   {
     name: "endDate",
@@ -232,6 +255,8 @@ const columns = ref<QTableProps["columns"]>([
     field: "level",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
+    // sort: (a: string, b: string) =>
+    //   a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
   {
     name: "status",
@@ -241,6 +266,8 @@ const columns = ref<QTableProps["columns"]>([
     field: "institution",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
   {
     name: "statusRoyal",
@@ -250,6 +277,8 @@ const columns = ref<QTableProps["columns"]>([
     field: "institution",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
 ]);
 
@@ -297,6 +326,38 @@ const rows = ref<FormProprsalsRound[]>([
   },
 ]);
 
+onMounted(async () => {
+  await fetchData();
+});
+
+const fetchData = async () => {
+  rows.value = [];
+  showLoader();
+  await http
+    .get(config.API.listRoundInsignia("insignia"))
+    .then((res) => {
+      const data = res.data.result;
+      console.log(data);
+      data.map((e: any) => {
+        rows.value.push({
+          id: e.period_id,
+          round: e.period_name,
+          year: e.period_year,
+          startDate:
+            e.startDate == null ? null : date2Thai(new Date(e.startDate)),
+          endDate: e.endDate == null ? null : date2Thai(new Date(e.endDate)),
+          status: e.period_status,
+        });
+      });
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+};
+
 // หัวตาราง2
 const clickDelete = (id: string) => {
   $q.dialog({
@@ -308,7 +369,21 @@ const clickDelete = (id: string) => {
     },
     persistent: true,
   })
-    .onOk(async () => {})
+    .onOk(async () => {
+      showLoader();
+      await http
+        .delete(config.API.RoundInsignia(id))
+        .then((res) => {
+          success($q, "ลบข้อมูลการสอบสำเร็จ");
+          fetchData();
+        })
+        .catch((e) => {
+          messageError($q, e);
+        })
+        .finally(() => {
+          hideLoader();
+        });
+    })
     .onCancel(() => {})
     .onDismiss(() => {});
 };

From 01f0ef006261b93c180e861c8539ff3c9cae4298 Mon Sep 17 00:00:00 2001
From: waruneeta <warunee.auy@gmail.com>
Date: Fri, 4 Aug 2023 22:15:59 +0700
Subject: [PATCH 037/113] =?UTF-8?q?update=20=E0=B8=82=E0=B8=AD=E0=B9=82?=
 =?UTF-8?q?=E0=B8=AD=E0=B8=99=E0=B8=A3=E0=B8=B1=E0=B8=9A=E0=B9=82=E0=B8=AD?=
 =?UTF-8?q?=E0=B8=99?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/05_placement/api.placement.ts         |    5 +
 .../components/Receive/FormAdd.vue            |  545 ++++++++
 .../components/Receive/information.vue        | 1138 +++++++++++++++++
 .../components/Receive/receiveMain.vue        |  554 ++++----
 .../components/Transfer/transferRegistry.vue  |   24 +-
 src/modules/05_placement/router.ts            |   14 +-
 6 files changed, 1947 insertions(+), 333 deletions(-)
 create mode 100644 src/modules/05_placement/components/Receive/FormAdd.vue
 create mode 100644 src/modules/05_placement/components/Receive/information.vue

diff --git a/src/api/05_placement/api.placement.ts b/src/api/05_placement/api.placement.ts
index 94259b628..2b02d64f9 100644
--- a/src/api/05_placement/api.placement.ts
+++ b/src/api/05_placement/api.placement.ts
@@ -2,6 +2,7 @@ import env from "../index";
 const placement = `${env.API_PLACEMENT_URI}/placement`;
 const orgTree = `${env.API_URI_ORG_TREE}`;
 const order = `${env.API_PLACEMENT_URI}`;
+const receive = `${env.API_PLACEMENT_URI}/placement/Receive`;
 
 export default {
   MainDetail: (year: number) => `${placement}/exam/${year}`,
@@ -60,4 +61,8 @@ export default {
   deleteOrder:(orderId:string) => `${order}/order/${orderId}`,
   typeOrder: () => `${order}/order/order-type`,
   examroundOrder: () => `${order}/order/detail/exam-round`,
+
+  receiveData: () => `${receive}`,
+  receiveDataId: (id: string) => `${receive}/${id}`,
+  receivePosition: (id: string) => `${receive}/position/${id}`,
 };
diff --git a/src/modules/05_placement/components/Receive/FormAdd.vue b/src/modules/05_placement/components/Receive/FormAdd.vue
new file mode 100644
index 000000000..f782c6d70
--- /dev/null
+++ b/src/modules/05_placement/components/Receive/FormAdd.vue
@@ -0,0 +1,545 @@
+<template>
+  <div class="col-12 row">
+    <div class="row col-12" style="padding-top: 80px">
+      <div id="information" name="1" class="row col-12 information q-mt-sm">
+        <Information
+          v-model:statusEdit="statusEdit"
+          :fetchDataProfile="fetchData"
+          :statusAdd="true"
+        />
+      </div>
+    </div>
+    <q-page-sticky
+      position="top"
+      expand
+      class="bg-grey-2 text-white"
+      style="z-index: 99; padding: 0% 1% 0% 1%"
+    >
+      <div
+        class="row col-12 q-gutter-sm q-pb-sm text-dark no-wrap items-center"
+      >
+        <q-btn
+          flat
+          round
+          class="bg-teal-1 full-height"
+          color="primary"
+          icon="mdi-chevron-left"
+          dense
+          @click="router.go(-1)"
+        >
+        </q-btn>
+        <q-avatar
+          v-if="imageUrl == null"
+          size="65px"
+          rounded
+          class="containerimage"
+        >
+          <img
+            src="@/assets/avatar_user.jpg"
+            class="bg-grey-3"
+            style="object-fit: cover"
+          />
+          <div
+            class="overlay absolute-bottom text-subtitle2 text-center cursor-pointer"
+            @click="clickImage()"
+          >
+            <q-icon name="mdi-camera" size="18px" color="blue">
+              <q-tooltip>อัปเดตรูปภาพ</q-tooltip>
+            </q-icon>
+
+            <input
+              type="file"
+              style="display: none"
+              ref="inputImage"
+              accept="image/*"
+              @change="uploadImage"
+            />
+          </div>
+        </q-avatar>
+        <q-avatar v-else size="65px" rounded class="containerimage">
+          <img :src="imageUrl" class="bg-grey-3" style="object-fit: cover" />
+          <div
+            class="overlay absolute-bottom text-subtitle2 text-center cursor-pointer"
+            @click="clickImage()"
+          >
+            <q-icon name="mdi-camera" size="18px" color="blue">
+              <q-tooltip>อัปเดตรูปภาพ</q-tooltip>
+            </q-icon>
+
+            <input
+              type="file"
+              style="display: none"
+              ref="inputImage"
+              accept="image/*"
+              @change="uploadImage"
+            />
+          </div>
+        </q-avatar>
+        <div class="row items-center text-dark q-ml-md">
+          <div class="column">
+            <div class="text-bold q-pb-xs text-name">
+              เพิ่มข้อมูลทะเบียนประวัติ
+            </div>
+            <div class="text-bold q-pb-xs text-sub">ข้าราชการกทม. สามัญ</div>
+          </div>
+        </div>
+        <q-space />
+      </div>
+    </q-page-sticky>
+  </div>
+  <q-dialog v-model="dialog" persistent>
+    <q-card style="width: 90vw; max-width: 80vw">
+      <q-card-section class="row items-center q-pb-xs col-12">
+        <q-space />
+        <q-btn
+          @click="downloadKP7()"
+          unelevated
+          class="btn_purple q-mr-sm"
+          label="ดาวน์โหลด ก.พ.7/ก.ก.1"
+        ></q-btn>
+        <q-btn
+          icon="close"
+          unelevated
+          round
+          dense
+          @click="closeKp7"
+          style="color: #ff8080; background-color: #ffdede"
+        />
+      </q-card-section>
+      <q-card-section class="q-p-sm">
+      </q-card-section>
+    </q-card>
+  </q-dialog>
+  
+  <!-- Dialog เลือก Image -->
+  <q-dialog v-model="dialogImage" persistent>
+    <q-card style="width: 100vw; max-width: 60vw">
+      <q-card-section class="q-py-sm row">
+        <div class="text-h6">เลือกรูปภาพ</div>
+        <q-space />
+        <q-btn
+          icon="close"
+          unelevated
+          round
+          dense
+          @click="closeImage"
+          style="color: #ff8080; background-color: #ffdede"
+        >
+          <q-tooltip>ปิดหน้านี้</q-tooltip>
+        </q-btn>
+      </q-card-section>
+      <q-separator />
+      <q-card-section class="col-12 row">
+        <div
+          class="row wrap items-start col-12 q-col-gutter-sm"
+          style="height: 320px; overflow: auto"
+        >
+          <div class="col-3" @click="addNewImage">
+            <div
+              style="
+                height: 160px;
+                max-width: 15vw;
+                display: flex !important;
+                justify-content: center;
+                align-items: center;
+              "
+              class="column rounded-borders cursor-pointer bg-active-image text-white"
+            >
+              <q-icon name="add" size="60px" color="white" />
+              <strong>อัปโหลดรูปภาพ</strong>
+            </div>
+          </div>
+          <div
+            v-for="n in images"
+            :key="n"
+            class="col-3"
+            @click="imageActive(n)"
+          >
+            <div :class="getClass(n)">
+              <q-img
+                v-if="n.avatar != null"
+                :src="n.avatar"
+                :class="imageClass(n)"
+              >
+                <div
+                  class="absolute-bottom col-12 cursor-pointer flex justify-between items-center"
+                  style="padding: 5px"
+                >
+                  {{ date2Thai(n.createdDate) }}
+
+                  <q-btn
+                    v-if="!n.isActive"
+                    icon="delete"
+                    unelevated
+                    dense
+                    @click="deletePhoto(n.id)"
+                    class="bg-white"
+                    style="color: #ff8080"
+                  />
+                </div>
+              </q-img>
+            </div>
+          </div>
+        </div>
+      </q-card-section>
+      <q-separator />
+      <q-card-actions align="right">
+        <q-btn
+          icon="check"
+          dense
+          flat
+          round
+          @click="selectAvatarHistory"
+          color="positive"
+        >
+          <q-tooltip>เลือกรูปภาพ</q-tooltip>
+        </q-btn>
+      </q-card-actions>
+    </q-card>
+  </q-dialog>
+</template>
+<script setup lang="ts">
+import { ref, onMounted } from "vue";
+import { useDataStore } from "@/stores/data";
+import { useRoute, useRouter } from "vue-router";
+import { useCounterMixin } from "@/stores/mixin";
+import { useQuasar } from "quasar";
+import Information from "@/modules/05_placement/components/Receive/information.vue";
+import type { DataOption } from "@/modules/04_registry/interface/index/Main";
+import http from "@/plugins/http";
+import config from "@/app.config";
+
+const $q = useQuasar();
+const store = useDataStore();
+const mixin = useCounterMixin();
+const {
+  date2Thai,
+  messageError,
+  dialogMessage,
+  success,
+  showLoader,
+  hideLoader,
+} = mixin;
+const route = useRoute();
+const router = useRouter();
+const imageUrl = ref<any>(null);
+const inputImage = ref<any>(null);
+const fullname = ref<string>("");
+const position = ref<string>("นักจัดการงานทั่วไป");
+const dialog = ref<boolean>(false);
+const dialogImage = ref<boolean>(false);
+const statusEdit = ref<boolean>(false);
+const activeImage = ref<any | null>(null);
+const images = ref<any>([]);
+const profileId = ref<string>(
+  route.params.id ? route.params.id.toString() : ""
+);
+// const profileId = ref<string>("");
+const profileType = ref<string>("");
+const reasonStatus = ref<boolean>(false);
+const leaveReason = ref<string>("");
+const reasonOptions = ref<DataOption[]>([
+  {
+    id: "retire",
+    name: "เกษียณอายุราชการ",
+  },
+  {
+    id: "resign",
+    name: "ลาออก",
+  },
+  {
+    id: "transfer",
+    name: "ให้โอน",
+  },
+  {
+    id: "death",
+    name: "ถึงแก่กรรม",
+  },
+  {
+    id: "layoff",
+    name: "ให้ออก",
+  },
+  {
+    id: "discharge",
+    name: "ปลดออก",
+  },
+  {
+    id: "dismiss",
+    name: "ไล่ออก",
+  },
+  //   {
+  //     id: "change",
+  //     name: "เปลี่ยนประเภทข้าราชการ",
+  //   },
+  {
+    id: "other",
+    name: "อื่นๆ",
+  },
+]);
+
+onMounted(async () => {
+  await checkProfileData();
+  await fetchData();
+  //   await changeTab("information");
+});
+
+const fetchData = async () => {
+  if (profileId.value !== "") {
+    showLoader();
+    await http
+      .get(config.API.profileAvatarId(profileId.value))
+      .then((res) => {
+        const data = res.data.result;
+
+        fullname.value = data.fullname;
+        imageUrl.value = data.avatar;
+        position.value = data.position;
+        profileType.value = data.profileType;
+        const reason = reasonOptions.value.filter(
+          (r: DataOption) => r.id == data.leaveReason
+        );
+        if (reason.length > 0) {
+          leaveReason.value = ` (พ้นจากราชการด้วยสาเหตุ: ${reason[0].name})`;
+        } else {
+          leaveReason.value = "";
+        }
+        reasonStatus.value = reason.length > 0 ? true : false;
+      })
+      .catch((e) => {
+        messageError($q, e);
+      })
+      .finally(() => {
+        hideLoader();
+      });
+  }
+};
+
+const checkProfileData = async () => {
+  if (profileId.value !== "") {
+    showLoader();
+    await http
+      .get(config.API.profileCheckId(profileId.value))
+      .then((res) => {
+        let data = res.data.result;
+        if (data == false) router.push("/registry");
+      })
+      .catch((e) => {
+        router.push("/registry");
+      })
+      .finally(() => {
+        hideLoader();
+      });
+  }
+};
+
+const fetchAvatarHistory = async () => {
+  if (profileId.value !== "") {
+    showLoader();
+    await http
+      .get(config.API.profileAvatarHistoryId(profileId.value))
+      .then((res) => {
+        let data = res.data.result;
+        images.value = [];
+        data.map((e: any) => {
+          images.value.push({
+            id: e.id,
+            avatar: e.avatar,
+            avatarId: e.avatarId,
+            createdDate: new Date(e.createdDate),
+            isActive: e.isActive,
+          });
+        });
+      })
+      .catch((e) => {
+        messageError($q, e);
+      })
+      .finally(() => {
+        hideLoader();
+      });
+  }
+};
+
+const uploadImage = async (e: any) => {
+  if (profileId.value !== "") {
+    let input = e.target.files;
+    if (input.length > 0) {
+      const formData = new FormData();
+      formData.append("FileData", input[0]);
+      showLoader();
+      await http
+        .post(config.API.profileAvatarId(profileId.value), formData)
+        .then((res) => {})
+        .catch((e) => {
+          messageError($q, e);
+        })
+        .finally(async () => {
+          await fetchData();
+          dialogImage.value = false;
+        });
+      return;
+    }
+  }
+};
+
+const fetchDataDelete = async (id: string) => {
+  showLoader();
+  await http
+    .delete(config.API.profileAvatarHistoryId(id))
+    .then((res) => {
+      success($q, "ลบรูปภาพสำเร็จ");
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(async () => {
+      await fetchData();
+      await clickImage();
+      //   dialogImage.value = false;
+    });
+};
+
+const deletePhoto = async (id: string) => {
+  dialogMessage(
+    $q,
+    "ลบข้อมูล",
+    "ต้องการทำการลบข้อมูลนี้ใช่หรือไม่",
+    "delete",
+    undefined,
+    "red",
+    () => fetchDataDelete(id),
+    undefined,
+    false
+  );
+};
+
+const selectAvatarHistory = async () => {
+  if (activeImage.value == null) {
+    dialogMessage(
+      $q,
+      "ไม่สามารถเปลี่ยนรูปได้",
+      "กรุณาเลือกรูปที่ต้องการเปลี่ยน",
+      "warning",
+      undefined,
+      "orange",
+      undefined,
+      undefined,
+      true
+    );
+    return;
+  }
+  if (profileId.value !== "") {
+    showLoader();
+    await http
+      .put(config.API.profileAvatarId(profileId.value), {
+        avatar: activeImage.value.avatarId,
+      })
+      .then((res) => {
+        dialogImage.value = false;
+      })
+      .catch((e) => {
+        messageError($q, e);
+      })
+      .finally(async () => {
+        await fetchData();
+      });
+  }
+};
+
+const imageActive = (n: any) => {
+  activeImage.value = n;
+};
+
+const imageClass = (n: any) => {
+  const val = n == activeImage.value;
+  return {
+    "rounded-borders bg-grey-2 image-size-default": val,
+    "rounded-borders bg-grey-2 image-size-full": !val,
+  };
+};
+
+const getClass = (n: any) => {
+  const val = n == activeImage.value;
+  return {
+    "rounded-borders border-green shadow-1": val,
+    "rounded-borders shadow-1": !val,
+  };
+};
+
+const addNewImage = async () => {
+  inputImage.value.click();
+  await imageActive(null);
+};
+
+const clickImage = async () => {
+  await fetchAvatarHistory();
+  dialogImage.value = true;
+};
+
+const closeImage = () => {
+  dialogImage.value = false;
+};
+
+const closeKp7 = () => {
+  dialog.value = false;
+};
+</script>
+<style>
+.image-size-default {
+  height: 150px;
+  max-width: 15vw;
+}
+
+.image-size-full {
+  height: 160px;
+  max-width: 15vw;
+}
+
+.border-green {
+  border: 5px solid #52c688;
+}
+
+.area-div {
+  background-color: transparent;
+}
+
+.text-header {
+  font-size: 1.2em;
+}
+
+.containerimage {
+  position: relative;
+}
+
+.containerimage:hover .overlay {
+  opacity: 1;
+}
+
+.overlay {
+  background-color: #e4f2ffd2 !important;
+  opacity: 0;
+  padding: 2px !important;
+}
+
+.information:target {
+  padding-top: 84px;
+}
+
+.border-custom {
+  border: 0.5px solid #c3c3c3;
+}
+
+.bg-active-image {
+  background-color: #52c688;
+}
+
+.text-name {
+  font-size: 1.3em;
+  overflow: hidden;
+}
+
+.text-sub {
+  font-size: 1.2em;
+  overflow: hidden;
+  color: var(--q-primary);
+}
+</style>
diff --git a/src/modules/05_placement/components/Receive/information.vue b/src/modules/05_placement/components/Receive/information.vue
new file mode 100644
index 000000000..92166e018
--- /dev/null
+++ b/src/modules/05_placement/components/Receive/information.vue
@@ -0,0 +1,1138 @@
+<template>
+  <q-card flat bordered class="col-12 q-px-lg q-py-md">
+    <HeaderTop
+      v-model:edit="edit"
+      header="ข้อมูลส่วนตัว"
+      icon="mdi-account"
+      :save="saveData"
+      :history="!statusAdd()"
+      :disable="statusEdit"
+      :cancel="onCancel"
+      :historyClick="clickHistory"
+      :addEmployee="statusAdd()"
+    />
+    <q-separator />
+    <q-form ref="myform" class="col-12">
+      <div class="row col-12 items-center q-col-gutter-x-sm q-col-gutter-y-sm">
+        <div class="col-xs-6 col-sm-3 col-md-3">
+          <q-input
+            :class="getClass(edit)"
+            hide-bottom-space
+            :outlined="edit"
+            v-model="informaData.cardid"
+            dense
+            @update:model-value="changeCardID"
+            lazy-rules
+            :rules="[
+              (val:string) => !!val || `${'กรุณากรอก เลขบัตรประจำตัวประชาชน'}`,
+              (val:string) =>
+                val.length >= 13 ||
+                `${'กรุณากรอกเลขบัตรประจำตัวประชาชนให้ครบ'}`,
+            ]"
+            :readonly="!edit"
+            :borderless="!edit"
+            label="เลขบัตรประจำตัวประชาชน"
+            maxlength="13"
+            mask="#############"
+          />
+          <!-- :rules="[(val:any) =>val.length != 13 ||`${'กรุณากรอกเลขบัตรประจำตัวประชาชนให้ครบ'}`,]" -->
+        </div>
+        <div class="col-xs-6 col-sm-3 col-md-3">
+          <selector
+            :hide-dropdown-icon="!edit"
+            hide-bottom-space
+            :class="getClass(edit)"
+            :readonly="!edit"
+            :borderless="!edit"
+            :rules="[(val:string) => !!val || `${'กรุณาเลือก คำนำหน้าชื่อ'}`]"
+            :outlined="edit"
+            dense
+            lazy-rules
+            v-model="informaData.prefixId"
+            emit-value
+            map-options
+            option-label="name"
+            :options="Ops.prefixOps"
+            option-value="id"
+            :label="`${'คำนำหน้าชื่อ'}`"
+            use-input
+            input-debounce="0"
+            @filter="(inputValue:any,
+                        doneFn:Function) => filterSelector(inputValue, doneFn,'prefixOps'
+                        ) "
+          />
+        </div>
+
+        <div class="col-xs-6 col-sm-3 col-md-3">
+          <q-input
+            :class="getClass(edit)"
+            hide-bottom-space
+            :outlined="edit"
+            dense
+            lazy-rules
+            :readonly="!edit"
+            :borderless="!edit"
+            v-model="informaData.firstname"
+            :rules="[(val:string) => !!val || `${'กรุณากรอก ชื่อ'}`]"
+            :label="`${'ชื่อ'}`"
+          />
+        </div>
+        <div class="col-xs-6 col-sm-3 col-md-3">
+          <q-input
+            :class="getClass(edit)"
+            hide-bottom-space
+            :outlined="edit"
+            dense
+            lazy-rules
+            :readonly="!edit"
+            :borderless="!edit"
+            v-model="informaData.lastname"
+            :rules="[(val:string) => !!val || `${'กรุณากรอก นามสกุล'}`]"
+            :label="`${'นามสกุล'}`"
+          />
+        </div>
+        <div class="col-xs-6 col-sm-2 col-md-2">
+          <datepicker
+            v-model="informaData.birthDate"
+            :locale="'th'"
+            autoApply
+            :enableTimePicker="false"
+            week-start="0"
+            :max-date="new Date()"
+            :disabled="!edit"
+            @update:model-value="handleDate"
+          >
+            <template #year="{ year }">
+              {{ year + 543 }}
+            </template>
+            <template #year-overlay-value="{ value }">
+              {{ parseInt(value + 543) }}
+            </template>
+            <template #trigger>
+              <q-input
+                :class="getClass(edit)"
+                hide-bottom-space
+                :outlined="edit"
+                dense
+                lazy-rules
+                :readonly="!edit"
+                :borderless="!edit"
+                :model-value="
+                  informaData.birthDate == null
+                    ? null
+                    : date2Thai(informaData.birthDate)
+                "
+                :rules="[(val:string) => !!val || `${'กรุณาเลือก วัน/เดือน/ปี เกิด'}`]"
+                :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 class="col-xs-6 col-sm-2 col-md-2">
+          <q-input
+            :class="getClass(false)"
+            hide-bottom-space
+            dense
+            lazy-rules
+            readonly
+            borderless
+            :style="!edit ? '' : 'padding:0 12px;'"
+            :model-value="informaData.age"
+            :label="`${'อายุ'}`"
+          />
+        </div>
+        <div class="col-xs-6 col-sm-2 col-md-2">
+          <selector
+            :hide-dropdown-icon="!edit"
+            hide-bottom-space
+            :class="getClass(edit)"
+            :readonly="!edit"
+            :borderless="!edit"
+            :outlined="edit"
+            dense
+            lazy-rules
+            v-model="informaData.genderId"
+            emit-value
+            map-options
+            option-label="name"
+            :options="Ops.genderOps"
+            option-value="id"
+            :label="`${'เพศ'}`"
+            use-input
+            input-debounce="0"
+            @filter="(inputValue:any,
+                        doneFn:Function) => filterSelector(inputValue, doneFn,'genderOps'
+                        ) "
+          />
+        </div>
+        <div class="col-xs-6 col-sm-2 col-md-2">
+          <selector
+            :hide-dropdown-icon="!edit"
+            hide-bottom-space
+            :class="getClass(edit)"
+            :readonly="!edit"
+            :borderless="!edit"
+            :outlined="edit"
+            dense
+            lazy-rules
+            v-model="informaData.statusId"
+            emit-value
+            map-options
+            option-label="name"
+            :options="Ops.statusOps"
+            option-value="id"
+            :label="`${'สถานภาพ'}`"
+            use-input
+            input-debounce="0"
+            @filter="(inputValue:any,
+                        doneFn:Function) => filterSelector(inputValue, doneFn,'statusOps'
+                        ) "
+          />
+        </div>
+        <div class="col-xs-6 col-sm-2 col-md-2">
+          <q-input
+            :class="getClass(edit)"
+            hide-bottom-space
+            :outlined="edit"
+            dense
+            lazy-rules
+            :readonly="!edit"
+            :borderless="!edit"
+            v-model="informaData.nationality"
+            :label="`${'สัญชาติ'}`"
+          />
+        </div>
+        <div class="col-xs-6 col-sm-2 col-md-2">
+          <q-input
+            :class="getClass(edit)"
+            hide-bottom-space
+            :outlined="edit"
+            dense
+            lazy-rules
+            :readonly="!edit"
+            :borderless="!edit"
+            v-model="informaData.ethnicity"
+            :label="`${'เชื้อชาติ'}`"
+          />
+        </div>
+        <div class="col-xs-6 col-sm-2 col-md-2">
+          <selector
+            :hide-dropdown-icon="!edit"
+            hide-bottom-space
+            :class="getClass(edit)"
+            :readonly="!edit"
+            :borderless="!edit"
+            :outlined="edit"
+            dense
+            lazy-rules
+            v-model="informaData.religionId"
+            emit-value
+            map-options
+            option-label="name"
+            :options="Ops.religionOps"
+            option-value="id"
+            :label="`${'ศาสนา'}`"
+            use-input
+            input-debounce="0"
+            @filter="(inputValue:any,
+                        doneFn:Function) => filterSelector(inputValue, doneFn,'religionOps'
+                        ) "
+          />
+        </div>
+        <div class="col-xs-6 col-sm-2 col-md-2">
+          <selector
+            :hide-dropdown-icon="!edit"
+            hide-bottom-space
+            :class="getClass(edit)"
+            :readonly="!edit"
+            :borderless="!edit"
+            :outlined="edit"
+            dense
+            lazy-rules
+            v-model="informaData.bloodId"
+            emit-value
+            map-options
+            option-label="name"
+            :options="Ops.bloodOps"
+            option-value="id"
+            :label="`${'หมู่เลือด'}`"
+            use-input
+            input-debounce="0"
+            @filter="(inputValue:any,
+                        doneFn:Function) => filterSelector(inputValue, doneFn,'bloodOps'
+                        ) "
+            clearable
+          />
+        </div>
+        <div class="col-xs-6 col-sm-2 col-md-2">
+          <q-input
+            hide-bottom-space
+            :outlined="edit"
+            dense
+            lazy-rules
+            type="tel"
+            :class="getClass(edit)"
+            :readonly="!edit"
+            :borderless="!edit"
+            v-model="informaData.tel"
+            :label="`${'เบอร์โทร'}`"
+            mask="##########"
+          />
+        </div>
+        <div
+          class="col-xs-6 col-sm-3 col-md-3"
+          v-if="informaData.profileType == 'employee'"
+        >
+          <selector
+            :hide-dropdown-icon="!edit"
+            hide-bottom-space
+            :class="getClass(edit)"
+            :readonly="!edit"
+            :borderless="!edit"
+            :rules="[(val:string) => !!val || `${'กรุณาเลือก ประเภทการจ้าง'}`]"
+            :outlined="edit"
+            dense
+            lazy-rules
+            v-model="informaData.employeeType"
+            emit-value
+            map-options
+            option-label="name"
+            :options="Ops.employeeTypeOps"
+            option-value="id"
+            :label="`${'ประเภทการจ้าง'}`"
+            use-input
+            input-debounce="0"
+            @filter="(inputValue:any,
+                        doneFn:Function) => filterSelector(inputValue, doneFn,'employeeTypeOps'
+                        ) "
+          />
+        </div>
+        <div
+          class="col-xs-6 col-sm-3 col-md-3"
+          v-if="informaData.profileType == 'employee'"
+        >
+          <selector
+            :hide-dropdown-icon="!edit"
+            hide-bottom-space
+            :class="getClass(edit)"
+            :readonly="!edit"
+            :borderless="!edit"
+            :rules="[(val:string) => !!val || `${'กรุณาเลือก ประเภทลูกจ้าง'}`]"
+            :outlined="edit"
+            dense
+            lazy-rules
+            v-model="informaData.employeeClass"
+            emit-value
+            map-options
+            option-label="name"
+            :options="Ops.employeeClassOps"
+            option-value="id"
+            :label="`${'ประเภทลูกจ้าง'}`"
+            use-input
+            input-debounce="0"
+            @filter="(inputValue:any,
+                        doneFn:Function) => filterSelector(inputValue, doneFn,'employeeClassOps'
+                        ) "
+          />
+        </div>
+        <div class="col-12 q-pt-md q-pb-sm"><q-separator /></div>
+      </div>
+    </q-form>
+
+    <HistoryTable
+      :rows="rowsHistory"
+      :columns="columnsHistory"
+      :filter="filterHistory"
+      :visible-columns="visibleColumnsHistory"
+      v-model:modal="modalHistory"
+      v-model:inputfilter="filterHistory"
+      v-model:inputvisible="visibleColumnsHistory"
+      v-model:tittle="tittleHistory"
+    >
+      <template #columns="props">
+        <q-tr :props="props">
+          <q-td v-for="col in props.cols" :key="col.name" :props="props">
+            <div
+              v-if="col.name == 'birthDate' || col.name == 'createdAt'"
+              class="table_ellipsis"
+            >
+              {{ date2Thai(col.value) }}
+            </div>
+            <div v-else class="table_ellipsis">
+              {{ col.value }}
+            </div>
+          </q-td>
+        </q-tr>
+      </template>
+    </HistoryTable>
+    <div class="row col-12 q-pa-sm">
+      <q-space />
+      <q-btn
+        unelevated
+        dense
+        class="q-px-md items-center"
+        color="light-blue-10"
+        label="บันทึก"
+        @click="saveData"
+      />
+    </div>
+    <q-separator />
+  </q-card>
+</template>
+<script setup lang="ts">
+import { ref, onMounted } from "vue";
+import { useCounterMixin } from "@/stores/mixin";
+
+import { useQuasar } from "quasar";
+import type {
+  Information,
+  DataOption,
+} from "@/modules/04_registry/components/profileType";
+import { defaultInformation } from "@/modules/04_registry/components/profileType";
+import type {
+  RequestItemsHistoryObject,
+  Columns,
+} from "@/modules/04_registry/interface/request/Information";
+import type { ResponseObject } from "@/modules/04_registry/interface/response/Information";
+import type { InformationOps } from "@/modules/04_registry/interface/index/Main";
+import HeaderTop from "@/modules/08_registryEmployee/views/top.vue";
+import HistoryTable from "@/components/TableHistory.vue";
+import http from "@/plugins/http";
+import config from "@/app.config";
+import { useRoute, useRouter } from "vue-router";
+import { useProfileDataStore } from "@/modules/08_registryEmployee/store";
+import type { QTableColumn, QForm } from "quasar";
+
+const props = defineProps({
+  statusEdit: {
+    type: Boolean,
+    required: true,
+  },
+  fetchDataProfile: {
+    type: Function,
+    default: () => console.log("not function"),
+  },
+  statusAdd: {
+    type: Boolean,
+    default: false,
+  },
+});
+const emit = defineEmits(["update:statusEdit"]);
+
+const router = useRouter();
+const route = useRoute();
+const $q = useQuasar();
+const mixin = useCounterMixin();
+const {
+  date2Thai,
+  success,
+  dateToISO,
+  messageError,
+  dialogMessage,
+  showLoader,
+  hideLoader,
+} = mixin;
+
+const profileStore = useProfileDataStore();
+const { changeRetireText, changeBirth } = profileStore;
+const edit = ref<boolean>(false);
+const defaultCitizenData = ref<string>("");
+const informaData = ref<Information>(defaultInformation);
+const rowsHistory = ref<RequestItemsHistoryObject[]>([]); //select data history
+const tittleHistory = ref<string>("ประวัติแก้ไขข้อมูลส่วนตัว"); //
+const filterHistory = ref<string>(""); //search data table history
+const modalHistory = ref<boolean>(false); //modal ประวัติการแก้ไขข้อมูล
+const myform = ref<QForm | null>(null);
+const dateBefore = ref<Date>(new Date());
+const same = ref<string>("0");
+const Ops = ref<InformationOps>({
+  prefixOps: [],
+  prefixOldOps: [],
+  genderOps: [],
+  bloodOps: [],
+  statusOps: [],
+  religionOps: [],
+  employeeClassOps: [
+    { id: "perm", name: "ลูกจ้างประจำ" },
+    { id: "temp", name: "ลูกจ้างชั่วคราว" },
+  ],
+  employeeTypeOps: [
+    { id: "gov", name: "งบประมาณเงินอุดหนุนรัฐบาล" },
+    { id: "bkk", name: "งบประมาณกรุงเทพมหานคร" },
+  ],
+});
+const OpsFilter = ref<InformationOps>({
+  prefixOps: [],
+  prefixOldOps: [],
+  genderOps: [],
+  bloodOps: [],
+  statusOps: [],
+  religionOps: [],
+  employeeClassOps: [
+    { id: "perm", name: "ลูกจ้างประจำ" },
+    { id: "temp", name: "ลูกจ้างชั่วคราว" },
+  ],
+  employeeTypeOps: [
+    { id: "gov", name: "งบประมาณเงินอุดหนุนรัฐบาล" },
+    { id: "bkk", name: "งบประมาณกรุงเทพมหานคร" },
+  ],
+});
+const columnsHistory = ref<QTableColumn[]>([
+  {
+    name: "citizenId",
+    align: "left",
+    label: "เลขบัตรประจำตัวประชาชน",
+    sortable: true,
+    field: "citizenId",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "prefix",
+    align: "left",
+    label: "คำนำหน้าชื่อ",
+    sortable: true,
+    field: "prefix",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "firstName",
+    align: "left",
+    label: "ชื่อ",
+    sortable: true,
+    field: "firstName",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "lastName",
+    align: "left",
+    label: "นามสกุล",
+    sortable: true,
+    field: "lastName",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "birthDate",
+    align: "left",
+    label: "วัน/เดือน/ปี เกิด",
+    sortable: true,
+    field: "birthDate",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "gender",
+    align: "left",
+    label: "เพศ",
+    sortable: true,
+    field: "gender",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "relationship",
+    align: "left",
+    label: "สถานภาพ",
+    sortable: true,
+    field: "relationship",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "bloodGroup",
+    align: "left",
+    label: "หมู่เลือด",
+    sortable: true,
+    field: "bloodGroup",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "nationality",
+    align: "left",
+    label: "สัญชาติ",
+    sortable: true,
+    field: "nationality",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "race",
+    align: "left",
+    label: "เชื้อชาติ",
+    sortable: true,
+    field: "race",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "religion",
+    align: "left",
+    label: "ศาสนา",
+    sortable: true,
+    field: "religion",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "telephoneNumber",
+    align: "left",
+    label: "เบอร์โทร",
+    sortable: true,
+    field: "telephoneNumber",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "employeeType",
+    align: "left",
+    label: "ประเภทการจ้าง",
+    sortable: true,
+    field: "employeeType",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "employeeClass",
+    align: "left",
+    label: "ประเภทลูกจ้าง",
+    sortable: true,
+    field: "employeeClass",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "createdFullName",
+    align: "left",
+    label: "ผู้ดำเนินการ",
+    sortable: true,
+    field: "createdFullName",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "createdAt",
+    align: "left",
+    label: "วันที่แก้ไข",
+    sortable: true,
+    field: "createdAt",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+]);
+const visibleColumnsHistory = ref<String[]>([
+  "citizenId",
+  "prefix",
+  "firstName",
+  "lastName",
+  "birthDate",
+  "gender",
+  "relationship",
+  "bloodGroup",
+  "nationality",
+  "race",
+  "religion",
+  "telephoneNumber",
+  "employeeType",
+  "employeeClass",
+  "createdFullName",
+  "createdAt",
+]);
+
+onMounted(async () => {
+  await fetchPerson();
+  emit("update:statusEdit", false);
+  defaultAdd();
+});
+
+const statusAdd = () => props.statusAdd;
+
+const defaultAdd = () => {
+  //   if (props.statusAdd) {
+  edit.value = props.statusAdd;
+  informaData.value = {
+    cardid: "",
+    age: "",
+    prefix: "",
+    prefixId: "",
+    firstname: "",
+    lastname: "",
+    birthDate: null,
+    genderId: "",
+    bloodId: "",
+    nationality: "",
+    ethnicity: "",
+    statusId: "",
+    religionId: "",
+    tel: "",
+    employeeType: "",
+    employeeClass: "",
+    profileType: "",
+  };
+  //   }
+};
+
+const onCancel = async () => {
+  if (myform.value != null) {
+    myform.value.reset();
+  }
+  await fetchData();
+};
+
+/**
+ * get รายการ ข้อมูลเกี่ยวกับบุคคล
+ */
+const fetchPerson = async () => {
+  showLoader();
+  await http
+    .get(config.API.person)
+    .then((res) => {
+      const data = res.data.result;
+      let optionbloodGroups: DataOption[] = [];
+      data.bloodGroups.map((r: any) => {
+        optionbloodGroups.push({
+          id: r.id.toString(),
+          name: r.name.toString(),
+        });
+      });
+      Ops.value.bloodOps = optionbloodGroups;
+      OpsFilter.value.bloodOps = optionbloodGroups;
+
+      let optiongenders: DataOption[] = [];
+      data.genders.map((r: any) => {
+        optiongenders.push({
+          id: r.id.toString(),
+          name: r.name.toString(),
+        });
+      });
+      Ops.value.genderOps = optiongenders;
+      OpsFilter.value.genderOps = optiongenders;
+
+      let optionprefixs: DataOption[] = [];
+      data.prefixs.map((r: any) => {
+        optionprefixs.push({
+          id: r.id.toString(),
+          name: r.name.toString(),
+        });
+      });
+      Ops.value.prefixOps = optionprefixs;
+      OpsFilter.value.prefixOps = optionprefixs;
+
+      let optionrelationships: DataOption[] = [];
+      data.relationships.map((r: any) => {
+        optionrelationships.push({
+          id: r.id.toString(),
+          name: r.name.toString(),
+        });
+      });
+      Ops.value.statusOps = optionrelationships;
+      OpsFilter.value.statusOps = optionrelationships;
+
+      let optionreligions: DataOption[] = [];
+      data.religions.map((r: any) => {
+        optionreligions.push({
+          id: r.id.toString(),
+          name: r.name.toString(),
+        });
+      });
+      Ops.value.religionOps = optionreligions;
+      OpsFilter.value.religionOps = optionreligions;
+    })
+    .catch((e: any) => {})
+    .finally(() => {
+      hideLoader();
+    });
+};
+
+const changeCardID = async (value: string | number | null) => {
+  if (value != null && typeof value == "string") {
+    if (value.length == 13 && value != defaultCitizenData.value) {
+      await checkCitizen(value);
+      //   informaData.value.cardid = defaultCitizenData.value;
+    }
+  }
+};
+
+const checkCitizen = async (id: string) => {
+  console.log("String");
+  showLoader();
+  await http
+    .get(config.API.profileCitizenId(id))
+    .then((res) => {
+      const data = res.data.result.citizen;
+
+      if (!data) {
+        dialogMessage(
+          $q,
+          "ข้อความแจ้งเตือน",
+          "เลขบัตรประจำตัวประชาชนนี้มีการใช้งานแล้ว",
+          "warning",
+          undefined,
+          "orange",
+          undefined,
+          undefined,
+          true
+        );
+        informaData.value.cardid = defaultCitizenData.value;
+      }
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+};
+
+/**
+ * ฟังชั้นดูข้อมูลประวัติแก้ไขข้อมูลที่เลือก
+ */
+const clickHistory = async () => {
+  modalHistory.value = true;
+  showLoader();
+  await http
+    .get(config.API.profileInforHisId(route.params.id.toString()))
+    .then((res) => {
+      let data = res.data.result;
+      rowsHistory.value = [];
+      data.map((e: RequestItemsHistoryObject) => {
+        rowsHistory.value.push({
+          citizenId: e.citizenId,
+          prefix: e.prefix,
+          firstName: e.firstName,
+          lastName: e.lastName,
+          birthDate: new Date(e.birthDate),
+          gender: e.gender,
+          relationship: e.relationship,
+          bloodGroup: e.bloodGroup,
+          nationality: e.nationality,
+          race: e.race,
+          religion: e.religion,
+          telephoneNumber: e.telephoneNumber,
+          employeeType:
+            e.employeeType == "gov"
+              ? "งบประมาณเงินอุดหนุนรัฐบาล"
+              : e.employeeType == "bkk"
+              ? "งบประมาณกรุงเทพมหานคร"
+              : "-",
+          employeeClass:
+            e.employeeClass == "perm"
+              ? "ลูกจ้างประจำ"
+              : e.employeeClass == "temp"
+              ? "ลูกจ้างชั่วคราว"
+              : "-",
+          createdFullName: e.createdFullName,
+          createdAt: new Date(e.createdAt),
+        });
+      });
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+};
+
+const filterSelector = (val: any, update: Function, refData: string) => {
+  switch (refData) {
+    case "prefixOps":
+      update(() => {
+        Ops.value.prefixOps = OpsFilter.value.prefixOps.filter(
+          (v: DataOption) => v.name.indexOf(val) > -1
+        );
+      });
+      break;
+    case "genderOps":
+      update(() => {
+        Ops.value.genderOps = OpsFilter.value.genderOps.filter(
+          (v: DataOption) => v.name.indexOf(val) > -1
+        );
+      });
+      break;
+    case "bloodOps":
+      update(() => {
+        Ops.value.bloodOps = OpsFilter.value.bloodOps.filter(
+          (v: DataOption) => v.name.indexOf(val) > -1
+        );
+      });
+      break;
+    case "statusOps":
+      update(() => {
+        Ops.value.statusOps = OpsFilter.value.statusOps.filter(
+          (v: DataOption) => v.name.indexOf(val) > -1
+        );
+      });
+      break;
+    case "religionOps":
+      update(() => {
+        Ops.value.religionOps = OpsFilter.value.religionOps.filter(
+          (v: DataOption) => v.name.indexOf(val) > -1
+        );
+      });
+      break;
+    case "employeeClassOps":
+      update(() => {
+        Ops.value.employeeClassOps = OpsFilter.value.employeeClassOps.filter(
+          (v: DataOption) => v.name.indexOf(val) > -1
+        );
+      });
+      break;
+    case "employeeTypeOps":
+      update(() => {
+        Ops.value.employeeTypeOps = OpsFilter.value.employeeTypeOps.filter(
+          (v: DataOption) => v.name.indexOf(val) > -1
+        );
+      });
+      break;
+
+    default:
+      break;
+  }
+};
+
+const handleDate = async (modelData: Date) => {
+  informaData.value.birthDate = modelData;
+  await calRetire(modelData);
+};
+
+const fetchDataComponent = async (modelData: Date) => {
+  await props.fetchDataProfile();
+  await fetchData();
+};
+
+const calRetire = async (birth: Date) => {
+  const body = {
+    birthDate: dateToISO(birth),
+  };
+  if (dateToISO(dateBefore.value) != dateToISO(birth)) {
+    showLoader();
+    await http
+      .post(config.API.profileCalRetire, body)
+      .then((res: any) => {
+        const data = res.data.result;
+        informaData.value.age = data.age;
+        changeRetireText(data.retireDate);
+        dateBefore.value = birth;
+      })
+      .catch((e: any) => {
+        messageError($q, e);
+        const retire = new Date(`${birth.getFullYear() + 60}-09-30`);
+        informaData.value.birthDate = dateBefore.value;
+        changeRetireText(date2Thai(retire));
+      })
+      .finally(() => {
+        hideLoader();
+      });
+  }
+};
+
+const fetchData = async () => {
+  if (route.params.id) {
+    showLoader();
+    await http
+      .get(config.API.profileInforId(route.params.id.toString()))
+      .then(async (res: any) => {
+        const data: ResponseObject = res.data.result;
+        defaultCitizenData.value = data.citizenId == null ? "" : data.citizenId;
+        informaData.value.cardid = data.citizenId;
+        informaData.value.prefix = "";
+        informaData.value.prefixId = data.prefixId;
+        informaData.value.firstname = data.firstName;
+        informaData.value.lastname = data.lastName;
+        informaData.value.birthDate = new Date(data.birthDate);
+        informaData.value.genderId = data.genderId;
+        informaData.value.bloodId = data.bloodGroupId;
+        informaData.value.nationality = data.nationality;
+        informaData.value.ethnicity = data.race;
+        informaData.value.statusId = data.relationshipId;
+        informaData.value.religionId = data.religionId;
+        informaData.value.tel = data.telephoneNumber;
+        informaData.value.age = data.age;
+        informaData.value.employeeType = data.employeeType;
+        informaData.value.employeeClass = data.employeeClass;
+        informaData.value.profileType = data.profileType;
+        dateBefore.value = new Date(data.birthDate);
+        same.value = data.changeName == true ? "1" : "0";
+        await calRetire(new Date(dateToISO(new Date(data.birthDate))));
+        if (
+          data.profileType == "officer" &&
+          columnsHistory.value.length >= 15
+        ) {
+          columnsHistory.value.splice(13, 1);
+          columnsHistory.value.splice(12, 1);
+        }
+      })
+      .catch((e) => {
+        messageError($q, e);
+      })
+      .finally(async () => {
+        //   hideLoader();
+        await props.fetchDataProfile();
+      });
+  }
+};
+
+const editData = async () => {
+  showLoader();
+
+  const body: any = {
+    citizenId: informaData.value.cardid,
+    prefixId: informaData.value.prefixId,
+    firstName: informaData.value.firstname,
+    lastName: informaData.value.lastname,
+    genderId: informaData.value.genderId,
+    nationality: informaData.value.nationality,
+    race: informaData.value.ethnicity,
+    religionId: informaData.value.religionId,
+    birthDate: dateToISO(informaData.value.birthDate) ?? dateToISO(new Date()),
+    bloodGroupId: informaData.value.bloodId,
+    relationshipId: informaData.value.statusId,
+    telephoneNumber: informaData.value.tel,
+    createdAt: new Date(),
+    age: null,
+    employeeType: informaData.value.employeeType,
+    employeeClass: informaData.value.employeeClass,
+    profileType: informaData.value.profileType,
+    createdFullName: "-",
+  };
+
+  await http
+    .put(config.API.profileInforId(route.params.id.toString()), body)
+    .then((res) => {
+      success($q, "บันทึกข้อมูลสำเร็จ");
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(async () => {
+      edit.value = false;
+      emit("update:statusEdit", false);
+      await fetchData();
+      await changeBirth(informaData.value.birthDate ?? new Date());
+      hideLoader();
+    });
+};
+
+const addData = async () => {
+  showLoader();
+
+  // const formData = {
+  //   CitizenId: informaData.value.cardid,
+  //   Prefix: informaData.value.prefixId,
+  //   Firstname: informaData.value.firstname,
+  //   Lastname: informaData.value.lastname,
+  //   Gender: informaData.value.genderId,
+  //   Nationality: informaData.value.nationality,
+  //   Race: informaData.value.ethnicity,
+  //   Religion: informaData.value.religionId,
+  //   DateOfBirth: dateToISO(informaData.value.birthDate) ?? dateToISO(new Date()),
+  //   BloodGroup: informaData.value.bloodId,
+  //   Relationship: informaData.value.statusId,
+  //   TelephoneNumber: informaData.value.tel,
+  // };
+
+  const formData = new FormData();
+  if (informaData.value.cardid != undefined)
+  formData.append("CitizenId", informaData.value.cardid);
+  if (informaData.value.prefixId != undefined)
+  formData.append("Prefix", informaData.value.prefixId);
+  if (informaData.value.firstname != undefined)
+  formData.append("Firstname", informaData.value.firstname);
+  if (informaData.value.lastname != undefined)
+  formData.append("Lastname", informaData.value.lastname);
+  if (informaData.value.genderId != undefined)
+  formData.append("Gender", informaData.value.genderId);
+  if (informaData.value.nationality != undefined)
+  formData.append("Nationality", informaData.value.nationality);
+  if (informaData.value.ethnicity != undefined)
+  formData.append("Race", informaData.value.ethnicity);
+  if (informaData.value.religionId != undefined)
+  formData.append("Religion", informaData.value.religionId);
+  if (informaData.value.birthDate != undefined)
+  formData.append("DateOfBirth", dateToISO(informaData.value.birthDate) ?? dateToISO(new Date()));
+  if (informaData.value.bloodId != undefined)
+  formData.append("BloodGroup", informaData.value.bloodId);
+  if (informaData.value.statusId != undefined)
+  formData.append("Relationship", informaData.value.statusId);
+  if (informaData.value.tel != undefined)
+  formData.append("TelephoneNumber", informaData.value.tel);
+
+  await http
+    .post(config.API.receiveData(), formData)
+    .then((res) => {
+      success($q, "บันทึกข้อมูลสำเร็จ");
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(async () => {
+      hideLoader();
+      router.push("/receive");
+    });
+};
+
+const saveData = async () => {
+  console.log(myform.value);
+  if (myform.value != null) {
+    await myform.value.validate().then(async (saveDataTest: Boolean) => {
+      if (saveDataTest) {
+       addData();
+      }
+    });
+  }
+};
+
+const getClass = (val: boolean) => {
+  return {
+    "full-width inputgreen cursor-pointer": val,
+    "full-width cursor-pointer": !val,
+  };
+};
+</script>
diff --git a/src/modules/05_placement/components/Receive/receiveMain.vue b/src/modules/05_placement/components/Receive/receiveMain.vue
index 7dc840540..675cd159f 100644
--- a/src/modules/05_placement/components/Receive/receiveMain.vue
+++ b/src/modules/05_placement/components/Receive/receiveMain.vue
@@ -6,6 +6,17 @@ import { useRouter } from "vue-router";
 import DialogFooter from "@/modules/05_placement/components/Receive/DialogFooter.vue";
 import DialogHeader from "@/modules/05_placement/components/Receive/DialogHeader.vue";
 import DialogOrgTree from "@/modules/05_placement/components/Receive/receiveModal.vue";
+import { useCounterMixin } from "@/stores/mixin";
+import { config } from "@fullcalendar/core/internal";
+import http from "@/plugins/http";
+const mixin = useCounterMixin(); //เรียกฟังก์ชันกลาง
+const { 
+  showLoader,
+  hideLoader,
+  dateText,
+  success,
+  messageError
+} = mixin;
 
 const selected = ref([]);
 const checkSelected = computed(() => {
@@ -13,6 +24,11 @@ const checkSelected = computed(() => {
     return true;
   }
 });
+
+const add = () => {
+  router.push(`/receive/add`);
+};
+
 const clickClose = () => {
   modal.value = false;
 };
@@ -29,21 +45,18 @@ const personal = ref<any[]>([]);
 const personalId = ref<string>("");
 const visibleColumns = ref<string[]>([
   "no",
+  "citizenId",
   "fullname",
-  "position",
-  "positionLevel",
-  "oc",
-  "agency",
-  "status",
+  "organizationName",
+  "birthday"
 ]);
+
 const visibleColumns2 = ref<string[]>([
   "no",
+  "citizenId",
   "fullname",
-  "position",
-  "positionLevel",
-  "oc",
-  "agency",
-  "status",
+  "organizationName",
+  "birthday"
 ]); //ค้นหา คอลัมน์ คอลัมน์ที่แสดง
 const filterKeyword = ref<string>("");
 const filterKeyword2 = ref<string>("");
@@ -60,95 +73,49 @@ const resetFilter = () => {
 const rows = ref<any>([
   {
     personalId: "08db721d-add6-47b0-8a13-5f45d106e8d1",
+    citizenId: "1234444332222",
     fullname: "นางสาวอย พชช",
-    position: "นักบริหาร",
-    positionLevel: "ต้น",
-    oc: "สำนักงานคณะกรรมการข้าราชการกรุงเทพมหานคร",
-    agency: "กลุ่มงานกุมารเวชกรรม",
-    status: "รออนุมัติ",
+    organizationName: "นักจัดการงานทั่วไป",
+    orgName: "กลุ่มงานช่วยนักบริหาร",
+    organizationShortName: "สกจ.",
+    positionNumber: "กก. 1",
+    positionPath: "นักจัดการงานทั่วไป",
+    birthday: dateText(new Date("1989-09-03"))
   },
   {
     personalId: "08db721d-adf2-4842-8056-1abb1539356e",
+    citizenId: "0000222333333",
     fullname: "นางสาววญ สพ",
-    position: "นักจัดการงานทั่วไป",
-    positionLevel: "ปฏิบัติการ",
-    oc: "กลุ่มงานช่วยนักบริหาร",
-    agency: "กลุ่มงานข้อมูลเมือง",
-    status: "รออนุมัติ",
-  },
-  {
-    personalId: "08db721d-ae3d-4b8c-8cf0-b86b5a2ed8bb",
-    fullname: "นางสาววญ สพ",
-    position: "นักจัดการงานทั่วไป",
-    positionLevel: "ปฏิบัติการ",
-    oc: "กลุ่มงานช่วยนักบริหาร",
-    agency: "กลุ่มงานข้อมูลเมือง",
-    status: "รออนุมัติ",
-  },
-  {
-    personalId: "08db721d-afde-4ed4-8bc6-f0ad83e61c4d",
-    fullname: "นางสาววญ สพ",
-    position: "นักจัดการงานทั่วไป",
-    positionLevel: "ปฏิบัติการ",
-    oc: "กลุ่มงานช่วยนักบริหาร",
-    agency: "กลุ่มงานข้อมูลเมือง",
-    status: "รออนุมัติ",
-  },
-  {
-    personalId: "08db721d-b24e-45d7-8a65-3f28ef4948a4",
-    fullname: "นางสาววญ สพ",
-    position: "นักจัดการงานทั่วไป",
-    positionLevel: "ปฏิบัติการ",
-    oc: "กลุ่มงานช่วยนักบริหาร",
-    agency: "กลุ่มงานข้อมูลเมือง",
-    status: "รออนุมัติ",
+    organizationName: "นักจัดการงานทั่วไป",
+    orgName: "กลุ่มงานช่วยนักบริหาร",
+    organizationShortName: "สกจ.",
+    positionNumber: "กก. 1",
+    positionPath: "นักจัดการงานทั่วไป",
+    birthday: dateText(new Date("1990-09-03")),
   },
 ]);
 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: "รออนุมัติ",
+    citizenId: "1234444332222",
+    fullname: "นางสาวอย พชช",
+    organizationName: "นักจัดการงานทั่วไป",
+    orgName: "กลุ่มงานช่วยนักบริหาร",
+    organizationShortName: "สกจ.",
+    positionNumber: "กก. 1",
+    positionPath: "นักจัดการงานทั่วไป",
+    birthday: dateText(new Date("1989-09-03")),
   },
   {
     personalId: "08db721d-adf2-4842-8056-1abb1539356e",
+    citizenId: "0000222333333",
     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: "รออนุมัติ",
+    organizationName: "นักจัดการงานทั่วไป",
+    orgName: "กลุ่มงานช่วยนักบริหาร",
+    organizationShortName: "สกจ.",
+    positionNumber: "กก. 1",
+    positionPath: "นักจัดการงานทั่วไป",
+    birthday: dateText(new Date("1990-09-03")),
   },
 ]);
 const columns = ref<QTableProps["columns"]>([
@@ -161,6 +128,15 @@ const columns = ref<QTableProps["columns"]>([
     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",
@@ -171,47 +147,22 @@ const columns = ref<QTableProps["columns"]>([
     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: "oc",
-    align: "left",
-    label: "สังกัด",
-    sortable: true,
-    field: "oc",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-  },
-  {
-    name: "agency",
+    name: "organizationName",
     align: "left",
     label: "หน่วยงานที่รับโอน",
     sortable: true,
-    field: "agency",
+    field: "organizationName",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
   {
-    name: "status",
+    name: "birthday",
     align: "left",
-    label: "สถานะ",
+    label: "วัน/เดือน/ปี เกิด",
     sortable: true,
-    field: "status",
+    field: "birthday",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
@@ -226,6 +177,15 @@ const columns2 = ref<QTableProps["columns"]>([
     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",
@@ -236,47 +196,22 @@ const columns2 = ref<QTableProps["columns"]>([
     style: "font-size: 14px",
   },
   {
-    name: "position",
+    name: "organizationName",
     align: "left",
-    label: "ตำแหน่งในสายงาน",
+    label: "หน่วยงานที่รับโอน",
     sortable: true,
-    field: "position",
+    field: "organizationName",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
   {
-    name: "positionLevel",
+    name: "birthday",
     align: "left",
-    label: "ระดับ",
+    label: "วัน/เดือน/ปี เกิด",
     sortable: true,
-    field: "positionLevel",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-  },
-  {
-    name: "oc",
-    align: "left",
-    label: "สังกัด",
-    sortable: true,
-    field: "oc",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-  },
-  {
-    name: "agency",
-    align: "left",
-    label: "หน่วยงานที่ขอโอนไป",
-    sortable: true,
-    field: "agency",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-  },
-  {
-    name: "status",
-    align: "left",
-    label: "สถานะ",
-    sortable: true,
-    field: "status",
+    field: "birthday",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
@@ -288,6 +223,33 @@ const openModalTree = (id: string) => {
   modalTree.value = true;
 };
 
+const openDelete = (id: string) => {
+  $q.dialog({
+    title: `ลบข้อมูล`,
+    message: `ต้องการทำการลบข้อมูลนี้ใช่หรือไม่?`,
+    cancel: "ยกเลิก",
+    ok: "ยืนยัน",
+    persistent: true,
+  })
+    .onOk(async () => {
+      showLoader();
+      await http
+        .delete(config.API.receiveData(id))
+        .then((res) => {
+          success($q, "ลบข้อมูลสำเร็จ");
+        })
+        .catch((e) => {
+          messageError($q, e);
+        })
+        .finally(() => {
+          hideLoader();
+        });
+    })
+    .onCancel(() => {
+      
+    });
+};
+
 const closeModalTree = async () => {
   //   await getTable();
   modalTree.value = false;
@@ -306,64 +268,31 @@ const nextPage = (row: any) => {
     <div class="row q-pa-md">
       <div class="col-12">
         <div class="row col-12">
-          <q-btn
-            @click="popup()"
-            size="14px"
-            flat
-            round
-            color="add"
-            icon="mdi-account-arrow-right"
-          >
+          <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="ค้นหา"
-          >
+          <q-input class="col-xs-12 col-sm-3 col-md-2" standout dense v-model="filterKeyword" ref="filterRef" outlined
+            debounce="300" placeholder="ค้นหา">
             <template v-slot:append>
               <q-icon v-if="filterKeyword == ''" name="search" />
-              <q-icon
-                v-if="filterKeyword !== ''"
-                name="clear"
-                class="cursor-pointer"
-                @click="resetFilter"
-              />
+              <q-icon v-if="filterKeyword !== ''" name="clear" class="cursor-pointer" @click="resetFilter" />
             </template>
           </q-input>
 
-          <q-select
-            v-model="visibleColumns"
-            multiple
-            outlined
-            dense
-            options-dense
-            :display-value="$q.lang.table.columns"
-            emit-value
-            map-options
-            :options="columns"
-            option-value="name"
-            options-cover
-            style="min-width: 150px"
-            class="col-xs-12 col-sm-3 col-md-2 q-ml-sm"
-          />
+          <q-select 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"
-          >
+          <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">
@@ -377,69 +306,63 @@ const nextPage = (row: any) => {
                 <q-td key="no" :props="props" @click="nextPage(props.row)">
                   {{ props.rowIndex + 1 }}
                 </q-td>
-                <q-td
-                  key="fullname"
-                  :props="props"
-                  @click="nextPage(props.row)"
-                >
+                <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="position"
-                  :props="props"
-                  @click="nextPage(props.row)"
-                >
-                  {{ props.row.position }}
+                <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="positionLevel"
-                  :props="props"
-                  @click="nextPage(props.row)"
-                >
-                  {{ props.row.positionLevel }}
-                </q-td>
-                <q-td key="oc" :props="props" @click="nextPage(props.row)">
-                  {{ props.row.oc }}
-                </q-td>
-                <q-td key="agency" :props="props" @click="nextPage(props.row)">
-                  {{ props.row.agency }}
-                </q-td>
-                <q-td key="status" :props="props" @click="nextPage(props.row)">
-                  {{ props.row.status }}
+                <q-td key="birthday" :props="props" @click="nextPage(props.row)">
+                  {{ props.row.birthday }}
                 </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-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 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-section>เลือกหน่วยงานที่รับโอน</q-item-section>
+                        </q-item>
+                        <q-item clickable v-close-popup @click="openDelete(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>
@@ -461,61 +384,24 @@ const nextPage = (row: any) => {
         <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"
-              >
+              <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"
-                  />
+                  <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-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"
-        >
+        <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"
-            />
+            <q-checkbox keep-color color="primary" dense v-model="scope.selected" />
           </template>
           <!-- <template v-slot:body-selection="scope">
             <q-checkbox
@@ -528,33 +414,51 @@ const nextPage = (row: any) => {
           <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-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">
+              <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="position" :props="props">
-                {{ props.row.position }}
+              <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="positionLevel" :props="props">
-                {{ props.row.positionLevel }}
-              </q-td>
-              <q-td key="oc" :props="props">
-                {{ props.row.oc }}
-              </q-td>
-              <q-td key="agency" :props="props">
-                {{ props.row.agency }}
-              </q-td>
-              <q-td key="status" :props="props">
-                {{ props.row.status }}
+              <q-td key="birthday" :props="props" @click="nextPage(props.row)">
+                {{ props.row.birthday }}
               </q-td>
             </q-tr>
           </template>
@@ -562,21 +466,11 @@ const nextPage = (row: any) => {
       </q-card-section>
 
       <q-card-actions align="right" class="bg-white text-teal">
-        <q-btn
-          label="บันทึก"
-          @click=""
-          :disable="checkSelected"
-          color="public"
-        />
+        <q-btn label="บันทึก" @click="" :disable="checkSelected" color="public" />
       </q-card-actions>
     </q-card>
   </q-dialog>
 
-  <DialogOrgTree
-    v-model:modal="modalTree"
-    :personalId="personalId"
-    :close="closeModalTree"
-    :personal="personal"
-  />
+  <DialogOrgTree v-model:modal="modalTree" :personalId="personalId" :close="closeModalTree" :personal="personal" />
 </template>
 <style scoped lang="scss"></style>
diff --git a/src/modules/05_placement/components/Transfer/transferRegistry.vue b/src/modules/05_placement/components/Transfer/transferRegistry.vue
index cc833aaee..382717fb1 100644
--- a/src/modules/05_placement/components/Transfer/transferRegistry.vue
+++ b/src/modules/05_placement/components/Transfer/transferRegistry.vue
@@ -59,6 +59,7 @@
       <div class="q-pl-sm text-weight-bold text-dark">ข้อมูลการขอโอน</div>
       <q-space />
       <q-btn
+      v-if="!roleAdmin"
         outline
         color="primary"
         dense
@@ -66,6 +67,15 @@
         class="q-px-sm"
         label="ส่งคำร้องไปยัง สกจ."
       />
+      <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">
@@ -78,7 +88,7 @@
         </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-top">เหตุผลที่ขอโอน</div>
             <div class="col-12 text-detail">{{ reason }}</div>
           </div>
         </div>
@@ -133,8 +143,11 @@
 </template>
 <script setup lang="ts">
 import { useRouter } from "vue-router";
-import { ref } from "vue";
+import { onMounted, ref } from "vue";
 import { useRoute } from "vue-router";
+import keycloak from "@/plugins/keycloak";
+
+let roleAdmin = ref<boolean>(false);
 
 const router = useRouter();
 const name = ref<string>("นายสมคิด ยอดใจ");
@@ -183,6 +196,13 @@ const columns = [
     style: "font-size: 14px",
   },
 ];
+
+onMounted(async () => {
+  if (keycloak.tokenParsed != null) {
+      roleAdmin.value = await keycloak.tokenParsed.role.includes("placement1");
+      console.log("roleAdmin===>", roleAdmin.value);
+    }
+  });
 </script>
 <style lang="scss" scope>
 .q-img {
diff --git a/src/modules/05_placement/router.ts b/src/modules/05_placement/router.ts
index e551dd347..726faef1c 100644
--- a/src/modules/05_placement/router.ts
+++ b/src/modules/05_placement/router.ts
@@ -50,8 +50,10 @@ const RepatriationOrderAdd = () =>
 const receiveMain = () =>
   import("@/modules/05_placement/components/Receive/receiveMain.vue");
 
-const receiveDetail = () =>
+  const receiveDetail = () =>
   import("@/modules/05_placement/components/Receive/receiveDetail.vue");
+  const ReceiveAdd = () =>
+  import("@/modules/05_placement/components/Receive/FormAdd.vue");
 
 export default [
   {
@@ -234,6 +236,16 @@ export default [
       Role: "placement",
     },
   },
+  {
+    path: "/receive/add",
+    name: "receiveAdd",
+    component: ReceiveAdd,
+    meta: {
+      Auth: true,
+      Key: [6.3],
+      Role: "registryEmployee",
+    },
+  },
   {
     path: "/receive/:id",
     name: "receiveDetail",

From b3bfe6a4b9cdd94f5cfcbab02cc8231eeb77daa8 Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Mon, 7 Aug 2023 11:06:04 +0700
Subject: [PATCH 038/113] api retirement

---
 src/api/06_retirement/api.retirement.ts       |  10 +-
 .../components/ListRetirement/TableList.vue   | 313 ++++++++++++------
 src/modules/06_retirement/router.ts           |   4 +-
 src/modules/06_retirement/views/Main.vue      | 240 +++++++++++---
 4 files changed, 409 insertions(+), 158 deletions(-)

diff --git a/src/api/06_retirement/api.retirement.ts b/src/api/06_retirement/api.retirement.ts
index 7cf8a8057..6f9b42c5a 100644
--- a/src/api/06_retirement/api.retirement.ts
+++ b/src/api/06_retirement/api.retirement.ts
@@ -4,9 +4,11 @@ const retirement = `${env.API_URI}/retirement`
 
 export default {
     profile: (type: string, year: string) => `${retirement}/profile/${type}/${year}`,
-    profileRetire: (retireProfileId: string) => `${retirement}/profile/${retireProfileId}`,
+    // profileRetire: (retireProfileId: string) => `${retirement}/profile/${retireProfileId}`,
     listRetire: (retireId: string) => `${retirement}/${retireId}`,
-    createnote: () => `${retirement}/reason`,
-    reasonId: (retireId:string) => `${retirement}/reason/${retireId}`,
-    retirement:(type:string,year:string) => `${retirement}/${type}/${year}`
+    createnote: () => `${retirement}/edit`,
+    removeProfile: () => `${retirement}/remove`,
+    reasonId: (retireId: string) => `${retirement}/reason/${retireId}`,
+    retirement: (type: string, year: string) => `${retirement}/${type}/${year}`,
+    createProfile: () => `${retirement}/profile`,
 };
diff --git a/src/modules/06_retirement/components/ListRetirement/TableList.vue b/src/modules/06_retirement/components/ListRetirement/TableList.vue
index 33ef58904..740e7ad9e 100644
--- a/src/modules/06_retirement/components/ListRetirement/TableList.vue
+++ b/src/modules/06_retirement/components/ListRetirement/TableList.vue
@@ -4,18 +4,18 @@ import AddList from "../ListRetirement/AddList.vue";
 import { useCounterMixin } from "@/stores/mixin";
 import { useQuasar } from "quasar";
 import { useRoute } from "vue-router";
+import { useRouter } from "vue-router";
 import http from "@/plugins/http";
 import config from "@/app.config";
-import { useRouter } from "vue-router";
 
-const router = useRouter();
 const route = useRoute();
+const router = useRouter();
 const $q = useQuasar();
 const mixin = useCounterMixin();
 const { showLoader, hideLoader, messageError, success } = mixin;
-const type_params = route.params.type;
-const year_params = route.params.year;
-const retireld_params = route.params.id;
+// const type_params = route.params.type;
+// const year_params = route.params.year;
+const retireld_params = route.params.retirementId;
 
 const modalNote = ref<boolean>(false);
 const note = ref<string>("");
@@ -159,22 +159,25 @@ const visibleColumns = ref<string[]>([
   "bureau",
 ]);
 
+const action = ref<string>("");
+
 onMounted(() => {
-  // console.log(route.params);
-  if (retireld_params === undefined) {
-    fecthlistprofile(type_params, year_params);
-  } else {
-    fecthlist(retireld_params);
-  }
+  retireld.value = retireld_params.toString();
+  console.log(retireld_params);
+
+  fecthlistprofile(retireld.value);
 });
+const round = ref<number>();
+const typeReport = ref<string>("");
 // fecthlist
-const fecthlistprofile = async (type: any, year: any) => {
+const fecthlistprofile = async (id: string) => {
   showLoader();
   await http
-    .get(config.API.profile(type, year))
-    .then((res: any) => {
-      // console.log(res);
-      retireld.value = res.data.result.id;
+    .get(config.API.listRetire(id))
+    .then((res) => {
+      console.log(res);
+      round.value = res.data.result.round;
+      typeReport.value = res.data.result.typeReport;
       rows.value = res.data.result.profile.map((e: any) => ({
         id: e.id,
         profileId: e.profileId,
@@ -187,37 +190,11 @@ const fecthlistprofile = async (type: any, year: any) => {
         positionNumber: e.posNoEmployee,
         positionLavel: e.positionEmployeeLevel,
         bureau: e.oc,
+        reason: e.reason,
+        remove: e.remove,
       }));
     })
-    .catch((e: any) => {
-      messageError($q, e);
-    })
-    .finally(() => {
-      hideLoader();
-    });
-};
-const fecthlist = async (retireld: any) => {
-  showLoader();
-  await http
-    .get(config.API.listRetire(retireld))
-    .then((res: any) => {
-      // retireld.value = res.data.result.id;
-      rows.value = res.data.result.map((e: any) => ({
-        id: e.id,
-        profileId: e.profileId,
-        order: e.order,
-        fixname: e.prefix,
-        name: e.fullName,
-        organizationOrganization: e.organizationOrganization,
-        positionType: e.positionType,
-        position: e.position,
-        positionNumber: e.posNoEmployee,
-        positionLavel: e.positionEmployeeLevel,
-        bureau: e.oc,
-      }));
-      // console.log(rows.value);
-    })
-    .catch((e: any) => {
+    .catch((e) => {
       messageError($q, e);
     })
     .finally(() => {
@@ -225,10 +202,7 @@ const fecthlist = async (retireld: any) => {
     });
 };
 // DelProfile
-const clickDelete = (prop: any) => {
-  console.log(prop);
-
-  let retireProfileId = prop.profileId;
+const clickDelete = () => {
   $q.dialog({
     title: "ยืนยันการลบข้อมูล",
     message: "ต้องการลบข้อมูลนี้ใช่หรือไม่?",
@@ -240,7 +214,10 @@ const clickDelete = (prop: any) => {
   })
     .onOk(async () => {
       await http
-        .delete(config.API.profileRetire(retireProfileId))
+        .post(config.API.removeProfile(), {
+          retireProfileId: retireProfileId.value,
+          reason: note.value,
+        })
         .then(() => {
           success($q, "ลบข้อมูลสำเร็จ");
         })
@@ -248,29 +225,30 @@ const clickDelete = (prop: any) => {
           messageError($q, e);
         })
         .finally(async () => {
-          if (retireld_params === undefined) {
-            await fecthlistprofile(type_params, year_params);
-          } else await fecthlist(retireld_params);
+          retireld.value = retireld_params.toString();
+          await fecthlistprofile(retireld.value);
+          modalNote.value = false;
         });
     })
-    .onCancel(() => { })
-    .onDismiss(() => { });
+    .onCancel(() => {})
+    .onDismiss(() => {});
 };
 // note
-const fetchReason = async (prop: string) => {
-  await http
-    .get(config.API.reasonId(prop))
-    .then((res: any) => {
-      console.log(res.data.result);
-      note.value = res.data.result.reason;
-      retireProfileId.value = res.data.result.id;
-    })
-    .catch((e: any) => {
-      messageError($q, e);
-    });
-};
-
+// const fetchReason = async (prop: string) => {
+//   await http
+//     .get(config.API.reasonId(prop))
+//     .then((res: any) => {
+//       console.log(res.data.result);
+//       note.value = res.data.result.reason;
+//       retireProfileId.value = res.data.result.id;
+//     })
+//     .catch((e: any) => {
+//       messageError($q, e);
+//     });
+// };
 const saveNote = () => {
+  console.log(retireProfileId.value, note.value);
+
   $q.dialog({
     title: "ยืนยันการบันทึกข้อมูลข้อมูล",
     message: "ต้องการบันทึกข้อมูลนี้ใช่หรือไม่?",
@@ -281,7 +259,6 @@ const saveNote = () => {
     persistent: true,
   })
     .onOk(async () => {
-      // console.log("บันทึกข้อมูล");
       await http
         .post(config.API.createnote(), {
           retireProfileId: retireProfileId.value,
@@ -294,17 +271,18 @@ const saveNote = () => {
           messageError($q, e);
         })
         .finally(async () => {
-          await fecthlist(retireld_params);
+          retireld.value = retireld_params.toString();
+          fecthlistprofile(retireld.value);
           modalNote.value = false;
         });
     })
-    .onCancel(() => { })
-    .onDismiss(() => { });
+    .onCancel(() => {})
+    .onDismiss(() => {});
 };
 
 const UpdateListId = (retireld: string, pId: string) => {
   profileId.value = pId;
-  fecthlist(retireld);
+  fecthlistprofile(retireld);
   console.log("profileId", profileId.value);
 };
 const backHistory = () => {
@@ -362,13 +340,29 @@ const paginationLabel = (start: number, end: number, total: number) => {
 
 <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="backHistory" />
+    <q-btn
+      icon="mdi-arrow-left"
+      unelevated
+      round
+      dense
+      flat
+      color="primary"
+      class="q-mr-sm"
+      @click="backHistory"
+    />
     รายชื่อผู้เกษียณอายุราชการ
   </div>
   <div>
     <q-card class="col-12 q-pa-md">
       <div class="row col-12 q-pb-sm">
-        <AddList :retireld="retireld" :profile-id="profileId" :UpdateListId="UpdateListId" />
+        <AddList
+          :retireld="retireld"
+          :profile-id="profileId"
+          :UpdateListId="UpdateListId"
+          v-if="
+            typeReport == null || typeReport == 'ADD' || typeReport == 'ADD'
+          "
+        />
         <!-- <q-btn flat round style="color: #016987;" icon="save" @click="saveList">
           <q-tooltip>บันทึกข้อมูล</q-tooltip>
         </q-btn> -->
@@ -397,15 +391,35 @@ const paginationLabel = (start: number, end: number, total: number) => {
 
         <q-space />
         <q-tabs shrink>
-          <q-input borderless outlined dense debounce="300" v-model="filter" placeholder="ค้นหา" style="max-width: 200px"
-            class="q-ml-sm">
+          <q-input
+            borderless
+            outlined
+            dense
+            debounce="300"
+            v-model="filter"
+            placeholder="ค้นหา"
+            style="max-width: 200px"
+            class="q-ml-sm"
+          >
             <template v-slot:append>
               <q-icon name="search" />
             </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="gt-xs q-ml-sm">
+          <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="gt-xs q-ml-sm"
+          >
             <!-- <template v-slot:option="{ opt }">
               <div>{{ opt.label }}</div>
               <div class="sublabel">{{ opt.sublabel }}</div>
@@ -415,9 +429,20 @@ const paginationLabel = (start: number, end: number, total: number) => {
       </div>
 
       <div>
-        <q-table flat dense bordered :rows="rows" :columns="columns" row-key="order" class="custom-header-table"
-          :filter="filter" :visible-columns="visibleColumns" no-data-label="ไม่มีข้อมูล"
-          :pagination-label="paginationLabel" v-model:pagination="pagination">
+        <q-table
+          flat
+          dense
+          bordered
+          :rows="rows"
+          :columns="columns"
+          row-key="order"
+          class="custom-header-table"
+          :filter="filter"
+          :visible-columns="visibleColumns"
+          no-data-label="ไม่มีข้อมูล"
+          :pagination-label="paginationLabel"
+          v-model:pagination="pagination"
+        >
           <template v-slot:header="props">
             <q-tr :props="props">
               <q-th v-for="col in props.cols" :key="col.name" :props="props">
@@ -429,20 +454,27 @@ const paginationLabel = (start: number, end: number, total: number) => {
                 </div>
               </q-th>
               <q-th auto-width />
-              <q-th auto-width />
+              <q-th auto-width v-if="typeReport === 'EDIT' || round === 1" />
+              <q-th auto-width v-if="typeReport === 'REMOVE' || round === 1" />
             </q-tr>
           </template>
           <template v-slot:body="props">
-            <q-tr :props="props" class="cursor-pointer" :style="props.row.profileId === profileId && 'color: #26a69a;'"
-              @click="
-                fetchReason(props.row.id), (modalNote = true), (note = '')
-                ">
+            <q-tr
+              :props="props"
+              class="cursor-pointer"
+              :style="props.row.profileId === profileId && 'color: #26a69a;'"
+            >
               <q-td key="order" :props="props">{{ props.row.order }} </q-td>
               <!-- <q-td key="fixname" :props="props">{{ props.row.fixname }}</q-td> -->
-              <q-td key="name" :props="props">{{ props.row.fixname + props.row.name }}</q-td>
-              <q-td class="table_ellipsis" key="organizationOrganization" :props="props">{{
-                props.row.organizationOrganization
+              <q-td key="name" :props="props">{{
+                props.row.fixname + props.row.name
               }}</q-td>
+              <q-td
+                class="table_ellipsis"
+                key="organizationOrganization"
+                :props="props"
+                >{{ props.row.organizationOrganization }}</q-td
+              >
               <q-td key="positionType" :props="props">{{
                 props.row.positionType
               }}</q-td>
@@ -461,7 +493,9 @@ const paginationLabel = (start: number, end: number, total: number) => {
               <q-td key="govOffice" :props="props">{{
                 props.row.govOffice
               }}</q-td>
-              <q-td class="table_ellipsis" key="bureau" :props="props">{{ props.row.bureau }}</q-td>
+              <q-td class="table_ellipsis" key="bureau" :props="props">{{
+                props.row.bureau
+              }}</q-td>
               <q-td>
                 <!-- <q-btn
                   :props="props"
@@ -477,20 +511,62 @@ const paginationLabel = (start: number, end: number, total: number) => {
                 >
                   <q-tooltip>โน้ต</q-tooltip></q-btn
                 > -->
-                <q-btn flat round color="blue" dense icon="mdi-file-account"
-                  @click="router.push(`/registry/${props.row.profileId}`)">
+                <q-btn
+                  flat
+                  round
+                  color="blue"
+                  dense
+                  icon="mdi-file-account"
+                  @click.stop="router.push(`/registry/${props.row.profileId}`)"
+                >
                   <q-tooltip>ดูข้อมูลทะเบียนประวัติ</q-tooltip>
                 </q-btn>
               </q-td>
-              <q-td auto-width>
-                <q-btn flat round class="text-red-14" icon="mdi-delete" dense
-                  @click="clickDelete(props.row)"><q-tooltip>ลบข้อมูล</q-tooltip></q-btn>
+              <q-td auto-width v-if="typeReport === 'EDIT' || round === 1">
+                <q-btn
+                  flat
+                  round
+                  color="primary"
+                  icon="mdi-pencil"
+                  dense
+                  @click.stop="
+                    (modalNote = true),
+                      (note = props.row.reason),
+                      (action = 'edit'),
+                      (retireProfileId = props.row.profileId)
+                  "
+                >
+                  <q-tooltip>กรอกเหตุผล</q-tooltip>
+                </q-btn>
+              </q-td>
+              <q-td auto-width v-if="typeReport === 'REMOVE' || round === 1">
+                <q-btn
+                  flat
+                  round
+                  class="text-red-14"
+                  icon="mdi-delete"
+                  dense
+                  @click.stop="
+                    (modalNote = true),
+                      (action = 'delete'),
+                      (note = props.row.remove),
+                      (retireProfileId = props.row.profileId)
+                  "
+                  ><q-tooltip>ลบข้อมูล</q-tooltip></q-btn
+                >
               </q-td>
             </q-tr>
           </template>
           <template v-slot:pagination="scope">
-            <q-pagination v-model="pagination.page" color="primary" :max="scope.pagesNumber" :max-pages="5" size="sm"
-              boundary-links direction-links></q-pagination>
+            <q-pagination
+              v-model="pagination.page"
+              color="primary"
+              :max="scope.pagesNumber"
+              :max-pages="5"
+              size="sm"
+              boundary-links
+              direction-links
+            ></q-pagination>
           </template>
         </q-table>
       </div>
@@ -502,19 +578,46 @@ const paginationLabel = (start: number, end: number, total: number) => {
     <q-card style="width: 700px; max-width: 80vw">
       <q-card-section class="q-pt-none">
         <q-toolbar class="q-py-md">
-          <q-toolbar-title class="header-text text-weight-bolder">กรอกเหตุผล
+          <q-toolbar-title class="header-text text-weight-bolder"
+            >กรอกเหตุผล
           </q-toolbar-title>
-          <q-btn icon="close" unelevated round dense @click="modalNote = false"
-            style="color: #ff8080; background-color: #ffdede" />
+          <q-btn
+            icon="close"
+            unelevated
+            round
+            dense
+            @click="modalNote = false"
+            style="color: #ff8080; background-color: #ffdede"
+          />
         </q-toolbar>
       </q-card-section>
       <q-card-section class="q-pt-none">
-        <q-input outlined dense lazy-rules v-model="note" :rules="[(val) => !!val || 'กรุณากรอกเหตุผล']"
-          :label="`${'กรอกเหตุผล'}`" type="textarea" />
+        <q-input
+          outlined
+          dense
+          lazy-rules
+          v-model="note"
+          :rules="[(val) => !!val || 'กรุณากรอกเหตุผล']"
+          :label="`${'กรอกเหตุผล'}`"
+          type="textarea"
+        />
       </q-card-section>
 
       <q-card-actions align="right">
-        <q-btn label="บักทึก" color="secondary" @click="saveNote" :disable="visibleNote" />
+        <q-btn
+          v-if="action === 'delete'"
+          label="บันทึก"
+          color="secondary"
+          :disable="visibleNote"
+          @click="clickDelete"
+        />
+        <q-btn
+          v-else
+          label="บักทึก"
+          color="secondary"
+          @click="saveNote"
+          :disable="visibleNote"
+        />
       </q-card-actions>
     </q-card>
   </q-dialog>
diff --git a/src/modules/06_retirement/router.ts b/src/modules/06_retirement/router.ts
index bb5a3c6bf..6b92458fa 100644
--- a/src/modules/06_retirement/router.ts
+++ b/src/modules/06_retirement/router.ts
@@ -22,8 +22,8 @@ export default [
     },
   },
   {
-    path: "/retirement/list/:type/:year",
-    name: "retirement/list/",
+    path: "/retirement/:retirementId",
+    name: "retirementid",
     component: Listretirement,
     meta: {
       Auth: true,
diff --git a/src/modules/06_retirement/views/Main.vue b/src/modules/06_retirement/views/Main.vue
index 335f4f591..5f5a24245 100644
--- a/src/modules/06_retirement/views/Main.vue
+++ b/src/modules/06_retirement/views/Main.vue
@@ -175,6 +175,93 @@
       </div>
     </div>
   </q-card>
+
+  <q-dialog v-model="modal">
+    <q-card style="width: 450px; max-width: 80vw">
+      <q-card-section>
+        <div class="text-h6">เพิ่มประกาศ</div>
+      </q-card-section>
+
+      <q-card-section class="q-pt-none">
+        เลือกประกาศที่ต้องการเพิ่มข้อมูล
+      </q-card-section>
+      <q-separator />
+      <div class="q-pa-md">
+        <q-list>
+          <q-item class="q-item-custom">
+            <q-item-section avatar class="q-item-custom">
+              <q-radio
+                v-model="radio"
+                val="ADD"
+                color="teal"
+                @click="action = ''"
+              />
+            </q-item-section>
+            <q-item-section>
+              <q-item-label>ประกาศเพิ่มผู้เกษียณ</q-item-label>
+            </q-item-section>
+          </q-item>
+
+          <q-item class="q-item-custom">
+            <q-item-section avatar class="q-item-custom">
+              <q-radio
+                v-model="radio"
+                val="EDIT"
+                color="teal"
+                @click="action = ''"
+              />
+            </q-item-section>
+            <q-item-section>
+              <q-item-label>ประกาศแก้ไขข้อมูลผู้เกษียน</q-item-label>
+              <q-item-label v-if="radio === 'EDIT'">
+                <q-select
+                  dense
+                  v-model="action"
+                  :options="actionOption"
+                  label="เลือกรอบ"
+                  option-label="round"
+                  option-value="id"
+                  emit-value
+                  map-options
+                />
+              </q-item-label>
+            </q-item-section>
+          </q-item>
+
+          <q-item class="q-item-custom">
+            <q-item-section avatar class="q-item-custom">
+              <q-radio
+                v-model="radio"
+                val="REMOVE"
+                color="teal"
+                @click="action = ''"
+              />
+            </q-item-section>
+            <q-item-section>
+              <q-item-label>ประกาศยกเลิกผู้เกษียณ</q-item-label>
+              <q-item-label v-if="radio === 'REMOVE'">
+                <q-select
+                  dense
+                  v-model="action"
+                  :options="actionOption"
+                  label="เลือกรอบ"
+                  option-label="round"
+                  option-value="id"
+                  emit-value
+                  map-options
+              /></q-item-label>
+            </q-item-section>
+          </q-item>
+        </q-list>
+      </div>
+      <q-separator />
+
+      <q-card-actions align="right" class="bg-white text-teal">
+        <q-btn flat label="ยกเลิก" color="red" v-close-popup />
+        <q-btn flat label="ตกลง" @click="clickSelect(action)" />
+      </q-card-actions>
+    </q-card>
+  </q-dialog>
 </template>
 
 <script setup lang="ts">
@@ -190,13 +277,13 @@ import http from "@/plugins/http";
 import config from "@/app.config";
 import { useCounterMixin } from "@/stores/mixin";
 import type { resMain } from "@/modules/06_retirement/interface/response/Main";
-const yearOptions = reactive<any[]>([]);
 
 const mixin = useCounterMixin();
 const { messageError, date2Thai, showLoader, hideLoader } = mixin;
 const router = useRouter();
 const $q = useQuasar(); //ใช้ noti quasar
 const modal = ref<boolean>(false);
+const radio = ref<string>("");
 const pagination = ref({
   sortBy: "desc",
   descending: false,
@@ -204,6 +291,9 @@ const pagination = ref({
   rowsPerPage: 10,
 });
 
+const actionOption = ref<resMain[]>([]);
+const action = ref<string>("");
+
 const type = ref<string>("officer");
 const visibleColumns = ref<string[]>(["no", "Date", "retireNumber"]); //ค้นหา คอลัมน์ คอลัมน์ที่แสดง
 
@@ -243,19 +333,21 @@ const currentYear = new Date().getFullYear();
 const rows = ref<resMain[]>([]);
 const tab = ref<any>("officer");
 const visibleColumns2 = ref<string[]>(["no", "name", "retireNumber"]);
-const getYear = () => {
-  yearOptions.length = 0;
-  yearOptions.push(currentYear + 543);
-  // console.log(yearOptions);
-  get(type.value, currentYear);
-  fiscalyear.value = currentYear + 543;
+const yearOptions = reactive<any[]>([]);
+const filteryear = () => {
+  console.log(yearOptions);
+  yearOptions.push({ id: currentYear, name: currentYear + 543 });
+  console.log(yearOptions[0].id);
+  fiscalyear.value = yearOptions[0].id;
+  fetchRetirement(type.value, currentYear);
 };
-const get = async (type: string, year: any) => {
+const fetchRetirement = async (type: string, year: any) => {
+  radio.value = "";
+  showLoader();
   await http
     .get(config.API.retirement(type, year))
     .then((res) => {
-      // console.log(res);
-
+      console.log(res);
       rows.value = [];
       let data = res.data.result;
       rows.value = data.map((items: resMain) => ({
@@ -264,7 +356,10 @@ const get = async (type: string, year: any) => {
         year: items.year,
         retireNumber: items.round,
         total: items.total,
+        round: items.round,
       }));
+      actionOption.value = rows.value;
+      console.log(actionOption.value);
     })
     .catch((e) => {})
     .finally(() => {
@@ -272,7 +367,7 @@ const get = async (type: string, year: any) => {
     });
 };
 onMounted(() => {
-  getYear();
+  filteryear();
 });
 // หัวตาราง2
 const columns2 = ref<QTableProps["columns"]>([
@@ -360,34 +455,73 @@ const rows2 = ref<FormMainProbation2[]>([
 // };
 
 const clickAdd = () => {
-  //   modal.value = true;
-  $q.dialog({
-    title: 'เพิ่มประกาศ',
-    message: 'เลือกประกาศที่ต้องการเพิ่มข้อมูล',
-    options: {
-      type: 'radio',
-      model: 'opt1',
-      // inline: true
-      items: [
-        { label: 'ประกาศเพิ่มผู้เกษียณ', value: 'ADD'},
-        { label: 'ประกาศแก้ไขข้อมูลผู้เกษียน', value: 'EDIT' },
-        { label: 'ประกาศยกเลิกผู้เกษียณ', value: 'REMOVE' }
-      ]
-    },
-    cancel: {
-      flat: true,
-      color: "negative",
-    },
-    persistent: true,
-    }).onOk(data => {
-      console.log("option===>", data)
-      router.push(`/retirement/list/${type.value}/${currentYear}`);
-    }).onCancel(() => {
-    }).onDismiss(() => {
+  // console.log(rows.value.length, type.value);
+  if (rows.value.length == 0) {
+    $q.dialog({
+      title: "ยืนยันการเพิ่มข้อมูลประกาศเกษียณ",
+      message: "ต้องการเพิ่มข้อมูลประกาศเกษียณใช่หรือไม่?",
+      cancel: {
+        flat: true,
+        color: "negative",
+      },
+      persistent: true,
     })
-  /* $q.dialog({
-    title: "ยืนยันการเพิ่มข้อมูลประกาศเกษียณ",
-    message: "ต้องการเพิ่มข้อมูลประกาศเกษียณใช่หรือไม่?",
+      .onOk(async () => {
+        let data = { type: type.value, year: currentYear };
+        await cerateRetirement(data);
+      })
+      .onCancel(() => {})
+      .onDismiss(() => {});
+  }
+
+  modal.value = true;
+  action.value = "";
+  radio.value = "";
+
+  // $q.dialog({
+  //   title: "เพิ่มประกาศ",
+  //   message: "เลือกประกาศที่ต้องการเพิ่มข้อมูล",
+  //   options: {
+  //     type: "radio",
+  //     model: "opt1",
+  //     // inline: true
+  //     items: [
+  //       { label: "ประกาศเพิ่มผู้เกษียณ", value: "ADD" },
+  //       { label: "ประกาศแก้ไขข้อมูลผู้เกษียน", value: "EDIT" },
+  //       { label: "ประกาศยกเลิกผู้เกษียณ", value: "REMOVE" },
+  //     ],
+  //   },
+  //   cancel: {
+  //     flat: true,
+  //     color: "negative",
+  //   },
+  //   persistent: true,
+  // })
+  //   .onOk((data) => {
+  //     console.log("option===>", data);
+  //     router.push(`/retirement/list/${type.value}/${currentYear}`);
+  //   })
+  //   .onCancel(() => {})
+  //   .onDismiss(() => {});
+};
+const cerateRetirement = async (data: object) => {
+  await http
+    .post(config.API.createProfile(), data)
+    .then((res) => {
+      let response = res.data.result;
+      let retirementId = response.id;
+      router.push(`/retirement/${retirementId}`);
+    })
+    .catch((e) => {
+      messageError($q, e);
+    });
+};
+const clickSelect = async (action: string) => {
+  // console.log(action);
+  // console.log(radio.value);
+  $q.dialog({
+    title: "ยืนยันการแก้ไขข้อมูลประกาศเกษียณ",
+    message: "ต้องการแก้ไขข้อมูลประกาศเกษียณใช่หรือไม่?",
     cancel: {
       flat: true,
       color: "negative",
@@ -395,20 +529,29 @@ const clickAdd = () => {
     persistent: true,
   })
     .onOk(async () => {
-      router.push(`/retirement/list/${type.value}/${currentYear}`);
+      let data = {
+        type: type.value,
+        year: currentYear,
+        retireHistoryId: action,
+        option: radio.value,
+      };
+      console.log(data);
+
+      await cerateRetirement(data);
     })
     .onCancel(() => {})
-    .onDismiss(() => {}); */
+    .onDismiss(() => {});
 };
+
 const clickClose = async () => {
   modal.value = false;
 };
 const fiscalyear = ref<number>();
-const fiscalyearOP = ref<any>([
-  { id: 1, name: "ทั้งหมด" },
-  { id: 2, name: "2565" },
-  { id: 3, name: "2565" },
-]);
+// const fiscalyearOP = ref<any>([
+//   { id: 1, name: "ทั้งหมด" },
+//   { id: 2, name: "2565" },
+//   { id: 3, name: "2565" },
+// ]);
 
 // ค้นหาในตาราง
 const filterKeyword = ref<string>("");
@@ -435,11 +578,11 @@ const paginationLabel = (start: string, end: string, total: string) => {
 const nextPage = (prop: any) => {
   // console.log(prop.id);
 
-  router.push(`/retirement/listretire/${prop.id}/${type.value}`);
+  router.push(`/retirement/${prop.id}`);
 };
 
 watch(type, () => {
-  get(type.value, currentYear);
+  fetchRetirement(type.value, currentYear);
 });
 </script>
 
@@ -447,6 +590,9 @@ watch(type, () => {
 .filter-card {
   background-color: #f1f1f1b0;
 }
+.q-item-custom {
+  padding: 0;
+}
 
 .toggle-expired-account {
   font-size: 12px;

From c21a95f486604eeaea467ac433a68f8b7832e4a3 Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Mon, 7 Aug 2023 13:17:59 +0700
Subject: [PATCH 039/113] =?UTF-8?q?=E0=B9=81=E0=B8=81=E0=B9=89=E0=B9=84?=
 =?UTF-8?q?=E0=B8=82=20retirement?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/06_retirement/api.retirement.ts                |  2 +-
 .../components/ListRetirement/TableList.vue            |  9 +++++----
 src/modules/06_retirement/views/Main.vue               | 10 +++++-----
 3 files changed, 11 insertions(+), 10 deletions(-)

diff --git a/src/api/06_retirement/api.retirement.ts b/src/api/06_retirement/api.retirement.ts
index 6f9b42c5a..698f2cb82 100644
--- a/src/api/06_retirement/api.retirement.ts
+++ b/src/api/06_retirement/api.retirement.ts
@@ -4,7 +4,7 @@ const retirement = `${env.API_URI}/retirement`
 
 export default {
     profile: (type: string, year: string) => `${retirement}/profile/${type}/${year}`,
-    // profileRetire: (retireProfileId: string) => `${retirement}/profile/${retireProfileId}`,
+    profileRetire: (retireProfileId: string) => `${retirement}/profile/${retireProfileId}`,
     listRetire: (retireId: string) => `${retirement}/${retireId}`,
     createnote: () => `${retirement}/edit`,
     removeProfile: () => `${retirement}/remove`,
diff --git a/src/modules/06_retirement/components/ListRetirement/TableList.vue b/src/modules/06_retirement/components/ListRetirement/TableList.vue
index 740e7ad9e..f8c7f6949 100644
--- a/src/modules/06_retirement/components/ListRetirement/TableList.vue
+++ b/src/modules/06_retirement/components/ListRetirement/TableList.vue
@@ -463,6 +463,7 @@ const paginationLabel = (start: number, end: number, total: number) => {
               :props="props"
               class="cursor-pointer"
               :style="props.row.profileId === profileId && 'color: #26a69a;'"
+              @click.stop="router.push(`/registry/${props.row.profileId}`)"
             >
               <q-td key="order" :props="props">{{ props.row.order }} </q-td>
               <!-- <q-td key="fixname" :props="props">{{ props.row.fixname }}</q-td> -->
@@ -511,7 +512,7 @@ const paginationLabel = (start: number, end: number, total: number) => {
                 >
                   <q-tooltip>โน้ต</q-tooltip></q-btn
                 > -->
-                <q-btn
+                <!-- <q-btn
                   flat
                   round
                   color="blue"
@@ -520,7 +521,7 @@ const paginationLabel = (start: number, end: number, total: number) => {
                   @click.stop="router.push(`/registry/${props.row.profileId}`)"
                 >
                   <q-tooltip>ดูข้อมูลทะเบียนประวัติ</q-tooltip>
-                </q-btn>
+                </q-btn> -->
               </q-td>
               <q-td auto-width v-if="typeReport === 'EDIT' || round === 1">
                 <q-btn
@@ -533,7 +534,7 @@ const paginationLabel = (start: number, end: number, total: number) => {
                     (modalNote = true),
                       (note = props.row.reason),
                       (action = 'edit'),
-                      (retireProfileId = props.row.profileId)
+                      (retireProfileId = props.row.id)
                   "
                 >
                   <q-tooltip>กรอกเหตุผล</q-tooltip>
@@ -550,7 +551,7 @@ const paginationLabel = (start: number, end: number, total: number) => {
                     (modalNote = true),
                       (action = 'delete'),
                       (note = props.row.remove),
-                      (retireProfileId = props.row.profileId)
+                      (retireProfileId = props.row.id)
                   "
                   ><q-tooltip>ลบข้อมูล</q-tooltip></q-btn
                 >
diff --git a/src/modules/06_retirement/views/Main.vue b/src/modules/06_retirement/views/Main.vue
index 5f5a24245..304a9bb3a 100644
--- a/src/modules/06_retirement/views/Main.vue
+++ b/src/modules/06_retirement/views/Main.vue
@@ -125,7 +125,7 @@
                 <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-th auto-width /> -->
               </q-tr>
             </template>
             <template v-slot:body="props">
@@ -472,12 +472,12 @@ const clickAdd = () => {
       })
       .onCancel(() => {})
       .onDismiss(() => {});
+  } else {
+    modal.value = true;
+    action.value = "";
+    radio.value = "";
   }
 
-  modal.value = true;
-  action.value = "";
-  radio.value = "";
-
   // $q.dialog({
   //   title: "เพิ่มประกาศ",
   //   message: "เลือกประกาศที่ต้องการเพิ่มข้อมูล",

From 97bb5a279c41399c12b630a492c4a1ccf0feb6b2 Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Mon, 7 Aug 2023 15:05:05 +0700
Subject: [PATCH 040/113] =?UTF-8?q?=E0=B9=81=E0=B8=81=E0=B9=89=E0=B9=84?=
 =?UTF-8?q?=E0=B8=82=E0=B8=81=E0=B8=B2=E0=B8=A3=E0=B9=81=E0=B8=AA=E0=B8=94?=
 =?UTF-8?q?=E0=B8=87=20button?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/ListRetirement/TableList.vue   | 40 +++++++++++-----
 .../06_retirement/interface/response/Main.ts  | 15 +++---
 src/modules/06_retirement/views/Main.vue      | 47 +++++++++++++++----
 3 files changed, 75 insertions(+), 27 deletions(-)

diff --git a/src/modules/06_retirement/components/ListRetirement/TableList.vue b/src/modules/06_retirement/components/ListRetirement/TableList.vue
index f8c7f6949..5f6061fee 100644
--- a/src/modules/06_retirement/components/ListRetirement/TableList.vue
+++ b/src/modules/06_retirement/components/ListRetirement/TableList.vue
@@ -164,11 +164,11 @@ const action = ref<string>("");
 onMounted(() => {
   retireld.value = retireld_params.toString();
   console.log(retireld_params);
-
   fecthlistprofile(retireld.value);
 });
 const round = ref<number>();
 const typeReport = ref<string>("");
+const statusReport = ref<boolean>();
 // fecthlist
 const fecthlistprofile = async (id: string) => {
   showLoader();
@@ -177,6 +177,7 @@ const fecthlistprofile = async (id: string) => {
     .then((res) => {
       console.log(res);
       round.value = res.data.result.round;
+      statusReport.value = res.data.result.json;
       typeReport.value = res.data.result.typeReport;
       rows.value = res.data.result.profile.map((e: any) => ({
         id: e.id,
@@ -193,6 +194,7 @@ const fecthlistprofile = async (id: string) => {
         reason: e.reason,
         remove: e.remove,
       }));
+      console.log(statusReport.value);
     })
     .catch((e) => {
       messageError($q, e);
@@ -320,11 +322,11 @@ const visibleNote = computed(() => {
 //     .onCancel(() => {})
 //     .onDismiss(() => {});
 // };
-// const classrow = (prop: any) => {
-//   if (profileId.value!=='' && prop.profileId === profileId.value) {
-//     return "color: #26a69a;";
-//   } else return "";
-// };
+const classrow = (prop: any) => {
+  if (profileId.value !== "" && prop.profileId === profileId.value) {
+    return "color: #26a69a;";
+  } else return "";
+};
 const paging = ref<boolean>(true);
 const pagination = ref({
   sortBy: "order",
@@ -360,9 +362,10 @@ const paginationLabel = (start: number, end: number, total: number) => {
           :profile-id="profileId"
           :UpdateListId="UpdateListId"
           v-if="
-            typeReport == null || typeReport == 'ADD' || typeReport == 'ADD'
+            statusReport !== true || typeReport == 'ADD' || typeReport == ''
           "
         />
+
         <!-- <q-btn flat round style="color: #016987;" icon="save" @click="saveList">
           <q-tooltip>บันทึกข้อมูล</q-tooltip>
         </q-btn> -->
@@ -454,8 +457,14 @@ const paginationLabel = (start: number, end: number, total: number) => {
                 </div>
               </q-th>
               <q-th auto-width />
-              <q-th auto-width v-if="typeReport === 'EDIT' || round === 1" />
-              <q-th auto-width v-if="typeReport === 'REMOVE' || round === 1" />
+              <q-th
+                auto-width
+                v-if="typeReport === 'EDIT' || statusReport !== true"
+              />
+              <q-th
+                auto-width
+                v-if="typeReport === 'REMOVE' || statusReport !== true"
+              />
             </q-tr>
           </template>
           <template v-slot:body="props">
@@ -523,7 +532,11 @@ const paginationLabel = (start: number, end: number, total: number) => {
                   <q-tooltip>ดูข้อมูลทะเบียนประวัติ</q-tooltip>
                 </q-btn> -->
               </q-td>
-              <q-td auto-width v-if="typeReport === 'EDIT' || round === 1">
+
+              <q-td
+                auto-width
+                v-if="typeReport === 'EDIT' || statusReport !== true"
+              >
                 <q-btn
                   flat
                   round
@@ -540,7 +553,10 @@ const paginationLabel = (start: number, end: number, total: number) => {
                   <q-tooltip>กรอกเหตุผล</q-tooltip>
                 </q-btn>
               </q-td>
-              <q-td auto-width v-if="typeReport === 'REMOVE' || round === 1">
+              <q-td
+                auto-width
+                v-if="typeReport === 'REMOVE' || statusReport !== true"
+              >
                 <q-btn
                   flat
                   round
@@ -550,7 +566,7 @@ const paginationLabel = (start: number, end: number, total: number) => {
                   @click.stop="
                     (modalNote = true),
                       (action = 'delete'),
-                      (note = props.row.remove),
+                      (note = props.row.reason),
                       (retireProfileId = props.row.id)
                   "
                   ><q-tooltip>ลบข้อมูล</q-tooltip></q-btn
diff --git a/src/modules/06_retirement/interface/response/Main.ts b/src/modules/06_retirement/interface/response/Main.ts
index 91abd91ef..4bc41e0f6 100644
--- a/src/modules/06_retirement/interface/response/Main.ts
+++ b/src/modules/06_retirement/interface/response/Main.ts
@@ -1,8 +1,9 @@
-interface resMain{
-id:string;
-createdAt:Date;
-year:string;
-round:number;
-total:number;
+interface resMain {
+    id: string;
+    createdAt: Date;
+    year: string;
+    round: number;
+    total: number;
+    typeReport: String;
 }
-export type {resMain};
+export type { resMain };
diff --git a/src/modules/06_retirement/views/Main.vue b/src/modules/06_retirement/views/Main.vue
index 304a9bb3a..359536720 100644
--- a/src/modules/06_retirement/views/Main.vue
+++ b/src/modules/06_retirement/views/Main.vue
@@ -143,6 +143,9 @@
                 <q-td key="retireNumber" :props="props">
                   {{ props.row.total }}
                 </q-td>
+                <q-td key="typeReport" :props="props">
+                  {{ props.row.typeReport }}
+                </q-td>
                 <!-- <q-td auto-width>
                   <q-btn
                     dense
@@ -223,6 +226,7 @@
                   option-value="id"
                   emit-value
                   map-options
+                  :rules="[(val) => !!val || 'กรุณาเลือกรอบ']"
                 />
               </q-item-label>
             </q-item-section>
@@ -249,6 +253,7 @@
                   option-value="id"
                   emit-value
                   map-options
+                  :rules="[(val) => !!val || 'กรุณาเลือกรอบ']"
               /></q-item-label>
             </q-item-section>
           </q-item>
@@ -295,7 +300,12 @@ const actionOption = ref<resMain[]>([]);
 const action = ref<string>("");
 
 const type = ref<string>("officer");
-const visibleColumns = ref<string[]>(["no", "Date", "retireNumber"]); //ค้นหา คอลัมน์ คอลัมน์ที่แสดง
+const visibleColumns = ref<string[]>([
+  "no",
+  "Date",
+  "retireNumber",
+  "typeReport",
+]); //ค้นหา คอลัมน์ คอลัมน์ที่แสดง
 
 // หัวตาราง
 const columns = ref<QTableProps["columns"]>([
@@ -303,7 +313,6 @@ const columns = ref<QTableProps["columns"]>([
     name: "no",
     align: "left",
     label: "ลำดับ",
-    sortable: true,
     field: "no",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
@@ -312,7 +321,6 @@ const columns = ref<QTableProps["columns"]>([
     name: "Date",
     align: "left",
     label: "วันที่สร้าง",
-    sortable: true,
     field: "Date",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
@@ -321,11 +329,18 @@ const columns = ref<QTableProps["columns"]>([
     name: "retireNumber",
     align: "left",
     label: "จำนวนผู้เกษียณ",
-    sortable: true,
     field: "retireNumber",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
+  {
+    name: "typeReport",
+    align: "left",
+    label: "ประเภทประการ",
+    field: "typeReport",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
 ]);
 
 // ข้อมูลตาราง (จำลอง)
@@ -350,18 +365,21 @@ const fetchRetirement = async (type: string, year: any) => {
       console.log(res);
       rows.value = [];
       let data = res.data.result;
-      rows.value = data.map((items: resMain) => ({
+      rows.value = data.map((items: any) => ({
         id: items.id,
         Date: date2Thai(items.createdAt),
         year: items.year,
         retireNumber: items.round,
         total: items.total,
         round: items.round,
+        typeReport: typeReportChangeName(items.typeReport),
       }));
       actionOption.value = rows.value;
-      console.log(actionOption.value);
+      rows.value.sort((a, b) => a.round - b.round);
+    })
+    .catch((e) => {
+      messageError($q, e);
     })
-    .catch((e) => {})
     .finally(() => {
       hideLoader();
     });
@@ -517,7 +535,7 @@ const cerateRetirement = async (data: object) => {
     });
 };
 const clickSelect = async (action: string) => {
-  // console.log(action);
+  console.log(action);
   // console.log(radio.value);
   $q.dialog({
     title: "ยืนยันการแก้ไขข้อมูลประกาศเกษียณ",
@@ -584,6 +602,19 @@ const nextPage = (prop: any) => {
 watch(type, () => {
   fetchRetirement(type.value, currentYear);
 });
+const typeReportChangeName = (val: string) => {
+  console.log(val);
+  switch (val) {
+    case "EDIT":
+      return "ประกาศแก้ไข้เกษียณ";
+    case "ADD":
+      return "ประกาศเพิ่มเกษียณ";
+    case "REMOVE":
+      return "ประกาศยกเลิกเกษียณ";
+    default:
+      return "ประกาศข้อมูลเกษียณ";
+  }
+};
 </script>
 
 <style lang="scss" scope>

From e103b9faefeea25088012a69ece222595f97e7e5 Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Mon, 7 Aug 2023 16:22:10 +0700
Subject: [PATCH 041/113] =?UTF-8?q?API=20=E0=B8=A3=E0=B8=B1=E0=B8=9A?=
 =?UTF-8?q?=E0=B9=82=E0=B8=AD=E0=B8=99?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/Receive/receiveMain.vue        | 365 ++++++++++++------
 .../components/Receive/receiveModal.vue       |  13 +-
 .../components/ListRetirement/TableList.vue   |  10 +-
 3 files changed, 266 insertions(+), 122 deletions(-)

diff --git a/src/modules/05_placement/components/Receive/receiveMain.vue b/src/modules/05_placement/components/Receive/receiveMain.vue
index 675cd159f..7adf079fe 100644
--- a/src/modules/05_placement/components/Receive/receiveMain.vue
+++ b/src/modules/05_placement/components/Receive/receiveMain.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, computed } from "vue";
+import { ref, computed, onMounted } from "vue";
 import type { QTableProps } from "quasar";
 import { useQuasar } from "quasar";
 import { useRouter } from "vue-router";
@@ -7,16 +7,11 @@ import DialogFooter from "@/modules/05_placement/components/Receive/DialogFooter
 import DialogHeader from "@/modules/05_placement/components/Receive/DialogHeader.vue";
 import DialogOrgTree from "@/modules/05_placement/components/Receive/receiveModal.vue";
 import { useCounterMixin } from "@/stores/mixin";
-import { config } from "@fullcalendar/core/internal";
 import http from "@/plugins/http";
+import config from "@/app.config";
 const mixin = useCounterMixin(); //เรียกฟังก์ชันกลาง
-const { 
-  showLoader,
-  hideLoader,
-  dateText,
-  success,
-  messageError
-} = mixin;
+const { showLoader, hideLoader, dateText, success, messageError, date2Thai } =
+  mixin;
 
 const selected = ref([]);
 const checkSelected = computed(() => {
@@ -48,7 +43,7 @@ const visibleColumns = ref<string[]>([
   "citizenId",
   "fullname",
   "organizationName",
-  "birthday"
+  "birthday",
 ]);
 
 const visibleColumns2 = ref<string[]>([
@@ -56,7 +51,7 @@ const visibleColumns2 = ref<string[]>([
   "citizenId",
   "fullname",
   "organizationName",
-  "birthday"
+  "birthday",
 ]); //ค้นหา คอลัมน์ คอลัมน์ที่แสดง
 const filterKeyword = ref<string>("");
 const filterKeyword2 = ref<string>("");
@@ -66,57 +61,48 @@ const resetFilter = () => {
   filterKeyword2.value = "";
   filterRef.value.focus();
 };
+onMounted(() => {
+  fecthlistRecevice();
+});
+const fecthlistRecevice = async () => {
+  showLoader();
+  await http
+    .get(config.API.receiveData())
+    .then((res) => {
+      let response = res.data.result;
+      console.log(response);
+      rows.value = response.map((e: any) => ({
+        personalId: e.id,
+        citizenId: e.citizenId,
+        fullname: e.firstname + "  " + e.lastname,
+        positionNumber: e.positionNumber,
+        positionPath: e.positionPath,
+        birthday: date2Thai(e.dateOfBirth),
+      }));
+    })
+    .catch((e) => {
+      console.log(typeof e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+};
 
 // const nextPage = (id:string) => {
 //   router.push("/retirement/resign/"+id);
 // };
 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"))
-  },
-  {
-    personalId: "08db721d-adf2-4842-8056-1abb1539356e",
-    citizenId: "0000222333333",
-    fullname: "นางสาววญ สพ",
-    organizationName: "นักจัดการงานทั่วไป",
-    orgName: "กลุ่มงานช่วยนักบริหาร",
-    organizationShortName: "สกจ.",
-    positionNumber: "กก. 1",
-    positionPath: "นักจัดการงานทั่วไป",
-    birthday: dateText(new Date("1990-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")),
-  },
-  {
-    personalId: "08db721d-adf2-4842-8056-1abb1539356e",
-    citizenId: "0000222333333",
-    fullname: "นางสาววญ สพ",
-    organizationName: "นักจัดการงานทั่วไป",
-    orgName: "กลุ่มงานช่วยนักบริหาร",
-    organizationShortName: "สกจ.",
-    positionNumber: "กก. 1",
-    positionPath: "นักจัดการงานทั่วไป",
-    birthday: dateText(new Date("1990-09-03")),
-  },
+  // {
+  //   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"]>([
   {
@@ -219,11 +205,15 @@ const columns2 = ref<QTableProps["columns"]>([
 
 const openModalTree = (id: string) => {
   personalId.value = id;
+  console.log(personalId.value);
+
   personal.value = [];
   modalTree.value = true;
 };
 
 const openDelete = (id: string) => {
+  console.log(id);
+
   $q.dialog({
     title: `ลบข้อมูล`,
     message: `ต้องการทำการลบข้อมูลนี้ใช่หรือไม่?`,
@@ -234,7 +224,7 @@ const openDelete = (id: string) => {
     .onOk(async () => {
       showLoader();
       await http
-        .delete(config.API.receiveData(id))
+        .delete(config.API.receiveDataId(id))
         .then((res) => {
           success($q, "ลบข้อมูลสำเร็จ");
         })
@@ -242,12 +232,11 @@ const openDelete = (id: string) => {
           messageError($q, e);
         })
         .finally(() => {
+          fecthlistRecevice();
           hideLoader();
         });
     })
-    .onCancel(() => {
-      
-    });
+    .onCancel(() => {});
 };
 
 const closeModalTree = async () => {
@@ -272,27 +261,64 @@ const nextPage = (row: any) => {
             <q-tooltip>เพิ่มข้อมูล</q-tooltip>
           </q-btn>
 
-          <q-btn @click="popup()" size="14px" flat round color="add" icon="mdi-account-arrow-right">
+          <q-btn
+            @click="popup()"
+            size="14px"
+            flat
+            round
+            color="add"
+            icon="mdi-account-arrow-right"
+          >
             <q-tooltip>ส่งไปออกคำสั่งรับโอน</q-tooltip>
           </q-btn>
 
           <q-space />
-          <q-input class="col-xs-12 col-sm-3 col-md-2" standout dense v-model="filterKeyword" ref="filterRef" outlined
-            debounce="300" placeholder="ค้นหา">
+          <q-input
+            class="col-xs-12 col-sm-3 col-md-2"
+            standout
+            dense
+            v-model="filterKeyword"
+            ref="filterRef"
+            outlined
+            debounce="300"
+            placeholder="ค้นหา"
+          >
             <template v-slot:append>
               <q-icon v-if="filterKeyword == ''" name="search" />
-              <q-icon v-if="filterKeyword !== ''" name="clear" class="cursor-pointer" @click="resetFilter" />
+              <q-icon
+                v-if="filterKeyword !== ''"
+                name="clear"
+                class="cursor-pointer"
+                @click="resetFilter"
+              />
             </template>
           </q-input>
 
-          <q-select v-model="visibleColumns" multiple outlined dense options-dense :display-value="$q.lang.table.columns"
-            emit-value map-options :options="columns" option-value="name" options-cover style="min-width: 150px"
-            class="col-xs-12 col-sm-3 col-md-2 q-ml-sm" />
+          <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">
+          <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">
@@ -306,34 +332,52 @@ const nextPage = (row: any) => {
                 <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)">
+                <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)">
+                <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
-                    ">
+                <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.orgName !== null ? props.row.orgName : "-"
+                        }}
                         {{
                           props.row.organizationShortName !== null
-                          ? `(${props.row.organizationShortName})`
-                          : ""
+                            ? `(${props.row.organizationShortName})`
+                            : ""
                         }}
                       </div>
                       <div class="text-weight-light">
                         {{
                           props.row.positionPath !== null
-                          ? props.row.positionPath
-                          : "-"
+                            ? props.row.positionPath
+                            : "-"
                         }}
                         {{
                           props.row.positionNumber !== null
-                          ? `(${props.row.positionNumber})`
-                          : ""
+                            ? `(${props.row.positionNumber})`
+                            : ""
                         }}
                       </div>
                     </div>
@@ -344,21 +388,57 @@ const nextPage = (row: any) => {
                     </div>
                   </div>
                 </q-td>
-                <q-td key="birthday" :props="props" @click="nextPage(props.row)">
+                <q-td
+                  key="birthday"
+                  :props="props"
+                  @click="nextPage(props.row)"
+                >
                   {{ props.row.birthday }}
                 </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-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
+                          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-section
+                            >เลือกหน่วยงานที่รับโอน</q-item-section
+                          >
                         </q-item>
-                        <q-item clickable v-close-popup @click="openDelete(props.row.personalId)">
-                          <q-item-section style="min-width: 0px" avatar class="q-py-sm">
+                        <q-item
+                          clickable
+                          v-close-popup
+                          @click="openDelete(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>
@@ -384,24 +464,61 @@ const nextPage = (row: any) => {
         <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">
+              <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" />
+                  <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-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">
+        <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" />
+            <q-checkbox
+              keep-color
+              color="primary"
+              dense
+              v-model="scope.selected"
+            />
           </template>
           <!-- <template v-slot:body-selection="scope">
             <q-checkbox
@@ -414,7 +531,12 @@ const nextPage = (row: any) => {
           <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-checkbox
+                  keep-color
+                  color="primary"
+                  dense
+                  v-model="props.selected"
+                />
               </q-td>
               <q-td key="no" :props="props">
                 {{ props.rowIndex + 1 }}
@@ -425,28 +547,36 @@ const nextPage = (row: any) => {
               <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
-                  ">
+              <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})`
-                        : ""
+                          ? `(${props.row.organizationShortName})`
+                          : ""
                       }}
                     </div>
                     <div class="text-weight-light">
                       {{
                         props.row.positionPath !== null
-                        ? props.row.positionPath
-                        : "-"
+                          ? props.row.positionPath
+                          : "-"
                       }}
                       {{
                         props.row.positionNumber !== null
-                        ? `(${props.row.positionNumber})`
-                        : ""
+                          ? `(${props.row.positionNumber})`
+                          : ""
                       }}
                     </div>
                   </div>
@@ -466,11 +596,22 @@ const nextPage = (row: any) => {
       </q-card-section>
 
       <q-card-actions align="right" class="bg-white text-teal">
-        <q-btn label="บันทึก" @click="" :disable="checkSelected" color="public" />
+        <q-btn
+          label="บันทึก"
+          @click=""
+          :disable="checkSelected"
+          color="public"
+        />
       </q-card-actions>
     </q-card>
   </q-dialog>
 
-  <DialogOrgTree v-model:modal="modalTree" :personalId="personalId" :close="closeModalTree" :personal="personal" />
+  <DialogOrgTree
+    v-model:modal="modalTree"
+    :close="closeModalTree"
+    :personal="personal"
+    :personalId="personalId"
+  />
+  <!-- :personalId="personalId" -->
 </template>
 <style scoped lang="scss"></style>
diff --git a/src/modules/05_placement/components/Receive/receiveModal.vue b/src/modules/05_placement/components/Receive/receiveModal.vue
index 4f9f42fcb..fab7859b7 100644
--- a/src/modules/05_placement/components/Receive/receiveModal.vue
+++ b/src/modules/05_placement/components/Receive/receiveModal.vue
@@ -153,20 +153,23 @@ const validateData = async () => {
     }
   });
 };
-
+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,
-        containDate: dataForm.containDate,
+        // personalId: props.personalId,
+        recruitDate: dataForm.containDate,
         posNoId: dataForm.posNoId,
         positionId: dataForm.positionId,
         positionLevelId: dataForm.positionLevelId,
         positionLineId: dataForm.positionLineId,
-        positionPathSideId: dataForm.positionPathSideId,
+        positionPathSideId: null,
         positionTypeId: dataForm.positionTypeId,
         // salaryAmount: dataForm.salaryAmount,
         // mouthSalaryAmount: dataForm.mouthSalaryAmount,
@@ -175,7 +178,7 @@ const saveAppoint = async () => {
       console.log("save appoint===>", dataAppoint);
       showLoader();
       await http
-        .post(config.API.placementPass(), dataAppoint)
+        .put(config.API.receivePosition(id.value), dataAppoint)
         .then((res) => {
           console.log("respone=>", res);
           success($q, "บันทึกสำเร็จ");
diff --git a/src/modules/06_retirement/components/ListRetirement/TableList.vue b/src/modules/06_retirement/components/ListRetirement/TableList.vue
index 5f6061fee..3250e6e11 100644
--- a/src/modules/06_retirement/components/ListRetirement/TableList.vue
+++ b/src/modules/06_retirement/components/ListRetirement/TableList.vue
@@ -362,7 +362,7 @@ const paginationLabel = (start: number, end: number, total: number) => {
           :profile-id="profileId"
           :UpdateListId="UpdateListId"
           v-if="
-            statusReport !== true || typeReport == 'ADD' || typeReport == ''
+            statusReport !== true && typeReport == 'ADD' || typeReport == ''
           "
         />
 
@@ -459,11 +459,11 @@ const paginationLabel = (start: number, end: number, total: number) => {
               <q-th auto-width />
               <q-th
                 auto-width
-                v-if="typeReport === 'EDIT' || statusReport !== true"
+                v-if="typeReport === 'EDIT' && statusReport !== true"
               />
               <q-th
                 auto-width
-                v-if="typeReport === 'REMOVE' || statusReport !== true"
+                v-if="typeReport === 'REMOVE' && statusReport !== true"
               />
             </q-tr>
           </template>
@@ -535,7 +535,7 @@ const paginationLabel = (start: number, end: number, total: number) => {
 
               <q-td
                 auto-width
-                v-if="typeReport === 'EDIT' || statusReport !== true"
+                v-if="typeReport === 'EDIT' && statusReport !== true"
               >
                 <q-btn
                   flat
@@ -555,7 +555,7 @@ const paginationLabel = (start: number, end: number, total: number) => {
               </q-td>
               <q-td
                 auto-width
-                v-if="typeReport === 'REMOVE' || statusReport !== true"
+                v-if="typeReport === 'REMOVE' && statusReport !== true"
               >
                 <q-btn
                   flat

From 39144676d67c1445399ce8f035c5fd86a422fde4 Mon Sep 17 00:00:00 2001
From: waruneeta <warunee.auy@gmail.com>
Date: Mon, 7 Aug 2023 16:53:51 +0700
Subject: [PATCH 042/113] =?UTF-8?q?=E0=B8=A5=E0=B8=9A=E0=B8=82=E0=B9=89?=
 =?UTF-8?q?=E0=B8=AD=E0=B8=A1=E0=B8=B9=E0=B8=A5=E0=B8=95=E0=B8=B3=E0=B9=81?=
 =?UTF-8?q?=E0=B8=AB=E0=B8=99=E0=B9=88=E0=B8=87=E0=B8=A3=E0=B8=B1=E0=B8=9A?=
 =?UTF-8?q?=E0=B8=AA=E0=B8=A1=E0=B8=B1=E0=B8=84=E0=B8=A3=E0=B9=83=E0=B8=99?=
 =?UTF-8?q?=E0=B8=AB=E0=B8=99=E0=B9=89=E0=B8=B2=E0=B8=9F=E0=B8=AD=E0=B8=A3?=
 =?UTF-8?q?=E0=B9=8C=E0=B8=A1=E0=B8=AA=E0=B8=A3=E0=B9=89=E0=B8=B2=E0=B8=87?=
 =?UTF-8?q?=E0=B8=84=E0=B8=B3=E0=B8=AA=E0=B8=B1=E0=B9=88=E0=B8=87?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../05_placement/components/OrderPlacement/step/step01.vue  | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/modules/05_placement/components/OrderPlacement/step/step01.vue b/src/modules/05_placement/components/OrderPlacement/step/step01.vue
index eeddc482b..1377ba208 100644
--- a/src/modules/05_placement/components/OrderPlacement/step/step01.vue
+++ b/src/modules/05_placement/components/OrderPlacement/step/step01.vue
@@ -101,10 +101,10 @@
           ) " -->
         </div>
         <div class="col-xs-12 col-md-6">
-          <selector :class="getClass(true)" outlined dense lazy-rules v-model="position"
+          <!-- <selector :class="getClass(true)" outlined dense lazy-rules v-model="position"
             :rules="[(val: string) => !!val || `${'กรุณาเลือกตำแหน่งรับสมัคร'}`]" hide-bottom-space
             :label="`${'ตำแหน่งรับสมัคร'}`" @update:modelValue="clickEditRow" emit-value map-options option-label="name"
-            :options="positionOption" option-value="id" use-input input-debounce="0" />
+            :options="positionOption" option-value="id" use-input input-debounce="0" /> -->
           <!-- @filter="(inputValue:string, doneFn:Function) =>
           filterSelector(inputValue, doneFn,'positionOption' ) " -->
         </div>
@@ -366,7 +366,7 @@ const fetchdetailOrder = async () => {
       nameCommand.value = data.signatoryBy;
       positionCommand.value = data.signatoryPosition;
       examRound.value = data.examRound;
-      position.value = data.registerPosition;
+      // position.value = data.registerPosition;
       register.value = data.conclusionRegisterNo;
       dateRegister.value = data.conclusionRegisterDate;
       announce.value = data.conclusionResultNo;

From 07ae0d4a5e750a4e505976c37639bce5913f9aef Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Mon, 7 Aug 2023 17:11:33 +0700
Subject: [PATCH 043/113] =?UTF-8?q?api=20=E0=B8=A3=E0=B8=B1=E0=B8=9A?=
 =?UTF-8?q?=E0=B9=82=E0=B8=AD=E0=B8=99?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../05_placement/components/Receive/receiveMain.vue    |  7 ++++++-
 .../05_placement/components/Receive/receiveModal.vue   | 10 ++++++----
 2 files changed, 12 insertions(+), 5 deletions(-)

diff --git a/src/modules/05_placement/components/Receive/receiveMain.vue b/src/modules/05_placement/components/Receive/receiveMain.vue
index 7adf079fe..d01dbf801 100644
--- a/src/modules/05_placement/components/Receive/receiveMain.vue
+++ b/src/modules/05_placement/components/Receive/receiveMain.vue
@@ -64,17 +64,22 @@ const resetFilter = () => {
 onMounted(() => {
   fecthlistRecevice();
 });
+const listRecevice = ref<any>([]);
 const fecthlistRecevice = async () => {
   showLoader();
   await http
     .get(config.API.receiveData())
     .then((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: "sssss",
+        orgName: "xxaxa",
+        organizationShortName: "ssss",
         positionNumber: e.positionNumber,
         positionPath: e.positionPath,
         birthday: date2Thai(e.dateOfBirth),
@@ -207,7 +212,7 @@ const openModalTree = (id: string) => {
   personalId.value = id;
   console.log(personalId.value);
 
-  personal.value = [];
+  personal.value = listRecevice.value.filter((e) => e.id === id);
   modalTree.value = true;
 };
 
diff --git a/src/modules/05_placement/components/Receive/receiveModal.vue b/src/modules/05_placement/components/Receive/receiveModal.vue
index fab7859b7..89208163a 100644
--- a/src/modules/05_placement/components/Receive/receiveModal.vue
+++ b/src/modules/05_placement/components/Receive/receiveModal.vue
@@ -169,7 +169,7 @@ const saveAppoint = async () => {
         positionId: dataForm.positionId,
         positionLevelId: dataForm.positionLevelId,
         positionLineId: dataForm.positionLineId,
-        positionPathSideId: null,
+        positionPathSideId: dataForm.positionPathSideId,
         positionTypeId: dataForm.positionTypeId,
         // salaryAmount: dataForm.salaryAmount,
         // mouthSalaryAmount: dataForm.mouthSalaryAmount,
@@ -377,6 +377,8 @@ 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;
@@ -385,15 +387,15 @@ watch(props, () => {
   }
   // console.log("draft===>", personal.value.draft);
 
-  if (personal.value && personal.value.draft === false) {
+  if (personal.value) {
     // const findData = dataRespone.value.find(findByPerson);
     let findData: any = null;
     dataRespone.value.map((x: any) => {
       findData = findByPerson(x);
-      console.log(findData);
+      // console.log(findData);
 
       if (findData != null) {
-        console.log("findData===>", findData);
+        // console.log("findData===>", findData);
         selectedPosition(findData);
         for (let i = 3; i <= findData.keyId.length; i += 2) {
           expanded.value.push(findData.keyId.slice(0, i));

From e731d12fd92aacf152af71a39da05389e2329a4f Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Mon, 7 Aug 2023 17:18:18 +0700
Subject: [PATCH 044/113] no message

---
 src/modules/05_placement/components/Receive/receiveMain.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/modules/05_placement/components/Receive/receiveMain.vue b/src/modules/05_placement/components/Receive/receiveMain.vue
index d01dbf801..8156fb8af 100644
--- a/src/modules/05_placement/components/Receive/receiveMain.vue
+++ b/src/modules/05_placement/components/Receive/receiveMain.vue
@@ -245,7 +245,7 @@ const openDelete = (id: string) => {
 };
 
 const closeModalTree = async () => {
-  //   await getTable();
+  await fecthlistRecevice();
   modalTree.value = false;
 };
 

From d5ee366ea25c7bbe0dd56333a9557296203a5604 Mon Sep 17 00:00:00 2001
From: waruneeta <warunee.auy@gmail.com>
Date: Mon, 7 Aug 2023 17:40:57 +0700
Subject: [PATCH 045/113] =?UTF-8?q?=E0=B9=81=E0=B8=81=E0=B9=89=20condition?=
 =?UTF-8?q?=20=E0=B9=81=E0=B8=AA=E0=B8=94=E0=B8=87=20action=20=E0=B8=95?=
 =?UTF-8?q?=E0=B9=88=E0=B8=B2=E0=B8=87=E0=B9=86=20=E0=B8=82=E0=B8=AD?=
 =?UTF-8?q?=E0=B8=87=E0=B9=80=E0=B8=81=E0=B8=A9=E0=B8=B5=E0=B8=A2=E0=B8=93?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/ListRetirement/TableList.vue            | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/modules/06_retirement/components/ListRetirement/TableList.vue b/src/modules/06_retirement/components/ListRetirement/TableList.vue
index 3250e6e11..0c32115ec 100644
--- a/src/modules/06_retirement/components/ListRetirement/TableList.vue
+++ b/src/modules/06_retirement/components/ListRetirement/TableList.vue
@@ -362,7 +362,7 @@ const paginationLabel = (start: number, end: number, total: number) => {
           :profile-id="profileId"
           :UpdateListId="UpdateListId"
           v-if="
-            statusReport !== true && typeReport == 'ADD' || typeReport == ''
+            statusReport === false && (typeReport == 'ADD' || typeReport == '' || typeReport == null)
           "
         />
 
@@ -459,11 +459,11 @@ const paginationLabel = (start: number, end: number, total: number) => {
               <q-th auto-width />
               <q-th
                 auto-width
-                v-if="typeReport === 'EDIT' && statusReport !== true"
+                v-if="(typeReport === 'EDIT' || typeReport === null || typeReport === '') && statusReport === false"
               />
               <q-th
                 auto-width
-                v-if="typeReport === 'REMOVE' && statusReport !== true"
+                v-if="(typeReport === 'REMOVE' || typeReport === null || typeReport === '') && statusReport === false"
               />
             </q-tr>
           </template>
@@ -535,7 +535,7 @@ const paginationLabel = (start: number, end: number, total: number) => {
 
               <q-td
                 auto-width
-                v-if="typeReport === 'EDIT' && statusReport !== true"
+                v-if="(typeReport === 'EDIT' || typeReport === null || typeReport === '') && statusReport === false"
               >
                 <q-btn
                   flat
@@ -555,7 +555,7 @@ const paginationLabel = (start: number, end: number, total: number) => {
               </q-td>
               <q-td
                 auto-width
-                v-if="typeReport === 'REMOVE' && statusReport !== true"
+                v-if="(typeReport === 'REMOVE' || typeReport === null || typeReport === '') && statusReport === false"
               >
                 <q-btn
                   flat

From f4aa92634e39880de95e868b20418b6bcea7a0f3 Mon Sep 17 00:00:00 2001
From: setthawutttty <stw.ttty@gmail.com>
Date: Mon, 7 Aug 2023 18:07:32 +0700
Subject: [PATCH 046/113] =?UTF-8?q?=E0=B8=84=E0=B9=89=E0=B8=B2=E0=B8=87=20?=
 =?UTF-8?q?=E0=B8=9F=E0=B8=B4=E0=B8=A5=E0=B9=80=E0=B8=95=E0=B8=AD=E0=B8=A3?=
 =?UTF-8?q?=E0=B9=8C=203.2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/probation/FormAssign.vue       | 888 +++++++-----------
 1 file changed, 328 insertions(+), 560 deletions(-)

diff --git a/src/modules/05_placement/components/probation/FormAssign.vue b/src/modules/05_placement/components/probation/FormAssign.vue
index 895acb766..e719eea9b 100644
--- a/src/modules/05_placement/components/probation/FormAssign.vue
+++ b/src/modules/05_placement/components/probation/FormAssign.vue
@@ -283,17 +283,22 @@
                     </div>
                     <div
                       v-for="(item, index) in knowledgeArray"
+                      :key="index"
                       class="col-12 row q-col-gutter-sm"
                     >
                       <div class="col-11 q-my-xs">
                         <q-select
+                          :option-label="
+                            (item) => `${item.title}-${item.description}`
+                          "
+                          :option-value="(level) => level.level_id"
                           :rules="
                             index < 3
                               ? [(val) => !!val || 'กรุณาเลือกความสามารถ']
                               : []
                           "
                           hide-bottom-space
-                          :options="getOpknowledge(item)"
+                          :options="OPknowledge"
                           class="bg-white"
                           :readonly="routeName != 'probationWorkAdd'"
                           dense
@@ -346,15 +351,17 @@
                             v-for="(item, index) in checkRule"
                             :key="item.id"
                           >
-                            <div v-if="index == 0" class="col-1 text-center">
+                            <div v-if="index === 0" class="col-1 text-center">
                               <q-checkbox
-                                v-show="item.status_select === 1"
+                                :true-value="1"
+                                :false-value="0"
+                                v-if="item.status_select === 1"
                                 v-model="item.checked"
                                 dense
                                 :disable="routeName != 'probationWorkAdd'"
                               />
                             </div>
-                            <div v-if="index == 0" class="col-11">
+                            <div v-if="index === 0" class="col-11">
                               {{ item.description }}
                             </div>
                           </div>
@@ -365,11 +372,11 @@
                             class="row bg-grey-2 q-py-xs borderCheck"
                           >
                             <div class="col-1"></div>
-                            <div class="col-10 ">
+                            <div class="col-10">
                               {{ item.description }}
                             </div>
                           </div>
-                          </div>
+                        </div>
                         <div v-for="(item, index) in checkRule" :key="item.id">
                           <div
                             v-if="index === 2"
@@ -386,6 +393,8 @@
                           >
                             <div class="col-1 text-center">
                               <q-checkbox
+                                :true-value="1"
+                                :false-value="0"
                                 v-model="item.checked"
                                 dense
                                 :disable="routeName != 'probationWorkAdd'"
@@ -412,6 +421,8 @@
                           >
                             <div class="col-1 text-center">
                               <q-checkbox
+                                :true-value="1"
+                                :false-value="0"
                                 v-model="item.checked"
                                 dense
                                 :disable="routeName != 'probationWorkAdd'"
@@ -438,6 +449,8 @@
                           >
                             <div class="col-1 text-center">
                               <q-checkbox
+                                :true-value="1"
+                                :false-value="0"
                                 v-model="item.checked"
                                 dense
                                 :disable="routeName != 'probationWorkAdd'"
@@ -464,6 +477,8 @@
                           >
                             <div class="col-1 text-center">
                               <q-checkbox
+                                :true-value="1"
+                                :false-value="0"
                                 v-model="item.checked"
                                 dense
                                 :disable="routeName != 'probationWorkAdd'"
@@ -520,11 +535,16 @@
                     <div class="col-12 row q-col-gutter-sm">
                       <div class="col-xs-12 col-sm-6">
                         <q-select
+                          :option-label="
+                            (item) =>
+                              `${item.title} - ${item.level_description}`
+                          "
+                          option-value="id"
                           hide-bottom-space
                           :rules="[
                             (val) => !!val || 'กรุณาเลือกความรู้ความสามารถ',
                           ]"
-                          :options="OPskill"
+                          :options="OPcomputer"
                           class="bg-white"
                           :readonly="routeName != 'probationWorkAdd'"
                           dense
@@ -536,11 +556,16 @@
                       </div>
                       <div class="col-xs-12 col-sm-6">
                         <q-select
+                          :option-label="
+                            (item) =>
+                              `${item.title} - ${item.level_description}`
+                          "
+                          option-value="id"
                           hide-bottom-space
                           :rules="[
                             (val) => !!val || 'กรุณาเลือกความรู้ความสามารถ',
                           ]"
-                          :options="OPskill"
+                          :options="OPenglish"
                           class="bg-white"
                           :readonly="routeName != 'probationWorkAdd'"
                           dense
@@ -552,11 +577,16 @@
                       </div>
                       <div class="col-xs-12 col-sm-6">
                         <q-select
+                          :option-label="
+                            (item) =>
+                              `${item.title} - ${item.level_description}`
+                          "
+                          option-value="id"
                           hide-bottom-space
                           :rules="[
                             (val) => !!val || 'กรุณาเลือกความรู้ความสามารถ',
                           ]"
-                          :options="OPskill"
+                          :options="OPinfomation"
                           class="bg-white"
                           :readonly="routeName != 'probationWorkAdd'"
                           dense
@@ -568,11 +598,16 @@
                       </div>
                       <div class="col-xs-12 col-sm-6">
                         <q-select
+                          :option-label="
+                            (item) =>
+                              `${item.title} - ${item.level_description}`
+                          "
+                          option-value="id"
                           hide-bottom-space
                           :rules="[
                             (val) => !!val || 'กรุณาเลือกความรู้ความสามารถ',
                           ]"
-                          :options="OPskill"
+                          :options="OPresourse"
                           class="bg-white"
                           :readonly="routeName != 'probationWorkAdd'"
                           dense
@@ -600,9 +635,13 @@
                     <div class="col-12 row q-col-gutter-sm">
                       <div class="col-xs-12 col-sm-6">
                         <q-select
+                          :option-label="
+                            (item) => `${item.title} - ${item.description}`
+                          "
+                          option-value="id"
                           hide-bottom-space
                           :rules="[(val) => !!val || 'กรุณาเลือกสมรรถนะ']"
-                          :options="OPmain"
+                          :options="filterMain(OPmain,[main2,main3,main4,main5])"
                           class="bg-white"
                           :readonly="routeName != 'probationWorkAdd'"
                           dense
@@ -614,9 +653,13 @@
                       </div>
                       <div class="col-xs-12 col-sm-6">
                         <q-select
+                          :option-label="
+                            (item) => `${item.title} - ${item.description}`
+                          "
+                          option-value="id"
                           hide-bottom-space
                           :rules="[(val) => !!val || 'กรุณาเลือกสมรรถนะ']"
-                          :options="OPmain"
+                          :options="filterMain(OPmain,[main,main3,main4,main5])"
                           class="bg-white"
                           :readonly="routeName != 'probationWorkAdd'"
                           dense
@@ -628,9 +671,13 @@
                       </div>
                       <div class="col-xs-12 col-sm-6">
                         <q-select
+                          :option-label="
+                            (item) => `${item.title} - ${item.description}`
+                          "
+                          option-value="id"
                           hide-bottom-space
                           :rules="[(val) => !!val || 'กรุณาเลือกสมรรถนะ']"
-                          :options="OPmain"
+                          :options="filterMain(OPmain,[main,main2,main4,main5])"
                           class="bg-white"
                           :readonly="routeName != 'probationWorkAdd'"
                           dense
@@ -642,9 +689,13 @@
                       </div>
                       <div class="col-xs-12 col-sm-6">
                         <q-select
+                          :option-label="
+                            (item) => `${item.title} - ${item.description}`
+                          "
+                          option-value="id"
                           hide-bottom-space
                           :rules="[(val) => !!val || 'กรุณาเลือกสมรรถนะ']"
-                          :options="OPmain"
+                          :options="filterMain(OPmain,[main,main2,main3,main5])"
                           class="bg-white"
                           :readonly="routeName != 'probationWorkAdd'"
                           dense
@@ -654,11 +705,16 @@
                           label="ตัวที่ 4"
                         />
                       </div>
+
                       <div class="col-xs-12 col-sm-6">
                         <q-select
                           hide-bottom-space
                           :rules="[(val) => !!val || 'กรุณาเลือกสมรรถนะ']"
-                          :options="OPmain"
+                          :options="filterMain(OPmain,[main,main2,main3,main4])"
+                          :option-label="
+                            (item) => `${item.title} - ${item.description}`
+                          "
+                          option-value="id"
                           class="bg-white"
                           :readonly="routeName != 'probationWorkAdd'"
                           dense
@@ -675,11 +731,16 @@
                     <div class="col-12 row q-col-gutter-sm">
                       <div class="col-xs-12 col-sm-6">
                         <q-select
+
+                          :option-label="
+                            (item) => `${item.title} - ${item.description}`
+                          "
+                          option-value="id"
                           hide-bottom-space
                           :rules="[
                             (val) => !!val || 'กรุณาเลือกสมรรถนะประจํากลุ่มงาน',
                           ]"
-                          :options="OPgroup"
+                          :options="filterData(OPgroup,[group2,group3])"
                           class="bg-white"
                           :readonly="routeName != 'probationWorkAdd'"
                           dense
@@ -691,11 +752,15 @@
                       </div>
                       <div class="col-xs-12 col-sm-6">
                         <q-select
+                          :option-label="
+                            (item) => `${item.title} - ${item.description}`
+                          "
+                          option-value="id"
                           hide-bottom-space
                           :rules="[
                             (val) => !!val || 'กรุณาเลือกสมรรถนะประจํากลุ่มงาน',
                           ]"
-                          :options="OPgroup"
+                          :options="filterData(OPgroup,[group,group3])"
                           class="bg-white"
                           :readonly="routeName != 'probationWorkAdd'"
                           dense
@@ -707,11 +772,15 @@
                       </div>
                       <div class="col-xs-12 col-sm-6">
                         <q-select
+                          :option-label="
+                            (item) => `${item.title} - ${item.description}`
+                          "
+                          option-value="id"
                           hide-bottom-space
                           :rules="[
                             (val) => !!val || 'กรุณาเลือกสมรรถนะประจํากลุ่มงาน',
                           ]"
-                          :options="OPgroup"
+                          :options="filterData(OPgroup,[group,group2])"
                           class="bg-white"
                           :readonly="routeName != 'probationWorkAdd'"
                           dense
@@ -1284,10 +1353,12 @@
 </template>
 <script setup lang="ts">
 import { useRouter } from "vue-router";
-import { ref, computed, watch } from "vue";
+import { ref, computed, watch, onMounted } from "vue";
 import { useCounterMixin } from "@/stores/mixin";
 import { useQuasar } from "quasar";
+import http from "@/plugins/http";
 
+import config from "@/app.config";
 const $q = useQuasar();
 const val1 = ref([
   {
@@ -1300,7 +1371,12 @@ const val1 = ref([
 const router = useRouter();
 const mixin = useCounterMixin();
 const { date2Thai, notifyError } = mixin;
-
+const filterData = (options: any[], excludedGroups: any[]) => {
+  return options.filter((item) => !excludedGroups.some((group) => group && group.id === item.id));
+};
+const filterMain = (options: any[], excludedGroups: any[]) => {
+  return options.filter((item) => !excludedGroups.some((group) => group && group.id === item.id));
+};
 const checkValidate = ref<boolean>(false);
 const myForm = ref<any>(null);
 const fullnameFoot = ref<string>("");
@@ -1323,7 +1399,41 @@ const other5_no2_desc = ref<object>({});
 const experimenter_dated = ref<Date>();
 const createdAt = ref<Date>();
 const updatedAt = ref<Date>();
+const group = ref<any | null>(null);
+const group2 = ref<any | null>(null);
+const group3 = ref<any | null>(null);
+const main = ref<any>();
+const main2 = ref<any>();
+const main3 = ref<any>();
+const main4 = ref<any>();
+const main5 = ref<any>();
 
+
+const Other = ref<string>("");
+const commander = ref<string>("");
+
+const date1 = ref<Date>();
+const date2 = ref<Date>();
+const date3 = ref<Date>();
+const date4 = ref<Date>();
+
+const OPmain = ref<
+  Array<{
+    id: number;
+    title: string;
+    description: string;
+    level: number;
+  }>
+>([]);
+
+const OPgroup = ref<
+  Array<{
+    id: number;
+    title: string;
+    description: string;
+    level: number;
+  }>
+>([]);
 const clearDateExam = () => {
   date_start.value = null;
 };
@@ -1338,6 +1448,7 @@ const name = ref<string>("");
 const position = ref<string>("");
 
 const monthSelect = ref<number>();
+
 const caretaker1 = ref<string>("");
 const caretaker2 = ref<string>("");
 const OPcaretaker = [
@@ -1375,8 +1486,18 @@ const resetActivity = () => {
 //-----------------(3.2)-----------//
 
 const knowledgeCount = ref<number>(3);
-const knowledge = ref<string[]>(Array(knowledgeCount.value).fill(""));
-const OPknowledge = ["1", "2", "3", "4"];
+const knowledge = ref<any[]>(Array.from({ length: knowledgeCount.value }, () => null));
+const OPknowledge = ref<
+  Array<{
+    knowledge_id: number;
+    title: number;
+    options: Array<Option>;
+  }>
+>([]);
+interface Option {
+  level_id: number;
+  level_desc: string;
+}
 const addKnowledge = () => {
   if (knowledgeCount.value < 6) {
     knowledgeCount.value++;
@@ -1413,534 +1534,159 @@ const addProductivity = () => {
 const ProductivityArray = computed(() => {
   return Array(productivityCount.value).fill("");
 });
-
-const checkRule = ref([
-  {
-    id: 1,
-    parent_id: 0,
-    description: "๑. รัฐธรรมนูญ",
-    status_select: 1,
-    active: 1,
-    createdAt: "2023-07-24T10:39:59.000Z",
-    updatedAt: "2023-07-24T10:39:59.000Z",
-    checked: false,
-  },
-  {
-    id: 2,
-    parent_id: 0,
-    description: "๒. กฎหมายปกครอง",
-    status_select: 0,
-    active: 1,
-    createdAt: "2023-07-24T10:39:59.000Z",
-    updatedAt: "2023-07-24T10:39:59.000Z",
-    checked: false,
-  },
-  {
-    id: 3,
-    parent_id: 2,
-    description: "๒.๑. ด้านการบริหารราชการ เช่น",
-    status_select: 0,
-    active: 1,
-    createdAt: "2023-07-24T10:39:59.000Z",
-    updatedAt: "2023-07-24T10:39:59.000Z",
-    checked: false,
-  },
-  {
-    id: 4,
-    parent_id: 3,
-    description: "๑) กฎหมายว่าด้วยระเบียบบริหารราชการกรุงเทพมหานคร",
-    status_select: 1,
-    active: 1,
-    createdAt: "2023-07-24T10:39:59.000Z",
-    updatedAt: "2023-07-24T10:39:59.000Z",
-    checked: false,
-  },
-  {
-    id: 5,
-    parent_id: 3,
-    description: "๒) กฎหมายว่าด้วยระเบียบบริหารราชการแผ่นดิน",
-    status_select: 1,
-    active: 1,
-    createdAt: "2023-07-24T10:39:59.000Z",
-    updatedAt: "2023-07-24T10:39:59.000Z",
-    checked: false,
-  },
-  {
-    id: 6,
-    parent_id: 3,
-    description: "๓) กฎหมายว่าด้วยลักษณะปกครองท้องที่",
-    status_select: 1,
-    active: 1,
-    createdAt: "2023-07-24T10:39:59.000Z",
-    updatedAt: "2023-07-24T10:39:59.000Z",
-    checked: false,
-  },
-  {
-    id: 7,
-    parent_id: 3,
-    description:
-      "๔) ระเบียบสำนักนายกรัฐมนตรี ว่าด้วยการรับฟังความคิดเห็นสาธารณะโดยวิธีประชาพิจารณ์พ.ศ.๒๕๓๙",
-    status_select: 1,
-    active: 1,
-    createdAt: "2023-07-24T10:39:59.000Z",
-    updatedAt: "2023-07-24T10:39:59.000Z",
-    checked: false,
-  },
-  {
-    id: 8,
-    parent_id: 3,
-    description:
-      "๕) ระเบียบสำนักนายกรัฐมนตรี ว่าด้วยการสร้างระบบบริหารกิจการบ้านเมืองและสังคมที่ดีพ.ศ.๒๕๔๒",
-    status_select: 1,
-    active: 1,
-    createdAt: "2023-07-24T10:40:00.000Z",
-    updatedAt: "2023-07-24T10:40:00.000Z",
-    checked: false,
-  },
-  {
-    id: 9,
-    parent_id: 3,
-    description:
-      "๖) พระราชกฤษฎีกาว่าด้วยหลักเกณฑ์และวิธีการบริหารกิจการบ้านเมืองที่ดี พ.ศ.๒๕๔๖",
-    status_select: 1,
-    active: 1,
-    createdAt: "2023-07-24T10:40:00.000Z",
-    updatedAt: "2023-07-24T10:40:00.000Z",
-    checked: false,  
-  },
-  {
-    id: 10,
-    parent_id: 2,
-    description: "๒.๒. ด้านการปฏิบัติราชการ เช่น",
-    status_select: 0,
-    active: 1,
-    createdAt: "2023-07-24T10:40:00.000Z",
-    updatedAt: "2023-07-24T10:40:00.000Z",
-    checked: false,
-  },
-  {
-    id: 11,
-    parent_id: 10,
-    description: "๑) ระเบียบกรุงเทพมหานครว่าด้วยวิธีปฏิบัติงานสารบรรณ พ.ศ.๒๕๔๖",
-    status_select: 1,
-    active: 1,
-    createdAt: "2023-07-24T10:40:00.000Z",
-    updatedAt: "2023-07-24T10:40:00.000Z",
-    checked: false,
-  },
-  {
-    id: 12,
-    parent_id: 10,
-    description: "๒) กฎหมายว่าด้วยวิธีปฏิบัติราชการทางปกครอง",
-    status_select: 1,
-    active: 1,
-    createdAt: "2023-07-24T10:40:00.000Z",
-    updatedAt: "2023-07-24T10:40:00.000Z",
-    checked: false,
-  },
-  {
-    id: 13,
-    parent_id: 10,
-    description: "๓) กฎหมายว่าด้วยความรับผิดทางละเมิดของเจ้าหน้าที่",
-    status_select: 1,
-    active: 1,
-    createdAt: "2023-07-24T10:40:00.000Z",
-    updatedAt: "2023-07-24T10:40:00.000Z",
-    checked: false,
-  },
-  {
-    id: 14,
-    parent_id: 10,
-    description: "๔) กฎหมายว่าด้วยการข้อมูลข่าวสารของทางราชการ",
-    status_select: 1,
-    active: 1,
-    createdAt: "2023-07-24T10:40:00.000Z",
-    updatedAt: "2023-07-24T10:40:00.000Z",
-    checked: false,
-  },
-  {
-    id: 15,
-    parent_id: 10,
-    description: "๕) ระเบียบสำนักนายกรัฐมนตรีว่าด้วยงานสารบรรณ พ.ศ.๒๕๒๖",
-    status_select: 1,
-    active: 1,
-    createdAt: "2023-07-24T10:40:00.000Z",
-    updatedAt: "2023-07-24T10:40:00.000Z",
-    checked: false,
-  },
-  {
-    id: 16,
-    parent_id: 10,
-    description: "๖) ระเบียบว่าด้วยการรักษาความลับของทางราชการ พ.ศ.๒๕๔๔",
-    status_select: 1,
-    active: 1,
-    createdAt: "2023-07-24T10:40:00.000Z",
-    updatedAt: "2023-07-24T10:40:00.000Z",
-    checked: false,
-  },
-  {
-    id: 17,
-    parent_id: 2,
-    description: "๒.๓ ด้านการบริหารทรัพยากรบุคคล เช่น",
-    status_select: 0,
-    active: 1,
-    createdAt: "2023-07-24T10:40:00.000Z",
-    updatedAt: "2023-07-24T10:40:00.000Z",
-    checked: false,
-  },
-  {
-    id: 18,
-    parent_id: 17,
-    description:
-      "๑) กฎหมายว่าด้วยระเบียบข้าราชการกรุงเทพมหานครและบุคลากรกรุงเทพมหานคร/กฎ ก.ก./หลักเกณฑ์ วิธีการ/มติ ก.ก. ที่เกี่ยวข้อง",
-    status_select: 1,
-    active: 1,
-    createdAt: "2023-07-24T10:40:00.000Z",
-    updatedAt: "2023-07-24T10:40:00.000Z",
-    checked: false,
-  },
-  {
-    id: 19,
-    parent_id: 17,
-    description:
-      "๒) กฎหมายว่าด้วยระเบียบข้าราชการพลเรือนและกฎ ก.พ. ที่เกี่ยวข้อง",
-    status_select: 1,
-    active: 1,
-    createdAt: "2023-07-24T10:40:00.000Z",
-    updatedAt: "2023-07-24T10:40:00.000Z",
-    checked: false,
-  },
-  {
-    id: 20,
-    parent_id: 2,
-    description: "๒.๔. ด้านการบริหารงบประมาณและการคลัง เช่น",
-    status_select: 0,
-    active: 1,
-    createdAt: "2023-07-24T10:40:00.000Z",
-    updatedAt: "2023-07-24T10:40:00.000Z",
-    checked: false,
-  },
-  {
-    id: 21,
-    parent_id: 20,
-    description:
-      "๑) ข้อบัญญัติกรุงเทพมหานคร เรื่อง วิธีการงบประมาณ พ.ศ.๒๕๒๙ ซึ่งแก้ไขเพิ่มเติมโดย(ฉบับที่๒)พ.ศ.๒๕๓๓ และ(ฉบับที่๓)พ.ศ.๒๕๓๖",
-    status_select: 1,
-    active: 1,
-    createdAt: "2023-07-24T10:40:00.000Z",
-    updatedAt: "2023-07-24T10:40:00.000Z",
-    checked: false,
-  },
-  {
-    id: 22,
-    parent_id: 20,
-    description:
-      "๒) ระเบียบกรุงเทพมหานครว่าด้วยการรับเงิน การเบิกจ่ายเงิน การเก็บรักษาเงิน การนำส่งเงินและการตรวจเงิน(ฉบับที่๘) พ.ศ.๒๕๔๔ (ฉบับที่๙)พ.ศ.๒๕๔๘",
-    status_select: 1,
-    active: 1,
-    createdAt: "2023-07-24T10:40:00.000Z",
-    updatedAt: "2023-07-24T10:40:00.000Z",
-    checked: false,
-  },
-  {
-    id: 23,
-    parent_id: 20,
-    description:
-      "๓) ระเบียบกรุงเทพมหานครว่าด้วยค่าใช้จ่ายในการฝึกอบรบ พ.ศ.๒๕๔๑",
-    status_select: 1,
-    active: 1,
-    createdAt: "2023-07-24T10:40:00.000Z",
-    updatedAt: "2023-07-24T10:40:00.000Z",
-    checked: false,
-  },
-  {
-    id: 24,
-    parent_id: 20,
-    description: "๔) พระราชบัญญัติวิธีการงบประมาณ พ.ศ.๒๕๐๒",
-    status_select: 1,
-    active: 1,
-    createdAt: "2023-07-24T10:40:00.000Z",
-    updatedAt: "2023-07-24T10:40:00.000Z",
-    checked: false,
-  },
-  {
-    id: 25,
-    parent_id: 20,
-    description:
-      "๕) ระเบียบคณะกรรมการการตรวจเงินแผ่นดินว่าด้วยวินัยทางงบประมาณและการคลัง พ.ศ.๒๕๔๔",
-    status_select: 1,
-    active: 1,
-    createdAt: "2023-07-24T10:40:00.000Z",
-    updatedAt: "2023-07-24T10:40:00.000Z",
-    checked: false,
-  },
-  {
-    id: 26,
-    parent_id: 20,
-    description: "๖) กฎหมายว่าด้วยความผิดเกี่ยวกับการเสนอราคาต่อหน่วยของรัฐ",
-    status_select: 1,
-    active: 1,
-    createdAt: "2023-07-24T10:40:00.000Z",
-    updatedAt: "2023-07-24T10:40:00.000Z",
-    checked: false,
-  },
-  {
-    id: 27,
-    parent_id: 20,
-    description:
-      "๗) พระราชกฤษฎีกาการจ่ายเงินเดือน เงินปี บำเหน็จ บำนาญ และเงินอื่นในลักษณะเดียวกัน พ.ศ.๒๕๓๕",
-    status_select: 1,
-    active: 1,
-    createdAt: "2023-07-24T10:40:00.000Z",
-    updatedAt: "2023-07-24T10:40:00.000Z",
-    checked: false,
-  },
-  {
-    id: 28,
-    parent_id: 20,
-    description: "๘) พระราชกฤษฎีกาค่าใช้จ่ายในการเดินทางไปราชการ พ.ศ.๒๕๒๖",
-    status_select: 1,
-    active: 1,
-    createdAt: "2023-07-24T10:40:00.000Z",
-    updatedAt: "2023-07-24T10:40:00.000Z",
-    checked: false,
-  },
-  {
-    id: 29,
-    parent_id: 20,
-    description:
-      "๙) ระเบียบกระทรวงการคลังว่าด้วยการเบิกจ่ายเบี้ยเลี้ยงเดินทาง และค่าเช่าที่พักในการเดินทางไปราชการ พ.ศ.๒๕๓๔ (ฉบับที่๙) พ.ศ.๒๕๔๔",
-    status_select: 1,
-    active: 1,
-    createdAt: "2023-07-24T10:40:00.000Z",
-    updatedAt: "2023-07-24T10:40:00.000Z",
-    checked: false,
-  },
-]);
-const checkList21 = ref([
-  {
-    id: 1,
-    text: "2.1.1 กฎหมายว่าด้วยระเบียบบริหารราชการกรุงเทพมหานคร",
-    checked: false,
-  },
-  {
-    id: 2,
-    text: "2.1.2 กฎหมายว่าด้วยระเบียบบริหารราชการแผ่นดิน",
-    checked: false,
-  },
-  { id: 3, text: "2.1.3 กฎหมายว่าด้วยลักษณะปกครองทองที่", checked: false },
-  {
-    id: 4,
-    text: "2.1.4 ระเบียบสำนักนายกรัฐมนตรี ว่าด้วยการรับฟังความคิดเห็นสาธารณะโดยวิธีประชาพิจารณ์ พ.ศ. ๒๕๓๙",
-    checked: false,
-  },
-  {
-    id: 5,
-    text: "2.1.5 ระเบียบสำนักนายกรัฐมนตรี ว่าด้วยการสร้างระบบบริหารกิจการบ้านเมืองและสังคมที่ดี พ.ศ. ๒๕๔๒",
-    checked: false,
-  },
-  {
-    id: 6,
-    text: "2.1.6 พระราชกฤษฏีกาว่าด้วยหลักเกณฑ์และวิธีการบริหารกิจการบ้านเมืองที่ดี พ.ศ. ๒๕๔๖",
-    checked: false,
-  },
-]);
-const checkList22 = ref([
-  {
-    id: 1,
-    text: "2.2.1 ระเบียบกรุงเทพมหานครว่าด้วยวิธีปฏิบัติงานสารบรรณ พ.ศ.๒๕๔๖",
-    checked: false,
-  },
-  {
-    id: 2,
-    text: "2.2.2 กฎหมายว่าด้วยวิธีปฏิบัติราชการทางปกครอง",
-    checked: false,
-  },
-  {
-    id: 3,
-    text: "2.2.3 กฎหมายว่าด้วยความรับผิดทางละเมิดของเจ้าหน้าที่",
-    checked: false,
-  },
-  {
-    id: 4,
-    text: "2.2.4 กฎหมายว่าด้วยการข้อมูลข่าวสารของทางราชการ",
-    checked: false,
-  },
-  {
-    id: 5,
-    text: "2.2.5 ระเบียบสำนักนายกรัฐมนตรีว่าด้วยงานสารบรรณ พ.ศ.๒๕๒๖",
-    checked: false,
-  },
-  {
-    id: 6,
-    text: "2.2.6 ระเบียบว่าด้วยการรักษาความลับของทางราชการ พ.ศ.๒๕๔๔",
-    checked: false,
-  },
-]);
-const checkList23 = ref([
-  {
-    id: 1,
-    text: "2.3.1กฎหมายว่าด้วยระเบียบข้าราชการกรุงเทพมหานครและบุคลากรกรุงเทพมหานคร/กฎ ก.ก./หลักเกณฑ์ วิธีการ/มติ ก.ก. ที่เกี่ยวข้อง",
-    checked: false,
-  },
-  {
-    id: 2,
-    text: "2.3.2 กฎหมายว่าด้วยระเบียบข้าราชการพลเรือนและกฎ ก.พ. ที่เกี่ยวข้อง",
-    checked: false,
-  },
-]);
-const checkList24 = ref([
-  {
-    id: 1,
-    text: "2.4.1 ข้อบัญญัติกรุงเทพมหานคร เรื่อง วิธีการงบประมาณ พ.ศ.๒๕๒๙ ซึ่งแก้ไขเพิ่มเติมโดย(ฉบับที่๒)พ.ศ.๒๕๓๓ และ(ฉบับที่๓)พ.ศ.๒๕๓๖",
-    checked: false,
-  },
-  {
-    id: 2,
-    text: "2.4.2 ระเบียบกรุงเทพมหานครว่าด้วยการรับเงิน การเบิกจ่ายเงิน การเก็บรักษาเงิน การนำส่งเงินและการตรวจเงิน(ฉบับที่๘) พ.ศ.๒๕๔๔ (ฉบับที่๙)พ.ศ.๒๕๔๘",
-    checked: false,
-  },
-  {
-    id: 3,
-    text: "2.4.3 ระเบียบกรุงเทพมหานครว่าด้วยค่าใช้จ่ายในการฝึกอบรบ พ.ศ.๒๕๔๑",
-    checked: false,
-  },
-  {
-    id: 4,
-    text: "2.4.4 พระราชบัญญัติวิธีการงบประมาณ พ.ศ.๒๕๐๒",
-    checked: false,
-  },
-  {
-    id: 5,
-    text: "2.4.5 ระเบียบคณะกรรมการการตรวจเงินแผ่นดินว่าด้วยวินัยทางงบประมาณและการคลัง พ.ศ.๒๕๔๔",
-    checked: false,
-  },
-  {
-    id: 6,
-    text: "2.4.6 กฎหมายว่าด้วยความผิดเกี่ยวกับการเสนอราคาต่อหน่วยของรัฐ",
-    checked: false,
-  },
-  {
-    id: 7,
-    text: "2.4.7 พระราชกฤษฎีกาการจ่ายเงินเดือน เงินปี บำเหน็จ บำนาญ และเงินอื่นในลักษณะเดียวกัน พ.ศ.๒๕๓๕",
-    checked: false,
-  },
-  {
-    id: 8,
-    text: "2.4.8 พระราชกฤษฎีกาค่าใช้จ่ายในการเดินทางไปราชการ พ.ศ.๒๕๒๖",
-    checked: false,
-  },
-  {
-    id: 9,
-    text: "2.4.9 ระเบียบกระทรวงการคลังว่าด้วยการเบิกจ่ายเบี้ยเลี้ยงเดินทาง และค่าเช่าที่พักในการเดินทางไปราชการ พ.ศ.๒๕๓๔ (ฉบับที่๙) พ.ศ.๒๕๔๔",
-    checked: false,
-  },
-  {
-    id: 10,
-    text: "2.4.10 ระเบียบสำนักนายกรัฐมนตรีว่าด้วยการพัสดุ พ.ศ.๒๕๓๕ (ฉบับที่๒) พ.ศ.๒๕๓๘ (ฉบับที่๓) พ.ศ.๒๕๓๙ (ฉบับที่๔) พ.ศ.๒๕๔๑ (ฉบับที่๕) พ.ศ.๒๕๔๒ (ฉบับที่๖) พ.ศ.๒๕๔๔",
-    checked: false,
-  },
-  {
-    id: 11,
-    text: "2.4.11 ระเบียบกระทรวงการคลัง ว่าด้วยค่าใช้จ่ายในการฝึกอบรมของส่วนราชการ พ.ศ.๒๕๔๕",
-    checked: false,
-  },
-  {
-    id: 12,
-    text: "2.4.12 ระเบียบกระทรวงการคลัง ว่าด้วยการเบิกค่าใช้จ่ายเกี่ยวกับการรักษาพยาบาลข้าราชการผู้ได้รับอันตราย หรือการป่วยเจ็บเพราะเหตุปฏิบัติราชการ พ.ศ.๒๕๔๗",
-    checked: false,
-  },
-  {
-    id: 13,
-    text: "2.4.13 ระเบียบกระทรวงการคลัง ว่าด้วยการเบิกเงินสวัสดิการเกี่ยวกับการศึกษาบุตร พ.ศ.๒๕๔๗",
-    checked: false,
-  },
-  {
-    id: 14,
-    text: "2.4.14 ประกาศกระทรวงการคลัง เรื่อง หลักเกณฑ์การจัดหาพัสดุ โดยการประมูลด้วยระบบอิเล็กทรอนิกส์ (e-Auction) พ.ศ.๒๕๔๘",
-    checked: false,
-  },
-]);
-const law = ref([]);
-const listlaw = [
-  { id: 1, label: "2.1.1 กฎหมายว่าด้วยระเบียบบริหารราชการกรุงเทพมหานคร" },
-  { id: 2, label: "2.1.2 กฎหมายว่าด้วยระเบียบบริหารราชการเเผ่นดิน" },
-  { id: 3, label: "2.1.3 กฎหมายว่าด้วยลักษณะปกครองทองที่" },
-  {
-    id: 4,
-    label:
-      "2.1.4 ระเบียบสำนักนายกรัฐมนตรี ว่าด้วยการรับฟังความคิดเห็นสาธารณะโดยวิธีประชาพิจาร์ณ พ.ศ. ๒๕๓๙",
-  },
-  {
-    id: 5,
-    label:
-      "2.1.5 ระเบียบสำนักนายกรัฐมนตรี ว่าด้วยการสร้างระบบบริหารกิจการบ้านเมืองเเละสังคมที่ดี พ.ศ. ๒๕๔๒",
-  },
-  {
-    id: 5,
-    label:
-      "2.1.6 พระราชกฤษฏีกาว่าด้วยหลักเกณฑ์เเละวิธีการบริหารกิจการบ้านเมืองที่ดี พ.ศ. ๒๕๔๖",
-  },
-];
 interface CheckboxItem {
   id: number;
-  text: string;
-  checked: boolean;
+  parent_id: number;
+  description: string;
+  status_select: number;
+  checked: number;
 }
 
-// const nameRef = ref()
-// const positionRef = ref()
-// const monthRef = ref()
-// const startDateRef = ref()
-
-// const caregiverRef1 = ref()
-// const caregiverRef2 = ref()
+const checkRule = ref<CheckboxItem[]>([]);
+  const getcompetency = async () => {
+  await http.get(config.API.competencyOptions()).then((res: any) => {
+    const data = res.data.data;
+    OPmain.value = data;
+    main.value = data[0];
+    main2.value = data[1];
+    main3.value = data[2];
+    main4.value = data[3];
+    main5.value = data[4];
+  });
+};
+const getCompetencyGroup = async () => {
+  await http.get(config.API.competencyGroupOptions()).then((res: any) => {
+    const data = res.data.data;
+    OPgroup.value = data;
+    group.value = data[0];
+    group2.value = data[1];
+    group3.value = data[2];
+  });
+};
+const getKnowledge = async () => {
+  await http.get(config.API.knowledgeOptions()).then((res: any) => {
+    OPknowledge.value = res.data.data;
+  });
+};
+const getSkill = async () => {
+  await http.get(config.API.skillOptions()).then((res: any) => {
+    const skillData = res.data.data;
+    OPcomputer.value = [skillData.computer];
+    OPenglish.value = [skillData.english];
+    OPinfomation.value = [skillData.information];
+    OPresourse.value = [skillData.resourse];
+    skill.value = skillData.computer;
+    skill2.value = skillData.english;
+    skill3.value = skillData.information;
+    skill4.value = skillData.resourse;
+  });
+};
+const getLaw = async () => {
+  await http.get(config.API.lawOptions()).then((res: any) => {
+    checkRule.value = res.data.data;
+  });
+};
 
 const putData = () => {
-  const checkboxData: Record<string, CheckboxItem[]> = {
-    checkRule: checkRule.value.filter((item) => item.checked),
-  };
+  const assign_job = activityArray.value.map((item, index) => {
+    const activityDesc = activity_desc.value[index]?.trim();
+    const goalDesc = goal_desc.value[index]?.trim();
 
-  const assign_job = activityArray.value.map((item, index) => ({
-    id: index + 1,
-    activity_desc: activity_desc.value[index],
-    goal_desc: goal_desc.value[index],
-  }));
-  const know_ledge = knowledgeArray.value.map((item, index) => ({
-    id: index + 1,
-    knowledge: knowledge.value[index],
-  }));
-  const Productivity_assign = ProductivityArray.value.map((item, index) => ({
-    id: index + 1,
-    output_desc: output_desc.value[index],
-    indicator_desc: indicator_desc.value[index],
+    if (activityDesc !== "" && goalDesc !== "") {
+      return {
+        id: index + 1,
+        activity_desc: activityDesc,
+        goal_desc: goalDesc,
+      };
+    } else {
+      return null; 
+    }
+  });
+  const know_ledge = knowledge.value.map((item) => ({
+    id: item ? item.id : null,
+    level: item ? item.level : null,
   }));
+
+
+  const Productivity_assign = ProductivityArray.value.map((item, index) => {
+    const outputDesc = output_desc.value[index]?.trim();
+    const indicatorDesc = indicator_desc.value[index]?.trim();
+
+    if (outputDesc !== "" && indicatorDesc !== "") {
+      return {
+        id: index + 1,
+        activity_desc: outputDesc,
+        goal_desc: indicatorDesc,
+      };
+    } else {
+      return null; 
+    }
+  });
+  const groupData = group.value
+    ? { id: group.value.id, level: group.value.level }
+    : null;
+  const group2Data = group2.value
+    ? { id: group2.value.id, level: group2.value.level }
+    : null;
+  const group3Data = group3.value
+    ? { id: group3.value.id, level: group3.value.level }
+    : null;
+
+  const skillData = skill.value
+    ? { id: skill.value.id, level: skill.value.level }
+    : null;
+  const skill2Data = skill2.value
+    ? { id: skill2.value.id, level: skill2.value.level }
+    : null;
+  const skill3Data = skill3.value
+    ? { id: skill3.value.id, level: skill3.value.level }
+    : null;
+  const skill4Data = skill4.value
+    ? { id: skill4.value.id, level: skill4.value.level }
+    : null;
+
+  const mainData = main.value
+    ? { id: main.value.id, level: main.value.level }
+    : null;
+  const main2Data = main2.value
+    ? { id: main2.value.id, level: main2.value.level }
+    : null;
+  const main3Data = main3.value
+    ? { id: main3.value.id, level: main3.value.level }
+    : null;
+  const main4Data = main4.value
+    ? { id: main4.value.id, level: main4.value.level }
+    : null;
+  const main5Data = main5.value
+    ? { id: main5.value.id, level: main5.value.level }
+    : null;
+
   const data = {
     fullname: fullname.value,
     position: position.value,
-    monthSelect: monthSelect.value,
+    monthSelect: monthSelect.value !== undefined ? parseInt((monthSelect.value as any).value) : null,
     date_start: date_start.value,
     date_finish: date_finish.value,
     caretaker_1: caretaker1.value,
     caretaker_2: caretaker2.value,
     knowledge: know_ledge,
-    assign_job: assign_job,
+    assign_job: assign_job.filter((item) => item !== null),
     otherlaw: OtherLaw.value,
-    skill: skill.value,
-    skill_2: skill2.value,
-    skill_3: skill3.value,
-    skill_4: skill4.value,
-    main: main.value,
-    main_2: main2.value,
-    main_3: main3.value,
-    main_4: main4.value,
-    main_5: main5.value,
-    group: group.value,
-    group_2: group2.value,
-    group_3: group3.value,
+    skill: skillData,
+    skill_2: skill2Data,
+    skill_3: skill3Data,
+    skill_4: skill4Data,
+    main: mainData,
+    main_2: main2Data,
+    main_3: main3Data,
+    main_4: main4Data,
+    main_5: main5Data,
+    group: groupData,
+    group_2: group2Data,
+    group_3: group3Data,
     other: Other.value,
     other_5: Other5.value,
-    productivity_assign: Productivity_assign,
+    productivity_assign: Productivity_assign.filter((item) => item !== null),
     commander: commander.value,
     date_1: date1.value,
     date_2: date2.value,
@@ -1950,7 +1696,12 @@ const putData = () => {
     position_foot: positionFoot.value,
     caretaker_foot: caretakerFoot.value,
     caretaker_foot2: caretakerFoot2.value,
-    checkarray: checkboxData,
+    checkarray: checkRule.value
+      .filter((item) => item.checked === 1)
+      .map((item) => ({
+        id: item.id,
+        checked: item.checked,
+      })),
   };
   console.log("test", data);
 };
@@ -1966,8 +1717,6 @@ const saveData = async () => {
   // workInfopRef.value.validate();
   myForm.value.validate().then(async (result: boolean) => {
     if (result) {
-      // แสดงข้อมูลใน Console
-
       $q.dialog({
         title: "บันทึกข้อมูล",
         message: "ต้องการบันทึกข้อมูลนี้ใช่หรือไม่ ?",
@@ -1977,45 +1726,64 @@ const saveData = async () => {
         },
       })
         .onOk(async () => {
-          putData();
+          // putData();
         })
         .onCancel(() => {})
         .onDismiss(() => {});
     } else {
       // ลอง
-      // putData();
+      putData();
       notifyError($q, "กรุณากรอกข้อมูลให้ครบ");
     }
   });
 };
 const OtherLaw = ref<string>("");
 
-const skill = ref<string>("ความรู้ความสามารถด้าน 1");
-const skill2 = ref<string>("ความรู้ความสามารถด้าน 2");
-const skill3 = ref<string>("ความรู้ความสามารถด้าน 3");
-const skill4 = ref<string>("ความรู้ความสามารถด้าน 4");
-const OPskill = [""];
 
-const main = ref<string>("คุณธรรมจริยธรรม");
-const main2 = ref<string>("การให้บริการที่ดี");
-const main3 = ref<string>("การมุ่งผลสัมฤทธิ์");
-const main4 = ref<string>("ทํางานเป็นทีม");
-const main5 = ref<string>("การสั่งสมความเชี่ยวชาญในอาชีพ");
-const OPmain = [""];
+const skill = ref<any>();
+const skill2 = ref<any>();
+const skill3 = ref<any>();
+const skill4 = ref<any>();
+const OPcomputer = ref<
+  Array<{
+    id: number;
+    title: string;
+    level: number;
+    level_description: string;
+  }>
+>([]);
+const OPenglish = ref<
+  Array<{
+    id: number;
+    title: string;
+    level: number;
+    level_description: string;
+  }>
+>([]);
+const OPinfomation = ref<
+  Array<{
+    id: number;
+    title: string;
+    level: number;
+    level_description: string;
+  }>
+>([]);
+const OPresourse = ref<
+  Array<{
+    id: number;
+    title: string;
+    level: number;
+    level_description: string;
+  }>
+>([]);
 
-const group = ref<string>("");
-const group2 = ref<string>("");
-const group3 = ref<string>("");
-const OPgroup = ["test"];
-
-const Other = ref<string>("");
-
-const commander = ref<string>("");
-
-const date1 = ref<Date>();
-const date2 = ref<Date>();
-const date3 = ref<Date>();
-const date4 = ref<Date>();
+onMounted(async () => {
+  await getLaw();
+  await getcompetency();
+  await getCompetencyGroup();
+  await getSkill();
+  await getKnowledge();
+});
 </script>
 <style lang="scss" scoped>
 .border_y {

From 995a09c1f5870f989131b3845cdd780baa47ba8c Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Mon, 7 Aug 2023 18:12:26 +0700
Subject: [PATCH 047/113] no message

---
 src/api/05_placement/api.placement.ts         |  6 ++--
 .../components/OrderPlacement/step/step04.vue | 23 ++++++++++++-
 .../components/ListRetirement/AddList.vue     |  8 ++---
 .../components/ListRetirement/TableList.vue   | 34 ++++++++++++++++---
 4 files changed, 59 insertions(+), 12 deletions(-)

diff --git a/src/api/05_placement/api.placement.ts b/src/api/05_placement/api.placement.ts
index 2b02d64f9..79a08679e 100644
--- a/src/api/05_placement/api.placement.ts
+++ b/src/api/05_placement/api.placement.ts
@@ -57,10 +57,12 @@ export default {
   yearOptionsOrder: () => `${order}/order/fiscal-year`,
   createOrder: () => `${order}/order/detail`,
   listOrder: () => `${order}/order`,
-  detailOrder:(orderId:string) => `${order}/order/detail/${orderId}`,
-  deleteOrder:(orderId:string) => `${order}/order/${orderId}`,
+  detailOrder: (orderId: string) => `${order}/order/detail/${orderId}`,
+  deleteOrder: (orderId: string) => `${order}/order/${orderId}`,
   typeOrder: () => `${order}/order/order-type`,
   examroundOrder: () => `${order}/order/detail/exam-round`,
+  attachmentOrder: (orderId: string) => `${order}/order/attachment/${orderId}`,
+
 
   receiveData: () => `${receive}`,
   receiveDataId: (id: string) => `${receive}/${id}`,
diff --git a/src/modules/05_placement/components/OrderPlacement/step/step04.vue b/src/modules/05_placement/components/OrderPlacement/step/step04.vue
index d7521a80d..e35338733 100644
--- a/src/modules/05_placement/components/OrderPlacement/step/step04.vue
+++ b/src/modules/05_placement/components/OrderPlacement/step/step04.vue
@@ -422,10 +422,15 @@ 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";
+import { useRoute } from "vue-router";
+import http from "@/plugins/http";
+import config from "@/app.config";
 
 const mixin = useCounterMixin();
 const { date2Thai } = mixin;
+const route = useRoute();
 
+const orderId_params = route.params.orderid;
 const dialog = ref<boolean>(false);
 
 // onUnmounted(() => {
@@ -433,8 +438,15 @@ const dialog = ref<boolean>(false);
 //     myEventHandler(e);
 //   });
 // });
-
+const orderId = ref<string>("");
 onMounted(async () => {
+  console.log(orderId_params);
+  if (orderId_params !== undefined) {
+    orderId.value == orderId_params.toString();
+  }
+
+  fetchAttachment(orderId.value);
+
   //   window.addEventListener("resize", (e: any) => {
   //     myEventHandler(e);
   //   });
@@ -447,6 +459,15 @@ onMounted(async () => {
   }, 1000);
 });
 
+const fetchAttachment = async (orderId: string) => {
+  console.log(123);
+  await http
+    .get(config.API.attachmentOrder("08db94be-f7c6-43e2-83eb-3c5cef3a91c7"))
+    .then((res) => {
+      console.log(res);
+    });
+};
+
 // const myEventHandler = (e: any) => {
 //   console.log("e", e.target.innerWidth);
 //   if (vuePDFRef !== null) {
diff --git a/src/modules/06_retirement/components/ListRetirement/AddList.vue b/src/modules/06_retirement/components/ListRetirement/AddList.vue
index 98126b058..3091cb41e 100644
--- a/src/modules/06_retirement/components/ListRetirement/AddList.vue
+++ b/src/modules/06_retirement/components/ListRetirement/AddList.vue
@@ -16,6 +16,7 @@ const retireld_params = route.params.id;
 const props = defineProps({
   retireld: String,
   profileId: String,
+  dataProfile: Object,
   UpdateListId: {
     type: Function,
     default: () => console.log("UpdateListId"),
@@ -112,8 +113,8 @@ const rows = ref<any>([
 watch(modal, () => {
   if (modal.value === true) {
     retireld.value = props.retireld;
-    if (type_params === "officer") {
-      type.value = type_params;
+    if (props.dataProfile.type === "OFFICER") {
+      type.value = "officer";
     } else type.value = "all";
 
     fecthlistRetire();
@@ -125,8 +126,7 @@ const fecthlistRetire = async () => {
   await http
     .get(config.API.profileOrganizRoot)
     .then((res) => {
-      // console.log(res);
-
+      console.log(res);
       const id = res.data.result[0].id;
       if (id !== "") {
         findlist(id);
diff --git a/src/modules/06_retirement/components/ListRetirement/TableList.vue b/src/modules/06_retirement/components/ListRetirement/TableList.vue
index 0c32115ec..122d388ce 100644
--- a/src/modules/06_retirement/components/ListRetirement/TableList.vue
+++ b/src/modules/06_retirement/components/ListRetirement/TableList.vue
@@ -169,6 +169,7 @@ onMounted(() => {
 const round = ref<number>();
 const typeReport = ref<string>("");
 const statusReport = ref<boolean>();
+const dataProfile = ref<Object>([]);
 // fecthlist
 const fecthlistprofile = async (id: string) => {
   showLoader();
@@ -176,6 +177,7 @@ const fecthlistprofile = async (id: string) => {
     .get(config.API.listRetire(id))
     .then((res) => {
       console.log(res);
+      dataProfile.value = res.data.result;
       round.value = res.data.result.round;
       statusReport.value = res.data.result.json;
       typeReport.value = res.data.result.typeReport;
@@ -358,11 +360,13 @@ const paginationLabel = (start: number, end: number, total: number) => {
     <q-card class="col-12 q-pa-md">
       <div class="row col-12 q-pb-sm">
         <AddList
+          :dataProfile="dataProfile"
           :retireld="retireld"
           :profile-id="profileId"
           :UpdateListId="UpdateListId"
           v-if="
-            statusReport === false && (typeReport == 'ADD' || typeReport == '' || typeReport == null)
+            statusReport === false &&
+            (typeReport == 'ADD' || typeReport == '' || typeReport == null)
           "
         />
 
@@ -459,11 +463,21 @@ const paginationLabel = (start: number, end: number, total: number) => {
               <q-th auto-width />
               <q-th
                 auto-width
-                v-if="(typeReport === 'EDIT' || typeReport === null || typeReport === '') && statusReport === false"
+                v-if="
+                  (typeReport === 'EDIT' ||
+                    typeReport === null ||
+                    typeReport === '') &&
+                  statusReport === false
+                "
               />
               <q-th
                 auto-width
-                v-if="(typeReport === 'REMOVE' || typeReport === null || typeReport === '') && statusReport === false"
+                v-if="
+                  (typeReport === 'REMOVE' ||
+                    typeReport === null ||
+                    typeReport === '') &&
+                  statusReport === false
+                "
               />
             </q-tr>
           </template>
@@ -535,7 +549,12 @@ const paginationLabel = (start: number, end: number, total: number) => {
 
               <q-td
                 auto-width
-                v-if="(typeReport === 'EDIT' || typeReport === null || typeReport === '') && statusReport === false"
+                v-if="
+                  (typeReport === 'EDIT' ||
+                    typeReport === null ||
+                    typeReport === '') &&
+                  statusReport === false
+                "
               >
                 <q-btn
                   flat
@@ -555,7 +574,12 @@ const paginationLabel = (start: number, end: number, total: number) => {
               </q-td>
               <q-td
                 auto-width
-                v-if="(typeReport === 'REMOVE' || typeReport === null || typeReport === '') && statusReport === false"
+                v-if="
+                  (typeReport === 'REMOVE' ||
+                    typeReport === null ||
+                    typeReport === '') &&
+                  statusReport === false
+                "
               >
                 <q-btn
                   flat

From 762b80e2911a0b7bcf9826a46d14a6a9c6716301 Mon Sep 17 00:00:00 2001
From: waruneeta <warunee.auy@gmail.com>
Date: Mon, 7 Aug 2023 20:34:59 +0700
Subject: [PATCH 048/113] =?UTF-8?q?=E0=B9=81=E0=B8=81=E0=B9=89=E0=B9=84?=
 =?UTF-8?q?=E0=B8=82=E0=B8=9F=E0=B8=B4=E0=B8=A5=E0=B8=94=E0=B9=8C=E0=B8=AB?=
 =?UTF-8?q?=E0=B8=99=E0=B9=88=E0=B8=A7=E0=B8=A2=E0=B8=87=E0=B8=B2=E0=B8=99?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../05_placement/components/Receive/receiveMain.vue | 13 ++++++++++---
 1 file changed, 10 insertions(+), 3 deletions(-)

diff --git a/src/modules/05_placement/components/Receive/receiveMain.vue b/src/modules/05_placement/components/Receive/receiveMain.vue
index 8156fb8af..816fd8e71 100644
--- a/src/modules/05_placement/components/Receive/receiveMain.vue
+++ b/src/modules/05_placement/components/Receive/receiveMain.vue
@@ -77,9 +77,16 @@ const fecthlistRecevice = async () => {
         personalId: e.id,
         citizenId: e.citizenId,
         fullname: e.firstname + "  " + e.lastname,
-        organizationName: "sssss",
-        orgName: "xxaxa",
-        organizationShortName: "ssss",
+        organizationName:
+              e.organizationName +
+              " " +
+              e.organizationShortName +
+              " " +
+              e.positionNumber +
+              " " +
+              e.positionPath,
+            orgName: e.organizationName,
+            organizationShortName: e.organizationShortName,
         positionNumber: e.positionNumber,
         positionPath: e.positionPath,
         birthday: date2Thai(e.dateOfBirth),

From 5400518678955550d0f16e857526ebe21fd768c2 Mon Sep 17 00:00:00 2001
From: waruneeta <warunee.auy@gmail.com>
Date: Mon, 7 Aug 2023 22:56:05 +0700
Subject: [PATCH 049/113] =?UTF-8?q?=E0=B9=81=E0=B8=81=E0=B9=89=E0=B9=84?=
 =?UTF-8?q?=E0=B8=82=E0=B8=AA=E0=B8=96=E0=B8=B2=E0=B8=99=E0=B8=B0=E0=B8=81?=
 =?UTF-8?q?=E0=B8=B2=E0=B8=A3=E0=B8=A5=E0=B8=B2=E0=B8=AD=E0=B8=AD=E0=B8=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../06_retirement/components/resign/ResignByid.vue        | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/modules/06_retirement/components/resign/ResignByid.vue b/src/modules/06_retirement/components/resign/ResignByid.vue
index 34b196a57..8c191671d 100644
--- a/src/modules/06_retirement/components/resign/ResignByid.vue
+++ b/src/modules/06_retirement/components/resign/ResignByid.vue
@@ -45,10 +45,10 @@
 					</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-top">สถานะ</div>
 							<div class="col-12 text-detail">
-								<q-icon size="20px" v-if="status == 'อยู่ระหว่างการทดลองงาน'" name="mdi-timer-sand" color="deep-orange" />
-								<q-icon size="20px" v-else-if="status == 'ไม่ผ่านการทดลอง'" name="mdi-close" color="red" />
+								<q-icon size="20px" v-if="status == 'อยู่ระหว่างการพิจารณา'" name="mdi-timer-sand" color="deep-orange" />
+								<q-icon size="20px" v-else-if="status == 'อนุมัติ'" name="mdi-close" color="red" />
 								<q-icon size="20px" v-else name="mdi-check" color="teal" />
 								{{ status }}
 							</div>
@@ -175,7 +175,7 @@ const name = ref<string>('นายสมคิด ยอดใจ')
 const position = ref<string>('นักจัดการงานทั่วไป')
 const level = ref<string>('ชำนาญการพิเศษ')
 const institution = ref<string>('ฝ่ายบริหารงานทั่วไป')
-const status = ref<string>('อยู่ระหว่างการทดลองงาน')
+const status = ref<string>('อยู่ระหว่างการพิจารณา')
 const edit = ref<boolean>(true)
 const location = ref<string>('ที่ทำงาน') 
 const filingDate = ref<string>('21 ก.ค. 2566')

From e650e992aa1da23067a6605b79ab292491772057 Mon Sep 17 00:00:00 2001
From: Thanit Konmek <thanit@frappet.com>
Date: Tue, 8 Aug 2023 00:22:26 +0700
Subject: [PATCH 050/113] =?UTF-8?q?step2=20=E0=B8=A2=E0=B8=B1=E0=B8=87?=
 =?UTF-8?q?=E0=B9=84=E0=B8=A1=E0=B9=88=E0=B9=80=E0=B8=AA=E0=B8=A3=E0=B9=87?=
 =?UTF-8?q?=E0=B8=88=20,step=203=20=E0=B9=80=E0=B8=AA=E0=B8=A3=E0=B9=87?=
 =?UTF-8?q?=E0=B8=88=E0=B9=81=E0=B8=A5=E0=B9=89=E0=B8=A7=20=E0=B8=AD?=
 =?UTF-8?q?=E0=B8=AD=E0=B8=81=E0=B8=84=E0=B8=B3=E0=B8=AA=E0=B8=B1=E0=B9=88?=
 =?UTF-8?q?=E0=B8=87?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/05_placement/api.placement.ts         |  46 +-
 .../OrderPlacement/detailOrderPlacement.vue   |  11 +-
 .../components/OrderPlacement/step/step01.vue | 333 +++++--
 .../components/OrderPlacement/step/step02.vue | 419 +++++---
 .../components/OrderPlacement/step/step03.vue | 896 +++++++++---------
 .../05_placement/interface/request/Order.ts   |   7 +
 .../05_placement/interface/response/Order.ts  |  43 +
 src/modules/05_placement/store.ts             |  18 +-
 8 files changed, 1127 insertions(+), 646 deletions(-)
 create mode 100644 src/modules/05_placement/interface/request/Order.ts
 create mode 100644 src/modules/05_placement/interface/response/Order.ts

diff --git a/src/api/05_placement/api.placement.ts b/src/api/05_placement/api.placement.ts
index 94259b628..8231235bd 100644
--- a/src/api/05_placement/api.placement.ts
+++ b/src/api/05_placement/api.placement.ts
@@ -45,19 +45,55 @@ export default {
 
   //education
   placementEducationId: (id: string) => `${placement}/education/${id}`,
-  // position 
+  // position
   placementPosition: () => `${placement}/position/use`,
   // putPositiom
   putPosition: (id: any) => `${placement}/position/${id}`,
   // clear Position
-  clearPosition: (personalId: string) => `${placement}/position/clear/${personalId}`,
+  clearPosition: (personalId: string) =>
+    `${placement}/position/clear/${personalId}`,
 
   // order
   yearOptionsOrder: () => `${order}/order/fiscal-year`,
-  createOrder: () => `${order}/order/detail`,
   listOrder: () => `${order}/order`,
-  detailOrder:(orderId:string) => `${order}/order/detail/${orderId}`,
-  deleteOrder:(orderId:string) => `${order}/order/${orderId}`,
+  deleteOrder: (orderId: string) => `${order}/order/${orderId}`,
   typeOrder: () => `${order}/order/order-type`,
+
+  createOrder: () => `${order}/order/detail`,
+  detailOrder: (orderId: string) => `${order}/order/detail/${orderId}`,
   examroundOrder: () => `${order}/order/detail/exam-round`,
+
+  //ข้อมูลเลือกรายชื่อออกคำสั่ง, ลบรายชื่อ
+  personsOrder: (orderId: string) => `${order}/order/persons/${orderId}`,
+
+  //เปลี่ยน status ของคำสั่งไปขั้นตอนถัดไป
+  nextOrder: (orderId: string) => `${order}/order/next/${orderId}`,
+  //เปลี่ยน status ของคำสั่งไปขั้นตอนถัดไป
+  preventOrder: (orderId: string) => `${order}/order/prev/${orderId}`,
+
+  //สลับลำดับข้อมูลในบัญชีแนบท้ายขึ้น
+  swapUpOrder: (personalId: string) => `${order}/order/swap/up/${personalId}`,
+  //สลับลำดับข้อมูลในบัญชีแนบท้ายลง
+  swapDownOrder: (personalId: string) =>
+    `${order}/order/swap/down/${personalId}`,
+
+  //บันทึกข้อมูลเงินเดือนสำหรับผู้บรรจุ
+  salaryOrder: (id: string) => `${order}/order/salary/${id}`,
+
+  // popup แสดงรายชื่อตามหน่วยงานที่เลือก , popup เลือกรายชื่อส่งสำเนา
+  copyOrderPersonsId: (id: string) => `${order}/order/copy-order/persons/${id}`,
+
+  copyOrder: `${order}/order/copy-order`,
+
+  copyOrderId: (id: string) => `${order}/order/copy-order/${id}`,
+
+  attachmentId: (id: string) => `${order}/order/attachment/${id}`,
+
+  attachmentOrderId: (orderId: string) =>
+    `${order}/order/attachment/order-file/${orderId}`,
+
+  attachmentFileId: (orderId: string) =>
+    `${order}/order/attachment/file/${orderId}`,
+
+  orderReady: (id: string) => `${order}/order/ready/${id}`,
 };
diff --git a/src/modules/05_placement/components/OrderPlacement/detailOrderPlacement.vue b/src/modules/05_placement/components/OrderPlacement/detailOrderPlacement.vue
index 6c17f39fd..8b68a05df 100644
--- a/src/modules/05_placement/components/OrderPlacement/detailOrderPlacement.vue
+++ b/src/modules/05_placement/components/OrderPlacement/detailOrderPlacement.vue
@@ -48,6 +48,7 @@
         :name="4"
         title="รายละเอียดคำสั่งและแนบท้าย"
         prefix="4"
+        :done="step > 4"
         :header-nav="step > 4"
       />
       <template v-slot:message>
@@ -61,8 +62,12 @@
 </template>
 <script setup lang="ts">
 import { useRouter } from "vue-router";
-import { ref, defineAsyncComponent, onMounted } from "vue";
+import { ref, defineAsyncComponent, onMounted, onUnmounted } from "vue";
 import type { QStepper } from "quasar";
+import { useProbationDataStore } from "@/modules/05_placement/store";
+
+const probationData = useProbationDataStore();
+const { stepOrder, setStepOrder } = probationData;
 
 const step01 = defineAsyncComponent(
   () =>
@@ -85,6 +90,10 @@ const router = useRouter();
 const step = ref<number>(1);
 const stepper = ref<QStepper>();
 
+onUnmounted(() => {
+  destroyLocalStorage();
+});
+
 const nextStep = () => {
   stepper.value!.next();
   localStorage.setItem("currentStep", step.value.toString());
diff --git a/src/modules/05_placement/components/OrderPlacement/step/step01.vue b/src/modules/05_placement/components/OrderPlacement/step/step01.vue
index eeddc482b..6f5ff7392 100644
--- a/src/modules/05_placement/components/OrderPlacement/step/step01.vue
+++ b/src/modules/05_placement/components/OrderPlacement/step/step01.vue
@@ -3,10 +3,24 @@
     <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" />
+          <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'
           ) " -->
@@ -15,36 +29,73 @@
         <div class="col-xs-12 col-md-6">
           <!-- :readonly="!edit"
                 :borderless="!edit" -->
-          <q-input :class="getClass(true)" outlined dense lazy-rules v-model="nameOrder"
-            :rules="[(val) => !!val || `${'กรุณากรอกคำสั่งเรื่อง'}`]" :label="`${'คำสั่งเรื่อง'}`"
-            @update:modelValue="clickEditRow" hide-bottom-space />
+          <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" />
+            <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>
+          <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">
+            <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
+                  :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">
+          <datepicker
+            menu-class-name="modalfix"
+            v-model="dateCommand"
+            :locale="'th'"
+            autoApply
+            borderless
+            :enableTimePicker="false"
+            week-start="0"
+          >
             <template #year="{ year }">
               {{ year + 543 }}
             </template>
@@ -52,12 +103,24 @@
               {{ 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 || `${'กรุณาเลือกวันที่มีผลออกคำสั่ง'}`,
-  ]">
+              <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
+                    name="event"
+                    class="cursor-pointer"
+                    style="color: var(--q-primary)"
+                  >
                   </q-icon>
                 </template>
               </q-input>
@@ -66,10 +129,24 @@
         </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" />
+          <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'
           ) " -->
@@ -77,50 +154,115 @@
         <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 />
+          <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 />
+          <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="examRound"
-            :rules="[(val: string) => !!val || `${'กรุณาเลือกรอบการสอบ'}`]" hide-bottom-space :label="`${'รอบการสอบ'}`"
-            @update:modelValue="clickEditRow" emit-value map-options option-label="examRoundName"
-            :options="examRoundOption" option-value="examRoundValue" use-input input-debounce="0" />
+          <selector
+            :class="getClass(true)"
+            outlined
+            dense
+            lazy-rules
+            v-model="examRound"
+            :rules="[(val: string) => !!val || `${'กรุณาเลือกรอบการสอบ'}`]"
+            hide-bottom-space
+            :label="`${'รอบการสอบ'}`"
+            @update:modelValue="clickEditRow"
+            emit-value
+            map-options
+            option-label="examRoundName"
+            :options="examRoundOption"
+            option-value="examRoundValue"
+            use-input
+            input-debounce="0"
+          />
           <!-- @filter="(inputValue:string,
           doneFn:Function) => filterSelector(inputValue, doneFn,'testOption'
           ) " -->
         </div>
         <div class="col-xs-12 col-md-6">
-          <selector :class="getClass(true)" outlined dense lazy-rules v-model="position"
-            :rules="[(val: string) => !!val || `${'กรุณาเลือกตำแหน่งรับสมัคร'}`]" hide-bottom-space
-            :label="`${'ตำแหน่งรับสมัคร'}`" @update:modelValue="clickEditRow" emit-value map-options option-label="name"
-            :options="positionOption" option-value="id" use-input input-debounce="0" />
+          <selector
+            :class="getClass(true)"
+            outlined
+            dense
+            lazy-rules
+            v-model="position"
+            :rules="[(val: string) => !!val || `${'กรุณาเลือกตำแหน่งรับสมัคร'}`]"
+            hide-bottom-space
+            :label="`${'ตำแหน่งรับสมัคร'}`"
+            @update:modelValue="clickEditRow"
+            emit-value
+            map-options
+            option-label="name"
+            :options="positionOption"
+            option-value="id"
+            use-input
+            input-debounce="0"
+          />
           <!-- @filter="(inputValue:string, doneFn:Function) =>
           filterSelector(inputValue, doneFn,'positionOption' ) " -->
         </div>
         <div class="col-xs-12 col-md-6">
-          <selector :class="getClass(true)" outlined dense lazy-rules v-model="register"
-            :rules="[(val: string) => !!val || `${'กรุณาเลือกมติ กก. ครั้งที่ (เรื่อง รับสมัครสอบฯ)'}`]" hide-bottom-space
-            :label="`${'มติ กก. ครั้งที่ (เรื่อง รับสมัครสอบฯ)'}`" @update:modelValue="clickEditRow" emit-value
-            map-options option-label="name" :options="registerOption" option-value="id" use-input input-debounce="0" />
+          <selector
+            :class="getClass(true)"
+            outlined
+            dense
+            lazy-rules
+            v-model="register"
+            :rules="[(val: string) => !!val || `${'กรุณาเลือกมติ กก. ครั้งที่ (เรื่อง รับสมัครสอบฯ)'}`]"
+            hide-bottom-space
+            :label="`${'มติ กก. ครั้งที่ (เรื่อง รับสมัครสอบฯ)'}`"
+            @update:modelValue="clickEditRow"
+            emit-value
+            map-options
+            option-label="name"
+            :options="registerOption"
+            option-value="id"
+            use-input
+            input-debounce="0"
+          />
         </div>
         <!-- @filter="(inputValue:string,
         doneFn:Function) => filterSelector(inputValue, doneFn,'registerOption'
         ) " -->
 
         <div class="col-xs-12 col-md-6">
-          <datepicker menu-class-name="modalfix" v-model="dateRegister" :locale="'th'" autoApply borderless
-            :enableTimePicker="false" week-start="0">
+          <datepicker
+            menu-class-name="modalfix"
+            v-model="dateRegister"
+            :locale="'th'"
+            autoApply
+            borderless
+            :enableTimePicker="false"
+            week-start="0"
+          >
             <template #year="{ year }">
               {{ year + 543 }}
             </template>
@@ -128,13 +270,25 @@
               {{ parseInt(value + 543) }}
             </template>
             <template #trigger>
-              <q-input outlined dense class="full-width datepicker" :model-value="dateRegister != null ? date2Thai(dateRegister) : null
-                " :label="`${'ลงวันที่ (เรื่อง รับสมัครสอบฯ)'}`" :rules="[
-    (val) =>
-      !!val || `${'กรุณาเลือกลงวันที่ (เรื่อง รับสมัครสอบฯ)'}`,
-  ]">
+              <q-input
+                outlined
+                dense
+                class="full-width datepicker"
+                :model-value="
+                  dateRegister != null ? date2Thai(dateRegister) : null
+                "
+                :label="`${'ลงวันที่ (เรื่อง รับสมัครสอบฯ)'}`"
+                :rules="[
+                  (val) =>
+                    !!val || `${'กรุณาเลือกลงวันที่ (เรื่อง รับสมัครสอบฯ)'}`,
+                ]"
+              >
                 <template v-slot:prepend>
-                  <q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)">
+                  <q-icon
+                    name="event"
+                    class="cursor-pointer"
+                    style="color: var(--q-primary)"
+                  >
                   </q-icon>
                 </template>
               </q-input>
@@ -142,18 +296,38 @@
           </datepicker>
         </div>
         <div class="col-xs-12 col-md-6">
-          <selector :class="getClass(true)" outlined dense lazy-rules v-model="announce"
+          <selector
+            :class="getClass(true)"
+            outlined
+            dense
+            lazy-rules
+            v-model="announce"
             :rules="[(val: string) => !!val || `${'กรุณาเลือกมติ กก. ครั้งที่ (เรื่อง ผลการสอบแข่งขัน)'}`]"
-            hide-bottom-space :label="`${'มติ กก. ครั้งที่ (เรื่อง ผลการสอบแข่งขัน)'}`" @update:modelValue="clickEditRow"
-            emit-value map-options option-label="name" :options="announceOption" option-value="id" use-input
-            input-debounce="0" />
+            hide-bottom-space
+            :label="`${'มติ กก. ครั้งที่ (เรื่อง ผลการสอบแข่งขัน)'}`"
+            @update:modelValue="clickEditRow"
+            emit-value
+            map-options
+            option-label="name"
+            :options="announceOption"
+            option-value="id"
+            use-input
+            input-debounce="0"
+          />
           <!-- @filter="(inputValue:string,
           doneFn:Function) => filterSelector(inputValue, doneFn,'announceOption'
           ) "  -->
         </div>
         <div class="col-xs-12 col-md-6">
-          <datepicker menu-class-name="modalfix" v-model="dateAnnounce" :locale="'th'" autoApply borderless
-            :enableTimePicker="false" week-start="0">
+          <datepicker
+            menu-class-name="modalfix"
+            v-model="dateAnnounce"
+            :locale="'th'"
+            autoApply
+            borderless
+            :enableTimePicker="false"
+            week-start="0"
+          >
             <template #year="{ year }">
               {{ year + 543 }}
             </template>
@@ -161,13 +335,25 @@
               {{ parseInt(value + 543) }}
             </template>
             <template #trigger>
-              <q-input outlined dense class="full-width datepicker" :model-value="dateAnnounce != null ? date2Thai(dateAnnounce) : null
-                " :label="`${'ลงวันที่ (เรื่อง ผลการสอบแข่งขัน)'}`" :rules="[
-    (val) =>
-      !!val || `${'กรุณาเลือกลงวันที่ (เรื่อง ผลการสอบแข่งขัน)'}`,
-  ]">
+              <q-input
+                outlined
+                dense
+                class="full-width datepicker"
+                :model-value="
+                  dateAnnounce != null ? date2Thai(dateAnnounce) : null
+                "
+                :label="`${'ลงวันที่ (เรื่อง ผลการสอบแข่งขัน)'}`"
+                :rules="[
+                  (val) =>
+                    !!val || `${'กรุณาเลือกลงวันที่ (เรื่อง ผลการสอบแข่งขัน)'}`,
+                ]"
+              >
                 <template v-slot:prepend>
-                  <q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)">
+                  <q-icon
+                    name="event"
+                    class="cursor-pointer"
+                    style="color: var(--q-primary)"
+                  >
                   </q-icon>
                 </template>
               </q-input>
@@ -198,13 +384,13 @@ import type {
 } from "@/modules/05_placement/interface/index/Main";
 import { useCounterMixin } from "@/stores/mixin";
 import type { QForm } from "quasar";
-import http from "@/plugins/http";
 import { useQuasar } from "quasar";
-import config from "@/app.config";
 import { useRoute } from "vue-router";
+import http from "@/plugins/http";
+import config from "@/app.config";
 
 const mixin = useCounterMixin();
-const { date2Thai, messageError, showLoader, hideLoader } = mixin;
+const { date2Thai, messageError, showLoader, hideLoader, success } = mixin;
 const $q = useQuasar(); //ใช้ noti quasar
 const route = useRoute();
 
@@ -398,7 +584,7 @@ const fecthExamRoundOption = async () => {
       examRoundOption.value = res.data.result;
       console.log(examRoundOption.value);
     })
-    .catch((e) => { });
+    .catch((e) => {});
 };
 const submit = async () => {
   const formdata = {
@@ -430,7 +616,7 @@ const submit = async () => {
       }).onOk(async () => {
         showLoader();
         if (!orderId) {
-        createListOrder(formdata);
+          createListOrder(formdata);
         } else {
           let orderIdString = orderId.toString();
           updateOrder(formdata, orderIdString);
@@ -444,11 +630,13 @@ const createListOrder = async (formData: Object) => {
   await http
     .post(config.API.createOrder(), formData)
     .then((res) => {
-      console.log(res);
+      const data = res.data.result;
+      localStorage.setItem("orderId", data.id);
       next();
+      success($q, "บันทึกข้อมูลสำเร็จ");
     })
     .catch((e) => {
-      console.log(e);
+      messageError($q, e);
     })
     .finally(() => {
       hideLoader();
@@ -462,9 +650,10 @@ const updateOrder = async (formData: Object, orderId: string) => {
     .then((res) => {
       console.log(res);
       next();
+      success($q, "แก้ไขข้อมูลสำเร็จ");
     })
     .catch((e) => {
-      console.log(e);
+      messageError($q, e);
     })
     .finally(() => {
       hideLoader();
diff --git a/src/modules/05_placement/components/OrderPlacement/step/step02.vue b/src/modules/05_placement/components/OrderPlacement/step/step02.vue
index 2b5a6285f..49eb96d11 100644
--- a/src/modules/05_placement/components/OrderPlacement/step/step02.vue
+++ b/src/modules/05_placement/components/OrderPlacement/step/step02.vue
@@ -1,9 +1,10 @@
+div
 <template>
   <div>
     <div class="q-py-md q-pl-md" style="height: 68vh; overflow-y: scroll">
       <div class="col-12 row q-pb-sm items-center">
-        <q-btn flat round color="primary" @click="refresh" icon="mdi-refresh">
-          <q-tooltip>อัปเดตข้อมูล</q-tooltip>
+        <q-btn flat round color="primary" @click="refresh" icon="mdi-plus">
+          <q-tooltip>เพิ่มข้อมูล</q-tooltip>
         </q-btn>
         <q-space />
         <div class="items-center" style="display: flex">
@@ -52,46 +53,20 @@
         :visible-columns="visibleColumns"
         :filter="filter"
         row-key="name"
-        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:header="props">
           <q-tr :props="props">
-            <q-th auto-width>
-              <q-checkbox
-                keep-color
-                color="primary"
-                dense
-                v-model="props.selected"
-              />
-            </q-th>
             <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-th auto-width />
+            <q-th auto-width />
           </q-tr>
         </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
               v-for="col in props.cols"
               :key="col.name"
@@ -127,6 +102,19 @@
                 <!-- <q-tooltip>เลื่อนลำดับลง</q-tooltip> -->
               </q-btn>
             </q-td>
+            <q-td auto-width>
+              <q-btn
+                dense
+                size="12px"
+                flat
+                round
+                color="red"
+                @click="dialogDeleteData(props.row.personId)"
+                icon="mdi-delete"
+              >
+                <q-tooltip>ลบข้อมูล</q-tooltip>
+              </q-btn>
+            </q-td>
           </q-tr>
         </template>
       </d-table>
@@ -158,21 +146,15 @@
       </q-btn> -->
     </div>
   </div>
-
+  <!--********************************** เงินเดือน ********************************** -->
   <q-dialog v-model="modal" persistent>
-    <q-card style="width: 70vw; max-width: 70vw">
+    <q-card style="width: 50vw; max-width: 50vw">
       <q-form ref="myForm">
         <DialogHeader :tittle="titleName" :close="modalOpenClose" />
         <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-6 row">
-              <q-card flat bordered class="fit q-pa-sm">
-                <!-- style="height: 70vh" -->
-                <q-scroll-area visible> </q-scroll-area>
-              </q-card>
-            </div>
-            <div class="col-xs-12 col-sm-6">
+            <div class="col-xs-12">
               <div class="col-12 row q-py-sm items-center q-col-gutter-sm">
                 <div class="col-xs-6 col-sm-6 col-md-6">
                   <q-input
@@ -236,14 +218,86 @@
       </q-form>
     </q-card>
   </q-dialog>
+  <!--********************************** รายชื่อ ********************************** -->
+  <q-dialog v-model="modalAdd" persistent>
+    <q-card style="width: 50vw; max-width: 50vw">
+      <q-form ref="myFormAdd">
+        <DialogHeader tittle="รายชื่อในการออกคำสั่ง" :close="modalAddChange" />
+        <q-separator />
+        <q-card-section class="q-pa-sm bg-grey-1">
+          <d-table
+            :rows="rows"
+            :columns="columns"
+            :visible-columns="visibleColumns"
+            :filter="filter"
+            row-key="name"
+            selection="multiple"
+            v-model:selected="selected"
+          >
+            <template v-slot:header="props">
+              <q-tr :props="props">
+                <q-th auto-width>
+                  <q-checkbox
+                    keep-color
+                    color="primary"
+                    dense
+                    v-model="props.selected"
+                  />
+                </q-th>
+                <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>
+                  <q-checkbox
+                    keep-color
+                    color="primary"
+                    dense
+                    v-model="props.selected"
+                  />
+                </q-td>
+                <q-td
+                  v-for="col in props.cols"
+                  :key="col.name"
+                  :props="props"
+                  >{{ col.name == "no" ? props.rowIndex + 1 : col.value }}</q-td
+                >
+              </q-tr>
+            </template>
+          </d-table>
+        </q-card-section>
+        <q-separator />
+        <q-card-actions align="right">
+          <q-btn
+            dense
+            unelevated
+            label="บันทึก"
+            color="public"
+            @click="saveModalAdd"
+            class="q-px-md"
+            ><!-- icon="mdi-content-save-outline"
+        <q-tooltip>บันทึก</q-tooltip> -->
+          </q-btn>
+        </q-card-actions>
+      </q-form>
+    </q-card>
+  </q-dialog>
 </template>
 <script setup lang="ts">
-import { ref } from "vue";
+import { ref, onMounted } from "vue";
 import { useQuasar } from "quasar";
 import type { QInput } from "quasar";
 import { useCounterMixin } from "@/stores/mixin";
 import type { QTableProps, QForm } from "quasar";
+import { useRoute } from "vue-router";
 import DialogHeader from "@/modules/04_registry/components/DialogHeader.vue";
+import type { ResponseData } from "@/modules/05_placement/interface/response/Order";
+
+import http from "@/plugins/http";
+import config from "@/app.config";
 
 const props = defineProps({
   next: {
@@ -259,8 +313,9 @@ const props = defineProps({
 const next = () => props.next();
 const previous = () => props.previous();
 const mixin = useCounterMixin(); //เรียกฟังก์ชันกลาง
-const { dialogMessage, messageError, showLoader, hideLoader } = mixin;
+const { dialogMessage, messageError, showLoader, hideLoader, success } = mixin;
 
+const route = useRoute();
 const $q = useQuasar();
 
 const modalData = ref<any>({
@@ -269,19 +324,31 @@ const modalData = ref<any>({
   mouthSalaryAmount: 0,
 });
 const myForm = ref<QForm | null>(null);
+const myFormAdd = ref<QForm | null>(null);
 const modal = ref<boolean>(false);
+const modalAdd = ref<boolean>(false);
 const titleName = ref<string>("");
 const filterRef = ref<QInput>();
 const filter = ref<string>("");
-const visibleColumns = ref<String[]>(["no", "idcard", "name", "educate"]);
+const visibleColumns = ref<String[]>(["no", "idCard", "name", "education"]);
 const columns = ref<QTableProps["columns"]>([
-  { name: "no", align: "left", label: "ลำดับ", field: "no", sortable: true },
   {
-    name: "idcard",
+    name: "no",
+    align: "left",
+    label: "ลำดับ",
+    field: "no",
+    sortable: true,
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "idCard",
     align: "left",
     label: "เลขประจำตัวประชาชน",
-    field: "idcard",
+    field: "idCard",
     sortable: true,
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
   {
     name: "name",
@@ -289,94 +356,155 @@ const columns = ref<QTableProps["columns"]>([
     label: "ชื่อ-สกุล",
     field: "name",
     sortable: true,
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
   {
-    name: "educate",
+    name: "education",
     align: "left",
     label: "วุฒิการศึกษาในการออกคำสั่ง",
-    field: "educate",
+    field: "education",
     sortable: true,
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
 ]);
-
-const rows = ref<any>([
-  {
-    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 rows = ref<ResponseData[]>([]);
 const selected = ref([]);
 
-const upDown = (value: any, up: boolean = true) => {
+onMounted(async () => {
+  await conditionData();
+});
+
+const conditionData = async () => {
+  const id = route.params.orderid
+    ? route.params.orderid.toString()
+    : localStorage.getItem("orderId")
+    ? localStorage.getItem("orderId")
+    : null;
+  if (id !== null) {
+    await getData(id);
+  }
+};
+
+const getData = async (id: string) => {
+  showLoader();
+  await http
+    .get(config.API.personsOrder(id))
+    .then((res) => {
+      const data = res.data.result;
+      //   console.log(data);
+      let list: ResponseData[] = [];
+      data.map((r: ResponseData) => {
+        list.push({
+          education: r.education ?? "",
+          idCard: r.idCard ?? "",
+          name: r.name ?? "",
+          personId: r.personId ?? "",
+          selectStatus: r.selectStatus !== null ? r.selectStatus : false,
+          sequence: r.sequence !== null ? r.sequence : 0,
+        });
+      });
+      //   console.log("list", list);
+      rows.value = list;
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+};
+
+const saveSalary = async (id: string) => {
+  await http
+    .put(config.API.salaryOrder(id))
+    .then((res) => {
+      //   const data = res.data.result;
+      //   console.log(res);
+      success($q, "บันทึกข้อมูลสำเร็จ");
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+};
+
+const dialogDeleteData = async (id: string) => {
+  dialogMessage(
+    $q,
+    "ยืนยันการลบข้อมูล",
+    "ต้องการลบข้อมูลนี้ใช่หรือไม่?",
+    "mdi-help-circle-outline",
+    "ตกลง",
+    "red",
+    () => deleteData(id),
+    undefined
+  );
+};
+
+const deleteData = async (id: string) => {
+  await http
+    .delete(config.API.personsOrder(id))
+    .then((res) => {
+      //   const data = res.data.result;
+      //   console.log(res);
+      success($q, "ลบข้อมูลสำเร็จ");
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+};
+
+const swapUp = async (id: string) => {
+  // id = personalId
+  await http
+    .put(config.API.swapUpOrder(id))
+    .then((res) => {
+      //   const data = res.data.result;
+      //   console.log(res);
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(async () => {
+      await conditionData();
+      hideLoader();
+    });
+};
+
+const swapDown = async (id: string) => {
+  // id = personalId
+  await http
+    .put(config.API.swapDownOrder(id))
+    .then((res) => {
+      //   const data = res.data.result;
+      //   console.log(res);
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(async () => {
+      await conditionData();
+      hideLoader();
+    });
+};
+
+const upDown = async (value: any, up: boolean = true) => {
   const indexCurrent = value.rowIndex;
   if (up) {
-    rows.value[indexCurrent] = rows.value[indexCurrent - 1];
-    rows.value[indexCurrent - 1] = value.row;
+    await swapUp(value.row.personId);
+    // rows.value[indexCurrent] = rows.value[indexCurrent - 1];
+    // rows.value[indexCurrent - 1] = value.row;
   } else {
-    rows.value[indexCurrent] = rows.value[indexCurrent + 1];
-    rows.value[indexCurrent + 1] = value.row;
+    await swapDown(value.row.personId);
+    // rows.value[indexCurrent] = rows.value[indexCurrent + 1];
+    // rows.value[indexCurrent + 1] = value.row;
   }
 };
 
@@ -407,32 +535,51 @@ const modalOpenClose = () => {
   }
 };
 
+const modalAddChange = () => {
+  modalAdd.value = !modalAdd.value;
+};
+
+const saveModalAdd = () => {
+  if (myFormAdd.value !== null) {
+    myFormAdd.value.validate().then(async (result: boolean) => {
+      if (result) {
+        modalAddChange();
+      }
+    });
+  }
+};
+
 const click = (e: any) => {
   console.log(e);
   console.log(rows.value.length);
 };
 
 const save = () => {
-  if (selected.value.length > 0) {
-    next();
-  } else {
-    dialogMessage(
-      $q,
-      "ข้อความแจ้งเตือน",
-      "กรุณาเลือกรายชื่อ",
-      "warning",
-      undefined,
-      "orange",
-      undefined,
-      undefined,
-      true
-    );
-  }
+  //   if (selected.value.length > 0) {
+  //     next();
+  //   } else {
+  //     dialogMessage(
+  //       $q,
+  //       "ข้อความแจ้งเตือน",
+  //       "กรุณาเลือกรายชื่อ",
+  //       "warning",
+  //       undefined,
+  //       "orange",
+  //       undefined,
+  //       undefined,
+  //       true
+  //     );
+  //   }
+  next();
 };
 
 const selectData = (row: any) => {};
 
-const refresh = () => {};
+const refresh = async () => {
+  await conditionData();
+  modalAddChange();
+  selected.value = [];
+};
 
 const resetFilter = () => {
   // reset ค่าที่ค้นหาเมื่อกดปุ่ม X ในกล่องค้นหา
diff --git a/src/modules/05_placement/components/OrderPlacement/step/step03.vue b/src/modules/05_placement/components/OrderPlacement/step/step03.vue
index 8d58d929e..c71389d9e 100644
--- a/src/modules/05_placement/components/OrderPlacement/step/step03.vue
+++ b/src/modules/05_placement/components/OrderPlacement/step/step03.vue
@@ -46,82 +46,85 @@
           />
         </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>
+      <q-form ref="myForm">
+        <d-table
+          :rows="rows"
+          :columns="columns"
+          :visible-columns="visibleColumns"
+          :filter="filter"
+          row-key="idCard"
+        >
+          <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="unit" :props="props">
+                {{ props.row.unit }}
+              </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"
+                  @update:model-value="() => updateData(props.row)"
+                >
+                  <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.personalId)"
+                  icon="mdi-delete"
+                >
+                  <q-tooltip>ลบข้อมูล</q-tooltip>
+                </q-btn>
+              </q-td>
+            </q-tr>
+          </template>
+        </d-table>
+      </q-form>
     </div>
     <q-separator />
     <div class="flex justify-end q-pa-sm q-gutter-sm">
@@ -140,7 +143,7 @@
         unelevated
         label="บันทึก"
         color="public"
-        @click="next"
+        @click="saveDataCopyOrder"
         class="q-px-md"
         ><!-- icon="mdi-content-save-outline"
         <q-tooltip>บันทึก</q-tooltip> -->
@@ -153,101 +156,100 @@
 
   <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>
+      <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>
+                <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>
-              <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>
+            </div>
+            <d-table
+              :rows="rowsModal"
+              :columns="columnsModal"
+              :visible-columns="visibleColumnsModal"
+              :filter="filterModal"
+              row-key="profileId"
+              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
+              <template v-slot:body-selection="scope">
+                <!-- <q-checkbox
                     keep-color
                     color="primary"
                     dense
@@ -261,32 +263,32 @@
                       }
                     "
                   /> -->
-                  <q-checkbox
-                    keep-color
-                    color="primary"
-                    dense
-                    v-model="scope.selected"
-                  />
-                </template>
+                <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>
+              <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 v-else>
+                    {{ props.value }}
+                  </div>
+                </q-td>
+              </template>
+            </d-table>
           </div>
-        </q-card-section>
-        <q-separator />
-        <q-card-actions align="right">
-          <q-btn
+        </div>
+      </q-card-section>
+      <q-separator />
+      <q-card-actions align="right">
+        <!-- <q-btn
             flat
             round
             color="public"
@@ -294,9 +296,16 @@
             @click="clickClose"
           >
             <q-tooltip>บันทึก</q-tooltip>
-          </q-btn>
-        </q-card-actions>
-      </q-form>
+          </q-btn> -->
+        <q-btn
+          dense
+          unelevated
+          label="บันทึก"
+          color="public"
+          @click="saveData"
+          class="q-px-md"
+        />
+      </q-card-actions>
     </q-card>
   </q-dialog>
 </template>
@@ -310,6 +319,13 @@ 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";
+import type {
+  ResponseOrganiz,
+  ResponseCopyOrder,
+  DataCopyOrder,
+} from "@/modules/05_placement/interface/response/Order";
+import type { RequestCopyOrder } from "@/modules/05_placement/interface/request/Order";
+import { useRoute } from "vue-router";
 
 const props = defineProps({
   next: {
@@ -327,142 +343,42 @@ const previous = () => props.previous();
 
 const $q = useQuasar();
 const mixin = useCounterMixin(); //เรียกฟังก์ชันกลาง
-const { dialogMessage, messageError, showLoader, hideLoader } = mixin;
+const { dialogMessage, messageError, showLoader, hideLoader, success } = mixin;
 
-const myForm = ref<QForm>();
+const route = useRoute();
+
+const myForm = ref<QForm | null>(null);
 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 selectedModal = ref<ResponseOrganiz[]>([]);
+
 const filterModal = ref<string>("");
-const visibleColumnsModal = ref<String[]>(["no", "idcard", "name"]);
+const visibleColumnsModal = ref<String[]>(["no", "idCard", "name", "position"]);
 const columnsModal = ref<QTableProps["columns"]>([
-  { name: "no", align: "left", label: "ลำดับ", field: "no", sortable: true },
   {
-    name: "idcard",
+    name: "no",
+    align: "left",
+    label: "ลำดับ",
+    field: "no",
+    sortable: true,
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    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",
+    field: "idCard",
     sortable: true,
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
   {
     name: "name",
@@ -470,6 +386,8 @@ const columns = ref<QTableProps["columns"]>([
     label: "ชื่อ-สกุล",
     field: "name",
     sortable: true,
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
   {
     name: "position",
@@ -477,13 +395,63 @@ const columns = ref<QTableProps["columns"]>([
     label: "ตำแหน่ง",
     field: "position",
     sortable: true,
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+]);
+
+const rowsModal = ref<ResponseOrganiz[]>([]);
+
+const optionSelect = ref<any>([
+  { id: 1, name: "อีเมล" },
+  { id: 2, name: "กล่องข้อความ" },
+]);
+
+const visibleColumns = ref<String[]>([
+  "no",
+  "idCard",
+  "name",
+  "position",
+  "unit",
+  "send",
+]);
+const columns = ref<QTableProps["columns"]>([
+  { name: "no", align: "left", label: "ลำดับ", field: "no", sortable: true },
+  {
+    name: "idCard",
+    align: "left",
+    label: "เลขประจำตัวประชาชน",
+    field: "idCard",
+    sortable: true,
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
   {
-    name: "agency",
+    name: "name",
+    align: "left",
+    label: "ชื่อ-สกุล",
+    field: "name",
+    sortable: true,
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "position",
+    align: "left",
+    label: "ตำแหน่ง",
+    field: "position",
+    sortable: true,
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "unit",
     align: "left",
     label: "หน่วยงาน",
-    field: "agency",
+    field: "unit",
     sortable: true,
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
   {
     name: "send",
@@ -491,120 +459,129 @@ const columns = ref<QTableProps["columns"]>([
     label: "ช่องทางการส่งสำเนา",
     field: "send",
     sortable: true,
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
 ]);
 
-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: [],
-  },
-]);
+const rows = ref<DataCopyOrder[]>([]);
+
+const editRows = ref<DataCopyOrder[]>([]);
 
 onMounted(async () => {
-  await nodeTree();
+  await conditionId();
 });
 
-const paginationLabel = (start: number, end: number, total: number) => {
-  //   if (props.paging == true)
-  //     return " " + start + " ใน " + end + " จากจำนวน " + total + " รายการ";
-  //   else
-  return start + "-" + end + " ใน " + total;
+const listModal = async (id: string) => {
+  showLoader();
+  await http
+    .get(config.API.copyOrderPersonsId(id))
+    .then((res) => {
+      const data = res.data.result;
+      let list: ResponseOrganiz[] = [];
+      data.map((r: ResponseOrganiz) => {
+        list.push({
+          firstName: r.firstName ?? "",
+          idCard: r.idCard ?? "",
+          lastName: r.lastName ?? "",
+          name: r.name ?? "",
+          position: r.position ?? "",
+          prefixId: r.prefixId ?? "",
+          profileId: r.profileId ?? "",
+          unit: r.unit ?? "",
+        });
+      });
+      rowsModal.value = list;
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(async () => {
+      hideLoader();
+    });
+};
+
+const conditionId = async () => {
+  const id = route.params.orderid
+    ? route.params.orderid.toString()
+    : localStorage.getItem("orderId")
+    ? localStorage.getItem("orderId")
+    : null;
+  if (id !== null) {
+    await getData(id);
+  }
+};
+
+const getData = async (id: string) => {
+  showLoader();
+  await http
+    .get(config.API.copyOrderId(id))
+    .then((res) => {
+      const data = res.data.result;
+      //   console.log(data);
+      let list: DataCopyOrder[] = [];
+      data.map((r: ResponseCopyOrder) => {
+        let selectCopyOrder = [];
+        if (r.emailChannel) {
+          selectCopyOrder.push(1);
+        }
+        if (r.inboxChannel) {
+          selectCopyOrder.push(2);
+        }
+
+        list.push({
+          personalId: r.personalId ?? "",
+          name: r.name ?? "",
+          idCard: r.idCard ?? "",
+          position: r.position ?? "",
+          unit: r.unit ?? "",
+          send: "",
+          mutiselect: selectCopyOrder,
+        });
+      });
+      if (editRows.value.length > 0) {
+        list.map((r: DataCopyOrder) => {
+          editRows.value.map((e: DataCopyOrder) => {
+            if (r.personalId == e.personalId) {
+              r.mutiselect = e.mutiselect;
+            }
+          });
+        });
+      }
+      rows.value = list;
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(async () => {
+      hideLoader();
+    });
+};
+
+const saveData = async () => {
+  //   console.log("select", selectedModal.value);
+  const id = route.params.orderid
+    ? route.params.orderid.toString()
+    : localStorage.getItem("orderId")
+    ? localStorage.getItem("orderId")
+    : null;
+  if (id !== null) {
+    showLoader();
+    await http
+      .post(config.API.copyOrderPersonsId(id), selectedModal.value)
+      .then((res) => {
+        //   const data = res.data.result;
+        console.log(res);
+      })
+      .catch((e) => {
+        messageError($q, e);
+      })
+      .finally(async () => {
+        await conditionId();
+        clickClose();
+        // hideLoader();
+      });
+  }
 };
 
 const resetFilter = () => {
@@ -639,8 +616,15 @@ const clickClose = async () => {
   //   }
 };
 
-const clickAdd = () => {
+const clickAdd = async () => {
+  await nodeTree();
+  selected.value = "";
+  rowsModal.value = [];
+  selectedModal.value = [];
   modal.value = true;
+  if (myForm.value !== null) {
+    myForm.value.reset();
+  }
 };
 
 const clickDelete = (id: string) => {
@@ -676,9 +660,63 @@ const nodeTree = async () => {
 };
 
 const onSelected = async (id: string) => {
-  //   await fetchPositionNumber(id);
+  await listModal(id);
 };
 
-const deleteData = async (id: string) => {};
+const deleteData = async (id: string) => {
+  await http
+    .delete(config.API.copyOrderId(id))
+    .then((res) => {
+      //   const data = res.data.result;
+      //   console.log(res);
+      success($q, "ลบข้อมูลสำเร็จ");
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(async () => {
+      //   hideLoader();
+      await conditionId();
+    });
+};
+
+const saveDataCopyOrder = async () => {
+  if (myForm.value !== null) {
+    myForm.value.validate().then(async (result: boolean) => {
+      if (result) {
+        await fetchSaveCopyOrder();
+      }
+    });
+  }
+};
+
+const fetchSaveCopyOrder = async () => {
+  let list: RequestCopyOrder[] = [];
+  rows.value.map((r: DataCopyOrder) => {
+    list.push({
+      personalId: r.personalId,
+      emailChannel: r.mutiselect.includes(1),
+      inboxChannel: r.mutiselect.includes(2),
+    });
+  });
+
+  showLoader();
+  await http
+    .put(config.API.copyOrder, list)
+    .then((res: any) => {
+      success($q, "บันทึกข้อมูลสำเร็จ");
+      next();
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+};
+
+const updateData = (row: DataCopyOrder) => {
+  editRows.value.push(row);
+};
 </script>
 <style lang="scss"></style>
diff --git a/src/modules/05_placement/interface/request/Order.ts b/src/modules/05_placement/interface/request/Order.ts
new file mode 100644
index 000000000..d7e306c25
--- /dev/null
+++ b/src/modules/05_placement/interface/request/Order.ts
@@ -0,0 +1,7 @@
+interface RequestCopyOrder {
+  personalId: string;
+  emailChannel: boolean;
+  inboxChannel: boolean;
+}
+
+export type { RequestCopyOrder };
diff --git a/src/modules/05_placement/interface/response/Order.ts b/src/modules/05_placement/interface/response/Order.ts
new file mode 100644
index 000000000..6dc958ff1
--- /dev/null
+++ b/src/modules/05_placement/interface/response/Order.ts
@@ -0,0 +1,43 @@
+interface ResponseData {
+  education: string;
+  idCard: string;
+  name: string;
+  personId: string;
+  selectStatus: boolean;
+  sequence: number;
+}
+
+interface ResponseOrganiz {
+  firstName: string;
+  idCard: string;
+  lastName: string;
+  name: string;
+  position: string;
+  prefixId: string;
+  profileId: string;
+  unit: string;
+}
+
+interface ResponseCopyOrder {
+  emailChannel: boolean;
+  idCard: string;
+  inboxChannel: boolean;
+  name: string;
+  personalId: string;
+  position: string;
+  selectStatus: boolean;
+  sequence: number;
+  unit: string;
+}
+
+interface DataCopyOrder {
+  personalId: string;
+  name: string;
+  idCard: string;
+  position: string;
+  unit: string;
+  send: string;
+  mutiselect: number[];
+}
+
+export type { ResponseData, ResponseOrganiz, ResponseCopyOrder, DataCopyOrder };
diff --git a/src/modules/05_placement/store.ts b/src/modules/05_placement/store.ts
index 0fca902c5..0ebbda72f 100644
--- a/src/modules/05_placement/store.ts
+++ b/src/modules/05_placement/store.ts
@@ -229,8 +229,6 @@ export const useOrderPlacementDataStore = defineStore("placementOrder", () => {
   ) => {
     DataMainUpdateOrder.value = [];
 
-
-
     if (filter_1 === "" && filter_2 === "" && filterYear === 0) {
       DataMainUpdateOrder.value = DataMainOrigOrder.value;
     } else if (filter_1 !== "" && filter_2 === "" && filterYear === 0) {
@@ -269,7 +267,11 @@ export const useOrderPlacementDataStore = defineStore("placementOrder", () => {
           item.OrderStatus === filter_2 &&
           item.fiscalYear === filterYear
       );
-    } else if (filter_1 == "ทั้งหมด" && filter_2 == "ทั้งหมด" && filterYear !== null) {
+    } else if (
+      filter_1 == "ทั้งหมด" &&
+      filter_2 == "ทั้งหมด" &&
+      filterYear !== null
+    ) {
       DataMainUpdateOrder.value = DataMainOrigOrder.value;
     }
   };
@@ -294,8 +296,18 @@ export const useProbationDataStore = defineStore("probationDataStore", () => {
     "blue-9",
     "blue-10",
   ]);
+  const orderId = ref<string>("");
+
+  const stepOrder = ref<number>(2);
+
+  const setOrderId = (val: string) => (orderId.value = val);
+  const setStepOrder = (val: number) => (stepOrder.value = val);
 
   return {
     ratingColors,
+    orderId,
+    stepOrder,
+    setOrderId,
+    setStepOrder,
   };
 });

From eaec5470c46d3632ef37044b17249b032235d696 Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Tue, 8 Aug 2023 09:09:44 +0700
Subject: [PATCH 051/113] =?UTF-8?q?=E0=B9=80=E0=B8=9E=E0=B8=B4=E0=B9=88?=
 =?UTF-8?q?=E0=B8=A1=20disabled=20button=20=E0=B8=95=E0=B8=81=E0=B8=A5?=
 =?UTF-8?q?=E0=B8=87=20=E0=B8=82=E0=B8=AD=E0=B8=87=E0=B8=81=E0=B8=B2?=
 =?UTF-8?q?=E0=B8=A3=E0=B9=80=E0=B8=9E=E0=B8=B4=E0=B9=88=E0=B8=A1=E0=B8=9B?=
 =?UTF-8?q?=E0=B8=A3=E0=B8=B0=E0=B8=81=E0=B8=B2=E0=B8=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/modules/06_retirement/views/Main.vue | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/src/modules/06_retirement/views/Main.vue b/src/modules/06_retirement/views/Main.vue
index 359536720..1edcb1b45 100644
--- a/src/modules/06_retirement/views/Main.vue
+++ b/src/modules/06_retirement/views/Main.vue
@@ -263,7 +263,12 @@
 
       <q-card-actions align="right" class="bg-white text-teal">
         <q-btn flat label="ยกเลิก" color="red" v-close-popup />
-        <q-btn flat label="ตกลง" @click="clickSelect(action)" />
+        <q-btn
+          flat
+          label="ตกลง"
+          @click="clickSelect(action)"
+          :disable="radio === '' || (action === '' && radio !== 'ADD')"
+        />
       </q-card-actions>
     </q-card>
   </q-dialog>

From 85632ec16cdcef1f883415ea507855b65740c413 Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Tue, 8 Aug 2023 09:28:24 +0700
Subject: [PATCH 052/113] =?UTF-8?q?filter=20=E0=B8=A3=E0=B8=B2=E0=B8=A2?=
 =?UTF-8?q?=E0=B8=8A=E0=B8=B7=E0=B9=88=E0=B8=AD=E0=B8=AD=E0=B8=AD=E0=B8=81?=
 =?UTF-8?q?=E0=B8=84=E0=B8=B3=E0=B8=AA=E0=B8=B1=E0=B9=88=E0=B8=87?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/Receive/receiveMain.vue        | 37 +++++++++++++------
 1 file changed, 26 insertions(+), 11 deletions(-)

diff --git a/src/modules/05_placement/components/Receive/receiveMain.vue b/src/modules/05_placement/components/Receive/receiveMain.vue
index 816fd8e71..98c75f741 100644
--- a/src/modules/05_placement/components/Receive/receiveMain.vue
+++ b/src/modules/05_placement/components/Receive/receiveMain.vue
@@ -72,25 +72,27 @@ const fecthlistRecevice = async () => {
     .then((res) => {
       let response = res.data.result;
       listRecevice.value = response;
-      console.log(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,
+          e.organizationName +
+          " " +
+          e.organizationShortName +
+          " " +
+          e.positionNumber +
+          " " +
+          e.positionPath,
+        orgName: e.organizationName,
+        organizationShortName: e.organizationShortName,
         positionNumber: e.positionNumber,
         positionPath: e.positionPath,
         birthday: date2Thai(e.dateOfBirth),
       }));
+      // console.log(rows.value);
+      rows2.value = rows.value.filter((e: any) => e.orgName !== null);
     })
     .catch((e) => {
       console.log(typeof e);
@@ -116,6 +118,19 @@ const rows = ref<any>([
   //   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",
@@ -219,7 +234,7 @@ const openModalTree = (id: string) => {
   personalId.value = id;
   console.log(personalId.value);
 
-  personal.value = listRecevice.value.filter((e) => e.id === id);
+  personal.value = listRecevice.value.filter((e: any) => e.id === id);
   modalTree.value = true;
 };
 

From ddfb5a05d507c5429172a034d89c345b0865e7b2 Mon Sep 17 00:00:00 2001
From: waruneeta <warunee.auy@gmail.com>
Date: Tue, 8 Aug 2023 11:15:34 +0700
Subject: [PATCH 053/113] fix finally

---
 tsconfig.app.json | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/tsconfig.app.json b/tsconfig.app.json
index cdbea1d76..a4299392b 100644
--- a/tsconfig.app.json
+++ b/tsconfig.app.json
@@ -7,6 +7,7 @@
     "baseUrl": ".",
     "paths": {
       "@/*": ["./src/*"]
-    }
+    },
+    "lib": ["dom", "es2015", "es2018", "es2018.promise"]
   }
 }

From dc2457d9ed458bd43c7da884df828acab63634e7 Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Tue, 8 Aug 2023 11:25:44 +0700
Subject: [PATCH 054/113] api put/pver

---
 src/api/05_placement/api.placement.ts         |  3 +-
 .../OrderPlacement/detailOrderPlacement.vue   | 36 ++++++++++++++++---
 2 files changed, 34 insertions(+), 5 deletions(-)

diff --git a/src/api/05_placement/api.placement.ts b/src/api/05_placement/api.placement.ts
index 8a3f5e8ed..fd13782a1 100644
--- a/src/api/05_placement/api.placement.ts
+++ b/src/api/05_placement/api.placement.ts
@@ -60,6 +60,8 @@ export default {
   detailOrder: (orderId: string) => `${order}/order/detail/${orderId}`,
   deleteOrder: (orderId: string) => `${order}/order/${orderId}`,
   typeOrder: () => `${order}/order/order-type`,
+  nextStep: (orderId: string) => `${order}/order/next/${orderId}`,
+  prevStep: (orderId: string) => `${order}/order/prev/${orderId}`,
 
   createOrder: () => `${order}/order/detail`,
 
@@ -93,7 +95,6 @@ export default {
 
   attachmentOrderId: (orderId: string) =>
     `${order}/order/attachment/order-file/${orderId}`,
-
   attachmentFileId: (orderId: string) =>
     `${order}/order/attachment/file/${orderId}`,
 
diff --git a/src/modules/05_placement/components/OrderPlacement/detailOrderPlacement.vue b/src/modules/05_placement/components/OrderPlacement/detailOrderPlacement.vue
index 8b68a05df..6188a047a 100644
--- a/src/modules/05_placement/components/OrderPlacement/detailOrderPlacement.vue
+++ b/src/modules/05_placement/components/OrderPlacement/detailOrderPlacement.vue
@@ -65,7 +65,12 @@ import { useRouter } from "vue-router";
 import { ref, defineAsyncComponent, onMounted, onUnmounted } from "vue";
 import type { QStepper } from "quasar";
 import { useProbationDataStore } from "@/modules/05_placement/store";
+import { useRoute } from "vue-router";
+import http from "@/plugins/http";
+import config from "@/app.config";
+const route = useRoute();
 
+const orderId_params = route.params.orderid;
 const probationData = useProbationDataStore();
 const { stepOrder, setStepOrder } = probationData;
 
@@ -89,19 +94,38 @@ const step04 = defineAsyncComponent(
 const router = useRouter();
 const step = ref<number>(1);
 const stepper = ref<QStepper>();
+const orderId = ref<string>("");
 
 onUnmounted(() => {
   destroyLocalStorage();
 });
-
-const nextStep = () => {
+const nextStep = async () => {
   stepper.value!.next();
   localStorage.setItem("currentStep", step.value.toString());
+  if (orderId.value) {
+    await http
+      .put(config.API.nextStep(orderId.value))
+      .then((res) => {
+        console.log(res);
+      })
+      .catch((e) => {
+        console.log(e);
+      });
+  }
 };
-
-const previousStep = () => {
+const previousStep = async () => {
   stepper.value!.previous();
   localStorage.setItem("currentStep", step.value.toString());
+  if (orderId.value) {
+    await http
+      .put(config.API.prevStep(orderId.value))
+      .then((res) => {
+        console.log(res);
+      })
+      .catch((e) => {
+        console.log(e);
+      });
+  }
 };
 const destroyLocalStorage = () => {
   localStorage.clear();
@@ -111,6 +135,10 @@ onMounted(() => {
   if (currentStep) {
     step.value = Number(currentStep);
   }
+  if (orderId_params !== undefined) {
+    orderId.value = orderId_params.toString();
+    console.log(orderId.value);
+  }
 });
 </script>
 <style>

From 04f79de4c17061f8ca4535dcf20a509685eb58d0 Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Tue, 8 Aug 2023 14:00:22 +0700
Subject: [PATCH 055/113] api Order step 4

---
 .../components/OrderPlacement/step/step04.vue | 108 ++++++++++++++----
 .../components/Receive/receiveMain.vue        |   1 +
 2 files changed, 88 insertions(+), 21 deletions(-)

diff --git a/src/modules/05_placement/components/OrderPlacement/step/step04.vue b/src/modules/05_placement/components/OrderPlacement/step/step04.vue
index e35338733..969e2d574 100644
--- a/src/modules/05_placement/components/OrderPlacement/step/step04.vue
+++ b/src/modules/05_placement/components/OrderPlacement/step/step04.vue
@@ -286,14 +286,14 @@
                   unelevated
                   label="ออกคำสั่ง"
                   :color="validateForm() ? 'public' : 'grey'"
-                  :disable="!validateForm()"
+                  :disable="statusOrder == 'N'"
                 />
                 <q-btn
                   class="text-dark"
                   unelevated
                   label="ส่งไปลงนาม"
                   color="grey"
-                  disable
+                  :disable="statusOrder == 'N'"
                 />
               </div>
             </div>
@@ -422,16 +422,28 @@ 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";
+import { useQuasar } from "quasar";
 import { useRoute } from "vue-router";
 import http from "@/plugins/http";
 import config from "@/app.config";
 
 const mixin = useCounterMixin();
-const { date2Thai } = mixin;
+const { date2Thai, messageError, showLoader, hideLoader } = mixin;
 const route = useRoute();
+const $q = useQuasar();
 
 const orderId_params = route.params.orderid;
 const dialog = ref<boolean>(false);
+const splitterModel = ref<number>(70);
+const tab = ref<string>("main");
+
+const order = ref<string>("");
+const years = ref<number>(new Date().getDate());
+const date = ref<Date>(new Date());
+const fileOrder = ref<any>(null);
+const fileTailer = ref<any>(null);
+
+const statusOrder = ref<string>();
 
 // onUnmounted(() => {
 //   window.removeEventListener("resize", (e: any) => {
@@ -440,13 +452,12 @@ const dialog = ref<boolean>(false);
 // });
 const orderId = ref<string>("");
 onMounted(async () => {
-  console.log(orderId_params);
   if (orderId_params !== undefined) {
-    orderId.value == orderId_params.toString();
+    orderId.value = orderId_params.toString();
+    fetchAttachment(orderId.value);
+    fecthstatusOrder(orderId.value);
   }
 
-  fetchAttachment(orderId.value);
-
   //   window.addEventListener("resize", (e: any) => {
   //     myEventHandler(e);
   //   });
@@ -460,11 +471,34 @@ onMounted(async () => {
 });
 
 const fetchAttachment = async (orderId: string) => {
-  console.log(123);
+  showLoader();
   await http
-    .get(config.API.attachmentOrder("08db94be-f7c6-43e2-83eb-3c5cef3a91c7"))
+    .get(config.API.attachmentOrder(orderId))
     .then((res) => {
-      console.log(res);
+      let response = res.data.result;
+      console.log(response);
+      order.value = response.orderNo;
+      years.value = Number(response.orderYear);
+      if (response.date !== undefined) {
+        date.value = response.date;
+      }
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+};
+const fecthstatusOrder = async (orderId: string) => {
+  await http
+    .get(config.API.orderReady(orderId))
+    .then((res) => {
+      let status = res.data.result;
+      statusOrder.value = status.result;
+    })
+    .catch((e) => {
+      console.log(e);
     });
 };
 
@@ -496,15 +530,6 @@ const props = defineProps({
 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) {
@@ -513,14 +538,57 @@ const onchangePage = (val: any) => {
 };
 
 const save = () => {
+  // putOrderData();
   if (myForm.value !== null) {
     myForm.value!.validate().then((success: Boolean) => {
       if (success) {
         // yay, models are correct
+        $q.dialog({
+          title: "ยืนยันการบันทึกข้อมูล",
+          message: "ต้องการบันทึกข้อมูลนี้ใช่หรือไม่?",
+          cancel: {
+            flat: true,
+            color: "negative",
+          },
+          persistent: true,
+        })
+          .onOk(async () => {
+            await putOrderData();
+            await postfileOrder();
+            await postfileTailer();
+          })
+          .onCancel(() => {})
+          .onDismiss(() => {});
       }
     });
   }
 };
+const putOrderData = async () => {
+  const orderData = {
+    orderNo: order.value,
+    orderYear: years.value.toString(),
+    signDate: date.value,
+  };
+  await http
+    .put(config.API.attachmentOrder(orderId.value), orderData)
+    .then((res) => {
+      console.log(res);
+    })
+    .catch((e) => {
+      console.log(e);
+    });
+};
+
+const postfileOrder = async () => {
+  const formData = new FormData();
+  formData.append("File", fileOrder.value);
+  await http.post(config.API.attachmentOrderId(orderId.value), formData);
+};
+const postfileTailer = async () => {
+  const formData = new FormData();
+  formData.append("File", fileTailer.value);
+  await http.post(config.API.attachmentOrderId(orderId.value), formData);
+};
 
 const validateForm = () => {
   return (
@@ -529,14 +597,12 @@ const validateForm = () => {
     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;
diff --git a/src/modules/05_placement/components/Receive/receiveMain.vue b/src/modules/05_placement/components/Receive/receiveMain.vue
index 98c75f741..8a16fda59 100644
--- a/src/modules/05_placement/components/Receive/receiveMain.vue
+++ b/src/modules/05_placement/components/Receive/receiveMain.vue
@@ -102,6 +102,7 @@ const fecthlistRecevice = async () => {
     });
 };
 
+
 // const nextPage = (id:string) => {
 //   router.push("/retirement/resign/"+id);
 // };

From d90e023042d6202e9c16d4d674b29bf728db33b4 Mon Sep 17 00:00:00 2001
From: AnandaTon <125332905+anandaAiemvong@users.noreply.github.com>
Date: Tue, 8 Aug 2023 14:58:39 +0700
Subject: [PATCH 056/113] =?UTF-8?q?Api=20=E0=B8=A3=E0=B8=B2=E0=B8=A2?=
 =?UTF-8?q?=E0=B8=81=E0=B8=B2=E0=B8=A3=E0=B9=80=E0=B8=84=E0=B8=A3=E0=B8=B7?=
 =?UTF-8?q?=E0=B9=88=E0=B8=AD=E0=B8=87=E0=B8=A3=E0=B8=B2=E0=B8=8A?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/07_insignia/api.insignia.ts           |   1 -
 .../components/1_Proposals/addProposals.vue   | 140 ++++++++++++------
 .../components/1_Proposals/listProposals.vue  |  30 +++-
 src/modules/07_insignia/router.ts             |  10 ++
 4 files changed, 129 insertions(+), 52 deletions(-)

diff --git a/src/api/07_insignia/api.insignia.ts b/src/api/07_insignia/api.insignia.ts
index f17086d3f..3d233fec5 100644
--- a/src/api/07_insignia/api.insignia.ts
+++ b/src/api/07_insignia/api.insignia.ts
@@ -8,5 +8,4 @@ export default {
   listRoundInsignia: (type: string) => `${insignia}/period/${type}`,
   editRoundInsignia: (id: string) => `${insignia}/period/${id}`,
   RoundInsignia: (id: string) => `${insignia}/period/${id}`,
-  docRoundInsignia: (id: string) => `${insignia}/period/${id}`,
 };
diff --git a/src/modules/07_insignia/components/1_Proposals/addProposals.vue b/src/modules/07_insignia/components/1_Proposals/addProposals.vue
index ba6c3ec5c..8d90236b4 100644
--- a/src/modules/07_insignia/components/1_Proposals/addProposals.vue
+++ b/src/modules/07_insignia/components/1_Proposals/addProposals.vue
@@ -9,9 +9,13 @@
         flat
         color="primary"
         class="q-mr-sm"
-        @click="router.go(-1)"
+        @click="clickBack"
       />
-      <div>เพิ่มรอบการเสนอขอพระราชทานเครื่องราชอิสริยาภรณ์</div>
+      {{
+        edit
+          ? "รอบการเสนอขอพระราชทานเครื่องราชอิสริยาภรณ์"
+          : "เพิ่มรอบการเสนอขอพระราชทานเครื่องราชอิสริยาภรณ์"
+      }}
     </div>
     <q-form ref="myForm">
       <div class="col-12">
@@ -27,13 +31,40 @@
                   v-model="roundInsig"
                   label="รอบการเสนอขอพระราชทานเครื่องราชฯ"
                 />
-                <q-input
+                <datepicker
+                  menu-class-name="modalfix"
+                  v-model="yearly"
                   class="col-2"
-                  dense
-                  outlined
-                  v-model="year"
-                  label="ปีที่เสนอ"
-                />
+                  :locale="'th'"
+                  autoApply
+                  year-picker
+                  :enableTimePicker="false"
+                  @update:modelValue="updateYear"
+                >
+                  <template #year="{ year }">{{ year + 543 }}</template>
+                  <template #year-overlay-value="{ value }">{{
+                    parseInt(value + 543)
+                  }}</template>
+                  <template #trigger>
+                    <q-input
+                      dense
+                      lazy-rules
+                      outlined
+                      :model-value="yearly + 543"
+                      :rules="[(val) => !!val || `${'กรุณาเลือกปีที่เสนอ'}`]"
+                      :label="`${'ปีที่เสนอ'}`"
+                    >
+                      <template v-slot:prepend>
+                        <q-icon
+                          name="event"
+                          class="cursor-pointer"
+                          style="color: var(--q-primary)"
+                        >
+                        </q-icon>
+                      </template>
+                    </q-input>
+                  </template>
+                </datepicker>
                 <datepicker
                   menu-class-name="modalfix"
                   v-model="dateStart"
@@ -54,7 +85,7 @@
                     <q-input
                       outlined
                       dense
-                      class="col-xs-12 col-sm-5"
+                      class="full-width datepicker"
                       :model-value="
                         dateStart != null ? date2Thai(dateStart) : null
                       "
@@ -160,7 +191,7 @@
 import type { QTableProps } from "quasar";
 import { ref, onMounted } from "vue";
 import { useQuasar, QForm } from "quasar";
-import { useRouter } from "vue-router";
+import { useRouter, useRoute } from "vue-router";
 import { useCounterMixin } from "@/stores/mixin";
 import http from "@/plugins/http";
 import config from "@/app.config";
@@ -169,45 +200,49 @@ const mixin = useCounterMixin();
 const { date2Thai, success, dateToISO, messageError, showLoader, hideLoader } =
   mixin;
 const router = useRouter();
+const route = useRoute();
 const $q = useQuasar();
-const id = ref<string>("");
+const id = ref<string>(route.params.id as string);
 const myForm = ref<QForm | null>(null); //form data input
 const edit = ref<boolean>(false);
-const dateStart = ref<any>(new Date());
-const dateEnd = ref<any>(new Date());
-const files = ref<any[]>([]);
+const dateStart = ref<Date>(new Date());
+const dateEnd = ref<Date>(new Date());
+const yearly = ref<number>(new Date().getFullYear());
+const files = ref<File[]>([]);
 const fileDocDataUpload = ref<File[]>([]);
 const roundInsig = ref<string>("");
-const yearOffer = ref<number>(0);
-const datelast = ref<number>(0);
+const datelast = ref<number>(1);
 
 onMounted(async () => {
   await fetchData();
 });
 
 const fetchData = async () => {
-  showLoader();
-  await http
-    .get(config.API.getRoundInsignia("insignia"))
-    .then((res) => {
-      const data = res.data.result.periods;
-      const files = res.data.result.files;
+  if (route.params.id) {
+    edit.value = true;
+    showLoader();
+    console.log(id.value);
 
-      id.value = data.id;
-      roundInsig.value = data.period_name;
-      yearOffer.value = data.year;
-      datelast.value = data.amount;
-      dateStart.value = data.startDate;
-      dateEnd.value = data.endDate;
-
-      files.value = files;
-    })
-    .catch((e) => {
-      messageError($q, e);
-    })
-    .finally(() => {
-      hideLoader();
-    });
+    await http
+      .get(config.API.getRoundInsignia(id.value))
+      .then((res) => {
+        const data = res.data.result;
+        //   const files = res.data.result.files;
+        id.value = data.period_id;
+        roundInsig.value = data.period_name;
+        yearly.value = data.period_year;
+        datelast.value = data.period_amount;
+        dateStart.value = new Date(data.period_start);
+        dateEnd.value = new Date(data.period_end);
+        files.value = data.period_doc;
+      })
+      .catch((e) => {
+        messageError($q, e);
+      })
+      .finally(() => {
+        hideLoader();
+      });
+  }
 };
 
 const routeName = router.currentRoute.value.name;
@@ -218,6 +253,10 @@ const fileUploadDoc = async (files: any) => {
   });
 };
 
+const updateYear = async (e: number) => {
+  yearly.value = e;
+};
+
 const uploadDocData = async () => {
   const formData = new FormData();
   if (fileDocDataUpload.value.length > 0) {
@@ -226,7 +265,7 @@ const uploadDocData = async () => {
     });
     showLoader();
     await http
-      .put(config.API.docRoundInsignia(id.value), formData)
+      .put(config.API.RoundInsignia(id.value), formData)
       .then((res) => {})
       .catch((e) => {
         messageError($q, e);
@@ -243,6 +282,18 @@ const uploadDocData = async () => {
 };
 
 const editData = async (id: string) => {
+  const formData = new FormData();
+  formData.append("Name", roundInsig.value);
+  formData.append("year", parseInt(yearly.value).toString());
+  formData.append("amount", datelast.value.toString());
+  if (dateStart.value !== null) {
+    formData.append("startDate", dateToISO(dateStart.value));
+  }
+  if (dateEnd.value !== null) {
+    formData.append("endDate", dateToISO(dateEnd.value));
+  }
+  formData.append("file", files.value.toString());
+  console.log(formData);
   showLoader();
   await http
     .put(config.API.editRoundInsignia(id))
@@ -255,6 +306,7 @@ const editData = async (id: string) => {
     .finally(async () => {
       hideLoader();
     });
+  console.log(formData);
 };
 
 const checkSave = async () => {
@@ -284,15 +336,17 @@ const checkSave = async () => {
 
 const addData = async () => {
   const formData = new FormData();
-  formData.append("Name", roundInsig.value);
-  formData.append("year", parseInt(yearOffer.value).toString());
-  formData.append("Amount", files.datelast);
+  formData.append("name", roundInsig.value);
+  formData.append("year", parseInt(yearly.value).toString());
+  formData.append("amount", datelast.value.toString());
   if (dateStart.value !== null) {
-    formData.append("StartDate", dateToISO(dateStart.value));
+    formData.append("startDate", dateToISO(dateStart.value));
   }
   if (dateEnd.value !== null) {
-    formData.append("EndDate", dateToISO(dateEnd.value));
+    formData.append("endDate", dateToISO(dateEnd.value));
   }
+  formData.append("file", files.value.toString());
+  console.log(formData);
 
   showLoader();
   await http
diff --git a/src/modules/07_insignia/components/1_Proposals/listProposals.vue b/src/modules/07_insignia/components/1_Proposals/listProposals.vue
index 6cdff4beb..d40c5ec29 100644
--- a/src/modules/07_insignia/components/1_Proposals/listProposals.vue
+++ b/src/modules/07_insignia/components/1_Proposals/listProposals.vue
@@ -84,30 +84,36 @@
           </template>
           <template v-slot:body="props">
             <q-tr :props="props" class="cursor-pointer">
-              <q-td key="round" :props="props">
+              <q-td key="round" :props="props" @click="clickEdit(props.row)">
                 {{ props.row.round }}
               </q-td>
-              <q-td key="year" :props="props">
+              <q-td key="year" :props="props" @click="clickEdit(props.row)">
                 {{ props.row.year }}
               </q-td>
-              <q-td key="startDate" :props="props">
+              <q-td
+                key="startDate"
+                :props="props"
+                @click="clickEdit(props.row)"
+              >
                 {{ props.row.startDate }}
               </q-td>
-              <q-td key="endDate" :props="props">
+              <q-td key="endDate" :props="props" @click="clickEdit(props.row)">
                 {{ props.row.endDate }}
               </q-td>
-              <q-td key="status" :props="props">
+              <q-td key="status" :props="props" @click="clickEdit(props.row)">
                 <q-icon
                   v-if="props.row.status == 'ยังไม่ได้เสนอ'"
                   name="mdi-close"
                   color="grey-5"
                   class="text-h5"
+                  @click="clickEdit(props.row)"
                 />
                 <q-icon
                   v-else
                   name="mdi-check"
                   color="positive"
                   class="text-h5"
+                  @click="clickEdit(props.row)"
                 />
               </q-td>
               <q-td key="statusRoyal" :props="props">
@@ -116,12 +122,14 @@
                   name="mdi-timer-sand"
                   color="orange"
                   class="text-h5"
+                  @click="clickEdit(props.row)"
                 />
                 <q-icon
                   v-else
                   name="mdi-check"
                   color="positive"
                   class="text-h5"
+                  @click="clickEdit(props.row)"
                 />
               </q-td>
               <q-td auto-width>
@@ -313,7 +321,7 @@ const rows = ref<FormProprsalsRound[]>([
     year: "2566",
     startDate: "2566",
     endDate: "31 พ.ค. 2566",
-    status: "ยังไม่ได้เสนอ",
+    status: "ไม่ใช้งาน",
     statusRoyal: "ยังไม่ได้เสนอ",
   },
   {
@@ -343,9 +351,11 @@ const fetchData = async () => {
           id: e.period_id,
           round: e.period_name,
           year: e.period_year,
+          amount: e.period_amount,
           startDate:
-            e.startDate == null ? null : date2Thai(new Date(e.startDate)),
-          endDate: e.endDate == null ? null : date2Thai(new Date(e.endDate)),
+            e.period_start == null ? null : date2Thai(new Date(e.period_start)),
+          endDate:
+            e.period_end == null ? null : date2Thai(new Date(e.period_end)),
           status: e.period_status,
         });
       });
@@ -358,6 +368,10 @@ const fetchData = async () => {
     });
 };
 
+const clickEdit = (col: any) => {
+  router.push(`/insignia/round-add/${col.id}`);
+};
+
 // หัวตาราง2
 const clickDelete = (id: string) => {
   $q.dialog({
diff --git a/src/modules/07_insignia/router.ts b/src/modules/07_insignia/router.ts
index 5eb982863..423cca427 100644
--- a/src/modules/07_insignia/router.ts
+++ b/src/modules/07_insignia/router.ts
@@ -45,6 +45,16 @@ export default [
       Role: "insignia",
     },
   },
+  {
+    path: "/insignia/round-add/:id",
+    name: "roundAddEdit",
+    component: roundAdd,
+    meta: {
+      Auth: true,
+      Key: [8.1],
+      Role: "insignia",
+    },
+  },
   {
     path: "/insignia/round-add",
     name: "roundAdd",

From c51f66c808affd8756b4b3b5397c486918c46b08 Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Tue, 8 Aug 2023 16:50:50 +0700
Subject: [PATCH 057/113] =?UTF-8?q?api=20=E0=B8=96=E0=B8=B6=E0=B8=87?=
 =?UTF-8?q?=E0=B9=81=E0=B8=81=E0=B9=88=E0=B8=81=E0=B8=A3=E0=B8=A3=E0=B8=A1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/06_retirement/api.retirement.ts       |   5 +
 src/api/registry/api.profile.ts               |   4 +
 .../04_registry/components/Profile.vue        |  66 +++++-
 .../components/resign/Deceased.vue            | 193 ++++++++-------
 .../components/resign/DetailDeceased.vue      | 221 ++++++++++++++++++
 src/modules/06_retirement/router.ts           |  19 +-
 6 files changed, 416 insertions(+), 92 deletions(-)
 create mode 100644 src/modules/06_retirement/components/resign/DetailDeceased.vue

diff --git a/src/api/06_retirement/api.retirement.ts b/src/api/06_retirement/api.retirement.ts
index 698f2cb82..d8e373cb4 100644
--- a/src/api/06_retirement/api.retirement.ts
+++ b/src/api/06_retirement/api.retirement.ts
@@ -11,4 +11,9 @@ export default {
     reasonId: (retireId: string) => `${retirement}/reason/${retireId}`,
     retirement: (type: string, year: string) => `${retirement}/${type}/${year}`,
     createProfile: () => `${retirement}/profile`,
+
+    //RetirementDeceased ถึงแก่กรรม
+    listDeceased: () => `${retirement}/deceased`,
+    detailDeceased: (id: string) => `${retirement}/deceased/${id}`
+
 };
diff --git a/src/api/registry/api.profile.ts b/src/api/registry/api.profile.ts
index d3333d893..62574c66f 100644
--- a/src/api/registry/api.profile.ts
+++ b/src/api/registry/api.profile.ts
@@ -182,4 +182,8 @@ export default {
 
   profileCitizenId: (citizenId: string) => `${profile}citizenId/${citizenId}`,
   profileEmployeeIn: `${profile}information/employee`,
+
+
+
+
 };
diff --git a/src/modules/04_registry/components/Profile.vue b/src/modules/04_registry/components/Profile.vue
index 468079674..db03c712a 100644
--- a/src/modules/04_registry/components/Profile.vue
+++ b/src/modules/04_registry/components/Profile.vue
@@ -472,12 +472,28 @@
             <q-space />
           </q-card-section>
           <q-separator />
-          <DialogFooter
+          <div class="flex justify-end q-pa-sm q-gutter-sm">
+            <q-btn
+              unelevated
+              label="บันทึก"
+              color="public"
+              @click="clickSaveDeceased"
+              :disable="
+                filePassaway === null ||
+                deathCertificateNo === '' ||
+                placeDeathCertificate === '' ||
+                reasonDeath === ''
+              "
+            >
+              <q-tooltip>บันทึก</q-tooltip>
+            </q-btn>
+          </div>
+          <!-- <DialogFooter
             :save="clickSave"
             :validate="validateData"
             v-model:editvisible="edit"
             v-model:modalEdit="modalEdit"
-          />
+          /> -->
         </q-form>
       </q-card>
     </div>
@@ -704,7 +720,7 @@ const dialogPassaway = ref<boolean>(false);
 const loader = ref<boolean>(false); //รอโหลด
 const statusEdit = ref<boolean>(false);
 const activeImage = ref<any | null>(null);
-const filePassaway = ref(null);
+const filePassaway = ref<any>(null);
 const images = ref<any>([]);
 const checkValidate = ref<boolean>(false); //validate data ผ่านหรือไม่
 const myForm = ref<QForm | null>(null); //form data input
@@ -1188,6 +1204,50 @@ const Retire = async () => {
       });
   }
 };
+const clickSaveDeceased = async () => {
+  // console.log(
+  //   filePassaway.value,
+  //   deathCertificateNo.value,
+  //   placeDeathCertificate.value,
+  //   reasonDeath.value
+  // );
+  const formData = new FormData();
+  formData.append("File", filePassaway.value);
+  formData.append("Number", deathCertificateNo.value);
+  formData.append("Date", dateToISO(dateDeath.value));
+  formData.append("Location", placeDeathCertificate.value);
+  formData.append("Reason", reasonDeath.value);
+  formData.append("ProfileId", profileId.value);
+
+  $q.dialog({
+    title: "ยืนยันการบันทึกข้อมูล",
+    message: "ต้องการบันทึกข้อมูลนี้ใช่หรือไม่?",
+    cancel: {
+      flat: true,
+      color: "negative",
+    },
+    persistent: true,
+  })
+    .onOk(async () => {
+      showLoader();
+      await http
+        .post(config.API.listDeceased(), formData)
+        .then(() => {
+          success($q, "บันทึกข้อมูลสำเร็จ");
+          router.push("/deceased");
+
+        })
+        .catch((e) => {
+          console.log(e);
+          messageError($q, e);
+        })
+        .finally(()=>{
+          hideLoader();
+        })
+    })
+    .onCancel(() => {})
+    .onDismiss(() => {});
+};
 </script>
 <style>
 .image-size-default {
diff --git a/src/modules/06_retirement/components/resign/Deceased.vue b/src/modules/06_retirement/components/resign/Deceased.vue
index 798dc2ad0..49d18a5c3 100644
--- a/src/modules/06_retirement/components/resign/Deceased.vue
+++ b/src/modules/06_retirement/components/resign/Deceased.vue
@@ -1,34 +1,17 @@
 <script setup lang="ts">
-import { ref } from "vue";
+import { ref, onMounted } from "vue";
 import type { QTableProps } from "quasar";
+import { useQuasar } from "quasar";
+import { useCounterMixin } from "@/stores/mixin";
 import { useRouter } from "vue-router";
-// const router = useRouter();
-const pagination = ref({
-    sortBy: "desc",
-    descending: false,
-    page: 1,
-    rowsPerPage: 10,
-  });
-  const paging = ref<boolean>(true);
-  const paginationLabel = (start: string, end: string, total: string) => {
-    if (paging.value == true) return " " + start + "-" + end + " ใน " + total;
-    else return start + "-" + end + " ใน " + total;
-  };
-const visibleColumns = ref<string[]>([ "prefix", "fullname", "positionType", "position", "positionLevel", "positionExecutive", "oc"]); //ค้นหา คอลัมน์ คอลัมน์ที่แสดง
-const filterKeyword = ref<string>("");
-const filterRef = ref<any>(null);
-const resetFilter = () => {
-  filterKeyword.value = "";
-  filterRef.value.focus();
-};
+import http from "@/plugins/http";
+import config from "@/app.config";
+const router = useRouter();
+const $q = useQuasar();
+const mixin = useCounterMixin();
+const { showLoader, hideLoader, messageError, success } = mixin;
 
-// const nextPage = (id:string) => {
-//   router.push("/retirement/resign/"+id);
-// };
-const rows = ref<any>([
-  { personalId:"0a846508-4932-40de-9a9e-5b519492217c",prefix: "นางสาว", fullname: "นางสาวอย พชช", positionType: "บริหาร", position: "นักบริหาร", positionLevel: "ต้น", positionExecutive: "ผู้ช่วยหัวหน้าสำนักงาน", oc: "สำนักงานคณะกรรมการข้าราชการกรุงเทพมหานคร"},
-  { personalId:"0a846508-4932-40de-9a9e-5b519492227c",prefix: "นางสาว", fullname: "นางสาววญ สพ", positionType: "วิชาการ", position: "นักจัดการงานทั่วไป", positionLevel: "ปฏิบัติการ", positionExecutive: "-", oc: "กลุ่มงานช่วยนักบริหาร"},
-]);
+const rows = ref<any>([]);
 const columns = ref<QTableProps["columns"]>([
   {
     name: "prefix",
@@ -93,37 +76,77 @@ const columns = ref<QTableProps["columns"]>([
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
-
 ]);
+const visibleColumns = ref<string[]>([
+  "prefix",
+  "fullname",
+  "positionType",
+  // "position",
+  "positionLevel",
+  "positionExecutive",
+  "oc",
+]);
+onMounted(() => {
+  fectListDecased();
+});
+const fectListDecased = async () => {
+  showLoader();
+  await http
+    .get(config.API.listDeceased())
+    .then((res) => {
+      console.log(res);
+      rows.value = res.data.result.map((e: any) => ({
+        personalId: e.id,
+        prefix: e.prefix,
+        fullname: e.firstName + "   " + e.lastName,
+        positionType: e.positionType,
+        // position: e.position,
+        positionLevel: e.positionLevel,
+        positionExecutive: e.positionExecutive,
+        oc: e.organization,
+      }));
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+};
+
+const paging = ref<boolean>(true);
+const pagination = ref({
+  sortBy: "desc",
+  descending: false,
+  page: 1,
+  rowsPerPage: 10,
+});
+const paginationLabel = (start: string, end: string, total: string) => {
+  if (paging.value == true) return " " + start + "-" + end + " ใน " + total;
+  else return start + "-" + end + " ใน " + total;
+};
+
+//ค้นหา คอลัมน์ คอลัมน์ที่แสดง
+const filterKeyword = ref<string>("");
+const filterRef = ref<any>(null);
+const resetFilter = () => {
+  filterKeyword.value = "";
+  filterRef.value.focus();
+};
+const nextPage = (id: string) => {
+  router.push("/deceased/" + id);
+};
 </script>
 <template>
-  <div class="toptitle text-dark col-12 row items-center">รายการบันทึกเวียนแจ้งการถึงแก่กรรม</div>
+  <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="col-12 row q-pa-md">
       <div class="row col-12">
         <div class="row col-12 q-col-gutter-sm">
-          <!-- <q-select
-            v-model="fiscalyear"
-            label="ปีงบประมาณ"
-            dense
-            emit-value
-            map-options
-            :options="fiscalyearOP"
-            option-value="id"
-            option-label="name"
-            lazy-rules
-            hide-bottom-space
-            :readonly="false"
-            :borderless="false"
-            :outlined="true"
-            :hide-dropdown-icon="false"
-            style="min-width: 150px"
-            @update:model-value="searchFilterTable"
-          /> -->
-
           <q-space />
-
           <q-input
             class="col-xs-12 col-sm-3 col-md-2"
             standout
@@ -175,19 +198,21 @@ const columns = ref<QTableProps["columns"]>([
             class="custom-header-table"
             :visible-columns="visibleColumns"
             :pagination-label="paginationLabel"
-              v-model:pagination="pagination"
+            v-model:pagination="pagination"
           >
-          
             <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-tr
+                :props="props"
+                class="cursor-pointer"
+                @click="nextPage(props.row.personalId)"
+              >
                 <!-- <q-td key="no" :props="props">
                   {{ props.rowIndex + 1 }}
                 </q-td> -->
@@ -212,8 +237,6 @@ const columns = ref<QTableProps["columns"]>([
                 <q-td key="oc" :props="props">
                   {{ props.row.oc }}
                 </q-td>
-
-
               </q-tr>
             </template>
             <template v-slot:pagination="scope">
@@ -235,34 +258,34 @@ const columns = ref<QTableProps["columns"]>([
   </q-card>
 </template>
 <style scoped lang="scss">
-  .custom-header-table {
-    max-height: 64vh;
-  
-    .q-table tr:nth-child(odd) td {
-      background: white;
-    }
-  
-    .q-table tr:nth-child(even) td {
-      background: #f8f8f8;
-    }
-  
-    .q-table thead tr {
-      background: #ecebeb;
-    }
-  
-    .q-table thead tr th {
-      position: sticky;
-      z-index: 1;
-    }
-  
-    /* this will be the loading indicator */
-    .q-table thead tr:last-child th {
-      /* height of all previous header rows */
-      top: 48px;
-    }
-  
-    .q-table thead tr:first-child th {
-      top: 0;
-    }
+.custom-header-table {
+  max-height: 64vh;
+
+  .q-table tr:nth-child(odd) td {
+    background: white;
   }
-</style>
\ No newline at end of file
+
+  .q-table tr:nth-child(even) td {
+    background: #f8f8f8;
+  }
+
+  .q-table thead tr {
+    background: #ecebeb;
+  }
+
+  .q-table thead tr th {
+    position: sticky;
+    z-index: 1;
+  }
+
+  /* this will be the loading indicator */
+  .q-table thead tr:last-child th {
+    /* height of all previous header rows */
+    top: 48px;
+  }
+
+  .q-table thead tr:first-child th {
+    top: 0;
+  }
+}
+</style>
diff --git a/src/modules/06_retirement/components/resign/DetailDeceased.vue b/src/modules/06_retirement/components/resign/DetailDeceased.vue
new file mode 100644
index 000000000..4c78eed8f
--- /dev/null
+++ b/src/modules/06_retirement/components/resign/DetailDeceased.vue
@@ -0,0 +1,221 @@
+<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)"
+    />
+    รายละเอียดบันทึกเวียนแจ้งการถึงแก่กรรม {{ detail.firstName }}
+    {{ detail.lastName }}
+  </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">
+        {{ detail.firstName + "    " + detail.lastName }}
+      </div>
+      <q-space />
+      <q-btn
+        outline
+        color="blue"
+        dense
+        icon-right="mdi-open-in-new"
+        class="q-px-sm"
+        label="ดูข้อมูลทะเบียนประวัติ"
+        @click="redirectToRegistry(detail.id)"
+      />
+    </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">{{ detail.positionExecutive }}</div>
+          </div>
+        </div>
+        <div class="col-xs-6 col-sm-2 row items-center">
+          <div class="col-12">
+            <div class="col-12 text-top">ระดับ</div>
+            <div class="col-12 text-detail">{{ detail.positionLevel }}</div>
+          </div>
+        </div>
+        <div class="col-xs-6 col-sm row items-center">
+          <div class="col-12">
+            <div class="col-12 text-top">สังกัด</div>
+            <div class="col-12 text-detail">{{ detail.organization }}</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-x-sm">
+        <q-btn
+          flat
+          outline
+          color="red"
+          dense
+          icon-right="mdi-file-pdf"
+          class="q-px-sm"
+        />
+        <q-btn
+          flat
+          outline
+          color="blue"
+          dense
+          icon-right="mdi-file-word"
+          class="q-px-sm"
+        />
+      </div>
+    </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">
+              {{ detail.number }}
+            </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">{{ detail.location }}</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">{{ detail.reason }}</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">{{ date2Thai(detail.date) }}</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">
+              <q-btn
+                flat
+                round
+                color="red"
+                icon="mdi-file-pdf"
+                @click="nextPage(detail.pathName)"
+              >
+                <q-tooltip>ใบมรณบัตร</q-tooltip></q-btn
+              >
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </q-card>
+</template>
+<script setup lang="ts">
+import { useRouter, useRoute } from "vue-router";
+import { useQuasar } from "quasar";
+import { ref, onMounted } from "vue";
+import { useCounterMixin } from "@/stores/mixin";
+import http from "@/plugins/http";
+import config from "@/app.config";
+
+const $q = useQuasar();
+const router = useRouter();
+const route = useRoute();
+const mixin = useCounterMixin();
+const { showLoader, hideLoader, messageError, date2Thai } = mixin;
+
+const profileId = ref<string>(route.params.id.toString());
+const detail = ref<any>([]);
+
+onMounted(() => {
+  console.log(profileId.value);
+  fectdata();
+});
+const fectdata = async () => {
+  showLoader();
+  await http
+    .get(config.API.detailDeceased(profileId.value))
+    .then((res) => {
+      detail.value = res.data.result;
+      console.log(detail.value);
+    })
+    .catch((e) => {
+      console.log(e);
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+};
+const redirectToRegistry = (id: string) => {
+  console.log(id);
+  router.push(`/registry/${id}`);
+};
+const nextPage = (page: string) => {
+  window.open(page, "_blank");
+};
+</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;
+}
+.custom-header-table {
+  max-height: 64vh;
+
+  .q-table tr:nth-child(odd) td {
+    background: white;
+  }
+
+  .q-table tr:nth-child(even) td {
+    background: #f8f8f8;
+  }
+
+  .q-table thead tr {
+    background: #ecebeb;
+  }
+
+  .q-table thead tr th {
+    position: sticky;
+    z-index: 1;
+  }
+
+  /* this will be the loading indicator */
+  .q-table thead tr:last-child th {
+    /* height of all previous header rows */
+    top: 48px;
+  }
+
+  .q-table thead tr:first-child th {
+    top: 0;
+  }
+}
+</style>
diff --git a/src/modules/06_retirement/router.ts b/src/modules/06_retirement/router.ts
index 6b92458fa..af06080ef 100644
--- a/src/modules/06_retirement/router.ts
+++ b/src/modules/06_retirement/router.ts
@@ -6,10 +6,11 @@ const Main = () => import("@/modules/06_retirement/views/Main.vue");
 const Listretirement = () => import("@/modules/06_retirement/components/ListRetirement/TableList.vue")
 const resignOrder = () => import("@/modules/06_retirement/components/resign/ResignOrder.vue");
 const resign = () => import("@/modules/06_retirement/components/resign/Resign.vue");
-const resignByid = () => import("@/modules/06_retirement/components/resign/ResignByid.vue")
-const deceased = () => import("@/modules/06_retirement/components/resign/Deceased.vue")
-const dismissOrder = () => import("@/modules/06_retirement/components/DismissOrder/DismissOrder.vue")
-const addOrder = () => import("@/modules/06_retirement/components/DismissOrder/AddOrder.vue")
+const resignByid = () => 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 addOrder = () => import("@/modules/06_retirement/components/DismissOrder/AddOrder.vue");
 export default [
   {
     path: "/retirement",
@@ -81,6 +82,16 @@ export default [
       Role: "retirement",
     },
   },
+  {
+    path: "/deceased/:id",
+    name: "deceased-detail",
+    component: detaildeceased,
+    meta: {
+      Auth: true,
+      Key: [7.8],
+      Role: "retirement",
+    },
+  },
   {
     path: "/dismiss-order",
     name: "dismiss-order",

From 434b752f948ef63ea808e85d61761f7cb3984c49 Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Tue, 8 Aug 2023 17:56:58 +0700
Subject: [PATCH 058/113] =?UTF-8?q?api=20=E0=B8=9B=E0=B8=B8=E0=B9=88?=
 =?UTF-8?q?=E0=B8=A1=E0=B8=AD=E0=B8=AD=E0=B8=81=E0=B8=84=E0=B8=B3=E0=B8=AA?=
 =?UTF-8?q?=E0=B8=B1=E0=B9=88=E0=B8=87?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/05_placement/api.placement.ts         |  1 +
 .../components/OrderPlacement/step/step04.vue | 82 ++++++++++++++-----
 2 files changed, 63 insertions(+), 20 deletions(-)

diff --git a/src/api/05_placement/api.placement.ts b/src/api/05_placement/api.placement.ts
index fd13782a1..108f63ad8 100644
--- a/src/api/05_placement/api.placement.ts
+++ b/src/api/05_placement/api.placement.ts
@@ -62,6 +62,7 @@ export default {
   typeOrder: () => `${order}/order/order-type`,
   nextStep: (orderId: string) => `${order}/order/next/${orderId}`,
   prevStep: (orderId: string) => `${order}/order/prev/${orderId}`,
+  executeOrder: (orderId: string) => `${order}/order/execute/${orderId}`,
 
   createOrder: () => `${order}/order/detail`,
 
diff --git a/src/modules/05_placement/components/OrderPlacement/step/step04.vue b/src/modules/05_placement/components/OrderPlacement/step/step04.vue
index 969e2d574..700cc0555 100644
--- a/src/modules/05_placement/components/OrderPlacement/step/step04.vue
+++ b/src/modules/05_placement/components/OrderPlacement/step/step04.vue
@@ -287,6 +287,7 @@
                   label="ออกคำสั่ง"
                   :color="validateForm() ? 'public' : 'grey'"
                   :disable="statusOrder == 'N'"
+                  @click="clickExecute(orderId)"
                 />
                 <q-btn
                   class="text-dark"
@@ -417,7 +418,7 @@
   </div>
 </template>
 <script setup lang="ts">
-import { ref, onMounted, onUnmounted, computed } from "vue";
+import { ref, onMounted, onUnmounted, computed, watch } from "vue";
 import { VuePDF, usePDF } from "@tato30/vue-pdf";
 import type { PDFDocumentLoadingTask } from "pdfjs-dist/types/src/display/api";
 import type { QForm } from "quasar";
@@ -443,38 +444,30 @@ const date = ref<Date>(new Date());
 const fileOrder = ref<any>(null);
 const fileTailer = ref<any>(null);
 
+const OrderPDF = ref<string>("");
+const TailerPDF = ref<string>("");
 const statusOrder = ref<string>();
 
-// onUnmounted(() => {
-//   window.removeEventListener("resize", (e: any) => {
-//     myEventHandler(e);
-//   });
-// });
-const orderId = ref<string>("");
+const orderId = ref<string>(orderId_params.toString());
 onMounted(async () => {
-  if (orderId_params !== undefined) {
-    orderId.value = orderId_params.toString();
+  if (orderId.value) {
     fetchAttachment(orderId.value);
     fecthstatusOrder(orderId.value);
   }
 
-  //   window.addEventListener("resize", (e: any) => {
-  //     myEventHandler(e);
-  //   });
+  //   const pdfData = usePDF();
 
-  const pdfData = usePDF("/src/assets/05_modules.pdf");
-
-  setTimeout(() => {
-    pdfSrc.value = pdfData.pdf.value;
-    numOfPages.value = pdfData.pages.value;
-  }, 1000);
+  //   setTimeout(() => {
+  //     pdfSrc.value = pdfData.pdf.value;
+  //     numOfPages.value = pdfData.pages.value;
+  //   }, 1000);
 });
 
 const fetchAttachment = async (orderId: string) => {
   showLoader();
   await http
     .get(config.API.attachmentOrder(orderId))
-    .then((res) => {
+    .then(async (res) => {
       let response = res.data.result;
       console.log(response);
       order.value = response.orderNo;
@@ -482,6 +475,13 @@ const fetchAttachment = async (orderId: string) => {
       if (response.date !== undefined) {
         date.value = response.date;
       }
+      if (response.orderFileUrl !== null) {
+        OrderPDF.value = response.orderFileUrl;
+        viewPDF(OrderPDF.value);
+      }
+      if (response.attachmentFileUrl !== null) {
+        TailerPDF.value = response.attachmentFileUrl;
+      }
     })
     .catch((e) => {
       messageError($q, e);
@@ -501,6 +501,24 @@ const fecthstatusOrder = async (orderId: string) => {
       console.log(e);
     });
 };
+const viewPDF = async (pdf: string) => {
+  const pdfData = await usePDF(`${pdf}`);
+  showLoader();
+  setTimeout(() => {
+    pdfSrc.value = pdfData.pdf.value;
+    numOfPages.value = pdfData.pages.value;
+    hideLoader();
+  }, 1500);
+};
+watch(tab, () => {
+  console.log(tab.value);
+  if (tab.value === "main") {
+    viewPDF(OrderPDF.value);
+  }
+  if (tab.value === "second") {
+    viewPDF(TailerPDF.value);
+  }
+});
 
 // const myEventHandler = (e: any) => {
 //   console.log("e", e.target.innerWidth);
@@ -538,7 +556,6 @@ const onchangePage = (val: any) => {
 };
 
 const save = () => {
-  // putOrderData();
   if (myForm.value !== null) {
     myForm.value!.validate().then((success: Boolean) => {
       if (success) {
@@ -556,6 +573,8 @@ const save = () => {
             await putOrderData();
             await postfileOrder();
             await postfileTailer();
+            // await fetchAttachment(orderId.value);
+            // await fecthstatusOrder(orderId.value);
           })
           .onCancel(() => {})
           .onDismiss(() => {});
@@ -589,6 +608,29 @@ const postfileTailer = async () => {
   formData.append("File", fileTailer.value);
   await http.post(config.API.attachmentOrderId(orderId.value), formData);
 };
+const clickExecute = async (id: string) => {
+  $q.dialog({
+    title: "ยืนยันการออกคำสั่ง",
+    message: "ต้องการยืนยันการออกคำสั่งข้อมูลนี้ใช่หรือไม่?",
+    cancel: {
+      flat: true,
+      color: "negative",
+    },
+    persistent: true,
+  })
+    .onOk(async () => {
+      await http
+        .put(config.API.executeOrder(id))
+        .then((res) => {
+          console.log(res);
+        })
+        .catch((e) => {
+          messageError($q, e);
+        });
+    })
+    .onCancel(() => {})
+    .onDismiss(() => {});
+};
 
 const validateForm = () => {
   return (

From ca44ebd1b7f5415239143d12fb16e0b56a7d7618 Mon Sep 17 00:00:00 2001
From: waruneeta <warunee.auy@gmail.com>
Date: Tue, 8 Aug 2023 18:11:39 +0700
Subject: [PATCH 059/113] =?UTF-8?q?=E0=B8=9B=E0=B8=A3=E0=B8=B1=E0=B8=9A?=
 =?UTF-8?q?=E0=B8=81=E0=B8=B2=E0=B8=A3=E0=B9=81=E0=B8=AA=E0=B8=94=E0=B8=87?=
 =?UTF-8?q?=E0=B8=9C=E0=B8=A5=E0=B9=80=E0=B8=AA=E0=B8=B5=E0=B8=A2=E0=B8=8A?=
 =?UTF-8?q?=E0=B8=B5=E0=B8=A7=E0=B8=B4=E0=B8=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/modules/06_retirement/components/resign/Deceased.vue      | 4 ++--
 .../06_retirement/components/resign/DetailDeceased.vue        | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/modules/06_retirement/components/resign/Deceased.vue b/src/modules/06_retirement/components/resign/Deceased.vue
index 49d18a5c3..478a43b06 100644
--- a/src/modules/06_retirement/components/resign/Deceased.vue
+++ b/src/modules/06_retirement/components/resign/Deceased.vue
@@ -81,7 +81,7 @@ const visibleColumns = ref<string[]>([
   "prefix",
   "fullname",
   "positionType",
-  // "position",
+  "position",
   "positionLevel",
   "positionExecutive",
   "oc",
@@ -100,7 +100,7 @@ const fectListDecased = async () => {
         prefix: e.prefix,
         fullname: e.firstName + "   " + e.lastName,
         positionType: e.positionType,
-        // position: e.position,
+        position: e.positionLine,
         positionLevel: e.positionLevel,
         positionExecutive: e.positionExecutive,
         oc: e.organization,
diff --git a/src/modules/06_retirement/components/resign/DetailDeceased.vue b/src/modules/06_retirement/components/resign/DetailDeceased.vue
index 4c78eed8f..1b545e6c9 100644
--- a/src/modules/06_retirement/components/resign/DetailDeceased.vue
+++ b/src/modules/06_retirement/components/resign/DetailDeceased.vue
@@ -26,7 +26,7 @@
         icon-right="mdi-open-in-new"
         class="q-px-sm"
         label="ดูข้อมูลทะเบียนประวัติ"
-        @click="redirectToRegistry(detail.id)"
+        @click="redirectToRegistry(detail.profileId)"
       />
     </div>
     <div class="col-12"><q-separator /></div>
@@ -38,7 +38,7 @@
         <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">{{ detail.positionExecutive }}</div>
+            <div class="col-12 text-detail">{{ detail.positionLine }}</div>
           </div>
         </div>
         <div class="col-xs-6 col-sm-2 row items-center">

From 3055a08dbaa3f71ab370dccc3a18ae8da9d7d9fb Mon Sep 17 00:00:00 2001
From: AnandaTon <125332905+anandaAiemvong@users.noreply.github.com>
Date: Tue, 8 Aug 2023 21:37:33 +0700
Subject: [PATCH 060/113] =?UTF-8?q?ui/api=20=E0=B8=A3=E0=B8=B2=E0=B8=A2?=
 =?UTF-8?q?=E0=B8=81=E0=B8=B2=E0=B8=A3=E0=B9=80=E0=B8=AB=E0=B8=A3=E0=B8=B5?=
 =?UTF-8?q?=E0=B8=A2=E0=B8=8D=E0=B8=88=E0=B8=B1=E0=B8=81=E0=B8=A3=E0=B8=9E?=
 =?UTF-8?q?=E0=B8=A3=E0=B8=A3=E0=B8=94=E0=B8=B4=E0=B8=A1=E0=B8=B2=E0=B8=A5?=
 =?UTF-8?q?=E0=B8=B2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/1_Proposals/addProposals.vue   |  49 +-
 .../components/1_Proposals/listProposals.vue  |   4 +
 .../components/1_Proposals/addProposals.vue   | 368 ++++++++++++++
 .../components/1_Proposals/listProposals.vue  | 468 ++++++++++++++++++
 src/modules/09_coin/router.ts                 |  34 ++
 5 files changed, 887 insertions(+), 36 deletions(-)
 create mode 100644 src/modules/09_coin/components/1_Proposals/addProposals.vue
 create mode 100644 src/modules/09_coin/components/1_Proposals/listProposals.vue

diff --git a/src/modules/07_insignia/components/1_Proposals/addProposals.vue b/src/modules/07_insignia/components/1_Proposals/addProposals.vue
index 8d90236b4..24b001041 100644
--- a/src/modules/07_insignia/components/1_Proposals/addProposals.vue
+++ b/src/modules/07_insignia/components/1_Proposals/addProposals.vue
@@ -208,7 +208,7 @@ const edit = ref<boolean>(false);
 const dateStart = ref<Date>(new Date());
 const dateEnd = ref<Date>(new Date());
 const yearly = ref<number>(new Date().getFullYear());
-const files = ref<File[]>([]);
+const files = ref<any>();
 const fileDocDataUpload = ref<File[]>([]);
 const roundInsig = ref<string>("");
 const datelast = ref<number>(1);
@@ -257,30 +257,6 @@ const updateYear = async (e: number) => {
   yearly.value = e;
 };
 
-const uploadDocData = async () => {
-  const formData = new FormData();
-  if (fileDocDataUpload.value.length > 0) {
-    fileDocDataUpload.value.forEach((file: any) => {
-      formData.append("", file);
-    });
-    showLoader();
-    await http
-      .put(config.API.RoundInsignia(id.value), formData)
-      .then((res) => {})
-      .catch((e) => {
-        messageError($q, e);
-      })
-      .finally(async () => {
-        hideLoader();
-        success($q, "บันทึกข้อมูลสำเร็จ");
-        clickBack();
-      });
-  } else {
-    success($q, "บันทึกข้อมูลสำเร็จ");
-    clickBack();
-  }
-};
-
 const editData = async (id: string) => {
   const formData = new FormData();
   formData.append("Name", roundInsig.value);
@@ -292,14 +268,15 @@ const editData = async (id: string) => {
   if (dateEnd.value !== null) {
     formData.append("endDate", dateToISO(dateEnd.value));
   }
-  formData.append("file", files.value.toString());
+  //   files.value.forEach((file: any) => {
+  //     formData.append("file", file);
+  //   });
+  formData.append("file", files.value);
   console.log(formData);
   showLoader();
   await http
     .put(config.API.editRoundInsignia(id))
-    .then(async () => {
-      await uploadDocData();
-    })
+    .then(async () => {})
     .catch((e) => {
       messageError($q, e);
     })
@@ -345,17 +322,17 @@ const addData = async () => {
   if (dateEnd.value !== null) {
     formData.append("endDate", dateToISO(dateEnd.value));
   }
-  formData.append("file", files.value.toString());
-  console.log(formData);
+  console.log(files.value);
+  //   files.value.forEach((file: any) => {
+  //     formData.append("file", file);
+  //   });
+  formData.append("file", files.value);
+  console.log(files.value);
 
   showLoader();
   await http
     .post(config.API.listRoundInsignia("insignia"), formData)
-    .then(async (res) => {
-      const data = res.data.result;
-      id.value = data.id;
-      await uploadDocData();
-    })
+    .then(async (res) => {})
     .catch((e) => {
       messageError($q, e);
     })
diff --git a/src/modules/07_insignia/components/1_Proposals/listProposals.vue b/src/modules/07_insignia/components/1_Proposals/listProposals.vue
index d40c5ec29..2c132ed72 100644
--- a/src/modules/07_insignia/components/1_Proposals/listProposals.vue
+++ b/src/modules/07_insignia/components/1_Proposals/listProposals.vue
@@ -406,6 +406,10 @@ const clickAdd = () => {
   router.push({ name: "roundAdd" });
 };
 
+const clickProposals = (id: string) => {
+  //   window.open(config.API.exportInsigniaDoc(id));
+};
+
 // ค้นหาในตาราง
 const filterKeyword = ref<string>("");
 const filterRef = ref<any>(null);
diff --git a/src/modules/09_coin/components/1_Proposals/addProposals.vue b/src/modules/09_coin/components/1_Proposals/addProposals.vue
new file mode 100644
index 000000000..d889ddd5b
--- /dev/null
+++ b/src/modules/09_coin/components/1_Proposals/addProposals.vue
@@ -0,0 +1,368 @@
+<template>
+  <div class="col-xs-12 col-sm-12 col-md-11">
+    <div class="toptitle col-12 row items-center">
+      <q-btn
+        icon="mdi-arrow-left"
+        unelevated
+        round
+        dense
+        flat
+        color="primary"
+        class="q-mr-sm"
+        @click="clickBack"
+      />
+      {{
+        edit
+          ? "ระยะเวลาการยื่นขอพระราชทานเครื่องทานเหรียญจักรพรรดิมาลา"
+          : "เพิ่มระยะเวลาการยื่นขอพระราชทานเครื่องทานเหรียญจักรพรรดิมาลา"
+      }}
+    </div>
+    <q-form ref="myForm">
+      <div class="col-12">
+        <q-card bordered>
+          <div class="col-12 row q-col-gutter-md q-pa-md">
+            <div class="col-xs-12 col-sm-12 row">
+              <q-separator />
+              <div class="col-12 row q-pa-sm q-col-gutter-sm">
+                <q-input
+                  class="col-10"
+                  dense
+                  outlined
+                  v-model="roundCoin"
+                  label="รอบการเสนอขอพระราชทานเหรียญจักรพรรดิมาลา"
+                />
+                <datepicker
+                  menu-class-name="modalfix"
+                  v-model="yearly"
+                  class="col-2"
+                  :locale="'th'"
+                  autoApply
+                  year-picker
+                  :enableTimePicker="false"
+                  @update:modelValue="updateYear"
+                >
+                  <template #year="{ year }">{{ year + 543 }}</template>
+                  <template #year-overlay-value="{ value }">{{
+                    parseInt(value + 543)
+                  }}</template>
+                  <template #trigger>
+                    <q-input
+                      dense
+                      lazy-rules
+                      outlined
+                      :model-value="yearly + 543"
+                      :rules="[(val) => !!val || `${'กรุณาเลือกปีที่เสนอ'}`]"
+                      :label="`${'ปีที่เสนอ'}`"
+                    >
+                      <template v-slot:prepend>
+                        <q-icon
+                          name="event"
+                          class="cursor-pointer"
+                          style="color: var(--q-primary)"
+                        >
+                        </q-icon>
+                      </template>
+                    </q-input>
+                  </template>
+                </datepicker>
+                <datepicker
+                  menu-class-name="modalfix"
+                  v-model="dateStart"
+                  :locale="'th'"
+                  autoApply
+                  class="col-xs-12 col-sm-5"
+                  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="
+                        dateStart != null ? date2Thai(dateStart) : 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>
+                <datepicker
+                  menu-class-name="modalfix"
+                  v-model="dateEnd"
+                  class="col-xs-12 col-sm-5"
+                  :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="col-xs-12 col-sm-4"
+                      :model-value="dateEnd != null ? date2Thai(dateEnd) : 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>
+
+                <q-input
+                  class="col-xs-12 col-sm-2"
+                  dense
+                  outlined
+                  v-model="datelast"
+                  label="จำนวนวันแจ้งเตือนก่อนวันสิ้นสุด"
+                />
+                <q-file
+                  class="col-xs-12 col-sm-10"
+                  outlined
+                  dense
+                  v-model="files"
+                  @added="fileUploadDoc"
+                  label="อัปโหลดเอกสารประกอบ"
+                  hide-bottom-space
+                  lazy-rules
+                  :rules="[
+                    (val) => val || 'กรุณาเลือกไฟล์หนังสือถึงหน่วยงานที่รับโอน',
+                  ]"
+                >
+                  <template v-slot:prepend>
+                    <q-icon name="attach_file" />
+                  </template>
+                </q-file>
+              </div>
+            </div>
+          </div>
+          <q-separator />
+          <q-separator />
+          <div class="row col-12 q-pa-sm">
+            <q-space />
+            <q-btn
+              unelevated
+              dense
+              class="q-px-md items-center"
+              color="light-blue-10"
+              label="บันทึก"
+              @click="checkSave"
+            />
+          </div>
+        </q-card>
+      </div>
+    </q-form>
+  </div>
+</template>
+<script setup lang="ts">
+import type { QTableProps } from "quasar";
+import { ref, onMounted } from "vue";
+import { useQuasar, QForm } from "quasar";
+import { useRouter, useRoute } from "vue-router";
+import { useCounterMixin } from "@/stores/mixin";
+import http from "@/plugins/http";
+import config from "@/app.config";
+
+const mixin = useCounterMixin();
+const { date2Thai, success, dateToISO, messageError, showLoader, hideLoader } =
+  mixin;
+const router = useRouter();
+const route = useRoute();
+const $q = useQuasar();
+const id = ref<string>(route.params.id as string);
+const myForm = ref<QForm | null>(null); //form data input
+const edit = ref<boolean>(false);
+const dateStart = ref<Date>(new Date());
+const dateEnd = ref<Date>(new Date());
+const yearly = ref<number>(new Date().getFullYear());
+const files = ref<any>();
+const fileDocDataUpload = ref<File[]>([]);
+const roundCoin = ref<string>("");
+const datelast = ref<number>(1);
+
+onMounted(async () => {
+  await fetchData();
+});
+
+const fetchData = async () => {
+  if (route.params.id) {
+    edit.value = true;
+    showLoader();
+    console.log(id.value);
+
+    await http
+      .get(config.API.getRoundInsignia(id.value))
+      .then((res) => {
+        const data = res.data.result;
+        //   const files = res.data.result.files;
+        id.value = data.period_id;
+        roundCoin.value = data.period_name;
+        yearly.value = data.period_year;
+        datelast.value = data.period_amount;
+        dateStart.value = new Date(data.period_start);
+        dateEnd.value = new Date(data.period_end);
+        files.value = data.period_doc;
+      })
+      .catch((e) => {
+        messageError($q, e);
+      })
+      .finally(() => {
+        hideLoader();
+      });
+  }
+};
+
+const routeName = router.currentRoute.value.name;
+
+const fileUploadDoc = async (files: any) => {
+  files.forEach((file: any) => {
+    fileDocDataUpload.value.push(file);
+  });
+};
+
+const updateYear = async (e: number) => {
+  yearly.value = e;
+};
+
+const uploadDocData = async () => {
+  const formData = new FormData();
+  if (fileDocDataUpload.value.length > 0) {
+    fileDocDataUpload.value.forEach((file: any) => {
+      formData.append("", file);
+    });
+    showLoader();
+    await http
+      .put(config.API.RoundInsignia(id.value), formData)
+      .then((res) => {})
+      .catch((e) => {
+        messageError($q, e);
+      })
+      .finally(async () => {
+        hideLoader();
+        success($q, "บันทึกข้อมูลสำเร็จ");
+        clickBack();
+      });
+  } else {
+    success($q, "บันทึกข้อมูลสำเร็จ");
+    clickBack();
+  }
+};
+
+const editData = async (id: string) => {
+  const formData = new FormData();
+  formData.append("Name", roundCoin.value);
+  formData.append("year", parseInt(yearly.value).toString());
+  formData.append("amount", datelast.value.toString());
+  if (dateStart.value !== null) {
+    formData.append("startDate", dateToISO(dateStart.value));
+  }
+  if (dateEnd.value !== null) {
+    formData.append("endDate", dateToISO(dateEnd.value));
+  }
+
+  formData.append("file", files.value);
+  console.log(formData);
+  showLoader();
+  await http
+    .put(config.API.editRoundInsignia(id))
+    .then(async () => {
+      await uploadDocData();
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(async () => {
+      hideLoader();
+    });
+  console.log(formData);
+};
+
+const checkSave = async () => {
+  if (myForm.value !== null) {
+    myForm.value.validate().then(async (success) => {
+      if (success) {
+        if (edit.value) {
+          await editData(id.value);
+        } else {
+          await addData();
+        }
+      }
+    });
+  }
+};
+
+// const sendData = () => {
+//   const valueData: any = {
+//     Name: roundInsig.value,
+//     year: year.value,
+//     Amount: datelast.value,
+//     dateStart: dateStart.value !== null ? dateToISO(dateStart.value) : null,
+//     dateEnd: dateEnd.value !== null ? dateToISO(dateEnd.value) : null,
+//   };
+//   return valueData;
+// };
+
+const addData = async () => {
+  const formData = new FormData();
+  formData.append("name", roundCoin.value);
+  formData.append("year", parseInt(yearly.value).toString());
+  formData.append("amount", datelast.value.toString());
+  if (dateStart.value !== null) {
+    formData.append("startDate", dateToISO(dateStart.value));
+  }
+  if (dateEnd.value !== null) {
+    formData.append("endDate", dateToISO(dateEnd.value));
+  }
+  //   formData.append("file", files.value[0]);
+  //   console.log(formData);
+  formData.append("file", files.value);
+  showLoader();
+  await http
+    .post(config.API.listRoundInsignia("coin"), formData)
+    .then(async (res) => {})
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(async () => {
+      hideLoader();
+      clickBack();
+    });
+};
+
+const clickBack = () => {
+  router.push({ name: "coinProposals" });
+};
+</script>
diff --git a/src/modules/09_coin/components/1_Proposals/listProposals.vue b/src/modules/09_coin/components/1_Proposals/listProposals.vue
new file mode 100644
index 000000000..d9d5793b9
--- /dev/null
+++ b/src/modules/09_coin/components/1_Proposals/listProposals.vue
@@ -0,0 +1,468 @@
+<template>
+  <div class="toptitle text-dark col-12 row items-center">
+    รายการรอบการเสนอขอพระราชทานเหรียญจักรพรรดิมาลา
+  </div>
+  <q-card flat bordered class="col-12 q-mt-sm q-pa-md">
+    <div class="row q-col-gutter-sm">
+      <div class="row col-12 q-col-gutter-sm">
+        <div>
+          <q-btn
+            @click="clickAdd()"
+            size="12px"
+            flat
+            round
+            color="add"
+            icon="mdi-plus"
+          >
+            <q-tooltip>เพิ่มรายการรอบการเสนอขอ</q-tooltip>
+          </q-btn>
+        </div>
+        <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"
+        />
+      </div>
+      <div class="col-12">
+        <q-table
+          ref="table"
+          :columns="columns"
+          :rows="rows"
+          :filter="filterKeyword"
+          row-key="Order"
+          flat
+          bordered
+          :paging="true"
+          dense
+          class="custom-header-table"
+          v-bind="attrs"
+          :visible-columns="visibleColumns"
+          :pagination-label="paginationLabel"
+          v-model:pagination="pagination"
+        >
+          <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-th auto-width />
+            </q-tr>
+          </template>
+          <template v-slot:body="props">
+            <q-tr :props="props" class="cursor-pointer">
+              <q-td key="round" :props="props" @click="clickEdit(props.row)">
+                {{ props.row.round }}
+              </q-td>
+              <q-td key="year" :props="props" @click="clickEdit(props.row)">
+                {{ props.row.year }}
+              </q-td>
+              <q-td
+                key="startDate"
+                :props="props"
+                @click="clickEdit(props.row)"
+              >
+                {{ props.row.startDate }}
+              </q-td>
+              <q-td key="endDate" :props="props" @click="clickEdit(props.row)">
+                {{ props.row.endDate }}
+              </q-td>
+              <q-td key="status" :props="props" @click="clickEdit(props.row)">
+                <q-icon
+                  v-if="props.row.status == 'ยังไม่ได้เสนอ'"
+                  name="mdi-close"
+                  color="grey-5"
+                  class="text-h5"
+                  @click="clickEdit(props.row)"
+                />
+                <q-icon
+                  v-else
+                  name="mdi-check"
+                  color="positive"
+                  class="text-h5"
+                  @click="clickEdit(props.row)"
+                />
+              </q-td>
+              <q-td key="statusRoyal" :props="props">
+                <q-icon
+                  v-if="props.row.statusRoyal == 'ยังไม่ได้เสนอ'"
+                  name="mdi-timer-sand"
+                  color="orange"
+                  class="text-h5"
+                  @click="clickEdit(props.row)"
+                />
+                <q-icon
+                  v-else
+                  name="mdi-check"
+                  color="positive"
+                  class="text-h5"
+                  @click="clickEdit(props.row)"
+                />
+              </q-td>
+              <q-td auto-width>
+                <q-btn
+                  dense
+                  size="12px"
+                  flat
+                  round
+                  color="light-blue-8"
+                  @click.stop.prevent="clickProposals(props.row.id)"
+                  icon="mdi-file-download"
+                >
+                  <q-tooltip>ดาวน์โหลดเอกสารประกอบ </q-tooltip>
+                </q-btn>
+              </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>
+          <template v-slot:pagination="scope">
+            <q-pagination
+              v-model="pagination.page"
+              active-color="primary"
+              color="dark"
+              :max="scope.pagesNumber"
+              :max-pages="5"
+              size="sm"
+              boundary-links
+              direction-links
+            ></q-pagination>
+          </template>
+        </q-table>
+      </div>
+    </div>
+  </q-card>
+</template>
+
+<script setup lang="ts">
+import { ref, useAttrs, onMounted } from "vue";
+import type { QTableProps } from "quasar";
+import router from "@/router";
+import { useCounterMixin } from "@/stores/mixin";
+import { useQuasar } from "quasar";
+import type { FormProprsalsRound } from " @/modules/07_insignia/interface/request/Main.ts";
+import { useRoute } from "vue-router";
+import config from "@/app.config";
+
+import http from "@/plugins/http";
+
+const mixin = useCounterMixin();
+const {
+  date2Thai,
+  success,
+  messageError,
+  statusLeave,
+  dialogMessage,
+  dateToISO,
+  showLoader,
+  hideLoader,
+} = mixin;
+const route = useRoute();
+const $q = useQuasar(); //ใช้ noti quasar
+const modal = ref<boolean>(false);
+const pagination = ref({
+  sortBy: "desc",
+  descending: false,
+  page: 1,
+  rowsPerPage: 10,
+});
+
+const visibleColumns = ref<string[]>([
+  "round",
+  "year",
+  "startDate",
+  "endDate",
+  "status",
+  "statusRoyal",
+]); //ค้นหา คอลัมน์ คอลัมน์ที่แสดง
+
+// หัวตาราง
+const columns = ref<QTableProps["columns"]>([
+  {
+    name: "round",
+    align: "left",
+    label: "รอบการเสนอขอพระราชทานเหรียญจักรพรรดิมาลา",
+    sortable: true,
+    field: "no",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "year",
+    align: "left",
+    label: "ปีที่เสนอ",
+    sortable: true,
+    field: "name",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "startDate",
+    align: "left",
+    label: "วันที่เริ่มต้น",
+    sortable: true,
+    field: "position",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    // sort: (a: string, b: string) =>
+    //   a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "endDate",
+    align: "left",
+    label: "วันที่สิ้นสุด",
+    sortable: true,
+    field: "level",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    // sort: (a: string, b: string) =>
+    //   a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "status",
+    align: "left",
+    label: "สถานะ",
+    sortable: true,
+    field: "institution",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+]);
+
+// ข้อมูลตาราง (จำลอง)
+const rows = ref<FormProprsalsRound[]>([
+  {
+    round: "รอบการเสนอขอพระราชทานเครื่องราชฯ",
+    year: "2566",
+    startDate: "2566",
+    endDate: "31 พ.ค. 2566",
+    status: "เสนอเเล้ว",
+  },
+  {
+    round: "รอบการเสนอขอพระราชทานเครื่องราชฯ",
+    year: "2566",
+    startDate: "2566",
+    endDate: "31 พ.ค. 2566",
+    status: "เสนอเเล้ว",
+  },
+  {
+    round: "รอบการเสนอขอพระราชทานเครื่องราชฯ",
+    year: "2566",
+    startDate: "2566",
+    endDate: "31 พ.ค. 2566",
+    status: "เสนอเเล้ว",
+  },
+  {
+    round: "รอบการเสนอขอพระราชทานเครื่องราชฯ",
+    year: "2566",
+    startDate: "2566",
+    endDate: "31 พ.ค. 2566",
+    status: "ไม่ใช้งาน",
+  },
+  {
+    round: "รอบการเสนอขอพระราชทานเครื่องราชฯ",
+    year: "2566",
+    startDate: "2566",
+    endDate: "31 พ.ค. 2566",
+    status: "เสนอเเล้ว",
+  },
+]);
+
+onMounted(async () => {
+  await fetchData();
+});
+
+const fetchData = async () => {
+  rows.value = [];
+  showLoader();
+  await http
+    .get(config.API.listRoundInsignia("coin"))
+    .then((res) => {
+      const data = res.data.result;
+      console.log(data);
+      data.map((e: any) => {
+        rows.value.push({
+          id: e.period_id,
+          round: e.period_name,
+          year: e.period_year,
+          amount: e.period_amount,
+          startDate:
+            e.period_start == null ? null : date2Thai(new Date(e.period_start)),
+          endDate:
+            e.period_end == null ? null : date2Thai(new Date(e.period_end)),
+          status: e.period_status,
+        });
+      });
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+};
+
+const clickEdit = (col: any) => {
+  router.push(`/coin/round-add/${col.id}`);
+};
+
+const clickProposals = (id: string) => {
+  //   window.open(config.API.exportDisablePassExamList(id));
+};
+
+// หัวตาราง2
+const clickDelete = (id: string) => {
+  $q.dialog({
+    title: "ยืนยันการลบข้อมูล",
+    message: "ต้องการลบข้อมูลนี้ใช่หรือไม่?",
+    cancel: {
+      flat: true,
+      color: "negative",
+    },
+    persistent: true,
+  })
+    .onOk(async () => {
+      showLoader();
+      await http
+        .delete(config.API.RoundInsignia(id))
+        .then((res) => {
+          success($q, "ลบข้อมูลการสอบสำเร็จ");
+          fetchData();
+        })
+        .catch((e) => {
+          messageError($q, e);
+        })
+        .finally(() => {
+          hideLoader();
+        });
+    })
+    .onCancel(() => {})
+    .onDismiss(() => {});
+};
+
+const clickAdd = () => {
+  router.push({ name: "coinRoundAdd" });
+};
+
+// ค้นหาในตาราง
+const filterKeyword = ref<string>("");
+const filterRef = ref<any>(null);
+const resetFilter = () => {
+  filterKeyword.value = "";
+  filterRef.value.focus();
+};
+
+const filterKeyword2 = ref<string>("");
+const filterRef2 = ref<any>(null);
+const resetFilter2 = () => {
+  filterKeyword2.value = "";
+  filterRef2.value.focus();
+};
+
+const attrs = ref<any>(useAttrs());
+
+const paging = ref<boolean>(true);
+const paginationLabel = (start: string, end: string, total: string) => {
+  if (paging.value == true) return " " + start + "-" + end + " ใน " + total;
+  else return start + "-" + end + " ใน " + total;
+};
+</script>
+
+<style lang="scss" scope>
+.filter-card {
+  background-color: #f1f1f1b0;
+}
+
+.toggle-expired-account {
+  font-size: 12px;
+  font-weight: 400;
+  font-size: 15px;
+  line-height: 150%;
+  color: #35373c;
+}
+
+.icon-color {
+  color: #4154b3;
+}
+
+.custom-header-table {
+  max-height: 64vh;
+
+  .q-table tr:nth-child(odd) td {
+    background: white;
+  }
+
+  .q-table tr:nth-child(even) td {
+    background: #f8f8f8;
+  }
+
+  .q-table thead tr {
+    background: #ecebeb;
+  }
+
+  .q-table thead tr th {
+    position: sticky;
+    z-index: 1;
+  }
+
+  /* this will be the loading indicator */
+  .q-table thead tr:last-child th {
+    /* height of all previous header rows */
+    top: 48px;
+  }
+
+  .q-table thead tr:first-child th {
+    top: 0;
+  }
+}
+</style>
diff --git a/src/modules/09_coin/router.ts b/src/modules/09_coin/router.ts
index d555454b2..ede52ede8 100644
--- a/src/modules/09_coin/router.ts
+++ b/src/modules/09_coin/router.ts
@@ -4,6 +4,10 @@
 
 const Main = () => import("@/modules/09_coin/views/Main.vue");
 const CoinHistory = () => import("@/modules/09_coin/components/Coin.vue");
+const coinProposals = () =>
+  import("@/modules/09_coin/components/1_Proposals/listProposals.vue");
+const coinRoundAdd = () =>
+  import("@/modules/09_coin/components/1_Proposals/addProposals.vue");
 
 export default [
   {
@@ -16,6 +20,36 @@ export default [
       Role: "coin",
     },
   },
+  {
+    path: "/coin/round-proposals",
+    name: "coinProposals",
+    component: coinProposals,
+    meta: {
+      Auth: true,
+      Key: [8.2],
+      Role: "coin",
+    },
+  },
+  {
+    path: "/coin/round-add",
+    name: "coinRoundAdd",
+    component: coinRoundAdd,
+    meta: {
+      Auth: true,
+      Key: [8.2],
+      Role: "coin",
+    },
+  },
+  {
+    path: "/coin/round-add/:id",
+    name: "coinRoundEdit",
+    component: coinRoundAdd,
+    meta: {
+      Auth: true,
+      Key: [8.2],
+      Role: "coin",
+    },
+  },
   {
     path: "/coin/history",
     name: "coinHistory",

From 44ab2aa17e36cd2e988e468f28f068d42b761677 Mon Sep 17 00:00:00 2001
From: setthawutttty <stw.ttty@gmail.com>
Date: Wed, 9 Aug 2023 12:09:46 +0700
Subject: [PATCH 061/113] no message

---
 src/api/05_placement/api.probation.ts         |   8 +-
 .../components/probation/FormAssign.vue       | 453 +++++++++++++-----
 .../components/probation/MainProbation.vue    | 144 ++----
 .../components/probation/ProbationDetail.vue  |  73 ++-
 .../05_placement/interface/request/Main.ts    |  32 +-
 src/modules/05_placement/router.ts            |   2 +-
 6 files changed, 463 insertions(+), 249 deletions(-)

diff --git a/src/api/05_placement/api.probation.ts b/src/api/05_placement/api.probation.ts
index 351a6685a..b774f3e36 100644
--- a/src/api/05_placement/api.probation.ts
+++ b/src/api/05_placement/api.probation.ts
@@ -1,6 +1,8 @@
 import env from "../index";
 const dataOptions = `${env.API_PROBATION_URI}/data-options`;
 const personal = `${env.API_PROBATION_URI}/personal`;
+const calculate = `${env.API_PROBATION_URI}/calculate`;
+const finish = `${env.API_PROBATION_URI}/assign`;
 
 export default {
   competencyOptions: () => `${dataOptions}/competency`,
@@ -8,7 +10,11 @@ export default {
   knowledgeOptions: () => `${dataOptions}/knowledge`,
   skillOptions: () => `${dataOptions}/skill`,
   lawOptions: () => `${dataOptions}/law`,
-
+  personalList: () => `${personal}/list`,
+  personal: (personalId:string) => `${personal}?personal_id=${personalId}`,
+  newAssign: (personalId:string) => `${dataOptions}/new-assign?personal_id=${personalId}`,
+  calculateDate: () => `${calculate}/assign-finish`,
+  saveFinish: (personalId:string) => `${finish}/probation-assign?personal_id=${personalId}`,
   personalAdd: () => `${personal}/add`,
   // clearPosition: (personalId:string) => `${placement}/position/clear/${personalId}`
 };
diff --git a/src/modules/05_placement/components/probation/FormAssign.vue b/src/modules/05_placement/components/probation/FormAssign.vue
index e719eea9b..bc24c0b4c 100644
--- a/src/modules/05_placement/components/probation/FormAssign.vue
+++ b/src/modules/05_placement/components/probation/FormAssign.vue
@@ -67,6 +67,7 @@
                     dense
                     borderless
                     option-label="label"
+                    option-value="value"
                     :outlined="routeName === 'probationWorkAdd'"
                     v-model="monthSelect"
                     :label="`ระยะเวลากี่เดือน`"
@@ -154,6 +155,7 @@
               <div class="col-12 row q-col-gutter-md">
                 <q-select
                   :rules="[(val) => !!val || 'กรุณาเลือกผู้ดูเเล']"
+                  option-value="personal_id"
                   :options="OPcaretaker"
                   class="col-xs-12 col-sm-6"
                   :readonly="routeName != 'probationWorkAdd'"
@@ -163,10 +165,13 @@
                   :outlined="routeName == 'probationWorkAdd'"
                   v-model="caretaker1"
                   :label="`ผู้ดูแลคนที่ 1`"
+                  option-label="name"
                 />
                 <q-select
                   :rules="[(val) => !!val || 'กรุณาเลือกผู้ดูเเล']"
                   :options="OPcaretaker"
+                  option-value="personal_id"
+                  option-label="name"
                   hide-bottom-space
                   class="col-xs-12 col-sm-6"
                   :readonly="routeName != 'probationWorkAdd'"
@@ -552,10 +557,18 @@
                           :outlined="routeName == 'probationWorkAdd'"
                           v-model="skill"
                           label="ด้านที่ 1"
-                        />
+                        >
+                          <template v-slot:selected-item="scope">
+                            <div class="ellipsis-2-lines">
+                              {{ scope.opt.title }} -
+                              {{ scope.opt.level_description }}
+                            </div>
+                          </template></q-select
+                        >
                       </div>
                       <div class="col-xs-12 col-sm-6">
                         <q-select
+                          ellipsis-2-lines
                           :option-label="
                             (item) =>
                               `${item.title} - ${item.level_description}`
@@ -573,7 +586,14 @@
                           :outlined="routeName == 'probationWorkAdd'"
                           v-model="skill2"
                           label="ด้านที่ 2"
-                        />
+                        >
+                          <template v-slot:selected-item="scope">
+                            <div class="ellipsis-2-lines">
+                              {{ scope.opt.title }} -
+                              {{ scope.opt.level_description }}
+                            </div>
+                          </template></q-select
+                        >
                       </div>
                       <div class="col-xs-12 col-sm-6">
                         <q-select
@@ -594,7 +614,14 @@
                           :outlined="routeName == 'probationWorkAdd'"
                           v-model="skill3"
                           label="ด้านที่ 3"
-                        />
+                        >
+                          <template v-slot:selected-item="scope">
+                            <div class="ellipsis-2-lines">
+                              {{ scope.opt.title }} -
+                              {{ scope.opt.level_description }}
+                            </div>
+                          </template></q-select
+                        >
                       </div>
                       <div class="col-xs-12 col-sm-6">
                         <q-select
@@ -615,7 +642,14 @@
                           :outlined="routeName == 'probationWorkAdd'"
                           v-model="skill4"
                           label="ด้านที่ 4"
-                        />
+                        >
+                          <template v-slot:selected-item="scope">
+                            <div class="ellipsis-2-lines">
+                              {{ scope.opt.title }} -
+                              {{ scope.opt.level_description }}
+                            </div>
+                          </template></q-select
+                        >
                       </div>
                     </div>
                   </div>
@@ -641,7 +675,9 @@
                           option-value="id"
                           hide-bottom-space
                           :rules="[(val) => !!val || 'กรุณาเลือกสมรรถนะ']"
-                          :options="filterMain(OPmain,[main2,main3,main4,main5])"
+                          :options="
+                            filterMain(OPmain, [main2, main3, main4, main5])
+                          "
                           class="bg-white"
                           :readonly="routeName != 'probationWorkAdd'"
                           dense
@@ -649,7 +685,14 @@
                           :outlined="routeName == 'probationWorkAdd'"
                           v-model="main"
                           label="ตัวที่ 1"
-                        />
+                        >
+                          <template v-slot:selected-item="scope">
+                            <div class="ellipsis-2-lines">
+                              {{ scope.opt.title }} -
+                              {{ scope.opt.description }}
+                            </div>
+                          </template></q-select
+                        >
                       </div>
                       <div class="col-xs-12 col-sm-6">
                         <q-select
@@ -659,7 +702,9 @@
                           option-value="id"
                           hide-bottom-space
                           :rules="[(val) => !!val || 'กรุณาเลือกสมรรถนะ']"
-                          :options="filterMain(OPmain,[main,main3,main4,main5])"
+                          :options="
+                            filterMain(OPmain, [main, main3, main4, main5])
+                          "
                           class="bg-white"
                           :readonly="routeName != 'probationWorkAdd'"
                           dense
@@ -667,7 +712,14 @@
                           :outlined="routeName == 'probationWorkAdd'"
                           v-model="main2"
                           label="ตัวที่ 2"
-                        />
+                        >
+                          <template v-slot:selected-item="scope">
+                            <div class="ellipsis-2-lines">
+                              {{ scope.opt.title }} -
+                              {{ scope.opt.description }}
+                            </div>
+                          </template></q-select
+                        >
                       </div>
                       <div class="col-xs-12 col-sm-6">
                         <q-select
@@ -677,7 +729,9 @@
                           option-value="id"
                           hide-bottom-space
                           :rules="[(val) => !!val || 'กรุณาเลือกสมรรถนะ']"
-                          :options="filterMain(OPmain,[main,main2,main4,main5])"
+                          :options="
+                            filterMain(OPmain, [main, main2, main4, main5])
+                          "
                           class="bg-white"
                           :readonly="routeName != 'probationWorkAdd'"
                           dense
@@ -685,7 +739,14 @@
                           :outlined="routeName == 'probationWorkAdd'"
                           v-model="main3"
                           label="ตัวที่ 3"
-                        />
+                        >
+                          <template v-slot:selected-item="scope">
+                            <div class="ellipsis-2-lines">
+                              {{ scope.opt.title }} -
+                              {{ scope.opt.description }}
+                            </div>
+                          </template></q-select
+                        >
                       </div>
                       <div class="col-xs-12 col-sm-6">
                         <q-select
@@ -695,7 +756,9 @@
                           option-value="id"
                           hide-bottom-space
                           :rules="[(val) => !!val || 'กรุณาเลือกสมรรถนะ']"
-                          :options="filterMain(OPmain,[main,main2,main3,main5])"
+                          :options="
+                            filterMain(OPmain, [main, main2, main3, main5])
+                          "
                           class="bg-white"
                           :readonly="routeName != 'probationWorkAdd'"
                           dense
@@ -703,14 +766,23 @@
                           :outlined="routeName == 'probationWorkAdd'"
                           v-model="main4"
                           label="ตัวที่ 4"
-                        />
+                        >
+                          <template v-slot:selected-item="scope">
+                            <div class="ellipsis-2-lines">
+                              {{ scope.opt.title }} -
+                              {{ scope.opt.description }}
+                            </div>
+                          </template></q-select
+                        >
                       </div>
 
                       <div class="col-xs-12 col-sm-6">
                         <q-select
                           hide-bottom-space
                           :rules="[(val) => !!val || 'กรุณาเลือกสมรรถนะ']"
-                          :options="filterMain(OPmain,[main,main2,main3,main4])"
+                          :options="
+                            filterMain(OPmain, [main, main2, main3, main4])
+                          "
                           :option-label="
                             (item) => `${item.title} - ${item.description}`
                           "
@@ -722,7 +794,14 @@
                           :outlined="routeName == 'probationWorkAdd'"
                           v-model="main5"
                           label="ตัวที่ 5"
-                        />
+                        >
+                          <template v-slot:selected-item="scope">
+                            <div class="ellipsis-2-lines">
+                              {{ scope.opt.title }} -
+                              {{ scope.opt.description }}
+                            </div>
+                          </template></q-select
+                        >
                       </div>
                     </div>
                   </div>
@@ -731,7 +810,6 @@
                     <div class="col-12 row q-col-gutter-sm">
                       <div class="col-xs-12 col-sm-6">
                         <q-select
-
                           :option-label="
                             (item) => `${item.title} - ${item.description}`
                           "
@@ -740,7 +818,7 @@
                           :rules="[
                             (val) => !!val || 'กรุณาเลือกสมรรถนะประจํากลุ่มงาน',
                           ]"
-                          :options="filterData(OPgroup,[group2,group3])"
+                          :options="filterData(OPgroup, [group2, group3])"
                           class="bg-white"
                           :readonly="routeName != 'probationWorkAdd'"
                           dense
@@ -748,7 +826,14 @@
                           :outlined="routeName == 'probationWorkAdd'"
                           v-model="group"
                           label="ตัวที่ 1"
-                        />
+                        >
+                          <template v-slot:selected-item="scope">
+                            <div class="ellipsis-2-lines">
+                              {{ scope.opt.title }} -
+                              {{ scope.opt.description }}
+                            </div>
+                          </template></q-select
+                        >
                       </div>
                       <div class="col-xs-12 col-sm-6">
                         <q-select
@@ -760,7 +845,7 @@
                           :rules="[
                             (val) => !!val || 'กรุณาเลือกสมรรถนะประจํากลุ่มงาน',
                           ]"
-                          :options="filterData(OPgroup,[group,group3])"
+                          :options="filterData(OPgroup, [group, group3])"
                           class="bg-white"
                           :readonly="routeName != 'probationWorkAdd'"
                           dense
@@ -768,7 +853,14 @@
                           :outlined="routeName == 'probationWorkAdd'"
                           v-model="group2"
                           label="ตัวที่ 2"
-                        />
+                        >
+                          <template v-slot:selected-item="scope">
+                            <div class="ellipsis-2-lines">
+                              {{ scope.opt.title }} -
+                              {{ scope.opt.description }}
+                            </div>
+                          </template></q-select
+                        >
                       </div>
                       <div class="col-xs-12 col-sm-6">
                         <q-select
@@ -780,7 +872,7 @@
                           :rules="[
                             (val) => !!val || 'กรุณาเลือกสมรรถนะประจํากลุ่มงาน',
                           ]"
-                          :options="filterData(OPgroup,[group,group2])"
+                          :options="filterData(OPgroup, [group, group2])"
                           class="bg-white"
                           :readonly="routeName != 'probationWorkAdd'"
                           dense
@@ -788,7 +880,14 @@
                           :outlined="routeName == 'probationWorkAdd'"
                           v-model="group3"
                           label="ตัวที่ 3"
-                        />
+                        >
+                          <template v-slot:selected-item="scope">
+                            <div class="ellipsis-2-lines">
+                              {{ scope.opt.title }} -
+                              {{ scope.opt.description }}
+                            </div>
+                          </template></q-select
+                        >
                       </div>
                     </div>
                   </div>
@@ -1179,6 +1278,8 @@
               <div class="col-12 row q-col-gutter-md">
                 <q-select
                   :options="OPcaretaker"
+                  option-value="personal_id"
+                  option-label="name"
                   class="col-xs-12 col-sm-8"
                   :readonly="routeName != 'probationWorkAdd'"
                   dense
@@ -1229,6 +1330,8 @@
                 </div>
                 <q-select
                   :options="OPcaretaker"
+                  option-value="personal_id"
+                  option-label="name"
                   class="col-xs-12 col-sm-8"
                   :readonly="routeName != 'probationWorkAdd'"
                   dense
@@ -1287,7 +1390,9 @@
               </div>
               <div class="col-12 row q-col-gutter-md">
                 <q-select
-                  :options="OPcaretaker"
+                  :options="OPcommander"
+                  option-value="personal_id"
+                  option-label="name"
                   class="col-xs-12 col-sm-8"
                   :readonly="routeName != 'probationWorkAdd'"
                   dense
@@ -1345,14 +1450,19 @@
           v-show="routeName == 'probationWorkAdd'"
           class="flex justify-end q-pa-sm q-gutter-sm"
         >
-          <q-btn unelevated label="บันทึก" color="public" @click="saveData()" />
+          <q-btn
+            unelevated
+            label="บันทึก"
+            color="public"
+            @click="saveData(personalId)"
+          />
         </div>
       </q-card>
     </div>
   </q-form>
 </template>
 <script setup lang="ts">
-import { useRouter } from "vue-router";
+import { useRouter, useRoute } from "vue-router";
 import { ref, computed, watch, onMounted } from "vue";
 import { useCounterMixin } from "@/stores/mixin";
 import { useQuasar } from "quasar";
@@ -1370,13 +1480,26 @@ const val1 = ref([
 
 const router = useRouter();
 const mixin = useCounterMixin();
-const { date2Thai, notifyError } = mixin;
+const {
+  date2Thai,
+  notifyError,
+  dateToISO,
+  success,
+  messageError,
+  showLoader,
+  hideLoader,
+} = mixin;
 const filterData = (options: any[], excludedGroups: any[]) => {
-  return options.filter((item) => !excludedGroups.some((group) => group && group.id === item.id));
+  return options.filter(
+    (item) => !excludedGroups.some((group) => group && group.id === item.id)
+  );
 };
 const filterMain = (options: any[], excludedGroups: any[]) => {
-  return options.filter((item) => !excludedGroups.some((group) => group && group.id === item.id));
+  return options.filter(
+    (item) => !excludedGroups.some((group) => group && group.id === item.id)
+  );
 };
+const route = useRoute();
 const checkValidate = ref<boolean>(false);
 const myForm = ref<any>(null);
 const fullnameFoot = ref<string>("");
@@ -1384,12 +1507,12 @@ const positionFoot = ref<string>("");
 const caretakerFoot = ref<string>("");
 const caretakerFoot2 = ref<string>("");
 const id = ref<number>();
-const personal_id = ref<string>();
+const personalId = route.params.personalId as string;
 const fullname = ref<string>();
 const knowledge_skill_map_no = ref<string[]>([]);
 const round_no = ref<number>();
-const date_start = ref<Date | null>(null);
-const date_finish = ref<Date | null>(null);
+const date_start = ref<Date>();
+const date_finish = ref<Date>();
 const behavior_desc = ref<string>();
 const other_desc = ref<object>({});
 const other4_desc = ref<string>();
@@ -1408,7 +1531,6 @@ const main3 = ref<any>();
 const main4 = ref<any>();
 const main5 = ref<any>();
 
-
 const Other = ref<string>("");
 const commander = ref<string>("");
 
@@ -1447,19 +1569,36 @@ const routeName = router.currentRoute.value.name;
 const name = ref<string>("");
 const position = ref<string>("");
 
-const monthSelect = ref<number>();
+const monthSelect = ref<number | string>();
 
 const caretaker1 = ref<string>("");
 const caretaker2 = ref<string>("");
-const OPcaretaker = [
-  "นางสาวรัชภรณ์ ภักดี",
-  "นางสาวทวิดา กมลเวชชี",
-  "test1",
-  "test2",
-  "test3",
-  "test4",
-];
-const monthOp = [{ value: "6", label: "6 เดือน" }];
+const OPcaretaker = ref<
+  {
+    personal_id: string;
+    name: string;
+    PositionId: string;
+    PositionLevelId: string;
+    PositionLineId: string;
+    OrganizationOrganization: string;
+  }[]
+>([]);
+
+const OPcommander = ref<
+  {
+    personal_id: string;
+    name: string;
+    PositionId: string;
+    PositionLevelId: string;
+    PositionLineId: string;
+    OrganizationOrganization: string;
+  }[]
+>([]);
+interface MonthOption {
+  value: number;
+  label: string;
+}
+const monthOp: MonthOption[] = [];
 //-----------------(3.1)-----------//
 const activityCount = ref<number>(2);
 const activityDataArray = ref<any[]>([]);
@@ -1486,10 +1625,10 @@ const resetActivity = () => {
 //-----------------(3.2)-----------//
 
 const knowledgeCount = ref<number>(3);
-const knowledge = ref<any[]>(Array.from({ length: knowledgeCount.value }, () => null));
+const knowledge = ref<any[]>([]);
 const OPknowledge = ref<
   Array<{
-    knowledge_id: number;
+    id: number;
     title: number;
     options: Array<Option>;
   }>
@@ -1543,7 +1682,21 @@ interface CheckboxItem {
 }
 
 const checkRule = ref<CheckboxItem[]>([]);
-  const getcompetency = async () => {
+const getAssignNew = async (id: string) => {
+  await http.get(config.API.newAssign(id)).then((res: any) => {
+    const data = res.data.data;
+    const monthOption = {
+      value: data.assign_month,
+      label: `${data.assign_month} เดือน`,
+    };
+    console.log("Assign-New", data);
+    monthOp.push(monthOption);
+    monthSelect.value = `${data.assign_month} เดือน`;
+    OPcaretaker.value = data.mentors;
+    OPcommander.value = [data.commander];
+  });
+};
+const getcompetency = async () => {
   await http.get(config.API.competencyOptions()).then((res: any) => {
     const data = res.data.data;
     OPmain.value = data;
@@ -1587,7 +1740,24 @@ const getLaw = async () => {
   });
 };
 
-const putData = () => {
+const postDateTime = async () => {
+  await http
+    .post(config.API.calculateDate(), {
+      month: monthSelect.value !== null ? parseInt(monthSelect.value) : null,
+      start_date: dateToISO(date_start.value as Date),
+    })
+    .then(async (res) => {
+      const result = res.data;
+      date_finish.value = result.finish_date;
+    })
+    .catch((e) => {})
+    .finally(async () => {
+      hideLoader();
+    });
+};
+
+const putData = (id: string) => {
+  const GUID = id;
   const assign_job = activityArray.value.map((item, index) => {
     const activityDesc = activity_desc.value[index]?.trim();
     const goalDesc = goal_desc.value[index]?.trim();
@@ -1599,7 +1769,7 @@ const putData = () => {
         goal_desc: goalDesc,
       };
     } else {
-      return null; 
+      return null;
     }
   });
   const know_ledge = knowledge.value.map((item) => ({
@@ -1607,7 +1777,6 @@ const putData = () => {
     level: item ? item.level : null,
   }));
 
-
   const Productivity_assign = ProductivityArray.value.map((item, index) => {
     const outputDesc = output_desc.value[index]?.trim();
     const indicatorDesc = indicator_desc.value[index]?.trim();
@@ -1615,88 +1784,94 @@ const putData = () => {
     if (outputDesc !== "" && indicatorDesc !== "") {
       return {
         id: index + 1,
-        activity_desc: outputDesc,
-        goal_desc: indicatorDesc,
+        output_desc: outputDesc,
+        indicator_desc: indicatorDesc,
       };
     } else {
-      return null; 
+      return null;
     }
   });
-  const groupData = group.value
-    ? { id: group.value.id, level: group.value.level }
-    : null;
-  const group2Data = group2.value
-    ? { id: group2.value.id, level: group2.value.level }
-    : null;
-  const group3Data = group3.value
-    ? { id: group3.value.id, level: group3.value.level }
-    : null;
 
-  const skillData = skill.value
-    ? { id: skill.value.id, level: skill.value.level }
-    : null;
-  const skill2Data = skill2.value
-    ? { id: skill2.value.id, level: skill2.value.level }
-    : null;
-  const skill3Data = skill3.value
-    ? { id: skill3.value.id, level: skill3.value.level }
-    : null;
-  const skill4Data = skill4.value
-    ? { id: skill4.value.id, level: skill4.value.level }
-    : null;
+  const allGroup = [];
+  if (group.value)
+    allGroup.push({ id: group.value.id, level: group.value.level });
+  if (group2.value)
+    allGroup.push({ id: group2.value.id, level: group2.value.level });
+  if (group3.value)
+    allGroup.push({ id: group3.value.id, level: group3.value.level });
 
-  const mainData = main.value
-    ? { id: main.value.id, level: main.value.level }
-    : null;
-  const main2Data = main2.value
-    ? { id: main2.value.id, level: main2.value.level }
-    : null;
-  const main3Data = main3.value
-    ? { id: main3.value.id, level: main3.value.level }
-    : null;
-  const main4Data = main4.value
-    ? { id: main4.value.id, level: main4.value.level }
-    : null;
-  const main5Data = main5.value
-    ? { id: main5.value.id, level: main5.value.level }
-    : null;
+  const allSkills = [];
+  if (skill.value)
+    allSkills.push({ id: skill.value.id, level: skill.value.level });
+  if (skill2.value)
+    allSkills.push({ id: skill2.value.id, level: skill2.value.level });
+  if (skill3.value)
+    allSkills.push({ id: skill3.value.id, level: skill3.value.level });
+  if (skill4.value)
+    allSkills.push({ id: skill4.value.id, level: skill4.value.level });
+
+  const allCompetency = [];
+  if (main.value)
+    allCompetency.push({ id: skill.value.id, level: main.value.level });
+  if (main2.value)
+    allCompetency.push({ id: main2.value.id, level: main2.value.level });
+  if (main3.value)
+    allCompetency.push({ id: main3.value.id, level: main3.value.level });
+  if (main4.value)
+    allCompetency.push({ id: main4.value.id, level: main4.value.level });
+  if (main5.value)
+    allCompetency.push({ id: main5.value.id, level: main5.value.level });
+
+  const assign_director = [
+    {
+      personal_id: caretakerFoot.value.personal_id,
+      role: "mentor",
+      dated: date2.value instanceof Date ? dateToISO(date2.value) : null,
+    },
+    {
+      personal_id: caretakerFoot2.value.personal_id,
+      role: "mentor",
+      dated: date3.value instanceof Date ? dateToISO(date3.value) : null,
+    },
+    {
+      personal_id: commander.value.personal_id,
+      role: "commander",
+      dated: date4.value instanceof Date ? dateToISO(date4.value) : null,
+    },
+  ];
 
   const data = {
+    personalId: GUID,
     fullname: fullname.value,
     position: position.value,
-    monthSelect: monthSelect.value !== undefined ? parseInt((monthSelect.value as any).value) : null,
-    date_start: date_start.value,
+    monthSelect:monthSelect.value !== null ? parseInt(monthSelect.value) : null,
+    date_start:
+      date_start.value instanceof Date
+        ? dateToISO(date_start.value)
+        : new Date(),
     date_finish: date_finish.value,
-    caretaker_1: caretaker1.value,
-    caretaker_2: caretaker2.value,
-    knowledge: know_ledge,
-    assign_job: assign_job.filter((item) => item !== null),
-    otherlaw: OtherLaw.value,
-    skill: skillData,
-    skill_2: skill2Data,
-    skill_3: skill3Data,
-    skill_4: skill4Data,
-    main: mainData,
-    main_2: main2Data,
-    main_3: main3Data,
-    main_4: main4Data,
-    main_5: main5Data,
-    group: groupData,
-    group_2: group2Data,
-    group_3: group3Data,
-    other: Other.value,
-    other_5: Other5.value,
-    productivity_assign: Productivity_assign.filter((item) => item !== null),
-    commander: commander.value,
-    date_1: date1.value,
-    date_2: date2.value,
-    date_3: date3.value,
-    date_4: date4.value,
+    // caretaker_1: caretaker1.value,
+    // caretaker_2: caretaker2.value,
+    assign_knowledges: know_ledge,
+    assign_jobs: assign_job.filter((item) => item !== null),
+    other_desc: OtherLaw.value,
+    assign_skill: allSkills,
+    assign_competency: allCompetency,
+    assign_competency_group: allGroup,
+    other4_desc: Other.value,
+    other5_no1_desc: Other5.value,
+    assign_outputs: Productivity_assign.filter((item) => item !== null),
+    // commander: commander.value,
+    assign_director: assign_director,
+    experimenter_dated: date1.value instanceof Date ? dateToISO(date1.value) : new Date(),
+    // date_2: date2.value instanceof Date ? dateToISO(date2.value) : new Date(),
+    // date_3: date3.value instanceof Date ? dateToISO(date3.value) : new Date(),
+    // date_4: date4.value instanceof Date ? dateToISO(date4.value) : new Date(),
     fullname_foot: fullnameFoot.value,
     position_foot: positionFoot.value,
-    caretaker_foot: caretakerFoot.value,
-    caretaker_foot2: caretakerFoot2.value,
-    checkarray: checkRule.value
+    // caretaker_foot: caretakerFoot.value,
+    // caretaker_foot2: caretakerFoot2.value,
+    assign_law: checkRule.value
       .filter((item) => item.checked === 1)
       .map((item) => ({
         id: item.id,
@@ -1706,16 +1881,8 @@ const putData = () => {
   console.log("test", data);
 };
 
-const saveData = async () => {
-  // myForm.value.resetValidation();
-  // nameRef.value.validate();
-  // positionRef.value.validate();
-  // monthRef.value.validate();
-  // startDateRef.value.validate();
-  // caregiverRef1.value.validate();
-  // caregiverRef2.value.validate();
-  // workInfopRef.value.validate();
-  myForm.value.validate().then(async (result: boolean) => {
+const saveData = (id: string) => {
+  myForm.value.validate().then((result: boolean) => {
     if (result) {
       $q.dialog({
         title: "บันทึกข้อมูล",
@@ -1726,20 +1893,24 @@ const saveData = async () => {
         },
       })
         .onOk(async () => {
-          // putData();
+          const data = putData(id);
+          await http
+            .post(config.API.saveFinish(id), data)
+            .then(async (res) => {})
+            .catch((e) => {})
+            .finally(async () => {
+              hideLoader();
+            });
         })
         .onCancel(() => {})
         .onDismiss(() => {});
     } else {
-      // ลอง
-      putData();
       notifyError($q, "กรุณากรอกข้อมูลให้ครบ");
     }
   });
 };
 const OtherLaw = ref<string>("");
 
-
 const skill = ref<any>();
 const skill2 = ref<any>();
 const skill3 = ref<any>();
@@ -1783,6 +1954,20 @@ onMounted(async () => {
   await getCompetencyGroup();
   await getSkill();
   await getKnowledge();
+  await getAssignNew(personalId);
+});
+watch(
+  () => [monthSelect.value, date_start.value],
+  () => {
+    if (monthSelect.value !== undefined && date_start.value !== undefined) {
+      postDateTime();
+    }
+  }
+);
+watch(knowledge.value, () => {
+  knowledge.value.forEach((item) => {
+    OPknowledge.value = OPknowledge.value.filter((e) => e.id != item.id);
+  });
 });
 </script>
 <style lang="scss" scoped>
@@ -1813,4 +1998,12 @@ onMounted(async () => {
   align-items: center;
   justify-content: center;
 }
+.q-item span {
+  white-space: normal;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
 </style>
diff --git a/src/modules/05_placement/components/probation/MainProbation.vue b/src/modules/05_placement/components/probation/MainProbation.vue
index 8467377f8..18e4fa248 100644
--- a/src/modules/05_placement/components/probation/MainProbation.vue
+++ b/src/modules/05_placement/components/probation/MainProbation.vue
@@ -84,7 +84,7 @@
             <q-tr
               :props="props"
               class="cursor-pointer"
-              @click="router.push(`/probation/detail/${props.rowIndex + 1}`)"
+              @click="router.push(`/probation/detail/${props.row.personal_id}`)"
             >
               <q-td v-for="col in props.cols" :key="col.name" :props="props">
                 <div v-if="col.name == 'no'">
@@ -257,12 +257,12 @@ const pagination = ref({
 const visibleColumns = ref<string[]>([
   "no",
   "name",
-  "position",
-  "level",
-  "institution",
-  "time",
-  "status",
-  "orderNum",
+  "position_line",
+  "position_level",
+  "organization",
+  "probation_no",
+  "order_number",
+  "probation_status",
 ]); //ค้นหา คอลัมน์ คอลัมน์ที่แสดง
 
 // หัวตาราง
@@ -286,114 +286,63 @@ const columns = ref<QTableProps["columns"]>([
     style: "font-size: 14px",
   },
   {
-    name: "position",
+    name: "position_line",
     align: "left",
     label: "ตำแหน่งในสายงาน",
     sortable: true,
-    field: "position",
+    field: "position_line",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
   {
-    name: "level",
+    name: "position_level",
     align: "left",
     label: "ระดับ",
     sortable: true,
-    field: "level",
+    field: "position_level",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
   {
-    name: "institution",
+    name: "organization",
     align: "left",
     label: "สังกัด",
     sortable: true,
-    field: "institution",
+    field: "organization",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
   {
-    name: "time",
+    name: "probation_no",
     align: "center",
     label: "ครั้งที่ทดลองงาน",
     sortable: true,
-    field: "time",
+    field: "probation_no",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
   {
-    name: "orderNum",
+    name: "order_number",
     align: "center",
     label: "เลขที่คําสั่งบรรจุแต่งตั้ง",
     sortable: true,
-    field: "orderNum",
+    field: "order_number",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
   {
-    name: "status",
+    name: "probation_status",
     align: "left",
     label: "สถานะทดลองงาน",
     sortable: true,
-    field: "status",
+    field: "probation_status",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
 ]);
 
 // ข้อมูลตาราง (จำลอง)
-const rows = ref<FormMainProbation[]>([
-  {
-    no: "1",
-    name: "นายสมคิด ยอดใจ ",
-    position: "นักวิชาการพัสดุ",
-    level: "ปฏิบัติการ",
-    institution: "กลุ่มงานโครงสร้างและอัตรากำลัง ๒",
-    time: "1",
-    status: "อยู่ระหว่างการทดลองงาน",
-    orderNum: "11/2566",
-  },
-  {
-    no: "2",
-    name: "นายเกียรติศักดิ์ บัณฑิต",
-    position: "นักวิชาการพัสดุ",
-    level: "ปฏิบัติการ",
-    institution: "กลุ่มงานโครงสร้างและอัตรากำลัง ๒",
-    time: "1",
-    status: "อยู่ระหว่างการทดลองงาน",
-    orderNum: "11/2566",
-  },
-  {
-    no: "3",
-    name: "นางสาวกัณฐิมา กาฬสินธุ์",
-    position: "นักจัดการงานทั่วไป",
-    level: "ปฏิบัติการ",
-    institution: "กลุ่มงานช่วยนักบริหาร",
-    time: "1",
-    status: "อยู่ระหว่างการทดลองงาน",
-    orderNum: "11/2566",
-  },
-  {
-    no: "4",
-    name: "นางสาวเมขลา กระจ่างมนตรี",
-    position: "นักจัดการงานทั่วไป",
-    level: "ปฏิบัติการ",
-    institution: "กลุ่มงานช่วยนักบริหาร",
-    time: "1",
-    status: "ไม่ผ่านการทดลอง",
-    orderNum: "11/2566",
-  },
-  {
-    no: "5",
-    name: "นางสาวฐิติรัตน์ พงษ์ศิริ",
-    position: "นักจัดการงานทั่วไป",
-    level: "ปฏิบัติการ",
-    institution: "กลุ่มงานช่วยนักบริหาร",
-    time: "1",
-    status: "ผ่านการทดลองงาน",
-    orderNum: "11/2566",
-  },
-]);
+const rows = ref<FormMainProbation[]>([]);
 
 // หัวตาราง2
 const columns2 = ref<QTableProps["columns"]>([
@@ -483,28 +432,37 @@ const rows2 = ref<FormMainProbation2[]>([
   //   },
 ]);
 
-onMounted(async () => {});
-
-watch(modal, () => {
-  if (modal.value === true) {
-    fecthOrganiz();
-  }
+onMounted(async () => {
+  getpersonalList();
 });
 
-const fecthOrganiz = async () => {
+// watch(modal, () => {
+//   if (modal.value === true) {
+//     getpersonalList();
+//   }
+// });
+
+const getpersonalList = async () => {
   showLoader();
   await http
-    .get(config.API.profileOrganizRoot)
+    .get(config.API.personalList())
     .then((res) => {
-      console.log(res);
-      let id = res.data.result[0].id;
-      if (id !== "") {
-        findlist(id);
-      }
-    })
-    .catch((e) => {
-      messageError($q, e);
+      const data = res.data.data;
+      rows.value = data.map((item: FormMainProbation) => ({
+        personal_id: item.personal_id,
+        name: item.name,
+        position_line: item.position_line,
+        position_line_id: item.position_line_id,
+        position_level: item.position_level,
+        position_level_id: item.position_level_id,
+        organization: item.organization,
+        probation_no: item.probation_no,
+        order_number: item.order_number,
+        probation_status: item.probation_status,
+      }));
+      console.log("(data)", data);
     })
+    .catch(() => {})
     .finally(() => {
       hideLoader();
     });
@@ -559,15 +517,11 @@ const clickAdd = (id: string) => {
     .onOk(async () => {
       const postData = {
         personal_id: id,
-      }
+      };
       console.log("postData:", postData);
-      await http
-    .post(config.API.personalAdd(), postData)
-    .then((res) => {
-      console.log("res:", res);
-      
-    });
-
+      await http.post(config.API.personalAdd(), postData).then((res) => {
+        console.log("res:", res);
+      });
     })
     .onCancel(() => {})
     .onDismiss(() => {});
diff --git a/src/modules/05_placement/components/probation/ProbationDetail.vue b/src/modules/05_placement/components/probation/ProbationDetail.vue
index cb43dad2d..628b2f7c0 100644
--- a/src/modules/05_placement/components/probation/ProbationDetail.vue
+++ b/src/modules/05_placement/components/probation/ProbationDetail.vue
@@ -34,19 +34,19 @@
         <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">{{ position }}</div>
+            <div class="col-12 text-detail">{{ position_line }}</div>
           </div>
         </div>
         <div class="col-xs-6 col-sm-2 row items-center">
           <div class="col-12">
             <div class="col-12 text-top">ระดับ</div>
-            <div class="col-12 text-detail">{{ level }}</div>
+            <div class="col-12 text-detail">{{ position_level }}</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">{{ institution }}</div>
+            <div class="col-12 text-detail">{{ organization }}</div>
           </div>
         </div>
         <div class="col-xs-6 col-sm-3 row items-center">
@@ -55,18 +55,18 @@
             <div class="col-12 text-detail">
               <q-icon
                 size="20px"
-                v-if="status == 'อยู่ระหว่างการทดลองงาน'"
+                v-if="probation_status == 'PENDING'"
                 name="mdi-timer-sand"
                 color="deep-orange"
               />
               <q-icon
                 size="20px"
-                v-else-if="status == 'ไม่ผ่านการทดลอง'"
+                v-else-if="probation_status == 'ไม่ผ่านการทดลอง'"
                 name="mdi-close"
                 color="red"
               />
               <q-icon size="20px" v-else name="mdi-check" color="teal" />
-              {{ status }}
+              {{ probation_status == 'PENDING' ? 'อยู่ในระหว่างการทดลองงาน' : '' }}
             </div>
           </div>
         </div>
@@ -78,7 +78,7 @@
       <div class="row col-12 q-col-gutter-sm">
         <div>
           <q-btn
-            @click="router.push(`/probation/add`)"
+            @click="router.push(`/probation/add/${personalId}`)"
             size="12px"
             flat
             round
@@ -191,17 +191,26 @@
 </template>
 <script setup lang="ts">
 import { useRouter, useRoute } from "vue-router";
-import { ref, useAttrs } from "vue";
+import { ref, useAttrs,onMounted } from "vue";
 import type { QTableProps } from "quasar";
 import type { FormProbationDetail } from "@/modules/05_placement/interface/request/Main";
+import type { FormProbationPersonal } from "@/modules/05_placement/interface/request/Main";
+import { useCounterMixin } from "@/stores/mixin";
+import { useQuasar } from "quasar";
+import http from "@/plugins/http";
+import config from "@/app.config";
+
+const $q = useQuasar(); //ใช้ noti quasar
+const mixin = useCounterMixin();
+const { messageError, success, showLoader, hideLoader } = mixin;
 const router = useRouter();
 const route = useRoute();
-
-const name = ref<string>("นายสมคิด ยอดใจ");
-const position = ref<string>("นักจัดการงานทั่วไป");
-const level = ref<string>("ชำนาญการพิเศษ");
-const institution = ref<string>("ฝ่ายบริหารงานทั่วไป");
-const status = ref<string>("อยู่ระหว่างการทดลองงาน");
+const personalId = ref<string>(route.params.id as string);
+const name = ref<string>("");
+const position_line = ref<string>("");
+const position_level = ref<string>("");
+const organization = ref<string>("");
+const probation_status = ref<string>("");
 
 const pagination = ref({
   sortBy: "desc",
@@ -314,6 +323,42 @@ const paginationLabel = (start: string, end: string, total: string) => {
   if (paging.value == true) return " " + start + "-" + end + " ใน " + total;
   else return start + "-" + end + " ใน " + total;
 };
+const getpersonalList = async () => {
+  showLoader();
+  await http
+    .get(config.API.personal(personalId.value))
+    .then((res) => {
+      const data = res.data.data;
+      name.value = data.name
+      position_line.value = data.position_line
+      position_level.value = data.position_level
+      organization.value = data.organization
+      probation_status.value = data.probation_status
+
+      // rows.value = data.map((item: FormProbationPersonal) => ({
+      //   personal_id: item.personal_id,
+      //   name: item.name,
+      //   position_line: item.position_line,
+      //   position_line_id: item.position_line_id,
+      //   position_level: item.position_level,
+      //   position_level_id: item.position_level_id,
+      //   organization: item.organization,
+      //   probation_no: item.probation_no,
+      //   order_number: item.order_number,
+      //   probation_status: item.probation_status,
+      // }));
+      console.log("(data)", data);
+    })
+    .catch(() => {})
+    .finally(() => {
+      hideLoader();
+    });
+};
+
+onMounted(async () => {
+  await getpersonalList()
+  console.log()
+})
 </script>
 <style lang="scss" scope>
 .q-img {
diff --git a/src/modules/05_placement/interface/request/Main.ts b/src/modules/05_placement/interface/request/Main.ts
index 84af7910f..1da302c4c 100644
--- a/src/modules/05_placement/interface/request/Main.ts
+++ b/src/modules/05_placement/interface/request/Main.ts
@@ -24,14 +24,17 @@ interface FormOrderPlacementMainData {
 }
 
 interface FormMainProbation {
-  no: string;
-  name: string;
-  position: string;
-  level: string;
-  institution: string;
-  time: string;
-  status: string;
-  orderNum: string;
+  personal_id: number,
+  ordering: number,
+  name: string,
+  position_line: string,
+  position_line_id: string,
+  position_level: string,
+  position_level_id: string,
+  organization: string,
+  probation_no: number,
+  order_number: string,
+  probation_status: string
 }
 interface FormMainProbation2 {
   no: string;
@@ -47,8 +50,21 @@ interface FormProbationDetail {
   intendant: string;
   commander: string;
 }
+interface FormProbationPersonal {
+  personal_id: string,
+  name: string,
+  position_line: string,
+  position_line_id: string,
+  position_level: string,
+  position_level_id: string,
+  organization: string,
+  probation_no: number,
+  order_number: string,
+  probation_status: string
+}
 export type { FormPlacementMainData };
 export type { FormOrderPlacementMainData };
 export type { FormMainProbation };
 export type { FormMainProbation2 };
 export type { FormProbationDetail };
+export type { FormProbationPersonal };
diff --git a/src/modules/05_placement/router.ts b/src/modules/05_placement/router.ts
index b6e30b8d2..d99900d33 100644
--- a/src/modules/05_placement/router.ts
+++ b/src/modules/05_placement/router.ts
@@ -165,7 +165,7 @@ export default [
     },
   },
   {
-    path: "/probation/add",
+    path: "/probation/add/:personalId",
     name: "probationWorkAdd",
     component: probationFormAssign,
     meta: {

From 8ebd5f3b901329123a9037e5684022dfe03e3309 Mon Sep 17 00:00:00 2001
From: waruneeta <warunee.auy@gmail.com>
Date: Wed, 9 Aug 2023 12:39:54 +0700
Subject: [PATCH 062/113] edit go to step order process

---
 .../OrderPlacement/MainOrderPlacement.vue     | 21 ++++-
 .../OrderPlacement/detailOrderPlacement.vue   | 78 +++++++------------
 2 files changed, 44 insertions(+), 55 deletions(-)

diff --git a/src/modules/05_placement/components/OrderPlacement/MainOrderPlacement.vue b/src/modules/05_placement/components/OrderPlacement/MainOrderPlacement.vue
index 0b8339982..ea400107e 100644
--- a/src/modules/05_placement/components/OrderPlacement/MainOrderPlacement.vue
+++ b/src/modules/05_placement/components/OrderPlacement/MainOrderPlacement.vue
@@ -156,7 +156,7 @@
               <q-tr
                 :props="props"
                 class="cursor-pointer"
-                @click="redirectToPage(props.row.orderId)"
+                @click="redirectToPage(props.row.orderId, props.row.OrderStatus)"
               >
                 <q-td key="Order" :props="props">
                   {{ props.row.Order }}
@@ -399,8 +399,23 @@ const OriginalDataFetch = async () => {
 };
 
 // ดูรายการหน้าต่อไป
-const redirectToPage = (id?: string) => {
-  router.push(`/placement/order/detail/${id}`);
+const redirectToPage = (id?: string, status?: string) => {
+ let step = 1;
+  switch (status) {
+    case 'จัดทำร่างคำสั่ง':
+      step = 1;
+      break;
+      case 'บัญชีแนบท้าย':
+      step = 2;
+      break;
+      case 'เลือกผู้ได้รับสำเนาคำสั่ง':
+      step = 3;
+      break;
+      case 'รอผู้มีอำนาจลงนาม':
+      step = 4;
+      break;
+  }
+  router.push(`/placement/order/detail/${id}?step=${step}`);
 };
 
 const clickDelete = (id: string) => {
diff --git a/src/modules/05_placement/components/OrderPlacement/detailOrderPlacement.vue b/src/modules/05_placement/components/OrderPlacement/detailOrderPlacement.vue
index 6188a047a..2dd25af95 100644
--- a/src/modules/05_placement/components/OrderPlacement/detailOrderPlacement.vue
+++ b/src/modules/05_placement/components/OrderPlacement/detailOrderPlacement.vue
@@ -1,56 +1,16 @@
 <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), destroyLocalStorage()"
-    />
+    <q-btn icon="mdi-arrow-left" unelevated round dense flat color="primary" class="q-mr-sm" @click="router.go(-1), destroyLocalStorage()" />
     ออกคำสั่ง
   </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-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="2" title="เลือกรายชื่อ" prefix="2" :done="step > 2" :header-nav="step > 2" />
 
-      <q-step
-        :name="3"
-        title="เลือกรายชื่อส่งสำเนาคำสั่ง"
-        prefix="3"
-        :done="step > 3"
-        :header-nav="step > 3"
-      />
-      <q-step
-        :name="4"
-        title="รายละเอียดคำสั่งและแนบท้าย"
-        prefix="4"
-        :done="step > 4"
-        :header-nav="step > 4"
-      />
+      <q-step :name="3" title="เลือกรายชื่อส่งสำเนาคำสั่ง" prefix="3" :done="step > 3" :header-nav="step > 3" />
+      <q-step :name="4" title="รายละเอียดคำสั่งและแนบท้าย" prefix="4" :done="step > 4" :header-nav="step > 4" />
       <template v-slot:message>
         <step01 v-if="step === 1" :next="nextStep" :previous="previousStep" />
         <step02 v-if="step === 2" :next="nextStep" :previous="previousStep" />
@@ -70,6 +30,7 @@ import http from "@/plugins/http";
 import config from "@/app.config";
 const route = useRoute();
 
+
 const orderId_params = route.params.orderid;
 const probationData = useProbationDataStore();
 const { stepOrder, setStepOrder } = probationData;
@@ -92,13 +53,14 @@ const step04 = defineAsyncComponent(
 );
 
 const router = useRouter();
-const step = ref<number>(1);
+const step = ref<number>(0);
 const stepper = ref<QStepper>();
 const orderId = ref<string>("");
 
 onUnmounted(() => {
   destroyLocalStorage();
 });
+
 const nextStep = async () => {
   stepper.value!.next();
   localStorage.setItem("currentStep", step.value.toString());
@@ -115,7 +77,7 @@ const nextStep = async () => {
 };
 const previousStep = async () => {
   stepper.value!.previous();
-  localStorage.setItem("currentStep", step.value.toString());
+  // localStorage.setItem("currentStep", step.value.toString());
   if (orderId.value) {
     await http
       .put(config.API.prevStep(orderId.value))
@@ -130,14 +92,24 @@ const previousStep = async () => {
 const destroyLocalStorage = () => {
   localStorage.clear();
 };
+
 onMounted(() => {
-  const currentStep = localStorage.getItem("currentStep");
-  if (currentStep) {
-    step.value = Number(currentStep);
+  // console.log("route query===>", route.query)
+  if (route.query.step) {
+    step.value = Number(route.query.step)
+    localStorage.setItem("currentStep", step.value.toString());
+  } else {
+    const currentStep = localStorage.getItem("currentStep");
+    if (currentStep) {
+      step.value = Number(currentStep);
+    } else {
+      step.value = 1;
+    }
   }
+
   if (orderId_params !== undefined) {
     orderId.value = orderId_params.toString();
-    console.log(orderId.value);
+    //   console.log(orderId.value);
   }
 });
 </script>
@@ -145,11 +117,13 @@ onMounted(() => {
 .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;
 }

From fe2adde41a8ff8cf6404d401a85d5e9b3a994b0f Mon Sep 17 00:00:00 2001
From: waruneeta <warunee.auy@gmail.com>
Date: Wed, 9 Aug 2023 13:12:31 +0700
Subject: [PATCH 063/113] =?UTF-8?q?=E0=B9=81=E0=B8=81=E0=B9=89=20url=20api?=
 =?UTF-8?q?=20=E0=B8=97=E0=B8=94=E0=B8=A5=E0=B8=AD=E0=B8=87=E0=B8=87?=
 =?UTF-8?q?=E0=B8=B2=E0=B8=99=20=E0=B9=81=E0=B8=A5=E0=B8=B0=E0=B9=81?=
 =?UTF-8?q?=E0=B8=81=E0=B9=89=E0=B9=84=E0=B8=82=20process=20=E0=B8=81?=
 =?UTF-8?q?=E0=B8=B2=E0=B8=A3=E0=B9=80=E0=B8=9E=E0=B8=B4=E0=B9=88=E0=B8=A1?=
 =?UTF-8?q?=E0=B8=84=E0=B8=99=E0=B9=80=E0=B8=82=E0=B9=89=E0=B8=B2=E0=B8=A3?=
 =?UTF-8?q?=E0=B8=B0=E0=B8=9A=E0=B8=9A=E0=B8=97=E0=B8=94=E0=B8=A5=E0=B8=AD?=
 =?UTF-8?q?=E0=B8=87=E0=B8=87=E0=B8=B2=E0=B8=99?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/index.ts                              |   2 +-
 .../components/probation/MainProbation.vue    | 212 ++++++------------
 2 files changed, 66 insertions(+), 148 deletions(-)

diff --git a/src/api/index.ts b/src/api/index.ts
index 660556e1d..4b6fabe6d 100644
--- a/src/api/index.ts
+++ b/src/api/index.ts
@@ -26,7 +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: "http://192.168.1.151:7776/v1",
+    API_PROBATION_URI: "https://ehr.joolsoft.com/v1",
   },
   test: {
     API_URI: "http://localhost:5010/api/v1",
diff --git a/src/modules/05_placement/components/probation/MainProbation.vue b/src/modules/05_placement/components/probation/MainProbation.vue
index 18e4fa248..1fabf0f9e 100644
--- a/src/modules/05_placement/components/probation/MainProbation.vue
+++ b/src/modules/05_placement/components/probation/MainProbation.vue
@@ -6,73 +6,28 @@
     <div class="row q-col-gutter-sm">
       <div class="row col-12 q-col-gutter-sm">
         <div>
-          <q-btn
-            @click="modal = true"
-            size="12px"
-            flat
-            round
-            color="add"
-            icon="mdi-plus"
-          >
+          <q-btn @click="modal = true" size="12px" flat round color="add" icon="mdi-plus">
             <q-tooltip>เพิ่มผู้ทดลองปฏิบัติหน้าที่ราชการ</q-tooltip>
           </q-btn>
         </div>
         <q-space />
 
-        <q-input
-          class="col-xs-12 col-sm-3 col-md-2"
-          standout
-          dense
-          v-model="filterKeyword"
-          ref="filterRef"
-          outlined
-          debounce="300"
-          placeholder="ค้นหา"
-        >
+        <q-input class="col-xs-12 col-sm-3 col-md-2" standout dense v-model="filterKeyword" ref="filterRef" outlined
+          debounce="300" placeholder="ค้นหา">
           <template v-slot:append>
             <q-icon v-if="filterKeyword == ''" name="search" />
-            <q-icon
-              v-if="filterKeyword !== ''"
-              name="clear"
-              class="cursor-pointer"
-              @click="resetFilter"
-            />
+            <q-icon v-if="filterKeyword !== ''" name="clear" class="cursor-pointer" @click="resetFilter" />
           </template>
         </q-input>
 
-        <q-select
-          v-model="visibleColumns"
-          multiple
-          outlined
-          dense
-          options-dense
-          :display-value="$q.lang.table.columns"
-          emit-value
-          map-options
-          :options="columns"
-          option-value="name"
-          options-cover
-          style="min-width: 150px"
-          class="col-xs-12 col-sm-3 col-md-2"
-        />
+        <q-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" />
       </div>
       <div class="col-12">
-        <q-table
-          ref="table"
-          :columns="columns"
-          :rows="rows"
-          :filter="filterKeyword"
-          row-key="Order"
-          flat
-          bordered
-          :paging="true"
-          dense
-          class="custom-header-table"
-          v-bind="attrs"
-          :visible-columns="visibleColumns"
-          :pagination-label="paginationLabel"
-          v-model:pagination="pagination"
-        >
+        <q-table ref="table" :columns="columns" :rows="rows" :filter="filterKeyword" row-key="Order" flat bordered
+          :paging="true" dense class="custom-header-table" v-bind="attrs" :visible-columns="visibleColumns"
+          :pagination-label="paginationLabel" v-model:pagination="pagination">
           <template v-slot:header="props">
             <q-tr :props="props">
               <q-th v-for="col in props.cols" :key="col.name" :props="props">
@@ -81,11 +36,8 @@
             </q-tr>
           </template>
           <template v-slot:body="props">
-            <q-tr
-              :props="props"
-              class="cursor-pointer"
-              @click="router.push(`/probation/detail/${props.row.personal_id}`)"
-            >
+            <q-tr :props="props" class="cursor-pointer"
+              @click="router.push(`/probation/detail/${props.row.personal_id}`)">
               <q-td v-for="col in props.cols" :key="col.name" :props="props">
                 <div v-if="col.name == 'no'">
                   {{ props.rowIndex + 1 }}
@@ -108,16 +60,8 @@
             </q-tr>
           </template>
           <template v-slot:pagination="scope">
-            <q-pagination
-              v-model="pagination.page"
-              active-color="primary"
-              color="dark"
-              :max="scope.pagesNumber"
-              :max-pages="5"
-              size="sm"
-              boundary-links
-              direction-links
-            ></q-pagination>
+            <q-pagination v-model="pagination.page" active-color="primary" color="dark" :max="scope.pagesNumber"
+              :max-pages="5" size="sm" boundary-links direction-links></q-pagination>
           </template>
         </q-table>
       </div>
@@ -127,55 +71,23 @@
   <q-dialog v-model="modal" persistent>
     <q-card style="width: 900px; max-width: 80vw">
       <q-form ref="myForm">
-        <DialogHeader
-          tittle="เพิ่มผู้ทดลองปฏิบัติหน้าที่ราชการ "
-          :close="clickClose"
-        />
+        <DialogHeader tittle="เพิ่มผู้ทดลองปฏิบัติหน้าที่ราชการ " :close="clickClose" />
         <q-separator />
         <q-card-section class="q-pa-md q-col-gutter-sm">
-          <q-input
-            class="col-12"
-            standout
-            dense
-            v-model="filterKeyword2"
-            ref="filterRef2"
-            outlined
-            debounce="300"
-            placeholder="ค้นหา"
-          >
+          <q-input class="col-12" standout dense v-model="filterKeyword2" ref="filterRef2" outlined debounce="300"
+            placeholder="ค้นหา">
             <template v-slot:append>
               <q-icon v-if="filterKeyword2 == ''" name="search" />
-              <q-icon
-                v-if="filterKeyword2 !== ''"
-                name="clear"
-                class="cursor-pointer"
-                @click="resetFilter2"
-              />
+              <q-icon v-if="filterKeyword2 !== ''" name="clear" class="cursor-pointer" @click="resetFilter2" />
             </template>
           </q-input>
           <div class="col-12">
-            <q-table
-              ref="table2"
-              :columns="columns2"
-              :rows="rows2"
-              :filter="filterKeyword2"
-              row-key="Order"
-              flat
-              bordered
-              :paging="true"
-              dense
-              class="custom-header-table"
-              v-bind="attrs"
-              :pagination-label="paginationLabel"
-              v-model:pagination="pagination"
-            >
+            <q-table ref="table2" :columns="columns2" :rows="rows2" :filter="filterKeyword2" row-key="Order" flat bordered
+              :paging="true" dense class="custom-header-table" v-bind="attrs" :pagination-label="paginationLabel"
+              v-model:pagination="pagination">
               <template v-slot:header="props">
                 <q-tr :props="props">
-                  <q-th
-                    v-for="col in props.cols"
-                    :key="col.name"
-                    :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 />
@@ -183,11 +95,7 @@
               </template>
               <template v-slot:body="props">
                 <q-tr :props="props" class="cursor-pointer">
-                  <q-td
-                    v-for="col in props.cols"
-                    :key="col.name"
-                    :props="props"
-                  >
+                  <q-td v-for="col in props.cols" :key="col.name" :props="props">
                     <div v-if="col.name == 'no'">
                       {{ props.rowIndex + 1 }}
                     </div>
@@ -196,29 +104,14 @@
                     </div>
                   </q-td>
                   <q-td auto-width>
-                    <q-btn
-                      dense
-                      class="q-px-md"
-                      outline
-                      color="primary"
-                      label="เพิ่ม"
-                      @click="clickAdd(props.row.id)"
-                    >
+                    <q-btn dense class="q-px-md" outline color="primary" label="เพิ่ม" @click="clickAdd(props.row.id)">
                     </q-btn>
                   </q-td>
                 </q-tr>
               </template>
               <template v-slot:pagination="scope">
-                <q-pagination
-                  v-model="pagination.page"
-                  active-color="primary"
-                  color="dark"
-                  :max="scope.pagesNumber"
-                  :max-pages="5"
-                  size="sm"
-                  boundary-links
-                  direction-links
-                ></q-pagination>
+                <q-pagination v-model="pagination.page" active-color="primary" color="dark" :max="scope.pagesNumber"
+                  :max-pages="5" size="sm" boundary-links direction-links></q-pagination>
               </template>
             </q-table>
           </div>
@@ -436,11 +329,11 @@ onMounted(async () => {
   getpersonalList();
 });
 
-// watch(modal, () => {
-//   if (modal.value === true) {
-//     getpersonalList();
-//   }
-// });
+watch(modal, () => {
+  if (modal.value === true) {
+    fecthlistPersonal();
+  }
+});
 
 const getpersonalList = async () => {
   showLoader();
@@ -462,12 +355,30 @@ const getpersonalList = async () => {
       }));
       console.log("(data)", data);
     })
-    .catch(() => {})
+    .catch(() => { })
     .finally(() => {
       hideLoader();
     });
 };
 
+// fecth profile
+const fecthlistPersonal = async () => {
+  showLoader();
+  await http
+    .get(config.API.profileOrganizRoot)
+    .then((res) => {
+      const id = res.data.result[0].id;
+      if (id !== "") {
+        findlist(id);
+      }
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+};
 const findlist = async (id: string) => {
   let data = [
     { criteriaType: "is_retire", criteriaValue: "false" },
@@ -478,7 +389,7 @@ const findlist = async (id: string) => {
       criterias: data,
     })
     .then((res) => {
-      console.log("res:", res);
+      // console.log("res:", res);
       rows2.value = res.data.result.map((e: any) => ({
         id: e.id,
         fullname: e.fullname,
@@ -499,9 +410,9 @@ const clickDelete = (id: string) => {
     },
     persistent: true,
   })
-    .onOk(async () => {})
-    .onCancel(() => {})
-    .onDismiss(() => {});
+    .onOk(async () => { })
+    .onCancel(() => { })
+    .onDismiss(() => { });
 };
 
 const clickAdd = (id: string) => {
@@ -515,16 +426,23 @@ const clickAdd = (id: string) => {
     persistent: true,
   })
     .onOk(async () => {
+      showLoader()
       const postData = {
         personal_id: id,
       };
-      console.log("postData:", postData);
+      // console.log("postData:", postData);
       await http.post(config.API.personalAdd(), postData).then((res) => {
-        console.log("res:", res);
+        // console.log("res:", res);
+        getpersonalList();
+      }).catch((e) => {
+        messageError($q, e);
+      }).finally(() => {
+        clickClose()
+        hideLoader()
       });
     })
-    .onCancel(() => {})
-    .onDismiss(() => {});
+    .onCancel(() => { })
+    .onDismiss(() => { });
 };
 
 const clickClose = async () => {

From c3e0c41e80479554273507880650386b95912b6f Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Wed, 9 Aug 2023 14:46:46 +0700
Subject: [PATCH 064/113] =?UTF-8?q?=E0=B8=9C=E0=B8=B9=E0=B8=81=20API=20?=
 =?UTF-8?q?=E0=B8=A3=E0=B8=B0=E0=B8=9A=E0=B8=9A=E0=B8=A5=E0=B8=B2=E0=B8=AD?=
 =?UTF-8?q?=E0=B8=AD=E0=B8=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/06_retirement/api.retirement.ts       |   8 +-
 .../components/resign/Resign.vue              | 213 ++++---
 .../components/resign/ResignByid.vue          | 580 +++++++++---------
 3 files changed, 432 insertions(+), 369 deletions(-)

diff --git a/src/api/06_retirement/api.retirement.ts b/src/api/06_retirement/api.retirement.ts
index d8e373cb4..56df2a452 100644
--- a/src/api/06_retirement/api.retirement.ts
+++ b/src/api/06_retirement/api.retirement.ts
@@ -14,6 +14,12 @@ export default {
 
     //RetirementDeceased ถึงแก่กรรม
     listDeceased: () => `${retirement}/deceased`,
-    detailDeceased: (id: string) => `${retirement}/deceased/${id}`
+    detailDeceased: (id: string) => `${retirement}/deceased/${id}`,
+
+    // RetirementResign ระบบลาออก
+    listResign: () => `${retirement}/resign`,
+    resingByid: (id: string) => `${retirement}/resign/${id}`,
+    resignConfirm: (id: string) => `${retirement}/resign/confirm/${id}`,
+    resignReject: (id: string) => `${retirement}/resign/reject/${id}`,
 
 };
diff --git a/src/modules/06_retirement/components/resign/Resign.vue b/src/modules/06_retirement/components/resign/Resign.vue
index 8e936dcf9..a4e9f499b 100644
--- a/src/modules/06_retirement/components/resign/Resign.vue
+++ b/src/modules/06_retirement/components/resign/Resign.vue
@@ -1,34 +1,18 @@
 <script setup lang="ts">
-import { ref } from "vue";
+import { ref, onMounted } from "vue";
 import type { QTableProps } from "quasar";
+import { useQuasar } from "quasar";
 import { useRouter } from "vue-router";
-const router = useRouter();
-const pagination = ref({
-    sortBy: "desc",
-    descending: false,
-    page: 1,
-    rowsPerPage: 10,
-  });
-  const paging = ref<boolean>(true);
-  const paginationLabel = (start: string, end: string, total: string) => {
-    if (paging.value == true) return " " + start + "-" + end + " ใน " + total;
-    else return start + "-" + end + " ใน " + total;
-  };
-const visibleColumns = ref<string[]>([ "prefix", "fullname", "positionType", "position", "positionLevel", "positionExecutive", "oc", "status",]); //ค้นหา คอลัมน์ คอลัมน์ที่แสดง
-const filterKeyword = ref<string>("");
-const filterRef = ref<any>(null);
-const resetFilter = () => {
-  filterKeyword.value = "";
-  filterRef.value.focus();
-};
+import { useCounterMixin } from "@/stores/mixin";
+import http from "@/plugins/http";
+import config from "@/app.config";
 
-// const nextPage = (id:string) => {
-//   router.push("/retirement/resign/"+id);
-// };
-const rows = ref<any>([
-  { personalId:"0a846508-4932-40de-9a9e-5b519492217c",prefix: "นางสาว", fullname: "นางสาวอย พชช", positionType: "บริหาร", position: "นักบริหาร", positionLevel: "ต้น", positionExecutive: "ผู้ช่วยหัวหน้าสำนักงาน", oc: "สำนักงานคณะกรรมการข้าราชการกรุงเทพมหานคร", status: "ยื่นลาออก",},
-  { personalId:"0a846508-4932-40de-9a9e-5b519492227c",prefix: "นางสาว", fullname: "นางสาววญ สพ", positionType: "วิชาการ", position: "นักจัดการงานทั่วไป", positionLevel: "ปฏิบัติการ", positionExecutive: "-", oc: "กลุ่มงานช่วยนักบริหาร", status: "ยื่นลาออก",},
-]);
+const router = useRouter();
+const mixin = useCounterMixin();
+const { messageError, date2Thai, showLoader, hideLoader } = mixin;
+const $q = useQuasar(); //ใช้ noti quasar
+
+const rows = ref<any>([]);
 const columns = ref<QTableProps["columns"]>([
   {
     name: "prefix",
@@ -103,6 +87,72 @@ const columns = ref<QTableProps["columns"]>([
     style: "font-size: 14px",
   },
 ]);
+const visibleColumns = ref<string[]>([
+  "prefix",
+  "fullname",
+  "positionType",
+  "position",
+  "positionLevel",
+  "positionExecutive",
+  "oc",
+  "status",
+]);
+
+onMounted(async () => {
+  await fecthlist();
+});
+
+const fecthlist = async () => {
+  showLoader();
+  await http
+    .get(config.API.listResign())
+    .then((res: any) => {
+      console.log(res);
+      let data = res.data.result;
+      rows.value = data.map((e: any) => ({
+        personalId: e.id,
+        profileId: e.profileId,
+        prefix: e.prefix,
+        fullname: e.firstName + "   " + e.lastName,
+        positionType: e.positionType,
+        position: e.positionLine,
+        positionLevel: e.positionLevel,
+        positionExecutive: e.positionExecutive,
+        oc: e.organizationOrganization,
+        status: e.status,
+      }));
+    })
+    .catch((e: any) => {
+      console.log(e);
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+};
+
+const paging = ref<boolean>(true);
+const pagination = ref({
+  sortBy: "desc",
+  descending: false,
+  page: 1,
+  rowsPerPage: 10,
+});
+const paginationLabel = (start: string, end: string, total: string) => {
+  if (paging.value == true) return " " + start + "-" + end + " ใน " + total;
+  else return start + "-" + end + " ใน " + total;
+};
+//ค้นหา คอลัมน์ คอลัมน์ที่แสดง
+const filterKeyword = ref<string>("");
+const filterRef = ref<any>(null);
+const resetFilter = () => {
+  filterKeyword.value = "";
+  filterRef.value.focus();
+};
+
+// const nextPage = (id:string) => {
+//   router.push("/retirement/resign/"+id);
+// };
 </script>
 <template>
   <div class="toptitle text-dark col-12 row items-center">รายการลาออก</div>
@@ -111,25 +161,6 @@ const columns = ref<QTableProps["columns"]>([
     <div class="col-12 row q-pa-md">
       <div class="row col-12">
         <div class="row col-12 q-col-gutter-sm">
-          <!-- <q-select
-            v-model="fiscalyear"
-            label="ปีงบประมาณ"
-            dense
-            emit-value
-            map-options
-            :options="fiscalyearOP"
-            option-value="id"
-            option-label="name"
-            lazy-rules
-            hide-bottom-space
-            :readonly="false"
-            :borderless="false"
-            :outlined="true"
-            :hide-dropdown-icon="false"
-            style="min-width: 150px"
-            @update:model-value="searchFilterTable"
-          /> -->
-
           <q-space />
 
           <q-input
@@ -183,19 +214,23 @@ const columns = ref<QTableProps["columns"]>([
             class="custom-header-table"
             :visible-columns="visibleColumns"
             :pagination-label="paginationLabel"
-              v-model:pagination="pagination"
+            v-model:pagination="pagination"
           >
-          
             <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=" router.push(`/retirement/resign/${props.rowIndex + 1}`)">
+              <q-tr
+                :props="props"
+                class="cursor-pointer"
+                @click="
+                  router.push(`/retirement/resign/${props.row.personalId}`)
+                "
+              >
                 <!-- <q-td key="no" :props="props">
                   {{ props.rowIndex + 1 }}
                 </q-td> -->
@@ -220,10 +255,22 @@ const columns = ref<QTableProps["columns"]>([
                 <q-td key="oc" :props="props">
                   {{ props.row.oc }}
                 </q-td>
-                <q-td key="status" :props="props">
-                  {{ props.row.status }}
-                </q-td>
 
+                <q-td key="status" :props="props">
+                  <q-icon
+                    size="20px"
+                    v-if="props.row.status == 'PENDING'"
+                    name="mdi-timer-sand"
+                    color="deep-orange"
+                  >
+                    <q-tooltip>รอดำเนินการ</q-tooltip>
+                  </q-icon>
+                  <q-icon size="20px" v-else name="mdi-check" color="teal">
+                    <q-tooltip>เสร็จสิ้น</q-tooltip>
+                  </q-icon>
+
+                  <!-- {{ props.row.status }} -->
+                </q-td>
               </q-tr>
             </template>
             <template v-slot:pagination="scope">
@@ -245,34 +292,34 @@ const columns = ref<QTableProps["columns"]>([
   </q-card>
 </template>
 <style scoped lang="scss">
-  .custom-header-table {
-    max-height: 64vh;
-  
-    .q-table tr:nth-child(odd) td {
-      background: white;
-    }
-  
-    .q-table tr:nth-child(even) td {
-      background: #f8f8f8;
-    }
-  
-    .q-table thead tr {
-      background: #ecebeb;
-    }
-  
-    .q-table thead tr th {
-      position: sticky;
-      z-index: 1;
-    }
-  
-    /* this will be the loading indicator */
-    .q-table thead tr:last-child th {
-      /* height of all previous header rows */
-      top: 48px;
-    }
-  
-    .q-table thead tr:first-child th {
-      top: 0;
-    }
+.custom-header-table {
+  max-height: 64vh;
+
+  .q-table tr:nth-child(odd) td {
+    background: white;
   }
-</style>
\ No newline at end of file
+
+  .q-table tr:nth-child(even) td {
+    background: #f8f8f8;
+  }
+
+  .q-table thead tr {
+    background: #ecebeb;
+  }
+
+  .q-table thead tr th {
+    position: sticky;
+    z-index: 1;
+  }
+
+  /* this will be the loading indicator */
+  .q-table thead tr:last-child th {
+    /* height of all previous header rows */
+    top: 48px;
+  }
+
+  .q-table thead tr:first-child th {
+    top: 0;
+  }
+}
+</style>
diff --git a/src/modules/06_retirement/components/resign/ResignByid.vue b/src/modules/06_retirement/components/resign/ResignByid.vue
index 8c191671d..87822d692 100644
--- a/src/modules/06_retirement/components/resign/ResignByid.vue
+++ b/src/modules/06_retirement/components/resign/ResignByid.vue
@@ -1,106 +1,146 @@
 <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)"
-        />
-        รายละเอียดการลาออกของ {{ name }}
-				
+  <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)"
+    />
+    รายละเอียดการลาออกของ
+    {{ dataDetail.firstName + "  " + dataDetail.lastName }}
+  </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">
+        {{ dataDetail.firstName + "  " + dataDetail.lastName }}
+      </div>
+      <q-space />
+      <q-btn
+        outline
+        color="blue"
+        dense
+        icon-right="mdi-open-in-new"
+        class="q-px-sm"
+        label="ดูข้อมูลทะเบียนประวัติ"
+        @click="redirectToRegistry(dataDetail.profileId)"
+      />
     </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">{{ name }}</div>
-				<q-space />
-				<q-btn outline color="blue" dense icon-right="mdi-open-in-new" 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-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">{{position}}</div>
-						</div>
-					</div>
-					<div class="col-xs-6 col-sm-2 row items-center">
-						<div class="col-12">
-							<div class="col-12 text-top">ระดับ</div>
-							<div class="col-12 text-detail">{{level}}</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">{{institution}}</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">
-								<q-icon size="20px" v-if="status == 'อยู่ระหว่างการพิจารณา'" name="mdi-timer-sand" color="deep-orange" />
-								<q-icon size="20px" v-else-if="status == 'อนุมัติ'" name="mdi-close" color="red" />
-								<q-icon size="20px" v-else name="mdi-check" color="teal" />
-								{{ status }}
-							</div>
-						</div>
-					</div>
-				</div>
-			</div>
-    </q-card>
+    <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">{{ dataDetail.positionLine }}</div>
+          </div>
+        </div>
+        <div class="col-xs-6 col-sm-2 row items-center">
+          <div class="col-12">
+            <div class="col-12 text-top">ระดับ</div>
+            <div class="col-12 text-detail">{{ dataDetail.positionLevel }}</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">
+              {{ dataDetail.organizationOrganization }}
+            </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">
+              <q-icon
+                size="20px"
+                v-if="dataDetail.status == 'PENDING'"
+                name="mdi-timer-sand"
+                color="deep-orange"
+              />
+              <q-icon
+                size="20px"
+                v-else-if="dataDetail.status == 'APPROVE'"
+                name="mdi-check"
+                color="teal"
+              />
+              <q-icon size="20px" v-else name="mdi-close" color="red" />
+              {{ statusName(dataDetail.status) }}
+            </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-x-sm">
-					<q-btn outline color="primary" dense icon-right="check" class="q-px-sm" label="อนุมัติ" @click="popUp('pass')" />
-					<q-btn outline color="red" dense icon-right="close" class="q-px-sm" label="ยับยั้ง" @click="popUp('passNot')"/>
+  <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-x-sm" v-if="dataDetail.status === 'PENDING'">
+        <q-btn
+          outline
+          color="primary"
+          dense
+          icon-right="check"
+          class="q-px-sm"
+          label="อนุมัติ"
+          @click="popUp('pass')"
+        />
+        <q-btn
+          outline
+          color="red"
+          dense
+          icon-right="close"
+          class="q-px-sm"
+          label="ยับยั้ง"
+          @click="popUp('passNot')"
+        />
+      </div>
+    </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">{{ dataDetail.location }}</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">
+              {{ date2Thai(dataDetail.sendDate) }}
+            </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">{{ dataDetail.reason }}</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">
+              {{ date2Thai(dataDetail.activeDate) }}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </q-card>
 
-				</div>
-				
-			</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">{{location}}</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">{{filingDate}}</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">{{reason}}</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">{{requestDate}}</div>
-						</div>
-					</div>
-				</div>
-			</div>
-    </q-card>
-
-	<q-dialog v-model="modalPass" persistent>
+  <!-- <q-dialog v-model="modalPass" persistent>
     <q-card style="width: 800px">
       <q-form ref="myForm">
         <DialogHeader
@@ -114,7 +154,7 @@
               hide-bottom-space
               dense
               lazy-rules
-			  outlined 
+              outlined
               :rules="[(val) => !!val || 'กรุณากรอกเหตุผล']"
               v-model="userNote"
               :label="`${'กรอกเหตุผล'}`"
@@ -130,7 +170,7 @@
       </q-form>
     </q-card>
   </q-dialog>
-  	<q-dialog v-model="modalPassNot" persistent>
+  <q-dialog v-model="modalPassNot" persistent>
     <q-card style="width: 800px">
       <q-form ref="myForm">
         <DialogHeader
@@ -143,7 +183,7 @@
             <q-input
               hide-bottom-space
               dense
-			  outlined 
+              outlined
               lazy-rules
               :rules="[(val) => !!val || 'กรุณากรอกเหตุผล']"
               v-model="userNote"
@@ -159,203 +199,173 @@
         />
       </q-form>
     </q-card>
-  </q-dialog>
+  </q-dialog> -->
 </template>
 <script setup lang="ts">
-import { useRouter } from "vue-router";
+import { useRouter, useRoute } from "vue-router";
 import { useQuasar, QForm } from "quasar";
-import { ref, useAttrs } from "vue";
-import type { QTableProps } from "quasar";
-import type { FormProbationDetail } from "@/modules/05_placement/interface/request/Main";
-import DialogFooter from "@/modules/05_placement/components/PersonalList/DialogFooter.vue";
-import DialogHeader from "@/modules/05_placement/components/PersonalList/DialogHeader.vue";
+import { ref, onMounted } from "vue";
+// import DialogFooter from "@/modules/05_placement/components/PersonalList/DialogFooter.vue";
+// import DialogHeader from "@/modules/05_placement/components/PersonalList/DialogHeader.vue";
+import { useCounterMixin } from "@/stores/mixin";
+import http from "@/plugins/http";
+import config from "@/app.config";
+
 const router = useRouter();
-const userNote = ref<string>("");
-const name = ref<string>('นายสมคิด ยอดใจ')
-const position = ref<string>('นักจัดการงานทั่วไป')
-const level = ref<string>('ชำนาญการพิเศษ')
-const institution = ref<string>('ฝ่ายบริหารงานทั่วไป')
-const status = ref<string>('อยู่ระหว่างการพิจารณา')
-const edit = ref<boolean>(true)
-const location = ref<string>('ที่ทำงาน') 
-const filingDate = ref<string>('21 ก.ค. 2566')
-const reason = ref<string>('เพราะxxx') 
-const requestDate = ref<string>('21 ธ.ค. 2566')
-	const $q = useQuasar();
-const modalPass = ref<boolean>(false);
-const modalPassNot = ref<boolean>(false);
-const pagination = ref({
-  sortBy: "desc",
-  descending: false,
-  page: 1,
-  rowsPerPage: 10,
+const route = useRoute();
+const mixin = useCounterMixin();
+const { messageError, date2Thai, showLoader, hideLoader, success } = mixin;
+const $q = useQuasar();
+const id = ref<string>(route.params.id.toString());
+
+const dataDetail = ref<any>([]);
+
+// const modalPass = ref<boolean>(false);
+// const modalPassNot = ref<boolean>(false);
+onMounted(() => {
+  fetchData(id.value);
 });
-
-const visibleColumns = ref<string[]>([
-  "no",
-  "startDate",
-	"endDete",
-  "intendant",
-  "commander",
-]); //ค้นหา คอลัมน์ คอลัมน์ที่แสดง
-
-// หัวตาราง
-const columns = ref<QTableProps["columns"]>([
-  {
-    name: "no",
-    align: "left",
-    label: "ลำดับ",
-    sortable: true,
-    field: "no",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-  },
-  {
-    name: "startDate",
-    align: "left",
-    label: "ตั้งแต่วันที่",
-    sortable: true,
-    field: "startDate",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-  },
-	{
-    name: "endDete",
-    align: "left",
-    label: "ถึงวันที่",
-    sortable: true,
-    field: "endDete",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-  },
-	{
-    name: "intendant",
-    align: "left",
-    label: "ผู้ดูแล",
-    sortable: true,
-    field: "intendant",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-  },
-	{
-    name: "commander",
-    align: "left",
-    label: "ผู้บังคับบัญชา",
-    sortable: true,
-    field: "commander",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-  }
-]);
-
-// ข้อมูลตาราง (จำลอง)
-const rows = ref<FormProbationDetail[]>([
-  {
-		no: "1",
-		startDate: "09 ก.ย. 2566",
-		endDete: "20 ต.ค. 2566",
-  	intendant: "นางสาวรัชภรณ์ ภักดี",
-  	commander: "นายนภัทร  วันดี"
-	},
-	{
-		no: "2",
-		startDate: "09 ก.ย. 2566",
-		endDete: "20 ต.ค. 2566",
-  	intendant: "นางสาวทวิดา กมลเวชชี",
-  	commander: "นางพิศ โพธิ์ดำ"
-	},
-	{
-		no: "3",
-		startDate: "09 ก.ย. 2566",
-		endDete: "20 ต.ค. 2566",
-  	intendant: "นางสาวทวิดา กมลเวชชี",
-  	commander: "นายนภัทร  วันดี"
-	},
-]);
-
-const clickAdd = () => {
+const fetchData = async (id: string) => {
+  showLoader();
+  await http
+    .get(config.API.resingByid(id))
+    .then((res: any) => {
+      dataDetail.value = res.data.result;
+      // console.log(dataDetail.value);
+    })
+    .catch((e) => {
+      console.log(e);
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
 };
-
-// ค้นหาในตาราง
-const filterKeyword = ref<string>("");
-const filterRef = ref<any>(null);
-const resetFilter = () => {
-  filterKeyword.value = "";
-  filterRef.value.focus();
-};
-
-const attrs = ref<any>(useAttrs());
-
-const paging = ref<boolean>(true);
-const paginationLabel = (start: string, end: string, total: string) => {
-  if (paging.value == true) return " " + start + "-" + end + " ใน " + total;
-  else return start + "-" + end + " ใน " + total;
-};
-const popUp = (action: "pass" | "passNot" ) => {
+const popUp = (action: "pass" | "passNot") => {
   if (action === "pass") {
-    modalPass.value = true;
+    $q.dialog({
+      title: "ยืนยันการอนุมัติการลาออก",
+      message: "ต้องการยืนยันอนุมัติการลาออกนี้ใช่หรือไม่?",
+      cancel: {
+        flat: true,
+        color: "negative",
+      },
+      persistent: true,
+    }).onOk(async () => {
+      confirmpopUp();
+    });
   } else if (action === "passNot") {
-    modalPassNot.value = true;
-  } 
+    $q.dialog({
+      title: "ยืนยันการยับยั้งการลาออก",
+      message: "ต้องการยืนยันการยับยั้งการลาออกนี้ใช่หรือไม่?",
+      cancel: {
+        flat: true,
+        color: "negative",
+      },
+      persistent: true,
+    }).onOk(async () => {
+      rejectpopUp();
+    });
+  }
 };
-const clickClose = () =>{
-  userNote.value = ""
-	modalPass.value = false
-	modalPassNot.value = false
-}
-const savePass = () =>{
-
-	$q.dialog({
-        title: "ยืนยันการขอลาออก",
-        message: "ต้องการยืนยันการขอลาออกข้อมูลนี้ใช่หรือไม่ ?",
-        cancel: {
-          flat: true,
-          const: "negative",
-        },
-        persistent: true,
-      })
-        .onOk(() => {
-          modalPass.value = false
-          console.log('----MSG---- :',userNote.value)
-          console.log('passSave (close)')
-          userNote.value = ""
-        }).onCancel(() => {})
-        .onDismiss(() => {});
-}
-
-const savePassNot = () => {
-  $q.dialog({
-        title: "ยืนยันการขอลาออก",
-        message: "ต้องการยืนยันการขอลาออกข้อมูลนี้ใช่หรือไม่ ?",
-        cancel: {
-          flat: true,
-          const: "negative",
-        },
-        persistent: true,
-      })
-        .onOk(() => {
-          modalPass.value = false
-          console.log('----MSG---- :',userNote.value)
-          console.log('passSaveNot (close)')
-          userNote.value = ""
-        }).onCancel(() => {})
-        .onDismiss(() => {});
-}
-
+const confirmpopUp = async () => {
+  await http
+    .get(config.API.resignConfirm(id.value))
+    .then(() => {
+      console.log("ยืนยัน");
+      success($q, "บันทึกสำเร็จ");
+    })
+    .catch((e) => {
+      console.log(e);
+      messageError($q, e);
+    })
+    .finally(() => {
+      fetchData(id.value);
+    });
+};
+const rejectpopUp = async () => {
+  console.log("ยกเลิก");
+  await http
+    .get(config.API.resignReject(id.value))
+    .then(() => {
+      success($q, "บันทึกสำเร็จ");
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      fetchData(id.value);
+    });
+};
+const redirectToRegistry = (id: string) => {
+  router.push(`/registry/${id}`);
+};
+const statusName = (val: string) => {
+  switch (val) {
+    case "PENDING":
+      return "รอดำเนินการ";
+    case "APPROVE":
+      return "อนุมัติ";
+    case "REJECT":
+      return "ยับยั้ง";
+  }
+};
+// const clickClose = () => {
+//   userNote.value = "";
+//   modalPass.value = false;
+//   modalPassNot.value = false;
+// };
+// const savePass = () => {
+//   $q.dialog({
+//     title: "ยืนยันการขอลาออก",
+//     message: "ต้องการยืนยันการขอลาออกข้อมูลนี้ใช่หรือไม่ ?",
+//     cancel: {
+//       flat: true,
+//       const: "negative",
+//     },
+//     persistent: true,
+//   })
+//     .onOk(() => {
+//       modalPass.value = false;
+//       console.log("----MSG---- :", userNote.value);
+//       console.log("passSave (close)");
+//       userNote.value = "";
+//     })
+//     .onCancel(() => {})
+//     .onDismiss(() => {});
+// };
+// const savePassNot = () => {
+//   $q.dialog({
+//     title: "ยืนยันการขอลาออก",
+//     message: "ต้องการยืนยันการขอลาออกข้อมูลนี้ใช่หรือไม่ ?",
+//     cancel: {
+//       flat: true,
+//       const: "negative",
+//     },
+//     persistent: true,
+//   })
+//     .onOk(() => {
+//       modalPass.value = false;
+//       console.log("----MSG---- :", userNote.value);
+//       console.log("passSaveNot (close)");
+//       userNote.value = "";
+//     })
+//     .onCancel(() => {})
+//     .onDismiss(() => {});
+// };
 </script>
 <style lang="scss" scope>
 .q-img {
   border-radius: 5px;
-	height: 70px;
+  height: 70px;
 }
-.text-top{
-	color: gray;
-	font-weight: 400;
-	padding-bottom: 3px;
+.text-top {
+  color: gray;
+  font-weight: 400;
+  padding-bottom: 3px;
 }
-.text-detail{
-	font-weight: 500;
-
+.text-detail {
+  font-weight: 500;
 }
 .custom-header-table {
   max-height: 64vh;
@@ -387,4 +397,4 @@ const savePassNot = () => {
     top: 0;
   }
 }
-</style>
\ No newline at end of file
+</style>

From 742fda67f65e82210ade9385ccc58ab94b8cac25 Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Wed, 9 Aug 2023 14:50:01 +0700
Subject: [PATCH 065/113] no message

---
 src/modules/06_retirement/components/resign/Resign.vue | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/src/modules/06_retirement/components/resign/Resign.vue b/src/modules/06_retirement/components/resign/Resign.vue
index a4e9f499b..0e76fbd8e 100644
--- a/src/modules/06_retirement/components/resign/Resign.vue
+++ b/src/modules/06_retirement/components/resign/Resign.vue
@@ -265,9 +265,17 @@ const resetFilter = () => {
                   >
                     <q-tooltip>รอดำเนินการ</q-tooltip>
                   </q-icon>
-                  <q-icon size="20px" v-else name="mdi-check" color="teal">
+                  <q-icon
+                    size="20px"
+                    v-else-if="props.row.status == 'APPROVE'"
+                    name="mdi-check"
+                    color="teal"
+                  >
                     <q-tooltip>เสร็จสิ้น</q-tooltip>
                   </q-icon>
+                  <q-icon size="20px" v-else name="mdi-close" color="red">
+                    <q-tooltip>ยับยั้ง</q-tooltip>
+                  </q-icon>
 
                   <!-- {{ props.row.status }} -->
                 </q-td>

From c557c8711e501d355b2cbd49674bfa1dcc079aff Mon Sep 17 00:00:00 2001
From: setthawutttty <stw.ttty@gmail.com>
Date: Wed, 9 Aug 2023 15:57:53 +0700
Subject: [PATCH 066/113] =?UTF-8?q?=E0=B9=80=E0=B8=9E=E0=B8=B4=E0=B9=88?=
 =?UTF-8?q?=E0=B8=A1=E0=B9=81=E0=B8=9A=E0=B8=9A=E0=B8=A1=E0=B8=AD=E0=B8=9A?=
 =?UTF-8?q?=E0=B8=AB=E0=B8=A1=E0=B8=B2=E0=B8=A2=E0=B8=87=E0=B8=B2=E0=B8=99?=
 =?UTF-8?q?=E0=B8=81=E0=B8=B2=E0=B8=A3=E0=B8=97=E0=B8=94=E0=B8=A5=E0=B8=AD?=
 =?UTF-8?q?=E0=B8=87=E0=B8=9B=E0=B8=8F=E0=B8=B4=E0=B8=9A=E0=B8=B1=E0=B8=95?=
 =?UTF-8?q?=E0=B8=B4=E0=B8=AB=E0=B8=99=E0=B9=89=E0=B8=B2=E0=B8=97=E0=B8=B5?=
 =?UTF-8?q?=E0=B9=88=E0=B8=A3=E0=B8=B2=E0=B8=8A=E0=B8=81=E0=B8=B2=E0=B8=A3?=
 =?UTF-8?q?=20(=E0=B8=95=E0=B8=B4=E0=B8=94post)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/probation/FormAssign.vue       | 81 ++++++++-----------
 1 file changed, 34 insertions(+), 47 deletions(-)

diff --git a/src/modules/05_placement/components/probation/FormAssign.vue b/src/modules/05_placement/components/probation/FormAssign.vue
index bc24c0b4c..118688674 100644
--- a/src/modules/05_placement/components/probation/FormAssign.vue
+++ b/src/modules/05_placement/components/probation/FormAssign.vue
@@ -96,7 +96,7 @@
                         hide-bottom-space
                         class="full-width datepicker q-mb-md"
                         :model-value="
-                          date_start != null ? date2Thai(date_start) : null
+                          date_start != null ? date2Thai(date_start) : undefined
                         "
                         :label="`${'ตั้งเเต่วันที่'}`"
                         clearable
@@ -131,7 +131,7 @@
                         readonly
                         class="full-width datepicker q-mb-md"
                         :model-value="
-                          date_finish != null ? date2Thai(date_finish) : null
+                          date_finish != null ? date2Thai(date_finish) : undefined
                         "
                         :label="`${'ถึงวันที่'}`"
                         clearable
@@ -1214,7 +1214,7 @@
                     dense
                     borderless
                     :outlined="routeName == 'probationWorkAdd'"
-                    v-model="fullnameFoot"
+                    v-model="fullname"
                     label="ชื่อ-สกุล"
                   />
                 </div>
@@ -1224,7 +1224,7 @@
                     dense
                     borderless
                     :outlined="routeName == 'probationWorkAdd'"
-                    v-model="positionFoot"
+                    v-model="position"
                     label="ตำแหน่ง"
                   />
                 </div>
@@ -1285,7 +1285,7 @@
                   dense
                   borderless
                   :outlined="routeName == 'probationWorkAdd'"
-                  v-model="caretakerFoot"
+                  v-model="caretaker1"
                   label="ผู้ดูแลคนที่ 1"
                 />
                 <div class="col-xs-12 col-sm-4">
@@ -1337,7 +1337,7 @@
                   dense
                   borderless
                   :outlined="routeName == 'probationWorkAdd'"
-                  v-model="caretakerFoot2"
+                  v-model="caretaker2"
                   label="ผู้ดูแลคนที่ 2"
                 />
                 <div class="col-xs-12 col-sm-4">
@@ -1694,6 +1694,8 @@ const getAssignNew = async (id: string) => {
     monthSelect.value = `${data.assign_month} เดือน`;
     OPcaretaker.value = data.mentors;
     OPcommander.value = [data.commander];
+    fullname.value = data.person.name
+    position.value = data.person.OrganizationOrganization
   });
 };
 const getcompetency = async () => {
@@ -1748,7 +1750,7 @@ const postDateTime = async () => {
     })
     .then(async (res) => {
       const result = res.data;
-      date_finish.value = result.finish_date;
+       date_finish.value = result.finish_date;
     })
     .catch((e) => {})
     .finally(async () => {
@@ -1764,7 +1766,6 @@ const putData = (id: string) => {
 
     if (activityDesc !== "" && goalDesc !== "") {
       return {
-        id: index + 1,
         activity_desc: activityDesc,
         goal_desc: goalDesc,
       };
@@ -1773,7 +1774,6 @@ const putData = (id: string) => {
     }
   });
   const know_ledge = knowledge.value.map((item) => ({
-    id: item ? item.id : null,
     level: item ? item.level : null,
   }));
 
@@ -1783,7 +1783,6 @@ const putData = (id: string) => {
 
     if (outputDesc !== "" && indicatorDesc !== "") {
       return {
-        id: index + 1,
         output_desc: outputDesc,
         indicator_desc: indicatorDesc,
       };
@@ -1793,34 +1792,22 @@ const putData = (id: string) => {
   });
 
   const allGroup = [];
-  if (group.value)
-    allGroup.push({ id: group.value.id, level: group.value.level });
-  if (group2.value)
-    allGroup.push({ id: group2.value.id, level: group2.value.level });
-  if (group3.value)
-    allGroup.push({ id: group3.value.id, level: group3.value.level });
+  if (group.value) allGroup.push({ level: group.value.level });
+  if (group2.value) allGroup.push({ level: group2.value.level });
+  if (group3.value) allGroup.push({ level: group3.value.level });
 
   const allSkills = [];
-  if (skill.value)
-    allSkills.push({ id: skill.value.id, level: skill.value.level });
-  if (skill2.value)
-    allSkills.push({ id: skill2.value.id, level: skill2.value.level });
-  if (skill3.value)
-    allSkills.push({ id: skill3.value.id, level: skill3.value.level });
-  if (skill4.value)
-    allSkills.push({ id: skill4.value.id, level: skill4.value.level });
+  if (skill.value) allSkills.push({ level: skill.value.level });
+  if (skill2.value) allSkills.push({ level: skill2.value.level });
+  if (skill3.value) allSkills.push({ level: skill3.value.level });
+  if (skill4.value) allSkills.push({ level: skill4.value.level });
 
   const allCompetency = [];
-  if (main.value)
-    allCompetency.push({ id: skill.value.id, level: main.value.level });
-  if (main2.value)
-    allCompetency.push({ id: main2.value.id, level: main2.value.level });
-  if (main3.value)
-    allCompetency.push({ id: main3.value.id, level: main3.value.level });
-  if (main4.value)
-    allCompetency.push({ id: main4.value.id, level: main4.value.level });
-  if (main5.value)
-    allCompetency.push({ id: main5.value.id, level: main5.value.level });
+  if (main.value) allCompetency.push({ level: main.value.level });
+  if (main2.value) allCompetency.push({ level: main2.value.level });
+  if (main3.value) allCompetency.push({ level: main3.value.level });
+  if (main4.value) allCompetency.push({ level: main4.value.level });
+  if (main5.value) allCompetency.push({ level: main5.value.level });
 
   const assign_director = [
     {
@@ -1844,12 +1831,10 @@ const putData = (id: string) => {
     personalId: GUID,
     fullname: fullname.value,
     position: position.value,
-    monthSelect:monthSelect.value !== null ? parseInt(monthSelect.value) : null,
-    date_start:
-      date_start.value instanceof Date
-        ? dateToISO(date_start.value)
-        : new Date(),
-    date_finish: date_finish.value,
+    monthSelect:
+      monthSelect.value !== null ? parseInt(monthSelect.value) : null,
+      date_start: date_start.value instanceof Date ? dateToISO(date_start.value) : new Date(),
+    date_finish: date_finish.value  instanceof Date ?  dateToISO(date_finish.value) : dateToISO(new Date(date_finish.value)),
     // caretaker_1: caretaker1.value,
     // caretaker_2: caretaker2.value,
     assign_knowledges: know_ledge,
@@ -1863,12 +1848,11 @@ const putData = (id: string) => {
     assign_outputs: Productivity_assign.filter((item) => item !== null),
     // commander: commander.value,
     assign_director: assign_director,
-    experimenter_dated: date1.value instanceof Date ? dateToISO(date1.value) : new Date(),
+    experimenter_dated:
+      date1.value instanceof Date ? dateToISO(date1.value) : new Date(),
     // date_2: date2.value instanceof Date ? dateToISO(date2.value) : new Date(),
     // date_3: date3.value instanceof Date ? dateToISO(date3.value) : new Date(),
     // date_4: date4.value instanceof Date ? dateToISO(date4.value) : new Date(),
-    fullname_foot: fullnameFoot.value,
-    position_foot: positionFoot.value,
     // caretaker_foot: caretakerFoot.value,
     // caretaker_foot2: caretakerFoot2.value,
     assign_law: checkRule.value
@@ -1879,6 +1863,7 @@ const putData = (id: string) => {
       })),
   };
   console.log("test", data);
+  
 };
 
 const saveData = (id: string) => {
@@ -1892,13 +1877,15 @@ const saveData = (id: string) => {
           const: "negative",
         },
       })
-        .onOk(async () => {
+        .onOk(() => {
           const data = putData(id);
-          await http
+          http
             .post(config.API.saveFinish(id), data)
-            .then(async (res) => {})
+            .then((res) => {
+              console.log("🚀 ~ file: FormAssign.vue:1887 ~ .then ~ res:", res);
+            })
             .catch((e) => {})
-            .finally(async () => {
+            .finally(() => {
               hideLoader();
             });
         })

From 5dfa5bea4f4fc6b4479ca9ab6609c5bf36be7b5b Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Wed, 9 Aug 2023 16:10:02 +0700
Subject: [PATCH 067/113] =?UTF-8?q?=E0=B9=81=E0=B8=81=E0=B9=89=E0=B9=84?=
 =?UTF-8?q?=E0=B8=82=E0=B9=89=20API=20=E0=B8=AD=E0=B8=AD=E0=B8=81=E0=B8=84?=
 =?UTF-8?q?=E0=B8=B3=E0=B8=AA=E0=B8=B1=E0=B9=88=E0=B8=87=20Step2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/05_placement/api.placement.ts         |   1 +
 .../components/OrderPlacement/step/step02.vue | 110 +++++++++++++-----
 .../05_placement/interface/response/Order.ts  |   2 +-
 3 files changed, 86 insertions(+), 27 deletions(-)

diff --git a/src/api/05_placement/api.placement.ts b/src/api/05_placement/api.placement.ts
index 108f63ad8..b9cc81f9b 100644
--- a/src/api/05_placement/api.placement.ts
+++ b/src/api/05_placement/api.placement.ts
@@ -70,6 +70,7 @@ export default {
 
   //ข้อมูลเลือกรายชื่อออกคำสั่ง, ลบรายชื่อ
   personsOrder: (orderId: string) => `${order}/order/persons/${orderId}`,
+  personsselectedOrder: (orderId: string) => `${order}/order/persons-selected/${orderId}`,
 
   //เปลี่ยน status ของคำสั่งไปขั้นตอนถัดไป
   nextOrder: (orderId: string) => `${order}/order/next/${orderId}`,
diff --git a/src/modules/05_placement/components/OrderPlacement/step/step02.vue b/src/modules/05_placement/components/OrderPlacement/step/step02.vue
index 49eb96d11..984d6d2fc 100644
--- a/src/modules/05_placement/components/OrderPlacement/step/step02.vue
+++ b/src/modules/05_placement/components/OrderPlacement/step/step02.vue
@@ -109,7 +109,7 @@ div
                 flat
                 round
                 color="red"
-                @click="dialogDeleteData(props.row.personId)"
+                @click="dialogDeleteData(props.row.personalId)"
                 icon="mdi-delete"
               >
                 <q-tooltip>ลบข้อมูล</q-tooltip>
@@ -226,7 +226,7 @@ div
         <q-separator />
         <q-card-section class="q-pa-sm bg-grey-1">
           <d-table
-            :rows="rows"
+            :rows="rows2"
             :columns="columns"
             :visible-columns="visibleColumns"
             :filter="filter"
@@ -370,7 +370,9 @@ const columns = ref<QTableProps["columns"]>([
   },
 ]);
 const rows = ref<ResponseData[]>([]);
+const rows2 = ref<ResponseData[]>([]);
 const selected = ref([]);
+const orderId = ref<string>(route.params.orderid.toString());
 
 onMounted(async () => {
   await conditionData();
@@ -390,17 +392,17 @@ const conditionData = async () => {
 const getData = async (id: string) => {
   showLoader();
   await http
-    .get(config.API.personsOrder(id))
+    .get(config.API.personsselectedOrder(id))
     .then((res) => {
       const data = res.data.result;
-      //   console.log(data);
+      console.log(data);
       let list: ResponseData[] = [];
       data.map((r: ResponseData) => {
         list.push({
           education: r.education ?? "",
           idCard: r.idCard ?? "",
           name: r.name ?? "",
-          personId: r.personId ?? "",
+          personalId: r.personalId ?? "",
           selectStatus: r.selectStatus !== null ? r.selectStatus : false,
           sequence: r.sequence !== null ? r.sequence : 0,
         });
@@ -456,8 +458,9 @@ const deleteData = async (id: string) => {
     .catch((e) => {
       messageError($q, e);
     })
-    .finally(() => {
+    .finally(async () => {
       hideLoader();
+      await conditionData();
     });
 };
 
@@ -535,19 +538,74 @@ const modalOpenClose = () => {
   }
 };
 
-const modalAddChange = () => {
+const modalAddChange = async () => {
   modalAdd.value = !modalAdd.value;
+  if (modalAdd.value == true) {
+    await fetchaddlist(orderId.value);
+  } else await conditionData();
+};
+const fetchaddlist = async (id: string) => {
+  showLoader();
+  await http
+    .get(config.API.personsOrder(id))
+    .then((res) => {
+      const data = res.data.result;
+      console.log(data);
+      let list = [];
+      list = data.map((r: ResponseData) => ({
+        education: r.education ?? "",
+        idCard: r.idCard ?? "",
+        name: r.name ?? "",
+        personalId: r.personalId ?? "",
+        selectStatus: r.selectStatus !== null ? r.selectStatus : false,
+        sequence: r.sequence !== null ? r.sequence : 0,
+      }));
+      rows2.value = list.filter((e: any) => e.selectStatus === false);
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
 };
-
 const saveModalAdd = () => {
   if (myFormAdd.value !== null) {
     myFormAdd.value.validate().then(async (result: boolean) => {
-      if (result) {
-        modalAddChange();
+      if (result && selected.value.length !== 0) {
+        $q.dialog({
+          title: "ยืนยันการเพิ่มรายชื่อออกคำสั่ง",
+          message: "ต้องการยืนยันการเพิ่มรายชื่อออกคำสั่งนี้ใช่หรือไม่?",
+          cancel: {
+            flat: true,
+            color: "negative",
+          },
+          persistent: true,
+        }).onOk(async () => {
+          let data = [];
+          data.push(...selected.value.map((e: any) => e.personalId));
+          // console.log(data);
+          addlist(data);
+        });
       }
     });
   }
 };
+const addlist = async (data: Object) => {
+  await http
+    .post(config.API.personsOrder(orderId.value), data)
+    .then(() => {
+      // console.log(res);
+      success($q, "บันทึกสำเร็จ");
+    })
+    .catch((e: any) => {
+      console.log(e);
+      messageError($q, e);
+    })
+    .finally(() => {
+      modalAddChange();
+    });
+};
 
 const click = (e: any) => {
   console.log(e);
@@ -555,28 +613,28 @@ const click = (e: any) => {
 };
 
 const save = () => {
-  //   if (selected.value.length > 0) {
-  //     next();
-  //   } else {
-  //     dialogMessage(
-  //       $q,
-  //       "ข้อความแจ้งเตือน",
-  //       "กรุณาเลือกรายชื่อ",
-  //       "warning",
-  //       undefined,
-  //       "orange",
-  //       undefined,
-  //       undefined,
-  //       true
-  //     );
-  //   }
+    // if (selected.value.length > 0) {
+    //   next();
+    // } else {
+    //   dialogMessage(
+    //     $q,
+    //     "ข้อความแจ้งเตือน",
+    //     "กรุณาเลือกรายชื่อ",
+    //     "warning",
+    //     undefined,
+    //     "orange",
+    //     undefined,
+    //     undefined,
+    //     true
+    //   );
+    // }
   next();
 };
 
 const selectData = (row: any) => {};
 
 const refresh = async () => {
-  await conditionData();
+  // await conditionData();
   modalAddChange();
   selected.value = [];
 };
diff --git a/src/modules/05_placement/interface/response/Order.ts b/src/modules/05_placement/interface/response/Order.ts
index 6dc958ff1..cb3d31be5 100644
--- a/src/modules/05_placement/interface/response/Order.ts
+++ b/src/modules/05_placement/interface/response/Order.ts
@@ -2,7 +2,7 @@ interface ResponseData {
   education: string;
   idCard: string;
   name: string;
-  personId: string;
+  personalId: string;
   selectStatus: boolean;
   sequence: number;
 }

From e70eb3b3dfd49266c3f1976c5b4232fb8a11f2d1 Mon Sep 17 00:00:00 2001
From: waruneeta <warunee.auy@gmail.com>
Date: Wed, 9 Aug 2023 16:38:17 +0700
Subject: [PATCH 068/113] fix api parameter

---
 src/api/05_placement/api.probation.ts                           | 2 +-
 src/modules/05_placement/components/probation/MainProbation.vue | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/api/05_placement/api.probation.ts b/src/api/05_placement/api.probation.ts
index b774f3e36..081de5a04 100644
--- a/src/api/05_placement/api.probation.ts
+++ b/src/api/05_placement/api.probation.ts
@@ -10,7 +10,7 @@ export default {
   knowledgeOptions: () => `${dataOptions}/knowledge`,
   skillOptions: () => `${dataOptions}/skill`,
   lawOptions: () => `${dataOptions}/law`,
-  personalList: () => `${personal}/list`,
+  probationPersonalList: () => `${personal}/list`,
   personal: (personalId:string) => `${personal}?personal_id=${personalId}`,
   newAssign: (personalId:string) => `${dataOptions}/new-assign?personal_id=${personalId}`,
   calculateDate: () => `${calculate}/assign-finish`,
diff --git a/src/modules/05_placement/components/probation/MainProbation.vue b/src/modules/05_placement/components/probation/MainProbation.vue
index 1fabf0f9e..60f331b89 100644
--- a/src/modules/05_placement/components/probation/MainProbation.vue
+++ b/src/modules/05_placement/components/probation/MainProbation.vue
@@ -338,7 +338,7 @@ watch(modal, () => {
 const getpersonalList = async () => {
   showLoader();
   await http
-    .get(config.API.personalList())
+    .get(config.API.probationPersonalList())
     .then((res) => {
       const data = res.data.data;
       rows.value = data.map((item: FormMainProbation) => ({

From 019e485afa1df782c403dddaea2183787c57bbad Mon Sep 17 00:00:00 2001
From: setthawutttty <stw.ttty@gmail.com>
Date: Wed, 9 Aug 2023 17:12:37 +0700
Subject: [PATCH 069/113] no message

---
 .../05_placement/components/probation/FormAssign.vue   | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/modules/05_placement/components/probation/FormAssign.vue b/src/modules/05_placement/components/probation/FormAssign.vue
index 118688674..a3511744f 100644
--- a/src/modules/05_placement/components/probation/FormAssign.vue
+++ b/src/modules/05_placement/components/probation/FormAssign.vue
@@ -1599,6 +1599,7 @@ interface MonthOption {
   label: string;
 }
 const monthOp: MonthOption[] = [];
+
 //-----------------(3.1)-----------//
 const activityCount = ref<number>(2);
 const activityDataArray = ref<any[]>([]);
@@ -1811,12 +1812,12 @@ const putData = (id: string) => {
 
   const assign_director = [
     {
-      personal_id: caretakerFoot.value.personal_id,
+      personal_id: caretaker1.value.personal_id,
       role: "mentor",
       dated: date2.value instanceof Date ? dateToISO(date2.value) : null,
     },
     {
-      personal_id: caretakerFoot2.value.personal_id,
+      personal_id: caretaker2.value.personal_id,
       role: "mentor",
       dated: date3.value instanceof Date ? dateToISO(date3.value) : null,
     },
@@ -1862,8 +1863,7 @@ const putData = (id: string) => {
         checked: item.checked,
       })),
   };
-  console.log("test", data);
-  
+  return data
 };
 
 const saveData = (id: string) => {
@@ -1882,7 +1882,7 @@ const saveData = (id: string) => {
           http
             .post(config.API.saveFinish(id), data)
             .then((res) => {
-              console.log("🚀 ~ file: FormAssign.vue:1887 ~ .then ~ res:", res);
+              router.push(`/probation/detail/${id}`);
             })
             .catch((e) => {})
             .finally(() => {

From a0165b48176e9dc63374998eea6f1b71758eb3b5 Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Wed, 9 Aug 2023 17:41:06 +0700
Subject: [PATCH 070/113] =?UTF-8?q?API=20salary=20=20=E0=B8=AD=E0=B8=AD?=
 =?UTF-8?q?=E0=B8=81=E0=B8=84=E0=B8=B3=E0=B8=AA=E0=B8=B1=E0=B9=88=E0=B8=87?=
 =?UTF-8?q?=20step2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../OrderPlacement/detailOrderPlacement.vue   |   2 +-
 .../components/OrderPlacement/step/step02.vue | 149 ++++++++++++------
 .../05_placement/interface/response/Order.ts  |   1 +
 3 files changed, 107 insertions(+), 45 deletions(-)

diff --git a/src/modules/05_placement/components/OrderPlacement/detailOrderPlacement.vue b/src/modules/05_placement/components/OrderPlacement/detailOrderPlacement.vue
index 2dd25af95..35f34e817 100644
--- a/src/modules/05_placement/components/OrderPlacement/detailOrderPlacement.vue
+++ b/src/modules/05_placement/components/OrderPlacement/detailOrderPlacement.vue
@@ -77,7 +77,7 @@ const nextStep = async () => {
 };
 const previousStep = async () => {
   stepper.value!.previous();
-  // localStorage.setItem("currentStep", step.value.toString());
+  localStorage.setItem("currentStep", step.value.toString());
   if (orderId.value) {
     await http
       .put(config.API.prevStep(orderId.value))
diff --git a/src/modules/05_placement/components/OrderPlacement/step/step02.vue b/src/modules/05_placement/components/OrderPlacement/step/step02.vue
index 984d6d2fc..2fe4959fe 100644
--- a/src/modules/05_placement/components/OrderPlacement/step/step02.vue
+++ b/src/modules/05_placement/components/OrderPlacement/step/step02.vue
@@ -405,6 +405,7 @@ const getData = async (id: string) => {
           personalId: r.personalId ?? "",
           selectStatus: r.selectStatus !== null ? r.selectStatus : false,
           sequence: r.sequence !== null ? r.sequence : 0,
+          refRecordId: r.refRecordId,
         });
       });
       //   console.log("list", list);
@@ -418,21 +419,21 @@ const getData = async (id: string) => {
     });
 };
 
-const saveSalary = async (id: string) => {
-  await http
-    .put(config.API.salaryOrder(id))
-    .then((res) => {
-      //   const data = res.data.result;
-      //   console.log(res);
-      success($q, "บันทึกข้อมูลสำเร็จ");
-    })
-    .catch((e) => {
-      messageError($q, e);
-    })
-    .finally(() => {
-      hideLoader();
-    });
-};
+// const saveSalary = async (id: string) => {
+//   await http
+//     .put(config.API.salaryOrder(id))
+//     .then((res) => {
+//       //   const data = res.data.result;
+//       //   console.log(res);
+//       success($q, "บันทึกข้อมูลสำเร็จ");
+//     })
+//     .catch((e) => {
+//       messageError($q, e);
+//     })
+//     .finally(() => {
+//       hideLoader();
+//     });
+// };
 
 const dialogDeleteData = async (id: string) => {
   dialogMessage(
@@ -501,11 +502,11 @@ const swapDown = async (id: string) => {
 const upDown = async (value: any, up: boolean = true) => {
   const indexCurrent = value.rowIndex;
   if (up) {
-    await swapUp(value.row.personId);
+    await swapUp(value.row.personalId);
     // rows.value[indexCurrent] = rows.value[indexCurrent - 1];
     // rows.value[indexCurrent - 1] = value.row;
   } else {
-    await swapDown(value.row.personId);
+    await swapDown(value.row.personalId);
     // rows.value[indexCurrent] = rows.value[indexCurrent + 1];
     // rows.value[indexCurrent + 1] = value.row;
   }
@@ -515,27 +516,76 @@ const saveModal = () => {
   if (myForm.value !== null) {
     myForm.value.validate().then(async (result: boolean) => {
       if (result) {
-        modalOpenClose();
+        putSalary(modalData.value);
       }
     });
   }
 };
-
+const personalId = ref<string>("");
 const selectModal = (e: any) => {
+  console.log(e);
   titleName.value = e.name;
-  modalData.value = {
-    salaryAmount: 0,
-    positionSalaryAmount: 0,
-    mouthSalaryAmount: 0,
-  };
-  modalOpenClose();
+  personalId.value = e.personalId;
+  // modalData.value = {
+  //   salaryAmount: 0,
+  //   positionSalaryAmount: 0,
+  //   mouthSalaryAmount: 0,
+  // };
+
+  modalOpenClose(e.personalId);
 };
 
-const modalOpenClose = () => {
+const modalOpenClose = async (personalId: string) => {
   modal.value = !modal.value;
   if (!modal.value) {
     titleName.value = "";
   }
+  if (modal.value == true) {
+    await fetchSalary(personalId);
+  }
+};
+const fetchSalary = async (personalId: string) => {
+  console.log(personalId);
+  showLoader();
+  await http
+    .get(config.API.salaryOrder(personalId))
+    .then((res: any) => {
+      console.log(res);
+      let salary = res.data.result;
+      modalData.value = {
+        salaryAmount: salary.salaryAmount,
+        positionSalaryAmount: salary.positionSalaryAmount,
+        mouthSalaryAmount: salary.monthSalaryAmount,
+      };
+    })
+    .catch((e) => {
+      console.log(e);
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+};
+const putSalary = async (salary: any) => {
+  modalData.value = {
+    salaryAmount: Number(salary.salaryAmount),
+    positionSalaryAmount: Number(salary.positionSalaryAmount),
+    mouthSalaryAmount: Number(salary.mouthSalaryAmount),
+  };
+  await http
+    .put(config.API.salaryOrder(personalId.value), modalData.value)
+    .then((res: any) => {
+      console.log(res);
+      success($q, "บันทึกข้อมูลสำเร็จ");
+    })
+    .catch((e) => {
+      console.log(e);
+      messageError($q, e);
+    })
+    .finally(async () => {
+      await conditionData();
+      modal.value = false;
+    });
 };
 
 const modalAddChange = async () => {
@@ -559,6 +609,7 @@ const fetchaddlist = async (id: string) => {
         personalId: r.personalId ?? "",
         selectStatus: r.selectStatus !== null ? r.selectStatus : false,
         sequence: r.sequence !== null ? r.sequence : 0,
+        refRecordId: r.refRecordId,
       }));
       rows2.value = list.filter((e: any) => e.selectStatus === false);
     })
@@ -583,7 +634,7 @@ const saveModalAdd = () => {
           persistent: true,
         }).onOk(async () => {
           let data = [];
-          data.push(...selected.value.map((e: any) => e.personalId));
+          data.push(...selected.value.map((e: any) => e.refRecordId));
           // console.log(data);
           addlist(data);
         });
@@ -595,7 +646,6 @@ const addlist = async (data: Object) => {
   await http
     .post(config.API.personsOrder(orderId.value), data)
     .then(() => {
-      // console.log(res);
       success($q, "บันทึกสำเร็จ");
     })
     .catch((e: any) => {
@@ -613,22 +663,33 @@ const click = (e: any) => {
 };
 
 const save = () => {
-    // if (selected.value.length > 0) {
-    //   next();
-    // } else {
-    //   dialogMessage(
-    //     $q,
-    //     "ข้อความแจ้งเตือน",
-    //     "กรุณาเลือกรายชื่อ",
-    //     "warning",
-    //     undefined,
-    //     "orange",
-    //     undefined,
-    //     undefined,
-    //     true
-    //   );
-    // }
-  next();
+  $q.dialog({
+    title: "ยืนยันการบันทึกข้อมูล",
+    message: "ต้องการยืนยันการบันทึกข้อมูลนี้ใช่หรือไม่?",
+    cancel: {
+      flat: true,
+      color: "negative",
+    },
+    persistent: true,
+  }).onOk(async () => {
+    success($q, "บันทึกข้อมูลสำเร็จ");
+    next();
+  });
+  // if (selected.value.length > 0) {
+  //   next();
+  // } else {
+  //   dialogMessage(
+  //     $q,
+  //     "ข้อความแจ้งเตือน",
+  //     "กรุณาเลือกรายชื่อ",
+  //     "warning",
+  //     undefined,
+  //     "orange",
+  //     undefined,
+  //     undefined,
+  //     true
+  //   );
+  // }
 };
 
 const selectData = (row: any) => {};
diff --git a/src/modules/05_placement/interface/response/Order.ts b/src/modules/05_placement/interface/response/Order.ts
index cb3d31be5..375361a97 100644
--- a/src/modules/05_placement/interface/response/Order.ts
+++ b/src/modules/05_placement/interface/response/Order.ts
@@ -5,6 +5,7 @@ interface ResponseData {
   personalId: string;
   selectStatus: boolean;
   sequence: number;
+  refRecordId: string
 }
 
 interface ResponseOrganiz {

From 8485164a12c6c7433c707a517ba96e595689cced Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Wed, 9 Aug 2023 17:43:26 +0700
Subject: [PATCH 071/113] no message

---
 .../components/OrderPlacement/step/step02.vue | 38 ++++++++++++-------
 1 file changed, 24 insertions(+), 14 deletions(-)

diff --git a/src/modules/05_placement/components/OrderPlacement/step/step02.vue b/src/modules/05_placement/components/OrderPlacement/step/step02.vue
index 2fe4959fe..15087cc43 100644
--- a/src/modules/05_placement/components/OrderPlacement/step/step02.vue
+++ b/src/modules/05_placement/components/OrderPlacement/step/step02.vue
@@ -572,20 +572,30 @@ const putSalary = async (salary: any) => {
     positionSalaryAmount: Number(salary.positionSalaryAmount),
     mouthSalaryAmount: Number(salary.mouthSalaryAmount),
   };
-  await http
-    .put(config.API.salaryOrder(personalId.value), modalData.value)
-    .then((res: any) => {
-      console.log(res);
-      success($q, "บันทึกข้อมูลสำเร็จ");
-    })
-    .catch((e) => {
-      console.log(e);
-      messageError($q, e);
-    })
-    .finally(async () => {
-      await conditionData();
-      modal.value = false;
-    });
+  $q.dialog({
+    title: "ยืนยันการบันทึกข้อมูล",
+    message: "ต้องการยืนยันการบันทึกข้อมูลนี้ใช่หรือไม่?",
+    cancel: {
+      flat: true,
+      color: "negative",
+    },
+    persistent: true,
+  }).onOk(async () => {
+    await http
+      .put(config.API.salaryOrder(personalId.value), modalData.value)
+      .then((res: any) => {
+        console.log(res);
+        success($q, "บันทึกข้อมูลสำเร็จ");
+      })
+      .catch((e) => {
+        console.log(e);
+        messageError($q, e);
+      })
+      .finally(async () => {
+        await conditionData();
+        modal.value = false;
+      });
+  });
 };
 
 const modalAddChange = async () => {

From 9cad6dce3d58eae0a892830c1146a92bf85b0bca Mon Sep 17 00:00:00 2001
From: waruneeta <warunee.auy@gmail.com>
Date: Wed, 9 Aug 2023 21:35:25 +0700
Subject: [PATCH 072/113] =?UTF-8?q?=E0=B8=97=E0=B8=94=E0=B8=A5=E0=B8=AD?=
 =?UTF-8?q?=E0=B8=87=E0=B8=87=E0=B8=B2=E0=B8=99=20-=20=E0=B8=AA=E0=B9=88?=
 =?UTF-8?q?=E0=B8=87=20personal=20id=20=E0=B9=80=E0=B8=9E=E0=B8=B4?=
 =?UTF-8?q?=E0=B9=88=E0=B8=A1=E0=B9=83=E0=B8=99=E0=B8=AA=E0=B9=88=E0=B8=A7?=
 =?UTF-8?q?=E0=B8=99=E0=B8=82=E0=B9=89=E0=B8=AD=E0=B8=A1=E0=B8=B9=E0=B8=A5?=
 =?UTF-8?q?=E0=B8=9F=E0=B8=AD=E0=B8=A3=E0=B9=8C=E0=B8=A1=E0=B8=A1=E0=B8=AD?=
 =?UTF-8?q?=E0=B8=9A=E0=B8=AB=E0=B8=A1=E0=B8=B2=E0=B8=A2=E0=B8=87=E0=B8=B2?=
 =?UTF-8?q?=E0=B8=99?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/05_placement/api.probation.ts         | 23 ++++++++-----
 .../components/probation/FormAssign.vue       | 34 +++++++++----------
 2 files changed, 32 insertions(+), 25 deletions(-)

diff --git a/src/api/05_placement/api.probation.ts b/src/api/05_placement/api.probation.ts
index 081de5a04..56033ced6 100644
--- a/src/api/05_placement/api.probation.ts
+++ b/src/api/05_placement/api.probation.ts
@@ -5,16 +5,23 @@ const calculate = `${env.API_PROBATION_URI}/calculate`;
 const finish = `${env.API_PROBATION_URI}/assign`;
 
 export default {
-  competencyOptions: () => `${dataOptions}/competency`,
-  competencyGroupOptions: () => `${dataOptions}/competency-group`,
-  knowledgeOptions: () => `${dataOptions}/knowledge`,
-  skillOptions: () => `${dataOptions}/skill`,
-  lawOptions: () => `${dataOptions}/law`,
+  competencyOptions: (personalId: string) =>
+    `${dataOptions}/competency?personal_id=${personalId}`,
+  competencyGroupOptions: (personalId: string) =>
+    `${dataOptions}/competency-group?personal_id=${personalId}`,
+  knowledgeOptions: (personalId: string) =>
+    `${dataOptions}/knowledge?personal_id=${personalId}`,
+  skillOptions: (personalId: string) =>
+    `${dataOptions}/skill?personal_id=${personalId}`,
+  lawOptions: (personalId: string) =>
+    `${dataOptions}/law?personal_id=${personalId}`,
   probationPersonalList: () => `${personal}/list`,
-  personal: (personalId:string) => `${personal}?personal_id=${personalId}`,
-  newAssign: (personalId:string) => `${dataOptions}/new-assign?personal_id=${personalId}`,
+  personal: (personalId: string) => `${personal}?personal_id=${personalId}`,
+  newAssign: (personalId: string) =>
+    `${dataOptions}/new-assign?personal_id=${personalId}`,
   calculateDate: () => `${calculate}/assign-finish`,
-  saveFinish: (personalId:string) => `${finish}/probation-assign?personal_id=${personalId}`,
+  saveFinish: (personalId: string) =>
+    `${finish}/probation-assign?personal_id=${personalId}`,
   personalAdd: () => `${personal}/add`,
   // clearPosition: (personalId:string) => `${placement}/position/clear/${personalId}`
 };
diff --git a/src/modules/05_placement/components/probation/FormAssign.vue b/src/modules/05_placement/components/probation/FormAssign.vue
index a3511744f..daa51c5e6 100644
--- a/src/modules/05_placement/components/probation/FormAssign.vue
+++ b/src/modules/05_placement/components/probation/FormAssign.vue
@@ -1557,10 +1557,10 @@ const OPgroup = ref<
   }>
 >([]);
 const clearDateExam = () => {
-  date_start.value = null;
+  date_start.value = undefined;
 };
 const clearDateExam2 = () => {
-  date_finish.value = null;
+  date_finish.value = undefined;
 };
 const isDatePicker2Readonly = computed(() => {
   return date_start.value === null;
@@ -1699,8 +1699,8 @@ const getAssignNew = async (id: string) => {
     position.value = data.person.OrganizationOrganization
   });
 };
-const getcompetency = async () => {
-  await http.get(config.API.competencyOptions()).then((res: any) => {
+const getcompetency = async (id: string) => {
+  await http.get(config.API.competencyOptions(id)).then((res: any) => {
     const data = res.data.data;
     OPmain.value = data;
     main.value = data[0];
@@ -1710,8 +1710,8 @@ const getcompetency = async () => {
     main5.value = data[4];
   });
 };
-const getCompetencyGroup = async () => {
-  await http.get(config.API.competencyGroupOptions()).then((res: any) => {
+const getCompetencyGroup = async (id: string) => {
+  await http.get(config.API.competencyGroupOptions(id)).then((res: any) => {
     const data = res.data.data;
     OPgroup.value = data;
     group.value = data[0];
@@ -1719,13 +1719,13 @@ const getCompetencyGroup = async () => {
     group3.value = data[2];
   });
 };
-const getKnowledge = async () => {
-  await http.get(config.API.knowledgeOptions()).then((res: any) => {
+const getKnowledge = async (id: string) => {
+  await http.get(config.API.knowledgeOptions(id)).then((res: any) => {
     OPknowledge.value = res.data.data;
   });
 };
-const getSkill = async () => {
-  await http.get(config.API.skillOptions()).then((res: any) => {
+const getSkill = async (id: string) => {
+  await http.get(config.API.skillOptions(id)).then((res: any) => {
     const skillData = res.data.data;
     OPcomputer.value = [skillData.computer];
     OPenglish.value = [skillData.english];
@@ -1737,8 +1737,8 @@ const getSkill = async () => {
     skill4.value = skillData.resourse;
   });
 };
-const getLaw = async () => {
-  await http.get(config.API.lawOptions()).then((res: any) => {
+const getLaw = async (id: string) => {
+  await http.get(config.API.lawOptions(id)).then((res: any) => {
     checkRule.value = res.data.data;
   });
 };
@@ -1936,11 +1936,11 @@ const OPresourse = ref<
 >([]);
 
 onMounted(async () => {
-  await getLaw();
-  await getcompetency();
-  await getCompetencyGroup();
-  await getSkill();
-  await getKnowledge();
+  await getLaw(personalId);
+  await getcompetency(personalId);
+  await getCompetencyGroup(personalId);
+  await getSkill(personalId);
+  await getKnowledge(personalId);
   await getAssignNew(personalId);
 });
 watch(

From f81ff646acb6bca8895556b03d7d2e6a954df7a7 Mon Sep 17 00:00:00 2001
From: waruneeta <warunee.auy@gmail.com>
Date: Thu, 10 Aug 2023 02:26:38 +0700
Subject: [PATCH 073/113] =?UTF-8?q?=E0=B8=97=E0=B8=94=E0=B8=A5=E0=B8=AD?=
 =?UTF-8?q?=E0=B8=87=E0=B8=87=E0=B8=B2=E0=B8=99=20remove=20component=20&?=
 =?UTF-8?q?=20add=20footer?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../probation/FormEvaluation/FormEvaluate.vue |  59 +++
 .../FormEvaluation/FormEvaluateScore.vue      |  57 +++
 .../probation/FormEvaluation/FormReport.vue   |  12 +-
 .../FormEvaluation/FormSaveResult.vue         |   2 +-
 .../FormEvaluation/SubForm/Part1.vue          | 432 ------------------
 .../FormEvaluation/SubForm/Part1Template2.vue | 312 -------------
 .../FormEvaluation/SubForm/Part2.vue          | 289 ------------
 .../FormEvaluation/SubForm/Part3.vue          | 131 ------
 .../SubForm/PartHighlightImprove.vue          |  45 --
 9 files changed, 123 insertions(+), 1216 deletions(-)
 delete mode 100644 src/modules/05_placement/components/probation/FormEvaluation/SubForm/Part1.vue
 delete mode 100644 src/modules/05_placement/components/probation/FormEvaluation/SubForm/Part1Template2.vue
 delete mode 100644 src/modules/05_placement/components/probation/FormEvaluation/SubForm/Part2.vue
 delete mode 100644 src/modules/05_placement/components/probation/FormEvaluation/SubForm/Part3.vue
 delete mode 100644 src/modules/05_placement/components/probation/FormEvaluation/SubForm/PartHighlightImprove.vue

diff --git a/src/modules/05_placement/components/probation/FormEvaluation/FormEvaluate.vue b/src/modules/05_placement/components/probation/FormEvaluation/FormEvaluate.vue
index e07a256f1..5afcc2e7a 100644
--- a/src/modules/05_placement/components/probation/FormEvaluation/FormEvaluate.vue
+++ b/src/modules/05_placement/components/probation/FormEvaluation/FormEvaluate.vue
@@ -59,6 +59,9 @@ const { date2Thai, notifyError } = mixin;
 const dateToday = ref<Date>(new Date("10-10-2023"));
 const dateEnd = ref<Date>(new Date("12-10-2023"));
 const period = ref<number>(1);
+const Autherise = ref<any>(null);
+const dateAutherise = ref<any>(new Date());
+
 // part 1
 const knowledge_level = ref<number>(0);
 const skill_level = ref<number>(0);
@@ -886,6 +889,62 @@ const putformData = () => {
     </div>
 
     <!-- Footer -->
+    <div class="row col-12 q-gutter-lg no-margin">
+      <div class="col-12 row">
+        <div class="col-12 text-top2 row items-center">
+          ผู้บังคับบัญชา
+        </div>
+        <div class="col-12 row q-col-gutter-md">
+          <q-select
+            class="col-xs-12 col-sm-8"
+            dense
+            v-model="Autherise"
+            outlined
+            :options="option"
+            label="ผู้บังคับบัญชา"
+          />
+          <div class="col-xs-12 col-sm-4">
+            <datepicker
+              menu-class-name="modalfix"
+              v-model="dateAutherise"
+              :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 col-3"
+                  :model-value="
+                    dateAutherise != null ? date2Thai(dateAutherise) : 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>
+      </div>
+    </div>
     <!-- <Footer /> -->
     <q-toolbar class="text-primary">
       <q-space />
diff --git a/src/modules/05_placement/components/probation/FormEvaluation/FormEvaluateScore.vue b/src/modules/05_placement/components/probation/FormEvaluation/FormEvaluateScore.vue
index 884167ab7..4410a1b04 100644
--- a/src/modules/05_placement/components/probation/FormEvaluation/FormEvaluateScore.vue
+++ b/src/modules/05_placement/components/probation/FormEvaluation/FormEvaluateScore.vue
@@ -1133,6 +1133,63 @@ const putformData = () => {
       </div>
     </div>
 
+    <div class="row col-12 q-gutter-lg no-margin">
+      <div class="col-12 row">
+        <div class="col-12 text-top2 row items-center">
+          คณะกรรมการ
+        </div>
+        <div class="col-12 row q-col-gutter-md">
+          <q-select
+            class="col-xs-12 col-sm-8"
+            dense
+            v-model="Autherise"
+            outlined
+            :options="option"
+            label="คณะกรรมการ"
+          />
+          <div class="col-xs-12 col-sm-4">
+            <datepicker
+              menu-class-name="modalfix"
+              v-model="dateAutherise"
+              :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 col-3"
+                  :model-value="
+                    dateAutherise != null ? date2Thai(dateAutherise) : 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>
+      </div>
+    </div>
+
     <q-toolbar class="text-primary">
       <q-space />
       <q-btn label="บันทึก" color="secondary" @click="savaForm" />
diff --git a/src/modules/05_placement/components/probation/FormEvaluation/FormReport.vue b/src/modules/05_placement/components/probation/FormEvaluation/FormReport.vue
index 6be0a8872..88123d2de 100644
--- a/src/modules/05_placement/components/probation/FormEvaluation/FormReport.vue
+++ b/src/modules/05_placement/components/probation/FormEvaluation/FormReport.vue
@@ -149,11 +149,11 @@ const postData = async () => {
       <div class="row col-12 q-gutter-lg q-mt-sm">
         <div class="col-12 row">
           <div class="col-12 text-top2 row items-center">
-            ประธานคณะกรรมการ
+            ประธานคณะกรรมการประเมินผลการปฏิบัติหน้าที่ราชการ
           </div>
           <div class="col-12 row q-col-gutter-md">
             <q-select class="col-xs-12 col-sm-8" dense v-model="director_id" outlined :options="optionDirector"
-              label="เลือกประธานคณะกรรมการ" />
+              label="" />
             <div class="col-xs-12 col-sm-4">
               <datepicker menu-class-name="modalfix" v-model="director_dated" :locale="'th'" autoApply borderless
                 :enableTimePicker="false" week-start="0">
@@ -179,11 +179,11 @@ const postData = async () => {
 
         <div class="col-12 row q-mt-xs">
           <div class="col-12 text-top2 row items-center">
-            กรรมการ
+            ความเห็นของผู้มีอำนาจสั่งบรรจุตามมาตรา 52
           </div>
           <div class="col-12 row q-col-gutter-md">
             <q-select class="col-xs-12 col-sm-8" dense v-model="director_id2" outlined :options="optionDirector"
-              label="เลือกกรรมการ" />
+              label="" />
             <div class="col-xs-12 col-sm-4">
               <datepicker menu-class-name="modalfix" v-model="director_dated2" :locale="'th'" autoApply borderless
                 :enableTimePicker="false" week-start="0">
@@ -209,11 +209,11 @@ const postData = async () => {
 
         <div class="col-12 row q-mt-xs">
           <div class="col-12 text-top2 row items-center">
-            กรรมการ
+            ผู้มีอำนาจสั่งบรรจุตามมาตรา 52
           </div>
           <div class="col-12 row q-col-gutter-md">
             <q-select class="col-xs-12 col-sm-8" dense v-model="director_id3" outlined :options="optionDirector"
-              label="เลือกกรรมการ" />
+              label="" />
             <div class="col-xs-12 col-sm-4">
               <datepicker menu-class-name="modalfix" v-model="director_dated3" :locale="'th'" autoApply borderless
                 :enableTimePicker="false" week-start="0">
diff --git a/src/modules/05_placement/components/probation/FormEvaluation/FormSaveResult.vue b/src/modules/05_placement/components/probation/FormEvaluation/FormSaveResult.vue
index 214477fe8..d390c77db 100644
--- a/src/modules/05_placement/components/probation/FormEvaluation/FormSaveResult.vue
+++ b/src/modules/05_placement/components/probation/FormEvaluation/FormSaveResult.vue
@@ -1119,7 +1119,7 @@ const putformData = () => {
     <div class="row col-12 q-gutter-lg no-margin">
       <div class="col-12 row">
         <div class="col-12 text-top2 row items-center">
-          ผู้บังคับบัญชาผู้มอบหมายงาน
+          ผู้บังคับบัญชา/ผู้มอบหมายงาน
         </div>
         <div class="col-12 row q-col-gutter-md">
           <q-select
diff --git a/src/modules/05_placement/components/probation/FormEvaluation/SubForm/Part1.vue b/src/modules/05_placement/components/probation/FormEvaluation/SubForm/Part1.vue
deleted file mode 100644
index d33baba54..000000000
--- a/src/modules/05_placement/components/probation/FormEvaluation/SubForm/Part1.vue
+++ /dev/null
@@ -1,432 +0,0 @@
-<script setup lang="ts">
-import { ref, defineAsyncComponent } from "vue";
-
-import { useQuasar } from "quasar";
-
-import { useProbationDataStore } from "@/modules/05_placement/store";
-
-const PartHighlightImprove = defineAsyncComponent(
-  () =>
-    import(
-      "@/modules/05_placement/components/probation/FormEvaluation/SubForm/PartHighlightImprove.vue"
-    )
-);
-
-const $q = useQuasar();
-const probationStore = useProbationDataStore();
-const { ratingColors } = probationStore;
-
-const list1_1 = [
-  { id: "1", label: "ผลผลิตของงานที่คาดหวัง 1" },
-  { id: "2", label: "ผลผลิตของงานที่คาดหวัง 2" },
-  { id: "3", label: "ผลผลิตของงานที่คาดหวัง 3" },
-  { id: "4", label: "ผลผลิตของงานที่คาดหวัง 4" },
-  { id: "5", label: "ผลผลิตของงานที่คาดหวัง 5" },
-];
-const list1_2 = [
-  { id: "1", label: "ผลผลิตของงานที่เกิดขึ้น 1" },
-  { id: "2", label: "ผลผลิตของงานที่เกิดขึ้น 2" },
-  { id: "3", label: "ผลผลิตของงานที่เกิดขึ้น 3" },
-  { id: "4", label: "ผลผลิตของงานที่เกิดขึ้น 4" },
-  { id: "5", label: "ผลผลิตของงานที่เกิดขึ้น 5" },
-];
-
-const etc_text = ref<any>(null);
-const text2_1 = ref<string>("");
-
-const model = ref<any>(0);
-const model1 = ref<any>(0);
-const model1_2 = ref<any>(0);
-const model1_3 = ref<any>(0);
-const model1_4 = ref<any>(0);
-const model1_5 = ref<any>(0);
-const model1_6 = ref<any>(0);
-const modelEtc = ref<any>(0);
-const etc = ref<any>(false);
-</script>
-
-<template>
-  <div class="row col-12 q-gutter-lg no-margin">
-    <div class="col-12 row">
-      <div class="col-12 text-top0 items-center">
-        <q-avatar class="bg-grey-2 q-mr-sm" size="28px">1</q-avatar>
-        ผลสัมฤทธิ์ของการทดลองปฏิบัติบัติหน้าที่ราชการ
-      </div>
-      <div class="col-12 text-top0 row items-center q-pl-lg">
-        <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
-        1.1 ความสำเร็จของงานที่ได้รับมอบหมาย
-      </div>
-      <div class="col-xs-12 col-sm-11 col-md-10 offset-md-1 text-top2">
-        1.ผลผลิตของงานที่คาดหวัง
-      </div>
-      <q-card
-        flat
-        bordered
-        class="col-xs-12 col-sm-11 col-md-10 offset-md-1 q-pa-sm bg-grey-1"
-      >
-        <q-list dense v-for="(list, i) in list1_1" :key="i">
-          <q-item dense tag="label" v-ripple>
-            <q-item-section>
-              <q-item-label>{{ list.label }}</q-item-label>
-            </q-item-section>
-            <q-item-section side>
-              <q-rating
-                v-model="model"
-                :val="list.id"
-                max="5"
-                size="sm"
-                color="grey"
-                :color-selected="ratingColors"
-                label="ระดับการประเมินพฤติกรรม"
-              >
-                <template v-slot:tip-1>
-                  <q-tooltip>ต่ำกว่าความคาดหวังมาก</q-tooltip>
-                </template>
-                <template v-slot:tip-2>
-                  <q-tooltip>ต่ำกว่าความคาดหวังค่อนข้างมาก</q-tooltip>
-                </template>
-                <template v-slot:tip-3>
-                  <q-tooltip>เป็นไปตามความคาดหวัง</q-tooltip>
-                </template>
-                <template v-slot:tip-4>
-                  <q-tooltip>สูงว่าความคาดหวังค่อนข้างมาก</q-tooltip>
-                </template>
-                <template v-slot:tip-5>
-                  <q-tooltip>สูงกว่าความคาดหวังมาก</q-tooltip>
-                </template>
-              </q-rating>
-            </q-item-section>
-          </q-item>
-          <q-separator class="q-my-xs" v-if="i + 1 < list1_1.length" />
-        </q-list>
-      </q-card>
-    </div>
-    <div class="col-12 row">
-      <div class="col-12 text-top0 row items-center q-pl-lg">
-        <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
-        1.2 ความสำเร็จของงานที่ได้รับมอบหมาย
-      </div>
-      <div class="col-xs-12 col-sm-11 col-md-10 offset-md-1 text-top2">
-        1.ผลผลิตของงานที่เกิดขึ้น
-      </div>
-      <q-card
-        flat
-        bordered
-        class="col-xs-12 col-sm-11 col-md-10 offset-md-1 q-pa-sm bg-grey-1"
-      >
-        <q-list dense v-for="(list, i) in list1_2" :key="i">
-          <q-item dense tag="label" v-ripple>
-            <q-item-section>
-              <!-- <q-item-label>{{ list.label }}</q-item-label> -->
-              <q-input
-                outlined
-                dense
-                v-model="text2_1"
-                class="col-xs-12 col-sm-11 col-md-10 offset-md-1"
-                lazy-rules
-                type="textarea"
-                label="ผลผลิตของงานที่เกิดขึ้นจริง"
-                hide-bottom-space
-                :row="1"
-              />
-            </q-item-section>
-            <q-item-section side>
-              <q-rating
-                v-model="model1"
-                :val="list.id"
-                max="5"
-                size="sm"
-                color="grey"
-                :color-selected="ratingColors"
-                label="ระดับการประเมินพฤติกรรม"
-              >
-                <template v-slot:tip-1>
-                  <q-tooltip>ต่ำกว่าความคาดหวังมาก</q-tooltip>
-                </template>
-                <template v-slot:tip-2>
-                  <q-tooltip>ต่ำกว่าความคาดหวังค่อนข้างมาก</q-tooltip>
-                </template>
-                <template v-slot:tip-3>
-                  <q-tooltip>เป็นไปตามความคาดหวัง</q-tooltip>
-                </template>
-                <template v-slot:tip-4>
-                  <q-tooltip>สูงว่าความคาดหวังค่อนข้างมาก</q-tooltip>
-                </template>
-                <template v-slot:tip-5>
-                  <q-tooltip>สูงกว่าความคาดหวังมาก</q-tooltip>
-                </template>
-              </q-rating>
-            </q-item-section>
-          </q-item>
-          <q-separator class="q-my-xs" v-if="i + 1 < list1_2.length" />
-        </q-list>
-      </q-card>
-    </div>
-
-    <div class="col-12 row">
-      <q-card class="text-top0 col-12 q-pa-sm q-pl-lg">
-        <q-list dense>
-          <q-item dense tag="label" v-ripple>
-            <q-item-section>
-              <q-item-label>
-                <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
-                1.2. ความรู้ความสามารถ</q-item-label>
-            </q-item-section>
-            <q-item-section side>
-              <q-rating v-model="model1_2" max="5" size="sm" color="grey" :color-selected="ratingColors"
-                label="ระดับการประเมินพฤติกรรม">
-                <template v-slot:tip-1>
-                  <q-tooltip>ต่ำกว่าความคาดหวังมาก</q-tooltip>
-                </template>
-                <template v-slot:tip-2>
-                  <q-tooltip>ต่ำกว่าความคาดหวังค่อนข้างมาก</q-tooltip>
-                </template>
-                <template v-slot:tip-3>
-                  <q-tooltip>เป็นไปตามความคาดหวัง</q-tooltip>
-                </template>
-                <template v-slot:tip-4>
-                  <q-tooltip>สูงว่าความคาดหวังค่อนข้างมาก</q-tooltip>
-                </template>
-                <template v-slot:tip-5>
-                  <q-tooltip>สูงกว่าความคาดหวังมาก</q-tooltip>
-                </template>
-              </q-rating>
-            </q-item-section>
-          </q-item>
-        </q-list>
-      </q-card>
-
-      <q-card class="text-top0 col-12 q-pa-sm q-pl-lg">
-        <q-list dense>
-          <q-item dense tag="label" v-ripple>
-            <q-item-section>
-              <q-item-label>
-                <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
-                1.2. ทักษะ</q-item-label>
-            </q-item-section>
-            <q-item-section side>
-              <q-rating v-model="model1_2" max="5" size="sm" color="grey" :color-selected="ratingColors"
-                label="ระดับการประเมินพฤติกรรม">
-                <template v-slot:tip-1>
-                  <q-tooltip>ต่ำกว่าความคาดหวังมาก</q-tooltip>
-                </template>
-                <template v-slot:tip-2>
-                  <q-tooltip>ต่ำกว่าความคาดหวังค่อนข้างมาก</q-tooltip>
-                </template>
-                <template v-slot:tip-3>
-                  <q-tooltip>เป็นไปตามความคาดหวัง</q-tooltip>
-                </template>
-                <template v-slot:tip-4>
-                  <q-tooltip>สูงว่าความคาดหวังค่อนข้างมาก</q-tooltip>
-                </template>
-                <template v-slot:tip-5>
-                  <q-tooltip>สูงกว่าความคาดหวังมาก</q-tooltip>
-                </template>
-              </q-rating>
-            </q-item-section>
-          </q-item>
-        </q-list>
-      </q-card>
-
-      <q-card class="text-top0 col-12 q-pa-sm q-pl-lg">
-        <q-list dense>
-          <q-item dense tag="label" v-ripple>
-            <q-item-section>
-              <q-item-label>
-                <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
-                1.4. สมมรถนะ</q-item-label>
-            </q-item-section>
-            <q-item-section side>
-              <q-rating v-model="model1_2" max="5" size="sm" color="grey" :color-selected="ratingColors"
-                label="ระดับการประเมินพฤติกรรม">
-                <template v-slot:tip-1>
-                  <q-tooltip>ต่ำกว่าความคาดหวังมาก</q-tooltip>
-                </template>
-                <template v-slot:tip-2>
-                  <q-tooltip>ต่ำกว่าความคาดหวังค่อนข้างมาก</q-tooltip>
-                </template>
-                <template v-slot:tip-3>
-                  <q-tooltip>เป็นไปตามความคาดหวัง</q-tooltip>
-                </template>
-                <template v-slot:tip-4>
-                  <q-tooltip>สูงว่าความคาดหวังค่อนข้างมาก</q-tooltip>
-                </template>
-                <template v-slot:tip-5>
-                  <q-tooltip>สูงกว่าความคาดหวังมาก</q-tooltip>
-                </template>
-              </q-rating>
-            </q-item-section>
-          </q-item>
-        </q-list>
-      </q-card>
-
-      <q-card class="text-top0 col-12 q-pa-sm q-pl-lg">
-        <q-list dense>
-          <q-item dense tag="label" v-ripple>
-            <q-item-section>
-              <q-item-label>
-                <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
-                1.5. ความสามารถในการเรียนรู้งาน</q-item-label>
-            </q-item-section>
-            <q-item-section side>
-              <q-rating v-model="model1_2" max="5" size="sm" color="grey" :color-selected="ratingColors"
-                label="ระดับการประเมินพฤติกรรม">
-                <template v-slot:tip-1>
-                  <q-tooltip>ต่ำกว่าความคาดหวังมาก</q-tooltip>
-                </template>
-                <template v-slot:tip-2>
-                  <q-tooltip>ต่ำกว่าความคาดหวังค่อนข้างมาก</q-tooltip>
-                </template>
-                <template v-slot:tip-3>
-                  <q-tooltip>เป็นไปตามความคาดหวัง</q-tooltip>
-                </template>
-                <template v-slot:tip-4>
-                  <q-tooltip>สูงว่าความคาดหวังค่อนข้างมาก</q-tooltip>
-                </template>
-                <template v-slot:tip-5>
-                  <q-tooltip>สูงกว่าความคาดหวังมาก</q-tooltip>
-                </template>
-              </q-rating>
-            </q-item-section>
-          </q-item>
-        </q-list>
-      </q-card>
-
-      <q-card class="text-top0 col-12 q-pa-sm q-pl-lg">
-        <q-list dense>
-          <q-item dense tag="label" v-ripple>
-            <q-item-section>
-              <q-item-label>
-                <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
-                1.6. ความสามารถในการปรับใช้ความรู้กับงานในหน้าที่</q-item-label>
-            </q-item-section>
-            <q-item-section side>
-              <q-rating v-model="model1_2" max="5" size="sm" color="grey" :color-selected="ratingColors"
-                label="ระดับการประเมินพฤติกรรม">
-                <template v-slot:tip-1>
-                  <q-tooltip>ต่ำกว่าความคาดหวังมาก</q-tooltip>
-                </template>
-                <template v-slot:tip-2>
-                  <q-tooltip>ต่ำกว่าความคาดหวังค่อนข้างมาก</q-tooltip>
-                </template>
-                <template v-slot:tip-3>
-                  <q-tooltip>เป็นไปตามความคาดหวัง</q-tooltip>
-                </template>
-                <template v-slot:tip-4>
-                  <q-tooltip>สูงว่าความคาดหวังค่อนข้างมาก</q-tooltip>
-                </template>
-                <template v-slot:tip-5>
-                  <q-tooltip>สูงกว่าความคาดหวังมาก</q-tooltip>
-                </template>
-              </q-rating>
-            </q-item-section>
-          </q-item>
-        </q-list>
-      </q-card>
-
-      <q-card class="text-top0 col-12 q-pa-sm q-pl-lg">
-        <q-list dense>
-          <q-item dense tag="label" v-ripple>
-            <q-item-section>
-              <q-item-label>
-                <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
-                1.7. ความสำเร็จของงานที่ได้รับมอบหมาย</q-item-label>
-            </q-item-section>
-            <q-item-section side>
-              <q-rating v-model="model1_2" max="5" size="sm" color="grey" :color-selected="ratingColors"
-                label="ระดับการประเมินพฤติกรรม">
-                <template v-slot:tip-1>
-                  <q-tooltip>ต่ำกว่าความคาดหวังมาก</q-tooltip>
-                </template>
-                <template v-slot:tip-2>
-                  <q-tooltip>ต่ำกว่าความคาดหวังค่อนข้างมาก</q-tooltip>
-                </template>
-                <template v-slot:tip-3>
-                  <q-tooltip>เป็นไปตามความคาดหวัง</q-tooltip>
-                </template>
-                <template v-slot:tip-4>
-                  <q-tooltip>สูงว่าความคาดหวังค่อนข้างมาก</q-tooltip>
-                </template>
-                <template v-slot:tip-5>
-                  <q-tooltip>สูงกว่าความคาดหวังมาก</q-tooltip>
-                </template>
-              </q-rating>
-            </q-item-section>
-          </q-item>
-        </q-list>
-      </q-card>
-
-      <q-card class="text-top0 col-12 q-pa-sm q-pl-lg">
-        <q-list dense>
-          <q-item dense tag="label" v-ripple>
-            <q-item-section>
-              <q-item-label>
-                <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
-                1.8 อื่นๆ
-                <q-checkbox class="q-ml-sm" dense v-model="etc" /></q-item-label>
-            </q-item-section>
-          </q-item>
-        </q-list>
-      </q-card>
-
-      <q-card v-if="etc" class="text-top0 col-12 q-pa-sm q-mt-sm q-pl-lg">
-        <q-list dense>
-          <q-item dense tag="label" v-ripple>
-            <q-item-section class="q-ml-md">
-              <q-item-label>
-                <q-input v-model="etc_text" label="กรอกอื่นๆ" dense lazy-rules autogrow hide-bottom-space outlined
-                  class="bg-white" :rules="[
-                    (val) => (val && val.length > 0) || 'กรุณากรอกข้อความ',
-                  ]" />
-              </q-item-label>
-            </q-item-section>
-            <q-item-section side>
-              <q-rating v-model="modelEtc" max="5" size="sm" color="grey" :color-selected="ratingColors"
-                label="ระดับการประเมินพฤติกรรม">
-                <template v-slot:tip-1>
-                  <q-tooltip>ต่ำกว่าความคาดหวังมาก</q-tooltip>
-                </template>
-                <template v-slot:tip-2>
-                  <q-tooltip>ต่ำกว่าความคาดหวังค่อนข้างมาก</q-tooltip>
-                </template>
-                <template v-slot:tip-3>
-                  <q-tooltip>เป็นไปตามความคาดหวัง</q-tooltip>
-                </template>
-                <template v-slot:tip-4>
-                  <q-tooltip>สูงว่าความคาดหวังค่อนข้างมาก</q-tooltip>
-                </template>
-                <template v-slot:tip-5>
-                  <q-tooltip>สูงกว่าความคาดหวังมาก</q-tooltip>
-                </template>
-              </q-rating>
-            </q-item-section>
-          </q-item>
-        </q-list>
-      </q-card>
-
-    </div>
-
-    <PartHighlightImprove />
-  </div>
-</template>
-
-<style lang="scss" scoped>
-.text-top2 {
-  font-weight: 500;
-  padding-bottom: 8px;
-  color: rgb(70, 68, 68);
-}
-
-.text-top0 {
-  font-weight: 600;
-  padding-bottom: 8px;
-  color: rgb(70, 68, 68);
-}
-
-.q-rating__icon {
-  text-shadow: transparent !important;
-}
-.q-card {
-    box-shadow: 0px 0px 0px 0px !important;
-}
-</style>
diff --git a/src/modules/05_placement/components/probation/FormEvaluation/SubForm/Part1Template2.vue b/src/modules/05_placement/components/probation/FormEvaluation/SubForm/Part1Template2.vue
deleted file mode 100644
index 2f4120f67..000000000
--- a/src/modules/05_placement/components/probation/FormEvaluation/SubForm/Part1Template2.vue
+++ /dev/null
@@ -1,312 +0,0 @@
-<template>
-  <div class="row col-12 q-gutter-lg no-margin">
-    <div class="col-12 row">
-      <div class="col-12 text-top0 items-center">
-        <q-avatar class="bg-grey-2 q-mr-sm" size="28px">1</q-avatar>
-        ผลสัมฤทธิ์ของการทดลองปฏิบัติบัติหน้าที่ราชการ
-      </div>
-    </div>
-    <div class="col-12 row no-margin">
-      <q-card class="text-top0 col-12 q-pa-sm q-pl-lg">
-        <q-list dense>
-          <q-item dense tag="label" v-ripple>
-            <q-item-section>
-              <q-item-label>
-                <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
-                1.1. ความรู้ความสามารถ</q-item-label>
-            </q-item-section>
-            <q-item-section side>
-              <q-rating v-model="model1_2" max="5" size="sm" color="grey" :color-selected="ratingColors"
-                label="ระดับการประเมินพฤติกรรม">
-                <template v-slot:tip-1>
-                  <q-tooltip>ต่ำกว่าความคาดหวังมาก</q-tooltip>
-                </template>
-                <template v-slot:tip-2>
-                  <q-tooltip>ต่ำกว่าความคาดหวังค่อนข้างมาก</q-tooltip>
-                </template>
-                <template v-slot:tip-3>
-                  <q-tooltip>เป็นไปตามความคาดหวัง</q-tooltip>
-                </template>
-                <template v-slot:tip-4>
-                  <q-tooltip>สูงว่าความคาดหวังค่อนข้างมาก</q-tooltip>
-                </template>
-                <template v-slot:tip-5>
-                  <q-tooltip>สูงกว่าความคาดหวังมาก</q-tooltip>
-                </template>
-              </q-rating>
-            </q-item-section>
-          </q-item>
-        </q-list>
-      </q-card>
-
-      <q-card class="text-top0 col-12 q-pa-sm q-pl-lg">
-        <q-list dense>
-          <q-item dense tag="label" v-ripple>
-            <q-item-section>
-              <q-item-label>
-                <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
-                1.2. ทักษะ</q-item-label>
-            </q-item-section>
-            <q-item-section side>
-              <q-rating v-model="model1_2" max="5" size="sm" color="grey" :color-selected="ratingColors"
-                label="ระดับการประเมินพฤติกรรม">
-                <template v-slot:tip-1>
-                  <q-tooltip>ต่ำกว่าความคาดหวังมาก</q-tooltip>
-                </template>
-                <template v-slot:tip-2>
-                  <q-tooltip>ต่ำกว่าความคาดหวังค่อนข้างมาก</q-tooltip>
-                </template>
-                <template v-slot:tip-3>
-                  <q-tooltip>เป็นไปตามความคาดหวัง</q-tooltip>
-                </template>
-                <template v-slot:tip-4>
-                  <q-tooltip>สูงว่าความคาดหวังค่อนข้างมาก</q-tooltip>
-                </template>
-                <template v-slot:tip-5>
-                  <q-tooltip>สูงกว่าความคาดหวังมาก</q-tooltip>
-                </template>
-              </q-rating>
-            </q-item-section>
-          </q-item>
-        </q-list>
-      </q-card>
-
-      <q-card class="text-top0 col-12 q-pa-sm q-pl-lg">
-        <q-list dense>
-          <q-item dense tag="label" v-ripple>
-            <q-item-section>
-              <q-item-label>
-                <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
-                1.3. สมมรถนะ</q-item-label>
-            </q-item-section>
-            <q-item-section side>
-              <q-rating v-model="model1_2" max="5" size="sm" color="grey" :color-selected="ratingColors"
-                label="ระดับการประเมินพฤติกรรม">
-                <template v-slot:tip-1>
-                  <q-tooltip>ต่ำกว่าความคาดหวังมาก</q-tooltip>
-                </template>
-                <template v-slot:tip-2>
-                  <q-tooltip>ต่ำกว่าความคาดหวังค่อนข้างมาก</q-tooltip>
-                </template>
-                <template v-slot:tip-3>
-                  <q-tooltip>เป็นไปตามความคาดหวัง</q-tooltip>
-                </template>
-                <template v-slot:tip-4>
-                  <q-tooltip>สูงว่าความคาดหวังค่อนข้างมาก</q-tooltip>
-                </template>
-                <template v-slot:tip-5>
-                  <q-tooltip>สูงกว่าความคาดหวังมาก</q-tooltip>
-                </template>
-              </q-rating>
-            </q-item-section>
-          </q-item>
-        </q-list>
-      </q-card>
-
-      <q-card class="text-top0 col-12 q-pa-sm q-pl-lg">
-        <q-list dense>
-          <q-item dense tag="label" v-ripple>
-            <q-item-section>
-              <q-item-label>
-                <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
-                1.4. ความสามารถในการเรียนรู้งาน</q-item-label>
-            </q-item-section>
-            <q-item-section side>
-              <q-rating v-model="model1_2" max="5" size="sm" color="grey" :color-selected="ratingColors"
-                label="ระดับการประเมินพฤติกรรม">
-                <template v-slot:tip-1>
-                  <q-tooltip>ต่ำกว่าความคาดหวังมาก</q-tooltip>
-                </template>
-                <template v-slot:tip-2>
-                  <q-tooltip>ต่ำกว่าความคาดหวังค่อนข้างมาก</q-tooltip>
-                </template>
-                <template v-slot:tip-3>
-                  <q-tooltip>เป็นไปตามความคาดหวัง</q-tooltip>
-                </template>
-                <template v-slot:tip-4>
-                  <q-tooltip>สูงว่าความคาดหวังค่อนข้างมาก</q-tooltip>
-                </template>
-                <template v-slot:tip-5>
-                  <q-tooltip>สูงกว่าความคาดหวังมาก</q-tooltip>
-                </template>
-              </q-rating>
-            </q-item-section>
-          </q-item>
-        </q-list>
-      </q-card>
-
-      <q-card class="text-top0 col-12 q-pa-sm q-mt-sm q-pl-lg">
-        <q-list dense>
-          <q-item dense tag="label" v-ripple>
-            <q-item-section>
-              <q-item-label>
-                <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
-                1.5. ความสามารถในการปรับใช้ความรู้กับงานในหน้าที่</q-item-label>
-            </q-item-section>
-            <q-item-section side>
-              <q-rating v-model="model1_2" max="5" size="sm" color="grey" :color-selected="ratingColors"
-                label="ระดับการประเมินพฤติกรรม">
-                <template v-slot:tip-1>
-                  <q-tooltip>ต่ำกว่าความคาดหวังมาก</q-tooltip>
-                </template>
-                <template v-slot:tip-2>
-                  <q-tooltip>ต่ำกว่าความคาดหวังค่อนข้างมาก</q-tooltip>
-                </template>
-                <template v-slot:tip-3>
-                  <q-tooltip>เป็นไปตามความคาดหวัง</q-tooltip>
-                </template>
-                <template v-slot:tip-4>
-                  <q-tooltip>สูงว่าความคาดหวังค่อนข้างมาก</q-tooltip>
-                </template>
-                <template v-slot:tip-5>
-                  <q-tooltip>สูงกว่าความคาดหวังมาก</q-tooltip>
-                </template>
-              </q-rating>
-            </q-item-section>
-          </q-item>
-        </q-list>
-      </q-card>
-
-      <q-card class="text-top0 col-12 q-pa-sm q-pl-lg">
-        <q-list dense>
-          <q-item dense tag="label" v-ripple>
-            <q-item-section>
-              <q-item-label>
-                <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
-                1.6. ความสำเร็จของงานที่ได้รับมอบหมาย</q-item-label>
-            </q-item-section>
-            <q-item-section side>
-              <q-rating v-model="model1_2" max="5" size="sm" color="grey" :color-selected="ratingColors"
-                label="ระดับการประเมินพฤติกรรม">
-                <template v-slot:tip-1>
-                  <q-tooltip>ต่ำกว่าความคาดหวังมาก</q-tooltip>
-                </template>
-                <template v-slot:tip-2>
-                  <q-tooltip>ต่ำกว่าความคาดหวังค่อนข้างมาก</q-tooltip>
-                </template>
-                <template v-slot:tip-3>
-                  <q-tooltip>เป็นไปตามความคาดหวัง</q-tooltip>
-                </template>
-                <template v-slot:tip-4>
-                  <q-tooltip>สูงว่าความคาดหวังค่อนข้างมาก</q-tooltip>
-                </template>
-                <template v-slot:tip-5>
-                  <q-tooltip>สูงกว่าความคาดหวังมาก</q-tooltip>
-                </template>
-              </q-rating>
-            </q-item-section>
-          </q-item>
-        </q-list>
-      </q-card>
-
-      <q-card class="text-top0 col-12 q-pa-sm q-pl-lg">
-        <q-list dense>
-          <q-item dense tag="label" v-ripple>
-            <q-item-section>
-              <q-item-label>
-                <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
-                1.7 อื่นๆ
-                <q-checkbox class="q-ml-sm" dense v-model="etc" /></q-item-label>
-            </q-item-section>
-          </q-item>
-        </q-list>
-      </q-card>
-
-      <q-card v-if="etc" class="text-top0 col-12 q-pa-sm q-mt-sm q-pl-lg">
-        <q-list dense>
-          <q-item dense tag="label" v-ripple>
-            <q-item-section class="q-ml-md">
-              <q-item-label>
-                <q-input v-model="etc_text" label="กรอกอื่นๆ" dense lazy-rules autogrow hide-bottom-space outlined
-                  class="bg-white" :rules="[
-                    (val) => (val && val.length > 0) || 'กรุณากรอกข้อความ',
-                  ]" />
-              </q-item-label>
-            </q-item-section>
-            <q-item-section side>
-              <q-rating v-model="modelEtc" max="5" size="sm" color="grey" :color-selected="ratingColors"
-                label="ระดับการประเมินพฤติกรรม">
-                <template v-slot:tip-1>
-                  <q-tooltip>ต่ำกว่าความคาดหวังมาก</q-tooltip>
-                </template>
-                <template v-slot:tip-2>
-                  <q-tooltip>ต่ำกว่าความคาดหวังค่อนข้างมาก</q-tooltip>
-                </template>
-                <template v-slot:tip-3>
-                  <q-tooltip>เป็นไปตามความคาดหวัง</q-tooltip>
-                </template>
-                <template v-slot:tip-4>
-                  <q-tooltip>สูงว่าความคาดหวังค่อนข้างมาก</q-tooltip>
-                </template>
-                <template v-slot:tip-5>
-                  <q-tooltip>สูงกว่าความคาดหวังมาก</q-tooltip>
-                </template>
-              </q-rating>
-            </q-item-section>
-          </q-item>
-        </q-list>
-      </q-card>
-
-    </div>
-  </div>
-</template>
-<script setup lang="ts">
-import { ref, defineAsyncComponent } from "vue";
-
-import { useQuasar } from "quasar";
-
-import { useProbationDataStore } from "@/modules/05_placement/store";
-
-const $q = useQuasar();
-const probationStore = useProbationDataStore();
-const { ratingColors } = probationStore;
-
-const list1_1 = [
-  { id: "1", label: "ผลผลิตของงานที่คาดหวัง 1" },
-  { id: "2", label: "ผลผลิตของงานที่คาดหวัง 2" },
-  { id: "3", label: "ผลผลิตของงานที่คาดหวัง 3" },
-  { id: "4", label: "ผลผลิตของงานที่คาดหวัง 4" },
-  { id: "5", label: "ผลผลิตของงานที่คาดหวัง 5" },
-];
-const list1_2 = [
-  { id: "1", label: "ผลผลิตของงานที่เกิดขึ้น 1" },
-  { id: "2", label: "ผลผลิตของงานที่เกิดขึ้น 2" },
-  { id: "3", label: "ผลผลิตของงานที่เกิดขึ้น 3" },
-  { id: "4", label: "ผลผลิตของงานที่เกิดขึ้น 4" },
-  { id: "5", label: "ผลผลิตของงานที่เกิดขึ้น 5" },
-];
-
-const etc_text = ref<any>(null);
-const text2_1 = ref<string>("");
-
-const model = ref<any>(0);
-const model1 = ref<any>(0);
-const model1_2 = ref<any>(0);
-const model1_3 = ref<any>(0);
-const model1_4 = ref<any>(0);
-const model1_5 = ref<any>(0);
-const model1_6 = ref<any>(0);
-const modelEtc = ref<any>(0);
-const etc = ref<any>(false);
-</script>
-
-<style lang="scss" scoped>
-.text-top2 {
-  font-weight: 500;
-  padding-bottom: 8px;
-  color: rgb(70, 68, 68);
-}
-
-.text-top0 {
-  font-weight: 600;
-  padding-bottom: 8px;
-  color: rgb(70, 68, 68);
-}
-
-.q-rating__icon {
-  text-shadow: transparent !important;
-}
-.q-card {
-    box-shadow: 0px 0px 0px 0px !important;
-}
-</style>
diff --git a/src/modules/05_placement/components/probation/FormEvaluation/SubForm/Part2.vue b/src/modules/05_placement/components/probation/FormEvaluation/SubForm/Part2.vue
deleted file mode 100644
index 0b4771475..000000000
--- a/src/modules/05_placement/components/probation/FormEvaluation/SubForm/Part2.vue
+++ /dev/null
@@ -1,289 +0,0 @@
-<template>
-  <div class="row col-12 q-gutter-lg no-margin">
-    <div class="col-12 row">
-      <div class="col-12 text-top0 items-center">
-        <q-avatar class="bg-grey-2 q-mr-sm" size="28px">2</q-avatar>
-        พฤติกรรมของผู้ทดลองปฏิบัติบัติหน้าที่ราชการ
-      </div>
-      <div class="col-12 text-top0 row items-center q-pl-lg">
-        <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
-        2.1 ความประพฤติ
-      </div>
-      <q-card
-        flat
-        bordered
-        class="col-xs-12 col-sm-11 col-md-10 offset-md-1 q-pa-sm bg-grey-1"
-      >
-        <q-list dense v-for="(list, i) in list2_1" :key="i">
-          <q-item dense tag="label" v-ripple>
-            <q-item-section>
-              <q-item-label>{{ list.label }}</q-item-label>
-            </q-item-section>
-            <q-item-section side>
-              <q-rating
-                v-model="model"
-                :val="list.id"
-                max="5"
-                size="sm"
-                color="grey"
-                :color-selected="ratingColors"
-                label="ระดับการประเมินพฤติกรรม"
-              >
-                <template v-slot:tip-1>
-                  <q-tooltip>ต่ำกว่าความคาดหวังมาก</q-tooltip>
-                </template>
-                <template v-slot:tip-2>
-                  <q-tooltip>ต่ำกว่าความคาดหวังค่อนข้างมาก</q-tooltip>
-                </template>
-                <template v-slot:tip-3>
-                  <q-tooltip>เป็นไปตามความคาดหวัง</q-tooltip>
-                </template>
-                <template v-slot:tip-4>
-                  <q-tooltip>สูงว่าความคาดหวังค่อนข้างมาก</q-tooltip>
-                </template>
-                <template v-slot:tip-5>
-                  <q-tooltip>สูงกว่าความคาดหวังมาก</q-tooltip>
-                </template>
-              </q-rating>
-            </q-item-section>
-          </q-item>
-          <q-separator class="q-my-xs" v-if="i + 1 < list2_1.length" />
-        </q-list>
-      </q-card>
-    </div>
-    <div class="col-12 row">
-      <div class="col-12 text-top0 row items-center q-pl-lg">
-        <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
-        2.2 ความมีคุณธรรมจริยธรรม
-      </div>
-      <q-card
-        flat
-        bordered
-        class="col-xs-12 col-sm-11 col-md-10 offset-md-1 q-pa-sm bg-grey-1"
-      >
-        <q-list dense v-for="(list, i) in list2_2" :key="i">
-          <q-item dense tag="label" v-ripple>
-            <q-item-section>
-              <q-item-label>{{ list.label }}</q-item-label>
-            </q-item-section>
-            <q-item-section side>
-              <q-rating
-                v-model="model"
-                :val="list.id"
-                max="5"
-                size="sm"
-                color="grey"
-                :color-selected="ratingColors"
-                label="ระดับการประเมินพฤติกรรม"
-              >
-                <template v-slot:tip-1>
-                  <q-tooltip>ต่ำกว่าความคาดหวังมาก</q-tooltip>
-                </template>
-                <template v-slot:tip-2>
-                  <q-tooltip>ต่ำกว่าความคาดหวังค่อนข้างมาก</q-tooltip>
-                </template>
-                <template v-slot:tip-3>
-                  <q-tooltip>เป็นไปตามความคาดหวัง</q-tooltip>
-                </template>
-                <template v-slot:tip-4>
-                  <q-tooltip>สูงว่าความคาดหวังค่อนข้างมาก</q-tooltip>
-                </template>
-                <template v-slot:tip-5>
-                  <q-tooltip>สูงกว่าความคาดหวังมาก</q-tooltip>
-                </template>
-              </q-rating>
-            </q-item-section>
-          </q-item>
-          <q-separator class="q-my-xs" v-if="i + 1 < list2_2.length" />
-        </q-list>
-      </q-card>
-    </div>
-    <div class="col-12 row">
-      <div class="col-12 text-top0 row items-center q-pl-lg">
-        <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
-        2.3 การรักษาวินัย
-      </div>
-      <q-card
-        flat
-        bordered
-        class="col-xs-12 col-sm-11 col-md-10 offset-md-1 q-pa-sm bg-grey-1"
-      >
-        <q-list dense v-for="(list, i) in list2_3" :key="i">
-          <q-item dense tag="label" v-ripple>
-            <q-item-section>
-              <q-item-label>{{ list.label }}</q-item-label>
-            </q-item-section>
-            <q-item-section side>
-              <q-rating
-                v-model="model"
-                :val="list.id"
-                max="5"
-                size="sm"
-                color="grey"
-                :color-selected="ratingColors"
-                label="ระดับการประเมินพฤติกรรม"
-              >
-                <template v-slot:tip-1>
-                  <q-tooltip>ต่ำกว่าความคาดหวังมาก</q-tooltip>
-                </template>
-                <template v-slot:tip-2>
-                  <q-tooltip>ต่ำกว่าความคาดหวังค่อนข้างมาก</q-tooltip>
-                </template>
-                <template v-slot:tip-3>
-                  <q-tooltip>เป็นไปตามความคาดหวัง</q-tooltip>
-                </template>
-                <template v-slot:tip-4>
-                  <q-tooltip>สูงว่าความคาดหวังค่อนข้างมาก</q-tooltip>
-                </template>
-                <template v-slot:tip-5>
-                  <q-tooltip>สูงกว่าความคาดหวังมาก</q-tooltip>
-                </template>
-              </q-rating>
-            </q-item-section>
-          </q-item>
-          <q-separator class="q-my-xs" v-if="i + 1 < list2_3.length" />
-        </q-list>
-      </q-card>
-    </div>
-    <div class="col-12 row">
-      <div class="col-12 text-top0 row items-center q-pl-lg">
-        <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
-        2.4 อื่นๆ
-        <q-checkbox class="q-ml-sm" dense v-model="etc_4" />
-      </div>
-      <q-card
-        v-if="etc_4"
-        flat
-        bordered
-        class="col-xs-12 col-sm-11 col-md-10 offset-md-1 q-pa-sm bg-grey-1"
-      >
-        <q-list dense>
-          <q-item dense tag="label" v-ripple>
-            <q-item-section>
-              <q-item-label>
-                <q-input
-                  v-model="etc_text2"
-                  label="กรอกอื่นๆ"
-                  dense
-                  lazy-rules
-                  autogrow
-                  hide-bottom-space
-                  outlined
-                  class="bg-white"
-                  :rules="[
-                    (val) => (val && val.length > 0) || 'กรุณากรอกข้อความ',
-                  ]"
-                />
-              </q-item-label>
-            </q-item-section>
-            <q-item-section side>
-              <q-rating
-                v-model="modelEtc"
-                max="5"
-                size="sm"
-                color="grey"
-                :color-selected="ratingColors"
-                label="ระดับการประเมินพฤติกรรม"
-              >
-                <template v-slot:tip-1>
-                  <q-tooltip>ต่ำกว่าความคาดหวังมาก</q-tooltip>
-                </template>
-                <template v-slot:tip-2>
-                  <q-tooltip>ต่ำกว่าความคาดหวังค่อนข้างมาก</q-tooltip>
-                </template>
-                <template v-slot:tip-3>
-                  <q-tooltip>เป็นไปตามความคาดหวัง</q-tooltip>
-                </template>
-                <template v-slot:tip-4>
-                  <q-tooltip>สูงว่าความคาดหวังค่อนข้างมาก</q-tooltip>
-                </template>
-                <template v-slot:tip-5>
-                  <q-tooltip>สูงกว่าความคาดหวังมาก</q-tooltip>
-                </template>
-              </q-rating>
-            </q-item-section>
-          </q-item>
-        </q-list>
-      </q-card>
-    </div>
-    <FormComment />
-  </div>
-</template>
-<script setup lang="ts">
-import { ref, defineAsyncComponent } from "vue";
-
-import { useQuasar } from "quasar";
-
-import { useProbationDataStore } from "@/modules/05_placement/store";
-const FormComment = defineAsyncComponent(
-  () =>
-    import(
-      "@/modules/05_placement/components/probation/form/formEvacomment.vue"
-    )
-);
-const probationStore = useProbationDataStore();
-const { ratingColors } = probationStore;
-
-const list2_1 = [
-  { id: "1", label: "ให้บริการประชาชนหรือผู้รับบริการด้วยอัธยาศัยดี" },
-  { id: "2", label: "มีความรับผิดชอบในการปฏิบัติบัติงาน" },
-  {
-    id: "3",
-    label:
-      "ให้บริการประชาชนหรือผู้รับบริการด้วยความรวดเร็ว เอาใจใส่เป็นมาตรฐานเดียวกัน",
-  },
-  {
-    id: "4",
-    label: "ตั้งใจปฏิบัติบัติหน้าที่ราชการด้วยความอุตสาหะ ขยันหมั่นเพียร",
-  },
-];
-const list2_2 = [
-  {
-    id: "1",
-    label: "อุทิศตนและเสียสละเวลาในการปฏิบัติบัติงานอย่างเต็มกำลังความสามารถ",
-  },
-  { id: "2", label: "มีจิตสำนึกที่ดี ปฏิบัติบัติงานด้วยความซื่อสัตย์ สุจริต" },
-  {
-    id: "3",
-    label:
-      "ยึดมั่นในสถาบันบัพระมหากษัตริย์ และไม่กระทำการใด ๆ อันจะก่อให้เกิดความเสียหายต่อประเทศชาติ",
-  },
-];
-
-const list2_3 = [
-  { id: "1", label: "มีความรับรัผิดชอบในการรักษาเวลาทำงาน" },
-  {
-    id: "2",
-    label: "แต่งกายในการปฏิบัติบัติงานได้อย่างเหมาะสมกับการเป็นข้าราชการ",
-  },
-  {
-    id: "3",
-    label: "ไม่กระทำการใด ๆ อันอาจก่อให้เกิดความเสียหายแก่ชื่อเสียงของหน่วยงาน",
-  },
-  {
-    id: "4",
-    label:
-      "ไม่กระทำการใด ๆ อันเป็นการเสื่อมเกียรติและศักดิ์ศรีของความเป็นข้าราชการ",
-  },
-  {
-    id: "5",
-    label: "ปฏิบัติบัติหน้าที่อย่างตรงไปตรงมาโดยยึกหลักจรรยาบรรณวิชาชีพ",
-  },
-];
-
-const etc_text2 = ref<any>(null);
-const modelEtc = ref<any>(0);
-const etc_4 = ref<any>(false);
-const model = ref<any>(0);
-</script>
-<style lang="scss" scoped>
-.text-top0 {
-  font-weight: 600;
-  padding-bottom: 8px;
-  color: rgb(70, 68, 68);
-}
-
-.q-rating__icon {
-  text-shadow: transparent !important;
-}
-</style>
diff --git a/src/modules/05_placement/components/probation/FormEvaluation/SubForm/Part3.vue b/src/modules/05_placement/components/probation/FormEvaluation/SubForm/Part3.vue
deleted file mode 100644
index d4b0b14d5..000000000
--- a/src/modules/05_placement/components/probation/FormEvaluation/SubForm/Part3.vue
+++ /dev/null
@@ -1,131 +0,0 @@
-<script setup lang="ts">
-import { ref } from "vue";
-const radio_1 = ref<any>(null);
-const radio_2 = ref<any>(null);
-const radio_3 = ref<any>(null);
-const radio_4 = ref<any>(null);
-</script>
-
-<template>
-  <div class="row col-12 q-gutter-lg no-margin">
-    <div class="col-12 row justify-center">
-      <div class="col-12 text-top0 items-center">
-        <q-avatar class="bg-grey-2 q-mr-sm" size="28px">3</q-avatar>
-        การพัฒนาผู้ทดลองปฏิบัติบัติหน้าที่ราชการ
-      </div>
-      <q-card
-        flat
-        bordered
-        class="col-xs-12 col-sm-11 col-md-11 q-pa-sm bg-grey-1"
-      >
-        <q-list dense>
-          <q-item dense tag="label" v-ripple>
-            <q-item-section>
-              <q-item-label>1. การปฐมนิเทศ</q-item-label>
-            </q-item-section>
-            <q-item-section side>
-              <div class="row">
-                <q-radio
-                  checked-icon="task_alt"
-                  unchecked-icon="panorama_fish_eye"
-                  v-model="radio_1"
-                  val="1"
-                  label="ดำเนินการเเล้ว"
-                />
-                <q-radio
-                  checked-icon="task_alt"
-                  unchecked-icon="panorama_fish_eye"
-                  v-model="radio_1"
-                  val="0"
-                  label=" ยังไม่ได้ดำเนินการ"
-                />
-              </div>
-            </q-item-section>
-          </q-item>
-          <q-separator class="q-my-xs" />
-          <q-item dense tag="label" v-ripple>
-            <q-item-section>
-              <q-item-label>2. การเรียนรู้ด้วยตนเอง</q-item-label>
-            </q-item-section>
-            <q-item-section side>
-              <div class="row">
-                <q-radio
-                  checked-icon="task_alt"
-                  unchecked-icon="panorama_fish_eye"
-                  v-model="radio_2"
-                  val="1"
-                  label="ดำเนินการเเล้ว"
-                />
-                <q-radio
-                  checked-icon="task_alt"
-                  unchecked-icon="panorama_fish_eye"
-                  v-model="radio_2"
-                  val="0"
-                  label=" ยังไม่ได้ดำเนินการ"
-                />
-              </div>
-            </q-item-section>
-          </q-item>
-          <q-separator class="q-my-xs" />
-          <q-item dense tag="label" v-ripple>
-            <q-item-section>
-              <q-item-label>3. การอบรมสัมนาร่วมกัน</q-item-label>
-            </q-item-section>
-            <q-item-section side>
-              <div class="row">
-                <q-radio
-                  checked-icon="task_alt"
-                  unchecked-icon="panorama_fish_eye"
-                  v-model="radio_3"
-                  val="1"
-                  label="ดำเนินการเเล้ว"
-                />
-                <q-radio
-                  checked-icon="task_alt"
-                  unchecked-icon="panorama_fish_eye"
-                  v-model="radio_3"
-                  val="0"
-                  label=" ยังไม่ได้ดำเนินการ"
-                />
-              </div>
-            </q-item-section>
-          </q-item>
-          <q-separator class="q-my-xs" />
-          <q-item dense tag="label" v-ripple>
-            <q-item-section>
-              <q-item-label
-                >4. การอบรมอื่น ๆ ตามที่หน่วยงานกำหนด (ถ้ามี)</q-item-label
-              >
-            </q-item-section>
-            <q-item-section side>
-              <div class="row">
-                <q-radio
-                  checked-icon="task_alt"
-                  unchecked-icon="panorama_fish_eye"
-                  v-model="radio_4"
-                  val="1"
-                  label="ดำเนินการเเล้ว"
-                />
-                <q-radio
-                  checked-icon="task_alt"
-                  unchecked-icon="panorama_fish_eye"
-                  v-model="radio_4"
-                  val="0"
-                  label=" ยังไม่ได้ดำเนินการ"
-                />
-              </div>
-            </q-item-section>
-          </q-item>
-        </q-list>
-      </q-card>
-    </div>
-  </div>
-</template>
-
-<style lang="scss" scoped>
-.text-top0 {
-  font-weight: 600;
-  padding-bottom: 8px;
-  color: rgb(70, 68, 68);
-}
-</style>
diff --git a/src/modules/05_placement/components/probation/FormEvaluation/SubForm/PartHighlightImprove.vue b/src/modules/05_placement/components/probation/FormEvaluation/SubForm/PartHighlightImprove.vue
deleted file mode 100644
index 5dc58496c..000000000
--- a/src/modules/05_placement/components/probation/FormEvaluation/SubForm/PartHighlightImprove.vue
+++ /dev/null
@@ -1,45 +0,0 @@
-<template>
-  <div class="row col-12 q-gutter-lg no-margin">
-    <div class="col-12 row">
-      <div class="col-12 text-top0 row items-center q-pl-lg">
-        <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
-        จุดเด่น (ไม่เกิน 5 บรรทัด)
-      </div>
-      <q-input
-        outlined
-        dense
-        v-model="text2_1"
-        class="col-xs-12 col-sm-11 col-md-10 offset-md-1"
-        lazy-rules
-        type="textarea"
-        label="กรอกจุดเด่น"
-        hide-bottom-space
-        :row="5"
-        :rules="[(val) => (val && val.length > 0) || 'กรุณากรอกข้อความ']"
-      />
-    </div>
-    <div class="col-12 row">
-      <div class="col-12 text-top0 row items-center q-pl-lg">
-        <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
-        สิ่งที่ควรปรับปรุง (ไม่เกิน 5 บรรทัด)
-      </div>
-      <q-input
-        outlined
-        dense
-        v-model="text2_2"
-        class="col-xs-12 col-sm-11 col-md-10 offset-md-1"
-        lazy-rules
-        type="textarea"
-        hide-bottom-space
-        label="กรอกสิ่งที่ควรปรับปรุง"
-        :row="5"
-        :rules="[(val) => (val && val.length > 0) || 'กรุณากรอกข้อความ']"
-      />
-    </div>
-  </div>
-</template>
-<script setup lang="ts">
-import { ref } from "vue";
-const text2_1 = ref<string>("");
-const text2_2 = ref<string>("");
-</script>

From 28d41d67233a074958a1bc14120bed3a5ec12741 Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Thu, 10 Aug 2023 09:38:05 +0700
Subject: [PATCH 074/113] =?UTF-8?q?=E0=B9=81=E0=B8=81=E0=B9=89=E0=B9=84?=
 =?UTF-8?q?=E0=B8=82=20=E0=B8=AD=E0=B8=AD=E0=B8=81=E0=B8=84=E0=B8=B3?=
 =?UTF-8?q?=E0=B8=AA=E0=B8=B1=E0=B9=88=E0=B8=87?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/OrderPlacement/step/step02.vue             | 8 +++++---
 .../components/OrderPlacement/step/step04.vue             | 6 +++---
 2 files changed, 8 insertions(+), 6 deletions(-)

diff --git a/src/modules/05_placement/components/OrderPlacement/step/step02.vue b/src/modules/05_placement/components/OrderPlacement/step/step02.vue
index 15087cc43..0e95fd912 100644
--- a/src/modules/05_placement/components/OrderPlacement/step/step02.vue
+++ b/src/modules/05_placement/components/OrderPlacement/step/step02.vue
@@ -371,7 +371,7 @@ const columns = ref<QTableProps["columns"]>([
 ]);
 const rows = ref<ResponseData[]>([]);
 const rows2 = ref<ResponseData[]>([]);
-const selected = ref([]);
+const selected = ref<ResponseData[]>([]);
 const orderId = ref<string>(route.params.orderid.toString());
 
 onMounted(async () => {
@@ -570,7 +570,7 @@ const putSalary = async (salary: any) => {
   modalData.value = {
     salaryAmount: Number(salary.salaryAmount),
     positionSalaryAmount: Number(salary.positionSalaryAmount),
-    mouthSalaryAmount: Number(salary.mouthSalaryAmount),
+    monthSalaryAmount: Number(salary.mouthSalaryAmount),
   };
   $q.dialog({
     title: "ยืนยันการบันทึกข้อมูล",
@@ -621,7 +621,9 @@ const fetchaddlist = async (id: string) => {
         sequence: r.sequence !== null ? r.sequence : 0,
         refRecordId: r.refRecordId,
       }));
-      rows2.value = list.filter((e: any) => e.selectStatus === false);
+      rows2.value = list;
+      selected.value = rows.value;
+      // rows2.value = list.filter((e: any) => e.selectStatus === false);
     })
     .catch((e) => {
       messageError($q, e);
diff --git a/src/modules/05_placement/components/OrderPlacement/step/step04.vue b/src/modules/05_placement/components/OrderPlacement/step/step04.vue
index 700cc0555..182c2598a 100644
--- a/src/modules/05_placement/components/OrderPlacement/step/step04.vue
+++ b/src/modules/05_placement/components/OrderPlacement/step/step04.vue
@@ -573,8 +573,8 @@ const save = () => {
             await putOrderData();
             await postfileOrder();
             await postfileTailer();
-            // await fetchAttachment(orderId.value);
-            // await fecthstatusOrder(orderId.value);
+            await fetchAttachment(orderId.value);
+            await fecthstatusOrder(orderId.value);
           })
           .onCancel(() => {})
           .onDismiss(() => {});
@@ -606,7 +606,7 @@ const postfileOrder = async () => {
 const postfileTailer = async () => {
   const formData = new FormData();
   formData.append("File", fileTailer.value);
-  await http.post(config.API.attachmentOrderId(orderId.value), formData);
+  await http.post(config.API.attachmentFileId(orderId.value), formData);
 };
 const clickExecute = async (id: string) => {
   $q.dialog({

From 7b0f086e48428ff5f7910cdb25604fd44a976fdf Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Thu, 10 Aug 2023 09:40:58 +0700
Subject: [PATCH 075/113] no message

---
 .../components/OrderPlacement/step/step02.vue | 54 +++++++++----------
 1 file changed, 27 insertions(+), 27 deletions(-)

diff --git a/src/modules/05_placement/components/OrderPlacement/step/step02.vue b/src/modules/05_placement/components/OrderPlacement/step/step02.vue
index 0e95fd912..a64b88f85 100644
--- a/src/modules/05_placement/components/OrderPlacement/step/step02.vue
+++ b/src/modules/05_placement/components/OrderPlacement/step/step02.vue
@@ -410,6 +410,7 @@ const getData = async (id: string) => {
       });
       //   console.log("list", list);
       rows.value = list;
+      selected.value = rows.value;
     })
     .catch((e) => {
       messageError($q, e);
@@ -675,33 +676,32 @@ const click = (e: any) => {
 };
 
 const save = () => {
-  $q.dialog({
-    title: "ยืนยันการบันทึกข้อมูล",
-    message: "ต้องการยืนยันการบันทึกข้อมูลนี้ใช่หรือไม่?",
-    cancel: {
-      flat: true,
-      color: "negative",
-    },
-    persistent: true,
-  }).onOk(async () => {
-    success($q, "บันทึกข้อมูลสำเร็จ");
-    next();
-  });
-  // if (selected.value.length > 0) {
-  //   next();
-  // } else {
-  //   dialogMessage(
-  //     $q,
-  //     "ข้อความแจ้งเตือน",
-  //     "กรุณาเลือกรายชื่อ",
-  //     "warning",
-  //     undefined,
-  //     "orange",
-  //     undefined,
-  //     undefined,
-  //     true
-  //   );
-  // }
+  if (selected.value.length > 0) {
+    $q.dialog({
+      title: "ยืนยันการบันทึกข้อมูล",
+      message: "ต้องการยืนยันการบันทึกข้อมูลนี้ใช่หรือไม่?",
+      cancel: {
+        flat: true,
+        color: "negative",
+      },
+      persistent: true,
+    }).onOk(async () => {
+      success($q, "บันทึกข้อมูลสำเร็จ");
+      next();
+    });
+  } else {
+    dialogMessage(
+      $q,
+      "ข้อความแจ้งเตือน",
+      "กรุณาเลือกรายชื่อ",
+      "warning",
+      undefined,
+      "orange",
+      undefined,
+      undefined,
+      true
+    );
+  }
 };
 
 const selectData = (row: any) => {};

From 414eca616dac09dc7bdf631f4facbfdfc7356455 Mon Sep 17 00:00:00 2001
From: setthawutttty <stw.ttty@gmail.com>
Date: Thu, 10 Aug 2023 09:50:35 +0700
Subject: [PATCH 076/113] assignList

---
 src/api/05_placement/api.probation.ts         |   2 +
 .../components/probation/ProbationDetail.vue  | 104 ++++++++----------
 .../05_placement/interface/request/Main.ts    |  13 ++-
 3 files changed, 57 insertions(+), 62 deletions(-)

diff --git a/src/api/05_placement/api.probation.ts b/src/api/05_placement/api.probation.ts
index 56033ced6..1d3f01bfb 100644
--- a/src/api/05_placement/api.probation.ts
+++ b/src/api/05_placement/api.probation.ts
@@ -23,5 +23,7 @@ export default {
   saveFinish: (personalId: string) =>
     `${finish}/probation-assign?personal_id=${personalId}`,
   personalAdd: () => `${personal}/add`,
+  probationGetAssignList: (personalId:string) => 
+  `${finish}/probation-assign-list?personal_id=${personalId}`
   // clearPosition: (personalId:string) => `${placement}/position/clear/${personalId}`
 };
diff --git a/src/modules/05_placement/components/probation/ProbationDetail.vue b/src/modules/05_placement/components/probation/ProbationDetail.vue
index 628b2f7c0..c2ec61b05 100644
--- a/src/modules/05_placement/components/probation/ProbationDetail.vue
+++ b/src/modules/05_placement/components/probation/ProbationDetail.vue
@@ -66,7 +66,9 @@
                 color="red"
               />
               <q-icon size="20px" v-else name="mdi-check" color="teal" />
-              {{ probation_status == 'PENDING' ? 'อยู่ในระหว่างการทดลองงาน' : '' }}
+              {{
+                probation_status == "PENDING" ? "อยู่ในระหว่างการทดลองงาน" : ""
+              }}
             </div>
           </div>
         </div>
@@ -155,7 +157,7 @@
             <q-tr
               :props="props"
               class="cursor-pointer"
-              @click="clickSelect(props.row.no)"
+              @click="clickSelect(props.row.id)"
             >
               <q-td v-for="col in props.cols" :key="col.name" :props="props">
                 <div v-if="col.name == 'no'">
@@ -191,18 +193,18 @@
 </template>
 <script setup lang="ts">
 import { useRouter, useRoute } from "vue-router";
-import { ref, useAttrs,onMounted } from "vue";
+import { ref, useAttrs, onMounted } from "vue";
 import type { QTableProps } from "quasar";
 import type { FormProbationDetail } from "@/modules/05_placement/interface/request/Main";
 import type { FormProbationPersonal } from "@/modules/05_placement/interface/request/Main";
 import { useCounterMixin } from "@/stores/mixin";
-import { useQuasar } from "quasar";
+import { date, useQuasar } from "quasar";
 import http from "@/plugins/http";
 import config from "@/app.config";
 
 const $q = useQuasar(); //ใช้ noti quasar
 const mixin = useCounterMixin();
-const { messageError, success, showLoader, hideLoader } = mixin;
+const { messageError, success, showLoader, hideLoader,date2Thai } = mixin;
 const router = useRouter();
 const route = useRoute();
 const personalId = ref<string>(route.params.id as string);
@@ -221,9 +223,9 @@ const pagination = ref({
 
 const visibleColumns = ref<string[]>([
   "no",
-  "startDate",
-  "endDete",
-  "intendant",
+  "date_start",
+  "date_finish",
+  "mentors",
   "commander",
 ]); //ค้นหา คอลัมน์ คอลัมน์ที่แสดง
 
@@ -239,29 +241,29 @@ const columns = ref<QTableProps["columns"]>([
     style: "font-size: 14px",
   },
   {
-    name: "startDate",
+    name: "date_start",
     align: "left",
     label: "ตั้งแต่วันที่",
     sortable: true,
-    field: "startDate",
+    field: "date_start",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
   {
-    name: "endDete",
+    name: "date_finish",
     align: "left",
     label: "ถึงวันที่",
     sortable: true,
-    field: "endDete",
+    field: "date_finish",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
   {
-    name: "intendant",
+    name: "mentors",
     align: "left",
     label: "ผู้ดูแล",
     sortable: true,
-    field: "intendant",
+    field: "mentors",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
@@ -277,29 +279,7 @@ const columns = ref<QTableProps["columns"]>([
 ]);
 
 // ข้อมูลตาราง (จำลอง)
-const rows = ref<FormProbationDetail[]>([
-  {
-    no: "1",
-    startDate: "09 ก.ย. 2566",
-    endDete: "20 ต.ค. 2566",
-    intendant: "นางสาวรัชภรณ์ ภักดี",
-    commander: "นายนภัทร  วันดี",
-  },
-  {
-    no: "2",
-    startDate: "25 ต.ค. 2566",
-    endDete: "24 ม.ค. 2567",
-    intendant: "นางสาวทวิดา กมลเวชชี",
-    commander: "นางพิศ โพธิ์ดำ",
-  },
-  // {
-  // 	no: "3",
-  // 	startDate: "09 ก.ย. 2566",
-  // 	endDete: "20 ต.ค. 2566",
-  // intendant: "นางสาวทวิดา กมลเวชชี",
-  // commander: "นายนภัทร  วันดี"
-  // },
-]);
+const rows = ref<FormProbationDetail[]>([]);
 
 const clickAdd = () => {};
 
@@ -323,30 +303,40 @@ const paginationLabel = (start: string, end: string, total: string) => {
   if (paging.value == true) return " " + start + "-" + end + " ใน " + total;
   else return start + "-" + end + " ใน " + total;
 };
+const getAssignList = async () => {
+  showLoader();
+  await http
+    .get(config.API.probationGetAssignList(personalId.value))
+    .then((res) => {
+      console.log("LIST ===>", res.data.data);
+      const data = res.data.data;
+      rows.value = data.map((item: FormProbationDetail) => ({
+        id:item.id,
+        round_no: item.round_no,
+        date_start: date2Thai(new Date(item.date_start)),
+        date_finish: date2Thai(new Date(item.date_finish)),
+        mentors: item.mentors,
+        commander: item.commander,
+        chairman: item.chairman,
+      }));
+    })
+    .catch(() => {})
+    .finally(() => {
+      hideLoader();
+    });
+};
 const getpersonalList = async () => {
   showLoader();
   await http
     .get(config.API.personal(personalId.value))
     .then((res) => {
       const data = res.data.data;
-      name.value = data.name
-      position_line.value = data.position_line
-      position_level.value = data.position_level
-      organization.value = data.organization
-      probation_status.value = data.probation_status
+      name.value = data.name;
+      position_line.value = data.position_line;
+      position_level.value = data.position_level;
+      organization.value = data.organization;
+      probation_status.value = data.probation_status;
 
-      // rows.value = data.map((item: FormProbationPersonal) => ({
-      //   personal_id: item.personal_id,
-      //   name: item.name,
-      //   position_line: item.position_line,
-      //   position_line_id: item.position_line_id,
-      //   position_level: item.position_level,
-      //   position_level_id: item.position_level_id,
-      //   organization: item.organization,
-      //   probation_no: item.probation_no,
-      //   order_number: item.order_number,
-      //   probation_status: item.probation_status,
-      // }));
       console.log("(data)", data);
     })
     .catch(() => {})
@@ -356,9 +346,9 @@ const getpersonalList = async () => {
 };
 
 onMounted(async () => {
-  await getpersonalList()
-  console.log()
-})
+  await getpersonalList();
+  await getAssignList();
+});
 </script>
 <style lang="scss" scope>
 .q-img {
diff --git a/src/modules/05_placement/interface/request/Main.ts b/src/modules/05_placement/interface/request/Main.ts
index 1da302c4c..0eb49e443 100644
--- a/src/modules/05_placement/interface/request/Main.ts
+++ b/src/modules/05_placement/interface/request/Main.ts
@@ -44,11 +44,14 @@ interface FormMainProbation2 {
   institution: string;
 }
 interface FormProbationDetail {
-  no: string;
-  startDate: string;
-  endDete: string;
-  intendant: string;
-  commander: string;
+  no: string,
+  id: string,
+  round_no: number,
+  date_start: string,
+  date_finish: string,
+  mentors: string,
+  commander: string,
+  chairman: null
 }
 interface FormProbationPersonal {
   personal_id: string,

From 1cbf5e3f06303d0ce649be816ee989476b2a4298 Mon Sep 17 00:00:00 2001
From: setthawutttty <stw.ttty@gmail.com>
Date: Thu, 10 Aug 2023 10:46:57 +0700
Subject: [PATCH 077/113] =?UTF-8?q?=E0=B8=9F=E0=B8=B4=E0=B8=A5=E0=B9=80?=
 =?UTF-8?q?=E0=B8=95=E0=B8=AD=E0=B8=A3=E0=B9=8C=E0=B9=80=E0=B8=A5=E0=B8=B7?=
 =?UTF-8?q?=E0=B8=AD=E0=B8=81=E0=B8=9C=E0=B8=B9=E0=B9=89=E0=B8=94=E0=B8=B9?=
 =?UTF-8?q?=E0=B9=80=E0=B9=80=E0=B8=A5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/05_placement/api.probation.ts                 |  3 ++-
 .../05_placement/components/probation/FormAssign.vue  | 11 ++++++++---
 2 files changed, 10 insertions(+), 4 deletions(-)

diff --git a/src/api/05_placement/api.probation.ts b/src/api/05_placement/api.probation.ts
index 1d3f01bfb..99f49901c 100644
--- a/src/api/05_placement/api.probation.ts
+++ b/src/api/05_placement/api.probation.ts
@@ -24,6 +24,7 @@ export default {
     `${finish}/probation-assign?personal_id=${personalId}`,
   personalAdd: () => `${personal}/add`,
   probationGetAssignList: (personalId:string) => 
-  `${finish}/probation-assign-list?personal_id=${personalId}`
+  `${finish}/probation-assign-list?personal_id=${personalId}`,
+  probationsGetAssign: (assignId:string) =>`${finish}/probation-assign?assign_id=${assignId}`
   // clearPosition: (personalId:string) => `${placement}/position/clear/${personalId}`
 };
diff --git a/src/modules/05_placement/components/probation/FormAssign.vue b/src/modules/05_placement/components/probation/FormAssign.vue
index daa51c5e6..298772d7e 100644
--- a/src/modules/05_placement/components/probation/FormAssign.vue
+++ b/src/modules/05_placement/components/probation/FormAssign.vue
@@ -156,7 +156,7 @@
                 <q-select
                   :rules="[(val) => !!val || 'กรุณาเลือกผู้ดูเเล']"
                   option-value="personal_id"
-                  :options="OPcaretaker"
+                  :options="filtermantor(OPcaretaker, [caretaker2])"
                   class="col-xs-12 col-sm-6"
                   :readonly="routeName != 'probationWorkAdd'"
                   dense
@@ -169,7 +169,7 @@
                 />
                 <q-select
                   :rules="[(val) => !!val || 'กรุณาเลือกผู้ดูเเล']"
-                  :options="OPcaretaker"
+                  :options="filtermantor(OPcaretaker, [caretaker1])"
                   option-value="personal_id"
                   option-label="name"
                   hide-bottom-space
@@ -1494,6 +1494,11 @@ const filterData = (options: any[], excludedGroups: any[]) => {
     (item) => !excludedGroups.some((group) => group && group.id === item.id)
   );
 };
+const filtermantor = (options: any[], excludedGroups: any[]) => {
+  return options.filter(
+    (item) => !excludedGroups.some((group) => group && group.personal_id === item.personal_id)
+  );
+};
 const filterMain = (options: any[], excludedGroups: any[]) => {
   return options.filter(
     (item) => !excludedGroups.some((group) => group && group.id === item.id)
@@ -1563,7 +1568,7 @@ const clearDateExam2 = () => {
   date_finish.value = undefined;
 };
 const isDatePicker2Readonly = computed(() => {
-  return date_start.value === null;
+  return date_start.value === undefined;
 });
 const routeName = router.currentRoute.value.name;
 const name = ref<string>("");

From 6fbc73300c5d597560d548c50f616745c63689de Mon Sep 17 00:00:00 2001
From: Thanit Konmek <thanit@frappet.com>
Date: Thu, 10 Aug 2023 17:02:08 +0700
Subject: [PATCH 078/113] =?UTF-8?q?=E0=B8=82=E0=B8=AD=E0=B9=82=E0=B8=AD?=
 =?UTF-8?q?=E0=B8=99=20api=20=20=E0=B8=95=E0=B9=88=E0=B8=AD=E0=B9=81?=
 =?UTF-8?q?=E0=B8=A5=E0=B9=89=E0=B8=A7,=E0=B8=94=E0=B8=B2=E0=B8=95?=
 =?UTF-8?q?=E0=B9=89=E0=B8=B2=E0=B8=A2=E0=B8=B1=E0=B8=87=E0=B9=84=E0=B8=A1?=
 =?UTF-8?q?=E0=B9=88=E0=B8=84=E0=B8=A3=E0=B8=9A?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/05_placement/api.placement.ts         |  45 ++--
 .../components/OrderPlacement/step/step02.vue |  41 +--
 .../components/Transfer/transferMain.vue      | 237 ++++++------------
 .../components/Transfer/transferRegistry.vue  | 223 ++++++++++------
 .../interface/response/Transfer.ts            |  38 +++
 5 files changed, 307 insertions(+), 277 deletions(-)
 create mode 100644 src/modules/05_placement/interface/response/Transfer.ts

diff --git a/src/api/05_placement/api.placement.ts b/src/api/05_placement/api.placement.ts
index b9cc81f9b..b29f33155 100644
--- a/src/api/05_placement/api.placement.ts
+++ b/src/api/05_placement/api.placement.ts
@@ -3,6 +3,7 @@ const placement = `${env.API_PLACEMENT_URI}/placement`;
 const orgTree = `${env.API_URI_ORG_TREE}`;
 const order = `${env.API_PLACEMENT_URI}`;
 const receive = `${env.API_PLACEMENT_URI}/placement/Receive`;
+const transfer = `${placement}/transfer`;
 
 export default {
   MainDetail: (year: number) => `${placement}/exam/${year}`,
@@ -63,47 +64,37 @@ export default {
   nextStep: (orderId: string) => `${order}/order/next/${orderId}`,
   prevStep: (orderId: string) => `${order}/order/prev/${orderId}`,
   executeOrder: (orderId: string) => `${order}/order/execute/${orderId}`,
-
   createOrder: () => `${order}/order/detail`,
-
   examroundOrder: () => `${order}/order/detail/exam-round`,
-
-  //ข้อมูลเลือกรายชื่อออกคำสั่ง, ลบรายชื่อ
-  personsOrder: (orderId: string) => `${order}/order/persons/${orderId}`,
-  personsselectedOrder: (orderId: string) => `${order}/order/persons-selected/${orderId}`,
-
-  //เปลี่ยน status ของคำสั่งไปขั้นตอนถัดไป
-  nextOrder: (orderId: string) => `${order}/order/next/${orderId}`,
-  //เปลี่ยน status ของคำสั่งไปขั้นตอนถัดไป
-  preventOrder: (orderId: string) => `${order}/order/prev/${orderId}`,
-
-  //สลับลำดับข้อมูลในบัญชีแนบท้ายขึ้น
-  swapUpOrder: (personalId: string) => `${order}/order/swap/up/${personalId}`,
-  //สลับลำดับข้อมูลในบัญชีแนบท้ายลง
+  personsOrder: (orderId: string) => `${order}/order/persons/${orderId}`, //ข้อมูลเลือกรายชื่อออกคำสั่ง, ลบรายชื่อ
+  personsselectedOrder: (orderId: string) =>
+    `${order}/order/persons-selected/${orderId}`,
+  nextOrder: (orderId: string) => `${order}/order/next/${orderId}`, //เปลี่ยน status ของคำสั่งไปขั้นตอนถัดไป
+  preventOrder: (orderId: string) => `${order}/order/prev/${orderId}`, //เปลี่ยน status ของคำสั่งไปขั้นตอนถัดไป
+  swapUpOrder: (personalId: string) => `${order}/order/swap/up/${personalId}`, //สลับลำดับข้อมูลในบัญชีแนบท้ายขึ้น
   swapDownOrder: (personalId: string) =>
-    `${order}/order/swap/down/${personalId}`,
-
-  //บันทึกข้อมูลเงินเดือนสำหรับผู้บรรจุ
-  salaryOrder: (id: string) => `${order}/order/salary/${id}`,
-
-  // popup แสดงรายชื่อตามหน่วยงานที่เลือก , popup เลือกรายชื่อส่งสำเนา
-  copyOrderPersonsId: (id: string) => `${order}/order/copy-order/persons/${id}`,
-
+    `${order}/order/swap/down/${personalId}`, //สลับลำดับข้อมูลในบัญชีแนบท้ายลง
+  salaryOrder: (id: string) => `${order}/order/salary/${id}`, //บันทึกข้อมูลเงินเดือนสำหรับผู้บรรจุ
+  copyOrderPersonsId: (id: string) => `${order}/order/copy-order/persons/${id}`, // popup แสดงรายชื่อตามหน่วยงานที่เลือก , popup เลือกรายชื่อส่งสำเนา
   copyOrder: `${order}/order/copy-order`,
-
   copyOrderId: (id: string) => `${order}/order/copy-order/${id}`,
-
   attachmentId: (id: string) => `${order}/order/attachment/${id}`,
-
   attachmentOrderId: (orderId: string) =>
     `${order}/order/attachment/order-file/${orderId}`,
   attachmentFileId: (orderId: string) =>
     `${order}/order/attachment/file/${orderId}`,
-
   orderReady: (id: string) => `${order}/order/ready/${id}`,
   attachmentOrder: (orderId: string) => `${order}/order/attachment/${orderId}`,
 
+  //receive ระบบรับโอน
   receiveData: () => `${receive}`,
   receiveDataId: (id: string) => `${receive}/${id}`,
   receivePosition: (id: string) => `${receive}/position/${id}`,
+
+  //tranfer ระบบคำขอโอน
+  transfer,
+  transferId: (id: string) => `${transfer}/${id}`,
+  transferUser: `${transfer}/user`,
+  transferUserId: (id: string) => `${transfer}/user/${id}`,
+  transferConfirmId: (id: string) => `${transfer}/confirm/${id}`,
 };
diff --git a/src/modules/05_placement/components/OrderPlacement/step/step02.vue b/src/modules/05_placement/components/OrderPlacement/step/step02.vue
index a64b88f85..34b0634df 100644
--- a/src/modules/05_placement/components/OrderPlacement/step/step02.vue
+++ b/src/modules/05_placement/components/OrderPlacement/step/step02.vue
@@ -372,7 +372,6 @@ const columns = ref<QTableProps["columns"]>([
 const rows = ref<ResponseData[]>([]);
 const rows2 = ref<ResponseData[]>([]);
 const selected = ref<ResponseData[]>([]);
-const orderId = ref<string>(route.params.orderid.toString());
 
 onMounted(async () => {
   await conditionData();
@@ -602,7 +601,14 @@ const putSalary = async (salary: any) => {
 const modalAddChange = async () => {
   modalAdd.value = !modalAdd.value;
   if (modalAdd.value == true) {
-    await fetchaddlist(orderId.value);
+    const id = route.params.orderid
+      ? route.params.orderid.toString()
+      : localStorage.getItem("orderId")
+      ? localStorage.getItem("orderId")
+      : null;
+    if (id !== null) {
+      await fetchaddlist(id);
+    }
   } else await conditionData();
 };
 const fetchaddlist = async (id: string) => {
@@ -656,18 +662,25 @@ const saveModalAdd = () => {
   }
 };
 const addlist = async (data: Object) => {
-  await http
-    .post(config.API.personsOrder(orderId.value), data)
-    .then(() => {
-      success($q, "บันทึกสำเร็จ");
-    })
-    .catch((e: any) => {
-      console.log(e);
-      messageError($q, e);
-    })
-    .finally(() => {
-      modalAddChange();
-    });
+  const id = route.params.orderid
+    ? route.params.orderid.toString()
+    : localStorage.getItem("orderId")
+    ? localStorage.getItem("orderId")
+    : null;
+  if (id !== null) {
+    await http
+      .post(config.API.personsOrder(id), data)
+      .then(() => {
+        success($q, "บันทึกสำเร็จ");
+      })
+      .catch((e: any) => {
+        console.log(e);
+        messageError($q, e);
+      })
+      .finally(() => {
+        modalAddChange();
+      });
+  }
 };
 
 const click = (e: any) => {
diff --git a/src/modules/05_placement/components/Transfer/transferMain.vue b/src/modules/05_placement/components/Transfer/transferMain.vue
index 78bd3f03a..fb15a19aa 100644
--- a/src/modules/05_placement/components/Transfer/transferMain.vue
+++ b/src/modules/05_placement/components/Transfer/transferMain.vue
@@ -1,38 +1,32 @@
 <script setup lang="ts">
-import { ref, computed } from "vue";
+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 http from "@/plugins/http";
+import config from "@/app.config";
+
 import DialogFooter from "@/modules/05_placement/components/PersonalList/DialogFooter.vue";
 import DialogHeader from "@/modules/05_placement/components/PersonalList/DialogHeader.vue";
 
+import type { ResponseData } from "@/modules/05_placement/interface/response/Transfer";
+
 const selected = ref([]);
 const checkSelected = computed(() => {
   if (selected.value.length === 0) {
     return true;
   }
 });
-const clickClose = () => {
-  modal.value = false;
-};
 
 const $q = useQuasar();
-const modal = ref<boolean>(false);
-const popup = () => {
-  modal.value = true;
-};
 const router = useRouter();
-const pagination = ref({
-  sortBy: "desc",
-  descending: false,
-  page: 1,
-  rowsPerPage: 10,
-});
-const paging = ref<boolean>(true);
-const paginationLabel = (start: string, end: string, total: string) => {
-  if (paging.value == true) return " " + start + "-" + end + " ใน " + total;
-  else return start + "-" + end + " ใน " + total;
-};
+const mixin = useCounterMixin();
+
+const { date2Thai, messageError, showLoader, hideLoader, success } = mixin;
+
+const modal = ref<boolean>(false);
 const visibleColumns = ref<string[]>([
   "no",
   "fullname",
@@ -63,53 +57,7 @@ const resetFilter = () => {
 // const nextPage = (id:string) => {
 //   router.push("/retirement/resign/"+id);
 // };
-const rows = ref<any>([
-  {
-    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-ae3d-4b8c-8cf0-b86b5a2ed8bb",
-    fullname: "นางสาววญ สพ",
-    position: "นักจัดการงานทั่วไป",
-    positionLevel: "ปฏิบัติการ",
-    oc: "กลุ่มงานช่วยนักบริหาร",
-    agency: "กลุ่มงานข้อมูลเมือง",
-    status: "รออนุมัติ",
-  },
-  {
-    personalId: "08db721d-afde-4ed4-8bc6-f0ad83e61c4d",
-    fullname: "นางสาววญ สพ",
-    position: "นักจัดการงานทั่วไป",
-    positionLevel: "ปฏิบัติการ",
-    oc: "กลุ่มงานช่วยนักบริหาร",
-    agency: "กลุ่มงานข้อมูลเมือง",
-    status: "รออนุมัติ",
-  },
-  {
-    personalId: "08db721d-b24e-45d7-8a65-3f28ef4948a4",
-    fullname: "นางสาววญ สพ",
-    position: "นักจัดการงานทั่วไป",
-    positionLevel: "ปฏิบัติการ",
-    oc: "กลุ่มงานช่วยนักบริหาร",
-    agency: "กลุ่มงานข้อมูลเมือง",
-    status: "รออนุมัติ",
-  },
-]);
+const rows = ref<ResponseData[]>([]);
 const rows2 = ref<any>([
   {
     personalId: "0a846508-4932-40de-9a9e-5b519492217c",
@@ -287,6 +235,49 @@ const columns2 = ref<QTableProps["columns"]>([
     style: "font-size: 14px",
   },
 ]);
+
+const openModal = () => (modal.value = true);
+const closeModal = () => (modal.value = false);
+
+onMounted(async () => {
+  await getData();
+});
+
+const getData = async () => {
+  showLoader();
+  await http
+    .get(config.API.transfer)
+    .then((res: any) => {
+      const data = res.data.result;
+      let list: ResponseData[] = [];
+      data.map((r: ResponseData) => {
+        list.push({
+          createdAt: new Date(),
+          date: new Date(),
+          id: r.id ?? "",
+          isActive: r.isActive ? r.isActive : false,
+          organization: r.organization ?? "",
+          organizationPositionOld: r.organizationPositionOld ?? "",
+          posNo: r.posNo ?? "",
+          position: r.position ?? "",
+          positionLevel: r.positionLevel ?? "",
+          positionLevelOld: r.positionLevelOld ?? "",
+          positionNumberOld: r.positionNumberOld ?? "",
+          positionTypeOld: r.positionTypeOld ?? "",
+          reason: r.id ?? "",
+          salary: r.salary !== null ? r.salary : 0,
+          status: r.status ?? "",
+        });
+      });
+      rows.value = list;
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+};
 </script>
 <template>
   <div class="toptitle text-dark col-12 row items-center">รายการขอโอน</div>
@@ -296,7 +287,7 @@ const columns2 = ref<QTableProps["columns"]>([
       <div class="col-12">
         <div class="row col-12">
           <q-btn
-            @click="popup()"
+            @click="openModal"
             size="14px"
             flat
             round
@@ -346,20 +337,12 @@ const columns2 = ref<QTableProps["columns"]>([
         </div>
 
         <div class="col-12 q-pt-sm">
-          <q-table
-            ref="table"
+          <d-table
             :columns="columns"
             :rows="rows"
             :filter="filterKeyword"
-            row-key="fullname"
-            flat
-            bordered
-            :paging="true"
-            dense
-            class="custom-header-table"
+            row-key="id"
             :visible-columns="visibleColumns"
-            :pagination-label="paginationLabel"
-            v-model:pagination="pagination"
           >
             <template v-slot:header="props">
               <q-tr :props="props">
@@ -372,7 +355,7 @@ const columns2 = ref<QTableProps["columns"]>([
               <q-tr
                 :props="props"
                 class="cursor-pointer"
-                @click="router.push(`/transfer/${props.row.personalId}`)"
+                @click="router.push(`/transfer/${props.row.id}`)"
               >
                 <q-td key="no" :props="props">
                   {{ props.rowIndex + 1 }}
@@ -397,19 +380,7 @@ const columns2 = ref<QTableProps["columns"]>([
                 </q-td>
               </q-tr>
             </template>
-            <template v-slot:pagination="scope">
-              <q-pagination
-                v-model="pagination.page"
-                active-color="primary"
-                color="primary"
-                :max="scope.pagesNumber"
-                :max-pages="5"
-                size="sm"
-                boundary-links
-                direction-links
-              ></q-pagination>
-            </template>
-          </q-table>
+          </d-table>
         </div>
       </div>
     </div>
@@ -417,7 +388,7 @@ const columns2 = ref<QTableProps["columns"]>([
 
   <q-dialog v-model="modal">
     <q-card style="width: 1200px; max-width: 80vw">
-      <DialogHeader title="ส่งไปออกคำสั่งโอนออก" :close="clickClose" />
+      <DialogHeader title="ส่งไปออกคำสั่งโอนออก" :close="closeModal" />
       <q-separator />
       <q-card-section class="q-pt-none">
         <div class="row justify-end">
@@ -432,15 +403,15 @@ const columns2 = ref<QTableProps["columns"]>([
                 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>
+                <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"
@@ -461,26 +432,17 @@ const columns2 = ref<QTableProps["columns"]>([
           </div>
         </div>
 
-        <q-table
-          ref="tableRef"
+        <d-table
           :columns="columns2"
           :rows="rows2"
           :filter="filterKeyword2"
           row-key="personalId"
-          flat
-          bordered
-          :paging="true"
-          dense
           class="custom-header-table"
           :visible-columns="visibleColumns2"
-          :pagination-label="paginationLabel"
           selection="multiple"
-          v-model:pagination="pagination"
           v-model:selected="selected"
-
         >
-
-        <template v-slot:header-selection="scope">
+          <template v-slot:header-selection="scope">
             <q-checkbox
               keep-color
               color="primary"
@@ -497,10 +459,7 @@ const columns2 = ref<QTableProps["columns"]>([
             />
           </template> -->
           <template v-slot:body="props">
-            <q-tr
-              :props="props"
-              class="cursor-pointer"
-            >
+            <q-tr :props="props" class="cursor-pointer">
               <q-td>
                 <q-checkbox
                   keep-color
@@ -532,18 +491,7 @@ const columns2 = ref<QTableProps["columns"]>([
               </q-td>
             </q-tr>
           </template>
-          <template v-slot:pagination="scope">
-            <q-pagination
-              v-model="pagination.page"
-              color="primary"
-              :max="scope.pagesNumber"
-              :max-pages="5"
-              size="sm"
-              boundary-links
-              direction-links
-            ></q-pagination>
-          </template>
-        </q-table>
+        </d-table>
       </q-card-section>
 
       <q-card-actions align="right" class="bg-white text-teal">
@@ -557,35 +505,4 @@ const columns2 = ref<QTableProps["columns"]>([
     </q-card>
   </q-dialog>
 </template>
-<style scoped lang="scss">
-.custom-header-table {
-  max-height: 64vh;
-
-  .q-table tr:nth-child(odd) td {
-    background: white;
-  }
-
-  .q-table tr:nth-child(even) td {
-    background: #f8f8f8;
-  }
-
-  .q-table thead tr {
-    background: #ecebeb;
-  }
-
-  .q-table thead tr th {
-    position: sticky;
-    z-index: 1;
-  }
-
-  /* this will be the loading indicator */
-  .q-table thead tr:last-child th {
-    /* height of all previous header rows */
-    top: 48px;
-  }
-
-  .q-table thead tr:first-child th {
-    top: 0;
-  }
-}
-</style>
+<style scoped lang="scss"></style>
diff --git a/src/modules/05_placement/components/Transfer/transferRegistry.vue b/src/modules/05_placement/components/Transfer/transferRegistry.vue
index 382717fb1..2ea3c3c63 100644
--- a/src/modules/05_placement/components/Transfer/transferRegistry.vue
+++ b/src/modules/05_placement/components/Transfer/transferRegistry.vue
@@ -35,19 +35,25 @@
         <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">{{ position }}</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">{{ level }}</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">{{ institution }}</div>
+            <div class="col-12 text-detail">
+              {{ responseData.organizationPositionOld }}
+            </div>
           </div>
         </div>
       </div>
@@ -59,16 +65,17 @@
       <div class="q-pl-sm text-weight-bold text-dark">ข้อมูลการขอโอน</div>
       <q-space />
       <q-btn
-      v-if="!roleAdmin"
+        v-if="!roleAdmin"
         outline
         color="primary"
         dense
         icon-right="arrow_forward"
         class="q-px-sm"
         label="ส่งคำร้องไปยัง สกจ."
+        @click="confirmMessage"
       />
       <q-btn
-      v-else
+        v-else
         outline
         color="primary"
         dense
@@ -83,13 +90,17 @@
         <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">{{ organization }}</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">{{ reason }}</div>
+            <div class="col-12 text-detail">
+              {{ responseData.reason }}
+            </div>
           </div>
         </div>
       </div>
@@ -102,12 +113,10 @@
     </div>
     <div class="col-12"><q-separator /></div>
     <div class="col-12">
-      <q-table
-        flat
-        bordered
+      <d-table
         :rows="rows"
         :columns="columns"
-        row-key="name"
+        row-key="fileName"
         hide-header
         hide-bottom
       >
@@ -116,40 +125,56 @@
             <q-td key="no" :props="props">
               {{ props.rowIndex + 1 }}
             </q-td>
-            <q-td key="noteTitle" :props="props">
-              {{ props.row.noteTitle }}
+            <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-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-btn flat dense round color="blue" icon="mdi-file-word">
                 <q-tooltip>ไฟล์ WORD</q-tooltip>
               </q-btn>
             </q-td>
           </q-tr>
         </template>
-      </q-table>
+      </d-table>
     </div>
   </q-card>
 </template>
 <script setup lang="ts">
-import { useRouter } from "vue-router";
 import { onMounted, ref } from "vue";
-import { useRoute } from "vue-router";
+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";
 
-let roleAdmin = ref<boolean>(false);
+import type { QTableProps } 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 personId = route.params.id;
+const {
+  date2Thai,
+  dialogMessage,
+  messageError,
+  showLoader,
+  hideLoader,
+  success,
+} = mixin;
+
+const roleAdmin = ref<boolean>(false);
+
 const name = ref<string>("นายสมคิด ยอดใจ");
 const position = ref<string>("นักจัดการงานทั่วไป");
 const level = ref<string>("ชำนาญการพิเศษ");
@@ -157,17 +182,23 @@ const institution = ref<string>("ฝ่ายบริหารงานทั
 const status = ref<string>("อยู่ระหว่างการทดลองงาน");
 const organization = ref<string>("ก.ก.");
 const reason = ref<string>("เพราะxxx");
-const route = useRoute();
-const personId = route.params.id;
-const rows = [
-  {
-    noteTitle: "ชื่อเอกสาร",
-  },
-  {
-    noteTitle: "ชื่อเอกสาร",
-  },
-];
-const columns = [
+
+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",
@@ -178,11 +209,11 @@ const columns = [
     style: "font-size: 14px",
   },
   {
-    name: "noteTitle",
+    name: "fileName",
     align: "left",
-    label: "ชื่อ-นามสกุล",
+    label: "ชื่อไฟล์",
     sortable: true,
-    field: "noteTitle",
+    field: "fileName",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
@@ -195,14 +226,84 @@ const columns = [
     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);
-    }
-  });
+    roleAdmin.value = await keycloak.tokenParsed.role.includes("placement1");
+    console.log("roleAdmin===>", roleAdmin.value);
+  }
+  await getData();
+});
+
+const getData = async () => {
+  showLoader();
+  await http
+    .get(config.API.transferUserId(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 = 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 ?? "";
+      }
+    })
+    .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();
+    });
+};
 </script>
 <style lang="scss" scope>
 .q-img {
@@ -217,34 +318,4 @@ onMounted(async () => {
 .text-detail {
   font-weight: 500;
 }
-.custom-header-table {
-  max-height: 64vh;
-
-  .q-table tr:nth-child(odd) td {
-    background: white;
-  }
-
-  .q-table tr:nth-child(even) td {
-    background: #f8f8f8;
-  }
-
-  .q-table thead tr {
-    background: #ecebeb;
-  }
-
-  .q-table thead tr th {
-    position: sticky;
-    z-index: 1;
-  }
-
-  /* this will be the loading indicator */
-  .q-table thead tr:last-child th {
-    /* height of all previous header rows */
-    top: 48px;
-  }
-
-  .q-table thead tr:first-child th {
-    top: 0;
-  }
-}
 </style>
diff --git a/src/modules/05_placement/interface/response/Transfer.ts b/src/modules/05_placement/interface/response/Transfer.ts
new file mode 100644
index 000000000..19a1523a9
--- /dev/null
+++ b/src/modules/05_placement/interface/response/Transfer.ts
@@ -0,0 +1,38 @@
+interface ResponseData {
+  createdAt: Date;
+  date: Date;
+  id: string;
+  isActive: boolean;
+  organization: string;
+  organizationPositionOld: string;
+  posNo: string;
+  position: string;
+  positionLevel: string;
+  positionLevelOld: string;
+  positionNumberOld: string;
+  positionTypeOld: string;
+  reason: string;
+  salary: number;
+  status: string;
+}
+
+interface TypeFile {
+  fileName: string;
+  pathName: string;
+}
+
+interface ResponseDataDetail {
+  createdAt: Date;
+  date: Date;
+  id: string;
+  organization: string;
+  organizationPositionOld: string;
+  positionLevelOld: string;
+  positionNumberOld: string;
+  positionTypeOld: string;
+  reason: string;
+  salary: number;
+  status: string;
+}
+
+export type { ResponseData, ResponseDataDetail, TypeFile };

From 054802c8b7a699be7d0f7af32ced1d0ea72538ea Mon Sep 17 00:00:00 2001
From: waruneeta <warunee.auy@gmail.com>
Date: Thu, 10 Aug 2023 17:58:18 +0700
Subject: [PATCH 079/113] =?UTF-8?q?=E0=B8=9B=E0=B8=A3=E0=B8=B1=E0=B8=9A?=
 =?UTF-8?q?=E0=B9=82=E0=B8=84=E0=B8=A3=E0=B8=87=E0=B8=AA=E0=B8=A3=E0=B9=89?=
 =?UTF-8?q?=E0=B8=B2=E0=B8=87=E0=B9=80=E0=B8=A1=E0=B8=99=E0=B8=B9,=20?=
 =?UTF-8?q?=E0=B9=80=E0=B8=9E=E0=B8=B4=E0=B9=88=E0=B8=A1=E0=B9=80=E0=B8=A1?=
 =?UTF-8?q?=E0=B8=99=E0=B8=B9=E0=B9=83=E0=B8=99=E0=B8=97=E0=B8=B0=E0=B9=80?=
 =?UTF-8?q?=E0=B8=9A=E0=B8=B5=E0=B8=A2=E0=B8=99=E0=B8=9B=E0=B8=A3=E0=B8=B0?=
 =?UTF-8?q?=E0=B8=A7=E0=B8=B1=E0=B8=95=E0=B8=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/interface/request/main/main.ts            | 104 ++-
 .../04_registry/components/Profile.vue        |  48 +-
 .../components/PersonalList/Table.vue         |   2 +-
 .../components/Receive/receiveMain.vue        |   2 +-
 .../components/Transfer/transferMain.vue      |   2 +-
 src/modules/05_placement/router.ts            |  52 --
 src/modules/08_registryEmployee/router.ts     |   8 +-
 .../08_registryEmployee/views/Main.vue        |   6 +-
 .../08_registryEmployee/views/information.vue |   2 +-
 .../components/Add.vue}                       |   0
 .../components/Detail.vue}                    |  11 +-
 .../components/Main.vue}                      | 185 +----
 .../components}/step/step01.vue               |   0
 .../10_order/components/step/step02.vue       | 728 ++++++++++++++++++
 .../components}/step/step03.vue               |   0
 .../components}/step/step04.vue               |   0
 src/modules/10_order/interface/index/Main.ts  | 218 ++++++
 .../10_order/interface/request/Main.ts        |  12 +
 .../10_order/interface/request/Order.ts       |   7 +
 .../10_order/interface/response/Main.ts       |   1 +
 .../10_order/interface/response/Order.ts      |  44 ++
 src/modules/10_order/router.ts                |  40 +
 src/modules/10_order/store.ts                 | 100 +++
 src/modules/10_order/views/Main.vue           |   7 +
 src/router/index.ts                           |   2 +
 src/views/MainLayout.vue                      |   6 +-
 26 files changed, 1337 insertions(+), 250 deletions(-)
 rename src/modules/{05_placement/components/OrderPlacement/addOrderPlacement.vue => 10_order/components/Add.vue} (100%)
 rename src/modules/{05_placement/components/OrderPlacement/detailOrderPlacement.vue => 10_order/components/Detail.vue} (88%)
 rename src/modules/{05_placement/components/OrderPlacement/MainOrderPlacement.vue => 10_order/components/Main.vue} (76%)
 rename src/modules/{05_placement/components/OrderPlacement => 10_order/components}/step/step01.vue (100%)
 create mode 100644 src/modules/10_order/components/step/step02.vue
 rename src/modules/{05_placement/components/OrderPlacement => 10_order/components}/step/step03.vue (100%)
 rename src/modules/{05_placement/components/OrderPlacement => 10_order/components}/step/step04.vue (100%)
 create mode 100644 src/modules/10_order/interface/index/Main.ts
 create mode 100644 src/modules/10_order/interface/request/Main.ts
 create mode 100644 src/modules/10_order/interface/request/Order.ts
 create mode 100644 src/modules/10_order/interface/response/Main.ts
 create mode 100644 src/modules/10_order/interface/response/Order.ts
 create mode 100644 src/modules/10_order/router.ts
 create mode 100644 src/modules/10_order/store.ts
 create mode 100644 src/modules/10_order/views/Main.vue

diff --git a/src/interface/request/main/main.ts b/src/interface/request/main/main.ts
index 8b9fda266..1dc23be57 100644
--- a/src/interface/request/main/main.ts
+++ b/src/interface/request/main/main.ts
@@ -111,6 +111,22 @@ const menuList = readonly<any[]>([
     path: "registry",
     role: "registry",
   },
+  {
+    key: 10,
+    icon: "o_contact_page",
+    activeIcon: "registry_employee_page",
+    label: "ทะเบียนประวัติลูกจ้าง",
+    path: "registry-employee",
+    role: "registryEmployee",
+  },
+  {
+    key: 10,
+    icon: "o_list",
+    activeIcon: "order",
+    label: "ออกคำสั่ง",
+    path: "order",
+    role: "placement",
+  },
   {
     key: 5,
     icon: "o_search",
@@ -192,12 +208,12 @@ const menuList = readonly<any[]>([
         path: "placement",
         role: "placement",
       },
-      {
-        key: 6.2,
-        label: "ออกคำสั่ง" /* ออกคำสั่งบรรจุ */,
-        path: "Orderplacement",
-        role: "placement",
-      },
+      // {
+      //   key: 6.2,
+      //   label: "ออกคำสั่ง" /* ออกคำสั่งบรรจุ */,
+      //   path: "Orderplacement",
+      //   role: "placement",
+      // },
       {
         key: 6.3,
         label: "การทดลองงาน" /* การทดลองงาน */,
@@ -206,7 +222,7 @@ const menuList = readonly<any[]>([
       },
       {
         key: 6.4,
-        label: "รายการคำขอโอน" /* */,
+        label: "รายการขอโอน" /* */,
         path: "transfer",
         role: "placement",
       },
@@ -218,13 +234,43 @@ const menuList = readonly<any[]>([
       },
       {
         key: 6.6,
-        label: "คำสั่งช่วยราชการ/ส่งตัวกลับ" /* */,
+        label: "รายการช่วยราชการ" /* */,
+        // path: "help-government",
         path: "repatriation-order",
         role: "placement",
       },
+      {
+        key: 6.7,
+        label: "รายการส่งตัวกลับ" /* */,
+        path: "repatriate",
+        role: "placement",
+      },
+      {
+        key: 6.8,
+        label: "รายการแต่งตั้ง" /* */,
+        // path: "repatriate",
+        role: "placement",
+      },
+      {
+        key: 6.9,
+        label: "รายการเลื่อน" /* */,
+        path: "postpone",
+        role: "placement",
+      },
+      {
+        key: 6.1,
+        label: "รายการย้าย" /* */,
+        path: "move-order",
+        role: "placement",
+      },
+      {
+        key: 6.1,
+        label: "รายการอื่นๆ" /* */,
+        path: "other-order",
+        role: "placement",
+      },
     ],
   },
-
   {
     key: 7,
     icon: "mdi-account-cancel-outline",
@@ -241,31 +287,43 @@ const menuList = readonly<any[]>([
       },
       {
         key: 7.2,
-        label: "ลาออก",
+        label: "รายการลาออก",
         path: "resign",
         role: "retirement",
       },
+      // {
+      //   key: 7.3,
+      //   label: "คำสั่งลาออก",
+      //   path: "resign-order",
+      //   role: "retirement",
+      // },
       {
         key: 7.3,
-        label: "คำสั่งลาออก",
-        path: "resign-order",
-        role: "retirement",
-      },
-      {
-        key: 7.4,
         label: "Exit interview",
         // path: "",
         role: "retirement",
       },
       {
-        key: 7.5,
-        label: "ถึงแก่กรรม",
+        key: 7.4,
+        label: "รายการบันทึกการถึงแก่กรรม",
         path: "deceased",
         role: "retirement",
       },
+      {
+        key: 7.5,
+        label: "รายการให้ออก",
+        path: "dismiss-order",
+        role: "retirement",
+      },
       {
         key: 7.6,
-        label: "คำสั่งให้ออก ปลดออก ไล่ออก",
+        label: "รายการปลดออก",
+        path: "dismiss-order",
+        role: "retirement",
+      },
+      {
+        key: 7.7,
+        label: "รายการไล่ออก",
         path: "dismiss-order",
         role: "retirement",
       },
@@ -363,14 +421,6 @@ const menuList = readonly<any[]>([
       },
     ],
   },
-  {
-    key: 10,
-    icon: "o_contact_page",
-    activeIcon: "contact_page",
-    label: "ทะเบียนประวัติลูกจ้าง",
-    path: "registryEmployee",
-    role: "registryEmployee",
-  },
 ]);
 
 const tabList = readonly<tabType[]>([
diff --git a/src/modules/04_registry/components/Profile.vue b/src/modules/04_registry/components/Profile.vue
index db03c712a..ee54e19eb 100644
--- a/src/modules/04_registry/components/Profile.vue
+++ b/src/modules/04_registry/components/Profile.vue
@@ -154,33 +154,69 @@
         </div>
         <q-space />
 
-        <q-btn round flat color="pink-5" icon="mdi-file-document">
+        <q-btn round flat color="blue" icon="mdi-file-document">
           <q-menu transition-show="jump-down" transition-hide="jump-up">
             <q-list dense style="min-width: 160px">
+              <q-item clickable v-close-popup @click="postAdd">
+                <q-item-section style="min-width: 0px" avatar class="q-py-sm">
+                </q-item-section>
+                <q-item-section>ช่วยราชการ</q-item-section>
+              </q-item>
+              <q-separator />
+              <q-item clickable v-close-popup @click="postAdd">
+                <q-item-section style="min-width: 0px" avatar class="q-py-sm">
+                </q-item-section>
+                <q-item-section>ส่งตัวกลับ</q-item-section>
+              </q-item>
+              <q-separator />
+              <q-item clickable v-close-popup @click="postAdd">
+                <q-item-section style="min-width: 0px" avatar class="q-py-sm">
+                </q-item-section>
+                <q-item-section>แต่งตั้ง</q-item-section>
+              </q-item>
+              <q-separator />
+              <q-item clickable v-close-popup @click="postAdd">
+                <q-item-section style="min-width: 0px" avatar class="q-py-sm">
+                </q-item-section>
+                <q-item-section>เลื่อน</q-item-section>
+              </q-item>
+              <q-separator />
+              <q-item clickable v-close-popup @click="postAdd">
+                <q-item-section style="min-width: 0px" avatar class="q-py-sm">
+                </q-item-section>
+                <q-item-section>ย้าย</q-item-section>
+              </q-item>
+              <q-separator />
               <q-item clickable v-close-popup @click="clickPassaway">
                 <q-item-section style="min-width: 0px" avatar class="q-py-sm">
                 </q-item-section>
                 <q-item-section>ถึงแก่กรรม</q-item-section>
               </q-item>
               <q-separator />
-              <q-item clickable v-close-popup @click="clickaddOrder">
+              <q-item clickable v-close-popup @click="postAdd">
                 <q-item-section style="min-width: 0px" avatar class="q-py-sm">
                 </q-item-section>
                 <q-item-section>ให้ออกจากราชการ</q-item-section>
               </q-item>
               <q-separator />
-              <q-item clickable v-close-popup @click="clickaddOrder">
+              <q-item clickable v-close-popup @click="postAdd">
                 <q-item-section style="min-width: 0px" avatar class="q-py-sm">
                 </q-item-section>
                 <q-item-section>ปลดออกจากราชการ</q-item-section>
               </q-item>
               <q-separator />
-              <q-item clickable v-close-popup @click="clickaddOrder">
+              <q-item clickable v-close-popup @click="postAdd">
                 <q-item-section style="min-width: 0px" avatar class="q-py-sm">
                 </q-item-section>
                 <q-item-section>ไล่ออกจากราชการ</q-item-section>
               </q-item>
               <q-separator />
+              <q-item clickable v-close-popup @click="postAdd">
+                <q-item-section style="min-width: 0px" avatar class="q-py-sm">
+                </q-item-section>
+                <q-item-section>อื่นๆ</q-item-section>
+              </q-item>
+              <q-separator />
             </q-list>
           </q-menu>
         </q-btn>
@@ -986,8 +1022,8 @@ const closeKp7Short = () => {
   dialogShort.value = false;
 };
 
-const clickaddOrder = () => {
-  router.push("/dismiss-order/add");
+const postAdd = () => {
+  // router.push("/dismiss-order/add");
 };
 
 const downloadKP7 = () => {};
diff --git a/src/modules/05_placement/components/PersonalList/Table.vue b/src/modules/05_placement/components/PersonalList/Table.vue
index bb19d36fa..40c9ee9ec 100644
--- a/src/modules/05_placement/components/PersonalList/Table.vue
+++ b/src/modules/05_placement/components/PersonalList/Table.vue
@@ -1140,7 +1140,7 @@ const paginationLabel = (start: number, end: number, total: number) => {
 
       <q-card-actions align="right" class="bg-white text-teal">
         <q-btn
-          label="บันทึก"
+          label="ส่งรายชื่อ"
           @click="savelist"
           :disable="checkSelected"
           color="public"
diff --git a/src/modules/05_placement/components/Receive/receiveMain.vue b/src/modules/05_placement/components/Receive/receiveMain.vue
index 8a16fda59..17d810e34 100644
--- a/src/modules/05_placement/components/Receive/receiveMain.vue
+++ b/src/modules/05_placement/components/Receive/receiveMain.vue
@@ -625,7 +625,7 @@ const nextPage = (row: any) => {
 
       <q-card-actions align="right" class="bg-white text-teal">
         <q-btn
-          label="บันทึก"
+          label="ส่งไปออกคำสั่ง"
           @click=""
           :disable="checkSelected"
           color="public"
diff --git a/src/modules/05_placement/components/Transfer/transferMain.vue b/src/modules/05_placement/components/Transfer/transferMain.vue
index fb15a19aa..0742a74fd 100644
--- a/src/modules/05_placement/components/Transfer/transferMain.vue
+++ b/src/modules/05_placement/components/Transfer/transferMain.vue
@@ -496,7 +496,7 @@ const getData = async () => {
 
       <q-card-actions align="right" class="bg-white text-teal">
         <q-btn
-          label="บันทึก"
+          label="ส่งไปออกคำสั่ง"
           @click=""
           :disable="checkSelected"
           color="public"
diff --git a/src/modules/05_placement/router.ts b/src/modules/05_placement/router.ts
index 614adfb7c..572aa4032 100644
--- a/src/modules/05_placement/router.ts
+++ b/src/modules/05_placement/router.ts
@@ -8,18 +8,6 @@ const PlacementDetail = () =>
   import("@/modules/05_placement/components/PersonalList/Detail.vue");
 const PlacementPersonalDetail = () =>
   import("@/modules/05_placement/components/PersonalDetail/Detail.vue");
-const addOrderPlacement = () =>
-  import(
-    "@/modules/05_placement/components/OrderPlacement/addOrderPlacement.vue"
-  );
-const MainOrderPlacement = () =>
-  import(
-    "@/modules/05_placement/components/OrderPlacement/MainOrderPlacement.vue"
-  );
-const detailOrderReplace = () =>
-  import(
-    "@/modules/05_placement/components/OrderPlacement/detailOrderPlacement.vue"
-  );
 
 // ระบบทดลองงาน
 const mainProbation = () =>
@@ -86,46 +74,6 @@ export default [
       Role: "placement",
     },
   },
-  {
-    path: "/placement/order",
-    name: "Orderplacement",
-    component: MainOrderPlacement,
-    meta: {
-      Auth: true,
-      Key: [6.2],
-      Role: "placement",
-    },
-  },
-  {
-    path: "/placement/order/add",
-    name: "Orderplacementadd",
-    component: detailOrderReplace,
-    meta: {
-      Auth: true,
-      Key: [6.9],
-      Role: "placement",
-    },
-  },
-  {
-    path: "/placement/order/detail/:orderid",
-    name: "OrderplacementDetail",
-    component: detailOrderReplace,
-    meta: {
-      Auth: true,
-      Key: [6.2],
-      Role: "placement",
-    },
-  },
-  {
-    path: "/placement/addOrderPlacement",
-    name: "addOrderPlacement",
-    component: addOrderPlacement,
-    meta: {
-      Auth: true,
-      Key: [6.2],
-      Role: "placement",
-    },
-  },
   {
     path: "/probation",
     name: "probation",
diff --git a/src/modules/08_registryEmployee/router.ts b/src/modules/08_registryEmployee/router.ts
index 130b90438..49f48ff78 100644
--- a/src/modules/08_registryEmployee/router.ts
+++ b/src/modules/08_registryEmployee/router.ts
@@ -17,8 +17,8 @@ const EditDetail = defineAsyncComponent(
 
 export default [
   {
-    path: "/registryEmployee",
-    name: "registryEmployee",
+    path: "/registry-employee",
+    name: "registry-employee",
     component: Main,
     meta: {
       Auth: true,
@@ -37,7 +37,7 @@ export default [
   //     },
   //   },
   {
-    path: "/registryEmployee/add",
+    path: "/registry-employee/add",
     name: "registryEmployeeAdd",
     component: Detail,
     meta: {
@@ -47,7 +47,7 @@ export default [
     },
   },
   {
-    path: "/registryEmployee/edit/:id",
+    path: "/registry-employee/edit/:id",
     name: "registryEmployeeEdit",
     component: EditDetail,
     meta: {
diff --git a/src/modules/08_registryEmployee/views/Main.vue b/src/modules/08_registryEmployee/views/Main.vue
index 36e9e8553..5e84ae330 100644
--- a/src/modules/08_registryEmployee/views/Main.vue
+++ b/src/modules/08_registryEmployee/views/Main.vue
@@ -1343,7 +1343,7 @@ const modalOpenClose = () => {
 };
 
 const next = (id: string) => {
-  router.push(`/registryEmployee/${id}`);
+  router.push(`/registry-employee/${id}`);
 };
 
 const resetFilter = () => {
@@ -1381,13 +1381,13 @@ const clickClose = async () => {
 const clickAdd = () => {
   //   modal.value = true;
 
-  router.push(`/registryEmployee/add`);
+  router.push(`/registry-employee/add`);
   //   router.push(`/placement/detail`);
 };
 
 // ดูรายการแก้ไขรายชื่อ
 const redirectToPage = (id?: string) => {
-  router.push(`/registryEmployee/edit/${id}`);
+  router.push(`/registry-employee/edit/${id}`);
 };
 const editDetail = async (row: any) => {
   await getPosition(row.id);
diff --git a/src/modules/08_registryEmployee/views/information.vue b/src/modules/08_registryEmployee/views/information.vue
index 8a030d692..f27c210a9 100644
--- a/src/modules/08_registryEmployee/views/information.vue
+++ b/src/modules/08_registryEmployee/views/information.vue
@@ -1112,7 +1112,7 @@ const saveData = async () => {
 };
 
 const clickBack = () => {
-  router.push({ name: "registryEmployee" });
+  router.push("/registry-employee");
 };
 
 const getClass = (val: boolean) => {
diff --git a/src/modules/05_placement/components/OrderPlacement/addOrderPlacement.vue b/src/modules/10_order/components/Add.vue
similarity index 100%
rename from src/modules/05_placement/components/OrderPlacement/addOrderPlacement.vue
rename to src/modules/10_order/components/Add.vue
diff --git a/src/modules/05_placement/components/OrderPlacement/detailOrderPlacement.vue b/src/modules/10_order/components/Detail.vue
similarity index 88%
rename from src/modules/05_placement/components/OrderPlacement/detailOrderPlacement.vue
rename to src/modules/10_order/components/Detail.vue
index 35f34e817..8a5c8b4db 100644
--- a/src/modules/05_placement/components/OrderPlacement/detailOrderPlacement.vue
+++ b/src/modules/10_order/components/Detail.vue
@@ -24,7 +24,6 @@
 import { useRouter } from "vue-router";
 import { ref, defineAsyncComponent, onMounted, onUnmounted } from "vue";
 import type { QStepper } from "quasar";
-import { useProbationDataStore } from "@/modules/05_placement/store";
 import { useRoute } from "vue-router";
 import http from "@/plugins/http";
 import config from "@/app.config";
@@ -32,24 +31,22 @@ const route = useRoute();
 
 
 const orderId_params = route.params.orderid;
-const probationData = useProbationDataStore();
-const { stepOrder, setStepOrder } = probationData;
 
 const step01 = defineAsyncComponent(
   () =>
-    import("@/modules/05_placement/components/OrderPlacement/step/step01.vue")
+    import("@/modules/10_order/components/step/step01.vue")
 );
 const step02 = defineAsyncComponent(
   () =>
-    import("@/modules/05_placement/components/OrderPlacement/step/step02.vue")
+    import("@/modules/10_order/components/step/step02.vue")
 );
 const step03 = defineAsyncComponent(
   () =>
-    import("@/modules/05_placement/components/OrderPlacement/step/step03.vue")
+    import("@/modules/10_order/components/step/step03.vue")
 );
 const step04 = defineAsyncComponent(
   () =>
-    import("@/modules/05_placement/components/OrderPlacement/step/step04.vue")
+    import("@/modules/10_order/components/step/step04.vue")
 );
 
 const router = useRouter();
diff --git a/src/modules/05_placement/components/OrderPlacement/MainOrderPlacement.vue b/src/modules/10_order/components/Main.vue
similarity index 76%
rename from src/modules/05_placement/components/OrderPlacement/MainOrderPlacement.vue
rename to src/modules/10_order/components/Main.vue
index ea400107e..f5ed2ae12 100644
--- a/src/modules/05_placement/components/OrderPlacement/MainOrderPlacement.vue
+++ b/src/modules/10_order/components/Main.vue
@@ -4,33 +4,12 @@
     <q-card flat bordered class="col-12 q-mt-sm q-pa-md">
       <div class="row q-col-gutter-sm">
         <div class="row col-12 q-col-gutter-sm">
-          <q-select
-            class="col-xs-12 col-sm-3 col-md-2"
-            v-model="fiscalyear"
-            label="ปีงบประมาณ"
-            dense
-            emit-value
-            map-options
-            :options="fiscalyearOP"
-            option-value="id"
-            option-label="name"
-            lazy-rules
-            hide-bottom-space
-            :readonly="false"
-            :borderless="false"
-            :outlined="true"
-            :hide-dropdown-icon="false"
-            @update:model-value="searchFilterTable"
-          />
+          <q-select class="col-xs-12 col-sm-3 col-md-2" v-model="fiscalyear" label="ปีงบประมาณ" dense emit-value
+            map-options :options="fiscalyearOP" option-value="id" option-label="name" lazy-rules hide-bottom-space
+            :readonly="false" :borderless="false" :outlined="true" :hide-dropdown-icon="false"
+            @update:model-value="searchFilterTable" />
           <div>
-            <q-btn
-              size="12px"
-              flat
-              round
-              color="add"
-              icon="mdi-plus"
-              @click="clickAdd"
-            >
+            <q-btn size="12px" flat round color="add" icon="mdi-plus" @click="clickAdd">
               <q-tooltip>เพิ่มข้อมูล</q-tooltip>
               <!-- <q-menu>
                 <q-list style="min-width: 100px">
@@ -48,102 +27,36 @@
           </div>
           <q-space />
 
-          <q-input
-            class="col-xs-12 col-sm-3 col-md-2"
-            standout
-            dense
-            v-model="filterKeyword"
-            ref="filterRef"
-            outlined
-            debounce="300"
-            placeholder="ค้นหา"
-          >
+          <q-input class="col-xs-12 col-sm-3 col-md-2" standout dense v-model="filterKeyword" ref="filterRef" outlined
+            debounce="300" placeholder="ค้นหา">
             <template v-slot:append>
               <q-icon v-if="filterKeyword == ''" name="search" />
-              <q-icon
-                v-if="filterKeyword !== ''"
-                name="clear"
-                class="cursor-pointer"
-                @click="resetFilter"
-              />
+              <q-icon v-if="filterKeyword !== ''" name="clear" class="cursor-pointer" @click="resetFilter" />
             </template>
           </q-input>
 
-          <q-select
-            v-model="visibleColumns"
-            multiple
-            outlined
-            dense
-            options-dense
-            :display-value="$q.lang.table.columns"
-            emit-value
-            map-options
-            :options="columns"
-            option-value="name"
-            options-cover
-            style="min-width: 150px"
-            class="col-xs-12 col-sm-3 col-md-2"
-          />
+          <q-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" />
         </div>
         <div class="col-12">
           <q-card bordered class="col-12 filter-card q-pa-sm">
             <div class="row col-12 q-col-gutter-sm">
-              <q-select
-                class="col-xs-12 col-sm-3 col-md-2"
-                v-model="OrderType"
-                label="ประเภท"
-                dense
-                emit-value
-                map-options
-                option-label="name"
-                :options="OrderTypeOption"
-                option-value="name"
-                lazy-rules
-                hide-bottom-space
-                :readonly="false"
-                :borderless="false"
-                :outlined="true"
-                :hide-dropdown-icon="false"
-                @update:model-value="searchFilterTable"
-              />
-              <q-select
-                class="col-xs-12 col-sm-3 col-md-2"
-                v-model="OrderStatus"
-                label="สถานะ"
-                dense
-                emit-value
-                map-options
-                option-label="name"
-                :options="OrderStatusOption"
-                option-value="name"
-                lazy-rules
-                hide-bottom-space
-                :readonly="false"
-                :borderless="false"
-                :outlined="true"
-                :hide-dropdown-icon="false"
-                @update:model-value="searchFilterTable"
-              />
+              <q-select class="col-xs-12 col-sm-3 col-md-2" v-model="OrderType" label="ประเภท" dense emit-value
+                map-options option-label="name" :options="OrderTypeOption" option-value="name" lazy-rules
+                hide-bottom-space :readonly="false" :borderless="false" :outlined="true" :hide-dropdown-icon="false"
+                @update:model-value="searchFilterTable" />
+              <q-select class="col-xs-12 col-sm-3 col-md-2" v-model="OrderStatus" label="สถานะ" dense emit-value
+                map-options option-label="name" :options="OrderStatusOption" option-value="name" lazy-rules
+                hide-bottom-space :readonly="false" :borderless="false" :outlined="true" :hide-dropdown-icon="false"
+                @update:model-value="searchFilterTable" />
             </div>
           </q-card>
         </div>
         <div class="col-12">
-          <q-table
-            ref="table"
-            :columns="columns"
-            :rows="UpdataData"
-            :filter="filterKeyword"
-            row-key="Order"
-            flat
-            bordered
-            :paging="true"
-            dense
-            class="custom-header-table"
-            v-bind="attrs"
-            :visible-columns="visibleColumns"
-            :pagination-label="paginationLabel"
-            v-model:pagination="pagination"
-          >
+          <q-table ref="table" :columns="columns" :rows="UpdataData" :filter="filterKeyword" row-key="Order" flat bordered
+            :paging="true" dense class="custom-header-table" v-bind="attrs" :visible-columns="visibleColumns"
+            :pagination-label="paginationLabel" v-model:pagination="pagination">
             <template v-slot:header="props">
               <q-tr :props="props">
                 <q-th v-for="col in props.cols" :key="col.name" :props="props">
@@ -153,11 +66,8 @@
               </q-tr>
             </template>
             <template v-slot:body="props">
-              <q-tr
-                :props="props"
-                class="cursor-pointer"
-                @click="redirectToPage(props.row.orderId, props.row.OrderStatus)"
-              >
+              <q-tr :props="props" class="cursor-pointer"
+                @click="redirectToPage(props.row.orderId, props.row.OrderStatus)">
                 <q-td key="Order" :props="props">
                   {{ props.row.Order }}
                 </q-td>
@@ -180,31 +90,16 @@
                   {{ props.row.OrderStatus }}
                 </q-td>
                 <q-td auto-width>
-                  <q-btn
-                    dense
-                    size="12px"
-                    flat
-                    round
-                    color="red"
-                    @click.stop="clickDelete(props.row.orderId)"
-                    icon="mdi-delete"
-                  >
+                  <q-btn dense size="12px" flat round color="red" @click.stop="clickDelete(props.row.orderId)"
+                    icon="mdi-delete">
                     <q-tooltip>ลบข้อมูล</q-tooltip>
                   </q-btn>
                 </q-td>
               </q-tr>
             </template>
             <template v-slot:pagination="scope">
-              <q-pagination
-                v-model="pagination.page"
-                active-color="primary"
-                color="dark"
-                :max="scope.pagesNumber"
-                :max-pages="5"
-                size="sm"
-                boundary-links
-                direction-links
-              ></q-pagination>
+              <q-pagination v-model="pagination.page" active-color="primary" color="dark" :max="scope.pagesNumber"
+                :max-pages="5" size="sm" boundary-links direction-links></q-pagination>
             </template>
           </q-table>
         </div>
@@ -216,13 +111,13 @@
 <script setup lang="ts">
 import { onMounted, reactive, ref, useAttrs, computed } from "vue";
 import type { QTableProps } from "quasar";
-import type { FormOrderPlacementMainData } from "@/modules/05_placement/interface/request/Main";
+import type { FormOrderPlacementMainData } from "@/modules/10_order/interface/request/Main";
 import type {
   DataOption,
   DataOption1,
-} from "@/modules/05_placement/interface/index/Main";
+} from "@/modules/10_order/interface/index/Main";
 import { useCounterMixin } from "@/stores/mixin";
-import { useOrderPlacementDataStore } from "@/modules/05_placement/store";
+import { useOrderPlacementDataStore } from "@/modules/10_order/store";
 import router from "@/router";
 import { useQuasar } from "quasar";
 import http from "@/plugins/http";
@@ -400,22 +295,22 @@ const OriginalDataFetch = async () => {
 
 // ดูรายการหน้าต่อไป
 const redirectToPage = (id?: string, status?: string) => {
- let step = 1;
+  let step = 1;
   switch (status) {
     case 'จัดทำร่างคำสั่ง':
       step = 1;
       break;
-      case 'บัญชีแนบท้าย':
+    case 'บัญชีแนบท้าย':
       step = 2;
       break;
-      case 'เลือกผู้ได้รับสำเนาคำสั่ง':
+    case 'เลือกผู้ได้รับสำเนาคำสั่ง':
       step = 3;
       break;
-      case 'รอผู้มีอำนาจลงนาม':
+    default:
       step = 4;
       break;
   }
-  router.push(`/placement/order/detail/${id}?step=${step}`);
+  router.push(`/order/detail/${id}?step=${step}`);
 };
 
 const clickDelete = (id: string) => {
@@ -431,8 +326,8 @@ const clickDelete = (id: string) => {
     .onOk(async () => {
       await deleteData(id);
     })
-    .onCancel(() => {})
-    .onDismiss(() => {});
+    .onCancel(() => { })
+    .onDismiss(() => { });
 };
 
 const deleteData = async (id: string) => {
@@ -452,7 +347,7 @@ const deleteData = async (id: string) => {
 };
 
 const clickAdd = () => {
-  router.push({ name: "Orderplacementadd" });
+  router.push({ name: "OrderAdd" });
 };
 
 // const viewDetail = (id: string, status: string) => {
@@ -686,4 +581,4 @@ const paginationLabel = (start: string, end: string, total: string) => {
     top: 0;
   }
 }
-</style>
+</style>
\ No newline at end of file
diff --git a/src/modules/05_placement/components/OrderPlacement/step/step01.vue b/src/modules/10_order/components/step/step01.vue
similarity index 100%
rename from src/modules/05_placement/components/OrderPlacement/step/step01.vue
rename to src/modules/10_order/components/step/step01.vue
diff --git a/src/modules/10_order/components/step/step02.vue b/src/modules/10_order/components/step/step02.vue
new file mode 100644
index 000000000..a64b88f85
--- /dev/null
+++ b/src/modules/10_order/components/step/step02.vue
@@ -0,0 +1,728 @@
+div
+<template>
+  <div>
+    <div class="q-py-md q-pl-md" style="height: 68vh; overflow-y: scroll">
+      <div class="col-12 row q-pb-sm items-center">
+        <q-btn flat round color="primary" @click="refresh" 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-th auto-width />
+            <q-th auto-width />
+          </q-tr>
+        </template>
+        <template v-slot:body="props">
+          <q-tr :props="props" class="cursor-pointer">
+            <q-td
+              v-for="col in props.cols"
+              :key="col.name"
+              :props="props"
+              @click="selectModal(props.row)"
+              >{{ col.name == "no" ? props.rowIndex + 1 : col.value }}</q-td
+            >
+            <q-td auto-width>
+              <q-btn
+                dense
+                size="12px"
+                flat
+                round
+                :color="props.rowIndex + 1 == 1 ? 'grey' : 'green'"
+                :disable="props.rowIndex + 1 == 1"
+                @click="upDown(props)"
+                icon="mdi-arrow-up-bold"
+              >
+                <!-- <q-tooltip>เลื่อนลำดับขึ้น</q-tooltip> -->
+              </q-btn>
+            </q-td>
+            <q-td auto-width>
+              <q-btn
+                dense
+                size="12px"
+                flat
+                round
+                :color="rows.length == props.rowIndex + 1 ? 'grey' : 'red'"
+                :disable="rows.length == props.rowIndex + 1"
+                @click="upDown(props, false)"
+                icon="mdi-arrow-down-bold"
+              >
+                <!-- <q-tooltip>เลื่อนลำดับลง</q-tooltip> -->
+              </q-btn>
+            </q-td>
+            <q-td auto-width>
+              <q-btn
+                dense
+                size="12px"
+                flat
+                round
+                color="red"
+                @click="dialogDeleteData(props.row.personalId)"
+                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="save"
+        class="q-px-md"
+        ><!-- icon="mdi-content-save-outline"
+        <q-tooltip>บันทึก</q-tooltip> -->
+      </q-btn>
+      <!-- <q-btn dense flat round color="primary" icon="chevron_right" @click="next">
+        <q-tooltip>ต่อไป</q-tooltip>
+      </q-btn> -->
+    </div>
+  </div>
+  <!--********************************** เงินเดือน ********************************** -->
+  <q-dialog v-model="modal" persistent>
+    <q-card style="width: 50vw; max-width: 50vw">
+      <q-form ref="myForm">
+        <DialogHeader :tittle="titleName" :close="modalOpenClose" />
+        <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">
+              <div class="col-12 row q-py-sm items-center q-col-gutter-sm">
+                <div class="col-xs-6 col-sm-6 col-md-6">
+                  <q-input
+                    outlined
+                    dense
+                    lazy-rules
+                    v-model="modalData.salaryAmount"
+                    :rules="[(val) => !!val || `${'กรุณากรอกเงินเดือน'}`]"
+                    :label="`${'เงินเดือน'}`"
+                    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="modalData.positionSalaryAmount"
+                    :label="`${'เงินประจำตำแหน่ง'}`"
+                    type="number"
+                    hide-bottom-space
+                  />
+                  <!-- :rules="[
+                      (val) => !!val || `${'กรุณากรอกเงินประจำตำแหน่ง'}`,
+                    ]" -->
+                </div>
+
+                <div class="col-xs-6 col-sm-6 col-md-6">
+                  <q-input
+                    outlined
+                    dense
+                    lazy-rules
+                    v-model="modalData.mouthSalaryAmount"
+                    :label="`${'เงินค่าตอบแทนรายเดือน'}`"
+                    type="number"
+                    hide-bottom-space
+                  />
+                  <!-- :rules="[
+                      (val) => !!val || `${'กรุณากรอกเงินค่าตอบแทนรายเดือน'}`,
+                    ]" -->
+                </div>
+              </div>
+            </div>
+          </div>
+        </q-card-section>
+        <q-separator />
+        <q-card-actions align="right">
+          <q-btn
+            dense
+            unelevated
+            label="บันทึก"
+            color="public"
+            @click="saveModal"
+            class="q-px-md"
+            ><!-- icon="mdi-content-save-outline"
+        <q-tooltip>บันทึก</q-tooltip> -->
+          </q-btn>
+        </q-card-actions>
+      </q-form>
+    </q-card>
+  </q-dialog>
+  <!--********************************** รายชื่อ ********************************** -->
+  <q-dialog v-model="modalAdd" persistent>
+    <q-card style="width: 50vw; max-width: 50vw">
+      <q-form ref="myFormAdd">
+        <DialogHeader tittle="รายชื่อในการออกคำสั่ง" :close="modalAddChange" />
+        <q-separator />
+        <q-card-section class="q-pa-sm bg-grey-1">
+          <d-table
+            :rows="rows2"
+            :columns="columns"
+            :visible-columns="visibleColumns"
+            :filter="filter"
+            row-key="name"
+            selection="multiple"
+            v-model:selected="selected"
+          >
+            <template v-slot:header="props">
+              <q-tr :props="props">
+                <q-th auto-width>
+                  <q-checkbox
+                    keep-color
+                    color="primary"
+                    dense
+                    v-model="props.selected"
+                  />
+                </q-th>
+                <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>
+                  <q-checkbox
+                    keep-color
+                    color="primary"
+                    dense
+                    v-model="props.selected"
+                  />
+                </q-td>
+                <q-td
+                  v-for="col in props.cols"
+                  :key="col.name"
+                  :props="props"
+                  >{{ col.name == "no" ? props.rowIndex + 1 : col.value }}</q-td
+                >
+              </q-tr>
+            </template>
+          </d-table>
+        </q-card-section>
+        <q-separator />
+        <q-card-actions align="right">
+          <q-btn
+            dense
+            unelevated
+            label="บันทึก"
+            color="public"
+            @click="saveModalAdd"
+            class="q-px-md"
+            ><!-- icon="mdi-content-save-outline"
+        <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 type { QInput } from "quasar";
+import { useCounterMixin } from "@/stores/mixin";
+import type { QTableProps, QForm } from "quasar";
+import { useRoute } from "vue-router";
+import DialogHeader from "@/modules/04_registry/components/DialogHeader.vue";
+import type { ResponseData } from "@/modules/05_placement/interface/response/Order";
+
+import http from "@/plugins/http";
+import config from "@/app.config";
+
+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 mixin = useCounterMixin(); //เรียกฟังก์ชันกลาง
+const { dialogMessage, messageError, showLoader, hideLoader, success } = mixin;
+
+const route = useRoute();
+const $q = useQuasar();
+
+const modalData = ref<any>({
+  salaryAmount: 0,
+  positionSalaryAmount: 0,
+  mouthSalaryAmount: 0,
+});
+const myForm = ref<QForm | null>(null);
+const myFormAdd = ref<QForm | null>(null);
+const modal = ref<boolean>(false);
+const modalAdd = ref<boolean>(false);
+const titleName = ref<string>("");
+const filterRef = ref<QInput>();
+const filter = ref<string>("");
+const visibleColumns = ref<String[]>(["no", "idCard", "name", "education"]);
+const columns = ref<QTableProps["columns"]>([
+  {
+    name: "no",
+    align: "left",
+    label: "ลำดับ",
+    field: "no",
+    sortable: true,
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "idCard",
+    align: "left",
+    label: "เลขประจำตัวประชาชน",
+    field: "idCard",
+    sortable: true,
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "name",
+    align: "left",
+    label: "ชื่อ-สกุล",
+    field: "name",
+    sortable: true,
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "education",
+    align: "left",
+    label: "วุฒิการศึกษาในการออกคำสั่ง",
+    field: "education",
+    sortable: true,
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+]);
+const rows = ref<ResponseData[]>([]);
+const rows2 = ref<ResponseData[]>([]);
+const selected = ref<ResponseData[]>([]);
+const orderId = ref<string>(route.params.orderid.toString());
+
+onMounted(async () => {
+  await conditionData();
+});
+
+const conditionData = async () => {
+  const id = route.params.orderid
+    ? route.params.orderid.toString()
+    : localStorage.getItem("orderId")
+    ? localStorage.getItem("orderId")
+    : null;
+  if (id !== null) {
+    await getData(id);
+  }
+};
+
+const getData = async (id: string) => {
+  showLoader();
+  await http
+    .get(config.API.personsselectedOrder(id))
+    .then((res) => {
+      const data = res.data.result;
+      console.log(data);
+      let list: ResponseData[] = [];
+      data.map((r: ResponseData) => {
+        list.push({
+          education: r.education ?? "",
+          idCard: r.idCard ?? "",
+          name: r.name ?? "",
+          personalId: r.personalId ?? "",
+          selectStatus: r.selectStatus !== null ? r.selectStatus : false,
+          sequence: r.sequence !== null ? r.sequence : 0,
+          refRecordId: r.refRecordId,
+        });
+      });
+      //   console.log("list", list);
+      rows.value = list;
+      selected.value = rows.value;
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+};
+
+// const saveSalary = async (id: string) => {
+//   await http
+//     .put(config.API.salaryOrder(id))
+//     .then((res) => {
+//       //   const data = res.data.result;
+//       //   console.log(res);
+//       success($q, "บันทึกข้อมูลสำเร็จ");
+//     })
+//     .catch((e) => {
+//       messageError($q, e);
+//     })
+//     .finally(() => {
+//       hideLoader();
+//     });
+// };
+
+const dialogDeleteData = async (id: string) => {
+  dialogMessage(
+    $q,
+    "ยืนยันการลบข้อมูล",
+    "ต้องการลบข้อมูลนี้ใช่หรือไม่?",
+    "mdi-help-circle-outline",
+    "ตกลง",
+    "red",
+    () => deleteData(id),
+    undefined
+  );
+};
+
+const deleteData = async (id: string) => {
+  await http
+    .delete(config.API.personsOrder(id))
+    .then((res) => {
+      //   const data = res.data.result;
+      //   console.log(res);
+      success($q, "ลบข้อมูลสำเร็จ");
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(async () => {
+      hideLoader();
+      await conditionData();
+    });
+};
+
+const swapUp = async (id: string) => {
+  // id = personalId
+  await http
+    .put(config.API.swapUpOrder(id))
+    .then((res) => {
+      //   const data = res.data.result;
+      //   console.log(res);
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(async () => {
+      await conditionData();
+      hideLoader();
+    });
+};
+
+const swapDown = async (id: string) => {
+  // id = personalId
+  await http
+    .put(config.API.swapDownOrder(id))
+    .then((res) => {
+      //   const data = res.data.result;
+      //   console.log(res);
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(async () => {
+      await conditionData();
+      hideLoader();
+    });
+};
+
+const upDown = async (value: any, up: boolean = true) => {
+  const indexCurrent = value.rowIndex;
+  if (up) {
+    await swapUp(value.row.personalId);
+    // rows.value[indexCurrent] = rows.value[indexCurrent - 1];
+    // rows.value[indexCurrent - 1] = value.row;
+  } else {
+    await swapDown(value.row.personalId);
+    // rows.value[indexCurrent] = rows.value[indexCurrent + 1];
+    // rows.value[indexCurrent + 1] = value.row;
+  }
+};
+
+const saveModal = () => {
+  if (myForm.value !== null) {
+    myForm.value.validate().then(async (result: boolean) => {
+      if (result) {
+        putSalary(modalData.value);
+      }
+    });
+  }
+};
+const personalId = ref<string>("");
+const selectModal = (e: any) => {
+  console.log(e);
+  titleName.value = e.name;
+  personalId.value = e.personalId;
+  // modalData.value = {
+  //   salaryAmount: 0,
+  //   positionSalaryAmount: 0,
+  //   mouthSalaryAmount: 0,
+  // };
+
+  modalOpenClose(e.personalId);
+};
+
+const modalOpenClose = async (personalId: string) => {
+  modal.value = !modal.value;
+  if (!modal.value) {
+    titleName.value = "";
+  }
+  if (modal.value == true) {
+    await fetchSalary(personalId);
+  }
+};
+const fetchSalary = async (personalId: string) => {
+  console.log(personalId);
+  showLoader();
+  await http
+    .get(config.API.salaryOrder(personalId))
+    .then((res: any) => {
+      console.log(res);
+      let salary = res.data.result;
+      modalData.value = {
+        salaryAmount: salary.salaryAmount,
+        positionSalaryAmount: salary.positionSalaryAmount,
+        mouthSalaryAmount: salary.monthSalaryAmount,
+      };
+    })
+    .catch((e) => {
+      console.log(e);
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+};
+const putSalary = async (salary: any) => {
+  modalData.value = {
+    salaryAmount: Number(salary.salaryAmount),
+    positionSalaryAmount: Number(salary.positionSalaryAmount),
+    monthSalaryAmount: Number(salary.mouthSalaryAmount),
+  };
+  $q.dialog({
+    title: "ยืนยันการบันทึกข้อมูล",
+    message: "ต้องการยืนยันการบันทึกข้อมูลนี้ใช่หรือไม่?",
+    cancel: {
+      flat: true,
+      color: "negative",
+    },
+    persistent: true,
+  }).onOk(async () => {
+    await http
+      .put(config.API.salaryOrder(personalId.value), modalData.value)
+      .then((res: any) => {
+        console.log(res);
+        success($q, "บันทึกข้อมูลสำเร็จ");
+      })
+      .catch((e) => {
+        console.log(e);
+        messageError($q, e);
+      })
+      .finally(async () => {
+        await conditionData();
+        modal.value = false;
+      });
+  });
+};
+
+const modalAddChange = async () => {
+  modalAdd.value = !modalAdd.value;
+  if (modalAdd.value == true) {
+    await fetchaddlist(orderId.value);
+  } else await conditionData();
+};
+const fetchaddlist = async (id: string) => {
+  showLoader();
+  await http
+    .get(config.API.personsOrder(id))
+    .then((res) => {
+      const data = res.data.result;
+      console.log(data);
+      let list = [];
+      list = data.map((r: ResponseData) => ({
+        education: r.education ?? "",
+        idCard: r.idCard ?? "",
+        name: r.name ?? "",
+        personalId: r.personalId ?? "",
+        selectStatus: r.selectStatus !== null ? r.selectStatus : false,
+        sequence: r.sequence !== null ? r.sequence : 0,
+        refRecordId: r.refRecordId,
+      }));
+      rows2.value = list;
+      selected.value = rows.value;
+      // rows2.value = list.filter((e: any) => e.selectStatus === false);
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+};
+const saveModalAdd = () => {
+  if (myFormAdd.value !== null) {
+    myFormAdd.value.validate().then(async (result: boolean) => {
+      if (result && selected.value.length !== 0) {
+        $q.dialog({
+          title: "ยืนยันการเพิ่มรายชื่อออกคำสั่ง",
+          message: "ต้องการยืนยันการเพิ่มรายชื่อออกคำสั่งนี้ใช่หรือไม่?",
+          cancel: {
+            flat: true,
+            color: "negative",
+          },
+          persistent: true,
+        }).onOk(async () => {
+          let data = [];
+          data.push(...selected.value.map((e: any) => e.refRecordId));
+          // console.log(data);
+          addlist(data);
+        });
+      }
+    });
+  }
+};
+const addlist = async (data: Object) => {
+  await http
+    .post(config.API.personsOrder(orderId.value), data)
+    .then(() => {
+      success($q, "บันทึกสำเร็จ");
+    })
+    .catch((e: any) => {
+      console.log(e);
+      messageError($q, e);
+    })
+    .finally(() => {
+      modalAddChange();
+    });
+};
+
+const click = (e: any) => {
+  console.log(e);
+  console.log(rows.value.length);
+};
+
+const save = () => {
+  if (selected.value.length > 0) {
+    $q.dialog({
+      title: "ยืนยันการบันทึกข้อมูล",
+      message: "ต้องการยืนยันการบันทึกข้อมูลนี้ใช่หรือไม่?",
+      cancel: {
+        flat: true,
+        color: "negative",
+      },
+      persistent: true,
+    }).onOk(async () => {
+      success($q, "บันทึกข้อมูลสำเร็จ");
+      next();
+    });
+  } else {
+    dialogMessage(
+      $q,
+      "ข้อความแจ้งเตือน",
+      "กรุณาเลือกรายชื่อ",
+      "warning",
+      undefined,
+      "orange",
+      undefined,
+      undefined,
+      true
+    );
+  }
+};
+
+const selectData = (row: any) => {};
+
+const refresh = async () => {
+  // await conditionData();
+  modalAddChange();
+  selected.value = [];
+};
+
+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,
+  };
+};
+</script>
+<style lang="scss"></style>
diff --git a/src/modules/05_placement/components/OrderPlacement/step/step03.vue b/src/modules/10_order/components/step/step03.vue
similarity index 100%
rename from src/modules/05_placement/components/OrderPlacement/step/step03.vue
rename to src/modules/10_order/components/step/step03.vue
diff --git a/src/modules/05_placement/components/OrderPlacement/step/step04.vue b/src/modules/10_order/components/step/step04.vue
similarity index 100%
rename from src/modules/05_placement/components/OrderPlacement/step/step04.vue
rename to src/modules/10_order/components/step/step04.vue
diff --git a/src/modules/10_order/interface/index/Main.ts b/src/modules/10_order/interface/index/Main.ts
new file mode 100644
index 000000000..45d341f54
--- /dev/null
+++ b/src/modules/10_order/interface/index/Main.ts
@@ -0,0 +1,218 @@
+interface DataOption {
+  id: number | null;
+  name: string;
+  disable?: boolean;
+}
+interface DataOption1 {
+  id: string | null;
+  name: string | null;
+  disable?: boolean;
+}
+interface DataOptionInsignia {
+  id: string;
+  name: string;
+  typeName: string;
+}
+
+interface optionData {
+  id: string;
+  name: string;
+}
+
+interface EduOps {
+  levelOptions: optionData[];
+  positionPathOptions: optionData[];
+}
+
+interface InformationOps {
+  prefixOps: optionData[];
+  genderOps: optionData[];
+  bloodOps: optionData[];
+  statusOps: optionData[];
+  religionOps: optionData[];
+  employeeClassOps: optionData[];
+  employeeTypeOps: optionData[];
+}
+
+interface InsigniaOps {
+  insigniaOptions: DataOptionInsignia[];
+}
+
+interface Pagination {
+  rowsPerPage: number;
+}
+
+interface treeTab {
+  id: string;
+  label: string;
+  children: treeTab[];
+}
+
+interface CheckboxItem {
+  id: number;
+  label: string;
+}
+
+interface Property {
+  name: string;
+  value: boolean;
+}
+
+interface PointExam {
+  pointA: number;
+  pointB: number;
+  pointC: number;
+  pointTotalA: number;
+  pointTotalB: number;
+  pointTotalC: number;
+  point: number;
+  pointTotal: number;
+  examNumber: number;
+  examRound: number;
+  pass: string | null;
+}
+
+interface Education {
+  id: string;
+  educationLevel: string;
+  educationLevelId: string;
+  institute: string;
+  degree: string;
+  field: string;
+  gpa: string;
+  country: string;
+  duration: string;
+  other: string;
+  fundName: string;
+  durationYear: number;
+  finishDate: Date;
+  isDate: string;
+  startDate: Date;
+  endDate: Date;
+  positionPath: string;
+  isEducation: boolean;
+}
+
+interface Family {
+  couple: string;
+  marryPrefix: string;
+  marryPrefixId: string;
+  marryFirstName: string;
+  marryLastName: string;
+  marryOccupation: string;
+  fatherPrefix: string;
+  fatherPrefixId: string;
+  fatherFirstName: string;
+  fatherLastName: string;
+  fatherOccupation: string;
+  motherPrefix: string;
+  motherPrefixId: string;
+  motherFirstName: string;
+  motherLastName: string;
+  motherOccupation: string;
+}
+
+interface Address {
+  registAddress: string;
+  registSubDistrict: string;
+  registSubDistrictId: string;
+  registZipCode: string;
+  registDistrict: string;
+  registDistrictId: string;
+  registProvince: string;
+  registProvinceId: string;
+  currentAddress: string;
+  currentSubDistrict: string;
+  currentSubDistrictId: string;
+  currentZipCode: string;
+  currentDistrict: string;
+  currentDistrictId: string;
+  currentProvince: string;
+  currentProvinceId: string;
+  registSame: string;
+}
+
+interface Certificate {
+  id: string;
+  certificateNo: string;
+  issuer: string;
+  issueDate: Date;
+  expireDate: Date;
+  certificateType: string;
+}
+
+const AddressDataDefualt: Address = {
+  registAddress: "",
+  currentAddress: "",
+  registSubDistrict: "",
+  registSubDistrictId: "",
+  registZipCode: "",
+  registDistrict: "",
+  registDistrictId: "",
+  registProvince: "",
+  registProvinceId: "",
+  currentSubDistrict: "",
+  currentSubDistrictId: "",
+  currentZipCode: "",
+  currentDistrict: "",
+  currentDistrictId: "",
+  currentProvince: "",
+  currentProvinceId: "",
+  registSame: "0",
+};
+
+const FamilyDataDefualt: Family = {
+  couple: "0",
+  marryPrefix: "",
+  marryPrefixId: "",
+  marryFirstName: "",
+  marryLastName: "",
+  marryOccupation: "",
+  fatherPrefix: "",
+  fatherPrefixId: "",
+  fatherFirstName: "",
+  fatherLastName: "",
+  fatherOccupation: "",
+  motherPrefix: "",
+  motherPrefixId: "",
+  motherFirstName: "",
+  motherLastName: "",
+  motherOccupation: "",
+};
+interface Assign {
+  id: number;
+  personal_id: string;
+  knowlage_skill_map_no: number;
+  round_no: number;
+  date_start: Date;
+  date_finish: Date;
+  behavior_desc: string;
+  other_desc: string;
+  other4_desc: string;
+  othor5_no1_desc: string;
+  othor5_no2_desc: string;
+  experimenter_dated: Date;
+  createdAt: Date;
+  updatedAt: Date;
+}
+export type {
+  DataOption,
+  DataOptionInsignia,
+  treeTab,
+  InformationOps,
+  Pagination,
+  EduOps,
+  DataOption1,
+  InsigniaOps,
+  CheckboxItem,
+  Property,
+  PointExam,
+  Education,
+  Family,
+  Address,
+  optionData,
+  Certificate,
+  Assign,
+};
+
+export { AddressDataDefualt, FamilyDataDefualt };
diff --git a/src/modules/10_order/interface/request/Main.ts b/src/modules/10_order/interface/request/Main.ts
new file mode 100644
index 000000000..1cbcc63ba
--- /dev/null
+++ b/src/modules/10_order/interface/request/Main.ts
@@ -0,0 +1,12 @@
+interface FormOrderPlacementMainData {
+  Order: string;
+  OrderNum: string;
+  fiscalYear: number;
+  OrderDate: string;
+  OrderBy: string;
+  Signer: string;
+  OrderStatus: string;
+  OrderType: string;
+}
+
+export type { FormOrderPlacementMainData };
\ No newline at end of file
diff --git a/src/modules/10_order/interface/request/Order.ts b/src/modules/10_order/interface/request/Order.ts
new file mode 100644
index 000000000..d7e306c25
--- /dev/null
+++ b/src/modules/10_order/interface/request/Order.ts
@@ -0,0 +1,7 @@
+interface RequestCopyOrder {
+  personalId: string;
+  emailChannel: boolean;
+  inboxChannel: boolean;
+}
+
+export type { RequestCopyOrder };
diff --git a/src/modules/10_order/interface/response/Main.ts b/src/modules/10_order/interface/response/Main.ts
new file mode 100644
index 000000000..e4ea7770c
--- /dev/null
+++ b/src/modules/10_order/interface/response/Main.ts
@@ -0,0 +1 @@
+export type {};
diff --git a/src/modules/10_order/interface/response/Order.ts b/src/modules/10_order/interface/response/Order.ts
new file mode 100644
index 000000000..375361a97
--- /dev/null
+++ b/src/modules/10_order/interface/response/Order.ts
@@ -0,0 +1,44 @@
+interface ResponseData {
+  education: string;
+  idCard: string;
+  name: string;
+  personalId: string;
+  selectStatus: boolean;
+  sequence: number;
+  refRecordId: string
+}
+
+interface ResponseOrganiz {
+  firstName: string;
+  idCard: string;
+  lastName: string;
+  name: string;
+  position: string;
+  prefixId: string;
+  profileId: string;
+  unit: string;
+}
+
+interface ResponseCopyOrder {
+  emailChannel: boolean;
+  idCard: string;
+  inboxChannel: boolean;
+  name: string;
+  personalId: string;
+  position: string;
+  selectStatus: boolean;
+  sequence: number;
+  unit: string;
+}
+
+interface DataCopyOrder {
+  personalId: string;
+  name: string;
+  idCard: string;
+  position: string;
+  unit: string;
+  send: string;
+  mutiselect: number[];
+}
+
+export type { ResponseData, ResponseOrganiz, ResponseCopyOrder, DataCopyOrder };
diff --git a/src/modules/10_order/router.ts b/src/modules/10_order/router.ts
new file mode 100644
index 000000000..a059df203
--- /dev/null
+++ b/src/modules/10_order/router.ts
@@ -0,0 +1,40 @@
+/**
+ * Router บรรจุ แต่งตั้ง ย้าย โอน (Placement)
+ */
+
+const AddPage = () =>
+  import("@/modules/10_order/components/Add.vue");
+const MainOrder = () => import("@/modules/10_order/components/Main.vue");
+const DetailPage = () =>
+  import("@/modules/10_order/components/Detail.vue");
+
+export default [
+  {
+    path: "/order",
+    name: "order",
+    component: MainOrder,
+    meta: {
+      Auth: true,
+      Key: [10],
+      Role: "placement",
+    },
+  },
+  {
+    path: "/order/add",
+    name: "OrderAdd",
+    component: AddPage,
+    meta: {
+      Auth: true,
+      Role: "placement",
+    },
+  },
+  {
+    path: "/order/detail/:orderid",
+    name: "OrderDetail",
+    component: DetailPage,
+    meta: {
+      Auth: true,
+      Role: "placement",
+    },
+  },
+];
diff --git a/src/modules/10_order/store.ts b/src/modules/10_order/store.ts
new file mode 100644
index 000000000..dff32467e
--- /dev/null
+++ b/src/modules/10_order/store.ts
@@ -0,0 +1,100 @@
+import { defineStore } from "pinia";
+import { ref } from "vue";
+import type { FormOrderPlacementMainData } from "@/modules/10_order/interface/request/Main";
+
+export const useOrderPlacementDataStore = defineStore("placementOrder", () => {
+  interface placementOrder {
+    mappingPosition: { columns: String[] };
+  }
+  const placementOrderData = ref<placementOrder>({
+    mappingPosition: { columns: [] },
+  });
+  const changePlacementColumns = (system: String, val: String[]) => {
+    if (system == "mappingPosition")
+      placementOrderData.value.mappingPosition.columns = val;
+    localStorage.setItem(
+      "placementOrder",
+      JSON.stringify(placementOrderData.value)
+    );
+  };
+
+  if (localStorage.getItem("placementOrder") !== null) {
+    placementOrderData.value = JSON.parse(
+      localStorage.getItem("placementOrder") || "{}"
+    );
+  }
+
+  const DataMainYearOrder = ref<object[]>([]); // ข้อมูลจำนวนปี
+  const DataMainOrigOrder = ref<FormOrderPlacementMainData[]>([]); // ข้อมูลหลักดั้งเดิม
+  const DataMainUpdateOrder = ref<FormOrderPlacementMainData[]>([]); // ข้อมูลเปลี่ยนแปลง
+  const DataMainYearSetOrder = (val: FormOrderPlacementMainData[]) =>
+    (DataMainYearOrder.value = val);
+
+  const DataMainOrder = (val: FormOrderPlacementMainData[]) =>
+    (DataMainOrigOrder.value = val);
+
+  const DataUpdateOrder = (
+    filter_1: string,
+    filter_2: string,
+    filterYear: number | null
+  ) => {
+    DataMainUpdateOrder.value = [];
+
+    if (filter_1 === "" && filter_2 === "" && filterYear === 0) {
+      DataMainUpdateOrder.value = DataMainOrigOrder.value;
+    } else if (filter_1 !== "" && filter_2 === "" && filterYear === 0) {
+      DataMainUpdateOrder.value = DataMainOrigOrder.value.filter(
+        (item) => item.OrderType === filter_1
+      );
+    } else if (filter_1 !== "" && filter_2 !== "" && filterYear === null) {
+      DataMainUpdateOrder.value = DataMainOrigOrder.value.filter(
+        (item) => item.OrderType === filter_1 && item.OrderStatus === filter_2
+      );
+    } else if (filter_1 !== "" && filter_2 === "" && filterYear !== 0) {
+      DataMainUpdateOrder.value = DataMainOrigOrder.value.filter(
+        (item) => item.OrderType === filter_1 && item.fiscalYear === filterYear
+      );
+    } else if (filter_1 === "" && filter_2 !== "" && filterYear === 0) {
+      DataMainUpdateOrder.value = DataMainOrigOrder.value.filter(
+        (item) => item.OrderStatus === filter_2
+      );
+    } else if (filter_1 === "" && filter_2 === "" && filterYear !== 0) {
+      DataMainUpdateOrder.value = DataMainOrigOrder.value.filter(
+        (item) => item.fiscalYear === filterYear
+      );
+    } else if (filter_1 === "" && filter_2 !== "" && filterYear !== null) {
+      DataMainUpdateOrder.value = DataMainOrigOrder.value.filter(
+        (item) =>
+          item.OrderStatus === filter_2 && item.fiscalYear === filterYear
+      );
+    } else if (filter_1 !== "" && filter_2 !== "" && filterYear === 0) {
+      DataMainUpdateOrder.value = DataMainOrigOrder.value.filter(
+        (item) => item.OrderStatus === filter_2 && item.OrderType === filter_1
+      );
+    } else if (filter_1 !== "" && filter_2 !== "" && filterYear !== null) {
+      DataMainUpdateOrder.value = DataMainOrigOrder.value.filter(
+        (item) =>
+          item.OrderType === filter_1 &&
+          item.OrderStatus === filter_2 &&
+          item.fiscalYear === filterYear
+      );
+    } else if (
+      filter_1 == "ทั้งหมด" &&
+      filter_2 == "ทั้งหมด" &&
+      filterYear !== null
+    ) {
+      DataMainUpdateOrder.value = DataMainOrigOrder.value;
+    }
+  };
+
+  return {
+    placementOrderData,
+    changePlacementColumns,
+    DataMainYearOrder,
+    DataMainOrigOrder,
+    DataMainUpdateOrder,
+    DataUpdateOrder,
+    DataMainYearSetOrder,
+    DataMainOrder,
+  };
+});
\ No newline at end of file
diff --git a/src/modules/10_order/views/Main.vue b/src/modules/10_order/views/Main.vue
new file mode 100644
index 000000000..dc47857b9
--- /dev/null
+++ b/src/modules/10_order/views/Main.vue
@@ -0,0 +1,7 @@
+<script setup lang="ts">
+</script>
+<template>
+  <div class="toptitle text-dark col-12 row items-center">
+    คำสั่ง
+  </div>
+</template>
\ No newline at end of file
diff --git a/src/router/index.ts b/src/router/index.ts
index 28211f6e6..ee4354771 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -13,6 +13,7 @@ import ModuleRetirement from "@/modules/06_retirement/router";
 import ModuleInsignia from "@/modules/07_insignia/router";
 import ModuleRegistryEmployee from "@/modules/08_registryEmployee/router";
 import ModuleCoin from "@/modules/09_coin/router";
+import ModuleOrder from "@/modules/10_order/router";
 
 // TODO: ใช้หรือไม่?
 import keycloak from "@/plugins/keycloak";
@@ -44,6 +45,7 @@ const router = createRouter({
         ...ModuleInsignia,
         ...ModuleRegistryEmployee,
         ...ModuleCoin,
+        ...ModuleOrder,
       ],
     },
     /**
diff --git a/src/views/MainLayout.vue b/src/views/MainLayout.vue
index 76ee21a07..04eee3f99 100644
--- a/src/views/MainLayout.vue
+++ b/src/views/MainLayout.vue
@@ -221,9 +221,11 @@ const myEventHandler = (e: any, setSCroll: boolean) => {
  */
 const activeMenu = (path: string) => {
   if (path == "dashboard" && route.fullPath == "/") return true;
-
+  if (path == "registry" && route.fullPath == "/registry-employee") return false;
   if (path == "registry" && route.fullPath == "/") return false;
-  const bool = route.fullPath.includes(path);
+  // if (path != "registry" && path == "registryEmployee" && route.fullPath == "/registryEmployee") return true;
+  const bool = route.fullPath.includes(`/${path}`);
+
   return bool;
 };
 /**

From 5b800ed351b5b3b605d22c713feff9c5f3b8391c Mon Sep 17 00:00:00 2001
From: waruneeta <warunee.auy@gmail.com>
Date: Thu, 10 Aug 2023 20:13:12 +0700
Subject: [PATCH 080/113] =?UTF-8?q?-=20=E0=B8=AD=E0=B8=AD=E0=B8=81?=
 =?UTF-8?q?=E0=B8=84=E0=B8=B3=E0=B8=AA=E0=B8=B1=E0=B9=88=E0=B8=87=20step?=
 =?UTF-8?q?=204=20hide=20download=20-=20=E0=B8=9B=E0=B8=A3=E0=B8=B1?=
 =?UTF-8?q?=E0=B8=9A=E0=B9=80=E0=B8=A1=E0=B8=99=E0=B8=B9=E0=B9=83=E0=B8=99?=
 =?UTF-8?q?=E0=B8=97=E0=B8=B0=E0=B9=80=E0=B8=9A=E0=B8=B5=E0=B8=A2=E0=B8=99?=
 =?UTF-8?q?=E0=B8=9B=E0=B8=A3=E0=B8=B0=E0=B8=A7=E0=B8=B1=E0=B8=95=E0=B8=B4?=
 =?UTF-8?q?=20=E0=B9=81=E0=B8=A5=E0=B8=B0=E0=B9=80=E0=B8=A1=E0=B8=99?=
 =?UTF-8?q?=E0=B8=B9=20(=E0=B9=81=E0=B8=95=E0=B9=88=E0=B8=87=E0=B8=95?=
 =?UTF-8?q?=E0=B8=B1=E0=B9=89=E0=B8=87-=E0=B9=80=E0=B8=A5=E0=B8=B7?=
 =?UTF-8?q?=E0=B9=88=E0=B8=AD=E0=B8=99)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/interface/request/main/main.ts            |  19 +-
 .../04_registry/components/Profile.vue        |   8 +-
 .../10_order/components/step/step04.vue       | 290 ++++--------------
 3 files changed, 64 insertions(+), 253 deletions(-)

diff --git a/src/interface/request/main/main.ts b/src/interface/request/main/main.ts
index 1dc23be57..ab401c6ff 100644
--- a/src/interface/request/main/main.ts
+++ b/src/interface/request/main/main.ts
@@ -235,8 +235,7 @@ const menuList = readonly<any[]>([
       {
         key: 6.6,
         label: "รายการช่วยราชการ" /* */,
-        // path: "help-government",
-        path: "repatriation-order",
+        path: "help-government",
         role: "placement",
       },
       {
@@ -247,26 +246,20 @@ const menuList = readonly<any[]>([
       },
       {
         key: 6.8,
-        label: "รายการแต่งตั้ง" /* */,
-        // path: "repatriate",
+        label: "รายการแต่งตั้ง-เลื่อน" /* */,
+        path: "appoint-promote",
         role: "placement",
       },
       {
         key: 6.9,
-        label: "รายการเลื่อน" /* */,
-        path: "postpone",
-        role: "placement",
-      },
-      {
-        key: 6.1,
         label: "รายการย้าย" /* */,
-        path: "move-order",
+        path: "move-list",
         role: "placement",
       },
       {
-        key: 6.1,
+        key: 6.10,
         label: "รายการอื่นๆ" /* */,
-        path: "other-order",
+        path: "other",
         role: "placement",
       },
     ],
diff --git a/src/modules/04_registry/components/Profile.vue b/src/modules/04_registry/components/Profile.vue
index ee54e19eb..b2cda7dd5 100644
--- a/src/modules/04_registry/components/Profile.vue
+++ b/src/modules/04_registry/components/Profile.vue
@@ -172,13 +172,7 @@
               <q-item clickable v-close-popup @click="postAdd">
                 <q-item-section style="min-width: 0px" avatar class="q-py-sm">
                 </q-item-section>
-                <q-item-section>แต่งตั้ง</q-item-section>
-              </q-item>
-              <q-separator />
-              <q-item clickable v-close-popup @click="postAdd">
-                <q-item-section style="min-width: 0px" avatar class="q-py-sm">
-                </q-item-section>
-                <q-item-section>เลื่อน</q-item-section>
+                <q-item-section>แต่งตั้ง-เลื่อน</q-item-section>
               </q-item>
               <q-separator />
               <q-item clickable v-close-popup @click="postAdd">
diff --git a/src/modules/10_order/components/step/step04.vue b/src/modules/10_order/components/step/step04.vue
index 182c2598a..f6945d914 100644
--- a/src/modules/10_order/components/step/step04.vue
+++ b/src/modules/10_order/components/step/step04.vue
@@ -1,36 +1,22 @@
 <template>
   <div>
     <div style="min-height: 70vh">
-      <q-splitter
-        v-model="splitterModel"
-        style="height: 70vh"
-        @update:model-value="onchangePage"
-      >
+      <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-btn v-show="OrderPDF == ''" 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 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 avatar><q-icon color="blue" name="mdi-file-word" /></q-item-section>
                       <q-item-section>ไฟล์ .docx</q-item-section>
                     </q-item>
                   </q-list>
@@ -39,27 +25,17 @@
             </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-btn v-show="TailerPDF == ''" 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 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 avatar><q-icon color="green-7" name="mdi-file-excel" /></q-item-section>
                       <q-item-section>ไฟล์ .xls</q-item-section>
                     </q-item>
                   </q-list>
@@ -67,24 +43,12 @@
               </q-btn>
             </div>
             <q-space />
-            <q-btn
-              class="text-dark"
-              flat
-              dense
-              icon="mdi-fullscreen"
-              color="add"
-              @click="dialog = true"
-            />
+            <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-btn class="text-dark bg-grey-4" flat dense @click="page = page > 1 ? page - 1 : page">
                 <q-icon name="mdi-chevron-left" />
               </q-btn>
 
@@ -92,12 +56,7 @@
                 หน้าที่ {{ page }} จาก {{ numOfPages }}
               </span>
 
-              <q-btn
-                class="text-dark bg-grey-4"
-                flat
-                dense
-                @click="page = page < numOfPages ? page + 1 : page"
-              >
+              <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>
@@ -106,12 +65,7 @@
               <!-- <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-btn class="text-dark bg-grey-4" flat dense @click="page = page > 1 ? page - 1 : page">
                 <q-icon name="mdi-chevron-left" />
               </q-btn>
 
@@ -119,12 +73,7 @@
                 หน้าที่ {{ page }} จาก {{ numOfPages }}
               </span>
 
-              <q-btn
-                class="text-dark bg-grey-4"
-                flat
-                dense
-                @click="page = page < numOfPages ? page + 1 : page"
-              >
+              <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>
@@ -132,12 +81,7 @@
         </template>
 
         <template v-slot:separator>
-          <q-avatar
-            color="primary"
-            text-color="white"
-            size="30px"
-            icon="drag_indicator"
-          />
+          <q-avatar color="primary" text-color="white" size="30px" icon="drag_indicator" />
         </template>
 
         <template v-slot:after>
@@ -148,15 +92,8 @@
                 <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 || 'กรุณาเลือกไฟล์เอกสารแนบท้าย']"
-                    >
+                    <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>
@@ -164,15 +101,8 @@
                   </div>
                   <div>
                     <label class="text-file">เอกสารแนบท้าย</label>
-                    <q-file
-                      outlined
-                      dense
-                      v-model="fileTailer"
-                      label="เลือกไฟล์เอกสารแนบท้าย"
-                      hide-bottom-space
-                      lazy-rules
-                      :rules="[(val) => val || 'กรุณาเลือกไฟล์เอกสารแนบท้าย']"
-                    >
+                    <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>
@@ -186,51 +116,24 @@
                 <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="`${'เลขที่คำสั่ง'}`"
-                    />
+                    <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"
-                    >
+                    <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="`${'ปีที่ออกคำสั่ง'}`"
-                        >
+                        <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 name="event" class="cursor-pointer" style="color: var(--q-grey)">
                             </q-icon>
                           </template>
                         </q-input>
@@ -239,15 +142,8 @@
                   </div>
                   <div>
                     <label class="text-file">วันที่ลงนาม</label>
-                    <datepicker
-                      menu-class-name="modalfix"
-                      v-model="date"
-                      :locale="'th'"
-                      autoApply
-                      borderless
-                      :enableTimePicker="false"
-                      week-start="0"
-                    >
+                    <datepicker menu-class-name="modalfix" v-model="date" :locale="'th'" autoApply borderless
+                      :enableTimePicker="false" week-start="0">
                       <template #year="{ year }">
                         {{ year + 543 }}
                       </template>
@@ -255,24 +151,13 @@
                         {{ 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="[
+                        <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 name="event" class="cursor-pointer" style="color: var(--q-grey)">
                             </q-icon>
                           </template>
                         </q-input>
@@ -282,20 +167,9 @@
                 </div>
               </fieldset>
               <div class="flex justify-around">
-                <q-btn
-                  unelevated
-                  label="ออกคำสั่ง"
-                  :color="validateForm() ? 'public' : 'grey'"
-                  :disable="statusOrder == 'N'"
-                  @click="clickExecute(orderId)"
-                />
-                <q-btn
-                  class="text-dark"
-                  unelevated
-                  label="ส่งไปลงนาม"
-                  color="grey"
-                  :disable="statusOrder == 'N'"
-                />
+                <q-btn unelevated label="ออกคำสั่ง" :color="validateForm() ? 'public' : 'grey'"
+                  :disable="statusOrder == 'N'" @click="clickExecute(orderId)" />
+                <q-btn class="text-dark" unelevated label="ส่งไปลงนาม" color="grey" :disable="statusOrder == 'N'" />
               </div>
             </div>
           </q-form>
@@ -304,23 +178,11 @@
     </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 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 unelevated label="บันทึก" :color="validateForm() ? 'public' : 'grey'" :disable="!validateForm()"
+        @click="save">
       </q-btn>
 
       <!-- <q-btn flat round color="primary" icon="chevron_right" @click="next">
@@ -328,13 +190,7 @@
         </q-btn> -->
     </div>
 
-    <q-dialog
-      v-model="dialog"
-      persistent
-      :maximized="true"
-      transition-show="slide-up"
-      transition-hide="slide-down"
-    >
+    <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 />
@@ -345,24 +201,12 @@
           </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
-          />
+          <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-btn class="text-dark bg-grey-4" flat dense @click="page = page > 1 ? page - 1 : page">
               <q-icon name="mdi-chevron-left" />
             </q-btn>
 
@@ -370,32 +214,16 @@
               หน้าที่ {{ page }} จาก {{ numOfPages }}
             </span>
 
-            <q-btn
-              class="text-dark bg-grey-4"
-              flat
-              dense
-              @click="page = page < numOfPages ? page + 1 : page"
-            >
+            <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 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-btn class="text-dark bg-grey-4" flat dense @click="page = page > 1 ? page - 1 : page">
               <q-icon name="mdi-chevron-left" />
             </q-btn>
 
@@ -403,12 +231,7 @@
               หน้าที่ {{ page }} จาก {{ numOfPages }}
             </span>
 
-            <q-btn
-              class="text-dark bg-grey-4"
-              flat
-              dense
-              @click="page = page < numOfPages ? page + 1 : page"
-            >
+            <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>
@@ -469,7 +292,7 @@ const fetchAttachment = async (orderId: string) => {
     .get(config.API.attachmentOrder(orderId))
     .then(async (res) => {
       let response = res.data.result;
-      console.log(response);
+      // console.log(response);
       order.value = response.orderNo;
       years.value = Number(response.orderYear);
       if (response.date !== undefined) {
@@ -511,7 +334,7 @@ const viewPDF = async (pdf: string) => {
   }, 1500);
 };
 watch(tab, () => {
-  console.log(tab.value);
+  // console.log(tab.value);
   if (tab.value === "main") {
     viewPDF(OrderPDF.value);
   }
@@ -545,7 +368,7 @@ const props = defineProps({
   },
 });
 
-const next = () => props.next();
+// const next = () => props.next();
 const previous = () => props.previous();
 
 const onchangePage = (val: any) => {
@@ -576,8 +399,8 @@ const save = () => {
             await fetchAttachment(orderId.value);
             await fecthstatusOrder(orderId.value);
           })
-          .onCancel(() => {})
-          .onDismiss(() => {});
+          .onCancel(() => { })
+          .onDismiss(() => { });
       }
     });
   }
@@ -628,8 +451,8 @@ const clickExecute = async (id: string) => {
           messageError($q, e);
         });
     })
-    .onCancel(() => {})
-    .onDismiss(() => {});
+    .onCancel(() => { })
+    .onDismiss(() => { });
 };
 
 const validateForm = () => {
@@ -655,6 +478,7 @@ const setTab = (val: string) => {
   border-radius: 10px;
   border: 1px solid #e9eaec;
 }
+
 .text-header {
   color: #34373c;
   font-size: 1rem;

From 5304e98617106e8912319864b968f3b524ed10e0 Mon Sep 17 00:00:00 2001
From: AnandaTon <125332905+anandaAiemvong@users.noreply.github.com>
Date: Fri, 11 Aug 2023 10:32:58 +0700
Subject: [PATCH 081/113] =?UTF-8?q?=E0=B9=81=E0=B8=81=E0=B9=89=E0=B9=84?=
 =?UTF-8?q?=E0=B8=82=20api=20editdata=20insignia?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/1_Proposals/addProposals.vue           | 11 ++++++-----
 .../09_coin/components/1_Proposals/addProposals.vue   |  9 +++++----
 2 files changed, 11 insertions(+), 9 deletions(-)

diff --git a/src/modules/07_insignia/components/1_Proposals/addProposals.vue b/src/modules/07_insignia/components/1_Proposals/addProposals.vue
index 24b001041..8a2cfc5ab 100644
--- a/src/modules/07_insignia/components/1_Proposals/addProposals.vue
+++ b/src/modules/07_insignia/components/1_Proposals/addProposals.vue
@@ -158,10 +158,10 @@
                   label="อัปโหลดเอกสารประกอบ"
                   hide-bottom-space
                   lazy-rules
-                  :rules="[
-                    (val) => val || 'กรุณาเลือกไฟล์หนังสือถึงหน่วยงานที่รับโอน',
-                  ]"
                 >
+                  <!-- :rules="[
+                    (val) => val || 'กรุณาเลือกไฟล์หนังสือถึงหน่วยงานที่รับโอน',
+                  ]" -->
                   <template v-slot:prepend>
                     <q-icon name="attach_file" />
                   </template>
@@ -261,7 +261,7 @@ const editData = async (id: string) => {
   const formData = new FormData();
   formData.append("Name", roundInsig.value);
   formData.append("year", parseInt(yearly.value).toString());
-  formData.append("amount", datelast.value.toString());
+  formData.append("Amount", datelast.value.toString());
   if (dateStart.value !== null) {
     formData.append("startDate", dateToISO(dateStart.value));
   }
@@ -275,13 +275,14 @@ const editData = async (id: string) => {
   console.log(formData);
   showLoader();
   await http
-    .put(config.API.editRoundInsignia(id))
+    .put(config.API.editRoundInsignia(id), formData)
     .then(async () => {})
     .catch((e) => {
       messageError($q, e);
     })
     .finally(async () => {
       hideLoader();
+      clickBack();
     });
   console.log(formData);
 };
diff --git a/src/modules/09_coin/components/1_Proposals/addProposals.vue b/src/modules/09_coin/components/1_Proposals/addProposals.vue
index d889ddd5b..b3a014055 100644
--- a/src/modules/09_coin/components/1_Proposals/addProposals.vue
+++ b/src/modules/09_coin/components/1_Proposals/addProposals.vue
@@ -158,10 +158,10 @@
                   label="อัปโหลดเอกสารประกอบ"
                   hide-bottom-space
                   lazy-rules
-                  :rules="[
-                    (val) => val || 'กรุณาเลือกไฟล์หนังสือถึงหน่วยงานที่รับโอน',
-                  ]"
                 >
+                  <!-- :rules="[
+                    (val) => val || 'กรุณาเลือกไฟล์หนังสือถึงหน่วยงานที่รับโอน',
+                  ]" -->
                   <template v-slot:prepend>
                     <q-icon name="attach_file" />
                   </template>
@@ -297,7 +297,7 @@ const editData = async (id: string) => {
   console.log(formData);
   showLoader();
   await http
-    .put(config.API.editRoundInsignia(id))
+    .put(config.API.editRoundInsignia(id), formData)
     .then(async () => {
       await uploadDocData();
     })
@@ -306,6 +306,7 @@ const editData = async (id: string) => {
     })
     .finally(async () => {
       hideLoader();
+      clickBack();
     });
   console.log(formData);
 };

From b40a617c5aad918dbfc008af690cfc09c7da2977 Mon Sep 17 00:00:00 2001
From: setthawutttty <stw.ttty@gmail.com>
Date: Fri, 11 Aug 2023 10:44:03 +0700
Subject: [PATCH 082/113] =?UTF-8?q?=E0=B8=AB=E0=B8=99=E0=B9=89=E0=B8=B2=20?=
 =?UTF-8?q?view=20=E0=B9=81=E0=B8=9A=E0=B8=9A=20=E0=B8=A1=E0=B8=AD?=
 =?UTF-8?q?=E0=B8=9A=E0=B8=AB=E0=B8=A1=E0=B8=B2=E0=B8=A2=E0=B8=87=E0=B8=B2?=
 =?UTF-8?q?=E0=B8=99?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/probation/FormAssign.vue       | 146 +++++++++--
 .../components/probation/MainProbation.vue    | 243 ++++++++++++++----
 .../components/probation/ProbationDetail.vue  |  30 ++-
 src/modules/05_placement/router.ts            |   2 +-
 4 files changed, 337 insertions(+), 84 deletions(-)

diff --git a/src/modules/05_placement/components/probation/FormAssign.vue b/src/modules/05_placement/components/probation/FormAssign.vue
index 298772d7e..9959cbd28 100644
--- a/src/modules/05_placement/components/probation/FormAssign.vue
+++ b/src/modules/05_placement/components/probation/FormAssign.vue
@@ -82,6 +82,7 @@
                     borderless
                     :enableTimePicker="false"
                     week-start="0"
+                    :readonly="routeName !== 'probationWorkAdd'"
                   >
                     <template #year="{ year }">
                       {{ year + 543 }}
@@ -92,6 +93,9 @@
                     <template #trigger>
                       <q-input
                         dense
+                        borderless
+                        :readonly="routeName != 'probationWorkAdd'"
+                        :outlined="routeName == 'probationWorkAdd'"
                         :rules="[(val) => !!val || 'กรุณาเลือกวันที่']"
                         hide-bottom-space
                         class="full-width datepicker q-mb-md"
@@ -100,7 +104,6 @@
                         "
                         :label="`${'ตั้งเเต่วันที่'}`"
                         clearable
-                        outlined
                         @clear="clearDateExam"
                       >
                       </q-input>
@@ -114,7 +117,7 @@
                     :locale="'th'"
                     autoApply
                     borderless
-                    :readonly="isDatePicker2Readonly"
+                    :readonly="isDatePicker2Readonly|| routeName !== 'probationWorkAdd'"
                     :enableTimePicker="false"
                     week-start="0"
                   >
@@ -127,11 +130,14 @@
                     <template #trigger>
                       <q-input
                         dense
-                        outlined
+                        borderless
+                        :outlined="routeName == 'probationWorkAdd'"
                         readonly
                         class="full-width datepicker q-mb-md"
                         :model-value="
-                          date_finish != null ? date2Thai(date_finish) : undefined
+                          date_finish != null
+                            ? date2Thai(date_finish)
+                            : undefined
                         "
                         :label="`${'ถึงวันที่'}`"
                         clearable
@@ -258,6 +264,7 @@
                         color="red"
                         icon="mdi-trash-can-outline"
                         @click="deleteactivity(index)"
+                        v-if="routeName === 'probationWorkAdd'"
                       />
                     </div>
                   </div>
@@ -293,10 +300,9 @@
                     >
                       <div class="col-11 q-my-xs">
                         <q-select
-                          :option-label="
-                            (item) => `${item.title}-${item.description}`
-                          "
-                          :option-value="(level) => level.level_id"
+                          :option-label="(item) => `${item.title}-${item.description}`"
+                          option-value="id"
+                          map-options
                           :rules="
                             index < 3
                               ? [(val) => !!val || 'กรุณาเลือกความสามารถ']
@@ -316,15 +322,17 @@
                         />
                       </div>
                       <div
+                      v-if="index > 2"
                         class="col-xs-12 col-sm-1 flex justify-center items-center"
                       >
                         <q-btn
-                          v-if="index > 2"
+                        v-if="routeName == 'probationWorkAdd'"
                           flat
                           round
                           color="red"
                           icon="mdi-trash-can-outline"
                           @click="deleteknowledge(index)"
+                          
                         />
                       </div>
                     </div>
@@ -363,11 +371,13 @@
                                 v-if="item.status_select === 1"
                                 v-model="item.checked"
                                 dense
+                                
                                 :disable="routeName != 'probationWorkAdd'"
                               />
                             </div>
-                            <div v-if="index === 0" class="col-11">
+                            <div v-if="index === 0" class="col-11" >
                               {{ item.description }}
+                              
                             </div>
                           </div>
                         </div>
@@ -554,6 +564,7 @@
                           :readonly="routeName != 'probationWorkAdd'"
                           dense
                           borderless
+                          map-options
                           :outlined="routeName == 'probationWorkAdd'"
                           v-model="skill"
                           label="ด้านที่ 1"
@@ -574,6 +585,7 @@
                               `${item.title} - ${item.level_description}`
                           "
                           option-value="id"
+                          map-options
                           hide-bottom-space
                           :rules="[
                             (val) => !!val || 'กรุณาเลือกความรู้ความสามารถ',
@@ -610,6 +622,7 @@
                           class="bg-white"
                           :readonly="routeName != 'probationWorkAdd'"
                           dense
+                          map-options
                           borderless
                           :outlined="routeName == 'probationWorkAdd'"
                           v-model="skill3"
@@ -638,6 +651,7 @@
                           class="bg-white"
                           :readonly="routeName != 'probationWorkAdd'"
                           dense
+                          map-options
                           borderless
                           :outlined="routeName == 'probationWorkAdd'"
                           v-model="skill4"
@@ -682,6 +696,7 @@
                           :readonly="routeName != 'probationWorkAdd'"
                           dense
                           borderless
+                          map-options
                           :outlined="routeName == 'probationWorkAdd'"
                           v-model="main"
                           label="ตัวที่ 1"
@@ -709,6 +724,7 @@
                           :readonly="routeName != 'probationWorkAdd'"
                           dense
                           borderless
+                          map-options
                           :outlined="routeName == 'probationWorkAdd'"
                           v-model="main2"
                           label="ตัวที่ 2"
@@ -735,6 +751,7 @@
                           class="bg-white"
                           :readonly="routeName != 'probationWorkAdd'"
                           dense
+                          map-options
                           borderless
                           :outlined="routeName == 'probationWorkAdd'"
                           v-model="main3"
@@ -763,6 +780,7 @@
                           :readonly="routeName != 'probationWorkAdd'"
                           dense
                           borderless
+                          map-options
                           :outlined="routeName == 'probationWorkAdd'"
                           v-model="main4"
                           label="ตัวที่ 4"
@@ -790,6 +808,7 @@
                           class="bg-white"
                           :readonly="routeName != 'probationWorkAdd'"
                           dense
+                          map-options
                           borderless
                           :outlined="routeName == 'probationWorkAdd'"
                           v-model="main5"
@@ -823,6 +842,7 @@
                           :readonly="routeName != 'probationWorkAdd'"
                           dense
                           borderless
+                          map-options
                           :outlined="routeName == 'probationWorkAdd'"
                           v-model="group"
                           label="ตัวที่ 1"
@@ -850,6 +870,7 @@
                           :readonly="routeName != 'probationWorkAdd'"
                           dense
                           borderless
+                          map-options
                           :outlined="routeName == 'probationWorkAdd'"
                           v-model="group2"
                           label="ตัวที่ 2"
@@ -868,6 +889,7 @@
                             (item) => `${item.title} - ${item.description}`
                           "
                           option-value="id"
+                          map-options
                           hide-bottom-space
                           :rules="[
                             (val) => !!val || 'กรุณาเลือกสมรรถนะประจํากลุ่มงาน',
@@ -889,6 +911,7 @@
                           </template></q-select
                         >
                       </div>
+                      
                     </div>
                   </div>
                 </div>
@@ -1005,6 +1028,7 @@
               <div class="col-12 row q-gutter-md">
                 <q-card
                   v-for="(item, index) in ProductivityArray"
+                  :key="index"
                   flat
                   bordered
                   class="col-12 q-pa-sm bg-grey-1"
@@ -1048,6 +1072,7 @@
                     >
                       <q-btn
                         flat
+                        v-if="routeName == 'probationWorkAdd'"
                         round
                         color="red"
                         icon="mdi-trash-can-outline"
@@ -1122,8 +1147,10 @@
                       <li>
                         อื่นๆ (ถ้ามี)
                         <q-input
+                        :readonly="routeName != 'probationWorkAdd'"
                           dense
-                          outlined
+                          borderless
+                          :outlined="routeName == 'probationWorkAdd'"
                           v-model="Other5"
                           label="กรอกอื่นๆ"
                         />
@@ -1234,6 +1261,7 @@
                     v-model="date1"
                     :locale="'th'"
                     autoApply
+                    :readonly="routeName !== 'probationWorkAdd'"
                     borderless
                     :enableTimePicker="false"
                     week-start="0"
@@ -1296,6 +1324,7 @@
                     autoApply
                     borderless
                     :enableTimePicker="false"
+                    :readonly="routeName !== 'probationWorkAdd'"
                     week-start="0"
                   >
                     <template #year="{ year }">
@@ -1349,6 +1378,7 @@
                     borderless
                     :enableTimePicker="false"
                     week-start="0"
+                    :readonly="routeName !== 'probationWorkAdd'"
                   >
                     <template #year="{ year }">
                       {{ year + 543 }}
@@ -1408,6 +1438,7 @@
                     :locale="'th'"
                     autoApply
                     borderless
+                    :readonly="routeName !== 'probationWorkAdd'"
                     :enableTimePicker="false"
                     week-start="0"
                   >
@@ -1496,7 +1527,10 @@ const filterData = (options: any[], excludedGroups: any[]) => {
 };
 const filtermantor = (options: any[], excludedGroups: any[]) => {
   return options.filter(
-    (item) => !excludedGroups.some((group) => group && group.personal_id === item.personal_id)
+    (item) =>
+      !excludedGroups.some(
+        (group) => group && group.personal_id === item.personal_id
+      )
   );
 };
 const filterMain = (options: any[], excludedGroups: any[]) => {
@@ -1535,7 +1569,7 @@ const main2 = ref<any>();
 const main3 = ref<any>();
 const main4 = ref<any>();
 const main5 = ref<any>();
-
+const assignId = ref<string>(route.params.form as string);
 const Other = ref<string>("");
 const commander = ref<string>("");
 
@@ -1636,13 +1670,10 @@ const OPknowledge = ref<
   Array<{
     id: number;
     title: number;
-    options: Array<Option>;
+    description:string;
+    level: string;
   }>
 >([]);
-interface Option {
-  level_id: number;
-  level_desc: string;
-}
 const addKnowledge = () => {
   if (knowledgeCount.value < 6) {
     knowledgeCount.value++;
@@ -1700,8 +1731,8 @@ const getAssignNew = async (id: string) => {
     monthSelect.value = `${data.assign_month} เดือน`;
     OPcaretaker.value = data.mentors;
     OPcommander.value = [data.commander];
-    fullname.value = data.person.name
-    position.value = data.person.OrganizationOrganization
+    fullname.value = data.person.name;
+    position.value = data.person.OrganizationOrganization;
   });
 };
 const getcompetency = async (id: string) => {
@@ -1745,6 +1776,7 @@ const getSkill = async (id: string) => {
 const getLaw = async (id: string) => {
   await http.get(config.API.lawOptions(id)).then((res: any) => {
     checkRule.value = res.data.data;
+
   });
 };
 
@@ -1756,7 +1788,7 @@ const postDateTime = async () => {
     })
     .then(async (res) => {
       const result = res.data;
-       date_finish.value = result.finish_date;
+      date_finish.value = result.finish_date;
     })
     .catch((e) => {})
     .finally(async () => {
@@ -1839,8 +1871,14 @@ const putData = (id: string) => {
     position: position.value,
     monthSelect:
       monthSelect.value !== null ? parseInt(monthSelect.value) : null,
-      date_start: date_start.value instanceof Date ? dateToISO(date_start.value) : new Date(),
-    date_finish: date_finish.value  instanceof Date ?  dateToISO(date_finish.value) : dateToISO(new Date(date_finish.value)),
+    date_start:
+      date_start.value instanceof Date
+        ? dateToISO(date_start.value)
+        : new Date(),
+    date_finish:
+      date_finish.value instanceof Date
+        ? dateToISO(date_finish.value)
+        : dateToISO(new Date(date_finish.value)),
     // caretaker_1: caretaker1.value,
     // caretaker_2: caretaker2.value,
     assign_knowledges: know_ledge,
@@ -1868,7 +1906,7 @@ const putData = (id: string) => {
         checked: item.checked,
       })),
   };
-  return data
+  return data;
 };
 
 const saveData = (id: string) => {
@@ -1939,14 +1977,72 @@ const OPresourse = ref<
     level_description: string;
   }>
 >([]);
+const skillIds = [1, 2, 3, 4];
 
-onMounted(async () => {
+const getAssign = async () => {
+  await http.get(config.API.probationsGetAssign(assignId.value)).then((res) => {
+    const data = res.data.data;
+    console.log("ASSIGN-list ==>", data);
+    fullname.value = data.profile.name
+    position.value = data.profile.OrganizationOrganization
+    date_start.value = data.assign.date_start
+    date_finish.value = data.assign.date_finish
+    date1.value = data.assign.experimenter_dated
+    date2.value = data.mentors[0].dated
+    date3.value = data.mentors[1].dated
+    date4.value = data.commander.dated
+    activity_desc.value = data.jobs.map((job:any) => job.activity_desc);
+    goal_desc.value = data.jobs.map((job:any) => job.goal_desc);
+    activityCount.value = data.jobs.length
+    caretaker1.value = data.mentors[0];
+    caretaker2.value = data.mentors[1];
+    
+    commander.value = data.commander.name
+    knowledge.value = data.knowledges.map((id:any)=> id.id)
+    knowledgeCount.value = data.knowledges.length
+    other_desc.value = data.assign.other_desc
+    other4_desc.value = data.assign.other4_desc
+    other5_no1_desc.value = data.assign.other5_no1_desc
+    const skills = data.skills.map((skills: any) => ({
+      id: skills.id,
+      title: skills.title,
+      level: skills.level,
+      level_description: skills.description,
+    }));
+  [skill.value, skill2.value, skill3.value, skill4.value] = skills;
+
+    main.value = data.competencys[0]
+    main2.value = data.competencys[1]
+    main3.value = data.competencys[2]
+    main4.value = data.competencys[3]
+    main5.value = data.competencys[4]
+
+    group.value = data.competency_groups[0]
+    group2.value = data.competency_groups[1]
+    group3.value = data.competency_groups[2]
+
+    output_desc.value = data.outputs.map((output: any) => output.output_desc);
+    indicator_desc.value = data.outputs.map((output: any) => output.indicator_desc);
+    productivityCount.value = data.outputs.length;
+
+    checkRule.value = data.laws.map((law: any) => ({
+  id: law.law_id,
+  checked: law.selected,
+  description: law.description,
+  status_select: law.status_select,
+  
+}));
+  console.log("🚀 ~ file: FormAssign.vue:2009 ~ awaithttp.get ~ checkRule:", checkRule.value)
+  })
+};
+onMounted(async() => {
   await getLaw(personalId);
   await getcompetency(personalId);
   await getCompetencyGroup(personalId);
   await getSkill(personalId);
   await getKnowledge(personalId);
   await getAssignNew(personalId);
+  await getAssign();
 });
 watch(
   () => [monthSelect.value, date_start.value],
diff --git a/src/modules/05_placement/components/probation/MainProbation.vue b/src/modules/05_placement/components/probation/MainProbation.vue
index 60f331b89..cd2e573ef 100644
--- a/src/modules/05_placement/components/probation/MainProbation.vue
+++ b/src/modules/05_placement/components/probation/MainProbation.vue
@@ -6,28 +6,73 @@
     <div class="row q-col-gutter-sm">
       <div class="row col-12 q-col-gutter-sm">
         <div>
-          <q-btn @click="modal = true" size="12px" flat round color="add" icon="mdi-plus">
+          <q-btn
+            @click="modal = true"
+            size="12px"
+            flat
+            round
+            color="add"
+            icon="mdi-plus"
+          >
             <q-tooltip>เพิ่มผู้ทดลองปฏิบัติหน้าที่ราชการ</q-tooltip>
           </q-btn>
         </div>
         <q-space />
 
-        <q-input class="col-xs-12 col-sm-3 col-md-2" standout dense v-model="filterKeyword" ref="filterRef" outlined
-          debounce="300" placeholder="ค้นหา">
+        <q-input
+          class="col-xs-12 col-sm-3 col-md-2"
+          standout
+          dense
+          v-model="filterKeyword"
+          ref="filterRef"
+          outlined
+          debounce="300"
+          placeholder="ค้นหา"
+        >
           <template v-slot:append>
             <q-icon v-if="filterKeyword == ''" name="search" />
-            <q-icon v-if="filterKeyword !== ''" name="clear" class="cursor-pointer" @click="resetFilter" />
+            <q-icon
+              v-if="filterKeyword !== ''"
+              name="clear"
+              class="cursor-pointer"
+              @click="resetFilter"
+            />
           </template>
         </q-input>
 
-        <q-select v-model="visibleColumns" multiple outlined dense options-dense :display-value="$q.lang.table.columns"
-          emit-value map-options :options="columns" option-value="name" options-cover style="min-width: 150px"
-          class="col-xs-12 col-sm-3 col-md-2" />
+        <q-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"
+        />
       </div>
       <div class="col-12">
-        <q-table ref="table" :columns="columns" :rows="rows" :filter="filterKeyword" row-key="Order" flat bordered
-          :paging="true" dense class="custom-header-table" v-bind="attrs" :visible-columns="visibleColumns"
-          :pagination-label="paginationLabel" v-model:pagination="pagination">
+        <q-table
+          ref="table"
+          :columns="columns"
+          :rows="rows"
+          :filter="filterKeyword"
+          row-key="Order"
+          flat
+          bordered
+          :paging="true"
+          dense
+          class="custom-header-table"
+          v-bind="attrs"
+          :visible-columns="visibleColumns"
+          :pagination-label="paginationLabel"
+          v-model:pagination="pagination"
+        >
           <template v-slot:header="props">
             <q-tr :props="props">
               <q-th v-for="col in props.cols" :key="col.name" :props="props">
@@ -36,23 +81,52 @@
             </q-tr>
           </template>
           <template v-slot:body="props">
-            <q-tr :props="props" class="cursor-pointer"
-              @click="router.push(`/probation/detail/${props.row.personal_id}`)">
+            <q-tr
+              :props="props"
+              class="cursor-pointer"
+              @click="router.push(`/probation/detail/${props.row.personal_id}`)"
+            >
               <q-td v-for="col in props.cols" :key="col.name" :props="props">
                 <div v-if="col.name == 'no'">
                   {{ props.rowIndex + 1 }}
                 </div>
-                <!-- <div v-else-if="col.name == 'status'">
-										<q-icon size="20px" v-if="props.row.status == 'อยู่ระหว่างการทดลองงาน'" name="mdi-timer-sand" color="deep-orange">
-											<q-tooltip>อยู่ระหว่างการทดลองงาน</q-tooltip>
-										</q-icon>
-										<q-icon size="20px" v-else-if="props.row.status == 'ไม่ผ่านการทดลอง'" name="mdi-close" color="red">
-											<q-tooltip>ไม่ผ่านการทดลอง</q-tooltip>
-										</q-icon>
-										<q-icon size="20px" v-else name="mdi-check" color="teal">
-											<q-tooltip>ผ่านการทดลองงาน</q-tooltip>
-										</q-icon>
-									</div> -->
+                <div v-else-if="col.name === 'probation_status'">
+                  <q-icon
+                    size="20px"
+                    v-if="props.row.probation_status === 'PENDING'"
+                    name="mdi-timer-sand"
+                    color="deep-orange"
+                  />
+                  <q-icon
+                    size="20px"
+                    v-else-if="props.row.probation_status === 'PROCESS'"
+                    name="mdi-timer-sand"
+                    color="deep-orange"
+                  />
+                  <q-icon
+                    size="20px"
+                    v-else-if="props.row.probation_status === 'PASS'"
+                    name="mdi-check"
+                    color="teal"
+                  />
+                  <q-icon
+                    size="20px"
+                    v-else-if="props.row.probation_status === 'NO-PASS'"
+                    name="mdi-close"
+                    color="red"
+                  />
+                  {{
+                    props.row.probation_status === "PENDING"
+                      ? "รอมอบหมายงาน"
+                      : props.row.probation_status === "PROCESS"
+                      ? "อยู่ระหว่างทดลองงาน"
+                      : props.row.probation_status === "PASS"
+                      ? "ผ่านการทดลองงาน"
+                      : props.row.probation_status === "NO-PASS"
+                      ? "ไม่ผ่านการทดลองงาน"
+                      : ""
+                  }}
+                </div>
                 <div v-else>
                   {{ col.value }}
                 </div>
@@ -60,8 +134,16 @@
             </q-tr>
           </template>
           <template v-slot:pagination="scope">
-            <q-pagination v-model="pagination.page" active-color="primary" color="dark" :max="scope.pagesNumber"
-              :max-pages="5" size="sm" boundary-links direction-links></q-pagination>
+            <q-pagination
+              v-model="pagination.page"
+              active-color="primary"
+              color="dark"
+              :max="scope.pagesNumber"
+              :max-pages="5"
+              size="sm"
+              boundary-links
+              direction-links
+            ></q-pagination>
           </template>
         </q-table>
       </div>
@@ -71,23 +153,55 @@
   <q-dialog v-model="modal" persistent>
     <q-card style="width: 900px; max-width: 80vw">
       <q-form ref="myForm">
-        <DialogHeader tittle="เพิ่มผู้ทดลองปฏิบัติหน้าที่ราชการ " :close="clickClose" />
+        <DialogHeader
+          tittle="เพิ่มผู้ทดลองปฏิบัติหน้าที่ราชการ "
+          :close="clickClose"
+        />
         <q-separator />
         <q-card-section class="q-pa-md q-col-gutter-sm">
-          <q-input class="col-12" standout dense v-model="filterKeyword2" ref="filterRef2" outlined debounce="300"
-            placeholder="ค้นหา">
+          <q-input
+            class="col-12"
+            standout
+            dense
+            v-model="filterKeyword2"
+            ref="filterRef2"
+            outlined
+            debounce="300"
+            placeholder="ค้นหา"
+          >
             <template v-slot:append>
               <q-icon v-if="filterKeyword2 == ''" name="search" />
-              <q-icon v-if="filterKeyword2 !== ''" name="clear" class="cursor-pointer" @click="resetFilter2" />
+              <q-icon
+                v-if="filterKeyword2 !== ''"
+                name="clear"
+                class="cursor-pointer"
+                @click="resetFilter2"
+              />
             </template>
           </q-input>
           <div class="col-12">
-            <q-table ref="table2" :columns="columns2" :rows="rows2" :filter="filterKeyword2" row-key="Order" flat bordered
-              :paging="true" dense class="custom-header-table" v-bind="attrs" :pagination-label="paginationLabel"
-              v-model:pagination="pagination">
+            <q-table
+              ref="table2"
+              :columns="columns2"
+              :rows="rows2"
+              :filter="filterKeyword2"
+              row-key="Order"
+              flat
+              bordered
+              :paging="true"
+              dense
+              class="custom-header-table"
+              v-bind="attrs"
+              :pagination-label="paginationLabel"
+              v-model:pagination="pagination"
+            >
               <template v-slot:header="props">
                 <q-tr :props="props">
-                  <q-th v-for="col in props.cols" :key="col.name" :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 />
@@ -95,7 +209,11 @@
               </template>
               <template v-slot:body="props">
                 <q-tr :props="props" class="cursor-pointer">
-                  <q-td v-for="col in props.cols" :key="col.name" :props="props">
+                  <q-td
+                    v-for="col in props.cols"
+                    :key="col.name"
+                    :props="props"
+                  >
                     <div v-if="col.name == 'no'">
                       {{ props.rowIndex + 1 }}
                     </div>
@@ -104,14 +222,29 @@
                     </div>
                   </q-td>
                   <q-td auto-width>
-                    <q-btn dense class="q-px-md" outline color="primary" label="เพิ่ม" @click="clickAdd(props.row.id)">
+                    <q-btn
+                      dense
+                      class="q-px-md"
+                      outline
+                      color="primary"
+                      label="เพิ่ม"
+                      @click="clickAdd(props.row.id)"
+                    >
                     </q-btn>
                   </q-td>
                 </q-tr>
               </template>
               <template v-slot:pagination="scope">
-                <q-pagination v-model="pagination.page" active-color="primary" color="dark" :max="scope.pagesNumber"
-                  :max-pages="5" size="sm" boundary-links direction-links></q-pagination>
+                <q-pagination
+                  v-model="pagination.page"
+                  active-color="primary"
+                  color="dark"
+                  :max="scope.pagesNumber"
+                  :max-pages="5"
+                  size="sm"
+                  boundary-links
+                  direction-links
+                ></q-pagination>
               </template>
             </q-table>
           </div>
@@ -355,7 +488,7 @@ const getpersonalList = async () => {
       }));
       console.log("(data)", data);
     })
-    .catch(() => { })
+    .catch(() => {})
     .finally(() => {
       hideLoader();
     });
@@ -410,9 +543,9 @@ const clickDelete = (id: string) => {
     },
     persistent: true,
   })
-    .onOk(async () => { })
-    .onCancel(() => { })
-    .onDismiss(() => { });
+    .onOk(async () => {})
+    .onCancel(() => {})
+    .onDismiss(() => {});
 };
 
 const clickAdd = (id: string) => {
@@ -426,23 +559,27 @@ const clickAdd = (id: string) => {
     persistent: true,
   })
     .onOk(async () => {
-      showLoader()
+      showLoader();
       const postData = {
         personal_id: id,
       };
       // console.log("postData:", postData);
-      await http.post(config.API.personalAdd(), postData).then((res) => {
-        // console.log("res:", res);
-        getpersonalList();
-      }).catch((e) => {
-        messageError($q, e);
-      }).finally(() => {
-        clickClose()
-        hideLoader()
-      });
+      await http
+        .post(config.API.personalAdd(), postData)
+        .then((res) => {
+          // console.log("res:", res);
+          getpersonalList();
+        })
+        .catch((e) => {
+          messageError($q, e);
+        })
+        .finally(() => {
+          clickClose();
+          hideLoader();
+        });
     })
-    .onCancel(() => { })
-    .onDismiss(() => { });
+    .onCancel(() => {})
+    .onDismiss(() => {});
 };
 
 const clickClose = async () => {
diff --git a/src/modules/05_placement/components/probation/ProbationDetail.vue b/src/modules/05_placement/components/probation/ProbationDetail.vue
index c2ec61b05..a99da640e 100644
--- a/src/modules/05_placement/components/probation/ProbationDetail.vue
+++ b/src/modules/05_placement/components/probation/ProbationDetail.vue
@@ -55,19 +55,39 @@
             <div class="col-12 text-detail">
               <q-icon
                 size="20px"
-                v-if="probation_status == 'PENDING'"
+                v-if="probation_status === 'PENDING'"
                 name="mdi-timer-sand"
                 color="deep-orange"
               />
               <q-icon
                 size="20px"
-                v-else-if="probation_status == 'ไม่ผ่านการทดลอง'"
+                v-else-if="probation_status === 'NO-PASS'"
                 name="mdi-close"
                 color="red"
               />
+              <q-icon
+                size="20px"
+                v-else-if="probation_status === 'PROCESS'"
+                name="mdi-timer-sand"
+                color="deep-orange"
+              />
+              <q-icon
+                size="20px"
+                v-else-if="probation_status === 'PASS'"
+                name="mdi-check"
+                color="teal"
+              />
               <q-icon size="20px" v-else name="mdi-check" color="teal" />
               {{
-                probation_status == "PENDING" ? "อยู่ในระหว่างการทดลองงาน" : ""
+                probation_status === "PENDING"
+                  ? "รอมอบหมายงาน"
+                  : probation_status === "NO-PASS"
+                  ? "ไม่ผ่านการทดลองงาน"
+                  : probation_status === "PROCESS"
+                  ? "อยู่ในระหว่างการทดลองงาน"
+                  : probation_status === "PASS"
+                  ? "ผ่านการทดลองงาน"
+                  : ""
               }}
             </div>
           </div>
@@ -204,7 +224,7 @@ import config from "@/app.config";
 
 const $q = useQuasar(); //ใช้ noti quasar
 const mixin = useCounterMixin();
-const { messageError, success, showLoader, hideLoader,date2Thai } = mixin;
+const { messageError, success, showLoader, hideLoader, date2Thai } = mixin;
 const router = useRouter();
 const route = useRoute();
 const personalId = ref<string>(route.params.id as string);
@@ -311,7 +331,7 @@ const getAssignList = async () => {
       console.log("LIST ===>", res.data.data);
       const data = res.data.data;
       rows.value = data.map((item: FormProbationDetail) => ({
-        id:item.id,
+        id: item.id,
         round_no: item.round_no,
         date_start: date2Thai(new Date(item.date_start)),
         date_finish: date2Thai(new Date(item.date_finish)),
diff --git a/src/modules/05_placement/router.ts b/src/modules/05_placement/router.ts
index 614adfb7c..8425c525a 100644
--- a/src/modules/05_placement/router.ts
+++ b/src/modules/05_placement/router.ts
@@ -147,7 +147,7 @@ export default [
     },
   },
   {
-    path: "/probation/detail/:id/:form",
+    path: "/probation/detail/:personalId/:form",
     name: "probationForm",
     component: probationFormEvaluation,
     meta: {

From bf80274f868cb7cc5b857afef5c9dafeb34d37fa Mon Sep 17 00:00:00 2001
From: AnandaTon <125332905+anandaAiemvong@users.noreply.github.com>
Date: Fri, 11 Aug 2023 11:13:14 +0700
Subject: [PATCH 083/113] =?UTF-8?q?=E0=B9=80=E0=B9=80=E0=B8=81=E0=B9=89?=
 =?UTF-8?q?=E0=B9=84=E0=B8=82=20api=20insignia=20(file)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/1_Proposals/addProposals.vue   |  1 +
 .../components/1_Proposals/listProposals.vue  | 21 +++++++++++--------
 .../components/1_Proposals/addProposals.vue   |  1 +
 .../components/1_Proposals/listProposals.vue  |  9 +++++---
 4 files changed, 20 insertions(+), 12 deletions(-)

diff --git a/src/modules/07_insignia/components/1_Proposals/addProposals.vue b/src/modules/07_insignia/components/1_Proposals/addProposals.vue
index 8a2cfc5ab..f4b3205ef 100644
--- a/src/modules/07_insignia/components/1_Proposals/addProposals.vue
+++ b/src/modules/07_insignia/components/1_Proposals/addProposals.vue
@@ -295,6 +295,7 @@ const checkSave = async () => {
           await editData(id.value);
         } else {
           await addData();
+          clickBack();
         }
       }
     });
diff --git a/src/modules/07_insignia/components/1_Proposals/listProposals.vue b/src/modules/07_insignia/components/1_Proposals/listProposals.vue
index 2c132ed72..a3851651f 100644
--- a/src/modules/07_insignia/components/1_Proposals/listProposals.vue
+++ b/src/modules/07_insignia/components/1_Proposals/listProposals.vue
@@ -102,7 +102,7 @@
               </q-td>
               <q-td key="status" :props="props" @click="clickEdit(props.row)">
                 <q-icon
-                  v-if="props.row.status == 'ยังไม่ได้เสนอ'"
+                  v-if="props.row.status == true"
                   name="mdi-close"
                   color="grey-5"
                   class="text-h5"
@@ -139,7 +139,7 @@
                   flat
                   round
                   color="light-blue-8"
-                  @click.stop.prevent="clickProposals(props.row.id)"
+                  @click.stop.prevent="clickProposals(props.row.file)"
                   icon="mdi-file-download"
                 >
                   <q-tooltip>ดาวน์โหลดเอกสารประกอบ </q-tooltip>
@@ -297,7 +297,7 @@ const rows = ref<FormProprsalsRound[]>([
     year: "2566",
     startDate: "2566",
     endDate: "31 พ.ค. 2566",
-    status: "เสนอเเล้ว",
+    status: true,
     statusRoyal: "เสนอเเล้ว",
   },
   {
@@ -305,7 +305,7 @@ const rows = ref<FormProprsalsRound[]>([
     year: "2566",
     startDate: "2566",
     endDate: "31 พ.ค. 2566",
-    status: "เสนอเเล้ว",
+    status: true,
     statusRoyal: "เสนอเเล้ว",
   },
   {
@@ -313,7 +313,7 @@ const rows = ref<FormProprsalsRound[]>([
     year: "2566",
     startDate: "2566",
     endDate: "31 พ.ค. 2566",
-    status: "เสนอเเล้ว",
+    status: true,
     statusRoyal: "เสนอเเล้ว",
   },
   {
@@ -329,7 +329,7 @@ const rows = ref<FormProprsalsRound[]>([
     year: "2566",
     startDate: "2566",
     endDate: "31 พ.ค. 2566",
-    status: "เสนอเเล้ว",
+    status: true,
     statusRoyal: "ยังไม่ได้เสนอ",
   },
 ]);
@@ -356,7 +356,8 @@ const fetchData = async () => {
             e.period_start == null ? null : date2Thai(new Date(e.period_start)),
           endDate:
             e.period_end == null ? null : date2Thai(new Date(e.period_end)),
-          status: e.period_status,
+          status: e.period_isActive,
+          file: e.period_doc,
         });
       });
     })
@@ -406,8 +407,10 @@ const clickAdd = () => {
   router.push({ name: "roundAdd" });
 };
 
-const clickProposals = (id: string) => {
-  //   window.open(config.API.exportInsigniaDoc(id));
+const clickProposals = (file: string) => {
+  if (file !== null) {
+    window.open(file);
+  }
 };
 
 // ค้นหาในตาราง
diff --git a/src/modules/09_coin/components/1_Proposals/addProposals.vue b/src/modules/09_coin/components/1_Proposals/addProposals.vue
index b3a014055..037ceaf2e 100644
--- a/src/modules/09_coin/components/1_Proposals/addProposals.vue
+++ b/src/modules/09_coin/components/1_Proposals/addProposals.vue
@@ -319,6 +319,7 @@ const checkSave = async () => {
           await editData(id.value);
         } else {
           await addData();
+          clickBack();
         }
       }
     });
diff --git a/src/modules/09_coin/components/1_Proposals/listProposals.vue b/src/modules/09_coin/components/1_Proposals/listProposals.vue
index d9d5793b9..3202d3397 100644
--- a/src/modules/09_coin/components/1_Proposals/listProposals.vue
+++ b/src/modules/09_coin/components/1_Proposals/listProposals.vue
@@ -139,7 +139,7 @@
                   flat
                   round
                   color="light-blue-8"
-                  @click.stop.prevent="clickProposals(props.row.id)"
+                  @click.stop.prevent="clickProposals(props.row.file)"
                   icon="mdi-file-download"
                 >
                   <q-tooltip>ดาวน์โหลดเอกสารประกอบ </q-tooltip>
@@ -341,6 +341,7 @@ const fetchData = async () => {
           endDate:
             e.period_end == null ? null : date2Thai(new Date(e.period_end)),
           status: e.period_status,
+          file: e.period_doc,
         });
       });
     })
@@ -356,8 +357,10 @@ const clickEdit = (col: any) => {
   router.push(`/coin/round-add/${col.id}`);
 };
 
-const clickProposals = (id: string) => {
-  //   window.open(config.API.exportDisablePassExamList(id));
+const clickProposals = (file: string) => {
+  if (file !== null) {
+    window.open(file);
+  }
 };
 
 // หัวตาราง2

From cbd4ad70ce59c6909f33cef6a154df226f141067 Mon Sep 17 00:00:00 2001
From: Kittapath <kittapath@frappet.com>
Date: Fri, 11 Aug 2023 11:15:08 +0700
Subject: [PATCH 084/113] no message

---
 package-lock.json | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 77830255c..b484a00e6 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -7722,7 +7722,7 @@
     },
     "node_modules/vue": {
       "version": "3.2.47",
-      "resolved": "https://npm.joolsoft.com/vue/-/vue-3.2.47.tgz",
+    //   "resolved": "https://npm.joolsoft.com/vue/-/vue-3.2.47.tgz",
       "integrity": "sha512-60188y/9Dc9WVrAZeUVSDxRQOZ+z+y5nO2ts9jWXSTkMvayiWxCWOWtBQoYjLeccfXkiiPZWAHcV+WTPhkqJHQ==",
       "dependencies": {
         "@vue/compiler-dom": "3.2.47",
@@ -13787,7 +13787,7 @@
     },
     "vue": {
       "version": "3.2.47",
-      "resolved": "https://npm.joolsoft.com/vue/-/vue-3.2.47.tgz",
+    //   "resolved": "https://npm.joolsoft.com/vue/-/vue-3.2.47.tgz",
       "integrity": "sha512-60188y/9Dc9WVrAZeUVSDxRQOZ+z+y5nO2ts9jWXSTkMvayiWxCWOWtBQoYjLeccfXkiiPZWAHcV+WTPhkqJHQ==",
       "requires": {
         "@vue/compiler-dom": "3.2.47",

From bcac1fa20d33204f5fbc4e8de82babc8e1ccee89 Mon Sep 17 00:00:00 2001
From: AnandaTon <125332905+anandaAiemvong@users.noreply.github.com>
Date: Fri, 11 Aug 2023 11:20:13 +0700
Subject: [PATCH 085/113] =?UTF-8?q?=E0=B9=81=E0=B8=81=E0=B9=89=E0=B9=84?=
 =?UTF-8?q?=E0=B8=82=E0=B8=9B=E0=B8=B5=E0=B9=83=E0=B8=99=E0=B8=AB=E0=B8=99?=
 =?UTF-8?q?=E0=B9=89=E0=B8=B2=E0=B9=80=E0=B8=AA=E0=B8=99=E0=B8=AD=E0=B8=82?=
 =?UTF-8?q?=E0=B8=AD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../07_insignia/components/1_Proposals/listProposals.vue        | 2 +-
 src/modules/09_coin/components/1_Proposals/listProposals.vue    | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/modules/07_insignia/components/1_Proposals/listProposals.vue b/src/modules/07_insignia/components/1_Proposals/listProposals.vue
index a3851651f..7ea3a1235 100644
--- a/src/modules/07_insignia/components/1_Proposals/listProposals.vue
+++ b/src/modules/07_insignia/components/1_Proposals/listProposals.vue
@@ -350,7 +350,7 @@ const fetchData = async () => {
         rows.value.push({
           id: e.period_id,
           round: e.period_name,
-          year: e.period_year,
+          year: e.period_year + 543,
           amount: e.period_amount,
           startDate:
             e.period_start == null ? null : date2Thai(new Date(e.period_start)),
diff --git a/src/modules/09_coin/components/1_Proposals/listProposals.vue b/src/modules/09_coin/components/1_Proposals/listProposals.vue
index 3202d3397..5ae1ac3cc 100644
--- a/src/modules/09_coin/components/1_Proposals/listProposals.vue
+++ b/src/modules/09_coin/components/1_Proposals/listProposals.vue
@@ -334,7 +334,7 @@ const fetchData = async () => {
         rows.value.push({
           id: e.period_id,
           round: e.period_name,
-          year: e.period_year,
+          year: e.period_year + 543,
           amount: e.period_amount,
           startDate:
             e.period_start == null ? null : date2Thai(new Date(e.period_start)),

From 1dec63fdddd6521b1150199d36e88ff58add12df Mon Sep 17 00:00:00 2001
From: Thanit Konmek <thanit@frappet.com>
Date: Fri, 11 Aug 2023 13:29:19 +0700
Subject: [PATCH 086/113] =?UTF-8?q?=E0=B9=81=E0=B8=81=E0=B9=89=E0=B9=84?=
 =?UTF-8?q?=E0=B8=82=20=E0=B8=82=E0=B8=AD=E0=B9=82=E0=B8=AD=E0=B8=99?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/05_placement/api.placement.ts         |   1 +
 .../components/Transfer/transferMain.vue      | 189 +++++-----
 .../components/Transfer/transferRegistry.vue  | 341 ++++++++++++++++--
 .../interface/response/Transfer.ts            |   7 +
 src/modules/05_placement/store.ts             |  26 ++
 5 files changed, 447 insertions(+), 117 deletions(-)

diff --git a/src/api/05_placement/api.placement.ts b/src/api/05_placement/api.placement.ts
index b29f33155..fb6ec2ab0 100644
--- a/src/api/05_placement/api.placement.ts
+++ b/src/api/05_placement/api.placement.ts
@@ -94,6 +94,7 @@ export default {
   //tranfer ระบบคำขอโอน
   transfer,
   transferId: (id: string) => `${transfer}/${id}`,
+  transferReport: `${transfer}/report`,
   transferUser: `${transfer}/user`,
   transferUserId: (id: string) => `${transfer}/user/${id}`,
   transferConfirmId: (id: string) => `${transfer}/confirm/${id}`,
diff --git a/src/modules/05_placement/components/Transfer/transferMain.vue b/src/modules/05_placement/components/Transfer/transferMain.vue
index fb15a19aa..f7e170c96 100644
--- a/src/modules/05_placement/components/Transfer/transferMain.vue
+++ b/src/modules/05_placement/components/Transfer/transferMain.vue
@@ -4,6 +4,7 @@ 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";
@@ -13,7 +14,7 @@ import DialogHeader from "@/modules/05_placement/components/PersonalList/DialogH
 
 import type { ResponseData } from "@/modules/05_placement/interface/response/Transfer";
 
-const selected = ref([]);
+const selected = ref<ResponseData[]>([]);
 const checkSelected = computed(() => {
   if (selected.value.length === 0) {
     return true;
@@ -23,8 +24,10 @@ const checkSelected = computed(() => {
 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[]>([
@@ -32,18 +35,18 @@ const visibleColumns = ref<string[]>([
   "fullname",
   "position",
   "positionLevel",
-  "oc",
-  "agency",
-  "status",
+  "organizationPositionOld",
+  "organization",
+  "statustext",
 ]);
 const visibleColumns2 = ref<string[]>([
   "no",
   "fullname",
   "position",
   "positionLevel",
-  "oc",
-  "agency",
-  "status",
+  "organizationPositionOld",
+  "organization",
+  "statustext",
 ]); //ค้นหา คอลัมน์ คอลัมน์ที่แสดง
 const filterKeyword = ref<string>("");
 const filterKeyword2 = ref<string>("");
@@ -58,53 +61,8 @@ const resetFilter = () => {
 //   router.push("/retirement/resign/"+id);
 // };
 const rows = ref<ResponseData[]>([]);
-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 rows2 = ref<ResponseData[]>([]);
+const filters = ref<ResponseData[]>([]);
 const columns = ref<QTableProps["columns"]>([
   {
     name: "no",
@@ -143,29 +101,29 @@ const columns = ref<QTableProps["columns"]>([
     style: "font-size: 14px",
   },
   {
-    name: "oc",
+    name: "organizationPositionOld",
     align: "left",
     label: "สังกัด",
     sortable: true,
-    field: "oc",
+    field: "organizationPositionOld",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
   {
-    name: "agency",
+    name: "organization",
     align: "left",
     label: "หน่วยงานที่ขอโอนไป",
     sortable: true,
-    field: "agency",
+    field: "organization",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
   {
-    name: "status",
+    name: "statustext",
     align: "left",
     label: "สถานะ",
     sortable: true,
-    field: "status",
+    field: "statustext",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
@@ -208,29 +166,29 @@ const columns2 = ref<QTableProps["columns"]>([
     style: "font-size: 14px",
   },
   {
-    name: "oc",
+    name: "organizationPositionOld",
     align: "left",
     label: "สังกัด",
     sortable: true,
-    field: "oc",
+    field: "organizationPositionOld",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
   {
-    name: "agency",
+    name: "organization",
     align: "left",
     label: "หน่วยงานที่ขอโอนไป",
     sortable: true,
-    field: "agency",
+    field: "organization",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
   {
-    name: "status",
+    name: "statustext",
     align: "left",
     label: "สถานะ",
     sortable: true,
-    field: "status",
+    field: "statustext",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
@@ -243,6 +201,15 @@ 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
@@ -254,8 +221,10 @@ const getData = async () => {
         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 ?? "",
@@ -264,12 +233,18 @@ const getData = async () => {
           positionLevelOld: r.positionLevelOld ?? "",
           positionNumberOld: r.positionNumberOld ?? "",
           positionTypeOld: r.positionTypeOld ?? "",
-          reason: r.id ?? "",
-          salary: r.salary !== null ? r.salary : 0,
+          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);
@@ -278,6 +253,30 @@ const getData = async () => {
       hideLoader();
     });
 };
+
+const saveOrder = async () => {
+  const id = selected.value.map((r) => r.id);
+  const body = {
+    id,
+  };
+
+  showLoader();
+  await http
+    .post(config.API.transferReport, 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>
@@ -287,7 +286,7 @@ const getData = async () => {
       <div class="col-12">
         <div class="row col-12">
           <q-btn
-            @click="openModal"
+            @click="openModalOrder"
             size="14px"
             flat
             round
@@ -369,14 +368,24 @@ const getData = async () => {
                 <q-td key="positionLevel" :props="props">
                   {{ props.row.positionLevel }}
                 </q-td>
-                <q-td key="oc" :props="props">
-                  {{ props.row.oc }}
+                <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="agency" :props="props">
-                  {{ props.row.agency }}
+                <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="status" :props="props">
-                  {{ props.row.status }}
+                <q-td key="statustext" :props="props">
+                  {{ props.row.statustext }}
                 </q-td>
               </q-tr>
             </template>
@@ -436,8 +445,7 @@ const getData = async () => {
           :columns="columns2"
           :rows="rows2"
           :filter="filterKeyword2"
-          row-key="personalId"
-          class="custom-header-table"
+          row-key="id"
           :visible-columns="visibleColumns2"
           selection="multiple"
           v-model:selected="selected"
@@ -450,14 +458,7 @@ const getData = async () => {
               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>
@@ -480,14 +481,18 @@ const getData = async () => {
               <q-td key="positionLevel" :props="props">
                 {{ props.row.positionLevel }}
               </q-td>
-              <q-td key="oc" :props="props">
-                {{ props.row.oc }}
+              <q-td key="organizationPositionOld" :props="props">
+                <div class="table_ellipsis">
+                  {{ props.row.organizationPositionOld }}
+                </div>
               </q-td>
-              <q-td key="agency" :props="props">
-                {{ props.row.agency }}
+              <q-td key="organization" :props="props">
+                <div class="table_ellipsis">
+                  {{ props.row.organization }}
+                </div>
               </q-td>
-              <q-td key="status" :props="props">
-                {{ props.row.status }}
+              <q-td key="statustext" :props="props">
+                {{ props.row.statustext }}
               </q-td>
             </q-tr>
           </template>
@@ -497,7 +502,7 @@ const getData = async () => {
       <q-card-actions align="right" class="bg-white text-teal">
         <q-btn
           label="บันทึก"
-          @click=""
+          @click="saveOrder"
           :disable="checkSelected"
           color="public"
         />
diff --git a/src/modules/05_placement/components/Transfer/transferRegistry.vue b/src/modules/05_placement/components/Transfer/transferRegistry.vue
index 2ea3c3c63..81f8d5218 100644
--- a/src/modules/05_placement/components/Transfer/transferRegistry.vue
+++ b/src/modules/05_placement/components/Transfer/transferRegistry.vue
@@ -10,11 +10,13 @@
       class="q-mr-sm"
       @click="router.go(-1)"
     />
-    รายละเอียดการขอโอนของ {{ name }}
+    รายละเอียดการขอโอนของ {{ 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">{{ name }}</div>
+      <div class="q-pl-sm text-weight-bold text-subtitle2">
+        {{ responseData.fullname }}
+      </div>
       <q-space />
       <q-btn
         outline
@@ -30,7 +32,11 @@
     <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" />
+          <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">
@@ -141,6 +147,217 @@
       </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-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>
 <script setup lang="ts">
 import { onMounted, ref } from "vue";
@@ -152,7 +369,7 @@ import http from "@/plugins/http";
 import config from "@/app.config";
 import keycloak from "@/plugins/keycloak";
 
-import type { QTableProps } from "quasar";
+import type { QTableProps, QForm } from "quasar";
 import type {
   TypeFile,
   ResponseDataDetail,
@@ -173,17 +390,21 @@ const {
   success,
 } = mixin;
 
+const myForm = ref<QForm | null>(null);
 const roleAdmin = ref<boolean>(false);
+const edit = ref<boolean>(false);
 
-const name = ref<string>("นายสมคิด ยอดใจ");
-const position = ref<string>("นักจัดการงานทั่วไป");
-const level = ref<string>("ชำนาญการพิเศษ");
-const institution = ref<string>("ฝ่ายบริหารงานทั่วไป");
-const status = ref<string>("อยู่ระหว่างการทดลองงาน");
-const organization = ref<string>("ก.ก.");
-const reason = ref<string>("เพราะxxx");
+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: "",
@@ -195,6 +416,7 @@ const responseData = ref<ResponseDataDetail>({
   reason: "",
   salary: 0,
   status: "",
+  fullname: "",
 });
 
 const rows = ref<TypeFile[]>([]);
@@ -239,7 +461,7 @@ onMounted(async () => {
 const getData = async () => {
   showLoader();
   await http
-    .get(config.API.transferUserId(personId.toString()))
+    .get(config.API.transferId(personId.toString()))
     .then((res: any) => {
       const data = res.data.result;
       //   console.log(data);
@@ -251,20 +473,34 @@ const getData = async () => {
             fileName: doc.fileName ?? "",
           });
         });
-        rows.value = list;
-        responseData.value.createdAt = data.createdAt;
-        responseData.value.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 ?? "";
       }
+      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);
@@ -304,6 +540,61 @@ const sendConfirm = async () => {
       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.transferId(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 {
diff --git a/src/modules/05_placement/interface/response/Transfer.ts b/src/modules/05_placement/interface/response/Transfer.ts
index 19a1523a9..8a575f438 100644
--- a/src/modules/05_placement/interface/response/Transfer.ts
+++ b/src/modules/05_placement/interface/response/Transfer.ts
@@ -1,8 +1,10 @@
 interface ResponseData {
   createdAt: Date;
   date: Date;
+  firstName: string;
   id: string;
   isActive: boolean;
+  lastName: string;
   organization: string;
   organizationPositionOld: string;
   posNo: string;
@@ -11,9 +13,12 @@ interface ResponseData {
   positionLevelOld: string;
   positionNumberOld: string;
   positionTypeOld: string;
+  prefix: string;
   reason: string;
   salary: number;
   status: string;
+  fullname: string;
+  statustext: string;
 }
 
 interface TypeFile {
@@ -22,6 +27,7 @@ interface TypeFile {
 }
 
 interface ResponseDataDetail {
+  avataPath: string;
   createdAt: Date;
   date: Date;
   id: string;
@@ -33,6 +39,7 @@ interface ResponseDataDetail {
   reason: string;
   salary: number;
   status: string;
+  fullname: string;
 }
 
 export type { ResponseData, ResponseDataDetail, TypeFile };
diff --git a/src/modules/05_placement/store.ts b/src/modules/05_placement/store.ts
index 0ebbda72f..73c42cd6e 100644
--- a/src/modules/05_placement/store.ts
+++ b/src/modules/05_placement/store.ts
@@ -311,3 +311,29 @@ export const useProbationDataStore = defineStore("probationDataStore", () => {
     setStepOrder,
   };
 });
+
+export const useTransferDataStore = defineStore("transferDataStore", () => {
+  const statusText = (val: string) => {
+    switch (val) {
+      case "WAITTING":
+        return "รออนุมัติ";
+      case "PENDING":
+        return "รออนุมัติ";
+      case "APPROVE":
+        return "ผ่านการอนุมัติ";
+      case "REJECT":
+        return "ไม่ผ่านการอนุมัติ";
+      case "REPORT":
+        return "ส่งไปออกคำสั่ง";
+      case "DONE":
+        return "ออกคำสั่งสำเร็จ";
+
+      default:
+        return "-";
+    }
+  };
+
+  return {
+    statusText,
+  };
+});

From cea4c2d0b57e5da223b7257d3483e7357c14f78a Mon Sep 17 00:00:00 2001
From: waruneeta <warunee.auy@gmail.com>
Date: Fri, 11 Aug 2023 14:06:28 +0700
Subject: [PATCH 087/113] add api placement & retire

---
 src/api/05_placement/api.placement.ts   | 16 ++++++++++++++++
 src/api/06_retirement/api.retirement.ts | 13 ++++++++++++-
 2 files changed, 28 insertions(+), 1 deletion(-)

diff --git a/src/api/05_placement/api.placement.ts b/src/api/05_placement/api.placement.ts
index fb6ec2ab0..9aa185ea7 100644
--- a/src/api/05_placement/api.placement.ts
+++ b/src/api/05_placement/api.placement.ts
@@ -4,6 +4,10 @@ const orgTree = `${env.API_URI_ORG_TREE}`;
 const order = `${env.API_PLACEMENT_URI}`;
 const receive = `${env.API_PLACEMENT_URI}/placement/Receive`;
 const transfer = `${placement}/transfer`;
+const placemenHelpGov = `${placement}/officer`;
+const placemenRepatriation = `${placement}/repatriation`;
+const placemenRelocation = `${placement}/relocation`;
+const placemenOther = `${env.API_URI}/retirement/other`;
 
 export default {
   MainDetail: (year: number) => `${placement}/exam/${year}`,
@@ -98,4 +102,16 @@ export default {
   transferUser: `${transfer}/user`,
   transferUserId: (id: string) => `${transfer}/user/${id}`,
   transferConfirmId: (id: string) => `${transfer}/confirm/${id}`,
+
+  // ช่วยราชการ
+  placemenHelpGov,
+
+  // ส่งตัวกลับ
+  placemenRepatriation,
+
+  // ขอย้าย
+  placemenRelocation,
+
+  // อื่นๆ
+  placemenOther,
 };
diff --git a/src/api/06_retirement/api.retirement.ts b/src/api/06_retirement/api.retirement.ts
index 56df2a452..4ad20b606 100644
--- a/src/api/06_retirement/api.retirement.ts
+++ b/src/api/06_retirement/api.retirement.ts
@@ -1,6 +1,8 @@
 import env from "../index";
 const retirement = `${env.API_URI}/retirement`
-
+const retirementDischarge = `${retirement}/discharge`
+const retirementExpulsion = `${retirement}/expulsion`
+const retirementOut = `${retirement}/out`
 
 export default {
     profile: (type: string, year: string) => `${retirement}/profile/${type}/${year}`,
@@ -22,4 +24,13 @@ export default {
     resignConfirm: (id: string) => `${retirement}/resign/confirm/${id}`,
     resignReject: (id: string) => `${retirement}/resign/reject/${id}`,
 
+    // ปลดออก
+    retirementDischarge,
+
+    // ไล่ออก
+    retirementExpulsion,
+
+    // ให้ออก
+    retirementOut
+
 };

From 875bc2bd878119f239f67286d4190f5a00f8d356 Mon Sep 17 00:00:00 2001
From: waruneeta <warunee.auy@gmail.com>
Date: Fri, 11 Aug 2023 14:10:03 +0700
Subject: [PATCH 088/113] =?UTF-8?q?=E0=B9=80=E0=B8=9E=E0=B8=B4=E0=B9=88?=
 =?UTF-8?q?=E0=B8=A1=20api=20post=20=E0=B9=81=E0=B8=95=E0=B9=88=E0=B8=87?=
 =?UTF-8?q?=E0=B8=95=E0=B8=B1=E0=B9=89=E0=B8=87-=E0=B9=80=E0=B8=A5?=
 =?UTF-8?q?=E0=B8=B7=E0=B9=88=E0=B8=AD=E0=B8=99?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/05_placement/api.placement.ts | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/src/api/05_placement/api.placement.ts b/src/api/05_placement/api.placement.ts
index 9aa185ea7..f69824fe8 100644
--- a/src/api/05_placement/api.placement.ts
+++ b/src/api/05_placement/api.placement.ts
@@ -8,6 +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`;
 
 export default {
   MainDetail: (year: number) => `${placement}/exam/${year}`,
@@ -103,6 +104,9 @@ export default {
   transferUserId: (id: string) => `${transfer}/user/${id}`,
   transferConfirmId: (id: string) => `${transfer}/confirm/${id}`,
 
+  // แต่งตั้ง-เลื่อน
+  placemenAppointment,
+
   // ช่วยราชการ
   placemenHelpGov,
 

From 84f61e70d271367df3f2916bde3f793a561ea88f Mon Sep 17 00:00:00 2001
From: waruneeta <warunee.auy@gmail.com>
Date: Fri, 11 Aug 2023 15:03:45 +0700
Subject: [PATCH 089/113] =?UTF-8?q?edit=20path=20=E0=B9=84=E0=B8=A5?=
 =?UTF-8?q?=E0=B9=88=E0=B8=AD=E0=B8=AD=E0=B8=81=20=E0=B8=9B=E0=B8=A5?=
 =?UTF-8?q?=E0=B8=94=E0=B8=AD=E0=B8=AD=E0=B8=81=20=E0=B9=83=E0=B8=AB?=
 =?UTF-8?q?=E0=B9=89=E0=B8=AD=E0=B8=AD=E0=B8=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/interface/request/main/main.ts | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/interface/request/main/main.ts b/src/interface/request/main/main.ts
index ab401c6ff..ad8f16e68 100644
--- a/src/interface/request/main/main.ts
+++ b/src/interface/request/main/main.ts
@@ -125,7 +125,7 @@ const menuList = readonly<any[]>([
     activeIcon: "order",
     label: "ออกคำสั่ง",
     path: "order",
-    role: "placement",
+    role: "order",
   },
   {
     key: 5,
@@ -253,7 +253,7 @@ const menuList = readonly<any[]>([
       {
         key: 6.9,
         label: "รายการย้าย" /* */,
-        path: "move-list",
+        path: "relocation",
         role: "placement",
       },
       {
@@ -311,13 +311,13 @@ const menuList = readonly<any[]>([
       {
         key: 7.6,
         label: "รายการปลดออก",
-        path: "dismiss-order",
+        path: "discharged",
         role: "retirement",
       },
       {
         key: 7.7,
         label: "รายการไล่ออก",
-        path: "dismiss-order",
+        path: "expulsion",
         role: "retirement",
       },
     ],

From 5358cc3d0855006aa78942b0a3c41bba1321d41d Mon Sep 17 00:00:00 2001
From: setthawutttty <stw.ttty@gmail.com>
Date: Fri, 11 Aug 2023 15:11:36 +0700
Subject: [PATCH 090/113] =?UTF-8?q?=E0=B8=A3=E0=B8=B2=E0=B8=A2=E0=B8=81?=
 =?UTF-8?q?=E0=B8=B2=E0=B8=A3=E0=B8=8A=E0=B9=88=E0=B8=A7=E0=B8=A2=E0=B8=A3?=
 =?UTF-8?q?=E0=B8=B2=E0=B8=8A=E0=B8=81=E0=B8=B2=E0=B8=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/05_placement/api.placement.ts         |   3 +
 .../helpgovernment/governmentDetail.vue       | 293 ++++++++
 .../components/helpgovernment/mainHelp.vue    | 688 ++++++++++++++++++
 .../interface/response/officer.ts             |  23 +
 src/modules/05_placement/router.ts            |  23 +-
 5 files changed, 1029 insertions(+), 1 deletion(-)
 create mode 100644 src/modules/05_placement/components/helpgovernment/governmentDetail.vue
 create mode 100644 src/modules/05_placement/components/helpgovernment/mainHelp.vue
 create mode 100644 src/modules/05_placement/interface/response/officer.ts

diff --git a/src/api/05_placement/api.placement.ts b/src/api/05_placement/api.placement.ts
index b29f33155..5123b7716 100644
--- a/src/api/05_placement/api.placement.ts
+++ b/src/api/05_placement/api.placement.ts
@@ -97,4 +97,7 @@ export default {
   transferUser: `${transfer}/user`,
   transferUserId: (id: string) => `${transfer}/user/${id}`,
   transferConfirmId: (id: string) => `${transfer}/confirm/${id}`,
+  officerMain: () => `${placement}/officer`,
+  officerDetail: (id:string) => `${placement}/officer/${id}`,
+  officerMainDelete: (id:string) => `${placement}/officer/${id}`,
 };
diff --git a/src/modules/05_placement/components/helpgovernment/governmentDetail.vue b/src/modules/05_placement/components/helpgovernment/governmentDetail.vue
new file mode 100644
index 000000000..08c864fc6
--- /dev/null
+++ b/src/modules/05_placement/components/helpgovernment/governmentDetail.vue
@@ -0,0 +1,293 @@
+<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-5 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 />
+      <q-btn
+        v-if="!roleAdmin"
+        outline
+        color="primary"
+        dense
+        icon-right="arrow_forward"
+        class="q-px-sm"
+        label="ส่งคำร้องไปยัง สกจ."
+        @click=""
+      />
+      <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>
+</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 } 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 personId = route.params.id as string;
+const {
+  date2Thai,
+  dialogMessage,
+  messageError,
+  showLoader,
+  hideLoader,
+  success,
+} = mixin;
+
+const roleAdmin = ref<boolean>(false);
+
+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 firstName = ref<string>("");
+const lastName = ref<string>("");
+const position = ref<string>("");
+const posNo = ref<string>("");
+const positionLevel = ref<string>("");
+const createdAt = ref<string>("");
+const organization = ref<string>("");
+const reason = ref<string>("");
+const status = ref<string>("");
+const date = ref<string>("");
+const salary = ref<string>("");
+const positionTypeOld = ref<string>("");
+const positionLevelOld = 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.officerDetail(personId))
+    .then((res: any) => {
+      const data = res.data.result;
+      fullname.value = `${data.prefix}${data.firstName} ${data.lastName}`,
+      id.value = data.id;
+      prefix.value = data.prefix;
+      firstName.value = data.firstName;
+      lastName.value = data.lastName;
+      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;
+      isActive.value = data.isActive;
+    })
+    .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();
+//       });
+//   };
+onMounted(async () => {
+  await getData();
+});
+</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>
diff --git a/src/modules/05_placement/components/helpgovernment/mainHelp.vue b/src/modules/05_placement/components/helpgovernment/mainHelp.vue
new file mode 100644
index 000000000..a36b8a59d
--- /dev/null
+++ b/src/modules/05_placement/components/helpgovernment/mainHelp.vue
@@ -0,0 +1,688 @@
+<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 http from "@/plugins/http";
+import config from "@/app.config";
+
+import DialogFooter from "@/modules/05_placement/components/PersonalList/DialogFooter.vue";
+import DialogHeader from "@/modules/05_placement/components/PersonalList/DialogHeader.vue";
+
+import type { officerType } from "@/modules/05_placement/interface/response/officer";
+
+const selected = ref([]);
+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",
+  "posNo",
+  "positionLevel",
+  "organization",
+  "reason",
+  "status",
+  "date",
+  "salary",
+  "positionTypeOld",
+  "positionLevelOld",
+  "positionNumberOld",
+  "organizationPositionOld",
+  "createdAt",
+  "btn",
+]);
+const visibleColumns2 = ref<string[]>([
+  "no",
+  "fullname",
+  "position",
+  "positionLevel",
+  "oc",
+  "agency",
+  "status",
+]); //ค้นหา คอลัมน์ คอลัมน์ที่แสดง
+const filterKeyword = ref<string>("");
+const filterKeyword2 = ref<string>("");
+const filterRef = ref<any>(null);
+const resetFilter = () => {
+  filterKeyword.value = "";
+  filterKeyword2.value = "";
+  filterRef.value.focus();
+};
+
+// const nextPage = (id:string) => {
+//   router.push("/retirement/resign/"+id);
+// };
+const rows = ref<officerType[]>([]);
+const rows2 = ref<any>([
+  {
+    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: "createdAt",
+    align: "left",
+    label: "วันเวลาที่ขอย้าย",
+    sortable: true,
+    field: "createdAt",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "positionTypeOld",
+    align: "left",
+    label: "ตำแหน่งในสายงานก่อนหน้า",
+    sortable: true,
+    field: "positionTypeOld",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "positionNumberOld",
+    align: "left",
+    label: "เลขที่ตำเเหน่งก่อนหน้า",
+    sortable: true,
+    field: "positionNumberOld",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "positionLevelOld",
+    align: "left",
+    label: "ระดับก่อนหน้า",
+    sortable: true,
+    field: "positionLevelOld",
+    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: "salary",
+    align: "left",
+    label: "เงินเดือนก่อนหน้า",
+    sortable: true,
+    field: "salary",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "reason",
+    align: "left",
+    label: "เหตุผลที่ย้ายหน่วยงาน",
+    sortable: true,
+    field: "reason",
+    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: "posNo",
+    align: "left",
+    label: "เลขที่ตำเเหน่ง",
+    sortable: true,
+    field: "posNo",
+    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: "organization",
+    align: "left",
+    label: "หน่วยงานที่ขอโอนไป",
+    sortable: true,
+    field: "organization",
+    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",
+  },
+  {
+    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: "oc",
+    align: "left",
+    label: "สังกัด",
+    sortable: true,
+    field: "oc",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "agency",
+    align: "left",
+    label: "หน่วยงานที่ขอโอนไป",
+    sortable: true,
+    field: "agency",
+    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 openDetail = (id:string) => {
+  router.push(`/help-government/detail/${id}`)
+}
+const openModal = () => (modal.value = true);
+const closeModal = () => (modal.value = false);
+
+const getData = async () => {
+  showLoader();
+  await http
+    .get(config.API.officerMain())
+    .then((res: any) => {
+      const data = res.data.result;
+      console.log("data==>", data);
+      rows.value = data.map((item: officerType) => ({
+        id: item.id,
+        fullname:`${item.prefix}${item.firstName} ${item.lastName}`,
+        position: item.position,
+        posNo: item.posNo,
+        positionLevel: item.positionLevel,
+        createdAt: date2Thai(item.createdAt),
+        organization: item.organization,
+        reason: item.reason,
+        status: item.status,
+        date: item.date,
+        salary: item.salary,
+        positionTypeOld: item.positionTypeOld,
+        positionLevelOld: item.positionLevelOld,
+        positionNumberOld: item.positionNumberOld,
+        organizationPositionOld: item.organizationPositionOld,
+        isActive: item.isActive,
+      })
+      );
+    })
+    .catch((e) => {
+      // messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+};
+
+const deleteData = async (id:string) => {
+  await http
+  .delete(config.API.officerMainDelete(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()
+    
+  );
+};
+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="openModal"
+            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 }}
+                </q-td>
+                <q-td key="createdAt" :props="props" @click="openDetail(props.row.id)">
+                  {{ props.row.createdAt }}
+                </q-td>
+                <q-td key="positionTypeOld" :props="props" @click="openDetail(props.row.id)">
+                  {{ props.row.positionTypeOld }}
+                </q-td>
+                <q-td key="positionNumberOld" :props="props" @click="openDetail(props.row.id)">
+                  {{ props.row.positionNumberOld }}
+                </q-td>
+                <q-td key="positionLevelOld" :props="props" @click="openDetail(props.row.id)">
+                  {{ props.row.positionLevelOld }}
+                </q-td>
+                <q-td key="organizationPositionOld" :props="props" @click="openDetail(props.row.id)">
+                  {{ props.row.organizationPositionOld }}
+                </q-td>
+                <q-td key="salary" :props="props" @click="openDetail(props.row.id)">
+                  {{ props.row.salary }}
+                </q-td>
+                <q-td key="reason" :props="props" @click="openDetail(props.row.id)">
+                  {{ props.row.reason }}
+                </q-td>
+                <q-td key="position" :props="props" @click="openDetail(props.row.id)">
+                  {{ props.row.position }}
+                </q-td>
+                <q-td key="posNo" :props="props" @click="openDetail(props.row.id)">
+                  {{ props.row.posNo }}
+                </q-td>
+                <q-td key="positionLevel" :props="props" @click="openDetail(props.row.id)">
+                  {{ props.row.positionLevel }}
+                </q-td>
+                <q-td key="organization" :props="props" @click="openDetail(props.row.id)">
+                  {{ props.row.organization }}
+                </q-td>
+                <q-td key="agency" :props="props" @click="openDetail(props.row.id)">
+                  {{ props.row.agency }}
+                </q-td>
+                <q-td key="status" :props="props" @click="openDetail(props.row.id)">
+                  {{ 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="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="personalId"
+          class="custom-header-table"
+          :visible-columns="visibleColumns2"
+          selection="multiple"
+          v-model:selected="selected"
+        >
+          <template v-slot:header-selection="scope">
+            <q-checkbox
+              keep-color
+              color="primary"
+              dense
+              v-model="scope.selected"
+            />
+          </template>
+          <!-- <template v-slot:body-selection="scope">
+            <q-checkbox
+              keep-color
+              color="primary"
+              dense
+              v-model="scope.selected"
+            />
+          </template> -->
+          <template v-slot:body="props">
+            <q-tr :props="props" class="cursor-pointer">
+              <q-td>
+                <q-checkbox
+                  keep-color
+                  color="primary"
+                  dense
+                  v-model="props.selected"
+                />
+              </q-td>
+              <q-td key="no" :props="props">
+                {{ props.rowIndex + 1 }}
+              </q-td>
+              <q-td key="fullname" :props="props">
+                {{ props.row.fullname }}
+              </q-td>
+              <q-td key="position" :props="props">
+                {{ props.row.position }}
+              </q-td>
+              <q-td key="positionLevel" :props="props">
+                {{ props.row.positionLevel }}
+              </q-td>
+              <q-td key="oc" :props="props">
+                {{ props.row.oc }}
+              </q-td>
+              <q-td key="agency" :props="props">
+                {{ props.row.agency }}
+              </q-td>
+              <q-td key="status" :props="props">
+                {{ props.row.status }}
+              </q-td>
+            </q-tr>
+          </template>
+        </d-table>
+      </q-card-section>
+
+      <q-card-actions align="right" class="bg-white text-teal">
+        <q-btn
+          label="ส่งไปออกคำสั่ง"
+          @click=""
+          :disable="checkSelected"
+          color="public"
+        />
+      </q-card-actions>
+    </q-card>
+  </q-dialog>
+</template>
+<style scoped lang="scss"></style>
diff --git a/src/modules/05_placement/interface/response/officer.ts b/src/modules/05_placement/interface/response/officer.ts
new file mode 100644
index 000000000..64d298641
--- /dev/null
+++ b/src/modules/05_placement/interface/response/officer.ts
@@ -0,0 +1,23 @@
+interface officerType {
+    no:number,
+    id: string,
+    prefix: string,
+    firstName: string,
+    lastName: string,
+    position: string,
+    posNo: string,
+    positionLevel: string,
+    createdAt: Date,
+    organization: string,
+    reason: string,
+    status: string,
+    date: Date,
+    salary: number,
+    positionTypeOld: string,
+    positionLevelOld: string,
+    positionNumberOld: string,
+    organizationPositionOld: string,
+    isActive: true
+}
+
+export type { officerType};
\ No newline at end of file
diff --git a/src/modules/05_placement/router.ts b/src/modules/05_placement/router.ts
index 12cbb254e..216bfdf50 100644
--- a/src/modules/05_placement/router.ts
+++ b/src/modules/05_placement/router.ts
@@ -42,7 +42,8 @@ const receiveMain = () =>
   import("@/modules/05_placement/components/Receive/receiveDetail.vue");
   const ReceiveAdd = () =>
   import("@/modules/05_placement/components/Receive/FormAdd.vue");
-
+const helpgovernment = () => import("@/modules/05_placement/components/helpgovernment/mainHelp.vue")
+const helpgovernmentbyId = () => import("@/modules/05_placement/components/helpgovernment/governmentDetail.vue")
 export default [
   {
     path: "/placement",
@@ -204,4 +205,24 @@ export default [
       Role: "placement",
     },
   },
+  {
+    path: "/help-government",
+    name: "help-government",
+    component: helpgovernment,
+    meta: {
+      Auth: true,
+      Key: [6.6],
+      Role: "placement",
+    },
+  },
+  {
+    path: "/help-government/detail/:id",
+    name: "help-governmentbyId",
+    component: helpgovernmentbyId,
+    meta: {
+      Auth: true,
+      Key: [6.6],
+      Role: "placement",
+    },
+  },
 ];

From 0849b873f67ed6cc2a1f255e4d57944965130e24 Mon Sep 17 00:00:00 2001
From: waruneeta <warunee.auy@gmail.com>
Date: Fri, 11 Aug 2023 15:20:29 +0700
Subject: [PATCH 091/113] =?UTF-8?q?fix=20bug=20=E0=B8=AA=E0=B9=88=E0=B8=87?=
 =?UTF-8?q?=E0=B9=84=E0=B8=9B=E0=B8=AB=E0=B8=99=E0=B9=88=E0=B8=A7=E0=B8=A2?=
 =?UTF-8?q?=E0=B8=87=E0=B8=B2=E0=B8=99=E0=B8=82=E0=B8=AD=E0=B8=87=E0=B8=9A?=
 =?UTF-8?q?=E0=B8=A3=E0=B8=A3=E0=B8=88=E0=B8=B8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/modules/05_placement/components/PersonalList/Table.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/modules/05_placement/components/PersonalList/Table.vue b/src/modules/05_placement/components/PersonalList/Table.vue
index 40c9ee9ec..147b024d7 100644
--- a/src/modules/05_placement/components/PersonalList/Table.vue
+++ b/src/modules/05_placement/components/PersonalList/Table.vue
@@ -256,7 +256,7 @@ const getTable = async () => {
         (e: any) =>
           e.draft == "รอส่งตัว" &&
           e.positionNumber !== null &&
-          e.statusName == " เตรียมบรรจุ"
+          e.statusName == "เตรียมบรรจุ"
       );
       console.log(rowsFilter.value);
     })

From a3ccc67bdd12c3ec5dab90f54c76cab3a0927933 Mon Sep 17 00:00:00 2001
From: waruneeta <warunee.auy@gmail.com>
Date: Fri, 11 Aug 2023 16:19:49 +0700
Subject: [PATCH 092/113] =?UTF-8?q?=E0=B9=81=E0=B8=81=E0=B9=89=E0=B9=84?=
 =?UTF-8?q?=E0=B8=82=20popup=20=E0=B9=81=E0=B8=A5=E0=B8=B0=20fix=20bug=20?=
 =?UTF-8?q?=E0=B8=AD=E0=B8=AD=E0=B8=81=E0=B8=84=E0=B8=B3=E0=B8=AA=E0=B8=B1?=
 =?UTF-8?q?=E0=B9=88=E0=B8=87?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/modules/10_order/components/Main.vue      |  27 +-
 .../10_order/components/step/step01.vue       | 328 ++++-------------
 .../10_order/components/step/step02.vue       | 344 ++++++------------
 .../10_order/components/step/step03.vue       |   2 +-
 .../10_order/components/step/step04.vue       |  59 ++-
 src/modules/10_order/router.ts                |  20 +-
 6 files changed, 242 insertions(+), 538 deletions(-)

diff --git a/src/modules/10_order/components/Main.vue b/src/modules/10_order/components/Main.vue
index f5ed2ae12..c6b61430d 100644
--- a/src/modules/10_order/components/Main.vue
+++ b/src/modules/10_order/components/Main.vue
@@ -125,7 +125,7 @@ import config from "@/app.config";
 
 const $q = useQuasar(); //ใช้ noti quasar
 const mixin = useCounterMixin();
-const { showLoader, hideLoader, messageError, date2Thai, dateText, success } =
+const { showLoader, hideLoader, messageError, date2Thai, dateText, success, dialogMessage } =
   mixin;
 const DataStore = useOrderPlacementDataStore();
 
@@ -314,20 +314,17 @@ const redirectToPage = (id?: string, status?: string) => {
 };
 
 const clickDelete = (id: string) => {
-  $q.dialog({
-    title: "ยืนยันการลบข้อมูล",
-    message: "ต้องการลบข้อมูลนี้ใช่หรือไม่?",
-    cancel: {
-      flat: true,
-      color: "negative",
-    },
-    persistent: true,
-  })
-    .onOk(async () => {
-      await deleteData(id);
-    })
-    .onCancel(() => { })
-    .onDismiss(() => { });
+  dialogMessage(
+    $q,
+    "ยืนยันการลบข้อมูล",
+    "ต้องการลบข้อมูลนี้ใช่หรือไม่?",
+    "mdi-delete",
+    "ตกลง",
+    "red",
+    () => deleteData(id),
+    undefined
+  );
+
 };
 
 const deleteData = async (id: string) => {
diff --git a/src/modules/10_order/components/step/step01.vue b/src/modules/10_order/components/step/step01.vue
index 4f63bc851..9ba307395 100644
--- a/src/modules/10_order/components/step/step01.vue
+++ b/src/modules/10_order/components/step/step01.vue
@@ -3,24 +3,10 @@
     <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"
-          />
+          <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'
           ) " -->
@@ -29,73 +15,36 @@
         <div class="col-xs-12 col-md-6">
           <!-- :readonly="!edit"
                 :borderless="!edit" -->
-          <q-input
-            :class="getClass(true)"
-            outlined
-            dense
-            lazy-rules
-            v-model="nameOrder"
-            :rules="[(val) => !!val || `${'กรุณากรอกคำสั่งเรื่อง'}`]"
-            :label="`${'คำสั่งเรื่อง'}`"
-            @update:modelValue="clickEditRow"
-            hide-bottom-space
-          />
+          <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"
-            />
+            <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
-          >
+          <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"
-            >
+            <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 :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"
-          >
+          <datepicker menu-class-name="modalfix" v-model="dateCommand" :locale="'th'" autoApply borderless
+            :enableTimePicker="false" week-start="0">
             <template #year="{ year }">
               {{ year + 543 }}
             </template>
@@ -103,24 +52,12 @@
               {{ 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 || `${'กรุณาเลือกวันที่มีผลออกคำสั่ง'}`,
-                ]"
-              >
+              <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 name="event" class="cursor-pointer" style="color: var(--q-primary)">
                   </q-icon>
                 </template>
               </q-input>
@@ -129,24 +66,10 @@
         </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"
-          />
+          <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'
           ) " -->
@@ -154,55 +77,25 @@
         <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
-          />
+          <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
-          />
+          <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="examRound"
-            :rules="[(val: string) => !!val || `${'กรุณาเลือกรอบการสอบ'}`]"
-            hide-bottom-space
-            :label="`${'รอบการสอบ'}`"
-            @update:modelValue="clickEditRow"
-            emit-value
-            map-options
-            option-label="examRoundName"
-            :options="examRoundOption"
-            option-value="examRoundValue"
-            use-input
-            input-debounce="0"
-          />
+          <selector :class="getClass(true)" outlined dense lazy-rules v-model="examRound"
+            :rules="[(val: string) => !!val || `${'กรุณาเลือกรอบการสอบ'}`]" hide-bottom-space :label="`${'รอบการสอบ'}`"
+            @update:modelValue="clickEditRow" emit-value map-options option-label="examRoundName"
+            :options="examRoundOption" option-value="examRoundValue" use-input input-debounce="0" />
           <!-- @filter="(inputValue:string,
           doneFn:Function) => filterSelector(inputValue, doneFn,'testOption'
           ) " -->
@@ -216,39 +109,18 @@
           filterSelector(inputValue, doneFn,'positionOption' ) " -->
         </div>
         <div class="col-xs-12 col-md-6">
-          <selector
-            :class="getClass(true)"
-            outlined
-            dense
-            lazy-rules
-            v-model="register"
-            :rules="[(val: string) => !!val || `${'กรุณาเลือกมติ กก. ครั้งที่ (เรื่อง รับสมัครสอบฯ)'}`]"
-            hide-bottom-space
-            :label="`${'มติ กก. ครั้งที่ (เรื่อง รับสมัครสอบฯ)'}`"
-            @update:modelValue="clickEditRow"
-            emit-value
-            map-options
-            option-label="name"
-            :options="registerOption"
-            option-value="id"
-            use-input
-            input-debounce="0"
-          />
+          <selector :class="getClass(true)" outlined dense lazy-rules v-model="register"
+            :rules="[(val: string) => !!val || `${'กรุณาเลือกมติ กก. ครั้งที่ (เรื่อง รับสมัครสอบฯ)'}`]" hide-bottom-space
+            :label="`${'มติ กก. ครั้งที่ (เรื่อง รับสมัครสอบฯ)'}`" @update:modelValue="clickEditRow" emit-value
+            map-options option-label="name" :options="registerOption" option-value="id" use-input input-debounce="0" />
         </div>
         <!-- @filter="(inputValue:string,
         doneFn:Function) => filterSelector(inputValue, doneFn,'registerOption'
         ) " -->
 
         <div class="col-xs-12 col-md-6">
-          <datepicker
-            menu-class-name="modalfix"
-            v-model="dateRegister"
-            :locale="'th'"
-            autoApply
-            borderless
-            :enableTimePicker="false"
-            week-start="0"
-          >
+          <datepicker menu-class-name="modalfix" v-model="dateRegister" :locale="'th'" autoApply borderless
+            :enableTimePicker="false" week-start="0">
             <template #year="{ year }">
               {{ year + 543 }}
             </template>
@@ -256,25 +128,13 @@
               {{ parseInt(value + 543) }}
             </template>
             <template #trigger>
-              <q-input
-                outlined
-                dense
-                class="full-width datepicker"
-                :model-value="
-                  dateRegister != null ? date2Thai(dateRegister) : null
-                "
-                :label="`${'ลงวันที่ (เรื่อง รับสมัครสอบฯ)'}`"
-                :rules="[
-                  (val) =>
-                    !!val || `${'กรุณาเลือกลงวันที่ (เรื่อง รับสมัครสอบฯ)'}`,
-                ]"
-              >
+              <q-input outlined dense class="full-width datepicker" :model-value="dateRegister != null ? date2Thai(dateRegister) : null
+                " :label="`${'ลงวันที่ (เรื่อง รับสมัครสอบฯ)'}`" :rules="[
+    (val) =>
+      !!val || `${'กรุณาเลือกลงวันที่ (เรื่อง รับสมัครสอบฯ)'}`,
+  ]">
                 <template v-slot:prepend>
-                  <q-icon
-                    name="event"
-                    class="cursor-pointer"
-                    style="color: var(--q-primary)"
-                  >
+                  <q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)">
                   </q-icon>
                 </template>
               </q-input>
@@ -282,38 +142,18 @@
           </datepicker>
         </div>
         <div class="col-xs-12 col-md-6">
-          <selector
-            :class="getClass(true)"
-            outlined
-            dense
-            lazy-rules
-            v-model="announce"
+          <selector :class="getClass(true)" outlined dense lazy-rules v-model="announce"
             :rules="[(val: string) => !!val || `${'กรุณาเลือกมติ กก. ครั้งที่ (เรื่อง ผลการสอบแข่งขัน)'}`]"
-            hide-bottom-space
-            :label="`${'มติ กก. ครั้งที่ (เรื่อง ผลการสอบแข่งขัน)'}`"
-            @update:modelValue="clickEditRow"
-            emit-value
-            map-options
-            option-label="name"
-            :options="announceOption"
-            option-value="id"
-            use-input
-            input-debounce="0"
-          />
+            hide-bottom-space :label="`${'มติ กก. ครั้งที่ (เรื่อง ผลการสอบแข่งขัน)'}`" @update:modelValue="clickEditRow"
+            emit-value map-options option-label="name" :options="announceOption" option-value="id" use-input
+            input-debounce="0" />
           <!-- @filter="(inputValue:string,
           doneFn:Function) => filterSelector(inputValue, doneFn,'announceOption'
           ) "  -->
         </div>
         <div class="col-xs-12 col-md-6">
-          <datepicker
-            menu-class-name="modalfix"
-            v-model="dateAnnounce"
-            :locale="'th'"
-            autoApply
-            borderless
-            :enableTimePicker="false"
-            week-start="0"
-          >
+          <datepicker menu-class-name="modalfix" v-model="dateAnnounce" :locale="'th'" autoApply borderless
+            :enableTimePicker="false" week-start="0">
             <template #year="{ year }">
               {{ year + 543 }}
             </template>
@@ -321,25 +161,13 @@
               {{ parseInt(value + 543) }}
             </template>
             <template #trigger>
-              <q-input
-                outlined
-                dense
-                class="full-width datepicker"
-                :model-value="
-                  dateAnnounce != null ? date2Thai(dateAnnounce) : null
-                "
-                :label="`${'ลงวันที่ (เรื่อง ผลการสอบแข่งขัน)'}`"
-                :rules="[
-                  (val) =>
-                    !!val || `${'กรุณาเลือกลงวันที่ (เรื่อง ผลการสอบแข่งขัน)'}`,
-                ]"
-              >
+              <q-input outlined dense class="full-width datepicker" :model-value="dateAnnounce != null ? date2Thai(dateAnnounce) : null
+                " :label="`${'ลงวันที่ (เรื่อง ผลการสอบแข่งขัน)'}`" :rules="[
+    (val) =>
+      !!val || `${'กรุณาเลือกลงวันที่ (เรื่อง ผลการสอบแข่งขัน)'}`,
+  ]">
                 <template v-slot:prepend>
-                  <q-icon
-                    name="event"
-                    class="cursor-pointer"
-                    style="color: var(--q-primary)"
-                  >
+                  <q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)">
                   </q-icon>
                 </template>
               </q-input>
@@ -376,7 +204,7 @@ import http from "@/plugins/http";
 import config from "@/app.config";
 
 const mixin = useCounterMixin();
-const { date2Thai, messageError, showLoader, hideLoader, success } = mixin;
+const { date2Thai, messageError, showLoader, hideLoader, success, dialogMessage } = mixin;
 const $q = useQuasar(); //ใช้ noti quasar
 const route = useRoute();
 
@@ -570,7 +398,7 @@ const fecthExamRoundOption = async () => {
       examRoundOption.value = res.data.result;
       console.log(examRoundOption.value);
     })
-    .catch((e) => {});
+    .catch((e) => { });
 };
 const submit = async () => {
   const formdata = {
@@ -591,23 +419,23 @@ const submit = async () => {
   };
   await myForm.value!.validate().then((result: boolean) => {
     if (result) {
-      $q.dialog({
-        title: "ยืนยันการบันทึกข้อมูล",
-        message: "ต้องการบันทึกข้อมูลนี้ใช่หรือไม่?",
-        cancel: {
-          flat: true,
-          color: "negative",
+      dialogMessage(
+        $q,
+        "ยืนยันการบันทึกข้อมูล",
+        "ต้องการบันทึกข้อมูลนี้ใช่หรือไม่?",
+        "info",
+        "ตกลง",
+        "public",
+        () => {
+          if (!orderId) {
+            createListOrder(formdata);
+          } else {
+            let orderIdString = orderId.toString();
+            updateOrder(formdata, orderIdString);
+          }
         },
-        persistent: true,
-      }).onOk(async () => {
-        showLoader();
-        if (!orderId) {
-          createListOrder(formdata);
-        } else {
-          let orderIdString = orderId.toString();
-          updateOrder(formdata, orderIdString);
-        }
-      });
+        undefined
+      );
     }
   });
 };
diff --git a/src/modules/10_order/components/step/step02.vue b/src/modules/10_order/components/step/step02.vue
index a64b88f85..2c83f6be2 100644
--- a/src/modules/10_order/components/step/step02.vue
+++ b/src/modules/10_order/components/step/step02.vue
@@ -9,51 +9,20 @@ div
         <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"
-          >
+          <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"
-              />
+              <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"
-          />
+          <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"
-      >
+      <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">
@@ -67,51 +36,23 @@ div
         </template>
         <template v-slot:body="props">
           <q-tr :props="props" class="cursor-pointer">
-            <q-td
-              v-for="col in props.cols"
-              :key="col.name"
-              :props="props"
-              @click="selectModal(props.row)"
-              >{{ col.name == "no" ? props.rowIndex + 1 : col.value }}</q-td
-            >
+            <q-td v-for="col in props.cols" :key="col.name" :props="props" @click="selectModal(props.row)">{{ col.name ==
+              "no" ? props.rowIndex + 1 : col.value }}</q-td>
             <q-td auto-width>
-              <q-btn
-                dense
-                size="12px"
-                flat
-                round
-                :color="props.rowIndex + 1 == 1 ? 'grey' : 'green'"
-                :disable="props.rowIndex + 1 == 1"
-                @click="upDown(props)"
-                icon="mdi-arrow-up-bold"
-              >
+              <q-btn dense size="12px" flat round :color="props.rowIndex + 1 == 1 ? 'grey' : 'green'"
+                :disable="props.rowIndex + 1 == 1" @click="upDown(props)" icon="mdi-arrow-up-bold">
                 <!-- <q-tooltip>เลื่อนลำดับขึ้น</q-tooltip> -->
               </q-btn>
             </q-td>
             <q-td auto-width>
-              <q-btn
-                dense
-                size="12px"
-                flat
-                round
-                :color="rows.length == props.rowIndex + 1 ? 'grey' : 'red'"
-                :disable="rows.length == props.rowIndex + 1"
-                @click="upDown(props, false)"
-                icon="mdi-arrow-down-bold"
-              >
+              <q-btn dense size="12px" flat round :color="rows.length == props.rowIndex + 1 ? 'grey' : 'red'"
+                :disable="rows.length == props.rowIndex + 1" @click="upDown(props, false)" icon="mdi-arrow-down-bold">
                 <!-- <q-tooltip>เลื่อนลำดับลง</q-tooltip> -->
               </q-btn>
             </q-td>
             <q-td auto-width>
-              <q-btn
-                dense
-                size="12px"
-                flat
-                round
-                color="red"
-                @click="dialogDeleteData(props.row.personalId)"
-                icon="mdi-delete"
-              >
+              <q-btn dense size="12px" flat round color="red" @click="dialogDeleteData(props.row.personalId)"
+                icon="mdi-delete">
                 <q-tooltip>ลบข้อมูล</q-tooltip>
               </q-btn>
             </q-td>
@@ -121,24 +62,9 @@ div
     </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 dense outline color="primary" icon="chevron_left" @click="previous" class="q-pr-md" label="กรอกรายละเอียด">
       </q-btn>
-      <q-btn
-        dense
-        unelevated
-        label="บันทึก"
-        color="public"
-        @click="save"
-        class="q-px-md"
-        ><!-- icon="mdi-content-save-outline"
+      <q-btn dense unelevated label="บันทึก" color="public" @click="save" class="q-px-md"><!-- icon="mdi-content-save-outline"
         <q-tooltip>บันทึก</q-tooltip> -->
       </q-btn>
       <!-- <q-btn dense flat round color="primary" icon="chevron_right" @click="next">
@@ -157,43 +83,22 @@ div
             <div class="col-xs-12">
               <div class="col-12 row q-py-sm items-center q-col-gutter-sm">
                 <div class="col-xs-6 col-sm-6 col-md-6">
-                  <q-input
-                    outlined
-                    dense
-                    lazy-rules
-                    v-model="modalData.salaryAmount"
-                    :rules="[(val) => !!val || `${'กรุณากรอกเงินเดือน'}`]"
-                    :label="`${'เงินเดือน'}`"
-                    type="number"
-                    hide-bottom-space
-                  />
+                  <q-input outlined dense lazy-rules v-model="modalData.salaryAmount"
+                    :rules="[(val) => !!val || `${'กรุณากรอกเงินเดือน'}`]" :label="`${'เงินเดือน'}`" 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="modalData.positionSalaryAmount"
-                    :label="`${'เงินประจำตำแหน่ง'}`"
-                    type="number"
-                    hide-bottom-space
-                  />
+                  <q-input outlined dense lazy-rules v-model="modalData.positionSalaryAmount"
+                    :label="`${'เงินประจำตำแหน่ง'}`" type="number" hide-bottom-space />
                   <!-- :rules="[
                       (val) => !!val || `${'กรุณากรอกเงินประจำตำแหน่ง'}`,
                     ]" -->
                 </div>
 
                 <div class="col-xs-6 col-sm-6 col-md-6">
-                  <q-input
-                    outlined
-                    dense
-                    lazy-rules
-                    v-model="modalData.mouthSalaryAmount"
-                    :label="`${'เงินค่าตอบแทนรายเดือน'}`"
-                    type="number"
-                    hide-bottom-space
-                  />
+                  <q-input outlined dense lazy-rules v-model="modalData.mouthSalaryAmount"
+                    :label="`${'เงินค่าตอบแทนรายเดือน'}`" type="number" hide-bottom-space />
                   <!-- :rules="[
                       (val) => !!val || `${'กรุณากรอกเงินค่าตอบแทนรายเดือน'}`,
                     ]" -->
@@ -204,14 +109,7 @@ div
         </q-card-section>
         <q-separator />
         <q-card-actions align="right">
-          <q-btn
-            dense
-            unelevated
-            label="บันทึก"
-            color="public"
-            @click="saveModal"
-            class="q-px-md"
-            ><!-- icon="mdi-content-save-outline"
+          <q-btn dense unelevated label="บันทึก" color="public" @click="saveModal" class="q-px-md"><!-- icon="mdi-content-save-outline"
         <q-tooltip>บันทึก</q-tooltip> -->
           </q-btn>
         </q-card-actions>
@@ -225,24 +123,12 @@ div
         <DialogHeader tittle="รายชื่อในการออกคำสั่ง" :close="modalAddChange" />
         <q-separator />
         <q-card-section class="q-pa-sm bg-grey-1">
-          <d-table
-            :rows="rows2"
-            :columns="columns"
-            :visible-columns="visibleColumns"
-            :filter="filter"
-            row-key="name"
-            selection="multiple"
-            v-model:selected="selected"
-          >
+          <d-table :rows="rows2" :columns="columns" :visible-columns="visibleColumns" :filter="filter" row-key="name"
+            selection="multiple" v-model:selected="selected">
             <template v-slot:header="props">
               <q-tr :props="props">
                 <q-th auto-width>
-                  <q-checkbox
-                    keep-color
-                    color="primary"
-                    dense
-                    v-model="props.selected"
-                  />
+                  <q-checkbox keep-color color="primary" dense v-model="props.selected" />
                 </q-th>
                 <q-th v-for="col in props.cols" :key="col.name" :props="props">
                   <span class="text-weight-medium">{{ col.label }}</span>
@@ -252,33 +138,17 @@ div
             <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-checkbox keep-color color="primary" dense v-model="props.selected" />
                 </q-td>
-                <q-td
-                  v-for="col in props.cols"
-                  :key="col.name"
-                  :props="props"
-                  >{{ col.name == "no" ? props.rowIndex + 1 : col.value }}</q-td
-                >
+                <q-td v-for="col in props.cols" :key="col.name" :props="props">{{ col.name == "no" ? props.rowIndex + 1 :
+                  col.value }}</q-td>
               </q-tr>
             </template>
           </d-table>
         </q-card-section>
         <q-separator />
         <q-card-actions align="right">
-          <q-btn
-            dense
-            unelevated
-            label="บันทึก"
-            color="public"
-            @click="saveModalAdd"
-            class="q-px-md"
-            ><!-- icon="mdi-content-save-outline"
+          <q-btn dense unelevated label="บันทึก" color="public" @click="saveModalAdd" class="q-px-md"><!-- icon="mdi-content-save-outline"
         <q-tooltip>บันทึก</q-tooltip> -->
           </q-btn>
         </q-card-actions>
@@ -372,7 +242,6 @@ const columns = ref<QTableProps["columns"]>([
 const rows = ref<ResponseData[]>([]);
 const rows2 = ref<ResponseData[]>([]);
 const selected = ref<ResponseData[]>([]);
-const orderId = ref<string>(route.params.orderid.toString());
 
 onMounted(async () => {
   await conditionData();
@@ -382,8 +251,8 @@ const conditionData = async () => {
   const id = route.params.orderid
     ? route.params.orderid.toString()
     : localStorage.getItem("orderId")
-    ? localStorage.getItem("orderId")
-    : null;
+      ? localStorage.getItem("orderId")
+      : null;
   if (id !== null) {
     await getData(id);
   }
@@ -441,7 +310,7 @@ const dialogDeleteData = async (id: string) => {
     $q,
     "ยืนยันการลบข้อมูล",
     "ต้องการลบข้อมูลนี้ใช่หรือไม่?",
-    "mdi-help-circle-outline",
+    "mdi-delete",
     "ตกลง",
     "red",
     () => deleteData(id),
@@ -573,36 +442,44 @@ const putSalary = async (salary: any) => {
     positionSalaryAmount: Number(salary.positionSalaryAmount),
     monthSalaryAmount: Number(salary.mouthSalaryAmount),
   };
-  $q.dialog({
-    title: "ยืนยันการบันทึกข้อมูล",
-    message: "ต้องการยืนยันการบันทึกข้อมูลนี้ใช่หรือไม่?",
-    cancel: {
-      flat: true,
-      color: "negative",
+  dialogMessage(
+    $q,
+    "ยืนยันการบันทึกข้อมูล",
+    "ต้องการบันทึกข้อมูลนี้ใช่หรือไม่?",
+    "info",
+    "ตกลง",
+    "public",
+    async () => {
+      await http
+        .put(config.API.salaryOrder(personalId.value), modalData.value)
+        .then((res: any) => {
+          console.log(res);
+          success($q, "บันทึกข้อมูลสำเร็จ");
+        })
+        .catch((e) => {
+          console.log(e);
+          messageError($q, e);
+        })
+        .finally(async () => {
+          await conditionData();
+          modal.value = false;
+        });
     },
-    persistent: true,
-  }).onOk(async () => {
-    await http
-      .put(config.API.salaryOrder(personalId.value), modalData.value)
-      .then((res: any) => {
-        console.log(res);
-        success($q, "บันทึกข้อมูลสำเร็จ");
-      })
-      .catch((e) => {
-        console.log(e);
-        messageError($q, e);
-      })
-      .finally(async () => {
-        await conditionData();
-        modal.value = false;
-      });
-  });
+    undefined
+  );
 };
 
 const modalAddChange = async () => {
   modalAdd.value = !modalAdd.value;
   if (modalAdd.value == true) {
-    await fetchaddlist(orderId.value);
+    const id = route.params.orderid
+      ? route.params.orderid.toString()
+      : localStorage.getItem("orderId")
+        ? localStorage.getItem("orderId")
+        : null;
+    if (id !== null) {
+      await fetchaddlist(id);
+    }
   } else await conditionData();
 };
 const fetchaddlist = async (id: string) => {
@@ -637,37 +514,46 @@ const saveModalAdd = () => {
   if (myFormAdd.value !== null) {
     myFormAdd.value.validate().then(async (result: boolean) => {
       if (result && selected.value.length !== 0) {
-        $q.dialog({
-          title: "ยืนยันการเพิ่มรายชื่อออกคำสั่ง",
-          message: "ต้องการยืนยันการเพิ่มรายชื่อออกคำสั่งนี้ใช่หรือไม่?",
-          cancel: {
-            flat: true,
-            color: "negative",
+        dialogMessage(
+          $q,
+          "ยืนยันการเพิ่มรายชื่อออกคำสั่ง",
+          "ต้องการยืนยันการเพิ่มรายชื่อออกคำสั่งนี้ใช่หรือไม่?",
+          "info",
+          "ตกลง",
+          "public",
+          () => {
+            let data = [];
+            data.push(...selected.value.map((e: any) => e.refRecordId));
+            // console.log(data);
+            addlist(data);
           },
-          persistent: true,
-        }).onOk(async () => {
-          let data = [];
-          data.push(...selected.value.map((e: any) => e.refRecordId));
-          // console.log(data);
-          addlist(data);
-        });
+          undefined
+        );
+
       }
     });
   }
 };
 const addlist = async (data: Object) => {
-  await http
-    .post(config.API.personsOrder(orderId.value), data)
-    .then(() => {
-      success($q, "บันทึกสำเร็จ");
-    })
-    .catch((e: any) => {
-      console.log(e);
-      messageError($q, e);
-    })
-    .finally(() => {
-      modalAddChange();
-    });
+  const id = route.params.orderid
+    ? route.params.orderid.toString()
+    : localStorage.getItem("orderId")
+      ? localStorage.getItem("orderId")
+      : null;
+  if (id !== null) {
+    await http
+      .post(config.API.personsOrder(id), data)
+      .then(() => {
+        success($q, "บันทึกสำเร็จ");
+      })
+      .catch((e: any) => {
+        console.log(e);
+        messageError($q, e);
+      })
+      .finally(() => {
+        modalAddChange();
+      });
+  }
 };
 
 const click = (e: any) => {
@@ -677,18 +563,20 @@ const click = (e: any) => {
 
 const save = () => {
   if (selected.value.length > 0) {
-    $q.dialog({
-      title: "ยืนยันการบันทึกข้อมูล",
-      message: "ต้องการยืนยันการบันทึกข้อมูลนี้ใช่หรือไม่?",
-      cancel: {
-        flat: true,
-        color: "negative",
+    dialogMessage(
+      $q,
+      "ยืนยันการบันทึกข้อมูล",
+      "ต้องการยืนยันการบันทึกข้อมูลนี้ใช่หรือไม่?",
+      "info",
+      "ตกลง",
+      "public",
+      () => {
+        success($q, "บันทึกข้อมูลสำเร็จ");
+        next();
       },
-      persistent: true,
-    }).onOk(async () => {
-      success($q, "บันทึกข้อมูลสำเร็จ");
-      next();
-    });
+      undefined
+    );
+
   } else {
     dialogMessage(
       $q,
@@ -704,8 +592,6 @@ const save = () => {
   }
 };
 
-const selectData = (row: any) => {};
-
 const refresh = async () => {
   // await conditionData();
   modalAddChange();
@@ -725,4 +611,4 @@ const getClass = (val: boolean) => {
   };
 };
 </script>
-<style lang="scss"></style>
+<style lang="scss"></style>
\ No newline at end of file
diff --git a/src/modules/10_order/components/step/step03.vue b/src/modules/10_order/components/step/step03.vue
index c71389d9e..d95c3de90 100644
--- a/src/modules/10_order/components/step/step03.vue
+++ b/src/modules/10_order/components/step/step03.vue
@@ -632,7 +632,7 @@ const clickDelete = (id: string) => {
     $q,
     "ยืนยันการลบข้อมูล",
     "ต้องการลบข้อมูลนี้ใช่หรือไม่?",
-    "mdi-help-circle-outline",
+    "mdi-delete",
     "ตกลง",
     "red",
     () => deleteData(id),
diff --git a/src/modules/10_order/components/step/step04.vue b/src/modules/10_order/components/step/step04.vue
index f6945d914..99e613d43 100644
--- a/src/modules/10_order/components/step/step04.vue
+++ b/src/modules/10_order/components/step/step04.vue
@@ -6,8 +6,8 @@
           <div class="space">
             <div @click="setTab('main')" :class="getClass(tab == 'main')">
               <div class="q-pr-sm">คำสั่ง</div>
-              <q-btn v-show="OrderPDF == ''" size="12px" flat dense icon="mdi-download"
-                :disable="tab !== 'main'" :color="tab !== 'main' ? 'grey' : 'add'">
+              <q-btn v-show="OrderPDF == ''" 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">
@@ -25,8 +25,8 @@
             </div>
             <div @click="setTab('second')" :class="getClass(tab == 'second')">
               <div class="q-pr-sm">เอกสารแนบท้าย</div>
-              <q-btn v-show="TailerPDF == ''" size="12px" flat dense
-                :color="tab !== 'second' ? 'grey' : 'add'" icon="mdi-download" :disable="tab !== 'second'">
+              <q-btn v-show="TailerPDF == ''" 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">
@@ -252,7 +252,7 @@ import http from "@/plugins/http";
 import config from "@/app.config";
 
 const mixin = useCounterMixin();
-const { date2Thai, messageError, showLoader, hideLoader } = mixin;
+const { date2Thai, messageError, showLoader, hideLoader, dialogMessage } = mixin;
 const route = useRoute();
 const $q = useQuasar();
 
@@ -383,24 +383,23 @@ const save = () => {
     myForm.value!.validate().then((success: Boolean) => {
       if (success) {
         // yay, models are correct
-        $q.dialog({
-          title: "ยืนยันการบันทึกข้อมูล",
-          message: "ต้องการบันทึกข้อมูลนี้ใช่หรือไม่?",
-          cancel: {
-            flat: true,
-            color: "negative",
-          },
-          persistent: true,
-        })
-          .onOk(async () => {
+        dialogMessage(
+          $q,
+          "ยืนยันการบันทึกข้อมูล",
+          "ต้องการยืนยันการบันทึกข้อมูลนี้ใช่หรือไม่?",
+          "info",
+          "ตกลง",
+          "public",
+          async () => {
             await putOrderData();
             await postfileOrder();
             await postfileTailer();
             await fetchAttachment(orderId.value);
             await fecthstatusOrder(orderId.value);
-          })
-          .onCancel(() => { })
-          .onDismiss(() => { });
+          },
+          undefined
+        );
+
       }
     });
   }
@@ -432,16 +431,14 @@ const postfileTailer = async () => {
   await http.post(config.API.attachmentFileId(orderId.value), formData);
 };
 const clickExecute = async (id: string) => {
-  $q.dialog({
-    title: "ยืนยันการออกคำสั่ง",
-    message: "ต้องการยืนยันการออกคำสั่งข้อมูลนี้ใช่หรือไม่?",
-    cancel: {
-      flat: true,
-      color: "negative",
-    },
-    persistent: true,
-  })
-    .onOk(async () => {
+  dialogMessage(
+    $q,
+    "ยืนยันการออกคำสั่ง",
+    "ต้องการยืนยันการออกคำสั่งนี้ใช่หรือไม่?",
+    "info",
+    "ตกลง",
+    "public",
+    async () => {
       await http
         .put(config.API.executeOrder(id))
         .then((res) => {
@@ -450,9 +447,9 @@ const clickExecute = async (id: string) => {
         .catch((e) => {
           messageError($q, e);
         });
-    })
-    .onCancel(() => { })
-    .onDismiss(() => { });
+    },
+    undefined
+  );
 };
 
 const validateForm = () => {
diff --git a/src/modules/10_order/router.ts b/src/modules/10_order/router.ts
index a059df203..b42e3161d 100644
--- a/src/modules/10_order/router.ts
+++ b/src/modules/10_order/router.ts
@@ -1,12 +1,6 @@
-/**
- * Router บรรจุ แต่งตั้ง ย้าย โอน (Placement)
- */
-
-const AddPage = () =>
-  import("@/modules/10_order/components/Add.vue");
+// const AddPage = () => import("@/modules/10_order/components/Add.vue");
 const MainOrder = () => import("@/modules/10_order/components/Main.vue");
-const DetailPage = () =>
-  import("@/modules/10_order/components/Detail.vue");
+const DetailPage = () => import("@/modules/10_order/components/Detail.vue");
 
 export default [
   {
@@ -16,16 +10,17 @@ export default [
     meta: {
       Auth: true,
       Key: [10],
-      Role: "placement",
+      Role: "order",
     },
   },
   {
     path: "/order/add",
     name: "OrderAdd",
-    component: AddPage,
+    component: DetailPage,
     meta: {
       Auth: true,
-      Role: "placement",
+      Key: [10],
+      Role: "order",
     },
   },
   {
@@ -34,7 +29,8 @@ export default [
     component: DetailPage,
     meta: {
       Auth: true,
-      Role: "placement",
+      Key: [10],
+      Role: "order",
     },
   },
 ];

From 97aa9fd3de81dab4d340df972e21444d3d335a1a Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Fri, 11 Aug 2023 16:54:42 +0700
Subject: [PATCH 093/113] =?UTF-8?q?api=20=E0=B8=97=E0=B8=94=E0=B8=A5?=
 =?UTF-8?q?=E0=B8=AD=E0=B8=87=E0=B8=87=E0=B8=B2=E0=B8=99?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/05_placement/api.probation.ts         |   34 +-
 src/api/index.ts                              |    3 +-
 .../probation/FormEvaluation/FormEvaluate.vue |  173 ++-
 .../FormEvaluation/FormEvaluateScore.vue      |  305 +++-
 .../probation/FormEvaluation/FormReport.vue   |  379 ++++-
 .../FormEvaluation/FormSaveResult.vue         |  181 ++-
 .../FormEvaluation/FormSaveResultAdd.vue      | 1306 +++++++++++++++++
 .../probation/FormEvaluation/Header.vue       |   41 +-
 .../probation/FormEvaluation/Template1.vue    |  143 +-
 .../probation/FormEvaluation/Template2.vue    |    4 +-
 .../FormEvaluation/Template2Format2.vue       |   28 +-
 .../components/probation/MainDetail.vue       |    2 +-
 src/modules/05_placement/router.ts            |   15 +-
 13 files changed, 2422 insertions(+), 192 deletions(-)
 create mode 100644 src/modules/05_placement/components/probation/FormEvaluation/FormSaveResultAdd.vue

diff --git a/src/api/05_placement/api.probation.ts b/src/api/05_placement/api.probation.ts
index 1d3f01bfb..d4460f43d 100644
--- a/src/api/05_placement/api.probation.ts
+++ b/src/api/05_placement/api.probation.ts
@@ -3,6 +3,8 @@ const dataOptions = `${env.API_PROBATION_URI}/data-options`;
 const personal = `${env.API_PROBATION_URI}/personal`;
 const calculate = `${env.API_PROBATION_URI}/calculate`;
 const finish = `${env.API_PROBATION_URI}/assign`;
+const evaluate = `${env.API_PROBATION_URI}`;
+
 
 export default {
   competencyOptions: (personalId: string) =>
@@ -23,7 +25,35 @@ export default {
   saveFinish: (personalId: string) =>
     `${finish}/probation-assign?personal_id=${personalId}`,
   personalAdd: () => `${personal}/add`,
-  probationGetAssignList: (personalId:string) => 
-  `${finish}/probation-assign-list?personal_id=${personalId}`
+  probationGetAssignList: (personalId: string) =>
+    `${finish}/probation-assign-list?personal_id=${personalId}`,
   // clearPosition: (personalId:string) => `${placement}/position/clear/${personalId}`
+
+  // บันทึกผล
+  formevaluate: (id: string) => `${evaluate}/evaluate-record?assign_id=${id}`,
+  formevaluateround: (id: string, no: string) => `${evaluate}/evaluate-record?assign_id=${id}&evaluate_no=${no}`,
+  formevaluateRecord: (id: string) => `${evaluate}/evaluate-record/create?assign_id=${id}`,
+  createformevaluate: (id: string) => `${evaluate}/evaluate-record?id=${id}`,
+
+  //แบบประเมินผล (ผู้บังคับบัญชา)
+  evaluateCreate: (id: string) => `${evaluate}/evaluate/create?assign_id=${id}`,
+  evaluatecommader: (id: string, no: string) => `${evaluate}/evaluate?assign_id=${id}&evaluate_no=${no}`,
+  createformCommader: (id: string) => `${evaluate}/evaluate?id=${id}`,
+
+  //แบบประเมินผล (คณะกรรมการ)
+  evaluateChairman: (id: string) => `${evaluate}/evaluate-chairman/create?assign_id=${id}`,
+  evaluateRoundChairman: (id: string, no: string) => `${evaluate}/evaluate-chairman?assign_id=${id}&evaluate_no=${no}`,
+  createformChairman: (id: string) => `${evaluate}/evaluate-chairman?id=${id}`,
+
+  //แบบรายงาน
+  evaluateReportcreate: (id: string) => `${evaluate}/evaluate-result/create?assign_id=${id}`,
+  evaluateReport: (id: string) => `${evaluate}/evaluate-result?assign_id=${id}`,
+  createformReport: (id: string) => `${evaluate}/evaluate-result?id=${id}`,
+
+
+
+
+
+
+
 };
diff --git a/src/api/index.ts b/src/api/index.ts
index 4b6fabe6d..244b63653 100644
--- a/src/api/index.ts
+++ b/src/api/index.ts
@@ -26,7 +26,8 @@ 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://ehr.joolsoft.com/v1",
+    API_PROBATION_URI: "http://192.168.1.151:7776/v1",
   },
   test: {
     API_URI: "http://localhost:5010/api/v1",
diff --git a/src/modules/05_placement/components/probation/FormEvaluation/FormEvaluate.vue b/src/modules/05_placement/components/probation/FormEvaluation/FormEvaluate.vue
index 5afcc2e7a..c9e40bc45 100644
--- a/src/modules/05_placement/components/probation/FormEvaluation/FormEvaluate.vue
+++ b/src/modules/05_placement/components/probation/FormEvaluation/FormEvaluate.vue
@@ -1,12 +1,40 @@
 <script setup lang="ts">
-import { ref, defineAsyncComponent } from "vue";
+import { ref, defineAsyncComponent, onMounted } from "vue";
 import { useQuasar } from "quasar";
 import { useProbationDataStore } from "@/modules/05_placement/store";
 import { useCounterMixin } from "@/stores/mixin";
+import { useRoute } from "vue-router";
+import http from "@/plugins/http";
+import config from "@/app.config";
 
 const $q = useQuasar();
 const probationStore = useProbationDataStore();
 const { ratingColors } = probationStore;
+const mixin = useCounterMixin();
+const {
+  date2Thai,
+  notifyError,
+  messageError,
+  showLoader,
+  hideLoader,
+  success,
+  dateToISO,
+} = mixin;
+const route = useRoute();
+const assignId = ref<string>(route.params.form.toString());
+
+const person = ref<any>([]);
+const assign = ref<any>([]);
+const evaluate_no = ref<string>("");
+const start_date = ref<Date>(new Date());
+const date_finish = ref<Date>(new Date());
+const commander = ref<any>([]);
+const round = ref<any>();
+const status = ref<boolean>(true);
+
+const props = defineProps({
+  tab: String,
+});
 
 const list2_1 = [
   { id: "1", label: "ให้บริการประชาชนหรือผู้รับบริการด้วยอัธยาศัยดี" },
@@ -53,14 +81,104 @@ const list2_3 = [
     label: "ปฏิบัติบัติหน้าที่อย่างตรงไปตรงมาโดยยึกหลักจรรยาบรรณวิชาชีพ",
   },
 ];
+onMounted(async () => {
+  fecthAssign(assignId.value);
+  if (props.tab !== undefined) {
+    round.value = props.tab.charAt(4);
+    fetchEvaluate(assignId.value, round.value);
+  }
+  // console.log(round.value);
+  // console.log(assignId.value);
+});
+const fecthAssign = async (id: string) => {
+  showLoader();
+  await http
+    .get(config.API.evaluateCreate(id))
+    .then((res: any) => {
+      // console.log(res);
+      person.value = res.data.data.person;
+      assign.value = res.data.data.assign;
+      commander.value = res.data.data.commander;
+      option.value.push(commander.value);
+      Autherise.value = commander.value.name;
+      evaluate_no.value = res.data.data.evaluate_no;
+      start_date.value = res.data.data.start_date;
+      date_finish.value = res.data.data.end_date;
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+};
+const fetchEvaluate = async (id: string, round: string) => {
+  // showLoader();
+  await http
+    .get(config.API.evaluatecommader(id, round))
+    .then((res: any) => {
+      // console.log(res);
+      let data = res.data.data.evaluate;
+      console.log(data);
+      start_date.value = data.date_start;
+      date_finish.value = data.date_finish;
+      knowledge_level.value = data.knowledge_level;
+      skill_level.value = data.skill_level;
+      competency_level.value = data.competency_level;
+      learn_level.value = data.learn_level;
+      apply_level.value = data.apply_level;
+      success_level.value = data.success_level;
+      achievement_other.value.text = data.achievement_other_desc;
+      achievement_other.value.level = data.achievement_other_level;
+      conduct_level.value[0] = data.conduct1_level;
+      conduct_level.value[1] = data.conduct2_level;
+      conduct_level.value[2] = data.conduct3_level;
+      conduct_level.value[3] = data.conduct4_level;
+      moral_level.value[0] = data.moral1_level;
+      moral_level.value[1] = data.moral2_level;
+      moral_level.value[2] = data.moral3_level;
+      discipline_level.value[0] = data.discipline1_level;
+      discipline_level.value[1] = data.discipline2_level;
+      discipline_level.value[2] = data.discipline3_level;
+      discipline_level.value[3] = data.discipline4_level;
+      discipline_level.value[4] = data.discipline5_level;
+      behavio_orther.value.text = data.behavior_other_desc;
+      behavio_orther.value.level = data.behavior_other_level;
+      behavio_strength_desc.value = data.behavior_strength_desc;
+      behavior_improve_desc.value = data.behavior_improve_desc;
+      orientation.value = data.orientation.toString();
+      self_learning.value = data.self_learning.toString();
+      training_seminar.value = data.training_seminar.toString();
+      other_training.value = data.other_training.toString();
+      if (
+        data.achievement_other_desc !== "" &&
+        data.achievement_other_level !== null
+      ) {
+        etc.value = true;
+      }
+      if (
+        data.behavior_other_desc !== "" &&
+        data.behavior_other_level !== null
+      ) {
+        etc2.value = true;
+      }
+      status.value = false;
+    })
+    .catch((e) => {
+      messageError($q, e);
+      console.log(e);
+    })
+    .finally(() => {
+      // hideLoader();
+    });
+};
 
-const mixin = useCounterMixin();
-const { date2Thai, notifyError } = mixin;
-const dateToday = ref<Date>(new Date("10-10-2023"));
-const dateEnd = ref<Date>(new Date("12-10-2023"));
-const period = ref<number>(1);
+// const dateToday = ref<Date>(new Date("10-10-2023"));
+// const dateEnd = ref<Date>(new Date("12-10-2023"));
+// const period = ref<number>(1);
 const Autherise = ref<any>(null);
 const dateAutherise = ref<any>(new Date());
+const option = ref<any>([]);
 
 // part 1
 const knowledge_level = ref<number>(0);
@@ -80,7 +198,7 @@ const behavio_orther = ref<any>({ text: "", level: 0 });
 const behavio_strength_desc = ref<string>("");
 const behavior_improve_desc = ref<string>("");
 // part 3
-const orientation = ref<num>(null);
+const orientation = ref<any>(null);
 const self_learning = ref<any>(null);
 const training_seminar = ref<any>(null);
 const other_training = ref<any>(null);
@@ -136,6 +254,9 @@ const savaForm = () => {
 };
 const putformData = () => {
   const data = {
+    evaluate_no: evaluate_no.value,
+    start_date: start_date.value,
+    date_finish: date_finish.value,
     knowledge_level: knowledge_level.value,
     skill_level: skill_level.value,
     competency_level: competency_level.value,
@@ -155,13 +276,14 @@ const putformData = () => {
     discipline3_level: discipline_level.value[2],
     discipline4_level: discipline_level.value[3],
     discipline5_level: discipline_level.value[4],
-    behavio_orther: behavio_orther.value,
-    behavio_strength_desc: behavio_strength_desc.value,
+    behavior_orther: behavio_orther.value,
+    behavior_strength_desc: behavio_strength_desc.value,
     behavior_improve_desc: behavior_improve_desc.value,
     orientation: Number(orientation.value),
     self_learning: Number(self_learning.value),
     training_seminar: Number(training_seminar.value),
     other_training: Number(other_training.value),
+    commander_dated: dateToISO(dateAutherise.value),
   };
   $q.dialog({
     title: "ยืนยันการบันทึกข้อมูล",
@@ -174,6 +296,15 @@ const putformData = () => {
   })
     .onOk(async () => {
       console.log("บันทึกข้อมูล", data);
+      await http
+        .post(config.API.createformCommader(assignId.value), data)
+        .then((res: any) => {
+          console.log(res);
+          success($q, "บันทึกสำเร็จ");
+        })
+        .catch((e: any) => {
+          messageError($q, e);
+        });
     })
     .onCancel(() => {})
     .onDismiss(() => {});
@@ -182,21 +313,28 @@ const putformData = () => {
 
 <template>
   <div class="row col-12 q-gutter-lg no-margin">
+    <div class="toptitle text-dark col-12 row items-center">
+      <div>แบบประเมินผล (ผู้บังคับบัญชา)</div>
+    </div>
     <div class="col-12 row">
       <div class="col-12 text-top0 row items-center">
         <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
         วันเริ่มทดลองปฎิบัติหน้าที่ราชการ ตั้งแต่วันที่
-        <span class="text-black q-px-sm">{{ date2Thai(dateToday) }}</span>
+        <span class="text-black q-px-sm">{{
+          date2Thai(assign.date_start)
+        }}</span>
         ถึงวันที
-        <span class="text-black q-px-sm">{{ date2Thai(dateEnd) }}</span>
+        <span class="text-black q-px-sm">{{
+          date2Thai(assign.date_finish)
+        }}</span>
       </div>
       <div class="col-12 text-top0 row items-center">
         <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
-        <span class="text-black q-px-sm">{{ "ครั้งที่" + period }}</span>
+        <span class="text-black q-px-sm">{{ "ครั้งที่" + round }}</span>
         ระหว่างวันที่
-        <span class="text-black q-px-sm">{{ date2Thai(dateToday) }}</span>
+        <span class="text-black q-px-sm">{{ date2Thai(start_date) }}</span>
         ถึงวันที่
-        <span class="text-black q-px-sm">{{ date2Thai(dateEnd) }}</span>
+        <span class="text-black q-px-sm">{{ date2Thai(date_finish) }}</span>
       </div>
       <div class="col-12 q-pt-md">
         <q-separator size="3px" color="grey-2" />
@@ -891,9 +1029,7 @@ const putformData = () => {
     <!-- Footer -->
     <div class="row col-12 q-gutter-lg no-margin">
       <div class="col-12 row">
-        <div class="col-12 text-top2 row items-center">
-          ผู้บังคับบัญชา
-        </div>
+        <div class="col-12 text-top2 row items-center">ผู้บังคับบัญชา</div>
         <div class="col-12 row q-col-gutter-md">
           <q-select
             class="col-xs-12 col-sm-8"
@@ -902,6 +1038,7 @@ const putformData = () => {
             outlined
             :options="option"
             label="ผู้บังคับบัญชา"
+            disable
           />
           <div class="col-xs-12 col-sm-4">
             <datepicker
@@ -948,7 +1085,7 @@ const putformData = () => {
     <!-- <Footer /> -->
     <q-toolbar class="text-primary">
       <q-space />
-      <q-btn label="บันทึก" color="secondary" @click="savaForm" />
+      <q-btn label="บันทึก" color="secondary" @click="savaForm" v-if="status" />
     </q-toolbar>
   </div>
 </template>
diff --git a/src/modules/05_placement/components/probation/FormEvaluation/FormEvaluateScore.vue b/src/modules/05_placement/components/probation/FormEvaluation/FormEvaluateScore.vue
index 4410a1b04..f3bc20646 100644
--- a/src/modules/05_placement/components/probation/FormEvaluation/FormEvaluateScore.vue
+++ b/src/modules/05_placement/components/probation/FormEvaluation/FormEvaluateScore.vue
@@ -1,12 +1,133 @@
 <script setup lang="ts">
-import { ref, defineAsyncComponent, computed } from "vue";
+import { ref, defineAsyncComponent, computed, onMounted } from "vue";
 import { useQuasar } from "quasar";
 import { useProbationDataStore } from "@/modules/05_placement/store";
 import { useCounterMixin } from "@/stores/mixin";
+import { useRoute } from "vue-router";
+import http from "@/plugins/http";
+import config from "@/app.config";
 
 const $q = useQuasar();
 const probationStore = useProbationDataStore();
 const { ratingColors } = probationStore;
+const mixin = useCounterMixin();
+const {
+  date2Thai,
+  notifyError,
+  messageError,
+  showLoader,
+  hideLoader,
+  dateToISO,
+  success,
+} = mixin;
+const route = useRoute();
+const assignId = ref<string>(route.params.form.toString());
+
+// const person = ref<any>([]);
+const assign = ref<any>([]);
+const evaluate_no = ref<string>("");
+const start_date = ref<Date>(new Date());
+const date_finish = ref<Date>(new Date());
+const status = ref<boolean>(true);
+const chairman = ref<any>([]);
+const commander = ref<any>([]);
+const mentors = ref<any>([{ name: "" }, { name: "" }]);
+
+const round = ref<any>();
+
+const props = defineProps({
+  tab: String,
+});
+onMounted(() => {
+  console.log(props);
+  console.log(assignId.value);
+  fecthAssign(assignId.value);
+  if (props.tab !== undefined) {
+    round.value = props.tab.charAt(4);
+    fetchEvaluate(assignId.value, round.value);
+  }
+});
+const fecthAssign = async (id: string) => {
+  showLoader();
+  await http
+    .get(config.API.evaluateChairman(id))
+    .then((res: any) => {
+      console.log(res);
+      assign.value = res.data.data.assign;
+      evaluate_no.value = res.data.data.evaluate_no;
+      start_date.value = res.data.data.start_date;
+      date_finish.value = res.data.data.end_date;
+      chairman.value = res.data.data.chairman;
+      commander.value = res.data.data.commander;
+      mentors.value = res.data.data.mentors;
+      console.log(mentors.value[0].name);
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+};
+const fetchEvaluate = async (id: string, round: string) => {
+  showLoader();
+  await http
+    .get(config.API.evaluateRoundChairman(id, round))
+    .then((res: any) => {
+      let data = res.data.data.evaluate;
+      console.log(data);
+      start_date.value = data.date_start;
+      date_finish.value = data.date_finish;
+      learn_level.value = data.knowledge_level;
+      apply_level.value = data.apply_level;
+      success_level.value = data.success_level;
+      achievement_other.value.text = data.achievement_other_desc;
+      achievement_other.value.level = data.achievement_other_level;
+      conduct_level.value[0] = data.conduct1_level;
+      conduct_level.value[1] = data.conduct2_level;
+      conduct_level.value[2] = data.conduct3_level;
+      conduct_level.value[3] = data.conduct4_level;
+      moral_level.value[0] = data.moral1_level;
+      moral_level.value[1] = data.moral2_level;
+      moral_level.value[2] = data.moral3_level;
+      discipline_level.value[0] = data.discipline1_level;
+      discipline_level.value[1] = data.discipline2_level;
+      discipline_level.value[2] = data.discipline3_level;
+      discipline_level.value[3] = data.discipline4_level;
+      discipline_level.value[4] = data.discipline5_level;
+      behavio_orther.value.text = data.behavior_other_desc;
+      behavio_orther.value.level = data.behavior_other_level;
+      orientation.value = data.develop_orientation_score;
+      self_learning.value = data.develop_self_learning_score;
+      training_seminar.value = data.develop_training_seminar_score;
+      other_training.value = data.develop_other_training_score;
+      orientation_percent.value = data.develop_orientation_percent;
+      self_learning_percent.value = data.develop_self_learning_percent;
+      training_seminar_percent.value = data.develop_training_seminar_percent;
+      other_training_percent.value = data.develop_other_training_percent;
+
+      if (
+        data.achievement_other_desc !== "" &&
+        data.achievement_other_level !== null
+      ) {
+        etc.value = true;
+      }
+      if (
+        data.behavior_other_desc !== "" &&
+        data.behavior_other_level !== null
+      ) {
+        etc2.value = true;
+      }
+
+      status.value = false;
+    })
+    .catch((e) => {
+      console.log(e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+};
 
 const list2_1 = [
   { id: "1", label: "ให้บริการประชาชนหรือผู้รับบริการด้วยอัธยาศัยดี" },
@@ -54,8 +175,6 @@ const list2_3 = [
   },
 ];
 
-const mixin = useCounterMixin();
-const { date2Thai, notifyError } = mixin;
 const dateToday = ref<Date>(new Date("10-10-2023"));
 const dateEnd = ref<Date>(new Date("12-10-2023"));
 const period = ref<number>(1);
@@ -73,14 +192,23 @@ const etc2 = ref<any>(false); // checkBox 2.4
 const behavio_orther = ref<any>({ text: "", level: 0 });
 
 // part 3
-const orientation = ref<number>(null);
-const self_learning = ref<number>(null);
-const training_seminar = ref<number>(null);
-const other_training = ref<number>(null);
+const orientation = ref<number>(0);
+const self_learning = ref<number>(0);
+const training_seminar = ref<number>(0);
+const other_training = ref<number>(0);
+const orientation_percent = ref<number>(0);
+const self_learning_percent = ref<number>(0);
+const training_seminar_percent = ref<number>(0);
+const other_training_percent = ref<number>(0);
+const develop_result = ref<any>();
+const develop_result_option = ref<any>([
+  { name: "ไม่ผ่านการทดลองงาน", value: 0 },
+  { name: "ผ่านการทดลองงาน", value: 1 },
+]);
 // footer
 const Autherise = ref<any>(null);
 const dateAutherise = ref<any>(new Date());
-const option = ref<any>(["นาย ภูริณัฐ บุญขาว", "นาย พงศกร วรารักษ์"]);
+// const option = ref<any>([]);
 
 // score
 const score1 = computed(() => {
@@ -98,6 +226,22 @@ const score1 = computed(() => {
   }
   return learn_level.value + apply_level.value + success_level.value;
 });
+const achievement_score_total: any = computed(() => {
+  if (
+    etc.value === true &&
+    achievement_other.value.text !== undefined &&
+    achievement_other.value.level !== undefined
+  ) {
+    return 20;
+  }
+  return 15;
+});
+const achievement_result: any = computed(() => {
+  if (percent_score1.value > 60) {
+    return 1;
+  }
+  return 0;
+});
 const score2 = computed(() => {
   let sum_conduct = conduct_level.value.reduce(
     (sum: number, level: number) => sum + level,
@@ -121,7 +265,22 @@ const score2 = computed(() => {
     );
   } else return sum_conduct + sum_moral + sum_discipline;
 });
-const percent_score1: number = computed(() => {
+const behavior_score_total: any = computed(() => {
+  if (
+    etc2.value === true &&
+    behavio_orther.value.text !== undefined &&
+    behavio_orther.value.level !== undefined
+  ) {
+    return 65;
+  } else return 60;
+});
+const behavior_result: any = computed(() => {
+  if (percent_score2.value > 60) {
+    return 1;
+  }
+  return 0;
+});
+const percent_score1: any = computed(() => {
   let num = 0;
   if (etc.value === true) {
     num = 20;
@@ -129,7 +288,7 @@ const percent_score1: number = computed(() => {
   let percent1 = (score1.value / num) * 100;
   return percent1.toFixed(2);
 });
-const percent_score2: number = computed(() => {
+const percent_score2: any = computed(() => {
   let num = 0;
   if (etc2.value === true) {
     num = 65;
@@ -149,6 +308,14 @@ const score4 = computed(() => {
     Number(other_training.value)
   );
 });
+const score5 = computed(() => {
+  return (
+    Number(orientation_percent.value) +
+    Number(self_learning_percent.value) +
+    Number(training_seminar_percent.value) +
+    Number(other_training_percent.value)
+  );
+});
 
 const savaForm = () => {
   let hasError = false;
@@ -185,7 +352,10 @@ const savaForm = () => {
 };
 const putformData = () => {
   const data = {
-    learn_level: learn_level.value,
+    evaluate_no: evaluate_no.value,
+    start_date: start_date.value,
+    date_finish: date_finish.value,
+    knowledge_level: learn_level.value,
     apply_level: apply_level.value,
     success_level: success_level.value,
     achievement_other: achievement_other.value,
@@ -201,13 +371,27 @@ const putformData = () => {
     discipline3_level: discipline_level.value[2],
     discipline4_level: discipline_level.value[3],
     discipline5_level: discipline_level.value[4],
-    behavio_orther: behavio_orther.value,
-    orientation: Number(orientation.value),
-    self_learning: Number(self_learning.value),
-    training_seminar: Number(training_seminar.value),
-    other_training: Number(other_training.value),
-    total_experiment: Number(score1.value),
-    total_behavior: Number(score2.value),
+    behavior_orther: behavio_orther.value,
+    develop_orientation_score: Number(orientation.value),
+    develop_self_learning_score: Number(self_learning.value),
+    develop_training_seminar_score: Number(training_seminar.value),
+    develop_other_training_score: Number(other_training.value),
+    develop_orientation_percent: Number(orientation_percent.value),
+    develop_self_learning_percent: Number(self_learning_percent.value),
+    develop_training_seminar_percent: Number(training_seminar_percent.value),
+    develop_other_training_percent: Number(other_training_percent.value),
+    achievement_score: Number(score1.value),
+    achievement_percent: Number(percent_score1.value),
+    achievement_score_total: Number(achievement_score_total.value),
+    achievement_result: Number(achievement_result.value),
+    behavior_score: Number(score2.value),
+    behavior_percent: Number(percent_score2.value),
+    behavior_score_total: Number(behavior_score_total.value),
+    behavior_result: Number(behavior_result.value),
+    sum_score: Number(score1.value) + Number(score2.value),
+    sum_percent: Number(percent_score1.value) + Number(percent_score2.value),
+    chairman_dated: dateToISO(dateAutherise.value),
+    develop_result: develop_result.value,
   };
   $q.dialog({
     title: "ยืนยันการบันทึกข้อมูล",
@@ -220,6 +404,19 @@ const putformData = () => {
   })
     .onOk(async () => {
       console.log("บันทึกข้อมูล", data);
+      await http
+        .post(config.API.createformChairman(assignId.value), data)
+        .then((res: any) => {
+          console.log(res);
+          success($q, "บันทึกสำเร็จ");
+        })
+        .catch((e: any) => {
+          console.log(e);
+          messageError($q, e);
+        })
+        .finally(() => {
+          fetchEvaluate(assignId.value, round.value);
+        });
     })
     .onCancel(() => {})
     .onDismiss(() => {});
@@ -228,21 +425,28 @@ const putformData = () => {
 
 <template>
   <div class="row col-12 q-gutter-lg no-margin">
+    <div class="toptitle text-dark col-12 row items-center">
+      <div>แบบประเมินผล (คณะกรรมการ)</div>
+    </div>
     <div class="col-12 row">
       <div class="col-12 text-top0 row items-center">
         <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
         วันเริ่มทดลองปฎิบัติหน้าที่ราชการ ตั้งแต่วันที่
-        <span class="text-black q-px-sm">{{ date2Thai(dateToday) }}</span>
+        <span class="text-black q-px-sm">{{
+          date2Thai(assign.date_start)
+        }}</span>
         ถึงวันที
-        <span class="text-black q-px-sm">{{ date2Thai(dateEnd) }}</span>
+        <span class="text-black q-px-sm">{{
+          date2Thai(assign.date_finish)
+        }}</span>
       </div>
       <div class="col-12 text-top0 row items-center">
         <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
-        <span class="text-black q-px-sm">{{ "ครั้งที่" + period }}</span>
+        <span class="text-black q-px-sm">{{ "ครั้งที่" + round }}</span>
         ระหว่างวันที่
-        <span class="text-black q-px-sm">{{ date2Thai(dateToday) }}</span>
+        <span class="text-black q-px-sm">{{ date2Thai(start_date) }}</span>
         ถึงวันที่
-        <span class="text-black q-px-sm">{{ date2Thai(dateEnd) }}</span>
+        <span class="text-black q-px-sm">{{ date2Thai(date_finish) }}</span>
       </div>
       <div class="col-12 q-pt-md">
         <q-separator size="3px" color="grey-2" />
@@ -829,7 +1033,7 @@ const putformData = () => {
               <q-input dense type="number" v-model="orientation" />
             </div>
             <div class="col">
-              <q-input dense type="number" v-model="text" />
+              <q-input dense type="number" v-model="orientation_percent" />
             </div>
           </div>
           <q-separator class="q-my-xs" />
@@ -839,7 +1043,7 @@ const putformData = () => {
               <q-input dense type="number" v-model="self_learning" />
             </div>
             <div class="col">
-              <q-input dense type="number" v-model="text" />
+              <q-input dense type="number" v-model="self_learning_percent" />
             </div>
           </div>
           <q-separator class="q-my-xs" />
@@ -849,7 +1053,7 @@ const putformData = () => {
               <q-input dense type="number" v-model="training_seminar" />
             </div>
             <div class="col">
-              <q-input dense type="number" v-model="text" />
+              <q-input dense type="number" v-model="training_seminar_percent" />
             </div>
           </div>
           <q-separator class="q-my-xs" />
@@ -861,7 +1065,7 @@ const putformData = () => {
               <q-input dense type="number" v-model="other_training" />
             </div>
             <div class="col">
-              <q-input dense type="number" v-model="text" />
+              <q-input dense type="number" v-model="other_training_percent" />
             </div>
           </div>
           <!-- <q-list dense>
@@ -969,13 +1173,36 @@ const putformData = () => {
             <div class="row q-gutter-md">
               <div class="col-8"><q-item-label> ผลคะแนนรวม</q-item-label></div>
               <div class="col">{{ score4 }}</div>
-              <div class="col">ร้อยละ</div>
+              <div class="col">{{ score5 }}</div>
             </div>
           </div>
         </q-card>
       </div>
     </div>
 
+    <div class="row col-12 q-gutter-lg no-margin">
+      <div class="col-12 row justify-center">
+        <div class="col-12 text-top0 items-center">
+          <!-- <q-avatar class="bg-grey-2 q-mr-sm" size="28px">5</q-avatar> -->
+          สรุปผล การประเมินผลทดลองปฎิบัติหน้าที่ราชการ
+        </div>
+        <div class="col-12">
+          <q-select
+            class="col-xs-12"
+            dense
+            v-model="develop_result"
+            outlined
+            :options="develop_result_option"
+            option-label="name"
+            option-value="value"
+            label="เลือกสรุปผล การประเมินผลทดลองปฎิบัติหน้าที่ราชการ"
+            map-options
+            emit-value
+          />
+        </div>
+      </div>
+    </div>
+
     <!-- Footer -->
     <!-- <Footer /> -->
     <div class="row col-12 q-gutter-lg no-margin">
@@ -987,10 +1214,10 @@ const putformData = () => {
           <q-select
             class="col-xs-12 col-sm-8"
             dense
-            v-model="Autherise"
+            v-model="commander.name"
             outlined
-            :options="option"
             label="ผู้บังคับบัญชา"
+            disable
           />
           <div class="col-xs-12 col-sm-4">
             <datepicker
@@ -1036,10 +1263,10 @@ const putformData = () => {
           <q-select
             class="col-xs-12 col-sm-8"
             dense
-            v-model="Autherise"
+            v-model="mentors[0].name"
             outlined
-            :options="option"
             label="ผู้บังคับบัญชา"
+            disable
           />
           <div class="col-xs-12 col-sm-4">
             <datepicker
@@ -1085,10 +1312,10 @@ const putformData = () => {
           <q-select
             class="col-xs-12 col-sm-8"
             dense
-            v-model="Autherise"
+            v-model="mentors[1].name"
             outlined
-            :options="option"
             label="ผู้บังคับบัญชา"
+            disable
           />
           <div class="col-xs-12 col-sm-4">
             <datepicker
@@ -1135,17 +1362,15 @@ const putformData = () => {
 
     <div class="row col-12 q-gutter-lg no-margin">
       <div class="col-12 row">
-        <div class="col-12 text-top2 row items-center">
-          คณะกรรมการ
-        </div>
+        <div class="col-12 text-top2 row items-center">คณะกรรมการ</div>
         <div class="col-12 row q-col-gutter-md">
           <q-select
             class="col-xs-12 col-sm-8"
             dense
-            v-model="Autherise"
+            v-model="chairman.name"
             outlined
-            :options="option"
             label="คณะกรรมการ"
+            disable
           />
           <div class="col-xs-12 col-sm-4">
             <datepicker
@@ -1192,7 +1417,7 @@ const putformData = () => {
 
     <q-toolbar class="text-primary">
       <q-space />
-      <q-btn label="บันทึก" color="secondary" @click="savaForm" />
+      <q-btn label="บันทึก" color="secondary" @click="savaForm" v-if="status" />
     </q-toolbar>
   </div>
 </template>
diff --git a/src/modules/05_placement/components/probation/FormEvaluation/FormReport.vue b/src/modules/05_placement/components/probation/FormEvaluation/FormReport.vue
index 88123d2de..7fa0612c2 100644
--- a/src/modules/05_placement/components/probation/FormEvaluation/FormReport.vue
+++ b/src/modules/05_placement/components/probation/FormEvaluation/FormReport.vue
@@ -1,31 +1,104 @@
 <script setup lang="ts">
-import { ref } from "vue";
+import { ref, onMounted } from "vue";
 import { QForm, useQuasar } from "quasar";
 import { useCounterMixin } from "@/stores/mixin";
+import { useRoute, useRouter } from "vue-router";
+import http from "@/plugins/http";
+import config from "@/app.config";
 
 const $q = useQuasar();
 const myForm = ref<QForm>();
 const edit = ref<boolean>(false);
 const mixin = useCounterMixin();
-const { date2Thai, notifyError } = mixin;
-const develop = ref<number>();
-const result = ref<number>();
+const {
+  date2Thai,
+  notifyError,
+  messageError,
+  success,
+  showLoader,
+  hideLoader,
+} = mixin;
+const route = useRoute();
+const router = useRouter();
+const assignId = ref<string>(route.params.form.toString());
 
-// part new
+const assign = ref<any>([]);
+const mentors = ref<any>([]);
+const commander = ref<any>([]);
+const evaluate = ref<any>([]);
+
+onMounted(() => {
+  fecthAssign(assignId.value);
+  fecthResult(assignId.value);
+});
+const fecthAssign = async (id: string) => {
+  showLoader();
+  await http
+    .get(config.API.evaluateReportcreate(id))
+    .then((res) => {
+      console.log(res);
+      assign.value = res.data.data.assign;
+      mentors.value = res.data.data.mentors;
+
+      director_id.value = res.data.data.commander.name;
+      director_id2.value = mentors.value[0].name;
+      director_id3.value = mentors.value[1].name;
+
+      commander.value.push(res.data.data.commander);
+      optionDirector.value = mentors.value;
+    })
+    .catch((e) => {
+      console.log(e);
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+};
 const date_start = ref<Date>(new Date("10-10-2023"));
 const date_finish = ref<Date>();
+const develop = ref<number>();
+const result = ref<number>();
 const reson = ref<string>("");
+const chairman_dated = ref<string>("");
+const director1_dated = ref<string>("");
+const director2_dated = ref<string>("");
+const fecthResult = async (id: string) => {
+  await http
+    .get(config.API.evaluateReport(id))
+    .then((res: any) => {
+      let data = res.data.data.evaluate;
+      console.log(data);
+      date_start.value = data.date_start;
+      date_finish.value = data.date_finish;
+      develop.value = Number(data.develop_complete);
+      result.value = Number(data.pass_result);
+      reson.value = data.reson;
+      chairman_dated.value = data.chairman_dated;
+      director1_dated.value = data.director1_dated;
+      director2_dated.value = data.director2_dated;
+    })
+    .catch((e) => {
+      console.log(e);
+    });
+};
 
-const options = [{ value: 1, label: "พัฒนาครบ 3 ส่วน" }, { value: 0, label: "พัฒนาไม่ครบ 3 ส่วน" }];
-const optionsResult = [{ value: 1, label: "ไม่ต่ำกว่ามาตรฐานที่กำหนด เห็นควรให้รับราชการต่อ" }, { value: 0, label: "ต่ำกว่ามาตรฐานที่กำหนด เห็นควรให้ออกจากราชการ" }];
+// part new
+
+const options = [
+  { value: 1, label: "พัฒนาครบ 3 ส่วน" },
+  { value: 0, label: "พัฒนาไม่ครบ 3 ส่วน" },
+];
+const optionsResult = [
+  { value: 1, label: "ไม่ต่ำกว่ามาตรฐานที่กำหนด เห็นควรให้รับราชการต่อ" },
+  { value: 0, label: "ต่ำกว่ามาตรฐานที่กำหนด เห็นควรให้ออกจากราชการ" },
+];
 
 const director_id = ref<any>(null);
-const director_dated = ref<any>();
+
 const director_id2 = ref<any>(null);
-const director_dated2 = ref<any>();
 const director_id3 = ref<any>(null);
-const director_dated3 = ref<any>();
-const optionDirector = ref<any>(["นาย ภูริณัฐ บุญขาว", "นาย พงศกร วรารักษ์"]);
+const optionDirector = ref<any>([]);
 
 const savaForm = async () => {
   await myForm.value!.validate().then((result: boolean) => {
@@ -41,40 +114,56 @@ const savaForm = async () => {
       })
         .onOk(async () => {
           postData();
-
         })
-        .onCancel(() => { })
-        .onDismiss(() => { });
+        .onCancel(() => {})
+        .onDismiss(() => {});
     }
   });
-
 };
 
 const postData = async () => {
   const data = await {
-    date_start: date_start.value,
+    start_date: date_start.value,
     date_finish: date_finish.value,
-    director_id: director_id.value,
-    director_dated: director_dated.value,
-    director_id2: director_id2.value,
-    director_dated2: director_dated2.value,
-    director_id3: director_id3.value,
-    director_dated3: director_dated3.value,
-  }
+    develop_complete: develop.value,
+    pass_result: result.value,
+    reson: reson.value,
+    chairman_dated: chairman_dated.value,
+    director1_dated: director1_dated.value,
+    director2_dated: director2_dated.value,
+  };
 
-  console.log("postData===>", data)
+  console.log("postData===>", data);
+  await http
+    .post(config.API.createformReport(assignId.value), data)
+    .then(() => {
+      success($q, "บันทึกสำเร็จ");
+    })
+    .catch((e: any) => {
+      console.log(e);
+      messageError($q, e);
+    });
 };
 </script>
 
 <template>
   <div class="row col-12 q-mr-md">
     <q-form ref="myForm">
-
+      <div class="toptitle text-dark col-12 row items-center">
+        <div>แบบรายงานการประเมินฯ</div>
+      </div>
       <div class="row col-12">
         <div class="col-12 row q-col-gutter-md">
           <div class="col-xs-12 col-sm-6">
-            <datepicker menu-class-name="modalfix" v-model="date_start" :locale="'th'" autoApply borderless
-              :enableTimePicker="false" week-start="0">
+            <datepicker
+              menu-class-name="modalfix"
+              v-model="date_start"
+              :locale="'th'"
+              autoApply
+              borderless
+              :enableTimePicker="false"
+              week-start="0"
+            >
               <template #year="{ year }">
                 {{ year + 543 }}
               </template>
@@ -82,12 +171,22 @@ const postData = async () => {
                 {{ parseInt(value + 543) }}
               </template>
               <template #trigger>
-                <q-input outlined dense class="full-width datepicker" :model-value="date_start != null ? date2Thai(date_start) : null
-                  " :label="`${'ระหว่างวันที่'}`" :rules="[
-    (val) => !!val || `${'กรุณาเลือกวันที่'}`,
-  ]">
+                <q-input
+                  outlined
+                  dense
+                  class="full-width datepicker"
+                  :model-value="
+                    date_start != null ? date2Thai(date_start) : null
+                  "
+                  :label="`${'ระหว่างวันที่'}`"
+                  :rules="[(val) => !!val || `${'กรุณาเลือกวันที่'}`]"
+                >
                   <template v-slot:prepend>
-                    <q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)">
+                    <q-icon
+                      name="event"
+                      class="cursor-pointer"
+                      style="color: var(--q-primary)"
+                    >
                     </q-icon>
                   </template>
                 </q-input>
@@ -95,8 +194,15 @@ const postData = async () => {
             </datepicker>
           </div>
           <div class="col-xs-12 col-sm-6">
-            <datepicker menu-class-name="modalfix" v-model="date_finish" :locale="'th'" autoApply borderless
-              :enableTimePicker="false" week-start="0">
+            <datepicker
+              menu-class-name="modalfix"
+              v-model="date_finish"
+              :locale="'th'"
+              autoApply
+              borderless
+              :enableTimePicker="false"
+              week-start="0"
+            >
               <template #year="{ year }">
                 {{ year + 543 }}
               </template>
@@ -104,12 +210,22 @@ const postData = async () => {
                 {{ parseInt(value + 543) }}
               </template>
               <template #trigger>
-                <q-input outlined dense class="full-width datepicker" :model-value="date_finish != null ? date2Thai(date_finish) : null
-                  " :label="`${'ถึงวันที่'}`" :rules="[
-    (val) => !!val || `${'กรุณาเลือกวันที่'}`,
-  ]">
+                <q-input
+                  outlined
+                  dense
+                  class="full-width datepicker"
+                  :model-value="
+                    date_finish != null ? date2Thai(date_finish) : null
+                  "
+                  :label="`${'ถึงวันที่'}`"
+                  :rules="[(val) => !!val || `${'กรุณาเลือกวันที่'}`]"
+                >
                   <template v-slot:prepend>
-                    <q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)">
+                    <q-icon
+                      name="event"
+                      class="cursor-pointer"
+                      style="color: var(--q-primary)"
+                    >
                     </q-icon>
                   </template>
                 </q-input>
@@ -121,24 +237,62 @@ const postData = async () => {
 
       <div class="col-12 row q-mt-xs">
         <div class="col-xs-12 col-sm-6">
-          <q-select :rules="[(val) => !!val || 'กรุณาเลือกการพัฒนาในระหว่างทดลองปฏิบัติหน้าที่ราชการ']" hide-bottom-space
-            :options="options" class="col-xs-12 col-sm-6" dense borderless option-label="label" outlined v-model="develop"
-            label="การพัฒนาในระหว่างทดลองปฏิบัติหน้าที่ราชการ" />
+          <q-select
+            :rules="[
+              (val) =>
+                !!val || 'กรุณาเลือกการพัฒนาในระหว่างทดลองปฏิบัติหน้าที่ราชการ',
+            ]"
+            hide-bottom-space
+            :options="options"
+            class="col-xs-12 col-sm-6"
+            dense
+            borderless
+            emit-value
+            map-options
+            option-label="label"
+            option-value="value"
+            outlined
+            v-model="develop"
+            label="การพัฒนาในระหว่างทดลองปฏิบัติหน้าที่ราชการ"
+          />
         </div>
       </div>
       <div class="col-12 row q-mt-lg">
         <div class="col-xs-12 col-sm-6">
-          <q-select :rules="[(val) => !!val || 'กรุณาเลือกผลการประเมินการทดลองปฏิบัติหน้าที่ราชการ']" hide-bottom-space
-            :options="optionsResult" class="col-xs-12 col-sm-6" dense borderless option-label="label" outlined
-            v-model="result" label="ผลการประเมินการทดลองปฏิบัติหน้าที่ราชการ" />
-
+          <q-select
+            :rules="[
+              (val) =>
+                !!val || 'กรุณาเลือกผลการประเมินการทดลองปฏิบัติหน้าที่ราชการ',
+            ]"
+            hide-bottom-space
+            :options="optionsResult"
+            class="col-xs-12 col-sm-6"
+            dense
+            borderless
+            emit-value
+            map-options
+            option-label="label"
+            outlined
+            v-model="result"
+            label="ผลการประเมินการทดลองปฏิบัติหน้าที่ราชการ"
+          />
         </div>
       </div>
 
       <div class="col-12 row q-mt-lg">
         <div class="col-12">
-          <q-input hide-bottom-space :readonly="edit" dense borderless :outlined="!edit" class="bg-white" type="textarea"
-            v-model="reson" label="เหตุผล" :rules="[(val) => !!val || 'กรุณาระบุเหตุผล']"/>
+          <q-input
+            hide-bottom-space
+            :readonly="edit"
+            dense
+            borderless
+            :outlined="!edit"
+            class="bg-white"
+            type="textarea"
+            v-model="reson"
+            label="เหตุผล"
+            :rules="[(val) => !!val || 'กรุณาระบุเหตุผล']"
+          />
         </div>
       </div>
 
@@ -152,11 +306,26 @@ const postData = async () => {
             ประธานคณะกรรมการประเมินผลการปฏิบัติหน้าที่ราชการ
           </div>
           <div class="col-12 row q-col-gutter-md">
-            <q-select class="col-xs-12 col-sm-8" dense v-model="director_id" outlined :options="optionDirector"
-              label="" />
+            <q-select
+              class="col-xs-12 col-sm-8"
+              dense
+              v-model="director_id"
+              outlined
+              :options="commander"
+              label=""
+              option-label="name"
+              disable
+            />
             <div class="col-xs-12 col-sm-4">
-              <datepicker menu-class-name="modalfix" v-model="director_dated" :locale="'th'" autoApply borderless
-                :enableTimePicker="false" week-start="0">
+              <datepicker
+                menu-class-name="modalfix"
+                v-model="chairman_dated"
+                :locale="'th'"
+                autoApply
+                borderless
+                :enableTimePicker="false"
+                week-start="0"
+              >
                 <template #year="{ year }">
                   {{ year + 543 }}
                 </template>
@@ -164,10 +333,22 @@ const postData = async () => {
                   {{ parseInt(value + 543) }}
                 </template>
                 <template #trigger>
-                  <q-input outlined dense class="full-width datepicker col-3" :model-value="director_dated != null ? date2Thai(director_dated) : null
-                    " :label="`${'ลงวันที่'}`" :rules="[(val) => !!val || `${'กรุณาเลือกลงวันที่'}`]">
+                  <q-input
+                    outlined
+                    dense
+                    class="full-width datepicker col-3"
+                    :model-value="
+                      chairman_dated != null ? date2Thai(chairman_dated) : null
+                    "
+                    :label="`${'ลงวันที่'}`"
+                    :rules="[(val) => !!val || `${'กรุณาเลือกลงวันที่'}`]"
+                  >
                     <template v-slot:prepend>
-                      <q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)">
+                      <q-icon
+                        name="event"
+                        class="cursor-pointer"
+                        style="color: var(--q-primary)"
+                      >
                       </q-icon>
                     </template>
                   </q-input>
@@ -182,11 +363,26 @@ const postData = async () => {
             ความเห็นของผู้มีอำนาจสั่งบรรจุตามมาตรา 52
           </div>
           <div class="col-12 row q-col-gutter-md">
-            <q-select class="col-xs-12 col-sm-8" dense v-model="director_id2" outlined :options="optionDirector"
-              label="" />
+            <q-select
+              class="col-xs-12 col-sm-8"
+              dense
+              v-model="director_id2"
+              outlined
+              :options="optionDirector"
+              label=""
+              option-label="name"
+             
+            />
             <div class="col-xs-12 col-sm-4">
-              <datepicker menu-class-name="modalfix" v-model="director_dated2" :locale="'th'" autoApply borderless
-                :enableTimePicker="false" week-start="0">
+              <datepicker
+                menu-class-name="modalfix"
+                v-model="director1_dated"
+                :locale="'th'"
+                autoApply
+                borderless
+                :enableTimePicker="false"
+                week-start="0"
+              >
                 <template #year="{ year }">
                   {{ year + 543 }}
                 </template>
@@ -194,10 +390,24 @@ const postData = async () => {
                   {{ parseInt(value + 543) }}
                 </template>
                 <template #trigger>
-                  <q-input outlined dense class="full-width datepicker col-3" :model-value="director_dated2 != null ? date2Thai(director_dated2) : null
-                    " :label="`${'ลงวันที่'}`" :rules="[(val) => !!val || `${'กรุณาเลือกลงวันที่'}`]">
+                  <q-input
+                    outlined
+                    dense
+                    class="full-width datepicker col-3"
+                    :model-value="
+                      director1_dated != null
+                        ? date2Thai(director1_dated)
+                        : null
+                    "
+                    :label="`${'ลงวันที่'}`"
+                    :rules="[(val) => !!val || `${'กรุณาเลือกลงวันที่'}`]"
+                  >
                     <template v-slot:prepend>
-                      <q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)">
+                      <q-icon
+                        name="event"
+                        class="cursor-pointer"
+                        style="color: var(--q-primary)"
+                      >
                       </q-icon>
                     </template>
                   </q-input>
@@ -212,11 +422,26 @@ const postData = async () => {
             ผู้มีอำนาจสั่งบรรจุตามมาตรา 52
           </div>
           <div class="col-12 row q-col-gutter-md">
-            <q-select class="col-xs-12 col-sm-8" dense v-model="director_id3" outlined :options="optionDirector"
-              label="" />
+            <q-select
+              class="col-xs-12 col-sm-8"
+              dense
+              v-model="director_id3"
+              outlined
+              :options="optionDirector"
+              label=""
+              option-label="name"
+             
+            />
             <div class="col-xs-12 col-sm-4">
-              <datepicker menu-class-name="modalfix" v-model="director_dated3" :locale="'th'" autoApply borderless
-                :enableTimePicker="false" week-start="0">
+              <datepicker
+                menu-class-name="modalfix"
+                v-model="director2_dated"
+                :locale="'th'"
+                autoApply
+                borderless
+                :enableTimePicker="false"
+                week-start="0"
+              >
                 <template #year="{ year }">
                   {{ year + 543 }}
                 </template>
@@ -224,10 +449,24 @@ const postData = async () => {
                   {{ parseInt(value + 543) }}
                 </template>
                 <template #trigger>
-                  <q-input outlined dense class="full-width datepicker col-3" :model-value="director_dated3 != null ? date2Thai(director_dated3) : null
-                    " :label="`${'ลงวันที่'}`" :rules="[(val) => !!val || `${'กรุณาเลือกลงวันที่'}`]">
+                  <q-input
+                    outlined
+                    dense
+                    class="full-width datepicker col-3"
+                    :model-value="
+                      director2_dated != null
+                        ? date2Thai(director2_dated)
+                        : null
+                    "
+                    :label="`${'ลงวันที่'}`"
+                    :rules="[(val) => !!val || `${'กรุณาเลือกลงวันที่'}`]"
+                  >
                     <template v-slot:prepend>
-                      <q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)">
+                      <q-icon
+                        name="event"
+                        class="cursor-pointer"
+                        style="color: var(--q-primary)"
+                      >
                       </q-icon>
                     </template>
                   </q-input>
@@ -266,4 +505,4 @@ const postData = async () => {
 .q-card {
   box-shadow: 0px 0px 0px 0px !important;
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/modules/05_placement/components/probation/FormEvaluation/FormSaveResult.vue b/src/modules/05_placement/components/probation/FormEvaluation/FormSaveResult.vue
index d390c77db..de36f904d 100644
--- a/src/modules/05_placement/components/probation/FormEvaluation/FormSaveResult.vue
+++ b/src/modules/05_placement/components/probation/FormEvaluation/FormSaveResult.vue
@@ -1,14 +1,127 @@
 <script setup lang="ts">
-import { ref, defineAsyncComponent } from "vue";
+import { ref, onMounted } from "vue";
 import { useQuasar } from "quasar";
 import { useProbationDataStore } from "@/modules/05_placement/store";
 import { useCounterMixin } from "@/stores/mixin";
-import { formatDate } from "@fullcalendar/core";
+// import { formatDate } from "@fullcalendar/core";
+
+import { useRoute } from "vue-router";
+import http from "@/plugins/http";
+import config from "@/app.config";
 
 const $q = useQuasar();
+const route = useRoute();
 const probationStore = useProbationDataStore();
-
+const mixin = useCounterMixin();
+const {
+  date2Thai,
+  success,
+  notifyError,
+  dateToISO,
+  messageError,
+  showLoader,
+  hideLoader,
+} = mixin;
 const { ratingColors } = probationStore;
+const assignId = ref<string>(route.params.form.toString());
+
+const person = ref<any>([]);
+const assign = ref<any>([]);
+const evaluate_no = ref<string>("");
+const start_date = ref<Date>(new Date());
+const date_finish = ref<Date>(new Date());
+const status = ref<boolean>(true);
+const round = ref<any>();
+
+const props = defineProps({
+  tab: String,
+});
+
+onMounted(async () => {
+  console.log(props.tab);
+  await fecthFormdata(assignId.value);
+  if (props.tab !== undefined) {
+    round.value = props.tab.charAt(4);
+    await fecthFormRound(assignId.value, round.value);
+  }
+});
+const fecthFormdata = async (id: string) => {
+  await http
+    .get(config.API.formevaluateRecord(id))
+    .then((res: any) => {
+      // console.log(res);
+      evaluate_no.value = res.data.data.evaluate_no;
+      start_date.value = res.data.data.start_date;
+      date_finish.value = res.data.data.end_date;
+
+      person.value = res.data.data.person;
+      assign.value = res.data.data.assign;
+      option.value.push(res.data.data.director);
+      Autherise.value = res.data.data.director.name;
+    })
+    .catch((e: any) => {
+      console.log(e);
+    });
+};
+const fecthFormRound = async (id: string, no: string) => {
+  showLoader();
+  await http
+    .get(config.API.formevaluateround(id, no))
+    .then((res: any) => {
+      console.log(res);
+      let data = res.data.data.evaluate;
+      start_date.value = data.date_start;
+      date_finish.value = data.date_finish;
+      knowledge_level.value = data.knowledge_level;
+      skill_level.value = data.skill_level;
+      competency_level.value = data.competency_level;
+      learn_level.value = data.learn_level;
+      apply_level.value = data.apply_level;
+      achievement_other.value.text = data.achievement_other_desc;
+      achievement_other.value.level = data.achievement_other_level;
+      achievement_strength_desc.value = data.achievement_strength_desc;
+      achievement_improve_desc.value = data.achievement_improve_desc;
+      conduct_level.value[0] = data.conduct1_level;
+      conduct_level.value[1] = data.conduct2_level;
+      conduct_level.value[2] = data.conduct3_level;
+      conduct_level.value[3] = data.conduct4_level;
+      moral_level.value[0] = data.moral1_level;
+      moral_level.value[1] = data.moral2_level;
+      moral_level.value[2] = data.moral3_level;
+      discipline_level.value[0] = data.discipline1_level;
+      discipline_level.value[1] = data.discipline2_level;
+      discipline_level.value[2] = data.discipline3_level;
+      discipline_level.value[3] = data.discipline4_level;
+      discipline_level.value[4] = data.discipline5_level;
+      behavio_orther.value.text = data.behavior_other_desc;
+      behavio_orther.value.level = data.behavior_other_level;
+      behavior_strength_desc.value = data.behavior_strength_desc;
+      behavior_improve_desc.value = data.behavior_improve_desc;
+      orientation.value = data.orientation.toString();
+      self_learning.value = data.self_learning.toString();
+      training_seminar.value = data.training_seminar.toString();
+      other_training.value = data.other_training.toString();
+      if (
+        data.achievement_other_desc !== "" &&
+        data.achievement_other_level !== null
+      ) {
+        etc.value = true;
+      }
+      if (
+        data.behavior_other_desc !== "" &&
+        data.behavior_other_level !== null
+      ) {
+        etc2.value = true;
+      }
+      status.value = false;
+    })
+    .catch((e) => {
+      console.log(e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+};
 
 const list1_1 = [
   { id: "1", label: "ผลผลิตของงานที่คาดหวัง 1" },
@@ -69,10 +182,8 @@ const list2_3 = [
     label: "ปฏิบัติบัติหน้าที่อย่างตรงไปตรงมาโดยยึกหลักจรรยาบรรณวิชาชีพ",
   },
 ];
-const option = ref<any>(["นาย ภูริณัฐ บุญขาว", "นาย พงศกร วรารักษ์"]);
+const option = ref<any>([]);
 
-const mixin = useCounterMixin();
-const { date2Thai, success, notifyError } = mixin;
 const dateToday = ref<Date>(new Date("10-10-2023"));
 const dateEnd = ref<Date>(new Date("12-10-2023"));
 const period = ref<number>(1);
@@ -112,10 +223,10 @@ const etc2 = ref<any>(false); // checkBox 2.4
 const behavio_orther = ref<any>({ text: "", level: 0 });
 // const etc_text2 = ref<string>("");
 // const ext_value2 = ref<number>(0);
-const behavio_strength_desc = ref<string>("");
+const behavior_strength_desc = ref<string>("");
 const behavior_improve_desc = ref<string>("");
 // part 3
-const orientation = ref<nu>(null);
+const orientation = ref<any>(null);
 const self_learning = ref<any>(null);
 const training_seminar = ref<any>(null);
 const other_training = ref<any>(null);
@@ -166,13 +277,13 @@ const savaForm = () => {
     competency_level.value === 0 ||
     learn_level.value === 0 ||
     apply_level.value === 0 ||
-    success_level.value === 0 ||
+    // success_level.value === 0 ||
     achievement_strength_desc.value === "" ||
     achievement_improve_desc.value === "" ||
     conduct_level.value.length < 4 ||
     moral_level.value.length < 3 ||
     discipline_level.value.length < 5 ||
-    behavio_strength_desc.value === "" ||
+    behavior_strength_desc.value === "" ||
     behavior_improve_desc.value === "" ||
     orientation.value === null ||
     self_learning.value === null ||
@@ -200,6 +311,9 @@ const savaForm = () => {
 };
 const putformData = () => {
   const data = {
+    evaluate_no: evaluate_no.value,
+    start_date: start_date.value,
+    date_finish: date_finish.value,
     evaluate_expenct_level: evaluate_expenct_level.value,
     evaluate_ouptut: evaluate_ouptut.value,
     knowledge_level: knowledge_level.value,
@@ -207,7 +321,7 @@ const putformData = () => {
     competency_level: competency_level.value,
     learn_level: learn_level.value,
     apply_level: apply_level.value,
-    success_level: success_level.value,
+    // success_level: success_level.value,
     achievement_other: achievement_other.value,
     // achievement_other_desc: etc_text.value,
     // achievement_other_level: ext_value.value,
@@ -228,13 +342,13 @@ const putformData = () => {
     // behavio_orther_desc: etc_text2.value,
     // behavio_orther_level: ext_value2.value,
     behavio_orther: behavio_orther.value,
-    behavio_strength_desc: behavio_strength_desc.value,
+    behavior_strength_desc: behavior_strength_desc.value,
     behavior_improve_desc: behavior_improve_desc.value,
     orientation: Number(orientation.value),
     self_learning: Number(self_learning.value),
     training_seminar: Number(training_seminar.value),
     other_training: Number(other_training.value),
-
+    assessor_dated: dateToISO(dateAutherise.value),
     // commander_dated: dateAutherise.value,
   };
   $q.dialog({
@@ -248,29 +362,48 @@ const putformData = () => {
   })
     .onOk(async () => {
       console.log("บันทึกข้อมูล", data);
+      saveformdata(data);
     })
     .onCancel(() => {})
     .onDismiss(() => {});
 };
+const saveformdata = async (data: any) => {
+  await http
+    .post(config.API.createformevaluate(assignId.value), data)
+    .then((res: any) => {
+      console.log(res);
+      success($q, "บันทึกสำเร็จ");
+    })
+    .catch((e: any) => {
+      messageError($q, e);
+    });
+};
 </script>
 
 <template>
   <div class="row col-12 q-gutter-lg no-margin">
+    <div class="toptitle text-dark col-12 row items-center">
+      <div>แบบบันทึกผล</div>
+    </div>
     <div class="col-12 row">
       <div class="col-12 text-top0 row items-center">
         <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
         วันเริ่มทดลองปฎิบัติหน้าที่ราชการ ตั้งแต่วันที่
-        <span class="text-black q-px-sm">{{ date2Thai(dateToday) }}</span>
+        <span class="text-black q-px-sm">{{
+          date2Thai(assign.date_start)
+        }}</span>
         ถึงวันที
-        <span class="text-black q-px-sm">{{ date2Thai(dateEnd) }}</span>
+        <span class="text-black q-px-sm">{{
+          date2Thai(assign.date_finish)
+        }}</span>
       </div>
       <div class="col-12 text-top0 row items-center">
         <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
-        <span class="text-black q-px-sm">{{ "ครั้งที่" + period }}</span>
+        <span class="text-black q-px-sm">{{ "ครั้งที่" + round }}</span>
         ระหว่างวันที่
-        <span class="text-black q-px-sm">{{ date2Thai(dateToday) }}</span>
+        <span class="text-black q-px-sm">{{ date2Thai(start_date) }}</span>
         ถึงวันที่
-        <span class="text-black q-px-sm">{{ date2Thai(dateEnd) }}</span>
+        <span class="text-black q-px-sm">{{ date2Thai(date_finish) }}</span>
       </div>
       <div class="col-12 q-pt-md">
         <q-separator size="3px" color="grey-2" />
@@ -590,7 +723,7 @@ const putformData = () => {
         </q-list>
       </q-card>
 
-      <q-card class="text-top0 col-12 q-pa-sm q-pl-lg">
+      <!-- <q-card class="text-top0 col-12 q-pa-sm q-pl-lg">
         <q-list dense>
           <q-item dense tag="label" v-ripple>
             <q-item-section>
@@ -627,7 +760,7 @@ const putformData = () => {
             </q-item-section>
           </q-item>
         </q-list>
-      </q-card>
+      </q-card> -->
 
       <q-card class="text-top0 col-12 q-pa-sm q-pl-lg">
         <q-list dense>
@@ -635,7 +768,7 @@ const putformData = () => {
             <q-item-section>
               <q-item-label>
                 <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
-                1.8 อื่นๆ
+                1.7 อื่นๆ
                 <q-checkbox
                   class="q-ml-sm"
                   dense
@@ -965,7 +1098,7 @@ const putformData = () => {
           <q-input
             outlined
             dense
-            v-model="behavio_strength_desc"
+            v-model="behavior_strength_desc"
             class="col-xs-12 col-sm-11 col-md-10 offset-md-1"
             lazy-rules
             type="textarea"
@@ -1129,6 +1262,8 @@ const putformData = () => {
             outlined
             :options="option"
             label="ผู้บังคับบัญชา"
+            option-label="name"
+            disable
           />
           <div class="col-xs-12 col-sm-4">
             <datepicker
@@ -1174,7 +1309,7 @@ const putformData = () => {
     </div>
     <q-toolbar class="text-primary">
       <q-space />
-      <q-btn label="บันทึก" color="secondary" @click="savaForm" />
+      <q-btn label="บันทึก" color="secondary" @click="savaForm" v-if="status" />
     </q-toolbar>
   </div>
 </template>
diff --git a/src/modules/05_placement/components/probation/FormEvaluation/FormSaveResultAdd.vue b/src/modules/05_placement/components/probation/FormEvaluation/FormSaveResultAdd.vue
new file mode 100644
index 000000000..d665e8273
--- /dev/null
+++ b/src/modules/05_placement/components/probation/FormEvaluation/FormSaveResultAdd.vue
@@ -0,0 +1,1306 @@
+<script setup lang="ts">
+import { ref, onMounted } from "vue";
+import { useQuasar } from "quasar";
+import { useProbationDataStore } from "@/modules/05_placement/store";
+import { useCounterMixin } from "@/stores/mixin";
+// import { formatDate } from "@fullcalendar/core";
+
+import { useRoute, useRouter } from "vue-router";
+import http from "@/plugins/http";
+import config from "@/app.config";
+
+const $q = useQuasar();
+const route = useRoute();
+const router = useRouter();
+const probationStore = useProbationDataStore();
+const mixin = useCounterMixin();
+const { date2Thai, success, notifyError, dateToISO, messageError } = mixin;
+const { ratingColors } = probationStore;
+const assignId = ref<string>(route.params.form.toString());
+
+const person = ref<any>([]);
+const assign = ref<any>([]);
+const evaluate_no = ref<string>("");
+const start_date = ref<Date>(new Date());
+const date_finish = ref<Date>(new Date());
+const round = ref<number>();
+
+onMounted(async () => {
+  await fecthFormdata(assignId.value);
+});
+const fecthFormdata = async (id: string) => {
+  await http
+    .get(config.API.formevaluateRecord(id))
+    .then((res: any) => {
+      console.log(res);
+      evaluate_no.value = res.data.data.evaluate_no;
+      start_date.value = res.data.data.start_date;
+      date_finish.value = res.data.data.end_date;
+      round.value = res.data.data.evaluate_no;
+
+      person.value = res.data.data.person;
+      assign.value = res.data.data.assign;
+      option.value.push(res.data.data.director);
+      Autherise.value = res.data.data.director.name;
+    })
+    .catch((e: any) => {
+      console.log(e);
+    });
+};
+
+const list1_1 = [
+  { id: "1", label: "ผลผลิตของงานที่คาดหวัง 1" },
+  { id: "2", label: "ผลผลิตของงานที่คาดหวัง 2" },
+  { id: "3", label: "ผลผลิตของงานที่คาดหวัง 3" },
+  { id: "4", label: "ผลผลิตของงานที่คาดหวัง 4" },
+  { id: "5", label: "ผลผลิตของงานที่คาดหวัง 5" },
+];
+const list1_2 = [
+  { id: "1", label: "ผลผลิตของงานที่เกิดขึ้น 1" },
+  { id: "2", label: "ผลผลิตของงานที่เกิดขึ้น 2" },
+  { id: "3", label: "ผลผลิตของงานที่เกิดขึ้น 3" },
+  { id: "4", label: "ผลผลิตของงานที่เกิดขึ้น 4" },
+  { id: "5", label: "ผลผลิตของงานที่เกิดขึ้น 5" },
+];
+const list2_1 = [
+  { id: "1", label: "ให้บริการประชาชนหรือผู้รับบริการด้วยอัธยาศัยดี" },
+  { id: "2", label: "มีความรับผิดชอบในการปฏิบัติบัติงาน" },
+  {
+    id: "3",
+    label:
+      "ให้บริการประชาชนหรือผู้รับบริการด้วยความรวดเร็ว เอาใจใส่เป็นมาตรฐานเดียวกัน",
+  },
+  {
+    id: "4",
+    label: "ตั้งใจปฏิบัติบัติหน้าที่ราชการด้วยความอุตสาหะ ขยันหมั่นเพียร",
+  },
+];
+const list2_2 = [
+  {
+    id: "1",
+    label: "อุทิศตนและเสียสละเวลาในการปฏิบัติบัติงานอย่างเต็มกำลังความสามารถ",
+  },
+  { id: "2", label: "มีจิตสำนึกที่ดี ปฏิบัติบัติงานด้วยความซื่อสัตย์ สุจริต" },
+  {
+    id: "3",
+    label:
+      "ยึดมั่นในสถาบันบัพระมหากษัตริย์ และไม่กระทำการใด ๆ อันจะก่อให้เกิดความเสียหายต่อประเทศชาติ",
+  },
+];
+const list2_3 = [
+  { id: "1", label: "มีความรับรัผิดชอบในการรักษาเวลาทำงาน" },
+  {
+    id: "2",
+    label: "แต่งกายในการปฏิบัติบัติงานได้อย่างเหมาะสมกับการเป็นข้าราชการ",
+  },
+  {
+    id: "3",
+    label: "ไม่กระทำการใด ๆ อันอาจก่อให้เกิดความเสียหายแก่ชื่อเสียงของหน่วยงาน",
+  },
+  {
+    id: "4",
+    label:
+      "ไม่กระทำการใด ๆ อันเป็นการเสื่อมเกียรติและศักดิ์ศรีของความเป็นข้าราชการ",
+  },
+  {
+    id: "5",
+    label: "ปฏิบัติบัติหน้าที่อย่างตรงไปตรงมาโดยยึกหลักจรรยาบรรณวิชาชีพ",
+  },
+];
+const option = ref<any>([]);
+
+const dateToday = ref<Date>(new Date("10-10-2023"));
+const dateEnd = ref<Date>(new Date("12-10-2023"));
+const period = ref<number>(1);
+
+// part 1
+const evaluate_expenct_level = ref<any>([
+  { id: "1", label: "ผลผลิตของงานที่คาดหวัง 1", level: 0 },
+  { id: "2", label: "ผลผลิตของงานที่คาดหวัง 2", level: 0 },
+  { id: "3", label: "ผลผลิตของงานที่คาดหวัง 3", level: 0 },
+  { id: "4", label: "ผลผลิตของงานที่คาดหวัง 4", level: 0 },
+  { id: "5", label: "ผลผลิตของงานที่คาดหวัง 5", level: 0 },
+]);
+const evaluate_ouptut = ref<any>([
+  { level: 0, text: "" },
+  { level: 0, text: "" },
+  { level: 0, text: "" },
+  { level: 0, text: "" },
+  { level: 0, text: "" },
+]);
+const knowledge_level = ref<number>(0);
+const skill_level = ref<number>(0);
+const competency_level = ref<number>(0);
+const learn_level = ref<number>(0);
+const apply_level = ref<number>(0);
+const success_level = ref<number>(0);
+const etc = ref<any>(false); // checkBox 1.8
+const achievement_other = ref<any>({ text: "", level: 0 });
+// const etc_text = ref<string>("");
+// const ext_value = ref<number>(0);
+const achievement_strength_desc = ref<string>("");
+const achievement_improve_desc = ref<string>("");
+// part 2
+const conduct_level = ref<any>([]);
+const moral_level = ref<any>([]);
+const discipline_level = ref<any>([]);
+const etc2 = ref<any>(false); // checkBox 2.4
+const behavio_orther = ref<any>({ text: "", level: 0 });
+// const etc_text2 = ref<string>("");
+// const ext_value2 = ref<number>(0);
+const behavior_strength_desc = ref<string>("");
+const behavior_improve_desc = ref<string>("");
+// part 3
+const orientation = ref<any>(null);
+const self_learning = ref<any>(null);
+const training_seminar = ref<any>(null);
+const other_training = ref<any>(null);
+// footer
+const Autherise = ref<any>(null);
+const dateAutherise = ref<any>(new Date());
+
+//rules
+const evaluate_ouptutRules = [
+  (val: any) => (val && val.length > 0) || "กรุณากรอกเหตุผลที่เกิดขึ้น",
+];
+const achievement_strengthRef = ref<any>(null);
+const achievement_strengthRules = [
+  (val: any) => (val && val.length > 0) || "กรุณากรอกข้อมูลจุดเด่น",
+];
+const achievement_inproveRef = ref<any>(null);
+const achievement_inproveRules = [
+  (val: any) => (val && val.length > 0) || "กรุณากรอกข้อมูลสิ่งที่ควรปรับปรุง",
+];
+const behavio_strengthRef = ref<any>(null);
+const behavio_strengthRules = [
+  (val: any) => (val && val.length > 0) || "กรุณากรอกข้อมูลจุดเด่น",
+];
+const behavio_inproveRef = ref<any>(null);
+const behavio_inproveRules = [
+  (val: any) => (val && val.length > 0) || "กรุณากรอกข้อมูลสิ่งที่ควรปรับปรุง",
+];
+
+const savaForm = () => {
+  achievement_strengthRef.value.validate();
+  achievement_inproveRef.value.validate();
+  behavio_strengthRef.value.validate();
+  behavio_inproveRef.value.validate();
+
+  let hasError = false;
+  const filterlevel1_1 = evaluate_expenct_level.value.filter(
+    (e: any) => e.level == 0
+  );
+  const filter_ouptut1_2 = evaluate_ouptut.value.filter(
+    (e: any) => e.level == 0 || e.text == ""
+  );
+
+  if (
+    filterlevel1_1.length != 0 ||
+    filter_ouptut1_2.length != 0 ||
+    knowledge_level.value === 0 ||
+    skill_level.value === 0 ||
+    competency_level.value === 0 ||
+    learn_level.value === 0 ||
+    apply_level.value === 0 ||
+    success_level.value === 0 ||
+    achievement_strength_desc.value === "" ||
+    achievement_improve_desc.value === "" ||
+    conduct_level.value.length < 4 ||
+    moral_level.value.length < 3 ||
+    discipline_level.value.length < 5 ||
+    behavior_strength_desc.value === "" ||
+    behavior_improve_desc.value === "" ||
+    orientation.value === null ||
+    self_learning.value === null ||
+    training_seminar.value === null
+  ) {
+    hasError = true;
+  } else if (
+    (etc.value == true &&
+      (achievement_other.value.text === undefined ||
+        achievement_other.value.text == "" ||
+        achievement_other.value.level == undefined ||
+        achievement_other.value.level === 0)) ||
+    (etc2.value == true &&
+      (behavio_orther.value.text === "" ||
+        behavio_orther.value.text == undefined ||
+        behavio_orther.value.level === undefined ||
+        behavio_orther.value.level == 0))
+  ) {
+    hasError = true;
+  } else putformData();
+
+  if (hasError === true) {
+    notifyError($q, "กรุณากรอกข้อมูลให้ครบ");
+  }
+};
+const putformData = () => {
+  const data = {
+    evaluate_no: evaluate_no.value,
+    start_date: start_date.value,
+    date_finish: date_finish.value,
+    evaluate_expenct_level: evaluate_expenct_level.value,
+    evaluate_ouptut: evaluate_ouptut.value,
+    knowledge_level: knowledge_level.value,
+    skill_level: skill_level.value,
+    competency_level: competency_level.value,
+    learn_level: learn_level.value,
+    apply_level: apply_level.value,
+    success_level: success_level.value,
+    achievement_other: achievement_other.value,
+    // achievement_other_desc: etc_text.value,
+    // achievement_other_level: ext_value.value,
+    achievement_strength_desc: achievement_strength_desc.value,
+    achievement_improve_desc: achievement_improve_desc.value,
+    conduct1_level: conduct_level.value[0],
+    conduct2_level: conduct_level.value[1],
+    conduct3_level: conduct_level.value[2],
+    conduct4_level: conduct_level.value[3],
+    moral1_level: moral_level.value[0],
+    moral2_level: moral_level.value[1],
+    moral3_level: moral_level.value[2],
+    discipline1_level: discipline_level.value[0],
+    discipline2_level: discipline_level.value[1],
+    discipline3_level: discipline_level.value[2],
+    discipline4_level: discipline_level.value[3],
+    discipline5_level: discipline_level.value[4],
+    // behavio_orther_desc: etc_text2.value,
+    // behavio_orther_level: ext_value2.value,
+    behavio_orther: behavio_orther.value,
+    behavior_strength_desc: behavior_strength_desc.value,
+    behavior_improve_desc: behavior_improve_desc.value,
+    orientation: Number(orientation.value),
+    self_learning: Number(self_learning.value),
+    training_seminar: Number(training_seminar.value),
+    other_training: Number(other_training.value),
+    assessor_dated: dateToISO(dateAutherise.value),
+    // commander_dated: dateAutherise.value,
+  };
+  $q.dialog({
+    title: "ยืนยันการบันทึกข้อมูล",
+    message: "ต้องการบันทึกข้อมูลนี้ใช่หรือไม่ ?",
+    cancel: {
+      flat: true,
+      color: "negative",
+    },
+    persistent: true,
+  })
+    .onOk(async () => {
+      console.log("บันทึกข้อมูล", data);
+      saveformdata(data);
+    })
+    .onCancel(() => {})
+    .onDismiss(() => {});
+};
+const saveformdata = async (data: any) => {
+  await http
+    .post(config.API.createformevaluate(assignId.value), data)
+    .then((res: any) => {
+      console.log(res);
+      success($q, "บันทึกสำเร็จ");
+    })
+    .catch((e: any) => {
+      messageError($q, e);
+    });
+};
+</script>
+
+<template>
+  <q-card class="my-card" flat bordered>
+    <q-item>
+      <q-item-section>
+        <q-toolbar>
+          <div
+            class="text-h6 text-weight-medium text-dark col-12 row items-center q-py-md"
+          >
+            <q-btn
+              icon="mdi-arrow-left"
+              unelevated
+              round
+              dense
+              flat
+              color="primary"
+              class="q-mr-sm"
+              @click="router.go(-1)"
+            />
+            การทดลองปฏิบัติหน้าที่ราชการของ {{ person.name }}
+          </div>
+        </q-toolbar>
+      </q-item-section>
+    </q-item>
+
+    <q-separator />
+
+    <q-card-section>
+      <q-separator vertical />
+
+      <q-card-section class="col-4">
+        <div class="row col-12 q-gutter-lg no-margin">
+          <div class="col-12 row">
+            <div class="col-12 text-top0 row items-center">
+              <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
+              วันเริ่มทดลองปฎิบัติหน้าที่ราชการ ตั้งแต่วันที่
+              <span class="text-black q-px-sm">{{
+                date2Thai(assign.date_start)
+              }}</span>
+              ถึงวันที
+              <span class="text-black q-px-sm">{{
+                date2Thai(assign.date_finish)
+              }}</span>
+            </div>
+            <div class="col-12 text-top0 row items-center">
+              <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
+              <span class="text-black q-px-sm">{{
+                "ครั้งที่" + round
+              }}</span>
+              ระหว่างวันที่
+              <span class="text-black q-px-sm">{{
+                date2Thai(start_date)
+              }}</span>
+              ถึงวันที่
+              <span class="text-black q-px-sm">{{
+                date2Thai(date_finish)
+              }}</span>
+            </div>
+            <div class="col-12 q-pt-md">
+              <q-separator size="3px" color="grey-2" />
+            </div>
+          </div>
+
+          <div class="col-12 row">
+            <div class="col-12 text-top0 items-center">
+              <q-avatar class="bg-grey-2 q-mr-sm" size="28px">1</q-avatar>
+              ผลสัมฤทธิ์ของการทดลองปฏิบัติบัติหน้าที่ราชการ
+            </div>
+            <div class="col-12 text-top0 row items-center q-pl-lg">
+              <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
+              1.1 ความสำเร็จของงานที่ได้รับมอบหมาย
+            </div>
+            <div class="col-xs-12 col-sm-11 col-md-10 offset-md-1 text-top2">
+              1.ผลผลิตของงานที่คาดหวัง
+            </div>
+            <q-card
+              flat
+              bordered
+              class="col-xs-12 col-sm-11 col-md-10 offset-md-1 q-pa-sm bg-grey-1"
+            >
+              <q-list dense v-for="(list, i) in list1_1" :key="i">
+                <q-item dense tag="label" v-ripple>
+                  <q-item-section>
+                    <q-item-label>{{ list.label }}</q-item-label>
+                  </q-item-section>
+                  <q-item-section side>
+                    <q-rating
+                      v-model="evaluate_expenct_level[i].level"
+                      :val="list.id"
+                      max="5"
+                      size="sm"
+                      color="grey"
+                      :color-selected="ratingColors"
+                      label="ระดับการประเมินพฤติกรรม"
+                    >
+                      <template v-slot:tip-1>
+                        <q-tooltip>ต่ำกว่าความคาดหวังมาก</q-tooltip>
+                      </template>
+                      <template v-slot:tip-2>
+                        <q-tooltip>ต่ำกว่าความคาดหวังค่อนข้างมาก</q-tooltip>
+                      </template>
+                      <template v-slot:tip-3>
+                        <q-tooltip>เป็นไปตามความคาดหวัง</q-tooltip>
+                      </template>
+                      <template v-slot:tip-4>
+                        <q-tooltip>สูงว่าความคาดหวังค่อนข้างมาก</q-tooltip>
+                      </template>
+                      <template v-slot:tip-5>
+                        <q-tooltip>สูงกว่าความคาดหวังมาก</q-tooltip>
+                      </template>
+                    </q-rating>
+                  </q-item-section>
+                </q-item>
+                <q-separator class="q-my-xs" v-if="i + 1 < list1_1.length" />
+              </q-list>
+            </q-card>
+          </div>
+          <div class="col-12 row">
+            <div class="col-12 text-top0 row items-center q-pl-lg">
+              <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
+              1.2 ความสำเร็จของงานที่ได้รับมอบหมาย
+            </div>
+            <div class="col-xs-12 col-sm-11 col-md-10 offset-md-1 text-top2">
+              1.ผลผลิตของงานที่เกิดขึ้น
+            </div>
+            <q-card
+              flat
+              bordered
+              class="col-xs-12 col-sm-11 col-md-10 offset-md-1 q-pa-sm bg-grey-1"
+            >
+              <q-list dense v-for="(list, i) in list1_2" :key="i">
+                <q-item dense tag="label" v-ripple>
+                  <q-item-section>
+                    <!-- <q-item-label>{{ list.label }}</q-item-label> -->
+                    <q-input
+                      outlined
+                      dense
+                      v-model="evaluate_ouptut[i].text"
+                      class="col-xs-12 col-sm-11 col-md-10 offset-md-1"
+                      lazy-rules
+                      type="textarea"
+                      label="ผลผลิตของงานที่เกิดขึ้นจริง"
+                      hide-bottom-space
+                      :row="1"
+                      :rules="evaluate_ouptutRules"
+                    />
+                  </q-item-section>
+                  <q-item-section side>
+                    <q-rating
+                      v-model="evaluate_ouptut[i].level"
+                      :val="list.id"
+                      max="5"
+                      size="sm"
+                      color="grey"
+                      :color-selected="ratingColors"
+                      label="ระดับการประเมินพฤติกรรม"
+                    >
+                      <template v-slot:tip-1>
+                        <q-tooltip>ต่ำกว่าความคาดหวังมาก</q-tooltip>
+                      </template>
+                      <template v-slot:tip-2>
+                        <q-tooltip>ต่ำกว่าความคาดหวังค่อนข้างมาก</q-tooltip>
+                      </template>
+                      <template v-slot:tip-3>
+                        <q-tooltip>เป็นไปตามความคาดหวัง</q-tooltip>
+                      </template>
+                      <template v-slot:tip-4>
+                        <q-tooltip>สูงว่าความคาดหวังค่อนข้างมาก</q-tooltip>
+                      </template>
+                      <template v-slot:tip-5>
+                        <q-tooltip>สูงกว่าความคาดหวังมาก</q-tooltip>
+                      </template>
+                    </q-rating>
+                  </q-item-section>
+                </q-item>
+                <q-separator class="q-my-xs" v-if="i + 1 < list1_2.length" />
+              </q-list>
+            </q-card>
+          </div>
+
+          <div class="col-12 row">
+            <q-card class="text-top0 col-12 q-pa-sm q-pl-lg">
+              <q-list dense>
+                <q-item dense tag="label" v-ripple>
+                  <q-item-section>
+                    <q-item-label>
+                      <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
+                      1.2. ความรู้ความสามารถ</q-item-label
+                    >
+                  </q-item-section>
+                  <q-item-section side>
+                    <q-rating
+                      v-model="knowledge_level"
+                      max="5"
+                      size="sm"
+                      color="grey"
+                      :color-selected="ratingColors"
+                      label="ระดับการประเมินพฤติกรรม"
+                    >
+                      <template v-slot:tip-1>
+                        <q-tooltip>ต่ำกว่าความคาดหวังมาก</q-tooltip>
+                      </template>
+                      <template v-slot:tip-2>
+                        <q-tooltip>ต่ำกว่าความคาดหวังค่อนข้างมาก</q-tooltip>
+                      </template>
+                      <template v-slot:tip-3>
+                        <q-tooltip>เป็นไปตามความคาดหวัง</q-tooltip>
+                      </template>
+                      <template v-slot:tip-4>
+                        <q-tooltip>สูงว่าความคาดหวังค่อนข้างมาก</q-tooltip>
+                      </template>
+                      <template v-slot:tip-5>
+                        <q-tooltip>สูงกว่าความคาดหวังมาก</q-tooltip>
+                      </template>
+                    </q-rating>
+                  </q-item-section>
+                </q-item>
+              </q-list>
+            </q-card>
+
+            <q-card class="text-top0 col-12 q-pa-sm q-pl-lg">
+              <q-list dense>
+                <q-item dense tag="label" v-ripple>
+                  <q-item-section>
+                    <q-item-label>
+                      <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
+                      1.3. ทักษะ</q-item-label
+                    >
+                  </q-item-section>
+                  <q-item-section side>
+                    <q-rating
+                      v-model="skill_level"
+                      max="5"
+                      size="sm"
+                      color="grey"
+                      :color-selected="ratingColors"
+                      label="ระดับการประเมินพฤติกรรม"
+                    >
+                      <template v-slot:tip-1>
+                        <q-tooltip>ต่ำกว่าความคาดหวังมาก</q-tooltip>
+                      </template>
+                      <template v-slot:tip-2>
+                        <q-tooltip>ต่ำกว่าความคาดหวังค่อนข้างมาก</q-tooltip>
+                      </template>
+                      <template v-slot:tip-3>
+                        <q-tooltip>เป็นไปตามความคาดหวัง</q-tooltip>
+                      </template>
+                      <template v-slot:tip-4>
+                        <q-tooltip>สูงว่าความคาดหวังค่อนข้างมาก</q-tooltip>
+                      </template>
+                      <template v-slot:tip-5>
+                        <q-tooltip>สูงกว่าความคาดหวังมาก</q-tooltip>
+                      </template>
+                    </q-rating>
+                  </q-item-section>
+                </q-item>
+              </q-list>
+            </q-card>
+
+            <q-card class="text-top0 col-12 q-pa-sm q-pl-lg">
+              <q-list dense>
+                <q-item dense tag="label" v-ripple>
+                  <q-item-section>
+                    <q-item-label>
+                      <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
+                      1.4. สมมรถนะ</q-item-label
+                    >
+                  </q-item-section>
+                  <q-item-section side>
+                    <q-rating
+                      v-model="competency_level"
+                      max="5"
+                      size="sm"
+                      color="grey"
+                      :color-selected="ratingColors"
+                      label="ระดับการประเมินพฤติกรรม"
+                    >
+                      <template v-slot:tip-1>
+                        <q-tooltip>ต่ำกว่าความคาดหวังมาก</q-tooltip>
+                      </template>
+                      <template v-slot:tip-2>
+                        <q-tooltip>ต่ำกว่าความคาดหวังค่อนข้างมาก</q-tooltip>
+                      </template>
+                      <template v-slot:tip-3>
+                        <q-tooltip>เป็นไปตามความคาดหวัง</q-tooltip>
+                      </template>
+                      <template v-slot:tip-4>
+                        <q-tooltip>สูงว่าความคาดหวังค่อนข้างมาก</q-tooltip>
+                      </template>
+                      <template v-slot:tip-5>
+                        <q-tooltip>สูงกว่าความคาดหวังมาก</q-tooltip>
+                      </template>
+                    </q-rating>
+                  </q-item-section>
+                </q-item>
+              </q-list>
+            </q-card>
+
+            <q-card class="text-top0 col-12 q-pa-sm q-pl-lg">
+              <q-list dense>
+                <q-item dense tag="label" v-ripple>
+                  <q-item-section>
+                    <q-item-label>
+                      <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
+                      1.5. ความสามารถในการเรียนรู้งาน</q-item-label
+                    >
+                  </q-item-section>
+                  <q-item-section side>
+                    <q-rating
+                      v-model="learn_level"
+                      max="5"
+                      size="sm"
+                      color="grey"
+                      :color-selected="ratingColors"
+                      label="ระดับการประเมินพฤติกรรม"
+                    >
+                      <template v-slot:tip-1>
+                        <q-tooltip>ต่ำกว่าความคาดหวังมาก</q-tooltip>
+                      </template>
+                      <template v-slot:tip-2>
+                        <q-tooltip>ต่ำกว่าความคาดหวังค่อนข้างมาก</q-tooltip>
+                      </template>
+                      <template v-slot:tip-3>
+                        <q-tooltip>เป็นไปตามความคาดหวัง</q-tooltip>
+                      </template>
+                      <template v-slot:tip-4>
+                        <q-tooltip>สูงว่าความคาดหวังค่อนข้างมาก</q-tooltip>
+                      </template>
+                      <template v-slot:tip-5>
+                        <q-tooltip>สูงกว่าความคาดหวังมาก</q-tooltip>
+                      </template>
+                    </q-rating>
+                  </q-item-section>
+                </q-item>
+              </q-list>
+            </q-card>
+
+            <q-card class="text-top0 col-12 q-pa-sm q-pl-lg">
+              <q-list dense>
+                <q-item dense tag="label" v-ripple>
+                  <q-item-section>
+                    <q-item-label>
+                      <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
+                      1.6.
+                      ความสามารถในการปรับใช้ความรู้กับงานในหน้าที่</q-item-label
+                    >
+                  </q-item-section>
+                  <q-item-section side>
+                    <q-rating
+                      v-model="apply_level"
+                      max="5"
+                      size="sm"
+                      color="grey"
+                      :color-selected="ratingColors"
+                      label="ระดับการประเมินพฤติกรรม"
+                    >
+                      <template v-slot:tip-1>
+                        <q-tooltip>ต่ำกว่าความคาดหวังมาก</q-tooltip>
+                      </template>
+                      <template v-slot:tip-2>
+                        <q-tooltip>ต่ำกว่าความคาดหวังค่อนข้างมาก</q-tooltip>
+                      </template>
+                      <template v-slot:tip-3>
+                        <q-tooltip>เป็นไปตามความคาดหวัง</q-tooltip>
+                      </template>
+                      <template v-slot:tip-4>
+                        <q-tooltip>สูงว่าความคาดหวังค่อนข้างมาก</q-tooltip>
+                      </template>
+                      <template v-slot:tip-5>
+                        <q-tooltip>สูงกว่าความคาดหวังมาก</q-tooltip>
+                      </template>
+                    </q-rating>
+                  </q-item-section>
+                </q-item>
+              </q-list>
+            </q-card>
+
+            <q-card class="text-top0 col-12 q-pa-sm q-pl-lg">
+              <q-list dense>
+                <q-item dense tag="label" v-ripple>
+                  <q-item-section>
+                    <q-item-label>
+                      <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
+                      1.7. ความสำเร็จของงานที่ได้รับมอบหมาย</q-item-label
+                    >
+                  </q-item-section>
+                  <q-item-section side>
+                    <q-rating
+                      v-model="success_level"
+                      max="5"
+                      size="sm"
+                      color="grey"
+                      :color-selected="ratingColors"
+                      label="ระดับการประเมินพฤติกรรม"
+                    >
+                      <template v-slot:tip-1>
+                        <q-tooltip>ต่ำกว่าความคาดหวังมาก</q-tooltip>
+                      </template>
+                      <template v-slot:tip-2>
+                        <q-tooltip>ต่ำกว่าความคาดหวังค่อนข้างมาก</q-tooltip>
+                      </template>
+                      <template v-slot:tip-3>
+                        <q-tooltip>เป็นไปตามความคาดหวัง</q-tooltip>
+                      </template>
+                      <template v-slot:tip-4>
+                        <q-tooltip>สูงว่าความคาดหวังค่อนข้างมาก</q-tooltip>
+                      </template>
+                      <template v-slot:tip-5>
+                        <q-tooltip>สูงกว่าความคาดหวังมาก</q-tooltip>
+                      </template>
+                    </q-rating>
+                  </q-item-section>
+                </q-item>
+              </q-list>
+            </q-card>
+
+            <q-card class="text-top0 col-12 q-pa-sm q-pl-lg">
+              <q-list dense>
+                <q-item dense tag="label" v-ripple>
+                  <q-item-section>
+                    <q-item-label>
+                      <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
+                      1.8 อื่นๆ
+                      <q-checkbox
+                        class="q-ml-sm"
+                        dense
+                        v-model="etc"
+                        @click="
+                          (achievement_other.text = ''),
+                            (achievement_other.level = 0)
+                        "
+                    /></q-item-label>
+                  </q-item-section>
+                </q-item>
+              </q-list>
+            </q-card>
+
+            <q-card v-if="etc" class="text-top0 col-12 q-pa-sm q-mt-sm q-pl-lg">
+              <q-list dense>
+                <q-item dense tag="label" v-ripple>
+                  <q-item-section class="q-ml-md">
+                    <q-item-label>
+                      <q-input
+                        v-model="achievement_other.text"
+                        label="กรอกอื่นๆ"
+                        dense
+                        lazy-rules
+                        autogrow
+                        hide-bottom-space
+                        outlined
+                        class="bg-white"
+                        :rules="[
+                          (val) =>
+                            (val && val.length > 0) || 'กรุณากรอกข้อความ',
+                        ]"
+                      />
+                    </q-item-label>
+                  </q-item-section>
+                  <q-item-section side>
+                    <q-rating
+                      v-model="achievement_other.level"
+                      max="5"
+                      size="sm"
+                      color="grey"
+                      :color-selected="ratingColors"
+                      label="ระดับการประเมินพฤติกรรม"
+                    >
+                      <template v-slot:tip-1>
+                        <q-tooltip>ต่ำกว่าความคาดหวังมาก</q-tooltip>
+                      </template>
+                      <template v-slot:tip-2>
+                        <q-tooltip>ต่ำกว่าความคาดหวังค่อนข้างมาก</q-tooltip>
+                      </template>
+                      <template v-slot:tip-3>
+                        <q-tooltip>เป็นไปตามความคาดหวัง</q-tooltip>
+                      </template>
+                      <template v-slot:tip-4>
+                        <q-tooltip>สูงว่าความคาดหวังค่อนข้างมาก</q-tooltip>
+                      </template>
+                      <template v-slot:tip-5>
+                        <q-tooltip>สูงกว่าความคาดหวังมาก</q-tooltip>
+                      </template>
+                    </q-rating>
+                  </q-item-section>
+                </q-item>
+              </q-list>
+            </q-card>
+          </div>
+
+          <div class="row col-12 q-gutter-lg no-margin">
+            <div class="col-12 row">
+              <div class="col-12 text-top0 row items-center q-pl-lg">
+                <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
+                จุดเด่น (ไม่เกิน 5 บรรทัด)
+              </div>
+              <q-input
+                outlined
+                dense
+                v-model="achievement_strength_desc"
+                class="col-xs-12 col-sm-11 col-md-10 offset-md-1"
+                lazy-rules
+                type="textarea"
+                label="กรอกจุดเด่น"
+                hide-bottom-space
+                :row="5"
+                :rules="achievement_strengthRules"
+                ref="achievement_strengthRef"
+              />
+            </div>
+            <div class="col-12 row">
+              <div class="col-12 text-top0 row items-center q-pl-lg">
+                <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
+                สิ่งที่ควรปรับปรุง (ไม่เกิน 5 บรรทัด)
+              </div>
+              <q-input
+                outlined
+                dense
+                v-model="achievement_improve_desc"
+                class="col-xs-12 col-sm-11 col-md-10 offset-md-1"
+                lazy-rules
+                type="textarea"
+                hide-bottom-space
+                label="กรอกสิ่งที่ควรปรับปรุง"
+                :row="5"
+                :rules="achievement_inproveRules"
+                ref="achievement_inproveRef"
+              />
+            </div>
+          </div>
+
+          <!-- Part 2 -->
+          <!-- <Part2 /> -->
+          <div class="row col-12 q-gutter-lg no-margin">
+            <div class="col-12 row">
+              <div class="col-12 text-top0 items-center">
+                <q-avatar class="bg-grey-2 q-mr-sm" size="28px">2</q-avatar>
+                พฤติกรรมของผู้ทดลองปฏิบัติบัติหน้าที่ราชการ
+              </div>
+              <div class="col-12 text-top0 row items-center q-pl-lg">
+                <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
+                2.1 ความประพฤติ
+              </div>
+              <q-card
+                flat
+                bordered
+                class="col-xs-12 col-sm-11 col-md-10 offset-md-1 q-pa-sm bg-grey-1"
+              >
+                <q-list dense v-for="(list, i) in list2_1" :key="i">
+                  <q-item dense tag="label" v-ripple>
+                    <q-item-section>
+                      <q-item-label>{{ list.label }}</q-item-label>
+                    </q-item-section>
+                    <q-item-section side>
+                      <q-rating
+                        v-model="conduct_level[i]"
+                        :val="list.id"
+                        max="5"
+                        size="sm"
+                        color="grey"
+                        :color-selected="ratingColors"
+                        label="ระดับการประเมินพฤติกรรม"
+                      >
+                        <template v-slot:tip-1>
+                          <q-tooltip>ต่ำกว่าความคาดหวังมาก</q-tooltip>
+                        </template>
+                        <template v-slot:tip-2>
+                          <q-tooltip>ต่ำกว่าความคาดหวังค่อนข้างมาก</q-tooltip>
+                        </template>
+                        <template v-slot:tip-3>
+                          <q-tooltip>เป็นไปตามความคาดหวัง</q-tooltip>
+                        </template>
+                        <template v-slot:tip-4>
+                          <q-tooltip>สูงว่าความคาดหวังค่อนข้างมาก</q-tooltip>
+                        </template>
+                        <template v-slot:tip-5>
+                          <q-tooltip>สูงกว่าความคาดหวังมาก</q-tooltip>
+                        </template>
+                      </q-rating>
+                    </q-item-section>
+                  </q-item>
+                  <q-separator class="q-my-xs" v-if="i + 1 < list2_1.length" />
+                </q-list>
+              </q-card>
+            </div>
+            <div class="col-12 row">
+              <div class="col-12 text-top0 row items-center q-pl-lg">
+                <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
+                2.2 ความมีคุณธรรมจริยธรรม
+              </div>
+              <q-card
+                flat
+                bordered
+                class="col-xs-12 col-sm-11 col-md-10 offset-md-1 q-pa-sm bg-grey-1"
+              >
+                <q-list dense v-for="(list, i) in list2_2" :key="i">
+                  <q-item dense tag="label" v-ripple>
+                    <q-item-section>
+                      <q-item-label>{{ list.label }}</q-item-label>
+                    </q-item-section>
+                    <q-item-section side>
+                      <q-rating
+                        v-model="moral_level[i]"
+                        :val="list.id"
+                        max="5"
+                        size="sm"
+                        color="grey"
+                        :color-selected="ratingColors"
+                        label="ระดับการประเมินพฤติกรรม"
+                      >
+                        <template v-slot:tip-1>
+                          <q-tooltip>ต่ำกว่าความคาดหวังมาก</q-tooltip>
+                        </template>
+                        <template v-slot:tip-2>
+                          <q-tooltip>ต่ำกว่าความคาดหวังค่อนข้างมาก</q-tooltip>
+                        </template>
+                        <template v-slot:tip-3>
+                          <q-tooltip>เป็นไปตามความคาดหวัง</q-tooltip>
+                        </template>
+                        <template v-slot:tip-4>
+                          <q-tooltip>สูงว่าความคาดหวังค่อนข้างมาก</q-tooltip>
+                        </template>
+                        <template v-slot:tip-5>
+                          <q-tooltip>สูงกว่าความคาดหวังมาก</q-tooltip>
+                        </template>
+                      </q-rating>
+                    </q-item-section>
+                  </q-item>
+                  <q-separator class="q-my-xs" v-if="i + 1 < list2_2.length" />
+                </q-list>
+              </q-card>
+            </div>
+            <div class="col-12 row">
+              <div class="col-12 text-top0 row items-center q-pl-lg">
+                <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
+                2.3 การรักษาวินัย
+              </div>
+              <q-card
+                flat
+                bordered
+                class="col-xs-12 col-sm-11 col-md-10 offset-md-1 q-pa-sm bg-grey-1"
+              >
+                <q-list dense v-for="(list, i) in list2_3" :key="i">
+                  <q-item dense tag="label" v-ripple>
+                    <q-item-section>
+                      <q-item-label>{{ list.label }}</q-item-label>
+                    </q-item-section>
+                    <q-item-section side>
+                      <q-rating
+                        v-model="discipline_level[i]"
+                        :val="list.id"
+                        max="5"
+                        size="sm"
+                        color="grey"
+                        :color-selected="ratingColors"
+                        label="ระดับการประเมินพฤติกรรม"
+                      >
+                        <template v-slot:tip-1>
+                          <q-tooltip>ต่ำกว่าความคาดหวังมาก</q-tooltip>
+                        </template>
+                        <template v-slot:tip-2>
+                          <q-tooltip>ต่ำกว่าความคาดหวังค่อนข้างมาก</q-tooltip>
+                        </template>
+                        <template v-slot:tip-3>
+                          <q-tooltip>เป็นไปตามความคาดหวัง</q-tooltip>
+                        </template>
+                        <template v-slot:tip-4>
+                          <q-tooltip>สูงว่าความคาดหวังค่อนข้างมาก</q-tooltip>
+                        </template>
+                        <template v-slot:tip-5>
+                          <q-tooltip>สูงกว่าความคาดหวังมาก</q-tooltip>
+                        </template>
+                      </q-rating>
+                    </q-item-section>
+                  </q-item>
+                  <q-separator class="q-my-xs" v-if="i + 1 < list2_3.length" />
+                </q-list>
+              </q-card>
+            </div>
+            <div class="col-12 row">
+              <div class="col-12 text-top0 row items-center q-pl-lg">
+                <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
+                2.4 อื่นๆ
+                <q-checkbox
+                  class="q-ml-sm"
+                  dense
+                  v-model="etc2"
+                  @click="
+                    (behavio_orther.text = ''), (behavio_orther.level = 0)
+                  "
+                />
+              </div>
+              <q-card
+                v-if="etc2"
+                flat
+                bordered
+                class="col-xs-12 col-sm-11 col-md-10 offset-md-1 q-pa-sm bg-grey-1"
+              >
+                <q-list dense>
+                  <q-item dense tag="label" v-ripple>
+                    <q-item-section>
+                      <q-item-label>
+                        <q-input
+                          v-model="behavio_orther.text"
+                          label="กรอกอื่นๆ"
+                          dense
+                          lazy-rules
+                          autogrow
+                          hide-bottom-space
+                          outlined
+                          class="bg-white"
+                          :rules="[
+                            (val) =>
+                              (val && val.length > 0) || 'กรุณากรอกข้อความ',
+                          ]"
+                        />
+                      </q-item-label>
+                    </q-item-section>
+                    <q-item-section side>
+                      <q-rating
+                        v-model="behavio_orther.level"
+                        max="5"
+                        size="sm"
+                        color="grey"
+                        :color-selected="ratingColors"
+                        label="ระดับการประเมินพฤติกรรม"
+                      >
+                        <template v-slot:tip-1>
+                          <q-tooltip>ต่ำกว่าความคาดหวังมาก</q-tooltip>
+                        </template>
+                        <template v-slot:tip-2>
+                          <q-tooltip>ต่ำกว่าความคาดหวังค่อนข้างมาก</q-tooltip>
+                        </template>
+                        <template v-slot:tip-3>
+                          <q-tooltip>เป็นไปตามความคาดหวัง</q-tooltip>
+                        </template>
+                        <template v-slot:tip-4>
+                          <q-tooltip>สูงว่าความคาดหวังค่อนข้างมาก</q-tooltip>
+                        </template>
+                        <template v-slot:tip-5>
+                          <q-tooltip>สูงกว่าความคาดหวังมาก</q-tooltip>
+                        </template>
+                      </q-rating>
+                    </q-item-section>
+                  </q-item>
+                </q-list>
+              </q-card>
+            </div>
+            <!-- <FormComment /> -->
+            <div class="row col-12 q-gutter-lg no-margin">
+              <div class="col-12 row">
+                <div class="col-12 text-top0 row items-center q-pl-lg">
+                  <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
+                  จุดเด่น (ไม่เกิน 5 บรรทัด)
+                </div>
+                <q-input
+                  outlined
+                  dense
+                  v-model="behavior_strength_desc"
+                  class="col-xs-12 col-sm-11 col-md-10 offset-md-1"
+                  lazy-rules
+                  type="textarea"
+                  label="กรอกจุดเด่น"
+                  hide-bottom-space
+                  :row="5"
+                  :rules="behavio_strengthRules"
+                  ref="behavio_strengthRef"
+                />
+              </div>
+              <div class="col-12 row">
+                <div class="col-12 text-top0 row items-center q-pl-lg">
+                  <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
+                  สิ่งที่ควรปรับปรุง (ไม่เกิน 5 บรรทัด)
+                </div>
+                <q-input
+                  outlined
+                  dense
+                  v-model="behavior_improve_desc"
+                  class="col-xs-12 col-sm-11 col-md-10 offset-md-1"
+                  lazy-rules
+                  type="textarea"
+                  hide-bottom-space
+                  label="กรอกสิ่งที่ควรปรับปรุง"
+                  :row="5"
+                  :rules="behavio_inproveRules"
+                  ref="behavio_inproveRef"
+                />
+              </div>
+            </div>
+          </div>
+
+          <!-- Part 3 -->
+          <!-- <Part3 /> -->
+          <div class="row col-12 q-gutter-lg no-margin">
+            <div class="col-12 row justify-center">
+              <div class="col-12 text-top0 items-center">
+                <q-avatar class="bg-grey-2 q-mr-sm" size="28px">3</q-avatar>
+                การพัฒนาผู้ทดลองปฏิบัติบัติหน้าที่ราชการ
+              </div>
+              <q-card
+                flat
+                bordered
+                class="col-xs-12 col-sm-11 col-md-11 q-pa-sm bg-grey-1"
+              >
+                <q-list dense>
+                  <q-item dense tag="label" v-ripple>
+                    <q-item-section>
+                      <q-item-label>1. การปฐมนิเทศ</q-item-label>
+                    </q-item-section>
+                    <q-item-section side>
+                      <div class="row">
+                        <q-radio
+                          checked-icon="task_alt"
+                          unchecked-icon="panorama_fish_eye"
+                          v-model="orientation"
+                          val="1"
+                          label="ดำเนินการเเล้ว"
+                        />
+                        <q-radio
+                          checked-icon="task_alt"
+                          unchecked-icon="panorama_fish_eye"
+                          v-model="orientation"
+                          val="0"
+                          label=" ยังไม่ได้ดำเนินการ"
+                        />
+                      </div>
+                    </q-item-section>
+                  </q-item>
+                  <q-separator class="q-my-xs" />
+                  <q-item dense tag="label" v-ripple>
+                    <q-item-section>
+                      <q-item-label>2. การเรียนรู้ด้วยตนเอง</q-item-label>
+                    </q-item-section>
+                    <q-item-section side>
+                      <div class="row">
+                        <q-radio
+                          checked-icon="task_alt"
+                          unchecked-icon="panorama_fish_eye"
+                          v-model="self_learning"
+                          val="1"
+                          label="ดำเนินการเเล้ว"
+                        />
+                        <q-radio
+                          checked-icon="task_alt"
+                          unchecked-icon="panorama_fish_eye"
+                          v-model="self_learning"
+                          val="0"
+                          label=" ยังไม่ได้ดำเนินการ"
+                        />
+                      </div>
+                    </q-item-section>
+                  </q-item>
+                  <q-separator class="q-my-xs" />
+                  <q-item dense tag="label" v-ripple>
+                    <q-item-section>
+                      <q-item-label>3. การอบรมสัมนาร่วมกัน</q-item-label>
+                    </q-item-section>
+                    <q-item-section side>
+                      <div class="row">
+                        <q-radio
+                          checked-icon="task_alt"
+                          unchecked-icon="panorama_fish_eye"
+                          v-model="training_seminar"
+                          val="1"
+                          label="ดำเนินการเเล้ว"
+                        />
+                        <q-radio
+                          checked-icon="task_alt"
+                          unchecked-icon="panorama_fish_eye"
+                          v-model="training_seminar"
+                          val="0"
+                          label=" ยังไม่ได้ดำเนินการ"
+                        />
+                      </div>
+                    </q-item-section>
+                  </q-item>
+                  <q-separator class="q-my-xs" />
+                  <q-item dense tag="label" v-ripple>
+                    <q-item-section>
+                      <q-item-label
+                        >4. การอบรมอื่น ๆ ตามที่หน่วยงานกำหนด
+                        (ถ้ามี)</q-item-label
+                      >
+                    </q-item-section>
+                    <q-item-section side>
+                      <div class="row">
+                        <q-radio
+                          checked-icon="task_alt"
+                          unchecked-icon="panorama_fish_eye"
+                          v-model="other_training"
+                          val="1"
+                          label="ดำเนินการเเล้ว"
+                        />
+                        <q-radio
+                          checked-icon="task_alt"
+                          unchecked-icon="panorama_fish_eye"
+                          v-model="other_training"
+                          val="0"
+                          label=" ยังไม่ได้ดำเนินการ"
+                        />
+                      </div>
+                    </q-item-section>
+                  </q-item>
+                </q-list>
+              </q-card>
+            </div>
+          </div>
+
+          <!-- Footer -->
+          <!-- <Footer /> -->
+          <div class="row col-12 q-gutter-lg no-margin">
+            <div class="col-12 row">
+              <div class="col-12 text-top2 row items-center">
+                ผู้บังคับบัญชา/ผู้มอบหมายงาน
+              </div>
+              <div class="col-12 row q-col-gutter-md">
+                <q-select
+                  class="col-xs-12 col-sm-8"
+                  dense
+                  v-model="Autherise"
+                  outlined
+                  :options="option"
+                  label="ผู้บังคับบัญชา"
+                  option-label="name"
+                  disable
+                />
+                <div class="col-xs-12 col-sm-4">
+                  <datepicker
+                    menu-class-name="modalfix"
+                    v-model="dateAutherise"
+                    :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 col-3"
+                        :model-value="
+                          dateAutherise != null
+                            ? date2Thai(dateAutherise)
+                            : 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>
+            </div>
+          </div>
+          <q-toolbar class="text-primary">
+            <q-space />
+            <q-btn label="บันทึก" color="secondary" @click="savaForm" />
+          </q-toolbar>
+        </div>
+      </q-card-section>
+    </q-card-section>
+  </q-card>
+</template>
+
+<style lang="scss" scoped>
+.text-top2 {
+  font-weight: 500;
+  padding-bottom: 8px;
+  color: rgb(70, 68, 68);
+}
+
+.text-top0 {
+  font-weight: 600;
+  padding-bottom: 8px;
+  color: rgb(70, 68, 68);
+}
+
+.q-rating__icon {
+  text-shadow: transparent !important;
+}
+
+.q-card {
+  box-shadow: 0px 0px 0px 0px !important;
+}
+</style>
diff --git a/src/modules/05_placement/components/probation/FormEvaluation/Header.vue b/src/modules/05_placement/components/probation/FormEvaluation/Header.vue
index 5e87f4d44..05c1dcc30 100644
--- a/src/modules/05_placement/components/probation/FormEvaluation/Header.vue
+++ b/src/modules/05_placement/components/probation/FormEvaluation/Header.vue
@@ -1,23 +1,43 @@
 <script setup lang="ts">
-import { ref, watch } from "vue";
-const tabHead = ref<string>("save1");
+import { ref, watch, onMounted } from "vue";
+import { useRoute, useRouter } from "vue-router";
 
+const router = useRouter();
+
+const tabHead = ref<string>("save1");
 const props = defineProps({
   changeTab: {
     type: Function,
     default() {
-      return 'Default function'
-    }
-  }
-})
+      return "Default function";
+    },
+  },
+  activeTab: String,
+});
+onMounted(() => {
+  console.log(props);
+});
 
 watch(tabHead, () => {
-  props.changeTab(tabHead.value)
+  console.log(props);
+
+  props.changeTab(tabHead.value);
 });
+const nextPage = () => {
+  if (props.activeTab) {
+    router.push(
+      "/probation/detail/add/08db721d-ade4-480e-8d84-0853946a0ea5/f4ce5428-98b6-4425-88fe-24c29db9f885"
+    );
+  }
+
+  // const url =
+  //   "/probation/detail/add/08db721d-ade4-480e-8d84-0853946a0ea5/f4ce5428-98b6-4425-88fe-24c29db9f885";
+  // window.open(url, "_blank");
+};
 </script>
 
 <template>
-      <q-header class="bg-grey-1">
+  <q-header class="bg-grey-1">
     <div class="bg-grey-1">
       <div class="col-12 row q-gutter-x-md items-center">
         <q-tabs
@@ -103,7 +123,7 @@ watch(tabHead, () => {
             </q-btn> -->
         </q-tabs>
         <div>
-          <q-btn color="blue" flat dense icon="mdi-plus">
+          <q-btn color="blue" flat dense icon="mdi-plus" @click="nextPage">
             <q-tooltip> เพิ่ม </q-tooltip>
           </q-btn>
         </div>
@@ -111,5 +131,4 @@ watch(tabHead, () => {
       <q-separator />
     </div>
   </q-header>
-
-</template>
\ No newline at end of file
+</template>
diff --git a/src/modules/05_placement/components/probation/FormEvaluation/Template1.vue b/src/modules/05_placement/components/probation/FormEvaluation/Template1.vue
index 251df64ee..d930a13b9 100644
--- a/src/modules/05_placement/components/probation/FormEvaluation/Template1.vue
+++ b/src/modules/05_placement/components/probation/FormEvaluation/Template1.vue
@@ -1,31 +1,152 @@
 <script setup lang="ts">
-import { ref, defineAsyncComponent } from "vue";
+import { ref, defineAsyncComponent, watch, onMounted } from "vue";
+import { useCounterMixin } from "@/stores/mixin";
+import { useQuasar } from "quasar";
+import { useRoute } from "vue-router";
+import http from "@/plugins/http";
+import config from "@/app.config";
 
+const route = useRoute();
+const $q = useQuasar();
+const mixin = useCounterMixin();
+const { showLoader, hideLoader, messageError, success } = mixin;
+const assignId = ref<string>(route.params.form.toString());
+
+const evaluate = ref<any>([]);
+const tabHead = ref<string>("save1");
+const tabs = ref<any>([]);
 const tab = ref<string>("save1");
+const activeTab = ref<string>("tab2");
+
+const props = defineProps({
+  activeTab: String,
+});
+onMounted(() => {
+  console.log(props.activeTab);
+  // fecthAssign(assignId.value);
+});
+watch(props, () => {
+  console.log(props);
+});
+// const fecthAssign = async (id: string) => {
+//   showLoader();
+//   await http
+//     .get(config.API.formevaluate(id))
+//     .then((res: any) => {
+//       evaluate.value = res.data.data.evaluate;
+//       tabs.value = evaluate.value;
+
+//       console.log(tabs.value);
+//     })
+//     .catch((e: any) => {
+//       console.log(e);
+//       messageError($q, e);
+//     })
+//     .finally(() => {
+//       hideLoader();
+//     });
+// };
+
 const changeTab = (tabVal: string) => {
-  tab.value = tabVal
-}
+  console.log(tabVal);
+  tab.value = tabVal;
+};
+const nextPage = () => {
+  const newTabLabel = tabs.value.length + 1;
+  tabs.value.push({ no: newTabLabel });
+};
 
 const Header = defineAsyncComponent(
-  () => import("@/modules/05_placement/components/probation/FormEvaluation/Header.vue")
+  () =>
+    import(
+      "@/modules/05_placement/components/probation/FormEvaluation/Header.vue"
+    )
 );
 const FormSaveResult = defineAsyncComponent(
-  () => import("@/modules/05_placement/components/probation/FormEvaluation/FormSaveResult.vue")
-)
-</script>  
+  () =>
+    import(
+      "@/modules/05_placement/components/probation/FormEvaluation/FormSaveResult.vue"
+    )
+);
+</script>
 
 <template>
-  <Header :change-tab="changeTab" />
+  <Header :change-tab="changeTab" :activeTab="activeTab" />
+  <!-- <q-header class="bg-grey-1">
+    <div class="bg-grey-1">
+      <div class="col-12 row q-gutter-xs-md items-center">
+        <q-tabs
+          dense
+          v-model="tabHead"
+          active-class="text-primary text-weight-medium"
+          indicator-color="grey-1"
+          class="text-grey-7"
+        >
+          <q-tab
+            v-for="tabData in tabs"
+            :key="tabData.no"
+            :name="tabData.no"
+            :label="'ครั้งที่' + tabData.no"
+            @click="changeTab('save' + tabData.no)"
+          >
+            <q-btn
+              size="12px"
+              flat
+              dense
+              icon="mdi-download"
+              :disable="tabHead !== tabData.no"
+              :color="tabHead !== tabData.no ? '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>
+          </q-tab>
+        </q-tabs>
+        <div>
+          <q-btn color="blue" flat dense icon="mdi-plus" @click="nextPage">
+            <q-tooltip> เพิ่ม </q-tooltip>
+          </q-btn>
+        </div>
+      </div>
+      <q-separator />
+    </div>
+  </q-header> -->
+  <!-- <q-page-container>
+    <q-tab-panels v-model="tab" animated>
+      <q-tab-panel
+        v-for="tabName in tabs"
+        :key="tabName"
+        :name="'save' + tabName.no"
+      >
+        <FormSaveResult :tab="tab" />
+      </q-tab-panel>
+    </q-tab-panels>
+  </q-page-container> -->
 
   <q-page-container>
     <q-tab-panels v-model="tab" animated>
       <q-tab-panel name="save1">
-        <FormSaveResult />
+        <FormSaveResult :tab="tab" />
       </q-tab-panel>
 
       <q-tab-panel name="save2">
-        <FormSaveResult />
+        <FormSaveResult :tab="tab" />
       </q-tab-panel>
     </q-tab-panels>
   </q-page-container>
-</template>
\ No newline at end of file
+</template>
diff --git a/src/modules/05_placement/components/probation/FormEvaluation/Template2.vue b/src/modules/05_placement/components/probation/FormEvaluation/Template2.vue
index 72f5cc6db..8c7ac36af 100644
--- a/src/modules/05_placement/components/probation/FormEvaluation/Template2.vue
+++ b/src/modules/05_placement/components/probation/FormEvaluation/Template2.vue
@@ -18,11 +18,11 @@ const FormEvaluate = defineAsyncComponent(
   <q-page-container>
     <q-tab-panels v-model="tab" animated>
       <q-tab-panel name="save1">
-        <FormEvaluate />
+        <FormEvaluate :tab="tab" />
       </q-tab-panel>
 
       <q-tab-panel name="save2">
-        <FormEvaluate />
+        <FormEvaluate :tab="tab"/>
       </q-tab-panel>
     </q-tab-panels>
   </q-page-container>
diff --git a/src/modules/05_placement/components/probation/FormEvaluation/Template2Format2.vue b/src/modules/05_placement/components/probation/FormEvaluation/Template2Format2.vue
index 3e5e91bdf..85be758b1 100644
--- a/src/modules/05_placement/components/probation/FormEvaluation/Template2Format2.vue
+++ b/src/modules/05_placement/components/probation/FormEvaluation/Template2Format2.vue
@@ -2,15 +2,21 @@
 import { ref, defineAsyncComponent } from "vue";
 const tab = ref<string>("save1");
 const changeTab = (tabVal: string) => {
-  tab.value = tabVal
-}
+  tab.value = tabVal;
+};
 const Header = defineAsyncComponent(
-  () => import("@/modules/05_placement/components/probation/FormEvaluation/Header.vue")
+  () =>
+    import(
+      "@/modules/05_placement/components/probation/FormEvaluation/Header.vue"
+    )
 );
 const FormEvaluateScore = defineAsyncComponent(
-  () => import("@/modules/05_placement/components/probation/FormEvaluation/FormEvaluateScore.vue")
-)
-</script>  
+  () =>
+    import(
+      "@/modules/05_placement/components/probation/FormEvaluation/FormEvaluateScore.vue"
+    )
+);
+</script>
 
 <template>
   <Header :change-tab="changeTab" />
@@ -18,12 +24,12 @@ const FormEvaluateScore = defineAsyncComponent(
   <q-page-container>
     <q-tab-panels v-model="tab" animated>
       <q-tab-panel name="save1">
-        <FormEvaluateScore />
+        <FormEvaluateScore :tab="tab" />
       </q-tab-panel>
 
-      <!-- <q-tab-panel name="save2">
-        <FormEvaluateScore />
-      </q-tab-panel> -->
+      <q-tab-panel name="save2">
+        <FormEvaluateScore :tab="tab" />
+      </q-tab-panel>
     </q-tab-panels>
   </q-page-container>
-</template>
\ No newline at end of file
+</template>
diff --git a/src/modules/05_placement/components/probation/MainDetail.vue b/src/modules/05_placement/components/probation/MainDetail.vue
index 0eade7fc3..8ad5c3a0f 100644
--- a/src/modules/05_placement/components/probation/MainDetail.vue
+++ b/src/modules/05_placement/components/probation/MainDetail.vue
@@ -112,7 +112,7 @@ const activeTab = ref<string>("tab1");
             </q-tab-panel>
 
             <q-tab-panel name="tab2">
-              <TabsTemplate1 />
+              <TabsTemplate1 :activeTab="activeTab"/>
             </q-tab-panel>
 
             <q-tab-panel name="tab3">
diff --git a/src/modules/05_placement/router.ts b/src/modules/05_placement/router.ts
index 614adfb7c..81d7b1e73 100644
--- a/src/modules/05_placement/router.ts
+++ b/src/modules/05_placement/router.ts
@@ -50,10 +50,11 @@ const RepatriationOrderAdd = () =>
 const receiveMain = () =>
   import("@/modules/05_placement/components/Receive/receiveMain.vue");
 
-  const receiveDetail = () =>
+const receiveDetail = () =>
   import("@/modules/05_placement/components/Receive/receiveDetail.vue");
-  const ReceiveAdd = () =>
+const ReceiveAdd = () =>
   import("@/modules/05_placement/components/Receive/FormAdd.vue");
+const FormSaveResultAdd = () => import("/src/modules/05_placement/components/probation/FormEvaluation/FormSaveResultAdd.vue")
 
 export default [
   {
@@ -156,6 +157,16 @@ export default [
       Role: "placement",
     },
   },
+  {
+    path: "/probation/detail/add/:id/:form",
+    name: "probationFormAdd",
+    component: FormSaveResultAdd,
+    meta: {
+      Auth: true,
+      Key: [6.3],
+      Role: "placement",
+    },
+  },
   {
     path: "/probation/work/add",
     name: "probationWorkAdd",

From 8710baa6438862ced1ecf7e636b82e8638ed3987 Mon Sep 17 00:00:00 2001
From: setthawutttty <stw.ttty@gmail.com>
Date: Fri, 11 Aug 2023 17:09:10 +0700
Subject: [PATCH 094/113] =?UTF-8?q?=E0=B8=AB=E0=B8=99=E0=B9=89=E0=B8=B2=20?=
 =?UTF-8?q?ui=20=E0=B8=A3=E0=B8=B2=E0=B8=A2=E0=B8=81=E0=B8=B2=E0=B8=A3?=
 =?UTF-8?q?=E0=B8=AA=E0=B9=88=E0=B8=87=E0=B8=95=E0=B8=B1=E0=B8=A7=E0=B8=81?=
 =?UTF-8?q?=E0=B8=A5=E0=B8=B1=E0=B8=9A?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/05_placement/api.placement.ts         |  13 +-
 .../components/Repatriate/RepatriateMain.vue  | 610 ++++++++++++++++++
 .../components/Repatriate/RepatriatebyId.vue  | 508 +++++++++++++++
 .../helpgovernment/governmentDetail.vue       | 402 +++++++++---
 .../components/helpgovernment/mainHelp.vue    | 256 +++-----
 src/modules/05_placement/router.ts            |  28 +-
 6 files changed, 1549 insertions(+), 268 deletions(-)
 create mode 100644 src/modules/05_placement/components/Repatriate/RepatriateMain.vue
 create mode 100644 src/modules/05_placement/components/Repatriate/RepatriatebyId.vue

diff --git a/src/api/05_placement/api.placement.ts b/src/api/05_placement/api.placement.ts
index 66d662813..f86b18453 100644
--- a/src/api/05_placement/api.placement.ts
+++ b/src/api/05_placement/api.placement.ts
@@ -103,19 +103,24 @@ export default {
   transferUser: `${transfer}/user`,
   transferUserId: (id: string) => `${transfer}/user/${id}`,
   transferConfirmId: (id: string) => `${transfer}/confirm/${id}`,
-  officerMain: () => `${placement}/officer`,
-  officerDetail: (id:string) => `${placement}/officer/${id}`,
-  officerMainDelete: (id:string) => `${placement}/officer/${id}`,
+
 
   // แต่งตั้ง-เลื่อน
   placemenAppointment,
 
   // ช่วยราชการ
   placemenHelpGov,
+  officerMain: () => `${placement}/officer`,
+  officerDetail: (id:string) => `${placement}/officer/${id}`,
+  officerMainDelete: (id:string) => `${placement}/officer/${id}`,
+  officerMainReport: () => `${placement}/officer/report`,
 
   // ส่งตัวกลับ
   placemenRepatriation,
-
+  repatriationMain: () => `${placement}/repatriation`,
+  repatriationDetail: (id:string) => `${placement}/repatriation/${id}`,
+  repatriationMainDelete: (id:string) => `${placement}/repatriation/${id}`,
+  repatriationMainReport: () => `${placement}/repatriation/report`,
   // ขอย้าย
   placemenRelocation,
 
diff --git a/src/modules/05_placement/components/Repatriate/RepatriateMain.vue b/src/modules/05_placement/components/Repatriate/RepatriateMain.vue
new file mode 100644
index 000000000..2deb571b2
--- /dev/null
+++ b/src/modules/05_placement/components/Repatriate/RepatriateMain.vue
@@ -0,0 +1,610 @@
+<script setup lang="ts">
+import { ref, computed, onMounted } from "vue";
+import type { QTableProps } from "quasar";
+import { useQuasar } from "quasar";
+import { useRouter } from "vue-router";
+import { useCounterMixin } from "@/stores/mixin";
+import { useTransferDataStore } from "@/modules/05_placement/store";
+import http from "@/plugins/http";
+import config from "@/app.config";
+const transferStore = useTransferDataStore();
+const { statusText } = transferStore;
+import DialogFooter from "@/modules/05_placement/components/PersonalList/DialogFooter.vue";
+import DialogHeader from "@/modules/05_placement/components/PersonalList/DialogHeader.vue";
+
+import type { officerType } from "@/modules/05_placement/interface/response/officer";
+
+const selected = ref<officerType[]>([]);
+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<officerType[]>([]);
+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(`/repatriate/detail/${id}`)
+}
+const openModal = () => (modal.value = true);
+const closeModal = () => (modal.value = false);
+const openModalOrder = () => {
+  openModal();
+  const row = rows.value.filter(
+    (item: officerType) =>
+      item.status == "WAITTING" || item.status == "PENDING" || item.status == "APPROVE"
+  );
+  rows2.value = row;
+};
+const getData = async () => {
+  showLoader();
+  await http
+    .get(config.API.repatriationMain())
+    .then((res: any) => {
+      const data = res.data.result;
+      console.log("data==>", data);
+      rows.value = data.map((item: officerType) => ({
+        id: item.id,
+        fullname:`${item.prefix}${item.firstName} ${item.lastName}`,
+        position: item.position,
+        posNo: item.posNo,
+        positionLevel: item.positionLevel,
+        createdAt: date2Thai(item.createdAt),
+        organization: item.organization,
+        reason: item.reason,
+        status: item.status,
+        statusText:statusText(item.status),
+        date: item.date,
+        salary: item.salary,
+        positionTypeOld: item.positionTypeOld,
+        positionLevelOld: item.positionLevelOld,
+        positionNumberOld: item.positionNumberOld,
+        organizationPositionOld: item.organizationPositionOld,
+        isActive: item.isActive,
+      })
+      );
+      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.repatriationMainReport(), body)
+    .then((res: any) => {
+      //   const data = res.data.result;
+      //   console.log(data);
+      success($q, "ส่งไปออกคำสั่งส่งตัวกลับสำเร็จ");
+      closeModal();
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(async () => {
+      await getData();
+      hideLoader();
+    });
+};
+const deleteData = async (id:string) => {
+  await http
+  .delete(config.API.repatriationMainDelete(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()
+    
+  );
+};
+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 }}
+                </q-td>
+                <q-td key="position" :props="props" @click="openDetail(props.row.id)">
+                  {{ props.row.position }}
+                </q-td>
+                <q-td key="positionLevel" :props="props" @click="openDetail(props.row.id)">
+                  {{ props.row.positionLevel }}
+                </q-td>
+                <q-td key="organizationPositionOld" :props="props" @click="openDetail(props.row.id)">
+                  <div class="table_ellipsis">
+                  {{ props.row.organizationPositionOld }}
+                </div>
+                </q-td>
+                <q-td key="organization" :props="props" @click="openDetail(props.row.id)">
+                  <div class="table_ellipsis">
+                  {{ props.row.organization }}
+                </div>
+                </q-td>
+                <q-td key="statusText" :props="props" @click="openDetail(props.row.id)">
+                  {{ props.row.statusText }}
+                </q-td>
+                <q-td auto-width>
+                  <q-btn
+                    icon="delete"
+                    size="14px"
+                    color="red-7"
+                    flat
+                    round
+                    dense
+                    @click="clickDelete(props.row.fullname,props.row.id)"
+                  >
+                  <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="personalId"
+          class="custom-header-table"
+          :visible-columns="visibleColumns2"
+          selection="multiple"
+          v-model:selected="selected"
+        >
+          <template v-slot:header-selection="scope">
+            <q-checkbox
+              keep-color
+              color="primary"
+              dense
+              v-model="scope.selected"
+            />
+          </template>
+          <!-- <template v-slot:body-selection="scope">
+            <q-checkbox
+              keep-color
+              color="primary"
+              dense
+              v-model="scope.selected"
+            />
+          </template> -->
+          <template v-slot:body="props">
+            <q-tr :props="props" class="cursor-pointer">
+              <q-td>
+                <q-checkbox
+                  keep-color
+                  color="primary"
+                  dense
+                  v-model="props.selected"
+                />
+              </q-td>
+              <q-td key="no" :props="props">
+                {{ props.rowIndex + 1 }}
+              </q-td>
+              <q-td key="fullname" :props="props">
+                {{ props.row.fullname }}
+              </q-td>
+              <q-td key="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>
diff --git a/src/modules/05_placement/components/Repatriate/RepatriatebyId.vue b/src/modules/05_placement/components/Repatriate/RepatriatebyId.vue
new file mode 100644
index 000000000..2f214ec16
--- /dev/null
+++ b/src/modules/05_placement/components/Repatriate/RepatriatebyId.vue
@@ -0,0 +1,508 @@
+<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-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>
+  <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 firstName = ref<string>("");
+  const lastName = ref<string>("");
+  const position = ref<string>("");
+  const posNo = ref<string>("");
+  const positionLevel = 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 positionTypeOld = ref<string>("");
+  const positionLevelOld = 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.repatriationDetail(personId))
+      .then((res: any) => {
+        const data = res.data.result;
+        (fullname.value = `${data.prefix}${data.firstName} ${data.lastName}`),
+          (id.value = data.id);
+        prefix.value = data.prefix;
+        firstName.value = data.firstName;
+        lastName.value = data.lastName;
+        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;
+        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 = {
+      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.transferId(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>
+  <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>
+  
\ No newline at end of file
diff --git a/src/modules/05_placement/components/helpgovernment/governmentDetail.vue b/src/modules/05_placement/components/helpgovernment/governmentDetail.vue
index 08c864fc6..716269933 100644
--- a/src/modules/05_placement/components/helpgovernment/governmentDetail.vue
+++ b/src/modules/05_placement/components/helpgovernment/governmentDetail.vue
@@ -10,7 +10,7 @@
       class="q-mr-sm"
       @click="router.go(-1)"
     />
-    รายละเอียดการขอโอนช่วยราชการ {{ fullname }}
+    รายละเอียดการช่วยราชการ {{ 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">
@@ -48,7 +48,7 @@
             </div>
           </div>
         </div>
-        <div class="col-xs-6 col-sm-5 row items-center">
+        <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">
@@ -63,50 +63,212 @@
   <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=""
-      />
-      <q-btn
-        v-else
-        outline
-        color="primary"
-        dense
-        icon-right="download"
-        class="q-px-sm"
-        label="ดาวน์โหลด"
-      />
+      <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>
-    <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 }}
+    <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>
-        <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 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>
-    </div>
+    </q-form>
   </q-card>
 </template>
 <script setup lang="ts">
@@ -119,17 +281,17 @@ import http from "@/plugins/http";
 import config from "@/app.config";
 import keycloak from "@/plugins/keycloak";
 
-import type { QTableProps } from "quasar";
-import type {
-  TypeFile,
-  ResponseDataDetail,
-} from "@/modules/05_placement/interface/response/Transfer";
+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,
@@ -141,11 +303,11 @@ const {
 } = 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 fullname = ref<string>("");
 const id = ref<string>("");
 const prefix = ref<string>("");
 const firstName = ref<string>("");
@@ -157,57 +319,57 @@ const createdAt = ref<string>("");
 const organization = ref<string>("");
 const reason = ref<string>("");
 const status = ref<string>("");
-const date = ref<string>("");
+const date = ref<Date | null>(null);
 const salary = ref<string>("");
 const positionTypeOld = ref<string>("");
 const positionLevelOld = 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 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 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();
@@ -215,8 +377,8 @@ const getData = async () => {
     .get(config.API.officerDetail(personId))
     .then((res: any) => {
       const data = res.data.result;
-      fullname.value = `${data.prefix}${data.firstName} ${data.lastName}`,
-      id.value = data.id;
+      (fullname.value = `${data.prefix}${data.firstName} ${data.lastName}`),
+        (id.value = data.id);
       prefix.value = data.prefix;
       firstName.value = data.firstName;
       lastName.value = data.lastName;
@@ -236,14 +398,67 @@ const getData = async () => {
       isActive.value = data.isActive;
     })
     .catch((e) => {
-    //   messageError($q, 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 = {
+    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.transferId(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 () => {
+// const confirmMessage = async () => {
 //     dialogMessage(
 //       $q,
 //       "ต้องการยืนยันส่งคำร้องไปยัง สกจ หรือไม่?",
@@ -255,8 +470,7 @@ const getData = async () => {
 //       undefined
 //     );
 //   };
-
-//   const sendConfirm = async () => {
+// const sendConfirm = async () => {
 //     showLoader();
 //     await http
 //       .get(config.API.transferConfirmId(personId.toString()))
diff --git a/src/modules/05_placement/components/helpgovernment/mainHelp.vue b/src/modules/05_placement/components/helpgovernment/mainHelp.vue
index a36b8a59d..26c1e5a24 100644
--- a/src/modules/05_placement/components/helpgovernment/mainHelp.vue
+++ b/src/modules/05_placement/components/helpgovernment/mainHelp.vue
@@ -4,16 +4,17 @@ import type { QTableProps } from "quasar";
 import { useQuasar } from "quasar";
 import { useRouter } from "vue-router";
 import { useCounterMixin } from "@/stores/mixin";
-
+import { useTransferDataStore } from "@/modules/05_placement/store";
 import http from "@/plugins/http";
 import config from "@/app.config";
-
+const transferStore = useTransferDataStore();
+const { statusText } = transferStore;
 import DialogFooter from "@/modules/05_placement/components/PersonalList/DialogFooter.vue";
 import DialogHeader from "@/modules/05_placement/components/PersonalList/DialogHeader.vue";
 
 import type { officerType } from "@/modules/05_placement/interface/response/officer";
 
-const selected = ref([]);
+const selected = ref<officerType[]>([]);
 const checkSelected = computed(() => {
   if (selected.value.length === 0) {
     return true;
@@ -31,6 +32,7 @@ const {
   hideLoader,
   success,
   dialogMessage,
+
   
 } = mixin;
 
@@ -39,18 +41,10 @@ const visibleColumns = ref<string[]>([
   "no",
   "fullname",
   "position",
-  "posNo",
   "positionLevel",
-  "organization",
-  "reason",
-  "status",
-  "date",
-  "salary",
-  "positionTypeOld",
-  "positionLevelOld",
-  "positionNumberOld",
   "organizationPositionOld",
-  "createdAt",
+  "organization",
+  "statusText",
   "btn",
 ]);
 const visibleColumns2 = ref<string[]>([
@@ -58,9 +52,9 @@ const visibleColumns2 = ref<string[]>([
   "fullname",
   "position",
   "positionLevel",
-  "oc",
-  "agency",
-  "status",
+  "organizationPositionOld",
+  "organization",
+  "statusText",
 ]); //ค้นหา คอลัมน์ คอลัมน์ที่แสดง
 const filterKeyword = ref<string>("");
 const filterKeyword2 = ref<string>("");
@@ -141,70 +135,6 @@ const columns = ref<QTableProps["columns"]>([
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
-  {
-    name: "createdAt",
-    align: "left",
-    label: "วันเวลาที่ขอย้าย",
-    sortable: true,
-    field: "createdAt",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-  },
-  {
-    name: "positionTypeOld",
-    align: "left",
-    label: "ตำแหน่งในสายงานก่อนหน้า",
-    sortable: true,
-    field: "positionTypeOld",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-  },
-  {
-    name: "positionNumberOld",
-    align: "left",
-    label: "เลขที่ตำเเหน่งก่อนหน้า",
-    sortable: true,
-    field: "positionNumberOld",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-  },
-  {
-    name: "positionLevelOld",
-    align: "left",
-    label: "ระดับก่อนหน้า",
-    sortable: true,
-    field: "positionLevelOld",
-    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: "salary",
-    align: "left",
-    label: "เงินเดือนก่อนหน้า",
-    sortable: true,
-    field: "salary",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-  },
-  {
-    name: "reason",
-    align: "left",
-    label: "เหตุผลที่ย้ายหน่วยงาน",
-    sortable: true,
-    field: "reason",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-  },
-
   {
     name: "position",
     align: "left",
@@ -214,18 +144,6 @@ const columns = ref<QTableProps["columns"]>([
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
-
-  {
-    name: "posNo",
-    align: "left",
-    label: "เลขที่ตำเเหน่ง",
-    sortable: true,
-    field: "posNo",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-  },
-
-
   {
     name: "positionLevel",
     align: "left",
@@ -235,7 +153,15 @@ const columns = ref<QTableProps["columns"]>([
     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",
@@ -246,11 +172,11 @@ const columns = ref<QTableProps["columns"]>([
     style: "font-size: 14px",
   },
   {
-    name: "status",
+    name: "statusText",
     align: "left",
     label: "สถานะ",
     sortable: true,
-    field: "status",
+    field: "statusText",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
@@ -302,29 +228,29 @@ const columns2 = ref<QTableProps["columns"]>([
     style: "font-size: 14px",
   },
   {
-    name: "oc",
+    name: "organizationPositionOld",
     align: "left",
     label: "สังกัด",
     sortable: true,
-    field: "oc",
+    field: "organizationPositionOld",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
   {
-    name: "agency",
+    name: "organization",
     align: "left",
     label: "หน่วยงานที่ขอโอนไป",
     sortable: true,
-    field: "agency",
+    field: "organization",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
   {
-    name: "status",
+    name: "statusText",
     align: "left",
     label: "สถานะ",
     sortable: true,
-    field: "status",
+    field: "statusText",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
@@ -337,7 +263,14 @@ const openDetail = (id:string) => {
 }
 const openModal = () => (modal.value = true);
 const closeModal = () => (modal.value = false);
-
+const openModalOrder = () => {
+  openModal();
+  const row = rows.value.filter(
+    (item: officerType) =>
+      item.status == "WAITTING" || item.status == "PENDING" || item.status == "APPROVE"
+  );
+  rows2.value = row;
+};
 const getData = async () => {
   showLoader();
   await http
@@ -355,6 +288,7 @@ const getData = async () => {
         organization: item.organization,
         reason: item.reason,
         status: item.status,
+        statusText:statusText(item.status),
         date: item.date,
         salary: item.salary,
         positionTypeOld: item.positionTypeOld,
@@ -364,6 +298,7 @@ const getData = async () => {
         isActive: item.isActive,
       })
       );
+      console.log(rows.value )
     })
     .catch((e) => {
       // messageError($q, e);
@@ -372,7 +307,29 @@ const getData = async () => {
       hideLoader();
     });
 };
+const saveOrder = async () => {
+  const id = selected.value.map((item) => item.id);
+  const body = {
+    id,
+  };
 
+  showLoader();
+  await http
+    .post(config.API.officerMainReport(), 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.officerMainDelete(id))
@@ -387,6 +344,8 @@ const deleteData = async (id:string) => {
           await getData();
         });
 }
+
+
 const clickDelete = async (name:string,id:string) => {
   dialogMessage(
     $q,
@@ -413,14 +372,14 @@ onMounted(async () => {
       <div class="col-12">
         <div class="row col-12">
           <q-btn
-            @click="openModal"
+            @click="openModalOrder"
             size="14px"
             flat
             round
             color="add"
             icon="mdi-account-arrow-right"
           >
-            <q-tooltip>ส่งไปออกคำสั่งโอนออก</q-tooltip>
+            <q-tooltip>ส่งไปออกคำสั่งช่วยราชการ</q-tooltip>
           </q-btn>
 
           <q-space />
@@ -485,77 +444,36 @@ onMounted(async () => {
                 <q-td key="fullname" :props="props" @click="openDetail(props.row.id)">
                   {{ props.row.fullname }}
                 </q-td>
-                <q-td key="createdAt" :props="props" @click="openDetail(props.row.id)">
-                  {{ props.row.createdAt }}
-                </q-td>
-                <q-td key="positionTypeOld" :props="props" @click="openDetail(props.row.id)">
-                  {{ props.row.positionTypeOld }}
-                </q-td>
-                <q-td key="positionNumberOld" :props="props" @click="openDetail(props.row.id)">
-                  {{ props.row.positionNumberOld }}
-                </q-td>
-                <q-td key="positionLevelOld" :props="props" @click="openDetail(props.row.id)">
-                  {{ props.row.positionLevelOld }}
-                </q-td>
-                <q-td key="organizationPositionOld" :props="props" @click="openDetail(props.row.id)">
-                  {{ props.row.organizationPositionOld }}
-                </q-td>
-                <q-td key="salary" :props="props" @click="openDetail(props.row.id)">
-                  {{ props.row.salary }}
-                </q-td>
-                <q-td key="reason" :props="props" @click="openDetail(props.row.id)">
-                  {{ props.row.reason }}
-                </q-td>
                 <q-td key="position" :props="props" @click="openDetail(props.row.id)">
                   {{ props.row.position }}
                 </q-td>
-                <q-td key="posNo" :props="props" @click="openDetail(props.row.id)">
-                  {{ props.row.posNo }}
-                </q-td>
                 <q-td key="positionLevel" :props="props" @click="openDetail(props.row.id)">
                   {{ props.row.positionLevel }}
                 </q-td>
+                <q-td key="organizationPositionOld" :props="props" @click="openDetail(props.row.id)">
+                  <div class="table_ellipsis">
+                  {{ props.row.organizationPositionOld }}
+                </div>
+                </q-td>
                 <q-td key="organization" :props="props" @click="openDetail(props.row.id)">
+                  <div class="table_ellipsis">
                   {{ props.row.organization }}
+                </div>
                 </q-td>
-                <q-td key="agency" :props="props" @click="openDetail(props.row.id)">
-                  {{ props.row.agency }}
-                </q-td>
-                <q-td key="status" :props="props" @click="openDetail(props.row.id)">
-                  {{ props.row.status }}
+                <q-td key="statusText" :props="props" @click="openDetail(props.row.id)">
+                  {{ props.row.statusText }}
                 </q-td>
                 <q-td auto-width>
                   <q-btn
-                    icon="mdi-dots-vertical"
-                    size="12px"
-                    color="grey-7"
+                    icon="delete"
+                    size="14px"
+                    color="red-7"
                     flat
                     round
                     dense
+                    @click="clickDelete(props.row.fullname,props.row.id)"
                   >
-                    <q-menu
-                      transition-show="jump-down"
-                      transition-hide="jump-up"
-                    >
-                      <q-list dense style="min-width: 100px">
-
-                        <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-tooltip>ลบข้อมูล</q-tooltip>
                   </q-btn>
                 </q-td>
               </q-tr>
@@ -568,7 +486,7 @@ onMounted(async () => {
 
   <q-dialog v-model="modal">
     <q-card style="width: 1200px; max-width: 80vw">
-      <DialogHeader title="ส่งไปออกคำสั่งโอนออก" :close="closeModal" />
+      <DialogHeader title="ส่งไปออกคำสั่งช่วยราชการ" :close="closeModal" />
       <q-separator />
       <q-card-section class="q-pt-none">
         <div class="row justify-end">
@@ -660,14 +578,18 @@ onMounted(async () => {
               <q-td key="positionLevel" :props="props">
                 {{ props.row.positionLevel }}
               </q-td>
-              <q-td key="oc" :props="props">
-                {{ props.row.oc }}
+              <q-td key="organizationPositionOld" :props="props">
+                <div class="table_ellipsis">
+                {{ props.row.organizationPositionOld }}
+              </div>
               </q-td>
-              <q-td key="agency" :props="props">
-                {{ props.row.agency }}
+              <q-td key="organization" :props="props">
+                <div class="table_ellipsis">
+                {{ props.row.organization }}
+              </div>
               </q-td>
-              <q-td key="status" :props="props">
-                {{ props.row.status }}
+              <q-td key="statusText" :props="props">
+                {{ props.row.statusText }}
               </q-td>
             </q-tr>
           </template>
@@ -677,7 +599,7 @@ onMounted(async () => {
       <q-card-actions align="right" class="bg-white text-teal">
         <q-btn
           label="ส่งไปออกคำสั่ง"
-          @click=""
+          @click="saveOrder"
           :disable="checkSelected"
           color="public"
         />
diff --git a/src/modules/05_placement/router.ts b/src/modules/05_placement/router.ts
index 216bfdf50..d3c92e87f 100644
--- a/src/modules/05_placement/router.ts
+++ b/src/modules/05_placement/router.ts
@@ -33,7 +33,10 @@ const RepatriationOrder = () =>
   import("@/modules/05_placement/components/RepatriationOrder/List.vue");
 const RepatriationOrderAdd = () =>
   import("@/modules/05_placement/components/RepatriationOrder/AddOrder.vue");
-
+  const helpgovernment = () => import("@/modules/05_placement/components/helpgovernment/mainHelp.vue")
+  const helpgovernmentbyId = () => import("@/modules/05_placement/components/helpgovernment/governmentDetail.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");
@@ -42,8 +45,7 @@ const receiveMain = () =>
   import("@/modules/05_placement/components/Receive/receiveDetail.vue");
   const ReceiveAdd = () =>
   import("@/modules/05_placement/components/Receive/FormAdd.vue");
-const helpgovernment = () => import("@/modules/05_placement/components/helpgovernment/mainHelp.vue")
-const helpgovernmentbyId = () => import("@/modules/05_placement/components/helpgovernment/governmentDetail.vue")
+
 export default [
   {
     path: "/placement",
@@ -225,4 +227,24 @@ export default [
       Role: "placement",
     },
   },
+  {
+    path: "/repatriate",
+    name: "repatriate",
+    component: repatriate,
+    meta: {
+      Auth: true,
+      Key: [6.7],
+      Role: "placement",
+    },
+  },
+  {
+    path: "/repatriate/detail/:id",
+    name: "repatriatebyId",
+    component: repatriatebyId,
+    meta: {
+      Auth: true,
+      Key: [6.7],
+      Role: "placement",
+    },
+  },
 ];

From 45fce1e58a0add8f60d17f8a20131b86224152ac Mon Sep 17 00:00:00 2001
From: waruneeta <warunee.auy@gmail.com>
Date: Fri, 11 Aug 2023 17:24:42 +0700
Subject: [PATCH 095/113] =?UTF-8?q?=E0=B9=81=E0=B8=81=E0=B9=89=20api=20?=
 =?UTF-8?q?=E0=B8=97=E0=B8=94=E0=B8=A5=E0=B8=AD=E0=B8=87=E0=B8=87=E0=B8=B2?=
 =?UTF-8?q?=E0=B8=99?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/index.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/api/index.ts b/src/api/index.ts
index 244b63653..51f162272 100644
--- a/src/api/index.ts
+++ b/src/api/index.ts
@@ -26,8 +26,8 @@ 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: "http://192.168.1.151:7776/v1",
+    API_PROBATION_URI: "https://bmaehr.joolsoft.com/nodeapi/v1",
+    // API_PROBATION_URI: "http://192.168.1.151:7776/v1",
   },
   test: {
     API_URI: "http://localhost:5010/api/v1",

From d09dbda153468d2a925323d29655aca778c2e910 Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Fri, 11 Aug 2023 17:56:01 +0700
Subject: [PATCH 096/113] =?UTF-8?q?=E0=B9=80=E0=B8=9E=E0=B8=B4=E0=B9=88?=
 =?UTF-8?q?=E0=B8=A1=20push.router?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../probation/FormEvaluation/FormReport.vue   |  25 +-
 .../10_order/components/step/step01.vue       | 307 ++++++++++++++----
 2 files changed, 260 insertions(+), 72 deletions(-)

diff --git a/src/modules/05_placement/components/probation/FormEvaluation/FormReport.vue b/src/modules/05_placement/components/probation/FormEvaluation/FormReport.vue
index 7fa0612c2..440d88e8d 100644
--- a/src/modules/05_placement/components/probation/FormEvaluation/FormReport.vue
+++ b/src/modules/05_placement/components/probation/FormEvaluation/FormReport.vue
@@ -19,12 +19,12 @@ const {
   hideLoader,
 } = mixin;
 const route = useRoute();
-const router = useRouter();
 const assignId = ref<string>(route.params.form.toString());
 
 const assign = ref<any>([]);
 const mentors = ref<any>([]);
 const commander = ref<any>([]);
+const status = ref<boolean>(true);
 const evaluate = ref<any>([]);
 
 onMounted(() => {
@@ -39,6 +39,8 @@ const fecthAssign = async (id: string) => {
       console.log(res);
       assign.value = res.data.data.assign;
       mentors.value = res.data.data.mentors;
+      date_start.value = assign.value.date_start;
+      date_finish.value = assign.value.date_finish;
 
       director_id.value = res.data.data.commander.name;
       director_id2.value = mentors.value[0].name;
@@ -55,14 +57,14 @@ const fecthAssign = async (id: string) => {
       hideLoader();
     });
 };
-const date_start = ref<Date>(new Date("10-10-2023"));
+const date_start = ref<Date>(new Date());
 const date_finish = ref<Date>();
 const develop = ref<number>();
 const result = ref<number>();
 const reson = ref<string>("");
 const chairman_dated = ref<string>("");
-const director1_dated = ref<string>("");
-const director2_dated = ref<string>("");
+const director1_dated = ref<any>("");
+const director2_dated = ref<any>("");
 const fecthResult = async (id: string) => {
   await http
     .get(config.API.evaluateReport(id))
@@ -77,6 +79,7 @@ const fecthResult = async (id: string) => {
       chairman_dated.value = data.chairman_dated;
       director1_dated.value = data.director1_dated;
       director2_dated.value = data.director2_dated;
+      status.value = false;
     })
     .catch((e) => {
       console.log(e);
@@ -87,11 +90,11 @@ const fecthResult = async (id: string) => {
 
 const options = [
   { value: 1, label: "พัฒนาครบ 3 ส่วน" },
-  { value: 0, label: "พัฒนาไม่ครบ 3 ส่วน" },
+  { value: 2, label: "พัฒนาไม่ครบ 3 ส่วน" },
 ];
 const optionsResult = [
   { value: 1, label: "ไม่ต่ำกว่ามาตรฐานที่กำหนด เห็นควรให้รับราชการต่อ" },
-  { value: 0, label: "ต่ำกว่ามาตรฐานที่กำหนด เห็นควรให้ออกจากราชการ" },
+  { value: 2, label: "ต่ำกว่ามาตรฐานที่กำหนด เห็นควรให้ออกจากราชการ" },
 ];
 
 const director_id = ref<any>(null);
@@ -272,6 +275,7 @@ const postData = async () => {
             emit-value
             map-options
             option-label="label"
+            option-value="value"
             outlined
             v-model="result"
             label="ผลการประเมินการทดลองปฏิบัติหน้าที่ราชการ"
@@ -371,7 +375,6 @@ const postData = async () => {
               :options="optionDirector"
               label=""
               option-label="name"
-             
             />
             <div class="col-xs-12 col-sm-4">
               <datepicker
@@ -430,7 +433,6 @@ const postData = async () => {
               :options="optionDirector"
               label=""
               option-label="name"
-             
             />
             <div class="col-xs-12 col-sm-4">
               <datepicker
@@ -479,7 +481,12 @@ const postData = async () => {
 
       <q-toolbar class="text-primary">
         <q-space />
-        <q-btn label="บันทึก" color="secondary" @click="savaForm" />
+        <q-btn
+          label="บันทึก"
+          color="secondary"
+          @click="savaForm"
+          v-if="status"
+        />
       </q-toolbar>
     </q-form>
   </div>
diff --git a/src/modules/10_order/components/step/step01.vue b/src/modules/10_order/components/step/step01.vue
index 9ba307395..1eef3cc73 100644
--- a/src/modules/10_order/components/step/step01.vue
+++ b/src/modules/10_order/components/step/step01.vue
@@ -3,10 +3,24 @@
     <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" />
+          <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'
           ) " -->
@@ -15,36 +29,73 @@
         <div class="col-xs-12 col-md-6">
           <!-- :readonly="!edit"
                 :borderless="!edit" -->
-          <q-input :class="getClass(true)" outlined dense lazy-rules v-model="nameOrder"
-            :rules="[(val) => !!val || `${'กรุณากรอกคำสั่งเรื่อง'}`]" :label="`${'คำสั่งเรื่อง'}`"
-            @update:modelValue="clickEditRow" hide-bottom-space />
+          <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" />
+            <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>
+          <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">
+            <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
+                  :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">
+          <datepicker
+            menu-class-name="modalfix"
+            v-model="dateCommand"
+            :locale="'th'"
+            autoApply
+            borderless
+            :enableTimePicker="false"
+            week-start="0"
+          >
             <template #year="{ year }">
               {{ year + 543 }}
             </template>
@@ -52,12 +103,24 @@
               {{ 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 || `${'กรุณาเลือกวันที่มีผลออกคำสั่ง'}`,
-  ]">
+              <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
+                    name="event"
+                    class="cursor-pointer"
+                    style="color: var(--q-primary)"
+                  >
                   </q-icon>
                 </template>
               </q-input>
@@ -66,10 +129,24 @@
         </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" />
+          <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'
           ) " -->
@@ -77,25 +154,55 @@
         <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 />
+          <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 />
+          <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="examRound"
-            :rules="[(val: string) => !!val || `${'กรุณาเลือกรอบการสอบ'}`]" hide-bottom-space :label="`${'รอบการสอบ'}`"
-            @update:modelValue="clickEditRow" emit-value map-options option-label="examRoundName"
-            :options="examRoundOption" option-value="examRoundValue" use-input input-debounce="0" />
+          <selector
+            :class="getClass(true)"
+            outlined
+            dense
+            lazy-rules
+            v-model="examRound"
+            :rules="[(val: string) => !!val || `${'กรุณาเลือกรอบการสอบ'}`]"
+            hide-bottom-space
+            :label="`${'รอบการสอบ'}`"
+            @update:modelValue="clickEditRow"
+            emit-value
+            map-options
+            option-label="examRoundName"
+            :options="examRoundOption"
+            option-value="examRoundValue"
+            use-input
+            input-debounce="0"
+          />
           <!-- @filter="(inputValue:string,
           doneFn:Function) => filterSelector(inputValue, doneFn,'testOption'
           ) " -->
@@ -109,18 +216,39 @@
           filterSelector(inputValue, doneFn,'positionOption' ) " -->
         </div>
         <div class="col-xs-12 col-md-6">
-          <selector :class="getClass(true)" outlined dense lazy-rules v-model="register"
-            :rules="[(val: string) => !!val || `${'กรุณาเลือกมติ กก. ครั้งที่ (เรื่อง รับสมัครสอบฯ)'}`]" hide-bottom-space
-            :label="`${'มติ กก. ครั้งที่ (เรื่อง รับสมัครสอบฯ)'}`" @update:modelValue="clickEditRow" emit-value
-            map-options option-label="name" :options="registerOption" option-value="id" use-input input-debounce="0" />
+          <selector
+            :class="getClass(true)"
+            outlined
+            dense
+            lazy-rules
+            v-model="register"
+            :rules="[(val: string) => !!val || `${'กรุณาเลือกมติ กก. ครั้งที่ (เรื่อง รับสมัครสอบฯ)'}`]"
+            hide-bottom-space
+            :label="`${'มติ กก. ครั้งที่ (เรื่อง รับสมัครสอบฯ)'}`"
+            @update:modelValue="clickEditRow"
+            emit-value
+            map-options
+            option-label="name"
+            :options="registerOption"
+            option-value="id"
+            use-input
+            input-debounce="0"
+          />
         </div>
         <!-- @filter="(inputValue:string,
         doneFn:Function) => filterSelector(inputValue, doneFn,'registerOption'
         ) " -->
 
         <div class="col-xs-12 col-md-6">
-          <datepicker menu-class-name="modalfix" v-model="dateRegister" :locale="'th'" autoApply borderless
-            :enableTimePicker="false" week-start="0">
+          <datepicker
+            menu-class-name="modalfix"
+            v-model="dateRegister"
+            :locale="'th'"
+            autoApply
+            borderless
+            :enableTimePicker="false"
+            week-start="0"
+          >
             <template #year="{ year }">
               {{ year + 543 }}
             </template>
@@ -128,13 +256,25 @@
               {{ parseInt(value + 543) }}
             </template>
             <template #trigger>
-              <q-input outlined dense class="full-width datepicker" :model-value="dateRegister != null ? date2Thai(dateRegister) : null
-                " :label="`${'ลงวันที่ (เรื่อง รับสมัครสอบฯ)'}`" :rules="[
-    (val) =>
-      !!val || `${'กรุณาเลือกลงวันที่ (เรื่อง รับสมัครสอบฯ)'}`,
-  ]">
+              <q-input
+                outlined
+                dense
+                class="full-width datepicker"
+                :model-value="
+                  dateRegister != null ? date2Thai(dateRegister) : null
+                "
+                :label="`${'ลงวันที่ (เรื่อง รับสมัครสอบฯ)'}`"
+                :rules="[
+                  (val) =>
+                    !!val || `${'กรุณาเลือกลงวันที่ (เรื่อง รับสมัครสอบฯ)'}`,
+                ]"
+              >
                 <template v-slot:prepend>
-                  <q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)">
+                  <q-icon
+                    name="event"
+                    class="cursor-pointer"
+                    style="color: var(--q-primary)"
+                  >
                   </q-icon>
                 </template>
               </q-input>
@@ -142,18 +282,38 @@
           </datepicker>
         </div>
         <div class="col-xs-12 col-md-6">
-          <selector :class="getClass(true)" outlined dense lazy-rules v-model="announce"
+          <selector
+            :class="getClass(true)"
+            outlined
+            dense
+            lazy-rules
+            v-model="announce"
             :rules="[(val: string) => !!val || `${'กรุณาเลือกมติ กก. ครั้งที่ (เรื่อง ผลการสอบแข่งขัน)'}`]"
-            hide-bottom-space :label="`${'มติ กก. ครั้งที่ (เรื่อง ผลการสอบแข่งขัน)'}`" @update:modelValue="clickEditRow"
-            emit-value map-options option-label="name" :options="announceOption" option-value="id" use-input
-            input-debounce="0" />
+            hide-bottom-space
+            :label="`${'มติ กก. ครั้งที่ (เรื่อง ผลการสอบแข่งขัน)'}`"
+            @update:modelValue="clickEditRow"
+            emit-value
+            map-options
+            option-label="name"
+            :options="announceOption"
+            option-value="id"
+            use-input
+            input-debounce="0"
+          />
           <!-- @filter="(inputValue:string,
           doneFn:Function) => filterSelector(inputValue, doneFn,'announceOption'
           ) "  -->
         </div>
         <div class="col-xs-12 col-md-6">
-          <datepicker menu-class-name="modalfix" v-model="dateAnnounce" :locale="'th'" autoApply borderless
-            :enableTimePicker="false" week-start="0">
+          <datepicker
+            menu-class-name="modalfix"
+            v-model="dateAnnounce"
+            :locale="'th'"
+            autoApply
+            borderless
+            :enableTimePicker="false"
+            week-start="0"
+          >
             <template #year="{ year }">
               {{ year + 543 }}
             </template>
@@ -161,13 +321,25 @@
               {{ parseInt(value + 543) }}
             </template>
             <template #trigger>
-              <q-input outlined dense class="full-width datepicker" :model-value="dateAnnounce != null ? date2Thai(dateAnnounce) : null
-                " :label="`${'ลงวันที่ (เรื่อง ผลการสอบแข่งขัน)'}`" :rules="[
-    (val) =>
-      !!val || `${'กรุณาเลือกลงวันที่ (เรื่อง ผลการสอบแข่งขัน)'}`,
-  ]">
+              <q-input
+                outlined
+                dense
+                class="full-width datepicker"
+                :model-value="
+                  dateAnnounce != null ? date2Thai(dateAnnounce) : null
+                "
+                :label="`${'ลงวันที่ (เรื่อง ผลการสอบแข่งขัน)'}`"
+                :rules="[
+                  (val) =>
+                    !!val || `${'กรุณาเลือกลงวันที่ (เรื่อง ผลการสอบแข่งขัน)'}`,
+                ]"
+              >
                 <template v-slot:prepend>
-                  <q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)">
+                  <q-icon
+                    name="event"
+                    class="cursor-pointer"
+                    style="color: var(--q-primary)"
+                  >
                   </q-icon>
                 </template>
               </q-input>
@@ -199,14 +371,22 @@ import type {
 import { useCounterMixin } from "@/stores/mixin";
 import type { QForm } from "quasar";
 import { useQuasar } from "quasar";
-import { useRoute } from "vue-router";
+import { useRoute, useRouter } from "vue-router";
 import http from "@/plugins/http";
 import config from "@/app.config";
 
 const mixin = useCounterMixin();
-const { date2Thai, messageError, showLoader, hideLoader, success, dialogMessage } = mixin;
+const {
+  date2Thai,
+  messageError,
+  showLoader,
+  hideLoader,
+  success,
+  dialogMessage,
+} = mixin;
 const $q = useQuasar(); //ใช้ noti quasar
 const route = useRoute();
+const router = useRouter();
 
 const props = defineProps({
   next: {
@@ -398,7 +578,7 @@ const fecthExamRoundOption = async () => {
       examRoundOption.value = res.data.result;
       console.log(examRoundOption.value);
     })
-    .catch((e) => { });
+    .catch((e) => {});
 };
 const submit = async () => {
   const formdata = {
@@ -446,6 +626,7 @@ const createListOrder = async (formData: Object) => {
     .then((res) => {
       const data = res.data.result;
       localStorage.setItem("orderId", data.id);
+      router.push(`/order/detail/${data.id}?step=${2}`);
       next();
       success($q, "บันทึกข้อมูลสำเร็จ");
     })

From d163ac8e1c90aa2fc667f51af1ea34a1c6958c60 Mon Sep 17 00:00:00 2001
From: waruneeta <warunee.auy@gmail.com>
Date: Fri, 11 Aug 2023 23:47:18 +0700
Subject: [PATCH 097/113] =?UTF-8?q?-=20add=20common=20dialog=20(remove,=20?=
 =?UTF-8?q?confirm=20&=20message=20notify)=20=E0=B9=81=E0=B8=A5=E0=B8=B0?=
 =?UTF-8?q?=E0=B8=A5=E0=B8=AD=E0=B8=87=E0=B9=83=E0=B8=8A=E0=B9=89=E0=B9=83?=
 =?UTF-8?q?=E0=B8=99=E0=B8=AA=E0=B9=88=E0=B8=A7=E0=B8=99=E0=B8=82=E0=B8=AD?=
 =?UTF-8?q?=E0=B8=87=E0=B8=AD=E0=B8=AD=E0=B8=81=E0=B8=84=E0=B8=B3=E0=B8=AA?=
 =?UTF-8?q?=E0=B8=B1=E0=B9=88=E0=B8=87=20-=20=E0=B9=80=E0=B8=9E=E0=B8=B4?=
 =?UTF-8?q?=E0=B9=88=E0=B8=A1=20action=20=E0=B8=AA=E0=B8=A3=E0=B9=89?=
 =?UTF-8?q?=E0=B8=B2=E0=B8=87=E0=B8=82=E0=B9=89=E0=B8=AD=E0=B8=A1=E0=B8=B9?=
 =?UTF-8?q?=E0=B8=A5=E0=B8=97=E0=B8=B8=E0=B8=81=E0=B8=AD=E0=B8=B1=E0=B8=99?=
 =?UTF-8?q?=E0=B8=97=E0=B8=B5=E0=B9=88=E0=B8=AA=E0=B9=88=E0=B8=87=E0=B8=88?=
 =?UTF-8?q?=E0=B8=B2=E0=B8=81=E0=B8=97=E0=B8=B0=E0=B9=80=E0=B8=9A=E0=B8=B5?=
 =?UTF-8?q?=E0=B8=A2=E0=B8=99=E0=B8=9B=E0=B8=A3=E0=B8=B0=E0=B8=A7=E0=B8=B1?=
 =?UTF-8?q?=E0=B8=95=E0=B8=B4=20-=20fix=20bug=20call=20function=20in=20cer?=
 =?UTF-8?q?tificate?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/Information/Certicate.vue      |   2 +-
 .../04_registry/components/Profile.vue        | 531 +++++--------
 .../components/OrderPlacement/step/step02.vue | 741 ------------------
 src/modules/10_order/components/Main.vue      |  10 +-
 .../10_order/components/step/step01.vue       | 310 ++------
 .../10_order/components/step/step02.vue       |  48 +-
 .../10_order/components/step/step03.vue       |  25 +-
 .../10_order/components/step/step04.vue       |  21 +-
 src/stores/mixin.ts                           |  75 ++
 9 files changed, 341 insertions(+), 1422 deletions(-)
 delete mode 100644 src/modules/05_placement/components/OrderPlacement/step/step02.vue

diff --git a/src/modules/04_registry/components/Information/Certicate.vue b/src/modules/04_registry/components/Information/Certicate.vue
index 009b7a290..43bc56bed 100644
--- a/src/modules/04_registry/components/Information/Certicate.vue
+++ b/src/modules/04_registry/components/Information/Certicate.vue
@@ -292,7 +292,7 @@ const store = useProfileDataStore();
 const { profileData, changeProfileColumns } = store;
 
 const mixin = useCounterMixin();
-const { date2Thai, success, dateToISO, messageError } = mixin;
+const { date2Thai, success, dateToISO, messageError, showLoader, hideLoader } = mixin;
 const route = useRoute();
 const id = ref<string>("");
 const certificateNo = ref<string>();
diff --git a/src/modules/04_registry/components/Profile.vue b/src/modules/04_registry/components/Profile.vue
index b2cda7dd5..2cde4cabd 100644
--- a/src/modules/04_registry/components/Profile.vue
+++ b/src/modules/04_registry/components/Profile.vue
@@ -6,17 +6,10 @@
           v-model:statusEdit="statusEdit"
           :profileType="profileType"
         /> -->
-        <Information
-          v-model:statusEdit="statusEdit"
-          :fetchDataProfile="fetchData"
-        />
+        <Information v-model:statusEdit="statusEdit" :fetchDataProfile="fetchData" />
       </div>
       <div id="government" name="16" class="row col-12 q-mt-md">
-        <Government
-          v-model:statusEdit="statusEdit"
-          :profileType="profileType"
-          :employeeClass="employeeClass"
-        />
+        <Government v-model:statusEdit="statusEdit" :profileType="profileType" :employeeClass="employeeClass" />
       </div>
       <div id="address" name="17" class="row col-12 q-mt-md">
         <Address v-model:statusEdit="statusEdit" />
@@ -40,20 +33,11 @@
         <CoinedVue v-model:statusEdit="statusEdit" :profileType="profileType" />
       </div>
       <div id="assessment" name="6" class="row col-12 q-mt-md">
-        <AssessmentVue
-          v-model:statusEdit="statusEdit"
-          :profileType="profileType"
-        />
+        <AssessmentVue v-model:statusEdit="statusEdit" :profileType="profileType" />
       </div>
       <div id="position" name="7" class="row col-12 q-mt-md">
-        <SalaryVue
-          v-model:statusEdit="statusEdit"
-          v-if="profileType === 'officer'"
-        />
-        <SalaryEmployeeTempVue
-          v-model:statusEdit="statusEdit"
-          v-else-if="employeeClass === 'temp'"
-        />
+        <SalaryVue v-model:statusEdit="statusEdit" v-if="profileType === 'officer'" />
+        <SalaryEmployeeTempVue v-model:statusEdit="statusEdit" v-else-if="employeeClass === 'temp'" />
         <SalaryEmployeeVue v-model:statusEdit="statusEdit" v-else />
       </div>
       <div id="rule" name="8" class="row col-12 q-mt-md">
@@ -78,70 +62,29 @@
         <DocumentVue v-model:statusEdit="statusEdit" />
       </div>
     </div>
-    <q-page-sticky
-      position="top"
-      expand
-      class="bg-grey-2 text-white"
-      style="z-index: 99; padding: 0% 1% 0% 1%"
-    >
-      <div
-        class="row col-12 q-gutter-sm q-pb-sm text-dark no-wrap items-center"
-      >
-        <q-btn
-          flat
-          round
-          class="bg-teal-1 full-height"
-          color="primary"
-          icon="mdi-chevron-left"
-          dense
-          @click="router.go(-1)"
-        >
+    <q-page-sticky position="top" expand class="bg-grey-2 text-white" style="z-index: 99; padding: 0% 1% 0% 1%">
+      <div class="row col-12 q-gutter-sm q-pb-sm text-dark no-wrap items-center">
+        <q-btn flat round class="bg-teal-1 full-height" color="primary" icon="mdi-chevron-left" dense
+          @click="router.go(-1)">
         </q-btn>
-        <q-avatar
-          v-if="imageUrl == null"
-          size="65px"
-          rounded
-          class="containerimage"
-        >
-          <img
-            src="@/assets/avatar_user.jpg"
-            class="bg-grey-3"
-            style="object-fit: cover"
-          />
-          <div
-            class="overlay absolute-bottom text-subtitle2 text-center cursor-pointer"
-            @click="clickImage()"
-          >
+        <q-avatar v-if="imageUrl == null" size="65px" rounded class="containerimage">
+          <img src="@/assets/avatar_user.jpg" class="bg-grey-3" style="object-fit: cover" />
+          <div class="overlay absolute-bottom text-subtitle2 text-center cursor-pointer" @click="clickImage()">
             <q-icon name="mdi-camera" size="18px" color="blue">
               <q-tooltip>อัปเดตรูปภาพ</q-tooltip>
             </q-icon>
 
-            <input
-              type="file"
-              style="display: none"
-              ref="inputImage"
-              accept="image/*"
-              @change="uploadImage"
-            />
+            <input type="file" style="display: none" ref="inputImage" accept="image/*" @change="uploadImage" />
           </div>
         </q-avatar>
         <q-avatar v-else size="65px" rounded class="containerimage">
           <img :src="imageUrl" class="bg-grey-3" style="object-fit: cover" />
-          <div
-            class="overlay absolute-bottom text-subtitle2 text-center cursor-pointer"
-            @click="clickImage()"
-          >
+          <div class="overlay absolute-bottom text-subtitle2 text-center cursor-pointer" @click="clickImage()">
             <q-icon name="mdi-camera" size="18px" color="blue">
               <q-tooltip>อัปเดตรูปภาพ</q-tooltip>
             </q-icon>
 
-            <input
-              type="file"
-              style="display: none"
-              ref="inputImage"
-              accept="image/*"
-              @change="uploadImage"
-            />
+            <input type="file" style="display: none" ref="inputImage" accept="image/*" @change="uploadImage" />
           </div>
         </q-avatar>
         <div class="row items-center text-dark q-ml-md">
@@ -157,25 +100,25 @@
         <q-btn round flat color="blue" icon="mdi-file-document">
           <q-menu transition-show="jump-down" transition-hide="jump-up">
             <q-list dense style="min-width: 160px">
-              <q-item clickable v-close-popup @click="postAdd">
+              <q-item clickable v-close-popup @click="helpPost">
                 <q-item-section style="min-width: 0px" avatar class="q-py-sm">
                 </q-item-section>
                 <q-item-section>ช่วยราชการ</q-item-section>
               </q-item>
               <q-separator />
-              <q-item clickable v-close-popup @click="postAdd">
+              <q-item clickable v-close-popup @click="repatriationPost">
                 <q-item-section style="min-width: 0px" avatar class="q-py-sm">
                 </q-item-section>
                 <q-item-section>ส่งตัวกลับ</q-item-section>
               </q-item>
               <q-separator />
-              <q-item clickable v-close-popup @click="postAdd">
+              <q-item clickable v-close-popup @click="appointPost">
                 <q-item-section style="min-width: 0px" avatar class="q-py-sm">
                 </q-item-section>
                 <q-item-section>แต่งตั้ง-เลื่อน</q-item-section>
               </q-item>
               <q-separator />
-              <q-item clickable v-close-popup @click="postAdd">
+              <q-item clickable v-close-popup @click="relocationPost">
                 <q-item-section style="min-width: 0px" avatar class="q-py-sm">
                 </q-item-section>
                 <q-item-section>ย้าย</q-item-section>
@@ -187,25 +130,25 @@
                 <q-item-section>ถึงแก่กรรม</q-item-section>
               </q-item>
               <q-separator />
-              <q-item clickable v-close-popup @click="postAdd">
+              <q-item clickable v-close-popup @click="outPost">
                 <q-item-section style="min-width: 0px" avatar class="q-py-sm">
                 </q-item-section>
                 <q-item-section>ให้ออกจากราชการ</q-item-section>
               </q-item>
               <q-separator />
-              <q-item clickable v-close-popup @click="postAdd">
+              <q-item clickable v-close-popup @click="dischargePost">
                 <q-item-section style="min-width: 0px" avatar class="q-py-sm">
                 </q-item-section>
                 <q-item-section>ปลดออกจากราชการ</q-item-section>
               </q-item>
               <q-separator />
-              <q-item clickable v-close-popup @click="postAdd">
+              <q-item clickable v-close-popup @click="expulsionPost">
                 <q-item-section style="min-width: 0px" avatar class="q-py-sm">
                 </q-item-section>
                 <q-item-section>ไล่ออกจากราชการ</q-item-section>
               </q-item>
               <q-separator />
-              <q-item clickable v-close-popup @click="postAdd">
+              <q-item clickable v-close-popup @click="otherPost">
                 <q-item-section style="min-width: 0px" avatar class="q-py-sm">
                 </q-item-section>
                 <q-item-section>อื่นๆ</q-item-section>
@@ -215,15 +158,8 @@
           </q-menu>
         </q-btn>
 
-        <q-btn
-          round
-          flat
-          :color="reasonStatus ? 'primary' : 'pink-5'"
-          @click="clickRetire()"
-          :icon="
-            reasonStatus ? 'mdi-home-import-outline' : 'mdi-home-export-outline'
-          "
-        >
+        <q-btn round flat :color="reasonStatus ? 'primary' : 'pink-5'" @click="clickRetire()" :icon="reasonStatus ? 'mdi-home-import-outline' : 'mdi-home-export-outline'
+          ">
           <q-tooltip>{{
             reasonStatus ? "การกลับเข้ารับราชการ" : "การออกจากราชการ"
           }}</q-tooltip>
@@ -237,9 +173,7 @@
                 <q-item-section class="text-blue">ก.พ.7/ก.ก.1</q-item-section>
               </q-item>
               <q-item clickable v-close-popup @click="clickKp7Short()">
-                <q-item-section class="text-primary"
-                  >ประวัติแบบย่อ</q-item-section
-                >
+                <q-item-section class="text-primary">ประวัติแบบย่อ</q-item-section>
               </q-item>
             </q-list>
           </q-menu>
@@ -251,20 +185,8 @@
     <q-card style="width: 90vw; max-width: 80vw">
       <q-card-section class="row items-center q-pb-xs col-12">
         <q-space />
-        <q-btn
-          @click="downloadKP7()"
-          unelevated
-          class="btn_purple q-mr-sm"
-          label="ดาวน์โหลด ก.พ.7/ก.ก.1"
-        ></q-btn>
-        <q-btn
-          icon="close"
-          unelevated
-          round
-          dense
-          @click="closeKp7"
-          style="color: #ff8080; background-color: #ffdede"
-        />
+        <q-btn @click="downloadKP7()" unelevated class="btn_purple q-mr-sm" label="ดาวน์โหลด ก.พ.7/ก.ก.1"></q-btn>
+        <q-btn icon="close" unelevated round dense @click="closeKp7" style="color: #ff8080; background-color: #ffdede" />
       </q-card-section>
       <q-card-section class="q-p-sm">
         <!-- <viewpdf
@@ -279,20 +201,9 @@
     <q-card style="width: 90vw; max-width: 80vw">
       <q-card-section class="row items-center q-pb-xs col-12">
         <q-space />
-        <q-btn
-          @click="downloadKP7Short()"
-          unelevated
-          class="btn_purple q-mr-sm"
-          label="ดาวน์โหลด ประวัติแบบย่อ"
-        ></q-btn>
-        <q-btn
-          icon="close"
-          unelevated
-          round
-          dense
-          @click="closeKp7Short"
-          style="color: #ff8080; background-color: #ffdede"
-        />
+        <q-btn @click="downloadKP7Short()" unelevated class="btn_purple q-mr-sm" label="ดาวน์โหลด ประวัติแบบย่อ"></q-btn>
+        <q-btn icon="close" unelevated round dense @click="closeKp7Short"
+          style="color: #ff8080; background-color: #ffdede" />
       </q-card-section>
       <q-card-section class="q-p-sm">
         <!-- <viewpdf
@@ -309,50 +220,28 @@
       <q-card-section class="q-py-sm row">
         <div class="text-h6">เลือกรูปภาพ</div>
         <q-space />
-        <q-btn
-          icon="close"
-          unelevated
-          round
-          dense
-          @click="closeImage"
-          style="color: #ff8080; background-color: #ffdede"
-        >
+        <q-btn icon="close" unelevated round dense @click="closeImage" style="color: #ff8080; background-color: #ffdede">
           <q-tooltip>ปิดหน้านี้</q-tooltip>
         </q-btn>
       </q-card-section>
       <q-separator />
       <q-card-section class="col-12 row">
-        <div
-          class="row wrap items-start col-12 q-col-gutter-sm"
-          style="height: 320px; overflow: auto"
-        >
+        <div class="row wrap items-start col-12 q-col-gutter-sm" style="height: 320px; overflow: auto">
           <div class="col-3" @click="addNewImage">
-            <div
-              style="
+            <div style="
                 height: 160px;
                 max-width: 15vw;
                 display: flex !important;
                 justify-content: center;
                 align-items: center;
-              "
-              class="column rounded-borders cursor-pointer bg-active-image text-white"
-            >
+              " class="column rounded-borders cursor-pointer bg-active-image text-white">
               <q-icon name="add" size="60px" color="white" />
               <strong>อัปโหลดรูปภาพ</strong>
             </div>
           </div>
-          <div
-            v-for="n in images"
-            :key="n"
-            class="col-3"
-            @click="imageActive(n)"
-          >
+          <div v-for="n in images" :key="n" class="col-3" @click="imageActive(n)">
             <div :class="getClass(n)">
-              <q-img
-                v-if="n.avatar != null"
-                :src="n.avatar"
-                :class="imageClass(n)"
-              >
+              <q-img v-if="n.avatar != null" :src="n.avatar" :class="imageClass(n)">
                 <!-- <div
                   class="absolute-top bg-transparent cursor-pointer text-right"
                   style="padding: 5px"
@@ -366,21 +255,11 @@
                     style="color: #ff8080"
                   />
                 </div> -->
-                <div
-                  class="absolute-bottom col-12 cursor-pointer flex justify-between items-center"
-                  style="padding: 5px"
-                >
+                <div class="absolute-bottom col-12 cursor-pointer flex justify-between items-center" style="padding: 5px">
                   {{ date2Thai(n.createdDate) }}
 
-                  <q-btn
-                    v-if="!n.isActive"
-                    icon="delete"
-                    unelevated
-                    dense
-                    @click="deletePhoto(n.id)"
-                    class="bg-white"
-                    style="color: #ff8080"
-                  />
+                  <q-btn v-if="!n.isActive" icon="delete" unelevated dense @click="deletePhoto(n.id)" class="bg-white"
+                    style="color: #ff8080" />
                 </div>
               </q-img>
             </div>
@@ -398,14 +277,7 @@
         >
           <q-tooltip>ลบรูปภาพ</q-tooltip>
         </q-btn> -->
-        <q-btn
-          icon="check"
-          dense
-          flat
-          round
-          @click="selectAvatarHistory"
-          color="positive"
-        >
+        <q-btn icon="check" dense flat round @click="selectAvatarHistory" color="positive">
           <q-tooltip>เลือกรูปภาพ</q-tooltip>
         </q-btn>
       </q-card-actions>
@@ -419,38 +291,18 @@
           <q-card-section class="q-py-sm row">
             <DialogHeader tittle="ถึงแก่กรรม" :close="closePassaway" />
             <div class="col-12 row q-pa-sm q-col-gutter-sm">
-              <q-file
-                class="col-12 col-sm-6 col-md-5"
-                outlined
-                dense
-                v-model="filePassaway"
-                label="แนบใบมรณบัตร"
-                hide-bottom-space
-                lazy-rules
-              >
+              <q-file class="col-12 col-sm-6 col-md-5" outlined dense v-model="filePassaway" label="แนบใบมรณบัตร"
+                hide-bottom-space lazy-rules>
                 <q-separator />
                 <template v-slot:prepend>
                   <q-icon name="attach_file" />
                 </template>
               </q-file>
-              <q-input
-                class="col-12 col-sm-6 col-md-7"
-                dense
-                outlined
-                v-model="deathCertificateNo"
-                label="เลขที่ใบมรณบัตร"
-              />
+              <q-input class="col-12 col-sm-6 col-md-7" dense outlined v-model="deathCertificateNo"
+                label="เลขที่ใบมรณบัตร" />
 
-              <datepicker
-                class="col-12 col-sm-6 col-md-5"
-                menu-class-name="modalfix"
-                v-model="dateDeath"
-                :locale="'th'"
-                autoApply
-                borderless
-                :enableTimePicker="false"
-                week-start="0"
-              >
+              <datepicker class="col-12 col-sm-6 col-md-5" menu-class-name="modalfix" v-model="dateDeath" :locale="'th'"
+                autoApply borderless :enableTimePicker="false" week-start="0">
                 <template #year="{ year }">
                   {{ year + 543 }}
                 </template>
@@ -458,63 +310,32 @@
                   {{ parseInt(value + 543) }}
                 </template>
                 <template #trigger>
-                  <q-input
-                    outlined
-                    dense
-                    class="full-width datepicker"
-                    :model-value="
-                      dateDeath != null ? date2Thai(dateDeath) : null
-                    "
-                    :label="`${'วันที่เสียชีวิต'}`"
-                    :rules="[
-                      (val) => !!val || `${'กรุณาเลือกวันที่เสียชีวิต'}`,
-                    ]"
-                  >
+                  <q-input outlined dense class="full-width datepicker" :model-value="dateDeath != null ? date2Thai(dateDeath) : null
+                    " :label="`${'วันที่เสียชีวิต'}`" :rules="[
+    (val) => !!val || `${'กรุณาเลือกวันที่เสียชีวิต'}`,
+  ]">
                     <template v-slot:prepend>
-                      <q-icon
-                        name="event"
-                        class="cursor-pointer"
-                        style="color: var(--q-primary)"
-                      >
+                      <q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)">
                       </q-icon>
                     </template>
                   </q-input>
                 </template>
               </datepicker>
 
-              <q-input
-                class="col-12 col-sm-6 col-md-7"
-                dense
-                outlined
-                v-model="placeDeathCertificate"
-                label="สถานที่ออกใบมรณบัตร"
-              />
+              <q-input class="col-12 col-sm-6 col-md-7" dense outlined v-model="placeDeathCertificate"
+                label="สถานที่ออกใบมรณบัตร" />
               <q-separator />
-              <q-input
-                class="col-12"
-                dense
-                outlined
-                v-model="reasonDeath"
-                label="เหตุผลการเสีบชีวิต"
-                type="textarea"
-              />
+              <q-input class="col-12" dense outlined v-model="reasonDeath" label="เหตุผลการเสีบชีวิต" type="textarea" />
             </div>
             <q-space />
           </q-card-section>
           <q-separator />
           <div class="flex justify-end q-pa-sm q-gutter-sm">
-            <q-btn
-              unelevated
-              label="บันทึก"
-              color="public"
-              @click="clickSaveDeceased"
-              :disable="
-                filePassaway === null ||
-                deathCertificateNo === '' ||
-                placeDeathCertificate === '' ||
-                reasonDeath === ''
-              "
-            >
+            <q-btn unelevated label="บันทึก" color="public" @click="clickSaveDeceased" :disable="filePassaway === null ||
+              deathCertificateNo === '' ||
+              placeDeathCertificate === '' ||
+              reasonDeath === ''
+              ">
               <q-tooltip>บันทึก</q-tooltip>
             </q-btn>
           </div>
@@ -532,71 +353,34 @@
   <q-dialog v-model="dialogLeave" persistent>
     <q-card style="width: 600px">
       <q-toolbar>
-        <q-toolbar-title class="text-subtitle2 text-bold"
-          >ประเภทการพ้นราชการ
+        <q-toolbar-title class="text-subtitle2 text-bold">ประเภทการพ้นราชการ
         </q-toolbar-title>
-        <q-btn
-          icon="close"
-          unelevated
-          round
-          dense
-          @click="closeLeave"
-          style="color: #ff8080; background-color: #ffdede"
-        />
+        <q-btn icon="close" unelevated round dense @click="closeLeave"
+          style="color: #ff8080; background-color: #ffdede" />
       </q-toolbar>
 
       <q-separator />
       <q-card-section class="q-p-sm">
-        <div
-          class="row col-12 items-center q-col-gutter-x-xs q-col-gutter-y-xs"
-        >
+        <div class="row col-12 items-center q-col-gutter-x-xs q-col-gutter-y-xs">
           <div class="col-xs-6 col-sm-6 col-md-6">
-            <q-select
-              class="full-width inputgreen cursor-pointer"
-              outlined
-              dense
-              lazy-rules
-              v-model="reason"
-              :rules="[(val) => !!val || `${'กรุณาเลือกประเภทการพ้นราชการ'}`]"
-              hide-bottom-space
-              :label="`${'ประเภทการพ้นราชการ'}`"
-              emit-value
-              map-options
-              option-label="name"
-              :options="reasonOptions"
-              option-value="id"
-            />
+            <q-select class="full-width inputgreen cursor-pointer" outlined dense lazy-rules v-model="reason"
+              :rules="[(val) => !!val || `${'กรุณาเลือกประเภทการพ้นราชการ'}`]" hide-bottom-space
+              :label="`${'ประเภทการพ้นราชการ'}`" emit-value map-options option-label="name" :options="reasonOptions"
+              option-value="id" />
           </div>
           <div class="col-xs-6 col-sm-6 col-md-6">
-            <datepicker
-              menu-class-name="modalfix"
-              v-model="leaveDate"
-              :locale="'th'"
-              autoApply
-              :enableTimePicker="false"
-              week-start="0"
-            >
+            <datepicker menu-class-name="modalfix" v-model="leaveDate" :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(leaveDate)"
-                  :rules="[(val) => !!val || `${'กรุณาเลือกวันที่พ้นราชการ'}`]"
-                  hide-bottom-space
-                  :label="`${'วันที่พ้นราชการ'}`"
-                >
+                <q-input class="full-width inputgreen cursor-pointer" outlined dense lazy-rules
+                  :model-value="date2Thai(leaveDate)" :rules="[(val) => !!val || `${'กรุณาเลือกวันที่พ้นราชการ'}`]"
+                  hide-bottom-space :label="`${'วันที่พ้นราชการ'}`">
                   <template v-slot:prepend>
-                    <q-icon
-                      name="event"
-                      class="cursor-pointer"
-                      style="color: var(--q-primary)"
-                    >
+                    <q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)">
                     </q-icon>
                   </template>
                 </q-input>
@@ -604,64 +388,30 @@
             </datepicker>
           </div>
           <div class="col-xs-6 col-sm-6 col-md-6">
-            <q-input
-              class="full-width inputgreen cursor-pointer"
-              outlined
-              dense
-              lazy-rules
-              autogrow
-              v-model="leaveDetail"
+            <q-input class="full-width inputgreen cursor-pointer" outlined dense lazy-rules autogrow v-model="leaveDetail"
               :rules="[
                 (val) =>
                   !!val || `${'กรุณากรอกสาเหตุ/เหตุผลของการพ้นจากราชการ'}`,
-              ]"
-              hide-bottom-space
-              :label="`${'สาเหตุ/เหตุผลของการพ้นจากราชการ'}`"
-            />
+              ]" hide-bottom-space :label="`${'สาเหตุ/เหตุผลของการพ้นจากราชการ'}`" />
           </div>
           <div class="col-xs-6 col-sm-6 col-md-6">
-            <q-input
-              class="full-width inputgreen cursor-pointer"
-              outlined
-              dense
-              lazy-rules
-              autogrow
-              v-model="leaveNumberOrder"
-              :rules="[(val) => !!val || `${'กรุณากรอกคำสั่ง/เอกสารอ้างอิง'}`]"
-              hide-bottom-space
-              :label="`${'คำสั่ง/เอกสารอ้างอิง'}`"
-            />
+            <q-input class="full-width inputgreen cursor-pointer" outlined dense lazy-rules autogrow
+              v-model="leaveNumberOrder" :rules="[(val) => !!val || `${'กรุณากรอกคำสั่ง/เอกสารอ้างอิง'}`]"
+              hide-bottom-space :label="`${'คำสั่ง/เอกสารอ้างอิง'}`" />
           </div>
           <div class="col-xs-6 col-sm-6 col-md-6">
-            <datepicker
-              menu-class-name="modalfix"
-              v-model="leaveDateOrder"
-              :locale="'th'"
-              autoApply
-              :enableTimePicker="false"
-              week-start="0"
-            >
+            <datepicker menu-class-name="modalfix" v-model="leaveDateOrder" :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(leaveDateOrder)"
-                  :rules="[(val) => !!val || `${'กรุณาเลือกวันที่ออกคำสั่ง'}`]"
-                  hide-bottom-space
-                  :label="`${'วันที่ออกคำสั่ง'}`"
-                >
+                <q-input class="full-width inputgreen cursor-pointer" outlined dense lazy-rules
+                  :model-value="date2Thai(leaveDateOrder)" :rules="[(val) => !!val || `${'กรุณาเลือกวันที่ออกคำสั่ง'}`]"
+                  hide-bottom-space :label="`${'วันที่ออกคำสั่ง'}`">
                   <template v-slot:prepend>
-                    <q-icon
-                      name="event"
-                      class="cursor-pointer"
-                      style="color: var(--q-primary)"
-                    >
+                    <q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)">
                     </q-icon>
                   </template>
                 </q-input>
@@ -672,13 +422,7 @@
       </q-card-section>
       <q-separator />
       <q-card-actions align="right">
-        <q-btn
-          flat
-          round
-          color="public"
-          @click="Retire"
-          icon="mdi-content-save-outline"
-        >
+        <q-btn flat round color="public" @click="Retire" icon="mdi-content-save-outline">
           <q-tooltip>บันทึก</q-tooltip>
         </q-btn>
       </q-card-actions>
@@ -734,6 +478,7 @@ const {
   success,
   showLoader,
   hideLoader,
+  dialogConfirm
 } = mixin;
 const route = useRoute();
 const router = useRouter();
@@ -892,7 +637,7 @@ const uploadImage = async (e: any) => {
     showLoader();
     await http
       .post(config.API.profileAvatarId(profileId.value), formData)
-      .then((res) => {})
+      .then((res) => { })
       .catch((e) => {
         messageError($q, e);
       })
@@ -1016,13 +761,97 @@ const closeKp7Short = () => {
   dialogShort.value = false;
 };
 
-const postAdd = () => {
-  // router.push("/dismiss-order/add");
-};
+const helpPost = () => {
+  dialogConfirm(
+    $q,
+    async () => {
+      const formData = new FormData();
+      formData.append("id", profileId.value);
+      await http.post(config.API.placemenHelpGov, formData);
+    },
+  );
+}
 
-const downloadKP7 = () => {};
+const repatriationPost = async () => {
+  dialogConfirm(
+    $q,
+    async () => {
+      const formData = new FormData();
+      formData.append("id", profileId.value);
+      await http.post(config.API.placemenRepatriation, formData);
+    },
+  );
+}
 
-const downloadKP7Short = () => {};
+const appointPost = async () => {
+  dialogConfirm(
+    $q,
+    async () => {
+      const formData = new FormData();
+      formData.append("id", profileId.value);
+      await http.post(config.API.placemenAppointment, formData);
+    },
+  );
+}
+
+const relocationPost = async () => {
+  dialogConfirm(
+    $q,
+    async () => {
+      const formData = new FormData();
+      formData.append("id", profileId.value);
+      await http.post(config.API.placemenRelocation, formData);
+    },
+  );
+}
+
+const outPost = async () => {
+  dialogConfirm(
+    $q,
+    async () => {
+      const formData = new FormData();
+      formData.append("id", profileId.value);
+      await http.post(config.API.retirementOut, formData);
+    },
+  );
+}
+
+const dischargePost = async () => {
+  dialogConfirm(
+    $q,
+    async () => {
+      const formData = new FormData();
+      formData.append("id", profileId.value);
+      await http.post(config.API.retirementDischarge, formData);
+    },
+  );
+}
+
+const expulsionPost = async () => {
+  dialogConfirm(
+    $q,
+    async () => {
+      const formData = new FormData();
+      formData.append("id", profileId.value);
+      await http.post(config.API.retirementExpulsion, formData);
+    },
+  );
+}
+
+const otherPost = async () => {
+  dialogConfirm(
+    $q,
+    async () => {
+      const formData = new FormData();
+      formData.append("id", profileId.value);
+      await http.post(config.API.placemenOther, formData);
+    },
+  );
+}
+
+const downloadKP7 = () => { };
+
+const downloadKP7Short = () => { };
 
 const clickKp7 = async () => {
   window.open(config.API.profileReportId(profileId.value));
@@ -1271,12 +1100,12 @@ const clickSaveDeceased = async () => {
           console.log(e);
           messageError($q, e);
         })
-        .finally(()=>{
+        .finally(() => {
           hideLoader();
         })
     })
-    .onCancel(() => {})
-    .onDismiss(() => {});
+    .onCancel(() => { })
+    .onDismiss(() => { });
 };
 </script>
 <style>
diff --git a/src/modules/05_placement/components/OrderPlacement/step/step02.vue b/src/modules/05_placement/components/OrderPlacement/step/step02.vue
deleted file mode 100644
index 34b0634df..000000000
--- a/src/modules/05_placement/components/OrderPlacement/step/step02.vue
+++ /dev/null
@@ -1,741 +0,0 @@
-div
-<template>
-  <div>
-    <div class="q-py-md q-pl-md" style="height: 68vh; overflow-y: scroll">
-      <div class="col-12 row q-pb-sm items-center">
-        <q-btn flat round color="primary" @click="refresh" 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-th auto-width />
-            <q-th auto-width />
-          </q-tr>
-        </template>
-        <template v-slot:body="props">
-          <q-tr :props="props" class="cursor-pointer">
-            <q-td
-              v-for="col in props.cols"
-              :key="col.name"
-              :props="props"
-              @click="selectModal(props.row)"
-              >{{ col.name == "no" ? props.rowIndex + 1 : col.value }}</q-td
-            >
-            <q-td auto-width>
-              <q-btn
-                dense
-                size="12px"
-                flat
-                round
-                :color="props.rowIndex + 1 == 1 ? 'grey' : 'green'"
-                :disable="props.rowIndex + 1 == 1"
-                @click="upDown(props)"
-                icon="mdi-arrow-up-bold"
-              >
-                <!-- <q-tooltip>เลื่อนลำดับขึ้น</q-tooltip> -->
-              </q-btn>
-            </q-td>
-            <q-td auto-width>
-              <q-btn
-                dense
-                size="12px"
-                flat
-                round
-                :color="rows.length == props.rowIndex + 1 ? 'grey' : 'red'"
-                :disable="rows.length == props.rowIndex + 1"
-                @click="upDown(props, false)"
-                icon="mdi-arrow-down-bold"
-              >
-                <!-- <q-tooltip>เลื่อนลำดับลง</q-tooltip> -->
-              </q-btn>
-            </q-td>
-            <q-td auto-width>
-              <q-btn
-                dense
-                size="12px"
-                flat
-                round
-                color="red"
-                @click="dialogDeleteData(props.row.personalId)"
-                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="save"
-        class="q-px-md"
-        ><!-- icon="mdi-content-save-outline"
-        <q-tooltip>บันทึก</q-tooltip> -->
-      </q-btn>
-      <!-- <q-btn dense flat round color="primary" icon="chevron_right" @click="next">
-        <q-tooltip>ต่อไป</q-tooltip>
-      </q-btn> -->
-    </div>
-  </div>
-  <!--********************************** เงินเดือน ********************************** -->
-  <q-dialog v-model="modal" persistent>
-    <q-card style="width: 50vw; max-width: 50vw">
-      <q-form ref="myForm">
-        <DialogHeader :tittle="titleName" :close="modalOpenClose" />
-        <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">
-              <div class="col-12 row q-py-sm items-center q-col-gutter-sm">
-                <div class="col-xs-6 col-sm-6 col-md-6">
-                  <q-input
-                    outlined
-                    dense
-                    lazy-rules
-                    v-model="modalData.salaryAmount"
-                    :rules="[(val) => !!val || `${'กรุณากรอกเงินเดือน'}`]"
-                    :label="`${'เงินเดือน'}`"
-                    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="modalData.positionSalaryAmount"
-                    :label="`${'เงินประจำตำแหน่ง'}`"
-                    type="number"
-                    hide-bottom-space
-                  />
-                  <!-- :rules="[
-                      (val) => !!val || `${'กรุณากรอกเงินประจำตำแหน่ง'}`,
-                    ]" -->
-                </div>
-
-                <div class="col-xs-6 col-sm-6 col-md-6">
-                  <q-input
-                    outlined
-                    dense
-                    lazy-rules
-                    v-model="modalData.mouthSalaryAmount"
-                    :label="`${'เงินค่าตอบแทนรายเดือน'}`"
-                    type="number"
-                    hide-bottom-space
-                  />
-                  <!-- :rules="[
-                      (val) => !!val || `${'กรุณากรอกเงินค่าตอบแทนรายเดือน'}`,
-                    ]" -->
-                </div>
-              </div>
-            </div>
-          </div>
-        </q-card-section>
-        <q-separator />
-        <q-card-actions align="right">
-          <q-btn
-            dense
-            unelevated
-            label="บันทึก"
-            color="public"
-            @click="saveModal"
-            class="q-px-md"
-            ><!-- icon="mdi-content-save-outline"
-        <q-tooltip>บันทึก</q-tooltip> -->
-          </q-btn>
-        </q-card-actions>
-      </q-form>
-    </q-card>
-  </q-dialog>
-  <!--********************************** รายชื่อ ********************************** -->
-  <q-dialog v-model="modalAdd" persistent>
-    <q-card style="width: 50vw; max-width: 50vw">
-      <q-form ref="myFormAdd">
-        <DialogHeader tittle="รายชื่อในการออกคำสั่ง" :close="modalAddChange" />
-        <q-separator />
-        <q-card-section class="q-pa-sm bg-grey-1">
-          <d-table
-            :rows="rows2"
-            :columns="columns"
-            :visible-columns="visibleColumns"
-            :filter="filter"
-            row-key="name"
-            selection="multiple"
-            v-model:selected="selected"
-          >
-            <template v-slot:header="props">
-              <q-tr :props="props">
-                <q-th auto-width>
-                  <q-checkbox
-                    keep-color
-                    color="primary"
-                    dense
-                    v-model="props.selected"
-                  />
-                </q-th>
-                <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>
-                  <q-checkbox
-                    keep-color
-                    color="primary"
-                    dense
-                    v-model="props.selected"
-                  />
-                </q-td>
-                <q-td
-                  v-for="col in props.cols"
-                  :key="col.name"
-                  :props="props"
-                  >{{ col.name == "no" ? props.rowIndex + 1 : col.value }}</q-td
-                >
-              </q-tr>
-            </template>
-          </d-table>
-        </q-card-section>
-        <q-separator />
-        <q-card-actions align="right">
-          <q-btn
-            dense
-            unelevated
-            label="บันทึก"
-            color="public"
-            @click="saveModalAdd"
-            class="q-px-md"
-            ><!-- icon="mdi-content-save-outline"
-        <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 type { QInput } from "quasar";
-import { useCounterMixin } from "@/stores/mixin";
-import type { QTableProps, QForm } from "quasar";
-import { useRoute } from "vue-router";
-import DialogHeader from "@/modules/04_registry/components/DialogHeader.vue";
-import type { ResponseData } from "@/modules/05_placement/interface/response/Order";
-
-import http from "@/plugins/http";
-import config from "@/app.config";
-
-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 mixin = useCounterMixin(); //เรียกฟังก์ชันกลาง
-const { dialogMessage, messageError, showLoader, hideLoader, success } = mixin;
-
-const route = useRoute();
-const $q = useQuasar();
-
-const modalData = ref<any>({
-  salaryAmount: 0,
-  positionSalaryAmount: 0,
-  mouthSalaryAmount: 0,
-});
-const myForm = ref<QForm | null>(null);
-const myFormAdd = ref<QForm | null>(null);
-const modal = ref<boolean>(false);
-const modalAdd = ref<boolean>(false);
-const titleName = ref<string>("");
-const filterRef = ref<QInput>();
-const filter = ref<string>("");
-const visibleColumns = ref<String[]>(["no", "idCard", "name", "education"]);
-const columns = ref<QTableProps["columns"]>([
-  {
-    name: "no",
-    align: "left",
-    label: "ลำดับ",
-    field: "no",
-    sortable: true,
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "idCard",
-    align: "left",
-    label: "เลขประจำตัวประชาชน",
-    field: "idCard",
-    sortable: true,
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "name",
-    align: "left",
-    label: "ชื่อ-สกุล",
-    field: "name",
-    sortable: true,
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "education",
-    align: "left",
-    label: "วุฒิการศึกษาในการออกคำสั่ง",
-    field: "education",
-    sortable: true,
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-]);
-const rows = ref<ResponseData[]>([]);
-const rows2 = ref<ResponseData[]>([]);
-const selected = ref<ResponseData[]>([]);
-
-onMounted(async () => {
-  await conditionData();
-});
-
-const conditionData = async () => {
-  const id = route.params.orderid
-    ? route.params.orderid.toString()
-    : localStorage.getItem("orderId")
-    ? localStorage.getItem("orderId")
-    : null;
-  if (id !== null) {
-    await getData(id);
-  }
-};
-
-const getData = async (id: string) => {
-  showLoader();
-  await http
-    .get(config.API.personsselectedOrder(id))
-    .then((res) => {
-      const data = res.data.result;
-      console.log(data);
-      let list: ResponseData[] = [];
-      data.map((r: ResponseData) => {
-        list.push({
-          education: r.education ?? "",
-          idCard: r.idCard ?? "",
-          name: r.name ?? "",
-          personalId: r.personalId ?? "",
-          selectStatus: r.selectStatus !== null ? r.selectStatus : false,
-          sequence: r.sequence !== null ? r.sequence : 0,
-          refRecordId: r.refRecordId,
-        });
-      });
-      //   console.log("list", list);
-      rows.value = list;
-      selected.value = rows.value;
-    })
-    .catch((e) => {
-      messageError($q, e);
-    })
-    .finally(() => {
-      hideLoader();
-    });
-};
-
-// const saveSalary = async (id: string) => {
-//   await http
-//     .put(config.API.salaryOrder(id))
-//     .then((res) => {
-//       //   const data = res.data.result;
-//       //   console.log(res);
-//       success($q, "บันทึกข้อมูลสำเร็จ");
-//     })
-//     .catch((e) => {
-//       messageError($q, e);
-//     })
-//     .finally(() => {
-//       hideLoader();
-//     });
-// };
-
-const dialogDeleteData = async (id: string) => {
-  dialogMessage(
-    $q,
-    "ยืนยันการลบข้อมูล",
-    "ต้องการลบข้อมูลนี้ใช่หรือไม่?",
-    "mdi-help-circle-outline",
-    "ตกลง",
-    "red",
-    () => deleteData(id),
-    undefined
-  );
-};
-
-const deleteData = async (id: string) => {
-  await http
-    .delete(config.API.personsOrder(id))
-    .then((res) => {
-      //   const data = res.data.result;
-      //   console.log(res);
-      success($q, "ลบข้อมูลสำเร็จ");
-    })
-    .catch((e) => {
-      messageError($q, e);
-    })
-    .finally(async () => {
-      hideLoader();
-      await conditionData();
-    });
-};
-
-const swapUp = async (id: string) => {
-  // id = personalId
-  await http
-    .put(config.API.swapUpOrder(id))
-    .then((res) => {
-      //   const data = res.data.result;
-      //   console.log(res);
-    })
-    .catch((e) => {
-      messageError($q, e);
-    })
-    .finally(async () => {
-      await conditionData();
-      hideLoader();
-    });
-};
-
-const swapDown = async (id: string) => {
-  // id = personalId
-  await http
-    .put(config.API.swapDownOrder(id))
-    .then((res) => {
-      //   const data = res.data.result;
-      //   console.log(res);
-    })
-    .catch((e) => {
-      messageError($q, e);
-    })
-    .finally(async () => {
-      await conditionData();
-      hideLoader();
-    });
-};
-
-const upDown = async (value: any, up: boolean = true) => {
-  const indexCurrent = value.rowIndex;
-  if (up) {
-    await swapUp(value.row.personalId);
-    // rows.value[indexCurrent] = rows.value[indexCurrent - 1];
-    // rows.value[indexCurrent - 1] = value.row;
-  } else {
-    await swapDown(value.row.personalId);
-    // rows.value[indexCurrent] = rows.value[indexCurrent + 1];
-    // rows.value[indexCurrent + 1] = value.row;
-  }
-};
-
-const saveModal = () => {
-  if (myForm.value !== null) {
-    myForm.value.validate().then(async (result: boolean) => {
-      if (result) {
-        putSalary(modalData.value);
-      }
-    });
-  }
-};
-const personalId = ref<string>("");
-const selectModal = (e: any) => {
-  console.log(e);
-  titleName.value = e.name;
-  personalId.value = e.personalId;
-  // modalData.value = {
-  //   salaryAmount: 0,
-  //   positionSalaryAmount: 0,
-  //   mouthSalaryAmount: 0,
-  // };
-
-  modalOpenClose(e.personalId);
-};
-
-const modalOpenClose = async (personalId: string) => {
-  modal.value = !modal.value;
-  if (!modal.value) {
-    titleName.value = "";
-  }
-  if (modal.value == true) {
-    await fetchSalary(personalId);
-  }
-};
-const fetchSalary = async (personalId: string) => {
-  console.log(personalId);
-  showLoader();
-  await http
-    .get(config.API.salaryOrder(personalId))
-    .then((res: any) => {
-      console.log(res);
-      let salary = res.data.result;
-      modalData.value = {
-        salaryAmount: salary.salaryAmount,
-        positionSalaryAmount: salary.positionSalaryAmount,
-        mouthSalaryAmount: salary.monthSalaryAmount,
-      };
-    })
-    .catch((e) => {
-      console.log(e);
-      messageError($q, e);
-    })
-    .finally(() => {
-      hideLoader();
-    });
-};
-const putSalary = async (salary: any) => {
-  modalData.value = {
-    salaryAmount: Number(salary.salaryAmount),
-    positionSalaryAmount: Number(salary.positionSalaryAmount),
-    monthSalaryAmount: Number(salary.mouthSalaryAmount),
-  };
-  $q.dialog({
-    title: "ยืนยันการบันทึกข้อมูล",
-    message: "ต้องการยืนยันการบันทึกข้อมูลนี้ใช่หรือไม่?",
-    cancel: {
-      flat: true,
-      color: "negative",
-    },
-    persistent: true,
-  }).onOk(async () => {
-    await http
-      .put(config.API.salaryOrder(personalId.value), modalData.value)
-      .then((res: any) => {
-        console.log(res);
-        success($q, "บันทึกข้อมูลสำเร็จ");
-      })
-      .catch((e) => {
-        console.log(e);
-        messageError($q, e);
-      })
-      .finally(async () => {
-        await conditionData();
-        modal.value = false;
-      });
-  });
-};
-
-const modalAddChange = async () => {
-  modalAdd.value = !modalAdd.value;
-  if (modalAdd.value == true) {
-    const id = route.params.orderid
-      ? route.params.orderid.toString()
-      : localStorage.getItem("orderId")
-      ? localStorage.getItem("orderId")
-      : null;
-    if (id !== null) {
-      await fetchaddlist(id);
-    }
-  } else await conditionData();
-};
-const fetchaddlist = async (id: string) => {
-  showLoader();
-  await http
-    .get(config.API.personsOrder(id))
-    .then((res) => {
-      const data = res.data.result;
-      console.log(data);
-      let list = [];
-      list = data.map((r: ResponseData) => ({
-        education: r.education ?? "",
-        idCard: r.idCard ?? "",
-        name: r.name ?? "",
-        personalId: r.personalId ?? "",
-        selectStatus: r.selectStatus !== null ? r.selectStatus : false,
-        sequence: r.sequence !== null ? r.sequence : 0,
-        refRecordId: r.refRecordId,
-      }));
-      rows2.value = list;
-      selected.value = rows.value;
-      // rows2.value = list.filter((e: any) => e.selectStatus === false);
-    })
-    .catch((e) => {
-      messageError($q, e);
-    })
-    .finally(() => {
-      hideLoader();
-    });
-};
-const saveModalAdd = () => {
-  if (myFormAdd.value !== null) {
-    myFormAdd.value.validate().then(async (result: boolean) => {
-      if (result && selected.value.length !== 0) {
-        $q.dialog({
-          title: "ยืนยันการเพิ่มรายชื่อออกคำสั่ง",
-          message: "ต้องการยืนยันการเพิ่มรายชื่อออกคำสั่งนี้ใช่หรือไม่?",
-          cancel: {
-            flat: true,
-            color: "negative",
-          },
-          persistent: true,
-        }).onOk(async () => {
-          let data = [];
-          data.push(...selected.value.map((e: any) => e.refRecordId));
-          // console.log(data);
-          addlist(data);
-        });
-      }
-    });
-  }
-};
-const addlist = async (data: Object) => {
-  const id = route.params.orderid
-    ? route.params.orderid.toString()
-    : localStorage.getItem("orderId")
-    ? localStorage.getItem("orderId")
-    : null;
-  if (id !== null) {
-    await http
-      .post(config.API.personsOrder(id), data)
-      .then(() => {
-        success($q, "บันทึกสำเร็จ");
-      })
-      .catch((e: any) => {
-        console.log(e);
-        messageError($q, e);
-      })
-      .finally(() => {
-        modalAddChange();
-      });
-  }
-};
-
-const click = (e: any) => {
-  console.log(e);
-  console.log(rows.value.length);
-};
-
-const save = () => {
-  if (selected.value.length > 0) {
-    $q.dialog({
-      title: "ยืนยันการบันทึกข้อมูล",
-      message: "ต้องการยืนยันการบันทึกข้อมูลนี้ใช่หรือไม่?",
-      cancel: {
-        flat: true,
-        color: "negative",
-      },
-      persistent: true,
-    }).onOk(async () => {
-      success($q, "บันทึกข้อมูลสำเร็จ");
-      next();
-    });
-  } else {
-    dialogMessage(
-      $q,
-      "ข้อความแจ้งเตือน",
-      "กรุณาเลือกรายชื่อ",
-      "warning",
-      undefined,
-      "orange",
-      undefined,
-      undefined,
-      true
-    );
-  }
-};
-
-const selectData = (row: any) => {};
-
-const refresh = async () => {
-  // await conditionData();
-  modalAddChange();
-  selected.value = [];
-};
-
-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,
-  };
-};
-</script>
-<style lang="scss"></style>
diff --git a/src/modules/10_order/components/Main.vue b/src/modules/10_order/components/Main.vue
index c6b61430d..75f1ad406 100644
--- a/src/modules/10_order/components/Main.vue
+++ b/src/modules/10_order/components/Main.vue
@@ -125,7 +125,7 @@ import config from "@/app.config";
 
 const $q = useQuasar(); //ใช้ noti quasar
 const mixin = useCounterMixin();
-const { showLoader, hideLoader, messageError, date2Thai, dateText, success, dialogMessage } =
+const { showLoader, hideLoader, messageError, date2Thai, dateText, success, dialogRemove } =
   mixin;
 const DataStore = useOrderPlacementDataStore();
 
@@ -314,15 +314,9 @@ const redirectToPage = (id?: string, status?: string) => {
 };
 
 const clickDelete = (id: string) => {
-  dialogMessage(
+  dialogRemove(
     $q,
-    "ยืนยันการลบข้อมูล",
-    "ต้องการลบข้อมูลนี้ใช่หรือไม่?",
-    "mdi-delete",
-    "ตกลง",
-    "red",
     () => deleteData(id),
-    undefined
   );
 
 };
diff --git a/src/modules/10_order/components/step/step01.vue b/src/modules/10_order/components/step/step01.vue
index 1eef3cc73..0307b4fd6 100644
--- a/src/modules/10_order/components/step/step01.vue
+++ b/src/modules/10_order/components/step/step01.vue
@@ -3,24 +3,10 @@
     <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"
-          />
+          <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'
           ) " -->
@@ -29,73 +15,36 @@
         <div class="col-xs-12 col-md-6">
           <!-- :readonly="!edit"
                 :borderless="!edit" -->
-          <q-input
-            :class="getClass(true)"
-            outlined
-            dense
-            lazy-rules
-            v-model="nameOrder"
-            :rules="[(val) => !!val || `${'กรุณากรอกคำสั่งเรื่อง'}`]"
-            :label="`${'คำสั่งเรื่อง'}`"
-            @update:modelValue="clickEditRow"
-            hide-bottom-space
-          />
+          <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"
-            />
+            <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
-          >
+          <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"
-            >
+            <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 :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"
-          >
+          <datepicker menu-class-name="modalfix" v-model="dateCommand" :locale="'th'" autoApply borderless
+            :enableTimePicker="false" week-start="0">
             <template #year="{ year }">
               {{ year + 543 }}
             </template>
@@ -103,24 +52,12 @@
               {{ 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 || `${'กรุณาเลือกวันที่มีผลออกคำสั่ง'}`,
-                ]"
-              >
+              <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 name="event" class="cursor-pointer" style="color: var(--q-primary)">
                   </q-icon>
                 </template>
               </q-input>
@@ -129,24 +66,10 @@
         </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"
-          />
+          <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'
           ) " -->
@@ -154,55 +77,25 @@
         <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
-          />
+          <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
-          />
+          <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="examRound"
-            :rules="[(val: string) => !!val || `${'กรุณาเลือกรอบการสอบ'}`]"
-            hide-bottom-space
-            :label="`${'รอบการสอบ'}`"
-            @update:modelValue="clickEditRow"
-            emit-value
-            map-options
-            option-label="examRoundName"
-            :options="examRoundOption"
-            option-value="examRoundValue"
-            use-input
-            input-debounce="0"
-          />
+          <selector :class="getClass(true)" outlined dense lazy-rules v-model="examRound"
+            :rules="[(val: string) => !!val || `${'กรุณาเลือกรอบการสอบ'}`]" hide-bottom-space :label="`${'รอบการสอบ'}`"
+            @update:modelValue="clickEditRow" emit-value map-options option-label="examRoundName"
+            :options="examRoundOption" option-value="examRoundValue" use-input input-debounce="0" />
           <!-- @filter="(inputValue:string,
           doneFn:Function) => filterSelector(inputValue, doneFn,'testOption'
           ) " -->
@@ -216,39 +109,18 @@
           filterSelector(inputValue, doneFn,'positionOption' ) " -->
         </div>
         <div class="col-xs-12 col-md-6">
-          <selector
-            :class="getClass(true)"
-            outlined
-            dense
-            lazy-rules
-            v-model="register"
-            :rules="[(val: string) => !!val || `${'กรุณาเลือกมติ กก. ครั้งที่ (เรื่อง รับสมัครสอบฯ)'}`]"
-            hide-bottom-space
-            :label="`${'มติ กก. ครั้งที่ (เรื่อง รับสมัครสอบฯ)'}`"
-            @update:modelValue="clickEditRow"
-            emit-value
-            map-options
-            option-label="name"
-            :options="registerOption"
-            option-value="id"
-            use-input
-            input-debounce="0"
-          />
+          <selector :class="getClass(true)" outlined dense lazy-rules v-model="register"
+            :rules="[(val: string) => !!val || `${'กรุณาเลือกมติ กก. ครั้งที่ (เรื่อง รับสมัครสอบฯ)'}`]" hide-bottom-space
+            :label="`${'มติ กก. ครั้งที่ (เรื่อง รับสมัครสอบฯ)'}`" @update:modelValue="clickEditRow" emit-value
+            map-options option-label="name" :options="registerOption" option-value="id" use-input input-debounce="0" />
         </div>
         <!-- @filter="(inputValue:string,
         doneFn:Function) => filterSelector(inputValue, doneFn,'registerOption'
         ) " -->
 
         <div class="col-xs-12 col-md-6">
-          <datepicker
-            menu-class-name="modalfix"
-            v-model="dateRegister"
-            :locale="'th'"
-            autoApply
-            borderless
-            :enableTimePicker="false"
-            week-start="0"
-          >
+          <datepicker menu-class-name="modalfix" v-model="dateRegister" :locale="'th'" autoApply borderless
+            :enableTimePicker="false" week-start="0">
             <template #year="{ year }">
               {{ year + 543 }}
             </template>
@@ -256,25 +128,13 @@
               {{ parseInt(value + 543) }}
             </template>
             <template #trigger>
-              <q-input
-                outlined
-                dense
-                class="full-width datepicker"
-                :model-value="
-                  dateRegister != null ? date2Thai(dateRegister) : null
-                "
-                :label="`${'ลงวันที่ (เรื่อง รับสมัครสอบฯ)'}`"
-                :rules="[
-                  (val) =>
-                    !!val || `${'กรุณาเลือกลงวันที่ (เรื่อง รับสมัครสอบฯ)'}`,
-                ]"
-              >
+              <q-input outlined dense class="full-width datepicker" :model-value="dateRegister != null ? date2Thai(dateRegister) : null
+                " :label="`${'ลงวันที่ (เรื่อง รับสมัครสอบฯ)'}`" :rules="[
+    (val) =>
+      !!val || `${'กรุณาเลือกลงวันที่ (เรื่อง รับสมัครสอบฯ)'}`,
+  ]">
                 <template v-slot:prepend>
-                  <q-icon
-                    name="event"
-                    class="cursor-pointer"
-                    style="color: var(--q-primary)"
-                  >
+                  <q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)">
                   </q-icon>
                 </template>
               </q-input>
@@ -282,38 +142,18 @@
           </datepicker>
         </div>
         <div class="col-xs-12 col-md-6">
-          <selector
-            :class="getClass(true)"
-            outlined
-            dense
-            lazy-rules
-            v-model="announce"
+          <selector :class="getClass(true)" outlined dense lazy-rules v-model="announce"
             :rules="[(val: string) => !!val || `${'กรุณาเลือกมติ กก. ครั้งที่ (เรื่อง ผลการสอบแข่งขัน)'}`]"
-            hide-bottom-space
-            :label="`${'มติ กก. ครั้งที่ (เรื่อง ผลการสอบแข่งขัน)'}`"
-            @update:modelValue="clickEditRow"
-            emit-value
-            map-options
-            option-label="name"
-            :options="announceOption"
-            option-value="id"
-            use-input
-            input-debounce="0"
-          />
+            hide-bottom-space :label="`${'มติ กก. ครั้งที่ (เรื่อง ผลการสอบแข่งขัน)'}`" @update:modelValue="clickEditRow"
+            emit-value map-options option-label="name" :options="announceOption" option-value="id" use-input
+            input-debounce="0" />
           <!-- @filter="(inputValue:string,
           doneFn:Function) => filterSelector(inputValue, doneFn,'announceOption'
           ) "  -->
         </div>
         <div class="col-xs-12 col-md-6">
-          <datepicker
-            menu-class-name="modalfix"
-            v-model="dateAnnounce"
-            :locale="'th'"
-            autoApply
-            borderless
-            :enableTimePicker="false"
-            week-start="0"
-          >
+          <datepicker menu-class-name="modalfix" v-model="dateAnnounce" :locale="'th'" autoApply borderless
+            :enableTimePicker="false" week-start="0">
             <template #year="{ year }">
               {{ year + 543 }}
             </template>
@@ -321,25 +161,13 @@
               {{ parseInt(value + 543) }}
             </template>
             <template #trigger>
-              <q-input
-                outlined
-                dense
-                class="full-width datepicker"
-                :model-value="
-                  dateAnnounce != null ? date2Thai(dateAnnounce) : null
-                "
-                :label="`${'ลงวันที่ (เรื่อง ผลการสอบแข่งขัน)'}`"
-                :rules="[
-                  (val) =>
-                    !!val || `${'กรุณาเลือกลงวันที่ (เรื่อง ผลการสอบแข่งขัน)'}`,
-                ]"
-              >
+              <q-input outlined dense class="full-width datepicker" :model-value="dateAnnounce != null ? date2Thai(dateAnnounce) : null
+                " :label="`${'ลงวันที่ (เรื่อง ผลการสอบแข่งขัน)'}`" :rules="[
+    (val) =>
+      !!val || `${'กรุณาเลือกลงวันที่ (เรื่อง ผลการสอบแข่งขัน)'}`,
+  ]">
                 <template v-slot:prepend>
-                  <q-icon
-                    name="event"
-                    class="cursor-pointer"
-                    style="color: var(--q-primary)"
-                  >
+                  <q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)">
                   </q-icon>
                 </template>
               </q-input>
@@ -382,7 +210,7 @@ const {
   showLoader,
   hideLoader,
   success,
-  dialogMessage,
+  dialogConfirm,
 } = mixin;
 const $q = useQuasar(); //ใช้ noti quasar
 const route = useRoute();
@@ -576,9 +404,9 @@ const fecthExamRoundOption = async () => {
     .get(config.API.examroundOrder())
     .then((res) => {
       examRoundOption.value = res.data.result;
-      console.log(examRoundOption.value);
+      // console.log(examRoundOption.value);
     })
-    .catch((e) => {});
+    .catch((e) => { });
 };
 const submit = async () => {
   const formdata = {
@@ -599,13 +427,8 @@ const submit = async () => {
   };
   await myForm.value!.validate().then((result: boolean) => {
     if (result) {
-      dialogMessage(
+      dialogConfirm(
         $q,
-        "ยืนยันการบันทึกข้อมูล",
-        "ต้องการบันทึกข้อมูลนี้ใช่หรือไม่?",
-        "info",
-        "ตกลง",
-        "public",
         () => {
           if (!orderId) {
             createListOrder(formdata);
@@ -614,13 +437,12 @@ const submit = async () => {
             updateOrder(formdata, orderIdString);
           }
         },
-        undefined
       );
     }
   });
 };
 const createListOrder = async (formData: Object) => {
-  // console.log(formData);
+  showLoader();
   await http
     .post(config.API.createOrder(), formData)
     .then((res) => {
@@ -639,7 +461,7 @@ const createListOrder = async (formData: Object) => {
 };
 
 const updateOrder = async (formData: Object, orderId: string) => {
-  // console.log(formData);
+  showLoader();
   await http
     .put(config.API.detailOrder(orderId), formData)
     .then((res) => {
diff --git a/src/modules/10_order/components/step/step02.vue b/src/modules/10_order/components/step/step02.vue
index 2c83f6be2..12c4a3419 100644
--- a/src/modules/10_order/components/step/step02.vue
+++ b/src/modules/10_order/components/step/step02.vue
@@ -183,7 +183,7 @@ const props = defineProps({
 const next = () => props.next();
 const previous = () => props.previous();
 const mixin = useCounterMixin(); //เรียกฟังก์ชันกลาง
-const { dialogMessage, messageError, showLoader, hideLoader, success } = mixin;
+const { dialogMessageNotify, dialogConfirm, dialogRemove, messageError, showLoader, hideLoader, success } = mixin;
 
 const route = useRoute();
 const $q = useQuasar();
@@ -306,15 +306,9 @@ const getData = async (id: string) => {
 // };
 
 const dialogDeleteData = async (id: string) => {
-  dialogMessage(
+  dialogRemove(
     $q,
-    "ยืนยันการลบข้อมูล",
-    "ต้องการลบข้อมูลนี้ใช่หรือไม่?",
-    "mdi-delete",
-    "ตกลง",
-    "red",
     () => deleteData(id),
-    undefined
   );
 };
 
@@ -442,14 +436,10 @@ const putSalary = async (salary: any) => {
     positionSalaryAmount: Number(salary.positionSalaryAmount),
     monthSalaryAmount: Number(salary.mouthSalaryAmount),
   };
-  dialogMessage(
+  dialogConfirm(
     $q,
-    "ยืนยันการบันทึกข้อมูล",
-    "ต้องการบันทึกข้อมูลนี้ใช่หรือไม่?",
-    "info",
-    "ตกลง",
-    "public",
     async () => {
+      showLoader()
       await http
         .put(config.API.salaryOrder(personalId.value), modalData.value)
         .then((res: any) => {
@@ -463,9 +453,9 @@ const putSalary = async (salary: any) => {
         .finally(async () => {
           await conditionData();
           modal.value = false;
+          hideLoader()
         });
     },
-    undefined
   );
 };
 
@@ -514,20 +504,15 @@ const saveModalAdd = () => {
   if (myFormAdd.value !== null) {
     myFormAdd.value.validate().then(async (result: boolean) => {
       if (result && selected.value.length !== 0) {
-        dialogMessage(
+        dialogConfirm(
           $q,
-          "ยืนยันการเพิ่มรายชื่อออกคำสั่ง",
-          "ต้องการยืนยันการเพิ่มรายชื่อออกคำสั่งนี้ใช่หรือไม่?",
-          "info",
-          "ตกลง",
-          "public",
           () => {
             let data = [];
             data.push(...selected.value.map((e: any) => e.refRecordId));
-            // console.log(data);
             addlist(data);
           },
-          undefined
+          "ยืนยันการเพิ่มรายชื่อออกคำสั่ง",
+          "ต้องการยืนยันการเพิ่มรายชื่อออกคำสั่งนี้ใช่หรือไม่?",
         );
 
       }
@@ -563,31 +548,18 @@ const click = (e: any) => {
 
 const save = () => {
   if (selected.value.length > 0) {
-    dialogMessage(
+    dialogConfirm(
       $q,
-      "ยืนยันการบันทึกข้อมูล",
-      "ต้องการยืนยันการบันทึกข้อมูลนี้ใช่หรือไม่?",
-      "info",
-      "ตกลง",
-      "public",
       () => {
         success($q, "บันทึกข้อมูลสำเร็จ");
         next();
       },
-      undefined
     );
 
   } else {
-    dialogMessage(
+    dialogMessageNotify(
       $q,
-      "ข้อความแจ้งเตือน",
       "กรุณาเลือกรายชื่อ",
-      "warning",
-      undefined,
-      "orange",
-      undefined,
-      undefined,
-      true
     );
   }
 };
diff --git a/src/modules/10_order/components/step/step03.vue b/src/modules/10_order/components/step/step03.vue
index d95c3de90..3781bb3f9 100644
--- a/src/modules/10_order/components/step/step03.vue
+++ b/src/modules/10_order/components/step/step03.vue
@@ -343,7 +343,7 @@ const previous = () => props.previous();
 
 const $q = useQuasar();
 const mixin = useCounterMixin(); //เรียกฟังก์ชันกลาง
-const { dialogMessage, messageError, showLoader, hideLoader, success } = mixin;
+const { dialogRemove, messageError, showLoader, hideLoader, success } = mixin;
 
 const route = useRoute();
 
@@ -598,22 +598,7 @@ const getClass = (val: boolean) => {
 };
 
 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 = async () => {
@@ -628,15 +613,9 @@ const clickAdd = async () => {
 };
 
 const clickDelete = (id: string) => {
-  dialogMessage(
+  dialogRemove(
     $q,
-    "ยืนยันการลบข้อมูล",
-    "ต้องการลบข้อมูลนี้ใช่หรือไม่?",
-    "mdi-delete",
-    "ตกลง",
-    "red",
     () => deleteData(id),
-    undefined
   );
 };
 
diff --git a/src/modules/10_order/components/step/step04.vue b/src/modules/10_order/components/step/step04.vue
index 99e613d43..ece62438b 100644
--- a/src/modules/10_order/components/step/step04.vue
+++ b/src/modules/10_order/components/step/step04.vue
@@ -252,7 +252,7 @@ import http from "@/plugins/http";
 import config from "@/app.config";
 
 const mixin = useCounterMixin();
-const { date2Thai, messageError, showLoader, hideLoader, dialogMessage } = mixin;
+const { date2Thai, messageError, showLoader, hideLoader, dialogConfirm } = mixin;
 const route = useRoute();
 const $q = useQuasar();
 
@@ -382,14 +382,8 @@ const save = () => {
   if (myForm.value !== null) {
     myForm.value!.validate().then((success: Boolean) => {
       if (success) {
-        // yay, models are correct
-        dialogMessage(
+        dialogConfirm(
           $q,
-          "ยืนยันการบันทึกข้อมูล",
-          "ต้องการยืนยันการบันทึกข้อมูลนี้ใช่หรือไม่?",
-          "info",
-          "ตกลง",
-          "public",
           async () => {
             await putOrderData();
             await postfileOrder();
@@ -397,7 +391,6 @@ const save = () => {
             await fetchAttachment(orderId.value);
             await fecthstatusOrder(orderId.value);
           },
-          undefined
         );
 
       }
@@ -431,13 +424,8 @@ const postfileTailer = async () => {
   await http.post(config.API.attachmentFileId(orderId.value), formData);
 };
 const clickExecute = async (id: string) => {
-  dialogMessage(
+  dialogConfirm(
     $q,
-    "ยืนยันการออกคำสั่ง",
-    "ต้องการยืนยันการออกคำสั่งนี้ใช่หรือไม่?",
-    "info",
-    "ตกลง",
-    "public",
     async () => {
       await http
         .put(config.API.executeOrder(id))
@@ -448,7 +436,8 @@ const clickExecute = async (id: string) => {
           messageError($q, e);
         });
     },
-    undefined
+    "ยืนยันการออกคำสั่ง",
+    "ต้องการยืนยันการออกคำสั่งนี้ใช่หรือไม่?",
   );
 };
 
diff --git a/src/stores/mixin.ts b/src/stores/mixin.ts
index 2ae149e62..8a625357b 100644
--- a/src/stores/mixin.ts
+++ b/src/stores/mixin.ts
@@ -411,6 +411,77 @@ export const useCounterMixin = defineStore("mixin", () => {
       });
   };
 
+  //*** Dialog ***//
+  const dialogConfirm = (
+    q: any,
+    ok?: Function,
+    title?: string, // ถ้ามี cancel action ใส่เป็น null
+    desc?: string, // ถ้ามี cancel action ใส่เป็น null
+    cancel?: Function
+  ) => {
+    q.dialog({
+      component: CustomComponent,
+      componentProps: {
+        title: title && title != null ? title : "ยืนยันการบันทึก",
+        message:
+          desc && desc != null
+            ? desc
+            : "ต้องการยืนยันการบันทึกข้อมูลนี้ใช่หรือไม่?",
+        icon: "info",
+        color: "public",
+        textOk: "ตกลง",
+        onlycancel: false,
+      },
+    })
+      .onOk(() => {
+        if (ok) ok();
+      })
+      .onCancel(() => {
+        if (cancel) cancel();
+      });
+  };
+
+  const dialogRemove = (q: any, ok?: Function, cancel?: Function) => {
+    q.dialog({
+      component: CustomComponent,
+      componentProps: {
+        title: "ยืนยันการลบข้อมูล",
+        message: "ต้องการยืนยันการลบข้อมูลนี้ใช่หรือไม่?",
+        icon: "delete",
+        color: "red",
+        textOk: "ตกลง",
+        onlycancel: false,
+      },
+    })
+      .onOk(() => {
+        if (ok) ok();
+      })
+      .onCancel(() => {
+        if (cancel) cancel();
+      });
+  };
+
+  const dialogMessageNotify = (
+    q: any,
+    desc?: string, // ถ้ามี cancel action ใส่เป็น null
+    cancel?: Function
+  ) => {
+    q.dialog({
+      component: CustomComponent,
+      componentProps: {
+        title: "ข้อความแจ้งเตือน",
+        message: desc && desc != null ? desc : "กรุณากรอกข้อมูลให้ครบ",
+        icon: "warning",
+        color: "orange",
+        textOk: "ตกลง",
+        onlycancel: true,
+      },
+    }).onCancel(() => {
+      if (cancel) cancel();
+    });
+  };
+  //*** END Dialog ***//
+
   const showLoader = () => {
     Loading.show({
       spinner: QSpinnerCube,
@@ -718,5 +789,9 @@ export const useCounterMixin = defineStore("mixin", () => {
     typeChangeName,
     statusLeave,
     modalWarning,
+    // common dialog
+    dialogConfirm,
+    dialogRemove,
+    dialogMessageNotify
   };
 });

From 265bc77553c46dda8b0c5d05668756d7e3012898 Mon Sep 17 00:00:00 2001
From: Thanit Konmek <thanit@frappet.com>
Date: Mon, 14 Aug 2023 16:45:23 +0700
Subject: [PATCH 098/113] =?UTF-8?q?=E0=B9=81=E0=B8=81=E0=B9=89=E0=B9=84?=
 =?UTF-8?q?=E0=B8=82=E0=B8=81=E0=B8=B2=E0=B8=A3=E0=B8=A5=E0=B8=B2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/05_placement/api.placement.ts         |   1 +
 src/api/06_retirement/api.retirement.ts       |  39 +-
 .../components/Receive/receiveDetail2.vue     | 139 +++++
 .../components/Transfer/transferRegistry.vue  |   6 +-
 .../interface/response/Receive.ts             |  10 +
 src/modules/05_placement/router.ts            |   8 +-
 src/modules/05_placement/store.ts             |  12 +-
 .../components/resign/Resign.vue              | 549 +++++++++++++-----
 .../components/resign/ResignByid.vue          | 461 +++++++++++++--
 .../06_retirement/interface/response/Main.ts  |  37 +-
 src/modules/06_retirement/store.ts            |  24 +-
 11 files changed, 1022 insertions(+), 264 deletions(-)
 create mode 100644 src/modules/05_placement/components/Receive/receiveDetail2.vue
 create mode 100644 src/modules/05_placement/interface/response/Receive.ts

diff --git a/src/api/05_placement/api.placement.ts b/src/api/05_placement/api.placement.ts
index fb6ec2ab0..ce1a69dc8 100644
--- a/src/api/05_placement/api.placement.ts
+++ b/src/api/05_placement/api.placement.ts
@@ -88,6 +88,7 @@ export default {
 
   //receive ระบบรับโอน
   receiveData: () => `${receive}`,
+  receiveReport: `${receive}/report`,
   receiveDataId: (id: string) => `${receive}/${id}`,
   receivePosition: (id: string) => `${receive}/position/${id}`,
 
diff --git a/src/api/06_retirement/api.retirement.ts b/src/api/06_retirement/api.retirement.ts
index 56df2a452..2b6c73a0e 100644
--- a/src/api/06_retirement/api.retirement.ts
+++ b/src/api/06_retirement/api.retirement.ts
@@ -1,25 +1,26 @@
 import env from "../index";
-const retirement = `${env.API_URI}/retirement`
-
+const retirement = `${env.API_URI}/retirement`;
 
 export default {
-    profile: (type: string, year: string) => `${retirement}/profile/${type}/${year}`,
-    profileRetire: (retireProfileId: string) => `${retirement}/profile/${retireProfileId}`,
-    listRetire: (retireId: string) => `${retirement}/${retireId}`,
-    createnote: () => `${retirement}/edit`,
-    removeProfile: () => `${retirement}/remove`,
-    reasonId: (retireId: string) => `${retirement}/reason/${retireId}`,
-    retirement: (type: string, year: string) => `${retirement}/${type}/${year}`,
-    createProfile: () => `${retirement}/profile`,
+  profile: (type: string, year: string) =>
+    `${retirement}/profile/${type}/${year}`,
+  profileRetire: (retireProfileId: string) =>
+    `${retirement}/profile/${retireProfileId}`,
+  listRetire: (retireId: string) => `${retirement}/${retireId}`,
+  createnote: () => `${retirement}/edit`,
+  removeProfile: () => `${retirement}/remove`,
+  reasonId: (retireId: string) => `${retirement}/reason/${retireId}`,
+  retirement: (type: string, year: string) => `${retirement}/${type}/${year}`,
+  createProfile: () => `${retirement}/profile`,
 
-    //RetirementDeceased ถึงแก่กรรม
-    listDeceased: () => `${retirement}/deceased`,
-    detailDeceased: (id: string) => `${retirement}/deceased/${id}`,
-
-    // RetirementResign ระบบลาออก
-    listResign: () => `${retirement}/resign`,
-    resingByid: (id: string) => `${retirement}/resign/${id}`,
-    resignConfirm: (id: string) => `${retirement}/resign/confirm/${id}`,
-    resignReject: (id: string) => `${retirement}/resign/reject/${id}`,
+  //RetirementDeceased ถึงแก่กรรม
+  listDeceased: () => `${retirement}/deceased`,
+  detailDeceased: (id: string) => `${retirement}/deceased/${id}`,
 
+  // RetirementResign ระบบลาออก
+  listResign: () => `${retirement}/resign`,
+  resignReport: `${retirement}/resign/report`,
+  resingByid: (id: string) => `${retirement}/resign/${id}`,
+  resignConfirm: (id: string) => `${retirement}/resign/confirm/${id}`,
+  resignReject: (id: string) => `${retirement}/resign/reject/${id}`,
 };
diff --git a/src/modules/05_placement/components/Receive/receiveDetail2.vue b/src/modules/05_placement/components/Receive/receiveDetail2.vue
new file mode 100644
index 000000000..77c473d6d
--- /dev/null
+++ b/src/modules/05_placement/components/Receive/receiveDetail2.vue
@@ -0,0 +1,139 @@
+<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>
+</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 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,
+  dialogMessage,
+  messageError,
+  showLoader,
+  hideLoader,
+  success,
+} = mixin;
+
+const title = ref<ResponseTitle>({
+  fullname: "",
+  organizationPositionOld: "",
+  positionLevelOld: "",
+  positionTypeOld: "",
+});
+
+onMounted(async () => {
+  await getData();
+});
+
+const getData = async () => {
+  showLoader();
+  await http
+    .get(config.API.receiveDataId(paramsId.toString()))
+    .then((res: any) => {
+      const data = res.data.result;
+
+      title.value.fullname = `${data.firstname ?? "-"} ${data.lastname ?? "-"}`;
+      title.value.organizationPositionOld = data.organizationPositionOld ?? "-";
+      title.value.positionLevelOld = data.positionLevelOld ?? "-";
+      title.value.positionTypeOld = data.positionTypeOld ?? "-";
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+};
+</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>
diff --git a/src/modules/05_placement/components/Transfer/transferRegistry.vue b/src/modules/05_placement/components/Transfer/transferRegistry.vue
index 81f8d5218..65ea2e171 100644
--- a/src/modules/05_placement/components/Transfer/transferRegistry.vue
+++ b/src/modules/05_placement/components/Transfer/transferRegistry.vue
@@ -489,9 +489,9 @@ const getData = async () => {
       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 ?? "-"}`;
+      responseData.value.fullname = `${data.firstName ?? "-"} ${
+        data.lastName ?? "-"
+      }`;
 
       organizationPositionOld.value = data.organizationPositionOld ?? "";
       positionTypeOld.value = data.positionTypeOld ?? "";
diff --git a/src/modules/05_placement/interface/response/Receive.ts b/src/modules/05_placement/interface/response/Receive.ts
new file mode 100644
index 000000000..1c013c07d
--- /dev/null
+++ b/src/modules/05_placement/interface/response/Receive.ts
@@ -0,0 +1,10 @@
+import { type } from "os";
+
+interface ResponseTitle {
+  fullname: string;
+  organizationPositionOld: string;
+  positionLevelOld: string;
+  positionTypeOld: string;
+}
+
+export type { ResponseTitle };
diff --git a/src/modules/05_placement/router.ts b/src/modules/05_placement/router.ts
index 12cbb254e..6e845c966 100644
--- a/src/modules/05_placement/router.ts
+++ b/src/modules/05_placement/router.ts
@@ -38,9 +38,11 @@ const RepatriationOrderAdd = () =>
 const receiveMain = () =>
   import("@/modules/05_placement/components/Receive/receiveMain.vue");
 
-  const receiveDetail = () =>
+const receiveDetail = () =>
   import("@/modules/05_placement/components/Receive/receiveDetail.vue");
-  const ReceiveAdd = () =>
+const receiveDetail2 = () =>
+  import("@/modules/05_placement/components/Receive/receiveDetail2.vue");
+const ReceiveAdd = () =>
   import("@/modules/05_placement/components/Receive/FormAdd.vue");
 
 export default [
@@ -197,7 +199,7 @@ export default [
   {
     path: "/receive/:id",
     name: "receiveDetail",
-    component: receiveDetail,
+    component: receiveDetail2,
     meta: {
       Auth: true,
       Key: [6.3],
diff --git a/src/modules/05_placement/store.ts b/src/modules/05_placement/store.ts
index 73c42cd6e..5f16b8424 100644
--- a/src/modules/05_placement/store.ts
+++ b/src/modules/05_placement/store.ts
@@ -316,17 +316,17 @@ export const useTransferDataStore = defineStore("transferDataStore", () => {
   const statusText = (val: string) => {
     switch (val) {
       case "WAITTING":
-        return "รออนุมัติ";
+        return "รอดำเนินการ";
       case "PENDING":
-        return "รออนุมัติ";
+        return "เลือกตำแหน่งแล้ว";
       case "APPROVE":
-        return "ผ่านการอนุมัติ";
+        return "อนุมัติ";
       case "REJECT":
-        return "ไม่ผ่านการอนุมัติ";
+        return "ไม่อนุมัติ";
       case "REPORT":
-        return "ส่งไปออกคำสั่ง";
+        return "ส่งรายชื่อไปออกคำสั่ง";
       case "DONE":
-        return "ออกคำสั่งสำเร็จ";
+        return "ออกคำสั่งเสร็จแล้ว";
 
       default:
         return "-";
diff --git a/src/modules/06_retirement/components/resign/Resign.vue b/src/modules/06_retirement/components/resign/Resign.vue
index 0e76fbd8e..9f0b9664d 100644
--- a/src/modules/06_retirement/components/resign/Resign.vue
+++ b/src/modules/06_retirement/components/resign/Resign.vue
@@ -1,19 +1,37 @@
 <script setup lang="ts">
-import { ref, onMounted } from "vue";
-import type { QTableProps } from "quasar";
+import { ref, onMounted, computed } from "vue";
 import { useQuasar } from "quasar";
 import { useRouter } from "vue-router";
 import { useCounterMixin } from "@/stores/mixin";
+import { useRetirementDataStore } from "@/modules/06_retirement/store";
+
 import http from "@/plugins/http";
 import config from "@/app.config";
 
+import type { QTableProps } from "quasar";
+import type { ResponseItems } from "@/modules/06_retirement/interface/response/Main";
+
+const $q = useQuasar(); //ใช้ noti quasar
 const router = useRouter();
 const mixin = useCounterMixin();
-const { messageError, date2Thai, showLoader, hideLoader } = mixin;
-const $q = useQuasar(); //ใช้ noti quasar
+const RetirementData = useRetirementDataStore();
 
-const rows = ref<any>([]);
+const { messageError, date2Thai, showLoader, hideLoader, success } = mixin;
+const { statusText } = RetirementData;
+
+const rows = ref<ResponseItems[]>([]);
 const columns = ref<QTableProps["columns"]>([
+  {
+    name: "no",
+    align: "left",
+    label: "ลำดับ",
+    sortable: true,
+    field: "no",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
   {
     name: "prefix",
     align: "left",
@@ -22,6 +40,8 @@ const columns = ref<QTableProps["columns"]>([
     field: "prefix",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
   {
     name: "fullname",
@@ -31,73 +51,211 @@ const columns = ref<QTableProps["columns"]>([
     field: "fullname",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
+
   {
-    name: "positionType",
-    align: "left",
-    label: "ตำแหน่งประเภท",
-    sortable: true,
-    field: "positionType",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-  },
-  {
-    name: "position",
+    name: "positionTypeOld",
     align: "left",
     label: "ตำแหน่งในสายงาน",
     sortable: true,
-    field: "position",
+    field: "positionTypeOld",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
   {
-    name: "positionLevel",
+    name: "positionLevelOld",
     align: "left",
     label: "ระดับ",
     sortable: true,
-    field: "positionLevel",
+    field: "positionLevelOld",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
   {
-    name: "positionExecutive",
+    name: "positionNumberOld",
     align: "left",
-    label: "ตำแหน่งทางการบริหาร",
+    label: "เลขที่",
     sortable: true,
-    field: "positionExecutive",
+    field: "positionNumberOld",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
   {
-    name: "oc",
+    name: "organizationPositionOld",
     align: "left",
     label: "สังกัด",
     sortable: true,
-    field: "oc",
+    field: "organizationPositionOld",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
   {
-    name: "status",
+    name: "statustext",
     align: "left",
     label: "สถานะ",
     sortable: true,
-    field: "status",
+    field: "statustext",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
 ]);
 const visibleColumns = ref<string[]>([
+  "no",
   "prefix",
   "fullname",
-  "positionType",
-  "position",
-  "positionLevel",
-  "positionExecutive",
-  "oc",
-  "status",
+  "positionTypeOld",
+  "positionLevelOld",
+  "positionNumberOld",
+  "organizationPositionOld",
+  "statustext",
 ]);
 
+const filters = ref<ResponseItems[]>([]);
+const rows2 = ref<ResponseItems[]>([]);
+const columns2 = ref<QTableProps["columns"]>([
+  {
+    name: "no",
+    align: "left",
+    label: "ลำดับ",
+    sortable: true,
+    field: "no",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "prefix",
+    align: "left",
+    label: "คำนำหน้า",
+    sortable: true,
+    field: "prefix",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "fullname",
+    align: "left",
+    label: "ชื่อ-นามสกุล",
+    sortable: true,
+    field: "fullname",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+
+  {
+    name: "positionTypeOld",
+    align: "left",
+    label: "ตำแหน่งในสายงาน",
+    sortable: true,
+    field: "positionTypeOld",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "positionLevelOld",
+    align: "left",
+    label: "ระดับ",
+    sortable: true,
+    field: "positionLevelOld",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "positionNumberOld",
+    align: "left",
+    label: "เลขที่",
+    sortable: true,
+    field: "positionNumberOld",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "organizationPositionOld",
+    align: "left",
+    label: "สังกัด",
+    sortable: true,
+    field: "organizationPositionOld",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "statustext",
+    align: "left",
+    label: "สถานะ",
+    sortable: true,
+    field: "statustext",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+]);
+const visibleColumns2 = ref<string[]>([
+  "no",
+  "prefix",
+  "fullname",
+  "positionTypeOld",
+  "positionLevelOld",
+  "positionNumberOld",
+  "organizationPositionOld",
+  "statustext",
+]);
+
+const modal = ref<boolean>(false);
+const filterKeyword2 = ref<string>("");
+//ค้นหา คอลัมน์ คอลัมน์ที่แสดง
+const filterKeyword = ref<string>("");
+const filterRef = ref<any>(null);
+
+const openModal = () => (modal.value = true);
+const closeModal = () => (modal.value = false);
+
+const selected = ref<ResponseItems[]>([]);
+const checkSelected = computed(() => {
+  if (selected.value.length === 0) {
+    return true;
+  }
+});
+
+const resetFilter = () => {
+  filterKeyword.value = "";
+  filterRef.value.focus();
+};
+
+const openModalOrder = () => {
+  openModal();
+  const row = filters.value.filter(
+    (r: ResponseItems) =>
+      r.status == "WAITTING" || r.status == "PENDING" || r.status == "APPROVE"
+  );
+  rows2.value = row;
+};
+
 onMounted(async () => {
   await fecthlist();
 });
@@ -107,23 +265,37 @@ const fecthlist = async () => {
   await http
     .get(config.API.listResign())
     .then((res: any) => {
-      console.log(res);
-      let data = res.data.result;
-      rows.value = data.map((e: any) => ({
-        personalId: e.id,
-        profileId: e.profileId,
-        prefix: e.prefix,
-        fullname: e.firstName + "   " + e.lastName,
-        positionType: e.positionType,
-        position: e.positionLine,
-        positionLevel: e.positionLevel,
-        positionExecutive: e.positionExecutive,
-        oc: e.organizationOrganization,
-        status: e.status,
-      }));
+      const data = res.data.result;
+      let list: ResponseItems[] = [];
+
+      data.map((r: ResponseItems) => {
+        list.push({
+          activeDate: new Date(),
+          createdAt: new Date(),
+          firstName: r.firstName ?? "",
+          id: r.id ?? "",
+          isActive: r.isActive ? r.isActive : false,
+          lastName: r.lastName ?? "",
+          location: r.location ?? "",
+          organizationPositionOld: r.organizationPositionOld ?? "",
+          positionLevelOld: r.positionLevelOld ?? "",
+          positionNumberOld: r.positionNumberOld ?? "",
+          positionTypeOld: r.positionTypeOld ?? "",
+          prefix: r.prefix ?? "",
+          profileId: r.profileId ?? "",
+          reason: r.reason ?? "",
+          salary: r.salary ? r.salary : 0,
+          sendDate: new Date(),
+          status: r.status ?? "",
+          statustext: statusText(r.status ?? ""),
+          fullname: `${r.firstName ?? ""} ${r.lastName ?? ""}`,
+        });
+      });
+
+      rows.value = list;
+      filters.value = list;
     })
     .catch((e: any) => {
-      console.log(e);
       messageError($q, e);
     })
     .finally(() => {
@@ -131,28 +303,29 @@ const fecthlist = async () => {
     });
 };
 
-const paging = ref<boolean>(true);
-const pagination = ref({
-  sortBy: "desc",
-  descending: false,
-  page: 1,
-  rowsPerPage: 10,
-});
-const paginationLabel = (start: string, end: string, total: string) => {
-  if (paging.value == true) return " " + start + "-" + end + " ใน " + total;
-  else return start + "-" + end + " ใน " + total;
-};
-//ค้นหา คอลัมน์ คอลัมน์ที่แสดง
-const filterKeyword = ref<string>("");
-const filterRef = ref<any>(null);
-const resetFilter = () => {
-  filterKeyword.value = "";
-  filterRef.value.focus();
-};
+const saveOrder = async () => {
+  const id = selected.value.map((r) => r.id);
+  const body = {
+    id,
+  };
 
-// const nextPage = (id:string) => {
-//   router.push("/retirement/resign/"+id);
-// };
+  showLoader();
+  await http
+    .post(config.API.resignReport, body)
+    .then((res: any) => {
+      //   const data = res.data.result;
+      //   console.log(data);
+      success($q, "ส่งไปออกคำสั่งลาออกสำเร็จ");
+      closeModal();
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(async () => {
+      await fecthlist();
+      hideLoader();
+    });
+};
 </script>
 <template>
   <div class="toptitle text-dark col-12 row items-center">รายการลาออก</div>
@@ -161,6 +334,17 @@ const resetFilter = () => {
     <div class="col-12 row q-pa-md">
       <div class="row col-12">
         <div class="row col-12 q-col-gutter-sm">
+          <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
@@ -201,20 +385,12 @@ const resetFilter = () => {
           />
         </div>
         <div class="col-12 q-pt-sm">
-          <q-table
-            ref="table"
+          <d-table
             :columns="columns"
             :rows="rows"
             :filter="filterKeyword"
-            row-key="fullname"
-            flat
-            bordered
-            :paging="true"
-            dense
-            class="custom-header-table"
+            row-key="id"
             :visible-columns="visibleColumns"
-            :pagination-label="paginationLabel"
-            v-model:pagination="pagination"
           >
             <template v-slot:header="props">
               <q-tr :props="props">
@@ -227,107 +403,158 @@ const resetFilter = () => {
               <q-tr
                 :props="props"
                 class="cursor-pointer"
-                @click="
-                  router.push(`/retirement/resign/${props.row.personalId}`)
-                "
+                @click="router.push(`/retirement/resign/${props.row.id}`)"
               >
-                <!-- <q-td key="no" :props="props">
+                <q-td key="no" :props="props">
                   {{ props.rowIndex + 1 }}
-                </q-td> -->
+                </q-td>
                 <q-td key="prefix" :props="props">
                   {{ props.row.prefix }}
                 </q-td>
                 <q-td key="fullname" :props="props">
                   {{ props.row.fullname }}
                 </q-td>
-                <q-td key="positionType" :props="props">
-                  {{ props.row.positionType }}
+                <q-td key="positionTypeOld" :props="props">
+                  {{ props.row.positionTypeOld }}
                 </q-td>
-                <q-td key="position" :props="props">
-                  {{ props.row.position }}
+                <q-td key="positionLevelOld" :props="props">
+                  {{ props.row.positionLevelOld }}
                 </q-td>
-                <q-td key="positionLevel" :props="props">
-                  {{ props.row.positionLevel }}
-                </q-td>
-                <q-td key="positionExecutive" :props="props">
-                  {{ props.row.positionExecutive }}
-                </q-td>
-                <q-td key="oc" :props="props">
-                  {{ props.row.oc }}
+                <q-td key="positionNumberOld" :props="props">
+                  {{ props.row.positionNumberOld }}
                 </q-td>
 
-                <q-td key="status" :props="props">
-                  <q-icon
-                    size="20px"
-                    v-if="props.row.status == 'PENDING'"
-                    name="mdi-timer-sand"
-                    color="deep-orange"
-                  >
-                    <q-tooltip>รอดำเนินการ</q-tooltip>
-                  </q-icon>
-                  <q-icon
-                    size="20px"
-                    v-else-if="props.row.status == 'APPROVE'"
-                    name="mdi-check"
-                    color="teal"
-                  >
-                    <q-tooltip>เสร็จสิ้น</q-tooltip>
-                  </q-icon>
-                  <q-icon size="20px" v-else name="mdi-close" color="red">
-                    <q-tooltip>ยับยั้ง</q-tooltip>
-                  </q-icon>
-
-                  <!-- {{ props.row.status }} -->
+                <q-td key="organizationPositionOld" :props="props">
+                  <div class="table_ellipsis">
+                    {{ props.row.organizationPositionOld }}
+                  </div>
+                </q-td>
+                <q-td key="statustext" :props="props">
+                  {{ props.row.statustext }}
                 </q-td>
               </q-tr>
             </template>
-            <template v-slot:pagination="scope">
-              <q-pagination
-                v-model="pagination.page"
-                active-color="primary"
-                color="primary"
-                :max="scope.pagesNumber"
-                :max-pages="5"
-                size="sm"
-                boundary-links
-                direction-links
-              ></q-pagination>
-            </template>
-          </q-table>
+          </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="prefix" :props="props">
+                {{ props.row.prefix }}
+              </q-td>
+              <q-td key="fullname" :props="props">
+                {{ props.row.fullname }}
+              </q-td>
+              <q-td key="positionTypeOld" :props="props">
+                {{ props.row.positionTypeOld }}
+              </q-td>
+              <q-td key="positionLevelOld" :props="props">
+                {{ props.row.positionLevelOld }}
+              </q-td>
+              <q-td key="positionNumberOld" :props="props">
+                {{ props.row.positionNumberOld }}
+              </q-td>
+
+              <q-td key="organizationPositionOld" :props="props">
+                <div class="table_ellipsis">
+                  {{ props.row.organizationPositionOld }}
+                </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">
-.custom-header-table {
-  max-height: 64vh;
-
-  .q-table tr:nth-child(odd) td {
-    background: white;
-  }
-
-  .q-table tr:nth-child(even) td {
-    background: #f8f8f8;
-  }
-
-  .q-table thead tr {
-    background: #ecebeb;
-  }
-
-  .q-table thead tr th {
-    position: sticky;
-    z-index: 1;
-  }
-
-  /* this will be the loading indicator */
-  .q-table thead tr:last-child th {
-    /* height of all previous header rows */
-    top: 48px;
-  }
-
-  .q-table thead tr:first-child th {
-    top: 0;
-  }
-}
-</style>
+<style scoped lang="scss"></style>
diff --git a/src/modules/06_retirement/components/resign/ResignByid.vue b/src/modules/06_retirement/components/resign/ResignByid.vue
index 87822d692..a4a441b9a 100644
--- a/src/modules/06_retirement/components/resign/ResignByid.vue
+++ b/src/modules/06_retirement/components/resign/ResignByid.vue
@@ -38,20 +38,24 @@
         <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">{{ dataDetail.positionLine }}</div>
+            <div class="col-12 text-detail">
+              {{ dataDetail.positionTypeOld }}
+            </div>
           </div>
         </div>
         <div class="col-xs-6 col-sm-2 row items-center">
           <div class="col-12">
             <div class="col-12 text-top">ระดับ</div>
-            <div class="col-12 text-detail">{{ dataDetail.positionLevel }}</div>
+            <div class="col-12 text-detail">
+              {{ dataDetail.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">
-              {{ dataDetail.organizationOrganization }}
+              {{ dataDetail.organizationPositionOld }}
             </div>
           </div>
         </div>
@@ -59,20 +63,7 @@
           <div class="col-12">
             <div class="col-12 text-top">สถานะ</div>
             <div class="col-12 text-detail">
-              <q-icon
-                size="20px"
-                v-if="dataDetail.status == 'PENDING'"
-                name="mdi-timer-sand"
-                color="deep-orange"
-              />
-              <q-icon
-                size="20px"
-                v-else-if="dataDetail.status == 'APPROVE'"
-                name="mdi-check"
-                color="teal"
-              />
-              <q-icon size="20px" v-else name="mdi-close" color="red" />
-              {{ statusName(dataDetail.status) }}
+              {{ statusText(dataDetail.status) }}
             </div>
           </div>
         </div>
@@ -140,6 +131,268 @@
     </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-12 row items-center">
+            <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-4 row items-center">
+            <div class="col-12">
+              <q-input
+                :class="getClass(edit)"
+                :outlined="edit"
+                dense
+                lazy-rules
+                :readonly="!edit"
+                :borderless="!edit"
+                v-model="location"
+                :rules="[
+                  (val) => !!val || `${'กรุณากรอกสถานที่ยื่นขอลาออกจากราชการ'}`,
+                ]"
+                hide-bottom-space
+                :label="`${'สถานที่ยื่นขอลาออกจากราชการ'}`"
+              />
+            </div>
+          </div>
+          <div class="col-xs-4 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-xs-4 row items-center">
+            <div class="col-12">
+              <datepicker
+                menu-class-name="modalfix"
+                :readonly="!edit"
+                v-model="dateLeave"
+                :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="
+                      dateLeave !== null ? date2Thai(dateLeave) : 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>
+
   <!-- <q-dialog v-model="modalPass" persistent>
     <q-card style="width: 800px">
       <q-form ref="myForm">
@@ -208,30 +461,87 @@ import { ref, onMounted } from "vue";
 // import DialogFooter from "@/modules/05_placement/components/PersonalList/DialogFooter.vue";
 // import DialogHeader from "@/modules/05_placement/components/PersonalList/DialogHeader.vue";
 import { useCounterMixin } from "@/stores/mixin";
+import { useRetirementDataStore } from "@/modules/06_retirement/store";
+
 import http from "@/plugins/http";
 import config from "@/app.config";
 
-const router = useRouter();
-const route = useRoute();
-const mixin = useCounterMixin();
-const { messageError, date2Thai, showLoader, hideLoader, success } = mixin;
-const $q = useQuasar();
-const id = ref<string>(route.params.id.toString());
+import type { ResponseItems } from "@/modules/06_retirement/interface/response/Main";
 
-const dataDetail = ref<any>([]);
+const $q = useQuasar();
+const route = useRoute();
+const router = useRouter();
+const mixin = useCounterMixin();
+const RetirementData = useRetirementDataStore();
+
+const {
+  messageError,
+  date2Thai,
+  showLoader,
+  hideLoader,
+  success,
+  dialogMessage,
+} = mixin;
+const { statusText } = RetirementData;
+
+const id = ref<string>(route.params.id.toString());
+const myForm = ref<QForm | null>(null);
+const edit = ref<boolean>(false);
+const dataDetail = ref<ResponseItems>({
+  activeDate: new Date(),
+  createdAt: new Date(),
+  firstName: "",
+  id: "",
+  isActive: true,
+  lastName: "",
+  location: "",
+  organizationPositionOld: "",
+  positionLevelOld: "",
+  positionNumberOld: "",
+  positionTypeOld: "",
+  prefix: "",
+  profileId: "",
+  reason: "",
+  salary: 0,
+  sendDate: new Date(),
+  status: "",
+  statustext: "",
+  fullname: "",
+});
+
+const organizationPositionOld = ref<string>("");
+const positionTypeOld = ref<string>("");
+const positionLevelOld = ref<string>("");
+const posNo = ref<string>("");
+const salary = ref<number>(0);
+const date = ref<Date | null>(null);
+const dateLeave = ref<Date | null>(null);
+const reason = ref<string>("");
+const location = ref<string>("");
 
 // const modalPass = ref<boolean>(false);
 // const modalPassNot = ref<boolean>(false);
 onMounted(() => {
   fetchData(id.value);
 });
+
 const fetchData = async (id: string) => {
   showLoader();
   await http
     .get(config.API.resingByid(id))
     .then((res: any) => {
-      dataDetail.value = res.data.result;
-      // console.log(dataDetail.value);
+      const data = res.data.result;
+      dataDetail.value = data;
+
+      organizationPositionOld.value = data.organizationPositionOld ?? "";
+      positionTypeOld.value = data.positionTypeOld ?? "";
+      positionLevelOld.value = data.positionLevelOld ?? "";
+      posNo.value = data.positionNumberOld ?? "";
+      salary.value = data.salary ? data.salary : 0;
+      date.value = data.sendDate ? new Date(data.sendDate) : null;
+      dateLeave.value = data.activeDate ? new Date(data.activeDate) : null;
+      reason.value = data.reason ?? "";
+      location.value = data.location ?? "";
     })
     .catch((e) => {
       console.log(e);
@@ -241,6 +551,7 @@ const fetchData = async (id: string) => {
       hideLoader();
     });
 };
+
 const popUp = (action: "pass" | "passNot") => {
   if (action === "pass") {
     $q.dialog({
@@ -268,6 +579,7 @@ const popUp = (action: "pass" | "passNot") => {
     });
   }
 };
+
 const confirmpopUp = async () => {
   await http
     .get(config.API.resignConfirm(id.value))
@@ -283,6 +595,7 @@ const confirmpopUp = async () => {
       fetchData(id.value);
     });
 };
+
 const rejectpopUp = async () => {
   console.log("ยกเลิก");
   await http
@@ -300,16 +613,59 @@ const rejectpopUp = async () => {
 const redirectToRegistry = (id: string) => {
   router.push(`/registry/${id}`);
 };
-const statusName = (val: string) => {
-  switch (val) {
-    case "PENDING":
-      return "รอดำเนินการ";
-    case "APPROVE":
-      return "อนุมัติ";
-    case "REJECT":
-      return "ยับยั้ง";
+
+const conditionSave = () => {
+  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 formData = new FormData();
+  const send = date.value !== null ? new Date(date.value).toUTCString() : "";
+  const activeDate =
+    dateLeave.value !== null ? new Date(dateLeave.value).toUTCString() : "";
+  formData.append("Location", location.value);
+  formData.append("SendDate", send);
+  formData.append("ActiveDate", activeDate);
+  formData.append("Reason", reason.value);
+  formData.append("OrganizationPositionOld", organizationPositionOld.value);
+  formData.append("PositionTypeOld", positionTypeOld.value);
+  formData.append("PositionLevelOld", positionLevelOld.value);
+  formData.append("PositionNumberOld", posNo.value);
+  formData.append("AmountOld", salary.value.toString());
+  salary;
+  showLoader();
+  await http
+    .put(config.API.resingByid(id.value), formData)
+    .then((res: any) => {
+      //   const data = res.data.result;
+      //   console.log(data);
+      success($q, "แก้ไขข้อมูลเพื่อลงบัญชีแนบท้ายสำเร็จ");
+      edit.value = false;
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(async () => {
+      await fetchData(id.value);
+      hideLoader();
+    });
+};
+
 // const clickClose = () => {
 //   userNote.value = "";
 //   modalPass.value = false;
@@ -353,6 +709,13 @@ const statusName = (val: string) => {
 //     .onCancel(() => {})
 //     .onDismiss(() => {});
 // };
+
+const getClass = (val: boolean) => {
+  return {
+    "full-width inputgreen cursor-pointer": val,
+    "full-width cursor-pointer": !val,
+  };
+};
 </script>
 <style lang="scss" scope>
 .q-img {
@@ -367,34 +730,4 @@ const statusName = (val: string) => {
 .text-detail {
   font-weight: 500;
 }
-.custom-header-table {
-  max-height: 64vh;
-
-  .q-table tr:nth-child(odd) td {
-    background: white;
-  }
-
-  .q-table tr:nth-child(even) td {
-    background: #f8f8f8;
-  }
-
-  .q-table thead tr {
-    background: #ecebeb;
-  }
-
-  .q-table thead tr th {
-    position: sticky;
-    z-index: 1;
-  }
-
-  /* this will be the loading indicator */
-  .q-table thead tr:last-child th {
-    /* height of all previous header rows */
-    top: 48px;
-  }
-
-  .q-table thead tr:first-child th {
-    top: 0;
-  }
-}
 </style>
diff --git a/src/modules/06_retirement/interface/response/Main.ts b/src/modules/06_retirement/interface/response/Main.ts
index 4bc41e0f6..b76d87b7b 100644
--- a/src/modules/06_retirement/interface/response/Main.ts
+++ b/src/modules/06_retirement/interface/response/Main.ts
@@ -1,9 +1,32 @@
 interface resMain {
-    id: string;
-    createdAt: Date;
-    year: string;
-    round: number;
-    total: number;
-    typeReport: String;
+  id: string;
+  createdAt: Date;
+  year: string;
+  round: number;
+  total: number;
+  typeReport: String;
 }
-export type { resMain };
+
+interface ResponseItems {
+  activeDate: Date;
+  createdAt: Date;
+  firstName: string;
+  id: string;
+  isActive: boolean;
+  lastName: string;
+  location: string;
+  organizationPositionOld: string;
+  positionLevelOld: string;
+  positionNumberOld: string;
+  positionTypeOld: string;
+  prefix: string;
+  profileId: string;
+  reason: string;
+  salary: number;
+  sendDate: Date;
+  status: string;
+  statustext: string;
+  fullname: string;
+}
+
+export type { resMain, ResponseItems };
diff --git a/src/modules/06_retirement/store.ts b/src/modules/06_retirement/store.ts
index aa81242e5..0a91a5198 100644
--- a/src/modules/06_retirement/store.ts
+++ b/src/modules/06_retirement/store.ts
@@ -1,5 +1,27 @@
 import { defineStore } from "pinia";
 
 export const useRetirementDataStore = defineStore("retirement", () => {
-  return {};
+  const statusText = (val: string) => {
+    switch (val) {
+      case "WAITTING":
+        return "รอดำเนินการ";
+      case "PENDING":
+        return "เลือกตำแหน่งแล้ว";
+      case "APPROVE":
+        return "อนุมัติ";
+      case "REJECT":
+        return "ไม่อนุมัติ";
+      case "REPORT":
+        return "ส่งรายชื่อไปออกคำสั่ง";
+      case "DONE":
+        return "ออกคำสั่งเสร็จแล้ว";
+
+      default:
+        return "-";
+    }
+  };
+
+  return {
+    statusText,
+  };
 });

From 74b8362523128e1e114f09bbea8a16a3b96500d1 Mon Sep 17 00:00:00 2001
From: setthawutttty <stw.ttty@gmail.com>
Date: Tue, 15 Aug 2023 13:58:07 +0700
Subject: [PATCH 099/113] no message

---
 src/api/05_placement/api.placement.ts         |  5 ++++-
 src/api/index.ts                              |  4 ++--
 .../interface/response/officer.ts             |  4 ++--
 src/modules/05_placement/router.ts            | 22 +++++++++++++++++++
 4 files changed, 30 insertions(+), 5 deletions(-)

diff --git a/src/api/05_placement/api.placement.ts b/src/api/05_placement/api.placement.ts
index f86b18453..58ced9b93 100644
--- a/src/api/05_placement/api.placement.ts
+++ b/src/api/05_placement/api.placement.ts
@@ -123,7 +123,10 @@ export default {
   repatriationMainReport: () => `${placement}/repatriation/report`,
   // ขอย้าย
   placemenRelocation,
-
+  relocationMain: () => `${placement}/relocation`,
+  relocationDetail: (id:string) => `${placement}/relocation/${id}`,
+  relocationMainDelete: (id:string) => `${placement}/relocation/${id}`,
+  relocationMainReport: () => `${placement}/relocation/report`,
   // อื่นๆ
   placemenOther,
 };
diff --git a/src/api/index.ts b/src/api/index.ts
index 244b63653..64e6c3ecc 100644
--- a/src/api/index.ts
+++ b/src/api/index.ts
@@ -26,8 +26,8 @@ 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: "http://192.168.1.151:7776/v1",
+    API_PROBATION_URI: "https://ehr.joolsoft.com/v1",
+    // API_PROBATION_URI: "http://192.168.1.151:7776/v1",
   },
   test: {
     API_URI: "http://localhost:5010/api/v1",
diff --git a/src/modules/05_placement/interface/response/officer.ts b/src/modules/05_placement/interface/response/officer.ts
index 64d298641..4cf58b1bb 100644
--- a/src/modules/05_placement/interface/response/officer.ts
+++ b/src/modules/05_placement/interface/response/officer.ts
@@ -2,8 +2,8 @@ interface officerType {
     no:number,
     id: string,
     prefix: string,
-    firstName: string,
-    lastName: string,
+    firstname: string,
+    lastname: string,
     position: string,
     posNo: string,
     positionLevel: string,
diff --git a/src/modules/05_placement/router.ts b/src/modules/05_placement/router.ts
index 373a42352..72f561168 100644
--- a/src/modules/05_placement/router.ts
+++ b/src/modules/05_placement/router.ts
@@ -37,6 +37,8 @@ const RepatriationOrderAdd = () =>
   const helpgovernmentbyId = () => import("@/modules/05_placement/components/helpgovernment/governmentDetail.vue")
   const repatriate = () => import("@/modules/05_placement/components/Repatriate/RepatriateMain.vue")
   const repatriatebyId = () => import("@/modules/05_placement/components/Repatriate/RepatriatebyId.vue")
+  const relocation = () => import("@/modules/05_placement/components/Relocation/RelocationMain.vue")
+  const relocationbyId = () => import("@/modules/05_placement/components/Relocation/RelocationbyId.vue")
 //รับโอน
 const receiveMain = () =>
   import("@/modules/05_placement/components/Receive/receiveMain.vue");
@@ -258,4 +260,24 @@ export default [
       Role: "placement",
     },
   },
+  {
+    path: "/relocation",
+    name: "relocation",
+    component: relocation,
+    meta: {
+      Auth: true,
+      Key: [6.9],
+      Role: "placement",
+    },
+  },
+  {
+    path: "/relocation/detail/:id",
+    name: "relocationId",
+    component: relocationbyId,
+    meta: {
+      Auth: true,
+      Key: [6.9],
+      Role: "placement",
+    },
+  },
 ];

From 62a8fa99139eff00b6c0d41d3921b348a2ea948d Mon Sep 17 00:00:00 2001
From: setthawutttty <stw.ttty@gmail.com>
Date: Tue, 15 Aug 2023 13:59:38 +0700
Subject: [PATCH 100/113] no message

---
 .../components/Relocation/RelocationMain.vue  | 723 ++++++++++++++++
 .../components/Relocation/RelocationModal.vue | 799 ++++++++++++++++++
 .../components/Relocation/RelocationbyId.vue  | 508 +++++++++++
 .../interface/response/Relocation.ts          |  38 +
 4 files changed, 2068 insertions(+)
 create mode 100644 src/modules/05_placement/components/Relocation/RelocationMain.vue
 create mode 100644 src/modules/05_placement/components/Relocation/RelocationModal.vue
 create mode 100644 src/modules/05_placement/components/Relocation/RelocationbyId.vue
 create mode 100644 src/modules/05_placement/interface/response/Relocation.ts

diff --git a/src/modules/05_placement/components/Relocation/RelocationMain.vue b/src/modules/05_placement/components/Relocation/RelocationMain.vue
new file mode 100644
index 000000000..1f84c5212
--- /dev/null
+++ b/src/modules/05_placement/components/Relocation/RelocationMain.vue
@@ -0,0 +1,723 @@
+<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 getSelectedString = computed(() => {
+  return selected.value.length === 0
+    ? ''
+    : `${selected.value.length} record${
+        selected.value.length > 1 ? 's' : ''
+      } selected of ${rows.value.length}`;
+});
+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,
+        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="personalId"
+          flat
+          :visible-columns="visibleColumns2"
+          selection="multiple"
+          v-model:selected="selected"
+        >
+          <template v-slot:header-selection="scope">
+            <q-checkbox
+              keep-color
+              color="primary"
+              dense
+              v-model="scope.selected"
+
+            />
+          </template>
+          <template v-slot:body="props">
+            <q-tr :props="props" class="cursor-pointer">
+              <q-td>
+                <q-checkbox
+                :key="props.id"
+                  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>
diff --git a/src/modules/05_placement/components/Relocation/RelocationModal.vue b/src/modules/05_placement/components/Relocation/RelocationModal.vue
new file mode 100644
index 000000000..89208163a
--- /dev/null
+++ b/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.receivePosition(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>
diff --git a/src/modules/05_placement/components/Relocation/RelocationbyId.vue b/src/modules/05_placement/components/Relocation/RelocationbyId.vue
new file mode 100644
index 000000000..7cf80c7e8
--- /dev/null
+++ b/src/modules/05_placement/components/Relocation/RelocationbyId.vue
@@ -0,0 +1,508 @@
+<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 firstName = ref<string>("");
+const lastName = ref<string>("");
+const position = ref<string>("");
+const posNo = ref<string>("");
+const positionLevel = 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 positionTypeOld = ref<string>("");
+const positionLevelOld = 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;
+      fullname.value = `${data.firstname} ${data.lastname}`
+      prefix.value = data.prefix;
+      firstName.value = data.firstname;
+      lastName.value = data.lastname;
+      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;
+      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 = {
+    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.transferId(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-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>
+  
\ No newline at end of file
diff --git a/src/modules/05_placement/interface/response/Relocation.ts b/src/modules/05_placement/interface/response/Relocation.ts
new file mode 100644
index 000000000..4972a366f
--- /dev/null
+++ b/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};
\ No newline at end of file

From 077f12a34df0196803ae0c3aeb6841d8e7b4b893 Mon Sep 17 00:00:00 2001
From: setthawutttty <stw.ttty@gmail.com>
Date: Tue, 15 Aug 2023 17:21:26 +0700
Subject: [PATCH 101/113] =?UTF-8?q?=E0=B8=A3=E0=B8=B2=E0=B8=A2=E0=B8=81?=
 =?UTF-8?q?=E0=B8=B2=E0=B8=A3=E0=B8=8A=E0=B9=88=E0=B8=A7=E0=B8=A2=E0=B8=A3?=
 =?UTF-8?q?=E0=B8=B2=E0=B8=8A=E0=B8=81=E0=B8=B2=E0=B8=A3=20=20=E0=B8=AA?=
 =?UTF-8?q?=E0=B9=88=E0=B8=87=E0=B8=95=E0=B8=B1=E0=B8=A7=E0=B8=81=E0=B8=A5?=
 =?UTF-8?q?=E0=B8=B1=E0=B8=9A=20=E0=B8=A2=E0=B9=89=E0=B8=B2=E0=B8=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/05_placement/api.placement.ts         |   4 +
 .../components/Relocation/RelocationMain.vue  |  16 +-
 .../components/Relocation/RelocationModal.vue |   2 +-
 .../components/Relocation/RelocationbyId.vue  | 523 +++++++++---------
 .../components/Repatriate/RepatriateMain.vue  |   2 +-
 .../components/Repatriate/RepatriatebyId.vue  |   3 +-
 .../helpgovernment/governmentDetail.vue       |   2 +-
 .../components/helpgovernment/mainHelp.vue    |   2 +-
 8 files changed, 290 insertions(+), 264 deletions(-)

diff --git a/src/api/05_placement/api.placement.ts b/src/api/05_placement/api.placement.ts
index 5e3012bdd..b655b8a73 100644
--- a/src/api/05_placement/api.placement.ts
+++ b/src/api/05_placement/api.placement.ts
@@ -115,6 +115,7 @@ export default {
   officerDetail: (id:string) => `${placement}/officer/${id}`,
   officerMainDelete: (id:string) => `${placement}/officer/${id}`,
   officerMainReport: () => `${placement}/officer/report`,
+  officerMainEdit: (id:string) => `${placemenHelpGov}/${id}`,
 
   // ส่งตัวกลับ
   placemenRepatriation,
@@ -122,12 +123,15 @@ export default {
   repatriationDetail: (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,
 };
diff --git a/src/modules/05_placement/components/Relocation/RelocationMain.vue b/src/modules/05_placement/components/Relocation/RelocationMain.vue
index 1f84c5212..86e3bf520 100644
--- a/src/modules/05_placement/components/Relocation/RelocationMain.vue
+++ b/src/modules/05_placement/components/Relocation/RelocationMain.vue
@@ -23,13 +23,7 @@ const checkSelected = computed(() => {
     return true;
   }
 });
-const getSelectedString = computed(() => {
-  return selected.value.length === 0
-    ? ''
-    : `${selected.value.length} record${
-        selected.value.length > 1 ? 's' : ''
-      } selected of ${rows.value.length}`;
-});
+
 const $q = useQuasar();
 const router = useRouter();
 const mixin = useCounterMixin();
@@ -283,7 +277,6 @@ const openModalOrder = () => {
 const openModalTree = (id: string) => {
   personalId.value = id;
   console.log(personalId.value);
-
   personal.value = rows.value.filter((e: any) => e.id === id);
   modalTree.value = true;
 };
@@ -645,7 +638,7 @@ onMounted(async () => {
         :columns="columns2"
           :rows="rows2"
           :filter="filterKeyword2"
-          row-key="personalId"
+          row-key="id"
           flat
           :visible-columns="visibleColumns2"
           selection="multiple"
@@ -664,7 +657,6 @@ onMounted(async () => {
             <q-tr :props="props" class="cursor-pointer">
               <q-td>
                 <q-checkbox
-                :key="props.id"
                   keep-color
                   color="primary"
                   dense
@@ -712,12 +704,12 @@ onMounted(async () => {
       </q-card-actions>
     </q-card>
   </q-dialog>
-  <!-- <DialogOrgTree
+  <DialogOrgTree
     v-model:modal="modalTree"
     :close="closeModalTree"
     :personal="personal"
     :personalId="personalId"
-  /> -->
+  />
   <!-- :personalId="personalId" -->
 </template>
 <style scoped lang="scss"></style>
diff --git a/src/modules/05_placement/components/Relocation/RelocationModal.vue b/src/modules/05_placement/components/Relocation/RelocationModal.vue
index 89208163a..2318223cf 100644
--- a/src/modules/05_placement/components/Relocation/RelocationModal.vue
+++ b/src/modules/05_placement/components/Relocation/RelocationModal.vue
@@ -178,7 +178,7 @@ const saveAppoint = async () => {
       console.log("save appoint===>", dataAppoint);
       showLoader();
       await http
-        .put(config.API.receivePosition(id.value), dataAppoint)
+        .put(config.API.relocationMainPut(id.value), dataAppoint)
         .then((res) => {
           console.log("respone=>", res);
           success($q, "บันทึกสำเร็จ");
diff --git a/src/modules/05_placement/components/Relocation/RelocationbyId.vue b/src/modules/05_placement/components/Relocation/RelocationbyId.vue
index 7cf80c7e8..4e1825af8 100644
--- a/src/modules/05_placement/components/Relocation/RelocationbyId.vue
+++ b/src/modules/05_placement/components/Relocation/RelocationbyId.vue
@@ -37,19 +37,31 @@ const institution = ref<string>("ฝ่ายบริหารงานทั
 const fullname = ref<string>("");
 const id = ref<string>("");
 const prefix = ref<string>("");
-const firstName = ref<string>("");
-const lastName = 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>("");
@@ -104,10 +116,13 @@ const getData = async () => {
     .get(config.API.relocationDetail(personId))
     .then((res: any) => {
       const data = res.data.result;
-      fullname.value = `${data.firstname} ${data.lastname}`
+      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;
+      firstname.value = data.firstname;
+      lastname.value = data.lastname;
+      educationOld.value = data.educationOld;
       position.value = data.position;
       posNo.value = data.posNo;
       positionLevel.value = data.positionLevel;
@@ -121,6 +136,14 @@ const getData = async () => {
       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) => {
@@ -157,18 +180,29 @@ const conditionSave = async () => {
 };
 const saveData = async () => {
   const body = {
-    organization: organization.value,
+    educationOld: educationOld.value,
+    prefixId:prefixId.value,
+    citizenId:citizenId.value,
+    firstname:firstname.value,
+    lastname:lastname.value,
     reason: reason.value,
     organizationPositionOld: organizationPositionOld.value,
-    date: date.value,
     positionTypeOld: positionTypeOld.value,
     positionLevelOld: positionLevelOld.value,
-    positionNumberOld: posNo.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.transferId(personId.toString()), body)
+    .put(config.API.relocationMainEdit(personId.toString()), body)
     .then((res: any) => {
       //   const data = res.data.result;
       //   console.log(data);
@@ -218,199 +252,219 @@ onMounted(async () => {
 });
 </script>
 <template>
-    <div class="toptitle text-dark col-12 row items-center">
+  <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
-        icon="mdi-arrow-left"
-        unelevated
-        round
+        outline
+        color="blue"
         dense
-        flat
-        color="primary"
-        class="q-mr-sm"
-        @click="router.go(-1)"
+        icon-right="mdi-open-in-new"
+        class="q-px-sm"
+        label="ดูข้อมูลทะเบียนประวัติ"
+        @click="router.push(`/registry/${personId}`)"
       />
-      รายละเอียดการส่งตัวกลับ {{ 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 />
+    <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="blue"
+          color="primary"
           dense
-          icon-right="mdi-open-in-new"
+          icon-right="mdi-file-edit-outline"
           class="q-px-sm"
-          label="ดูข้อมูลทะเบียนประวัติ"
-          @click="router.push(`/registry/${personId}`)"
+          label="แก้ไข"
+          style="width: 80px"
+          @click="edit = !edit"
         />
       </div>
-      <div class="col-12"><q-separator /></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-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-12 row items-center">
-              <div class="col-12">
-                <div class="text-weight-bold text-grey">
-                  ตำแหน่งและหน่วยงานเดิม
+                <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-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 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-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 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 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="positionTypeOld"
+                :rules="[(val) => !!val || `${'กรุณากรอกตำแหน่งประเภท'}`]"
+                hide-bottom-space
+                :label="`${'ตำแหน่งประเภท'}`"
+              />
             </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="positionLevelOld"
+                :rules="[(val) => !!val || `${'กรุณากรอกระดับ'}`]"
+                hide-bottom-space
+                :label="`${'ระดับ'}`"
+              />
             </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-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 class="col-12"><q-separator /></div>
-            <div class="col-xs-6 col-sm-6 row items-center">
+          </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)"
@@ -425,50 +479,10 @@ onMounted(async () => {
                   :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-xs-6 col-sm-3 row items-center">
+            <div class="text-weight-bold text-grey col-12">
+              เงินเดือนตำแหน่งและหน่วยงานที่รับโอน
             </div>
             <div class="col-12">
               <q-input
@@ -478,31 +492,46 @@ onMounted(async () => {
                 lazy-rules
                 :readonly="!edit"
                 :borderless="!edit"
-                v-model="reason"
-                :rules="[(val) => !!val || `${'กรุณากรอกหมายเหตุ '}`]"
+                v-model="salaryNew"
+                :rules="[(val) => !!val || `${'กรุณากรอกเงินเดือน'}`]"
                 hide-bottom-space
-                :label="`${'หมายเหตุ '}`"
-                type="textarea"
+                :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>
-      </q-form>
-    </q-card>
-  </template>
+      </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>
-  
\ No newline at end of file
+<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>
diff --git a/src/modules/05_placement/components/Repatriate/RepatriateMain.vue b/src/modules/05_placement/components/Repatriate/RepatriateMain.vue
index 2deb571b2..c678620e9 100644
--- a/src/modules/05_placement/components/Repatriate/RepatriateMain.vue
+++ b/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"
diff --git a/src/modules/05_placement/components/Repatriate/RepatriatebyId.vue b/src/modules/05_placement/components/Repatriate/RepatriatebyId.vue
index 2f214ec16..0d7bf023a 100644
--- a/src/modules/05_placement/components/Repatriate/RepatriatebyId.vue
+++ b/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);
diff --git a/src/modules/05_placement/components/helpgovernment/governmentDetail.vue b/src/modules/05_placement/components/helpgovernment/governmentDetail.vue
index 716269933..944de9a45 100644
--- a/src/modules/05_placement/components/helpgovernment/governmentDetail.vue
+++ b/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);
diff --git a/src/modules/05_placement/components/helpgovernment/mainHelp.vue b/src/modules/05_placement/components/helpgovernment/mainHelp.vue
index 26c1e5a24..0b66418ce 100644
--- a/src/modules/05_placement/components/helpgovernment/mainHelp.vue
+++ b/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"

From a8036f2353c842cd90bc83f5a3873804b6731cb6 Mon Sep 17 00:00:00 2001
From: setthawutttty <stw.ttty@gmail.com>
Date: Tue, 15 Aug 2023 17:39:32 +0700
Subject: [PATCH 102/113] status text

---
 .../05_placement/components/Relocation/RelocationMain.vue        | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/modules/05_placement/components/Relocation/RelocationMain.vue b/src/modules/05_placement/components/Relocation/RelocationMain.vue
index 86e3bf520..03122f023 100644
--- a/src/modules/05_placement/components/Relocation/RelocationMain.vue
+++ b/src/modules/05_placement/components/Relocation/RelocationMain.vue
@@ -297,6 +297,7 @@ const getData = async () => {
         dateOfBirth: item.dateOfBirth,
         gender: item.gender,
         status: item.status,
+        statusText:statusText(item.status),
         recruitDate: item.recruitDate,
         positionNumber: item.positionNumber,
         positionPath: item.positionPath,

From 4dfe222a85cff0f540af879e9e66485f7b09b95e Mon Sep 17 00:00:00 2001
From: AnandaTon <125332905+anandaAiemvong@users.noreply.github.com>
Date: Tue, 15 Aug 2023 17:44:33 +0700
Subject: [PATCH 103/113] =?UTF-8?q?ui/api=20=E0=B9=84=E0=B8=A5=E0=B9=88?=
 =?UTF-8?q?=E0=B8=AD=E0=B8=AD=E0=B8=81=20=E0=B8=9B=E0=B8=A5=E0=B8=94?=
 =?UTF-8?q?=E0=B8=AD=E0=B8=AD=E0=B8=81=20=E0=B9=83=E0=B8=AB=E0=B9=89?=
 =?UTF-8?q?=E0=B8=AD=E0=B8=AD=E0=B8=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/06_retirement/api.retirement.ts       |   64 +-
 src/interface/request/main/main.ts            |    2 +-
 .../06_retirement/components/DialogFooter.vue |   69 +
 .../06_retirement/components/DialogHeader.vue |   29 +
 .../components/Discharged/dischargedMain.vue  |  576 ++++++++
 .../Discharged/dischargedRegistry.vue         |  443 +++++++
 .../components/DismissOrder/AddOrder.vue      |   91 --
 .../components/DismissOrder/DismissOrder.vue  | 1168 +++++++----------
 .../components/DismissOrder/outRegistry.vue   |  443 +++++++
 .../components/DismissOrder/step01.vue        |  353 -----
 .../components/DismissOrder/step02.vue        |  684 ----------
 .../components/DismissOrder/step03.vue        |  580 --------
 .../components/Expulsion/expulsionMain.vue    |  576 ++++++++
 .../Expulsion/expulsionRegistry.vue           |  443 +++++++
 .../interface/response/discharged.ts          |   45 +
 .../interface/response/expulsion.ts           |   45 +
 .../06_retirement/interface/response/out.ts   |   45 +
 src/modules/06_retirement/router.ts           |   83 +-
 .../components/1_Proposals/listProposals.vue  |    2 +-
 19 files changed, 3326 insertions(+), 2415 deletions(-)
 create mode 100644 src/modules/06_retirement/components/DialogFooter.vue
 create mode 100644 src/modules/06_retirement/components/DialogHeader.vue
 create mode 100644 src/modules/06_retirement/components/Discharged/dischargedMain.vue
 create mode 100644 src/modules/06_retirement/components/Discharged/dischargedRegistry.vue
 delete mode 100644 src/modules/06_retirement/components/DismissOrder/AddOrder.vue
 create mode 100644 src/modules/06_retirement/components/DismissOrder/outRegistry.vue
 delete mode 100644 src/modules/06_retirement/components/DismissOrder/step01.vue
 delete mode 100644 src/modules/06_retirement/components/DismissOrder/step02.vue
 delete mode 100644 src/modules/06_retirement/components/DismissOrder/step03.vue
 create mode 100644 src/modules/06_retirement/components/Expulsion/expulsionMain.vue
 create mode 100644 src/modules/06_retirement/components/Expulsion/expulsionRegistry.vue
 create mode 100644 src/modules/06_retirement/interface/response/discharged.ts
 create mode 100644 src/modules/06_retirement/interface/response/expulsion.ts
 create mode 100644 src/modules/06_retirement/interface/response/out.ts

diff --git a/src/api/06_retirement/api.retirement.ts b/src/api/06_retirement/api.retirement.ts
index 4ad20b606..cfa582ad8 100644
--- a/src/api/06_retirement/api.retirement.ts
+++ b/src/api/06_retirement/api.retirement.ts
@@ -1,36 +1,46 @@
 import env from "../index";
-const retirement = `${env.API_URI}/retirement`
-const retirementDischarge = `${retirement}/discharge`
-const retirementExpulsion = `${retirement}/expulsion`
-const retirementOut = `${retirement}/out`
+const retirement = `${env.API_URI}/retirement`;
+const retirementDischarge = `${retirement}/discharge`;
+const retirementExpulsion = `${retirement}/expulsion`;
+const retirementOut = `${retirement}/out`;
 
 export default {
-    profile: (type: string, year: string) => `${retirement}/profile/${type}/${year}`,
-    profileRetire: (retireProfileId: string) => `${retirement}/profile/${retireProfileId}`,
-    listRetire: (retireId: string) => `${retirement}/${retireId}`,
-    createnote: () => `${retirement}/edit`,
-    removeProfile: () => `${retirement}/remove`,
-    reasonId: (retireId: string) => `${retirement}/reason/${retireId}`,
-    retirement: (type: string, year: string) => `${retirement}/${type}/${year}`,
-    createProfile: () => `${retirement}/profile`,
+  profile: (type: string, year: string) =>
+    `${retirement}/profile/${type}/${year}`,
+  profileRetire: (retireProfileId: string) =>
+    `${retirement}/profile/${retireProfileId}`,
+  listRetire: (retireId: string) => `${retirement}/${retireId}`,
+  createnote: () => `${retirement}/edit`,
+  removeProfile: () => `${retirement}/remove`,
+  reasonId: (retireId: string) => `${retirement}/reason/${retireId}`,
+  retirement: (type: string, year: string) => `${retirement}/${type}/${year}`,
+  createProfile: () => `${retirement}/profile`,
 
-    //RetirementDeceased ถึงแก่กรรม
-    listDeceased: () => `${retirement}/deceased`,
-    detailDeceased: (id: string) => `${retirement}/deceased/${id}`,
+  //RetirementDeceased ถึงแก่กรรม
+  listDeceased: () => `${retirement}/deceased`,
+  detailDeceased: (id: string) => `${retirement}/deceased/${id}`,
 
-    // RetirementResign ระบบลาออก
-    listResign: () => `${retirement}/resign`,
-    resingByid: (id: string) => `${retirement}/resign/${id}`,
-    resignConfirm: (id: string) => `${retirement}/resign/confirm/${id}`,
-    resignReject: (id: string) => `${retirement}/resign/reject/${id}`,
+  // RetirementResign ระบบลาออก
+  listResign: () => `${retirement}/resign`,
+  resingByid: (id: string) => `${retirement}/resign/${id}`,
+  resignConfirm: (id: string) => `${retirement}/resign/confirm/${id}`,
+  resignReject: (id: string) => `${retirement}/resign/reject/${id}`,
 
-    // ปลดออก
-    retirementDischarge,
+  // ปลดออก
+  retirementDischarge,
+  listDischared: () => `${retirement}/dischared`,
+  discharedByid: (id: string) => `${retirement}/dischared/${id}`,
+  discharedReport: `${retirement}/dischared/report`,
 
-    // ไล่ออก
-    retirementExpulsion,
-
-    // ให้ออก
-    retirementOut
+  // ไล่ออก
+  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`,
 };
diff --git a/src/interface/request/main/main.ts b/src/interface/request/main/main.ts
index ad8f16e68..fc1d1f2cf 100644
--- a/src/interface/request/main/main.ts
+++ b/src/interface/request/main/main.ts
@@ -257,7 +257,7 @@ const menuList = readonly<any[]>([
         role: "placement",
       },
       {
-        key: 6.10,
+        key: 6.1,
         label: "รายการอื่นๆ" /* */,
         path: "other",
         role: "placement",
diff --git a/src/modules/06_retirement/components/DialogFooter.vue b/src/modules/06_retirement/components/DialogFooter.vue
new file mode 100644
index 000000000..d2358bb75
--- /dev/null
+++ b/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>
diff --git a/src/modules/06_retirement/components/DialogHeader.vue b/src/modules/06_retirement/components/DialogHeader.vue
new file mode 100644
index 000000000..a20e917b0
--- /dev/null
+++ b/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>
diff --git a/src/modules/06_retirement/components/Discharged/dischargedMain.vue b/src/modules/06_retirement/components/Discharged/dischargedMain.vue
new file mode 100644
index 000000000..38dee5be2
--- /dev/null
+++ b/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>
diff --git a/src/modules/06_retirement/components/Discharged/dischargedRegistry.vue b/src/modules/06_retirement/components/Discharged/dischargedRegistry.vue
new file mode 100644
index 000000000..9d7047efc
--- /dev/null
+++ b/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>
diff --git a/src/modules/06_retirement/components/DismissOrder/AddOrder.vue b/src/modules/06_retirement/components/DismissOrder/AddOrder.vue
deleted file mode 100644
index 687cbd57a..000000000
--- a/src/modules/06_retirement/components/DismissOrder/AddOrder.vue
+++ /dev/null
@@ -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>
diff --git a/src/modules/06_retirement/components/DismissOrder/DismissOrder.vue b/src/modules/06_retirement/components/DismissOrder/DismissOrder.vue
index a8024c37a..5a174a027 100644
--- a/src/modules/06_retirement/components/DismissOrder/DismissOrder.vue
+++ b/src/modules/06_retirement/components/DismissOrder/DismissOrder.vue
@@ -1,29 +1,330 @@
+<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/out";
+
+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.retirementOut)
+    .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.outByid(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.outReport, 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>
-  <div>
-    <q-card flat bordered class="col-12 q-mt-sm q-pa-md">
-      <div class="row q-col-gutter-sm">
-        <div class="row col-12 q-col-gutter-sm">
-          <q-select
-            class="col-xs-12 col-sm-3 col-md-2"
-            v-model="fiscalyear"
-            label="ปีงบประมาณ"
-            dense
-            emit-value
-            map-options
-            :options="fiscalyearOP"
-            option-value="id"
-            option-label="name"
-            lazy-rules
-            hide-bottom-space
-            :readonly="false"
-            :borderless="false"
-            :outlined="true"
-            :hide-dropdown-icon="false"
-            @update:model-value="searchFilterTable"
-          />
+  <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"
@@ -45,6 +346,7 @@
               />
             </template>
           </q-input>
+
           <q-select
             v-model="visibleColumns"
             multiple
@@ -58,67 +360,17 @@
             option-value="name"
             options-cover
             style="min-width: 150px"
-            class="col-xs-12 col-sm-3 col-md-2"
+            class="col-xs-12 col-sm-3 col-md-2 q-ml-sm"
           />
         </div>
-        <div class="col-12">
-          <q-card bordered class="col-12 filter-card q-pa-sm">
-            <div class="row col-12 q-col-gutter-sm">
-              <q-select
-                class="col-xs-12 col-sm-3 col-md-2"
-                v-model="OrderType"
-                label="ประเภท"
-                dense
-                emit-value
-                map-options
-                option-label="name"
-                :options="OrderTypeOption"
-                option-value="id"
-                lazy-rules
-                hide-bottom-space
-                :readonly="false"
-                :borderless="false"
-                :outlined="true"
-                :hide-dropdown-icon="false"
-                @update:model-value="searchFilterTable"
-              />
-              <q-select
-                class="col-xs-12 col-sm-3 col-md-2"
-                v-model="OrderStatus"
-                label="สถานะ"
-                dense
-                emit-value
-                map-options
-                option-label="name"
-                :options="OrderStatusOption"
-                option-value="id"
-                lazy-rules
-                hide-bottom-space
-                :readonly="false"
-                :borderless="false"
-                :outlined="true"
-                :hide-dropdown-icon="false"
-                @update:model-value="searchFilterTable"
-              />
-            </div>
-          </q-card>
-        </div>
-        <div class="col-12">
-          <q-table
-            ref="table"
+
+        <div class="col-12 q-pt-sm">
+          <d-table
             :columns="columns"
-            :rows="UpdataData"
+            :rows="rows"
             :filter="filterKeyword"
-            row-key="Order"
-            flat
-            bordered
-            :paging="true"
-            dense
-            class="custom-header-table"
-            v-bind="attrs"
+            row-key="id"
             :visible-columns="visibleColumns"
-            :pagination-label="paginationLabel"
-            v-model:pagination="pagination"
           >
             <template v-slot:header="props">
               <q-tr :props="props">
@@ -129,31 +381,61 @@
               </q-tr>
             </template>
             <template v-slot:body="props">
-              <q-tr
-                :props="props"
-                class="cursor-pointer"
-                @click="redirectToPage(props.row.Order)"
-              >
-                <q-td key="Order" :props="props">
-                  {{ props.row.Order }}
+              <q-tr :props="props" class="cursor-pointer">
+                <q-td
+                  key="no"
+                  :props="props"
+                  @click="router.push(`/retirement/out/${props.row.id}`)"
+                >
+                  {{ props.rowIndex + 1 }}
                 </q-td>
-                <q-td key="OrderNum" :props="props">
-                  {{ props.row.OrderNum }}
+                <q-td
+                  key="fullname"
+                  :props="props"
+                  @click="router.push(`/retirement/out/${props.row.id}`)"
+                >
+                  {{ props.row.fullname }}
                 </q-td>
-                <q-td key="OrderType" :props="props">
-                  {{ props.row.OrderType }}
+                <q-td
+                  key="position"
+                  :props="props"
+                  @click="router.push(`/retirement/out/${props.row.id}`)"
+                >
+                  {{ props.row.position }}
                 </q-td>
-                <q-td key="OrderDate" :props="props">
-                  {{ props.row.OrderDate }}
+                <q-td
+                  key="positionLevel"
+                  :props="props"
+                  @click="router.push(`/retirement/out/${props.row.id}`)"
+                >
+                  {{ props.row.positionLevel }}
                 </q-td>
-                <q-td key="OrderBy" :props="props">
-                  {{ props.row.OrderBy }}
+                <q-td
+                  key="organizationPositionOld"
+                  :props="props"
+                  @click="router.push(`/retirement/out/${props.row.id}`)"
+                >
+                  <div class="table_ellipsis">
+                    {{ props.row.organizationPositionOld }}
+                    <!-- <q-tooltip>
+                      {{ props.row.organizationPositionOld }}
+                    </q-tooltip> -->
+                  </div>
                 </q-td>
-                <q-td key="Signer" :props="props">
-                  {{ props.row.Signer }}
+                <q-td
+                  key="organization"
+                  :props="props"
+                  @click="router.push(`/retirement/out/${props.row.id}`)"
+                >
+                  <div class="table_ellipsis">
+                    {{ props.row.organization }}
+                    <!-- <q-tooltip>
+                      {{ props.row.organization }}
+                    </q-tooltip> -->
+                  </div>
                 </q-td>
-                <q-td key="OrderStatus" :props="props">
-                  {{ props.row.OrderStatus }}
+                <q-td key="statustext" :props="props">
+                  {{ props.row.statustext }}
                 </q-td>
                 <q-td auto-width>
                   <q-btn
@@ -162,579 +444,133 @@
                     flat
                     round
                     color="red"
-                    @click.stop="clickDelete(props.row.id)"
+                    @click="clickDelete(props.row.id)"
                     icon="mdi-delete"
                   >
+                    <q-tooltip>ลบข้อมูล</q-tooltip>
                   </q-btn>
                 </q-td>
               </q-tr>
             </template>
-            <template v-slot:pagination="scope">
-              <q-pagination
-                v-model="pagination.page"
-                active-color="primary"
-                color="dark"
-                :max="scope.pagesNumber"
-                :max-pages="5"
-                size="sm"
-                boundary-links
-                direction-links
-              ></q-pagination>
-            </template>
-          </q-table>
+          </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>
-  </div>
+  </q-dialog>
 </template>
-
-<script setup lang="ts">
-import { onMounted, reactive, ref, useAttrs, computed } from "vue";
-import type { QTableProps } from "quasar";
-import type { FormOrderPlacementMainData } from "@/modules/05_placement/interface/request/Main";
-import type { DataOption } from "@/modules/05_placement/interface/index/Main";
-import { useCounterMixin } from "@/stores/mixin";
-import { useOrderPlacementDataStore } from "@/modules/05_placement/store";
-import router from "@/router";
-import { useQuasar } from "quasar";
-
-const $q = useQuasar(); //ใช้ noti quasar
-const DataStore = useOrderPlacementDataStore();
-const pagination = ref({
-  sortBy: "desc",
-  descending: false,
-  page: 1,
-  rowsPerPage: 10,
-});
-
-const mixin = useCounterMixin();
-const { dateText } = mixin;
-
-// แปลงเวลา ค.ศ ให้เป็น พ.ศ
-const textDate = (value: Date) => {
-  return dateText(value);
-};
-
-const visibleColumns = ref<string[]>([
-  "Order",
-  "OrderType",
-  "OrderNum",
-  "OrderDate",
-  "OrderBy",
-  "Signer",
-  "OrderStatus",
-]); //ค้นหา คอลัมน์ คอลัมน์ที่แสดง
-
-// หัวตาราง
-const columns = ref<QTableProps["columns"]>([
-  {
-    name: "Order",
-    align: "left",
-    label: "คำสั่ง",
-    sortable: true,
-    field: "Order",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "OrderNum",
-    align: "left",
-    label: "เลขที่คำสั่ง",
-    sortable: true,
-    field: "OrderNum",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-  },
-  {
-    name: "OrderType",
-    align: "left",
-    label: "ประเภท",
-    sortable: false,
-    field: "OrderType",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "OrderDate",
-    align: "left",
-    label: "สั่ง ณ วันที่/วันที่คำสั่งมีผล",
-    sortable: true,
-    field: "OrderDate",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "OrderBy",
-    align: "left",
-    label: "คำสั่งโดย",
-    sortable: true,
-    field: "OrderBy",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "Signer",
-    align: "left",
-    label: "ผู้ลงนาม",
-    sortable: false,
-    field: "Signer",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "OrderStatus",
-    align: "center",
-    label: "สถานะคำสั่ง",
-    sortable: false,
-    field: "OrderStatus",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "fiscalYear",
-    align: "left",
-    label: "ปีงบประมาณ",
-    sortable: true,
-    field: "fiscalYear",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-  },
-]);
-
-// ข้อมูลตาราง (จำลอง)
-const rows = ref<FormOrderPlacementMainData[]>([
-  {
-    Order: "คำสั่งแต่งตั้งผู้สอบแข่งขันได้",
-    OrderNum: "1/2565",
-    fiscalYear: 2565,
-    OrderDate: "30 พ.ค. 2565",
-    OrderBy: "สำนักงาน กทม.",
-    Signer: "นาม สมคิด ยอดใจ ",
-    OrderStatus: "จัดทำร่างคำสั่ง",
-    OrderType: "คำสั่งย้าย",
-  },
-
-  {
-    Order: "คำสั่งแต่งตั้งผู้สอบแข่งขันได้",
-    OrderNum: "1/2565",
-    fiscalYear: 2565,
-    OrderDate: "30 พ.ค. 2565",
-    OrderBy: "สำนักงาน กทม.",
-    Signer: "นาม สมคิด ยอดใจ ",
-    OrderStatus: "จัดทำร่างคำสั่ง",
-    OrderType: "คำสั่งบรรจุและแต่งตั้ง",
-  },
-  {
-    Order: "คำสั่งแต่งตั้งผู้สอบแข่งขันได้",
-    OrderNum: "1/2564",
-    fiscalYear: 2564,
-    OrderDate: "30 พ.ค. 2564",
-    OrderBy: "สำนักงาน กทม.",
-    Signer: "นาม สมคิด ยอดใจ ",
-    OrderStatus: "บัญชีแนบท้าย",
-    OrderType: "คำสั่งบรรจุและแต่งตั้ง",
-  },
-  {
-    Order: "คำสั่งแต่งตั้งผู้สอบแข่งขันได้",
-    OrderNum: "1/2564",
-    fiscalYear: 2564,
-    OrderDate: "30 พ.ค. 2564",
-    OrderBy: "สำนักงาน กทม.",
-    Signer: "นาม สมคิด ยอดใจ ",
-    OrderStatus: "บัญชีแนบท้าย",
-    OrderType: "คำสั่งย้าย",
-  },
-  {
-    Order: "คำสั่งแต่งตั้งผู้สอบแข่งขันได้",
-    OrderNum: "1/2564",
-    fiscalYear: 2564,
-    OrderDate: "30 พ.ค. 2564",
-    OrderBy: "สำนักงาน กทม.",
-    Signer: "นาม สมคิด ยอดใจ ",
-    OrderStatus: "ส่งสำเนาคำสั่ง",
-    OrderType: "คำสั่งย้าย",
-  },
-  {
-    Order: "คำสั่งแต่งตั้งผู้สอบแข่งขันได้",
-    OrderNum: "1/2564",
-    fiscalYear: 2564,
-    OrderDate: "30 พ.ค. 2564",
-    OrderBy: "สำนักงาน กทม.",
-    Signer: "นาม สมคิด ยอดใจ ",
-    OrderStatus: "ส่งสำเนาคำสั่ง",
-    OrderType: "คำสั่งบรรจุและแต่งตั้ง",
-  },
-  {
-    Order: "คำสั่งแต่งตั้งผู้สอบแข่งขันได้",
-    OrderNum: "1/2566",
-    fiscalYear: 2566,
-    OrderDate: "30 พ.ค. 2566",
-    OrderBy: "สำนักงาน กทม.",
-    Signer: "นาม สมคิด ยอดใจ ",
-    OrderStatus: "รอลงนาม",
-    OrderType: "คำสั่งบรรจุและแต่งตั้ง",
-  },
-  {
-    Order: "คำสั่งแต่งตั้งผู้สอบแข่งขันได้",
-    OrderNum: "1/2566",
-    fiscalYear: 2566,
-    OrderDate: "30 พ.ค. 2566",
-    OrderBy: "สำนักงาน กทม.",
-    Signer: "นาม สมคิด ยอดใจ ",
-    OrderStatus: "ออกคำสั่งแล้ว",
-    OrderType: "คำสั่งแต่งตั้ง",
-  },
-  {
-    Order: "คำสั่งแต่งตั้งผู้สอบแข่งขันได้",
-    OrderNum: "1/2565",
-    fiscalYear: 2565,
-    OrderDate: "30 พ.ค. 2565",
-    OrderBy: "สำนักงาน กทม.",
-    Signer: "นาม สมคิด ยอดใจ ",
-    OrderStatus: "ออกคำสั่งแล้ว",
-    OrderType: "คำสั่งบรรจุและแต่งตั้ง",
-  },
-  {
-    Order: "คำสั่งแต่งตั้งผู้สอบแข่งขันได้",
-    OrderNum: "1/2566",
-    fiscalYear: 2566,
-    OrderDate: "30 พ.ค. 2566",
-    OrderBy: "สำนักงาน กทม.",
-    Signer: "นาม สมคิด ยอดใจ ",
-    OrderStatus: "ออกคำสั่งแล้ว",
-    OrderType: "คำสั่งแต่งตั้ง",
-  },
-  {
-    Order: "คำสั่งแต่งตั้งผู้สอบแข่งขันได้",
-    OrderNum: "1/2566",
-    fiscalYear: 2566,
-    OrderDate: "30 พ.ค. 2566",
-    OrderBy: "สำนักงาน กทม.",
-    Signer: "นาม สมคิด ยอดใจ ",
-    OrderStatus: "ออกคำสั่งแล้ว",
-    OrderType: "คำสั่งย้าย",
-  },
-
-  {
-    Order: "คำสั่งแต่งตั้งผู้สอบแข่งขันได้",
-    OrderNum: "1/2564",
-    fiscalYear: 2564,
-    OrderDate: "30 พ.ค. 2564",
-    OrderBy: "สำนักงาน กทม.",
-    Signer: "นาม สมคิด ยอดใจ ",
-    OrderStatus: "ออกคำสั่งแล้ว",
-    OrderType: "คำสั่งแต่งตั้ง",
-  },
-
-  {
-    Order: "คำสั่งแต่งตั้งผู้สอบแข่งขันได้",
-    OrderNum: "1/2566",
-    fiscalYear: 2566,
-    OrderDate: "30 พ.ค. 2566",
-    OrderBy: "สำนักงาน กทม.",
-    Signer: "นาม สมคิด ยอดใจ ",
-    OrderStatus: "ออกคำสั่งแล้ว",
-    OrderType: "คำสั่งแต่งตั้ง",
-  },
-]);
-// const OrderStatusOption = [
-//   "ทั้งหมด",
-//   "ยังไม่ได้บรรจุ",
-//   "บรรจุแล้ว",
-//   "ยังไม่ได้ออกคำสั่ง",
-// ];
-
-let OriginalData = ref<FormOrderPlacementMainData[]>([]);
-let UpdataData = ref<FormOrderPlacementMainData[]>([]);
-
-onMounted(async () => {
-  await OriginalDataFetch();
-  fiscalYearFilter();
-  searchFilterTable();
-  OrderStatusFilter();
-  OrderTypeFilter();
-});
-
-const OriginalDataFetch = async () => {
-  // API
-  // await http
-  //   .get(config.API.// ตัวอย่าง)
-  //   .then((res: any) => {
-  //   })
-  //   .catch((e: any) => {
-  //     messageError($q, e);
-  //   })
-  //   .finally(async () => {
-  //   });
-  await DataStore.DataMainOrder(rows.value);
-  OriginalData.value = await DataStore.DataMainOrigOrder;
-  UpdataData.value = OriginalData.value;
-};
-
-// ดูรายการหน้าต่อไป
-const redirectToPage = (id?: number) => {
-  router.push(`/dismiss-order/add`);
-};
-
-const clickDelete = (id: string) => {
-  $q.dialog({
-    title: "ยืนยันการลบข้อมูล",
-    message: "ต้องการลบข้อมูลนี้ใช่หรือไม่?",
-    cancel: {
-      flat: true,
-      color: "negative",
-    },
-    persistent: true,
-  })
-    .onOk(async () => {
-      //   await deleteData(id);
-    })
-    .onCancel(() => {})
-    .onDismiss(() => {});
-};
-
-// const deleteData = async (id: string) => {
-//   showLoader();
-//   await http
-//     .delete(config.API.orderReplace(id))
-//     .then((res) => {
-//       success($q, "ลบข้อมูลสำเร็จ");
-//     })
-//     .catch((e) => {
-//       messageError($q, e);
-//     })
-//     .finally(async () => {
-//       hideLoader();
-//       await fetchData();
-//     });
-// };
-
-const clickAdd = () => {
-  router.push({ name: "OrderplacementDetail" });
-};
-
-// const viewDetail = (id: string, status: string) => {
-//   if (status == "checkPayment") {
-//     router.push(`${route.fullPath}/payment/${id}`);
-//   } else {
-//     router.push(`${route.fullPath}/profile/${id}`);
-//   }
-// };
-
-// เลือกปีงบประมาณ
-const fiscalyear = ref<number | null>(0);
-const fiscalyearOP = reactive<DataOption[]>([{ id: 0, name: "ทั้งหมด" }]);
-const addedfiscalYearValues: number[] = [];
-const fiscalYearFilter = async () => {
-  // API
-  // await http
-  //   .get(config.API.// ตัวอย่าง)
-  //   .then((res: any) => {
-  //    DataStore.DataMainYearSet(rows.value);
-  //    fiscalyearOP.value = DataStore.DataMainYearGet;
-  //   })
-  //   .catch((e: any) => {
-  //     messageError($q, e);
-  //   })
-  //   .finally(async () => {
-  //   });
-  for (let data of OriginalData.value) {
-    const year = data.fiscalYear;
-    console.log(year);
-
-    if (fiscalyear.value === null || year > fiscalyear.value) {
-      fiscalyear.value = year;
-    }
-
-    if (!addedfiscalYearValues.includes(year)) {
-      fiscalyearOP.push({ id: year, name: year.toString() });
-      addedfiscalYearValues.push(year);
-    }
-  }
-};
-
-const OrderType = ref<string>("");
-const OrderTypeOption = reactive<DataOption[]>([{ id: 0, name: "ทั้งหมด" }]);
-const addedOrderTypeValues: string[] = [];
-const OrderTypeFilter = async () => {
-  // API
-  // await http
-  //   .get(config.API.// ตัวอย่าง)
-  //   .then((res: any) => {
-  //    DataStore.DataMainYearSet(rows.value);
-  //    fiscalyearOP.value = DataStore.DataMainYearGet;
-  //   })
-  //   .catch((e: any) => {
-  //     messageError($q, e);
-  //   })
-  //   .finally(async () => {
-  //   });
-  for (let data of OriginalData.value) {
-    const OrderTypeValue = data.OrderType;
-    console.log(OrderTypeValue);
-
-    // if (OrderTypeValue === null || OrderType > OrderTypeValue) {
-    //   OrderTypeValue = OrderType;
-    // }
-    if (!addedOrderTypeValues.includes(OrderTypeValue)) {
-      OrderTypeOption.push({
-        // id: OrderTypeValue ?? 0,
-        id: OrderTypeOption.length,
-        name: OrderTypeValue,
-      });
-      addedOrderTypeValues.push(OrderTypeValue);
-    }
-    // if (!addedOrderTypeValues.includes(OrderTypeValue)) {
-    //   OrderTypeOption.push({
-    //     id: OrderTypeValue,
-    //     name: OrderTypeValue.toString(),
-    //   });
-    //   addedOrderTypeValues.push(OrderTypeValue);
-    // }
-  }
-};
-const OrderStatus = ref<string>("");
-const OrderStatusText = ref<FormOrderPlacementMainData[]>(
-  DataStore.DataMainOrigOrder
-);
-const OrderStatusOption = reactive<DataOption[]>([{ id: 1, name: "ทั้งหมด" }]);
-const addedOrderStatusValues: string[] = [];
-const OrderStatusFilter = async () => {
-  // API
-  // await http
-  //   .get(config.API.// ตัวอย่าง)
-  //   .then((res: any) => {
-  //    DataStore.DataMainYearSet(rows.value);
-  //    fiscalyearOP.value = DataStore.DataMainYearGet;
-  //   })
-  //   .catch((e: any) => {
-  //     messageError($q, e);
-  //   })
-  //   .finally(async () => {
-  //   });
-  for (let data of OriginalData.value) {
-    const OrderStatusValue = data.OrderStatus;
-    console.log(OrderStatusValue);
-
-    if (
-      OrderStatusValue === null ||
-      parseInt(OrderStatusValue) > parseInt(OrderStatusValue)
-    ) {
-      OrderStatus.value = OrderStatusValue;
-    }
-
-    if (!addedOrderStatusValues.includes(OrderStatusValue)) {
-      OrderStatusOption.push({
-        // id: OrderStatusValue,
-        id: OrderStatusOption.length,
-        name: OrderStatusValue,
-      });
-      addedOrderStatusValues.push(OrderStatusValue);
-    }
-  }
-};
-
-// เลือกปีงบประมาณตาม API
-const searchfiscalyear = () => {
-  console.log("Input value changed:", fiscalyear.value);
-  // API
-  // await http
-  //   .get(config.API.// ตัวอย่าง)
-  //   .then((res: any) => {
-  //   })
-  //   .catch((e: any) => {
-  //     messageError($q, e);
-  //   })
-  //   .finally(async () => {
-  //   });
-};
-
-// ค้นหาในตาราง
-const filterKeyword = ref<string>("");
-const filterRef = ref<any>(null);
-const resetFilter = () => {
-  filterKeyword.value = "";
-  filterRef.value.focus();
-};
-
-const attrs = ref<any>(useAttrs());
-
-const searchFilterTable = async () => {
-  // console.log('Input value changed:', examTime.value, examType.value, expiredAccount.value);
-  await DataStore.DataUpdateOrder(
-    OrderType.value,
-    OrderStatus.value,
-    fiscalyear.value
-  );
-  UpdataData.value = DataStore.DataMainUpdateOrder;
-};
-//   UpdataData.value = DataStore.DataMainUpdate;
-// console.log("Input value changed:", OrderStatus.value, OrderType.value);
-
-const paging = ref<boolean>(true);
-const paginationLabel = (start: string, end: string, total: string) => {
-  if (paging.value == true) return " " + start + "-" + end + " ใน " + total;
-  else return start + "-" + end + " ใน " + total;
-};
-</script>
-
-<style lang="scss" scope>
-.filter-card {
-  background-color: #f1f1f1b0;
-}
-
-.toggle-expired-account {
-  font-size: 12px;
-  font-weight: 400;
-  font-size: 15px;
-  line-height: 150%;
-  color: #35373c;
-}
-
-.icon-color {
-  color: #4154b3;
-}
-
-.custom-header-table {
-  max-height: 64vh;
-
-  .q-table tr:nth-child(odd) td {
-    background: white;
-  }
-
-  .q-table tr:nth-child(even) td {
-    background: #f8f8f8;
-  }
-
-  .q-table thead tr {
-    background: #ecebeb;
-  }
-
-  .q-table thead tr th {
-    position: sticky;
-    z-index: 1;
-  }
-
-  /* this will be the loading indicator */
-  .q-table thead tr:last-child th {
-    /* height of all previous header rows */
-    top: 48px;
-  }
-
-  .q-table thead tr:first-child th {
-    top: 0;
-  }
-}
-</style>
+<style scoped lang="scss"></style>
diff --git a/src/modules/06_retirement/components/DismissOrder/outRegistry.vue b/src/modules/06_retirement/components/DismissOrder/outRegistry.vue
new file mode 100644
index 000000000..42287dfb1
--- /dev/null
+++ b/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>
diff --git a/src/modules/06_retirement/components/DismissOrder/step01.vue b/src/modules/06_retirement/components/DismissOrder/step01.vue
deleted file mode 100644
index 92ce9bc7d..000000000
--- a/src/modules/06_retirement/components/DismissOrder/step01.vue
+++ /dev/null
@@ -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>
diff --git a/src/modules/06_retirement/components/DismissOrder/step02.vue b/src/modules/06_retirement/components/DismissOrder/step02.vue
deleted file mode 100644
index 8d58d929e..000000000
--- a/src/modules/06_retirement/components/DismissOrder/step02.vue
+++ /dev/null
@@ -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>
diff --git a/src/modules/06_retirement/components/DismissOrder/step03.vue b/src/modules/06_retirement/components/DismissOrder/step03.vue
deleted file mode 100644
index d7521a80d..000000000
--- a/src/modules/06_retirement/components/DismissOrder/step03.vue
+++ /dev/null
@@ -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>
diff --git a/src/modules/06_retirement/components/Expulsion/expulsionMain.vue b/src/modules/06_retirement/components/Expulsion/expulsionMain.vue
new file mode 100644
index 000000000..1e5895491
--- /dev/null
+++ b/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>
diff --git a/src/modules/06_retirement/components/Expulsion/expulsionRegistry.vue b/src/modules/06_retirement/components/Expulsion/expulsionRegistry.vue
new file mode 100644
index 000000000..11a0c84ce
--- /dev/null
+++ b/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>
diff --git a/src/modules/06_retirement/interface/response/discharged.ts b/src/modules/06_retirement/interface/response/discharged.ts
new file mode 100644
index 000000000..8a575f438
--- /dev/null
+++ b/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 };
diff --git a/src/modules/06_retirement/interface/response/expulsion.ts b/src/modules/06_retirement/interface/response/expulsion.ts
new file mode 100644
index 000000000..8a575f438
--- /dev/null
+++ b/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 };
diff --git a/src/modules/06_retirement/interface/response/out.ts b/src/modules/06_retirement/interface/response/out.ts
new file mode 100644
index 000000000..8a575f438
--- /dev/null
+++ b/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 };
diff --git a/src/modules/06_retirement/router.ts b/src/modules/06_retirement/router.ts
index af06080ef..2a70e733f 100644
--- a/src/modules/06_retirement/router.ts
+++ b/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 resignOrder = () => import("@/modules/06_retirement/components/resign/ResignOrder.vue");
-const resign = () => import("@/modules/06_retirement/components/resign/Resign.vue");
-const resignByid = () => 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 addOrder = () => import("@/modules/06_retirement/components/DismissOrder/AddOrder.vue");
+const Listretirement = () =>
+  import("@/modules/06_retirement/components/ListRetirement/TableList.vue");
+const resignOrder = () =>
+  import("@/modules/06_retirement/components/resign/ResignOrder.vue");
+const resign = () =>
+  import("@/modules/06_retirement/components/resign/Resign.vue");
+const resignByid = () =>
+  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",
-    name: "dismiss-order-add",
-    component: addOrder,
+    path: "/retirement/discharged/:id",
+    name: "dischargedDetails",
+    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",
     },
   },
-
 ];
diff --git a/src/modules/07_insignia/components/1_Proposals/listProposals.vue b/src/modules/07_insignia/components/1_Proposals/listProposals.vue
index 7ea3a1235..8702e4e49 100644
--- a/src/modules/07_insignia/components/1_Proposals/listProposals.vue
+++ b/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) => {

From f7e686fbec58a3e201c05186e649ef7ce8878887 Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Tue, 15 Aug 2023 17:58:41 +0700
Subject: [PATCH 104/113] =?UTF-8?q?api=20=E0=B9=81=E0=B8=95=E0=B9=88?=
 =?UTF-8?q?=E0=B8=87=E0=B8=95=E0=B8=B1=E0=B9=89=E0=B8=87=20-=20=E0=B9=80?=
 =?UTF-8?q?=E0=B8=A5=E0=B8=B7=E0=B9=88=E0=B8=AD=E0=B8=99=20,=E0=B8=AD?=
 =?UTF-8?q?=E0=B8=B7=E0=B9=88=E0=B8=99?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/05_placement/api.placement.ts         |  18 +-
 .../AppointMent/AppointmentModal.vue          | 803 ++++++++++++++++++
 .../components/AppointMent/Detail.vue         | 446 ++++++++++
 .../components/AppointMent/DialogHeader.vue   |  29 +
 .../components/AppointMent/Main.vue           | 734 ++++++++++++++++
 .../05_placement/components/Other/Detail.vue  | 135 +++
 .../components/Other/DialogHeader.vue         |  29 +
 .../05_placement/components/Other/Main.vue    | 735 ++++++++++++++++
 .../components/Other/OtherModal.vue           | 799 +++++++++++++++++
 src/modules/05_placement/router.ts            |  46 +
 10 files changed, 3770 insertions(+), 4 deletions(-)
 create mode 100644 src/modules/05_placement/components/AppointMent/AppointmentModal.vue
 create mode 100644 src/modules/05_placement/components/AppointMent/Detail.vue
 create mode 100644 src/modules/05_placement/components/AppointMent/DialogHeader.vue
 create mode 100644 src/modules/05_placement/components/AppointMent/Main.vue
 create mode 100644 src/modules/05_placement/components/Other/Detail.vue
 create mode 100644 src/modules/05_placement/components/Other/DialogHeader.vue
 create mode 100644 src/modules/05_placement/components/Other/Main.vue
 create mode 100644 src/modules/05_placement/components/Other/OtherModal.vue

diff --git a/src/api/05_placement/api.placement.ts b/src/api/05_placement/api.placement.ts
index 655b9b247..36877c240 100644
--- a/src/api/05_placement/api.placement.ts
+++ b/src/api/05_placement/api.placement.ts
@@ -108,23 +108,33 @@ 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}`,
-  officerMainDelete: (id:string) => `${placement}/officer/${id}`,
+  officerDetail: (id: string) => `${placement}/officer/${id}`,
+  officerMainDelete: (id: string) => `${placement}/officer/${id}`,
   officerMainReport: () => `${placement}/officer/report`,
 
   // ส่งตัวกลับ
   placemenRepatriation,
   repatriationMain: () => `${placement}/repatriation`,
-  repatriationDetail: (id:string) => `${placement}/repatriation/${id}`,
-  repatriationMainDelete: (id:string) => `${placement}/repatriation/${id}`,
+  repatriationDetail: (id: string) => `${placement}/repatriation/${id}`,
+  repatriationMainDelete: (id: string) => `${placement}/repatriation/${id}`,
   repatriationMainReport: () => `${placement}/repatriation/report`,
   // ขอย้าย
   placemenRelocation,
 
   // อื่นๆ
   placemenOther,
+  otherMain: () => `${placemenOther}`,
+  otherPosition: (id: string) => `${placemenOther}/position/${id}`,
+  otherReport: (id: string) => `${placemenOther}/report/${id}`,
+  otherByid: (id: string) => `${placemenOther}/${id}`,
+
 };
diff --git a/src/modules/05_placement/components/AppointMent/AppointmentModal.vue b/src/modules/05_placement/components/AppointMent/AppointmentModal.vue
new file mode 100644
index 000000000..8625c2b2a
--- /dev/null
+++ b/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>
diff --git a/src/modules/05_placement/components/AppointMent/Detail.vue b/src/modules/05_placement/components/AppointMent/Detail.vue
new file mode 100644
index 000000000..c06310ff1
--- /dev/null
+++ b/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>
diff --git a/src/modules/05_placement/components/AppointMent/DialogHeader.vue b/src/modules/05_placement/components/AppointMent/DialogHeader.vue
new file mode 100644
index 000000000..a20e917b0
--- /dev/null
+++ b/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>
diff --git a/src/modules/05_placement/components/AppointMent/Main.vue b/src/modules/05_placement/components/AppointMent/Main.vue
new file mode 100644
index 000000000..2aa65f1e8
--- /dev/null
+++ b/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>
diff --git a/src/modules/05_placement/components/Other/Detail.vue b/src/modules/05_placement/components/Other/Detail.vue
new file mode 100644
index 000000000..a03165d3c
--- /dev/null
+++ b/src/modules/05_placement/components/Other/Detail.vue
@@ -0,0 +1,135 @@
+<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 { messageError, showLoader, hideLoader } = mixin;
+
+const title = ref<ResponseTitle>({
+  fullname: "",
+  organizationPositionOld: "",
+  positionLevelOld: "",
+  positionTypeOld: "",
+});
+
+onMounted(async () => {
+  await fecthOther();
+});
+
+const fecthOther = async () => {
+  showLoader();
+  await http
+    .get(config.API.otherByid(paramsId.toString()))
+    .then((res: any) => {
+      const data = 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 ?? "-";
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+};
+</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>
+</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>
diff --git a/src/modules/05_placement/components/Other/DialogHeader.vue b/src/modules/05_placement/components/Other/DialogHeader.vue
new file mode 100644
index 000000000..a20e917b0
--- /dev/null
+++ b/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>
diff --git a/src/modules/05_placement/components/Other/Main.vue b/src/modules/05_placement/components/Other/Main.vue
new file mode 100644
index 000000000..2e7b50c3c
--- /dev/null
+++ b/src/modules/05_placement/components/Other/Main.vue
@@ -0,0 +1,735 @@
+<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",
+  "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(() => {
+  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((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.positionNumberOld,
+        positionPath: e.positionPath,
+        birthday: date2Thai(e.dateOfBirth),
+        status: status(e.status),
+      }));
+      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 () => {
+  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: "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, () => 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">
+                <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"
+          :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>
diff --git a/src/modules/05_placement/components/Other/OtherModal.vue b/src/modules/05_placement/components/Other/OtherModal.vue
new file mode 100644
index 000000000..b39a8d1a8
--- /dev/null
+++ b/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>
diff --git a/src/modules/05_placement/router.ts b/src/modules/05_placement/router.ts
index 639e5a7b7..662b19093 100644
--- a/src/modules/05_placement/router.ts
+++ b/src/modules/05_placement/router.ts
@@ -57,6 +57,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 +275,44 @@ 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: "other/detail/:id",
+    name: "other-detail",
+    component: OthertDetail,
+    meta: {
+      Auth: true,
+      Key: [6.9],
+      Role: "placement",
+    },
+  },
 ];

From 0decf3206e447503b65be40bf2eeb76264e75f45 Mon Sep 17 00:00:00 2001
From: waruneeta <warunee.auy@gmail.com>
Date: Tue, 15 Aug 2023 18:12:52 +0700
Subject: [PATCH 105/113] fix bug url api appointment

---
 src/api/05_placement/api.placement.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/api/05_placement/api.placement.ts b/src/api/05_placement/api.placement.ts
index 5e3012bdd..cb1e3ff68 100644
--- a/src/api/05_placement/api.placement.ts
+++ b/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}`,

From f9f2b6dcbdf90b3e37ae4e686904e06bcaa6ceed Mon Sep 17 00:00:00 2001
From: AnandaTon <125332905+anandaAiemvong@users.noreply.github.com>
Date: Tue, 15 Aug 2023 20:51:07 +0700
Subject: [PATCH 106/113] Update api.retirement.ts

---
 src/api/06_retirement/api.retirement.ts | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/src/api/06_retirement/api.retirement.ts b/src/api/06_retirement/api.retirement.ts
index 3b0993b5b..24aea972b 100644
--- a/src/api/06_retirement/api.retirement.ts
+++ b/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`,
 };

From 0b7fe157a6bcadefd859771c52b77f40b9ccab1c Mon Sep 17 00:00:00 2001
From: AnandaTon <125332905+anandaAiemvong@users.noreply.github.com>
Date: Tue, 15 Aug 2023 20:53:32 +0700
Subject: [PATCH 107/113] Update api.retirement.ts

---
 src/api/06_retirement/api.retirement.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/api/06_retirement/api.retirement.ts b/src/api/06_retirement/api.retirement.ts
index cfa582ad8..24aea972b 100644
--- a/src/api/06_retirement/api.retirement.ts
+++ b/src/api/06_retirement/api.retirement.ts
@@ -22,10 +22,10 @@ export default {
 
   // RetirementResign ระบบลาออก
   listResign: () => `${retirement}/resign`,
+  resignReport: `${retirement}/resign/report`,
   resingByid: (id: string) => `${retirement}/resign/${id}`,
   resignConfirm: (id: string) => `${retirement}/resign/confirm/${id}`,
   resignReject: (id: string) => `${retirement}/resign/reject/${id}`,
-
   // ปลดออก
   retirementDischarge,
   listDischared: () => `${retirement}/dischared`,

From 928c487126ce6476f3906ba9db0067dd46608a8f Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Wed, 16 Aug 2023 11:18:04 +0700
Subject: [PATCH 108/113] =?UTF-8?q?API=20=E0=B8=A3=E0=B8=B2=E0=B8=A2?=
 =?UTF-8?q?=E0=B8=81=E0=B8=B2=E0=B8=A3=E0=B8=AD=E0=B8=B7=E0=B9=88=E0=B8=99?=
 =?UTF-8?q?=E0=B9=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../05_placement/components/Other/Detail.vue  | 327 +++++++++++++-
 .../05_placement/components/Other/Main.vue    | 411 +++++++-----------
 2 files changed, 494 insertions(+), 244 deletions(-)

diff --git a/src/modules/05_placement/components/Other/Detail.vue b/src/modules/05_placement/components/Other/Detail.vue
index a03165d3c..d8f09f9b1 100644
--- a/src/modules/05_placement/components/Other/Detail.vue
+++ b/src/modules/05_placement/components/Other/Detail.vue
@@ -5,17 +5,30 @@ 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 } = mixin;
+const {
+  messageError,
+  showLoader,
+  hideLoader,
+  date2Thai,
+  dialogConfirm,
+  success,
+} = mixin;
+const roleAdmin = ref<boolean>(false);
 
 const title = ref<ResponseTitle>({
   fullname: "",
@@ -23,8 +36,37 @@ const title = ref<ResponseTitle>({
   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();
 });
 
@@ -32,22 +74,92 @@ 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>
@@ -117,6 +229,217 @@ const fecthOther = async () => {
       </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>
diff --git a/src/modules/05_placement/components/Other/Main.vue b/src/modules/05_placement/components/Other/Main.vue
index 2e7b50c3c..12aa27631 100644
--- a/src/modules/05_placement/components/Other/Main.vue
+++ b/src/modules/05_placement/components/Other/Main.vue
@@ -50,19 +50,22 @@ const personal = ref<any[]>([]);
 const personalId = ref<string>("");
 const visibleColumns = ref<string[]>([
   "no",
-  "citizenId",
   "fullname",
-  "organizationName",
-  "birthday",
-  "status",
+  "position",
+  "positionLevel",
+  "organizationPositionOld",
+  "organization",
+  "statustext",
 ]);
 
 const visibleColumns2 = ref<string[]>([
   "no",
-  "citizenId",
   "fullname",
-  "organizationName",
-  "birthday",
+  "position",
+  "positionLevel",
+  "organizationPositionOld",
+  "organization",
+  "statustext",
 ]); //ค้นหา คอลัมน์ คอลัมน์ที่แสดง
 const filterKeyword = ref<string>("");
 const filterKeyword2 = ref<string>("");
@@ -78,7 +81,7 @@ const type = ref<string>("");
 onMounted(() => {
   fecthlistOthet();
 });
-const listRecevice = ref<any>([]);
+// const listRecevice = ref<any>([]);
 const fecthlistOthet = async () => {
   showLoader();
   await http
@@ -86,32 +89,36 @@ const fecthlistOthet = async () => {
     .then((res) => {
       console.log(res);
       let response = res.data.result;
-      listRecevice.value = response;
+      // 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.positionNumberOld,
-        positionPath: e.positionPath,
-        birthday: date2Thai(e.dateOfBirth),
-        status: status(e.status),
+      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) => {
-      console.log(typeof e);
+      messageError($q);
+      console.log(e);
     })
     .finally(() => {
       hideLoader();
@@ -149,17 +156,17 @@ const rows = ref<any>([
   // },
 ]);
 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")),
-  },
+  // {
+  //   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"]>([
   {
@@ -171,15 +178,6 @@ const columns = ref<QTableProps["columns"]>([
     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",
@@ -190,31 +188,47 @@ const columns = ref<QTableProps["columns"]>([
     style: "font-size: 14px",
   },
   {
-    name: "organizationName",
+    name: "position",
     align: "left",
-    label: "หน่วยงานที่รับโอน",
+    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",
+    field: "position",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
   {
-    name: "status",
+    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: "status",
+    field: "statustext",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
@@ -229,15 +243,6 @@ const columns2 = ref<QTableProps["columns"]>([
     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",
@@ -248,34 +253,59 @@ const columns2 = ref<QTableProps["columns"]>([
     style: "font-size: 14px",
   },
   {
-    name: "organizationName",
+    name: "position",
     align: "left",
-    label: "หน่วยงานที่รับโอน",
+    label: "ตำแหน่งในสายงาน",
     sortable: true,
-    field: "organizationName",
+    field: "position",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
   {
-    name: "birthday",
+    name: "positionLevel",
     align: "left",
-    label: "วัน/เดือน/ปี เกิด",
+    label: "ระดับ",
     sortable: true,
-    field: "birthday",
+    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);
+// const openModalTree = (id: string) => {
+//   personalId.value = id;
+//   console.log(personalId.value);
 
-  personal.value = listRecevice.value.filter((e: any) => e.id === id);
-  modalTree.value = true;
-};
+//   personal.value = listRecevice.value.filter((e: any) => e.id === id);
+//   modalTree.value = true;
+// };
 
 const clickDelete = (id: string) => {
   dialogRemove($q, () => deleteOther(id));
@@ -427,128 +457,52 @@ const status = (val: string) => {
               </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)">
+              <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="citizenId"
-                  :props="props"
-                  @click="nextPage(props.row)"
-                >
-                  {{ props.row.citizenId }}
-                </q-td>
-                <q-td
-                  key="fullname"
-                  :props="props"
-                  @click="nextPage(props.row)"
-                >
+                <q-td key="fullname" :props="props">
                   {{ 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>
+                <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="birthday"
-                  :props="props"
-                  @click="nextPage(props.row)"
-                >
-                  {{ props.row.birthday }}
+                <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="status" :props="props" @click="nextPage(props.row)">
-                  {{ props.row.status }}
+                <q-td key="statustext" :props="props">
+                  {{ props.row.statustext }}
                 </q-td>
-                <q-td auto-width>
+                <q-td key="statustext" :props="props">
                   <q-btn
-                    icon="mdi-dots-vertical"
-                    size="12px"
-                    color="grey-7"
                     flat
                     round
+                    class="text-red-14"
+                    icon="mdi-delete"
                     dense
+                    @click.stop="clickDelete(props.row.personalId)"
+                    ><q-tooltip>ลบข้อมูล</q-tooltip></q-btn
                   >
-                    <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>
@@ -659,54 +613,27 @@ const status = (val: string) => {
               <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)">
+              <q-td key="fullname" :props="props">
                 {{ 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>
+              <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="birthday" :props="props" @click="nextPage(props.row)">
-                {{ props.row.birthday }}
+              <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>
@@ -724,12 +651,12 @@ const status = (val: string) => {
     </q-card>
   </q-dialog>
 
-  <DialogOrgTree
+  <!-- <DialogOrgTree
     v-model:modal="modalTree"
     :close="closeModalTree"
     :personal="personal"
     :personalId="personalId"
-  />
+  /> -->
   <!-- :personalId="personalId" -->
 </template>
 <style scoped lang="scss"></style>

From 1a7b4bf41808945f429524cd85a274734cfa25c5 Mon Sep 17 00:00:00 2001
From: Thanit Konmek <thanit@frappet.com>
Date: Wed, 16 Aug 2023 12:55:07 +0700
Subject: [PATCH 109/113] =?UTF-8?q?=E0=B8=A3=E0=B8=B2=E0=B8=A2=E0=B8=A5?=
 =?UTF-8?q?=E0=B8=B0=E0=B9=80=E0=B8=AD=E0=B8=B5=E0=B8=A2=E0=B8=94=E0=B8=A3?=
 =?UTF-8?q?=E0=B8=B1=E0=B8=9A=E0=B9=82=E0=B8=AD=E0=B8=99?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/00_dashboard/api.message.ts           |  11 +
 src/api/index.ts                              |  14 +-
 src/app.config.ts                             |   6 +
 src/interface/request/main/main.ts            |   6 +-
 src/interface/response/dashboard/dashboard.ts |  27 +
 .../components/Receive/receiveDetail2.vue     | 881 +++++++++++++++++-
 .../components/Receive/receiveMain.vue        | 267 +++---
 .../components/Transfer/transferRegistry.vue  |   2 +-
 .../interface/response/Receive.ts             |  53 +-
 src/views/Dashboard.vue                       | 102 +-
 src/views/MainLayout.vue                      |  56 +-
 11 files changed, 1283 insertions(+), 142 deletions(-)
 create mode 100644 src/api/00_dashboard/api.message.ts
 create mode 100644 src/interface/response/dashboard/dashboard.ts

diff --git a/src/api/00_dashboard/api.message.ts b/src/api/00_dashboard/api.message.ts
new file mode 100644
index 000000000..85e0c7b86
--- /dev/null
+++ b/src/api/00_dashboard/api.message.ts
@@ -0,0 +1,11 @@
+/**
+ * API Structure + Org Chart
+ */
+import env from "../index";
+
+const message = `${env.API_DASHBOARD_URI}/message`;
+
+export default {
+  msgNotificate: `${message}/my-notifications`,
+  msgInbox: `${message}/my-inboxes`,
+};
diff --git a/src/api/index.ts b/src/api/index.ts
index 51f162272..be3edd2bf 100644
--- a/src/api/index.ts
+++ b/src/api/index.ts
@@ -28,6 +28,7 @@ const config = ref<any>({
     API_RETIREMENT_URI: "https://bma-ehr.frappet.synology.me/api/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",
   },
   test: {
     API_URI: "http://localhost:5010/api/v1",
@@ -72,7 +73,13 @@ const API_RETIREMENT_URI = ref<string>(
   config.value[env.value].API_RETIREMENT_URI
 );
 const API_URI_ORG_TREE = ref<string>(config.value[env.value].API_URI_ORG_TREE);
-const API_PROBATION_URI = ref<string>(config.value[env.value].API_PROBATION_URI);
+const API_PROBATION_URI = ref<string>(
+  config.value[env.value].API_PROBATION_URI
+);
+
+const API_DASHBOARD_URI = ref<string>(
+  config.value[env.value].API_DASHBOARD_URI
+);
 
 export default {
   env: env.value,
@@ -86,6 +93,7 @@ export default {
   API_PLACEMENT_URI: API_PLACEMENT_URI.value,
   API_URI_ORG_TREE: API_URI_ORG_TREE.value,
   MEET_URI: MEET_URI.value,
-  API_RETIREMENT_URI:API_RETIREMENT_URI.value,
-  API_PROBATION_URI: API_PROBATION_URI.value
+  API_RETIREMENT_URI: API_RETIREMENT_URI.value,
+  API_PROBATION_URI: API_PROBATION_URI.value,
+  API_DASHBOARD_URI: API_DASHBOARD_URI.value,
 };
diff --git a/src/app.config.ts b/src/app.config.ts
index ef0aa5f39..b8bb88983 100644
--- a/src/app.config.ts
+++ b/src/app.config.ts
@@ -37,6 +37,9 @@ import retirement from "./api/06_retirement/api.retirement";
 /** API ระบบงานเครื่องราชอิสริยาภรณ์ List */
 import insignia from "./api/07_insignia/api.insignia";
 
+/** API dashboard  */
+import message from "./api/00_dashboard/api.message";
+
 // environment variables
 export const compettitivePanel = import.meta.env.VITE_COMPETITIVE_EXAM_PANEL;
 export const qualifyDisableExamPanel = import.meta.env
@@ -74,6 +77,9 @@ const API = {
   ...probation,
   ...retirement,
   ...insignia,
+
+  //dashboard
+  ...message,
 };
 
 export default {
diff --git a/src/interface/request/main/main.ts b/src/interface/request/main/main.ts
index ad8f16e68..ff5bc5dfe 100644
--- a/src/interface/request/main/main.ts
+++ b/src/interface/request/main/main.ts
@@ -28,10 +28,10 @@ interface menuType {
 }
 
 interface notiType {
-  id: number;
+  id: string;
   sender: string;
   body: string;
-  timereceive: string;
+  timereceive: Date;
 }
 
 interface optionType {
@@ -257,7 +257,7 @@ const menuList = readonly<any[]>([
         role: "placement",
       },
       {
-        key: 6.10,
+        key: 6.1,
         label: "รายการอื่นๆ" /* */,
         path: "other",
         role: "placement",
diff --git a/src/interface/response/dashboard/dashboard.ts b/src/interface/response/dashboard/dashboard.ts
new file mode 100644
index 000000000..e6320ecfa
--- /dev/null
+++ b/src/interface/response/dashboard/dashboard.ts
@@ -0,0 +1,27 @@
+interface ResponseInbox {
+  body: string;
+  createdAt: Date;
+  createdFullName: string;
+  createdUserId: string;
+  id: string;
+  isOpen: boolean;
+  lastUpdateFullName: string;
+  lastUpdateUserId: string;
+  lastUpdatedAt: Date;
+  openDate: Date | null;
+  payload: string;
+  receiveDate: Date;
+  receiverUserId: string;
+  subject: string;
+}
+
+interface DataInbox {
+  no: string;
+  sender: string;
+  subject: string;
+  timereceive: Date;
+  body: string;
+  ratingModel: number;
+}
+
+export type { ResponseInbox, DataInbox };
diff --git a/src/modules/05_placement/components/Receive/receiveDetail2.vue b/src/modules/05_placement/components/Receive/receiveDetail2.vue
index 77c473d6d..258159c26 100644
--- a/src/modules/05_placement/components/Receive/receiveDetail2.vue
+++ b/src/modules/05_placement/components/Receive/receiveDetail2.vue
@@ -65,14 +65,525 @@
       </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="cancel"
+        />
+      </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">
+          <div class="col-xs-12 row items-center q-col-gutter-md">
+            <div class="col-xs-12">
+              <div class="text-weight-bold text-grey">ข้อมูลส่วนตัว</div>
+            </div>
+            <div class="col-xs-6 col-sm-3 col-md-3">
+              <q-input
+                :class="getClass(edit)"
+                hide-bottom-space
+                :outlined="edit"
+                v-model="informaData.cardid"
+                dense
+                @update:model-value="changeCardID"
+                lazy-rules
+                :rules="[
+              (val:string) => !!val || `${'กรุณากรอก เลขบัตรประจำตัวประชาชน'}`,
+              (val:string) =>
+                val.length >= 13 ||
+                `${'กรุณากรอกเลขบัตรประจำตัวประชาชนให้ครบ'}`,
+            ]"
+                :readonly="!edit"
+                :borderless="!edit"
+                label="เลขบัตรประจำตัวประชาชน"
+                maxlength="13"
+                mask="#############"
+              />
+              <!-- :rules="[(val:any) =>val.length != 13 ||`${'กรุณากรอกเลขบัตรประจำตัวประชาชนให้ครบ'}`,]" -->
+            </div>
+            <div class="col-xs-6 col-sm-3 col-md-3">
+              <selector
+                :hide-dropdown-icon="!edit"
+                hide-bottom-space
+                :class="getClass(edit)"
+                :readonly="!edit"
+                :borderless="!edit"
+                :rules="[(val:string) => !!val || `${'กรุณาเลือก คำนำหน้าชื่อ'}`]"
+                :outlined="edit"
+                dense
+                lazy-rules
+                v-model="informaData.prefixId"
+                emit-value
+                map-options
+                option-label="name"
+                :options="Ops.prefixOps"
+                option-value="id"
+                :label="`${'คำนำหน้าชื่อ'}`"
+                use-input
+                input-debounce="0"
+                @filter="(inputValue:any,
+                        doneFn:Function) => filterSelector(inputValue, doneFn,'prefixOps'
+                        ) "
+              />
+            </div>
+
+            <div class="col-xs-6 col-sm-3 col-md-3">
+              <q-input
+                :class="getClass(edit)"
+                hide-bottom-space
+                :outlined="edit"
+                dense
+                lazy-rules
+                :readonly="!edit"
+                :borderless="!edit"
+                v-model="informaData.firstname"
+                :rules="[(val:string) => !!val || `${'กรุณากรอก ชื่อ'}`]"
+                :label="`${'ชื่อ'}`"
+              />
+            </div>
+            <div class="col-xs-6 col-sm-3 col-md-3">
+              <q-input
+                :class="getClass(edit)"
+                hide-bottom-space
+                :outlined="edit"
+                dense
+                lazy-rules
+                :readonly="!edit"
+                :borderless="!edit"
+                v-model="informaData.lastname"
+                :rules="[(val:string) => !!val || `${'กรุณากรอก นามสกุล'}`]"
+                :label="`${'นามสกุล'}`"
+              />
+            </div>
+            <div class="col-xs-6 col-sm-2 col-md-2">
+              <datepicker
+                v-model="informaData.birthDate"
+                :locale="'th'"
+                autoApply
+                :enableTimePicker="false"
+                week-start="0"
+                :max-date="new Date()"
+                :disabled="!edit"
+                @update:model-value="handleDate"
+              >
+                <template #year="{ year }">
+                  {{ year + 543 }}
+                </template>
+                <template #year-overlay-value="{ value }">
+                  {{ parseInt(value + 543) }}
+                </template>
+                <template #trigger>
+                  <q-input
+                    :class="getClass(edit)"
+                    hide-bottom-space
+                    :outlined="edit"
+                    dense
+                    lazy-rules
+                    :readonly="!edit"
+                    :borderless="!edit"
+                    :model-value="
+                      informaData.birthDate == null
+                        ? null
+                        : date2Thai(informaData.birthDate)
+                    "
+                    :rules="[(val:string) => !!val || `${'กรุณาเลือก วัน/เดือน/ปี เกิด'}`]"
+                    :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 class="col-xs-6 col-sm-2 col-md-2">
+              <q-input
+                :class="getClass(false)"
+                hide-bottom-space
+                dense
+                lazy-rules
+                readonly
+                borderless
+                :style="!edit ? '' : 'padding:0 12px;'"
+                :model-value="informaData.age"
+                :label="`${'อายุ'}`"
+              />
+            </div>
+            <div class="col-xs-6 col-sm-2 col-md-2">
+              <selector
+                :hide-dropdown-icon="!edit"
+                hide-bottom-space
+                :class="getClass(edit)"
+                :readonly="!edit"
+                :borderless="!edit"
+                :outlined="edit"
+                dense
+                lazy-rules
+                v-model="informaData.genderId"
+                emit-value
+                map-options
+                option-label="name"
+                :options="Ops.genderOps"
+                option-value="id"
+                :label="`${'เพศ'}`"
+                use-input
+                input-debounce="0"
+                :rules="[(val:string) => !!val || `${'กรุณาเลือก เพศ'}`]"
+                @filter="(inputValue:any,
+                        doneFn:Function) => filterSelector(inputValue, doneFn,'genderOps'
+                        ) "
+              />
+            </div>
+            <div class="col-xs-6 col-sm-2 col-md-2">
+              <selector
+                :hide-dropdown-icon="!edit"
+                hide-bottom-space
+                :class="getClass(edit)"
+                :readonly="!edit"
+                :borderless="!edit"
+                :outlined="edit"
+                dense
+                lazy-rules
+                v-model="informaData.statusId"
+                emit-value
+                map-options
+                option-label="name"
+                :options="Ops.statusOps"
+                option-value="id"
+                :label="`${'สถานภาพ'}`"
+                use-input
+                input-debounce="0"
+                :rules="[(val:string) => !!val || `${'กรุณาเลือก สถานภาพ'}`]"
+                @filter="(inputValue:any,
+                        doneFn:Function) => filterSelector(inputValue, doneFn,'statusOps'
+                        ) "
+              />
+            </div>
+            <div class="col-xs-6 col-sm-2 col-md-2">
+              <q-input
+                :class="getClass(edit)"
+                hide-bottom-space
+                :outlined="edit"
+                dense
+                lazy-rules
+                :readonly="!edit"
+                :borderless="!edit"
+                v-model="informaData.nationality"
+                :label="`${'สัญชาติ'}`"
+                :rules="[(val:string) => !!val || `${'กรุณากรอก สัญชาติ'}`]"
+              />
+            </div>
+            <div class="col-xs-6 col-sm-2 col-md-2">
+              <q-input
+                :class="getClass(edit)"
+                hide-bottom-space
+                :outlined="edit"
+                dense
+                lazy-rules
+                :readonly="!edit"
+                :borderless="!edit"
+                v-model="informaData.ethnicity"
+                :label="`${'เชื้อชาติ'}`"
+                :rules="[(val:string) => !!val || `${'กรุณากรอก เชื้อชาติ'}`]"
+              />
+            </div>
+            <div class="col-xs-6 col-sm-2 col-md-2">
+              <selector
+                :hide-dropdown-icon="!edit"
+                hide-bottom-space
+                :class="getClass(edit)"
+                :readonly="!edit"
+                :borderless="!edit"
+                :outlined="edit"
+                dense
+                lazy-rules
+                v-model="informaData.religionId"
+                emit-value
+                map-options
+                option-label="name"
+                :options="Ops.religionOps"
+                option-value="id"
+                :label="`${'ศาสนา'}`"
+                use-input
+                input-debounce="0"
+                :rules="[(val:string) => !!val || `${'กรุณาเลือก ศาสนา'}`]"
+                @filter="(inputValue:any,
+                        doneFn:Function) => filterSelector(inputValue, doneFn,'religionOps'
+                        ) "
+              />
+            </div>
+            <div class="col-xs-6 col-sm-2 col-md-2">
+              <selector
+                :hide-dropdown-icon="!edit"
+                hide-bottom-space
+                :class="getClass(edit)"
+                :readonly="!edit"
+                :borderless="!edit"
+                :outlined="edit"
+                dense
+                lazy-rules
+                v-model="informaData.bloodId"
+                emit-value
+                map-options
+                option-label="name"
+                :options="Ops.bloodOps"
+                option-value="id"
+                :label="`${'หมู่เลือด'}`"
+                use-input
+                input-debounce="0"
+                :rules="[(val:string) => !!val || `${'กรุณาเลือก หมู่เลือด'}`]"
+                @filter="(inputValue:any,
+                        doneFn:Function) => filterSelector(inputValue, doneFn,'bloodOps'
+                        ) "
+                clearable
+              />
+            </div>
+            <div class="col-xs-6 col-sm-2 col-md-2">
+              <q-input
+                hide-bottom-space
+                :outlined="edit"
+                dense
+                lazy-rules
+                type="tel"
+                :class="getClass(edit)"
+                :readonly="!edit"
+                :borderless="!edit"
+                v-model="informaData.tel"
+                :label="`${'เบอร์โทร'}`"
+                mask="##########"
+                :rules="[(val:string) => !!val || `${'กรุณากรอก เบอร์โทร'}`]"
+              />
+            </div>
+            <div
+              class="col-xs-6 col-sm-3 col-md-3"
+              v-if="informaData.profileType == 'employee'"
+            >
+              <selector
+                :hide-dropdown-icon="!edit"
+                hide-bottom-space
+                :class="getClass(edit)"
+                :readonly="!edit"
+                :borderless="!edit"
+                :rules="[(val:string) => !!val || `${'กรุณาเลือก ประเภทการจ้าง'}`]"
+                :outlined="edit"
+                dense
+                lazy-rules
+                v-model="informaData.employeeType"
+                emit-value
+                map-options
+                option-label="name"
+                :options="Ops.employeeTypeOps"
+                option-value="id"
+                :label="`${'ประเภทการจ้าง'}`"
+                use-input
+                input-debounce="0"
+                @filter="(inputValue:any,
+                        doneFn:Function) => filterSelector(inputValue, doneFn,'employeeTypeOps'
+                        ) "
+              />
+            </div>
+            <div
+              class="col-xs-6 col-sm-3 col-md-3"
+              v-if="informaData.profileType == 'employee'"
+            >
+              <selector
+                :hide-dropdown-icon="!edit"
+                hide-bottom-space
+                :class="getClass(edit)"
+                :readonly="!edit"
+                :borderless="!edit"
+                :rules="[(val:string) => !!val || `${'กรุณาเลือก ประเภทลูกจ้าง'}`]"
+                :outlined="edit"
+                dense
+                lazy-rules
+                v-model="informaData.employeeClass"
+                emit-value
+                map-options
+                option-label="name"
+                :options="Ops.employeeClassOps"
+                option-value="id"
+                :label="`${'ประเภทลูกจ้าง'}`"
+                use-input
+                input-debounce="0"
+                @filter="(inputValue:any,
+                        doneFn:Function) => filterSelector(inputValue, doneFn,'employeeClassOps'
+                        ) "
+              />
+            </div>
+            <div class="col-xs-12">
+              <div class="text-weight-bold text-grey">
+                ตำแหน่งและหน่วยงานเดิม
+              </div>
+            </div>
+            <div class="col-xs-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="textarea"
+                autogrow
+              />
+            </div>
+            <div class="col-xs-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 class="col-xs-6 col-sm-3">
+              <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 class="col-xs-6 col-sm-3">
+              <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 class="col-xs-6 col-sm-3">
+              <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 class="col-xs-6 col-sm-3">
+              <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 class="col-xs-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>
+      </div>
+    </q-form>
+  </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 { useProfileDataStore } from "@/modules/08_registryEmployee/store";
 
+import type { QTableProps, QForm } from "quasar";
 import type { ResponseTitle } from "@/modules/05_placement/interface/response/Receive";
+import type { InformationOps } from "@/modules/04_registry/interface/index/Main";
+import type {
+  Information,
+  DataOption,
+} from "@/modules/04_registry/components/profileType";
+
+import { defaultInformation } from "@/modules/04_registry/components/profileType";
 
 import http from "@/plugins/http";
 import config from "@/app.config";
@@ -90,8 +601,12 @@ const {
   showLoader,
   hideLoader,
   success,
+  dateToISO,
 } = mixin;
 
+const profileStore = useProfileDataStore();
+const { changeRetireText } = profileStore;
+
 const title = ref<ResponseTitle>({
   fullname: "",
   organizationPositionOld: "",
@@ -99,21 +614,227 @@ const title = ref<ResponseTitle>({
   positionTypeOld: "",
 });
 
+const myForm = ref<QForm | null>(null);
+const edit = ref<boolean>(false);
+
+const educationOld = ref<string>("");
+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 informaData = ref<Information>(defaultInformation);
+const dateBefore = ref<Date>(new Date());
+const defaultCitizenData = ref<string>("");
+const Ops = ref<InformationOps>({
+  prefixOps: [],
+  prefixOldOps: [],
+  genderOps: [],
+  bloodOps: [],
+  statusOps: [],
+  religionOps: [],
+  employeeClassOps: [
+    { id: "perm", name: "ลูกจ้างประจำ" },
+    { id: "temp", name: "ลูกจ้างชั่วคราว" },
+  ],
+  employeeTypeOps: [
+    { id: "gov", name: "งบประมาณเงินอุดหนุนรัฐบาล" },
+    { id: "bkk", name: "งบประมาณกรุงเทพมหานคร" },
+  ],
+});
+const OpsFilter = ref<InformationOps>({
+  prefixOps: [],
+  prefixOldOps: [],
+  genderOps: [],
+  bloodOps: [],
+  statusOps: [],
+  religionOps: [],
+  employeeClassOps: [
+    { id: "perm", name: "ลูกจ้างประจำ" },
+    { id: "temp", name: "ลูกจ้างชั่วคราว" },
+  ],
+  employeeTypeOps: [
+    { id: "gov", name: "งบประมาณเงินอุดหนุนรัฐบาล" },
+    { id: "bkk", name: "งบประมาณกรุงเทพมหานคร" },
+  ],
+});
+
 onMounted(async () => {
+  await fetchPerson();
   await getData();
 });
 
+const fetchPerson = async () => {
+  showLoader();
+  await http
+    .get(config.API.person)
+    .then((res) => {
+      const data = res.data.result;
+      let optionbloodGroups: DataOption[] = [];
+      data.bloodGroups.map((r: any) => {
+        optionbloodGroups.push({
+          id: r.id.toString(),
+          name: r.name.toString(),
+        });
+      });
+      Ops.value.bloodOps = optionbloodGroups;
+      OpsFilter.value.bloodOps = optionbloodGroups;
+
+      let optiongenders: DataOption[] = [];
+      data.genders.map((r: any) => {
+        optiongenders.push({
+          id: r.id.toString(),
+          name: r.name.toString(),
+        });
+      });
+      Ops.value.genderOps = optiongenders;
+      OpsFilter.value.genderOps = optiongenders;
+
+      let optionprefixs: DataOption[] = [];
+      data.prefixs.map((r: any) => {
+        optionprefixs.push({
+          id: r.id.toString(),
+          name: r.name.toString(),
+        });
+      });
+      Ops.value.prefixOps = optionprefixs;
+      OpsFilter.value.prefixOps = optionprefixs;
+
+      let optionrelationships: DataOption[] = [];
+      data.relationships.map((r: any) => {
+        optionrelationships.push({
+          id: r.id.toString(),
+          name: r.name.toString(),
+        });
+      });
+      Ops.value.statusOps = optionrelationships;
+      OpsFilter.value.statusOps = optionrelationships;
+
+      let optionreligions: DataOption[] = [];
+      data.religions.map((r: any) => {
+        optionreligions.push({
+          id: r.id.toString(),
+          name: r.name.toString(),
+        });
+      });
+      Ops.value.religionOps = optionreligions;
+      OpsFilter.value.religionOps = optionreligions;
+    })
+    .catch((e: any) => {})
+    .finally(() => {
+      //   hideLoader();
+    });
+};
+
 const getData = async () => {
   showLoader();
   await http
     .get(config.API.receiveDataId(paramsId.toString()))
-    .then((res: any) => {
+    .then(async (res: any) => {
       const data = res.data.result;
 
       title.value.fullname = `${data.firstname ?? "-"} ${data.lastname ?? "-"}`;
       title.value.organizationPositionOld = data.organizationPositionOld ?? "-";
       title.value.positionLevelOld = data.positionLevelOld ?? "-";
       title.value.positionTypeOld = data.positionTypeOld ?? "-";
+      defaultCitizenData.value = data.citizenId == null ? "" : data.citizenId;
+      informaData.value = {
+        cardid: data.citizenId ?? "",
+        age: "",
+        prefix: "",
+        prefixId:
+          (data.prefixId == "00000000-0000-0000-0000-000000000000"
+            ? null
+            : data.prefixId) ?? "",
+        firstname: data.firstname ?? "",
+        lastname: data.lastname ?? "",
+        birthDate:
+          data.dateOfBirth !== null ? new Date(data.dateOfBirth) : null,
+        genderId:
+          (data.gender == "00000000-0000-0000-0000-000000000000"
+            ? null
+            : data.gender) ?? "",
+        bloodId:
+          (data.bloodGroup == "00000000-0000-0000-0000-000000000000"
+            ? null
+            : data.bloodGroup) ?? "",
+        nationality: data.nationality ?? "",
+        ethnicity: data.race ?? "",
+        statusId:
+          (data.relationship == "00000000-0000-0000-0000-000000000000"
+            ? null
+            : data.relationship) ?? "",
+        religionId:
+          (data.religion == "00000000-0000-0000-0000-000000000000"
+            ? null
+            : data.religion) ?? "",
+        tel: data.telephoneNumber ?? "",
+        employeeType: "",
+        employeeClass: "",
+        profileType: "",
+      };
+      educationOld.value = data.educationOld ?? "";
+      organizationPositionOld.value = data.organizationPositionOld ?? "";
+      positionTypeOld.value = data.positionTypeOld ?? "";
+      positionLevelOld.value = data.positionLevelOld ?? "";
+      posNo.value = data.positionNumberOld ?? "";
+      salary.value = data.amountOld ?? 0;
+      reason.value = data.reason ?? "";
+
+      await calRetire(new Date(dateToISO(new Date(data.dateOfBirth))));
+      dateBefore.value = new Date(data.dateOfBirth);
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(async () => {
+      hideLoader();
+    });
+};
+
+const cancel = async () => {
+  edit.value = !edit.value;
+  if (myForm.value !== null) {
+    await getData();
+    myForm.value.reset();
+  }
+};
+
+const changeCardID = async (value: string | number | null) => {
+  if (value != null && typeof value == "string") {
+    if (value.length == 13 && value != defaultCitizenData.value) {
+      await checkCitizen(value);
+      //   informaData.value.cardid = defaultCitizenData.value;
+    }
+  }
+};
+
+const checkCitizen = async (id: string) => {
+  console.log("String");
+  showLoader();
+  await http
+    .get(config.API.profileCitizenId(id))
+    .then((res) => {
+      const data = res.data.result.citizen;
+
+      if (!data) {
+        dialogMessage(
+          $q,
+          "ข้อความแจ้งเตือน",
+          "เลขบัตรประจำตัวประชาชนนี้มีการใช้งานแล้ว",
+          "warning",
+          undefined,
+          "orange",
+          undefined,
+          undefined,
+          true
+        );
+        informaData.value.cardid = defaultCitizenData.value;
+      }
     })
     .catch((e) => {
       messageError($q, e);
@@ -122,6 +843,164 @@ const getData = async () => {
       hideLoader();
     });
 };
+
+const filterSelector = (val: any, update: Function, refData: string) => {
+  switch (refData) {
+    case "prefixOps":
+      update(() => {
+        Ops.value.prefixOps = OpsFilter.value.prefixOps.filter(
+          (v: DataOption) => v.name.indexOf(val) > -1
+        );
+      });
+      break;
+    case "genderOps":
+      update(() => {
+        Ops.value.genderOps = OpsFilter.value.genderOps.filter(
+          (v: DataOption) => v.name.indexOf(val) > -1
+        );
+      });
+      break;
+    case "bloodOps":
+      update(() => {
+        Ops.value.bloodOps = OpsFilter.value.bloodOps.filter(
+          (v: DataOption) => v.name.indexOf(val) > -1
+        );
+      });
+      break;
+    case "statusOps":
+      update(() => {
+        Ops.value.statusOps = OpsFilter.value.statusOps.filter(
+          (v: DataOption) => v.name.indexOf(val) > -1
+        );
+      });
+      break;
+    case "religionOps":
+      update(() => {
+        Ops.value.religionOps = OpsFilter.value.religionOps.filter(
+          (v: DataOption) => v.name.indexOf(val) > -1
+        );
+      });
+      break;
+    case "employeeClassOps":
+      update(() => {
+        Ops.value.employeeClassOps = OpsFilter.value.employeeClassOps.filter(
+          (v: DataOption) => v.name.indexOf(val) > -1
+        );
+      });
+      break;
+    case "employeeTypeOps":
+      update(() => {
+        Ops.value.employeeTypeOps = OpsFilter.value.employeeTypeOps.filter(
+          (v: DataOption) => v.name.indexOf(val) > -1
+        );
+      });
+      break;
+
+    default:
+      break;
+  }
+};
+
+const handleDate = async (modelData: Date) => {
+  informaData.value.birthDate = modelData;
+  await calRetire(modelData);
+};
+
+const calRetire = async (birth: Date) => {
+  const body = {
+    birthDate: dateToISO(birth),
+  };
+  //   if (dateToISO(dateBefore.value) != dateToISO(birth)) {
+  showLoader();
+  await http
+    .post(config.API.profileCalRetire, body)
+    .then((res: any) => {
+      const data = res.data.result;
+      informaData.value.age = data.age;
+      changeRetireText(data.retireDate);
+      dateBefore.value = birth;
+    })
+    .catch((e: any) => {
+      messageError($q, e);
+      const retire = new Date(`${birth.getFullYear() + 60}-09-30`);
+      informaData.value.birthDate = dateBefore.value;
+      changeRetireText(date2Thai(retire));
+    })
+    .finally(() => {
+      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 = {
+    citizenId: informaData.value.cardid,
+    prefixId: informaData.value.prefixId,
+    firstname: informaData.value.firstname,
+    lastname: informaData.value.lastname,
+    dateOfBirth:
+      informaData.value.birthDate !== null
+        ? dateToISO(informaData.value.birthDate)
+        : null,
+    genderId: informaData.value.genderId,
+    nationality: informaData.value.nationality,
+    race: informaData.value.ethnicity,
+    religionId: informaData.value.religionId,
+    bloodGroupId: informaData.value.bloodId,
+    relationshipId: informaData.value.statusId,
+    telephoneNumber: informaData.value.tel,
+    reason: reason.value,
+    educationOld: educationOld.value,
+    organizationPositionOld: organizationPositionOld.value,
+    positionTypeOld: positionTypeOld.value,
+    positionLevelOld: positionLevelOld.value,
+    positionNumberOld: posNo.value,
+    amount: 0,
+    amountOld: salary.value,
+  };
+  showLoader();
+  await http
+    .put(config.API.receiveDataId(route.params.id.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 {
diff --git a/src/modules/05_placement/components/Receive/receiveMain.vue b/src/modules/05_placement/components/Receive/receiveMain.vue
index 17d810e34..7843f42d5 100644
--- a/src/modules/05_placement/components/Receive/receiveMain.vue
+++ b/src/modules/05_placement/components/Receive/receiveMain.vue
@@ -1,39 +1,40 @@
 <script setup lang="ts">
 import { ref, computed, onMounted } from "vue";
-import type { QTableProps } from "quasar";
 import { useQuasar } from "quasar";
+import { useCounterMixin } from "@/stores/mixin";
+
+import http from "@/plugins/http";
+import config from "@/app.config";
+
 import { useRouter } from "vue-router";
 import DialogFooter from "@/modules/05_placement/components/Receive/DialogFooter.vue";
 import DialogHeader from "@/modules/05_placement/components/Receive/DialogHeader.vue";
 import DialogOrgTree from "@/modules/05_placement/components/Receive/receiveModal.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 } =
-  mixin;
 
-const selected = ref([]);
-const checkSelected = computed(() => {
-  if (selected.value.length === 0) {
-    return true;
-  }
-});
-
-const add = () => {
-  router.push(`/receive/add`);
-};
-
-const clickClose = () => {
-  modal.value = false;
-};
+import type { QTableProps } from "quasar";
+import type {
+  ResponseData,
+  ResponseRow,
+} from "@/modules/05_placement/interface/response/Receive";
 
 const $q = useQuasar();
+const router = useRouter();
+const mixin = useCounterMixin(); //เรียกฟังก์ชันกลาง
+const {
+  showLoader,
+  hideLoader,
+  dialogMessage,
+  success,
+  messageError,
+  date2Thai,
+} = mixin;
+
+const selected = ref<ResponseRow[]>([]);
+
 const modal = ref<boolean>(false);
 const popup = () => {
   modal.value = true;
 };
-const router = useRouter();
 
 const modalTree = ref<boolean>(false);
 const personal = ref<any[]>([]);
@@ -56,57 +57,10 @@ const visibleColumns2 = ref<string[]>([
 const filterKeyword = ref<string>("");
 const filterKeyword2 = ref<string>("");
 const filterRef = ref<any>(null);
-const resetFilter = () => {
-  filterKeyword.value = "";
-  filterKeyword2.value = "";
-  filterRef.value.focus();
-};
-onMounted(() => {
-  fecthlistRecevice();
-});
-const listRecevice = ref<any>([]);
-const fecthlistRecevice = async () => {
-  showLoader();
-  await http
-    .get(config.API.receiveData())
-    .then((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,
-        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 nextPage = (id:string) => {
-//   router.push("/retirement/resign/"+id);
-// };
-const rows = ref<any>([
+const listRecevice = ref<any[]>([]);
+const filters = ref<ResponseRow[]>([]);
+const rows = ref<ResponseRow[]>([
   // {
   //   personalId: "08db721d-add6-47b0-8a13-5f45d106e8d1",
   //   citizenId: "1234444332222",
@@ -119,18 +73,18 @@ const rows = ref<any>([
   //   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 rows2 = ref<ResponseRow[]>([
+  //   {
+  //     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"]>([
   {
@@ -231,6 +185,77 @@ const columns2 = ref<QTableProps["columns"]>([
   },
 ]);
 
+onMounted(() => {
+  fecthlistRecevice();
+});
+
+const fecthlistRecevice = async () => {
+  showLoader();
+  await http
+    .get(config.API.receiveData())
+    .then((res: any) => {
+      const response = res.data.result;
+      listRecevice.value = response;
+      //   console.log(response);
+      let list: ResponseRow[] = [];
+      response.map((e: ResponseData) => {
+        list.push({
+          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,
+          birthday: e.dateOfBirth == null ? "-" : date2Thai(e.dateOfBirth),
+          status: e.status,
+        });
+      });
+      rows.value = list;
+      filters.value = list;
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+};
+
+const resetFilter = () => {
+  filterKeyword.value = "";
+  filterKeyword2.value = "";
+  filterRef.value.focus();
+};
+
+const checkSelected = computed(() => {
+  if (selected.value.length === 0) {
+    return true;
+  }
+});
+
+const row = filters.value.filter(
+  (r: ResponseRow) =>
+    r.status == "WAITTING" || r.status == "PENDING" || r.status == "APPROVE"
+);
+rows2.value = row;
+
+const add = () => {
+  router.push(`/receive/add`);
+};
+
+const clickClose = () => {
+  modal.value = false;
+};
+
 const openModalTree = (id: string) => {
   personalId.value = id;
   console.log(personalId.value);
@@ -240,31 +265,33 @@ const openModalTree = (id: string) => {
 };
 
 const openDelete = (id: string) => {
-  console.log(id);
+  dialogMessage(
+    $q,
+    "ลบข้อมูล",
+    "ต้องการทำการลบข้อมูลนี้ใช่หรือไม่",
+    "delete",
+    undefined,
+    "red",
+    async () => await fetchDataDelete(id),
+    undefined,
+    false
+  );
+};
 
-  $q.dialog({
-    title: `ลบข้อมูล`,
-    message: `ต้องการทำการลบข้อมูลนี้ใช่หรือไม่?`,
-    cancel: "ยกเลิก",
-    ok: "ยืนยัน",
-    persistent: true,
-  })
-    .onOk(async () => {
-      showLoader();
-      await http
-        .delete(config.API.receiveDataId(id))
-        .then((res) => {
-          success($q, "ลบข้อมูลสำเร็จ");
-        })
-        .catch((e) => {
-          messageError($q, e);
-        })
-        .finally(() => {
-          fecthlistRecevice();
-          hideLoader();
-        });
+const fetchDataDelete = async (id: string) => {
+  showLoader();
+  await http
+    .delete(config.API.receiveDataId(id))
+    .then((res) => {
+      success($q, "ลบข้อมูลสำเร็จ");
     })
-    .onCancel(() => {});
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      fecthlistRecevice();
+      hideLoader();
+    });
 };
 
 const closeModalTree = async () => {
@@ -277,6 +304,30 @@ const nextPage = (row: any) => {
     path: `/receive/${row.personalId}`,
   });
 };
+
+const saveOrder = async () => {
+  const id = selected.value.map((r: any) => r.personalId);
+  const body = {
+    id,
+  };
+
+  showLoader();
+  await http
+    .post(config.API.receiveReport, body)
+    .then((res: any) => {
+      //   const data = res.data.result;
+      //   console.log(data);
+      success($q, "ส่งไปออกคำสั่งรับโอนสำเร็จ");
+      clickClose();
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(async () => {
+      await fecthlistRecevice();
+      hideLoader();
+    });
+};
 </script>
 <template>
   <div class="toptitle text-dark col-12 row items-center">รายการรับโอน</div>
@@ -626,7 +677,7 @@ const nextPage = (row: any) => {
       <q-card-actions align="right" class="bg-white text-teal">
         <q-btn
           label="ส่งไปออกคำสั่ง"
-          @click=""
+          @click="saveOrder"
           :disable="checkSelected"
           color="public"
         />
diff --git a/src/modules/05_placement/components/Transfer/transferRegistry.vue b/src/modules/05_placement/components/Transfer/transferRegistry.vue
index 65ea2e171..26188ce8b 100644
--- a/src/modules/05_placement/components/Transfer/transferRegistry.vue
+++ b/src/modules/05_placement/components/Transfer/transferRegistry.vue
@@ -497,7 +497,7 @@ const getData = async () => {
       positionTypeOld.value = data.positionTypeOld ?? "";
       positionLevelOld.value = data.positionLevelOld ?? "";
       posNo.value = data.posNo ?? "";
-      salary.value = data.salary ?? "";
+      salary.value = data.salary ?? 0;
       organization.value = data.organization ?? "";
       date.value = data.date !== null ? new Date(data.date) : null;
       reason.value = data.reason ?? "";
diff --git a/src/modules/05_placement/interface/response/Receive.ts b/src/modules/05_placement/interface/response/Receive.ts
index 1c013c07d..58f940740 100644
--- a/src/modules/05_placement/interface/response/Receive.ts
+++ b/src/modules/05_placement/interface/response/Receive.ts
@@ -1,5 +1,3 @@
-import { type } from "os";
-
 interface ResponseTitle {
   fullname: string;
   organizationPositionOld: string;
@@ -7,4 +5,53 @@ interface ResponseTitle {
   positionTypeOld: string;
 }
 
-export type { ResponseTitle };
+interface ResponseRow {
+  personalId: string;
+  citizenId: string;
+  fullname: string;
+  organizationName: string;
+  orgName: string;
+  organizationShortName: string;
+  positionNumber: string;
+  positionPath: string;
+  birthday: string | null;
+  status: string;
+}
+
+interface ResponseData {
+  citizenId: string;
+  createdAt: Date;
+  dateOfBirth: Date;
+  educationOld: string;
+  firstname: string;
+  gender: string;
+  id: string;
+  isActive: boolean;
+  lastname: string;
+  organizationName: string;
+  organizationPositionId: string;
+  organizationPositionOld: string;
+  organizationShortName: string;
+  posNoId: string;
+  positionId: string;
+  positionLevel: string;
+  positionLevelId: string;
+  positionLevelOld: string;
+  positionLine: string;
+  positionLineId: string;
+  positionNumber: string;
+  positionNumberOld: string;
+  positionPath: string;
+  positionPathSide: string;
+  positionPathSideId: string;
+  positionType: string;
+  positionTypeId: string;
+  positionTypeOld: string;
+  prefix: string;
+  reason: string;
+  recruitDate: Date;
+  salary: number;
+  status: string;
+}
+
+export type { ResponseTitle, ResponseData, ResponseRow };
diff --git a/src/views/Dashboard.vue b/src/views/Dashboard.vue
index 6f085d55d..7554dbc6d 100644
--- a/src/views/Dashboard.vue
+++ b/src/views/Dashboard.vue
@@ -1,34 +1,57 @@
 <script setup lang="ts">
-import { ref } from "vue";
+import { ref, onMounted } from "vue";
+import { useQuasar } from "quasar";
+import { useCounterMixin } from "@/stores/mixin";
+
+import http from "@/plugins/http";
+import config from "@/app.config";
+
+import type {
+  ResponseInbox,
+  DataInbox,
+} from "@/interface/response/dashboard/dashboard";
+
+const $q = useQuasar();
+const mixin = useCounterMixin(); //เรียกฟังก์ชันกลาง
+const {
+  showLoader,
+  hideLoader,
+  dialogMessage,
+  success,
+  messageError,
+  date2Thai,
+} = mixin;
+
 const iteminbox = ref<any>([]);
 const splitterModel = ref<number>(30);
-const link = ref<number>(1);
-const inboxList = ref<any>([
+const link = ref<string>("0");
+const inboxList = ref<DataInbox[]>([
   {
-    no: 1,
+    no: "1",
     sender: "เจ้าหน้าที่ทะเบียนประวัติ",
     subject: "ขอแก้ไขข้อมูลทะเบียนประวัติ",
-    timereceive: "13/12/2565",
+    timereceive: new Date(),
     body: "ขอแก้ไขข้อมูลทะเบียนประวัติ เรื่อง ชื่อ-นามสกุล",
     ratingModel: 0,
   },
   {
-    no: 2,
+    no: "2",
     sender: "เจ้าหน้าที่ทะเบียนประวัติ",
     subject: "ขอแก้ไขข้อมูลทะเบียนประวัติ",
-    timereceive: "13/12/2565",
+    timereceive: new Date(),
     body: "ขอแก้ไขข้อมูลทะเบียนประวัติ เรื่อง ชื่อ-นามสกุล",
-    ratingModel: 1,
+    ratingModel: 0,
   },
 ]);
-const data = ref<any>([
-  {
-    no: 1,
-    sender: "เจ้าหน้าที่ทะเบียนประวัติ",
-    subject: "ขอแก้ไขข้อมูลทะเบียนประวัติ",
-    timereceive: "13/12/2565",
-    body: "ขอแก้ไขข้อมูลทะเบียนประวัติ เรื่อง ชื่อ-นามสกุล",
-  },
+const data = ref<DataInbox[]>([
+  //   {
+  //     no: "1",
+  //     sender: "เจ้าหน้าที่ทะเบียนประวัติ",
+  //     subject: "ขอแก้ไขข้อมูลทะเบียนประวัติ",
+  //     timereceive: new Date(),
+  //     body: "ขอแก้ไขข้อมูลทะเบียนประวัติ เรื่อง ชื่อ-นามสกุล",
+  //     ratingModel: 0,
+  //   },
 ]);
 const btnReply = ref<boolean>(true);
 const listpayload = ref<any>([]);
@@ -51,6 +74,46 @@ const barStyle = ref<any>({
   width: "9px",
   opacity: 0.2,
 });
+
+onMounted(async () => {
+  await getData();
+});
+
+const getData = async () => {
+  showLoader();
+  await http
+    .get(config.API.msgInbox)
+    .then((res: any) => {
+      const response = res.data.result;
+      //   console.log(response);
+      let list: DataInbox[] = [];
+      response.map((e: ResponseInbox) => {
+        list.push({
+          no: e.id ?? "",
+          sender:
+            e.createdFullName == "" || e.createdFullName == null
+              ? "เจ้าหน้าที่"
+              : e.createdFullName,
+          subject: e.subject ?? "",
+          timereceive: new Date(e.createdAt),
+          body: e.body ?? "",
+          ratingModel: 0,
+        });
+      });
+      inboxList.value = list;
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+};
+
+const selectInbox = (id: string) => {
+  link.value = id;
+  data.value = inboxList.value.filter((r) => r.no == id);
+};
 </script>
 
 <!-- page:หน้าแรก -->
@@ -88,10 +151,11 @@ const barStyle = ref<any>({
               class="mytry"
               :active="link === contact.no"
               active-class="my-menu-link"
+              @click="selectInbox(contact.no)"
             >
               <q-item-section>
                 <q-item-label caption class="text-weight-light">{{
-                  contact.timereceive
+                  date2Thai(contact.timereceive)
                 }}</q-item-label>
                 <q-item-label class="text-weight-medium">{{
                   contact.sender
@@ -174,7 +238,9 @@ const barStyle = ref<any>({
               </q-item-section>
 
               <q-item-section side top>
-                <q-item-label caption>{{ d.timereceive }}</q-item-label>
+                <q-item-label caption>{{
+                  date2Thai(d.timereceive)
+                }}</q-item-label>
                 <div class="text-grey-8 q-gutter-xs q-pt-sm">
                   <q-btn
                     flat
diff --git a/src/views/MainLayout.vue b/src/views/MainLayout.vue
index 04eee3f99..056b56a06 100644
--- a/src/views/MainLayout.vue
+++ b/src/views/MainLayout.vue
@@ -5,6 +5,11 @@ import { useRoute, useRouter } from "vue-router";
 import { useDataStore } from "@/stores/data";
 import { storeToRefs } from "pinia";
 import { scroll, useQuasar } from "quasar";
+import { useCounterMixin } from "@/stores/mixin";
+
+import http from "@/plugins/http";
+import config from "@/app.config";
+
 import type {
   ScrollType,
   notiType,
@@ -21,6 +26,15 @@ const store = useDataStore();
 const route = useRoute();
 const router = useRouter();
 const link = ref<string>("");
+const mixin = useCounterMixin(); //เรียกฟังก์ชันกลาง
+const {
+  showLoader,
+  hideLoader,
+  dialogMessage,
+  success,
+  messageError,
+  date2Thai,
+} = mixin;
 
 const $q = useQuasar();
 const { tabData, loader } = storeToRefs(store);
@@ -38,10 +52,10 @@ const text = ref<string>("");
 
 const notiList = ref<notiType[]>([
   {
-    id: 1,
+    id: "1",
     sender: "ท",
     body: "ขอแก้ไขข้อมูลทะเบียนประวัติ",
-    timereceive: "13/12/2565",
+    timereceive: new Date(),
   },
 ]);
 const options = ref<optionType[]>([
@@ -64,6 +78,36 @@ const options = ref<optionType[]>([
     color: "indigo",
   },
 ]);
+
+const getDataNotification = async () => {
+  showLoader();
+  await http
+    .get(config.API.msgNotificate)
+    .then((res: any) => {
+      const response = res.data.result;
+      //   console.log("response", response);
+      let list: notiType[] = [];
+      response.map((e: any) => {
+        list.push({
+          id: e.id,
+          sender:
+            e.createdFullName == "" || e.createdFullName == null
+              ? "เจ้าหน้าที่"[0]
+              : e.createdFullName[0],
+          body: e.body ?? "",
+          timereceive: new Date(e.createdAt),
+        });
+      });
+      notiList.value = list;
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+};
+
 /**
  * ให้แสดง แทปด้านขวา เมื่อเข้าหน้า รายละเอียดทะเบียนประวัติ
  */
@@ -166,7 +210,8 @@ const activeBtn = () => {
  * เริ่มเข้ามา state rightActive เป็น state ที่โชว์ ปุ่มขวา
  * ยังจับ boolean ผิด จึงต้อง set
  */
-onMounted(() => {
+onMounted(async () => {
+  await getDataNotification();
   myEventHandler(null, false);
   window.addEventListener("resize", (e: any) => {
     myEventHandler(e, true);
@@ -221,7 +266,8 @@ const myEventHandler = (e: any, setSCroll: boolean) => {
  */
 const activeMenu = (path: string) => {
   if (path == "dashboard" && route.fullPath == "/") return true;
-  if (path == "registry" && route.fullPath == "/registry-employee") return false;
+  if (path == "registry" && route.fullPath == "/registry-employee")
+    return false;
   if (path == "registry" && route.fullPath == "/") return false;
   // if (path != "registry" && path == "registryEmployee" && route.fullPath == "/registryEmployee") return true;
   const bool = route.fullPath.includes(`/${path}`);
@@ -427,7 +473,7 @@ if (keycloak.tokenParsed != null) {
                     n.body
                   }}</q-item-label>
                   <q-item-label caption class="row items-center text-grey-7">{{
-                    n.timereceive
+                    date2Thai(n.timereceive)
                   }}</q-item-label>
                 </q-item-section>
                 <q-btn

From 94e6134e5616b490836c5178aa440abe177a31e3 Mon Sep 17 00:00:00 2001
From: setthawutttty <stw.ttty@gmail.com>
Date: Wed, 16 Aug 2023 13:59:25 +0700
Subject: [PATCH 110/113] =?UTF-8?q?=E0=B8=9B=E0=B8=A3=E0=B8=B1=E0=B8=9A=20?=
 =?UTF-8?q?ui=20=E0=B9=80=E0=B8=84=E0=B8=A3=E0=B8=B7=E0=B9=88=E0=B8=AD?=
 =?UTF-8?q?=E0=B8=87=E0=B8=A3=E0=B8=B2=E0=B8=8A=E0=B8=AF=20=E0=B9=80?=
 =?UTF-8?q?=E0=B8=AB=E0=B8=A3=E0=B8=B5=E0=B8=A2=E0=B8=8D=E0=B8=88=E0=B8=B1?=
 =?UTF-8?q?=E0=B8=81=E0=B8=A3=E0=B8=9E=E0=B8=A3=E0=B8=A3=E0=B8=94=E0=B8=B4?=
 =?UTF-8?q?=E0=B8=A1=E0=B8=B2=E0=B8=A5=E0=B8=B2=20(=E0=B8=A3=E0=B8=AD?=
 =?UTF-8?q?=E0=B8=9A=E0=B8=81=E0=B8=B2=E0=B8=A3=E0=B9=80=E0=B8=AA=E0=B8=99?=
 =?UTF-8?q?=E0=B8=AD=E0=B8=82=E0=B8=AD)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/interface/request/main/main.ts            |   4 +-
 .../components/Relocation/RelocationMain.vue  |   4 +-
 .../components/Relocation/RelocationbyId.vue  |  20 +-
 .../components/Repatriate/RepatriatebyId.vue  |   6 +-
 .../helpgovernment/governmentDetail.vue       |   6 +-
 .../components/1_Proposals/addProposals.vue   |  25 +-
 .../components/1_Proposals/listProposals.vue  | 363 +++++++++---------
 .../components/1_Proposals/addProposals.vue   |  26 +-
 .../components/1_Proposals/listProposals.vue  |   2 +-
 9 files changed, 254 insertions(+), 202 deletions(-)

diff --git a/src/interface/request/main/main.ts b/src/interface/request/main/main.ts
index fc1d1f2cf..78f2ecd9b 100644
--- a/src/interface/request/main/main.ts
+++ b/src/interface/request/main/main.ts
@@ -337,7 +337,7 @@ const menuList = readonly<any[]>([
         role: "insignia",
         children: [
           {
-            label: "รายการเสนอขอ",
+            label: "รอบการเสนอขอ",
             path: "insigniaProposals",
             role: "insignia",
           },
@@ -370,7 +370,7 @@ const menuList = readonly<any[]>([
         role: "coin",
         children: [
           {
-            label: "รายการเสนอขอ",
+            label: "รอบการเสนอขอ",
             path: "coinProposals",
             role: "coin",
           },
diff --git a/src/modules/05_placement/components/Relocation/RelocationMain.vue b/src/modules/05_placement/components/Relocation/RelocationMain.vue
index 03122f023..ed978cbbc 100644
--- a/src/modules/05_placement/components/Relocation/RelocationMain.vue
+++ b/src/modules/05_placement/components/Relocation/RelocationMain.vue
@@ -166,7 +166,7 @@ const columns = ref<QTableProps["columns"]>([
   {
     name: "organization",
     align: "left",
-    label: "หน่วยงานที่ขอโอนไป",
+    label: "หน่วยงานที่ขอย้ายไป",
     sortable: true,
     field: "organization",
     headerStyle: "font-size: 14px",
@@ -240,7 +240,7 @@ const columns2 = ref<QTableProps["columns"]>([
   {
     name: "organization",
     align: "left",
-    label: "หน่วยงานที่ขอโอนไป",
+    label: "หน่วยงานที่ขอย้ายไป",
     sortable: true,
     field: "organization",
     headerStyle: "font-size: 14px",
diff --git a/src/modules/05_placement/components/Relocation/RelocationbyId.vue b/src/modules/05_placement/components/Relocation/RelocationbyId.vue
index 4e1825af8..6ee4a91a8 100644
--- a/src/modules/05_placement/components/Relocation/RelocationbyId.vue
+++ b/src/modules/05_placement/components/Relocation/RelocationbyId.vue
@@ -50,8 +50,8 @@ 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 amount = ref<number>();
+const amountOld = ref<number>();
 const positionTypeOld = ref<string>("");
 const positionLevelOld = ref<string>("");
 const dateOfBirth = ref<Date>()
@@ -131,7 +131,8 @@ const getData = async () => {
       reason.value = data.reason;
       status.value = data.status;
       date.value = data.date;
-      salary.value = data.salary;
+      amount.value = data.amount;
+      amountOld.value = data.amountOld;
       positionTypeOld.value = data.positionTypeOld;
       positionLevelOld.value = data.positionLevelOld;
       positionNumberOld.value = data.positionNumberOld;
@@ -178,6 +179,10 @@ const conditionSave = async () => {
     });
   }
 };
+const cancelBtn = () => {
+  edit.value=!edit
+  getData()
+}
 const saveData = async () => {
   const body = {
     educationOld: educationOld.value,
@@ -190,7 +195,8 @@ const saveData = async () => {
     positionTypeOld: positionTypeOld.value,
     positionLevelOld: positionLevelOld.value,
     positionNumberOld: positionNumberOld.value,
-    amountOld: salary.value,
+    amount: amount.value,
+    amountOld: amountOld.value,
     dateOfBirth:dateOfBirth.value ,
     genderId:genderId.value ,
     nationality:nationality.value ,
@@ -348,7 +354,7 @@ onMounted(async () => {
           class="q-px-sm"
           label="ยกเลิก"
           style="width: 80px"
-          @click="edit = !edit"
+          @click="cancelBtn"
         />
       </div>
     </div>
@@ -454,7 +460,7 @@ onMounted(async () => {
                 lazy-rules
                 :readonly="!edit"
                 :borderless="!edit"
-                v-model="salary"
+                v-model="amountOld"
                 :rules="[(val) => !!val || `${'กรุณากรอกเงินเดือน'}`]"
                 hide-bottom-space
                 :label="`${'เงินเดือน'}`"
@@ -492,7 +498,7 @@ onMounted(async () => {
                 lazy-rules
                 :readonly="!edit"
                 :borderless="!edit"
-                v-model="salaryNew"
+                v-model="amount"
                 :rules="[(val) => !!val || `${'กรุณากรอกเงินเดือน'}`]"
                 hide-bottom-space
                 :label="`${'เงินเดือน'}`"
diff --git a/src/modules/05_placement/components/Repatriate/RepatriatebyId.vue b/src/modules/05_placement/components/Repatriate/RepatriatebyId.vue
index 0d7bf023a..3bc30c5bf 100644
--- a/src/modules/05_placement/components/Repatriate/RepatriatebyId.vue
+++ b/src/modules/05_placement/components/Repatriate/RepatriatebyId.vue
@@ -95,7 +95,7 @@
             class="q-px-sm"
             label="ยกเลิก"
             style="width: 80px"
-            @click="edit = !edit"
+            @click="cancelBtn"
           />
         </div>
       </div>
@@ -429,6 +429,10 @@
       });
     }
   };
+  const cancelBtn = () => {
+  edit.value=!edit
+  getData()
+}
   const saveData = async () => {
     const body = {
       organization: organization.value,
diff --git a/src/modules/05_placement/components/helpgovernment/governmentDetail.vue b/src/modules/05_placement/components/helpgovernment/governmentDetail.vue
index 944de9a45..99c741fd9 100644
--- a/src/modules/05_placement/components/helpgovernment/governmentDetail.vue
+++ b/src/modules/05_placement/components/helpgovernment/governmentDetail.vue
@@ -95,7 +95,7 @@
           class="q-px-sm"
           label="ยกเลิก"
           style="width: 80px"
-          @click="edit = !edit"
+          @click="cancelBtn"
         />
       </div>
     </div>
@@ -429,6 +429,10 @@ const conditionSave = async () => {
     });
   }
 };
+const cancelBtn = () => {
+  edit.value=!edit
+  getData()
+}
 const saveData = async () => {
   const body = {
     organization: organization.value,
diff --git a/src/modules/07_insignia/components/1_Proposals/addProposals.vue b/src/modules/07_insignia/components/1_Proposals/addProposals.vue
index f4b3205ef..bb59267c9 100644
--- a/src/modules/07_insignia/components/1_Proposals/addProposals.vue
+++ b/src/modules/07_insignia/components/1_Proposals/addProposals.vue
@@ -24,12 +24,16 @@
             <div class="col-xs-12 col-sm-12 row">
               <q-separator />
               <div class="col-12 row q-pa-sm q-col-gutter-sm">
-                <q-input
+                <q-select
                   class="col-10"
                   dense
                   outlined
                   v-model="roundInsig"
+                  :options="options"
+                  option-value="value"
+                  option-label="label"
                   label="รอบการเสนอขอพระราชทานเครื่องราชฯ"
+                  @update:model-value="updateDateRange"
                 />
                 <datepicker
                   menu-class-name="modalfix"
@@ -210,9 +214,12 @@ const dateEnd = ref<Date>(new Date());
 const yearly = ref<number>(new Date().getFullYear());
 const files = ref<any>();
 const fileDocDataUpload = ref<File[]>([]);
-const roundInsig = ref<string>("");
+const roundInsig = ref<any>();
 const datelast = ref<number>(1);
-
+const options = ref([
+  {label:"ครั้งที่ 1",value:1},
+  {label:"ครั้งที่ 2",value:2}
+])
 onMounted(async () => {
   await fetchData();
 });
@@ -312,6 +319,18 @@ const checkSave = async () => {
 //   };
 //   return valueData;
 // };
+const updateDateRange = () => {
+// console.log("test")
+  if (roundInsig.value.value == 1) {
+    dateStart.value = new Date(new Date().getFullYear(), 9, 1);
+    dateEnd.value = new Date(new Date().getFullYear() + 1, 3, 29);
+    console.log(1)
+  } else if (roundInsig.value.value == 2) {
+    dateStart.value = new Date(new Date().getFullYear(), 3, 29);
+    dateEnd.value = new Date(new Date().getFullYear() + 1, 6, 28);
+    console.log(2)
+  }
+};
 
 const addData = async () => {
   const formData = new FormData();
diff --git a/src/modules/07_insignia/components/1_Proposals/listProposals.vue b/src/modules/07_insignia/components/1_Proposals/listProposals.vue
index 8702e4e49..c558d3d48 100644
--- a/src/modules/07_insignia/components/1_Proposals/listProposals.vue
+++ b/src/modules/07_insignia/components/1_Proposals/listProposals.vue
@@ -1,183 +1,3 @@
-<template>
-  <div class="toptitle text-dark col-12 row items-center">
-    รายการรอบการเสนอขอพระราชทานเครื่องราชอิสริยาภรณ์
-  </div>
-  <q-card flat bordered class="col-12 q-mt-sm q-pa-md">
-    <div class="row q-col-gutter-sm">
-      <div class="row col-12 q-col-gutter-sm">
-        <div>
-          <q-btn
-            @click="clickAdd()"
-            size="12px"
-            flat
-            round
-            color="add"
-            icon="mdi-plus"
-          >
-            <q-tooltip>เพิ่มรายการรอบการเสนอขอ</q-tooltip>
-          </q-btn>
-        </div>
-        <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"
-        />
-      </div>
-      <div class="col-12">
-        <q-table
-          ref="table"
-          :columns="columns"
-          :rows="rows"
-          :filter="filterKeyword"
-          row-key="Order"
-          flat
-          bordered
-          :paging="true"
-          dense
-          class="custom-header-table"
-          v-bind="attrs"
-          :visible-columns="visibleColumns"
-          :pagination-label="paginationLabel"
-          v-model:pagination="pagination"
-        >
-          <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-th auto-width />
-            </q-tr>
-          </template>
-          <template v-slot:body="props">
-            <q-tr :props="props" class="cursor-pointer">
-              <q-td key="round" :props="props" @click="clickEdit(props.row)">
-                {{ props.row.round }}
-              </q-td>
-              <q-td key="year" :props="props" @click="clickEdit(props.row)">
-                {{ props.row.year }}
-              </q-td>
-              <q-td
-                key="startDate"
-                :props="props"
-                @click="clickEdit(props.row)"
-              >
-                {{ props.row.startDate }}
-              </q-td>
-              <q-td key="endDate" :props="props" @click="clickEdit(props.row)">
-                {{ props.row.endDate }}
-              </q-td>
-              <q-td key="status" :props="props" @click="clickEdit(props.row)">
-                <q-icon
-                  v-if="props.row.status == true"
-                  name="mdi-close"
-                  color="grey-5"
-                  class="text-h5"
-                  @click="clickEdit(props.row)"
-                />
-                <q-icon
-                  v-else
-                  name="mdi-check"
-                  color="positive"
-                  class="text-h5"
-                  @click="clickEdit(props.row)"
-                />
-              </q-td>
-              <q-td key="statusRoyal" :props="props">
-                <q-icon
-                  v-if="props.row.statusRoyal == 'ยังไม่ได้เสนอ'"
-                  name="mdi-timer-sand"
-                  color="orange"
-                  class="text-h5"
-                  @click="clickEdit(props.row)"
-                />
-                <q-icon
-                  v-else
-                  name="mdi-check"
-                  color="positive"
-                  class="text-h5"
-                  @click="clickEdit(props.row)"
-                />
-              </q-td>
-              <q-td auto-width>
-                <q-btn
-                  dense
-                  size="12px"
-                  flat
-                  round
-                  color="light-blue-8"
-                  @click.stop.prevent="clickProposals(props.row.file)"
-                  icon="mdi-file-download"
-                >
-                  <q-tooltip>ดาวน์โหลดเอกสารประกอบ </q-tooltip>
-                </q-btn>
-              </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>
-          <template v-slot:pagination="scope">
-            <q-pagination
-              v-model="pagination.page"
-              active-color="primary"
-              color="dark"
-              :max="scope.pagesNumber"
-              :max-pages="5"
-              size="sm"
-              boundary-links
-              direction-links
-            ></q-pagination>
-          </template>
-        </q-table>
-      </div>
-    </div>
-  </q-card>
-</template>
-
 <script setup lang="ts">
 import { ref, useAttrs, onMounted } from "vue";
 import type { QTableProps } from "quasar";
@@ -216,7 +36,7 @@ const visibleColumns = ref<string[]>([
   "year",
   "startDate",
   "endDate",
-  "status",
+  // "status",
   "statusRoyal",
 ]); //ค้นหา คอลัมน์ คอลัมน์ที่แสดง
 
@@ -436,6 +256,187 @@ const paginationLabel = (start: string, end: string, total: string) => {
   else return start + "-" + end + " ใน " + total;
 };
 </script>
+<template>
+  <div class="toptitle text-dark col-12 row items-center">
+    รายการรอบการเสนอขอพระราชทานเครื่องราชอิสริยาภรณ์
+  </div>
+  <q-card flat bordered class="col-12 q-mt-sm q-pa-md">
+    <div class="row q-col-gutter-sm">
+      <div class="row col-12 q-col-gutter-sm">
+        <div>
+          <q-btn
+            @click="clickAdd()"
+            size="12px"
+            flat
+            round
+            color="add"
+            icon="mdi-plus"
+          >
+            <q-tooltip>เพิ่มรายการรอบการเสนอขอ</q-tooltip>
+          </q-btn>
+        </div>
+        <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"
+        />
+      </div>
+      <div class="col-12">
+        <q-table
+          ref="table"
+          :columns="columns"
+          :rows="rows"
+          :filter="filterKeyword"
+          row-key="Order"
+          flat
+          bordered
+          :paging="true"
+          dense
+          class="custom-header-table"
+          v-bind="attrs"
+          :visible-columns="visibleColumns"
+          :pagination-label="paginationLabel"
+          v-model:pagination="pagination"
+        >
+          <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-th auto-width />
+            </q-tr>
+          </template>
+          <template v-slot:body="props">
+            <q-tr :props="props" class="cursor-pointer">
+              <q-td key="round" :props="props" @click="clickEdit(props.row)">
+                {{ props.row.round }}
+              </q-td>
+              <q-td key="year" :props="props" @click="clickEdit(props.row)">
+                {{ props.row.year }}
+              </q-td>
+              <q-td
+                key="startDate"
+                :props="props"
+                @click="clickEdit(props.row)"
+              >
+                {{ props.row.startDate }}
+              </q-td>
+              <q-td key="endDate" :props="props" @click="clickEdit(props.row)">
+                {{ props.row.endDate }}
+              </q-td>
+              <q-td key="status" :props="props" @click="clickEdit(props.row)">
+                <q-icon
+                  v-if="props.row.status == true"
+                  name="mdi-close"
+                  color="grey-5"
+                  class="text-h5"
+                  @click="clickEdit(props.row)"
+                />
+                <q-icon
+                  v-else
+                  name="mdi-check"
+                  color="positive"
+                  class="text-h5"
+                  @click="clickEdit(props.row)"
+                />
+              </q-td>
+              <q-td key="statusRoyal" :props="props">
+                <q-icon
+                  v-if="props.row.statusRoyal == 'ยังไม่ได้เสนอ'"
+                  name="mdi-timer-sand"
+                  color="orange"
+                  class="text-h5"
+                  @click="clickEdit(props.row)"
+                />
+                <q-icon
+                  v-else
+                  name="mdi-check"
+                  color="positive"
+                  class="text-h5"
+                  @click="clickEdit(props.row)"
+                />
+              </q-td>
+              <q-td auto-width>
+                <q-btn
+                  dense
+                  size="12px"
+                  flat
+                  round
+                  color="light-blue-8"
+                  @click.stop.prevent="clickProposals(props.row.file)"
+                  icon="mdi-file-download"
+                >
+                  <q-tooltip>ดาวน์โหลดเอกสารประกอบ </q-tooltip>
+                </q-btn>
+              </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>
+          <template v-slot:pagination="scope">
+            <q-pagination
+              v-model="pagination.page"
+              active-color="primary"
+              color="dark"
+              :max="scope.pagesNumber"
+              :max-pages="5"
+              size="sm"
+              boundary-links
+              direction-links
+            ></q-pagination>
+          </template>
+        </q-table>
+      </div>
+    </div>
+  </q-card>
+</template>
+
+
 
 <style lang="scss" scope>
 .filter-card {
diff --git a/src/modules/09_coin/components/1_Proposals/addProposals.vue b/src/modules/09_coin/components/1_Proposals/addProposals.vue
index 037ceaf2e..c9fb7a7ca 100644
--- a/src/modules/09_coin/components/1_Proposals/addProposals.vue
+++ b/src/modules/09_coin/components/1_Proposals/addProposals.vue
@@ -24,12 +24,16 @@
             <div class="col-xs-12 col-sm-12 row">
               <q-separator />
               <div class="col-12 row q-pa-sm q-col-gutter-sm">
-                <q-input
+                <q-select
                   class="col-10"
                   dense
                   outlined
                   v-model="roundCoin"
                   label="รอบการเสนอขอพระราชทานเหรียญจักรพรรดิมาลา"
+                  :options="options"
+                  option-value="value"
+                  option-label="label"
+                  @update:model-value="updateDateRange"
                 />
                 <datepicker
                   menu-class-name="modalfix"
@@ -210,9 +214,12 @@ const dateEnd = ref<Date>(new Date());
 const yearly = ref<number>(new Date().getFullYear());
 const files = ref<any>();
 const fileDocDataUpload = ref<File[]>([]);
-const roundCoin = ref<string>("");
+const roundCoin = ref<any>("");
 const datelast = ref<number>(1);
-
+  const options = ref([
+  {label:"ครั้งที่ 1",value:1},
+  {label:"ครั้งที่ 2",value:2}
+])
 onMounted(async () => {
   await fetchData();
 });
@@ -336,7 +343,18 @@ const checkSave = async () => {
 //   };
 //   return valueData;
 // };
-
+const updateDateRange = () => {
+// console.log("test")
+  if (roundCoin.value.value == 1) {
+    dateStart.value = new Date(new Date().getFullYear(), 9, 1);
+    dateEnd.value = new Date(new Date().getFullYear() + 1, 3, 29);
+    console.log(1)
+  } else if (roundCoin.value.value == 2) {
+    dateStart.value = new Date(new Date().getFullYear(), 3, 29);
+    dateEnd.value = new Date(new Date().getFullYear() + 1, 6, 28);
+    console.log(2)
+  }
+};
 const addData = async () => {
   const formData = new FormData();
   formData.append("name", roundCoin.value);
diff --git a/src/modules/09_coin/components/1_Proposals/listProposals.vue b/src/modules/09_coin/components/1_Proposals/listProposals.vue
index 5ae1ac3cc..52283c01f 100644
--- a/src/modules/09_coin/components/1_Proposals/listProposals.vue
+++ b/src/modules/09_coin/components/1_Proposals/listProposals.vue
@@ -216,7 +216,7 @@ const visibleColumns = ref<string[]>([
   "year",
   "startDate",
   "endDate",
-  "status",
+  // "status",
   "statusRoyal",
 ]); //ค้นหา คอลัมน์ คอลัมน์ที่แสดง
 

From abc8ce0eae0a7ee9a09fd7b27a2c4e5578404b63 Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Wed, 16 Aug 2023 14:34:14 +0700
Subject: [PATCH 111/113] no message

---
 .../FormEvaluation/FormSaveResult.vue         | 76 +++++++++++--------
 1 file changed, 44 insertions(+), 32 deletions(-)

diff --git a/src/modules/05_placement/components/probation/FormEvaluation/FormSaveResult.vue b/src/modules/05_placement/components/probation/FormEvaluation/FormSaveResult.vue
index de36f904d..faab9aaef 100644
--- a/src/modules/05_placement/components/probation/FormEvaluation/FormSaveResult.vue
+++ b/src/modules/05_placement/components/probation/FormEvaluation/FormSaveResult.vue
@@ -33,6 +33,8 @@ const date_finish = ref<Date>(new Date());
 const status = ref<boolean>(true);
 const round = ref<any>();
 
+const checkArray = ref<number>(0);
+
 const props = defineProps({
   tab: String,
 });
@@ -49,7 +51,7 @@ const fecthFormdata = async (id: string) => {
   await http
     .get(config.API.formevaluateRecord(id))
     .then((res: any) => {
-      // console.log(res);
+      console.log(res);
       evaluate_no.value = res.data.data.evaluate_no;
       start_date.value = res.data.data.start_date;
       date_finish.value = res.data.data.end_date;
@@ -58,6 +60,15 @@ const fecthFormdata = async (id: string) => {
       assign.value = res.data.data.assign;
       option.value.push(res.data.data.director);
       Autherise.value = res.data.data.director.name;
+      list1_1.value = res.data.data.assign_output;
+      evaluate_expenct_level.value = res.data.data.assign_output.map((e) => ({
+        id: e.id,
+        labal: e.output_desc,
+      }));
+      evaluate_ouptut.value = res.data.data.assign_output.map((e) => ({
+        id: e.id,
+      }));
+      checkArray.value = list1_1.value.length;
     })
     .catch((e: any) => {
       console.log(e);
@@ -68,7 +79,7 @@ const fecthFormRound = async (id: string, no: string) => {
   await http
     .get(config.API.formevaluateround(id, no))
     .then((res: any) => {
-      console.log(res);
+      // console.log(res);
       let data = res.data.data.evaluate;
       start_date.value = data.date_start;
       date_finish.value = data.date_finish;
@@ -123,13 +134,13 @@ const fecthFormRound = async (id: string, no: string) => {
     });
 };
 
-const list1_1 = [
-  { id: "1", label: "ผลผลิตของงานที่คาดหวัง 1" },
-  { id: "2", label: "ผลผลิตของงานที่คาดหวัง 2" },
-  { id: "3", label: "ผลผลิตของงานที่คาดหวัง 3" },
-  { id: "4", label: "ผลผลิตของงานที่คาดหวัง 4" },
-  { id: "5", label: "ผลผลิตของงานที่คาดหวัง 5" },
-];
+const list1_1 = ref<any>([]);
+// { id: "1", label: "ผลผลิตของงานที่คาดหวัง 1" },
+// { id: "2", label: "ผลผลิตของงานที่คาดหวัง 2" },
+// { id: "3", label: "ผลผลิตของงานที่คาดหวัง 3" },
+// { id: "4", label: "ผลผลิตของงานที่คาดหวัง 4" },
+// { id: "5", label: "ผลผลิตของงานที่คาดหวัง 5" },
+
 const list1_2 = [
   { id: "1", label: "ผลผลิตของงานที่เกิดขึ้น 1" },
   { id: "2", label: "ผลผลิตของงานที่เกิดขึ้น 2" },
@@ -190,18 +201,18 @@ const period = ref<number>(1);
 
 // part 1
 const evaluate_expenct_level = ref<any>([
-  { id: "1", label: "ผลผลิตของงานที่คาดหวัง 1", level: 0 },
-  { id: "2", label: "ผลผลิตของงานที่คาดหวัง 2", level: 0 },
-  { id: "3", label: "ผลผลิตของงานที่คาดหวัง 3", level: 0 },
-  { id: "4", label: "ผลผลิตของงานที่คาดหวัง 4", level: 0 },
-  { id: "5", label: "ผลผลิตของงานที่คาดหวัง 5", level: 0 },
+  // { id: "1", label: "ผลผลิตของงานที่คาดหวัง 1", level: 0 },
+  // { id: "2", label: "ผลผลิตของงานที่คาดหวัง 2", level: 0 },
+  // { id: "3", label: "ผลผลิตของงานที่คาดหวัง 3", level: 0 },
+  // { id: "4", label: "ผลผลิตของงานที่คาดหวัง 4", level: 0 },
+  // { id: "5", label: "ผลผลิตของงานที่คาดหวัง 5", level: 0 },
 ]);
 const evaluate_ouptut = ref<any>([
-  { level: 0, text: "" },
-  { level: 0, text: "" },
-  { level: 0, text: "" },
-  { level: 0, text: "" },
-  { level: 0, text: "" },
+  // { level: 0, text: "" },
+  // { level: 0, text: "" },
+  // { level: 0, text: "" },
+  // { level: 0, text: "" },
+  // { level: 0, text: "" },
 ]);
 const knowledge_level = ref<number>(0);
 const skill_level = ref<number>(0);
@@ -262,16 +273,16 @@ const savaForm = () => {
   behavio_inproveRef.value.validate();
 
   let hasError = false;
-  const filterlevel1_1 = evaluate_expenct_level.value.filter(
-    (e: any) => e.level == 0
-  );
-  const filter_ouptut1_2 = evaluate_ouptut.value.filter(
-    (e: any) => e.level == 0 || e.text == ""
-  );
+  // const filterlevel1_1 = evaluate_expenct_level.value.filter(
+  //   (e: any) => e.level == 0
+  // );
+  // const filter_ouptut1_2 = evaluate_ouptut.value.filter(
+  //   (e: any) => e.level == 0 || e.text == ""
+  // );
 
   if (
-    filterlevel1_1.length != 0 ||
-    filter_ouptut1_2.length != 0 ||
+    // filterlevel1_1.length != 0 ||
+    // filter_ouptut1_2.length != 0 ||
     knowledge_level.value === 0 ||
     skill_level.value === 0 ||
     competency_level.value === 0 ||
@@ -430,7 +441,7 @@ const saveformdata = async (data: any) => {
         <q-list dense v-for="(list, i) in list1_1" :key="i">
           <q-item dense tag="label" v-ripple>
             <q-item-section>
-              <q-item-label>{{ list.label }}</q-item-label>
+              <q-item-label>{{ list.output_desc }}</q-item-label>
             </q-item-section>
             <q-item-section side>
               <q-rating
@@ -478,7 +489,7 @@ const saveformdata = async (data: any) => {
         class="col-xs-12 col-sm-11 col-md-10 offset-md-1 q-pa-sm bg-grey-1"
       >
         <q-list dense v-for="(list, i) in list1_2" :key="i">
-          <q-item dense tag="label" v-ripple>
+          <q-item dense tag="label" v-ripple v-if="i < checkArray">
             <q-item-section>
               <!-- <q-item-label>{{ list.label }}</q-item-label> -->
               <q-input
@@ -488,7 +499,7 @@ const saveformdata = async (data: any) => {
                 class="col-xs-12 col-sm-11 col-md-10 offset-md-1"
                 lazy-rules
                 type="textarea"
-                label="ผลผลิตของงานที่เกิดขึ้นจริง"
+                :label="list.label"
                 hide-bottom-space
                 :row="1"
                 :rules="evaluate_ouptutRules"
@@ -522,7 +533,7 @@ const saveformdata = async (data: any) => {
               </q-rating>
             </q-item-section>
           </q-item>
-          <q-separator class="q-my-xs" v-if="i + 1 < list1_2.length" />
+          <!-- <q-separator class="q-my-xs" v-if="i + 1 < list1_2.length" /> -->
         </q-list>
       </q-card>
     </div>
@@ -1309,7 +1320,8 @@ const saveformdata = async (data: any) => {
     </div>
     <q-toolbar class="text-primary">
       <q-space />
-      <q-btn label="บันทึก" color="secondary" @click="savaForm" v-if="status" />
+      <q-btn label="บันทึก" color="secondary" @click="savaForm" />
+      <!-- v-if="status" -->
     </q-toolbar>
   </div>
 </template>

From bfdbc6198d6b7cb87a6dc18267fbf757a4b77da6 Mon Sep 17 00:00:00 2001
From: waruneeta <warunee.auy@gmail.com>
Date: Wed, 16 Aug 2023 14:34:23 +0700
Subject: [PATCH 112/113] =?UTF-8?q?update=20=E0=B8=97=E0=B8=94=E0=B8=A5?=
 =?UTF-8?q?=E0=B8=AD=E0=B8=87=E0=B8=87=E0=B8=B2=E0=B8=99?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../probation/FormEvaluation/FormReport.vue   |   6 +-
 .../FormEvaluation/FormSaveResult.vue         |   3 +-
 .../probation/FormEvaluation/Header.vue       |  64 +++------
 .../probation/FormEvaluation/Template1.vue    | 133 +++++++-----------
 4 files changed, 76 insertions(+), 130 deletions(-)

diff --git a/src/modules/05_placement/components/probation/FormEvaluation/FormReport.vue b/src/modules/05_placement/components/probation/FormEvaluation/FormReport.vue
index 440d88e8d..d8068dbeb 100644
--- a/src/modules/05_placement/components/probation/FormEvaluation/FormReport.vue
+++ b/src/modules/05_placement/components/probation/FormEvaluation/FormReport.vue
@@ -364,7 +364,8 @@ const postData = async () => {
 
         <div class="col-12 row q-mt-xs">
           <div class="col-12 text-top2 row items-center">
-            ความเห็นของผู้มีอำนาจสั่งบรรจุตามมาตรา 52
+            คณะกรรมการ
+            <!-- ความเห็นของผู้มีอำนาจสั่งบรรจุตามมาตรา 52 -->
           </div>
           <div class="col-12 row q-col-gutter-md">
             <q-select
@@ -422,7 +423,8 @@ const postData = async () => {
 
         <div class="col-12 row q-mt-xs">
           <div class="col-12 text-top2 row items-center">
-            ผู้มีอำนาจสั่งบรรจุตามมาตรา 52
+            คณะกรรมการ
+            <!-- ผู้มีอำนาจสั่งบรรจุตามมาตรา 52 -->
           </div>
           <div class="col-12 row q-col-gutter-md">
             <q-select
diff --git a/src/modules/05_placement/components/probation/FormEvaluation/FormSaveResult.vue b/src/modules/05_placement/components/probation/FormEvaluation/FormSaveResult.vue
index de36f904d..ef065ff74 100644
--- a/src/modules/05_placement/components/probation/FormEvaluation/FormSaveResult.vue
+++ b/src/modules/05_placement/components/probation/FormEvaluation/FormSaveResult.vue
@@ -38,7 +38,8 @@ const props = defineProps({
 });
 
 onMounted(async () => {
-  console.log(props.tab);
+  console.log("tab===>",props.tab)
+
   await fecthFormdata(assignId.value);
   if (props.tab !== undefined) {
     round.value = props.tab.charAt(4);
diff --git a/src/modules/05_placement/components/probation/FormEvaluation/Header.vue b/src/modules/05_placement/components/probation/FormEvaluation/Header.vue
index 05c1dcc30..fb3aeb8e0 100644
--- a/src/modules/05_placement/components/probation/FormEvaluation/Header.vue
+++ b/src/modules/05_placement/components/probation/FormEvaluation/Header.vue
@@ -3,9 +3,22 @@ import { ref, watch, onMounted } from "vue";
 import { useRoute, useRouter } from "vue-router";
 
 const router = useRouter();
+const route = useRoute();
+const assignId = ref<string>(route.params.form.toString());
+const personalId = ref<string>(route.params.personalId.toString());
+  
 
 const tabHead = ref<string>("save1");
 const props = defineProps({
+  loop: {
+    type: Number,
+  },
+  addData: {
+    type: Function,
+    default() {
+      return "Default function";
+    },
+  },
   changeTab: {
     type: Function,
     default() {
@@ -14,31 +27,19 @@ const props = defineProps({
   },
   activeTab: String,
 });
-onMounted(() => {
-  console.log(props);
-});
 
 watch(tabHead, () => {
-  console.log(props);
-
   props.changeTab(tabHead.value);
 });
 const nextPage = () => {
-  if (props.activeTab) {
-    router.push(
-      "/probation/detail/add/08db721d-ade4-480e-8d84-0853946a0ea5/f4ce5428-98b6-4425-88fe-24c29db9f885"
-    );
-  }
-
-  // const url =
-  //   "/probation/detail/add/08db721d-ade4-480e-8d84-0853946a0ea5/f4ce5428-98b6-4425-88fe-24c29db9f885";
-  // window.open(url, "_blank");
+  props.addData();
 };
 </script>
 
 <template>
   <q-header class="bg-grey-1">
     <div class="bg-grey-1">
+      |{{tabHead}}|
       <div class="col-12 row q-gutter-x-md items-center">
         <q-tabs
           dense
@@ -47,42 +48,15 @@ const nextPage = () => {
           indicator-color="grey-1"
           class="text-grey-7"
         >
-          <q-tab name="save1" label="ครั้งที่ 1" />
-          <q-btn
-            size="12px"
-            flat
-            dense
-            icon="mdi-download"
-            :disable="tabHead !== 'save1'"
-            :color="tabHead !== 'save1' ? '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>
 
-          <q-tab name="save2" label="ครั้งที่ 2" />
+        <q-tab v-for="i in loop" :name="`save${i}`" :label="`ครั้งที่ ${i}`">
           <q-btn
             size="12px"
             flat
             dense
             icon="mdi-download"
-            :disable="tabHead !== 'save2'"
-            :color="tabHead !== 'save2' ? 'grey' : 'add'"
+            :disable="tabHead !== 'save'+i"
+            :color="tabHead !== 'save'+i ? 'grey' : 'add'"
           >
             <q-tooltip>ดาวน์โหลด</q-tooltip>
             <q-menu>
@@ -102,6 +76,8 @@ const nextPage = () => {
               </q-list>
             </q-menu>
           </q-btn>
+</q-tab>
+
           <!-- <q-tab name="save3" label="ครั้งที่ 3" />
             <q-btn size="12px" flat dense icon="mdi-download" :disable="tab !== 'save3'"
                 :color="tab !== 'save3' ? 'grey' : 'add'">
diff --git a/src/modules/05_placement/components/probation/FormEvaluation/Template1.vue b/src/modules/05_placement/components/probation/FormEvaluation/Template1.vue
index d930a13b9..bda9a4009 100644
--- a/src/modules/05_placement/components/probation/FormEvaluation/Template1.vue
+++ b/src/modules/05_placement/components/probation/FormEvaluation/Template1.vue
@@ -1,16 +1,25 @@
 <script setup lang="ts">
-import { ref, defineAsyncComponent, watch, onMounted } from "vue";
+import { ref, defineAsyncComponent, watch, onMounted, onUpdated } from "vue";
 import { useCounterMixin } from "@/stores/mixin";
 import { useQuasar } from "quasar";
-import { useRoute } from "vue-router";
+import { useRoute, useRouter } from "vue-router";
+const Header = defineAsyncComponent(
+  () =>import("@/modules/05_placement/components/probation/FormEvaluation/Header.vue")
+);
+const FormSaveResult = defineAsyncComponent(
+  () => import( "@/modules/05_placement/components/probation/FormEvaluation/FormSaveResult.vue")
+);
+
 import http from "@/plugins/http";
 import config from "@/app.config";
 
+const router = useRouter();
 const route = useRoute();
 const $q = useQuasar();
 const mixin = useCounterMixin();
 const { showLoader, hideLoader, messageError, success } = mixin;
 const assignId = ref<string>(route.params.form.toString());
+const personalId = ref<string>(route.params.personalId.toString());
 
 const evaluate = ref<any>([]);
 const tabHead = ref<string>("save1");
@@ -18,98 +27,60 @@ const tabs = ref<any>([]);
 const tab = ref<string>("save1");
 const activeTab = ref<string>("tab2");
 
-const props = defineProps({
-  activeTab: String,
+onMounted(async () => {
+  await fecthAssign(assignId.value);
+  tab.value ='save1'
 });
-onMounted(() => {
-  console.log(props.activeTab);
-  // fecthAssign(assignId.value);
-});
-watch(props, () => {
-  console.log(props);
-});
-// const fecthAssign = async (id: string) => {
-//   showLoader();
-//   await http
-//     .get(config.API.formevaluate(id))
-//     .then((res: any) => {
-//       evaluate.value = res.data.data.evaluate;
-//       tabs.value = evaluate.value;
 
-//       console.log(tabs.value);
-//     })
-//     .catch((e: any) => {
-//       console.log(e);
-//       messageError($q, e);
-//     })
-//     .finally(() => {
-//       hideLoader();
-//     });
-// };
+const fecthAssign = async (id: string) => {
+  showLoader();
+  await http
+    .get(config.API.formevaluate(id))
+    .then((res: any) => {
+      evaluate.value = res.data.data.evaluate;
+      tabs.value = evaluate.value;
+      // console.log(tabs.value);
+    })
+    .catch((e: any) => {
+      console.log(e);
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+};
 
 const changeTab = (tabVal: string) => {
-  console.log(tabVal);
+  console.log("tabVal===>",tabVal);
   tab.value = tabVal;
 };
-const nextPage = () => {
-  const newTabLabel = tabs.value.length + 1;
-  tabs.value.push({ no: newTabLabel });
+const addData = () => {
+  router.push(
+      `/probation/detail/add/${personalId.value}/${assignId.value}`
+    );
 };
-
-const Header = defineAsyncComponent(
-  () =>
-    import(
-      "@/modules/05_placement/components/probation/FormEvaluation/Header.vue"
-    )
-);
-const FormSaveResult = defineAsyncComponent(
-  () =>
-    import(
-      "@/modules/05_placement/components/probation/FormEvaluation/FormSaveResult.vue"
-    )
-);
 </script>
 
 <template>
-  <Header :change-tab="changeTab" :activeTab="activeTab" />
+  <Header :change-tab="changeTab" :activeTab="activeTab" :add-data="addData" :loop="tabs.length"/>
   <!-- <q-header class="bg-grey-1">
     <div class="bg-grey-1">
       <div class="col-12 row q-gutter-xs-md items-center">
-        <q-tabs
-          dense
-          v-model="tabHead"
-          active-class="text-primary text-weight-medium"
-          indicator-color="grey-1"
-          class="text-grey-7"
-        >
-          <q-tab
-            v-for="tabData in tabs"
-            :key="tabData.no"
-            :name="tabData.no"
-            :label="'ครั้งที่' + tabData.no"
-            @click="changeTab('save' + tabData.no)"
-          >
-            <q-btn
-              size="12px"
-              flat
-              dense
-              icon="mdi-download"
-              :disable="tabHead !== tabData.no"
-              :color="tabHead !== tabData.no ? 'grey' : 'add'"
-            >
+        <q-tabs dense v-model="tabHead" active-class="text-primary text-weight-medium" indicator-color="grey-1"
+          class="text-grey-7">
+          <q-tab v-for="tabData in tabs" :key="tabData.no" :name="tabData.no" :label="'ครั้งที่' + tabData.no"
+            @click="changeTab('save' + tabData.no)">
+            <q-btn size="12px" flat dense icon="mdi-download" :disable="tabHead !== tabData.no"
+              :color="tabHead !== tabData.no ? '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 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 avatar><q-icon color="blue" name="mdi-file-word" /></q-item-section>
                     <q-item-section>ไฟล์ .docx</q-item-section>
                   </q-item>
                 </q-list>
@@ -126,19 +97,15 @@ const FormSaveResult = defineAsyncComponent(
       <q-separator />
     </div>
   </q-header> -->
-  <!-- <q-page-container>
+  <q-page-container>
     <q-tab-panels v-model="tab" animated>
-      <q-tab-panel
-        v-for="tabName in tabs"
-        :key="tabName"
-        :name="'save' + tabName.no"
-      >
+      <q-tab-panel v-for="tabName in tabs" :key="tabName" :name="'save' + tabName.no">
         <FormSaveResult :tab="tab" />
       </q-tab-panel>
     </q-tab-panels>
-  </q-page-container> -->
+  </q-page-container>
 
-  <q-page-container>
+  <!-- <q-page-container>
     <q-tab-panels v-model="tab" animated>
       <q-tab-panel name="save1">
         <FormSaveResult :tab="tab" />
@@ -148,5 +115,5 @@ const FormSaveResult = defineAsyncComponent(
         <FormSaveResult :tab="tab" />
       </q-tab-panel>
     </q-tab-panels>
-  </q-page-container>
+  </q-page-container> -->
 </template>

From df7364f7b8e56481bf195fdafc1370fca352a04a Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Wed, 16 Aug 2023 16:25:09 +0700
Subject: [PATCH 113/113] =?UTF-8?q?=E0=B9=81=E0=B8=81=E0=B9=89=E0=B9=84?=
 =?UTF-8?q?=E0=B8=82=20Form=20=E0=B8=97=E0=B8=94=E0=B8=A5=E0=B8=AD?=
 =?UTF-8?q?=E0=B8=87=E0=B8=87=E0=B8=B2=E0=B8=99?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../probation/FormEvaluation/FormEvaluate.vue |   23 +-
 .../FormEvaluation/FormEvaluateAdd.vue        | 1094 ++++++++++++
 .../FormEvaluation/FormEvaluateScore.vue      |   19 +-
 .../FormEvaluation/FormEvaluateScoreAdd.vue   | 1462 +++++++++++++++++
 .../FormEvaluation/FormSaveResult.vue         |   18 +-
 .../FormEvaluation/FormSaveResultAdd.vue      |   71 +-
 .../probation/FormEvaluation/Template1.vue    |    2 +-
 .../probation/FormEvaluation/Template2.vue    |   88 +-
 .../FormEvaluation/Template2Format2.vue       |   70 +-
 src/modules/05_placement/router.ts            |   41 +-
 10 files changed, 2810 insertions(+), 78 deletions(-)
 create mode 100644 src/modules/05_placement/components/probation/FormEvaluation/FormEvaluateAdd.vue
 create mode 100644 src/modules/05_placement/components/probation/FormEvaluation/FormEvaluateScoreAdd.vue

diff --git a/src/modules/05_placement/components/probation/FormEvaluation/FormEvaluate.vue b/src/modules/05_placement/components/probation/FormEvaluation/FormEvaluate.vue
index c9e40bc45..fad5971fd 100644
--- a/src/modules/05_placement/components/probation/FormEvaluation/FormEvaluate.vue
+++ b/src/modules/05_placement/components/probation/FormEvaluation/FormEvaluate.vue
@@ -82,11 +82,11 @@ const list2_3 = [
   },
 ];
 onMounted(async () => {
-  fecthAssign(assignId.value);
   if (props.tab !== undefined) {
     round.value = props.tab.charAt(4);
-    fetchEvaluate(assignId.value, round.value);
+    // fetchEvaluate(assignId.value, round.value);
   }
+  fecthAssign(assignId.value);
   // console.log(round.value);
   // console.log(assignId.value);
 });
@@ -94,8 +94,7 @@ const fecthAssign = async (id: string) => {
   showLoader();
   await http
     .get(config.API.evaluateCreate(id))
-    .then((res: any) => {
-      // console.log(res);
+    .then(async (res: any) => {
       person.value = res.data.data.person;
       assign.value = res.data.data.assign;
       commander.value = res.data.data.commander;
@@ -104,6 +103,11 @@ const fecthAssign = async (id: string) => {
       evaluate_no.value = res.data.data.evaluate_no;
       start_date.value = res.data.data.start_date;
       date_finish.value = res.data.data.end_date;
+      console.log(props.tab, res.data.data.evaluate_no);
+
+      if (res.data.data.evaluate_no > round.value) {
+        await fetchEvaluate(assignId.value, round.value);
+      }
     })
     .catch((e) => {
       messageError($q, e);
@@ -113,11 +117,11 @@ const fecthAssign = async (id: string) => {
     });
 };
 const fetchEvaluate = async (id: string, round: string) => {
-  // showLoader();
+  showLoader();
   await http
     .get(config.API.evaluatecommader(id, round))
     .then((res: any) => {
-      // console.log(res);
+      console.log(res);
       let data = res.data.data.evaluate;
       console.log(data);
       start_date.value = data.date_start;
@@ -165,11 +169,14 @@ const fetchEvaluate = async (id: string, round: string) => {
       status.value = false;
     })
     .catch((e) => {
-      messageError($q, e);
       console.log(e);
+
+      if (e.data.message !== "Data not found!") {
+        messageError($q, e);
+      }
     })
     .finally(() => {
-      // hideLoader();
+      hideLoader();
     });
 };
 
diff --git a/src/modules/05_placement/components/probation/FormEvaluation/FormEvaluateAdd.vue b/src/modules/05_placement/components/probation/FormEvaluation/FormEvaluateAdd.vue
new file mode 100644
index 000000000..ec8e93ca7
--- /dev/null
+++ b/src/modules/05_placement/components/probation/FormEvaluation/FormEvaluateAdd.vue
@@ -0,0 +1,1094 @@
+<script setup lang="ts">
+import { ref, defineAsyncComponent, onMounted } from "vue";
+import { useQuasar } from "quasar";
+import { useProbationDataStore } from "@/modules/05_placement/store";
+import { useCounterMixin } from "@/stores/mixin";
+import { useRoute, useRouter } from "vue-router";
+import http from "@/plugins/http";
+import config from "@/app.config";
+
+const $q = useQuasar();
+const probationStore = useProbationDataStore();
+const { ratingColors } = probationStore;
+const mixin = useCounterMixin();
+const {
+  date2Thai,
+  notifyError,
+  messageError,
+  showLoader,
+  hideLoader,
+  success,
+  dateToISO,
+} = mixin;
+const route = useRoute();
+const router = useRouter();
+const assignId = ref<string>(route.params.form.toString());
+
+const person = ref<any>([]);
+const assign = ref<any>([]);
+const evaluate_no = ref<string>("");
+const start_date = ref<Date>(new Date());
+const date_finish = ref<Date>(new Date());
+const commander = ref<any>([]);
+const round = ref<any>();
+const status = ref<boolean>(true);
+
+const props = defineProps({
+  tab: String,
+});
+
+const list2_1 = [
+  { id: "1", label: "ให้บริการประชาชนหรือผู้รับบริการด้วยอัธยาศัยดี" },
+  { id: "2", label: "มีความรับผิดชอบในการปฏิบัติบัติงาน" },
+  {
+    id: "3",
+    label:
+      "ให้บริการประชาชนหรือผู้รับบริการด้วยความรวดเร็ว เอาใจใส่เป็นมาตรฐานเดียวกัน",
+  },
+  {
+    id: "4",
+    label: "ตั้งใจปฏิบัติบัติหน้าที่ราชการด้วยความอุตสาหะ ขยันหมั่นเพียร",
+  },
+];
+const list2_2 = [
+  {
+    id: "1",
+    label: "อุทิศตนและเสียสละเวลาในการปฏิบัติบัติงานอย่างเต็มกำลังความสามารถ",
+  },
+  { id: "2", label: "มีจิตสำนึกที่ดี ปฏิบัติบัติงานด้วยความซื่อสัตย์ สุจริต" },
+  {
+    id: "3",
+    label:
+      "ยึดมั่นในสถาบันบัพระมหากษัตริย์ และไม่กระทำการใด ๆ อันจะก่อให้เกิดความเสียหายต่อประเทศชาติ",
+  },
+];
+const list2_3 = [
+  { id: "1", label: "มีความรับรัผิดชอบในการรักษาเวลาทำงาน" },
+  {
+    id: "2",
+    label: "แต่งกายในการปฏิบัติบัติงานได้อย่างเหมาะสมกับการเป็นข้าราชการ",
+  },
+  {
+    id: "3",
+    label: "ไม่กระทำการใด ๆ อันอาจก่อให้เกิดความเสียหายแก่ชื่อเสียงของหน่วยงาน",
+  },
+  {
+    id: "4",
+    label:
+      "ไม่กระทำการใด ๆ อันเป็นการเสื่อมเกียรติและศักดิ์ศรีของความเป็นข้าราชการ",
+  },
+  {
+    id: "5",
+    label: "ปฏิบัติบัติหน้าที่อย่างตรงไปตรงมาโดยยึกหลักจรรยาบรรณวิชาชีพ",
+  },
+];
+onMounted(async () => {
+  fecthAssign(assignId.value);
+});
+const fecthAssign = async (id: string) => {
+  showLoader();
+  await http
+    .get(config.API.evaluateCreate(id))
+    .then(async (res: any) => {
+      console.log(res);
+      person.value = res.data.data.person;
+      assign.value = res.data.data.assign;
+      commander.value = res.data.data.commander;
+      option.value.push(commander.value);
+      Autherise.value = commander.value.name;
+      evaluate_no.value = res.data.data.evaluate_no;
+      start_date.value = res.data.data.start_date;
+      date_finish.value = res.data.data.end_date;
+      round.value = res.data.data.evaluate_no
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+};
+const Autherise = ref<any>(null);
+const dateAutherise = ref<any>(new Date());
+const option = ref<any>([]);
+
+// part 1
+const knowledge_level = ref<number>(0);
+const skill_level = ref<number>(0);
+const competency_level = ref<number>(0);
+const learn_level = ref<number>(0);
+const apply_level = ref<number>(0);
+const success_level = ref<number>(0);
+const etc = ref<any>(false);
+const achievement_other = ref<any>({ text: "", level: 0 });
+// part 2
+const conduct_level = ref<any>([]);
+const moral_level = ref<any>([]);
+const discipline_level = ref<any>([]);
+const etc2 = ref<any>(false); // checkBox 2.4
+const behavio_orther = ref<any>({ text: "", level: 0 });
+const behavio_strength_desc = ref<string>("");
+const behavior_improve_desc = ref<string>("");
+// part 3
+const orientation = ref<any>(null);
+const self_learning = ref<any>(null);
+const training_seminar = ref<any>(null);
+const other_training = ref<any>(null);
+//rules
+const behavio_strengthRef = ref<any>(null);
+const behavio_strengthRules = [
+  (val: any) => (val && val.length > 0) || "กรุณากรอกข้อมูลจุดเด่น",
+];
+const behavio_inproveRef = ref<any>(null);
+const behavio_inproveRules = [
+  (val: any) => (val && val.length > 0) || "กรุณากรอกข้อมูลสิ่งที่ควรปรับปรุง",
+];
+
+const savaForm = () => {
+  let hasError = false;
+  behavio_strengthRef.value.validate();
+  behavio_inproveRef.value.validate();
+  if (
+    knowledge_level.value === 0 ||
+    skill_level.value === 0 ||
+    competency_level.value === 0 ||
+    learn_level.value === 0 ||
+    apply_level.value === 0 ||
+    success_level.value === 0 ||
+    conduct_level.value.length < 4 ||
+    moral_level.value.length < 3 ||
+    discipline_level.value.length < 5 ||
+    behavio_strength_desc.value === "" ||
+    behavior_improve_desc.value === "" ||
+    orientation.value === null ||
+    self_learning.value === null ||
+    training_seminar.value === null
+  ) {
+    hasError = true;
+  } else if (
+    (etc.value == true &&
+      (achievement_other.value.text === undefined ||
+        achievement_other.value.text == "" ||
+        achievement_other.value.level == undefined ||
+        achievement_other.value.level === 0)) ||
+    (etc2.value == true &&
+      (behavio_orther.value.text === undefined ||
+        behavio_orther.value.text == "" ||
+        behavio_orther.value.level === undefined ||
+        behavio_orther.value.level == 0))
+  ) {
+    hasError = true;
+  } else putformData();
+
+  if (hasError === true) {
+    notifyError($q, "กรุณากรอกข้อมูลให้ครบ");
+  }
+};
+const putformData = () => {
+  const data = {
+    evaluate_no: evaluate_no.value,
+    start_date: start_date.value,
+    date_finish: date_finish.value,
+    knowledge_level: knowledge_level.value,
+    skill_level: skill_level.value,
+    competency_level: competency_level.value,
+    learn_level: learn_level.value,
+    apply_level: apply_level.value,
+    success_level: success_level.value,
+    achievement_other: achievement_other.value,
+    conduct1_level: conduct_level.value[0],
+    conduct2_level: conduct_level.value[1],
+    conduct3_level: conduct_level.value[2],
+    conduct4_level: conduct_level.value[3],
+    moral1_level: moral_level.value[0],
+    moral2_level: moral_level.value[1],
+    moral3_level: moral_level.value[2],
+    discipline1_level: discipline_level.value[0],
+    discipline2_level: discipline_level.value[1],
+    discipline3_level: discipline_level.value[2],
+    discipline4_level: discipline_level.value[3],
+    discipline5_level: discipline_level.value[4],
+    behavior_orther: behavio_orther.value,
+    behavior_strength_desc: behavio_strength_desc.value,
+    behavior_improve_desc: behavior_improve_desc.value,
+    orientation: Number(orientation.value),
+    self_learning: Number(self_learning.value),
+    training_seminar: Number(training_seminar.value),
+    other_training: Number(other_training.value),
+    commander_dated: dateToISO(dateAutherise.value),
+  };
+  $q.dialog({
+    title: "ยืนยันการบันทึกข้อมูล",
+    message: "ต้องการบันทึกข้อมูลนี้ใช่หรือไม่ ?",
+    cancel: {
+      flat: true,
+      color: "negative",
+    },
+    persistent: true,
+  })
+    .onOk(async () => {
+      console.log("บันทึกข้อมูล", data);
+      await http
+        .post(config.API.createformCommader(assignId.value), data)
+        .then((res: any) => {
+          console.log(res);
+          success($q, "บันทึกสำเร็จ");
+        })
+        .catch((e: any) => {
+          messageError($q, e);
+        });
+    })
+    .onCancel(() => {})
+    .onDismiss(() => {});
+};
+</script>
+
+<template>
+  <q-card class="my-card" flat bordered>
+    <q-item>
+      <q-item-section>
+        <q-toolbar>
+          <div
+            class="text-h6 text-weight-medium text-dark col-12 row items-center q-py-md"
+          >
+            <q-btn
+              icon="mdi-arrow-left"
+              unelevated
+              round
+              dense
+              flat
+              color="primary"
+              class="q-mr-sm"
+              @click="router.go(-1)"
+            />
+            การทดลองปฏิบัติหน้าที่ราชการของ {{ person.name }}
+          </div>
+        </q-toolbar>
+      </q-item-section>
+    </q-item>
+    <q-separator />
+    <q-card-section>
+      <q-separator vertical />
+      <q-card-section class="col-4">
+        <div class="row col-12 q-gutter-lg no-margin">
+          <div class="toptitle text-dark col-12 row items-center">
+            <div>แบบประเมินผล (ผู้บังคับบัญชา)</div>
+          </div>
+          <div class="col-12 row">
+            <div class="col-12 text-top0 row items-center">
+              <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
+              วันเริ่มทดลองปฎิบัติหน้าที่ราชการ ตั้งแต่วันที่
+              <span class="text-black q-px-sm">{{
+                date2Thai(assign.date_start)
+              }}</span>
+              ถึงวันที
+              <span class="text-black q-px-sm">{{
+                date2Thai(assign.date_finish)
+              }}</span>
+            </div>
+            <div class="col-12 text-top0 row items-center">
+              <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
+              <span class="text-black q-px-sm">{{ "ครั้งที่" + round }}</span>
+              ระหว่างวันที่
+              <span class="text-black q-px-sm">{{
+                date2Thai(start_date)
+              }}</span>
+              ถึงวันที่
+              <span class="text-black q-px-sm">{{
+                date2Thai(date_finish)
+              }}</span>
+            </div>
+            <div class="col-12 q-pt-md">
+              <q-separator size="3px" color="grey-2" />
+            </div>
+          </div>
+
+          <div class="col-12 row">
+            <div class="col-12 text-top0 items-center">
+              <q-avatar class="bg-grey-2 q-mr-sm" size="28px">1</q-avatar>
+              ผลสัมฤทธิ์ของการทดลองปฏิบัติบัติหน้าที่ราชการ
+            </div>
+          </div>
+          <div class="col-12 row no-margin">
+            <q-card class="text-top0 col-12 q-pa-sm q-pl-lg">
+              <q-list dense>
+                <q-item dense tag="label" v-ripple>
+                  <q-item-section>
+                    <q-item-label>
+                      <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
+                      1.1. ความรู้ความสามารถ</q-item-label
+                    >
+                  </q-item-section>
+                  <q-item-section side>
+                    <q-rating
+                      v-model="knowledge_level"
+                      max="5"
+                      size="sm"
+                      color="grey"
+                      :color-selected="ratingColors"
+                      label="ระดับการประเมินพฤติกรรม"
+                    >
+                      <template v-slot:tip-1>
+                        <q-tooltip>ต่ำกว่าความคาดหวังมาก</q-tooltip>
+                      </template>
+                      <template v-slot:tip-2>
+                        <q-tooltip>ต่ำกว่าความคาดหวังค่อนข้างมาก</q-tooltip>
+                      </template>
+                      <template v-slot:tip-3>
+                        <q-tooltip>เป็นไปตามความคาดหวัง</q-tooltip>
+                      </template>
+                      <template v-slot:tip-4>
+                        <q-tooltip>สูงว่าความคาดหวังค่อนข้างมาก</q-tooltip>
+                      </template>
+                      <template v-slot:tip-5>
+                        <q-tooltip>สูงกว่าความคาดหวังมาก</q-tooltip>
+                      </template>
+                    </q-rating>
+                  </q-item-section>
+                </q-item>
+              </q-list>
+            </q-card>
+
+            <q-card class="text-top0 col-12 q-pa-sm q-pl-lg">
+              <q-list dense>
+                <q-item dense tag="label" v-ripple>
+                  <q-item-section>
+                    <q-item-label>
+                      <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
+                      1.2. ทักษะ</q-item-label
+                    >
+                  </q-item-section>
+                  <q-item-section side>
+                    <q-rating
+                      v-model="skill_level"
+                      max="5"
+                      size="sm"
+                      color="grey"
+                      :color-selected="ratingColors"
+                      label="ระดับการประเมินพฤติกรรม"
+                    >
+                      <template v-slot:tip-1>
+                        <q-tooltip>ต่ำกว่าความคาดหวังมาก</q-tooltip>
+                      </template>
+                      <template v-slot:tip-2>
+                        <q-tooltip>ต่ำกว่าความคาดหวังค่อนข้างมาก</q-tooltip>
+                      </template>
+                      <template v-slot:tip-3>
+                        <q-tooltip>เป็นไปตามความคาดหวัง</q-tooltip>
+                      </template>
+                      <template v-slot:tip-4>
+                        <q-tooltip>สูงว่าความคาดหวังค่อนข้างมาก</q-tooltip>
+                      </template>
+                      <template v-slot:tip-5>
+                        <q-tooltip>สูงกว่าความคาดหวังมาก</q-tooltip>
+                      </template>
+                    </q-rating>
+                  </q-item-section>
+                </q-item>
+              </q-list>
+            </q-card>
+
+            <q-card class="text-top0 col-12 q-pa-sm q-pl-lg">
+              <q-list dense>
+                <q-item dense tag="label" v-ripple>
+                  <q-item-section>
+                    <q-item-label>
+                      <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
+                      1.3. สมมรถนะ</q-item-label
+                    >
+                  </q-item-section>
+                  <q-item-section side>
+                    <q-rating
+                      v-model="competency_level"
+                      max="5"
+                      size="sm"
+                      color="grey"
+                      :color-selected="ratingColors"
+                      label="ระดับการประเมินพฤติกรรม"
+                    >
+                      <template v-slot:tip-1>
+                        <q-tooltip>ต่ำกว่าความคาดหวังมาก</q-tooltip>
+                      </template>
+                      <template v-slot:tip-2>
+                        <q-tooltip>ต่ำกว่าความคาดหวังค่อนข้างมาก</q-tooltip>
+                      </template>
+                      <template v-slot:tip-3>
+                        <q-tooltip>เป็นไปตามความคาดหวัง</q-tooltip>
+                      </template>
+                      <template v-slot:tip-4>
+                        <q-tooltip>สูงว่าความคาดหวังค่อนข้างมาก</q-tooltip>
+                      </template>
+                      <template v-slot:tip-5>
+                        <q-tooltip>สูงกว่าความคาดหวังมาก</q-tooltip>
+                      </template>
+                    </q-rating>
+                  </q-item-section>
+                </q-item>
+              </q-list>
+            </q-card>
+
+            <q-card class="text-top0 col-12 q-pa-sm q-pl-lg">
+              <q-list dense>
+                <q-item dense tag="label" v-ripple>
+                  <q-item-section>
+                    <q-item-label>
+                      <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
+                      1.4. ความสามารถในการเรียนรู้งาน</q-item-label
+                    >
+                  </q-item-section>
+                  <q-item-section side>
+                    <q-rating
+                      v-model="learn_level"
+                      max="5"
+                      size="sm"
+                      color="grey"
+                      :color-selected="ratingColors"
+                      label="ระดับการประเมินพฤติกรรม"
+                    >
+                      <template v-slot:tip-1>
+                        <q-tooltip>ต่ำกว่าความคาดหวังมาก</q-tooltip>
+                      </template>
+                      <template v-slot:tip-2>
+                        <q-tooltip>ต่ำกว่าความคาดหวังค่อนข้างมาก</q-tooltip>
+                      </template>
+                      <template v-slot:tip-3>
+                        <q-tooltip>เป็นไปตามความคาดหวัง</q-tooltip>
+                      </template>
+                      <template v-slot:tip-4>
+                        <q-tooltip>สูงว่าความคาดหวังค่อนข้างมาก</q-tooltip>
+                      </template>
+                      <template v-slot:tip-5>
+                        <q-tooltip>สูงกว่าความคาดหวังมาก</q-tooltip>
+                      </template>
+                    </q-rating>
+                  </q-item-section>
+                </q-item>
+              </q-list>
+            </q-card>
+
+            <q-card class="text-top0 col-12 q-pa-sm q-pl-lg">
+              <q-list dense>
+                <q-item dense tag="label" v-ripple>
+                  <q-item-section>
+                    <q-item-label>
+                      <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
+                      1.5.
+                      ความสามารถในการปรับใช้ความรู้กับงานในหน้าที่</q-item-label
+                    >
+                  </q-item-section>
+                  <q-item-section side>
+                    <q-rating
+                      v-model="apply_level"
+                      max="5"
+                      size="sm"
+                      color="grey"
+                      :color-selected="ratingColors"
+                      label="ระดับการประเมินพฤติกรรม"
+                    >
+                      <template v-slot:tip-1>
+                        <q-tooltip>ต่ำกว่าความคาดหวังมาก</q-tooltip>
+                      </template>
+                      <template v-slot:tip-2>
+                        <q-tooltip>ต่ำกว่าความคาดหวังค่อนข้างมาก</q-tooltip>
+                      </template>
+                      <template v-slot:tip-3>
+                        <q-tooltip>เป็นไปตามความคาดหวัง</q-tooltip>
+                      </template>
+                      <template v-slot:tip-4>
+                        <q-tooltip>สูงว่าความคาดหวังค่อนข้างมาก</q-tooltip>
+                      </template>
+                      <template v-slot:tip-5>
+                        <q-tooltip>สูงกว่าความคาดหวังมาก</q-tooltip>
+                      </template>
+                    </q-rating>
+                  </q-item-section>
+                </q-item>
+              </q-list>
+            </q-card>
+
+            <q-card class="text-top0 col-12 q-pa-sm q-pl-lg">
+              <q-list dense>
+                <q-item dense tag="label" v-ripple>
+                  <q-item-section>
+                    <q-item-label>
+                      <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
+                      1.6. ความสำเร็จของงานที่ได้รับมอบหมาย</q-item-label
+                    >
+                  </q-item-section>
+                  <q-item-section side>
+                    <q-rating
+                      v-model="success_level"
+                      max="5"
+                      size="sm"
+                      color="grey"
+                      :color-selected="ratingColors"
+                      label="ระดับการประเมินพฤติกรรม"
+                    >
+                      <template v-slot:tip-1>
+                        <q-tooltip>ต่ำกว่าความคาดหวังมาก</q-tooltip>
+                      </template>
+                      <template v-slot:tip-2>
+                        <q-tooltip>ต่ำกว่าความคาดหวังค่อนข้างมาก</q-tooltip>
+                      </template>
+                      <template v-slot:tip-3>
+                        <q-tooltip>เป็นไปตามความคาดหวัง</q-tooltip>
+                      </template>
+                      <template v-slot:tip-4>
+                        <q-tooltip>สูงว่าความคาดหวังค่อนข้างมาก</q-tooltip>
+                      </template>
+                      <template v-slot:tip-5>
+                        <q-tooltip>สูงกว่าความคาดหวังมาก</q-tooltip>
+                      </template>
+                    </q-rating>
+                  </q-item-section>
+                </q-item>
+              </q-list>
+            </q-card>
+
+            <q-card class="text-top0 col-12 q-pa-sm q-pl-lg">
+              <q-list dense>
+                <q-item dense tag="label" v-ripple>
+                  <q-item-section>
+                    <q-item-label>
+                      <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
+                      1.7 อื่นๆ
+                      <q-checkbox
+                        class="q-ml-sm"
+                        dense
+                        v-model="etc"
+                        @click="
+                          (achievement_other.text = ''),
+                            (achievement_other.level = 0)
+                        "
+                    /></q-item-label>
+                  </q-item-section>
+                </q-item>
+              </q-list>
+            </q-card>
+
+            <q-card v-if="etc" class="text-top0 col-12 q-pa-sm q-pl-lg">
+              <q-list dense>
+                <q-item dense tag="label" v-ripple>
+                  <q-item-section class="q-ml-md">
+                    <q-item-label>
+                      <q-input
+                        v-model="achievement_other.text"
+                        label="กรอกอื่นๆ"
+                        dense
+                        lazy-rules
+                        autogrow
+                        hide-bottom-space
+                        outlined
+                        class="bg-white"
+                        :rules="[
+                          (val) =>
+                            (val && val.length > 0) || 'กรุณากรอกข้อความ',
+                        ]"
+                      />
+                    </q-item-label>
+                  </q-item-section>
+                  <q-item-section side>
+                    <q-rating
+                      v-model="achievement_other.level"
+                      max="5"
+                      size="sm"
+                      color="grey"
+                      :color-selected="ratingColors"
+                      label="ระดับการประเมินพฤติกรรม"
+                    >
+                      <template v-slot:tip-1>
+                        <q-tooltip>ต่ำกว่าความคาดหวังมาก</q-tooltip>
+                      </template>
+                      <template v-slot:tip-2>
+                        <q-tooltip>ต่ำกว่าความคาดหวังค่อนข้างมาก</q-tooltip>
+                      </template>
+                      <template v-slot:tip-3>
+                        <q-tooltip>เป็นไปตามความคาดหวัง</q-tooltip>
+                      </template>
+                      <template v-slot:tip-4>
+                        <q-tooltip>สูงว่าความคาดหวังค่อนข้างมาก</q-tooltip>
+                      </template>
+                      <template v-slot:tip-5>
+                        <q-tooltip>สูงกว่าความคาดหวังมาก</q-tooltip>
+                      </template>
+                    </q-rating>
+                  </q-item-section>
+                </q-item>
+              </q-list>
+            </q-card>
+          </div>
+
+          <!-- Part 2 -->
+          <!-- <Part2 /> -->
+          <div class="row col-12 q-gutter-lg no-margin">
+            <div class="col-12 row">
+              <div class="col-12 text-top0 items-center">
+                <q-avatar class="bg-grey-2 q-mr-sm" size="28px">2</q-avatar>
+                พฤติกรรมของผู้ทดลองปฏิบัติบัติหน้าที่ราชการ
+              </div>
+              <div class="col-12 text-top0 row items-center q-pl-lg">
+                <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
+                2.1 ความประพฤติ
+              </div>
+              <q-card
+                flat
+                bordered
+                class="col-xs-12 col-sm-11 col-md-10 offset-md-1 q-pa-sm bg-grey-1"
+              >
+                <q-list dense v-for="(list, i) in list2_1" :key="i">
+                  <q-item dense tag="label" v-ripple>
+                    <q-item-section>
+                      <q-item-label>{{ list.label }}</q-item-label>
+                    </q-item-section>
+                    <q-item-section side>
+                      <q-rating
+                        v-model="conduct_level[i]"
+                        :val="list.id"
+                        max="5"
+                        size="sm"
+                        color="grey"
+                        :color-selected="ratingColors"
+                        label="ระดับการประเมินพฤติกรรม"
+                      >
+                        <template v-slot:tip-1>
+                          <q-tooltip>ต่ำกว่าความคาดหวังมาก</q-tooltip>
+                        </template>
+                        <template v-slot:tip-2>
+                          <q-tooltip>ต่ำกว่าความคาดหวังค่อนข้างมาก</q-tooltip>
+                        </template>
+                        <template v-slot:tip-3>
+                          <q-tooltip>เป็นไปตามความคาดหวัง</q-tooltip>
+                        </template>
+                        <template v-slot:tip-4>
+                          <q-tooltip>สูงว่าความคาดหวังค่อนข้างมาก</q-tooltip>
+                        </template>
+                        <template v-slot:tip-5>
+                          <q-tooltip>สูงกว่าความคาดหวังมาก</q-tooltip>
+                        </template>
+                      </q-rating>
+                    </q-item-section>
+                  </q-item>
+                  <q-separator class="q-my-xs" v-if="i + 1 < list2_1.length" />
+                </q-list>
+              </q-card>
+            </div>
+            <div class="col-12 row">
+              <div class="col-12 text-top0 row items-center q-pl-lg">
+                <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
+                2.2 ความมีคุณธรรมจริยธรรม
+              </div>
+              <q-card
+                flat
+                bordered
+                class="col-xs-12 col-sm-11 col-md-10 offset-md-1 q-pa-sm bg-grey-1"
+              >
+                <q-list dense v-for="(list, i) in list2_2" :key="i">
+                  <q-item dense tag="label" v-ripple>
+                    <q-item-section>
+                      <q-item-label>{{ list.label }}</q-item-label>
+                    </q-item-section>
+                    <q-item-section side>
+                      <q-rating
+                        v-model="moral_level[i]"
+                        :val="list.id"
+                        max="5"
+                        size="sm"
+                        color="grey"
+                        :color-selected="ratingColors"
+                        label="ระดับการประเมินพฤติกรรม"
+                      >
+                        <template v-slot:tip-1>
+                          <q-tooltip>ต่ำกว่าความคาดหวังมาก</q-tooltip>
+                        </template>
+                        <template v-slot:tip-2>
+                          <q-tooltip>ต่ำกว่าความคาดหวังค่อนข้างมาก</q-tooltip>
+                        </template>
+                        <template v-slot:tip-3>
+                          <q-tooltip>เป็นไปตามความคาดหวัง</q-tooltip>
+                        </template>
+                        <template v-slot:tip-4>
+                          <q-tooltip>สูงว่าความคาดหวังค่อนข้างมาก</q-tooltip>
+                        </template>
+                        <template v-slot:tip-5>
+                          <q-tooltip>สูงกว่าความคาดหวังมาก</q-tooltip>
+                        </template>
+                      </q-rating>
+                    </q-item-section>
+                  </q-item>
+                  <q-separator class="q-my-xs" v-if="i + 1 < list2_2.length" />
+                </q-list>
+              </q-card>
+            </div>
+            <div class="col-12 row">
+              <div class="col-12 text-top0 row items-center q-pl-lg">
+                <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
+                2.3 การรักษาวินัย
+              </div>
+              <q-card
+                flat
+                bordered
+                class="col-xs-12 col-sm-11 col-md-10 offset-md-1 q-pa-sm bg-grey-1"
+              >
+                <q-list dense v-for="(list, i) in list2_3" :key="i">
+                  <q-item dense tag="label" v-ripple>
+                    <q-item-section>
+                      <q-item-label>{{ list.label }}</q-item-label>
+                    </q-item-section>
+                    <q-item-section side>
+                      <q-rating
+                        v-model="discipline_level[i]"
+                        :val="list.id"
+                        max="5"
+                        size="sm"
+                        color="grey"
+                        :color-selected="ratingColors"
+                        label="ระดับการประเมินพฤติกรรม"
+                      >
+                        <template v-slot:tip-1>
+                          <q-tooltip>ต่ำกว่าความคาดหวังมาก</q-tooltip>
+                        </template>
+                        <template v-slot:tip-2>
+                          <q-tooltip>ต่ำกว่าความคาดหวังค่อนข้างมาก</q-tooltip>
+                        </template>
+                        <template v-slot:tip-3>
+                          <q-tooltip>เป็นไปตามความคาดหวัง</q-tooltip>
+                        </template>
+                        <template v-slot:tip-4>
+                          <q-tooltip>สูงว่าความคาดหวังค่อนข้างมาก</q-tooltip>
+                        </template>
+                        <template v-slot:tip-5>
+                          <q-tooltip>สูงกว่าความคาดหวังมาก</q-tooltip>
+                        </template>
+                      </q-rating>
+                    </q-item-section>
+                  </q-item>
+                  <q-separator class="q-my-xs" v-if="i + 1 < list2_3.length" />
+                </q-list>
+              </q-card>
+            </div>
+            <div class="col-12 row">
+              <div class="col-12 text-top0 row items-center q-pl-lg">
+                <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
+                2.4 อื่นๆ
+                <q-checkbox
+                  class="q-ml-sm"
+                  dense
+                  v-model="etc2"
+                  @click="
+                    (behavio_orther.text = ''), (behavio_orther.level = 0)
+                  "
+                />
+              </div>
+              <q-card
+                v-if="etc2"
+                flat
+                bordered
+                class="col-xs-12 col-sm-11 col-md-10 offset-md-1 q-pa-sm bg-grey-1"
+              >
+                <q-list dense>
+                  <q-item dense tag="label" v-ripple>
+                    <q-item-section>
+                      <q-item-label>
+                        <q-input
+                          v-model="behavio_orther.text"
+                          label="กรอกอื่นๆ"
+                          dense
+                          lazy-rules
+                          autogrow
+                          hide-bottom-space
+                          outlined
+                          class="bg-white"
+                          :rules="[
+                            (val) =>
+                              (val && val.length > 0) || 'กรุณากรอกข้อความ',
+                          ]"
+                        />
+                      </q-item-label>
+                    </q-item-section>
+                    <q-item-section side>
+                      <q-rating
+                        v-model="behavio_orther.level"
+                        max="5"
+                        size="sm"
+                        color="grey"
+                        :color-selected="ratingColors"
+                        label="ระดับการประเมินพฤติกรรม"
+                      >
+                        <template v-slot:tip-1>
+                          <q-tooltip>ต่ำกว่าความคาดหวังมาก</q-tooltip>
+                        </template>
+                        <template v-slot:tip-2>
+                          <q-tooltip>ต่ำกว่าความคาดหวังค่อนข้างมาก</q-tooltip>
+                        </template>
+                        <template v-slot:tip-3>
+                          <q-tooltip>เป็นไปตามความคาดหวัง</q-tooltip>
+                        </template>
+                        <template v-slot:tip-4>
+                          <q-tooltip>สูงว่าความคาดหวังค่อนข้างมาก</q-tooltip>
+                        </template>
+                        <template v-slot:tip-5>
+                          <q-tooltip>สูงกว่าความคาดหวังมาก</q-tooltip>
+                        </template>
+                      </q-rating>
+                    </q-item-section>
+                  </q-item>
+                </q-list>
+              </q-card>
+            </div>
+            <!-- <FormComment /> -->
+            <div class="row col-12 q-gutter-lg no-margin">
+              <div class="col-12 row">
+                <div class="col-12 text-top0 row items-center q-pl-lg">
+                  <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
+                  จุดเด่น (ไม่เกิน 5 บรรทัด)
+                </div>
+                <q-input
+                  outlined
+                  dense
+                  v-model="behavio_strength_desc"
+                  class="col-xs-12 col-sm-11 col-md-10 offset-md-1"
+                  lazy-rules
+                  type="textarea"
+                  label="กรอกจุดเด่น"
+                  hide-bottom-space
+                  :row="5"
+                  :rules="behavio_strengthRules"
+                  ref="behavio_strengthRef"
+                />
+              </div>
+              <div class="col-12 row">
+                <div class="col-12 text-top0 row items-center q-pl-lg">
+                  <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
+                  สิ่งที่ควรปรับปรุง (ไม่เกิน 5 บรรทัด)
+                </div>
+                <q-input
+                  outlined
+                  dense
+                  v-model="behavior_improve_desc"
+                  class="col-xs-12 col-sm-11 col-md-10 offset-md-1"
+                  lazy-rules
+                  type="textarea"
+                  hide-bottom-space
+                  label="กรอกสิ่งที่ควรปรับปรุง"
+                  :row="5"
+                  :rules="behavio_inproveRules"
+                  ref="behavio_inproveRef"
+                />
+              </div>
+            </div>
+          </div>
+
+          <!-- Part 3 -->
+          <!-- <Part3 /> -->
+          <div class="row col-12 q-gutter-lg no-margin">
+            <div class="col-12 row justify-center">
+              <div class="col-12 text-top0 items-center">
+                <q-avatar class="bg-grey-2 q-mr-sm" size="28px">3</q-avatar>
+                การพัฒนาผู้ทดลองปฏิบัติบัติหน้าที่ราชการ
+              </div>
+              <q-card
+                flat
+                bordered
+                class="col-xs-12 col-sm-11 col-md-11 q-pa-sm bg-grey-1"
+              >
+                <q-list dense>
+                  <q-item dense tag="label" v-ripple>
+                    <q-item-section>
+                      <q-item-label>1. การปฐมนิเทศ</q-item-label>
+                    </q-item-section>
+                    <q-item-section side>
+                      <div class="row">
+                        <q-radio
+                          checked-icon="task_alt"
+                          unchecked-icon="panorama_fish_eye"
+                          v-model="orientation"
+                          val="1"
+                          label="ดำเนินการเเล้ว"
+                        />
+                        <q-radio
+                          checked-icon="task_alt"
+                          unchecked-icon="panorama_fish_eye"
+                          v-model="orientation"
+                          val="0"
+                          label=" ยังไม่ได้ดำเนินการ"
+                        />
+                      </div>
+                    </q-item-section>
+                  </q-item>
+                  <q-separator class="q-my-xs" />
+                  <q-item dense tag="label" v-ripple>
+                    <q-item-section>
+                      <q-item-label>2. การเรียนรู้ด้วยตนเอง</q-item-label>
+                    </q-item-section>
+                    <q-item-section side>
+                      <div class="row">
+                        <q-radio
+                          checked-icon="task_alt"
+                          unchecked-icon="panorama_fish_eye"
+                          v-model="self_learning"
+                          val="1"
+                          label="ดำเนินการเเล้ว"
+                        />
+                        <q-radio
+                          checked-icon="task_alt"
+                          unchecked-icon="panorama_fish_eye"
+                          v-model="self_learning"
+                          val="0"
+                          label=" ยังไม่ได้ดำเนินการ"
+                        />
+                      </div>
+                    </q-item-section>
+                  </q-item>
+                  <q-separator class="q-my-xs" />
+                  <q-item dense tag="label" v-ripple>
+                    <q-item-section>
+                      <q-item-label>3. การอบรมสัมนาร่วมกัน</q-item-label>
+                    </q-item-section>
+                    <q-item-section side>
+                      <div class="row">
+                        <q-radio
+                          checked-icon="task_alt"
+                          unchecked-icon="panorama_fish_eye"
+                          v-model="training_seminar"
+                          val="1"
+                          label="ดำเนินการเเล้ว"
+                        />
+                        <q-radio
+                          checked-icon="task_alt"
+                          unchecked-icon="panorama_fish_eye"
+                          v-model="training_seminar"
+                          val="0"
+                          label=" ยังไม่ได้ดำเนินการ"
+                        />
+                      </div>
+                    </q-item-section>
+                  </q-item>
+                  <q-separator class="q-my-xs" />
+                  <q-item dense tag="label" v-ripple>
+                    <q-item-section>
+                      <q-item-label
+                        >4. การอบรมอื่น ๆ ตามที่หน่วยงานกำหนด
+                        (ถ้ามี)</q-item-label
+                      >
+                    </q-item-section>
+                    <q-item-section side>
+                      <div class="row">
+                        <q-radio
+                          checked-icon="task_alt"
+                          unchecked-icon="panorama_fish_eye"
+                          v-model="other_training"
+                          val="1"
+                          label="ดำเนินการเเล้ว"
+                        />
+                        <q-radio
+                          checked-icon="task_alt"
+                          unchecked-icon="panorama_fish_eye"
+                          v-model="other_training"
+                          val="0"
+                          label=" ยังไม่ได้ดำเนินการ"
+                        />
+                      </div>
+                    </q-item-section>
+                  </q-item>
+                </q-list>
+              </q-card>
+            </div>
+          </div>
+
+          <!-- Footer -->
+          <div class="row col-12 q-gutter-lg no-margin">
+            <div class="col-12 row">
+              <div class="col-12 text-top2 row items-center">
+                ผู้บังคับบัญชา
+              </div>
+              <div class="col-12 row q-col-gutter-md">
+                <q-select
+                  class="col-xs-12 col-sm-8"
+                  dense
+                  v-model="Autherise"
+                  outlined
+                  :options="option"
+                  label="ผู้บังคับบัญชา"
+                  disable
+                />
+                <div class="col-xs-12 col-sm-4">
+                  <datepicker
+                    menu-class-name="modalfix"
+                    v-model="dateAutherise"
+                    :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 col-3"
+                        :model-value="
+                          dateAutherise != null
+                            ? date2Thai(dateAutherise)
+                            : 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>
+            </div>
+          </div>
+          <!-- <Footer /> -->
+          <q-toolbar class="text-primary">
+            <q-space />
+            <q-btn
+              label="บันทึก"
+              color="secondary"
+              @click="savaForm"
+              v-if="status"
+            />
+          </q-toolbar>
+        </div>
+      </q-card-section>
+    </q-card-section>
+  </q-card>
+</template>
+
+<style lang="scss" scoped>
+.text-top2 {
+  font-weight: 500;
+  padding-bottom: 8px;
+  color: rgb(70, 68, 68);
+}
+
+.text-top0 {
+  font-weight: 600;
+  padding-bottom: 8px;
+  color: rgb(70, 68, 68);
+}
+
+.q-rating__icon {
+  text-shadow: transparent !important;
+}
+
+.q-card {
+  box-shadow: 0px 0px 0px 0px !important;
+}
+</style>
diff --git a/src/modules/05_placement/components/probation/FormEvaluation/FormEvaluateScore.vue b/src/modules/05_placement/components/probation/FormEvaluation/FormEvaluateScore.vue
index f3bc20646..5e5fe6e53 100644
--- a/src/modules/05_placement/components/probation/FormEvaluation/FormEvaluateScore.vue
+++ b/src/modules/05_placement/components/probation/FormEvaluation/FormEvaluateScore.vue
@@ -39,20 +39,18 @@ const props = defineProps({
   tab: String,
 });
 onMounted(() => {
-  console.log(props);
-  console.log(assignId.value);
-  fecthAssign(assignId.value);
   if (props.tab !== undefined) {
     round.value = props.tab.charAt(4);
-    fetchEvaluate(assignId.value, round.value);
+    // fetchEvaluate(assignId.value, round.value);
   }
+  fecthAssign(assignId.value);
 });
 const fecthAssign = async (id: string) => {
   showLoader();
   await http
     .get(config.API.evaluateChairman(id))
-    .then((res: any) => {
-      console.log(res);
+    .then(async (res: any) => {
+      // console.log(res);
       assign.value = res.data.data.assign;
       evaluate_no.value = res.data.data.evaluate_no;
       start_date.value = res.data.data.start_date;
@@ -60,7 +58,10 @@ const fecthAssign = async (id: string) => {
       chairman.value = res.data.data.chairman;
       commander.value = res.data.data.commander;
       mentors.value = res.data.data.mentors;
-      console.log(mentors.value[0].name);
+
+      if (res.data.data.evaluate_no > round.value) {
+        await fetchEvaluate(assignId.value, round.value);
+      }
     })
     .catch((e) => {
       messageError($q, e);
@@ -122,7 +123,9 @@ const fetchEvaluate = async (id: string, round: string) => {
       status.value = false;
     })
     .catch((e) => {
-      console.log(e);
+      if (e.data.message !== "Data not found!") {
+        messageError($q, e);
+      }
     })
     .finally(() => {
       hideLoader();
diff --git a/src/modules/05_placement/components/probation/FormEvaluation/FormEvaluateScoreAdd.vue b/src/modules/05_placement/components/probation/FormEvaluation/FormEvaluateScoreAdd.vue
new file mode 100644
index 000000000..1273a3578
--- /dev/null
+++ b/src/modules/05_placement/components/probation/FormEvaluation/FormEvaluateScoreAdd.vue
@@ -0,0 +1,1462 @@
+<script setup lang="ts">
+import { ref, defineAsyncComponent, computed, onMounted } from "vue";
+import { useQuasar } from "quasar";
+import { useProbationDataStore } from "@/modules/05_placement/store";
+import { useCounterMixin } from "@/stores/mixin";
+import { useRoute, useRouter } from "vue-router";
+import http from "@/plugins/http";
+import config from "@/app.config";
+
+const $q = useQuasar();
+const probationStore = useProbationDataStore();
+const { ratingColors } = probationStore;
+const mixin = useCounterMixin();
+const {
+  date2Thai,
+  notifyError,
+  messageError,
+  showLoader,
+  hideLoader,
+  dateToISO,
+  success,
+} = mixin;
+const route = useRoute();
+const router = useRouter();
+const assignId = ref<string>(route.params.form.toString());
+
+const person = ref<any>([]);
+const assign = ref<any>([]);
+const evaluate_no = ref<string>("");
+const start_date = ref<Date>(new Date());
+const date_finish = ref<Date>(new Date());
+const status = ref<boolean>(true);
+const chairman = ref<any>([]);
+const commander = ref<any>([]);
+const mentors = ref<any>([{ name: "" }, { name: "" }]);
+
+const round = ref<any>();
+
+const props = defineProps({
+  tab: String,
+});
+onMounted(() => {
+  fecthAssign(assignId.value);
+});
+const fecthAssign = async (id: string) => {
+  showLoader();
+  await http
+    .get(config.API.evaluateChairman(id))
+    .then(async (res: any) => {
+      console.log(res);
+      person.value = res.data.data.person;
+      assign.value = res.data.data.assign;
+      evaluate_no.value = res.data.data.evaluate_no;
+      start_date.value = res.data.data.start_date;
+      date_finish.value = res.data.data.end_date;
+      chairman.value = res.data.data.chairman;
+      commander.value = res.data.data.commander;
+      mentors.value = res.data.data.mentors;
+      round.value = res.data.data.evaluate_no;
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+};
+
+const list2_1 = [
+  { id: "1", label: "ให้บริการประชาชนหรือผู้รับบริการด้วยอัธยาศัยดี" },
+  { id: "2", label: "มีความรับผิดชอบในการปฏิบัติบัติงาน" },
+  {
+    id: "3",
+    label:
+      "ให้บริการประชาชนหรือผู้รับบริการด้วยความรวดเร็ว เอาใจใส่เป็นมาตรฐานเดียวกัน",
+  },
+  {
+    id: "4",
+    label: "ตั้งใจปฏิบัติบัติหน้าที่ราชการด้วยความอุตสาหะ ขยันหมั่นเพียร",
+  },
+];
+const list2_2 = [
+  {
+    id: "1",
+    label: "อุทิศตนและเสียสละเวลาในการปฏิบัติบัติงานอย่างเต็มกำลังความสามารถ",
+  },
+  { id: "2", label: "มีจิตสำนึกที่ดี ปฏิบัติบัติงานด้วยความซื่อสัตย์ สุจริต" },
+  {
+    id: "3",
+    label:
+      "ยึดมั่นในสถาบันบัพระมหากษัตริย์ และไม่กระทำการใด ๆ อันจะก่อให้เกิดความเสียหายต่อประเทศชาติ",
+  },
+];
+const list2_3 = [
+  { id: "1", label: "มีความรับรัผิดชอบในการรักษาเวลาทำงาน" },
+  {
+    id: "2",
+    label: "แต่งกายในการปฏิบัติบัติงานได้อย่างเหมาะสมกับการเป็นข้าราชการ",
+  },
+  {
+    id: "3",
+    label: "ไม่กระทำการใด ๆ อันอาจก่อให้เกิดความเสียหายแก่ชื่อเสียงของหน่วยงาน",
+  },
+  {
+    id: "4",
+    label:
+      "ไม่กระทำการใด ๆ อันเป็นการเสื่อมเกียรติและศักดิ์ศรีของความเป็นข้าราชการ",
+  },
+  {
+    id: "5",
+    label: "ปฏิบัติบัติหน้าที่อย่างตรงไปตรงมาโดยยึกหลักจรรยาบรรณวิชาชีพ",
+  },
+];
+
+const dateToday = ref<Date>(new Date("10-10-2023"));
+const dateEnd = ref<Date>(new Date("12-10-2023"));
+const period = ref<number>(1);
+// part 1
+const learn_level = ref<number>(0);
+const apply_level = ref<number>(0);
+const success_level = ref<number>(0);
+const etc = ref<any>(false);
+const achievement_other = ref<any>({ text: "", level: 0 });
+// part 2
+const conduct_level = ref<any>([]);
+const moral_level = ref<any>([]);
+const discipline_level = ref<any>([]);
+const etc2 = ref<any>(false); // checkBox 2.4
+const behavio_orther = ref<any>({ text: "", level: 0 });
+
+// part 3
+const orientation = ref<number>(0);
+const self_learning = ref<number>(0);
+const training_seminar = ref<number>(0);
+const other_training = ref<number>(0);
+const orientation_percent = ref<number>(0);
+const self_learning_percent = ref<number>(0);
+const training_seminar_percent = ref<number>(0);
+const other_training_percent = ref<number>(0);
+const develop_result = ref<any>();
+const develop_result_option = ref<any>([
+  { name: "ไม่ผ่านการทดลองงาน", value: 0 },
+  { name: "ผ่านการทดลองงาน", value: 1 },
+]);
+// footer
+const Autherise = ref<any>(null);
+const dateAutherise = ref<any>(new Date());
+// const option = ref<any>([]);
+
+// score
+const score1 = computed(() => {
+  if (
+    etc.value === true &&
+    achievement_other.value.text !== undefined &&
+    achievement_other.value.level !== undefined
+  ) {
+    return (
+      learn_level.value +
+      apply_level.value +
+      success_level.value +
+      achievement_other.value.level
+    );
+  }
+  return learn_level.value + apply_level.value + success_level.value;
+});
+const achievement_score_total: any = computed(() => {
+  if (
+    etc.value === true &&
+    achievement_other.value.text !== undefined &&
+    achievement_other.value.level !== undefined
+  ) {
+    return 20;
+  }
+  return 15;
+});
+const achievement_result: any = computed(() => {
+  if (percent_score1.value > 60) {
+    return 1;
+  }
+  return 0;
+});
+const score2 = computed(() => {
+  let sum_conduct = conduct_level.value.reduce(
+    (sum: number, level: number) => sum + level,
+    0
+  );
+  let sum_moral = moral_level.value.reduce(
+    (sum: number, level: number) => sum + level,
+    0
+  );
+  let sum_discipline = discipline_level.value.reduce(
+    (sum: number, level: number) => sum + level,
+    0
+  );
+  if (
+    etc2.value === true &&
+    behavio_orther.value.text !== undefined &&
+    behavio_orther.value.level !== undefined
+  ) {
+    return (
+      sum_conduct + sum_moral + sum_discipline + behavio_orther.value.level
+    );
+  } else return sum_conduct + sum_moral + sum_discipline;
+});
+const behavior_score_total: any = computed(() => {
+  if (
+    etc2.value === true &&
+    behavio_orther.value.text !== undefined &&
+    behavio_orther.value.level !== undefined
+  ) {
+    return 65;
+  } else return 60;
+});
+const behavior_result: any = computed(() => {
+  if (percent_score2.value > 60) {
+    return 1;
+  }
+  return 0;
+});
+const percent_score1: any = computed(() => {
+  let num = 0;
+  if (etc.value === true) {
+    num = 20;
+  } else num = 15;
+  let percent1 = (score1.value / num) * 100;
+  return percent1.toFixed(2);
+});
+const percent_score2: any = computed(() => {
+  let num = 0;
+  if (etc2.value === true) {
+    num = 65;
+  } else num = 60;
+  let percent2 = (score2.value / num) * 100;
+  return percent2.toFixed(2);
+});
+const percent_sum: any = computed(() => {
+  let sum = (Number(percent_score1.value) + Number(percent_score2.value)) / 2;
+  return sum.toFixed(2);
+});
+const score4 = computed(() => {
+  return (
+    Number(orientation.value) +
+    Number(self_learning.value) +
+    Number(training_seminar.value) +
+    Number(other_training.value)
+  );
+});
+const score5 = computed(() => {
+  return (
+    Number(orientation_percent.value) +
+    Number(self_learning_percent.value) +
+    Number(training_seminar_percent.value) +
+    Number(other_training_percent.value)
+  );
+});
+
+const savaForm = () => {
+  let hasError = false;
+  if (
+    learn_level.value === 0 ||
+    apply_level.value === 0 ||
+    success_level.value === 0 ||
+    conduct_level.value.length < 4 ||
+    moral_level.value.length < 3 ||
+    discipline_level.value.length < 5 ||
+    orientation.value === null ||
+    self_learning.value === null ||
+    training_seminar.value === null
+  ) {
+    hasError = true;
+  } else if (
+    (etc.value == true &&
+      (achievement_other.value.text === undefined ||
+        achievement_other.value.text == "" ||
+        achievement_other.value.level == undefined ||
+        achievement_other.value.level === 0)) ||
+    (etc2.value == true &&
+      (behavio_orther.value.text === undefined ||
+        behavio_orther.value.text == "" ||
+        behavio_orther.value.level === undefined ||
+        behavio_orther.value.level == 0))
+  ) {
+    hasError = true;
+  } else putformData();
+
+  if (hasError === true) {
+    notifyError($q, "กรุณากรอกข้อมูลให้ครบ");
+  }
+};
+const putformData = () => {
+  const data = {
+    evaluate_no: evaluate_no.value,
+    start_date: start_date.value,
+    date_finish: date_finish.value,
+    knowledge_level: learn_level.value,
+    apply_level: apply_level.value,
+    success_level: success_level.value,
+    achievement_other: achievement_other.value,
+    conduct1_level: conduct_level.value[0],
+    conduct2_level: conduct_level.value[1],
+    conduct3_level: conduct_level.value[2],
+    conduct4_level: conduct_level.value[3],
+    moral1_level: moral_level.value[0],
+    moral2_level: moral_level.value[1],
+    moral3_level: moral_level.value[2],
+    discipline1_level: discipline_level.value[0],
+    discipline2_level: discipline_level.value[1],
+    discipline3_level: discipline_level.value[2],
+    discipline4_level: discipline_level.value[3],
+    discipline5_level: discipline_level.value[4],
+    behavior_orther: behavio_orther.value,
+    develop_orientation_score: Number(orientation.value),
+    develop_self_learning_score: Number(self_learning.value),
+    develop_training_seminar_score: Number(training_seminar.value),
+    develop_other_training_score: Number(other_training.value),
+    develop_orientation_percent: Number(orientation_percent.value),
+    develop_self_learning_percent: Number(self_learning_percent.value),
+    develop_training_seminar_percent: Number(training_seminar_percent.value),
+    develop_other_training_percent: Number(other_training_percent.value),
+    achievement_score: Number(score1.value),
+    achievement_percent: Number(percent_score1.value),
+    achievement_score_total: Number(achievement_score_total.value),
+    achievement_result: Number(achievement_result.value),
+    behavior_score: Number(score2.value),
+    behavior_percent: Number(percent_score2.value),
+    behavior_score_total: Number(behavior_score_total.value),
+    behavior_result: Number(behavior_result.value),
+    sum_score: Number(score1.value) + Number(score2.value),
+    sum_percent: Number(percent_score1.value) + Number(percent_score2.value),
+    chairman_dated: dateToISO(dateAutherise.value),
+    develop_result: develop_result.value,
+  };
+  $q.dialog({
+    title: "ยืนยันการบันทึกข้อมูล",
+    message: "ต้องการบันทึกข้อมูลนี้ใช่หรือไม่ ?",
+    cancel: {
+      flat: true,
+      color: "negative",
+    },
+    persistent: true,
+  })
+    .onOk(async () => {
+      console.log("บันทึกข้อมูล", data);
+      await http
+        .post(config.API.createformChairman(assignId.value), data)
+        .then((res: any) => {
+          console.log(res);
+          success($q, "บันทึกสำเร็จ");
+        })
+        .catch((e: any) => {
+          console.log(e);
+          messageError($q, e);
+        })
+        .finally(() => {
+          fetchEvaluate(assignId.value, round.value);
+        });
+    })
+    .onCancel(() => {})
+    .onDismiss(() => {});
+};
+</script>
+
+<template>
+  <q-card class="my-card" flat bordered>
+    <q-item>
+      <q-item-section>
+        <q-toolbar>
+          <div
+            class="text-h6 text-weight-medium text-dark col-12 row items-center q-py-md"
+          >
+            <q-btn
+              icon="mdi-arrow-left"
+              unelevated
+              round
+              dense
+              flat
+              color="primary"
+              class="q-mr-sm"
+              @click="router.go(-1)"
+            />
+            การทดลองปฏิบัติหน้าที่ราชการของ {{ person.name }}
+          </div>
+        </q-toolbar>
+      </q-item-section>
+    </q-item>
+
+    <q-separator />
+    <q-card-section>
+      <q-separator vertical />
+      <q-card-section class="col-4">
+        <div class="row col-12 q-gutter-lg no-margin">
+          <div class="toptitle text-dark col-12 row items-center">
+            <div>แบบประเมินผล (คณะกรรมการ)</div>
+          </div>
+          <div class="col-12 row">
+            <div class="col-12 text-top0 row items-center">
+              <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
+              วันเริ่มทดลองปฎิบัติหน้าที่ราชการ ตั้งแต่วันที่
+              <span class="text-black q-px-sm">{{
+                date2Thai(assign.date_start)
+              }}</span>
+              ถึงวันที
+              <span class="text-black q-px-sm">{{
+                date2Thai(assign.date_finish)
+              }}</span>
+            </div>
+            <div class="col-12 text-top0 row items-center">
+              <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
+              <span class="text-black q-px-sm">{{ "ครั้งที่" + round }}</span>
+              ระหว่างวันที่
+              <span class="text-black q-px-sm">{{
+                date2Thai(start_date)
+              }}</span>
+              ถึงวันที่
+              <span class="text-black q-px-sm">{{
+                date2Thai(date_finish)
+              }}</span>
+            </div>
+            <div class="col-12 q-pt-md">
+              <q-separator size="3px" color="grey-2" />
+            </div>
+          </div>
+
+          <div class="col-12 row">
+            <div class="col-12 text-top0 items-center">
+              <q-avatar class="bg-grey-2 q-mr-sm" size="28px">1</q-avatar>
+              ผลสัมฤทธิ์ของการทดลองปฏิบัติบัติหน้าที่ราชการ
+            </div>
+          </div>
+          <div class="col-12 row no-margin">
+            <q-card class="text-top0 col-12 q-pa-sm q-pl-lg">
+              <q-list dense>
+                <q-item dense tag="label" v-ripple>
+                  <q-item-section>
+                    <q-item-label>
+                      <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
+                      1.1. ความสามารถในการเรียนรู้งาน</q-item-label
+                    >
+                  </q-item-section>
+                  <q-item-section side>
+                    <q-rating
+                      v-model="learn_level"
+                      max="5"
+                      size="sm"
+                      color="grey"
+                      :color-selected="ratingColors"
+                      label="ระดับการประเมินพฤติกรรม"
+                    >
+                      <template v-slot:tip-1>
+                        <q-tooltip>ต่ำกว่าความคาดหวังมาก</q-tooltip>
+                      </template>
+                      <template v-slot:tip-2>
+                        <q-tooltip>ต่ำกว่าความคาดหวังค่อนข้างมาก</q-tooltip>
+                      </template>
+                      <template v-slot:tip-3>
+                        <q-tooltip>เป็นไปตามความคาดหวัง</q-tooltip>
+                      </template>
+                      <template v-slot:tip-4>
+                        <q-tooltip>สูงว่าความคาดหวังค่อนข้างมาก</q-tooltip>
+                      </template>
+                      <template v-slot:tip-5>
+                        <q-tooltip>สูงกว่าความคาดหวังมาก</q-tooltip>
+                      </template>
+                    </q-rating>
+                  </q-item-section>
+                </q-item>
+              </q-list>
+            </q-card>
+
+            <q-card class="text-top0 col-12 q-pa-sm q-pl-lg">
+              <q-list dense>
+                <q-item dense tag="label" v-ripple>
+                  <q-item-section>
+                    <q-item-label>
+                      <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
+                      1.2.
+                      ความสามารถในการปรับใช้ความรู้กับงานในหน้าที่</q-item-label
+                    >
+                  </q-item-section>
+                  <q-item-section side>
+                    <q-rating
+                      v-model="apply_level"
+                      max="5"
+                      size="sm"
+                      color="grey"
+                      :color-selected="ratingColors"
+                      label="ระดับการประเมินพฤติกรรม"
+                    >
+                      <template v-slot:tip-1>
+                        <q-tooltip>ต่ำกว่าความคาดหวังมาก</q-tooltip>
+                      </template>
+                      <template v-slot:tip-2>
+                        <q-tooltip>ต่ำกว่าความคาดหวังค่อนข้างมาก</q-tooltip>
+                      </template>
+                      <template v-slot:tip-3>
+                        <q-tooltip>เป็นไปตามความคาดหวัง</q-tooltip>
+                      </template>
+                      <template v-slot:tip-4>
+                        <q-tooltip>สูงว่าความคาดหวังค่อนข้างมาก</q-tooltip>
+                      </template>
+                      <template v-slot:tip-5>
+                        <q-tooltip>สูงกว่าความคาดหวังมาก</q-tooltip>
+                      </template>
+                    </q-rating>
+                  </q-item-section>
+                </q-item>
+              </q-list>
+            </q-card>
+
+            <q-card class="text-top0 col-12 q-pa-sm q-pl-lg">
+              <q-list dense>
+                <q-item dense tag="label" v-ripple>
+                  <q-item-section>
+                    <q-item-label>
+                      <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
+                      1.3. ความสำเร็จของงานที่ได้รับมอบหมาย</q-item-label
+                    >
+                  </q-item-section>
+                  <q-item-section side>
+                    <q-rating
+                      v-model="success_level"
+                      max="5"
+                      size="sm"
+                      color="grey"
+                      :color-selected="ratingColors"
+                      label="ระดับการประเมินพฤติกรรม"
+                    >
+                      <template v-slot:tip-1>
+                        <q-tooltip>ต่ำกว่าความคาดหวังมาก</q-tooltip>
+                      </template>
+                      <template v-slot:tip-2>
+                        <q-tooltip>ต่ำกว่าความคาดหวังค่อนข้างมาก</q-tooltip>
+                      </template>
+                      <template v-slot:tip-3>
+                        <q-tooltip>เป็นไปตามความคาดหวัง</q-tooltip>
+                      </template>
+                      <template v-slot:tip-4>
+                        <q-tooltip>สูงว่าความคาดหวังค่อนข้างมาก</q-tooltip>
+                      </template>
+                      <template v-slot:tip-5>
+                        <q-tooltip>สูงกว่าความคาดหวังมาก</q-tooltip>
+                      </template>
+                    </q-rating>
+                  </q-item-section>
+                </q-item>
+              </q-list>
+            </q-card>
+
+            <q-card class="text-top0 col-12 q-pa-sm q-pl-lg">
+              <q-list dense>
+                <q-item dense tag="label" v-ripple>
+                  <q-item-section>
+                    <q-item-label>
+                      <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
+                      1.4 อื่นๆ
+                      <q-checkbox
+                        class="q-ml-sm"
+                        dense
+                        v-model="etc"
+                        @click="
+                          (achievement_other.text = ''),
+                            (achievement_other.level = 0)
+                        "
+                    /></q-item-label>
+                  </q-item-section>
+                </q-item>
+              </q-list>
+            </q-card>
+
+            <q-card v-if="etc" class="text-top0 col-12 q-pa-sm q-mt-sm q-pl-lg">
+              <q-list dense>
+                <q-item dense tag="label" v-ripple>
+                  <q-item-section class="q-ml-md">
+                    <q-item-label>
+                      <q-input
+                        v-model="achievement_other.text"
+                        label="กรอกอื่นๆ"
+                        dense
+                        lazy-rules
+                        autogrow
+                        hide-bottom-space
+                        outlined
+                        class="bg-white"
+                        :rules="[
+                          (val) =>
+                            (val && val.length > 0) || 'กรุณากรอกข้อความ',
+                        ]"
+                      />
+                    </q-item-label>
+                  </q-item-section>
+                  <q-item-section side>
+                    <q-rating
+                      v-model="achievement_other.level"
+                      max="5"
+                      size="sm"
+                      color="grey"
+                      :color-selected="ratingColors"
+                      label="ระดับการประเมินพฤติกรรม"
+                    >
+                      <template v-slot:tip-1>
+                        <q-tooltip>ต่ำกว่าความคาดหวังมาก</q-tooltip>
+                      </template>
+                      <template v-slot:tip-2>
+                        <q-tooltip>ต่ำกว่าความคาดหวังค่อนข้างมาก</q-tooltip>
+                      </template>
+                      <template v-slot:tip-3>
+                        <q-tooltip>เป็นไปตามความคาดหวัง</q-tooltip>
+                      </template>
+                      <template v-slot:tip-4>
+                        <q-tooltip>สูงว่าความคาดหวังค่อนข้างมาก</q-tooltip>
+                      </template>
+                      <template v-slot:tip-5>
+                        <q-tooltip>สูงกว่าความคาดหวังมาก</q-tooltip>
+                      </template>
+                    </q-rating>
+                  </q-item-section>
+                </q-item>
+              </q-list>
+            </q-card>
+            <q-card class="text-top0 col-12 q-pa-sm q-pl-lg">
+              <q-list dense>
+                <q-item dense tag="label" v-ripple>
+                  <q-item-section>
+                    <q-item-label> คะแนนรวมผลสัมฤทธิ์ของการทดลองฯ</q-item-label>
+                  </q-item-section>
+                  <q-item-section side>
+                    <q-field dense>
+                      <template v-slot:control>
+                        <div class="self-center full-width no-outline">
+                          {{ score1 }}
+                        </div>
+                      </template>
+                    </q-field>
+                  </q-item-section>
+                </q-item>
+              </q-list>
+            </q-card>
+          </div>
+
+          <!-- Part 2 -->
+          <!-- <Part2 /> -->
+          <div class="row col-12 q-gutter-lg no-margin">
+            <div class="col-12 row">
+              <div class="col-12 text-top0 items-center">
+                <q-avatar class="bg-grey-2 q-mr-sm" size="28px">2</q-avatar>
+                พฤติกรรมของผู้ทดลองปฏิบัติบัติหน้าที่ราชการ
+              </div>
+              <div class="col-12 text-top0 row items-center q-pl-lg">
+                <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
+                2.1 ความประพฤติ
+              </div>
+              <q-card
+                flat
+                bordered
+                class="col-xs-12 col-sm-11 col-md-10 offset-md-1 q-pa-sm bg-grey-1"
+              >
+                <q-list dense v-for="(list, i) in list2_1" :key="i">
+                  <q-item dense tag="label" v-ripple>
+                    <q-item-section>
+                      <q-item-label>{{ list.label }}</q-item-label>
+                    </q-item-section>
+                    <q-item-section side>
+                      <q-rating
+                        v-model="conduct_level[i]"
+                        :val="list.id"
+                        max="5"
+                        size="sm"
+                        color="grey"
+                        :color-selected="ratingColors"
+                        label="ระดับการประเมินพฤติกรรม"
+                      >
+                        <template v-slot:tip-1>
+                          <q-tooltip>ต่ำกว่าความคาดหวังมาก</q-tooltip>
+                        </template>
+                        <template v-slot:tip-2>
+                          <q-tooltip>ต่ำกว่าความคาดหวังค่อนข้างมาก</q-tooltip>
+                        </template>
+                        <template v-slot:tip-3>
+                          <q-tooltip>เป็นไปตามความคาดหวัง</q-tooltip>
+                        </template>
+                        <template v-slot:tip-4>
+                          <q-tooltip>สูงว่าความคาดหวังค่อนข้างมาก</q-tooltip>
+                        </template>
+                        <template v-slot:tip-5>
+                          <q-tooltip>สูงกว่าความคาดหวังมาก</q-tooltip>
+                        </template>
+                      </q-rating>
+                    </q-item-section>
+                  </q-item>
+                  <q-separator class="q-my-xs" v-if="i + 1 < list2_1.length" />
+                </q-list>
+              </q-card>
+            </div>
+            <div class="col-12 row">
+              <div class="col-12 text-top0 row items-center q-pl-lg">
+                <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
+                2.2 ความมีคุณธรรมจริยธรรม
+              </div>
+              <q-card
+                flat
+                bordered
+                class="col-xs-12 col-sm-11 col-md-10 offset-md-1 q-pa-sm bg-grey-1"
+              >
+                <q-list dense v-for="(list, i) in list2_2" :key="i">
+                  <q-item dense tag="label" v-ripple>
+                    <q-item-section>
+                      <q-item-label>{{ list.label }}</q-item-label>
+                    </q-item-section>
+                    <q-item-section side>
+                      <q-rating
+                        v-model="moral_level[i]"
+                        :val="list.id"
+                        max="5"
+                        size="sm"
+                        color="grey"
+                        :color-selected="ratingColors"
+                        label="ระดับการประเมินพฤติกรรม"
+                      >
+                        <template v-slot:tip-1>
+                          <q-tooltip>ต่ำกว่าความคาดหวังมาก</q-tooltip>
+                        </template>
+                        <template v-slot:tip-2>
+                          <q-tooltip>ต่ำกว่าความคาดหวังค่อนข้างมาก</q-tooltip>
+                        </template>
+                        <template v-slot:tip-3>
+                          <q-tooltip>เป็นไปตามความคาดหวัง</q-tooltip>
+                        </template>
+                        <template v-slot:tip-4>
+                          <q-tooltip>สูงว่าความคาดหวังค่อนข้างมาก</q-tooltip>
+                        </template>
+                        <template v-slot:tip-5>
+                          <q-tooltip>สูงกว่าความคาดหวังมาก</q-tooltip>
+                        </template>
+                      </q-rating>
+                    </q-item-section>
+                  </q-item>
+                  <q-separator class="q-my-xs" v-if="i + 1 < list2_2.length" />
+                </q-list>
+              </q-card>
+            </div>
+            <div class="col-12 row">
+              <div class="col-12 text-top0 row items-center q-pl-lg">
+                <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
+                2.3 การรักษาวินัย
+              </div>
+              <q-card
+                flat
+                bordered
+                class="col-xs-12 col-sm-11 col-md-10 offset-md-1 q-pa-sm bg-grey-1"
+              >
+                <q-list dense v-for="(list, i) in list2_3" :key="i">
+                  <q-item dense tag="label" v-ripple>
+                    <q-item-section>
+                      <q-item-label>{{ list.label }}</q-item-label>
+                    </q-item-section>
+                    <q-item-section side>
+                      <q-rating
+                        v-model="discipline_level[i]"
+                        :val="list.id"
+                        max="5"
+                        size="sm"
+                        color="grey"
+                        :color-selected="ratingColors"
+                        label="ระดับการประเมินพฤติกรรม"
+                      >
+                        <template v-slot:tip-1>
+                          <q-tooltip>ต่ำกว่าความคาดหวังมาก</q-tooltip>
+                        </template>
+                        <template v-slot:tip-2>
+                          <q-tooltip>ต่ำกว่าความคาดหวังค่อนข้างมาก</q-tooltip>
+                        </template>
+                        <template v-slot:tip-3>
+                          <q-tooltip>เป็นไปตามความคาดหวัง</q-tooltip>
+                        </template>
+                        <template v-slot:tip-4>
+                          <q-tooltip>สูงว่าความคาดหวังค่อนข้างมาก</q-tooltip>
+                        </template>
+                        <template v-slot:tip-5>
+                          <q-tooltip>สูงกว่าความคาดหวังมาก</q-tooltip>
+                        </template>
+                      </q-rating>
+                    </q-item-section>
+                  </q-item>
+                  <q-separator class="q-my-xs" v-if="i + 1 < list2_3.length" />
+                </q-list>
+              </q-card>
+            </div>
+            <div class="col-12 row">
+              <div class="col-12 text-top0 row items-center q-pl-lg">
+                <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
+                2.4 อื่นๆ
+                <q-checkbox
+                  class="q-ml-sm"
+                  dense
+                  v-model="etc2"
+                  @click="
+                    (behavio_orther.text = ''), (behavio_orther.level = 0)
+                  "
+                />
+              </div>
+              <q-card
+                v-if="etc2"
+                flat
+                bordered
+                class="col-xs-12 col-sm-11 col-md-10 offset-md-1 q-pa-sm bg-grey-1"
+              >
+                <q-list dense>
+                  <q-item dense tag="label" v-ripple>
+                    <q-item-section>
+                      <q-item-label>
+                        <q-input
+                          v-model="behavio_orther.text"
+                          label="กรอกอื่นๆ"
+                          dense
+                          lazy-rules
+                          autogrow
+                          hide-bottom-space
+                          outlined
+                          class="bg-white"
+                          :rules="[
+                            (val) =>
+                              (val && val.length > 0) || 'กรุณากรอกข้อความ',
+                          ]"
+                        />
+                      </q-item-label>
+                    </q-item-section>
+                    <q-item-section side>
+                      <q-rating
+                        v-model="behavio_orther.level"
+                        max="5"
+                        size="sm"
+                        color="grey"
+                        :color-selected="ratingColors"
+                        label="ระดับการประเมินพฤติกรรม"
+                      >
+                        <template v-slot:tip-1>
+                          <q-tooltip>ต่ำกว่าความคาดหวังมาก</q-tooltip>
+                        </template>
+                        <template v-slot:tip-2>
+                          <q-tooltip>ต่ำกว่าความคาดหวังค่อนข้างมาก</q-tooltip>
+                        </template>
+                        <template v-slot:tip-3>
+                          <q-tooltip>เป็นไปตามความคาดหวัง</q-tooltip>
+                        </template>
+                        <template v-slot:tip-4>
+                          <q-tooltip>สูงว่าความคาดหวังค่อนข้างมาก</q-tooltip>
+                        </template>
+                        <template v-slot:tip-5>
+                          <q-tooltip>สูงกว่าความคาดหวังมาก</q-tooltip>
+                        </template>
+                      </q-rating>
+                    </q-item-section>
+                  </q-item>
+                </q-list>
+              </q-card>
+            </div>
+            <div class="col-12 row">
+              <q-card class="text-top0 col-12 q-pa-sm q-pl-lg">
+                <q-list dense>
+                  <q-item dense tag="label" v-ripple>
+                    <q-item-section>
+                      <q-item-label>
+                        คะแนนรวมพฤติกรรมการปฎิบัติราชการ</q-item-label
+                      >
+                    </q-item-section>
+                    <q-item-section side>
+                      <q-field dense>
+                        <template v-slot:control>
+                          <div class="self-center full-width no-outline">
+                            {{ score2 }}
+                          </div>
+                        </template>
+                      </q-field>
+                    </q-item-section>
+                  </q-item>
+                </q-list>
+              </q-card>
+            </div>
+          </div>
+
+          <!-- ผลการประเมิน -->
+          <div class="row col-12 q-gutter-lg no-margin">
+            <div class="col-12 row justify-center">
+              <div class="col-12 text-top0 items-center">
+                <q-avatar class="bg-grey-2 q-mr-sm" size="28px">3</q-avatar>
+                ผลการประเมิน
+              </div>
+            </div>
+            <q-card class="text-top0 col-12">
+              <q-list dense>
+                <q-item dense tag="label" v-ripple>
+                  <q-item-section>
+                    <q-item-label>
+                      <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
+                      3.1.
+                      ผลสัมฤทธิ์ของการทดลองปฏิบัติบัติหน้าที่ราชการ</q-item-label
+                    >
+                  </q-item-section>
+                  <q-item-section>
+                    <q-item-label style="color: gray">
+                      <div class="row text-weight-light">
+                        <div class="col">คะแนน</div>
+                        <div class="col">ร้อยละ</div>
+                      </div>
+                    </q-item-label>
+                    <q-item-label caption style="color: #464444">
+                      <div class="row text-weight-bold">
+                        <div class="col">{{ score1 }}</div>
+                        <div class="col">{{ percent_score1 }}</div>
+                      </div>
+                    </q-item-label>
+                  </q-item-section>
+
+                  <q-item-section side v-if="percent_score1 > 60">
+                    ผ่าน(สูงกว่าร้อยละ 60)
+                  </q-item-section>
+                  <q-item-section side v-else>
+                    ไม่ผ่าน(ต่ำกว่าร้อยละ 60)
+                  </q-item-section>
+                </q-item>
+              </q-list>
+            </q-card>
+            <q-card class="text-top0 col-12">
+              <q-list dense>
+                <q-item dense tag="label" v-ripple>
+                  <q-item-section>
+                    <q-item-label>
+                      <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
+                      3.2.
+                      พฤติกรรมของผู้ทดลองปฏิบัติบัติหน้าที่ราชการ</q-item-label
+                    >
+                  </q-item-section>
+                  <q-item-section>
+                    <q-item-label style="color: gray">
+                      <div class="row text-weight-light">
+                        <div class="col">คะแนน</div>
+                        <div class="col">ร้อยละ</div>
+                      </div>
+                    </q-item-label>
+                    <q-item-label caption style="color: #464444">
+                      <div class="row text-weight-bold">
+                        <div class="col">{{ score2 }}</div>
+                        <div class="col">{{ percent_score2 }}</div>
+                      </div>
+                    </q-item-label>
+                  </q-item-section>
+
+                  <q-item-section side v-if="percent_score2 > 60">
+                    ผ่าน(สูงกว่าร้อยละ 60)
+                  </q-item-section>
+                  <q-item-section side v-else>
+                    ไม่ผ่าน(ต่ำกว่าร้อยละ 60)
+                  </q-item-section>
+                </q-item>
+              </q-list>
+            </q-card>
+            <q-card class="text-top0 col-12">
+              <q-list dense>
+                <q-item dense tag="label" v-ripple>
+                  <q-item-section>
+                    <q-item-label> ผลคะแนนรวม</q-item-label>
+                  </q-item-section>
+                  <q-item-section>
+                    <q-item-label style="color: gray">
+                      <div class="row text-weight-light">
+                        <div class="col">คะแนน</div>
+                        <div class="col">ร้อยละ</div>
+                      </div>
+                    </q-item-label>
+                    <q-item-label caption style="color: #464444">
+                      <div class="row text-weight-bold">
+                        <div class="col">{{ score1 + score2 }}</div>
+                        <div class="col">{{ percent_sum }}</div>
+                      </div>
+                    </q-item-label>
+                  </q-item-section>
+
+                  <q-item-section side v-if="percent_sum > 60">
+                    ผ่าน(สูงกว่าร้อยละ 60)
+                  </q-item-section>
+                  <q-item-section side v-else>
+                    ไม่ผ่าน(ต่ำกว่าร้อยละ 60)
+                  </q-item-section>
+                </q-item>
+              </q-list>
+            </q-card>
+          </div>
+
+          <!-- Part 4 -->
+          <div class="row col-12 q-gutter-lg no-margin">
+            <div class="col-12 row justify-center">
+              <div class="col-12 text-top0 items-center">
+                <q-avatar class="bg-grey-2 q-mr-sm" size="28px">4</q-avatar>
+                การพัฒนาผู้ทดลองปฏิบัติบัติหน้าที่ราชการ
+              </div>
+              <div class="col-xs-12 col-sm-11 col-md-11 q-pa-sm">
+                <div class="row q-gutter-md">
+                  <div class="col-8"></div>
+                  <div class="col">คะแนน</div>
+                  <div class="col">ร้อยละ</div>
+                </div>
+              </div>
+              <q-card
+                flat
+                bordered
+                class="col-xs-12 col-sm-11 col-md-11 q-pa-sm bg-grey-1"
+              >
+                <div class="row q-gutter-md align-center">
+                  <div class="col-8">1. การปฐมนิเทศ</div>
+                  <div class="col">
+                    <q-input dense type="number" v-model="orientation" />
+                  </div>
+                  <div class="col">
+                    <q-input
+                      dense
+                      type="number"
+                      v-model="orientation_percent"
+                    />
+                  </div>
+                </div>
+                <q-separator class="q-my-xs" />
+                <div class="row q-gutter-md align-center">
+                  <div class="col-8">2. การเรียนรู้ด้วยตนเอง</div>
+                  <div class="col">
+                    <q-input dense type="number" v-model="self_learning" />
+                  </div>
+                  <div class="col">
+                    <q-input
+                      dense
+                      type="number"
+                      v-model="self_learning_percent"
+                    />
+                  </div>
+                </div>
+                <q-separator class="q-my-xs" />
+                <div class="row q-gutter-md align-center">
+                  <div class="col-8">3. การอบรมสัมนาร่วมกัน</div>
+                  <div class="col">
+                    <q-input dense type="number" v-model="training_seminar" />
+                  </div>
+                  <div class="col">
+                    <q-input
+                      dense
+                      type="number"
+                      v-model="training_seminar_percent"
+                    />
+                  </div>
+                </div>
+                <q-separator class="q-my-xs" />
+                <div class="row q-gutter-md align-center">
+                  <div class="col-8">
+                    4. การอบรมอื่น ๆ ตามที่หน่วยงานกำหนด (ถ้ามี)
+                  </div>
+                  <div class="col">
+                    <q-input dense type="number" v-model="other_training" />
+                  </div>
+                  <div class="col">
+                    <q-input
+                      dense
+                      type="number"
+                      v-model="other_training_percent"
+                    />
+                  </div>
+                </div>
+                <!-- <q-list dense>
+            <q-item dense tag="label" v-ripple>
+              <q-item-section>
+                <q-item-label>1. การปฐมนิเทศ</q-item-label>
+              </q-item-section>
+              <q-item-section side>
+                <div class="row">
+                  <q-radio
+                    checked-icon="task_alt"
+                    unchecked-icon="panorama_fish_eye"
+                    v-model="orientation"
+                    val="1"
+                    label="ดำเนินการเเล้ว"
+                  />
+                  <q-radio
+                    checked-icon="task_alt"
+                    unchecked-icon="panorama_fish_eye"
+                    v-model="orientation"
+                    val="0"
+                    label=" ยังไม่ได้ดำเนินการ"
+                  />
+                </div>
+              </q-item-section>
+            </q-item>
+            <q-separator class="q-my-xs" />
+            <q-item dense tag="label" v-ripple>
+              <q-item-section>
+                <q-item-label>2. การเรียนรู้ด้วยตนเอง</q-item-label>
+              </q-item-section>
+              <q-item-section side>
+                <div class="row">
+                  <q-radio
+                    checked-icon="task_alt"
+                    unchecked-icon="panorama_fish_eye"
+                    v-model="self_learning"
+                    val="1"
+                    label="ดำเนินการเเล้ว"
+                  />
+                  <q-radio
+                    checked-icon="task_alt"
+                    unchecked-icon="panorama_fish_eye"
+                    v-model="self_learning"
+                    val="0"
+                    label=" ยังไม่ได้ดำเนินการ"
+                  />
+                </div>
+              </q-item-section>
+            </q-item>
+            <q-separator class="q-my-xs" />
+            <q-item dense tag="label" v-ripple>
+              <q-item-section>
+                <q-item-label>3. การอบรมสัมนาร่วมกัน</q-item-label>
+              </q-item-section>
+              <q-item-section side>
+                <div class="row">
+                  <q-radio
+                    checked-icon="task_alt"
+                    unchecked-icon="panorama_fish_eye"
+                    v-model="training_seminar"
+                    val="1"
+                    label="ดำเนินการเเล้ว"
+                  />
+                  <q-radio
+                    checked-icon="task_alt"
+                    unchecked-icon="panorama_fish_eye"
+                    v-model="training_seminar"
+                    val="0"
+                    label=" ยังไม่ได้ดำเนินการ"
+                  />
+                </div>
+              </q-item-section>
+            </q-item>
+            <q-separator class="q-my-xs" />
+            <q-item dense tag="label" v-ripple>
+              <q-item-section>
+                <q-item-label
+                  >4. การอบรมอื่น ๆ ตามที่หน่วยงานกำหนด (ถ้ามี)</q-item-label
+                >
+              </q-item-section>
+              <q-item-section side>
+                <div class="row">
+                  <q-radio
+                    checked-icon="task_alt"
+                    unchecked-icon="panorama_fish_eye"
+                    v-model="other_training"
+                    val="1"
+                    label="ดำเนินการเเล้ว"
+                  />
+                  <q-radio
+                    checked-icon="task_alt"
+                    unchecked-icon="panorama_fish_eye"
+                    v-model="other_training"
+                    val="0"
+                    label=" ยังไม่ได้ดำเนินการ"
+                  />
+                </div>
+              </q-item-section>
+            </q-item>
+          </q-list> -->
+              </q-card>
+              <q-card class="text-top0 col-12">
+                <div class="col-xs-12 col-sm-11 col-md-11 q-pa-sm">
+                  <div class="row q-gutter-md">
+                    <div class="col-8">
+                      <q-item-label> ผลคะแนนรวม</q-item-label>
+                    </div>
+                    <div class="col">{{ score4 }}</div>
+                    <div class="col">{{ score5 }}</div>
+                  </div>
+                </div>
+              </q-card>
+            </div>
+          </div>
+
+          <div class="row col-12 q-gutter-lg no-margin">
+            <div class="col-12 row justify-center">
+              <div class="col-12 text-top0 items-center">
+                <!-- <q-avatar class="bg-grey-2 q-mr-sm" size="28px">5</q-avatar> -->
+                สรุปผล การประเมินผลทดลองปฎิบัติหน้าที่ราชการ
+              </div>
+              <div class="col-12">
+                <q-select
+                  class="col-xs-12"
+                  dense
+                  v-model="develop_result"
+                  outlined
+                  :options="develop_result_option"
+                  option-label="name"
+                  option-value="value"
+                  label="เลือกสรุปผล การประเมินผลทดลองปฎิบัติหน้าที่ราชการ"
+                  map-options
+                  emit-value
+                />
+              </div>
+            </div>
+          </div>
+
+          <!-- Footer -->
+          <!-- <Footer /> -->
+          <div class="row col-12 q-gutter-lg no-margin">
+            <div class="col-12 row">
+              <div class="col-12 text-top2 row items-center">
+                ผู้บังคับบัญชาผู้มอบหมายงาน
+              </div>
+              <div class="col-12 row q-col-gutter-md">
+                <q-select
+                  class="col-xs-12 col-sm-8"
+                  dense
+                  v-model="commander.name"
+                  outlined
+                  label="ผู้บังคับบัญชา"
+                  disable
+                />
+                <div class="col-xs-12 col-sm-4">
+                  <datepicker
+                    menu-class-name="modalfix"
+                    v-model="dateAutherise"
+                    :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 col-3"
+                        :model-value="
+                          dateAutherise != null
+                            ? date2Thai(dateAutherise)
+                            : 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>
+              <div class="col-12 row q-col-gutter-md">
+                <q-select
+                  class="col-xs-12 col-sm-8"
+                  dense
+                  v-model="mentors[0].name"
+                  outlined
+                  label="ผู้บังคับบัญชา"
+                  disable
+                />
+                <div class="col-xs-12 col-sm-4">
+                  <datepicker
+                    menu-class-name="modalfix"
+                    v-model="dateAutherise"
+                    :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 col-3"
+                        :model-value="
+                          dateAutherise != null
+                            ? date2Thai(dateAutherise)
+                            : 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>
+              <div class="col-12 row q-col-gutter-md">
+                <q-select
+                  class="col-xs-12 col-sm-8"
+                  dense
+                  v-model="mentors[1].name"
+                  outlined
+                  label="ผู้บังคับบัญชา"
+                  disable
+                />
+                <div class="col-xs-12 col-sm-4">
+                  <datepicker
+                    menu-class-name="modalfix"
+                    v-model="dateAutherise"
+                    :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 col-3"
+                        :model-value="
+                          dateAutherise != null
+                            ? date2Thai(dateAutherise)
+                            : 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>
+            </div>
+          </div>
+
+          <div class="row col-12 q-gutter-lg no-margin">
+            <div class="col-12 row">
+              <div class="col-12 text-top2 row items-center">คณะกรรมการ</div>
+              <div class="col-12 row q-col-gutter-md">
+                <q-select
+                  class="col-xs-12 col-sm-8"
+                  dense
+                  v-model="chairman.name"
+                  outlined
+                  label="คณะกรรมการ"
+                  disable
+                />
+                <div class="col-xs-12 col-sm-4">
+                  <datepicker
+                    menu-class-name="modalfix"
+                    v-model="dateAutherise"
+                    :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 col-3"
+                        :model-value="
+                          dateAutherise != null
+                            ? date2Thai(dateAutherise)
+                            : 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>
+            </div>
+          </div>
+
+          <q-toolbar class="text-primary">
+            <q-space />
+            <q-btn
+              label="บันทึก"
+              color="secondary"
+              @click="savaForm"
+              v-if="status"
+            />
+          </q-toolbar>
+        </div>
+      </q-card-section>
+    </q-card-section>
+  </q-card>
+</template>
+
+<style lang="scss" scoped>
+.align-center {
+  display: flex;
+
+  align-items: center; /* จัดเนื้อหาให้อยู่กลางแนวตั้ง */
+}
+.text-top2 {
+  font-weight: 500;
+  padding-bottom: 8px;
+  color: rgb(70, 68, 68);
+}
+
+.text-top0 {
+  font-weight: 600;
+  padding-bottom: 8px;
+  color: rgb(70, 68, 68);
+}
+
+.q-rating__icon {
+  text-shadow: transparent !important;
+}
+
+.q-card {
+  box-shadow: 0px 0px 0px 0px !important;
+}
+</style>
diff --git a/src/modules/05_placement/components/probation/FormEvaluation/FormSaveResult.vue b/src/modules/05_placement/components/probation/FormEvaluation/FormSaveResult.vue
index 65b2ce444..a3e1ed7b7 100644
--- a/src/modules/05_placement/components/probation/FormEvaluation/FormSaveResult.vue
+++ b/src/modules/05_placement/components/probation/FormEvaluation/FormSaveResult.vue
@@ -40,18 +40,19 @@ const props = defineProps({
 });
 
 onMounted(async () => {
-  console.log("tab===>",props.tab)
+  console.log("tab===>", props.tab);
 
-  await fecthFormdata(assignId.value);
   if (props.tab !== undefined) {
     round.value = props.tab.charAt(4);
-    await fecthFormRound(assignId.value, round.value);
+
+    // await fecthFormRound(assignId.value, round.value);
   }
+  await fecthFormdata(assignId.value);
 });
 const fecthFormdata = async (id: string) => {
   await http
     .get(config.API.formevaluateRecord(id))
-    .then((res: any) => {
+    .then(async (res: any) => {
       console.log(res);
       evaluate_no.value = res.data.data.evaluate_no;
       start_date.value = res.data.data.start_date;
@@ -70,6 +71,12 @@ const fecthFormdata = async (id: string) => {
         id: e.id,
       }));
       checkArray.value = list1_1.value.length;
+
+      console.log(res.data.data.evaluate_no, round.value);
+
+      if (res.data.data.evaluate_no > round.value) {
+        await fecthFormRound(assignId.value, round.value);
+      }
     })
     .catch((e: any) => {
       console.log(e);
@@ -1321,8 +1328,7 @@ const saveformdata = async (data: any) => {
     </div>
     <q-toolbar class="text-primary">
       <q-space />
-      <q-btn label="บันทึก" color="secondary" @click="savaForm" />
-      <!-- v-if="status" -->
+      <q-btn v-if="status" label="บันทึก" color="secondary" @click="savaForm" />
     </q-toolbar>
   </div>
 </template>
diff --git a/src/modules/05_placement/components/probation/FormEvaluation/FormSaveResultAdd.vue b/src/modules/05_placement/components/probation/FormEvaluation/FormSaveResultAdd.vue
index d665e8273..5dfe426c7 100644
--- a/src/modules/05_placement/components/probation/FormEvaluation/FormSaveResultAdd.vue
+++ b/src/modules/05_placement/components/probation/FormEvaluation/FormSaveResultAdd.vue
@@ -25,6 +25,8 @@ const start_date = ref<Date>(new Date());
 const date_finish = ref<Date>(new Date());
 const round = ref<number>();
 
+const checkArray = ref<number>(0);
+
 onMounted(async () => {
   await fecthFormdata(assignId.value);
 });
@@ -42,19 +44,30 @@ const fecthFormdata = async (id: string) => {
       assign.value = res.data.data.assign;
       option.value.push(res.data.data.director);
       Autherise.value = res.data.data.director.name;
+
+      list1_1.value = res.data.data.assign_output;
+      evaluate_expenct_level.value = res.data.data.assign_output.map((e) => ({
+        id: e.id,
+        labal: e.output_desc,
+      }));
+      evaluate_ouptut.value = res.data.data.assign_output.map((e) => ({
+        id: e.id,
+        text: "",
+      }));
+      checkArray.value = list1_1.value.length;
     })
     .catch((e: any) => {
       console.log(e);
     });
 };
 
-const list1_1 = [
-  { id: "1", label: "ผลผลิตของงานที่คาดหวัง 1" },
-  { id: "2", label: "ผลผลิตของงานที่คาดหวัง 2" },
-  { id: "3", label: "ผลผลิตของงานที่คาดหวัง 3" },
-  { id: "4", label: "ผลผลิตของงานที่คาดหวัง 4" },
-  { id: "5", label: "ผลผลิตของงานที่คาดหวัง 5" },
-];
+const list1_1 = ref<any>([
+  // { id: "1", label: "ผลผลิตของงานที่คาดหวัง 1" },
+  // { id: "2", label: "ผลผลิตของงานที่คาดหวัง 2" },
+  // { id: "3", label: "ผลผลิตของงานที่คาดหวัง 3" },
+  // { id: "4", label: "ผลผลิตของงานที่คาดหวัง 4" },
+  // { id: "5", label: "ผลผลิตของงานที่คาดหวัง 5" },
+]);
 const list1_2 = [
   { id: "1", label: "ผลผลิตของงานที่เกิดขึ้น 1" },
   { id: "2", label: "ผลผลิตของงานที่เกิดขึ้น 2" },
@@ -115,18 +128,18 @@ const period = ref<number>(1);
 
 // part 1
 const evaluate_expenct_level = ref<any>([
-  { id: "1", label: "ผลผลิตของงานที่คาดหวัง 1", level: 0 },
-  { id: "2", label: "ผลผลิตของงานที่คาดหวัง 2", level: 0 },
-  { id: "3", label: "ผลผลิตของงานที่คาดหวัง 3", level: 0 },
-  { id: "4", label: "ผลผลิตของงานที่คาดหวัง 4", level: 0 },
-  { id: "5", label: "ผลผลิตของงานที่คาดหวัง 5", level: 0 },
+  // { id: "1", label: "ผลผลิตของงานที่คาดหวัง 1", level: 0 },
+  // { id: "2", label: "ผลผลิตของงานที่คาดหวัง 2", level: 0 },
+  // { id: "3", label: "ผลผลิตของงานที่คาดหวัง 3", level: 0 },
+  // { id: "4", label: "ผลผลิตของงานที่คาดหวัง 4", level: 0 },
+  // { id: "5", label: "ผลผลิตของงานที่คาดหวัง 5", level: 0 },
 ]);
 const evaluate_ouptut = ref<any>([
-  { level: 0, text: "" },
-  { level: 0, text: "" },
-  { level: 0, text: "" },
-  { level: 0, text: "" },
-  { level: 0, text: "" },
+  // { level: 0, text: "" },
+  // { level: 0, text: "" },
+  // { level: 0, text: "" },
+  // { level: 0, text: "" },
+  // { level: 0, text: "" },
 ]);
 const knowledge_level = ref<number>(0);
 const skill_level = ref<number>(0);
@@ -187,16 +200,16 @@ const savaForm = () => {
   behavio_inproveRef.value.validate();
 
   let hasError = false;
-  const filterlevel1_1 = evaluate_expenct_level.value.filter(
-    (e: any) => e.level == 0
-  );
-  const filter_ouptut1_2 = evaluate_ouptut.value.filter(
-    (e: any) => e.level == 0 || e.text == ""
-  );
+  // const filterlevel1_1 = evaluate_expenct_level.value.filter(
+  //   (e: any) => e.level == 0
+  // );
+  // const filter_ouptut1_2 = evaluate_ouptut.value.filter(
+  //   (e: any) => e.level == 0 || e.text == ""
+  // );
 
   if (
-    filterlevel1_1.length != 0 ||
-    filter_ouptut1_2.length != 0 ||
+    // filterlevel1_1.length != 0 ||
+    // filter_ouptut1_2.length != 0 ||
     knowledge_level.value === 0 ||
     skill_level.value === 0 ||
     competency_level.value === 0 ||
@@ -350,9 +363,7 @@ const saveformdata = async (data: any) => {
             </div>
             <div class="col-12 text-top0 row items-center">
               <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
-              <span class="text-black q-px-sm">{{
-                "ครั้งที่" + round
-              }}</span>
+              <span class="text-black q-px-sm">{{ "ครั้งที่" + round }}</span>
               ระหว่างวันที่
               <span class="text-black q-px-sm">{{
                 date2Thai(start_date)
@@ -387,7 +398,7 @@ const saveformdata = async (data: any) => {
               <q-list dense v-for="(list, i) in list1_1" :key="i">
                 <q-item dense tag="label" v-ripple>
                   <q-item-section>
-                    <q-item-label>{{ list.label }}</q-item-label>
+                    <q-item-label>{{ list.output_desc }}</q-item-label>
                   </q-item-section>
                   <q-item-section side>
                     <q-rating
@@ -435,7 +446,7 @@ const saveformdata = async (data: any) => {
               class="col-xs-12 col-sm-11 col-md-10 offset-md-1 q-pa-sm bg-grey-1"
             >
               <q-list dense v-for="(list, i) in list1_2" :key="i">
-                <q-item dense tag="label" v-ripple>
+                <q-item dense tag="label" v-ripple v-if="i < checkArray">
                   <q-item-section>
                     <!-- <q-item-label>{{ list.label }}</q-item-label> -->
                     <q-input
diff --git a/src/modules/05_placement/components/probation/FormEvaluation/Template1.vue b/src/modules/05_placement/components/probation/FormEvaluation/Template1.vue
index bda9a4009..80ba28d9f 100644
--- a/src/modules/05_placement/components/probation/FormEvaluation/Template1.vue
+++ b/src/modules/05_placement/components/probation/FormEvaluation/Template1.vue
@@ -56,7 +56,7 @@ const changeTab = (tabVal: string) => {
 };
 const addData = () => {
   router.push(
-      `/probation/detail/add/${personalId.value}/${assignId.value}`
+      `/probation/detail/addresult/${personalId.value}/${assignId.value}`
     );
 };
 </script>
diff --git a/src/modules/05_placement/components/probation/FormEvaluation/Template2.vue b/src/modules/05_placement/components/probation/FormEvaluation/Template2.vue
index 8c7ac36af..16d721f29 100644
--- a/src/modules/05_placement/components/probation/FormEvaluation/Template2.vue
+++ b/src/modules/05_placement/components/probation/FormEvaluation/Template2.vue
@@ -1,21 +1,74 @@
 <script setup lang="ts">
-import { ref, defineAsyncComponent } from "vue";
-const tab = ref<string>("save1");
-const changeTab = (tabVal: string) => {
-  tab.value = tabVal
-}
+import { ref, defineAsyncComponent, onMounted } from "vue";
+import http from "@/plugins/http";
+import config from "@/app.config";
+import { useQuasar } from "quasar";
+import { useRoute, useRouter } from "vue-router";
+import { useCounterMixin } from "@/stores/mixin";
 const Header = defineAsyncComponent(
-  () => import("@/modules/05_placement/components/probation/FormEvaluation/Header.vue")
+  () =>
+    import(
+      "@/modules/05_placement/components/probation/FormEvaluation/Header.vue"
+    )
 );
 const FormEvaluate = defineAsyncComponent(
-  () => import("@/modules/05_placement/components/probation/FormEvaluation/FormEvaluate.vue")
-)
-</script>  
+  () =>
+    import(
+      "@/modules/05_placement/components/probation/FormEvaluation/FormEvaluate.vue"
+    )
+);
+
+const router = useRouter();
+const route = useRoute();
+const mixin = useCounterMixin();
+const $q = useQuasar();
+const { showLoader, hideLoader, messageError, success } = mixin;
+const assignId = ref<string>(route.params.form.toString());
+const personalId = ref<string>(route.params.personalId.toString());
+
+const tab = ref<string>("save1");
+const tabs = ref<any>([]);
+const activeTab = ref<string>("tab2");
+
+const changeTab = (tabVal: string) => {
+  tab.value = tabVal;
+};
+
+onMounted(() => {
+  fecthAssign(assignId.value);
+});
+
+const fecthAssign = async (id: string) => {
+  showLoader();
+  await http
+    .get(config.API.evaluateCreate(id))
+    .then((res: any) => {
+      if (res.data.data.evaluate_no > 2) {
+        tabs.value = res.data.data.evaluate;
+      } else tabs.value.push({ no: 1 }, { no: 2 });
+    })
+    .catch((e: any) => {
+      console.log(e);
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+};
+const addData = () => {
+  router.push(`/probation/detail/addevalua/${personalId.value}/${assignId.value}`);
+};
+</script>
 
 <template>
-  <Header :change-tab="changeTab" />
+  <Header
+    :change-tab="changeTab"
+    :activeTab="activeTab"
+    :loop="tabs.length"
+    :add-data="addData"
+  />
 
-  <q-page-container>
+  <!-- <q-page-container>
     <q-tab-panels v-model="tab" animated>
       <q-tab-panel name="save1">
         <FormEvaluate :tab="tab" />
@@ -25,5 +78,16 @@ const FormEvaluate = defineAsyncComponent(
         <FormEvaluate :tab="tab"/>
       </q-tab-panel>
     </q-tab-panels>
+  </q-page-container> -->
+  <q-page-container>
+    <q-tab-panels v-model="tab" animated>
+      <q-tab-panel
+        v-for="tabName in tabs"
+        :key="tabName"
+        :name="'save' + tabName.no"
+      >
+        <FormEvaluate :tab="tab" />
+      </q-tab-panel>
+    </q-tab-panels>
   </q-page-container>
-</template>
\ No newline at end of file
+</template>
diff --git a/src/modules/05_placement/components/probation/FormEvaluation/Template2Format2.vue b/src/modules/05_placement/components/probation/FormEvaluation/Template2Format2.vue
index 85be758b1..e655c7f8d 100644
--- a/src/modules/05_placement/components/probation/FormEvaluation/Template2Format2.vue
+++ b/src/modules/05_placement/components/probation/FormEvaluation/Template2Format2.vue
@@ -1,9 +1,10 @@
 <script setup lang="ts">
-import { ref, defineAsyncComponent } from "vue";
-const tab = ref<string>("save1");
-const changeTab = (tabVal: string) => {
-  tab.value = tabVal;
-};
+import { ref, defineAsyncComponent, onMounted } from "vue";
+import http from "@/plugins/http";
+import config from "@/app.config";
+import { useQuasar } from "quasar";
+import { useRoute, useRouter } from "vue-router";
+import { useCounterMixin } from "@/stores/mixin";
 const Header = defineAsyncComponent(
   () =>
     import(
@@ -16,12 +17,56 @@ const FormEvaluateScore = defineAsyncComponent(
       "@/modules/05_placement/components/probation/FormEvaluation/FormEvaluateScore.vue"
     )
 );
+
+const router = useRouter();
+const route = useRoute();
+const mixin = useCounterMixin();
+const $q = useQuasar();
+const { showLoader, hideLoader, messageError, success } = mixin;
+const assignId = ref<string>(route.params.form.toString());
+const personalId = ref<string>(route.params.personalId.toString());
+
+const tab = ref<string>("save1");
+const tabs = ref<any>([]);
+const activeTab = ref<string>("tab2");
+
+onMounted(() => {
+  fecthAssign(assignId.value);
+});
+
+const fecthAssign = async (id: string) => {
+  showLoader();
+  await http
+    .get(config.API.evaluateChairman(id))
+    .then((res: any) => {
+      if (res.data.data.evaluate_no > 2) {
+        tabs.value = res.data.data.evaluate;
+      } else tabs.value.push({ no: 1 }, { no: 2 });
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+};
+const addData = () => {
+  router.push(`/probation/detail/addevaluascore/${personalId.value}/${assignId.value}`);
+};
+const changeTab = (tabVal: string) => {
+  tab.value = tabVal;
+};
 </script>
 
 <template>
-  <Header :change-tab="changeTab" />
+  <Header
+    :change-tab="changeTab"
+    :activeTab="activeTab"
+    :loop="tabs.length"
+    :add-data="addData"
+  />
 
-  <q-page-container>
+  <!-- <q-page-container>
     <q-tab-panels v-model="tab" animated>
       <q-tab-panel name="save1">
         <FormEvaluateScore :tab="tab" />
@@ -31,5 +76,16 @@ const FormEvaluateScore = defineAsyncComponent(
         <FormEvaluateScore :tab="tab" />
       </q-tab-panel>
     </q-tab-panels>
+  </q-page-container> -->
+  <q-page-container>
+    <q-tab-panels v-model="tab" animated>
+      <q-tab-panel
+        v-for="tabName in tabs"
+        :key="tabName"
+        :name="'save' + tabName.no"
+      >
+        <FormEvaluateScore :tab="tab" />
+      </q-tab-panel>
+    </q-tab-panels>
   </q-page-container>
 </template>
diff --git a/src/modules/05_placement/router.ts b/src/modules/05_placement/router.ts
index 7596d1944..adc8da847 100644
--- a/src/modules/05_placement/router.ts
+++ b/src/modules/05_placement/router.ts
@@ -27,6 +27,18 @@ const transfer = () =>
   import("@/modules/05_placement/components/Transfer/transferMain.vue");
 const transferbyId = () =>
   import("@/modules/05_placement/components/Transfer/transferRegistry.vue");
+const FormSaveResultAdd = () =>
+  import(
+    "@/modules/05_placement/components/probation/FormEvaluation/FormSaveResultAdd.vue"
+  );
+const FormEvaluateAdd = () =>
+  import(
+    "@/modules/05_placement/components/probation/FormEvaluation/FormEvaluateAdd.vue"
+  );
+const FormEvaluateScoreAdd = () =>
+  import(
+    "@/modules/05_placement/components/probation/FormEvaluation/FormEvaluateScoreAdd.vue"
+  );
 
 // คำสั่งช่วยราชการ/ส่งตัวกลับ
 const RepatriationOrder = () =>
@@ -49,10 +61,7 @@ const receiveDetail2 = () =>
   import("@/modules/05_placement/components/Receive/receiveDetail2.vue");
 const ReceiveAdd = () =>
   import("@/modules/05_placement/components/Receive/FormAdd.vue");
-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");
@@ -122,8 +131,8 @@ export default [
     },
   },
   {
-    path: "/probation/detail/add/:id/:form",
-    name: "probationFormAdd",
+    path: "/probation/detail/addresult/:id/:form",
+    name: "probationFormAddresult",
     component: FormSaveResultAdd,
     meta: {
       Auth: true,
@@ -131,6 +140,26 @@ export default [
       Role: "placement",
     },
   },
+  {
+    path: "/probation/detail/addevalua/:id/:form",
+    name: "probationFormAddevalua",
+    component: FormEvaluateAdd,
+    meta: {
+      Auth: true,
+      Key: [6.3],
+      Role: "placement",
+    },
+  },
+  {
+    path: "/probation/detail/addevaluascore/:id/:form",
+    name: "probationFormAddevaluascore",
+    component: FormEvaluateScoreAdd,
+    meta: {
+      Auth: true,
+      Key: [6.3],
+      Role: "placement",
+    },
+  },
   {
     path: "/probation/work/add",
     name: "probationWorkAdd",