From e83b1671d9d74a7fbbc81b02163c9b833e006843 Mon Sep 17 00:00:00 2001
From: puriphatt <puriphat@frappet.com>
Date: Wed, 13 Mar 2024 18:05:32 +0700
Subject: [PATCH] =?UTF-8?q?=E0=B8=97=E0=B8=B0=E0=B9=80=E0=B8=9A=E0=B8=B5?=
 =?UTF-8?q?=E0=B8=A2=E0=B8=99=E0=B8=9B=E0=B8=A3=E0=B8=B0=E0=B8=A7=E0=B8=B1?=
 =?UTF-8?q?=E0=B8=95=E0=B8=B4:=20=E0=B9=80=E0=B8=84=E0=B8=A3=E0=B8=B7?=
 =?UTF-8?q?=E0=B9=88=E0=B8=AD=E0=B8=87=E0=B8=A3=E0=B8=B2=E0=B8=8A=E0=B8=AF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../detail/Achievement/03_Insignia.vue        | 1159 ++++++++++++++++-
 .../04_registryNew/interface/index/Main.ts    |   30 +-
 .../interface/request/Insignia.ts             |   40 +
 .../interface/response/Insignia.ts            |   22 +
 4 files changed, 1239 insertions(+), 12 deletions(-)
 create mode 100644 src/modules/04_registryNew/interface/request/Insignia.ts
 create mode 100644 src/modules/04_registryNew/interface/response/Insignia.ts

