From 17ff56c7cfad9627c1e7f13b00db449e79cab642 Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Wed, 30 Apr 2025 17:34:20 +0700
Subject: [PATCH] insignia Reclaim

---
 .../components/5_Borrow/DialogForm.vue        | 591 ++++++++++++------
 .../components/7_Reclaim/DialogForm.vue       | 483 ++++++++++++++
 src/modules/07_insignia/router.ts             |  14 +
 src/modules/07_insignia/storeReclaim.ts       |  18 +
 .../07_insignia/views/07_ReclaimMain.vue      | 494 +++++++++++++++
 5 files changed, 1421 insertions(+), 179 deletions(-)
 create mode 100644 src/modules/07_insignia/components/7_Reclaim/DialogForm.vue
 create mode 100644 src/modules/07_insignia/storeReclaim.ts
 create mode 100644 src/modules/07_insignia/views/07_ReclaimMain.vue

diff --git a/src/modules/07_insignia/components/5_Borrow/DialogForm.vue b/src/modules/07_insignia/components/5_Borrow/DialogForm.vue
index 14d87a9d3..011328b55 100644
--- a/src/modules/07_insignia/components/5_Borrow/DialogForm.vue
+++ b/src/modules/07_insignia/components/5_Borrow/DialogForm.vue
@@ -8,6 +8,7 @@ import http from "@/plugins/http";
 import config from "@/app.config";
 
 /** impotrType */
+import type { QTableColumn } from "quasar";
 import type { DataOption } from "@/modules/07_insignia/interface/index/Main";
 
 /** impotrComponents */
@@ -23,13 +24,11 @@ const {
   messageError,
   showLoader,
   hideLoader,
-  notifyError,
+  onSearchDataTable,
   convertDateToAPI,
 } = mixin;
 
