ทะเบียนประวัติ: แก้ตาราง, ประวัติแก้ไข, วันที่แก้ไข

src/modules/04_registryNew/components/detail/Achievement/03_Insignia.vue

@@ -8,7 +8,6 @@ import type { QTableProps, QForm } from "quasar";
 
 import { useCounterMixin } from "@/stores/mixin";
 import { useInsigniaDataStore } from "@/modules/04_registryNew/stores/insignia";
-import HistoryTable from "@/components/TableHistory.vue";
 import DialogHeader from "@/components/DialogHeader.vue";
 import type {
   DataOption,
@@ -30,7 +29,6 @@ const {
   hideLoader,
   messageError,
   dialogConfirm,
-  dialogRemove,
 } = mixin;
 const profileId = ref<string>(
   route.params.id ? route.params.id.toString() : ""
@@ -54,6 +52,10 @@ const insigniaForm = reactive<RequestItemsObject>({
   note: "",
 });
 
+const currentPage = ref<number>(1);
+const maxPageHistory = ref<number>(1);
+const currentPageHistory = ref<number>(1);
+const maxPage = ref<number>(1);
 const isEdit = ref<boolean>(false);
 const modal = ref<boolean>(false);
 const modeView = ref<string>("table");
@@ -61,7 +63,6 @@ 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: [],
@@ -378,22 +379,22 @@ const columnsHistory = ref<QTableProps["columns"]>([
       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
   {
-    name: "createdFullName",
+    name: "lastUpdateFullName",
     align: "left",
     label: "ผู้ดำเนินการ",
     sortable: true,
-    field: "createdFullName",
+    field: "lastUpdateFullName",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
     sort: (a: string, b: string) =>
       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
   {
-    name: "createdAt",
+    name: "lastUpdatedAt",
     align: "left",
     label: "วันที่แก้ไข",
     sortable: true,
-    field: "createdAt",
+    field: "lastUpdatedAt",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
     format: (v) => date2Thai(v),
@@ -416,7 +417,6 @@ const visibleColumns = ref<String[]>([
   "refCommandNo",
   "refCommandDate",
   "note",
-  "createdAt",
 ]);
 const visibleColumnsHistory = ref<String[]>([
   "insignia",
@@ -432,8 +432,8 @@ const visibleColumnsHistory = ref<String[]>([
   "dateAnnounce",
   "refCommandNo",
   "refCommandDate",
-  "createdFullName",
+  "lastUpdateFullName",
-  "createdAt",
+  "lastUpdatedAt",
 ]);
 
 async function fetchData() {
@@ -487,19 +487,6 @@ async function addEditData(editStatus: boolean = false) {
   }
 }
 
-// async function clickDelete(dataId: string) {
-//   try {
-//     await http.delete(config.API.profileNewInsignById(dataId));
-//     success($q, "ลบข้อมูลสำเร็จ");
-//     await fetchData();
-//     modal.value = false;
-//   } catch (error) {
-//     messageError($q, error);
-//   } finally {
-//     hideLoader();
-//   }
-// }
-
 function onClickOpenDialog(editStatus: boolean = false, row?: ResponseObject) {
   modal.value = true;
   isEdit.value = editStatus;
@@ -606,45 +593,56 @@ onMounted(async () => {
 </script>
 
 <template>
-  <q-toolbar style="padding: 0px" class="text-primary">
+  <div class="row items-center q-gutter-x-sm q-py-sm">
-    <q-btn flat round dense icon="add" @click="onClickOpenDialog()">
+    <q-btn color="teal-5" icon="add" flat round @click="onClickOpenDialog()"
-      <q-tooltip>เพิ่ม</q-tooltip>
+      ><q-tooltip>เพิ่มข้อมูล</q-tooltip></q-btn
-    </q-btn>
+    >
+
     <q-space />
     <q-input
+      standout
       dense
-      outlined
-      label="ค้นหา"
-      class="q-mr-sm"
       v-model="filterSearch"
+      ref="filterRef"
+      outlined
+      placeholder="ค้นหา"
+      debounce="300"
     >
       <template v-slot:append>
-        <q-icon name="search" />
+        <q-icon
+          v-if="filterSearch == ''"
+          name="search"
+          @click.stop.prevent="filterSearch = ''"
+          class="cursor-pointer"
+        />
+        <q-icon
+          v-if="filterSearch"
+          name="cancel"
+          @click.stop.prevent="filterSearch = ''"
+          class="cursor-pointer"
+        />
       </template>
     </q-input>
-
     <q-select
-      v-if="modeView === 'table'"
+      v-if="modeView == 'table'"
-      dense
+      v-model="visibleColumns"
       multiple
       outlined
+      dense
+      options-dense
+      :display-value="$q.lang.table.columns"
       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"
+      option-value="name"
+      options-cover
+      style="min-width: 150px"
     />
-
     <q-btn-toggle
-      dense
       v-model="modeView"
-      toggle-color="grey-4"
+      dense
       class="no-shadow toggle-borderd"
+      toggle-color="grey-4"
       :options="[
         { value: 'table', slot: 'table' },
         { value: 'card', slot: 'card' },
@@ -659,6 +657,7 @@ onMounted(async () => {
           }"
         />
       </template>
+
       <template v-slot:card>
         <q-icon
           name="mdi-view-grid-outline"
@@ -669,14 +668,12 @@ onMounted(async () => {
         />
       </template>
     </q-btn-toggle>
-  </q-toolbar>
+  </div>
 
   <d-table
     flat
     dense
     bordered
-    ref="table"
-    class="custom-header-table"
     :rows="rows"
     :paging="true"
     :columns="columns"
@@ -684,6 +681,7 @@ onMounted(async () => {
     :grid="modeView === 'card'"
     :visible-columns="visibleColumns"
     :rows-per-page-options="[20, 50, 100]"
+    :card-container-class="modeView === 'card' ? 'q-col-gutter-md' : ''"
   >
     <template v-slot:header="props">
       <q-tr :props="props">
@@ -730,27 +728,12 @@ onMounted(async () => {
           >
             <q-tooltip>ประวัติแก้ไขเครื่องราชอิสริยาภรณ์</q-tooltip>
           </q-btn>
-          <!-- <q-btn
-            flat
-            dense
-            round
-            size="14px"
-            color="red"
-            icon="mdi-delete"
-            @click="
-              dialogRemove($q, async () => await clickDelete(props.row.id))
-            "
-          >
-            <q-tooltip>ลบข้อมูล</q-tooltip>
-          </q-btn> -->
         </q-td>
       </q-tr>
     </template>
 
     <template v-slot:item="props" v-else>
-      <div
+      <div class="col-xs-12 col-sm-6 col-md-6">
-        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
@@ -795,6 +778,37 @@ onMounted(async () => {
         </q-card>
       </div>
     </template>
+    <template v-slot:pagination="scope">
+      <q-pagination
+        v-model="currentPage"
+        active-color="primary"
+        color="dark"
+        :max="Number(maxPage)"
+        size="sm"
+        boundary-links
+        direction-links
+      ></q-pagination>
+    </template>
+    <template v-slot:no-data="{ icon, message, filter }">
+      <div class="full-width row flex-center text-accent q-gutter-sm">
+        <span
+          ><div
+            style="
+              height: 50vh;
+              display: flex;
+              flex-direction: column;
+              justify-content: center;
+              align-items: center;
+            "
+            class="text-grey-5"
+          >
+            <q-icon name="search" size="4rem" />
+
+            <span>ไม่พบข้อมูล</span>
+          </div>
+        </span>
+      </div>
+    </template>
   </d-table>
 
   <q-dialog v-model="modal" persistent>
@@ -1111,30 +1125,123 @@ onMounted(async () => {
     </q-card>
   </q-dialog>
 
-  <history-table
+  <q-dialog v-model="modalHistory" persistent>
-    :rows="rowsHistory"
+    <q-card style="min-width: 80%">
-    :columns="columnsHistory"
+      <q-card-section class="flex justify-between" style="padding: 0">
-    :filter="filterHistory"
+        <DialogHeader
-    :visible-columns="visibleColumnsHistory"
+          tittle="ประวัติแก้ไขเครื่องราชอิสริยาภรณ์"
-    v-model:modal="modalHistory"
+          :close="() => (modalHistory = false)"
-    v-model:inputfilter="filterHistory"
+        />
-    v-model:inputvisible="visibleColumnsHistory"
+      </q-card-section>
-    v-model:tittle="tittleHistory"
+
-  >
+      <q-separator />
-    <template #columns="props">
+      <q-card-section class="q-p-sm">
-      <q-tr class="cursor-pointer" :props="props">
+        <div class="row q-gutter-sm q-mb-sm">
-        <q-td v-for="col in props.cols" :key="col.name" :props="props">
+          <q-space />
-          <div class="table_ellipsis">
+          <q-input
-            {{ col.value ? col.value : "-" }}
+            standout
-          </div>
+            dense
-        </q-td>
+            v-model="filterHistory"
-      </q-tr>
+            ref="filterRef"
-    </template>
+            outlined
-  </history-table>
+            placeholder="ค้นหา"
+            debounce="300"
+          >
+            <template v-slot:append>
+              <q-icon
+                v-if="filterHistory == ''"
+                name="search"
+                @click.stop.prevent="filterHistory = ''"
+                class="cursor-pointer"
+              />
+              <q-icon
+                v-if="filterHistory"
+                name="cancel"
+                @click.stop.prevent="filterHistory = ''"
+                class="cursor-pointer"
+              />
+            </template>
+          </q-input>
+          <q-select
+            v-model="visibleColumnsHistory"
+            multiple
+            outlined
+            dense
+            options-dense
+            :display-value="$q.lang.table.columns"
+            emit-value
+            map-options
+            :options="columnsHistory"
+            option-value="name"
+            options-cover
+            style="min-width: 150px"
+          />
+        </div>
+        <d-table
+          ref="table"
+          flat
+          bordered
+          dense
+          :columns="columnsHistory"
+          :rows="rowsHistory"
+          :paging="true"
+          :rows-per-page-options="[10, 25, 50, 100]"
+          :visible-columns="visibleColumnsHistory"
+          :filter="filterHistory"
+        >
+          >
+          <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-tr>
+          </template>
+          <template v-slot:body="props">
+            <q-tr :props="props" class="cursor-pointer">
+              <q-td v-for="col in props.cols" :key="col.id">
+                <div>
+                  {{ col.value ? col.value : "-" }}
+                </div>
+              </q-td>
+            </q-tr>
+          </template>
+
+          <template v-slot:pagination="scope">
+            <q-pagination
+              v-model="currentPageHistory"
+              active-color="primary"
+              color="dark"
+              :max="Number(maxPageHistory)"
+              size="sm"
+              boundary-links
+              direction-links
+            ></q-pagination>
+          </template>
+          <template v-slot:no-data="{ icon, message, filter }">
+            <div class="full-width row flex-center text-accent q-gutter-sm">
+              <span
+                ><div
+                  style="
+                    height: 50vh;
+                    display: flex;
+                    flex-direction: column;
+                    justify-content: center;
+                    align-items: center;
+                  "
+                  class="text-grey-5"
+                >
+                  <q-icon name="search" size="4rem" />
+
+                  <span>ไม่พบข้อมูล</span>
+                </div>
+              </span>
+            </div>
+          </template>
+        </d-table>
+      </q-card-section>
+    </q-card>
+  </q-dialog>
 </template>
 
-<style lang="scss">
+<style lang="scss"></style>
-.modalfix {
-  position: fixed !important;
-}
-</style>

src/modules/04_registryNew/components/detail/Achievement/04_DeclarationHonor.vue

@@ -7,7 +7,6 @@ import config from "@/app.config";
 import type { QTableProps, QForm } from "quasar";
 
 import { useCounterMixin } from "@/stores/mixin";
-import HistoryTable from "@/components/TableHistory.vue";
 import DialogHeader from "@/components/DialogHeader.vue";
 import type { RequestItemsObject } from "@/modules/04_registryNew/interface/request/DeclarationHonor";
 import type { ResponseObject } from "@/modules/04_registryNew/interface/response/DeclarationHonor";
@@ -22,7 +21,6 @@ const {
   showLoader,
   hideLoader,
   dialogConfirm,
-  dialogRemove,
 } = mixin;
 const profileId = ref<string>(
   route.params.id ? route.params.id.toString() : ""
@@ -39,15 +37,17 @@ const declHonorForm = reactive<RequestItemsObject>({
   refCommandDate: null,
 });
 
+const currentPage = ref<number>(1);
+const maxPage = ref<number>(1);
+const currentPageHistory = ref<number>(1);
+const maxPageHistory = ref<number>(1);
 const isEdit = ref<boolean>(false);
-const myForm = ref<QForm>();
 const modal = ref<boolean>(false);
-const modelView = ref<string>("table");
+const modeView = ref<string>("table");
 const filterSearch = ref("");
 const filterHistory = ref<string>("");
 const modalHistory = ref<boolean>(false);
 const rowsHistory = ref<ResponseObject[]>([]);
-const tittleHistory = ref<string>("ประวัติแก้ไขประกาศเกียรติคุณ");
 
 const rows = ref<ResponseObject[]>([]);
 
@@ -169,22 +169,22 @@ const columnsHistory = ref<QTableProps["columns"]>([
       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
   {
-    name: "createdFullName",
+    name: "lastUpdateFullName",
     align: "left",
     label: "ผู้ดำเนินการ",
     sortable: true,
-    field: "createdFullName",
+    field: "lastUpdateFullName",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
     sort: (a: string, b: string) =>
       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
   {
-    name: "createdAt",
+    name: "lastUpdatedAt",
     align: "left",
     label: "วันที่แก้ไข",
     sortable: true,
-    field: "createdAt",
+    field: "lastUpdatedAt",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
     format: (v) => date2Thai(v),
@@ -207,8 +207,8 @@ const visibleColumnsHistory = ref<String[]>([
   "issueDate",
   "refCommandNo",
   "refCommandDate",
-  "createdFullName",
+  "lastUpdateFullName",
-  "createdAt",
+  "lastUpdatedAt",
 ]);
 
 async function fetchData() {
@@ -255,19 +255,6 @@ async function addEditData(editStatus: boolean = false) {
   }
 }
 
-// async function clickDelete(dataId: string) {
-//   try {
-//     await http.delete(config.API.profileNewHonorById(dataId));
-//     success($q, "ลบข้อมูลสำเร็จ");
-//     await fetchData();
-//     modal.value = false;
-//   } catch (error) {
-//     messageError($q, error);
-//   } finally {
-//     hideLoader();
-//   }
-// }
-
 function onClickOpenDialog(editStatus: boolean = false, row?: ResponseObject) {
   modal.value = true;
   isEdit.value = editStatus;
@@ -347,45 +334,56 @@ watch(
 );
 </script>
 <template>
-  <q-toolbar style="padding: 0px" class="text-primary">
+  <div class="row items-center q-gutter-x-sm q-py-sm">
-    <q-btn flat round dense icon="add" @click="onClickOpenDialog()">
+    <q-btn color="teal-5" icon="add" flat round @click="onClickOpenDialog()"
-      <q-tooltip>เพิ่ม</q-tooltip>
+      ><q-tooltip>เพิ่มข้อมูล</q-tooltip></q-btn
-    </q-btn>
+    >
+
     <q-space />
     <q-input
+      standout
       dense
-      outlined
-      label="ค้นหา"
-      class="q-mr-sm"
       v-model="filterSearch"
+      ref="filterRef"
+      outlined
+      placeholder="ค้นหา"
+      debounce="300"
     >
       <template v-slot:append>
-        <q-icon name="search" />
+        <q-icon
+          v-if="filterSearch == ''"
+          name="search"
+          @click.stop.prevent="filterSearch = ''"
+          class="cursor-pointer"
+        />
+        <q-icon
+          v-if="filterSearch"
+          name="cancel"
+          @click.stop.prevent="filterSearch = ''"
+          class="cursor-pointer"
+        />
       </template>
     </q-input>
-
     <q-select
-      v-if="modelView === 'table'"
+      v-if="modeView == 'table'"
-      dense
+      v-model="visibleColumns"
       multiple
       outlined
+      dense
+      options-dense
+      :display-value="$q.lang.table.columns"
       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"
+      option-value="name"
+      options-cover
+      style="min-width: 150px"
     />
-
     <q-btn-toggle
+      v-model="modeView"
       dense
-      v-model="modelView"
-      toggle-color="grey-4"
       class="no-shadow toggle-borderd"
+      toggle-color="grey-4"
       :options="[
         { value: 'table', slot: 'table' },
         { value: 'card', slot: 'card' },
@@ -396,36 +394,35 @@ watch(
           name="format_list_bulleted"
           size="24px"
           :style="{
-            color: modelView === 'table' ? '#787B7C' : '#C9D3DB',
+            color: modeView === 'table' ? '#787B7C' : '#C9D3DB',
           }"
         />
       </template>
+
       <template v-slot:card>
         <q-icon
           name="mdi-view-grid-outline"
           size="24px"
           :style="{
-            color: modelView === 'card' ? '#787B7C' : '#C9D3DB',
+            color: modeView === 'card' ? '#787B7C' : '#C9D3DB',
           }"
         />
       </template>
     </q-btn-toggle>
-  </q-toolbar>
+  </div>
 
   <d-table
     flat
     dense
     bordered
-    virtual-scroll
-    ref="table"
-    class="custom-header-table"
     :rows="rows"
     :paging="true"
     :columns="columns"
     :filter="filterSearch"
-    :grid="modelView === 'card'"
+    :grid="modeView === 'card'"
     :visible-columns="visibleColumns"
     :rows-per-page-options="[20, 50, 100]"
+    :card-container-class="modeView === 'card' ? 'q-col-gutter-md' : ''"
   >
     <template v-slot:header="props">
       <q-tr :props="props">
@@ -436,7 +433,7 @@ watch(
       </q-tr>
     </template>
 
-    <template v-slot:body="props" v-if="modelView === 'table'">
+    <template v-slot:body="props" v-if="modeView === 'table'">
       <q-tr :props="props">
         <q-td
           v-for="col in props.cols"
@@ -472,27 +469,12 @@ watch(
           >
             <q-tooltip>ประวัติแก้ไขประกาศเกียรติคุณ</q-tooltip>
           </q-btn>
-          <!-- <q-btn
-            flat
-            dense
-            round
-            size="14px"
-            color="red"
-            icon="mdi-delete"
-            @click="
-              dialogRemove($q, async () => await clickDelete(props.row.id))
-            "
-          >
-            <q-tooltip>ลบข้อมูล</q-tooltip>
-          </q-btn> -->
         </q-td>
       </q-tr>
     </template>
 
     <template v-slot:item="props" v-else>
-      <div
+      <div class="col-xs-12 col-sm-6 col-md-6">
-        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
@@ -537,6 +519,38 @@ watch(
         </q-card>
       </div>
     </template>
+
+    <template v-slot:pagination="scope">
+      <q-pagination
+        v-model="currentPage"
+        active-color="primary"
+        color="dark"
+        :max="Number(maxPage)"
+        size="sm"
+        boundary-links
+        direction-links
+      ></q-pagination>
+    </template>
+    <template v-slot:no-data="{ icon, message, filter }">
+      <div class="full-width row flex-center text-accent q-gutter-sm">
+        <span
+          ><div
+            style="
+              height: 50vh;
+              display: flex;
+              flex-direction: column;
+              justify-content: center;
+              align-items: center;
+            "
+            class="text-grey-5"
+          >
+            <q-icon name="search" size="4rem" />
+
+            <span>ไม่พบข้อมูล</span>
+          </div>
+        </span>
+      </div>
+    </template>
   </d-table>
 
   <q-dialog v-model="modal" persistent>
@@ -742,26 +756,123 @@ watch(
     </q-card>
   </q-dialog>
 
-  <history-table
+  <q-dialog v-model="modalHistory" persistent>
-    :rows="rowsHistory"
+    <q-card style="min-width: 80%">
-    :columns="columnsHistory"
+      <q-card-section class="flex justify-between" style="padding: 0">
-    :filter="filterHistory"
+        <DialogHeader
-    :visible-columns="visibleColumnsHistory"
+          tittle="ประวัติแก้ไขประกาศเกียรติคุณ"
-    v-model:modal="modalHistory"
+          :close="() => (modalHistory = false)"
-    v-model:inputfilter="filterHistory"
+        />
-    v-model:inputvisible="visibleColumnsHistory"
+      </q-card-section>
-    v-model:tittle="tittleHistory"
+
-  >
+      <q-separator />
-    <template #columns="props">
+      <q-card-section class="q-p-sm">
-      <q-tr :props="props">
+        <div class="row q-gutter-sm q-mb-sm">
-        <q-td v-for="col in props.cols" :key="col.name" :props="props">
+          <q-space />
-          <div class="table_ellipsis">
+          <q-input
-            {{ col.value ? col.value : "-" }}
+            standout
-          </div>
+            dense
-        </q-td>
+            v-model="filterHistory"
-      </q-tr>
+            ref="filterRef"
-    </template>
+            outlined
-  </history-table>
+            placeholder="ค้นหา"
+            debounce="300"
+          >
+            <template v-slot:append>
+              <q-icon
+                v-if="filterHistory == ''"
+                name="search"
+                @click.stop.prevent="filterHistory = ''"
+                class="cursor-pointer"
+              />
+              <q-icon
+                v-if="filterHistory"
+                name="cancel"
+                @click.stop.prevent="filterHistory = ''"
+                class="cursor-pointer"
+              />
+            </template>
+          </q-input>
+          <q-select
+            v-model="visibleColumnsHistory"
+            multiple
+            outlined
+            dense
+            options-dense
+            :display-value="$q.lang.table.columns"
+            emit-value
+            map-options
+            :options="columnsHistory"
+            option-value="name"
+            options-cover
+            style="min-width: 150px"
+          />
+        </div>
+        <d-table
+          ref="table"
+          flat
+          bordered
+          dense
+          :columns="columnsHistory"
+          :rows="rowsHistory"
+          :paging="true"
+          :rows-per-page-options="[10, 25, 50, 100]"
+          :visible-columns="visibleColumnsHistory"
+          :filter="filterHistory"
+        >
+          >
+          <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-tr>
+          </template>
+          <template v-slot:body="props">
+            <q-tr :props="props" class="cursor-pointer">
+              <q-td v-for="col in props.cols" :key="col.id">
+                <div>
+                  {{ col.value ? col.value : "-" }}
+                </div>
+              </q-td>
+            </q-tr>
+          </template>
+
+          <template v-slot:pagination="scope">
+            <q-pagination
+              v-model="currentPageHistory"
+              active-color="primary"
+              color="dark"
+              :max="Number(maxPageHistory)"
+              size="sm"
+              boundary-links
+              direction-links
+            ></q-pagination>
+          </template>
+          <template v-slot:no-data="{ icon, message, filter }">
+            <div class="full-width row flex-center text-accent q-gutter-sm">
+              <span
+                ><div
+                  style="
+                    height: 50vh;
+                    display: flex;
+                    flex-direction: column;
+                    justify-content: center;
+                    align-items: center;
+                  "
+                  class="text-grey-5"
+                >
+                  <q-icon name="search" size="4rem" />
+
+                  <span>ไม่พบข้อมูล</span>
+                </div>
+              </span>
+            </div>
+          </template>
+        </d-table>
+      </q-card-section>
+    </q-card>
+  </q-dialog>
 </template>
 
 <style scoped></style>

src/modules/04_registryNew/components/detail/Achievement/05_ResultsPerformance.vue

@@ -8,7 +8,6 @@ import type { QTableProps, QForm } from "quasar";
 
 import { useCounterMixin } from "@/stores/mixin";
 import { useResultsPerformDataStore } from "@/modules/04_registryNew/stores/ResultsPerformance";
-import HistoryTable from "@/components/TableHistory.vue";
 import DialogHeader from "@/components/DialogHeader.vue";
 
 import type { RequestItemsObject } from "@/modules/04_registryNew/interface/request/ResultsPerformance";
@@ -26,7 +25,6 @@ const {
   showLoader,
   hideLoader,
   dialogConfirm,
-  dialogRemove,
 } = mixin;
 const profileId = ref<string>(
   route.params.id ? route.params.id.toString() : ""
@@ -44,15 +42,17 @@ const resPerformForm = reactive<RequestItemsObject>({
   date: null,
 });
 
+const currentPage = ref<number>(1);
+const maxPage = ref<number>(1);
+const currentPageHistory = ref<number>(1);
+const maxPageHistory = ref<number>(1);
 const isEdit = ref<boolean>(false);
-const myForm = ref<QForm>();
 const modal = ref<boolean>(false);
-const modelView = ref<string>("table");
+const modeView = ref<string>("table");
 const filterSearch = ref("");
 const filterHistory = ref<string>("");
 const modalHistory = ref<boolean>(false);
 const rowsHistory = ref<ResponseObject[]>([]);
-const tittleHistory = ref<string>("ประวัติแก้ไขผลการประเมินการปฏิบัติราชการ");
 
 const rows = ref<ResponseObject[]>([]);
 
@@ -146,6 +146,16 @@ const columns = ref<QTableProps["columns"]>([
   },
 ]);
 const columnsHistory = ref<QTableProps["columns"]>([
+  {
+    name: "date",
+    align: "left",
+    label: "วันที่ได้รับ",
+    sortable: true,
+    field: "date",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    format: (v) => date2Thai(v),
+  },
   {
     name: "point1Total",
     align: "left",
@@ -222,22 +232,22 @@ const columnsHistory = ref<QTableProps["columns"]>([
       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
   {
-    name: "createdFullName",
+    name: "lastUpdateFullName",
     align: "left",
     label: "ผู้ดำเนินการ",
     sortable: true,
-    field: "createdFullName",
+    field: "lastUpdateFullName",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
     sort: (a: string, b: string) =>
       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
   {
-    name: "createdAt",
+    name: "lastUpdatedAt",
     align: "left",
     label: "วันที่แก้ไข",
     sortable: true,
-    field: "createdAt",
+    field: "lastUpdatedAt",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
     format: (v) => date2Thai(v),
@@ -254,8 +264,8 @@ const visibleColumnsHistory = ref<String[]>([
   "pointSum",
   "name",
   "date",
-  "createdFullName",
+  "lastUpdateFullName",
-  "createdAt",
+  "lastUpdatedAt",
 ]);
 
 const visibleColumns = ref<String[]>([
@@ -308,19 +318,6 @@ async function addEditData(editStatus: boolean = false) {
   }
 }
 
-// async function clickDelete(dataId: string) {
-//   try {
-//     await http.delete(config.API.profileNewAssessmentsById(dataId));
-//     success($q, "ลบข้อมูลสำเร็จ");
-//     await fetchData();
-//     modal.value = false;
-//   } catch (error) {
-//     messageError($q, error);
-//   } finally {
-//     hideLoader();
-//   }
-// }
-
 function onClickOpenDialog(editStatus: boolean = false, row?: ResponseObject) {
   modal.value = true;
   isEdit.value = editStatus;
@@ -390,45 +387,56 @@ onMounted(async () => {
 });
 </script>
 <template>
-  <q-toolbar style="padding: 0px" class="text-primary">
+  <div class="row items-center q-gutter-x-sm q-py-sm">
-    <q-btn flat round dense icon="add" @click="onClickOpenDialog()">
+    <q-btn color="teal-5" icon="add" flat round @click="onClickOpenDialog()"
-      <q-tooltip>เพิ่ม</q-tooltip>
+      ><q-tooltip>เพิ่มข้อมูล</q-tooltip></q-btn
-    </q-btn>
+    >
+
     <q-space />
     <q-input
+      standout
       dense
-      outlined
-      label="ค้นหา"
-      class="q-mr-sm"
       v-model="filterSearch"
+      ref="filterRef"
+      outlined
+      placeholder="ค้นหา"
+      debounce="300"
     >
       <template v-slot:append>
-        <q-icon name="search" />
+        <q-icon
+          v-if="filterSearch == ''"
+          name="search"
+          @click.stop.prevent="filterSearch = ''"
+          class="cursor-pointer"
+        />
+        <q-icon
+          v-if="filterSearch"
+          name="cancel"
+          @click.stop.prevent="filterSearch = ''"
+          class="cursor-pointer"
+        />
       </template>
     </q-input>
-
     <q-select
-      v-if="modelView === 'table'"
+      v-if="modeView == 'table'"
-      dense
+      v-model="visibleColumns"
       multiple
       outlined
+      dense
+      options-dense
+      :display-value="$q.lang.table.columns"
       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"
+      option-value="name"
+      options-cover
+      style="min-width: 150px"
     />
-
     <q-btn-toggle
+      v-model="modeView"
       dense
-      v-model="modelView"
-      toggle-color="grey-4"
       class="no-shadow toggle-borderd"
+      toggle-color="grey-4"
       :options="[
         { value: 'table', slot: 'table' },
         { value: 'card', slot: 'card' },
@@ -439,35 +447,35 @@ onMounted(async () => {
           name="format_list_bulleted"
           size="24px"
           :style="{
-            color: modelView === 'table' ? '#787B7C' : '#C9D3DB',
+            color: modeView === 'table' ? '#787B7C' : '#C9D3DB',
           }"
         />
       </template>
+
       <template v-slot:card>
         <q-icon
           name="mdi-view-grid-outline"
           size="24px"
           :style="{
-            color: modelView === 'card' ? '#787B7C' : '#C9D3DB',
+            color: modeView === 'card' ? '#787B7C' : '#C9D3DB',
           }"
         />
       </template>
     </q-btn-toggle>
-  </q-toolbar>
+  </div>
 
   <d-table
     flat
     dense
     bordered
-    virtual-scroll
-    ref="table"
-    class="custom-header-table"
     :rows="rows"
+    :paging="true"
     :columns="columns"
     :filter="filterSearch"
-    :grid="modelView === 'card'"
+    :grid="modeView === 'card'"
     :visible-columns="visibleColumns"
     :rows-per-page-options="[20, 50, 100]"
+    :card-container-class="modeView === 'card' ? 'q-col-gutter-md' : ''"
   >
     <template v-slot:header="props">
       <q-tr :props="props">
@@ -478,7 +486,7 @@ onMounted(async () => {
       </q-tr>
     </template>
 
-    <template v-slot:body="props" v-if="modelView === 'table'">
+    <template v-slot:body="props" v-if="modeView === 'table'">
       <q-tr :props="props">
         <q-td
           v-for="col in props.cols"
@@ -514,27 +522,12 @@ onMounted(async () => {
           >
             <q-tooltip>ประวัติแก้ไขผลการประเมินการปฏิบัติราชการ</q-tooltip>
           </q-btn>
-          <!-- <q-btn
-            flat
-            dense
-            round
-            size="14px"
-            color="red"
-            icon="mdi-delete"
-            @click="
-              dialogRemove($q, async () => await clickDelete(props.row.id))
-            "
-          >
-            <q-tooltip>ลบข้อมูล</q-tooltip>
-          </q-btn> -->
         </q-td>
       </q-tr>
     </template>
 
     <template v-slot:item="props" v-else>
-      <div
+      <div class="col-xs-12 col-sm-6 col-md-6">
-        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
@@ -579,6 +572,37 @@ onMounted(async () => {
         </q-card>
       </div>
     </template>
+    <template v-slot:pagination="scope">
+      <q-pagination
+        v-model="currentPage"
+        active-color="primary"
+        color="dark"
+        :max="Number(maxPage)"
+        size="sm"
+        boundary-links
+        direction-links
+      ></q-pagination>
+    </template>
+    <template v-slot:no-data="{ icon, message, filter }">
+      <div class="full-width row flex-center text-accent q-gutter-sm">
+        <span
+          ><div
+            style="
+              height: 50vh;
+              display: flex;
+              flex-direction: column;
+              justify-content: center;
+              align-items: center;
+            "
+            class="text-grey-5"
+          >
+            <q-icon name="search" size="4rem" />
+
+            <span>ไม่พบข้อมูล</span>
+          </div>
+        </span>
+      </div>
+    </template>
   </d-table>
 
   <q-dialog v-model="modal" persistent>
@@ -642,6 +666,11 @@ onMounted(async () => {
                 input-class="text-right "
                 :label="`${'ส่วนที่1 (คะแนน)'}`"
                 :rules="[(val) => !!val || `${'กรุณากรอกส่วนที่1 (คะแนน)'}`]"
+                @update:model-value="
+                  resPerformForm.point1Total > 100
+                    ? (resPerformForm.point1Total = 100)
+                    : ''
+                "
               />
             </div>
             <div class="col-xs-6 col-sm-6 col-md-6">
@@ -658,6 +687,11 @@ onMounted(async () => {
                 :rules="[
                   (val) => !!val || `${'กรุณากรอกผลประเมินส่วนที่1 (คะแนน)'}`,
                 ]"
+                @update:model-value="
+                  resPerformForm.point1 > 100
+                    ? (resPerformForm.point1 = 100)
+                    : ''
+                "
               />
             </div>
             <div class="col-xs-6 col-sm-6 col-md-6">
@@ -672,6 +706,11 @@ onMounted(async () => {
                 input-class="text-right"
                 :label="`${'ส่วนที่2 (คะแนน)'}`"
                 :rules="[(val) => !!val || `${'กรุณากรอกส่วนที่2 (คะแนน)'}`]"
+                @update:model-value="
+                  resPerformForm.point2Total > 100
+                    ? (resPerformForm.point2Total = 100)
+                    : ''
+                "
               />
             </div>
             <div class="col-xs-6 col-sm-6 col-md-6">
@@ -688,6 +727,11 @@ onMounted(async () => {
                 :rules="[
                   (val) => !!val || `${'กรุณากรอกผลประเมินส่วนที่2 (คะแนน)'}`,
                 ]"
+                @update:model-value="
+                  resPerformForm.point2 > 100
+                    ? (resPerformForm.point2 = 100)
+                    : ''
+                "
               />
             </div>
             <div class="col-xs-6 col-sm-6 col-md-6">
@@ -702,6 +746,11 @@ onMounted(async () => {
                 input-class="text-right"
                 :label="`${'ผลรวม (คะแนน)'}`"
                 :rules="[(val) => !!val || `${'กรุณากรอกผลรวม (คะแนน)'}`]"
+                @update:model-value="
+                  resPerformForm.pointSumTotal > 100
+                    ? (resPerformForm.pointSumTotal = 100)
+                    : ''
+                "
               />
             </div>
             <div class="col-xs-6 col-sm-6 col-md-6">
@@ -718,6 +767,11 @@ onMounted(async () => {
                 :rules="[
                   (val) => !!val || `${'กรุณากรอกผลประเมินรวม (คะแนน)'}`,
                 ]"
+                @update:model-value="
+                  resPerformForm.pointSum > 100
+                    ? (resPerformForm.pointSum = 100)
+                    : ''
+                "
               />
             </div>
             <div class="text-subtitle2 col-12 row items-center">
@@ -748,26 +802,123 @@ onMounted(async () => {
     </q-card>
   </q-dialog>
 
-  <history-table
+  <q-dialog v-model="modalHistory" persistent>
-    :rows="rowsHistory"
+    <q-card style="min-width: 80%">
-    :columns="columnsHistory"
+      <q-card-section class="flex justify-between" style="padding: 0">
-    :filter="filterHistory"
+        <DialogHeader
-    :visible-columns="visibleColumnsHistory"
+          tittle="ประวัติแก้ไขผลการประเมินการปฏิบัติราชการ"
-    v-model:modal="modalHistory"
+          :close="() => (modalHistory = false)"
-    v-model:inputfilter="filterHistory"
+        />
-    v-model:inputvisible="visibleColumnsHistory"
+      </q-card-section>
-    v-model:tittle="tittleHistory"
+
-  >
+      <q-separator />
-    <template #columns="props">
+      <q-card-section class="q-p-sm">
-      <q-tr :props="props">
+        <div class="row q-gutter-sm q-mb-sm">
-        <q-td v-for="col in props.cols" :key="col.name" :props="props">
+          <q-space />
-          <div class="table_ellipsis">
+          <q-input
-            {{ col.value }}
+            standout
-          </div>
+            dense
-        </q-td>
+            v-model="filterHistory"
-      </q-tr>
+            ref="filterRef"
-    </template>
+            outlined
-  </history-table>
+            placeholder="ค้นหา"
+            debounce="300"
+          >
+            <template v-slot:append>
+              <q-icon
+                v-if="filterHistory == ''"
+                name="search"
+                @click.stop.prevent="filterHistory = ''"
+                class="cursor-pointer"
+              />
+              <q-icon
+                v-if="filterHistory"
+                name="cancel"
+                @click.stop.prevent="filterHistory = ''"
+                class="cursor-pointer"
+              />
+            </template>
+          </q-input>
+          <q-select
+            v-model="visibleColumnsHistory"
+            multiple
+            outlined
+            dense
+            options-dense
+            :display-value="$q.lang.table.columns"
+            emit-value
+            map-options
+            :options="columnsHistory"
+            option-value="name"
+            options-cover
+            style="min-width: 150px"
+          />
+        </div>
+        <d-table
+          ref="table"
+          flat
+          bordered
+          dense
+          :columns="columnsHistory"
+          :rows="rowsHistory"
+          :paging="true"
+          :rows-per-page-options="[10, 25, 50, 100]"
+          :visible-columns="visibleColumnsHistory"
+          :filter="filterHistory"
+        >
+          >
+          <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-tr>
+          </template>
+          <template v-slot:body="props">
+            <q-tr :props="props" class="cursor-pointer">
+              <q-td v-for="col in props.cols" :key="col.id">
+                <div>
+                  {{ col.value ? col.value : "-" }}
+                </div>
+              </q-td>
+            </q-tr>
+          </template>
+
+          <template v-slot:pagination="scope">
+            <q-pagination
+              v-model="currentPageHistory"
+              active-color="primary"
+              color="dark"
+              :max="Number(maxPageHistory)"
+              size="sm"
+              boundary-links
+              direction-links
+            ></q-pagination>
+          </template>
+          <template v-slot:no-data="{ icon, message, filter }">
+            <div class="full-width row flex-center text-accent q-gutter-sm">
+              <span
+                ><div
+                  style="
+                    height: 50vh;
+                    display: flex;
+                    flex-direction: column;
+                    justify-content: center;
+                    align-items: center;
+                  "
+                  class="text-grey-5"
+                >
+                  <q-icon name="search" size="4rem" />
+
+                  <span>ไม่พบข้อมูล</span>
+                </div>
+              </span>
+            </div>
+          </template>
+        </d-table>
+      </q-card-section>
+    </q-card>
+  </q-dialog>
 </template>
 
 <style scoped></style>

src/modules/04_registryNew/components/detail/Other/01_OtherInformationHistory.vue

@@ -40,8 +40,8 @@ const formFilter = reactive<FormFilter>({
 const visibleColumns = ref<String[]>([
   "date",
   "detail",
-  "createdFullName",
+  "lastUpdateFullName",
-  "createdAt",
+  "lastUpdatedAt",
 ]);
 const columns = ref<QTableProps["columns"]>([
   {
@@ -66,22 +66,22 @@ const columns = ref<QTableProps["columns"]>([
       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
   {
-    name: "createdFullName",
+    name: "lastUpdateFullName",
     align: "left",
     label: "ผู้ดำเนินการ",
     sortable: true,
-    field: "createdFullName",
+    field: "lastUpdateFullName",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
     sort: (a: string, b: string) =>
       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
   {
-    name: "createdAt",
+    name: "lastUpdatedAt",
     align: "left",
     label: "วันที่แก้ไข",
     sortable: true,
-    field: "createdAt",
+    field: "lastUpdatedAt",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
     format: (v) => date2Thai(v),
@@ -101,8 +101,8 @@ function getHistory() {
           id: e.id,
           date: e.date,
           detail: e.detail,
-          createdFullName: e.createdFullName,
+          lastUpdateFullName: e.lastUpdateFullName,
-          createdAt: new Date(e.createdAt),
+          lastUpdatedAt: new Date(e.lastUpdatedAt),
         });
       });
     })

src/modules/04_registryNew/components/detail/PersonalInformation/01_Profile.vue

@@ -8,7 +8,6 @@ import config from "@/app.config";
 
 import { useCounterMixin } from "@/stores/mixin";
 import { useProfileDataStore } from "@/modules/04_registryNew/stores/profile";
-import HistoryTable from "@/components/TableHistory.vue";
 import DialogHeader from "@/components/DialogHeader.vue";
 import type { RequestObject } from "@/modules/04_registryNew/interface/request/Profile";
 import type { ResponseObject } from "@/modules/04_registryNew/interface/response/Profile";
@@ -30,10 +29,11 @@ const profileId = ref<string>(
   route.params.id ? route.params.id.toString() : ""
 );
 
+const currentPage = ref<number>(1);
+const maxPage = ref<number>(1);
 const modal = ref<boolean>(false);
 const informaData = ref<ResponseObject>();
 const rowsHistory = ref<ResponseObject[]>([]);
-const tittleHistory = ref<string>("ประวัติแก้ไขข้อมูลส่วนตัว");
 const filterHistory = ref<string>("");
 const modalHistory = ref<boolean>(false);
 
@@ -746,26 +746,123 @@ onMounted(async () => {
     </q-card>
   </q-dialog>
 
-  <history-table
+  <q-dialog v-model="modalHistory" persistent>
-    :rows="rowsHistory"
+    <q-card style="min-width: 80%">
-    :filter="filterHistory"
+      <q-card-section class="flex justify-between" style="padding: 0">
-    :columns="columnsHistory"
+        <DialogHeader
-    :visible-columns="visibleColumnsHistory"
+          tittle="ประวัติแก้ไขข้อมูลส่วนตัว"
-    v-model:modal="modalHistory"
+          :close="() => (modalHistory = false)"
-    v-model:tittle="tittleHistory"
+        />
-    v-model:inputfilter="filterHistory"
+      </q-card-section>
-    v-model:inputvisible="visibleColumnsHistory"
+
-  >
+      <q-separator />
-    <template #columns="props">
+      <q-card-section class="q-p-sm">
-      <q-tr :props="props">
+        <div class="row q-gutter-sm q-mb-sm">
-        <q-td v-for="col in props.cols" :key="col.name" :props="props">
+          <q-space />
-          <div class="table_ellipsis">
+          <q-input
-            {{ col.value ? col.value : "-" }}
+            standout
-          </div>
+            dense
-        </q-td>
+            v-model="filterHistory"
-      </q-tr>
+            ref="filterRef"
-    </template>
+            outlined
-  </history-table>
+            placeholder="ค้นหา"
+            debounce="300"
+          >
+            <template v-slot:append>
+              <q-icon
+                v-if="filterHistory == ''"
+                name="search"
+                @click.stop.prevent="filterHistory = ''"
+                class="cursor-pointer"
+              />
+              <q-icon
+                v-if="filterHistory"
+                name="cancel"
+                @click.stop.prevent="filterHistory = ''"
+                class="cursor-pointer"
+              />
+            </template>
+          </q-input>
+          <q-select
+            v-model="visibleColumnsHistory"
+            multiple
+            outlined
+            dense
+            options-dense
+            :display-value="$q.lang.table.columns"
+            emit-value
+            map-options
+            :options="columnsHistory"
+            option-value="name"
+            options-cover
+            style="min-width: 150px"
+          />
+        </div>
+        <d-table
+          ref="table"
+          flat
+          bordered
+          dense
+          :columns="columnsHistory"
+          :rows="rowsHistory"
+          :paging="true"
+          :rows-per-page-options="[10, 25, 50, 100]"
+          :visible-columns="visibleColumnsHistory"
+          :filter="filterHistory"
+        >
+          >
+          <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-tr>
+          </template>
+          <template v-slot:body="props">
+            <q-tr :props="props" class="cursor-pointer">
+              <q-td v-for="col in props.cols" :key="col.id">
+                <div>
+                  {{ col.value ? col.value : "-" }}
+                </div>
+              </q-td>
+            </q-tr>
+          </template>
+
+          <template v-slot:pagination="scope">
+            <q-pagination
+              v-model="currentPage"
+              active-color="primary"
+              color="dark"
+              :max="Number(maxPage)"
+              size="sm"
+              boundary-links
+              direction-links
+            ></q-pagination>
+          </template>
+          <template v-slot:no-data="{ icon, message, filter }">
+            <div class="full-width row flex-center text-accent q-gutter-sm">
+              <span
+                ><div
+                  style="
+                    height: 50vh;
+                    display: flex;
+                    flex-direction: column;
+                    justify-content: center;
+                    align-items: center;
+                  "
+                  class="text-grey-5"
+                >
+                  <q-icon name="search" size="4rem" />
+
+                  <span>ไม่พบข้อมูล</span>
+                </div>
+              </span>
+            </div>
+          </template>
+        </d-table>
+      </q-card-section>
+    </q-card>
+  </q-dialog>
 </template>
 
 <style lang="scss">

src/modules/04_registryNew/components/detail/PersonalInformation/03_Address.vue

@@ -7,7 +7,6 @@ import http from "@/plugins/http";
 import config from "@/app.config";
 
 import DialogHeader from "@/components/DialogHeader.vue";
-import HistoryTable from "@/components/TableHistory.vue";
 import { useCounterMixin } from "@/stores/mixin";
 import { useAddressDataStore } from "@/modules/04_registryNew/stores/Address";
 
@@ -37,10 +36,11 @@ const profileId = ref<string>(
   route.params.id ? route.params.id.toString() : ""
 );
 
+const currentPage = ref<number>(1);
+const maxPage = ref<number>(1);
 const modal = ref<boolean>(false);
 const modalHistory = ref<boolean>(false);
 const rowsHistory = ref<ResponseObject[]>([]);
-const tittleHistory = ref<string>("ประวัติแก้ไขข้อมูลที่อยู่");
 const filterHistory = ref<string>("");
 
 const id = ref<string>("");
@@ -810,26 +810,123 @@ onMounted(async () => {
     </q-card>
   </q-dialog>
 
-  <HistoryTable
+  <q-dialog v-model="modalHistory" persistent>
-    v-model:modal="modalHistory"
+    <q-card style="min-width: 80%">
-    v-model:tittle="tittleHistory"
+      <q-card-section class="flex justify-between" style="padding: 0">
-    v-model:inputfilter="filterHistory"
+        <DialogHeader
-    v-model:inputvisible="visibleColumnsHistory"
+          tittle="ประวัติแก้ไขข้อมูลที่อยู่"
-    :rows="rowsHistory"
+          :close="() => (modalHistory = false)"
-    :filter="filterHistory"
+        />
-    :columns="columnsHistory"
+      </q-card-section>
-    :visible-columns="visibleColumnsHistory"
+
-  >
+      <q-separator />
-    <template #columns="props">
+      <q-card-section class="q-p-sm">
-      <q-tr :props="props">
+        <div class="row q-gutter-sm q-mb-sm">
-        <q-td v-for="col in props.cols" :key="col.name" :props="props">
+          <q-space />
-          <div class="table_ellipsis">
+          <q-input
-            {{ col.value }}
+            standout
-          </div>
+            dense
-        </q-td>
+            v-model="filterHistory"
-      </q-tr>
+            ref="filterRef"
-    </template>
+            outlined
-  </HistoryTable>
+            placeholder="ค้นหา"
+            debounce="300"
+          >
+            <template v-slot:append>
+              <q-icon
+                v-if="filterHistory == ''"
+                name="search"
+                @click.stop.prevent="filterHistory = ''"
+                class="cursor-pointer"
+              />
+              <q-icon
+                v-if="filterHistory"
+                name="cancel"
+                @click.stop.prevent="filterHistory = ''"
+                class="cursor-pointer"
+              />
+            </template>
+          </q-input>
+          <q-select
+            v-model="visibleColumnsHistory"
+            multiple
+            outlined
+            dense
+            options-dense
+            :display-value="$q.lang.table.columns"
+            emit-value
+            map-options
+            :options="columnsHistory"
+            option-value="name"
+            options-cover
+            style="min-width: 150px"
+          />
+        </div>
+        <d-table
+          ref="table"
+          flat
+          bordered
+          dense
+          :columns="columnsHistory"
+          :rows="rowsHistory"
+          :paging="true"
+          :rows-per-page-options="[10, 25, 50, 100]"
+          :visible-columns="visibleColumnsHistory"
+          :filter="filterHistory"
+        >
+          >
+          <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-tr>
+          </template>
+          <template v-slot:body="props">
+            <q-tr :props="props" class="cursor-pointer">
+              <q-td v-for="col in props.cols" :key="col.id">
+                <div>
+                  {{ col.value ? col.value : "-" }}
+                </div>
+              </q-td>
+            </q-tr>
+          </template>
+
+          <template v-slot:pagination="scope">
+            <q-pagination
+              v-model="currentPage"
+              active-color="primary"
+              color="dark"
+              :max="Number(maxPage)"
+              size="sm"
+              boundary-links
+              direction-links
+            ></q-pagination>
+          </template>
+          <template v-slot:no-data="{ icon, message, filter }">
+            <div class="full-width row flex-center text-accent q-gutter-sm">
+              <span
+                ><div
+                  style="
+                    height: 50vh;
+                    display: flex;
+                    flex-direction: column;
+                    justify-content: center;
+                    align-items: center;
+                  "
+                  class="text-grey-5"
+                >
+                  <q-icon name="search" size="4rem" />
+
+                  <span>ไม่พบข้อมูล</span>
+                </div>
+              </span>
+            </div>
+          </template>
+        </d-table>
+      </q-card-section>
+    </q-card>
+  </q-dialog>
 </template>
 
 <style scoped></style>

src/modules/04_registryNew/components/detail/Salary/02_NotReceiveSalaryHistory.vue

@@ -24,7 +24,7 @@ const columns = ref<QTableProps["columns"]>([
     align: "left",
     label: "วัน เดือน ปี",
     sortable: true,
-    field: "detail",
+    field: "date",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
     format: (v) => date2Thai(v),
@@ -77,22 +77,22 @@ const columns = ref<QTableProps["columns"]>([
       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
   {
-    name: "createdFullName",
+    name: "lastUpdateFullName",
     align: "left",
     label: "ผู้ดำเนินการ",
     sortable: true,
-    field: "createdFullName",
+    field: "lastUpdateFullName",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
     sort: (a: string, b: string) =>
       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
   {
-    name: "createdAt",
+    name: "lastUpdatedAt",
     align: "left",
     label: "วันที่แก้ไข",
     sortable: true,
-    field: "createdAt",
+    field: "lastUpdatedAt",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
     format: (v) => date2Thai(v),
@@ -106,8 +106,8 @@ const visibleColumns = ref<string[]>([
   "detail",
   "refCommandNo",
   "refCommandDate",
-  "createdFullName",
+  "lastUpdateFullName",
-  "createdAt",
+  "lastUpdatedAt",
 ]);
 const pagination = ref({
   page: 1,
@@ -151,7 +151,7 @@ watch(modal, (status) => {
       />
       <q-separator />
       <q-card-section class="q-pa-sm">
-        <q-toolbar style="padding: 0px" class="text-primary">
+        <q-toolbar style="padding: 0px" class="text-primary q-mb-sm">
           <q-space />
           <q-input
             dense
@@ -222,6 +222,26 @@ watch(modal, (status) => {
             direction-links
           ></q-pagination>
         </template> -->
+          <template v-slot:no-data="{ icon, message, filter }">
+            <div class="full-width row flex-center text-accent q-gutter-sm">
+              <span
+                ><div
+                  style="
+                    height: 50vh;
+                    display: flex;
+                    flex-direction: column;
+                    justify-content: center;
+                    align-items: center;
+                  "
+                  class="text-grey-5"
+                >
+                  <q-icon name="search" size="4rem" />
+
+                  <span>ไม่พบข้อมูล</span>
+                </div>
+              </span>
+            </div>
+          </template>
         </d-table>
       </q-card-section>
     </q-card>

src/modules/04_registryNew/interface/index/other.ts

@@ -2,8 +2,8 @@ interface RowList {
     id: string;
     date: Date | null;
     detail: string;
-    createdFullName: string;
+    lastUpdateFullName: string;
-    createdAt: Date;
+    lastUpdatedAt: Date;
 }
 
 interface FormFilter {