diff --git a/src/modules/04_registryNew/components/detail/Achievement/03_Insignia.vue b/src/modules/04_registryNew/components/detail/Achievement/03_Insignia.vue
index c5d57415b..96e10e6b5 100644
--- a/src/modules/04_registryNew/components/detail/Achievement/03_Insignia.vue
+++ b/src/modules/04_registryNew/components/detail/Achievement/03_Insignia.vue
@@ -1,6 +1,1159 @@
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import { onMounted, ref, watch, useAttrs } from "vue";
+import { useQuasar } from "quasar";
+import type { QTableProps } from "quasar";
+import http from "@/plugins/http";
+import config from "@/app.config";
+
+import { useCounterMixin } from "@/stores/mixin";
+import HistoryTable from "@/components/TableHistory.vue";
+import DialogHeader from "@/components/DialogHeader.vue";
+import type {
+  RequestItemsObject,
+  Columns,
+  DataProps,
+} from "@/modules/04_registryNew/interface/request/Insignia";
+
+import type {
+  DataOption,
+  DataOptionInsignia,
+  InsigniaOps,
+  Pagination,
+} from "@/modules/04_registryNew/interface/index/Main";
+
+const $q = useQuasar();
+const attrs = ref<any>(useAttrs());
+const mixin = useCounterMixin();
+const {
+  date2Thai,
+  success,
+  dateToISO,
+  messageError,
+  typeChangeName,
+  dialogMessage,
+  showLoader,
+  hideLoader,
+} = mixin;
+
+const year = ref<number | null>(0);
+const receiveDate = ref<Date | string | null>();
+const insigniaId = ref<string>("");
+const insigniaType = ref<string>();
+const no = ref<string>();
+const issue = ref<string>();
+const volumeNo = ref<string>();
+const volume = ref<string>();
+const section = ref<string>();
+const page = ref<string>();
+const dateAnnounce = ref<Date | null | string>(null);
+const refCommandNo = ref<string>();
+const refCommandDate = ref<Date | null | string>();
+const editRow = ref<boolean>(false);
+const note = ref<string>();
+
+const myForm = ref<any>();
+const edit = ref<boolean>(false);
+const modal = ref<boolean>(false);
+const modelView = ref<string>("table");
+const filterSearch = ref("");
+const filterHistory = ref<string>("");
+const modalHistory = ref<boolean>(false);
+const rowsHistory = ref<RequestItemsObject[]>([]);
+const tittleHistory = ref<string>("ประวัติแก้ไขเครื่องราชอิสริยาภรณ์");
+
+const Ops = ref<InsigniaOps>({
+  insigniaOptions: [],
+});
+const OpsFilter = ref<InsigniaOps>({
+  insigniaOptions: [],
+});
+
+// mock data
+const rows = ref<any>([
+  {
+    id: "08dbc95b-7d2d-4a33-8c2c-426845b1d14e",
+    insignia: "จัตุรถาภรณ์ช้างเผือก",
+    insigniaId: "08db721b-c7f9-40c5-85f7-7c2c6d0eceb9",
+    insigniaType: "ชั้นต่ำกว่าสายสะพาย",
+    year: 2025,
+    no: "1",
+    issue: "1",
+    volumeNo: "1",
+    volume: null,
+    section: "1",
+    page: "1",
+    receiveDate: new Date("2023-10-10T00:00:00"),
+    dateAnnounce: new Date("2023-10-10T00:00:00"),
+    refCommandNo: "1",
+    refCommandDate: null,
+    createdFullName: "System Administrator",
+    createdAt: new Date("2023-10-10T13:38:18.177967"),
+    note: "1234dd",
+  },
+  {
+    id: "08dbc95b-7d2d-4a33-8c2c-426845b1d14e",
+    insignia: "จัตุรถาภรณ์ช้างเผือก",
+    insigniaId: "91a7322d-29f7-4d14-8aab-d98db9251ddc",
+    insigniaType: "ชั้นต่ำกว่าสายสะพาย",
+    year: 2024,
+    no: "",
+    issue: "",
+    volumeNo: "",
+    volume: "",
+    section: "",
+    page: "",
+    receiveDate: new Date("2024-02-07T00:00:00"),
+    dateAnnounce: null,
+    refCommandNo: null,
+    refCommandDate: null,
+    createdFullName: "User Key1",
+    createdAt: new Date("2024-02-07T18:14:50.918701"),
+    note: null,
+  },
+  {
+    id: "08dbc95b-7d2d-4a33-8c2c-426845b1d14e",
+    insignia: "จัตุรถาภรณ์มงกุฎไทย",
+    insigniaId: "91a7322d-29f7-4d14-8aab-d98db9251ddc",
+    insigniaType: "ชั้นต่ำกว่าสายสะพาย",
+    year: 2016,
+    no: "",
+    issue: "",
+    volumeNo: "",
+    volume: "",
+    section: "",
+    page: "",
+    receiveDate: new Date("2016-05-02T00:00:00"),
+    dateAnnounce: null,
+    refCommandNo: null,
+    refCommandDate: null,
+    createdFullName: "สาวิตรี ศรีสมัย",
+    createdAt: new Date("2024-02-13T18:06:44.941056"),
+    note: null,
+  },
+  {
+    id: "08dbc95b-7d2d-4a33-8c2c-426845b1d14e",
+    insignia: "ตริตาภรณ์ช้างเผือก",
+    insigniaId: "08db721b-c7fd-4ec7-886a-f883ae333a8d",
+    insigniaType: "ชั้นต่ำกว่าสายสะพาย",
+    year: 2018,
+    no: "",
+    issue: "",
+    volumeNo: "",
+    volume: "",
+    section: "",
+    page: "",
+    receiveDate: new Date("2024-02-13T00:00:00"),
+    dateAnnounce: null,
+    refCommandNo: "",
+    refCommandDate: null,
+    createdFullName: "สาวิตรี ศรีสมัย",
+    createdAt: new Date("2024-02-13T18:08:49.301201"),
+    note: "a",
+  },
+]);
+
+const columns = ref<QTableProps["columns"]>([
+  {
+    name: "year",
+    align: "left",
+    label: "ปีที่ยื่นขอ",
+    sortable: true,
+    field: "year",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "receiveDate",
+    align: "left",
+    label: "วันที่ได้รับ",
+    sortable: true,
+    field: "receiveDate",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "insignia",
+    align: "left",
+    label: "ชื่อเครื่องราชฯ",
+    sortable: true,
+    field: "insignia",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "insigniaType",
+    align: "left",
+    label: "ลำดับชั้น",
+    sortable: true,
+    field: "insigniaType",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "no",
+    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: "issue",
+    align: "left",
+    label: "ราชกิจจาฯ ฉบับที่",
+    sortable: true,
+    field: "issue",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "volumeNo",
+    align: "left",
+    label: "เล่มที่",
+    sortable: true,
+    field: "volumeNo",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "volume",
+    align: "left",
+    label: "เล่ม",
+    sortable: true,
+    field: "volume",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "section",
+    align: "left",
+    label: "ตอน",
+    sortable: true,
+    field: "section",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "page",
+    align: "left",
+    label: "หน้า",
+    sortable: true,
+    field: "page",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "dateAnnounce",
+    align: "left",
+    label: "วันที่ประกาศในราชกิจจาฯ",
+    sortable: true,
+    field: "dateAnnounce",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "refCommandNo",
+    align: "left",
+    label: "เลขที่คำสั่ง",
+    sortable: true,
+    field: "refCommandNo",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "refCommandDate",
+    align: "left",
+    label: "เอกสารอ้างอิง (ลงวันที่)",
+    sortable: true,
+    field: "refCommandDate",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "note",
+    align: "left",
+    label: "หมายเหตุ",
+    sortable: true,
+    field: "note",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+]);
+
+const columnsHistory = ref<QTableProps["columns"]>([
+  {
+    name: "year",
+    align: "left",
+    label: "ปีที่ยื่นขอ",
+    sortable: true,
+    field: "year",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "receiveDate",
+    align: "left",
+    label: "ลงวันที่",
+    sortable: true,
+    field: "receiveDate",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "insignia",
+    align: "left",
+    label: "ชื่อเครื่องราชฯ",
+    sortable: true,
+    field: "insignia",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "insigniaType",
+    align: "left",
+    label: "ลำดับชั้น",
+    sortable: true,
+    field: "insigniaType",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "no",
+    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: "issue",
+    align: "left",
+    label: "ราชกิจจาฯ ฉบับที่",
+    sortable: true,
+    field: "issue",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "volumeNo",
+    align: "left",
+    label: "เล่มที่",
+    sortable: true,
+    field: "volumeNo",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "volume",
+    align: "left",
+    label: "เล่ม",
+    sortable: true,
+    field: "volume",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "section",
+    align: "left",
+    label: "ตอน",
+    sortable: true,
+    field: "section",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "page",
+    align: "left",
+    label: "หน้า",
+    sortable: true,
+    field: "page",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "dateAnnounce",
+    align: "left",
+    label: "วันที่ประกาศในราชกิจจาฯ",
+    sortable: true,
+    field: "dateAnnounce",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "refCommandNo",
+    align: "left",
+    label: "เลขที่คำสั่ง",
+    sortable: true,
+    field: "refCommandNo",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "refCommandDate",
+    align: "left",
+    label: "เอกสารอ้างอิง (ลงวันที่)",
+    sortable: true,
+    field: "refCommandDate",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "createdFullName",
+    align: "left",
+    label: "ผู้ดำเนินการ",
+    sortable: true,
+    field: "createdFullName",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "createdAt",
+    align: "left",
+    label: "วันที่แก้ไข",
+    sortable: true,
+    field: "createdAt",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+]);
+
+const visibleColumns = ref<String[]>([
+  "insignia",
+  "insigniaType",
+  "year",
+  "no",
+  "issue",
+  "volumeNo",
+  "volume",
+  "section",
+  "page",
+  "receiveDate",
+  "dateAnnounce",
+  "refCommandNo",
+  "refCommandDate",
+  "note",
+  "createdAt",
+]);
+
+const visibleColumnsHistory = ref<String[]>([
+  "insignia",
+  "insigniaType",
+  "year",
+  "no",
+  "issue",
+  "volumeNo",
+  "volume",
+  "section",
+  "page",
+  "receiveDate",
+  "dateAnnounce",
+  "refCommandNo",
+  "refCommandDate",
+  "createdFullName",
+  "createdAt",
+]);
+
+const initialPagination = ref<Pagination>({
+  rowsPerPage: 0,
+});
+
+const paginationLabel = (start: string, end: string, total: string) => {
+  return start + "-" + end + " ใน " + total;
+};
+
+function onClickOpenDialog(StatusEdit: boolean = false, data: any = []) {
+  modal.value = true;
+}
+
+const clickClose = async () => {
+  if (editRow.value == true) {
+    $q.dialog({
+      title: `ข้อมูลมีการแก้ไข`,
+      message: `ยืนยันที่จะปิดโดยไม่บันทึกใช่หรือไม่?`,
+      cancel: "ยกเลิก",
+      ok: "ยืนยัน",
+      persistent: true,
+    }).onOk(async () => {
+      myForm.value.reset()
+      // modal.value = false;
+      // next.value = false;
+      // previous.value = false;
+    });
+  } else {
+    modal.value = false;
+    // next.value = false;
+    // previous.value = false;
+  }
+};
+
+function onSubmit() {
+  myForm.value.validate().then(async (result: boolean) => {
+    if (result) {
+      // await saveData();
+      modal.value = false;
+    }
+  });
+}
+
+function filterSelector(val: any, update: Function, refData: string) {
+  switch (refData) {
+    case "insigniaOptions":
+      update(() => {
+        Ops.value.insigniaOptions = OpsFilter.value.insigniaOptions.filter(
+          (v: DataOption) => v.name.indexOf(val) > -1
+        );
+      });
+      break;
+    default:
+      break;
+  }
+}
+
+async function clickHistory(row: RequestItemsObject) {
+  modalHistory.value = true;
+  // showLoader();
+  // await http
+  //   .get(config.API.profileInsignHisId(row.id))
+  //   .then((res) => {
+  //     let data = res.data.result;
+  //     rowsHistory.value = [];
+  //     data.map((e: ResponseObject) => {
+  //       rowsHistory.value.push({
+  //         id: e.id,
+  //         insignia: e.insignia,
+  //         insigniaId: e.insigniaId,
+  //         insigniaType: e.insigniaType,
+  //         year: e.year,
+  //         no: e.no,
+  //         issue: e.issue,
+  //         volumeNo: e.volumeNo,
+  //         volume: e.volume,
+  //         section: e.section,
+  //         page: e.page,
+  //         receiveDate: new Date(e.receiveDate),
+  //         dateAnnounce: new Date(e.dateAnnounce),
+  //         refCommandNo: e.refCommandNo,
+  //         refCommandDate:
+  //           e.refCommandDate == null ? null : new Date(e.refCommandDate),
+  //         createdFullName: e.createdFullName,
+  //         createdAt: new Date(e.createdAt),
+  //       });
+  //     });
+  //   })
+  //   .catch((e) => {
+  //     messageError($q, e);
+  //   })
+  //   .finally(() => {
+  //     hideLoader();
+  //   });
+}
+
+async function fetchInsignia() {
+  showLoader();
+  await http
+    .get(config.API.insignia)
+    .then((res) => {
+      const data = res.data.result;
+      let option: DataOptionInsignia[] = [];
+      data.map((r: any) => {
+        option.push({
+          id: r.id.toString(),
+          name: r.name.toString() + ` (${r.shortName})`,
+          typeName:
+            r.insigniaType == null ? null : r.insigniaType.name.toString(),
+        });
+      });
+      Ops.value.insigniaOptions = option;
+      OpsFilter.value.insigniaOptions = option;
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+      // store.isLoad++;
+    });
+}
+
+watch(insigniaId, (count: string, prevCount: string) => {
+  const insigniaTypeFilter = Ops.value.insigniaOptions.filter(
+    (r: DataOptionInsignia) => r.id == insigniaId.value
+  );
+  if (insigniaTypeFilter[0] != null) {
+    insigniaType.value = insigniaTypeFilter[0].typeName;
+  }
+});
+
+onMounted(async () => {
+  await fetchInsignia();
+  // await fetchData();
+});
+</script>
+
 <template>
-  <div>เครื่องราชอิสริยาภรณ์</div>
+  <q-toolbar style="padding: 0px" class="text-primary">
+    <q-btn flat round dense icon="add" @click="onClickOpenDialog()">
+      <q-tooltip>เพิ่ม</q-tooltip>
+    </q-btn>
+    <q-space />
+    <q-input
+      dense
+      outlined
+      v-model="filterSearch"
+      label="ค้นหา"
+      class="q-mr-sm"
+    >
+      <template v-slot:append>
+        <q-icon name="search" />
+      </template>
+    </q-input>
+
+    <q-select
+      v-if="modelView === 'table'"
+      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="q-mr-sm"
+    />
+
+    <q-btn-toggle
+      v-model="modelView"
+      toggle-color="grey-4"
+      class="no-shadow toggle-borderd"
+      :options="[
+        { value: 'table', slot: 'table' },
+        { value: 'card', slot: 'card' },
+      ]"
+    >
+      <template v-slot:table>
+        <q-icon
+          name="format_list_bulleted"
+          size="sm"
+          :style="{
+            color: modelView === 'table' ? '#787B7C' : '#C9D3DB',
+          }"
+        />
+      </template>
+      <template v-slot:card>
+        <q-icon
+          name="mdi-view-grid-outline"
+          size="sm"
+          :style="{
+            color: modelView === 'card' ? '#787B7C' : '#C9D3DB',
+          }"
+        />
+      </template>
+    </q-btn-toggle>
+  </q-toolbar>
+
+  <div>
+    <q-table
+      flat
+      dense
+      bordered
+      virtual-scroll
+      ref="table"
+      v-bind="attrs"
+      class="custom-header-table"
+      :rows="rows"
+      :columns="columns"
+      :filter="filterSearch"
+      :rows-per-page-options="[0]"
+      :pagination="initialPagination"
+      :visible-columns="visibleColumns"
+      :pagination-label="paginationLabel"
+      :virtual-scroll-sticky-size-start="48"
+    >
+      <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
+            v-for="col in props.cols"
+            :key="col.name"
+            :props="props"
+            class="cursor-pointer"
+          >
+            <div
+              v-if="
+                col.name == 'receiveDate' ||
+                col.name == 'dateAnnounce' ||
+                col.name == 'refCommandDate'
+              "
+              class="table_ellipsis"
+            >
+              {{ col.value == null ? "-" : date2Thai(col.value) }}
+            </div>
+            <div v-else-if="col.name == 'year'" class="table_ellipsis">
+              {{ col.value + 543 }}
+            </div>
+            <div v-else class="table_ellipsis">
+              {{ col.value ? col.value : "-" }}
+            </div>
+          </q-td>
+          <q-td auto-width>
+            <q-btn
+              color="info"
+              flat
+              dense
+              round
+              size="14px"
+              icon="mdi-history"
+              @click="clickHistory(props.row)"
+            />
+          </q-td>
+        </q-tr>
+      </template>
+    </q-table>
+  </div>
+
+  <q-dialog v-model="modal" persistent>
+    <q-card style="width: 600px">
+      <q-form ref="myForm" @submit="onSubmit">
+        <DialogHeader tittle="เครื่องราชอิสริยาภรณ์" :close="clickClose" />
+        <q-separator />
+        <q-card-section class="q-p-sm">
+          <div class="row col-12 q-col-gutter-x-xs q-col-gutter-y-xs">
+            <div class="col-xs-6 col-sm-6 col-md-6">
+              <datepicker
+                autoApply
+                year-picker
+                v-model="year"
+                week-start="0"
+                menu-class-name="modalfix"
+                :locale="'th'"
+                :enableTimePicker="false"
+              >
+                <template #year="{ year }">{{ year + 543 }}</template>
+                <template #year-overlay-value="{ value }">{{
+                  parseInt(value + 543)
+                }}</template>
+                <template #trigger>
+                  <q-input
+                    dense
+                    outlined
+                    lazy-rules
+                    hide-bottom-space
+                    :model-value="year !== 0 ? (year as number) + 543:null"
+                    :rules="[
+                      (val:string) =>
+                        !!val ||
+                        `${'กรุณาเลือกปีที่ยื่นขอพระราชทานเครื่องราชฯ'}`,
+                    ]"
+                    :label="`${'ปีที่ยื่นขอพระราชทานเครื่องราชฯ'}`"
+                    @update:modelValue="() => (editRow = true)"
+                  >
+                    <template v-slot:prepend>
+                      <q-icon
+                        name="event"
+                        class="cursor-pointer"
+                        color="primary"
+                      />
+                    </template>
+                  </q-input>
+                </template>
+              </datepicker>
+            </div>
+            <div class="col-xs-6 col-sm-6 col-md-6">
+              <datepicker
+                autoApply
+                borderless
+                week-start="0"
+                menu-class-name="modalfix"
+                v-model="receiveDate"
+                :locale="'th'"
+              >
+                <template #year="{ year }">
+                  {{ year + 543 }}
+                </template>
+                <template #year-overlay-value="{ value }">
+                  {{ parseInt(value + 543) }}
+                </template>
+                <template #trigger>
+                  <q-input
+                    dense
+                    outlined
+                    for="inputDatereceive"
+                    ref="dateReceivedRef"
+                    hide-bottom-space
+                    :model-value="
+                      receiveDate != null
+                        ? date2Thai(receiveDate as Date)
+                        : null
+                    "
+                    :label="`${'วัน/เดือน/ปี ที่วันที่ได้รับ'}`"
+                    :rules="[
+                      (val) => !!val || `${'กรุณาเลือก วัน/เดือน/ปี เกิด'}`,
+                    ]"
+                    @update:modelValue="() => (editRow = true)"
+                  >
+                    <template v-slot:prepend>
+                      <q-icon
+                        name="event"
+                        class="cursor-pointer"
+                        color="primary"
+                      />
+                    </template>
+                  </q-input>
+                </template>
+              </datepicker>
+            </div>
+            <div class="col-xs-6 col-sm-6 col-md-6">
+              <selector
+                dense
+                outlined
+                use-input
+                emit-value
+                lazy-rules
+                map-options
+                hide-bottom-space
+                option-value="id"
+                input-debounce="0"
+                option-label="name"
+                v-model="insigniaId"
+                :label="`${'ชื่อเครื่องราชฯ'}`"
+                :options="Ops.insigniaOptions"
+                :rules="[(val:string) => !!val || `${'กรุณาเลือกชื่อเครื่องราชฯ'}`]"
+                @filter="(inputValue:any,
+                      doneFn:Function) => filterSelector(inputValue, doneFn,'insigniaOptions'
+                      ) "
+                @update:modelValue="() => (editRow = true)"
+              />
+            </div>
+            <div class="col-xs-6 col-sm-6 col-md-6">
+              <q-input
+                dense
+                readonly
+                outlined
+                lazy-rules
+                hide-bottom-space
+                v-model="insigniaType"
+                :label="`${'ลำดับชั้น'}`"
+                @update:modelValue="() => (editRow = true)"
+              />
+            </div>
+            <div class="col-xs-6 col-sm-6 col-md-6">
+              <q-input
+                dense
+                outlined
+                lazy-rules
+                hide-bottom-space
+                v-model="no"
+                :label="`${'ลำดับที่'}`"
+                :rules="[(val:string) => !!val || `${'กรุณากรอกลำดับที่'}`]"
+                @update:modelValue="() => (editRow = true)"
+              />
+            </div>
+            <div class="col-xs-6 col-sm-6 col-md-6">
+              <q-input
+                dense
+                outlined
+                lazy-rules
+                hide-bottom-space
+                v-model="issue"
+                :label="`${'ราชกิจจาฯ ฉบับที่'}`"
+                :rules="[(val:string) => !!val || `${'กรุณากรอกราชกิจจาฯ ฉบับที่'}`]"
+                @update:modelValue="() => (editRow = true)"
+              />
+            </div>
+            <div class="col-xs-6 col-sm-6 col-md-6">
+              <q-input
+                dense
+                outlined
+                lazy-rules
+                hide-bottom-space
+                v-model="volumeNo"
+                :label="`${'เล่มที่'}`"
+                :rules="[(val:string) => !!val || `${'กรุณากรอกเล่มที่'}`]"
+                @update:modelValue="() => (editRow = true)"
+              />
+            </div>
+            <div class="col-xs-6 col-sm-6 col-md-6">
+              <q-input
+                dense
+                outlined
+                lazy-rules
+                hide-bottom-space
+                v-model="volume"
+                :label="`${'เล่ม'}`"
+                :rules="[(val:string) => !!val || `${'กรุณากรอกเล่ม'}`]"
+                @update:modelValue="() => (editRow = true)"
+              />
+            </div>
+            <div class="col-xs-6 col-sm-6 col-md-6">
+              <q-input
+                dense
+                outlined
+                lazy-rules
+                v-model="section"
+                hide-bottom-space
+                :label="`${'ตอน'}`"
+                :rules="[(val:string) => !!val || `${'กรุณากรอกตอน'}`]"
+                @update:modelValue="() => (editRow = true)"
+              />
+            </div>
+            <div class="col-xs-6 col-sm-6 col-md-6">
+              <q-input
+                dense
+                lazy-rules
+                outlined
+                v-model="page"
+                hide-bottom-space
+                :label="`${'หน้า'}`"
+                :rules="[(val:string) => !!val || `${'กรุณากรอกหน้า'}`]"
+                @update:modelValue="() => (editRow = true)"
+              />
+            </div>
+            <div class="col-xs-6 col-sm-6 col-md-6">
+              <datepicker
+                autoApply
+                week-start="0"
+                v-model="dateAnnounce"
+                menu-class-name="modalfix"
+                :locale="'th'"
+                :enableTimePicker="false"
+              >
+                <template #year="{ year }">{{ year + 543 }}</template>
+                <template #year-overlay-value="{ value }">{{
+                  parseInt(value + 543)
+                }}</template>
+                <template #trigger>
+                  <q-input
+                    dense
+                    outlined
+                    lazy-rules
+                    hide-bottom-space
+                    :model-value="date2Thai(dateAnnounce as Date)"
+                    :label="`${'วัน/เดือน/ปี ที่ประกาศในราชกิจจาฯ'}`"
+                    :rules="[
+                      (val:string) =>
+                        !!val || `${'กรุณาเลือกวันที่ประกาศในราชกิจจาฯ'}`,
+                    ]"
+                    @update:modelValue="() => (editRow = true)"
+                  >
+                    <template v-slot:prepend>
+                      <q-icon
+                        name="event"
+                        class="cursor-pointer"
+                        color="primary"
+                      />
+                    </template>
+                    <template v-if="dateAnnounce && edit" v-slot:append>
+                      <q-icon
+                        name="cancel"
+                        @click.stop.prevent="dateAnnounce = null"
+                        class="cursor-pointer"
+                      />
+                    </template>
+                  </q-input>
+                </template>
+              </datepicker>
+            </div>
+            <div class="col-xs-6 col-sm-6 col-md-6">
+              <q-input
+                dense
+                outlined
+                lazy-rules
+                hide-bottom-space
+                v-model="refCommandNo"
+                :label="`${'เลขที่คำสั่ง'}`"
+                @update:modelValue="() => (editRow = true)"
+              >
+                <template v-slot:append>
+                  <q-icon name="mdi-file" class="cursor-pointer" />
+                </template>
+              </q-input>
+            </div>
+            <div class="col-xs-6 col-sm-6 col-md-6">
+              <datepicker
+                autoApply
+                week-start="0"
+                v-model="refCommandDate"
+                menu-class-name="modalfix"
+                :locale="'th'"
+                :enableTimePicker="false"
+              >
+                <template #year="{ year }">{{ year + 543 }}</template>
+                <template #year-overlay-value="{ value }">{{
+                  parseInt(value + 543)
+                }}</template>
+                <template #trigger>
+                  <q-input
+                    dense
+                    outlined
+                    clearable
+                    lazy-rules
+                    hide-bottom-space
+                    :borderless="!edit"
+                    :label="`${'เอกสารอ้างอิง (ลง วัน/เดือน/ปี)'}`"
+                    :model-value="
+                      date2Thai(refCommandDate as Date)
+                    "
+                    @clear="refCommandDate = ''"
+                    @update:modelValue="() => (editRow = true)"
+                  >
+                    <template v-slot:prepend>
+                      <q-icon
+                        name="event"
+                        class="cursor-pointer"
+                        color="primary"
+                      />
+                    </template>
+                    <template v-if="refCommandDate && edit" v-slot:append>
+                      <q-icon
+                        name="cancel"
+                        @click.stop.prevent="refCommandDate = null"
+                        class="cursor-pointer"
+                      />
+                    </template>
+                  </q-input>
+                </template>
+              </datepicker>
+            </div>
+            <div class="col-xs-6 col-sm-6 col-md-6">
+              <q-input
+                dense
+                outlined
+                hide-bottom-space
+                v-model="note"
+                label="หมายเหตุ"
+                @update:modelValue="() => (editRow = true)"
+              />
+            </div>
+          </div>
+        </q-card-section>
+        <q-separator />
+        <div class="text-right q-pa-sm">
+          <q-btn
+            dense
+            unelevated
+            label="บันทึก"
+            id="onSubmit"
+            type="reset"
+            color="public"
+            class="q-px-md"
+          >
+            <q-tooltip>บันทึกข้อมูล</q-tooltip>
+          </q-btn>
+        </div>
+      </q-form>
+    </q-card>
+  </q-dialog>
+
+  <history-table
+    :rows="rowsHistory"
+    :columns="columnsHistory"
+    :filter="filterHistory"
+    :visible-columns="visibleColumnsHistory"
+    v-model:modal="modalHistory"
+    v-model:inputfilter="filterHistory"
+    v-model:inputvisible="visibleColumnsHistory"
+    v-model:tittle="tittleHistory"
+  >
+    <template #columns="props">
+      <q-tr :props="props">
+        <q-td v-for="col in props.cols" :key="col.name" :props="props">
+          <div
+            v-if="
+              col.name == 'receiveDate' ||
+              col.name == 'dateAnnounce' ||
+              col.name == 'createdAt' ||
+              col.name == 'refCommandDate'
+            "
+            class="table_ellipsis"
+          >
+            {{ col.value ? date2Thai(col.value) : "-" }}
+          </div>
+          <div v-else-if="col.name == 'year'" class="table_ellipsis">
+            {{ col.value ? col.value + 543 : "-" }}
+          </div>
+          <div v-else class="table_ellipsis">
+            {{ col.value ? col.value : "-" }}
+          </div>
+        </q-td>
+      </q-tr>
+    </template>
+  </history-table>
 </template>
 
