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 01/12] =?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 02/12] 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 03/12] =?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 04/12] =?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 05/12] =?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 06/12] =?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 07/12] =?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 08/12] 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 09/12] =?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 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 10/12] 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 11/12] =?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 12/12] =?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')