Merge commit 'afa42c0133' into develop

src/components/Table.vue

@@ -0,0 +1,88 @@
+<template>
+  <q-table
+    ref="table"
+    flat
+    bordered
+    class="custom-header-table"
+    v-bind="attrs"
+    virtual-scroll
+    :virtual-scroll-sticky-size-start="48"
+    dense
+    :pagination-label="paginationLabel"
+    v-model:pagination="pagination"
+  >
+    <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>
+
+    <template v-for="(_, slot) in slots" v-slot:[slot]="scope">
+      <slot :name="slot" v-bind="scope || {}" />
+    </template>
+  </q-table>
+</template>
+<script setup lang="ts">
+import { ref, useAttrs, useSlots } from "vue";
+const attrs = ref<any>(useAttrs());
+const slots = ref<any>(useSlots());
+
+const props = defineProps({
+  paging: {
+    type: Boolean,
+    defualt: false,
+  },
+});
+
+const pagination = ref({
+  sortBy: "desc",
+  descending: false,
+  page: 1,
+  rowsPerPage: 10,
+});
+
+const paginationLabel = (start: string, end: string, total: string) => {
+  if (props.paging == true)
+    return " " + start + " ใน " + end + " จากจำนวน " + total + " รายการ";
+  else return start + "-" + end + " ใน " + total;
+};
+</script>
+
+<style lang="scss">
+.icon-color {
+  color: #4154b3;
+}
+.custom-header-table {
+  height: auto;
+  .q-table tr:nth-child(odd) td {
+    background: white;
+  }
+  .q-table tr:nth-child(even) td {
+    background: #f8f8f8;
+  }
+
+  .q-table thead tr {
+    background: #ecebeb;
+  }
+
+  .q-table thead tr th {
+    position: sticky;
+    z-index: 1;
+  }
+  /* this will be the loading indicator */
+  .q-table thead tr:last-child th {
+    /* height of all previous header rows */
+    top: 48px;
+  }
+  .q-table thead tr:first-child th {
+    top: 0;
+  }
+}
+</style>

src/interface/request/main/main.ts

