ประกาศเกษียณอายุราชการ

src/modules/06_retirement/components/ListRetirement/AddList.vue

@@ -8,10 +8,9 @@ import { useRoute } from "vue-router";
 
 const $q = useQuasar(); //ใช้ noti quasar
 const mixin = useCounterMixin();
-const { messageError, success, showLoader, hideLoader } = mixin;
+const { messageError, success, showLoader, hideLoader, dialogConfirm } = mixin;
 const route = useRoute();
 
-const type_params = route.params.type;
 const retireld_params = route.params.id;
 const props = defineProps({
   retireld: String,
@@ -65,57 +64,16 @@ const columns = ref<any["columns"]>([
     align: "left",
   },
 ]);
-const rows = ref<any>([
+const rows = ref<any>([]);
-  // {
-  //   fullname: "นายใจดี  ยอดใจ",
-  //   position: "นักวิชาการพัสดุ",
-  //   level: "ปฎิบัติการ",
-  //   affiliation: "กลุ่มงานโครงสร้างและอัตรากำลัง ๒",
-  // },
-  // {
-  //   fullname: "นายจักกริน  บัณฑิต",
-  //   position: "นักวิชาการพัสดุ",
-  //   level: "ปฎิบัติการ",
-  //   affiliation: "กลุ่มงานโครงสร้างและอัตรากำลัง ๒",
-  // },
-  // {
-  //   fullname: "นายจักกริน  บัณฑิต",
-  //   position: "นักวิชาการพัสดุ",
-  //   level: "ปฎิบัติการ",
-  //   affiliation: "กลุ่มงานโครงสร้างและอัตรากำลัง ๒",
-  // },
-  // {
-  //   fullname: "นายจักกริน  บัณฑิต",
-  //   position: "นักวิชาการพัสดุ",
-  //   level: "ปฎิบัติการ",
-  //   affiliation: "กลุ่มงานโครงสร้างและอัตรากำลัง ๒",
-  // },
-  // {
-  //   fullname: "นายจักกริน  บัณฑิต",
-  //   position: "นักวิชาการพัสดุ",
-  //   level: "ปฎิบัติการ",
-  //   affiliation: "กลุ่มงานโครงสร้างและอัตรากำลัง ๒",
-  // },
-  // {
-  //   fullname: "นายจักกริน  บัณฑิต",
-  //   position: "นักวิชาการพัสดุ",
-  //   level: "ปฎิบัติการ",
-  //   affiliation: "กลุ่มงานโครงสร้างและอัตรากำลัง ๒",
-  // },
-  // {
-  //   fullname: "นายจักกริน  บัณฑิต",
-  //   position: "นักวิชาการพัสดุ",
-  //   level: "ปฎิบัติการ",
-  //   affiliation: "กลุ่มงานโครงสร้างและอัตรากำลัง ๒",
-  // },
-]);
 
 watch(modal, () => {
   if (modal.value === true) {
     retireld.value = props.retireld;
-    if (props.dataProfile.type === "OFFICER") {
+    if (props.dataProfile) {
-      type.value = "officer";
+      if (props.dataProfile.type === "OFFICER") {
-    } else type.value = "all";
+        type.value = "officer";
+      } else type.value = "all";
+    }
 
     fecthlistRetire();
   }
@@ -146,14 +104,11 @@ const findlist = async (id: string) => {
       { criteriaType: "employee_class", criteriaValue: "perm" },
     ];
   }
-  // console.log(data);
-
   await http
     .post(config.API.profileSearchNewOcIdType(id, type.value), {
       criterias: data,
     })
     .then((res) => {
-      // console.log(res.data.result);
       rows.value = res.data.result.map((e: any) => ({
         id: e.id,
         fullname: e.fullname,
@@ -172,25 +127,13 @@ const findlist = async (id: string) => {
 
 // putlist
 const clickAdd = (props: any) => {
-  // console.log("props===>",props.row.id)
   if (retireld.value == undefined) {
     retireld.value = retireld_params;
   }
-
   let data: any = props.row.id;
-  // console.log("retireld & profileId", retireld.value, data);
+  dialogConfirm(
-
+    $q,
-  $q.dialog({
+    async () => {
-    title: "ยืนยันการเพิ่มข้อมูล",
-    message: "ต้องการเพิ่มข้อมูลนี้ใช่หรือไม่?",
-    cancel: {
-      flat: true,
-      color: "negative",
-    },
-    persistent: true,
-  })
-    .onOk(async () => {
-      // console.log("เพิ่มข้อมูล");
       await http
         .put(config.API.profileRetire(retireld.value), { profileId: data })
         .then(() => {
@@ -201,12 +144,12 @@ const clickAdd = (props: any) => {
           messageError($q, e);
         })
         .finally(() => {
-          // fecthlistRetire();
           modal.value = false;
         });
-    })
+    },
-    .onCancel(() => {})
+    "ยืนยันการเพิ่มข้อมูล",
-    .onDismiss(() => {});
+    "ต้องการเพิ่มข้อมูลนี้ใช่หรือไม่ ?"
+  );
 };
 // update retireld
 const updateListData = (retireld: string, pId: string) => {
@@ -294,9 +237,6 @@ const paginationLabel = (start: number, end: number, total: number) => {
           <template v-slot:body="props">
             <q-tr :props="props" class="cursor-pointer">
               <q-td>{{ props.rowIndex + 1 }}</q-td>
-              <!-- <q-td key="order" :props="props">
-                {{ props.row.order }}
-              </q-td> -->
               <q-td key="fullname" :props="props">
                 {{ props.row.fullname }}
               </q-td>

src/modules/06_retirement/components/ListRetirement/TableList.vue

@@ -14,7 +14,14 @@ const route = useRoute();
 const router = useRouter();
 const $q = useQuasar();
 const mixin = useCounterMixin();
-const { showLoader, hideLoader, messageError, success, dialogConfirm } = mixin;
+const {
+  showLoader,
+  hideLoader,
+  messageError,
+  success,
+  dialogConfirm,
+  dialogRemove,
+} = mixin;
 
 const retireld_params = route.params.retirementId;
 const modalNote = ref<boolean>(false);
@@ -26,7 +33,6 @@ const filter = ref<string>("");
 const statusUpload = ref<boolean>();
 const modalEdit = ref<boolean>(false);
 const textReport = ref<string>("");
-
 const columns = ref<any["columns"]>([
   {
     name: "order",
@@ -161,7 +167,6 @@ const fecthlistprofile = async (id: string) => {
   await http
     .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;
@@ -182,7 +187,6 @@ const fecthlistprofile = async (id: string) => {
         reason: e.reason,
         remove: e.remove,
       }));
-      console.log(statusReport.value);
       if (statusReport.value == false) {
         fecthCheck(retireld.value);
       } else statusUpload.value = true;
@@ -194,6 +198,7 @@ const fecthlistprofile = async (id: string) => {
       hideLoader();
     });
 };
+// เช็คสถานะการอัพโหลด
 const fecthCheck = async (id: string) => {
   await http
     .get(config.API.checkfileupload(id))
@@ -201,21 +206,14 @@ const fecthCheck = async (id: string) => {
       statusUpload.value = res.data.result;
     })
     .catch((err) => {
-      console.log(err);
+      messageError($q, err);
     });
 };
 // DelProfile
 const clickDelete = () => {
-  $q.dialog({
+  dialogRemove(
-    title: "ยืนยันการลบข้อมูล",
+    $q,
-    message: "ต้องการลบข้อมูลนี้ใช่หรือไม่?",
+    async () => {
-    cancel: {
-      flat: true,
-      color: "negative",
-    },
-    persistent: true,
-  })
-    .onOk(async () => {
       await http
         .post(config.API.removeProfile(), {
           retireProfileId: retireProfileId.value,
@@ -232,36 +230,16 @@ const clickDelete = () => {
           await fecthlistprofile(retireld.value);
           modalNote.value = false;
         });
-    })
-    .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 saveNote = () => {
-  console.log(retireProfileId.value, note.value);
-
-  $q.dialog({
-    title: "ยืนยันการบันทึกข้อมูลข้อมูล",
-    message: "ต้องการบันทึกข้อมูลนี้ใช่หรือไม่?",
-    cancel: {
-      flat: true,
-      color: "negative",
     },
-    persistent: true,
+    "ยืนยันการลบข้อมูล",
-  })
+    "ต้องการลบข้อมูลนี้ใช่หรือไม่ ?"
-    .onOk(async () => {
+  );
+};
+// แก้ไข้ข้อมูล
+const saveNote = () => {
+  dialogConfirm(
+    $q,
+    async () => {
       await http
         .post(config.API.createnote(), {
           retireProfileId: retireProfileId.value,
@@ -278,15 +256,15 @@ const saveNote = () => {
           fecthlistprofile(retireld.value);
           modalNote.value = false;
         });
-    })
+    },
-    .onCancel(() => {})
+    "ยืนยันการบันทึกข้อมูล",
-    .onDismiss(() => {});
+    "ต้องการบันทึกข้อมูลนี้ใช่หรือไม่ ?"
+  );
 };
 
 const UpdateListId = (retireld: string, pId: string) => {
   profileId.value = pId;
   fecthlistprofile(retireld);
-  console.log("profileId", profileId.value);
 };
 const backHistory = () => {
   window.history.back();
@@ -299,13 +277,11 @@ const visibleNote = computed(() => {
 const uploadFile = async (event: any) => {
   showLoader();
   const selectedFile = event;
-  console.log(selectedFile);
   const formdata = new FormData();
   formdata.append("file", selectedFile);
-
   await http
     .put(config.API.fileRetirement(retireld.value.toString()), formdata)
-    .then((res) => {
+    .then(() => {
       success($q, "เพิ่มไฟล์สำเร็จ");
     })
     .catch((err) => {
@@ -326,9 +302,6 @@ const downloadAttachment = async (type: string, id: string) => {
       responseType: "blob",
     })
     .then(async (res) => {
-      const data = res.data.result;
-      console.log(data);
-      let list: any[] = [];
       downloadFile(res, `${"รายชื่อผู้เกษียณอายุราชการ"}.${type}`);
     })
     .catch((e) => {
@@ -562,6 +535,7 @@ const paginationLabel = (start: number, end: number, total: number) => {
                   statusUpload !== true
                 "
               />
+              <q-th auto-width v-else></q-th>
               <q-th
                 auto-width
                 v-if="
@@ -572,6 +546,7 @@ const paginationLabel = (start: number, end: number, total: number) => {
                   statusUpload !== true
                 "
               />
+              <q-th auto-width v-else></q-th>
             </q-tr>
           </template>
           <template v-slot:body="props">
@@ -639,6 +614,7 @@ const paginationLabel = (start: number, end: number, total: number) => {
                   <q-tooltip>กรอกเหตุผล</q-tooltip>
                 </q-btn>
               </q-td>
+              <q-td auto-width v-else></q-td>
               <q-td
                 auto-width
                 v-if="
@@ -664,6 +640,7 @@ const paginationLabel = (start: number, end: number, total: number) => {
                   ><q-tooltip>ลบข้อมูล</q-tooltip></q-btn
                 >
               </q-td>
+              <q-td auto-width v-else></q-td>
             </q-tr>
           </template>
           <template v-slot:pagination="scope">

src/modules/06_retirement/components/ListRetirement/popupAdd.vue

@@ -0,0 +1,200 @@
+<script setup lang="ts">
+import { ref } from "vue";
+import { useQuasar } from "quasar";
+import { useCounterMixin } from "@/stores/mixin";
+import { useRouter } from "vue-router";
+import http from "@/plugins/http";
+import config from "@/app.config";
+
+const $q = useQuasar();
+const mixin = useCounterMixin();
+const { dialogConfirm, messageError } = mixin;
+const router = useRouter();
+
+const props = defineProps({
+  type: {
+    type: String,
+  },
+  year: {
+    type: Number,
+  },
+  rows: {
+    type: Object,
+  },
+  actionOptio: {
+    type: Object,
+  },
+  checkjson: {
+    type: Boolean,
+  },
+});
+
+const modal = ref<boolean>(false);
+const radio = ref<string>("");
+const actionOption = ref<any>([]);
+const action = ref<string>("");
+
+// เพิ่มประกาศเกษียณอายุราชการ
+const clickAdd = () => {
+  if (props.rows) {
+    // ครั้งแรกจะเพิ่มเลย
+    if (props.rows.length == 0) {
+      dialogConfirm(
+        $q,
+        async () => {
+          let data = { type: props.type, year: props.year };
+          await cerateRetirement(data);
+        },
+        "ยืนยันการเพิ่มข้อมูลประกาศเกษียณ",
+        "ต้องการเพิ่มข้อมูลประกาศเกษียณใช่หรือไม่ ?"
+      );
+    } else {
+      modal.value = true;
+      action.value = "";
+      radio.value = "";
+      if (props.actionOptio) {
+        actionOption.value = props.actionOptio;
+      }
+    }
+  }
+};
+// เลือกรายการเพิ่ม
+const clickSelect = async (action: string) => {
+  dialogConfirm(
+    $q,
+    async () => {
+      let data = {
+        type: props.type,
+        year: props.year,
+        retireHistoryId: action,
+        option: radio.value,
+      };
+
+      await cerateRetirement(data);
+    },
+    "ยืนยันการแก้ไขข้อมูลประกาศเกษียณ",
+    "ต้องการแก้ไขข้อมูลประกาศเกษียณใช่หรือไม่ ?"
+  );
+};
+// เพิ่มรอบประกาศเกษียณอายุราชการ API
+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);
+    });
+};
+</script>
+<template>
+  <q-btn
+    size="12px"
+    flat
+    round
+    color="add"
+    icon="mdi-plus"
+    @click="clickAdd"
+    :disable="checkjson"
+  >
+    <q-tooltip>เพิ่ม</q-tooltip>
+  </q-btn>
+  <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)"
+          :disable="radio === '' || (action === '' && radio !== 'ADD')"
+        />
+      </q-card-actions>
+    </q-card>
+  </q-dialog>
+</template>
+
+<style scoped></style>

src/modules/06_retirement/storeRetirement.ts

@@ -1,6 +1,8 @@
 import { defineStore } from "pinia";
 import { ref } from 'vue'
 export const useDataStoreRetirement = defineStore("retirementDatastore", () => {
+  const taboption = ref<any>([{ name: "officer", id: "officer", label: 'ขรก.กทม.สามัญ' },
+  { name: "employee", id: "employee", label: "ลูกจ้างประจำ" }])
   const tab = ref<any>("officer");
   const type = ref<string>("officer");
   const clickTab = (role: string) => {
@@ -9,6 +11,7 @@ export const useDataStoreRetirement = defineStore("retirementDatastore", () => {
   return {
     tab,
     type,
-    clickTab
+    clickTab,
+    taboption
   };
 });

src/modules/06_retirement/views/Main.vue

@@ -1,291 +1,6 @@
-<template>
-  <div class="toptitle text-dark col-12 row items-center">
-    ประกาศเกษียณอายุราชการ
-  </div>
-  <q-card flat bordered class="col-12 q-mt-sm">
-    <div class="row col-12">
-      <q-tabs
-        v-model="tab"
-        dense
-        class="text-grey"
-        active-color="primary"
-        active-class="bg-teal-1"
-        indicator-color="primary"
-        align="left"
-      >
-        <q-tab
-          name="officer"
-          label="ขรก.กทม.สามัญ"
-          @click="clickTab('officer')"
-        />
-        <q-tab
-          name="employee"
-          label="ลูกจ้างประจำ"
-          @click="clickTab('employee')"
-        />
-      </q-tabs>
-    </div>
-    <q-separator />
-    <div class="col-12 row q-pa-md">
-      <div class="row col-12">
-        <div class="row col-12 q-col-gutter-sm">
-          <q-select
-            v-model="fiscalyear"
-            label="ปีงบประมาณ"
-            dense
-            emit-value
-            map-options
-            :options="yearOptions"
-            option-value="id"
-            option-label="name"
-            lazy-rules
-            hide-bottom-space
-            :readonly="false"
-            :borderless="false"
-            :outlined="true"
-            :hide-dropdown-icon="false"
-            style="min-width: 150px"
-          />
-          <div>
-            <q-btn
-              @click="clickAdd()"
-              size="12px"
-              flat
-              round
-              color="add"
-              icon="mdi-plus"
-              :disable="checkjson == true"
-            >
-              <q-tooltip>เพิ่ม</q-tooltip>
-            </q-btn>
-            <!-- <q-menu>
-              <q-list style="min-width: 100px">
-                <q-item clickable @click="clickAdd">
-                  <q-item-section>ขรก.กทม.สามัญ</q-item-section>
-                </q-item>
-                <q-item clickable @click="clickAdd">
-                  <q-item-section>ลูกจ้างประจำ</q-item-section>
-                </q-item>
-              </q-list>
-            </q-menu> -->
-          </div>
-          <q-space />
-
-          <q-input
-            class="col-xs-12 col-sm-3 col-md-2"
-            standout
-            dense
-            v-model="filterKeyword"
-            ref="filterRef"
-            outlined
-            debounce="300"
-            placeholder="ค้นหา"
-          >
-            <template v-slot:append>
-              <q-icon v-if="filterKeyword == ''" name="search" />
-              <q-icon
-                v-if="filterKeyword !== ''"
-                name="clear"
-                class="cursor-pointer"
-                @click="resetFilter"
-              />
-            </template>
-          </q-input>
-
-          <q-select
-            v-model="visibleColumns"
-            multiple
-            outlined
-            dense
-            options-dense
-            :display-value="$q.lang.table.columns"
-            emit-value
-            map-options
-            :options="columns"
-            option-value="name"
-            options-cover
-            style="min-width: 150px"
-            class="col-xs-12 col-sm-3 col-md-2"
-          />
-        </div>
-        <div class="col-12 q-pt-sm">
-          <q-table
-            ref="table"
-            :columns="columns"
-            :rows="rows"
-            :filter="filterKeyword"
-            row-key="name"
-            flat
-            bordered
-            :paging="true"
-            dense
-            class="custom-header-table"
-            v-bind="attrs"
-            :visible-columns="visibleColumns"
-            :pagination-label="paginationLabel"
-            v-model:pagination="pagination"
-          >
-            <template v-slot:header="props">
-              <q-tr :props="props">
-                <q-th v-for="col in props.cols" :key="col.name" :props="props">
-                  <span class="text-weight-medium">{{ col.label }}</span>
-                </q-th>
-                <!-- <q-th auto-width /> -->
-              </q-tr>
-            </template>
-            <template v-slot:body="props">
-              <q-tr
-                :props="props"
-                class="cursor-pointer"
-                @click="nextPage(props.row)"
-              >
-                <q-td key="no" :props="props">
-                  {{ props.rowIndex + 1 }}
-                </q-td>
-                <q-td key="Date" :props="props">
-                  {{ props.row.Date }}
-                </q-td>
-                <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
-                    size="12px"
-                    flat
-                    round
-                    color="red"
-                    @click="clickDelete(props.row.id)"
-                    icon="mdi-delete"
-                  >
-                    <q-tooltip>ลบข้อมูล</q-tooltip>
-                  </q-btn>
-                </q-td> -->
-              </q-tr>
-            </template>
-            <template v-slot:pagination="scope">
-              <q-pagination
-                v-model="pagination.page"
-                active-color="primary"
-                color="primary"
-                :max="scope.pagesNumber"
-                :max-pages="5"
-                size="sm"
-                boundary-links
-                direction-links
-              ></q-pagination>
-            </template>
-          </q-table>
-        </div>
-      </div>
-    </div>
-  </q-card>
-
-  <q-dialog v-model="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)"
-          :disable="radio === '' || (action === '' && radio !== 'ADD')"
-        />
-      </q-card-actions>
-    </q-card>
-  </q-dialog>
-</template>
-
 <script setup lang="ts">
-import { onMounted, ref, useAttrs, reactive, watch, computed } from "vue";
+import { onMounted, ref, useAttrs, reactive, watch } from "vue";
 import type { QTableProps } from "quasar";
-import type {
-  FormMainProbation,
-  FormMainProbation2,
-} from "@/modules/05_placement/interface/request/Main";
 import { useQuasar } from "quasar";
 import { useRouter } from "vue-router";
 import http from "@/plugins/http";
@@ -294,6 +9,8 @@ import { useCounterMixin } from "@/stores/mixin";
 import { useDataStoreRetirement } from "@/modules/06_retirement/storeRetirement";
 import type { resMain } from "@/modules/06_retirement/interface/response/Main";
 import { storeToRefs } from "pinia";
+import popupAdd from "../components/ListRetirement/popupAdd.vue";
+
 const useStoreRetire = useDataStoreRetirement();
 const { clickTab } = useStoreRetire;
 const { tab, type } = storeToRefs(useDataStoreRetirement());
@@ -302,17 +19,9 @@ const { messageError, date2Thai, showLoader, hideLoader, dialogConfirm } =
   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,
-  page: 1,
-  rowsPerPage: 10,
-});
 
+const fiscalyear = ref<number>();
 const actionOption = ref<resMain[]>([]);
-const action = ref<string>("");
 
 const visibleColumns = ref<string[]>([
   "no",
@@ -360,15 +69,19 @@ const columns = ref<QTableProps["columns"]>([
 // ข้อมูลตาราง (จำลอง)
 const currentYear = new Date().getFullYear();
 const rows = ref<resMain[]>([]);
-const visibleColumns2 = ref<string[]>(["no", "name", "retireNumber"]);
 const yearOptions = reactive<any[]>([]);
+
+onMounted(() => {
+  filteryear();
+});
+// หาปีปัจจุบัน
 const filteryear = () => {
   yearOptions.push({ id: currentYear, name: currentYear + 543 });
   fiscalyear.value = yearOptions[0].id;
   fetchRetirement(type.value, currentYear);
 };
+// ประกาศเกษียณอายุราชการ
 const fetchRetirement = async (type: string, year: any) => {
-  radio.value = "";
   showLoader();
   await http
     .get(config.API.retirement(type, year))
@@ -382,12 +95,12 @@ const fetchRetirement = async (type: string, year: any) => {
         retireNumber: items.round,
         total: items.total,
         round: items.round,
-        typeReport: typeReportChangeName(items.typeReport),
+        typeReport: typeReportChangeName(items.typeReport), // เปลี่ยนสถานะ
         json: items.json,
         document: items.document,
       }));
       actionOption.value = rows.value;
-      rows.value.sort((a, b) => a.round - b.round);
+      rows.value.sort((a, b) => a.round - b.round); // เรียงรอบมากไปน้อย
       checkststus(rows.value);
     })
     .catch((e) => {
@@ -397,156 +110,15 @@ const fetchRetirement = async (type: string, year: any) => {
       hideLoader();
     });
 };
-onMounted(() => {
-  filteryear();
-});
-// หัวตาราง2
-const columns2 = ref<QTableProps["columns"]>([
-  {
-    name: "no",
-    align: "left",
-    label: "ลำดับ",
-    sortable: true,
-    field: "no",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-  },
-  {
-    name: "name",
-    align: "left",
-    label: "วันที่สร้าง",
-    sortable: true,
-    field: "name",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-  },
-  {
-    name: "retireNumber",
-    align: "left",
-    label: "จำนวนผู้เกษียณ",
-    sortable: true,
-    field: "total",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-  },
-]);
-
-// ข้อมูลตาราง (จำลอง)
-const rows2 = ref<FormMainProbation2[]>([
-  {
-    no: "1",
-    name: "นายใจดี ยอดใจ ",
-    position: "นักวิชาการพัสดุ",
-    level: "ปฏิบัติการ",
-    institution: "กลุ่มงานโครงสร้างและอัตรากำลัง ๒",
-  },
-  {
-    no: "2",
-    name: "นายจักกริน บัณฑิต",
-    position: "นักวิชาการพัสดุ",
-    level: "ปฏิบัติการ",
-    institution: "กลุ่มงานโครงสร้างและอัตรากำลัง ๒",
-  },
-  {
-    no: "3",
-    name: "นางสาวกัณฐิมา กาฬสินธุ์",
-    position: "นักจัดการงานทั่วไป",
-    level: "ปฏิบัติการ",
-    institution: "กลุ่มงานช่วยนักบริหาร",
-  },
-  {
-    no: "4",
-    name: "นางสาวเมขลา กระจ่างมนตรี",
-    position: "นักจัดการงานทั่วไป",
-    level: "ปฏิบัติการ",
-    institution: "กลุ่มงานช่วยนักบริหาร",
-  },
-  {
-    no: "5",
-    name: "นางสาวฐิติรัตน์ พงษ์ศิริ",
-    position: "นักจัดการงานทั่วไป",
-    level: "ปฏิบัติการ",
-    institution: "กลุ่มงานช่วยนักบริหาร",
-  },
-]);
-
-// const clickDelete = (id: string) => {
-//   $q.dialog({
-//     title: "ยืนยันการลบข้อมูล",
-//     message: "ต้องการลบข้อมูลนี้ใช่หรือไม่?",
-//     cancel: {
-//       flat: true,
-//       color: "negative",
-//     },
-//     persistent: true,
-//   })
-//     .onOk(async () => {})
-//     .onCancel(() => {})
-//     .onDismiss(() => {});
-// };
-
-const clickAdd = () => {
-  if (rows.value.length == 0) {
-    dialogConfirm(
-      $q,
-      async () => {
-        let data = { type: useStoreRetire.type, year: currentYear };
-        await cerateRetirement(data);
-      },
-      "ยืนยันการเพิ่มข้อมูลประกาศเกษียณ",
-      "ต้องการเพิ่มข้อมูลประกาศเกษียณใช่หรือไม่ ?"
-    );
-  } else {
-    modal.value = true;
-    action.value = "";
-    radio.value = "";
-  }
-};
-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) => {
-  dialogConfirm(
-    $q,
-    async () => {
-      let data = {
-        type: useStoreRetire.type,
-        year: currentYear,
-        retireHistoryId: action,
-        option: radio.value,
-      };
-
-      await cerateRetirement(data);
-    },
-    "ยืนยันการแก้ไขข้อมูลประกาศเกษียณ",
-    "ต้องการแก้ไขข้อมูลประกาศเกษียณใช่หรือไม่ ?"
-  );
-};
 
 const checkjson = ref<boolean>();
-
+// เช็คสถานะ document ของประกาศเกษียณอายุราชการ
 const checkststus = (data: any) => {
   let jsonfasle = data.find((e: any) => e.document == false);
-
   if (jsonfasle) {
     checkjson.value = true;
   } else checkjson.value = false;
 };
-const fiscalyear = ref<number>();
-// const fiscalyearOP = ref<any>([
-//   { id: 1, name: "ทั้งหมด" },
-//   { id: 2, name: "2565" },
-//   { id: 3, name: "2565" },
-// ]);
 
 // ค้นหาในตาราง
 const filterKeyword = ref<string>("");
@@ -555,17 +127,15 @@ const resetFilter = () => {
   filterKeyword.value = "";
   filterRef.value.focus();
 };
-
-const filterKeyword2 = ref<string>("");
-const filterRef2 = ref<any>(null);
-const resetFilter2 = () => {
-  filterKeyword2.value = "";
-  filterRef2.value.focus();
-};
-
 const attrs = ref<any>(useAttrs());
 
 const paging = ref<boolean>(true);
+const pagination = ref({
+  sortBy: "",
+  descending: false,
+  page: 1,
+  rowsPerPage: 10,
+});
 const paginationLabel = (start: string, end: string, total: string) => {
   if (paging.value == true) return " " + start + "-" + end + " ใน " + total;
   else return start + "-" + end + " ใน " + total;
@@ -577,6 +147,7 @@ const nextPage = (prop: any) => {
 watch(type, () => {
   fetchRetirement(type.value, currentYear);
 });
+//เปลี่ยนสถานะ
 const typeReportChangeName = (val: string) => {
   switch (val) {
     case "EDIT":
@@ -590,6 +161,171 @@ const typeReportChangeName = (val: string) => {
   }
 };
 </script>
+<template>
+  <div class="toptitle text-dark col-12 row items-center">
+    ประกาศเกษียณอายุราชการ
+  </div>
+  <q-card flat bordered class="col-12 q-mt-sm">
+    <div class="row col-12">
+      <q-tabs
+        dense
+        v-model="tab"
+        align="left"
+        class="bg-white text-grey"
+        active-color="primary"
+        indicator-color="primary"
+      >
+        <div v-for="item in useStoreRetire.taboption">
+          <q-tab
+            :name="item.name"
+            :label="item.label"
+            @click="clickTab(item.name)"
+          />
+        </div>
+      </q-tabs>
+    </div>
+    <q-separator />
+    <q-tab-panels v-model="tab" animated
+      ><q-tab-panel
+        v-for="item in useStoreRetire.taboption"
+        :key="item.name"
+        :name="item.name"
+        class="q-pa-none"
+      >
+        <div class="col-12 row q-pa-md">
+          <div class="row col-12">
+            <div class="row col-12 q-col-gutter-sm">
+              <q-select
+                v-model="fiscalyear"
+                label="ปีงบประมาณ"
+                dense
+                emit-value
+                map-options
+                :options="yearOptions"
+                option-value="id"
+                option-label="name"
+                lazy-rules
+                hide-bottom-space
+                :readonly="false"
+                :borderless="false"
+                :outlined="true"
+                :hide-dropdown-icon="false"
+                style="min-width: 150px"
+              />
+              <div>
+                <popupAdd
+                  :type="useStoreRetire.type"
+                  :year="fiscalyear"
+                  :rows="rows"
+                  :actionOptio="actionOption"
+                  :checkjson="checkjson"
+                />
+              </div>
+              <q-space />
+
+              <q-input
+                class="col-xs-12 col-sm-3 col-md-2"
+                standout
+                dense
+                v-model="filterKeyword"
+                ref="filterRef"
+                outlined
+                debounce="300"
+                placeholder="ค้นหา"
+              >
+                <template v-slot:append>
+                  <q-icon v-if="filterKeyword == ''" name="search" />
+                  <q-icon
+                    v-if="filterKeyword !== ''"
+                    name="clear"
+                    class="cursor-pointer"
+                    @click="resetFilter"
+                  />
+                </template>
+              </q-input>
+
+              <q-select
+                v-model="visibleColumns"
+                multiple
+                outlined
+                dense
+                options-dense
+                :display-value="$q.lang.table.columns"
+                emit-value
+                map-options
+                :options="columns"
+                option-value="name"
+                options-cover
+                style="min-width: 150px"
+                class="col-xs-12 col-sm-3 col-md-2"
+              />
+            </div>
+            <div class="col-12 q-pt-sm">
+              <q-table
+                ref="table"
+                :columns="columns"
+                :rows="rows"
+                :filter="filterKeyword"
+                row-key="name"
+                flat
+                bordered
+                :paging="true"
+                dense
+                class="custom-header-table"
+                v-bind="attrs"
+                :visible-columns="visibleColumns"
+                :pagination-label="paginationLabel"
+                v-model:pagination="pagination"
+              >
+                <template v-slot:header="props">
+                  <q-tr :props="props">
+                    <q-th
+                      v-for="col in props.cols"
+                      :key="col.name"
+                      :props="props"
+                    >
+                      <span class="text-weight-medium">{{ col.label }}</span>
+                    </q-th>
+                  </q-tr>
+                </template>
+                <template v-slot:body="props">
+                  <q-tr
+                    :props="props"
+                    class="cursor-pointer"
+                    @click="nextPage(props.row)"
+                  >
+                    <q-td key="no" :props="props">
+                      {{ props.rowIndex + 1 }}
+                    </q-td>
+                    <q-td key="Date" :props="props">
+                      {{ props.row.Date }}
+                    </q-td>
+                    <q-td key="retireNumber" :props="props">
+                      {{ props.row.total }}
+                    </q-td>
+                    <q-td key="typeReport" :props="props">
+                      {{ props.row.typeReport }}
+                    </q-td>
+                  </q-tr>
+                </template>
+                <template v-slot:pagination="scope">
+                  <q-pagination
+                    v-model="pagination.page"
+                    active-color="primary"
+                    color="primary"
+                    :max="scope.pagesNumber"
+                    :max-pages="5"
+                    size="sm"
+                    boundary-links
+                    direction-links
+                  ></q-pagination>
+                </template>
+              </q-table>
+            </div>
+          </div></div></q-tab-panel
+    ></q-tab-panels>
+  </q-card>
+</template>
 
 <style lang="scss" scope>
 .filter-card {

src/modules/07_insignia/components/3_result/DialogForm.vue

@@ -235,13 +235,15 @@ const addNote = async (body: any) => {
     await http
       .put(config.API.noteAdd(props.roundId), body)
       .then(() => {
-        success($q, "เพิ่มราชชื่อสำเร็จ");
+        success($q, "บันทึกข้อมูลสำเร็จ");
       })
       .catch((err) => {
         messageError($q, err);
       })
       .finally(() => {
-        props.close();
+        if (props.close) {
+          props.close();
+        }
       });
   }
 };