-/**
- * props
- */
+/** props*/
 const props = defineProps({
   modal: Boolean,
   save: {
@@ -76,17 +75,168 @@ const receivedate = ref<Date | null>(); //วันที่ยืม
 const returndate = ref<Date | null>(); //วันที่คืน
 const fullName = ref<string>(""); //ชื่อ-นามสกุล
 const reason = ref<string>("");
-const listPerson = ref<any>([]);
 const OrgList = ref<DataOption[]>([]);
 const filterOrgList = ref<DataOption[]>([]);
 const insigniaNoteProfileId = ref<string>("");
 const filterSelectRound = ref<any>();
 const selectRound = ref<any>();
-const type = ref<any>(DataStore.type);
 
-/**
- * function เคลียร์ข้อมูลในฟอร์ม
- */
+const rows = ref<any[]>([]);
+const rowsMain = ref<any[]>([]);
+const keyword = ref<string>("");
+const selected = ref<any[]>([]);
+const columns = ref<QTableColumn[]>([
+  {
+    name: "noNumber",
+    align: "left",
+    label: "ลำดับ",
+    field: "noNumber",
+    sortable: false,
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "citizenId",
+    align: "left",
+    label: "เลขประจำตัวประชาชน",
+    field: "citizenId",
+    sortable: true,
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "fullName",
+    align: "left",
+    label: "ชื่อ-นามสกุล",
+    field: "fullName",
+    sortable: true,
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "profileType",
+    align: "left",
+    label: "ประเภทตำแหน่ง",
+    field: "profileType",
+    sortable: true,
+    format(val, row) {
+      return DataStore.profileType(val);
+    },
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "position",
+    align: "left",
+    label: "ตำแหน่งประเภท",
+    field: "position",
+    sortable: true,
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "requestInsignia",
+    align: "left",
+    label: "เครื่องราชๆ",
+    field: "requestInsignia",
+    format(val, row) {
+      return `${row.requestInsignia ?? ""}
+      ${
+        row.requestInsigniaShortName ? `(${row.requestInsigniaShortName})` : ""
+      }  `;
+    },
+    sortable: true,
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "dateReceive",
+    align: "left",
+    label: "วันที่ได้รับพระราชทาน",
+    field: "dateReceive",
+    sortable: true,
+    format(val, row) {
+      return date2Thai(val);
+    },
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+
+  // {
+  //   name: "date",
+  //   align: "left",
+  //   label: "วันที่ในราชกิจนุเบกษา",
+  //   field: "date",
+  //   sortable: true,
+  //   format(val, row) {
+  //     return date2Thai(val);
+  //   },
+  //   headerStyle: "font-size: 14px",
+  //   style: "font-size: 14px",
+  // },
+  // {
+  //   name: "volumeNo",
+  //   align: "left",
+  //   label: "เล่มที่ในราชกิจนุเบกษา",
+  //   field: "volumeNo",
+  //   sortable: true,
+  //   headerStyle: "font-size: 14px",
+  //   style: "font-size: 14px",
+  // },
+  // {
+  //   name: "section",
+  //   align: "left",
+  //   label: "ตอนที่ในราชกิจนุเบกษา",
+  //   field: "section",
+  //   sortable: true,
+  //   headerStyle: "font-size: 14px",
+  //   style: "font-size: 14px",
+  // },
+  // {
+  //   name: "page",
+  //   align: "left",
+  //   label: "หน้าในราชกิจนุเบกษา",
+  //   field: "page",
+  //   sortable: true,
+  //   headerStyle: "font-size: 14px",
+  //   style: "font-size: 14px",
+  // },
+  // {
+  //   name: "no",
+  //   align: "left",
+  //   label: "ลำดับที่ในราชกิจจานุเบกษา",
+  //   field: "no",
+  //   sortable: true,
+  //   headerStyle: "font-size: 14px",
+  //   style: "font-size: 14px",
+  // },
+  // {
+  //   name: "number",
+  //   align: "left",
+  //   label: "หมายเลขใบกำกับ",
+  //   field: "number",
+  //   sortable: true,
+  //   headerStyle: "font-size: 14px",
+  //   style: "font-size: 14px",
+  // },
+]);
+const visibleColumns = ref<string[]>([
+  "noNumber",
+  "citizenId",
+  "fullName",
+  "profileType",
+  "position",
+  "requestInsignia",
+  "dateReceive",
+  // "date",
+  // "volumeNo",
+  // "section",
+  // "page",
+  // "no",
+  // "number",
+]);
+
+/** function เคลียร์ข้อมูลในฟอร์ม*/
 function clearData() {
   receivedate.value = null;
   returndate.value = null;
@@ -96,11 +246,13 @@ function clearData() {
   fullName.value = "";
   brand.value = "";
   reason.value = "";
+  selected.value = [];
+  keyword.value = "";
+  rows.value = [];
+  rowsMain.value = [];
 }
 
-/**
- * function เรียกข้อมูลรายการเครื่องราช
- */
+/** function เรียกข้อมูลรายการเครื่องราช*/
 async function fecthlistInsignia() {
   if (roundNo.value !== "" && roundNo.value !== null) {
     showLoader();
@@ -112,25 +264,20 @@ async function fecthlistInsignia() {
     await http
       .post(config.API.noteSearchList(), data)
       .then((res) => {
-        listPerson.value = res.data.result;
+        rowsMain.value = res.data.result;
+        rows.value = res.data.result;
+        serchDataTable();
       })
       .catch((err) => {
         messageError($q, err);
       })
       .finally(() => {
-        cardid.value = "";
-        fullName.value = "";
-        brand.value = "";
-        OrganazationId.value = "";
-        reason.value = "";
         hideLoader();
       });
   }
 }
 
-/**
- * function บันทึกการเพิ่มข้อมูล
- */
+/** function บันทึกการเพิ่มข้อมูล*/
 async function onSubmit() {
   dialogConfirm($q, async () => {
     showLoader();
@@ -145,10 +292,12 @@ async function onSubmit() {
         .then(async () => {
           await props.closeAndFecth();
           await success($q, "บันทึกข้อมูลสำเร็จ");
-          clearData();
+          closeDialog();
         })
         .catch((err) => {
           messageError($q, err);
+        })
+        .finally(() => {
           hideLoader();
         });
     } else {
@@ -163,60 +312,25 @@ async function onSubmit() {
         .then(async () => {
           await props.closeAndFecth();
           await success($q, "บันทึกข้อมูลสำเร็จ");
-          clearData();
+          closeDialog();
         })
         .catch((err) => {
           messageError($q, err);
+        })
+        .finally(() => {
           hideLoader();
         });
     }
   });
 }
 
-/**
- * function ค้นหาคนจากเลขประจำตัวประชาชน
- */
-async function searchcardid() {
-  if (cardid.value.length === 13) {
-    showLoader();
-    const node = await listPerson.value.find(
-      (e: any) => e.citizenId === cardid.value
-    );
-
-    if (node) {
-      fullName.value = ` ${node.fullName}`;
-      brand.value = `${node.requestInsignia} (${
-        type.value.find((item: any) => item.name === node.requestInsignia)
-          ?.shortName || ""
-      })`;
-      insigniaNoteProfileId.value = node.id;
-      hideLoader();
-    } else {
-      notifyError($q, "ไม่พบข้อมูลการได้รับในรอบนี้");
-      fullName.value = "";
-      brand.value = "";
-      OrganazationId.value = "";
-      reason.value = "";
-      hideLoader();
-    }
-  } else {
-    fullName.value = "";
-    brand.value = "";
-    receivedate.value = null;
-  }
-}
-
-/**
- * function closePopup
- */
+/** function closePopup*/
 function closeDialog() {
   clearData();
   props.close();
 }
 
-/**
- * function reset วันที่คืน
- */
+/** function reset วันที่คืน*/
 function clearReturnDate() {
   returndate.value = null;
 }
@@ -245,17 +359,21 @@ function filterSelector(val: string, update: Function, name: string) {
   });
 }
 
-/**
- * function setValue
- */
+function serchDataTable() {
+  rows.value = onSearchDataTable(
+    keyword.value,
+    rowsMain.value,
+    columns.value ? columns.value : []
+  );
+}
+
+/** function setValue*/
 function setValue() {
   filterSelectRound.value = props.filterSelectRoundOption;
   selectRound.value = props.selectRoundOption;
 }
 
-/**
- * function callback  เช็ค props ถ้าเปิด dialog ให้ดึงรายการข้อมูล
- */
+/**  function callback  เช็ค props ถ้าเปิด dialog ให้ดึงรายการข้อมูล*/
 watch(props, () => {
   if (props.modal == true && props.roundId != "all") {
     roundNo.value = props.roundId;
@@ -267,6 +385,18 @@ watch(props, () => {
   }
 });
 
+watch(selected, () => {
+  if (props.modal) {
+    const data = selected.value[0];
+    insigniaNoteProfileId.value = data ? data.id : "";
+    fullName.value = data ? data.fullName : "";
+    cardid.value = data ? data.citizenId : "";
+    brand.value = data
+      ? `${data.requestInsignia} (${data.requestInsigniaShortName})`
+      : "";
+  }
+});
+
 /** Hook*/
 onMounted(() => {
   setValue();
@@ -275,7 +405,11 @@ onMounted(() => {
 
 <template>
   <q-dialog v-model="props.modal" persistent>
-    <q-card style="min-width: 900px">
+    <q-card
+      :style="
+        props.action === 'addData' ? 'min-width: 80%' : 'min-width: 900px'
+      "
+    >
       <q-form
         ref="myForm "
         greedy
@@ -284,140 +418,234 @@ onMounted(() => {
       >
         <DialogHeader tittle="ยืม-คืนเครื่องราชฯ" :close="closeDialog" />
         <q-separator />
-        <q-card-section>
+        <q-card-section style="padding: 0px">
           <div
             class="row col-12 items-center q-col-gutter-x-xs q-col-gutter-y-xs"
           >
-            <div
-              v-if="props.action === 'addData'"
-              class="row col-12 q-col-gutter-x-xs q-col-gutter-y-xs"
-            >
-              <div class="col-6">
-                <q-select
-                  class="inputgreen"
-                  v-model="roundNo"
-                  dense
-                  outlined
-                  lazy-rules
-                  hide-bottom-space
-                  :label="`${'รอบการขอเครื่องราชฯ'}`"
-                  emit-value
-                  map-options
-                  use-input
-                  option-label="name"
-                  :options="filterSelectRound"
-                  option-value="id"
-                  :readonly="false"
-                  :borderless="false"
-                  style="min-width: 150px"
-                  :rules="[(val:string) => !!val || 'กรุณาเลือกรอบการขอเครื่องราชฯ']"
-                  @update:model-value="fecthlistInsignia()"
-                  @filter="(inputValue:string,
+            <div v-if="props.action === 'addData'" class="row col-12">
+              <div class="q-pa-md col-md-8 col-xs-12">
+                <div class="col-12">
+                  <div class="row col-12 q-col-gutter-sm">
+                    <q-space />
+                    <div class="row q-col-gutter-sm">
+                      <q-input
+                        standout
+                        dense
+                        v-model="keyword"
+                        outlined
+                        placeholder="ค้นหา"
+                        @keydown.enter.pervent="serchDataTable"
+                      >
+                        <template v-slot:append>
+                          <q-icon name="search" />
+                        </template>
+                      </q-input>
+
+                      <q-select
+                        v-model="visibleColumns"
+                        multiple
+                        outlined
+                        dense
+                        options-dense
+                        :display-value="$q.lang.table.columns"
+                        emit-value
+                        map-options
+                        :options="columns"
+                        option-value="name"
+                        style="min-width: 140px"
+                      />
+                    </div>
+                  </div>
+                </div>
+                <div class="col-12 q-pt-sm">
+                  <d-table
+                    ref="table"
+                    :columns="columns"
+                    :rows="rows"
+                    row-key="id"
+                    flat
+                    bordered
+                    :paging="true"
+                    dense
+                    :rows-per-page-options="[10, 25, 50, 100]"
+                    selection="single"
+                    v-model:selected="selected"
+                  >
+                    <template v-slot:header="props">
+                      <q-tr :props="props">
+                        <q-th auto-width></q-th>
+                        <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">
+                        <q-td>
+                          <q-checkbox
+                            keep-color
+                            color="primary"
+                            dense
+                            v-model="props.selected"
+                          />
+                        </q-td>
+                        <q-td
+                          v-for="col in props.cols"
+                          :key="col.name"
+                          :props="props"
+                        >
+                          <div v-if="col.name === 'noNumber'">
+                            {{ props.rowIndex + 1 }}
+                          </div>
+                          <div v-else>
+                            {{ col.value ? col.value : "-" }}
+                          </div>
+                        </q-td>
+                      </q-tr>
+                    </template>
+                  </d-table>
+                </div>
+              </div>
+              <q-separator vertical />
+              <div class="q-pa-md col">
+                <div class="row q-col-gutter-sm">
+                  <div class="col-12">
+                    <q-select
+                      class="inputgreen"
+                      v-model="roundNo"
+                      dense
+                      outlined
+                      lazy-rules
+                      hide-bottom-space
+                      :label="`${'รอบการขอเครื่องราชฯ'}`"
+                      emit-value
+                      map-options
+                      use-input
+                      option-label="name"
+                      :options="filterSelectRound"
+                      option-value="id"
+                      :readonly="false"
+                      :borderless="false"
+                      style="min-width: 150px"
+                      :rules="[(val:string) => !!val || 'กรุณาเลือกรอบการขอเครื่องราชฯ']"
+                      @update:model-value="fecthlistInsignia()"
+                      @filter="(inputValue:string,
                     doneFn:Function) => filterSelector(inputValue, doneFn,'filterSelectRoundOption'
                     ) "
-                />
-              </div>
-              <div class="col-12 q-mt-md text-weight-bold text-grey-7">
-                ข้อมูลผู้ยืม
-              </div>
-              <div class="col-xs-12 col-sm-6">
-                <q-input
-                  :disable="roundNo == ''"
-                  hide-bottom-space
-                  outlined
-                  class="inputgreen"
-                  v-model="cardid"
-                  dense
-                  lazy-rules
-                  :rules="[
+                    />
+                  </div>
+                  <div class="col-12 q-mt-md text-weight-bold text-grey-7">
+                    ข้อมูลผู้ยืม
+                  </div>
+                  <div class="col-xs-12 col-sm-6">
+                    <q-input
+                      :disable="roundNo == ''"
+                      hide-bottom-space
+                      outlined
+                      readonly
+                      v-model="cardid"
+                      dense
+                      lazy-rules
+                      :rules="[
                   (val: string) => !!val || `${'กรุณากรอกเลขประจำตัวประชาชน'}`,
                   (val: string) =>
                     val.length >= 13 ||
                     `${'กรุณากรอกเลขประจำตัวประชาชนให้ครบ'}`,
                 ]"
-                  label="เลขประจำตัวประชาชน"
-                  maxlength="13"
-                  mask="#############"
-                  @keyup="searchcardid"
-                />
-              </div>
-              <div class="col-xs-6 col-sm-6">
-                <q-input
-                  readonly
-                  hide-bottom-space
-                  outlined
-                  dense
-                  lazy-rules
-                  borderless
-                  v-model="fullName"
-                  :label="`${'ชื่อ-นามสกุล'}`"
-                  :rules="[
+                      label="เลขประจำตัวประชาชน"
+                      maxlength="13"
+                      mask="#############"
+                    />
+                  </div>
+                  <div class="col-xs-6 col-sm-6">
+                    <q-input
+                      readonly
+                      hide-bottom-space
+                      outlined
+                      dense
+                      lazy-rules
+                      borderless
+                      v-model="fullName"
+                      :label="`${'ชื่อ-นามสกุล'}`"
+                      :rules="[
                     (val:string) =>
                       !!val ||
                       'ชื่อ-นามสกุลต้องไม่ว่าง กรุณากรอกเลขประจำตัวประชาชนให้ถูกต้อง',
                   ]"
-                />
-              </div>
+                    />
+                  </div>
 
-              <div class="col-12 q-mt-md text-weight-bold text-grey-7">
-                รายละเอียดการยืมเครื่องราชฯ
-              </div>
-              <div class="col-xs-12 col-sm-6">
-                <q-input
-                  :rules="[(val:string) => !!val || 'กรุณาเลือกเครื่องราชฯ']"
-                  v-model="brand"
-                  readonly
-                  dense
-                  outlined
-                  lazy-rules
-                  hide-bottom-space
-                  :label="`${'เครื่องราชฯ'}`"
-                />
-              </div>
-              <div class="col-xs-12 col-sm-6">
-                <datepicker
-                  menu-class-name="modalfix"
-                  v-model="receivedate"
-                  :locale="'th'"
-                  autoApply
-                  borderless
-                  :enableTimePicker="false"
-                  week-start="0"
-                >
-                  <template #year="{ year }">
-                    {{ year + 543 }}
-                  </template>
-                  <template #year-overlay-value="{ value }">
-                    {{ parseInt(value + 543) }}
-                  </template>
-                  <template #trigger>
+                  <div class="col-12 q-mt-md text-weight-bold text-grey-7">
+                    รายละเอียดการยืมเครื่องราชฯ
+                  </div>
+                  <div class="col-xs-12 col-sm-6">
                     <q-input
-                      class="inputgreen"
+                      :rules="[(val:string) => !!val || 'กรุณาเลือกเครื่องราชฯ']"
+                      v-model="brand"
+                      readonly
                       dense
-                      borderless
                       outlined
-                      :rules="[(val:string) => !!val || 'กรุณาเลือกวันที่']"
+                      lazy-rules
                       hide-bottom-space
-                      :model-value="
-                        receivedate != null ? date2Thai(receivedate) : undefined
-                      "
-                      :label="`${'วันที่ยืม'}`"
+                      :label="`${'เครื่องราชฯ'}`"
+                    />
+                  </div>
+
+                  <div class="col-xs-12 col-sm-6">
+                    <datepicker
+                      menu-class-name="modalfix"
+                      v-model="receivedate"
+                      :locale="'th'"
+                      autoApply
+                      borderless
+                      :enableTimePicker="false"
+                      week-start="0"
                     >
-                      <template v-if="receivedate" v-slot:append>
-                        <q-icon
-                          name="cancel"
-                          @click.stop.prevent="receivedate = null"
-                          class="cursor-pointer"
-                        />
+                      <template #year="{ year }">
+                        {{ year + 543 }}
                       </template>
-                    </q-input>
-                  </template>
-                </datepicker>
+                      <template #year-overlay-value="{ value }">
+                        {{ parseInt(value + 543) }}
+                      </template>
+                      <template #trigger>
+                        <q-input
+                          class="inputgreen"
+                          dense
+                          borderless
+                          outlined
+                          :rules="[(val:string) => !!val || 'กรุณาเลือกวันที่']"
+                          hide-bottom-space
+                          :model-value="
+                            receivedate != null
+                              ? date2Thai(receivedate)
+                              : undefined
+                          "
+                          :label="`${'วันที่ยืม'}`"
+                        >
+                          <template v-if="receivedate" v-slot:append>
+                            <q-icon
+                              name="cancel"
+                              @click.stop.prevent="receivedate = null"
+                              class="cursor-pointer"
+                            />
+                          </template>
+                        </q-input>
+                      </template>
+                    </datepicker>
+                  </div>
+                </div>
               </div>
             </div>
 
             <div
-              class="row col-12 q-col-gutter-x-xs q-col-gutter-y-xs"
+              class="row col-12 q-col-gutter-xs q-pa-md"
               v-if="props.action === 'editData'"
             >
               <div class="col-12 text-weight-bold text-grey-7">
@@ -491,7 +719,12 @@ onMounted(() => {
         <q-separator />
 
         <q-card-actions align="right">
-          <q-btn label="บันทึก" type="submit" color="public">
+          <q-btn
+            label="บันทึก"
+            type="submit"
+            color="public"
+            :disable="selected.length === 0 && props.action === 'addData'"
+          >
             <q-tooltip>บันทึก</q-tooltip>
           </q-btn>
         </q-card-actions>
diff --git a/src/modules/07_insignia/components/7_Reclaim/DialogForm.vue b/src/modules/07_insignia/components/7_Reclaim/DialogForm.vue
new file mode 100644
index 000000000..af3a71240
--- /dev/null
+++ b/src/modules/07_insignia/components/7_Reclaim/DialogForm.vue
@@ -0,0 +1,483 @@
+<script setup lang="ts">
+import { ref, watch, onMounted } from "vue";
+import { QForm, useQuasar } from "quasar";
+
+import { useCounterMixin } from "@/stores/mixin";
+import { useBrrowDataStore } from "@/modules/07_insignia/storeBrrow";
+import http from "@/plugins/http";
+import config from "@/app.config";
+
+/** impotrType */
+import type { QTableColumn } from "quasar";
+
+/** impotrComponents */
+import DialogHeader from "@/components/DialogHeader.vue";
+
+const $q = useQuasar();
+const brrowDataStore = useBrrowDataStore();
+const mixin = useCounterMixin();
+const {
+  date2Thai,
+  dialogConfirm,
+  success,
+  messageError,
+  showLoader,
+  hideLoader,
+  onSearchDataTable,
+  convertDateToAPI,
+} = mixin;
+
+/** props*/
+const modal = defineModel<boolean>("modal", { required: true });
+const isEdit = defineModel<boolean>("isEdit", { required: true });
+
+const props = defineProps({});
+
+const rows = ref<any[]>([]);
+const rowsMain = ref<any[]>([]);
+const keyword = ref<string>("");
+const selected = ref<any[]>([]);
+const columns = ref<QTableColumn[]>([
+  {
+    name: "noNumber",
+    align: "left",
+    label: "ลำดับ",
+    field: "noNumber",
+    sortable: false,
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "citizenId",
+    align: "left",
+    label: "เลขประจำตัวประชาชน",
+    field: "citizenId",
+    sortable: true,
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "fullName",
+    align: "left",
+    label: "ชื่อ-นามสกุล",
+    field: "fullName",
+    sortable: true,
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "profileType",
+    align: "left",
+    label: "ประเภทตำแหน่ง",
+    field: "profileType",
+    sortable: true,
+    format(val, row) {
+      return brrowDataStore.profileType(val);
+    },
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "position",
+    align: "left",
+    label: "ตำแหน่งประเภท",
+    field: "position",
+    sortable: true,
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "requestInsignia",
+    align: "left",
+    label: "เครื่องราชๆ",
+    field: "requestInsignia",
+    format(val, row) {
+      return `${row.requestInsignia ?? ""}
+      ${
+        row.requestInsigniaShortName ? `(${row.requestInsigniaShortName})` : ""
+      }  `;
+    },
+    sortable: true,
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "dateReceive",
+    align: "left",
+    label: "วันที่ได้รับพระราชทาน",
+    field: "dateReceive",
+    sortable: true,
+    format(val, row) {
+      return date2Thai(val);
+    },
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+
+  // {
+  //   name: "date",
+  //   align: "left",
+  //   label: "วันที่ในราชกิจนุเบกษา",
+  //   field: "date",
+  //   sortable: true,
+  //   format(val, row) {
+  //     return date2Thai(val);
+  //   },
+  //   headerStyle: "font-size: 14px",
+  //   style: "font-size: 14px",
+  // },
+  // {
+  //   name: "volumeNo",
+  //   align: "left",
+  //   label: "เล่มที่ในราชกิจนุเบกษา",
+  //   field: "volumeNo",
+  //   sortable: true,
+  //   headerStyle: "font-size: 14px",
+  //   style: "font-size: 14px",
+  // },
+  // {
+  //   name: "section",
+  //   align: "left",
+  //   label: "ตอนที่ในราชกิจนุเบกษา",
+  //   field: "section",
+  //   sortable: true,
+  //   headerStyle: "font-size: 14px",
+  //   style: "font-size: 14px",
+  // },
+  // {
+  //   name: "page",
+  //   align: "left",
+  //   label: "หน้าในราชกิจนุเบกษา",
+  //   field: "page",
+  //   sortable: true,
+  //   headerStyle: "font-size: 14px",
+  //   style: "font-size: 14px",
+  // },
+  // {
+  //   name: "no",
+  //   align: "left",
+  //   label: "ลำดับที่ในราชกิจจานุเบกษา",
+  //   field: "no",
+  //   sortable: true,
+  //   headerStyle: "font-size: 14px",
+  //   style: "font-size: 14px",
+  // },
+  // {
+  //   name: "number",
+  //   align: "left",
+  //   label: "หมายเลขใบกำกับ",
+  //   field: "number",
+  //   sortable: true,
+  //   headerStyle: "font-size: 14px",
+  //   style: "font-size: 14px",
+  // },
+]);
+const visibleColumns = ref<string[]>([
+  "noNumber",
+  "citizenId",
+  "fullName",
+  "profileType",
+  "position",
+  "requestInsignia",
+  "dateReceive",
+  // "date",
+  // "volumeNo",
+  // "section",
+  // "page",
+  // "no",
+  // "number",
+]);
+
+const roundNo = ref<string | undefined>(""); //รอบการขอเครื่องราชฯ
+const cardid = ref<string>(""); //เลขประจำตัวประชาชน
+const fullName = ref<string>(""); //ชื่อ-นามสกุล
+const insigniaType = ref<string>(""); //เครื่องราชฯ
+const receivedate = ref<Date | null>(); //วันที่ยืม
+const reason = ref<string>(""); //หมายเหตุการเรียกคืน
+
+const filterSelectRound = ref<any>();
+
+/** function เคลียร์ข้อมูลในฟอร์ม*/
+function clearData() {}
+
+/** function เรียกข้อมูลรายชื่อที่ได้รับเครื่องราช*/
+async function fecthListPerson() {
+  if (roundNo.value !== "" && roundNo.value !== null) {
+    let data = {
+      // insigniaTypeId: props.typeId,
+      insigniaNoteId: roundNo.value,
+      insigniaId: "",
+    };
+    await http
+      .post(config.API.noteSearchList(), data)
+      .then((res) => {
+        rowsMain.value = res.data.result;
+        rows.value = res.data.result;
+      })
+      .catch((err) => {
+        messageError($q, err);
+      });
+  }
+}
+
+/**
+ * function บันทึกการเพิ่มข้อมูล
+ */
+async function onSubmit() {
+  dialogConfirm($q, async () => {});
+}
+
+/** function closePopup*/
+function closeDialog() {
+  modal.value = false;
+}
+
+function serchDataTable() {
+  rows.value = onSearchDataTable(
+    keyword.value,
+    rowsMain.value,
+    columns.value ? columns.value : []
+  );
+}
+
+/** function callback  เช็ค props ถ้าเปิด dialog ให้ดึงรายการข้อมูล*/
+watch(modal, () => {});
+</script>
+
+<template>
+  <q-dialog v-model="modal" persistent>
+    <q-card :style="!isEdit ? 'min-width: 80vw' : 'min-width: 30vw'">
+      <q-form greedy @submit.prevent @validation-success="onSubmit">
+        <DialogHeader
+          :tittle="`${!isEdit ? 'บันทึก' : 'แก้ไข'}การเรียกคืนเครื่องราชฯ`"
+          :close="closeDialog"
+        />
+        <q-separator />
+        <q-card-section :horizontal="$q.screen.gt.md" style="padding: 0px">
+          <div class="row col-12">
+            <div class="q-pa-md col-md-8 col-xs-12" v-if="!isEdit">
+              <div class="col-12">
+                <div class="row col-12 q-col-gutter-sm">
+                  <q-space />
+                  <div class="row q-col-gutter-sm">
+                    <q-input
+                      standout
+                      dense
+                      v-model="keyword"
+                      outlined
+                      placeholder="ค้นหา"
+                      @keydown.enter.pervent="serchDataTable"
+                    >
+                      <template v-slot:append>
+                        <q-icon name="search" />
+                      </template>
+                    </q-input>
+
+                    <q-select
+                      v-model="visibleColumns"
+                      multiple
+                      outlined
+                      dense
+                      options-dense
+                      :display-value="$q.lang.table.columns"
+                      emit-value
+                      map-options
+                      :options="columns"
+                      option-value="name"
+                      style="min-width: 140px"
+                    />
+                  </div>
+                </div>
+              </div>
+              <div class="col-12 q-pt-sm">
+                <d-table
+                  ref="table"
+                  :columns="columns"
+                  :rows="rows"
+                  row-key="id"
+                  flat
+                  bordered
+                  :paging="true"
+                  dense
+                  :rows-per-page-options="[10, 25, 50, 100]"
+                  selection="single"
+                  v-model:selected="selected"
+                >
+                  <template v-slot:header="props">
+                    <q-tr :props="props">
+                      <q-th auto-width></q-th>
+                      <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">
+                      <q-td>
+                        <q-checkbox
+                          keep-color
+                          color="primary"
+                          dense
+                          v-model="props.selected"
+                        />
+                      </q-td>
+                      <q-td
+                        v-for="col in props.cols"
+                        :key="col.name"
+                        :props="props"
+                      >
+                        <div v-if="col.name === 'noNumber'">
+                          {{ props.rowIndex + 1 }}
+                        </div>
+                        <div v-else>
+                          {{ col.value ? col.value : "-" }}
+                        </div>
+                      </q-td>
+                    </q-tr>
+                  </template>
+                </d-table>
+              </div>
+            </div>
+            <q-separator vertical />
+            <div class="q-pa-md col">
+              <div class="row q-col-gutter-sm">
+                <div class="col-12">
+                  <q-select
+                    class="inputgreen"
+                    v-model="roundNo"
+                    dense
+                    outlined
+                    lazy-rules
+                    hide-bottom-space
+                    :label="`${'รอบการขอเครื่องราชฯ'}`"
+                    emit-value
+                    map-options
+                    use-input
+                    option-label="name"
+                    :options="filterSelectRound"
+                    option-value="id"
+                    :readonly="false"
+                    :borderless="false"
+                    style="min-width: 150px"
+                    :rules="[(val:string) => !!val || 'กรุณาเลือกรอบการขอเครื่องราชฯ']"
+                    @update:model-value="fecthListPerson()"
+                  />
+                </div>
+                <div class="col-12 q-mt-md text-weight-bold text-grey-7">
+                  ข้อมูลผู้ถูกเรียกคืน
+                </div>
+                <div class="col-xs-12 col-sm-6">
+                  <q-input
+                    hide-bottom-space
+                    outlined
+                    readonly
+                    v-model="cardid"
+                    dense
+                    lazy-rules
+                    label="เลขประจำตัวประชาชน"
+                    maxlength="13"
+                    mask="#############"
+                  />
+                </div>
+                <div class="col-xs-6 col-sm-6">
+                  <q-input
+                    readonly
+                    hide-bottom-space
+                    outlined
+                    dense
+                    lazy-rules
+                    borderless
+                    v-model="fullName"
+                    :label="`${'ชื่อ-นามสกุล'}`"
+                  />
+                </div>
+
+                <div class="col-12 q-mt-md text-weight-bold text-grey-7">
+                  รายละเอียดการเรียกคือเครื่องราชฯ
+                </div>
+                <div class="col-xs-12 col-sm-6">
+                  <q-input
+                    v-model="insigniaType"
+                    readonly
+                    dense
+                    outlined
+                    lazy-rules
+                    hide-bottom-space
+                    :label="`${'เครื่องราชฯ'}`"
+                  />
+                </div>
+
+                <div class="col-xs-12 col-sm-6">
+                  <datepicker
+                    menu-class-name="modalfix"
+                    v-model="receivedate"
+                    :locale="'th'"
+                    autoApply
+                    borderless
+                    :enableTimePicker="false"
+                    week-start="0"
+                  >
+                    <template #year="{ year }">
+                      {{ year + 543 }}
+                    </template>
+                    <template #year-overlay-value="{ value }">
+                      {{ parseInt(value + 543) }}
+                    </template>
+                    <template #trigger>
+                      <q-input
+                        class="inputgreen"
+                        dense
+                        borderless
+                        outlined
+                        :rules="[(val:string) => !!val || 'กรุณาเลือกวันที่เรียกคืน']"
+                        hide-bottom-space
+                        :model-value="
+                          receivedate != null
+                            ? date2Thai(receivedate)
+                            : undefined
+                        "
+                        :label="`${'วันที่เรียกคืน'}`"
+                      >
+                        <template v-if="receivedate" v-slot:append>
+                          <q-icon
+                            name="cancel"
+                            @click.stop.prevent="receivedate = null"
+                            class="cursor-pointer"
+                          />
+                        </template>
+                      </q-input>
+                    </template>
+                  </datepicker>
+                </div>
+                <div class="col-12">
+                  <q-input
+                    v-model="reason"
+                    dense
+                    outlined
+                    lazy-rules
+                    hide-bottom-space
+                    :label="`${'หมายเหตุการเรียกคืน'}`"
+                    type="textarea"
+                  />
+                </div>
+              </div>
+            </div>
+          </div>
+        </q-card-section>
+
+        <q-separator />
+
+        <q-card-actions align="right">
+          <q-btn label="บันทึก" type="submit" color="public">
+            <q-tooltip>บันทึก</q-tooltip>
+          </q-btn>
+        </q-card-actions>
+      </q-form>
+    </q-card>
+  </q-dialog>
+</template>
diff --git a/src/modules/07_insignia/router.ts b/src/modules/07_insignia/router.ts
index 09bcc61c2..c82452d03 100644
--- a/src/modules/07_insignia/router.ts
+++ b/src/modules/07_insignia/router.ts
@@ -27,6 +27,9 @@ const ReportView = () => import("./views/06_ReportMain.vue");
 const report_02 = () =>
   import("@/modules/07_insignia/components/report/ReportDetail.vue");
 
+const ReclaimMain = () =>
+  import("@/modules/07_insignia/views/07_ReclaimMain.vue");
+
 export default [
   {
     path: "/insignia/round",
@@ -110,4 +113,15 @@ export default [
       Role: "STAFF",
     },
   },
+
+  {
+    path: "/insignia/reclaim",
+    name: "insigniaReclaim",
+    component: ReclaimMain,
+    meta: {
+      Auth: true,
+      Key: "SYS_INSIGNIA_RECLAIM",
+      Role: "STAFF",
+    },
+  },
 ];
diff --git a/src/modules/07_insignia/storeReclaim.ts b/src/modules/07_insignia/storeReclaim.ts
new file mode 100644
index 000000000..129ded880
--- /dev/null
+++ b/src/modules/07_insignia/storeReclaim.ts
@@ -0,0 +1,18 @@
+import { defineStore } from "pinia";
+import { ref } from "vue";
+
+export const useInsigniaReclaimStore = defineStore("insigniaReclaim", () => {
+  const roundData = ref<any[]>([{ name: "ทั้งหมด", id: "all" }]);
+  const insigniaTypeData = ref<any[]>([{ name: "ทั้งหมด", id: "all" }]);
+  const employeeClassData = ref<any[]>([
+    { name: "ทั้งหมด", id: "all" },
+    { name: "ข้าราชการ กทม.สามัญ", id: "officer" },
+    { name: "ลูกจ้างประจำ", id: "perm" },
+  ]);
+
+  return {
+    roundData,
+    insigniaTypeData,
+    employeeClassData,
+  };
+});
diff --git a/src/modules/07_insignia/views/07_ReclaimMain.vue b/src/modules/07_insignia/views/07_ReclaimMain.vue
new file mode 100644
index 000000000..ac1b0f6b8
--- /dev/null
+++ b/src/modules/07_insignia/views/07_ReclaimMain.vue
@@ -0,0 +1,494 @@
+<script setup lang="ts">
+import { reactive, ref, onMounted, watch } from "vue";
+import { storeToRefs } from "pinia";
+import { useQuasar } from "quasar";
+
+import { checkPermission } from "@/utils/permissions";
+import { useCounterMixin } from "@/stores/mixin";
+import { useInsigniaReclaimStore } from "@/modules/07_insignia/storeReclaim";
+import http from "@/plugins/http";
+import config from "@/app.config";
+
+import type { QTableColumn } from "quasar";
+
+import DialogForm from "@/modules/07_insignia/components/7_Reclaim/DialogForm.vue";
+
+const $q = useQuasar();
+const { roundData, insigniaTypeData, employeeClassData } = storeToRefs(
+  useInsigniaReclaimStore()
+);
+const { showLoader, hideLoader, messageError, dialogRemove } =
+  useCounterMixin();
+
+/**  Table*/
+const rows = ref<any[]>([]);
+const keyword = ref<string>("");
+const columns = ref<QTableColumn[]>([
+  {
+    name: "no",
+    align: "left",
+    label: "ลำดับ",
+    field: "no",
+    sortable: false,
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "citizenId",
+    align: "left",
+    label: "เลขประจำตัวประชาชน",
+    field: "citizenId",
+    sortable: true,
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "fullName",
+    align: "left",
+    label: "ชื่อ-นามสกุล",
+    field: "fullName",
+    sortable: true,
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "employeeType",
+    align: "left",
+    label: "ประเภทตำแหน่ง",
+    field: "employeeType",
+    sortable: true,
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "insigniaType",
+    align: "left",
+    label: "ประเภทเครื่องราชฯ",
+    field: "insigniaType",
+    sortable: true,
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "dateReceive",
+    align: "left",
+    label: "วันที่ได้รับพระราชทาน",
+    field: "dateReceive",
+    sortable: true,
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "date",
+    align: "left",
+    label: "วันที่ในราชกิจนุเบกษา",
+    field: "date",
+    sortable: true,
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "volumeNo",
+    align: "left",
+    label: "เล่มที่ในราชกิจนุเบกษา",
+    field: "volumeNo",
+    sortable: true,
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "section",
+    align: "left",
+    label: "ตอนที่ในราชกิจนุเบกษา",
+    field: "section",
+    sortable: true,
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "page",
+    align: "left",
+    label: "หน้าในราชกิจนุเบกษา",
+    field: "page",
+    sortable: true,
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "number",
+    align: "left",
+    label: "ลำดับที่ในราชกิจจานุเบกษา",
+    field: "number",
+    sortable: true,
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "vatnumber",
+    align: "left",
+    label: "หมายเลขใบกำกับ",
+    field: "vatnumber",
+    sortable: true,
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "payType",
+    align: "left",
+    label: "รูปแบบการจ่าย",
+    field: "payType",
+    sortable: true,
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "dateReturn",
+    align: "left",
+    label: "วันที่เรียกคืน",
+    field: "dateReturn",
+    sortable: true,
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "reasonReturn",
+    align: "left",
+    label: "หมายเหตุการเรียกคืน",
+    field: "reasonReturn",
+    sortable: true,
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+]);
+const visibleColumns = ref<string[]>([
+  "no",
+  "citizenId",
+  "fullName",
+  "employeeType",
+  "insigniaType",
+  "dateReceive",
+  "date",
+  "volumeNo",
+  "section",
+  "page",
+  "number",
+  "vatnumber",
+  "payType",
+  "dateReturn",
+  "reasonReturn",
+]);
+
+const isInsigniaRound = ref<boolean>(true);
+
+const roundOps = ref<any[]>(roundData.value);
+const insigniaTypeOps = ref<any[]>(insigniaTypeData.value);
+const employeeClassOps = ref<any[]>(employeeClassData.value);
+
+const modalForm = ref<boolean>(false);
+const isEdit = ref<boolean>(false);
+
+/** function เรียกรอบการเสนอขอพระราชทานเครื่องราชฯ*/
+async function fetchInsigniaRound() {
+  roundData.value = [{ name: "ทั้งหมด", id: "all" }];
+  await http
+    .get(config.API.noteround(), { params: { path: "BORROW" } })
+    .then(async (res) => {
+      let data = res.data.result;
+      // isInsigniaRound.value = data.length !== 0 ? true : false;
+      const newOption = data.map((e: any) => ({ name: e.name, id: e.id }));
+      roundData.value.push(...newOption);
+      roundOps.value = roundData.value;
+    })
+    .catch((err) => {
+      messageError($q, err);
+    });
+}
+
+/** function เรียกประเภทเครื่องราชฯ*/
+async function fetchInsigniaType() {
+  insigniaTypeData.value = [{ name: "ทั้งหมด", id: "all" }];
+  await http
+    .get(config.API.insigniaOrg)
+    .then(async (res) => {
+      let data = res.data.result;
+      const newOption = data.map((e: any) => ({ name: e.name, id: e.id }));
+      insigniaTypeData.value.push(...newOption);
+      insigniaTypeOps.value = insigniaTypeData.value;
+    })
+    .catch((err) => {
+      messageError($q, err);
+    });
+}
+
+function fetchDataReclaim() {
+  rows.value = [
+    {
+      id: "1",
+      no: "001",
+      citizenId: "1103701234567",
+      fullName: "นายสมชาย ใจดี",
+      employeeType: "ข้าราชการ",
+      insigniaType: "เครื่องราชอิสริยาภรณ์ชั้นที่ 4",
+      dateReceive: "2024-12-10",
+      date: "2025-01-15",
+      volumeNo: "78",
+      section: "ก",
+      page: "35",
+      number: "1432",
+      vatnumber: "3101234567890",
+      payType: "โอนเงินผ่านธนาคาร",
+      dateReturn: "2025-02-01",
+      reasonReturn: "เปลี่ยนประเภทสิทธิ",
+    },
+  ];
+}
+
+function onOpenDialogForm(actions: boolean, id: string = "") {
+  modalForm.value = true;
+  isEdit.value = actions;
+}
+
+function onDeleteDataReclaim(id: string) {
+  dialogRemove($q, async () => {});
+}
+
+/** Hook*/
+onMounted(async () => {
+  try {
+    showLoader();
+    await Promise.allSettled([fetchInsigniaRound(), fetchInsigniaType()]);
+    fetchDataReclaim();
+  } catch (error) {
+    console.log(error);
+  } finally {
+    hideLoader();
+  }
+});
+</script>
+
+<template>
+  <div class="toptitle text-dark col-12 row items-center">
+    เรียกคืนเครื่องราชฯ
+  </div>
+
+  <q-card flat bordered class="q-pa-md" v-if="isInsigniaRound">
+    <div class="row q-col-gutter-sm">
+      <div class="col-12">
+        <div class="row q-col-gutter-y-sm">
+          <div class="row q-col-gutter-sm items-center">
+            <q-select
+              dense
+              outlined
+              lazy-rules
+              hide-bottom-space
+              :label="`${'รอบการเสนอขอเครื่องราชฯ'}`"
+              emit-value
+              map-options
+              use-input
+              hide-selected
+              fill-input
+              option-label="name"
+              :options="roundOps"
+              option-value="year"
+              style="width: 340px"
+            >
+              <template v-slot:no-option>
+                <q-item>
+                  <q-item-section class="text-grey">
+                    ไม่มีข้อมูล
+                  </q-item-section>
+                </q-item>
+              </template>
+            </q-select>
+          </div>
+
+          <q-space />
+          <div class="row q-col-gutter-sm">
+            <q-input
+              standout
+              dense
+              v-model="keyword"
+              outlined
+              placeholder="ค้นหา"
+            >
+              <template v-slot:append>
+                <q-icon name="search" />
+              </template>
+            </q-input>
+
+            <q-select
+              v-model="visibleColumns"
+              multiple
+              outlined
+              dense
+              options-dense
+              :display-value="$q.lang.table.columns"
+              emit-value
+              map-options
+              :options="columns"
+              option-value="name"
+              style="min-width: 140px"
+            />
+          </div>
+        </div>
+
+        <div class="col-12">
+          <q-card bordered class="q-pa-sm col-12 bg-grey-1 q-mt-sm">
+            <div class="row col-12 q-col-gutter-sm">
+              <q-select
+                dense
+                outlined
+                use-input
+                hide-selected
+                fill-input
+                lazy-rules
+                hide-bottom-space
+                :label="`${'เครื่องราชฯ'}`"
+                :options="insigniaTypeOps"
+                emit-value
+                map-options
+                option-label="name"
+                option-value="id"
+              >
+                <template v-slot:no-option>
+                  <q-item>
+                    <q-item-section class="text-grey">
+                      ไม่มีข้อมูล
+                    </q-item-section>
+                  </q-item>
+                </template>
+              </q-select>
+
+              <q-select
+                class="col-2"
+                dense
+                outlined
+                lazy-rules
+                hide-bottom-space
+                :label="`${'ตำแหน่งประเภท'}`"
+                emit-value
+                use-input
+                hide-selected
+                fill-input
+                map-options
+                :options="employeeClassOps"
+                option-label="name"
+                option-value="id"
+              >
+                <template v-slot:no-option>
+                  <q-item>
+                    <q-item-section class="text-grey">
+                      ไม่มีข้อมูล
+                    </q-item-section>
+                  </q-item>
+                </template>
+              </q-select>
+
+              <div>
+                <q-btn
+                  v-if="checkPermission($route)?.attrIsCreate"
+                  flat
+                  round
+                  color="primary"
+                  icon="mdi-plus"
+                  @click.stop.pervent="onOpenDialogForm(false)"
+                >
+                  <q-tooltip>เพิ่ม</q-tooltip>
+                </q-btn>
+              </div>
+            </div>
+          </q-card>
+        </div>
+      </div>
+
+      <div class="col-12">
+        <d-table
+          ref="table"
+          :columns="columns"
+          :rows="rows"
+          flat
+          bordered
+          :paging="true"
+          dense
+          class="custom-header-table"
+          :visible-columns="visibleColumns"
+        >
+          <!-- @update:pagination="updatePagination" -->
+          <template v-slot:header="props">
+            <q-tr :props="props">
+              <q-th auto-width></q-th>
+              <q-th
+                v-for="col in props.cols"
+                :key="col.name"
+                :props="props"
+                style="color: #000000; font-weight: 500"
+              >
+                <span class="text-weight-medium">{{ col.label }}</span>
+              </q-th>
+            </q-tr>
+          </template>
+          <template v-slot:body="props">
+            <q-tr :props="props">
+              <q-td auto-width>
+                <q-btn
+                  v-if="
+                    checkPermission($route)?.attrIsGet &&
+                    checkPermission($route)?.attrIsUpdate
+                  "
+                  dense
+                  flat
+                  round
+                  color="edit"
+                  icon="edit"
+                  @click.stop.pervent="onOpenDialogForm(true, props.row.id)"
+                  ><q-tooltip>แก้ไขข้อมูล</q-tooltip>
+                </q-btn>
+                <q-btn
+                  v-if="checkPermission($route)?.attrIsDelete"
+                  dense
+                  flat
+                  round
+                  color="red"
+                  icon="delete"
+                  @click.stop.pervent="onDeleteDataReclaim(props.row.id)"
+                  ><q-tooltip>ลบข้อมูล</q-tooltip>
+                </q-btn>
+              </q-td>
+              <q-td v-for="col in props.cols" :key="col.name" :props="props">
+                <div>
+                  {{ col.value ?? "-" }}
+                </div>
+              </q-td>
+            </q-tr>
+          </template>
+          <!-- <template v-slot:pagination="scope">
+            ทั้งหมด {{ total.toLocaleString() }} รายการ
+            <q-pagination
+              v-model="formFilter.page"
+              active-color="primary"
+              color="dark"
+              :max="Number(maxPage)"
+              size="sm"
+              boundary-links
+              direction-links
+              :max-pages="5"
+              @update:model-value="onSearchData(false)"
+            ></q-pagination>
+          </template> -->
+        </d-table>
+      </div>
+    </div>
+  </q-card>
+
+  <q-card v-else>
+    <div class="q-pa-md q-gutter-sm">
+      <q-banner inline-actions rounded class="bg-grey-1 text-center">
+        ไม่มีข้อมูลรอบการเสนอขอพระราชทานเครื่องราชอิสริยาภรณ์
+      </q-banner>
+    </div>
+  </q-card>
+
+  <DialogForm v-model:modal="modalForm" :is-edit="isEdit" />
+</template>
+
+<style scoped></style>