From 3055a08dbaa3f71ab370dccc3a18ae8da9d7d9fb Mon Sep 17 00:00:00 2001
From: AnandaTon <125332905+anandaAiemvong@users.noreply.github.com>
Date: Tue, 8 Aug 2023 21:37:33 +0700
Subject: [PATCH] =?UTF-8?q?ui/api=20=E0=B8=A3=E0=B8=B2=E0=B8=A2=E0=B8=81?=
 =?UTF-8?q?=E0=B8=B2=E0=B8=A3=E0=B9=80=E0=B8=AB=E0=B8=A3=E0=B8=B5=E0=B8=A2?=
 =?UTF-8?q?=E0=B8=8D=E0=B8=88=E0=B8=B1=E0=B8=81=E0=B8=A3=E0=B8=9E=E0=B8=A3?=
 =?UTF-8?q?=E0=B8=A3=E0=B8=94=E0=B8=B4=E0=B8=A1=E0=B8=B2=E0=B8=A5=E0=B8=B2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/1_Proposals/addProposals.vue   |  49 +-
 .../components/1_Proposals/listProposals.vue  |   4 +
 .../components/1_Proposals/addProposals.vue   | 368 ++++++++++++++
 .../components/1_Proposals/listProposals.vue  | 468 ++++++++++++++++++
 src/modules/09_coin/router.ts                 |  34 ++
 5 files changed, 887 insertions(+), 36 deletions(-)
 create mode 100644 src/modules/09_coin/components/1_Proposals/addProposals.vue
 create mode 100644 src/modules/09_coin/components/1_Proposals/listProposals.vue

diff --git a/src/modules/07_insignia/components/1_Proposals/addProposals.vue b/src/modules/07_insignia/components/1_Proposals/addProposals.vue
index 8d90236b4..24b001041 100644
--- a/src/modules/07_insignia/components/1_Proposals/addProposals.vue
+++ b/src/modules/07_insignia/components/1_Proposals/addProposals.vue
@@ -208,7 +208,7 @@ const edit = ref<boolean>(false);
 const dateStart = ref<Date>(new Date());
 const dateEnd = ref<Date>(new Date());
 const yearly = ref<number>(new Date().getFullYear());
-const files = ref<File[]>([]);
+const files = ref<any>();
 const fileDocDataUpload = ref<File[]>([]);
 const roundInsig = ref<string>("");
 const datelast = ref<number>(1);
@@ -257,30 +257,6 @@ const updateYear = async (e: number) => {
   yearly.value = e;
 };
 
