From 73716895945dba1a5c2c9f0d3cb5791af0480ab4 Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Thu, 16 Nov 2023 11:29:56 +0700
Subject: [PATCH] =?UTF-8?q?comment=20code=20=20=E0=B8=AA=E0=B9=88=E0=B8=A7?=
 =?UTF-8?q?=E0=B8=99=E0=B9=80=E0=B8=84=E0=B8=A3=E0=B8=B7=E0=B9=88=E0=B8=AD?=
 =?UTF-8?q?=E0=B8=87=E0=B8=A3=E0=B8=B2=E0=B8=8A?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/4_Allocate/DialogEdit.vue      |  33 +-
 .../components/4_Allocate/DialogForm.vue      |  72 ++--
 .../components/4_Allocate/Main.vue            | 384 ++++++++++--------
 .../components/4_Allocate/OrgAdd.vue          | 191 +++------
 .../components/4_Allocate/OrgList.vue         | 383 ++++++++---------
 .../components/5_Borrow/DialogForm.vue        | 126 +++---
 .../07_insignia/components/5_Borrow/Main.vue  | 322 ++++++++-------
 7 files changed, 745 insertions(+), 766 deletions(-)

diff --git a/src/modules/07_insignia/components/4_Allocate/DialogEdit.vue b/src/modules/07_insignia/components/4_Allocate/DialogEdit.vue
index 272be58ee..d37337a69 100644
--- a/src/modules/07_insignia/components/4_Allocate/DialogEdit.vue
+++ b/src/modules/07_insignia/components/4_Allocate/DialogEdit.vue
@@ -1,15 +1,21 @@
 <script setup lang="ts">
 import { ref, watch } from "vue";
 import { QForm, useQuasar } from "quasar";
-import { useCounterMixin } from "@/stores/mixin";
+
+/** impotrComponents */
 import DialogHeader from "@/components/DialogHeader.vue";
 
+/** impotrStores */
+import { useCounterMixin } from "@/stores/mixin";
+
 const mixin = useCounterMixin();
 const { dialogConfirm } = mixin;
+
 const $q = useQuasar();
 
 const title = ref<string>("");
 const amount = ref<number>();
