From 85b31c2bd67c6c41192408c3c41c15073f0412c6 Mon Sep 17 00:00:00 2001
From: Thanit Konmek <thanit@frappet.com>
Date: Mon, 17 Jul 2023 14:18:31 +0700
Subject: [PATCH] =?UTF-8?q?ui=20=E0=B8=AB=E0=B8=99=E0=B9=89=E0=B8=B2?=
 =?UTF-8?q?=E0=B9=80=E0=B8=84=E0=B8=A3=E0=B8=B7=E0=B9=88=E0=B8=AD=E0=B8=87?=
 =?UTF-8?q?=E0=B8=A3=E0=B8=B2=E0=B8=8A=20,=20=20ui=20=E0=B9=80=E0=B8=AB?=
 =?UTF-8?q?=E0=B8=A3=E0=B8=B5=E0=B8=A2=E0=B8=8D=E0=B8=88=E0=B8=B1=E0=B8=81?=
 =?UTF-8?q?=E0=B8=A3=E0=B8=9E=E0=B8=A3=E0=B8=A3=E0=B8=94=E0=B8=B4=E0=B8=A1?=
 =?UTF-8?q?=E0=B8=B2=E0=B8=A5=E0=B8=B2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Table.vue                      |  88 +++
 src/main.ts                                   |   5 +
 .../components/OrderPlacement/step/step02.vue | 111 +---
 .../components/OrderPlacement/step/step03.vue |  76 +--
 src/modules/07_insignia/components/Coin.vue   | 516 ++++++++++++++++++
 .../07_insignia/components/ResultInsignia.vue | 502 +++++++++++++++++
 src/modules/07_insignia/router.ts             |  23 +
 7 files changed, 1145 insertions(+), 176 deletions(-)
 create mode 100644 src/components/Table.vue
 create mode 100644 src/modules/07_insignia/components/Coin.vue
 create mode 100644 src/modules/07_insignia/components/ResultInsignia.vue

diff --git a/src/components/Table.vue b/src/components/Table.vue
new file mode 100644
index 000000000..cc4dc9d08
--- /dev/null
+++ b/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>
diff --git a/src/main.ts b/src/main.ts
index a969335bd..2926f9112 100644
--- a/src/main.ts
+++ b/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");
diff --git a/src/modules/05_placement/components/OrderPlacement/step/step02.vue b/src/modules/05_placement/components/OrderPlacement/step/step02.vue
index c3199cf47..b25dd46c4 100644
--- a/src/modules/05_placement/components/OrderPlacement/step/step02.vue
+++ b/src/modules/05_placement/components/OrderPlacement/step/step02.vue
@@ -46,9 +46,7 @@
           />
         </div>
       </div>
-      <q-table
-        flat
-        bordered
+      <d-table
         :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">
-          <q-pagination
-            v-model="pagination.page"
-            active-color="primary"
-						color="dark"
-            :max="scope.pagesNumber"
-            :max-pages="5"
-            size="sm"
-            boundary-links
-            direction-links
-          ></q-pagination>
-        </template>
-      </q-table>
+      </d-table>
     </div>
     <q-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">
-.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>
+<style lang="scss"></style>
diff --git a/src/modules/05_placement/components/OrderPlacement/step/step03.vue b/src/modules/05_placement/components/OrderPlacement/step/step03.vue
index 3e4e299a4..8d58d929e 100644
--- a/src/modules/05_placement/components/OrderPlacement/step/step03.vue
+++ b/src/modules/05_placement/components/OrderPlacement/step/step03.vue
@@ -46,18 +46,12 @@
           />
         </div>
       </div>
-      <q-table
-        flat
-        bordered
-        dense
+      <d-table
         :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">
-          <q-pagination
-            v-model="pagination.page"
-            active-color="primary"
-						color="dark"
-            :max="scope.pagesNumber"
-            :max-pages="5"
-            size="sm"
-            boundary-links
-            direction-links
-          ></q-pagination>
-        </template>
-      </q-table>
+      </d-table>
     </div>
     <q-separator />
     <div class="flex justify-end q-pa-sm q-gutter-sm">
@@ -246,10 +228,7 @@
                   />
                 </div>
               </div>
-              <q-table
-                flat
-                bordered
-                dense
+              <d-table
                 :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">
-                  <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>
+              </d-table>
             </div>
           </div>
         </q-card-section>
@@ -717,34 +681,4 @@ const onSelected = async (id: string) => {
 
 const deleteData = async (id: string) => {};
 </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>
+<style lang="scss"></style>
diff --git a/src/modules/07_insignia/components/Coin.vue b/src/modules/07_insignia/components/Coin.vue
new file mode 100644
index 000000000..ca851d7bd
--- /dev/null
+++ b/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>
diff --git a/src/modules/07_insignia/components/ResultInsignia.vue b/src/modules/07_insignia/components/ResultInsignia.vue
new file mode 100644
index 000000000..5cae3b3c6
--- /dev/null
+++ b/src/modules/07_insignia/components/ResultInsignia.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>
diff --git a/src/modules/07_insignia/router.ts b/src/modules/07_insignia/router.ts
index 20a41a5c3..51f4b44db 100644
--- a/src/modules/07_insignia/router.ts
+++ b/src/modules/07_insignia/router.ts
@@ -3,6 +3,9 @@
  */
 
 const Main = () => import("@/modules/07_insignia/views/Main.vue");
+const ResultInsignia = () =>
+  import("@/modules/07_insignia/components/ResultInsignia.vue");
+const Coin = () => import("@/modules/07_insignia/components/Coin.vue");
 
 export default [
   {
@@ -15,4 +18,24 @@ export default [
       Role: "insignia",
     },
   },
+  {
+    path: "/insignia/result-insignia",
+    name: "result-insignia",
+    component: ResultInsignia,
+    meta: {
+      Auth: true,
+      Key: [7],
+      Role: "insignia",
+    },
+  },
+  {
+    path: "/insignia/coin",
+    name: "coin",
+    component: Coin,
+    meta: {
+      Auth: true,
+      Key: [7],
+      Role: "insignia",
+    },
+  },
 ];