-<style scoped></style>
+<style lang="scss">
+.modalfix {
+  position: fixed !important;
+}
+</style>
diff --git a/src/modules/04_registryNew/interface/index/Main.ts b/src/modules/04_registryNew/interface/index/Main.ts
index d5dd32527..a12f04f4c 100644
--- a/src/modules/04_registryNew/interface/index/Main.ts
+++ b/src/modules/04_registryNew/interface/index/Main.ts
@@ -11,6 +11,12 @@ interface DataOption2 {
   name: string;
 }
 
+interface DataOptionInsignia {
+  id: string;
+  name: string;
+  typeName: string;
+}
+
 interface zipCodeOption {
   id: string;
   name: string;
@@ -28,6 +34,18 @@ interface InformationOps {
   employeeTypeOps: DataOption[];
 }
 
+interface AddressOps {
+  provinceOps: DataOption[];
+  districtOps: DataOption[];
+  districtCOps: DataOption[];
+  subdistrictOps: zipCodeOption[];
+  subdistrictCOps: zipCodeOption[];
+}
+
+interface InsigniaOps {
+  insigniaOptions: DataOptionInsignia[];
+}
+
 interface Information {
   cardid: string | null;
   prefix: string | null;
@@ -48,14 +66,6 @@ interface Information {
   profileType: string | null;
 }
 
-interface AddressOps {
-  provinceOps: DataOption[];
-  districtOps: DataOption[];
-  districtCOps: DataOption[];
-  subdistrictOps: zipCodeOption[];
-  subdistrictCOps: zipCodeOption[];
-}
-
 interface Address {
   address: string | null;
   provinceId: string | null;
@@ -109,9 +119,11 @@ export type {
   Pagination,
   DataOption,
   DataOption2,
+  DataOptionInsignia,
   zipCodeOption,
   InformationOps,
-  Information,
   AddressOps,
+  InsigniaOps,
+  Information,
   Address,
 };
diff --git a/src/modules/04_registryNew/interface/request/Insignia.ts b/src/modules/04_registryNew/interface/request/Insignia.ts
new file mode 100644
index 000000000..1a6266697
--- /dev/null
+++ b/src/modules/04_registryNew/interface/request/Insignia.ts
@@ -0,0 +1,40 @@
+interface DataProps {
+  row: RequestItemsObject;
+  rowIndex: number;
+}
+
+//ข้อมูล
+interface RequestItemsObject {
+  id: string;
+  insigniaType: string;
+  insignia: string;
+  insigniaId: string;
+  year: number;
+  no: string;
+  issue: string;
+  volumeNo: string;
+  volume: string;
+  section: string;
+  page: string;
+  receiveDate: Date;
+  dateAnnounce: Date|string|null;
+  refCommandNo: string;
+  refCommandDate: Date | null|string;
+  createdFullName: string;
+  createdAt: Date;
+}
+
+//columns
+interface Columns {
+  [index: number]: {
+    name: String;
+    align: String;
+    label: String;
+    sortable: Boolean;
+    field: String;
+    headerStyle: String;
+    style: String;
+  };
+}
+
+export type { RequestItemsObject, Columns, DataProps };
diff --git a/src/modules/04_registryNew/interface/response/Insignia.ts b/src/modules/04_registryNew/interface/response/Insignia.ts
new file mode 100644
index 000000000..4d26152a0
--- /dev/null
+++ b/src/modules/04_registryNew/interface/response/Insignia.ts
@@ -0,0 +1,22 @@
+//ข้อมูล
+interface ResponseObject {
+  id: string;
+  insigniaType: string;
+  insignia: string;
+  insigniaId: string;
+  year: number;
+  no: string;
+  issue: string;
+  volumeNo: string;
+  volume: string;
+  section: string;
+  page: string;
+  receiveDate: Date;
+  dateAnnounce: Date;
+  refCommandNo: string;
+  refCommandDate: Date | null;
+  createdFullName: string;
+  createdAt: Date;
+}
+
+export type { ResponseObject };