api retirement

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

@@ -4,9 +4,11 @@ const retirement = `${env.API_URI}/retirement`
 
 export default {
     profile: (type: string, year: string) => `${retirement}/profile/${type}/${year}`,
-    profileRetire: (retireProfileId: string) => `${retirement}/profile/${retireProfileId}`,
+    // profileRetire: (retireProfileId: string) => `${retirement}/profile/${retireProfileId}`,
     listRetire: (retireId: string) => `${retirement}/${retireId}`,
-    createnote: () => `${retirement}/reason`,
+    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/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,25 @@ 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);
+
-  } else {
+  fecthlistprofile(retireld.value);
-    fecthlist(retireld_params);
-  }
 });
+const round = ref<number>();
+const typeReport = ref<string>("");
 // fecthlist
-const fecthlistprofile = async (type: any, year: any) => {
+const fecthlistprofile = async (id: string) => {
   showLoader();
   await http
-    .get(config.API.profile(type, year))
+    .get(config.API.listRetire(id))
-    .then((res: any) => {
+    .then((res) => {
-      // console.log(res);
+      console.log(res);
-      retireld.value = res.data.result.id;
+      round.value = res.data.result.round;
+      typeReport.value = res.data.result.typeReport;
       rows.value = res.data.result.profile.map((e: any) => ({
         id: e.id,
         profileId: e.profileId,
@@ -187,37 +190,11 @@ const fecthlistprofile = async (type: any, year: any) => {
         positionNumber: e.posNoEmployee,
         positionLavel: e.positionEmployeeLevel,
         bureau: e.oc,
+        reason: e.reason,
+        remove: e.remove,
       }));
     })
-    .catch((e: any) => {
+    .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 +202,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 +214,10 @@ const clickDelete = (prop: any) => {
   })
     .onOk(async () => {
       await http
-        .delete(config.API.profileRetire(retireProfileId))
+        .post(config.API.removeProfile(), {
+          retireProfileId: retireProfileId.value,
+          reason: note.value,
+        })
         .then(() => {
           success($q, "ลบข้อมูลสำเร็จ");
         })
@@ -248,29 +225,30 @@ const clickDelete = (prop: any) => {
           messageError($q, e);
         })
         .finally(async () => {
-          if (retireld_params === undefined) {
+          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 +259,6 @@ const saveNote = () => {
     persistent: true,
   })
     .onOk(async () => {
-      // console.log("บันทึกข้อมูล");
       await http
         .post(config.API.createnote(), {
           retireProfileId: retireProfileId.value,
@@ -294,17 +271,18 @@ const saveNote = () => {
           messageError($q, e);
         })
         .finally(async () => {
-          await fecthlist(retireld_params);
+          retireld.value = retireld_params.toString();
+          fecthlistprofile(retireld.value);
           modalNote.value = false;
         });
     })
-    .onCancel(() => { })
+    .onCancel(() => {})
-    .onDismiss(() => { });
+    .onDismiss(() => {});
 };
 
 const UpdateListId = (retireld: string, pId: string) => {
   profileId.value = pId;
-  fecthlist(retireld);
+  fecthlistprofile(retireld);
   console.log("profileId", profileId.value);
 };
 const backHistory = () => {
@@ -362,13 +340,29 @@ const paginationLabel = (start: number, end: number, total: number) => {
 
 <template>
   <div class="toptitle text-dark col-12 row items-center">
-    <q-btn icon="mdi-arrow-left" unelevated round dense flat color="primary" class="q-mr-sm" @click="backHistory" />
+    <q-btn
+      icon="mdi-arrow-left"
+      unelevated
+      round
+      dense
+      flat
+      color="primary"
+      class="q-mr-sm"
+      @click="backHistory"
+    />
     รายชื่อผู้เกษียณอายุราชการ
   </div>
   <div>
     <q-card class="col-12 q-pa-md">
       <div class="row col-12 q-pb-sm">
-        <AddList :retireld="retireld" :profile-id="profileId" :UpdateListId="UpdateListId" />
+        <AddList
+          :retireld="retireld"
+          :profile-id="profileId"
+          :UpdateListId="UpdateListId"
+          v-if="
+            typeReport == null || typeReport == 'ADD' || typeReport == 'ADD'
+          "
+        />
         <!-- <q-btn flat round style="color: #016987;" icon="save" @click="saveList">
           <q-tooltip>บันทึกข้อมูล</q-tooltip>
         </q-btn> -->
@@ -397,15 +391,35 @@ const paginationLabel = (start: number, end: number, total: number) => {
 
         <q-space />
         <q-tabs shrink>
-          <q-input borderless outlined dense debounce="300" v-model="filter" placeholder="ค้นหา" style="max-width: 200px"
+          <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 +429,20 @@ const paginationLabel = (start: number, end: number, total: number) => {
       </div>
 
       <div>
-        <q-table flat dense bordered :rows="rows" :columns="columns" row-key="order" class="custom-header-table"
+        <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 +454,27 @@ const paginationLabel = (start: number, end: number, total: number) => {
                 </div>
               </q-th>
               <q-th auto-width />
-              <q-th auto-width />
+              <q-th auto-width v-if="typeReport === 'EDIT' || round === 1" />
+              <q-th auto-width v-if="typeReport === 'REMOVE' || round === 1" />
             </q-tr>
           </template>
           <template v-slot:body="props">
-            <q-tr :props="props" class="cursor-pointer" :style="props.row.profileId === profileId && 'color: #26a69a;'"
+            <q-tr
-              @click="
+              :props="props"
-                fetchReason(props.row.id), (modalNote = true), (note = '')
+              class="cursor-pointer"
-                ">
+              :style="props.row.profileId === profileId && 'color: #26a69a;'"
+            >
               <q-td key="order" :props="props">{{ props.row.order }} </q-td>
               <!-- <q-td key="fixname" :props="props">{{ props.row.fixname }}</q-td> -->
-              <q-td key="name" :props="props">{{ props.row.fixname + props.row.name }}</q-td>
+              <q-td 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 +493,9 @@ const paginationLabel = (start: number, end: number, total: number) => {
               <q-td key="govOffice" :props="props">{{
                 props.row.govOffice
               }}</q-td>
-              <q-td class="table_ellipsis" key="bureau" :props="props">{{ props.row.bureau }}</q-td>
+              <q-td class="table_ellipsis" key="bureau" :props="props">{{
+                props.row.bureau
+              }}</q-td>
               <q-td>
                 <!-- <q-btn
                   :props="props"
@@ -477,20 +511,62 @@ const paginationLabel = (start: number, end: number, total: number) => {
                 >
                   <q-tooltip>โน้ต</q-tooltip></q-btn
                 > -->
-                <q-btn flat round color="blue" dense icon="mdi-file-account"
+                <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>
+              <q-td auto-width v-if="typeReport === 'EDIT' || round === 1">
-                <q-btn flat round class="text-red-14" icon="mdi-delete" dense
+                <q-btn
-                  @click="clickDelete(props.row)"><q-tooltip>ลบข้อมูล</q-tooltip></q-btn>
+                  flat
+                  round
+                  color="primary"
+                  icon="mdi-pencil"
+                  dense
+                  @click.stop="
+                    (modalNote = true),
+                      (note = props.row.reason),
+                      (action = 'edit'),
+                      (retireProfileId = props.row.profileId)
+                  "
+                >
+                  <q-tooltip>กรอกเหตุผล</q-tooltip>
+                </q-btn>
+              </q-td>
+              <q-td auto-width v-if="typeReport === 'REMOVE' || round === 1">
+                <q-btn
+                  flat
+                  round
+                  class="text-red-14"
+                  icon="mdi-delete"
+                  dense
+                  @click.stop="
+                    (modalNote = true),
+                      (action = 'delete'),
+                      (note = props.row.remove),
+                      (retireProfileId = props.row.profileId)
+                  "
+                  ><q-tooltip>ลบข้อมูล</q-tooltip></q-btn
+                >
               </q-td>
             </q-tr>
           </template>
           <template v-slot:pagination="scope">
-            <q-pagination v-model="pagination.page" color="primary" :max="scope.pagesNumber" :max-pages="5" size="sm"
+            <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 +578,46 @@ const paginationLabel = (start: number, end: number, total: number) => {
     <q-card style="width: 700px; max-width: 80vw">
       <q-card-section class="q-pt-none">
         <q-toolbar class="q-py-md">
-          <q-toolbar-title class="header-text text-weight-bolder">กรอกเหตุผล
+          <q-toolbar-title class="header-text text-weight-bolder"
+            >กรอกเหตุผล
           </q-toolbar-title>
-          <q-btn icon="close" unelevated round dense @click="modalNote = false"
+          <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/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

@@ -175,6 +175,93 @@
       </div>
     </div>
   </q-card>
+
+  <q-dialog v-model="modal">
+    <q-card style="width: 450px; max-width: 80vw">
+      <q-card-section>
+        <div class="text-h6">เพิ่มประกาศ</div>
+      </q-card-section>
+
+      <q-card-section class="q-pt-none">
+        เลือกประกาศที่ต้องการเพิ่มข้อมูล
+      </q-card-section>
+      <q-separator />
+      <div class="q-pa-md">
+        <q-list>
+          <q-item class="q-item-custom">
+            <q-item-section avatar class="q-item-custom">
+              <q-radio
+                v-model="radio"
+                val="ADD"
+                color="teal"
+                @click="action = ''"
+              />
+            </q-item-section>
+            <q-item-section>
+              <q-item-label>ประกาศเพิ่มผู้เกษียณ</q-item-label>
+            </q-item-section>
+          </q-item>
+
+          <q-item class="q-item-custom">
+            <q-item-section avatar class="q-item-custom">
+              <q-radio
+                v-model="radio"
+                val="EDIT"
+                color="teal"
+                @click="action = ''"
+              />
+            </q-item-section>
+            <q-item-section>
+              <q-item-label>ประกาศแก้ไขข้อมูลผู้เกษียน</q-item-label>
+              <q-item-label v-if="radio === 'EDIT'">
+                <q-select
+                  dense
+                  v-model="action"
+                  :options="actionOption"
+                  label="เลือกรอบ"
+                  option-label="round"
+                  option-value="id"
+                  emit-value
+                  map-options
+                />
+              </q-item-label>
+            </q-item-section>
+          </q-item>
+
+          <q-item class="q-item-custom">
+            <q-item-section avatar class="q-item-custom">
+              <q-radio
+                v-model="radio"
+                val="REMOVE"
+                color="teal"
+                @click="action = ''"
+              />
+            </q-item-section>
+            <q-item-section>
+              <q-item-label>ประกาศยกเลิกผู้เกษียณ</q-item-label>
+              <q-item-label v-if="radio === 'REMOVE'">
+                <q-select
+                  dense
+                  v-model="action"
+                  :options="actionOption"
+                  label="เลือกรอบ"
+                  option-label="round"
+                  option-value="id"
+                  emit-value
+                  map-options
+              /></q-item-label>
+            </q-item-section>
+          </q-item>
+        </q-list>
+      </div>
+      <q-separator />
+
+      <q-card-actions align="right" class="bg-white text-teal">
+        <q-btn flat label="ยกเลิก" color="red" v-close-popup />
+        <q-btn flat label="ตกลง" @click="clickSelect(action)" />
+      </q-card-actions>
+    </q-card>
+  </q-dialog>
 </template>
 
 <script setup lang="ts">
@@ -190,13 +277,13 @@ import http from "@/plugins/http";
 import config from "@/app.config";
 import { useCounterMixin } from "@/stores/mixin";
 import type { resMain } from "@/modules/06_retirement/interface/response/Main";
-const yearOptions = reactive<any[]>([]);
 
 const mixin = useCounterMixin();
 const { messageError, date2Thai, showLoader, hideLoader } = mixin;
 const router = useRouter();
 const $q = useQuasar(); //ใช้ noti quasar
 const modal = ref<boolean>(false);
+const radio = ref<string>("");
 const pagination = ref({
   sortBy: "desc",
   descending: false,
@@ -204,6 +291,9 @@ const pagination = ref({
   rowsPerPage: 10,
 });
 
+const actionOption = ref<resMain[]>([]);
+const action = ref<string>("");
+
 const type = ref<string>("officer");
 const visibleColumns = ref<string[]>(["no", "Date", "retireNumber"]); //ค้นหา คอลัมน์ คอลัมน์ที่แสดง
 
@@ -243,19 +333,21 @@ const currentYear = new Date().getFullYear();
 const rows = ref<resMain[]>([]);
 const tab = ref<any>("officer");
 const visibleColumns2 = ref<string[]>(["no", "name", "retireNumber"]);
-const getYear = () => {
+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) => ({
@@ -264,7 +356,10 @@ const get = async (type: string, year: any) => {
         year: items.year,
         retireNumber: items.round,
         total: items.total,
+        round: items.round,
       }));
+      actionOption.value = rows.value;
+      console.log(actionOption.value);
     })
     .catch((e) => {})
     .finally(() => {
@@ -272,7 +367,7 @@ const get = async (type: string, year: any) => {
     });
 };
 onMounted(() => {
-  getYear();
+  filteryear();
 });
 // หัวตาราง2
 const columns2 = ref<QTableProps["columns"]>([
@@ -360,34 +455,73 @@ const rows2 = ref<FormMainProbation2[]>([
 // };
 
 const clickAdd = () => {
-  //   modal.value = true;
+  // 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(() => {});
+  }
+
+  modal.value = true;
+  action.value = "";
+  radio.value = "";
+
+  // $q.dialog({
+  //   title: "เพิ่มประกาศ",
+  //   message: "เลือกประกาศที่ต้องการเพิ่มข้อมูล",
+  //   options: {
+  //     type: "radio",
+  //     model: "opt1",
+  //     // inline: true
+  //     items: [
+  //       { label: "ประกาศเพิ่มผู้เกษียณ", value: "ADD" },
+  //       { label: "ประกาศแก้ไขข้อมูลผู้เกษียน", value: "EDIT" },
+  //       { label: "ประกาศยกเลิกผู้เกษียณ", value: "REMOVE" },
+  //     ],
+  //   },
+  //   cancel: {
+  //     flat: true,
+  //     color: "negative",
+  //   },
+  //   persistent: true,
+  // })
+  //   .onOk((data) => {
+  //     console.log("option===>", data);
+  //     router.push(`/retirement/list/${type.value}/${currentYear}`);
+  //   })
+  //   .onCancel(() => {})
+  //   .onDismiss(() => {});
+};
+const cerateRetirement = async (data: object) => {
+  await http
+    .post(config.API.createProfile(), data)
+    .then((res) => {
+      let response = res.data.result;
+      let retirementId = response.id;
+      router.push(`/retirement/${retirementId}`);
+    })
+    .catch((e) => {
+      messageError($q, e);
+    });
+};
+const clickSelect = async (action: string) => {
+  // console.log(action);
+  // console.log(radio.value);
+  $q.dialog({
+    title: "ยืนยันการแก้ไขข้อมูลประกาศเกษียณ",
+    message: "ต้องการแก้ไขข้อมูลประกาศเกษียณใช่หรือไม่?",
     cancel: {
       flat: true,
       color: "negative",
@@ -395,20 +529,29 @@ const clickAdd = () => {
     persistent: true,
   })
     .onOk(async () => {
-      router.push(`/retirement/list/${type.value}/${currentYear}`);
+      let data = {
+        type: type.value,
+        year: currentYear,
+        retireHistoryId: action,
+        option: radio.value,
+      };
+      console.log(data);
+
+      await cerateRetirement(data);
     })
     .onCancel(() => {})
-    .onDismiss(() => {}); */
+    .onDismiss(() => {});
 };
+
 const clickClose = async () => {
   modal.value = false;
 };
 const fiscalyear = ref<number>();
-const fiscalyearOP = ref<any>([
+// 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,11 +578,11 @@ const paginationLabel = (start: string, end: string, total: string) => {
 const nextPage = (prop: any) => {
   // console.log(prop.id);
 
-  router.push(`/retirement/listretire/${prop.id}/${type.value}`);
+  router.push(`/retirement/${prop.id}`);
 };
 
 watch(type, () => {
-  get(type.value, currentYear);
+  fetchRetirement(type.value, currentYear);
 });
 </script>
 
@@ -447,6 +590,9 @@ watch(type, () => {
 .filter-card {
   background-color: #f1f1f1b0;
 }
+.q-item-custom {
+  padding: 0;
+}
 
 .toggle-expired-account {
   font-size: 12px;