From c045d4f7ff208c0d5d6039c860c025994b4330c0 Mon Sep 17 00:00:00 2001
From: puriphatt <puriphat@frappet.com>
Date: Thu, 14 Mar 2024 16:44:43 +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=9C=E0=B8=A5=E0=B8=81=E0=B8=B2?=
 =?UTF-8?q?=E0=B8=A3=E0=B8=9B=E0=B8=A3=E0=B8=B0=E0=B9=80=E0=B8=A1=E0=B8=B4?=
 =?UTF-8?q?=E0=B8=99=20+=20=E0=B9=81=E0=B8=81=E0=B9=89=E0=B9=84=E0=B8=82?=
 =?UTF-8?q?=E0=B8=9F=E0=B8=AD=E0=B8=A3=E0=B9=8C=E0=B8=A1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../detail/Achievement/03_Insignia.vue        |  18 +-
 .../Achievement/04_DeclarationHonor.vue       |  12 +-
 .../Achievement/05_ResultsPerformance.vue     | 769 +++++++++++++++++-
 .../interface/request/ResultsPerformance.ts   |  34 +
 .../interface/response/ResultsPerformance.ts  |  16 +
 5 files changed, 831 insertions(+), 18 deletions(-)
 create mode 100644 src/modules/04_registryNew/interface/request/ResultsPerformance.ts
 create mode 100644 src/modules/04_registryNew/interface/response/ResultsPerformance.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 5377169e8..0f47b3505 100644
--- a/src/modules/04_registryNew/components/detail/Achievement/03_Insignia.vue
+++ b/src/modules/04_registryNew/components/detail/Achievement/03_Insignia.vue
@@ -48,9 +48,9 @@ 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 editRow = ref<boolean>(false);
 const myForm = ref<any>();
 const edit = ref<boolean>(false);
 const modal = ref<boolean>(false);
@@ -534,7 +534,7 @@ const clickClose = async () => {
       ok: "ยืนยัน",
       persistent: true,
     }).onOk(async () => {
-      // modal.value = false;
+      modal.value = false;
       // next.value = false;
       // previous.value = false;
     });
