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] =?UTF-8?q?update=20=E0=B8=82=E0=B8=AD=E0=B9=82=E0=B8=AD?=
 =?UTF-8?q?=E0=B8=99=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

---
 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",