-const uploadDocData = async () => {
-  const formData = new FormData();
-  if (fileDocDataUpload.value.length > 0) {
-    fileDocDataUpload.value.forEach((file: any) => {
-      formData.append("", file);
-    });
-    showLoader();
-    await http
-      .put(config.API.RoundInsignia(id.value), formData)
-      .then((res) => {})
-      .catch((e) => {
-        messageError($q, e);
-      })
-      .finally(async () => {
-        hideLoader();
-        success($q, "บันทึกข้อมูลสำเร็จ");
-        clickBack();
-      });
-  } else {
-    success($q, "บันทึกข้อมูลสำเร็จ");
-    clickBack();
-  }
-};
-
 const editData = async (id: string) => {
   const formData = new FormData();
   formData.append("Name", roundInsig.value);
@@ -292,14 +268,15 @@ const editData = async (id: string) => {
   if (dateEnd.value !== null) {
     formData.append("endDate", dateToISO(dateEnd.value));
   }
-  formData.append("file", files.value.toString());
+  //   files.value.forEach((file: any) => {
+  //     formData.append("file", file);
+  //   });
+  formData.append("file", files.value);
   console.log(formData);
   showLoader();
   await http
     .put(config.API.editRoundInsignia(id))
-    .then(async () => {
-      await uploadDocData();
-    })
+    .then(async () => {})
     .catch((e) => {
       messageError($q, e);
     })
@@ -345,17 +322,17 @@ const addData = async () => {
   if (dateEnd.value !== null) {
     formData.append("endDate", dateToISO(dateEnd.value));
   }
-  formData.append("file", files.value.toString());
-  console.log(formData);
+  console.log(files.value);
+  //   files.value.forEach((file: any) => {
+  //     formData.append("file", file);
+  //   });
+  formData.append("file", files.value);
+  console.log(files.value);
 
   showLoader();
   await http
     .post(config.API.listRoundInsignia("insignia"), formData)
-    .then(async (res) => {
-      const data = res.data.result;
-      id.value = data.id;
-      await uploadDocData();
-    })
+    .then(async (res) => {})
     .catch((e) => {
       messageError($q, e);
     })
diff --git a/src/modules/07_insignia/components/1_Proposals/listProposals.vue b/src/modules/07_insignia/components/1_Proposals/listProposals.vue
index d40c5ec29..2c132ed72 100644
--- a/src/modules/07_insignia/components/1_Proposals/listProposals.vue
+++ b/src/modules/07_insignia/components/1_Proposals/listProposals.vue
@@ -406,6 +406,10 @@ const clickAdd = () => {
   router.push({ name: "roundAdd" });
 };
 
+const clickProposals = (id: string) => {
+  //   window.open(config.API.exportInsigniaDoc(id));
+};
+
 // ค้นหาในตาราง
 const filterKeyword = ref<string>("");
 const filterRef = ref<any>(null);
diff --git a/src/modules/09_coin/components/1_Proposals/addProposals.vue b/src/modules/09_coin/components/1_Proposals/addProposals.vue
new file mode 100644
index 000000000..d889ddd5b
--- /dev/null
+++ b/src/modules/09_coin/components/1_Proposals/addProposals.vue
@@ -0,0 +1,368 @@
+<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="clickBack"
+      />
+      {{
+        edit
+          ? "ระยะเวลาการยื่นขอพระราชทานเครื่องทานเหรียญจักรพรรดิมาลา"
+          : "เพิ่มระยะเวลาการยื่นขอพระราชทานเครื่องทานเหรียญจักรพรรดิมาลา"
+      }}
+    </div>
+    <q-form ref="myForm">
+      <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="roundCoin"
+                  label="รอบการเสนอขอพระราชทานเหรียญจักรพรรดิมาลา"
+                />
+                <datepicker
+                  menu-class-name="modalfix"
+                  v-model="yearly"
+                  class="col-2"
+                  :locale="'th'"
+                  autoApply
+                  year-picker
+                  :enableTimePicker="false"
+                  @update:modelValue="updateYear"
+                >
+                  <template #year="{ year }">{{ year + 543 }}</template>
+                  <template #year-overlay-value="{ value }">{{
+                    parseInt(value + 543)
+                  }}</template>
+                  <template #trigger>
+                    <q-input
+                      dense
+                      lazy-rules
+                      outlined
+                      :model-value="yearly + 543"
+                      :rules="[(val) => !!val || `${'กรุณาเลือกปีที่เสนอ'}`]"
+                      :label="`${'ปีที่เสนอ'}`"
+                    >
+                      <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="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="full-width datepicker"
+                      :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"
+                  @added="fileUploadDoc"
+                  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="checkSave"
+            />
+          </div>
+        </q-card>
+      </div>
+    </q-form>
+  </div>
+</template>
+<script setup lang="ts">
+import type { QTableProps } from "quasar";
+import { ref, onMounted } from "vue";
+import { useQuasar, QForm } from "quasar";
+import { useRouter, useRoute } from "vue-router";
+import { useCounterMixin } from "@/stores/mixin";
+import http from "@/plugins/http";
+import config from "@/app.config";
+
+const mixin = useCounterMixin();
+const { date2Thai, success, dateToISO, messageError, showLoader, hideLoader } =
+  mixin;
+const router = useRouter();
+const route = useRoute();
+const $q = useQuasar();
+const id = ref<string>(route.params.id as string);
+const myForm = ref<QForm | null>(null); //form data input
+const edit = ref<boolean>(false);
+const dateStart = ref<Date>(new Date());
+const dateEnd = ref<Date>(new Date());
+const yearly = ref<number>(new Date().getFullYear());
+const files = ref<any>();
+const fileDocDataUpload = ref<File[]>([]);
+const roundCoin = ref<string>("");
+const datelast = ref<number>(1);
+
+onMounted(async () => {
+  await fetchData();
+});
+
+const fetchData = async () => {
+  if (route.params.id) {
+    edit.value = true;
+    showLoader();
+    console.log(id.value);
+
+    await http
+      .get(config.API.getRoundInsignia(id.value))
+      .then((res) => {
+        const data = res.data.result;
+        //   const files = res.data.result.files;
+        id.value = data.period_id;
+        roundCoin.value = data.period_name;
+        yearly.value = data.period_year;
+        datelast.value = data.period_amount;
+        dateStart.value = new Date(data.period_start);
+        dateEnd.value = new Date(data.period_end);
+        files.value = data.period_doc;
+      })
+      .catch((e) => {
+        messageError($q, e);
+      })
+      .finally(() => {
+        hideLoader();
+      });
+  }
+};
+
+const routeName = router.currentRoute.value.name;
+
+const fileUploadDoc = async (files: any) => {
+  files.forEach((file: any) => {
+    fileDocDataUpload.value.push(file);
+  });
+};
+
+const updateYear = async (e: number) => {
+  yearly.value = e;
+};
+
+const uploadDocData = async () => {
+  const formData = new FormData();
+  if (fileDocDataUpload.value.length > 0) {
+    fileDocDataUpload.value.forEach((file: any) => {
+      formData.append("", file);
+    });
+    showLoader();
+    await http
+      .put(config.API.RoundInsignia(id.value), formData)
+      .then((res) => {})
+      .catch((e) => {
+        messageError($q, e);
+      })
+      .finally(async () => {
+        hideLoader();
+        success($q, "บันทึกข้อมูลสำเร็จ");
+        clickBack();
+      });
+  } else {
+    success($q, "บันทึกข้อมูลสำเร็จ");
+    clickBack();
+  }
+};
+
+const editData = async (id: string) => {
+  const formData = new FormData();
+  formData.append("Name", roundCoin.value);
+  formData.append("year", parseInt(yearly.value).toString());
+  formData.append("amount", datelast.value.toString());
+  if (dateStart.value !== null) {
+    formData.append("startDate", dateToISO(dateStart.value));
+  }
+  if (dateEnd.value !== null) {
+    formData.append("endDate", dateToISO(dateEnd.value));
+  }
+
+  formData.append("file", files.value);
+  console.log(formData);
+  showLoader();
+  await http
+    .put(config.API.editRoundInsignia(id))
+    .then(async () => {
+      await uploadDocData();
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(async () => {
+      hideLoader();
+    });
+  console.log(formData);
+};
+
+const checkSave = async () => {
+  if (myForm.value !== null) {
+    myForm.value.validate().then(async (success) => {
+      if (success) {
+        if (edit.value) {
+          await editData(id.value);
+        } else {
+          await addData();
+        }
+      }
+    });
+  }
+};
+
+// const sendData = () => {
+//   const valueData: any = {
+//     Name: roundInsig.value,
+//     year: year.value,
+//     Amount: datelast.value,
+//     dateStart: dateStart.value !== null ? dateToISO(dateStart.value) : null,
+//     dateEnd: dateEnd.value !== null ? dateToISO(dateEnd.value) : null,
+//   };
+//   return valueData;
+// };
+
+const addData = async () => {
+  const formData = new FormData();
+  formData.append("name", roundCoin.value);
+  formData.append("year", parseInt(yearly.value).toString());
+  formData.append("amount", datelast.value.toString());
+  if (dateStart.value !== null) {
+    formData.append("startDate", dateToISO(dateStart.value));
+  }
+  if (dateEnd.value !== null) {
+    formData.append("endDate", dateToISO(dateEnd.value));
+  }
+  //   formData.append("file", files.value[0]);
+  //   console.log(formData);
+  formData.append("file", files.value);
+  showLoader();
+  await http
+    .post(config.API.listRoundInsignia("coin"), formData)
+    .then(async (res) => {})
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(async () => {
+      hideLoader();
+      clickBack();
+    });
+};
+
+const clickBack = () => {
+  router.push({ name: "coinProposals" });
+};
+</script>
diff --git a/src/modules/09_coin/components/1_Proposals/listProposals.vue b/src/modules/09_coin/components/1_Proposals/listProposals.vue
new file mode 100644
index 000000000..d9d5793b9
--- /dev/null
+++ b/src/modules/09_coin/components/1_Proposals/listProposals.vue
@@ -0,0 +1,468 @@
+<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" @click="clickEdit(props.row)">
+                {{ props.row.round }}
+              </q-td>
+              <q-td key="year" :props="props" @click="clickEdit(props.row)">
+                {{ props.row.year }}
+              </q-td>
+              <q-td
+                key="startDate"
+                :props="props"
+                @click="clickEdit(props.row)"
+              >
+                {{ props.row.startDate }}
+              </q-td>
+              <q-td key="endDate" :props="props" @click="clickEdit(props.row)">
+                {{ props.row.endDate }}
+              </q-td>
+              <q-td key="status" :props="props" @click="clickEdit(props.row)">
+                <q-icon
+                  v-if="props.row.status == 'ยังไม่ได้เสนอ'"
+                  name="mdi-close"
+                  color="grey-5"
+                  class="text-h5"
+                  @click="clickEdit(props.row)"
+                />
+                <q-icon
+                  v-else
+                  name="mdi-check"
+                  color="positive"
+                  class="text-h5"
+                  @click="clickEdit(props.row)"
+                />
+              </q-td>
+              <q-td key="statusRoyal" :props="props">
+                <q-icon
+                  v-if="props.row.statusRoyal == 'ยังไม่ได้เสนอ'"
+                  name="mdi-timer-sand"
+                  color="orange"
+                  class="text-h5"
+                  @click="clickEdit(props.row)"
+                />
+                <q-icon
+                  v-else
+                  name="mdi-check"
+                  color="positive"
+                  class="text-h5"
+                  @click="clickEdit(props.row)"
+                />
+              </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, onMounted } from "vue";
+import type { QTableProps } from "quasar";
+import router from "@/router";
+import { useCounterMixin } from "@/stores/mixin";
+import { useQuasar } from "quasar";
+import type { FormProprsalsRound } from " @/modules/07_insignia/interface/request/Main.ts";
+import { useRoute } from "vue-router";
+import config from "@/app.config";
+
+import http from "@/plugins/http";
+
+const mixin = useCounterMixin();
+const {
+  date2Thai,
+  success,
+  messageError,
+  statusLeave,
+  dialogMessage,
+  dateToISO,
+  showLoader,
+  hideLoader,
+} = mixin;
+const route = useRoute();
+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",
+  "statusRoyal",
+]); //ค้นหา คอลัมน์ คอลัมน์ที่แสดง
+
+// หัวตาราง
+const columns = ref<QTableProps["columns"]>([
+  {
+    name: "round",
+    align: "left",
+    label: "รอบการเสนอขอพระราชทานเหรียญจักรพรรดิมาลา",
+    sortable: true,
+    field: "no",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "year",
+    align: "left",
+    label: "ปีที่เสนอ",
+    sortable: true,
+    field: "name",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "startDate",
+    align: "left",
+    label: "วันที่เริ่มต้น",
+    sortable: true,
+    field: "position",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    // sort: (a: string, b: string) =>
+    //   a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "endDate",
+    align: "left",
+    label: "วันที่สิ้นสุด",
+    sortable: true,
+    field: "level",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    // sort: (a: string, b: string) =>
+    //   a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "status",
+    align: "left",
+    label: "สถานะ",
+    sortable: true,
+    field: "institution",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+]);
+
+// ข้อมูลตาราง (จำลอง)
+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: "เสนอเเล้ว",
+  },
+]);
+
+onMounted(async () => {
+  await fetchData();
+});
+
+const fetchData = async () => {
+  rows.value = [];
+  showLoader();
+  await http
+    .get(config.API.listRoundInsignia("coin"))
+    .then((res) => {
+      const data = res.data.result;
+      console.log(data);
+      data.map((e: any) => {
+        rows.value.push({
+          id: e.period_id,
+          round: e.period_name,
+          year: e.period_year,
+          amount: e.period_amount,
+          startDate:
+            e.period_start == null ? null : date2Thai(new Date(e.period_start)),
+          endDate:
+            e.period_end == null ? null : date2Thai(new Date(e.period_end)),
+          status: e.period_status,
+        });
+      });
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+};
+
+const clickEdit = (col: any) => {
+  router.push(`/coin/round-add/${col.id}`);
+};
+
+const clickProposals = (id: string) => {
+  //   window.open(config.API.exportDisablePassExamList(id));
+};
+
+// หัวตาราง2
+const clickDelete = (id: string) => {
+  $q.dialog({
+    title: "ยืนยันการลบข้อมูล",
+    message: "ต้องการลบข้อมูลนี้ใช่หรือไม่?",
+    cancel: {
+      flat: true,
+      color: "negative",
+    },
+    persistent: true,
+  })
+    .onOk(async () => {
+      showLoader();
+      await http
+        .delete(config.API.RoundInsignia(id))
+        .then((res) => {
+          success($q, "ลบข้อมูลการสอบสำเร็จ");
+          fetchData();
+        })
+        .catch((e) => {
+          messageError($q, e);
+        })
+        .finally(() => {
+          hideLoader();
+        });
+    })
+    .onCancel(() => {})
+    .onDismiss(() => {});
+};
+
+const clickAdd = () => {
+  router.push({ name: "coinRoundAdd" });
+};
+
+// ค้นหาในตาราง
+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>
diff --git a/src/modules/09_coin/router.ts b/src/modules/09_coin/router.ts
index d555454b2..ede52ede8 100644
--- a/src/modules/09_coin/router.ts
+++ b/src/modules/09_coin/router.ts
@@ -4,6 +4,10 @@
 
 const Main = () => import("@/modules/09_coin/views/Main.vue");
 const CoinHistory = () => import("@/modules/09_coin/components/Coin.vue");
+const coinProposals = () =>
+  import("@/modules/09_coin/components/1_Proposals/listProposals.vue");
+const coinRoundAdd = () =>
+  import("@/modules/09_coin/components/1_Proposals/addProposals.vue");
 
 export default [
   {
@@ -16,6 +20,36 @@ export default [
       Role: "coin",
     },
   },
+  {
+    path: "/coin/round-proposals",
+    name: "coinProposals",
+    component: coinProposals,
+    meta: {
+      Auth: true,
+      Key: [8.2],
+      Role: "coin",
+    },
+  },
+  {
+    path: "/coin/round-add",
+    name: "coinRoundAdd",
+    component: coinRoundAdd,
+    meta: {
+      Auth: true,
+      Key: [8.2],
+      Role: "coin",
+    },
+  },
+  {
+    path: "/coin/round-add/:id",
+    name: "coinRoundEdit",
+    component: coinRoundAdd,
+    meta: {
+      Auth: true,
+      Key: [8.2],
+      Role: "coin",
+    },
+  },
   {
     path: "/coin/history",
     name: "coinHistory",