From 0f1b7cafcf2a727b97c96a96a5b914d41d8f6b01 Mon Sep 17 00:00:00 2001
From: puriphatt <puriphat@frappet.com>
Date: Thu, 14 Mar 2024 15:06:25 +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=B8=9B=E0=B8=A3=E0=B8=B0=E0=B8=81?=
 =?UTF-8?q?=E0=B8=B2=E0=B8=A8=E0=B9=80=E0=B8=81=E0=B8=B5=E0=B8=A2=E0=B8=A3?=
 =?UTF-8?q?=E0=B8=95=E0=B8=B4=E0=B8=84=E0=B8=B8=E0=B8=93?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Achievement/04_DeclarationHonor.vue       | 750 +++++++++++++++++-
 .../interface/request/DeclarationHonor.ts     |  33 +
 .../interface/response/DeclarationHonor.ts    |  15 +
 3 files changed, 796 insertions(+), 2 deletions(-)
 create mode 100644 src/modules/04_registryNew/interface/request/DeclarationHonor.ts
 create mode 100644 src/modules/04_registryNew/interface/response/DeclarationHonor.ts

diff --git a/src/modules/04_registryNew/components/detail/Achievement/04_DeclarationHonor.vue b/src/modules/04_registryNew/components/detail/Achievement/04_DeclarationHonor.vue
index d2f2565c1..1f92ac6ce 100644
--- a/src/modules/04_registryNew/components/detail/Achievement/04_DeclarationHonor.vue
+++ b/src/modules/04_registryNew/components/detail/Achievement/04_DeclarationHonor.vue
@@ -1,6 +1,752 @@
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import { ref, 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,
+} from "@/modules/04_registryNew/interface/request/DeclarationHonor";
+
+import type {
+  DataOption,
+  DataOptionInsignia,
+  InsigniaOps,
+  Pagination,
+} from "@/modules/04_registryNew/interface/index/Main";
+
+const $q = useQuasar();
+const mixin = useCounterMixin();
+const attrs = ref<any>(useAttrs());
+const {
+  date2Thai,
+  success,
+  dateToISO,
+  messageError,
+  showLoader,
+  hideLoader,
+  convertDate,
+  convertDateDisplay,
+} = mixin;
+
+const isDate = ref<string | null>("false");
+const issuer = ref<string>();
+const detail = ref<string>();
+const issueDate = ref<number>();
+const issueDate2 = ref<Date>();
+const refCommandNo = ref<string>();
+const refCommandDate = ref<Date | null>();
+
+const editRow = ref<boolean>(false);
+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>("ประวัติแก้ไขประกาศเกียรติคุณ");
+
+// mock data
+const rows = ref<any[]>([
+  {
+    id: "08dc2c84-4ef1-463e-8004-a6018ccaea19",
+    issuer: "",
+    detail: "ประกาศเกียรติคุณ ชั้น 2",
+    isDate: false,
+    issueDate: new Date("2019-01-01T00:00:00").getFullYear(),
+    issueDate2: new Date("2019-01-01T00:00:00"),
+    refCommandNo: "",
+    refCommandDate: null,
+    createdAt: new Date("2024-02-13T18:09:55.151412"),
+    createdFullName: "สาวิตรี ศรีสมัย",
+  },
+  {
+    id: "08dc2c84-4ef1-463e-8004-a6018ccaea19",
+    issuer: "",
+    detail: "ประกาศเกียรติคุณ ชั้น 2",
+    isDate: true,
+    issueDate: new Date("2015-12-05T00:00:00").getFullYear(),
+    issueDate2: new Date("2015-12-05T00:00:00"),
+    refCommandNo: "",
+    refCommandDate: null,
+    createdAt: new Date("2024-02-13T18:10:37.425739"),
+    createdFullName: "สาวิตรี ศรีสมัย",
+  },
+]);
+
+const columns = ref<QTableProps["columns"]>([
+  {
+    name: "issueDate",
+    align: "left",
+    label: "วันที่ได้รับ",
+    sortable: true,
+    field: "issueDate",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "issuer",
+    align: "left",
+    label: "ผู้มีอำนาจลงนาม",
+    sortable: true,
+    field: "issuer",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "detail",
+    align: "left",
+    label: "รายละเอียด",
+    sortable: true,
+    field: "detail",
+    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" }),
+  },
+]);
+const columnsHistory = ref<QTableProps["columns"]>([
+  {
+    name: "issueDate",
+    align: "left",
+    label: "วันที่ได้รับ",
+    sortable: true,
+    field: "issueDate",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "issuer",
+    align: "left",
+    label: "ผู้มีอำนาจลงนาม",
+    sortable: true,
+    field: "issuer",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "detail",
+    align: "left",
+    label: "รายละเอียด",
+    sortable: true,
+    field: "detail",
+    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[]>([
+  "issuer",
+  "detail",
+  "issueDate",
+  "refCommandNo",
+  "refCommandDate",
+]);
+
+const visibleColumnsHistory = ref<String[]>([
+  "issuer",
+  "detail",
+  "issueDate",
+  "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 () => {
+      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 selectData(props: any) {
+  modal.value = true;
+}
+
+async function clickHistory(row: RequestItemsObject) {
+  modalHistory.value = true;
+  // tittleHistory.value =
+  //   props.profileType == "employee"
+  //     ? "ประวัติแก้ไขประกาศลูกจ้างดีเด่น"
+  //     : "ประวัติแก้ไขประกาศเกียรติคุณ";
+  // modalHistory.value = true;
+  // filterHistory.value = "";
+  // showLoader();
+  // await http
+  //   .get(config.API.profileHonorHisId(row.id))
+  //   .then((res) => {
+  //     let data = res.data.result;
+  //     rowsHistory.value = [];
+  //     data.map((e: any) => {
+  //       rowsHistory.value.push({
+  //         id: e.id,
+  //         issuer: e.issuer,
+  //         detail: e.detail,
+  //         issueDate: new Date(e.issueDate).getFullYear(),
+  //         issueDate2: new Date(e.issueDate),
+  //         refCommandNo: e.refCommandNo,
+  //         refCommandDate:
+  //           e.refCommandDate == null ? null : new Date(e.refCommandDate),
+  //         createdAt: new Date(e.createdAt),
+  //         createdFullName: e.createdFullName,
+  //       });
+  //     });
+  //   })
+  //   .catch((e) => {
+  //     messageError($q, e);
+  //   })
+  //   .finally(() => {
+  //     hideLoader();
+  //   });
+}
+</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
+      label="ค้นหา"
+      class="q-mr-sm"
+      v-model="filterSearch"
+    >
+      <template v-slot:append>
+        <q-icon name="search" />
+      </template>
+    </q-input>
+
+    <q-select
+      v-if="modelView === 'table'"
+      dense
+      multiple
+      outlined
+      emit-value
+      map-options
+      options-cover
+      options-dense
+      class="q-mr-sm"
+      option-value="name"
+      style="min-width: 150px"
+      v-model="visibleColumns"
+      :options="columns"
+      :display-value="$q.lang.table.columns"
+    />
+
+    <q-btn-toggle
+      dense
+      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="24px"
+          :style="{
+            color: modelView === 'table' ? '#787B7C' : '#C9D3DB',
+          }"
+        />
+      </template>
+      <template v-slot:card>
+        <q-icon
+          name="mdi-view-grid-outline"
+          size="24px"
+          :style="{
+            color: modelView === 'card' ? '#787B7C' : '#C9D3DB',
+          }"
+        />
+      </template>
+    </q-btn-toggle>
+  </q-toolbar>
+
+  <d-table
+    flat
+    dense
+    bordered
+    virtual-scroll
+    ref="table"
+    v-bind="attrs"
+    :rows="rows"
+    :columns="columns"
+    :filter="filterSearch"
+    :grid="modelView === 'card'"
+    :pagination="initialPagination"
+    :visible-columns="visibleColumns"
+    :pagination-label="paginationLabel"
+    :rows-per-page-options="[20, 50, 100]"
+    :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" v-if="modelView === 'table'">
+      <q-tr :props="props">
+        <q-td
+          v-for="col in props.cols"
+          :key="col.name"
+          :props="props"
+          class="cursor-pointer"
+          @click="selectData(props)"
+        >
+          <div v-if="col.name == 'issueDate'" class="table_ellipsis">
+            {{
+              props.row.isDate == true
+                ? date2Thai(props.row.issueDate2)
+                : col.value + 543
+            }}
+          </div>
+          <div v-else-if="col.name == 'refCommandDate'" class="table_ellipsis">
+            {{
+              props.row.refCommandDate
+                ? date2Thai(props.row.refCommandDate)
+                : "-"
+            }}
+          </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-tooltip>ประวัติแก้ไขประกาศเกียรติคุณ</q-tooltip>
+          </q-btn>
+        </q-td>
+      </q-tr>
+    </template>
+
+    <template v-slot:item="props" v-else>
+      <div
+        class="q-pa-xs col-xs-12 col-sm-6 col-md-6 col-lg-6 grid-style-transition"
+      >
+        <q-card bordered>
+          <q-card-actions class="bg-grey-3" align="right">
+            <q-btn
+              flat
+              round
+              color="primary"
+              icon="mdi-pencil-outline"
+              @click.stop.prevent="onClickOpenDialog()"
+            >
+              <q-tooltip>แก่ไขข้อมุล</q-tooltip>
+            </q-btn>
+            <q-btn
+              flat
+              round
+              color="info"
+              icon="mdi-history"
+              @click.stop.prevent="clickHistory(props.row)"
+            >
+              <q-tooltip>ประวัติแก้ไขประกาศเกียรติคุณ</q-tooltip>
+            </q-btn>
+          </q-card-actions>
+          <q-separator />
+          <div>
+            <q-item
+              v-for="(col, index) in props.cols.filter(
+                (col) => col.name !== 'desc'
+              )"
+              :key="col.name"
+              :class="index % 2 !== 0 ? 'bg-grey-1' : ''"
+            >
+              <q-item-section class="col-7 text-grey-6">
+                <q-item-label>{{ col.label }}</q-item-label>
+              </q-item-section>
+
+              <q-item-section class="text-dark">
+                <q-item-label v-if="col.name == 'issueDate'">
+                  {{
+                    props.row.isDate == true
+                      ? date2Thai(props.row.issueDate2)
+                      : col.value + 543
+                  }}
+                </q-item-label>
+                <q-item-label v-else-if="col.name == 'refCommandDate'">
+                  {{
+                    props.row.refCommandDate
+                      ? date2Thai(props.row.refCommandDate)
+                      : "-"
+                  }}
+                </q-item-label>
+                <q-item-label v-else>
+                  {{ col.value ? col.value : "-" }}
+                </q-item-label>
+              </q-item-section>
+            </q-item>
+          </div>
+        </q-card>
+      </div>
+    </template>
+  </d-table>
+
+  <q-dialog v-model="modal" persistent>
+    <q-card style="width: 600px">
+      <q-form greedy 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="row col-12 q-gutter-md q-py-sm text-grey-7">
+              <q-radio
+                v-model="isDate"
+                checked-icon="task_alt"
+                unchecked-icon="panorama_fish_eye"
+                val="false"
+                label="ปี"
+                dense
+              />
+              <q-radio
+                v-model="isDate"
+                checked-icon="task_alt"
+                unchecked-icon="panorama_fish_eye"
+                val="true"
+                label="วัน/เดือน/ปี"
+                dense
+              />
+            </div>
+            <div class="col-xs-6 col-sm-6 col-md-6">
+              <datepicker
+                autoApply
+                year-picker
+                v-model="issueDate"
+                week-start="0"
+                menu-class-name="modalfix"
+                :locale="'th'"
+                :enableTimePicker="false"
+                v-if="isDate === '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="issueDate ? issueDate + 543 : ''"
+                    :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>
+              <datepicker
+                autoApply
+                borderless
+                week-start="0"
+                menu-class-name="modalfix"
+                v-model="issueDate2"
+                :locale="'th'"
+                v-else
+              >
+                <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="date2Thai(issueDate2 as Date)"
+                    :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">
+              <q-input
+                dense
+                outlined
+                lazy-rules
+                hide-bottom-space
+                v-model="issuer"
+                :label="`${'ผู้มีอำนาจลงนาม'}`"
+                @update:modelValue="() => (editRow = true)"
+              />
+            </div>
+            <div class="col-12">
+              <q-input
+                dense
+                outlined
+                lazy-rules
+                hide-bottom-space
+                v-model="detail"
+                :label="`${'รายละเอียด'}`"
+                :rules="[(val) => !!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="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
+                borderless
+                week-start="0"
+                menu-class-name="modalfix"
+                v-model="refCommandDate"
+                :locale="'th'"
+              >
+                <template #year="{ year }">
+                  {{ year + 543 }}
+                </template>
+                <template #year-overlay-value="{ value }">
+                  {{ parseInt(value + 543) }}
+                </template>
+                <template #trigger>
+                  <q-input
+                    dense
+                    outlined
+                    hide-bottom-space
+                    :model-value="
+                      refCommandDate == null ? null : date2Thai(refCommandDate)
+                    "
+                    :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>
+        </q-card-section>
+        <q-separator />
+        <div class="text-right q-pa-sm">
+          <q-btn
+            dense
+            unelevated
+            label="บันทึก"
+            id="onSubmit"
+            type="submit"
+            color="public"
+            class="q-px-md"
+          >
+            <q-tooltip>บันทึกข้อมูล</q-tooltip>
+          </q-btn>
+        </div>
+      </q-form>
+    </q-card>
+  </q-dialog>
+
+  <HistoryTable
+    :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 == 'issueDate' ||
+              col.name == 'createdAt' ||
+              col.name == 'refCommandDate'
+            "
+            class="table_ellipsis"
+          >
+            {{ col.value ? date2Thai(col.value) : "-" }}
+          </div>
+          <div v-else class="table_ellipsis">
+            {{ col.value ? col.value : "-" }}
+          </div>
+        </q-td>
+      </q-tr>
+    </template>
+  </HistoryTable>
 </template>
 
 <style scoped></style>
diff --git a/src/modules/04_registryNew/interface/request/DeclarationHonor.ts b/src/modules/04_registryNew/interface/request/DeclarationHonor.ts
new file mode 100644
index 000000000..46d4ab710
--- /dev/null
+++ b/src/modules/04_registryNew/interface/request/DeclarationHonor.ts
@@ -0,0 +1,33 @@
+interface gDataProps {
+  row: RequestItemsObject;
+  rowIndex: number;
+}
+
+//ข้อมูล
+interface RequestItemsObject {
+  id: string;
+  issuer: string;
+  detail: string;
+  issueDate: number | null;
+  issueDate2: Date;
+  refCommandNo: string;
+  refCommandDate: Date | null | string;
+  createdFullName: string;
+  createdAt: Date;
+  isDate: string;
+}
+
+//columns
+interface Columns {
+  [index: number]: {
+    name: String;
+    align: String;
+    label: String;
+    sortable: Boolean;
+    field: String;
+    headerStyle: String;
+    style: String;
+  };
+}
+
+export type { RequestItemsObject, Columns };
diff --git a/src/modules/04_registryNew/interface/response/DeclarationHonor.ts b/src/modules/04_registryNew/interface/response/DeclarationHonor.ts
new file mode 100644
index 000000000..2b6eb44ac
--- /dev/null
+++ b/src/modules/04_registryNew/interface/response/DeclarationHonor.ts
@@ -0,0 +1,15 @@
+//ข้อมูล
+interface ResponseObject {
+  id: string;
+  issuer: string;
+  detail: string;
+  issueDate: number;
+  issueDate2: Date;
+  refCommandNo: string;
+  refCommandDate: Date | null;
+  createdFullName: string;
+  createdAt: Date;
+  isDate: string;
+}
+
+export type { ResponseObject };