+
 const props = defineProps({
   modal: Boolean,
   save: {
@@ -28,17 +34,13 @@ const props = defineProps({
     type: String,
   },
 });
-watch(props, () => {
-  if (props.modal === true) {
-    amount.value = props.insigniadata.total;
-    if (props.actionType === "insignia") {
-      title.value = props.insigniadata.insignia;
-    } else title.value = props.insigniadata.organization;
-  }
-});
-const closeModal = () => {
+
+/** function closePopup*/
+function closeModal() {
   props.close();
-};
+}
+
+/** function ยืนยันการบันทึก*/
 const clickSave = () => {
   dialogConfirm($q, () => {
     if (props.actionType === "insignia") {
@@ -53,6 +55,15 @@ const clickSave = () => {
     }
   });
 };
+
+watch(props, () => {
+  if (props.modal === true) {
+    amount.value = props.insigniadata.total;
+    if (props.actionType === "insignia") {
+      title.value = props.insigniadata.insignia;
+    } else title.value = props.insigniadata.organization;
+  }
+});
 </script>
 <template>
   <q-dialog v-model="props.modal" persistent>
diff --git a/src/modules/07_insignia/components/4_Allocate/DialogForm.vue b/src/modules/07_insignia/components/4_Allocate/DialogForm.vue
index dd1919f1e..7509b09c1 100644
--- a/src/modules/07_insignia/components/4_Allocate/DialogForm.vue
+++ b/src/modules/07_insignia/components/4_Allocate/DialogForm.vue
@@ -1,23 +1,25 @@
 <script setup lang="ts">
-import { ref, watch,onMounted } from "vue";
+import { ref, watch } from "vue";
 import { QForm, useQuasar } from "quasar";
-import { useCounterMixin } from "@/stores/mixin";
-import DialogHeader from "@/components/DialogHeader.vue";
 import { useRouter } from "vue-router";
 
-const $q = useQuasar();
-const myForm = ref<QForm | null>(null); //form data input
+/** impotrComponents */
+import DialogHeader from "@/components/DialogHeader.vue";
+
+/** impotrStores */
+import { useCounterMixin } from "@/stores/mixin";
 const mixin = useCounterMixin();
 const { dialogConfirm, dialogMessageNotify } = mixin;
+
+const $q = useQuasar();
 const router = useRouter();
+const myForm = ref<QForm | null>(null); //form data input
+
 const routeName = router.currentRoute.value.name;
 const amount = ref<number | null>();
 const Org = ref<string | null>("");
 const grandCross = ref<string | null>("");
-const filterInsigniaOp = ref<any>()
-const closeModal = () => {
-  props.close();
-};
+const filterInsigniaOp = ref<any>();
 
 const props = defineProps({
   modal: Boolean,
@@ -35,29 +37,30 @@ const props = defineProps({
   },
 });
 
-watch(props, () => {
-  if (props.modal === false) {
-    grandCross.value = "";
-    Org.value = "";
-    amount.value = null;
-  }
-});
-watch(() => props.insigniaList, (newVal) => {
-      filterInsigniaOp.value = newVal;
-    });
-    const filterSelector = (val: any, update: Function, name: any) => {
+/** function closePopup*/
+function closeModal() {
+  props.close();
+}
+
+/**
+ * function ค้นหาข้อมูลใน option
+ * @param val คำค้นหา
+ * @param update function
+ * @param name ชื่อ Selec
+ */
+function filterSelector(val: any, update: Function, name: any) {
   update(() => {
     const needle = val.toLowerCase();
-    if (name === 'filterInsigniaOp') {
-      grandCross.value = null
+    if (name === "filterInsigniaOp") {
+      grandCross.value = null;
       filterInsigniaOp.value = props.insigniaList.filter(
-          (v: any) => v.name.toLowerCase().indexOf(needle) > -1
-        );
+        (v: any) => v.name.toLowerCase().indexOf(needle) > -1
+      );
     }
-
-    }
-  )
+  });
 }
+
+/** function ยืนยันการบันทึก*/
 const clickSave = () => {
   if (myForm.value !== null) {
     myForm.value.validate().then(async (success) => {
@@ -69,6 +72,21 @@ const clickSave = () => {
     });
   }
 };
+
+watch(props, () => {
+  if (props.modal === false) {
+    grandCross.value = "";
+    Org.value = "";
+    amount.value = null;
+  }
+});
+
+watch(
+  () => props.insigniaList,
+  (newVal) => {
+    filterInsigniaOp.value = newVal;
+  }
+);
 </script>
 
 <template>
diff --git a/src/modules/07_insignia/components/4_Allocate/Main.vue b/src/modules/07_insignia/components/4_Allocate/Main.vue
index 4dd5284c9..ed15c5e94 100644
--- a/src/modules/07_insignia/components/4_Allocate/Main.vue
+++ b/src/modules/07_insignia/components/4_Allocate/Main.vue
@@ -1,124 +1,52 @@
 <script setup lang="ts">
 import { ref, onMounted, watch, useAttrs } from "vue";
-
-import { useCounterMixin } from "@/stores/mixin";
 import http from "@/plugins/http";
 import config from "@/app.config";
-import { useAllocateDataStore } from "@/modules/07_insignia/storeAllocate";
 import router from "@/router";
+import { useQuasar } from "quasar";
+
+/** impotrType */
+import type { OptionDataYear } from "@/modules/07_insignia/interface/index/Main";
+import type { QTableProps, QInput } from "quasar";
+
+/** impotrComponents */
 import DialogForm from "@/modules/07_insignia/components/4_Allocate/DialogForm.vue";
 import DialogEdit from "@/modules/07_insignia/components/4_Allocate/DialogEdit.vue";
 
-import type { OptionDataYear } from "@/modules/07_insignia/interface/index/Main";
-import type { QTableProps, QInput } from "quasar";
-import { useQuasar } from "quasar";
-
+/** impotrStores */
+import { useCounterMixin } from "@/stores/mixin";
+import { useAllocateDataStore } from "@/modules/07_insignia/storeAllocate";
 const DataStore = useAllocateDataStore();
 const mixin = useCounterMixin();
 const { showLoader, hideLoader, messageError, dialogRemove, success } = mixin;
 
-const redirectToPage = (id: string, name: string) => {
-  DataStore.insigniaName = name;
-  router.push(`/insignia/allocate/org/${id}`);
-};
-const paging = ref<boolean>(true);
-const paginationLabel = (start: string, end: string, total: string) => {
-  if (paging.value == true) return " " + start + "-" + end + " ใน " + total;
-  else return start + "-" + end + " ใน " + total;
-};
-const pagination = ref({
-  sortBy: "desc",
-  descending: false,
-  page: 1,
-  rowsPerPage: 10,
-});
 const $q = useQuasar();
-const tab = ref<string>("");
 const attrs = ref<any>(useAttrs());
+
+const tab = ref<string>("");
 const selectRound = ref<string>();
 const selectRoundOption = ref<OptionDataYear[]>([]);
 const modal = ref<boolean>(false);
 const action = ref<string>("");
 const roundYear = ref<number>();
 const insigniaOp = ref<any>([]);
-const filterInsigniaOp = ref<any>({insigniaOp:[]})
+const filterInsigniaOp = ref<any>({ insigniaOp: [] });
 const loadView = ref<boolean>(false);
-
-onMounted(async () => {
-  await fecthRound();
+const pagination = ref({
+  sortBy: "desc",
+  descending: false,
+  page: 1,
+  rowsPerPage: 10,
 });
-// เรียกรอบการเสนอขอ
-const fecthRound = async () => {
-  await http
-    .get(config.API.noteround())
-    .then(async (res) => {
-      let data = res.data.result;
-      if (data.length !== 0) {
-        selectRoundOption.value = data.map((e: any) => ({
-          id: e.id,
-          name: "รอบการเสนอขอพระราชทานเครื่องราชฯ ปี" + "  " + (e.year + 543),
-          year: e.year,
-        }));
-        if (DataStore.roundId && DataStore.roundYear) {
-          selectRound.value = DataStore.roundId;
-          roundYear.value = DataStore.roundYear;
-        } else {
-          selectRound.value = data[0].id;
-          roundYear.value = data[0].year;
-        }
-        if (selectRound.value) {
-          DataStore.roundId = selectRound.value;
-        }
-        if (roundYear.value) {
-          await fecthInsigniaType();
-        }
-      }
-    })
-    .catch((err) => {
-      messageError($q, err);
-    });
-};
-// ประเภทเครื่องราช
-const fecthInsignia = async () => {
-  await http
-    .get(config.API.insignia)
-    .then((res) => {
-      let data = res.data.result;
-      DataStore.fetchDatainsignia(data);
-    })
-    .catch((err) => {
-      messageError($q, err);
-    })
-    .finally(async () => {
-      insigniaOp.value = await DataStore.insigniaOp.filter(
-        (x: any) => x.type == tab.value || x.type === ""
-      );
-    });
-};
-// tab
-const fecthInsigniaType = async () => {
-  await http(config.API.insigniaType)
-    .then((res) => {
-      let data = res.data.result;
-      DataStore.fetchDatainsigniaType(data);
-      if (DataStore.mainTab) {
-        tab.value = DataStore.mainTab;
-      } else tab.value = DataStore.insigniaType[0].name;
-      loadView.value = true;
-      fecthInsignia();
-    })
-    .catch((err) => {
-      messageError($q, err);
-    });
-};
 
+/** ข้อมูล Table*/
 const visibleColumns = ref<string[]>([
   "no",
   "insignia",
   "total",
   "allocate",
   "remain",
-]); //ค้นหา คอลัมน์ คอลัมน์ที่แสดง
+]);
 const columns = ref<QTableProps["columns"]>([
   {
     name: "no",
@@ -167,21 +95,79 @@ const columns = ref<QTableProps["columns"]>([
     style: "font-size: 14px",
   },
 ]);
-// เมื่อเปลี่ยน tab
-watch(tab, () => {
-  insigniaOp.value = DataStore.insigniaOp.filter(
-    (x: any) => x.type == tab.value || x.type === ""
-  );
-  let a = insigniaOp.value.find((e: any) => e.id == DataStore.insignia);
-  if (!a) {
-    DataStore.insignia = "";
-  }
-   filterInsigniaOp.value = insigniaOp.value
-  fecthlistInsignia();
-});
+const filterRef = ref<QInput>();
+const filter = ref<string>("");
+const rowData = ref<any>([]);
 
-// เลือกรอบการเสนขอ
-const selectorRound = (round: string | undefined) => {
+/** function เรียกรอบการเสนอขอ*/
+async function fecthRound() {
+  await http
+    .get(config.API.noteround())
+    .then(async (res) => {
+      let data = res.data.result;
+      if (data.length !== 0) {
+        selectRoundOption.value = data.map((e: any) => ({
+          id: e.id,
+          name: "รอบการเสนอขอพระราชทานเครื่องราชฯ ปี" + "  " + (e.year + 543),
+          year: e.year,
+        }));
+        if (DataStore.roundId && DataStore.roundYear) {
+          selectRound.value = DataStore.roundId;
+          roundYear.value = DataStore.roundYear;
+        } else {
+          selectRound.value = data[0].id;
+          roundYear.value = data[0].year;
+        }
+        if (selectRound.value) {
+          DataStore.roundId = selectRound.value;
+        }
+        if (roundYear.value) {
+          await fecthInsigniaType();
+        }
+      }
+    })
+    .catch((err) => {
+      messageError($q, err);
+    });
+}
+
+/** function เรียกประเภทเครื่องราช*/
+async function fecthInsignia() {
+  await http
+    .get(config.API.insignia)
+    .then((res) => {
+      let data = res.data.result;
+      DataStore.fetchDatainsignia(data);
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(async () => {
+      insigniaOp.value = await DataStore.insigniaOp.filter(
+        (x: any) => x.type == tab.value || x.type === ""
+      );
+    });
+}
+
+/** function เรียก Tab*/
+const fecthInsigniaType = async () => {
+  await http(config.API.insigniaType)
+    .then((res) => {
+      let data = res.data.result;
+      DataStore.fetchDatainsigniaType(data);
+      if (DataStore.mainTab) {
+        tab.value = DataStore.mainTab;
+      } else tab.value = DataStore.insigniaType[0].name;
+      loadView.value = true;
+      fecthInsignia();
+    })
+    .catch((err) => {
+      messageError($q, err);
+    });
+};
+
+/** function เลือกรอบการเสนขอ*/
+async function selectorRound(round: string | undefined) {
   selectRound.value = round;
   if (selectRound.value) {
     DataStore.roundId = selectRound.value;
@@ -189,10 +175,11 @@ const selectorRound = (round: string | undefined) => {
   const yearFilter = selectRoundOption.value.find((x: any) => x.id == round); // หาปีของรอบการเสนอขอ
   roundYear.value = yearFilter?.year;
   DataStore.roundYear = roundYear.value;
-  fecthlistInsignia();
-};
-// เรียกรายการเครืองราชฯ
-const fecthlistInsignia = async () => {
+  await fecthlistInsignia();
+}
+
+/** function เรียกรายการเครืองราชฯ */
+async function fecthlistInsignia() {
   DataStore.mainTab = tab.value;
   showLoader();
   await http
@@ -207,24 +194,34 @@ const fecthlistInsignia = async () => {
     .finally(() => {
       hideLoader();
     });
-};
+}
 
-const filterRef = ref<QInput>();
-const filter = ref<string>("");
+/**
+ * function reDirectToPage หน่วยงานจัดสรรเครื่องราชอิสริยาภรณ์
+ * @param id  จัดสรรเครื่องราชอิสริยาภรณ์
+ * @param name ชื่อเครื่องราช
+ */
+function redirectToPage(id: string, name: string) {
+  DataStore.insigniaName = name;
+  router.push(`/insignia/allocate/org/${id}`);
+}
 
-const close = () => {
+/** ตัวแปร popup*/
+const modalEdit = ref<boolean>(false);
+const actionType = ref<string>("");
+/** function closePopup*/
+function close() {
   modal.value = false;
   modalEdit.value = false;
-};
-// เปิด popup การเพิ่มการจัดสรรเครื่องราชฯ
+}
+
+/** function openPopup การเพิ่มการจัดสรรเครื่องราชฯ*/
 const addData = () => {
   modal.value = true;
   action.value = "addData";
 };
 
-const modalEdit = ref<boolean>(false);
-const rowData = ref<any>([]);
-const actionType = ref<string>("");
+/** function openPopup การแกไขการจัดสรรเครื่องราชฯ*/
 const clickEditrow = (data: any) => {
   rowData.value = data;
   modalEdit.value = true;
@@ -251,13 +248,21 @@ const save = async (insigniaId: string, total: string) => {
       close();
     });
 };
-// แก้ไขการจัดสรรเครื่องราชฯ
-const saveEdit = async (
+
+//
+/**
+ * function บัททึกการแก้ไขการจัดสรรเครื่องราชฯ
+ * @param id  รอบการเสนอ
+ * @param insigniaId การจัดสรรเครื่องราชฯ
+ * @param total จำนวน
+ * @param year ปี
+ */
+async function saveEdit(
   id: string,
   insigniaId: string,
   total: Number,
   year: Number
-) => {
+) {
   showLoader();
   let body = {
     insignia: insigniaId,
@@ -277,9 +282,13 @@ const saveEdit = async (
       hideLoader();
       close();
     });
-};
-// ลบการจัดสรรเครื่องราชฯ
-const clickDelete = async (insigniaId: string) => {
+}
+
+/**
+ * function  ลบการจัดสรรเครื่องราชฯ
+ * @param insigniaId  การจัดสรรเครื่องราชฯ
+ */
+async function clickDelete(insigniaId: string) {
   dialogRemove($q, async () => {
     showLoader();
     await http
@@ -295,33 +304,61 @@ const clickDelete = async (insigniaId: string) => {
         hideLoader();
       });
   });
-};
+}
 
-const resetFilter = () => {
+function resetFilter() {
   // reset ค่าที่ค้นหาเมื่อกดปุ่ม X ในกล่องค้นหา
   filter.value = "";
   filterRef.value!.focus();
-};
-const filterSelector = (val: any, update: Function, name: any) => {
+}
+
+/**
+ * function ค้นหาข้อมูลใน option
+ * @param val คำค้นหา
+ * @param update function
+ * @param name ชื่อ Selec
+ */
+function filterSelector(val: any, update: Function, name: any) {
   update(() => {
     const needle = val.toLowerCase();
-    if (name === 'filterInsigniaOp') {
-      DataStore.insignia = undefined as any
+    if (name === "filterInsigniaOp") {
+      DataStore.insignia = undefined as any;
       filterInsigniaOp.value = insigniaOp.value.filter(
-          (v: any) => v.name.toLowerCase().indexOf(needle) > -1
-        );
+        (v: any) => v.name.toLowerCase().indexOf(needle) > -1
+      );
     }
-
-    }
-  )
+  });
 }
+
+/**
+ *  function เคลียร์  filter
+ * @param name ชื่อ filter
+ */
 const clearInsigniaFilters = (name: string) => {
-  console.log(insigniaOp.value)
+  console.log(insigniaOp.value);
   if (name === "filterInsigniaOp") {
-    DataStore.insignia = '';
+    DataStore.insignia = "";
     filterInsigniaOp.value = insigniaOp.value;
   }
 };
+
+/** function callback ทำงานเมื่อ Tab มีการเปลี่ยน*/
+watch(tab, () => {
+  insigniaOp.value = DataStore.insigniaOp.filter(
+    (x: any) => x.type == tab.value || x.type === ""
+  );
+  let a = insigniaOp.value.find((e: any) => e.id == DataStore.insignia);
+  if (!a) {
+    DataStore.insignia = "";
+  }
+  filterInsigniaOp.value = insigniaOp.value;
+  fecthlistInsignia();
+});
+
+/** Hook*/
+onMounted(async () => {
+  await fecthRound();
+});
 </script>
 
 <template>
@@ -353,13 +390,11 @@ const clearInsigniaFilters = (name: string) => {
         input-class="text-bold text-grey"
         @update:model-value="selectorRound(selectRound)"
       >
-      <template v-slot:no-option>
-                <q-item>
-                  <q-item-section class="text-grey">
-                    ไม่มีข้อมูล
-                  </q-item-section>
-                </q-item>
-              </template>
+        <template v-slot:no-option>
+          <q-item>
+            <q-item-section class="text-grey"> ไม่มีข้อมูล </q-item-section>
+          </q-item>
+        </template>
       </q-select>
     </div>
     <q-separator />
@@ -406,28 +441,34 @@ const clearInsigniaFilters = (name: string) => {
                 @update:model-value="
                   DataStore.selectInsignia(DataStore.insignia)
                 "
-               @filter="(inputValue:any,
+                @filter="(inputValue:any,
                       doneFn:Function) => filterSelector(inputValue, doneFn,'filterInsigniaOp'
                       ) "
-        >
-          <template v-if="DataStore.insignia !== undefined && DataStore.insignia !== ''" v-slot:append>
-            <q-icon
-              name="cancel"
-              @click.stop.prevent="
-                clearInsigniaFilters('filterInsigniaOp'),
-                DataStore.selectInsignia(DataStore.insignia)
-              "
-              class="cursor-pointer"
-            />
-          </template>
-          <template v-slot:no-option>
-                <q-item>
-                  <q-item-section class="text-grey">
-                    ไม่มีข้อมูล
-                  </q-item-section>
-                </q-item>
-              </template>
-        </q-select>
+              >
+                <template
+                  v-if="
+                    DataStore.insignia !== undefined &&
+                    DataStore.insignia !== ''
+                  "
+                  v-slot:append
+                >
+                  <q-icon
+                    name="cancel"
+                    @click.stop.prevent="
+                      clearInsigniaFilters('filterInsigniaOp'),
+                        DataStore.selectInsignia(DataStore.insignia)
+                    "
+                    class="cursor-pointer"
+                  />
+                </template>
+                <template v-slot:no-option>
+                  <q-item>
+                    <q-item-section class="text-grey">
+                      ไม่มีข้อมูล
+                    </q-item-section>
+                  </q-item>
+                </template>
+              </q-select>
             </div>
 
             <div>
@@ -496,7 +537,6 @@ const clearInsigniaFilters = (name: string) => {
             class="custom-header-table"
             v-bind="attrs"
             :visible-columns="visibleColumns"
-            :pagination-label="paginationLabel"
             v-model:pagination="pagination"
           >
             <template v-slot:header="props">
@@ -602,18 +642,6 @@ const clearInsigniaFilters = (name: string) => {
                 </q-td>
               </q-tr>
             </template>
-            <template v-slot:pagination="scope">
-              <q-pagination
-                v-model="pagination.page"
-                active-color="primary"
-                color="dark"
-                :max="scope.pagesNumber"
-                :max-pages="5"
-                size="sm"
-                boundary-links
-                direction-links
-              ></q-pagination>
-            </template>
           </d-table>
         </div>
       </q-tab-panel>
diff --git a/src/modules/07_insignia/components/4_Allocate/OrgAdd.vue b/src/modules/07_insignia/components/4_Allocate/OrgAdd.vue
index 3406c98fa..065bb916f 100644
--- a/src/modules/07_insignia/components/4_Allocate/OrgAdd.vue
+++ b/src/modules/07_insignia/components/4_Allocate/OrgAdd.vue
@@ -1,20 +1,25 @@
 <script setup lang="ts">
 import { ref, useAttrs } from "vue";
 import type { QTableProps } from "quasar";
-import router from "@/router";
 import { useQuasar } from "quasar";
-import { useCounterMixin } from "@/stores/mixin";
+
+/** impotrComponents */
 import DialogPopupReason from "@/components/Dialogs/PopupReason.vue";
 import DialogHeader from "@/modules/07_insignia/components/DialogHeader.vue";
 import cardTop from "@/modules/07_insignia/components/2_Manage/StatCard.vue";
 
+/** impotrStores */
+import { useCounterMixin } from "@/stores/mixin";
 const mixin = useCounterMixin();
 const { dialogMessage } = mixin;
-const name = ref<string>("");
+
 const $q = useQuasar(); //ใช้ noti quasar
+const attrs = ref<any>(useAttrs());
+
 const modal = ref<boolean>(false);
 const saveWriteNote = ref<any[]>([]);
 const addNote = ref<boolean>(false);
+const name = ref<string>("");
 
 const clickNote = () => {
   addNote.value = true;
@@ -32,6 +37,7 @@ const stat = ref<any>({
   remainInsig: 1,
 });
 
+/** ข้อมูล Table1*/
 const visibleColumns = ref<string[]>([
   "no",
   "citizenId",
@@ -42,9 +48,7 @@ const visibleColumns = ref<string[]>([
   "positionLine",
   "positionNum",
   "status",
-]); //ค้นหา คอลัมน์ คอลัมน์ที่แสดง
-
-// หัวตาราง
+]);
 const columns = ref<QTableProps["columns"]>([
   {
     name: "no",
@@ -128,44 +132,9 @@ const columns = ref<QTableProps["columns"]>([
     style: "font-size: 14px",
   },
 ]);
+const rows = ref<any[]>([]);
 
-// ข้อมูลตาราง (จำลอง)
-const rows = ref<any[]>([
-  {
-    no: "1",
-    citizenId: "1XXXXXXXXXXXX",
-    name: "นางสาวรัชภรณ์ ภักดี",
-    organization: "ฝ่ายบริหารงานทั่วไป",
-    positionType: "บริหาร",
-    positionAdmin: "บริหาร",
-    positionLine: "ชำนาญการพิเศษ",
-    positionNum: "ลกก.3",
-    status: "ยังมีชีวิต",
-  },
-  {
-    no: "2",
-    citizenId: "1XXXXXXXXXXXX",
-    name: "นางสาวภาพรรณ ลออ",
-    organization: "ฝ่ายบริหารงานทั่วไป",
-    positionType: "บริหาร",
-    positionAdmin: "จัดการงานทั่วไป",
-    positionLine: "ชำนาญงาน",
-    positionNum: "กบห.2",
-    status: "ยังมีชีวิต",
-  },
-  {
-    no: "3",
-    citizenId: "1XXXXXXXXXXXX",
-    name: "นางสาวรัชภรณ์ ภักดี",
-    organization: "ฝ่ายบริหารงานทั่วไป",
-    positionType: "บริหาร",
-    positionAdmin: "บริหาร",
-    positionLine: "ชำนาญการพิเศษ",
-    positionNum: "ลกก.3",
-    status: "ยังมีชีวิต",
-  },
-]);
-
+/** ข้อมูล Table2*/
 const visibleColumns2 = ref<string[]>([
   "no",
   "name",
@@ -173,7 +142,6 @@ const visibleColumns2 = ref<string[]>([
   "level",
   "institution",
 ]);
-// หัวตาราง2
 const columns2 = ref<QTableProps["columns"]>([
   {
     name: "no",
@@ -221,72 +189,40 @@ const columns2 = ref<QTableProps["columns"]>([
     style: "font-size: 14px",
   },
 ]);
+const rows2 = ref<any[]>([]);
 
-// ข้อมูลตาราง2 (จำลอง)
-const rows2 = ref<any[]>([
-  {
-    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(() => {});
+// };
 
-// หัวตาราง2
-const clickDelete = (id: string) => {
-  $q.dialog({
-    title: "ยืนยันการลบข้อมูล",
-    message: "ต้องการลบข้อมูลนี้ใช่หรือไม่?",
-    cancel: {
-      flat: true,
-      color: "negative",
-    },
-    persistent: true,
-  })
-    .onOk(async () => {})
-    .onCancel(() => {})
-    .onDismiss(() => {});
-};
-const clickClose = async () => {
+/** function closePopup*/
+function clickClose() {
   modal.value = false;
-};
+}
 
-const clickCloseNote = async () => {
+/** function closePopupNote*/
+function clickCloseNote() {
   addNote.value = false;
-};
-const clickAdd = () => {
+}
+
+/** function openPopupAdd*/
+function clickAdd() {
   modal.value = true;
-};
-const saveNote = async () => {
+}
+
+/** function บันทึกข้อมูล note*/
+async function saveNote() {
   if (saveWriteNote.value.length == 0) {
     dialogMessage(
       $q,
@@ -301,30 +237,21 @@ const saveNote = async () => {
     );
     return;
   }
-};
+}
 
-// ค้นหาในตาราง
+/** ค้นหาในตาราง*/
 const filterKeyword = ref<string>("");
 const filterRef = ref<any>(null);
 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 paginationLabel = (start: string, end: string, total: string) => {
-  if (paging.value == true) return " " + start + "-" + end + " ใน " + total;
-  else return start + "-" + end + " ใน " + total;
-};
 </script>
 
 <template>
@@ -409,7 +336,7 @@ const paginationLabel = (start: string, end: string, total: string) => {
         />
       </div>
       <div class="col-12">
-        <q-table
+        <d-table
           ref="table"
           :columns="columns"
           :rows="rows"
@@ -422,7 +349,6 @@ const paginationLabel = (start: string, end: string, total: string) => {
           class="custom-header-table"
           v-bind="attrs"
           :visible-columns="visibleColumns"
-          :pagination-label="paginationLabel"
           v-model:pagination="pagination"
         >
           <template v-slot:header="props">
@@ -480,19 +406,7 @@ const paginationLabel = (start: string, end: string, total: string) => {
               </q-td>
             </q-tr>
           </template>
-          <template v-slot:pagination="scope">
-            <q-pagination
-              v-model="pagination.page"
-              active-color="primary"
-              color="dark"
-              :max="scope.pagesNumber"
-              :max-pages="5"
-              size="sm"
-              boundary-links
-              direction-links
-            ></q-pagination>
-          </template>
-        </q-table>
+        </d-table>
       </div>
     </div>
   </q-card>
@@ -524,7 +438,7 @@ const paginationLabel = (start: string, end: string, total: string) => {
             </template>
           </q-input>
           <div class="col-12">
-            <q-table
+            <d-table
               ref="table2"
               :columns="columns2"
               :rows="rows2"
@@ -537,7 +451,6 @@ const paginationLabel = (start: string, end: string, total: string) => {
               class="custom-header-table"
               v-bind="attrs"
               :visible-columns="visibleColumns2"
-              :pagination-label="paginationLabel"
               v-model:pagination="pagination"
             >
               <template v-slot:header="props">
@@ -579,19 +492,7 @@ const paginationLabel = (start: string, end: string, total: string) => {
                   </q-td>
                 </q-tr>
               </template>
-              <template v-slot:pagination="scope">
-                <q-pagination
-                  v-model="pagination.page"
-                  active-color="primary"
-                  color="dark"
-                  :max="scope.pagesNumber"
-                  :max-pages="5"
-                  size="sm"
-                  boundary-links
-                  direction-links
-                ></q-pagination>
-              </template>
-            </q-table>
+            </d-table>
           </div>
         </q-card-section>
       </q-form>
diff --git a/src/modules/07_insignia/components/4_Allocate/OrgList.vue b/src/modules/07_insignia/components/4_Allocate/OrgList.vue
index bf56816ed..afae98daa 100644
--- a/src/modules/07_insignia/components/4_Allocate/OrgList.vue
+++ b/src/modules/07_insignia/components/4_Allocate/OrgList.vue
@@ -1,175 +1,31 @@
 <script setup lang="ts">
 import { onMounted, ref, useAttrs } from "vue";
-import type { QTableProps } from "quasar";
-import router from "@/router";
 import { useQuasar } from "quasar";
-import cardTop from "@/modules/07_insignia/components/2_Manage/StatCard.vue";
-import DialogForm from "@/modules/07_insignia/components/4_Allocate/DialogForm.vue";
 import { useRoute } from "vue-router";
+import router from "@/router";
 import http from "@/plugins/http";
 import config from "@/app.config";
-import { useCounterMixin } from "@/stores/mixin";
-import { useAllocateDataStore } from "@/modules/07_insignia/storeAllocate";
+
+/** impotrType */
+import type { QTableProps } from "quasar";
+
+/** impotrComponents */
+import cardTop from "@/modules/07_insignia/components/2_Manage/StatCard.vue";
+import DialogForm from "@/modules/07_insignia/components/4_Allocate/DialogForm.vue";
 import DialogEdit from "@/modules/07_insignia/components/4_Allocate/DialogEdit.vue";
 
+/** impotrStores */
+import { useCounterMixin } from "@/stores/mixin";
+import { useAllocateDataStore } from "@/modules/07_insignia/storeAllocate";
 const DataStore = useAllocateDataStore();
 const mixin = useCounterMixin();
 const { showLoader, hideLoader, messageError, success, dialogRemove } = mixin;
 
-const name = ref<string>("");
+const attrs = ref<any>(useAttrs());
 const $q = useQuasar(); //ใช้ noti quasar
 const route = useRoute();
-const id = ref<string>(route.params.id.toString());
-const modal = ref<boolean>(false);
-const orgList = ref<any>([]);
-const pagination = ref({
-  sortBy: "desc",
-  descending: false,
-  page: 1,
-  rowsPerPage: 10,
-});
-const stat = ref<any>({
-  total: 0,
-  allocate: 0,
-  remain: 0,
-});
-
-onMounted(async () => {
-  fecthDashboard();
-  fecthListData();
-  name.value = DataStore.insigniaName;
-
-  fetchOrgList();
-});
-
-const fecthDashboard = async () => {
-  showLoader();
-  await http
-    .get(config.API.insigniaManageOrgDashboard(id.value))
-    .then((res) => {
-      stat.value = {
-        total: res.data.result.total,
-        allocate: res.data.result.allocate,
-        remain: res.data.result.remain,
-      };
-    })
-    .catch((err) => {
-      messageError($q, err);
-    })
-    .finally(() => hideLoader());
-};
-
-const fecthListData = async () => {
-  showLoader();
-  await http
-    .get(config.API.insigniaManageOrg(id.value))
-    .then((res) => {
-      rows.value = res.data.result.map((e: any) => ({
-        id: e.id,
-        organization: e.organizationOrganization,
-        total: e.total,
-        allocate: e.allocate,
-        remain: e.remain,
-      }));
-    })
-    .catch((err) => {
-      messageError($q, err);
-    })
-    .finally(() => hideLoader());
-};
-
-const fetchOrgList = async () => {
-  showLoader();
-  await http
-    .get(config.API.typeOc())
-    .then(async (response: any) => {
-      orgList.value = response.data.result.map((e: any) => ({
-        id: e.organizationId,
-        name: e.organizationName,
-      }));
-    })
-    .catch((err) => {
-      messageError($q, err);
-    })
-    .finally(() => {
-      hideLoader();
-    });
-};
-
-const backHistory = () => {
-  router.push(`/insignia/allocate`);
-};
-
-const close = () => {
-  modal.value = false;
-  modalEdit.value = false;
-};
-
-const save = async (organizationId: string, total: string) => {
-  showLoader();
-  await http
-    .post(config.API.insigniaManageOrgAdd(), {
-      organizationOrganizationId: organizationId,
-      insigniaManageId: id.value,
-      total: total,
-    })
-    .then((res) => {
-      fecthListData();
-      fecthDashboard();
-    })
-    .catch((err) => {
-      messageError($q, err);
-    })
-    .finally(() => {
-      hideLoader();
-      close();
-    });
-};
-const saveEdit = async (organizationId: string, amount: number) => {
-  showLoader();
-  await http
-    .put(config.API.insigniaManageOrg(organizationId), {
-      total: Number(amount),
-    })
-    .then(async () => {
-      success($q, "แก้ไขมูลสำเร็จ");
-      await fecthDashboard();
-      await fecthListData();
-    })
-    .catch((err) => {
-      messageError($q, err);
-    })
-    .finally(() => {
-      hideLoader();
-      close();
-    });
-};
-const rowData = ref<any>([]);
-const modalEdit = ref<boolean>(false);
-const clickEditrow = (data: any) => {
-  rowData.value = data;
-  modalEdit.value = true;
-};
-
-const clickDelete = async (insigniaId: string) => {
-  dialogRemove($q, async () => {
-    showLoader();
-    await http
-      .delete(config.API.insigniaManageOrg(insigniaId))
-      .then(async () => {
-        success($q, "ลบข้อมูลสำเร็จ");
-        await fecthDashboard();
-        await fecthListData();
-      })
-      .catch((err) => {
-        messageError($q, err);
-      })
-      .finally(() => {
-        hideLoader();
-      });
-  });
-};
 
+/** ข้อมูล Table*/
 const visibleColumns = ref<string[]>([
   "no",
   "organization",
@@ -177,8 +33,6 @@ const visibleColumns = ref<string[]>([
   "allocate",
   "remain",
 ]); //ค้นหา คอลัมน์ คอลัมน์ที่แสดง
-
-// หัวตาราง
 const columns = ref<QTableProps["columns"]>([
   {
     name: "no",
@@ -226,15 +80,182 @@ const columns = ref<QTableProps["columns"]>([
     style: "font-size: 14px",
   },
 ]);
-
-// ข้อมูลตาราง (จำลอง)
 const rows = ref<any[]>([]);
 
+const name = ref<string>("");
+const id = ref<string>(route.params.id.toString());
+const modal = ref<boolean>(false);
+const orgList = ref<any>([]);
+const pagination = ref({
+  sortBy: "desc",
+  descending: false,
+  page: 1,
+  rowsPerPage: 10,
+});
+const stat = ref<any>({
+  total: 0,
+  allocate: 0,
+  remain: 0,
+});
+
+/** funcion เรียกข้อมูล stat*/
+async function fecthDashboard() {
+  showLoader();
+  await http
+    .get(config.API.insigniaManageOrgDashboard(id.value))
+    .then((res) => {
+      stat.value = {
+        total: res.data.result.total,
+        allocate: res.data.result.allocate,
+        remain: res.data.result.remain,
+      };
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => hideLoader());
+}
+
+/** funcion เรียกข้อมูลรายชื่อ หน่วยงานจัดสรรเครื่องราชอิสริยาภรณ์ ตริตาภรณ์มงกุฎไทย ()*/
+async function fecthListData() {
+  showLoader();
+  await http
+    .get(config.API.insigniaManageOrg(id.value))
+    .then((res) => {
+      rows.value = res.data.result.map((e: any) => ({
+        id: e.id,
+        organization: e.organizationOrganization,
+        total: e.total,
+        allocate: e.allocate,
+        remain: e.remain,
+      }));
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => hideLoader());
+}
+
+/** funcion เรียกข้อมูลหน่วยงานจัดสรรเครื่องราชอิสริยาภรณ์ */
+async function fetchOrgList() {
+  showLoader();
+  await http
+    .get(config.API.typeOc())
+    .then(async (response: any) => {
+      orgList.value = response.data.result.map((e: any) => ({
+        id: e.organizationId,
+        name: e.organizationName,
+      }));
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+/** funcion ย้อนกลับหน้าจัดสรรเครื่องราชอิสริยาภรณ์*/
+function backHistory() {
+  router.push(`/insignia/allocate`);
+}
+
+/** funcion closePopup */
+function close() {
+  modal.value = false;
+  modalEdit.value = false;
+}
+
+/**
+ * function บันทึกข้อมูลจัดสรรเครื่องราชฯ
+ * @param organizationId เครื่องราช
+ * @param total จำนวน
+ */
+async function save(organizationId: string, total: string) {
+  showLoader();
+  await http
+    .post(config.API.insigniaManageOrgAdd(), {
+      organizationOrganizationId: organizationId,
+      insigniaManageId: id.value,
+      total: total,
+    })
+    .then(() => {
+      fecthListData();
+      fecthDashboard();
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+      close();
+    });
+}
+
+/**
+ * function บันทึกการแก้ไขข้อมูลจัดสรรเครื่องราชฯ
+ * @param organizationId เครื่องราช
+ * @param amount จำนวน
+ */
+async function saveEdit(organizationId: string, amount: number) {
+  showLoader();
+  await http
+    .put(config.API.insigniaManageOrg(organizationId), {
+      total: Number(amount),
+    })
+    .then(async () => {
+      success($q, "แก้ไขมูลสำเร็จ");
+      await fecthDashboard();
+      await fecthListData();
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+      close();
+    });
+}
+
+const rowData = ref<any>([]);
+const modalEdit = ref<boolean>(false);
+/**
+ * function openPopup แก้ไข
+ * @param data ข้อมูลที่จะแก้ไข
+ */
+function clickEditrow(data: any) {
+  rowData.value = data;
+  modalEdit.value = true;
+}
+
+/**
+ * function ลบรายการ
+ * @param insigniaId เครื่องราช
+ */
+async function clickDelete(insigniaId: string) {
+  dialogRemove($q, async () => {
+    showLoader();
+    await http
+      .delete(config.API.insigniaManageOrg(insigniaId))
+      .then(async () => {
+        success($q, "ลบข้อมูลสำเร็จ");
+        await fecthDashboard();
+        await fecthListData();
+      })
+      .catch((err) => {
+        messageError($q, err);
+      })
+      .finally(() => {
+        hideLoader();
+      });
+  });
+}
+
 const clickAdd = () => {
   modal.value = true;
 };
 
-// ค้นหาในตาราง
+/** ค้นหาในตาราง*/
 const filterKeyword = ref<string>("");
 const filterRef = ref<any>(null);
 const resetFilter = () => {
@@ -242,20 +263,13 @@ const resetFilter = () => {
   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 paginationLabel = (start: string, end: string, total: string) => {
-  if (paging.value == true) return " " + start + "-" + end + " ใน " + total;
-  else return start + "-" + end + " ใน " + total;
-};
+/** Hook*/
+onMounted(async () => {
+  fecthDashboard();
+  fecthListData();
+  name.value = DataStore.insigniaName;
+  fetchOrgList();
+});
 </script>
 
 <template>
@@ -350,7 +364,7 @@ const paginationLabel = (start: string, end: string, total: string) => {
         />
       </div>
       <div class="col-12">
-        <q-table
+        <d-table
           ref="table"
           :columns="columns"
           :rows="rows"
@@ -363,7 +377,6 @@ const paginationLabel = (start: string, end: string, total: string) => {
           class="custom-header-table"
           v-bind="attrs"
           :visible-columns="visibleColumns"
-          :pagination-label="paginationLabel"
           v-model:pagination="pagination"
         >
           <template v-slot:header="props">
@@ -439,19 +452,7 @@ const paginationLabel = (start: string, end: string, total: string) => {
               </q-td>
             </q-tr>
           </template>
-          <template v-slot:pagination="scope">
-            <q-pagination
-              v-model="pagination.page"
-              active-color="primary"
-              color="dark"
-              :max="scope.pagesNumber"
-              :max-pages="5"
-              size="sm"
-              boundary-links
-              direction-links
-            ></q-pagination>
-          </template>
-        </q-table>
+        </d-table>
       </div>
     </div>
   </q-card>
diff --git a/src/modules/07_insignia/components/5_Borrow/DialogForm.vue b/src/modules/07_insignia/components/5_Borrow/DialogForm.vue
index 69ac1460d..68fc103b0 100644
--- a/src/modules/07_insignia/components/5_Borrow/DialogForm.vue
+++ b/src/modules/07_insignia/components/5_Borrow/DialogForm.vue
@@ -1,17 +1,22 @@
 <script setup lang="ts">
 import { ref, watch, onMounted } from "vue";
 import { QForm, useQuasar } from "quasar";
-import { useCounterMixin } from "@/stores/mixin";
 import http from "@/plugins/http";
 import config from "@/app.config";
+
+/** impotrType */
 import type { DataOption } from "@/modules/04_registry/components/profileType";
-import type { ItemType } from "@/modules/07_insignia/interface/request/Main";
+
+/** impotrComponents */
 import DialogHeader from "@/components/DialogHeader.vue";
 
+/** impotrStores */
+import { useCounterMixin } from "@/stores/mixin";
 import { useBrrowDataStore } from "@/modules/07_insignia/storeBrrow";
 
 const $q = useQuasar();
 const myForm = ref<QForm>();
+
 const DataStore = useBrrowDataStore();
 const mixin = useCounterMixin();
 const {
@@ -39,17 +44,6 @@ const insigniaNoteProfileId = ref<string>("");
 const filterSelectRound = ref<any>();
 const selectRound = ref<any>();
 const type = ref<any>(DataStore.type);
-// เคลียร์ข้อมูลในฟอร์ม
-const clearData = () => {
-  receivedate.value = null;
-  returndate.value = null;
-  OrganazationId.value = "";
-  roundNo.value = "";
-  cardid.value = "";
-  fullName.value = "";
-  brand.value = "";
-  reason.value = "";
-};
 
 const props = defineProps({
   modal: Boolean,
@@ -89,23 +83,20 @@ const props = defineProps({
   },
 });
 
-// เช็ค props ถ้าเปิด dialog ให้ดึงรายการข้อมูล
-watch(props, () => {
-  // type.value = props.type;
-  if (props.modal == true && props.roundId != "all") {
-    roundNo.value = props.roundId;
-    fecthlistInsignia();
-    fetchOrgList();
+/** function เคลียร์ข้อมูลในฟอร์ม*/
+function clearData() {
+  receivedate.value = null;
+  returndate.value = null;
+  OrganazationId.value = "";
+  roundNo.value = "";
+  cardid.value = "";
+  fullName.value = "";
+  brand.value = "";
+  reason.value = "";
+}
 
-    // ดึงข้อมูลการยืม-คืนมาแสดงเก็บไว้ก่อนเผื่อต้องเอาข้อมูลมาแสดงเพิ่ม
-    // if (props.action == "editData") {
-    //   fetchData();
-    // }
-  }
-});
-
-// ดึงข้อมูลรายการเครื่องราช
-const fecthlistInsignia = async () => {
+/** function เรียกข้อมูลรายการเครื่องราช */
+async function fecthlistInsignia() {
   if (roundNo.value !== "" && roundNo.value !== null) {
     showLoader();
     let data = {
@@ -130,10 +121,10 @@ const fecthlistInsignia = async () => {
         hideLoader();
       });
   }
-};
+}
 
-// ดึงข้อมูลรายการหน่วยงาน
-const fetchOrgList = async () => {
+/** function ดึงข้อมูลรายการหน่วยงาน */
+async function fetchOrgList() {
   showLoader();
   await http
     .get(config.API.typeOc())
@@ -142,18 +133,8 @@ const fetchOrgList = async () => {
         id: e.organizationId,
         name: e.organizationName,
       }));
-      // if (props.action == "editData") {
-      //   OrgList.value = [
-      //     {
-      //       id: "00000000-0000-0000-0000-000000000000",
-      //       name: "สำนักนายกรัฐมนตรี",
-      //     },
-      //     ...orgArr,
-      //   ];
-      // } else {
       OrgList.value = orgArr;
       filterOrgList.value = OrgList.value;
-      // }
     })
     .catch((err) => {
       messageError($q, err);
@@ -161,7 +142,7 @@ const fetchOrgList = async () => {
     .finally(() => {
       hideLoader();
     });
-};
+}
 
 // ดึงข้อมูลการยืม-คืนมาแสดงเก็บไว้ก่อนเผื่อต้องเอาข้อมูลมาแสดงเพิ่ม
 // const fetchData = async () => {
@@ -177,7 +158,9 @@ const fetchOrgList = async () => {
 // };
 
 // บันทึกข้อมูลการยืม-คืน
-const clickSave = async () => {
+
+/** function บันทึกการเพิ่มข้อมูล*/
+async function clickSave() {
   await myForm.value!.validate().then((result: boolean) => {
     if (result) {
       dialogConfirm($q, async () => {
@@ -219,10 +202,10 @@ const clickSave = async () => {
       });
     }
   });
-};
+}
 
-// ค้นหาคนจากเลขประจำตัวประชาชน
-const searchcardid = async () => {
+/** function ค้นหาคนจากเลขประจำตัวประชาชน*/
+async function searchcardid() {
   if (cardid.value.length === 13) {
     showLoader();
     const node = await listPerson.value.find(
@@ -252,28 +235,31 @@ const searchcardid = async () => {
     clearReceiveDate();
     // OrganazationId.value = "";
   }
-};
-// watch(cardid,()=>{
-//   if(cardid.value.length === 13)
+}
 
-// })
-
-// ปิด dialog
-const closeDialog = () => {
+/** function closePopup*/
+function closeDialog() {
   clearData();
   props.close();
-};
+}
 
-// reset วันที่ยืม
-const clearReceiveDate = () => {
+/** function reset วันที่ยืม*/
+function clearReceiveDate() {
   receivedate.value = null;
-};
+}
 
-// reset วันที่คืน
-const clearReturnDate = () => {
+/** function reset วันที่คืน*/
+function clearReturnDate() {
   returndate.value = null;
-};
-const filterSelector = (val: any, update: Function, name: any) => {
+}
+
+/**
+ * function ค้นหาข้อมูลใน option
+ * @param val คำค้นหา
+ * @param update function
+ * @param name ชื่อ Selec
+ */
+function filterSelector(val: any, update: Function, name: any) {
   update(() => {
     const needle = val.toLowerCase();
     if (name === "filterOrgList") {
@@ -289,14 +275,28 @@ const filterSelector = (val: any, update: Function, name: any) => {
       );
     }
   });
-};
+}
+
+/** function setValue*/
 const setValue = () => {
   filterSelectRound.value = props.filterSelectRoundOption;
   selectRound.value = props.selectRoundOption;
 };
+
+/** Hook*/
 onMounted(() => {
   setValue();
 });
+
+/** function callback  เช็ค props ถ้าเปิด dialog ให้ดึงรายการข้อมูล */
+watch(props, () => {
+  // type.value = props.type;
+  if (props.modal == true && props.roundId != "all") {
+    roundNo.value = props.roundId;
+    fecthlistInsignia();
+    fetchOrgList();
+  }
+});
 </script>
 
 <template>
diff --git a/src/modules/07_insignia/components/5_Borrow/Main.vue b/src/modules/07_insignia/components/5_Borrow/Main.vue
index 34168a796..45c5353bb 100644
--- a/src/modules/07_insignia/components/5_Borrow/Main.vue
+++ b/src/modules/07_insignia/components/5_Borrow/Main.vue
@@ -1,116 +1,27 @@
 <script setup lang="ts">
 import { ref, onMounted, watch } from "vue";
-import { useCounterMixin } from "@/stores/mixin";
+import { useQuasar } from "quasar";
 import http from "@/plugins/http";
 import config from "@/app.config";
-import { useBrrowDataStore } from "@/modules/07_insignia/storeBrrow";
-
-import DialogForm from "@/modules/07_insignia/components/5_Borrow/DialogForm.vue";
 
+/** impotrType */
 import type { OptionDataYear } from "@/modules/07_insignia/interface/index/Main";
 import type { QTableProps, QInput } from "quasar";
-import { useQuasar } from "quasar";
 
+/** impotrComponents */
+import DialogForm from "@/modules/07_insignia/components/5_Borrow/DialogForm.vue";
+
+/** impotrStores */
+import { useBrrowDataStore } from "@/modules/07_insignia/storeBrrow";
+import { useCounterMixin } from "@/stores/mixin";
 const DataStore = useBrrowDataStore();
 const mixin = useCounterMixin();
 const { showLoader, hideLoader, messageError } = mixin;
+
 const $q = useQuasar();
 const tab = ref<string>("");
 
-const selectRound = ref<string>();
-const selectRoundOption = ref<OptionDataYear[]>([]);
-const filterSelectRoundOption = ref<any>([]);
-const selectRoundAllOption = ref<OptionDataYear[]>([]);
-const filterSelectRoundAllOption = ref<OptionDataYear[]>([]);
-const type = ref<any[]>(DataStore.type);
-const modal = ref<boolean>(false);
-const action = ref<string>("");
-const profileId = ref<string>("");
-const roundYear = ref<any>();
-const insigniaList = ref<any>([]);
-const fileterInsigniaList = ref<any>([]);
-const loadView = ref<boolean>(false);
-const employeeClassOps = ref<any>(DataStore.employeeClassOps);
-onMounted(async () => {
-  await fecthRound();
-});
-// รอบการเสนอขอพระราชทานเครื่องราชฯ
-const fecthRound = async () => {
-  showLoader();
-  await http
-    .get(config.API.noteround())
-    .then(async (res) => {
-      let data = res.data.result;
-      if (data.length !== 0) {
-        selectRoundAllOption.value = [
-          {
-            name: "ทั้งหมด",
-            id: "0",
-            year: 0,
-          },
-        ];
-        data.map((e: any) => {
-          selectRoundOption.value.push({
-            name: "รอบการเสนอขอพระราชทานเครื่องราชฯ ปี" + "  " + (e.year + 543),
-            id: e.id,
-            year: e.year,
-          });
-          selectRoundAllOption.value.push({
-            name: "รอบการเสนอขอพระราชทานเครื่องราชฯ ปี" + "  " + (e.year + 543),
-            id: e.id,
-            year: e.year,
-          });
-        });
-        filterSelectRoundAllOption.value = selectRoundAllOption.value;
-        selectRound.value = data[0].id;
-        filterSelectRoundOption.value = selectRoundOption.value;
-        yearRound.value = data[0].year;
-        roundYear.value = data[0].year;
-        if (roundYear.value) {
-          await fecthInsigniaType();
-        }
-      }
-    })
-    .catch((err) => {
-      messageError($q, err);
-    })
-    .finally(() => {
-      hideLoader();
-    });
-};
-// เรียกประเภทเครื่องราชฯ
-const fecthInsignia = async () => {
-  await http
-    .get(config.API.insignia)
-    .then((res) => {
-      let data = res.data.result;
-      DataStore.fetchDataInsignia(data);
-    })
-    .catch((err) => {
-      messageError($q, err);
-    })
-    .finally(async () => {
-      insigniaList.value = await DataStore.insigniaOp.filter(
-        (x: any) => x.type == tab.value || x.type == ""
-      );
-    });
-};
-//ระดับเครื่องราชฯ Tab
-const fecthInsigniaType = async () => {
-  await http(config.API.insigniaType)
-    .then(async (res) => {
-      let data = res.data.result;
-      DataStore.fetchDatainsigniaType(data);
-      tab.value = DataStore.insigniaType[0].name;
-      loadView.value = true;
-      await fecthInsignia();
-    })
-    .catch((err) => {
-      messageError($q, err);
-    })
-    .finally(() => {});
-};
-
+/** ข้อมูล Table*/
 const visibleColumns = ref<String[]>([
   "no",
   "status",
@@ -324,24 +235,122 @@ const columns = ref<QTableProps["columns"]>([
     field: "",
   },
 ]);
-
-watch(tab, async () => {
-  insigniaList.value = await DataStore.insigniaOp.filter(
-    (x: any) => x.type == tab.value || x.type == ""
-  );
-  DataStore.insignia = "";
-  fileterInsigniaList.value = insigniaList.value;
-  fecthlistInsignia();
+const filterRef = ref<QInput>();
+const filter = ref<string>("");
+const pagination = ref({
+  sortBy: "name",
+  descending: false,
+  page: 1,
+  rowsPerPage: 10,
 });
 
+const selectRound = ref<string>();
+const selectRoundOption = ref<OptionDataYear[]>([]);
+const filterSelectRoundOption = ref<any>([]);
+const selectRoundAllOption = ref<OptionDataYear[]>([]);
+const filterSelectRoundAllOption = ref<OptionDataYear[]>([]);
+const type = ref<any[]>(DataStore.type);
+const modal = ref<boolean>(false);
+const action = ref<string>("");
+const profileId = ref<string>("");
+const roundYear = ref<any>();
+const insigniaList = ref<any>([]);
+const fileterInsigniaList = ref<any>([]);
+const loadView = ref<boolean>(false);
+const employeeClassOps = ref<any>(DataStore.employeeClassOps);
+
+/** function เรียกรอบการเสนอขอพระราชทานเครื่องราชฯ*/
+async function fecthRound() {
+  showLoader();
+  await http
+    .get(config.API.noteround())
+    .then(async (res) => {
+      let data = res.data.result;
+      if (data.length !== 0) {
+        selectRoundAllOption.value = [
+          {
+            name: "ทั้งหมด",
+            id: "0",
+            year: 0,
+          },
+        ];
+        data.map((e: any) => {
+          selectRoundOption.value.push({
+            name: "รอบการเสนอขอพระราชทานเครื่องราชฯ ปี" + "  " + (e.year + 543),
+            id: e.id,
+            year: e.year,
+          });
+          selectRoundAllOption.value.push({
+            name: "รอบการเสนอขอพระราชทานเครื่องราชฯ ปี" + "  " + (e.year + 543),
+            id: e.id,
+            year: e.year,
+          });
+        });
+        filterSelectRoundAllOption.value = selectRoundAllOption.value;
+        selectRound.value = data[0].id;
+        filterSelectRoundOption.value = selectRoundOption.value;
+        yearRound.value = data[0].year;
+        roundYear.value = data[0].year;
+        if (roundYear.value) {
+          await fecthInsigniaType();
+        }
+      }
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+/** function เรียกประเภทเครื่องราชฯ*/
+async function fecthInsignia() {
+  await http
+    .get(config.API.insignia)
+    .then((res) => {
+      let data = res.data.result;
+      DataStore.fetchDataInsignia(data);
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(async () => {
+      insigniaList.value = await DataStore.insigniaOp.filter(
+        (x: any) => x.type == tab.value || x.type == ""
+      );
+    });
+}
+
+/** function เรียกระดับเครื่องราชฯ Tab*/
+async function fecthInsigniaType() {
+  await http(config.API.insigniaType)
+    .then(async (res) => {
+      let data = res.data.result;
+      DataStore.fetchDatainsigniaType(data);
+      tab.value = DataStore.insigniaType ? DataStore.insigniaType[0].name : "";
+      loadView.value = true;
+      await fecthInsignia();
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {});
+}
+
+/** รอบการเสนอขอ*/
 const yearRound = ref<number>();
-// เลือกรอบ
-const selectorRound = async (round: number) => {
+/**
+ * function เลือกรอบการเสนอขอ
+ * @param round ปีการเสนอขอ
+ */
+async function selectorRound(round: number) {
   roundYear.value = round;
   await fecthlistInsignia();
-};
-// ราชชื่อการเสนอขอเครื่องราชฯ
-const fecthlistInsignia = async () => {
+}
+
+/** function เรียกราชชื่อการเสนอขอเครื่องราชฯ */
+async function fecthlistInsignia() {
   showLoader();
   await http
     .get(
@@ -356,48 +365,48 @@ const fecthlistInsignia = async () => {
     .finally(() => {
       hideLoader();
     });
-};
+}
 
-const filterRef = ref<QInput>();
-const filter = ref<string>("");
-
-const close = () => {
+/** function closePopup */
+function close() {
   modal.value = false;
-};
+}
 
-const closeAndFecth = () => {
+/** function closePopup และเเรียกข้อมูลราชชื่อการเสนอขอเครื่องราชฯ */
+function closeAndFecth() {
   modal.value = false;
   fecthlistInsignia();
-};
+}
 
-const addData = () => {
+/** function openPopup เพิ่มรายการ ยืม-คืนเครื่องราชฯ*/
+function addData() {
   modal.value = true;
   action.value = "addData";
-};
+}
 
-const editData = (id: any) => {
+/**
+ * function openPopup แก้ไขรายการ ยืม-คืนเครื่องราชฯ
+ * @param id profileId
+ */
+function editData(id: any) {
   profileId.value = id;
   action.value = "editData";
   modal.value = true;
-};
+}
 
-const resetFilter = () => {
+function resetFilter() {
   // reset ค่าที่ค้นหาเมื่อกดปุ่ม X ในกล่องค้นหา
   filter.value = "";
   filterRef.value!.focus();
-};
-const pagination = ref({
-  sortBy: "name",
-  descending: false,
-  page: 1,
-  rowsPerPage: 10,
-});
-const paging = ref<boolean>(true);
-const paginationLabel = (start: number, end: number, total: number) => {
-  if (paging.value == true) return " " + start + "-" + end + " ใน " + total;
-  else return start + "-" + end + " ใน " + total;
-};
-const filterSelector = (val: any, update: Function, name: any) => {
+}
+
+/**
+ * function ค้นหาข้อมูลใน option
+ * @param val คำค้นหา
+ * @param update function
+ * @param name ชื่อ Selec
+ */
+function filterSelector(val: any, update: Function, name: any) {
   update(() => {
     const needle = val.toLowerCase();
     if (name === "employeeClassOps") {
@@ -417,20 +426,32 @@ const filterSelector = (val: any, update: Function, name: any) => {
       );
     }
   });
-};
+}
 
-const clearInsigniaFilters = (name: string) => {
-  if (name === "employeeClassOps") {
-    DataStore.employeeClass = "all";
-    employeeClassOps.value = DataStore.employeeClassOps;
-  } else if (name === "fileterInsigniaList") {
-    DataStore.insignia = "";
-    fileterInsigniaList.value = insigniaList.value;
-  }
-  //  else if (name === 'employeeClassOps') {
+// const clearInsigniaFilters = (name: string) => {
+//   if (name === "employeeClassOps") {
+//     DataStore.employeeClass = "all";
+//     employeeClassOps.value = DataStore.employeeClassOps;
+//   } else if (name === "fileterInsigniaList") {
+//     DataStore.insignia = "";
+//     fileterInsigniaList.value = insigniaList.value;
+//   }
+// };
 
-  // }
-};
+/** Hook*/
+onMounted(async () => {
+  await fecthRound();
+});
+
+/** function callblack ทำงานเมือมีการเปลี่ยน Tab*/
+watch(tab, async () => {
+  insigniaList.value = await DataStore.insigniaOp.filter(
+    (x: any) => x.type == tab.value || x.type == ""
+  );
+  DataStore.insignia = "";
+  fileterInsigniaList.value = insigniaList.value;
+  fecthlistInsignia();
+});
 </script>
 
 <template>
@@ -650,7 +671,6 @@ const clearInsigniaFilters = (name: string) => {
             :visible-columns="visibleColumns"
             :filter="filter"
             row-key="id"
-            :pagination-label="paginationLabel"
             v-model:pagination="pagination"
             :paging="true"
           >