@@ -903,6 +903,7 @@ onMounted(async () => {
                 menu-class-name="modalfix"
                 v-model="receiveDate"
                 :locale="'th'"
+                :enableTimePicker="false"
               >
                 <template #year="{ year }">
                   {{ year + 543 }}
@@ -922,9 +923,9 @@ onMounted(async () => {
                         ? date2Thai(receiveDate as Date)
                         : null
                     "
-                    :label="`${'วัน/เดือน/ปี ที่วันที่ได้รับ'}`"
+                    :label="`${'วันที่ได้รับ'}`"
                     :rules="[
-                      (val) => !!val || `${'กรุณาเลือก วัน/เดือน/ปี เกิด'}`,
+                      (val) => !!val || `${'กรุณาเลือกวันที่ได้รับ'}`,
                     ]"
                     @update:modelValue="() => (editRow = true)"
                   >
@@ -1065,7 +1066,7 @@ onMounted(async () => {
                     lazy-rules
                     hide-bottom-space
                     :model-value="date2Thai(dateAnnounce as Date)"
-                    :label="`${'วัน/เดือน/ปี ที่ประกาศในราชกิจจาฯ'}`"
+                    :label="`${'วันที่ประกาศในราชกิจจาฯ'}`"
                     :rules="[
                       (val:string) =>
                         !!val || `${'กรุณาเลือกวันที่ประกาศในราชกิจจาฯ'}`,
@@ -1140,13 +1141,6 @@ onMounted(async () => {
                         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>
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 1f92ac6ce..55a82f3c3 100644
--- a/src/modules/04_registryNew/components/detail/Achievement/04_DeclarationHonor.vue
+++ b/src/modules/04_registryNew/components/detail/Achievement/04_DeclarationHonor.vue
@@ -589,6 +589,7 @@ async function clickHistory(row: RequestItemsObject) {
                 menu-class-name="modalfix"
                 v-model="issueDate2"
                 :locale="'th'"
+                :enableTimePicker="false"
                 v-else
               >
                 <template #year="{ year }">
@@ -605,9 +606,9 @@ async function clickHistory(row: RequestItemsObject) {
                     ref="dateReceivedRef"
                     hide-bottom-space
                     :model-value="date2Thai(issueDate2 as Date)"
-                    :label="`${'วัน/เดือน/ปี ที่ได้รับ'}`"
+                    :label="`${'วันที่ได้รับ'}`"
                     :rules="[
-                      (val) => !!val || `${'กรุณาเลือกวัน/เดือน/ปี ที่ได้รับ'}`,
+                      (val) => !!val || `${'กรุณาเลือกวันที่ได้รับ'}`,
                     ]"
                     @update:modelValue="() => (editRow = true)"
                   >
@@ -668,6 +669,7 @@ async function clickHistory(row: RequestItemsObject) {
                 menu-class-name="modalfix"
                 v-model="refCommandDate"
                 :locale="'th'"
+                :enableTimePicker="false"
               >
                 <template #year="{ year }">
                   {{ year + 543 }}
@@ -679,11 +681,13 @@ async function clickHistory(row: RequestItemsObject) {
                   <q-input
                     dense
                     outlined
+                    clearable
                     hide-bottom-space
                     :model-value="
                       refCommandDate == null ? null : date2Thai(refCommandDate)
                     "
                     :label="`${'เอกสารอ้างอิง (ลงวันที่)'}`"
+                    @clear="refCommandDate = null"
                     @update:modelValue="() => (editRow = true)"
                   >
                     <template v-slot:prepend>
@@ -717,7 +721,7 @@ async function clickHistory(row: RequestItemsObject) {
     </q-card>
   </q-dialog>
 
-  <HistoryTable
+  <history-table
     :rows="rowsHistory"
     :columns="columnsHistory"
     :filter="filterHistory"
@@ -746,7 +750,7 @@ async function clickHistory(row: RequestItemsObject) {
         </q-td>
       </q-tr>
     </template>
-  </HistoryTable>
+  </history-table>
 </template>
 
 <style scoped></style>
diff --git a/src/modules/04_registryNew/components/detail/Achievement/05_ResultsPerformance.vue b/src/modules/04_registryNew/components/detail/Achievement/05_ResultsPerformance.vue
index 9d68fe9d6..a23c9ac7c 100644
--- a/src/modules/04_registryNew/components/detail/Achievement/05_ResultsPerformance.vue
+++ b/src/modules/04_registryNew/components/detail/Achievement/05_ResultsPerformance.vue
@@ -1,6 +1,771 @@
-<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,
+  DataProps,
+} from "@/modules/04_registryNew/interface/request/ResultsPerformance";
+
+const $q = useQuasar();
+const attrs = ref<any>(useAttrs());
+const mixin = useCounterMixin();
+const {
+  date2Thai,
+  success,
+  dateToISO,
+  messageError,
+  showLoader,
+  hideLoader,
+  convertDate,
+  convertDateDisplay,
+} = mixin;
+
+const id = ref<string>("");
+const name = ref<string>();
+const point1Total = ref<number>(0);
+const point1 = ref<number>(0);
+const point2Total = ref<number>(0);
+const point2 = ref<number>(0);
+const pointSumTotal = ref<number>(0);
+const pointSum = ref<number>(0);
+const date = ref<Date>();
+
+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>("ประวัติแก้ไขผลการประเมินการปฏิบัติราชการ");
+
+const rows = ref<RequestItemsObject[]>([
+  {
+    id: "08dc2c84-7afa-4bee-80f0-7f225dd261b3",
+    point1Total: 100.0,
+    point1: 100.0,
+    point2Total: 100.0,
+    point2: 100.0,
+    pointSumTotal: 100.0,
+    pointSum: 100.0,
+    name: "",
+    date: new Date("2022-05-18T00:00:00"),
+    createdFullName: "สาวิตรี ศรีสมัย",
+    createdAt: new Date("2024-02-13T18:11:09.032485"),
+  },
+  {
+    id: "08dc2c84-7afa-4bee-80f0-7f225dd261b3",
+    point1Total: 100.0,
+    point1: 100.0,
+    point2Total: 100.0,
+    point2: 100.0,
+    pointSumTotal: 100.0,
+    pointSum: 100.0,
+    name: "",
+    date: new Date("2021-09-25T00:00:00"),
+    createdFullName: "สาวิตรี ศรีสมัย",
+    createdAt: new Date("2024-02-13T18:11:35.602659"),
+  },
+]);
+
+const columns = ref<QTableProps["columns"]>([
+  {
+    name: "date",
+    align: "left",
+    label: "วันที่ได้รับ",
+    sortable: true,
+    field: "date",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "point1Total",
+    align: "left",
+    label: "ส่วนที่1 (คะแนน)",
+    sortable: true,
+    field: "point1Total",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "point1",
+    align: "left",
+    label: "ผลประเมินส่วนที่1 (คะแนน)",
+    sortable: true,
+    field: "point1",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "point2Total",
+    align: "left",
+    label: "ส่วนที่2 (คะแนน)",
+    sortable: true,
+    field: "point2Total",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "point2",
+    align: "left",
+    label: "ผลประเมินส่วนที่2 (คะแนน)",
+    sortable: true,
+    field: "point2",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "pointSumTotal",
+    align: "left",
+    label: "ผลรวม (คะแนน)",
+    sortable: true,
+    field: "pointSumTotal",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "pointSum",
+    align: "left",
+    label: "ผลประเมินรวม (คะแนน)",
+    sortable: true,
+    field: "pointSum",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "name",
+    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" }),
+  },
+]);
+const columnsHistory = ref<QTableProps["columns"]>([
+  {
+    name: "point1Total",
+    align: "left",
+    label: "ส่วนที่1 (คะแนน)",
+    sortable: true,
+    field: "point1Total",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "point1",
+    align: "left",
+    label: "ผลประเมินส่วนที่1 (คะแนน)",
+    sortable: true,
+    field: "point1",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "point2Total",
+    align: "left",
+    label: "ส่วนที่2 (คะแนน)",
+    sortable: true,
+    field: "point2Total",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "point2",
+    align: "left",
+    label: "ผลประเมินส่วนที่2 (คะแนน)",
+    sortable: true,
+    field: "point2",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "pointSumTotal",
+    align: "left",
+    label: "ผลรวม (คะแนน)",
+    sortable: true,
+    field: "pointSumTotal",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "pointSum",
+    align: "left",
+    label: "ผลประเมินรวม (คะแนน)",
+    sortable: true,
+    field: "pointSum",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "name",
+    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: "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 visibleColumnsHistory = ref<String[]>([
+  "point1Total",
+  "point1",
+  "point2Total",
+  "point2",
+  "pointSumTotal",
+  "pointSum",
+  "name",
+  "date",
+  "createdFullName",
+  "createdAt",
+]);
+
+const visibleColumns = ref<String[]>([
+  "point1Total",
+  "point1",
+  "point2Total",
+  "point2",
+  "pointSumTotal",
+  "pointSum",
+  "name",
+  "date",
+]);
+
+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;
+}
+
+const clickHistory = async (row: RequestItemsObject) => {
+  modalHistory.value = true;
+  // tittleHistory.value = "ประวัติแก้ไขผลการประเมินการปฏิบัติราชการ";
+  // filterHistory.value = "";
+  // showLoader();
+  // await http
+  //   .get(config.API.profileAssessmentHisId(row.id))
+  //   .then((res) => {
+  //     let data = res.data.result;
+  //     rowsHistory.value = [];
+  //     data.map((e: ResponseObject) => {
+  //       rowsHistory.value.push({
+  //         id: e.id,
+  //         name: e.name,
+  //         point1Total: e.point1Total,
+  //         point1: e.point1,
+  //         point2Total: e.point2Total,
+  //         point2: e.point2,
+  //         pointSumTotal: e.pointSumTotal,
+  //         pointSum: e.pointSum,
+  //         date: new Date(e.date),
+  //         createdAt: new Date(e.createdAt),
+  //         createdFullName: e.createdFullName,
+  //       });
+  //     });
+  //   })
+  //   .catch((e) => {
+  //     messageError($q, e);
+  //   })
+  //   .finally(() => {
+  //     hideLoader();
+  //   });
+};
+
+function textRangePoint(val: number | undefined) {
+  if (val == undefined) val = -1;
+  if (val >= 0 && val <= 60) return "(ต่ำกว่าร้อยละ 60)";
+  if (val >= 60 && val <= 69) return "(ร้อยละ 60 – 69)";
+  if (val >= 70 && val <= 79) return "(ร้อยละ 70 – 79)";
+  if (val >= 80 && val <= 89) return "(ร้อยละ 80 – 89)";
+  if (val >= 90 && val <= 100) return "(ร้อยละ 90 - 100)";
+  else return "";
+}
+
+function textPoint(val: number | undefined) {
+  if (val == undefined) val = -1;
+  if (val >= 0 && val <= 60) return "ต้องปรับปรุง";
+  if (val >= 60 && val <= 69) return "พอใช้";
+  if (val >= 70 && val <= 79) return "ดี";
+  if (val >= 80 && val <= 89) return "ดีมาก";
+  if (val >= 90 && val <= 100) return "ดีเด่น";
+  else return "-";
+}
+
+</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'"
+    :visible-columns="visibleColumns"
+    :rows-per-page-options="[20, 50, 100]"
+  >
+    <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"
+          @click="selectData(props)"
+          class="cursor-pointer"
+        >
+          <div v-if="col.name == 'date'" class="table_ellipsis">
+            {{ col.value ? date2Thai(col.value) : "-" }}
+          </div>
+          <div v-else-if="col.name == 'name'" class="table_ellipsis">
+            {{ textPoint(props.row.pointSum) }}
+            {{ textRangePoint(props.row.pointSum) }}
+          </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="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="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 == 'date'">
+                  {{ col.value ? date2Thai(col.value) : "-" }}
+                </q-item-label>
+                <q-item-label v-else-if="col.name == 'name'">
+                  {{ textPoint(props.row.pointSum) }}
+                  {{ textRangePoint(props.row.pointSum) }}
+                </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="col-12">
+              <datepicker
+                autoApply
+                borderless
+                week-start="0"
+                menu-class-name="modalfix"
+                v-model="date"
+                :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
+                    for="inputDatereceive"
+                    ref="dateReceivedRef"
+                    hide-bottom-space
+                    :model-value="date2Thai(date 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
+                type="number"
+                class="inputgreen"
+                v-model="point1Total"
+                input-class="text-right "
+                :label="`${'ส่วนที่1 (คะแนน)'}`"
+                :rules="[(val) => !!val || `${'กรุณากรอกส่วนที่1 (คะแนน)'}`]"
+                @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
+                type="number"
+                class="inputgreen"
+                v-model="point1"
+                input-class="text-right"
+                :label="`${'ผลประเมินส่วนที่1 (คะแนน)'}`"
+                :rules="[
+                  (val) => !!val || `${'กรุณากรอกผลประเมินส่วนที่1 (คะแนน)'}`,
+                ]"
+                @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
+                type="number"
+                class="inputgreen"
+                v-model="point2Total"
+                input-class="text-right"
+                :label="`${'ส่วนที่2 (คะแนน)'}`"
+                :rules="[(val) => !!val || `${'กรุณากรอกส่วนที่2 (คะแนน)'}`]"
+                @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
+                type="number"
+                class="inputgreen"
+                v-model="point2"
+                input-class="text-right"
+                :label="`${'ผลประเมินส่วนที่2 (คะแนน)'}`"
+                :rules="[
+                  (val) => !!val || `${'กรุณากรอกผลประเมินส่วนที่2 (คะแนน)'}`,
+                ]"
+                @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
+                type="number"
+                class="inputgreen"
+                v-model="pointSumTotal"
+                input-class="text-right"
+                :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
+                type="number"
+                v-model="pointSum"
+                class="inputgreen"
+                input-class="text-right"
+                :label="`${'ผลประเมินรวม (คะแนน)'}`"
+                :rules="[
+                  (val) => !!val || `${'กรุณากรอกผลประเมินรวม (คะแนน)'}`,
+                ]"
+                @update:modelValue="() => (editRow = true)"
+              />
+            </div>
+            <div class="text-subtitle2 col-12 row items-center">
+              <q-space></q-space>
+              ผลการประเมิน:
+              <div class="text-bold items-center q-px-sm">
+                {{ textPoint(pointSum) }}
+              </div>
+              {{ textRangePoint(pointSum) }}
+            </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>
+
+  <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 == 'date' || col.name == 'createdAt'"
+            class="table_ellipsis"
+          >
+            {{ date2Thai(col.value) }}
+          </div>
+          <div v-else-if="col.name == 'name'" class="table_ellipsis">
+            {{ textPoint(props.row.pointSum) }}
+            {{ textRangePoint(props.row.pointSum) }}
+          </div>
+          <div v-else class="table_ellipsis">
+            {{ col.value }}
+          </div>
+        </q-td>
+      </q-tr>
+    </template>
+  </history-table>
 </template>
 
 <style scoped></style>
diff --git a/src/modules/04_registryNew/interface/request/ResultsPerformance.ts b/src/modules/04_registryNew/interface/request/ResultsPerformance.ts
new file mode 100644
index 000000000..58bcb2a51
--- /dev/null
+++ b/src/modules/04_registryNew/interface/request/ResultsPerformance.ts
@@ -0,0 +1,34 @@
+interface DataProps {
+  row: RequestItemsObject;
+  rowIndex: number;
+}
+
+//ข้อมูล
+interface RequestItemsObject {
+  id: string;
+  point1Total: number;
+  point1: number;
+  point2Total: number;
+  point2: number;
+  pointSumTotal: number;
+  pointSum: number;
+  name: string;
+  date: Date;
+  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/ResultsPerformance.ts b/src/modules/04_registryNew/interface/response/ResultsPerformance.ts
new file mode 100644
index 000000000..af1f8598a
--- /dev/null
+++ b/src/modules/04_registryNew/interface/response/ResultsPerformance.ts
@@ -0,0 +1,16 @@
+//ข้อมูล
+interface ResponseObject {
+  id: string;
+  point1Total: number;
+  point1: number;
+  point2Total: number;
+  point2: number;
+  pointSumTotal: number;
+  pointSum: number;
+  name: string;
+  date: Date;
+  createdFullName: string;
+  createdAt: Date;
+}
+
+export type { ResponseObject };