@@ -221,9 +221,101 @@ const menuList = readonly<any[]>([
     label: "เครื่องราชอิสริยาภรณ์",
     path: "insignia",
     role: "insignia",
+    children: [
+      {
+        key: 8.1,
+        label: "รายการเสนอขอ" /* รายชื่อผู้สอบผ่าน */,
+        path: "insigniaProposals",
+        role: "insignia",
+      },
+      {
+        key: 8.2,
+        label: "จัดทำรายชื่อข้าราชการสามัญ" /* รายชื่อผู้สอบผ่าน */,
+        path: "insigniaNameList",
+        role: "insignia",
+      },
+      {
+        key: 8.3,
+        label: "อนุมัติรายชื่อข้าราชการสามัญ" /* รายชื่อผู้สอบผ่าน */,
+        path: "insigniaNameApprove",
+        role: "insignia",
+      },
+      {
+        key: 8.4,
+        label:
+          "บันทึกผลการได้รับพระราชทานเครื่องราชย์อิสริยสภรณ์" /* รายชื่อผู้สอบผ่าน */,
+        path: "insigniaRecord",
+        role: "insignia",
+      },
+      {
+        key: 8.5,
+        label: "รายงาน" /* รายชื่อผู้สอบผ่าน */,
+        path: "insigniaReport",
+        role: "insignia",
+      },
+    ],
   },
   {
     key: 9,
+    icon: "mdi-medal-outline",
+    activeIcon: "mdi-medal",
+    label: "เหรียญจักรพรรดิมาลา",
+    path: "coin",
+    role: "coin",
+    children: [
+      {
+        key: 9.1,
+        label: "รายการเสนอขอ",
+        path: "coinProposals",
+        role: "coin",
+      },
+      {
+        key: 9.2,
+        label: "จัดการคำขอ",
+        path: "coinManage",
+        role: "coin",
+      },
+      {
+        key: 9.3,
+        label: "บันทึกผลการได้รับพระราชทานเหรียญจักรพรรดิมาลา",
+        path: "coinReceive",
+        role: "coin",
+      },
+      {
+        key: 9.4,
+        label: "บันทึกผลการจ่ายใบกำกับ",
+        path: "coinPayment",
+        role: "coin",
+      },
+      {
+        key: 9.5,
+        label:
+          "รายชื่อที่ยื่นคำร้องขอแก้ไขข้อมูลการขอพระราชทานเหรียญจักรพรรดิมาลา",
+        path: "coinRequest",
+        role: "coin",
+      },
+      {
+        key: 9.6,
+        label: "ประวัติการยื่นขอ",
+        path: "coinHistory",
+        role: "coin",
+      },
+      {
+        key: 9.7,
+        label: "จัดสรรเหรียญตรา",
+        path: "coinAllocate",
+        role: "coin",
+      },
+      {
+        key: 9.8,
+        label: "รายงาน",
+        path: "coinReport",
+        role: "coin",
+      },
+    ],
+  },
+  {
+    key: 10,
     icon: "o_contact_page",
     activeIcon: "contact_page",
     label: "ทะเบียนประวัติลูกจ้าง",

src/main.ts

@@ -70,6 +70,11 @@ app.component(
   defineAsyncComponent(() => import("@/components/Selector.vue"))
 );
 
+app.component(
+  "d-table",
+  defineAsyncComponent(() => import("@/components/Table.vue"))
+);
+
 app.config.globalProperties.$http = http;
 
 app.mount("#app");

src/modules/05_placement/components/OrderPlacement/MainOrderPlacement.vue

@@ -534,7 +534,7 @@ const OriginalDataFetch = async () => {
 
 // ดูรายการหน้าต่อไป
 const redirectToPage = (id?: number) => {
-  router.push({ name: "placementDetail" });
+  // router.push({ name: "placementDetail" });
   router.push(`/placement/order/detail`);
 };
 

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

@@ -46,9 +46,7 @@
           />
         </div>
       </div>
-      <q-table
+      <d-table
-        flat
-        bordered
         :rows="rows"
         :columns="columns"
         :visible-columns="visibleColumns"
@@ -56,9 +54,6 @@
         row-key="name"
         selection="multiple"
         v-model:selected="selected"
-        class="custom-header-table"
-        :pagination-label="paginationLabel"
-        v-model:pagination="pagination"
       >
         <template v-slot:header-selection="scope">
           <q-checkbox
@@ -70,20 +65,6 @@
         </template>
 
         <template v-slot:body-selection="scope">
-          <!-- <q-checkbox
-            keep-color
-            color="primary"
-            dense
-            :model-value="scope.selected"
-            @update:model-value="
-              (val, evt) => {
-                Object.getOwnPropertyDescriptor(scope, 'selected').set(
-                  val,
-                  evt
-                );
-              }
-            "
-          /> -->
           <q-checkbox
             keep-color
             color="primary"
@@ -97,57 +78,13 @@
             <div v-if="props.col.name == 'no'">
               {{ props.rowIndex + 1 }}
             </div>
-            <!-- <div v-else-if="props.col.name == 'educate'">
+
-              <q-select
-                :class="getClass(true)"
-                hide-bottom-space
-                multiple
-                :outlined="true"
-                dense
-                lazy-rules
-                :readonly="!true"
-                :borderless="!true"
-                v-model="props.value"
-                :rules="[(val:any) => !!val || `${'กรุณาเลือกวุฒิการศึกษา'}`,(val:any) => val.length > 0 || `${'กรุณาเลือกวุฒิการศึกษา'}`]"
-                :label="`${'เลือกวุฒิการศึกษา'}`"
-                emit-value
-                map-options
-                option-label="name"
-                :options="[]"
-                option-value="id"
-                input-debounce="0"
-                color="primary"
-              >
-                <template v-slot:prepend>
-                  <q-icon name="cast_for_education" color="primary" />
-                </template>
-                <template v-slot:no-option>
-                  <q-item>
-                    <q-item-section class="text-black">
-                      ไม่พบข้อมูลที่ค้นหา
-                    </q-item-section>
-                  </q-item>
-                </template>
-              </q-select>
-            </div> -->
             <div v-else @click="click(props)">
               {{ props.value }}
             </div>
           </q-td>
         </template>
-        <template v-slot:pagination="scope">
+      </d-table>
-          <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>
     </div>
     <q-separator />
     <div class="flex justify-end q-pa-sm q-gutter-sm">
@@ -230,7 +167,7 @@ const columns = ref<QTableProps["columns"]>([
   },
 ]);
 
-const rows = [
+const rows = ref<any>([
   {
     no: "0ac56905-1a74-4606-a120-233340adde95",
     name: "นางนัทธ์ เหล่าสกุล",
@@ -297,7 +234,7 @@ const rows = [
     idcard: "6598455632145",
     educate: "ปริญญาตรี",
   },
-];
+]);
 const selected = ref([]);
 const pagination = ref({
   sortBy: "desc",
@@ -332,13 +269,6 @@ const selectData = (row: any) => {};
 
 const refresh = () => {};
 
-const paginationLabel = (start: number, end: number, total: number) => {
-  //   if (props.paging == true)
-  //     return " " + start + " ใน " + end + " จากจำนวน " + total + " รายการ";
-  //   else
-  return start + "-" + end + " ใน " + total;
-};
-
 const resetFilter = () => {
   // reset ค่าที่ค้นหาเมื่อกดปุ่ม X ในกล่องค้นหา
   filter.value = "";
@@ -352,33 +282,4 @@ const getClass = (val: boolean) => {
   };
 };
 </script>
-<style lang="scss">
+<style lang="scss"></style>
-.icon-color {
-  color: #4154b3;
-}
-.custom-header-table {
-  .q-table tr:nth-child(odd) td {
-    background: white;
-  }
-  .q-table tr:nth-child(even) td {
-    background: #f8f8f8;
-  }
-
-  .q-table thead tr {
-    background: #ecebeb;
-  }
-
-  .q-table thead tr th {
-    position: sticky;
-    z-index: 1;
-  }
-  /* this will be the loading indicator */
-  .q-table thead tr:last-child th {
-    /* height of all previous header rows */
-    top: 48px;
-  }
-  .q-table thead tr:first-child th {
-    top: 0;
-  }
-}
-</style>

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

@@ -46,18 +46,12 @@
           />
         </div>
       </div>
-      <q-table
+      <d-table
-        flat
-        bordered
-        dense
         :rows="rows"
         :columns="columns"
         :visible-columns="visibleColumns"
         :filter="filter"
         row-key="name"
-        class="custom-header-table"
-        :pagination-label="paginationLabel"
-        v-model:pagination="pagination"
       >
         <template v-slot:header="props">
           <q-tr :props="props">
@@ -127,19 +121,7 @@
             </q-td>
           </q-tr>
         </template>
-        <template v-slot:pagination="scope">
+      </d-table>
-          <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>
     </div>
     <q-separator />
     <div class="flex justify-end q-pa-sm q-gutter-sm">
@@ -246,10 +228,7 @@
                   />
                 </div>
               </div>
-              <q-table
+              <d-table
-                flat
-                bordered
-                dense
                 :rows="rowsModal"
                 :columns="columnsModal"
                 :visible-columns="visibleColumnsModal"
@@ -257,9 +236,6 @@
                 row-key="name"
                 selection="multiple"
                 v-model:selected="selectedModal"
-                class="custom-header-table"
-                :pagination-label="paginationLabel"
-                v-model:pagination="paginationModal"
               >
                 <template v-slot:header-selection="scope">
                   <q-checkbox
@@ -304,19 +280,7 @@
                     </div>
                   </q-td>
                 </template>
-                <template v-slot:pagination="scope">
+              </d-table>
-                  <q-pagination
-                    v-model="paginationModal.page"
-                    active-color="primary"
-								    color="dark"
-                    :max="scope.pagesNumber"
-                    :max-pages="5"
-                    size="sm"
-                    boundary-links
-                    direction-links
-                  ></q-pagination>
-                </template>
-              </q-table>
             </div>
           </div>
         </q-card-section>
@@ -717,34 +681,4 @@ const onSelected = async (id: string) => {
 
 const deleteData = async (id: string) => {};
 </script>
-<style lang="scss">
+<style lang="scss"></style>
-.icon-color {
-  color: #4154b3;
-}
-.custom-header-table {
-  height: auto;
-  .q-table tr:nth-child(odd) td {
-    background: white;
-  }
-  .q-table tr:nth-child(even) td {
-    background: #f8f8f8;
-  }
-
-  .q-table thead tr {
-    background: #ecebeb;
-  }
-
-  .q-table thead tr th {
-    position: sticky;
-    z-index: 1;
-  }
-  /* this will be the loading indicator */
-  .q-table thead tr:last-child th {
-    /* height of all previous header rows */
-    top: 48px;
-  }
-  .q-table thead tr:first-child th {
-    top: 0;
-  }
-}
-</style>

src/modules/05_placement/components/PersonalList/OrgTree.vue

@@ -75,7 +75,7 @@ const loadTreeData = async () => {
 };
 
 function filterByPersonIdNull(obj: any) {
-  if (obj.name === null) {
+  if (obj.name === null && obj.isCondition != true) {
     return true;
   }
   if (obj.children && obj.children.length > 0) {

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

@@ -0,0 +1,266 @@
+<script setup lang="ts">
+import { ref } from "vue";
+import { useCounterMixin } from "@/stores/mixin";
+import { useQuasar } from "quasar";
+
+const $q = useQuasar(); //ใช้ noti quasar
+const mixin = useCounterMixin();
+const {} = mixin;
+
+const modal = ref<boolean>(false);
+
+const columns = ref<any["columns"]>([
+  {
+    name: "index",
+    required: true,
+    label: "ลำดับ",
+    field: "index",
+    align: "left",
+  },
+  {
+    name: "fullname",
+    required: true,
+    label: "ชื่อ-สกุล",
+    field: "fullname",
+    align: "left",
+  },
+  {
+    name: "position",
+    required: true,
+    label: "ตำแหน่งในสายงาน",
+    field: "position",
+    align: "left",
+  },
+  {
+    name: "level",
+    required: true,
+    label: "ระดับ",
+    field: "level",
+    align: "left",
+  },
+  {
+    name: "affiliation",
+    required: true,
+    label: "สังกัด",
+    field: "affiliation",
+    align: "left",
+  },
+  {
+    name: "funtion",
+    required: true,
+    label: "",
+    field: "funtion",
+    align: "left",
+  },
+]);
+const rows = ref<any>([
+  {
+    fullname: "นายใจดี  ยอดใจ",
+    position: "นักวิชาการพัสดุ",
+    level: "ปฎิบัติการ",
+    affiliation: "กลุ่มงานโครงสร้างและอัตรากำลัง ๒",
+  },
+  {
+    fullname: "นายจักกริน  บัณฑิต",
+    position: "นักวิชาการพัสดุ",
+    level: "ปฎิบัติการ",
+    affiliation: "กลุ่มงานโครงสร้างและอัตรากำลัง ๒",
+  },
+  {
+    fullname: "นายจักกริน  บัณฑิต",
+    position: "นักวิชาการพัสดุ",
+    level: "ปฎิบัติการ",
+    affiliation: "กลุ่มงานโครงสร้างและอัตรากำลัง ๒",
+  },
+  {
+    fullname: "นายจักกริน  บัณฑิต",
+    position: "นักวิชาการพัสดุ",
+    level: "ปฎิบัติการ",
+    affiliation: "กลุ่มงานโครงสร้างและอัตรากำลัง ๒",
+  },
+  {
+    fullname: "นายจักกริน  บัณฑิต",
+    position: "นักวิชาการพัสดุ",
+    level: "ปฎิบัติการ",
+    affiliation: "กลุ่มงานโครงสร้างและอัตรากำลัง ๒",
+  },
+  {
+    fullname: "นายจักกริน  บัณฑิต",
+    position: "นักวิชาการพัสดุ",
+    level: "ปฎิบัติการ",
+    affiliation: "กลุ่มงานโครงสร้างและอัตรากำลัง ๒",
+  },
+  {
+    fullname: "นายจักกริน  บัณฑิต",
+    position: "นักวิชาการพัสดุ",
+    level: "ปฎิบัติการ",
+    affiliation: "กลุ่มงานโครงสร้างและอัตรากำลัง ๒",
+  },
+]);
+const filter = ref<string>("");
+const clickAdd = () => {
+  $q.dialog({
+    title: "ยืนยันการเพิ่มข้อมูล",
+    message: "ต้องการเพิ่มข้อมูลนี้ใช่หรือไม่?",
+    cancel: {
+      flat: true,
+      color: "negative",
+    },
+    persistent: true,
+  })
+    .onOk(async () => {
+      console.log("เพิ่มข้อมูล");
+    })
+    .onCancel(() => {})
+    .onDismiss(() => {});
+};
+const paging = ref<boolean>(true);
+const pagination = ref({
+  sortBy: "fullname",
+  descending: true,
+  page: 1,
+  rowsPerPage: 10,
+});
+const paginationLabel = (start: number, end: number, total: number) => {
+  if (paging.value == true) return " " + start + "-" + end + " ใน " + total;
+  else return start + "-" + end + " ใน " + total;
+};
+</script>
+
+<template>
+  <q-btn
+    flat
+    round
+    class="text-teal-5"
+    icon="mdi-plus"
+    size="md"
+    @click="modal = true"
+  ></q-btn>
+
+  <q-dialog v-model="modal">
+    <q-card style="width: 850px; max-width: 80vw" class="q-px-sm q-pb-md">
+      <q-toolbar class="q-py-md">
+        <q-toolbar-title class="header-text text-weight-bolder"
+          >เพิ่มรายชื่อ
+        </q-toolbar-title>
+        <q-btn
+          icon="close"
+          unelevated
+          round
+          dense
+          @click="modal = false"
+          style="color: #ff8080; background-color: #ffdede"
+        />
+      </q-toolbar>
+      <q-separator />
+
+      <div class="q-pa-md">
+        <q-toolbar style="padding: 0">
+          <q-input
+            borderless
+            outlined
+            dense
+            debounce="300"
+            v-model="filter"
+            placeholder="ค้นหา"
+            style="width: 850px; max-width: auto"
+          >
+            <template v-slot:append>
+              <q-icon name="search" />
+            </template>
+          </q-input>
+        </q-toolbar>
+        <q-table
+          flat
+          bordered
+          dense
+          :rows="rows"
+          :columns="columns"
+          row-key="name"
+          class="custom-header-table"
+          :filter="filter"
+          :pagination-label="paginationLabel"
+          v-model:pagination="pagination"
+        >
+          <template v-slot:header="props">
+            <q-tr :props="props">
+              <q-th v-for="col in props.cols" :key="col.name" :props="props"
+                ><div>
+                  <span class="row text-black">{{ col.label }}</span>
+                </div>
+              </q-th>
+            </q-tr>
+          </template>
+          <template v-slot:body="props">
+            <q-tr :props="props" class="cursor-pointer">
+              <q-td>{{ props.rowIndex + 1 }}</q-td>
+              <q-td key="fullname" :props="props">
+                {{ props.row.fullname }}
+              </q-td>
+              <q-td key="position" :props="props">
+                {{ props.row.position }}
+              </q-td>
+              <q-td key="level" :props="props">{{ props.row.level }}</q-td>
+              <q-td key="affiliation" :props="props">
+                {{ props.row.affiliation }}
+              </q-td>
+
+              <q-td>
+                <q-btn
+                  outline
+                  label="เพิ่ม"
+                  class="text-teal-5"
+                  @click="clickAdd"
+                />
+              </q-td>
+            </q-tr>
+          </template>
+          <template v-slot:pagination="scope">
+            <q-pagination
+              v-model="pagination.page"
+              color="primary"
+              :max="scope.pagesNumber"
+              :max-pages="5"
+              size="sm"
+              boundary-links
+              direction-links
+            ></q-pagination>
+          </template>
+        </q-table>
+      </div>
+    </q-card>
+  </q-dialog>
+</template>
+
+<style lang="scss">
+.custom-header-table {
+  max-height: 64vh;
+
+  .q-table tr:nth-child(odd) td {
+    background: white;
+  }
+
+  .q-table tr:nth-child(even) td {
+    background: #f8f8f8;
+  }
+
+  .q-table thead tr {
+    background: #ecebeb;
+  }
+
+  .q-table thead tr th {
+    position: sticky;
+    z-index: 1;
+  }
+
+  /* this will be the loading indicator */
+  .q-table thead tr:last-child th {
+    /* height of all previous header rows */
+    top: 48px;
+  }
+
+  .q-table thead tr:first-child th {
+    top: 0;
+  }
+}
+</style>

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

@@ -0,0 +1,342 @@
+<script setup lang="ts">
+import { ref } from "vue";
+import AddList from "../ListRetirement/AddList.vue";
+import { useCounterMixin } from "@/stores/mixin";
+import { useQuasar } from "quasar";
+
+const $q = useQuasar(); //ใช้ noti quasar
+const mixin = useCounterMixin();
+const {} = mixin;
+
+const columns = ref<any["columns"]>([
+  {
+    name: "index",
+    required: true,
+    label: "ลำดับ",
+    field: "index",
+    align: "left",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "fixname",
+    align: "left",
+    label: "คำนำหน้านาม",
+    field: "fixname",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "name",
+    align: "left",
+    label: "ชื่อ - นามสกุล",
+    field: "name",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "brand",
+    align: "left",
+    label: "สังกัด",
+    field: "brand",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "positionType",
+    align: "left",
+    label: "ตำแหน่ง",
+    sublabel: "ประเภท",
+    field: "positionType",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "positionManager",
+    align: "left",
+    label: "ตำแหน่ง ",
+    sublabel: "ทางการบริหาร",
+    field: "positionManager",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "positionLavel",
+    align: "left",
+    label: "ตำแหน่ง ",
+    sublabel: "ในสายงาน/ระดับ",
+    field: "positionLavel",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "positionNumber",
+    align: "left",
+    label: "ตำแหน่ง ",
+    sublabel: "เลขที่",
+    field: "positionNumber",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "govGroup",
+    align: "left",
+    label: "ส่วนราชการ ",
+    sublabel: "ระดับฝ่าย/กลุ่มงาน/ส่วน",
+    field: "govGroup",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "govOffice",
+    align: "left",
+    label: "ส่วนราชการ ",
+    sublabel: "ระดับสถาบัน/สำนักงาน/กอง",
+    field: "govOffice",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "bureau",
+    align: "left",
+    label: "หน่วยงาน",
+    field: "bureau",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "button",
+    align: "left",
+    label: "",
+    field: "",
+  },
+]);
+const rows = ref<any>([
+  {
+    fixname: "นางสาว",
+    name: "รัชภรณ์ ภัคดี",
+    brand: "ฝ่ายบริหารทั่วไป",
+    positionType: "บริหาร",
+    positionManager: "จัดการทั่วไป",
+    positionLavel: "ชำนาญการ",
+    positionNumber: "กบห.2",
+    govGroup: "ฝ่ายบริหารทั่วไป",
+    govOffice: "ฝ่ายบริหารทั่วไป",
+    bureau: "บริหาร",
+  },
+  {
+    fixname: "นางสาว",
+    name: "รัชภรณ์ ภัคดี",
+    brand: "ฝ่ายบริหารทั่วไป",
+    positionType: "บริหาร",
+    positionManager: "จัดการทั่วไป",
+    positionLavel: "ชำนาญการ",
+    positionNumber: "กบห.2",
+    govGroup: "ฝ่ายบริหารทั่วไป",
+    govOffice: "ฝ่ายบริหารทั่วไป",
+    bureau: "บริหาร",
+  },
+  {
+    fixname: "นางสาว",
+    name: "รัชภรณ์ ภัคดี",
+    brand: "ฝ่ายบริหารทั่วไป",
+    positionType: "บริหาร",
+    positionManager: "จัดการทั่วไป",
+    positionLavel: "ชำนาญการ",
+    positionNumber: "กบห.2",
+    govGroup: "ฝ่ายบริหารทั่วไป",
+    govOffice: "ฝ่ายบริหารทั่วไป",
+    bureau: "บริหาร",
+  },
+]);
+const visibleColumns = ref<any>([
+  "fixname",
+  "name",
+  "brand",
+  "positionType",
+  "positionManager",
+  "positionLavel",
+  "positionNumber",
+  "govGroup",
+  "govOffice",
+  "bureau",
+  "button",
+]);
+const filter = ref<string>("");
+
+const clickDelete = () => {
+  $q.dialog({
+    title: "ยืนยันการลบข้อมูล",
+    message: "ต้องการลบข้อมูลนี้ใช่หรือไม่?",
+    cancel: {
+      flat: true,
+      color: "negative",
+    },
+    persistent: true,
+  })
+    .onOk(async () => {
+      console.log("ลบข้อมูล");
+    })
+    .onCancel(() => {})
+    .onDismiss(() => {});
+};
+const backHistory = () => {
+  window.history.back();
+};
+</script>
+
+<template>
+  <div class="toptitle text-dark col-12 row items-center">
+    <q-btn
+      icon="mdi-arrow-left"
+      unelevated
+      round
+      dense
+      flat
+      color="primary"
+      class="q-mr-sm"
+      @click="backHistory"
+    />
+    รายชื่อผู้เกษียณอายุราชการ
+  </div>
+  <div>
+    <q-card class="col-12 q-pa-md">
+      <q-toolbar>
+        <AddList />
+        <q-space />
+        <q-tabs shrink>
+          <q-input
+            borderless
+            outlined
+            dense
+            debounce="300"
+            v-model="filter"
+            placeholder="ค้นหา"
+            style="max-width: 200px"
+            class="q-ml-sm"
+          >
+            <template v-slot:append>
+              <q-icon name="search" />
+            </template>
+          </q-input>
+          <q-select
+            v-model="visibleColumns"
+            multiple
+            outlined
+            dense
+            options-dense
+            :display-value="$q.lang.table.columns"
+            emit-value
+            map-options
+            :options="columns"
+            option-value="name"
+            options-cover
+            style="min-width: 150px"
+            class="gt-xs q-ml-sm"
+          />
+        </q-tabs>
+      </q-toolbar>
+
+      <div class="q-pa-md">
+        <q-table
+          flat
+          bordered
+          :rows="rows"
+          :columns="columns"
+          row-key="name"
+          class="custom-header-table"
+          hide-bottom
+          :filter="filter"
+          :visible-columns="visibleColumns"
+          no-data-label="ไม่มีข้อมูล"
+        >
+          <template v-slot:header="props">
+            <q-tr :props="props">
+              <q-th v-for="col in props.cols" :key="col.name" :props="props">
+                <div class="text-grey-7 text-weight-medium">
+                  <span class="row">{{ col.label }}</span>
+                  <span class="row" style="font-size: 12px">{{
+                    col.sublabel
+                  }}</span>
+                </div>
+              </q-th>
+            </q-tr>
+          </template>
+          <template v-slot:body="props">
+            <q-tr :props="props" class="cursor-pointer">
+              <q-td>{{ props.rowIndex + 1 }}</q-td>
+              <q-td key="fixname" :props="props">{{ props.row.fixname }}</q-td>
+              <q-td key="name" :props="props">{{ props.row.name }}</q-td>
+              <q-td key="brand" :props="props">{{ props.row.brand }}</q-td>
+              <q-td key="positionType" :props="props">{{
+                props.row.positionType
+              }}</q-td>
+              <q-td key="positionManager" :props="props">{{
+                props.row.positionManager
+              }}</q-td>
+              <q-td key="positionLavel" :props="props">{{
+                props.row.positionLavel
+              }}</q-td>
+              <q-td key="positionNumber" :props="props">{{
+                props.row.positionNumber
+              }}</q-td>
+              <q-td key="govGroup" :props="props">{{
+                props.row.govGroup
+              }}</q-td>
+              <q-td key="govOffice" :props="props">{{
+                props.row.govOffice
+              }}</q-td>
+              <q-td key="bureau" :props="props">{{ props.row.bureau }}</q-td>
+              <q-td>
+                <q-btn
+                  flat
+                  round
+                  class="text-red-14"
+                  icon="mdi-delete"
+                  size="md"
+                  @click="clickDelete"
+                />
+                <q-btn
+                  flat
+                  round
+                  class="text-teal-5"
+                  icon="mdi-eye"
+                  size="md"
+                />
+              </q-td>
+            </q-tr>
+          </template>
+        </q-table>
+      </div>
+    </q-card>
+  </div>
+</template>
+
+<style lang="scss" scope>
+.custom-header-table {
+  max-height: 64vh;
+
+  .q-table tr:nth-child(odd) td {
+    background: white;
+  }
+
+  .q-table tr:nth-child(even) td {
+    background: #f8f8f8;
+  }
+
+  .q-table thead tr {
+    background: #ecebeb;
+  }
+
+  .q-table thead tr th {
+    position: sticky;
+    z-index: 1;
+  }
+  .q-table thead tr:last-child th {
+    top: 48px;
+  }
+  .q-table thead tr:first-child th {
+    top: 0;
+  }
+}
+</style>

src/modules/06_retirement/router.ts

@@ -3,6 +3,8 @@
  */
 
 const Main = () => import("@/modules/06_retirement/views/Main.vue");
+const Listretirement = () => import("@/modules/06_retirement/components/ListRetirement/TableList.vue")
+
 
 export default [
   {
@@ -15,4 +17,14 @@ export default [
       Role: "retirement",
     },
   },
+  {
+    path: "/retirement/list",
+    name: "retirement/list",
+    component: Listretirement,
+    meta: {
+      Auth: true,
+      Key: [7.1],
+      Role: "retirement",
+    },
+  },
 ];

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

@@ -17,7 +17,7 @@
         <q-tab name="employee" label="ลูกจ้างประจำ" />
       </q-tabs>
     </div>
-    <q-separator/>
+    <q-separator />
     <div class="col-12 row q-pa-md">
       <div class="row col-12">
         <div class="row col-12 q-col-gutter-sm">
@@ -36,7 +36,7 @@
             :borderless="false"
             :outlined="true"
             :hide-dropdown-icon="false"
-            style="min-width: 150px;"
+            style="min-width: 150px"
             @update:model-value="searchFilterTable"
           />
           <div>
@@ -126,7 +126,7 @@
               </q-tr>
             </template>
             <template v-slot:body="props">
-              <q-tr :props="props" class="cursor-pointer">
+              <q-tr :props="props" class="cursor-pointer" @click="nextPage">
                 <q-td key="no" :props="props">
                   {{ props.rowIndex + 1 }}
                 </q-td>
@@ -178,7 +178,9 @@ import type {
   FormMainProbation2,
 } from "@/modules/05_placement/interface/request/Main";
 import { useQuasar } from "quasar";
+import { useRouter } from "vue-router";
 
+const router = useRouter();
 const $q = useQuasar(); //ใช้ noti quasar
 const modal = ref<boolean>(false);
 const pagination = ref({
@@ -334,6 +336,7 @@ const clickDelete = (id: string) => {
 
 const clickAdd = () => {
   //   modal.value = true;
+  router.push("/retirement/list");
 };
 const clickClose = async () => {
   modal.value = false;
@@ -366,6 +369,9 @@ const paginationLabel = (start: string, end: string, total: string) => {
   if (paging.value == true) return " " + start + "-" + end + " ใน " + total;
   else return start + "-" + end + " ใน " + total;
 };
+const nextPage = () => {
+  router.push("/retirement/list");
+};
 </script>
 
 <style lang="scss" scope>

src/modules/07_insignia/components/1_Proposals/addProposals.vue

@@ -0,0 +1,175 @@
+<template>
+  <div class="col-xs-12 col-sm-12 col-md-11">
+    <div class="toptitle col-12 row items-center">
+      <q-btn
+        icon="mdi-arrow-left"
+        unelevated
+        round
+        dense
+        flat
+        color="primary"
+        class="q-mr-sm"
+        @click="router.go(-1)"
+      />
+      <div>เพิ่มรอบการเสนอขอพระราชทานเครื่องราชอิสริยาภรณ์</div>
+    </div>
+    <div class="col-12">
+      <q-card bordered>
+        <div class="col-12 row q-col-gutter-md q-pa-md">
+          <div class="col-xs-12 col-sm-12 row">
+            <q-separator />
+            <div class="col-12 row q-pa-sm q-col-gutter-sm">
+              <q-input
+                class="col-10"
+                dense
+                outlined
+                v-model="roundInsig"
+                label="รอบการเสนอขอพระราชทานเครื่องราชฯ"
+              />
+              <q-input
+                class="col-2"
+                dense
+                outlined
+                v-model="year"
+                label="ปีที่เสนอ"
+              />
+              <datepicker
+                menu-class-name="modalfix"
+                v-model="dateStart"
+                :locale="'th'"
+                autoApply
+                class="col-xs-12 col-sm-5"
+                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
+                    outlined
+                    dense
+                    class="col-xs-12 col-sm-5"
+                    :model-value="
+                      dateStart != null ? date2Thai(dateStart) : null
+                    "
+                    :label="`${'วันเริ่มต้น'}`"
+                    :rules="[(val) => !!val || `${'กรุณาเลือกวันเริ่มต้น'}`]"
+                  >
+                    <template v-slot:prepend>
+                      <q-icon
+                        name="event"
+                        class="cursor-pointer"
+                        style="color: var(--q-primary)"
+                      >
+                      </q-icon>
+                    </template>
+                  </q-input>
+                </template>
+              </datepicker>
+              <datepicker
+                menu-class-name="modalfix"
+                v-model="dateEnd"
+                class="col-xs-12 col-sm-5"
+                :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
+                    outlined
+                    dense
+                    class="col-xs-12 col-sm-4"
+                    :model-value="dateEnd != null ? date2Thai(dateEnd) : null"
+                    :label="`${'วันสิ้นสุด'}`"
+                    :rules="[
+                      (val) => !!val || `${'กรุณาเลือกวันที่วันสิ้นสุด'}`,
+                    ]"
+                  >
+                    <template v-slot:prepend>
+                      <q-icon
+                        name="event"
+                        class="cursor-pointer"
+                        style="color: var(--q-primary)"
+                      >
+                      </q-icon>
+                    </template>
+                  </q-input>
+                </template>
+              </datepicker>
+
+              <q-input
+                class="col-xs-12 col-sm-2"
+                dense
+                outlined
+                v-model="datelast"
+                label="จำนวนวันแจ้งเตือนก่อนวันสิ้นสุด"
+              />
+              <q-file
+                class="col-xs-12 col-sm-10"
+                outlined
+                dense
+                v-model="files"
+                label="อัปโหลดเอกสารประกอบ"
+                hide-bottom-space
+                lazy-rules
+                :rules="[
+                  (val) => val || 'กรุณาเลือกไฟล์หนังสือถึงหน่วยงานที่รับโอน',
+                ]"
+              >
+                <template v-slot:prepend>
+                  <q-icon name="attach_file" />
+                </template>
+              </q-file>
+            </div>
+          </div>
+        </div>
+        <q-separator />
+        <q-separator />
+        <div class="row col-12 q-pa-sm">
+          <q-space />
+          <q-btn
+            unelevated
+            dense
+            class="q-px-md items-center"
+            color="light-blue-10"
+            label="บันทึก"
+            @click="router.go(-1)"
+          />
+        </div>
+      </q-card>
+    </div>
+  </div>
+</template>
+<script setup lang="ts">
+import type { QTableProps } from "quasar";
+import { ref } from "vue";
+import { useQuasar } from "quasar";
+import { useRouter } from "vue-router";
+import { useCounterMixin } from "@/stores/mixin";
+
+const mixin = useCounterMixin();
+const { date2Thai } = mixin;
+const router = useRouter();
+const $q = useQuasar();
+const dateStart = ref<any>(new Date());
+const dateEnd = ref<any>(new Date());
+
+const roundInsig = ref<string>("");
+const year = ref<string>("");
+const datelast = ref<string>("");
+
+const routeName = router.currentRoute.value.name;
+</script>

src/modules/07_insignia/components/1_Proposals/listProposals.vue

@@ -0,0 +1,362 @@
+<template>
+  <div class="toptitle text-dark col-12 row items-center">
+    รายการรอบการเสนอขอพระราชทานเครื่องราชอิสริยาภรณ์
+  </div>
+  <q-card flat bordered class="col-12 q-mt-sm q-pa-md">
+    <div class="row q-col-gutter-sm">
+      <div class="row col-12 q-col-gutter-sm">
+        <div>
+          <q-btn
+            @click="clickAdd()"
+            size="12px"
+            flat
+            round
+            color="add"
+            icon="mdi-plus"
+          >
+            <q-tooltip>เพิ่มรายการรอบการเสนอขอ</q-tooltip>
+          </q-btn>
+        </div>
+        <q-space />
+
+        <q-input
+          class="col-xs-12 col-sm-3 col-md-2"
+          standout
+          dense
+          v-model="filterKeyword"
+          ref="filterRef"
+          outlined
+          debounce="300"
+          placeholder="ค้นหา"
+        >
+          <template v-slot:append>
+            <q-icon v-if="filterKeyword == ''" name="search" />
+            <q-icon
+              v-if="filterKeyword !== ''"
+              name="clear"
+              class="cursor-pointer"
+              @click="resetFilter"
+            />
+          </template>
+        </q-input>
+
+        <q-select
+          v-model="visibleColumns"
+          multiple
+          outlined
+          dense
+          options-dense
+          :display-value="$q.lang.table.columns"
+          emit-value
+          map-options
+          :options="columns"
+          option-value="name"
+          options-cover
+          style="min-width: 150px"
+          class="col-xs-12 col-sm-3 col-md-2"
+        />
+      </div>
+      <div class="col-12">
+        <q-table
+          ref="table"
+          :columns="columns"
+          :rows="rows"
+          :filter="filterKeyword"
+          row-key="Order"
+          flat
+          bordered
+          :paging="true"
+          dense
+          class="custom-header-table"
+          v-bind="attrs"
+          :visible-columns="visibleColumns"
+          :pagination-label="paginationLabel"
+          v-model:pagination="pagination"
+        >
+          <template v-slot:header="props">
+            <q-tr :props="props">
+              <q-th v-for="col in props.cols" :key="col.name" :props="props">
+                <span class="text-weight-medium">{{ col.label }}</span>
+              </q-th>
+              <q-th auto-width />
+              <q-th auto-width />
+            </q-tr>
+          </template>
+          <template v-slot:body="props">
+            <q-tr :props="props" class="cursor-pointer">
+              <q-td key="round" :props="props">
+                {{ props.row.round }}
+              </q-td>
+              <q-td key="year" :props="props">
+                {{ props.row.year }}
+              </q-td>
+              <q-td key="startDate" :props="props">
+                {{ props.row.startDate }}
+              </q-td>
+              <q-td key="endDate" :props="props">
+                {{ props.row.endDate }}
+              </q-td>
+              <q-td key="status" :props="props">
+                <q-icon
+                  v-if="props.row.status == 'ยังไม่ได้เสนอ'"
+                  name="mdi-close"
+                  color="grey-5"
+                  class="text-h5"
+                />
+                <q-icon
+                  v-else
+                  name="mdi-check"
+                  color="positive"
+                  class="text-h5"
+                />
+              </q-td>
+              <q-td auto-width>
+                <q-btn
+                  dense
+                  size="12px"
+                  flat
+                  round
+                  color="light-blue-8"
+                  @click.stop.prevent="clickProposals(props.row.id)"
+                  icon="mdi-file-download"
+                >
+                  <q-tooltip>ดาวน์โหลดเอกสารประกอบ </q-tooltip>
+                </q-btn>
+              </q-td>
+              <q-td auto-width>
+                <q-btn
+                  dense
+                  size="12px"
+                  flat
+                  round
+                  color="red"
+                  @click="clickDelete(props.row.id)"
+                  icon="mdi-delete"
+                >
+                  <q-tooltip>ลบข้อมูล</q-tooltip>
+                </q-btn>
+              </q-td>
+            </q-tr>
+          </template>
+          <template v-slot:pagination="scope">
+            <q-pagination
+              v-model="pagination.page"
+              active-color="primary"
+              color="dark"
+              :max="scope.pagesNumber"
+              :max-pages="5"
+              size="sm"
+              boundary-links
+              direction-links
+            ></q-pagination>
+          </template>
+        </q-table>
+      </div>
+    </div>
+  </q-card>
+</template>
+
+<script setup lang="ts">
+import { ref, useAttrs } from "vue";
+import type { QTableProps } from "quasar";
+import router from "@/router";
+import { useQuasar } from "quasar";
+import type { FormProprsalsRound } from " @/modules/07_insignia/interface/request/Main.ts";
+
+const $q = useQuasar(); //ใช้ noti quasar
+const modal = ref<boolean>(false);
+const pagination = ref({
+  sortBy: "desc",
+  descending: false,
+  page: 1,
+  rowsPerPage: 10,
+});
+
+const visibleColumns = ref<string[]>([
+  "round",
+  "year",
+  "startDate",
+  "endDate",
+  "status",
+]); //ค้นหา คอลัมน์ คอลัมน์ที่แสดง
+
+// หัวตาราง
+const columns = ref<QTableProps["columns"]>([
+  {
+    name: "round",
+    align: "left",
+    label: "รอบการเสนอขอพระราชทานเครื่องราชฯ",
+    sortable: true,
+    field: "no",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "year",
+    align: "left",
+    label: "ปีที่เสนอ",
+    sortable: true,
+    field: "name",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "startDate",
+    align: "left",
+    label: "วันที่เริ่มต้น",
+    sortable: true,
+    field: "position",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "endDate",
+    align: "left",
+    label: "วันที่สิ้นสุด",
+    sortable: true,
+    field: "level",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "status",
+    align: "left",
+    label: "สถานะ",
+    sortable: true,
+    field: "institution",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+]);
+
+// ข้อมูลตาราง (จำลอง)
+const rows = ref<FormProprsalsRound[]>([
+  {
+    round: "รอบการเสนอขอพระราชทานเครื่องราชฯ",
+    year: "2566",
+    startDate: "2566",
+    endDate: "31 พ.ค. 2566",
+    status: "เสนอเเล้ว",
+  },
+  {
+    round: "รอบการเสนอขอพระราชทานเครื่องราชฯ",
+    year: "2566",
+    startDate: "2566",
+    endDate: "31 พ.ค. 2566",
+    status: "เสนอเเล้ว",
+  },
+  {
+    round: "รอบการเสนอขอพระราชทานเครื่องราชฯ",
+    year: "2566",
+    startDate: "2566",
+    endDate: "31 พ.ค. 2566",
+    status: "เสนอเเล้ว",
+  },
+  {
+    round: "รอบการเสนอขอพระราชทานเครื่องราชฯ",
+    year: "2566",
+    startDate: "2566",
+    endDate: "31 พ.ค. 2566",
+    status: "ยังไม่ได้เสนอ",
+  },
+  {
+    round: "รอบการเสนอขอพระราชทานเครื่องราชฯ",
+    year: "2566",
+    startDate: "2566",
+    endDate: "31 พ.ค. 2566",
+    status: "เสนอเเล้ว",
+  },
+]);
+
+// หัวตาราง2
+const clickDelete = (id: string) => {
+  $q.dialog({
+    title: "ยืนยันการลบข้อมูล",
+    message: "ต้องการลบข้อมูลนี้ใช่หรือไม่?",
+    cancel: {
+      flat: true,
+      color: "negative",
+    },
+    persistent: true,
+  })
+    .onOk(async () => {})
+    .onCancel(() => {})
+    .onDismiss(() => {});
+};
+
+const clickAdd = () => {
+  router.push({ name: "roundAdd" });
+};
+
+// ค้นหาในตาราง
+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>
+
+<style lang="scss" scope>
+.filter-card {
+  background-color: #f1f1f1b0;
+}
+
+.toggle-expired-account {
+  font-size: 12px;
+  font-weight: 400;
+  font-size: 15px;
+  line-height: 150%;
+  color: #35373c;
+}
+
+.icon-color {
+  color: #4154b3;
+}
+
+.custom-header-table {
+  max-height: 64vh;
+
+  .q-table tr:nth-child(odd) td {
+    background: white;
+  }
+
+  .q-table tr:nth-child(even) td {
+    background: #f8f8f8;
+  }
+
+  .q-table thead tr {
+    background: #ecebeb;
+  }
+
+  .q-table thead tr th {
+    position: sticky;
+    z-index: 1;
+  }
+
+  /* this will be the loading indicator */
+  .q-table thead tr:last-child th {
+    /* height of all previous header rows */
+    top: 48px;
+  }
+
+  .q-table thead tr:first-child th {
+    top: 0;
+  }
+}
+</style>

src/modules/07_insignia/components/Coin.vue

@@ -0,0 +1,516 @@
+<template>
+  <div class="toptitle text-dark col-12 row items-center">
+    <!-- <q-btn
+        icon="mdi-arrow-left"
+        unelevated
+        round
+        dense
+        flat
+        color="primary"
+        class="q-mr-sm"
+        @click="router.go(-1)"
+      /> -->
+    ประวัติการยื่นขอพระราชทานเหรียญจักรพรรดิมาลา
+  </div>
+  <q-card flat bordered class="col-12 q-my-md q-mt-sm rounded-borders">
+    <q-tabs
+      v-model="tab"
+      align="left"
+      class="bg-white text-grey"
+      active-color="primary"
+      indicator-color="primary"
+    >
+      <q-tab name="yes" label="คนที่ยื่นขอ" />
+      <q-tab name="no" label="คนที่ไม่ยื่นขอ" />
+    </q-tabs>
+    <q-separator />
+    <div class="q-py-md q-px-lg">
+      <!-- <div>
+        <label class="q-mr-sm">รอบ</label>
+        <q-btn
+          flat
+          round
+          de
+          color="grey"
+          icon="mdi-menu-left"
+          :class="getArrow(arrow)"
+          @click="clickRound"
+        />
+      </div>
+      <Transition>
+        <div v-if="arrow" class="bg-base rounded-borders q-pa-md">
+          <div class="row col-12 q-col-gutter-x-lg q-col-gutter-y-md">
+            <div class="col-xs-6 col-md-2">
+              <datepicker
+                menu-class-name="modalfix"
+                v-model="dateGoverment"
+                :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
+                    outlined
+                    dense
+                    class="full-width datepicker bg-white"
+                    :model-value="
+                      dateGoverment != null ? date2Thai(dateGoverment) : null
+                    "
+                    :label="`${'วันที่ประกาศราชกิจจานุเบกษา'}`"
+                  >
+                    <template v-slot:prepend>
+                      <q-icon
+                        name="event"
+                        class="cursor-pointer"
+                        style="color: var(--q-primary)"
+                      >
+                      </q-icon>
+                    </template>
+                  </q-input>
+                </template>
+              </datepicker>
+            </div>
+            <div class="col-xs-6 col-md-2">
+              <datepicker
+                menu-class-name="modalfix"
+                v-model="dateReceiver"
+                :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
+                    outlined
+                    dense
+                    class="full-width datepicker bg-white"
+                    :model-value="
+                      dateReceiver != null ? date2Thai(dateReceiver) : null
+                    "
+                    :label="`${'วันที่ได้รับ'}`"
+                  >
+                    <template v-slot:prepend>
+                      <q-icon
+                        name="event"
+                        class="cursor-pointer"
+                        style="color: var(--q-primary)"
+                      >
+                      </q-icon>
+                    </template>
+                  </q-input>
+                </template>
+              </datepicker>
+            </div>
+            <div class="col-xs-6 col-md-2">
+              <q-input
+                class="bg-white"
+                outlined
+                dense
+                lazy-rules
+                v-model="issue"
+                :label="`${'ฉบับ'}`"
+                hide-bottom-space
+              />
+            </div>
+            <div class="col-xs-6 col-md-2">
+              <q-input
+                class="bg-white"
+                outlined
+                dense
+                lazy-rules
+                v-model="book"
+                :label="`${'เล่มที่'}`"
+                hide-bottom-space
+              />
+            </div>
+            <div class="col-xs-6 col-md-2">
+              <q-input
+                class="bg-white"
+                outlined
+                dense
+                lazy-rules
+                v-model="volume"
+                :label="`${'เล่ม'}`"
+                hide-bottom-space
+              />
+            </div>
+            <div class="col-xs-6 col-md-2">
+              <q-input
+                class="bg-white"
+                outlined
+                dense
+                lazy-rules
+                v-model="section"
+                :label="`${'ตอนที่'}`"
+                hide-bottom-space
+              />
+            </div>
+            <div class="col-xs-12 col-md-6">
+              <q-file
+                class="bg-white"
+                outlined
+                dense
+                v-model="government"
+                label="ราชกิจจานุเบกษา"
+                hide-bottom-space
+                lazy-rules
+              >
+                <template v-slot:prepend>
+                  <q-icon name="attach_file" color="primary" />
+                </template>
+              </q-file>
+            </div>
+            <div class="col-xs-12 col-md-6">
+              <q-file
+                class="bg-white"
+                outlined
+                dense
+                v-model="document"
+                label="เอกสารประกอบ"
+                hide-bottom-space
+                lazy-rules
+              >
+                <template v-slot:prepend>
+                  <q-icon name="attach_file" color="primary" />
+                </template>
+              </q-file>
+            </div>
+          </div>
+        </div>
+      </Transition> -->
+      <div :class="marginTop(arrow)">
+        <div class="col-12 row q-pb-sm items-center">
+          <selector
+            outlined
+            dense
+            lazy-rules
+            v-model="capYears"
+            hide-bottom-space
+            :label="`${'ปีงบประมาณ'}`"
+            emit-value
+            map-options
+            option-label="name"
+            :options="capYearsOption"
+            option-value="id"
+            use-input
+            input-debounce="0"
+            style="min-width: 150px"
+            class="gt-xs q-ml-sm"
+            @filter="(inputValue:string,
+                        doneFn:Function) => filterSelector(inputValue, doneFn,'capYearsOption'
+                        ) "
+          />
+          <q-space />
+          <div class="items-center" style="display: flex">
+            <!-- ค้นหาข้อความใน table -->
+            <q-input
+              standout
+              dense
+              v-model="filter"
+              ref="filterRef"
+              outlined
+              debounce="300"
+              placeholder="ค้นหา"
+              style="max-width: 200px"
+              class="q-ml-sm"
+            >
+              <template v-slot:append>
+                <q-icon v-if="filter == ''" name="search" />
+                <q-icon
+                  v-if="filter !== ''"
+                  name="clear"
+                  class="cursor-pointer"
+                  @click="resetFilter"
+                />
+              </template>
+            </q-input>
+            <!-- แสดงคอลัมน์ใน table -->
+            <q-select
+              v-model="visibleColumns"
+              :display-value="$q.lang.table.columns"
+              multiple
+              outlined
+              dense
+              :options="columns"
+              options-dense
+              option-value="name"
+              map-options
+              emit-value
+              style="min-width: 150px"
+              class="gt-xs q-ml-sm"
+            />
+          </div>
+        </div>
+        <d-table
+          :rows="rows"
+          :columns="columns"
+          :visible-columns="visibleColumns"
+          :filter="filter"
+          row-key="name"
+        >
+          <template v-slot:body-cell="props">
+            <q-td :props="props">
+              <div v-if="props.col.name == 'no'">
+                {{ props.rowIndex + 1 }}
+              </div>
+
+              <div v-else>
+                {{ props.value }}
+              </div>
+            </q-td>
+          </template>
+        </d-table>
+      </div>
+    </div>
+  </q-card>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted } from "vue";
+// import { useRouter } from "vue-router";
+import { useCounterMixin } from "@/stores/mixin";
+
+import type { DataOption } from "@/modules/05_placement/interface/index/Main";
+import type { QTableProps, QInput } from "quasar";
+
+// const router = useRouter();
+const mixin = useCounterMixin();
+const { date2Thai } = mixin;
+
+const tab = ref<string>("yes");
+const arrow = ref<boolean>(false);
+
+// const dateGoverment = ref<Date>(new Date());
+// const dateReceiver = ref<Date>(new Date());
+// const issue = ref<string>("");
+// const book = ref<string>("");
+// const volume = ref<string>("");
+// const section = ref<string>("");
+// const government = ref<any>(null);
+// const document = ref<any>(null);
+
+const capYears = ref<string>("");
+const capYearsOption = ref<DataOption[]>([]);
+const capYearsOptionFilter = ref<DataOption[]>([]);
+
+const visibleColumns = ref<String[]>([
+  "no",
+  "cardid",
+  "name",
+  "position",
+  "range",
+  "salary",
+  "zone",
+  "school",
+  "date",
+]);
+const filterRef = ref<QInput>();
+const filter = ref<string>("");
+const columns = ref<QTableProps["columns"]>([
+  {
+    name: "no",
+    align: "left",
+    label: "ลำดับ",
+    field: "no",
+    sortable: true,
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "cardid",
+    align: "left",
+    label: "เลขประจำตัวประชาชน",
+    field: "cardid",
+    sortable: true,
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "name",
+    align: "left",
+    label: "ชื่อ - นามสกุล",
+    field: "name",
+    sortable: true,
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "position",
+    align: "left",
+    label: "ตำแหน่ง",
+    field: "position",
+    sortable: true,
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "range",
+    align: "left",
+    label: "อันดับ",
+    field: "range",
+    sortable: true,
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "salary",
+    align: "left",
+    label: "เงินเดือน",
+    field: "salary",
+    sortable: true,
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "zone",
+    align: "left",
+    label: "เขต",
+    field: "zone",
+    sortable: true,
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "school",
+    align: "left",
+    label: "โรงเรียน",
+    field: "school",
+    sortable: true,
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "date",
+    align: "left",
+    label: "วันที่ยื่นขอ",
+    field: "date",
+    sortable: true,
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+]);
+const rows = ref<any>([
+  {
+    no: "1",
+    cardid: "1XXXXXXXXXXXX",
+    name: "นางสาวรัชภรณ์ ภักดี",
+    position: "กกก",
+    range: "1",
+    salary: "XXXXXX",
+    zone: "1",
+    school: "โรงเรียน",
+    date: date2Thai(new Date()),
+  },
+  {
+    no: "2",
+    cardid: "1XXXXXXXXXXXX",
+    name: "นางสาวรัชภรณ์ ภักดี",
+    position: "กกก",
+    range: "1",
+    salary: "XXXXXX",
+    zone: "1",
+    school: "โรงเรียน",
+    date: date2Thai(new Date()),
+  },
+  {
+    no: "3",
+    cardid: "1XXXXXXXXXXXX",
+    name: "นางสาวรัชภรณ์ ภักดี",
+    position: "กกก",
+    range: "1",
+    salary: "XXXXXX",
+    zone: "1",
+    school: "โรงเรียน",
+    date: date2Thai(new Date()),
+  },
+]);
+
+onMounted(() => {
+  const op2: DataOption[] = [
+    { id: "1", name: "2566" },
+    { id: "2", name: "2565" },
+    { id: "3", name: "2564" },
+  ];
+
+  capYearsOption.value = op2;
+  capYearsOptionFilter.value = op2;
+});
+
+const clickRound = () => {
+  arrow.value = !arrow.value;
+};
+
+const resetFilter = () => {
+  // reset ค่าที่ค้นหาเมื่อกดปุ่ม X ในกล่องค้นหา
+  filter.value = "";
+  filterRef.value!.focus();
+};
+
+const filterSelector = (val: any, update: Function, filtername: string) => {
+  switch (filtername) {
+    case "capYearsOption":
+      update(() => {
+        capYearsOption.value = capYearsOptionFilter.value.filter(
+          (v: DataOption) => v.name!.indexOf(val) > -1
+        );
+      });
+      break;
+
+    default:
+      break;
+  }
+};
+
+// const getArrow = (val: boolean) => {
+//   return {
+//     "arrow cursor-pointer": !val,
+//     "arrow-active cursor-pointer": val,
+//   };
+// };
+
+const marginTop = (val: boolean) => {
+  return {
+    "": !val,
+    "q-mt-md": val,
+  };
+};
+</script>
+<style lang="scss" scoped>
+.arrow {
+  transition: transform 0.5s;
+}
+
+.arrow-active {
+  transition: transform 0.5s;
+  transform: rotate(-90deg);
+}
+
+.bg-base {
+  background-color: #efefef;
+}
+
+.v-enter-active,
+.v-leave-active {
+  transition: opacity 0.5s ease;
+}
+
+.v-enter-from,
+.v-leave-to {
+  opacity: 0;
+}
+</style>

src/modules/07_insignia/components/RecordInsignia.vue

@@ -0,0 +1,502 @@
+<template>
+  <div class="toptitle text-dark col-12 row items-center">
+    <!-- <q-btn
+      icon="mdi-arrow-left"
+      unelevated
+      round
+      dense
+      flat
+      color="primary"
+      class="q-mr-sm"
+      @click="router.go(-1)"
+    /> -->
+    บันทึกผลการได้รับพระราชทานเครื่องราชย์อิสริยสภรณ์
+  </div>
+  <q-card flat bordered class="col-12 q-my-md q-mt-sm rounded-borders">
+    <q-tabs
+      v-model="tab"
+      align="left"
+      class="bg-white text-grey"
+      active-color="primary"
+      indicator-color="primary"
+    >
+      <q-tab name="hight" label="ขั้นสายสะพาน" />
+      <q-tab name="low" label="ขั้นต่ำกว่าสายสะพาน" />
+    </q-tabs>
+    <q-separator />
+    <div class="q-py-md q-px-lg">
+      <div>
+        <label class="q-mr-sm">รอบ</label>
+        <q-btn
+          flat
+          round
+          de
+          color="grey"
+          icon="mdi-menu-left"
+          :class="getArrow(arrow)"
+          @click="clickRound"
+        />
+      </div>
+      <Transition>
+        <div v-if="arrow" class="bg-base rounded-borders q-pa-md">
+          <div class="row col-12 q-col-gutter-x-lg q-col-gutter-y-md">
+            <div class="col-xs-6 col-md-2">
+              <datepicker
+                menu-class-name="modalfix"
+                v-model="dateGoverment"
+                :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
+                    outlined
+                    dense
+                    class="full-width datepicker bg-white"
+                    :model-value="
+                      dateGoverment != null ? date2Thai(dateGoverment) : null
+                    "
+                    :label="`${'วันที่ประกาศราชกิจจานุเบกษา'}`"
+                  >
+                    <template v-slot:prepend>
+                      <q-icon
+                        name="event"
+                        class="cursor-pointer"
+                        style="color: var(--q-primary)"
+                      >
+                      </q-icon>
+                    </template>
+                  </q-input>
+                </template>
+              </datepicker>
+            </div>
+            <div class="col-xs-6 col-md-2">
+              <datepicker
+                menu-class-name="modalfix"
+                v-model="dateReceiver"
+                :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
+                    outlined
+                    dense
+                    class="full-width datepicker bg-white"
+                    :model-value="
+                      dateReceiver != null ? date2Thai(dateReceiver) : null
+                    "
+                    :label="`${'วันที่ได้รับ'}`"
+                  >
+                    <template v-slot:prepend>
+                      <q-icon
+                        name="event"
+                        class="cursor-pointer"
+                        style="color: var(--q-primary)"
+                      >
+                      </q-icon>
+                    </template>
+                  </q-input>
+                </template>
+              </datepicker>
+            </div>
+            <div class="col-xs-6 col-md-2">
+              <q-input
+                class="bg-white"
+                outlined
+                dense
+                lazy-rules
+                v-model="issue"
+                :label="`${'ฉบับ'}`"
+                hide-bottom-space
+              />
+            </div>
+            <div class="col-xs-6 col-md-2">
+              <q-input
+                class="bg-white"
+                outlined
+                dense
+                lazy-rules
+                v-model="book"
+                :label="`${'เล่มที่'}`"
+                hide-bottom-space
+              />
+            </div>
+            <div class="col-xs-6 col-md-2">
+              <q-input
+                class="bg-white"
+                outlined
+                dense
+                lazy-rules
+                v-model="volume"
+                :label="`${'เล่ม'}`"
+                hide-bottom-space
+              />
+            </div>
+            <div class="col-xs-6 col-md-2">
+              <q-input
+                class="bg-white"
+                outlined
+                dense
+                lazy-rules
+                v-model="section"
+                :label="`${'ตอนที่'}`"
+                hide-bottom-space
+              />
+            </div>
+            <div class="col-xs-12 col-md-6">
+              <q-file
+                class="bg-white"
+                outlined
+                dense
+                v-model="government"
+                label="ราชกิจจานุเบกษา"
+                hide-bottom-space
+                lazy-rules
+              >
+                <template v-slot:prepend>
+                  <q-icon name="attach_file" color="primary" />
+                </template>
+              </q-file>
+            </div>
+            <div class="col-xs-12 col-md-6">
+              <q-file
+                class="bg-white"
+                outlined
+                dense
+                v-model="document"
+                label="เอกสารประกอบ"
+                hide-bottom-space
+                lazy-rules
+              >
+                <template v-slot:prepend>
+                  <q-icon name="attach_file" color="primary" />
+                </template>
+              </q-file>
+            </div>
+          </div>
+        </div>
+      </Transition>
+      <div :class="marginTop(arrow)">
+        <div class="col-12 row q-pb-sm items-center">
+          <selector
+            outlined
+            dense
+            lazy-rules
+            v-model="selectType"
+            hide-bottom-space
+            :label="`${'ประเภทเครื่องราชฯ'}`"
+            emit-value
+            map-options
+            option-label="name"
+            :options="selectTypeOption"
+            option-value="id"
+            use-input
+            input-debounce="0"
+            style="min-width: 150px"
+            class="gt-xs q-ml-sm"
+            @filter="(inputValue:string,
+                      doneFn:Function) => filterSelector(inputValue, doneFn,'selectTypeOption'
+                      ) "
+          />
+          <selector
+            outlined
+            dense
+            lazy-rules
+            v-model="selectStatus"
+            hide-bottom-space
+            :label="`${'สถานะการบันทึก'}`"
+            emit-value
+            map-options
+            option-label="name"
+            :options="selectStatusOption"
+            option-value="id"
+            use-input
+            input-debounce="0"
+            style="min-width: 150px"
+            class="gt-xs q-ml-sm"
+            @filter="(inputValue:string,
+                      doneFn:Function) => filterSelector(inputValue, doneFn,'selectStatusOption'
+                      ) "
+          />
+          <q-space />
+          <div class="items-center" style="display: flex">
+            <!-- ค้นหาข้อความใน table -->
+            <q-input
+              standout
+              dense
+              v-model="filter"
+              ref="filterRef"
+              outlined
+              debounce="300"
+              placeholder="ค้นหา"
+              style="max-width: 200px"
+              class="q-ml-sm"
+            >
+              <template v-slot:append>
+                <q-icon v-if="filter == ''" name="search" />
+                <q-icon
+                  v-if="filter !== ''"
+                  name="clear"
+                  class="cursor-pointer"
+                  @click="resetFilter"
+                />
+              </template>
+            </q-input>
+            <!-- แสดงคอลัมน์ใน table -->
+            <q-select
+              v-model="visibleColumns"
+              :display-value="$q.lang.table.columns"
+              multiple
+              outlined
+              dense
+              :options="columns"
+              options-dense
+              option-value="name"
+              map-options
+              emit-value
+              style="min-width: 150px"
+              class="gt-xs q-ml-sm"
+            />
+          </div>
+        </div>
+        <d-table
+          :rows="rows"
+          :columns="columns"
+          :visible-columns="visibleColumns"
+          :filter="filter"
+          row-key="name"
+        >
+          <template v-slot:body-cell="props">
+            <q-td :props="props">
+              <div v-if="props.col.name == 'no'">
+                {{ props.rowIndex + 1 }}
+              </div>
+
+              <div v-else>
+                {{ props.value }}
+              </div>
+            </q-td>
+          </template>
+        </d-table>
+      </div>
+    </div>
+  </q-card>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted } from "vue";
+// import { useRouter } from "vue-router";
+import { useCounterMixin } from "@/stores/mixin";
+
+import type { DataOption } from "@/modules/05_placement/interface/index/Main";
+import type { QTableProps, QInput } from "quasar";
+
+// const router = useRouter();
+const mixin = useCounterMixin();
+const { date2Thai } = mixin;
+
+const tab = ref<string>("hight");
+const arrow = ref<boolean>(false);
+
+const dateGoverment = ref<Date>(new Date());
+const dateReceiver = ref<Date>(new Date());
+const issue = ref<string>("");
+const book = ref<string>("");
+const volume = ref<string>("");
+const section = ref<string>("");
+const government = ref<any>(null);
+const document = ref<any>(null);
+
+const selectStatus = ref<string>("");
+const selectStatusOption = ref<DataOption[]>([]);
+const selectStatusOptionFilter = ref<DataOption[]>([]);
+
+const selectType = ref<string>("");
+const selectTypeOption = ref<DataOption[]>([]);
+const selectTypeOptionFilter = ref<DataOption[]>([]);
+
+const visibleColumns = ref<String[]>([
+  "no",
+  "status",
+  "name",
+  "type",
+  "page",
+  "number",
+]);
+const filterRef = ref<QInput>();
+const filter = ref<string>("");
+const columns = ref<QTableProps["columns"]>([
+  {
+    name: "no",
+    align: "left",
+    label: "ลำดับ",
+    field: "no",
+    sortable: true,
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "status",
+    align: "left",
+    label: "สถานะ",
+    field: "status",
+    sortable: true,
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "name",
+    align: "left",
+    label: "ชื่อ - สกุล",
+    field: "name",
+    sortable: true,
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "type",
+    align: "left",
+    label: "ประเภทเครื่องราชฯ",
+    field: "type",
+    sortable: true,
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "page",
+    align: "left",
+    label: "หน้าในราชกิจนุเบกษา",
+    field: "page",
+    sortable: true,
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "number",
+    align: "left",
+    label: "ลำดับที่ในราชกิจจานุเบกษา",
+    field: "number",
+    sortable: true,
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+]);
+const rows = ref<any>([
+  {
+    no: "1",
+    status: "รอบันทึกข้อมูล",
+    name: "นางสาวรัชภรณ์ ภักดี",
+    type: "ทั้งหมด",
+    page: "8",
+    number: "11",
+  },
+  {
+    no: "2",
+    status: "บันทึกลง ก.พ. 7 แล้ว",
+    name: "นางสาวภาพรรณ ลออ",
+    type: "ทั้งหมด",
+    page: "12",
+    number: "11",
+  },
+]);
+
+onMounted(() => {
+  const op1: DataOption[] = [{ id: "1", name: "ทั้งหมด" }];
+  const op2: DataOption[] = [
+    { id: "1", name: "ทั้งหมด" },
+    { id: "2", name: "รอบันทึกข้อมูล" },
+    { id: "3", name: "บันทึกลง ก.พ. 7 แล้ว" },
+  ];
+  selectTypeOption.value = op1;
+  selectTypeOptionFilter.value = op1;
+  selectStatusOption.value = op2;
+  selectStatusOptionFilter.value = op2;
+});
+
+const clickRound = () => {
+  arrow.value = !arrow.value;
+};
+
+const resetFilter = () => {
+  // reset ค่าที่ค้นหาเมื่อกดปุ่ม X ในกล่องค้นหา
+  filter.value = "";
+  filterRef.value!.focus();
+};
+
+const filterSelector = (val: any, update: Function, filtername: string) => {
+  switch (filtername) {
+    case "selectTypeOption":
+      update(() => {
+        selectTypeOption.value = selectTypeOptionFilter.value.filter(
+          (v: DataOption) => v.name!.indexOf(val) > -1
+        );
+      });
+      break;
+    case "selectStatusOption":
+      update(() => {
+        selectStatusOption.value = selectStatusOptionFilter.value.filter(
+          (v: DataOption) => v.name!.indexOf(val) > -1
+        );
+      });
+      break;
+
+    default:
+      break;
+  }
+};
+
+const getArrow = (val: boolean) => {
+  return {
+    "arrow cursor-pointer": !val,
+    "arrow-active cursor-pointer": val,
+  };
+};
+
+const marginTop = (val: boolean) => {
+  return {
+    "": !val,
+    "q-mt-md": val,
+  };
+};
+</script>
+<style lang="scss" scoped>
+.arrow {
+  transition: transform 0.5s;
+}
+
+.arrow-active {
+  transition: transform 0.5s;
+  transform: rotate(-90deg);
+}
+
+.bg-base {
+  background-color: #efefef;
+}
+
+.v-enter-active,
+.v-leave-active {
+  transition: opacity 0.5s ease;
+}
+
+.v-enter-from,
+.v-leave-to {
+  opacity: 0;
+}
+</style>

src/modules/07_insignia/components/report/ReportView.vue

@@ -0,0 +1,41 @@
+<script setup lang="ts"></script>
+
+<template>
+  <div class="toptitle text-dark col-12 row items-center">
+    รางงานเครื่องราชอิสริยาภรณ์
+  </div>
+  <div>
+    <q-card flat bordered class="col-12 q-mt-sm">
+      <div class="q-pa-md">
+        <q-item to="/insignia/report/report-01" tag="q-item" dense>
+          <q-item-section avatar>
+            <q-icon color="primary" name="mdi-file" size="xs" />
+          </q-item-section>
+          <q-item-section class="text-dark">
+            รายงาน ขร.1 - ขร.4
+          </q-item-section>
+        </q-item>
+
+        <q-item to="/insignia/report/report-02" dense>
+          <q-item-section avatar>
+            <q-icon color="primary" name="mdi-file" size="xs" />
+          </q-item-section>
+          <q-item-section class="text-dark">
+            รายงานผลการจ่ายใบกำกับ
+          </q-item-section>
+        </q-item>
+
+        <q-item to="/insignia/report/report-03" dense>
+          <q-item-section avatar>
+            <q-icon color="primary" name="mdi-file" size="xs" />
+          </q-item-section>
+          <q-item-section class="text-dark"
+            >รายชื่อข้าราชการสามัญฯ ที่ได้รับ/ไม่ได้รับใบกำกับ
+          </q-item-section>
+        </q-item>
+      </div>
+    </q-card>
+  </div>
+</template>
+
+<style lang="scss" scope></style>

src/modules/07_insignia/components/report/Report_01.vue

@@ -0,0 +1,280 @@
+<script setup lang="ts">
+import { ref, onMounted } from "vue";
+import { VuePDF, usePDF } from "@tato30/vue-pdf";
+
+const pdfSrc = ref<any>();
+const numOfPages = ref<number>(0);
+const page = ref<number>(1);
+const dialog = ref<boolean>(false);
+onMounted(async () => {
+  const pdfData = usePDF(
+    "https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf"
+  );
+
+  setTimeout(() => {
+    pdfSrc.value = pdfData.pdf.value;
+    numOfPages.value = pdfData.pages.value;
+  }, 1000);
+  console.log(pdfData);
+});
+
+const splitterModel = ref(14);
+const selectReport = ref<any>({ id: 1, name: "รายงานขร.1" });
+const optionsReport = ref<any>([
+  { id: 1, name: "รายงานขร.1" },
+  { id: 2, name: "รายงานขร.2" },
+  { id: 3, name: "รายงานขร.3" },
+  { id: 4, name: "รายงานขร.4" },
+]);
+const selectList = ref<any>({ id: 0, name: "เลือกกรอบการยื่นขอ" });
+const optionsList = ref<any>([
+  { id: 1, name: "list 1" },
+  { id: 2, name: "list 2" },
+]);
+const nextPage = () => {
+  if (page.value < numOfPages.value) {
+    page.value++;
+  }
+};
+const backPage = () => {
+  if (page.value !== 1) {
+    page.value--;
+  }
+};
+
+const backHistory = () => {
+  window.history.back();
+};
+</script>
+
+<template>
+  <div class="toptitle">
+    <q-btn
+      icon="mdi-arrow-left"
+      unelevated
+      round
+      dense
+      flat
+      color="primary"
+      class="q-mr-sm"
+      @click="backHistory"
+    />
+    รายงาน ขร.1 - ขร.4
+  </div>
+  <div>
+    <q-card flat bordered class="col-12 q-mt-sm">
+      <div class="q-pa-md q-gutter-y-md">
+        <q-toolbar style="padding: 0" >
+          <q-select
+            class="q-mr-sm"
+            dense
+            outlined
+            v-model="selectReport"
+            :options="optionsReport"
+            :label="optionsReport.name"
+            option-value="id"
+            option-label="name"
+          />
+          <q-select
+            dense
+            outlined
+            v-model="selectList"
+            :options="optionsList"
+            :label="optionsList.name"
+            option-value="id"
+            option-label="name"
+          />
+          <q-space />
+          <div class="q-pa-ms q-gutter-sm" style="padding: 0">
+            <q-btn outline color="primary" icon="download" label="ดาวน์โหลด" />
+            <q-btn icon="mdi-eye" color="primary" label="แสดงรางงาน" />
+            <q-btn
+              color="primary"
+              icon="mdi-fullscreen"
+              @click="dialog = true"
+            />
+          </div>
+        </q-toolbar>
+        <q-splitter
+          v-model="splitterModel"
+          horizontal
+          style="
+            height: 70vh;
+            border: 1px solid rgb(210, 210, 210);
+            border-radius: 5px;
+          "
+          before-class="overflow-hidden disable"
+          separator-class="bg-white disabled"
+        >
+          <template v-slot:before>
+            <div class="q-pa-md">
+              <div class="row items-start items-center">
+                <div class="col">
+                  <q-btn
+                    padding="xs"
+                    icon="mdi-chevron-left"
+                    color="grey-2"
+                    text-color="grey-5"
+                    size="md"
+                    class="my-auto"
+                    @click="backPage"
+                    :disable="page == 1"
+                  />
+                </div>
+                <div class="col-12 col-md-auto">
+                  <div class="q-pa-md flex">
+                    หน้าที่ {{ page }} จาก {{ numOfPages }}
+                  </div>
+                </div>
+                <div class="col text-right">
+                  <q-btn
+                    padding="xs"
+                    icon="mdi-chevron-right"
+                    color="grey-2"
+                    text-color="grey-5"
+                    size="md"
+                    @click="nextPage"
+                    :disable="page === numOfPages"
+                  />
+                </div>
+              </div>
+            </div>
+          </template>
+          <template v-slot:after>
+            <div class="q-pa-md">
+              <VuePDF ref="vuePDFRef" :pdf="pdfSrc" :page="page" fit-parent />
+            </div>
+          </template>
+          <template v-slot:default>
+            <div class="q-pa-md">
+              <div class="row items-start items-center">
+                <div class="col">
+                  <q-btn
+                    padding="xs"
+                    icon="mdi-chevron-left"
+                    color="grey-2"
+                    text-color="grey-5"
+                    size="md"
+                    class="my-auto"
+                    @click="backPage"
+                    :disable="page == 1"
+                  />
+                </div>
+                <div class="col-12 col-md-auto">
+                  <div class="q-pa-md flex">
+                    หน้าที่ {{ page }} จาก {{ numOfPages }}
+                  </div>
+                </div>
+                <div class="col text-right">
+                  <q-btn
+                    padding="xs"
+                    icon="mdi-chevron-right"
+                    color="grey-2"
+                    text-color="grey-5"
+                    size="md"
+                    @click="nextPage"
+                    :disable="page === numOfPages"
+                  />
+                </div>
+              </div>
+            </div>
+          </template>
+        </q-splitter>
+      </div>
+    </q-card>
+  </div>
+
+  <!-- Dialog Full Screen -->
+  <q-dialog
+    v-model="dialog"
+    persistent
+    :maximized="true"
+    transition-show="slide-up"
+    transition-hide="slide-down"
+  >
+    <q-card class="bg-white">
+      <div class="flex justify-end items-center align-center q-mr-md q-mt-sm">
+        <q-btn
+          icon="close"
+          unelevated
+          round
+          dense
+          style="color: #ff8080; background-color: #ffdede"
+          size="12px"
+          v-close-popup
+        />
+      </div>
+      <div class="q-pa-md">
+        <div class="row items-start items-center">
+          <div class="col">
+            <q-btn
+              padding="xs"
+              icon="mdi-chevron-left"
+              color="grey-2"
+              text-color="grey-5"
+              size="md"
+              class="my-auto"
+              @click="backPage"
+              :disable="page == 1"
+            />
+          </div>
+          <div class="col-12 col-md-auto">
+            <div class="q-pa-md flex">
+              หน้าที่ {{ page }} จาก {{ numOfPages }}
+            </div>
+          </div>
+          <div class="col text-right">
+            <q-btn
+              padding="xs"
+              icon="mdi-chevron-right"
+              color="grey-2"
+              text-color="grey-5"
+              size="md"
+              @click="nextPage"
+              :disable="page === numOfPages"
+            />
+          </div>
+        </div>
+        <div class="row items- items-center">
+          <VuePDF ref="vuePDFRef" :pdf="pdfSrc" :page="page" fit-parent />
+        </div>
+        <div class="row items- items-end">
+          <div class="col">
+            <q-btn
+              padding="xs"
+              icon="mdi-chevron-left"
+              color="grey-2"
+              text-color="grey-5"
+              size="md"
+              class="my-auto"
+              @click="backPage"
+              :disable="page == 1"
+            />
+          </div>
+          <div class="col-12 col-md-auto">
+            <div class="q-pa-md flex">
+              หน้าที่ {{ page }} จาก {{ numOfPages }}
+            </div>
+          </div>
+          <div class="col text-right">
+            <q-btn
+              padding="xs"
+              icon="mdi-chevron-right"
+              color="grey-2"
+              text-color="grey-5"
+              size="md"
+              @click="nextPage"
+              :disable="page === numOfPages"
+            />
+          </div>
+        </div>
+      </div>
+    </q-card>
+  </q-dialog>
+</template>
+
+<style lang="scss" scope>
+.disabled {
+  pointer-events: none;
+}
+</style>

src/modules/07_insignia/interface/request/Main.ts

@@ -1 +1,9 @@
-export type {};
+interface FormProprsalsRound {
+  id: number;
+  name: string;
+  year: number;
+  startDate: number;
+  endDate: number;
+  status: string;
+}
+export type { FormProprsalsRound };

src/modules/07_insignia/router.ts

@@ -3,6 +3,17 @@
  */
 
 const Main = () => import("@/modules/07_insignia/views/Main.vue");
+const ReportView = () =>
+  import("../07_insignia/components/report/ReportView.vue");
+const report_01 = () =>
+  import("../07_insignia/components/report/Report_01.vue");
+const RecordInsignia = () =>
+  import("@/modules/07_insignia/components/RecordInsignia.vue");
+const Coin = () => import("@/modules/07_insignia/components/Coin.vue");
+const insigniaProposals = () =>
+  import("@/modules/07_insignia/components/1_Proposals/listProposals.vue");
+const roundAdd = () =>
+  import("@/modules/07_insignia/components/1_Proposals/addProposals.vue");
 
 export default [
   {
@@ -11,7 +22,68 @@ export default [
     component: Main,
     meta: {
       Auth: true,
-      Key: [7],
+      Key: [8],
+      Role: "insignia",
+    },
+  },
+  {
+    path: "/insignia/round-proposals",
+    name: "insigniaProposals",
+    component: insigniaProposals,
+    meta: {
+      Auth: true,
+      Key: [8.1],
+      Role: "insignia",
+    },
+  },
+  {
+    path: "/insignia/round-add",
+    name: "roundAdd",
+    component: roundAdd,
+    meta: {
+      Auth: true,
+      Key: [8.1],
+      Role: "insignia",
+    },
+  },
+
+  {
+    path: "/insignia/record",
+    name: "insigniaRecord",
+    component: RecordInsignia,
+    meta: {
+      Auth: true,
+      Key: [8.4],
+      Role: "insignia",
+    },
+  },
+  {
+    path: "/insignia/coin",
+    name: "coin",
+    component: Coin,
+    meta: {
+      Auth: true,
+      Key: [8],
+      Role: "insignia",
+    },
+  },
+  {
+    path: "/insignia/report",
+    name: "insigniaReport",
+    component: ReportView,
+    meta: {
+      Auth: true,
+      Key: [8.5],
+      Role: "insignia",
+    },
+  },
+  {
+    path: "/insignia/report/report-01",
+    name: "report-report-01",
+    component: report_01,
+    meta: {
+      Auth: true,
+      Key: [8.5],
       Role: "insignia",
     },
   },

src/modules/08_registryEmployee/index/Main.ts

@@ -0,0 +1 @@
+export type {};

src/modules/08_registryEmployee/request/Main.ts

@@ -0,0 +1,13 @@
+interface FormRegistryEmployee {
+  no: string;
+  name: string;
+  positionNum: string;
+  position: string;
+  path: string;
+  type: string;
+  level: string;
+  affiliation: string;
+  yearly: number;
+  pay: string;
+}
+export type { FormRegistryEmployee };

src/modules/08_registryEmployee/response/Main.ts

@@ -0,0 +1 @@
+export type {};

src/modules/08_registryEmployee/views/Main.vue

@@ -2,157 +2,173 @@
   <div class="toptitle text-dark col-12 row items-center">
     รายชื่อลูกจ้างชั่วคราว
   </div>
-    <q-card flat bordered class="q-pa-md">
+  <q-card flat bordered class="q-pa-md">
-      <div class="col-12 row items-center">
+    <div class="col-12 row items-center">
-        <q-btn flat round color="primary" @click="clickAdd" icon="mdi-plus">
+      <q-btn flat round color="primary" @click="clickAdd" icon="mdi-plus">
-          <q-tooltip>เพิ่มข้อมูล</q-tooltip>
+        <q-tooltip>เพิ่มข้อมูล</q-tooltip>
-        </q-btn>
+      </q-btn>
-        <q-space />
+      <q-space />
-        <div class="items-center" style="display: flex">
+      <div class="items-center" style="display: flex">
-          <!-- ค้นหาข้อความใน table -->
+        <!-- ค้นหาข้อความใน table -->
-          <q-input
+        <q-input
-            standout
+          standout
-            dense
-            v-model="filter"
-            ref="filterRef"
-            outlined
-            debounce="300"
-            placeholder="ค้นหา"
-            style="max-width: 200px"
-            class="q-ml-sm"
-          >
-            <template v-slot:append>
-              <q-icon v-if="filter == ''" name="search" />
-              <q-icon
-                v-if="filter !== ''"
-                name="clear"
-                class="cursor-pointer"
-                @click="resetFilter"
-              />
-            </template>
-          </q-input>
-          <!-- แสดงคอลัมน์ใน table -->
-          <q-select
-            v-model="visibleColumns"
-            :display-value="$q.lang.table.columns"
-            multiple
-            outlined
-            dense
-            :options="columns"
-            options-dense
-            option-value="name"
-            map-options
-            emit-value
-            style="min-width: 150px"
-            class="gt-xs q-ml-sm"
-          />
-        </div>
-      </div>
-      <div class="col-12 q-pt-sm">
-        <q-table
-          flat
-          bordered
           dense
-          :rows="rows"
+          v-model="filter"
-          :columns="columns"
+          ref="filterRef"
-          :visible-columns="visibleColumns"
+          outlined
-          :filter="filter"
+          debounce="300"
-          row-key="name"
+          placeholder="ค้นหา"
-          class="custom-header-table"
+          style="max-width: 200px"
-          :pagination-label="paginationLabel"
+          class="q-ml-sm"
-          v-model:pagination="pagination"
         >
-          <template v-slot:header="props">
+          <template v-slot:append>
-            <q-tr :props="props">
+            <q-icon v-if="filter == ''" name="search" />
-              <q-th v-for="col in props.cols" :key="col.name" :props="props">
+            <q-icon
-                <span class="text-weight-medium">{{ col.label }}</span>
+              v-if="filter !== ''"
-              </q-th>
+              name="clear"
-              <q-th auto-width />
+              class="cursor-pointer"
-            </q-tr>
+              @click="resetFilter"
+            />
           </template>
-          <template v-slot:body="props">
+        </q-input>
-            <q-tr :props="props" class="cursor-pointer">
+        <!-- แสดงคอลัมน์ใน table -->
-              <q-td key="no" :props="props">
+        <q-select
-                {{ props.rowIndex + 1 }}
+          v-model="visibleColumns"
-              </q-td>
+          :display-value="$q.lang.table.columns"
-              <q-td key="positionNum" :props="props">
+          multiple
-                {{ props.row.positionNum }}
+          outlined
-              </q-td>
+          dense
-              <q-td key="name" :props="props">
+          :options="columns"
-                {{ props.row.name }}
+          options-dense
-              </q-td>
+          option-value="name"
-              <q-td key="position" :props="props">
+          map-options
-                {{ props.row.position }}
+          emit-value
-              </q-td>
+          style="min-width: 150px"
-              <q-td key="path" :props="props">
+          class="gt-xs q-ml-sm"
-                {{ props.row.path }}
+        />
-              </q-td>
-              <q-td key="type" :props="props">
-                {{ props.row.type }}
-              </q-td>
-              <q-td key="level" :props="props">
-                {{ props.row.level }}
-              </q-td>
-              <q-td key="affiliation" :props="props">
-                {{ props.row.affiliation }}
-              </q-td>
-              <q-td key="yearly" :props="props">
-                {{ props.row.yearly }}
-              </q-td>
-              <q-td key="pay" :props="props">
-                {{ props.row.pay }}
-              </q-td>
-              <q-td auto-width>
-                <q-btn
-                  icon="mdi-dots-vertical"
-                  size="12px"
-                  color="grey-7"
-                  flat
-                  round
-                  dense
-                >
-                  <q-menu transition-show="jump-down" transition-hide="jump-up">
-                    <q-list dense style="min-width: 160px">
-                      <q-item
-                        clickable
-                        v-close-popup
-                        @click="editDetail(props.row)"
-                      >
-                        <q-item-section style="min-width: 0px" avatar class="q-py-sm">
-                          <q-icon color="blue" size="xs" name="mdi-account-settings" />
-                        </q-item-section>
-                        <q-item-section>กำหนดตำแหน่ง</q-item-section>
-                      </q-item>
-                      <q-separator />
-                      <q-item clickable v-close-popup @click="clickDelete('test')">
-                        <q-item-section style="min-width: 0px" avatar class="q-py-sm">
-                          <q-icon color="red" size="xs" name="mdi-delete" />
-                        </q-item-section>
-                        <q-item-section>ลบ</q-item-section>
-                      </q-item>
-
-                      <q-separator />
-                    </q-list>
-                  </q-menu>
-                </q-btn>
-              </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>
       </div>
-    </q-card>
+    </div>
+    <div class="col-12 q-pt-sm">
+      <q-table
+        flat
+        bordered
+        dense
+        :rows="rows"
+        :columns="columns"
+        :visible-columns="visibleColumns"
+        :filter="filter"
+        row-key="name"
+        class="custom-header-table"
+        :pagination-label="paginationLabel"
+        v-model:pagination="pagination"
+      >
+        <template v-slot:header="props">
+          <q-tr :props="props">
+            <q-th v-for="col in props.cols" :key="col.name" :props="props">
+              <span class="text-weight-medium">{{ col.label }}</span>
+            </q-th>
+            <q-th auto-width />
+          </q-tr>
+        </template>
+        <template v-slot:body="props">
+          <q-tr :props="props" class="cursor-pointer">
+            <q-td key="no" :props="props">
+              {{ props.rowIndex + 1 }}
+            </q-td>
+            <q-td key="positionNum" :props="props">
+              {{ props.row.positionNum }}
+            </q-td>
+            <q-td key="name" :props="props">
+              {{ props.row.name }}
+            </q-td>
+            <q-td key="position" :props="props">
+              {{ props.row.position }}
+            </q-td>
+            <q-td key="path" :props="props">
+              {{ props.row.path }}
+            </q-td>
+            <q-td key="type" :props="props">
+              {{ props.row.type }}
+            </q-td>
+            <q-td key="level" :props="props">
+              {{ props.row.level }}
+            </q-td>
+            <q-td key="affiliation" :props="props">
+              {{ props.row.affiliation }}
+            </q-td>
+            <q-td key="yearly" :props="props">
+              {{ props.row.yearly }}
+            </q-td>
+            <q-td key="pay" :props="props">
+              {{ props.row.pay }}
+            </q-td>
+            <q-td auto-width>
+              <q-btn
+                icon="mdi-dots-vertical"
+                size="12px"
+                color="grey-7"
+                flat
+                round
+                dense
+              >
+                <q-menu transition-show="jump-down" transition-hide="jump-up">
+                  <q-list dense style="min-width: 160px">
+                    <q-item
+                      clickable
+                      v-close-popup
+                      @click="editDetail(props.row)"
+                    >
+                      <q-item-section
+                        style="min-width: 0px"
+                        avatar
+                        class="q-py-sm"
+                      >
+                        <q-icon
+                          color="blue"
+                          size="xs"
+                          name="mdi-account-settings"
+                        />
+                      </q-item-section>
+                      <q-item-section>กำหนดตำแหน่ง</q-item-section>
+                    </q-item>
+                    <q-separator />
+                    <q-item
+                      clickable
+                      v-close-popup
+                      @click="clickDelete('test')"
+                    >
+                      <q-item-section
+                        style="min-width: 0px"
+                        avatar
+                        class="q-py-sm"
+                      >
+                        <q-icon color="red" size="xs" name="mdi-delete" />
+                      </q-item-section>
+                      <q-item-section>ลบ</q-item-section>
+                    </q-item>
+
+                    <q-separator />
+                  </q-list>
+                </q-menu>
+              </q-btn>
+            </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>
+    </div>
+  </q-card>
 </template>
 <script setup lang="ts">
 import { ref, onMounted } from "vue";
@@ -163,6 +179,7 @@ import { useRouter } from "vue-router";
 import http from "@/plugins/http";
 import config from "@/app.config";
 import type { treeTab } from "@/modules/05_placement/interface/index/Main";
+import { FormRegistryEmployee } from "@/modules/08_registryEmployee/request/Main.ts";
 
 const props = defineProps({
   next: {
@@ -210,93 +227,6 @@ const columnsModal = [
   },
 ];
 
-const rowsModal = [
-  {
-    no: "0ac56905-1a74-4606-a120-233340adde95",
-    name: "นางนัทธ์ เหล่าสกุล",
-    positionNum: "สกก.3",
-    position: "นักบริหาร",
-    path: "บริหาร",
-    type: "บริหาร",
-    level: "ชำนาญการพิเศษ",
-    affiliation: "ฝ่ายบริหารงานทั่วไป",
-    yearly: 2565,
-    pay: "40,000",
-  },
-  {
-    no: "0ac56905-1a74-4606-a120-233340adde95",
-    name: "นายภูวนัย ต้นทอง",
-    positionNum: "กทม.2",
-    position: "นักบริหาร",
-    path: "บริหาร",
-    type: "บริหาร",
-    level: "ชำนาญการพิเศษ",
-    affiliation: "ฝ่ายบริหารงานทั่วไป",
-    yearly: 2565,
-    pay: "35,000",
-  },
-  {
-    no: "0ac56905-1a74-4606-a120-233340adde95",
-    name: "นางปริศนา ตรีวุฒิ",
-    positionNum: "กบห.3",
-    position: "นักบริหาร",
-    path: "บริหาร",
-    type: "บริหาร",
-    level: "ชำนาญการพิเศษ",
-    affiliation: "ฝ่ายบริหารงานทั่วไป",
-    yearly: 2565,
-    pay: "38,000",
-  },
-  {
-    no: "0ac56905-1a74-4606-a120-233340adde95",
-    name: "นางเมษา เกียรติบวรสกุล ",
-    positionNum: "สกก.3",
-    position: "นักบริหาร",
-    path: "บริหาร",
-    type: "บริหาร",
-    level: "ชำนาญการพิเศษ",
-    affiliation: "ฝ่ายบริหารงานทั่วไป",
-    yearly: 2565,
-    pay: "25,000",
-  },
-  {
-    no: "0ac56905-1a74-4606-a120-233340adde95",
-    name: "นางพริมา พงศ์พินิจ",
-    positionNum: "สกก.3",
-    position: "นักบริหาร",
-    path: "บริหาร",
-    type: "บริหาร",
-    level: "ชำนาญการพิเศษ",
-    affiliation: "ฝ่ายบริหารงานทั่วไป",
-    yearly: 2565,
-    pay: "30,000",
-  },
-  {
-    no: "0ac56905-1a74-4606-a120-233340adde95",
-    name: "นางพรพักตร์ พาใจขวัญ",
-    positionNum: "สกก.3",
-    position: "นักบริหาร",
-    path: "บริหาร",
-    type: "บริหาร",
-    level: "ชำนาญการพิเศษ",
-    affiliation: "ฝ่ายบริหารงานทั่วไป",
-    yearly: 2565,
-    pay: "40,000",
-  },
-  {
-    no: "0ac56905-1a74-4606-a120-233340adde95",
-    name: "นางชลธิมา คมสกุล ",
-    positionNum: "สกก.3",
-    position: "นักบริหาร",
-    path: "บริหาร",
-    type: "บริหาร",
-    level: "ชำนาญการพิเศษ",
-    affiliation: "ฝ่ายบริหารงานทั่วไป",
-    yearly: 2565,
-    pay: "15,000",
-  },
-];
-
 const paginationModal = ref({
   sortBy: "desc",
   descending: false,
@@ -390,7 +320,7 @@ const columns = ref<QTableProps["columns"]>([
   },
 ]);
 
-const rows = [
+const rows = ref<FormRegistryEmployee[]>([
   {
     no: "0ac56905-1a74-4606-a120-233340adde95",
     name: "นางนัทธ์ เหล่าสกุล",
@@ -535,7 +465,7 @@ const rows = [
     yearly: 2565,
     pay: "20,250",
   },
-];
+]);
 
 onMounted(async () => {
   await nodeTree();

src/modules/09_coin/components/Coin.vue

@@ -0,0 +1,516 @@
+<template>
+  <div class="toptitle text-dark col-12 row items-center">
+    <!-- <q-btn
+        icon="mdi-arrow-left"
+        unelevated
+        round
+        dense
+        flat
+        color="primary"
+        class="q-mr-sm"
+        @click="router.go(-1)"
+      /> -->
+    ประวัติการยื่นขอพระราชทานเหรียญจักรพรรดิมาลา
+  </div>
+  <q-card flat bordered class="col-12 q-my-md q-mt-sm rounded-borders">
+    <q-tabs
+      v-model="tab"
+      align="left"
+      class="bg-white text-grey"
+      active-color="primary"
+      indicator-color="primary"
+    >
+      <q-tab name="yes" label="คนที่ยื่นขอ" />
+      <q-tab name="no" label="คนที่ไม่ยื่นขอ" />
+    </q-tabs>
+    <q-separator />
+    <div class="q-py-md q-px-lg">
+      <!-- <div>
+        <label class="q-mr-sm">รอบ</label>
+        <q-btn
+          flat
+          round
+          de
+          color="grey"
+          icon="mdi-menu-left"
+          :class="getArrow(arrow)"
+          @click="clickRound"
+        />
+      </div>
+      <Transition>
+        <div v-if="arrow" class="bg-base rounded-borders q-pa-md">
+          <div class="row col-12 q-col-gutter-x-lg q-col-gutter-y-md">
+            <div class="col-xs-6 col-md-2">
+              <datepicker
+                menu-class-name="modalfix"
+                v-model="dateGoverment"
+                :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
+                    outlined
+                    dense
+                    class="full-width datepicker bg-white"
+                    :model-value="
+                      dateGoverment != null ? date2Thai(dateGoverment) : null
+                    "
+                    :label="`${'วันที่ประกาศราชกิจจานุเบกษา'}`"
+                  >
+                    <template v-slot:prepend>
+                      <q-icon
+                        name="event"
+                        class="cursor-pointer"
+                        style="color: var(--q-primary)"
+                      >
+                      </q-icon>
+                    </template>
+                  </q-input>
+                </template>
+              </datepicker>
+            </div>
+            <div class="col-xs-6 col-md-2">
+              <datepicker
+                menu-class-name="modalfix"
+                v-model="dateReceiver"
+                :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
+                    outlined
+                    dense
+                    class="full-width datepicker bg-white"
+                    :model-value="
+                      dateReceiver != null ? date2Thai(dateReceiver) : null
+                    "
+                    :label="`${'วันที่ได้รับ'}`"
+                  >
+                    <template v-slot:prepend>
+                      <q-icon
+                        name="event"
+                        class="cursor-pointer"
+                        style="color: var(--q-primary)"
+                      >
+                      </q-icon>
+                    </template>
+                  </q-input>
+                </template>
+              </datepicker>
+            </div>
+            <div class="col-xs-6 col-md-2">
+              <q-input
+                class="bg-white"
+                outlined
+                dense
+                lazy-rules
+                v-model="issue"
+                :label="`${'ฉบับ'}`"
+                hide-bottom-space
+              />
+            </div>
+            <div class="col-xs-6 col-md-2">
+              <q-input
+                class="bg-white"
+                outlined
+                dense
+                lazy-rules
+                v-model="book"
+                :label="`${'เล่มที่'}`"
+                hide-bottom-space
+              />
+            </div>
+            <div class="col-xs-6 col-md-2">
+              <q-input
+                class="bg-white"
+                outlined
+                dense
+                lazy-rules
+                v-model="volume"
+                :label="`${'เล่ม'}`"
+                hide-bottom-space
+              />
+            </div>
+            <div class="col-xs-6 col-md-2">
+              <q-input
+                class="bg-white"
+                outlined
+                dense
+                lazy-rules
+                v-model="section"
+                :label="`${'ตอนที่'}`"
+                hide-bottom-space
+              />
+            </div>
+            <div class="col-xs-12 col-md-6">
+              <q-file
+                class="bg-white"
+                outlined
+                dense
+                v-model="government"
+                label="ราชกิจจานุเบกษา"
+                hide-bottom-space
+                lazy-rules
+              >
+                <template v-slot:prepend>
+                  <q-icon name="attach_file" color="primary" />
+                </template>
+              </q-file>
+            </div>
+            <div class="col-xs-12 col-md-6">
+              <q-file
+                class="bg-white"
+                outlined
+                dense
+                v-model="document"
+                label="เอกสารประกอบ"
+                hide-bottom-space
+                lazy-rules
+              >
+                <template v-slot:prepend>
+                  <q-icon name="attach_file" color="primary" />
+                </template>
+              </q-file>
+            </div>
+          </div>
+        </div>
+      </Transition> -->
+      <div :class="marginTop(arrow)">
+        <div class="col-12 row q-pb-sm items-center">
+          <selector
+            outlined
+            dense
+            lazy-rules
+            v-model="capYears"
+            hide-bottom-space
+            :label="`${'ปีงบประมาณ'}`"
+            emit-value
+            map-options
+            option-label="name"
+            :options="capYearsOption"
+            option-value="id"
+            use-input
+            input-debounce="0"
+            style="min-width: 150px"
+            class="gt-xs q-ml-sm"
+            @filter="(inputValue:string,
+                        doneFn:Function) => filterSelector(inputValue, doneFn,'capYearsOption'
+                        ) "
+          />
+          <q-space />
+          <div class="items-center" style="display: flex">
+            <!-- ค้นหาข้อความใน table -->
+            <q-input
+              standout
+              dense
+              v-model="filter"
+              ref="filterRef"
+              outlined
+              debounce="300"
+              placeholder="ค้นหา"
+              style="max-width: 200px"
+              class="q-ml-sm"
+            >
+              <template v-slot:append>
+                <q-icon v-if="filter == ''" name="search" />
+                <q-icon
+                  v-if="filter !== ''"
+                  name="clear"
+                  class="cursor-pointer"
+                  @click="resetFilter"
+                />
+              </template>
+            </q-input>
+            <!-- แสดงคอลัมน์ใน table -->
+            <q-select
+              v-model="visibleColumns"
+              :display-value="$q.lang.table.columns"
+              multiple
+              outlined
+              dense
+              :options="columns"
+              options-dense
+              option-value="name"
+              map-options
+              emit-value
+              style="min-width: 150px"
+              class="gt-xs q-ml-sm"
+            />
+          </div>
+        </div>
+        <d-table
+          :rows="rows"
+          :columns="columns"
+          :visible-columns="visibleColumns"
+          :filter="filter"
+          row-key="name"
+        >
+          <template v-slot:body-cell="props">
+            <q-td :props="props">
+              <div v-if="props.col.name == 'no'">
+                {{ props.rowIndex + 1 }}
+              </div>
+
+              <div v-else>
+                {{ props.value }}
+              </div>
+            </q-td>
+          </template>
+        </d-table>
+      </div>
+    </div>
+  </q-card>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted } from "vue";
+// import { useRouter } from "vue-router";
+import { useCounterMixin } from "@/stores/mixin";
+
+import type { DataOption } from "@/modules/05_placement/interface/index/Main";
+import type { QTableProps, QInput } from "quasar";
+
+// const router = useRouter();
+const mixin = useCounterMixin();
+const { date2Thai } = mixin;
+
+const tab = ref<string>("yes");
+const arrow = ref<boolean>(false);
+
+// const dateGoverment = ref<Date>(new Date());
+// const dateReceiver = ref<Date>(new Date());
+// const issue = ref<string>("");
+// const book = ref<string>("");
+// const volume = ref<string>("");
+// const section = ref<string>("");
+// const government = ref<any>(null);
+// const document = ref<any>(null);
+
+const capYears = ref<string>("");
+const capYearsOption = ref<DataOption[]>([]);
+const capYearsOptionFilter = ref<DataOption[]>([]);
+
+const visibleColumns = ref<String[]>([
+  "no",
+  "cardid",
+  "name",
+  "position",
+  "range",
+  "salary",
+  "zone",
+  "school",
+  "date",
+]);
+const filterRef = ref<QInput>();
+const filter = ref<string>("");
+const columns = ref<QTableProps["columns"]>([
+  {
+    name: "no",
+    align: "left",
+    label: "ลำดับ",
+    field: "no",
+    sortable: true,
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "cardid",
+    align: "left",
+    label: "เลขประจำตัวประชาชน",
+    field: "cardid",
+    sortable: true,
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "name",
+    align: "left",
+    label: "ชื่อ - นามสกุล",
+    field: "name",
+    sortable: true,
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "position",
+    align: "left",
+    label: "ตำแหน่ง",
+    field: "position",
+    sortable: true,
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "range",
+    align: "left",
+    label: "อันดับ",
+    field: "range",
+    sortable: true,
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "salary",
+    align: "left",
+    label: "เงินเดือน",
+    field: "salary",
+    sortable: true,
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "zone",
+    align: "left",
+    label: "เขต",
+    field: "zone",
+    sortable: true,
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "school",
+    align: "left",
+    label: "โรงเรียน",
+    field: "school",
+    sortable: true,
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "date",
+    align: "left",
+    label: "วันที่ยื่นขอ",
+    field: "date",
+    sortable: true,
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+]);
+const rows = ref<any>([
+  {
+    no: "1",
+    cardid: "1XXXXXXXXXXXX",
+    name: "นางสาวรัชภรณ์ ภักดี",
+    position: "กกก",
+    range: "1",
+    salary: "XXXXXX",
+    zone: "1",
+    school: "โรงเรียน",
+    date: date2Thai(new Date()),
+  },
+  {
+    no: "2",
+    cardid: "1XXXXXXXXXXXX",
+    name: "นางสาวรัชภรณ์ ภักดี",
+    position: "กกก",
+    range: "1",
+    salary: "XXXXXX",
+    zone: "1",
+    school: "โรงเรียน",
+    date: date2Thai(new Date()),
+  },
+  {
+    no: "3",
+    cardid: "1XXXXXXXXXXXX",
+    name: "นางสาวรัชภรณ์ ภักดี",
+    position: "กกก",
+    range: "1",
+    salary: "XXXXXX",
+    zone: "1",
+    school: "โรงเรียน",
+    date: date2Thai(new Date()),
+  },
+]);
+
+onMounted(() => {
+  const op2: DataOption[] = [
+    { id: "1", name: "2566" },
+    { id: "2", name: "2565" },
+    { id: "3", name: "2564" },
+  ];
+
+  capYearsOption.value = op2;
+  capYearsOptionFilter.value = op2;
+});
+
+const clickRound = () => {
+  arrow.value = !arrow.value;
+};
+
+const resetFilter = () => {
+  // reset ค่าที่ค้นหาเมื่อกดปุ่ม X ในกล่องค้นหา
+  filter.value = "";
+  filterRef.value!.focus();
+};
+
+const filterSelector = (val: any, update: Function, filtername: string) => {
+  switch (filtername) {
+    case "capYearsOption":
+      update(() => {
+        capYearsOption.value = capYearsOptionFilter.value.filter(
+          (v: DataOption) => v.name!.indexOf(val) > -1
+        );
+      });
+      break;
+
+    default:
+      break;
+  }
+};
+
+// const getArrow = (val: boolean) => {
+//   return {
+//     "arrow cursor-pointer": !val,
+//     "arrow-active cursor-pointer": val,
+//   };
+// };
+
+const marginTop = (val: boolean) => {
+  return {
+    "": !val,
+    "q-mt-md": val,
+  };
+};
+</script>
+<style lang="scss" scoped>
+.arrow {
+  transition: transform 0.5s;
+}
+
+.arrow-active {
+  transition: transform 0.5s;
+  transform: rotate(-90deg);
+}
+
+.bg-base {
+  background-color: #efefef;
+}
+
+.v-enter-active,
+.v-leave-active {
+  transition: opacity 0.5s ease;
+}
+
+.v-enter-from,
+.v-leave-to {
+  opacity: 0;
+}
+</style>

src/modules/09_coin/interface/index/Main.ts

@@ -0,0 +1 @@
+export type {};

src/modules/09_coin/interface/request/Main.ts

@@ -0,0 +1 @@
+export type {};

src/modules/09_coin/interface/response/Main.ts

@@ -0,0 +1 @@
+export type {};

src/modules/09_coin/router.ts

@@ -0,0 +1,18 @@
+/**
+ * Router เครื่องราชอิสริยาภรณ์ (insignia)
+ */
+
+const Main = () => import("@/modules/09_coin/views/Main.vue");
+
+export default [
+  {
+    path: "/coin",
+    name: "coin",
+    component: Main,
+    meta: {
+      Auth: true,
+      Key: [9],
+      Role: "coin",
+    },
+  },
+];

src/modules/09_coin/store.ts

@@ -0,0 +1,5 @@
+import { defineStore } from "pinia";
+
+export const useCoinDataStore = defineStore("coin", () => {
+  return {};
+});

src/modules/09_coin/views/Main.vue

@@ -0,0 +1,12 @@
+<script setup lang="ts"></script>
+
+<template>
+  <div class="toptitle text-dark col-12 row items-center">
+    เหรียญจักรพรรดิมาลา
+  </div>
+  <div>
+    <q-card flat bordered class="col-12 q-mt-sm"> </q-card>
+  </div>
+</template>
+
+<style lang="scss" scope></style>

src/router/index.ts

@@ -12,6 +12,7 @@ import ModulePlacement from "@/modules/05_placement/router";
 import ModuleRetirement from "@/modules/06_retirement/router";
 import ModuleInsignia from "@/modules/07_insignia/router";
 import ModuleRegistryEmployee from "@/modules/08_registryEmployee/router";
+import ModuleCoin from "@/modules/09_coin/router";
 
 // TODO: ใช้หรือไม่?
 import keycloak from "@/plugins/keycloak";
@@ -42,6 +43,7 @@ const router = createRouter({
         ...ModuleRetirement,
         ...ModuleInsignia,
         ...ModuleRegistryEmployee,
+        ...ModuleCoin,
       ],
     },
     /**

src/views/MainLayout.vue

@@ -716,7 +716,10 @@ if (keycloak.tokenParsed != null) {
                 expand-icon="mdi-chevron-down"
                 expanded-icon="mdi-chevron-up"
                 v-if="
-                  menuItem.key == 3 || menuItem.key == 5 || menuItem.key == 6
+                  menuItem.key == 3 ||
+                  menuItem.key == 5 ||
+                  menuItem.key == 6 ||
+                  menuItem.key == 8
                 "
               >
                 <template v-slot:header>
@@ -727,7 +730,7 @@ if (keycloak.tokenParsed != null) {
                       font-size="20px"
                     />
                   </q-item-section>
-                  <q-item-section >{{ menuItem.label }}</q-item-section>
+                  <q-item-section>{{ menuItem.label }}</q-item-section>
                 </template>
 
                 <!-- เมนูย่อย 2 ชั้น (สรรหา) -->
@@ -751,7 +754,9 @@ if (keycloak.tokenParsed != null) {
                         :to="{ name: `${subMenu2.path}` }"
                       >
                         <q-item-section>
-                          <q-item-label class="font-400">{{ subMenu2.label }} </q-item-label>
+                          <q-item-label class="font-400"
+                            >{{ subMenu2.label }}
+                          </q-item-label>
                         </q-item-section>
                       </q-item>
                     </q-expansion-item>
@@ -781,7 +786,9 @@ if (keycloak.tokenParsed != null) {
                   :to="{ name: `${subMenu.path}` }"
                 >
                   <q-item-section>
-                    <q-item-label class="font-400">{{ subMenu.label }}</q-item-label>
+                    <q-item-label class="font-400">{{
+                      subMenu.label
+                    }}</q-item-label>
                   </q-item-section>
                 </q-item>
               </q-expansion-item>
@@ -930,7 +937,7 @@ if (keycloak.tokenParsed != null) {
 .menuSub .q-item {
   border-radius: 0 100px 100px 0;
   margin-right: 2%;
-  font-weight: 500 ;
+  font-weight: 500;
 }
 .expan2 .q-item {
   padding-left: 10%;
@@ -938,8 +945,8 @@ if (keycloak.tokenParsed != null) {
 /* .menuSubAct {
   background: #1e2529d9;
 } */
-.font-400{
+.font-400 {
-  font-weight: 400 ;
+  font-weight: 400;
 }
 .expan2 .menuSubHover {
   padding-left: 30%;