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

# Conflicts:
#	src/api/05_placement/api.placement.ts
#	src/modules/05_placement/components/OrderPlacement/step/step01.vue

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}`,
@@ -56,11 +57,12 @@ export default {
   // order
   yearOptionsOrder: () => `${order}/order/fiscal-year`,
   listOrder: () => `${order}/order`,
+  detailOrder: (orderId: string) => `${order}/order/detail/${orderId}`,
   deleteOrder: (orderId: string) => `${order}/order/${orderId}`,
   typeOrder: () => `${order}/order/order-type`,
 
   createOrder: () => `${order}/order/detail`,
-  detailOrder: (orderId: string) => `${order}/order/detail/${orderId}`,
+
   examroundOrder: () => `${order}/order/detail/exam-round`,
 
   //ข้อมูลเลือกรายชื่อออกคำสั่ง, ลบรายชื่อ
@@ -96,4 +98,9 @@ export default {
     `${order}/order/attachment/file/${orderId}`,
 
   orderReady: (id: string) => `${order}/order/ready/${id}`,
+  attachmentOrder: (orderId: string) => `${order}/order/attachment/${orderId}`,
+
+  receiveData: () => `${receive}`,
+  receiveDataId: (id: string) => `${receive}/${id}`,
+  receivePosition: (id: string) => `${receive}/position/${id}`,
 };

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

@@ -6,7 +6,9 @@ export default {
     profile: (type: string, year: string) => `${retirement}/profile/${type}/${year}`,
     profileRetire: (retireProfileId: string) => `${retirement}/profile/${retireProfileId}`,
     listRetire: (retireId: string) => `${retirement}/${retireId}`,
-    createnote: () => `${retirement}/reason`,
+    createnote: () => `${retirement}/edit`,
-    reasonId: (retireId:string) => `${retirement}/reason/${retireId}`,
+    removeProfile: () => `${retirement}/remove`,
-    retirement:(type:string,year:string) => `${retirement}/${type}/${year}`
+    reasonId: (retireId: string) => `${retirement}/reason/${retireId}`,
+    retirement: (type: string, year: string) => `${retirement}/${type}/${year}`,
+    createProfile: () => `${retirement}/profile`,
 };

src/modules/05_placement/components/OrderPlacement/step/step01.vue

@@ -208,24 +208,10 @@
           ) " -->
         </div>
         <div class="col-xs-12 col-md-6">
-          <selector
+          <!-- <selector :class="getClass(true)" outlined dense lazy-rules v-model="position"
-            :class="getClass(true)"
+            :rules="[(val: string) => !!val || `${'กรุณาเลือกตำแหน่งรับสมัคร'}`]" hide-bottom-space
-            outlined
+            :label="`${'ตำแหน่งรับสมัคร'}`" @update:modelValue="clickEditRow" emit-value map-options option-label="name"
-            dense
+            :options="positionOption" option-value="id" use-input input-debounce="0" /> -->
-            lazy-rules
-            v-model="position"
-            :rules="[(val: string) => !!val || `${'กรุณาเลือกตำแหน่งรับสมัคร'}`]"
-            hide-bottom-space
-            :label="`${'ตำแหน่งรับสมัคร'}`"
-            @update:modelValue="clickEditRow"
-            emit-value
-            map-options
-            option-label="name"
-            :options="positionOption"
-            option-value="id"
-            use-input
-            input-debounce="0"
-          />
           <!-- @filter="(inputValue:string, doneFn:Function) =>
           filterSelector(inputValue, doneFn,'positionOption' ) " -->
         </div>
@@ -552,7 +538,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;

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) {

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>

src/modules/05_placement/components/Receive/receiveMain.vue

@@ -1,11 +1,17 @@
 <script setup lang="ts">
-import { ref, computed } from "vue";
+import { ref, computed, onMounted } from "vue";
 import type { QTableProps } from "quasar";
 import { useQuasar } from "quasar";
 import { useRouter } from "vue-router";
 import DialogFooter from "@/modules/05_placement/components/Receive/DialogFooter.vue";
 import DialogHeader from "@/modules/05_placement/components/Receive/DialogHeader.vue";
 import DialogOrgTree from "@/modules/05_placement/components/Receive/receiveModal.vue";
+import { useCounterMixin } from "@/stores/mixin";
+import http from "@/plugins/http";
+import config from "@/app.config";
+const mixin = useCounterMixin(); //เรียกฟังก์ชันกลาง
+const { showLoader, hideLoader, dateText, success, messageError, date2Thai } =
+  mixin;
 
 const selected = ref([]);
 const checkSelected = computed(() => {
@@ -13,6 +19,11 @@ const checkSelected = computed(() => {
     return true;
   }
 });
+
+const add = () => {
+  router.push(`/receive/add`);
+};
+
 const clickClose = () => {
   modal.value = false;
 };
@@ -29,21 +40,18 @@ const personal = ref<any[]>([]);
 const personalId = ref<string>("");
 const visibleColumns = ref<string[]>([
   "no",
+  "citizenId",
   "fullname",
-  "position",
+  "organizationName",
-  "positionLevel",
+  "birthday",
-  "oc",
-  "agency",
-  "status",
 ]);
+
 const visibleColumns2 = ref<string[]>([
   "no",
+  "citizenId",
   "fullname",
-  "position",
+  "organizationName",
-  "positionLevel",
+  "birthday",
-  "oc",
-  "agency",
-  "status",
 ]); //ค้นหา คอลัมน์ คอลัมน์ที่แสดง
 const filterKeyword = ref<string>("");
 const filterKeyword2 = ref<string>("");
@@ -53,103 +61,60 @@ const resetFilter = () => {
   filterKeyword2.value = "";
   filterRef.value.focus();
 };
+onMounted(() => {
+  fecthlistRecevice();
+});
+const listRecevice = ref<any>([]);
+const fecthlistRecevice = async () => {
+  showLoader();
+  await http
+    .get(config.API.receiveData())
+    .then((res) => {
+      let response = res.data.result;
+      listRecevice.value = response;
+      console.log(response);
+      rows.value = response.map((e: any) => ({
+        personalId: e.id,
+        citizenId: e.citizenId,
+        fullname: e.firstname + "  " + e.lastname,
+        organizationName:
+              e.organizationName +
+              " " +
+              e.organizationShortName +
+              " " +
+              e.positionNumber +
+              " " +
+              e.positionPath,
+            orgName: e.organizationName,
+            organizationShortName: e.organizationShortName,
+        positionNumber: e.positionNumber,
+        positionPath: e.positionPath,
+        birthday: date2Thai(e.dateOfBirth),
+      }));
+    })
+    .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",
+  //   personalId: "08db721d-add6-47b0-8a13-5f45d106e8d1",
-    fullname: "นางสาวอย พชช",
+  //   citizenId: "1234444332222",
-    position: "นักบริหาร",
+  //   fullname: "นางสาวอย พชช",
-    positionLevel: "ต้น",
+  //   organizationName: "นักจัดการงานทั่วไป",
-    oc: "สำนักงานคณะกรรมการข้าราชการกรุงเทพมหานคร",
+  //   orgName: "กลุ่มงานช่วยนักบริหาร",
-    agency: "กลุ่มงานกุมารเวชกรรม",
+  //   organizationShortName: "สกจ.",
-    status: "รออนุมัติ",
+  //   positionNumber: "กก. 1",
-  },
+  //   positionPath: "นักจัดการงานทั่วไป",
-  {
+  //   birthday: dateText(new Date("1989-09-03")),
-    personalId: "08db721d-adf2-4842-8056-1abb1539356e",
+  // },
-    fullname: "นางสาววญ สพ",
-    position: "นักจัดการงานทั่วไป",
-    positionLevel: "ปฏิบัติการ",
-    oc: "กลุ่มงานช่วยนักบริหาร",
-    agency: "กลุ่มงานข้อมูลเมือง",
-    status: "รออนุมัติ",
-  },
-  {
-    personalId: "08db721d-ae3d-4b8c-8cf0-b86b5a2ed8bb",
-    fullname: "นางสาววญ สพ",
-    position: "นักจัดการงานทั่วไป",
-    positionLevel: "ปฏิบัติการ",
-    oc: "กลุ่มงานช่วยนักบริหาร",
-    agency: "กลุ่มงานข้อมูลเมือง",
-    status: "รออนุมัติ",
-  },
-  {
-    personalId: "08db721d-afde-4ed4-8bc6-f0ad83e61c4d",
-    fullname: "นางสาววญ สพ",
-    position: "นักจัดการงานทั่วไป",
-    positionLevel: "ปฏิบัติการ",
-    oc: "กลุ่มงานช่วยนักบริหาร",
-    agency: "กลุ่มงานข้อมูลเมือง",
-    status: "รออนุมัติ",
-  },
-  {
-    personalId: "08db721d-b24e-45d7-8a65-3f28ef4948a4",
-    fullname: "นางสาววญ สพ",
-    position: "นักจัดการงานทั่วไป",
-    positionLevel: "ปฏิบัติการ",
-    oc: "กลุ่มงานช่วยนักบริหาร",
-    agency: "กลุ่มงานข้อมูลเมือง",
-    status: "รออนุมัติ",
-  },
-]);
-const rows2 = ref<any>([
-  {
-    personalId: "0a846508-4932-40de-9a9e-5b519492217c",
-    fullname: "นางสาวอย พชช",
-    position: "นักบริหาร",
-    positionLevel: "ต้น",
-    oc: "สำนักงานคณะกรรมการข้าราชการกรุงเทพมหานคร",
-    agency: "กลุ่มงานกุมารเวชกรรม",
-    status: "รออนุมัติ",
-  },
-  {
-    personalId: "08db721d-add6-47b0-8a13-5f45d106e8d1",
-    fullname: "นางสาววญ สพ",
-    position: "นักจัดการงานทั่วไป",
-    positionLevel: "ปฏิบัติการ",
-    oc: "กลุ่มงานช่วยนักบริหาร",
-    agency: "กลุ่มงานข้อมูลเมือง",
-    status: "รออนุมัติ",
-  },
-  {
-    personalId: "08db721d-adf2-4842-8056-1abb1539356e",
-    fullname: "นางสาววญ สพ",
-    position: "นักจัดการงานทั่วไป",
-    positionLevel: "ปฏิบัติการ",
-    oc: "กลุ่มงานช่วยนักบริหาร",
-    agency: "กลุ่มงานข้อมูลเมือง",
-    status: "รออนุมัติ",
-  },
-  {
-    personalId: "08db721d-adff-47b0-8762-41cd5c991001",
-    fullname: "นางสาววญ สพ",
-    position: "นักจัดการงานทั่วไป",
-    positionLevel: "ปฏิบัติการ",
-    oc: "กลุ่มงานช่วยนักบริหาร",
-    agency: "กลุ่มงานข้อมูลเมือง",
-    status: "รออนุมัติ",
-  },
-  {
-    personalId: "08db721d-ae22-424d-8f4a-87ba30cc3ee7",
-    fullname: "นางสาววญ สพ",
-    position: "นักจัดการงานทั่วไป",
-    positionLevel: "ปฏิบัติการ",
-    oc: "กลุ่มงานช่วยนักบริหาร",
-    agency: "กลุ่มงานข้อมูลเมือง",
-    status: "รออนุมัติ",
-  },
 ]);
 const columns = ref<QTableProps["columns"]>([
   {
@@ -161,6 +126,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 +145,22 @@ const columns = ref<QTableProps["columns"]>([
     style: "font-size: 14px",
   },
   {
-    name: "position",
+    name: "organizationName",
-    align: "left",
-    label: "ตำแหน่งในสายงาน",
-    sortable: true,
-    field: "position",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-  },
-  {
-    name: "positionLevel",
-    align: "left",
-    label: "ระดับ",
-    sortable: true,
-    field: "positionLevel",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-  },
-  {
-    name: "oc",
-    align: "left",
-    label: "สังกัด",
-    sortable: true,
-    field: "oc",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-  },
-  {
-    name: "agency",
     align: "left",
     label: "หน่วยงานที่รับโอน",
     sortable: true,
-    field: "agency",
+    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 +175,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 +194,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",
+    field: "birthday",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-  },
-  {
-    name: "oc",
-    align: "left",
-    label: "สังกัด",
-    sortable: true,
-    field: "oc",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-  },
-  {
-    name: "agency",
-    align: "left",
-    label: "หน่วยงานที่ขอโอนไป",
-    sortable: true,
-    field: "agency",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-  },
-  {
-    name: "status",
-    align: "left",
-    label: "สถานะ",
-    sortable: true,
-    field: "status",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
@@ -284,12 +217,42 @@ const columns2 = ref<QTableProps["columns"]>([
 
 const openModalTree = (id: string) => {
   personalId.value = id;
-  personal.value = [];
+  console.log(personalId.value);
+
+  personal.value = listRecevice.value.filter((e) => e.id === id);
   modalTree.value = true;
 };
 
+const openDelete = (id: string) => {
+  console.log(id);
+
+  $q.dialog({
+    title: `ลบข้อมูล`,
+    message: `ต้องการทำการลบข้อมูลนี้ใช่หรือไม่?`,
+    cancel: "ยกเลิก",
+    ok: "ยืนยัน",
+    persistent: true,
+  })
+    .onOk(async () => {
+      showLoader();
+      await http
+        .delete(config.API.receiveDataId(id))
+        .then((res) => {
+          success($q, "ลบข้อมูลสำเร็จ");
+        })
+        .catch((e) => {
+          messageError($q, e);
+        })
+        .finally(() => {
+          fecthlistRecevice();
+          hideLoader();
+        });
+    })
+    .onCancel(() => {});
+};
+
 const closeModalTree = async () => {
-  //   await getTable();
+  await fecthlistRecevice();
   modalTree.value = false;
 };
 
@@ -306,6 +269,10 @@ const nextPage = (row: any) => {
     <div class="row q-pa-md">
       <div class="col-12">
         <div class="row col-12">
+          <q-btn flat round color="primary" @click="add" icon="mdi-plus">
+            <q-tooltip>เพิ่มข้อมูล</q-tooltip>
+          </q-btn>
+
           <q-btn
             @click="popup()"
             size="14px"
@@ -377,6 +344,13 @@ 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)"
+                >
+                  {{ props.row.citizenId }}
+                </q-td>
                 <q-td
                   key="fullname"
                   :props="props"
@@ -385,27 +359,53 @@ const nextPage = (row: any) => {
                   {{ props.row.fullname }}
                 </q-td>
                 <q-td
-                  key="position"
+                  key="organizationName"
                   :props="props"
                   @click="nextPage(props.row)"
                 >
-                  {{ props.row.position }}
+                  <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"
+                  key="birthday"
                   :props="props"
                   @click="nextPage(props.row)"
                 >
-                  {{ props.row.positionLevel }}
+                  {{ props.row.birthday }}
-                </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>
                 <q-td auto-width>
                   <q-btn
@@ -441,6 +441,21 @@ const nextPage = (row: any) => {
                             >เลือกหน่วยงานที่รับโอน</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>
                   </q-btn>
@@ -538,23 +553,54 @@ const nextPage = (row: any) => {
               <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">
+              <q-td
-                {{ props.row.position }}
+                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">
+              <q-td key="birthday" :props="props" @click="nextPage(props.row)">
-                {{ props.row.positionLevel }}
+                {{ props.row.birthday }}
-              </q-td>
-              <q-td key="oc" :props="props">
-                {{ props.row.oc }}
-              </q-td>
-              <q-td key="agency" :props="props">
-                {{ props.row.agency }}
-              </q-td>
-              <q-td key="status" :props="props">
-                {{ props.row.status }}
               </q-td>
             </q-tr>
           </template>
@@ -574,9 +620,10 @@ const nextPage = (row: any) => {
 
   <DialogOrgTree
     v-model:modal="modalTree"
-    :personalId="personalId"
     :close="closeModalTree"
     :personal="personal"
+    :personalId="personalId"
   />
+  <!-- :personalId="personalId" -->
 </template>
 <style scoped lang="scss"></style>

src/modules/05_placement/components/Receive/receiveModal.vue

@@ -153,15 +153,18 @@ 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,
+        // personalId: props.personalId,
-        containDate: dataForm.containDate,
+        recruitDate: dataForm.containDate,
         posNoId: dataForm.posNoId,
         positionId: dataForm.positionId,
         positionLevelId: dataForm.positionLevelId,
@@ -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, "บันทึกสำเร็จ");
@@ -374,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;
@@ -382,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));

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 {

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

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") {
+    if (props.dataProfile.type === "OFFICER") {
-      type.value = type_params;
+      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);

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 type_params = route.params.type;
-const year_params = route.params.year;
+// const year_params = route.params.year;
-const retireld_params = route.params.id;
+const retireld_params = route.params.retirementId;
 
 const modalNote = ref<boolean>(false);
 const note = ref<string>("");
@@ -159,22 +159,28 @@ const visibleColumns = ref<string[]>([
   "bureau",
 ]);
 
+const action = ref<string>("");
+
 onMounted(() => {
-  // console.log(route.params);
+  retireld.value = retireld_params.toString();
-  if (retireld_params === undefined) {
+  console.log(retireld_params);
-    fecthlistprofile(type_params, year_params);
+  fecthlistprofile(retireld.value);
-  } else {
-    fecthlist(retireld_params);
-  }
 });
+const round = ref<number>();
+const typeReport = ref<string>("");
+const statusReport = ref<boolean>();
+const dataProfile = ref<Object>([]);
 // fecthlist
-const fecthlistprofile = async (type: any, year: any) => {
+const fecthlistprofile = async (id: string) => {
   showLoader();
   await http
-    .get(config.API.profile(type, year))
+    .get(config.API.listRetire(id))
-    .then((res: any) => {
+    .then((res) => {
-      // console.log(res);
+      console.log(res);
-      retireld.value = res.data.result.id;
+      dataProfile.value = res.data.result;
+      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,
         profileId: e.profileId,
@@ -187,37 +193,12 @@ const fecthlistprofile = async (type: any, year: any) => {
         positionNumber: e.posNoEmployee,
         positionLavel: e.positionEmployeeLevel,
         bureau: e.oc,
+        reason: e.reason,
+        remove: e.remove,
       }));
+      console.log(statusReport.value);
     })
-    .catch((e: any) => {
+    .catch((e) => {
-      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) => {
       messageError($q, e);
     })
     .finally(() => {
@@ -225,10 +206,7 @@ const fecthlist = async (retireld: any) => {
     });
 };
 // DelProfile
-const clickDelete = (prop: any) => {
+const clickDelete = () => {
-  console.log(prop);
-
-  let retireProfileId = prop.profileId;
   $q.dialog({
     title: "ยืนยันการลบข้อมูล",
     message: "ต้องการลบข้อมูลนี้ใช่หรือไม่?",
@@ -240,7 +218,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 +229,30 @@ const clickDelete = (prop: any) => {
           messageError($q, e);
         })
         .finally(async () => {
-          if (retireld_params === undefined) {
+          retireld.value = retireld_params.toString();
-            await fecthlistprofile(type_params, year_params);
+          await fecthlistprofile(retireld.value);
-          } else await fecthlist(retireld_params);
+          modalNote.value = false;
         });
     })
-    .onCancel(() => { })
+    .onCancel(() => {})
-    .onDismiss(() => { });
+    .onDismiss(() => {});
 };
 // note
-const fetchReason = async (prop: string) => {
+// const fetchReason = async (prop: string) => {
-  await http
+//   await http
-    .get(config.API.reasonId(prop))
+//     .get(config.API.reasonId(prop))
-    .then((res: any) => {
+//     .then((res: any) => {
-      console.log(res.data.result);
+//       console.log(res.data.result);
-      note.value = res.data.result.reason;
+//       note.value = res.data.result.reason;
-      retireProfileId.value = res.data.result.id;
+//       retireProfileId.value = res.data.result.id;
-    })
+//     })
-    .catch((e: any) => {
+//     .catch((e: any) => {
-      messageError($q, e);
+//       messageError($q, e);
-    });
+//     });
-};
+// };
-
 const saveNote = () => {
+  console.log(retireProfileId.value, note.value);
+
   $q.dialog({
     title: "ยืนยันการบันทึกข้อมูลข้อมูล",
     message: "ต้องการบันทึกข้อมูลนี้ใช่หรือไม่?",
@@ -281,7 +263,6 @@ const saveNote = () => {
     persistent: true,
   })
     .onOk(async () => {
-      // console.log("บันทึกข้อมูล");
       await http
         .post(config.API.createnote(), {
           retireProfileId: retireProfileId.value,
@@ -294,17 +275,18 @@ const saveNote = () => {
           messageError($q, e);
         })
         .finally(async () => {
-          await fecthlist(retireld_params);
+          retireld.value = retireld_params.toString();
+          fecthlistprofile(retireld.value);
           modalNote.value = false;
         });
     })
-    .onCancel(() => { })
+    .onCancel(() => {})
-    .onDismiss(() => { });
+    .onDismiss(() => {});
 };
 
 const UpdateListId = (retireld: string, pId: string) => {
   profileId.value = pId;
-  fecthlist(retireld);
+  fecthlistprofile(retireld);
   console.log("profileId", profileId.value);
 };
 const backHistory = () => {
@@ -342,11 +324,11 @@ const visibleNote = computed(() => {
 //     .onCancel(() => {})
 //     .onDismiss(() => {});
 // };
-// const classrow = (prop: any) => {
+const classrow = (prop: any) => {
-//   if (profileId.value!=='' && prop.profileId === profileId.value) {
+  if (profileId.value !== "" && prop.profileId === profileId.value) {
-//     return "color: #26a69a;";
+    return "color: #26a69a;";
-//   } else return "";
+  } else return "";
-// };
+};
 const paging = ref<boolean>(true);
 const pagination = ref({
   sortBy: "order",
@@ -362,13 +344,32 @@ 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
+          :dataProfile="dataProfile"
+          :retireld="retireld"
+          :profile-id="profileId"
+          :UpdateListId="UpdateListId"
+          v-if="
+            statusReport === false &&
+            (typeReport == 'ADD' || typeReport == '' || typeReport == null)
+          "
+        />
+
         <!-- <q-btn flat round style="color: #016987;" icon="save" @click="saveList">
           <q-tooltip>บันทึกข้อมูล</q-tooltip>
         </q-btn> -->
@@ -397,15 +398,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"
+          <q-input
-            class="q-ml-sm">
+            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"
+          <q-select
-            emit-value map-options :options="columns" option-value="name" options-cover style="min-width: 150px"
+            v-model="visibleColumns"
-            class="gt-xs q-ml-sm">
+            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 +436,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"
+        <q-table
-          :filter="filter" :visible-columns="visibleColumns" no-data-label="ไม่มีข้อมูล"
+          flat
-          :pagination-label="paginationLabel" v-model:pagination="pagination">
+          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 +461,44 @@ 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' ||
+                    typeReport === null ||
+                    typeReport === '') &&
+                  statusReport === false
+                "
+              />
+              <q-th
+                auto-width
+                v-if="
+                  (typeReport === 'REMOVE' ||
+                    typeReport === null ||
+                    typeReport === '') &&
+                  statusReport === false
+                "
+              />
             </q-tr>
           </template>
           <template v-slot:body="props">
-            <q-tr :props="props" class="cursor-pointer" :style="props.row.profileId === profileId && 'color: #26a69a;'"
+            <q-tr
-              @click="
+              :props="props"
-                fetchReason(props.row.id), (modalNote = true), (note = '')
+              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> -->
-              <q-td key="name" :props="props">{{ props.row.fixname + props.row.name }}</q-td>
+              <q-td key="name" :props="props">{{
-              <q-td class="table_ellipsis" key="organizationOrganization" :props="props">{{
+                props.row.fixname + props.row.name
-                props.row.organizationOrganization
               }}</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 +517,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 +535,79 @@ 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"
+                <!-- <q-btn
-                  @click="router.push(`/registry/${props.row.profileId}`)">
+                  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
+                v-if="
+                  (typeReport === 'EDIT' ||
+                    typeReport === null ||
+                    typeReport === '') &&
+                  statusReport === false
+                "
+              >
+                <q-btn
+                  flat
+                  round
+                  color="primary"
+                  icon="mdi-pencil"
+                  dense
+                  @click.stop="
+                    (modalNote = true),
+                      (note = props.row.reason),
+                      (action = 'edit'),
+                      (retireProfileId = props.row.id)
+                  "
+                >
+                  <q-tooltip>กรอกเหตุผล</q-tooltip>
                 </q-btn>
               </q-td>
-              <q-td auto-width>
+              <q-td
-                <q-btn flat round class="text-red-14" icon="mdi-delete" dense
+                auto-width
-                  @click="clickDelete(props.row)"><q-tooltip>ลบข้อมูล</q-tooltip></q-btn>
+                v-if="
+                  (typeReport === 'REMOVE' ||
+                    typeReport === null ||
+                    typeReport === '') &&
+                  statusReport === false
+                "
+              >
+                <q-btn
+                  flat
+                  round
+                  class="text-red-14"
+                  icon="mdi-delete"
+                  dense
+                  @click.stop="
+                    (modalNote = true),
+                      (action = 'delete'),
+                      (note = props.row.reason),
+                      (retireProfileId = props.row.id)
+                  "
+                  ><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"
+            <q-pagination
-              boundary-links direction-links></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 +619,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"
+          <q-btn
-            style="color: #ff8080; background-color: #ffdede" />
+            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 || 'กรุณากรอกเหตุผล']"
+        <q-input
-          :label="`${'กรอกเหตุผล'}`" type="textarea" />
+          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>

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-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-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')

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

@@ -1,8 +1,9 @@
-interface resMain{
+interface resMain {
-id:string;
+    id: string;
-createdAt:Date;
+    createdAt: Date;
-year:string;
+    year: string;
-round:number;
+    round: number;
-total:number;
+    total: number;
+    typeReport: String;
 }
-export type {resMain};
+export type { resMain };

src/modules/06_retirement/router.ts

@@ -22,8 +22,8 @@ export default [
     },
   },
   {
-    path: "/retirement/list/:type/:year",
+    path: "/retirement/:retirementId",
-    name: "retirement/list/",
+    name: "retirementid",
     component: Listretirement,
     meta: {
       Auth: true,

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">
@@ -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
@@ -175,6 +178,95 @@
       </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
+                  :rules="[(val) => !!val || 'กรุณาเลือกรอบ']"
+                />
+              </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
+                  :rules="[(val) => !!val || 'กรุณาเลือกรอบ']"
+              /></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 +282,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,8 +296,16 @@ 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"]); //ค้นหา คอลัมน์ คอลัมน์ที่แสดง
+const visibleColumns = ref<string[]>([
+  "no",
+  "Date",
+  "retireNumber",
+  "typeReport",
+]); //ค้นหา คอลัมน์ คอลัมน์ที่แสดง
 
 // หัวตาราง
 const columns = ref<QTableProps["columns"]>([
@@ -213,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",
@@ -222,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",
@@ -231,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",
+  },
 ]);
 
 // ข้อมูลตาราง (จำลอง)
@@ -243,36 +348,44 @@ const currentYear = new Date().getFullYear();
 const rows = ref<resMain[]>([]);
 const tab = ref<any>("officer");
 const visibleColumns2 = ref<string[]>(["no", "name", "retireNumber"]);
-const getYear = () => {
+const yearOptions = reactive<any[]>([]);
-  yearOptions.length = 0;
+const filteryear = () => {
-  yearOptions.push(currentYear + 543);
+  console.log(yearOptions);
-  // console.log(yearOptions);
+  yearOptions.push({ id: currentYear, name: currentYear + 543 });
-  get(type.value, currentYear);
+  console.log(yearOptions[0].id);
-  fiscalyear.value = currentYear + 543;
+  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) => ({
+      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;
+      rows.value.sort((a, b) => a.round - b.round);
+    })
+    .catch((e) => {
+      messageError($q, e);
     })
-    .catch((e) => {})
     .finally(() => {
       hideLoader();
     });
 };
 onMounted(() => {
-  getYear();
+  filteryear();
 });
 // หัวตาราง2
 const columns2 = ref<QTableProps["columns"]>([
@@ -360,34 +473,73 @@ const rows2 = ref<FormMainProbation2[]>([
 // };
 
 const clickAdd = () => {
-  //   modal.value = true;
+  // console.log(rows.value.length, type.value);
-  $q.dialog({
+  if (rows.value.length == 0) {
-    title: 'เพิ่มประกาศ',
+    $q.dialog({
-    message: 'เลือกประกาศที่ต้องการเพิ่มข้อมูล',
+      title: "ยืนยันการเพิ่มข้อมูลประกาศเกษียณ",
-    options: {
+      message: "ต้องการเพิ่มข้อมูลประกาศเกษียณใช่หรือไม่?",
-      type: 'radio',
+      cancel: {
-      model: 'opt1',
+        flat: true,
-      // inline: true
+        color: "negative",
-      items: [
+      },
-        { label: 'ประกาศเพิ่มผู้เกษียณ', value: 'ADD'},
+      persistent: true,
-        { label: 'ประกาศแก้ไขข้อมูลผู้เกษียน', value: 'EDIT' },
-        { label: 'ประกาศยกเลิกผู้เกษียณ', value: 'REMOVE' }
-      ]
-    },
-    cancel: {
-      flat: true,
-      color: "negative",
-    },
-    persistent: true,
-    }).onOk(data => {
-      console.log("option===>", data)
-      router.push(`/retirement/list/${type.value}/${currentYear}`);
-    }).onCancel(() => {
-    }).onDismiss(() => {
     })
-  /* $q.dialog({
+      .onOk(async () => {
-    title: "ยืนยันการเพิ่มข้อมูลประกาศเกษียณ",
+        let data = { type: type.value, year: currentYear };
-    message: "ต้องการเพิ่มข้อมูลประกาศเกษียณใช่หรือไม่?",
+        await cerateRetirement(data);
+      })
+      .onCancel(() => {})
+      .onDismiss(() => {});
+  } else {
+    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 +547,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>([
+// const fiscalyearOP = ref<any>([
-  { id: 1, name: "ทั้งหมด" },
+//   { id: 1, name: "ทั้งหมด" },
-  { id: 2, name: "2565" },
+//   { id: 2, name: "2565" },
-  { id: 3, name: "2565" },
+//   { id: 3, name: "2565" },
-]);
+// ]);
 
 // ค้นหาในตาราง
 const filterKeyword = ref<string>("");
@@ -435,18 +596,34 @@ 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);
 });
+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>
 .filter-card {
   background-color: #f1f1f1b0;
 }
+.q-item-custom {
+  padding: 0;
+}
 
 .toggle-expired-account {
   font-size: 12px;