From 5825f72e26a024ce724e16b2547025636911274e Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Wed, 8 Oct 2025 16:59:13 +0700
Subject: [PATCH 1/7] fix(complaints):sort

---
 .../components/1_Complaint/MainPage.vue       | 271 +++++++++---------
 .../components/1_Complaint/TableComplaint.vue |  60 +---
 .../components/DialogSearchAdvanced.vue       |  23 +-
 3 files changed, 167 insertions(+), 187 deletions(-)

diff --git a/src/modules/11_discipline/components/1_Complaint/MainPage.vue b/src/modules/11_discipline/components/1_Complaint/MainPage.vue
index c7fab72c0..cda75e312 100644
--- a/src/modules/11_discipline/components/1_Complaint/MainPage.vue
+++ b/src/modules/11_discipline/components/1_Complaint/MainPage.vue
@@ -11,6 +11,7 @@ import { checkPermission } from "@/utils/permissions";
 import { useCounterMixin } from "@/stores/mixin";
 import { useComplainstDataStore } from "@/modules/11_discipline/store/ComplaintsStore";
 import { useDisciplineMainStore } from "@/modules/11_discipline/store/Main";
+import { usePagination } from "@/composables/usePagination";
 
 import type { DataOption } from "@/modules/11_discipline/interface/index/Main";
 
@@ -25,51 +26,51 @@ const mixin = useCounterMixin();
 const complainstStore = useComplainstDataStore();
 const { fetchComplainst } = complainstStore;
 const { showLoader, messageError, hideLoader, convertDateToAPI } = mixin;
+const { pagination, params, onRequest } = usePagination("", getList);
 
-const filterRef = ref<HTMLInputElement | null>(null);
-const filterTable = ref<string>("");
 const filterKeyword = ref<string>("");
-
-const toptitle = ref<number>(0);
 const statusFilter = ref<string>("NEW");
 const option = ref<DataOption[]>(complainstStore.statusOptions);
 
-const total = ref<number>(0);
-const totalList = ref<number>(1);
-const pagination = ref({
-  sortBy: "createdAt",
-  descending: true,
-  page: 1,
-  rowsPerPage: 10,
-});
-
 /** ดึงข้อมูล เรื่องร้องเรียน */
-async function getList(page?: number) {
+async function getList() {
   const body = {
-    page: page ? page : pagination.value.page,
-    pageSize: pagination.value.rowsPerPage,
+    ...params.value,
     keyword: filterKeyword.value.trim(),
     status: statusFilter.value,
-    ...(store.formComplaint.dateReceived?.[0] && { dateReceivedStart: convertDateToAPI(store.formComplaint.dateReceived[0])}),
-    ...(store.formComplaint.dateReceived?.[1] && { dateReceivedEnd: convertDateToAPI(store.formComplaint.dateReceived[1])}),
-    ...(store.formComplaint.respondentType && { respondentType: store.formComplaint.respondentType}),
-    ...(store.formComplaint.offenseDetails && { offenseDetails: store.formComplaint.offenseDetails}),
-    ...(store.formComplaint.levelConsideration && { levelConsideration: store.formComplaint.levelConsideration}),
-    ...(store.formComplaint.dateConsideration?.[0] && { dateConsiderationStart: convertDateToAPI( store.formComplaint.dateConsideration[0])}),
-    ...(store.formComplaint.dateConsideration?.[1] && { dateConsiderationEnd: convertDateToAPI( store.formComplaint.dateConsideration[1])}),
+    ...(store.formComplaint.dateReceived?.[0] && {
+      dateReceivedStart: convertDateToAPI(store.formComplaint.dateReceived[0]),
+    }),
+    ...(store.formComplaint.dateReceived?.[1] && {
+      dateReceivedEnd: convertDateToAPI(store.formComplaint.dateReceived[1]),
+    }),
+    ...(store.formComplaint.respondentType && {
+      respondentType: store.formComplaint.respondentType,
+    }),
+    ...(store.formComplaint.offenseDetails && {
+      offenseDetails: store.formComplaint.offenseDetails,
+    }),
+    ...(store.formComplaint.levelConsideration && {
+      levelConsideration: store.formComplaint.levelConsideration,
+    }),
+    ...(store.formComplaint.dateConsideration?.[0] && {
+      dateConsiderationStart: convertDateToAPI(
+        store.formComplaint.dateConsideration[0]
+      ),
+    }),
+    ...(store.formComplaint.dateConsideration?.[1] && {
+      dateConsiderationEnd: convertDateToAPI(
+        store.formComplaint.dateConsideration[1]
+      ),
+    }),
   };
   showLoader();
   await http
     .post(config.API.complaintList(), body)
-    //
     .then(async (res) => {
-      totalList.value = Math.ceil(
-        res.data.result.total / pagination.value.rowsPerPage
-      );
-      total.value = res.data.result.total;
-      toptitle.value = res.data.result.total;
-      const data = res.data.result.data;
-      await fetchComplainst(data);
+      const result = res.data.result;
+      pagination.value.rowsNumber = result.total;
+      await fetchComplainst(result.data);
     })
     .catch((e) => {
       messageError($q, e);
@@ -102,13 +103,6 @@ function getSearch() {
   getList();
 }
 
-watch(
-  () => pagination.value.rowsPerPage,
-  async () => {
-    getSearch();
-  }
-);
-
 /** เรียกใช้งาน ฟังชั่น ตอนเริ่มโหลดหน้า */
 onMounted(async () => {
   await getList();
@@ -119,99 +113,120 @@ onMounted(async () => {
   <div class="toptitle text-dark col-12 row items-center">
     รายการเรื่องร้องเรียน
   </div>
-  <q-card flat bordered class="col-12 q-mt-sm q-pa-md">
-    <div class="row col-12 q-col-gutter-sm q-mb-sm items-center">
-      <q-select
-        v-model="statusFilter"
-        label="สถานะ"
-        dense
-        outlined
-        emit-value
-        map-options
-        option-label="name"
-        option-value="id"
-        hide-selected
-        fill-input
-        :options="option"
-        @update:model-value="getSearch()"
-        use-input
-        @filter="filterOptionFn"
-      >
-        <template v-slot:no-option>
-          <q-item>
-            <q-item-section class="text-grey"> ไม่มีข้อมูล </q-item-section>
-          </q-item>
-        </template>
-        <template v-if="statusFilter !== 'ALL'" v-slot:append>
-          <q-icon
-            name="cancel"
-            @click.stop.prevent="
-              (option = complainstStore.statusOptions),
-                (statusFilter = 'ALL'),
-                getSearch()
-            "
-            class="cursor-pointer"
-          />
-        </template>
-      </q-select>
+  <q-card flat bordered>
+    <div class="row q-col-gutter-sm q-pa-md">
+      <div class="col-12">
+        <div class="row q-col-gutter-sm">
+          <div class="col-xs-12 col-sm-3 col-md-4 col-lg-2">
+            <div class="row q-col-gutter-sm items-center">
+              <div class="col-xs-11">
+                <q-select
+                  v-model="statusFilter"
+                  label="สถานะ"
+                  dense
+                  outlined
+                  emit-value
+                  map-options
+                  option-label="name"
+                  option-value="id"
+                  hide-selected
+                  fill-input
+                  :options="option"
+                  @update:model-value="getSearch()"
+                  use-input
+                  @filter="filterOptionFn"
+                >
+                  <template v-slot:no-option>
+                    <q-item>
+                      <q-item-section class="text-grey">
+                        ไม่มีข้อมูล
+                      </q-item-section>
+                    </q-item>
+                  </template>
+                  <template v-if="statusFilter !== 'ALL'" v-slot:append>
+                    <q-icon
+                      name="cancel"
+                      @click.stop.prevent="
+                        (option = complainstStore.statusOptions),
+                          (statusFilter = 'ALL'),
+                          getSearch()
+                      "
+                      class="cursor-pointer"
+                    />
+                  </template>
+                </q-select>
+              </div>
 
-      <div>
-        <q-btn
-          v-if="checkPermission($route)?.attrIsCreate"
-          id="addComplaints"
-          for="addComplaints"
-          dense
-          flat
-          round
-          color="primary"
-          icon="mdi-plus"
-          @click="redirectToPageadd()"
-          ><q-tooltip>เพิ่มเรื่องร้องเรียน </q-tooltip></q-btn
-        >
+              <div
+                class="col-xs-1"
+                v-if="checkPermission($route)?.attrIsCreate"
+              >
+                <q-btn
+                  id="addComplaints"
+                  for="addComplaints"
+                  dense
+                  flat
+                  round
+                  color="primary"
+                  icon="mdi-plus"
+                  @click="redirectToPageadd()"
+                  ><q-tooltip>เพิ่มเรื่องร้องเรียน </q-tooltip></q-btn
+                >
+              </div>
+            </div>
+          </div>
+
+          <div class="col-xs-12 col-sm-3 col-md-2 col-lg-6"></div>
+
+          <div class="col-xs-12 col-sm-6 col-md-6 col-lg-4">
+            <div class="row q-col-gutter-sm items-center">
+              <div class="col-1">
+                <DialogSearchAdvanced :get-data="() => getSearch()" />
+              </div>
+              <div class="col-6">
+                <q-input
+                  for="#search"
+                  standout
+                  dense
+                  v-model="filterKeyword"
+                  ref="filterRef"
+                  outlined
+                  placeholder="ค้นหาเรื่องร้องเรียน"
+                  @keydown.enter.prevent="getSearch()"
+                >
+                  <template v-slot:append>
+                    <q-icon name="search" />
+                  </template>
+                </q-input>
+              </div>
+
+              <div class="col-5">
+                <q-select
+                  id="visibleColumns"
+                  for="visibleColumns"
+                  v-model="complainstStore.visibleColumns"
+                  multiple
+                  outlined
+                  dense
+                  options-dense
+                  :display-value="$q.lang.table.columns"
+                  emit-value
+                  map-options
+                  :options="complainstStore.columns"
+                  option-value="name"
+                />
+              </div>
+            </div>
+          </div>
+        </div>
       </div>
-      <q-space />
-      <DialogSearchAdvanced :get-data="(value:number)=> getList(value)" />
-      <q-input
-        for="#search"
-        standout
-        dense
-        v-model="filterKeyword"
-        ref="filterRef"
-        outlined
-        placeholder="ค้นหาเรื่องร้องเรียน"
-        @keydown.enter.prevent="getSearch()"
-      >
-        <template v-slot:append>
-          <q-icon name="search" />
-        </template>
-      </q-input>
 
-      <q-select
-        id="visibleColumns"
-        for="visibleColumns"
-        v-model="complainstStore.visibleColumns"
-        multiple
-        outlined
-        dense
-        options-dense
-        :display-value="$q.lang.table.columns"
-        emit-value
-        map-options
-        :options="complainstStore.columns"
-        option-value="name"
-        style="min-width: 140px"
-      />
-    </div>
-
-    <div class="col-12">
-      <TableComplaint
-        :filter-table="filterTable"
-        v-model:pagination="pagination"
-        v-model:total="total"
-        v-model:total-list="totalList"
-        :toptitle="toptitle"
-        :get-list="getList"
-      />
+      <div class="col-12">
+        <TableComplaint
+          v-model:pagination="pagination"
+          :on-request="onRequest"
+        />
+      </div>
     </div>
   </q-card>
 </template>
diff --git a/src/modules/11_discipline/components/1_Complaint/TableComplaint.vue b/src/modules/11_discipline/components/1_Complaint/TableComplaint.vue
index ff67a7b59..a0bccc8fd 100644
--- a/src/modules/11_discipline/components/1_Complaint/TableComplaint.vue
+++ b/src/modules/11_discipline/components/1_Complaint/TableComplaint.vue
@@ -1,28 +1,24 @@
 <script setup lang="ts">
-import { ref, onMounted, watch } from "vue";
+import { ref, onMounted } from "vue";
 import type { QTableProps } from "quasar";
 import { useComplainstDataStore } from "@/modules/11_discipline/store/ComplaintsStore";
 import { useRouter } from "vue-router";
 
 import { checkPermission } from "@/utils/permissions";
+import type { PropsTable } from "@/interface/index/PropsTable";
 
 const router = useRouter();
 const complainstStore = useComplainstDataStore();
 
-const total = defineModel<number>("total", { required: true });
-const totalList = defineModel<number>("totalList", { required: true });
-const pagination = defineModel<any>("pagination", { required: true });
+const pagination = defineModel<PropsTable.Pagination>("pagination", {
+  required: true,
+});
 
 const emit = defineEmits(["update:pagination"]);
 /** รับ props มาจากหน้าหลัก */
 const props = defineProps({
-  getList: Function,
-  filterTable: {
-    type: String,
-    default: "",
-  },
-  toptitle: {
-    type: Number,
+  onRequest: {
+    type: Function,
     require: true,
   },
 });
@@ -39,8 +35,6 @@ const visibleColumns = ref<string[]>([
   "dateConsideration",
   "status",
 ]);
-
-/** หัวตาราง */
 const columns = ref<QTableProps["columns"]>([
   {
     name: "no",
@@ -109,7 +103,7 @@ const columns = ref<QTableProps["columns"]>([
     name: "status",
     align: "left",
     label: "สถานะ",
-    sortable: true,
+    sortable: false,
     field: "status",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
@@ -124,12 +118,6 @@ function OpenEdit(id: string) {
   router.push(`/discipline/complaints/${id}`);
 }
 
-/** ส่งค่ากลับไปหน้าหลัก */
-function updateProp(newPagination: any, page: number) {
-  // ส่ง event ไปยัง parent component เพื่ออัพเดทค่า props
-  emit("update:pagination", newPagination, page);
-}
-
 /**
  * ฟังชั่นสำหรับ เปลี่ยน route ตาม id ที่รับมา
  * @param id ไอดีระบุ
@@ -138,11 +126,6 @@ function onDetail(id: string) {
   router.push(`/discipline/complaints-detail/${id}`);
 }
 
-function updatePagination(newPagination: any) {
-  pagination.value.page = 1;
-  pagination.value.rowsPerPage = newPagination.rowsPerPage;
-}
-
 /** เริ่มโหลดหน้า page เอาข้อมูลไปเก็บ ใน store*/
 onMounted(() => {
   complainstStore.columns = columns.value;
@@ -151,7 +134,7 @@ onMounted(() => {
 </script>
 
 <template>
-  <d-table
+  <p-table
     id="table"
     ref="table"
     :columns="columns"
@@ -164,7 +147,8 @@ onMounted(() => {
     class="custom-header-table"
     :visible-columns="complainstStore.visibleColumns"
     :rows-per-page-options="[10, 25, 50, 100]"
-    @update:pagination="updatePagination"
+    v-model:pagination="pagination"
+    @request="props.onRequest"
   >
     <template v-slot:header="props">
       <q-tr :props="props">
@@ -207,11 +191,7 @@ onMounted(() => {
         </q-td>
         <q-td v-for="col in props.cols" :key="col.name" :props="props">
           <div v-if="col.name == 'no'">
-            {{
-              (pagination.page - 1) * pagination.rowsPerPage +
-              props.rowIndex +
-              1
-            }}
+            {{ props.rowIndex + 1 }}
           </div>
           <div v-else-if="col.name === 'title'" class="table_ellipsis">
             {{ props.row.title }}
@@ -222,21 +202,7 @@ onMounted(() => {
         </q-td>
       </q-tr>
     </template>
-    <template v-slot:pagination="scope">
-      ทั้งหมด {{ total }} รายการ
-      <q-pagination
-        v-model="pagination.page"
-        active-color="primary"
-        color="dark"
-        :max="Number(totalList)"
-        size="sm"
-        boundary-links
-        direction-links
-        :max-pages="5"
-        @update:model-value="props.getList?.()"
-      ></q-pagination>
-    </template>
-  </d-table>
+  </p-table>
 </template>
 
 <style scoped></style>
diff --git a/src/modules/11_discipline/components/DialogSearchAdvanced.vue b/src/modules/11_discipline/components/DialogSearchAdvanced.vue
index 760575f16..73ab9ab3f 100644
--- a/src/modules/11_discipline/components/DialogSearchAdvanced.vue
+++ b/src/modules/11_discipline/components/DialogSearchAdvanced.vue
@@ -75,18 +75,17 @@ watchEffect(() => {
 });
 </script>
 <template>
-  <div>
-    <q-btn
-      size="12px"
-      flat
-      round
-      color="blue"
-      icon="mdi-filter-variant"
-      @click="onSearch"
-    >
-      <q-tooltip>ค้นหาขั้นสูง</q-tooltip>
-    </q-btn>
-  </div>
+  <q-btn
+    size="12px"
+    flat
+    round
+    color="blue"
+    icon="mdi-filter-variant"
+    @click="onSearch"
+  >
+    <q-tooltip>ค้นหาขั้นสูง</q-tooltip>
+  </q-btn>
+
   <q-dialog v-model="modal" persistent>
     <q-card class="col-12" style="width: 400px">
       <q-form greedy @submit.prevent @validation-success="fnSearch">

From b1532ada56301b88840d9aebb2e47332640f448e Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Thu, 9 Oct 2025 10:08:46 +0700
Subject: [PATCH 2/7] fix(investigatefacts)sort

---
 .../components/1_Complaint/MainPage.vue       |  12 +-
 .../2_InvestigateFacts/MainPage.vue           | 385 ++++++++----------
 .../components/DialogSearchAdvanced.vue       |   6 +-
 .../store/InvestigateFactStore.ts             |  16 +-
 4 files changed, 190 insertions(+), 229 deletions(-)

diff --git a/src/modules/11_discipline/components/1_Complaint/MainPage.vue b/src/modules/11_discipline/components/1_Complaint/MainPage.vue
index cda75e312..ea5bb1766 100644
--- a/src/modules/11_discipline/components/1_Complaint/MainPage.vue
+++ b/src/modules/11_discipline/components/1_Complaint/MainPage.vue
@@ -158,7 +158,7 @@ onMounted(async () => {
               </div>
 
               <div
-                class="col-xs-1"
+                class="col-xs"
                 v-if="checkPermission($route)?.attrIsCreate"
               >
                 <q-btn
@@ -176,14 +176,14 @@ onMounted(async () => {
             </div>
           </div>
 
-          <div class="col-xs-12 col-sm-3 col-md-2 col-lg-6"></div>
+          <q-space />
 
-          <div class="col-xs-12 col-sm-6 col-md-6 col-lg-4">
+          <div class="col-xs-12 col-sm-8 col-md-6 col-lg-4">
             <div class="row q-col-gutter-sm items-center">
-              <div class="col-1">
+              <div class="col">
                 <DialogSearchAdvanced :get-data="() => getSearch()" />
               </div>
-              <div class="col-6">
+              <div class="col-7">
                 <q-input
                   for="#search"
                   standout
@@ -200,7 +200,7 @@ onMounted(async () => {
                 </q-input>
               </div>
 
-              <div class="col-5">
+              <div class="col-4">
                 <q-select
                   id="visibleColumns"
                   for="visibleColumns"
diff --git a/src/modules/11_discipline/components/2_InvestigateFacts/MainPage.vue b/src/modules/11_discipline/components/2_InvestigateFacts/MainPage.vue
index 7f4027ef5..bad728924 100644
--- a/src/modules/11_discipline/components/2_InvestigateFacts/MainPage.vue
+++ b/src/modules/11_discipline/components/2_InvestigateFacts/MainPage.vue
@@ -9,39 +9,30 @@ import { useCounterMixin } from "@/stores/mixin";
 import { useInvestigateFactStore } from "@/modules/11_discipline/store/InvestigateFactStore";
 import { useDisciplineMainStore } from "@/modules/11_discipline/store/Main";
 import { checkPermission } from "@/utils/permissions";
+import { usePagination } from "@/composables/usePagination";
 
 import DialogSearchAdvanced from "@/modules/11_discipline/components/DialogSearchAdvanced.vue";
 
+import type { DataOption } from "@/modules/11_discipline/interface/index/Main";
+
 const $q = useQuasar(); //ใช้ noti quasar
 const store = useDisciplineMainStore();
 const mixin = useCounterMixin();
 const dataInvestigate = useInvestigateFactStore();
 const { messageError, showLoader, hideLoader, convertDateToAPI } = mixin;
+const { pagination, params, onRequest } = usePagination("", getList);
 
-const option = ref<any[]>(dataInvestigate.statusOptions);
+const attrs = ref<any>(useAttrs());
+const option = ref<DataOption[]>(dataInvestigate.statusOptions);
 
 /** ค้นหาข้อมูลในตาราง */
 const filterKeyword = ref<string>("");
-const filterRef = ref<HTMLInputElement | null>(null);
 const statusFilter = ref<string>("NEW");
-const toptitle = ref<number>(0);
-
-const total = ref<number>(0);
-const totalList = ref<number>(1);
-const pagination = ref({
-  sortBy: "createdAt",
-  descending: true,
-  page: 1,
-  rowsPerPage: 10,
-});
-
-const attrs = ref<any>(useAttrs());
 
 /** ดึงข้อมูลบสวน */
-async function getList(page?: number) {
+async function getList() {
   const body = {
-    page: page ? page : pagination.value.page,
-    pageSize: pagination.value.rowsPerPage,
+    ...params.value,
     keyword: filterKeyword.value.trim(),
     status: statusFilter.value,
     ...(store.formInvestigateFacts.respondentType && {
@@ -82,14 +73,9 @@ async function getList(page?: number) {
   await http
     .post(config.API.investigateMain(), body)
     .then(async (res) => {
-      totalList.value = Math.ceil(
-        res.data.result.total / pagination.value.rowsPerPage
-      );
-      total.value = res.data.result.total;
-      toptitle.value = res.data.result.total;
-
-      const data = res.data.result.data;
-      await dataInvestigate.fecthList(data);
+      const result = res.data.result;
+      pagination.value.rowsNumber = result.total;
+      await dataInvestigate.fecthList(result.data);
     })
     .catch((e) => {
       messageError($q, e);
@@ -104,7 +90,7 @@ async function getList(page?: number) {
  * @param id ไอดีเฉพาะ รายบุคคล
  */
 async function editPage(id: string) {
-  dataInvestigate.tabMenu = await "investigatefacts";
+  dataInvestigate.tabMenu = "investigatefacts";
   router.push(`/discipline/investigatefacts/${id}`);
 }
 /**
@@ -112,7 +98,7 @@ async function editPage(id: string) {
  * @param id ไอดีเฉพาะ รายบุคคล
  */
 async function detailPage(id: string) {
-  dataInvestigate.tabMenu = await "investigatefacts";
+  dataInvestigate.tabMenu = "investigatefacts";
   router.push(`/discipline-detail/investigatefacts/${id}`);
 }
 
@@ -129,27 +115,12 @@ function filterOptionFn(val: string, update: Function) {
   });
 }
 
-function updatePagination(newPagination: any) {
-  pagination.value.page = 1;
-  pagination.value.rowsPerPage = newPagination.rowsPerPage;
-}
-
-function getSerach() {
+function getSearch() {
   pagination.value.page = 1;
   getList();
 }
 
-watch(
-  () => pagination.value.rowsPerPage,
-  async () => {
-    getSerach();
-  }
-);
-
-/**เมื่อเริ่มโหลดหน้า
- * ส่งข้อมูลจำลองไปยัง store
- */
-onMounted(async () => {
+onMounted(() => {
   getList();
 });
 </script>
@@ -158,173 +129,175 @@ onMounted(async () => {
   <div class="toptitle text-dark col-12 row items-center">
     รายการสืบสวนข้อเท็จจริง
   </div>
-  <q-card flat bordered class="col-12 q-mt-sm q-pa-md">
-    <div class="row col-12 q-col-gutter-sm q-mb-sm items-center">
-      <q-select
-        v-model="statusFilter"
-        label="สถานะ"
-        dense
-        outlined
-        emit-value
-        map-options
-        hide-selected
-        fill-input
-        option-label="name"
-        option-value="id"
-        :options="option"
-        @update:model-value="getSerach()"
-        use-input
-        @filter="filterOptionFn"
-      >
-        <template v-slot:no-option>
-          <q-item>
-            <q-item-section class="text-grey"> ไม่มีข้อมูล </q-item-section>
-          </q-item>
-        </template>
-        <template v-if="statusFilter !== 'ALL'" v-slot:append>
-          <q-icon
-            name="cancel"
-            @click.stop.prevent="
-              (option = dataInvestigate.statusOptions),
-                (statusFilter = 'ALL'),
-                getSerach()
-            "
-            class="cursor-pointer"
-          />
-        </template>
-      </q-select>
 
-      <q-space />
-      <DialogSearchAdvanced :get-data="(value:number)=> getList(value)" />
-      <q-input
-        for="#search"
-        standout
-        dense
-        v-model="filterKeyword"
-        ref="filterRef"
-        outlined
-        placeholder="ค้นหาเรื่องร้องเรียน"
-        @keydown.enter.prevent="getSerach()"
-      >
-        <template v-slot:append>
-          <q-icon name="search" />
-        </template>
-      </q-input>
-
-      <q-select
-        for="#select"
-        v-model="dataInvestigate.visibleColumns"
-        multiple
-        outlined
-        dense
-        options-dense
-        :display-value="$q.lang.table.columns"
-        emit-value
-        map-options
-        :options="dataInvestigate.columns"
-        option-value="name"
-        style="min-width: 140px"
-      />
-    </div>
-
-    <div class="col-12">
-      <d-table
-        ref="table"
-        :columns="dataInvestigate.columns"
-        :rows="dataInvestigate.rows"
-        row-key="interrogated"
-        flat
-        bordered
-        :paging="true"
-        dense
-        class="custom-header-table"
-        v-bind="attrs"
-        :visible-columns="dataInvestigate.visibleColumns"
-        :rows-per-page-options="[10, 25, 50, 100]"
-        @update:pagination="updatePagination"
-      >
-        <template v-slot:header="props">
-          <q-tr :props="props">
-            <q-th auto-width></q-th>
-            <q-th
-              v-for="col in props.cols"
-              :key="col.name"
-              :props="props"
-              style="color: #000000; font-weight: 500"
+  <q-card flat bordered>
+    <div class="row col-12 q-col-gutter-sm q-pa-md">
+      <div class="col-12">
+        <div class="row q-col-gutter-sm">
+          <div class="col-xs-12 col-sm-3 col-md-4 col-lg-2">
+            <q-select
+              v-model="statusFilter"
+              label="สถานะ"
+              dense
+              outlined
+              emit-value
+              map-options
+              hide-selected
+              fill-input
+              option-label="name"
+              option-value="id"
+              :options="option"
+              @update:model-value="getSearch()"
+              use-input
+              @filter="filterOptionFn"
             >
-              <span class="text-weight-medium">{{ col.label }}</span>
-            </q-th>
-            <q-th auto-width />
-          </q-tr>
-        </template>
-        <template v-slot:body="props">
-          <q-tr :props="props">
-            <q-td auto-width>
-              <q-btn
-                v-if="checkPermission($route)?.attrIsGet"
-                flat
-                dense
-                round
-                color="info"
-                icon="mdi-eye"
-                @click="detailPage(props.row.id)"
+              <template v-slot:no-option>
+                <q-item>
+                  <q-item-section class="text-grey">
+                    ไม่มีข้อมูล
+                  </q-item-section>
+                </q-item>
+              </template>
+              <template v-if="statusFilter !== 'ALL'" v-slot:append>
+                <q-icon
+                  name="cancel"
+                  @click.stop.prevent="
+                    (option = dataInvestigate.statusOptions),
+                      (statusFilter = 'ALL'),
+                      getSearch()
+                  "
+                  class="cursor-pointer"
+                />
+              </template>
+            </q-select>
+          </div>
+
+          <q-space />
+          <div class="col-xs-12 col-sm-8 col-md-6 col-lg-4">
+            <div class="row q-col-gutter-sm items-center">
+              <div class="col">
+                <DialogSearchAdvanced :get-data="() => getSearch()" />
+              </div>
+
+              <div class="col-7">
+                <q-input
+                  for="#search"
+                  standout
+                  dense
+                  v-model="filterKeyword"
+                  ref="filterRef"
+                  outlined
+                  placeholder="ค้นหาเรื่องร้องเรียน"
+                  @keydown.enter.prevent="getSearch()"
+                >
+                  <template v-slot:append>
+                    <q-icon name="search" />
+                  </template>
+                </q-input>
+              </div>
+
+              <div class="col-4">
+                <q-select
+                  for="#select"
+                  v-model="dataInvestigate.visibleColumns"
+                  multiple
+                  outlined
+                  dense
+                  options-dense
+                  :display-value="$q.lang.table.columns"
+                  emit-value
+                  map-options
+                  :options="dataInvestigate.columns"
+                  option-value="name"
+                />
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div class="col-12">
+        <p-table
+          ref="table"
+          :columns="dataInvestigate.columns"
+          :rows="dataInvestigate.rows"
+          row-key="interrogated"
+          flat
+          bordered
+          :paging="true"
+          dense
+          class="custom-header-table"
+          v-bind="attrs"
+          :visible-columns="dataInvestigate.visibleColumns"
+          :rows-per-page-options="[10, 25, 50, 100]"
+          @request="onRequest"
+          v-model:pagination="pagination"
+        >
+          <template v-slot:header="props">
+            <q-tr :props="props">
+              <q-th auto-width></q-th>
+              <q-th
+                v-for="col in props.cols"
+                :key="col.name"
+                :props="props"
+                style="color: #000000; font-weight: 500"
               >
-                <q-tooltip>รายละเอียด</q-tooltip>
-              </q-btn>
-              <q-btn
-                v-if="
-                  checkPermission($route)?.attrIsGet &&
-                  checkPermission($route)?.attrIsUpdate
-                "
-                flat
-                dense
-                round
-                color="edit"
-                icon="edit"
+                <span class="text-weight-medium">{{ col.label }}</span>
+              </q-th>
+              <q-th auto-width />
+            </q-tr>
+          </template>
+          <template v-slot:body="props">
+            <q-tr :props="props">
+              <q-td auto-width>
+                <q-btn
+                  v-if="checkPermission($route)?.attrIsGet"
+                  flat
+                  dense
+                  round
+                  color="info"
+                  icon="mdi-eye"
+                  @click="detailPage(props.row.id)"
+                >
+                  <q-tooltip>รายละเอียด</q-tooltip>
+                </q-btn>
+                <q-btn
+                  v-if="
+                    checkPermission($route)?.attrIsGet &&
+                    checkPermission($route)?.attrIsUpdate
+                  "
+                  flat
+                  dense
+                  round
+                  color="edit"
+                  icon="edit"
+                  @click="editPage(props.row.id)"
+                >
+                  <q-tooltip>แก้ไขข้อมูล</q-tooltip>
+                </q-btn>
+              </q-td>
+              <q-td v-for="col in props.cols" :key="col.name" :props="props">
+                <div v-if="col.name == 'no'">
+                  {{ props.rowIndex + 1 }}
+                </div>
+                <div v-else-if="col.name === 'title'" class="table_ellipsis">
+                  {{ props.row.title }}
+                </div>
+                <div v-else>
+                  {{ col.value ?? "-" }}
+                </div>
+              </q-td>
+              <q-td
+                auto-width
+                style="font-size: 14px; width: 10%"
                 @click="editPage(props.row.id)"
               >
-                <q-tooltip>แก้ไขข้อมูล</q-tooltip>
-              </q-btn>
-            </q-td>
-            <q-td v-for="col in props.cols" :key="col.name" :props="props">
-              <div v-if="col.name == 'no'">
-                {{
-                  (pagination.page - 1) * pagination.rowsPerPage +
-                  props.rowIndex +
-                  1
-                }}
-              </div>
-              <div v-else-if="col.name === 'title'" class="table_ellipsis">
-                {{ props.row.title }}
-              </div>
-              <div v-else>
-                {{ col.value }}
-              </div>
-            </q-td>
-            <q-td
-              auto-width
-              style="font-size: 14px; width: 10%"
-              @click="editPage(props.row.id)"
-            >
-              {{ props.row.active }}
-            </q-td>
-          </q-tr>
-        </template>
-        <template v-slot:pagination="scope">
-          ทั้งหมด {{ total }} รายการ
-          <q-pagination
-            v-model="pagination.page"
-            active-color="primary"
-            color="dark"
-            :max="Number(totalList)"
-            size="sm"
-            boundary-links
-            direction-links
-            :max-pages="5"
-            @update:model-value="getList()"
-          ></q-pagination>
-        </template>
-      </d-table>
+                {{ props.row.active }}
+              </q-td>
+            </q-tr>
+          </template>
+        </p-table>
+      </div>
     </div>
   </q-card>
 </template>
diff --git a/src/modules/11_discipline/components/DialogSearchAdvanced.vue b/src/modules/11_discipline/components/DialogSearchAdvanced.vue
index 73ab9ab3f..3a858ab1d 100644
--- a/src/modules/11_discipline/components/DialogSearchAdvanced.vue
+++ b/src/modules/11_discipline/components/DialogSearchAdvanced.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, reactive, watchEffect } from "vue";
+import { ref, watchEffect } from "vue";
 import { useRoute } from "vue-router";
 
 import { useCounterMixin } from "@/stores/mixin";
@@ -12,7 +12,7 @@ import DialogHeader from "@/components/DialogHeader.vue";
 
 const route = useRoute();
 const mixin = useCounterMixin();
-const { dateThaiRange, convertDateToAPI } = mixin;
+const { dateThaiRange } = mixin;
 const store = useDisciplineMainStore();
 const complainstStore = useComplainstDataStore();
 const investigateStore = useInvestigateFactStore();
@@ -34,7 +34,7 @@ function onClose() {
 }
 
 function fnSearch() {
-  props.getData?.(1);
+  props.getData?.();
   onClose();
 }
 
diff --git a/src/modules/11_discipline/store/InvestigateFactStore.ts b/src/modules/11_discipline/store/InvestigateFactStore.ts
index 8c0240907..54d3c0f75 100644
--- a/src/modules/11_discipline/store/InvestigateFactStore.ts
+++ b/src/modules/11_discipline/store/InvestigateFactStore.ts
@@ -67,7 +67,7 @@ export const useInvestigateFactStore = defineStore(
       "respondentType",
       "offenseDetails",
       "investigationDetail",
-      "dateInvestigate",
+      "investigationDateStart",
       "investigationStatusResult",
       "dateReceived",
       "status",
@@ -101,8 +101,6 @@ export const useInvestigateFactStore = defineStore(
         field: "respondentType",
         headerStyle: "font-size: 14px",
         style: "font-size: 14px",
-        sort: (a: string, b: string) =>
-          a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
       },
       {
         name: "offenseDetails",
@@ -112,8 +110,6 @@ export const useInvestigateFactStore = defineStore(
         field: "offenseDetails",
         headerStyle: "font-size: 14px",
         style: "font-size: 14px",
-        sort: (a: string, b: string) =>
-          a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
       },
       {
         name: "investigationDetail",
@@ -123,19 +119,15 @@ export const useInvestigateFactStore = defineStore(
         field: "investigationDetail",
         headerStyle: "font-size: 14px",
         style: "font-size: 14px",
-        sort: (a: string, b: string) =>
-          a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
       },
       {
-        name: "dateInvestigate",
+        name: "investigationDateStart",
         align: "left",
         label: "วันที่สืบสวน",
         sortable: true,
         field: "dateInvestigate",
         headerStyle: "font-size: 14px",
         style: "font-size: 14px",
-        sort: (a: string, b: string) =>
-          a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
       },
       {
         name: "investigationStatusResult",
@@ -145,8 +137,6 @@ export const useInvestigateFactStore = defineStore(
         field: "investigationStatusResult",
         headerStyle: "font-size: 14px",
         style: "font-size: 14px",
-        sort: (a: string, b: string) =>
-          a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
       },
       {
         name: "dateReceived",
@@ -156,8 +146,6 @@ export const useInvestigateFactStore = defineStore(
         field: "dateReceived",
         headerStyle: "font-size: 14px",
         style: "font-size: 14px",
-        sort: (a: string, b: string) =>
-          a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
       },
       {
         name: "status",

From 49dcf013aebdf30a0a1546293c0691b7f45a87a4 Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Thu, 9 Oct 2025 10:38:28 +0700
Subject: [PATCH 3/7] fix(disciplinary):sort

---
 .../3_InvestigateDisciplinary/MainPage.vue    |  88 ++--
 .../3_InvestigateDisciplinary/Table.vue       | 394 ++++++++----------
 .../store/InvestigateDisStore.ts              |  16 +-
 3 files changed, 207 insertions(+), 291 deletions(-)

diff --git a/src/modules/11_discipline/components/3_InvestigateDisciplinary/MainPage.vue b/src/modules/11_discipline/components/3_InvestigateDisciplinary/MainPage.vue
index 143cc3487..71d45e603 100644
--- a/src/modules/11_discipline/components/3_InvestigateDisciplinary/MainPage.vue
+++ b/src/modules/11_discipline/components/3_InvestigateDisciplinary/MainPage.vue
@@ -2,25 +2,16 @@
 import { onMounted, ref, watch } from "vue";
 import { useQuasar } from "quasar";
 
+import http from "@/plugins/http";
+import config from "@/app.config";
 import { useRouter } from "vue-router";
 import { useCounterMixin } from "@/stores/mixin";
 import { useInvestigateDisStore } from "@/modules/11_discipline/store/InvestigateDisStore";
 import { useDisciplineMainStore } from "@/modules/11_discipline/store/Main";
-
-import http from "@/plugins/http";
-import config from "@/app.config";
+import { usePagination } from "@/composables/usePagination";
 
 import Table from "@/modules/11_discipline/components/3_InvestigateDisciplinary/Table.vue";
 
-const total = ref<number>(0);
-const totalList = ref<number>(1);
-const pagination = ref({
-  sortBy: "createdAt",
-  descending: true,
-  page: 1,
-  rowsPerPage: 10,
-});
-
 const $q = useQuasar(); //ใช้ noti quasar
 const router = useRouter();
 const mixin = useCounterMixin();
@@ -28,14 +19,18 @@ const store = useDisciplineMainStore();
 const dataInvestigateDis = useInvestigateDisStore();
 const { showLoader, hideLoader, messageError, convertDateToAPI } = mixin;
 const { fetchList } = dataInvestigateDis;
+const { pagination, params, onRequest } = usePagination(
+  "",
+  fetchListDisciplinary
+);
 
 const filter = ref<string>(""); //search data table
 
 const status = ref<string>("NEW");
-async function fetchListDisciplinary(page?: number) {
+
+async function fetchListDisciplinary() {
   const body = {
-    page: page ? page : pagination.value.page,
-    pageSize: pagination.value.rowsPerPage,
+    ...params.value,
     keyword: filter.value.trim(),
     status: status.value,
     ...(store.formInvestigateDisciplinary.respondentType && {
@@ -77,12 +72,9 @@ async function fetchListDisciplinary(page?: number) {
   await http
     .post(config.API.disciplineDisciplinary(), body)
     .then(async (res) => {
-      const data = res.data.result.data;
-      totalList.value = Math.ceil(
-        res.data.result.total / pagination.value.rowsPerPage
-      );
-      total.value = res.data.result.total;
-      await fetchList(data);
+      const result = res.data.result;
+      pagination.value.rowsNumber = result.total;
+      await fetchList(result.data);
     })
     .catch((e) => {
       messageError($q, e);
@@ -112,18 +104,11 @@ function filterStatus(statusReturn: string) {
   getSearch();
 }
 
-function getSearch(page?: number) {
+function getSearch() {
   pagination.value.page = 1;
-  fetchListDisciplinary(page);
+  fetchListDisciplinary();
 }
 
-watch(
-  () => pagination.value.rowsPerPage,
-  async () => {
-    getSearch();
-  }
-);
-
 /**เมื่อเริ่มโหลดหน้า
  * ส่งข้อมูลจำลองไปยัง store
  */
@@ -136,29 +121,26 @@ onMounted(async () => {
   <div class="toptitle text-dark col-12 row items-center">
     รายการสอบสวนความผิดทางวินัย
   </div>
-  <q-card flat bordered class="col-12 q-mt-sm q-pt-sm q-pa-md">
-    <div>
-      <Table
-        style="max-height: 80vh"
-        :rows="dataInvestigateDis.rows"
-        :columns="dataInvestigateDis.columns"
-        :visible-columns="dataInvestigateDis.visibleColumns"
-        v-model:inputfilter="filter"
-        v-model:inputvisible="dataInvestigateDis.visibleColumns"
-        :nornmalData="true"
-        :paging="true"
-        :titleText="''"
-        v-model:pagination="pagination"
-        v-model:total="total"
-        v-model:total-list="totalList"
-        :fetchListDisciplinary="fetchListDisciplinary"
-        v-model:open-edit="openEdit"
-        :open-detail="openDetail"
-        :filterStatus="filterStatus"
-        :get-search="getSearch"
-      >
-      </Table>
-    </div>
+  <q-card flat bordered>
+    <Table
+      style="max-height: 80vh"
+      :rows="dataInvestigateDis.rows"
+      :columns="dataInvestigateDis.columns"
+      :visible-columns="dataInvestigateDis.visibleColumns"
+      v-model:inputfilter="filter"
+      v-model:inputvisible="dataInvestigateDis.visibleColumns"
+      :nornmalData="true"
+      :paging="true"
+      :titleText="''"
+      v-model:pagination="pagination"
+      :fetchListDisciplinary="fetchListDisciplinary"
+      v-model:open-edit="openEdit"
+      :open-detail="openDetail"
+      :filterStatus="filterStatus"
+      :get-search="getSearch"
+      :on-request="onRequest"
+    >
+    </Table>
   </q-card>
 </template>
 
diff --git a/src/modules/11_discipline/components/3_InvestigateDisciplinary/Table.vue b/src/modules/11_discipline/components/3_InvestigateDisciplinary/Table.vue
index a6d5db40a..aa332c0dc 100644
--- a/src/modules/11_discipline/components/3_InvestigateDisciplinary/Table.vue
+++ b/src/modules/11_discipline/components/3_InvestigateDisciplinary/Table.vue
@@ -1,23 +1,22 @@
 <script setup lang="ts">
-import { ref, useAttrs, watch } from "vue";
+import { ref, useAttrs } from "vue";
 
 import { useInvestigateDisStore } from "@/modules/11_discipline/store/InvestigateDisStore";
 import { checkPermission } from "@/utils/permissions";
 
 import DialogSearchAdvanced from "@/modules/11_discipline/components/DialogSearchAdvanced.vue";
 
-const total = defineModel<number>("total", { required: true });
-const totalList = defineModel<number>("totalList", { required: true });
-const pagination = defineModel<any>("pagination", { required: true });
+import type { PropsTable } from "@/interface/index/PropsTable";
+import type { DataOption } from "@/modules/11_discipline/interface/index/Main";
+
+const pagination = defineModel<PropsTable.Pagination>("pagination", {
+  required: true,
+});
 
 const dataInvestigateDis = useInvestigateDisStore();
-const table = ref<any>(null);
-const filterRef = ref<any>(null);
 const attrs = ref<any>(useAttrs());
-const paging = ref<boolean>(true);
-const currentPage = ref<number>(1);
 const statusFilter = ref<string>("NEW");
-const option = ref<any[]>(dataInvestigateDis.statusOptions);
+const option = ref<DataOption[]>(dataInvestigateDis.statusOptions);
 /** รับ props มาจากหน้าหลัก */
 const props = defineProps({
   count: Number,
@@ -77,6 +76,10 @@ const props = defineProps({
     type: Number,
     require: true,
   },
+  onRequest: {
+    type: Function,
+    require: true,
+  },
 });
 
 const emit = defineEmits([
@@ -94,18 +97,6 @@ function updateVisible(value: []) {
   emit("update:inputvisible", value);
 }
 
-function resetFilter() {
-  // reset ค่าที่ค้นหาเมื่อกดปุ่ม X ในกล่องค้นหา
-  emit("update:inputfilter", "");
-  filterRef.value.focus();
-  props.fetchListDisciplinary?.();
-}
-
-function updateProp(newPagination: any, page: number) {
-  // ส่ง event ไปยัง parent component เพื่ออัพเดทค่า props
-  emit("update:pagination", newPagination, page);
-}
-
 function dataUpdate() {
   props.filterStatus(statusFilter.value);
 }
@@ -126,215 +117,166 @@ function filterOptionFn(val: string, update: Function) {
     );
   });
 }
-
-function updatePagination(newPagination: any) {
-  pagination.value.page = 1;
-  pagination.value.rowsPerPage = newPagination.rowsPerPage;
-}
 </script>
 
 <template>
-  <div class="q-pb-sm row q-col-gutter-sm items-center">
-    <q-select
-      v-model="statusFilter"
-      label="สถานะ"
-      dense
-      outlined
-      emit-value
-      hide-selected
-      fill-input
-      map-options
-      option-label="name"
-      option-value="id"
-      :options="option"
-      @update:model-value="dataUpdate"
-      use-input
-      @filter="filterOptionFn"
-    >
-      <template v-slot:no-option>
-        <q-item>
-          <q-item-section class="text-grey"> ไม่มีข้อมูล </q-item-section>
-        </q-item>
-      </template>
-      <template v-if="statusFilter !== 'ALL'" v-slot:append>
-        <q-icon
-          name="cancel"
-          @click.stop.prevent="
-            (option = dataInvestigateDis.statusOptions),
-              (statusFilter = 'ALL'),
-              dataUpdate()
-          "
-          class="cursor-pointer"
-        />
-      </template>
-    </q-select>
-
-    <q-space />
-    <!-- ค้นหาข้อความใน table -->
-    <DialogSearchAdvanced :get-data="(value:number)=> props.getSearch?.(value)" />
-    <q-input
-      standout
-      dense
-      :model-value="inputfilter"
-      ref="filterRef"
-      @update:model-value="updateInput"
-      outlined
-      placeholder="ค้นหา"
-      style="max-width: 200px"
-      @keydown.enter.prevent="filterFn"
-    >
-      <template v-slot:append>
-        <q-icon name="search" />
-      </template>
-      <q-tooltip
-        transition-show="scale"
-        transition-hide="scale"
-        class="text-body2"
-        >หมายเหตุ: ค้นหาจากเรื่องร้องเรียน
-        ระดับโทษความผิดหรือกรณีความผิด</q-tooltip
+  <div class="row q-col-gutter-sm q-pa-md">
+    <div class="col-12">
+      <div class="row q-col-gutter-sm">
+        <div class="col-xs-12 col-sm-3 col-md-4 col-lg-2">
+          <q-select
+            v-model="statusFilter"
+            label="สถานะ"
+            dense
+            outlined
+            emit-value
+            hide-selected
+            fill-input
+            map-options
+            option-label="name"
+            option-value="id"
+            :options="option"
+            @update:model-value="dataUpdate"
+            use-input
+            @filter="filterOptionFn"
+          >
+            <template v-slot:no-option>
+              <q-item>
+                <q-item-section class="text-grey"> ไม่มีข้อมูล </q-item-section>
+              </q-item>
+            </template>
+            <template v-if="statusFilter !== 'ALL'" v-slot:append>
+              <q-icon
+                name="cancel"
+                @click.stop.prevent="
+                  (option = dataInvestigateDis.statusOptions),
+                    (statusFilter = 'ALL'),
+                    dataUpdate()
+                "
+                class="cursor-pointer"
+              />
+            </template>
+          </q-select>
+        </div>
+        <q-space />
+        <div class="col-xs-12 col-sm-8 col-md-6 col-lg-4">
+          <div class="row q-col-gutter-sm items-center">
+            <!-- ค้นหาข้อความใน table -->
+            <div class="col">
+              <DialogSearchAdvanced :get-data="() => props.getSearch?.()" />
+            </div>
+            <div class="col-7">
+              <q-input
+                standout
+                dense
+                :model-value="inputfilter"
+                ref="filterRef"
+                @update:model-value="updateInput"
+                outlined
+                placeholder="ค้นหา"
+                @keydown.enter.prevent="filterFn"
+              >
+                <template v-slot:append>
+                  <q-icon name="search" />
+                </template>
+                <q-tooltip
+                  transition-show="scale"
+                  transition-hide="scale"
+                  class="text-body2"
+                  >หมายเหตุ: ค้นหาจากเรื่องร้องเรียน
+                  ระดับโทษความผิดหรือกรณีความผิด</q-tooltip
+                >
+              </q-input>
+            </div>
+            <div class="col-4">
+              <q-select
+                :model-value="inputvisible"
+                @update:model-value="updateVisible"
+                :display-value="$q.lang.table.columns"
+                multiple
+                outlined
+                dense
+                :options="attrs.columns"
+                options-dense
+                option-value="name"
+                map-options
+                emit-value
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="col-12">
+      <p-table
+        ref="table"
+        flat
+        v-bind="attrs"
+        virtual-scroll
+        :virtual-scroll-sticky-size-start="48"
+        dense
+        :rows-per-page-options="[10, 25, 50, 100]"
+        v-model:pagination="pagination"
+        @request="props.onRequest"
       >
-    </q-input>
-    <!-- แสดงคอลัมน์ใน table -->
-    <q-select
-      :model-value="inputvisible"
-      @update:model-value="updateVisible"
-      :display-value="$q.lang.table.columns"
-      multiple
-      outlined
-      dense
-      :options="attrs.columns"
-      options-dense
-      option-value="name"
-      map-options
-      emit-value
-      style="min-width: 140px"
-    >
-    </q-select>
+        <template v-slot:header="props">
+          <q-tr :props="props">
+            <q-th auto-width></q-th>
+            <q-th v-for="col in props.cols" :key="col.name" :props="props">
+              <span class="text-weight-medium" v-html="col.label" />
+            </q-th>
+          </q-tr>
+        </template>
+        <template v-slot:body="props">
+          <q-tr :props="props">
+            <q-td auto-width>
+              <q-btn
+                v-if="checkPermission($route)?.attrIsGet"
+                flat
+                dense
+                round
+                icon="mdi-eye"
+                color="info"
+                @click="openDetail(props.row.id)"
+              >
+                <q-tooltip>รายละเอียด</q-tooltip>
+              </q-btn>
+              <q-btn
+                v-if="
+                  checkPermission($route)?.attrIsUpdate &&
+                  checkPermission($route)?.attrIsGet
+                "
+                flat
+                dense
+                round
+                icon="edit"
+                color="edit"
+                @click="openEdit(props.row.id)"
+              >
+                <q-tooltip>แก้ไขข้อมูล</q-tooltip>
+              </q-btn>
+            </q-td>
+            <q-td v-for="col in props.cols" :key="col.name" :props="props">
+              <div v-if="col.name == 'no'">
+                {{ props.rowIndex + 1 }}
+              </div>
+
+              <div
+                v-else
+                :class="
+                  col.name === 'title' || col.name === 'disciplinaryCaseFault'
+                    ? 'table_ellipsis'
+                    : ''
+                "
+              >
+                {{ col.value ?? "-" }}
+              </div>
+            </q-td>
+          </q-tr>
+        </template>
+      </p-table>
+    </div>
   </div>
-  <d-table
-    ref="table"
-    flat
-    v-bind="attrs"
-    virtual-scroll
-    :virtual-scroll-sticky-size-start="48"
-    dense
-    :rows-per-page-options="[10, 25, 50, 100]"
-    @update:pagination="updatePagination"
-  >
-    <template v-slot:pagination="scope">
-      ทั้งหมด {{ total }} รายการ
-      <q-pagination
-        v-model="pagination.page"
-        active-color="primary"
-        color="dark"
-        :max="Number(totalList)"
-        size="sm"
-        boundary-links
-        direction-links
-        :max-pages="5"
-        @update:model-value="props.fetchListDisciplinary?.()"
-      ></q-pagination>
-    </template>
-    <template v-slot:header="props">
-      <q-tr :props="props">
-        <q-th auto-width></q-th>
-        <q-th v-for="col in props.cols" :key="col.name" :props="props">
-          <span class="text-weight-medium" v-html="col.label" />
-        </q-th>
-      </q-tr>
-    </template>
-    <template v-slot:body="props">
-      <q-tr :props="props">
-        <q-td auto-width>
-          <q-btn
-            v-if="checkPermission($route)?.attrIsGet"
-            flat
-            dense
-            round
-            icon="mdi-eye"
-            color="info"
-            @click="openDetail(props.row.id)"
-          >
-            <q-tooltip>รายละเอียด</q-tooltip>
-          </q-btn>
-          <q-btn
-            v-if="
-              checkPermission($route)?.attrIsUpdate &&
-              checkPermission($route)?.attrIsGet
-            "
-            flat
-            dense
-            round
-            icon="edit"
-            color="edit"
-            @click="openEdit(props.row.id)"
-          >
-            <q-tooltip>แก้ไขข้อมูล</q-tooltip>
-          </q-btn>
-        </q-td>
-        <q-td v-for="col in props.cols" :key="col.name" :props="props">
-          <div v-if="col.name == 'no'">
-            {{
-              (currentPage - 1) * Number(pagination.rowsPerPage) +
-              props.rowIndex +
-              1
-            }}
-          </div>
-          <div v-else-if="col.name === 'title'" class="table_ellipsis">
-            {{ props.row.title }}
-          </div>
-          <div v-else>
-            {{ col.value }}
-          </div>
-        </q-td>
-      </q-tr>
-    </template>
-  </d-table>
 </template>
 
-<style lang="scss">
-.icon-color {
-  color: #4154b3;
-}
-
-.custom-table2 {
-  max-height: 64vh;
-
-  .q-table tr:nth-child(odd) td {
-    background: white;
-  }
-
-  .q-table tr:nth-child(even) td {
-    background: #f8f8f8;
-  }
-
-  .q-table thead tr {
-    background: #ecebeb;
-  }
-
-  .q-table thead tr th {
-    position: sticky;
-  }
-
-  .q-table td:nth-of-type(2) {
-    z-index: 3 !important;
-  }
-
-  .q-table th:nth-of-type(2),
-  .q-table td:nth-of-type(2) {
-    position: sticky;
-    left: 0;
-    z-index: 1;
-  }
-
-  /* this will be the loading indicator */
-  .q-table thead tr:last-child th {
-    /* height of all previous header rows */
-    top: 48px;
-  }
-
-  .q-table thead tr:first-child th {
-    top: 0;
-  }
-}
-</style>
+<style lang="scss"></style>
diff --git a/src/modules/11_discipline/store/InvestigateDisStore.ts b/src/modules/11_discipline/store/InvestigateDisStore.ts
index b775fc394..d93cdce23 100644
--- a/src/modules/11_discipline/store/InvestigateDisStore.ts
+++ b/src/modules/11_discipline/store/InvestigateDisStore.ts
@@ -4,7 +4,7 @@ import type { QTableProps } from "quasar";
 
 import { useCounterMixin } from "@/stores/mixin";
 
-import type { Persons } from "@/modules/11_discipline/interface/request/Disciplinary";
+import type { Persons } from "@/modules/11_discipline/interface/request/disciplinary";
 import type {
   investigateDisDataRowType,
   DataOption,
@@ -81,7 +81,7 @@ export const useInvestigateDisStore = defineStore(
       "offenseDetails",
       "disciplinaryFaultLevel",
       "disciplinaryCaseFault",
-      "disciplinaryDate",
+      "disciplinaryDateStart",
       "dateReceived",
       "status",
     ]);
@@ -113,8 +113,6 @@ export const useInvestigateDisStore = defineStore(
         field: "respondentType",
         headerStyle: "font-size: 14px",
         style: "font-size: 14px",
-        sort: (a: string, b: string) =>
-          a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
       },
       {
         name: "offenseDetails",
@@ -124,8 +122,6 @@ export const useInvestigateDisStore = defineStore(
         field: "offenseDetails",
         headerStyle: "font-size: 14px",
         style: "font-size: 14px",
-        sort: (a: string, b: string) =>
-          a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
       },
       {
         name: "disciplinaryFaultLevel",
@@ -135,8 +131,6 @@ export const useInvestigateDisStore = defineStore(
         field: "disciplinaryFaultLevel",
         headerStyle: "font-size: 14px",
         style: "font-size: 14px",
-        sort: (a: string, b: string) =>
-          a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
       },
       {
         name: "disciplinaryCaseFault",
@@ -146,11 +140,9 @@ export const useInvestigateDisStore = defineStore(
         field: "disciplinaryCaseFault",
         headerStyle: "font-size: 14px",
         style: "font-size: 14px",
-        sort: (a: string, b: string) =>
-          a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
       },
       {
-        name: "disciplinaryDate",
+        name: "disciplinaryDateStart",
         align: "left",
         label: "วันที่สอบสวน",
         sortable: true,
@@ -171,7 +163,7 @@ export const useInvestigateDisStore = defineStore(
         name: "status",
         align: "left",
         label: "สถานะ",
-        sortable: true,
+        sortable: false,
         field: "status",
         headerStyle: "font-size: 14px",
         style: "font-size: 14px",

From ad80eae285ab543b86e8f7a533cb7759aba3ecbe Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Thu, 9 Oct 2025 11:05:57 +0700
Subject: [PATCH 4/7] fix(discipline-result):sort

---
 .../components/1_Complaint/MainPage.vue       |   4 +-
 .../2_InvestigateFacts/MainPage.vue           |   2 +-
 .../3_InvestigateDisciplinary/Table.vue       |   2 +-
 .../components/4_Result/MainPage.vue          |  78 ++--
 .../components/4_Result/Table.vue             | 393 ++++++++----------
 .../11_discipline/store/ResultStore.ts        |  14 +-
 6 files changed, 204 insertions(+), 289 deletions(-)

diff --git a/src/modules/11_discipline/components/1_Complaint/MainPage.vue b/src/modules/11_discipline/components/1_Complaint/MainPage.vue
index ea5bb1766..baf855b80 100644
--- a/src/modules/11_discipline/components/1_Complaint/MainPage.vue
+++ b/src/modules/11_discipline/components/1_Complaint/MainPage.vue
@@ -158,7 +158,7 @@ onMounted(async () => {
               </div>
 
               <div
-                class="col-xs"
+                class="col-xs justify-center row"
                 v-if="checkPermission($route)?.attrIsCreate"
               >
                 <q-btn
@@ -180,7 +180,7 @@ onMounted(async () => {
 
           <div class="col-xs-12 col-sm-8 col-md-6 col-lg-4">
             <div class="row q-col-gutter-sm items-center">
-              <div class="col">
+              <div class="col justify-center row">
                 <DialogSearchAdvanced :get-data="() => getSearch()" />
               </div>
               <div class="col-7">
diff --git a/src/modules/11_discipline/components/2_InvestigateFacts/MainPage.vue b/src/modules/11_discipline/components/2_InvestigateFacts/MainPage.vue
index bad728924..088b511ca 100644
--- a/src/modules/11_discipline/components/2_InvestigateFacts/MainPage.vue
+++ b/src/modules/11_discipline/components/2_InvestigateFacts/MainPage.vue
@@ -175,7 +175,7 @@ onMounted(() => {
           <q-space />
           <div class="col-xs-12 col-sm-8 col-md-6 col-lg-4">
             <div class="row q-col-gutter-sm items-center">
-              <div class="col">
+              <div class="col justify-center row">
                 <DialogSearchAdvanced :get-data="() => getSearch()" />
               </div>
 
diff --git a/src/modules/11_discipline/components/3_InvestigateDisciplinary/Table.vue b/src/modules/11_discipline/components/3_InvestigateDisciplinary/Table.vue
index aa332c0dc..04ae6b6ac 100644
--- a/src/modules/11_discipline/components/3_InvestigateDisciplinary/Table.vue
+++ b/src/modules/11_discipline/components/3_InvestigateDisciplinary/Table.vue
@@ -162,7 +162,7 @@ function filterOptionFn(val: string, update: Function) {
         <div class="col-xs-12 col-sm-8 col-md-6 col-lg-4">
           <div class="row q-col-gutter-sm items-center">
             <!-- ค้นหาข้อความใน table -->
-            <div class="col">
+            <div class="col justify-center row">
               <DialogSearchAdvanced :get-data="() => props.getSearch?.()" />
             </div>
             <div class="col-7">
diff --git a/src/modules/11_discipline/components/4_Result/MainPage.vue b/src/modules/11_discipline/components/4_Result/MainPage.vue
index 7e25a0d71..3483b5e62 100644
--- a/src/modules/11_discipline/components/4_Result/MainPage.vue
+++ b/src/modules/11_discipline/components/4_Result/MainPage.vue
@@ -8,7 +8,7 @@ import config from "@/app.config";
 import { useCounterMixin } from "@/stores/mixin";
 import { useDisciplineResultStore } from "@/modules/11_discipline/store/ResultStore";
 import { useDisciplineMainStore } from "@/modules/11_discipline/store/Main";
-import type { Pagination } from "@/modules/03_recruiting/interface/index/Main";
+import { usePagination } from "@/composables/usePagination";
 
 import Table from "@/modules/11_discipline/components/4_Result/Table.vue";
 
@@ -19,23 +19,15 @@ const storeResult = useDisciplineResultStore();
 const store = useDisciplineMainStore();
 const { showLoader, hideLoader, messageError, convertDateToAPI } = mixin;
 const { fetchList } = storeResult;
+const { pagination, params, onRequest } = usePagination("", fetchListResult);
 
 const filter = ref<string>("");
 const status = ref<string>("DONE");
-const total = ref<number>(0);
-const totalList = ref<number>(1);
-const pagination = ref({
-  sortBy: "createdAt",
-  descending: true,
-  page: 1,
-  rowsPerPage: 10,
-});
 
 /** function เรียกรายการสรุปผลการพิจารณาทางวินัย*/
-async function fetchListResult(page?: number) {
+async function fetchListResult() {
   const body = {
-    page: page ? page : pagination.value.page,
-    pageSize: pagination.value.rowsPerPage,
+    ...params.value,
     keyword: filter.value.trim(),
     status: status.value,
     ...(store.formResult.respondentType && {
@@ -77,12 +69,9 @@ async function fetchListResult(page?: number) {
   await http
     .post(config.API.listResult(), body)
     .then(async (res) => {
-      const data = res.data.result.data;
-      totalList.value = Math.ceil(
-        res.data.result.total / pagination.value.rowsPerPage
-      );
-      total.value = res.data.result.total;
-      await fetchList(data);
+      const result = res.data.result;
+      pagination.value.rowsNumber = result.total;
+      await fetchList(result.data);
     })
     .catch((err) => {
       messageError($q, err);
@@ -112,18 +101,11 @@ function filterStatus(statusReturn: string) {
   getSearch();
 }
 
-function getSearch(page?: number) {
+function getSearch() {
   pagination.value.page = 1;
-  fetchListResult(page);
+  fetchListResult();
 }
 
-watch(
-  () => pagination.value.rowsPerPage,
-  async () => {
-    getSearch();
-  }
-);
-
 /**เมื่อเริ่มโหลดหน้า
  * ส่งข้อมูลจำลองไปยัง store
  */
@@ -136,29 +118,25 @@ onMounted(async () => {
   <div class="toptitle text-dark col-12 row items-center">
     รายการสรุปผลการพิจารณาความผิดทางวินัย
   </div>
-  <q-card flat bordered class="col-12 q-mt-sm q-pt-sm q-pa-md">
-    <div>
-      <Table
-        style="max-height: 80vh"
-        :rows="storeResult.rows"
-        :columns="storeResult.columns"
-        :visible-columns="storeResult.visibleColumns"
-        v-model:inputfilter="filter"
-        v-model:inputvisible="storeResult.visibleColumns"
-        :nornmalData="true"
-        :paging="true"
-        :titleText="''"
-        :fetchListResult="fetchListResult"
-        :get-search="getSearch"
-        v-model:open-edit="openEdit"
-        v-model:open-detail="openDetail"
-        :filterStatus="filterStatus"
-        v-model:pagination="pagination"
-        v-model:total="total"
-        v-model:total-list="totalList"
-      >
-      </Table>
-    </div>
+  <q-card flat bordered>
+    <Table
+      style="max-height: 80vh"
+      :rows="storeResult.rows"
+      :columns="storeResult.columns"
+      :visible-columns="storeResult.visibleColumns"
+      v-model:inputfilter="filter"
+      v-model:inputvisible="storeResult.visibleColumns"
+      :nornmalData="true"
+      :paging="true"
+      :titleText="''"
+      :fetchListResult="fetchListResult"
+      :get-search="getSearch"
+      v-model:open-edit="openEdit"
+      v-model:open-detail="openDetail"
+      :filterStatus="filterStatus"
+      v-model:pagination="pagination"
+      :on-request="onRequest"
+    />
   </q-card>
 </template>
 
diff --git a/src/modules/11_discipline/components/4_Result/Table.vue b/src/modules/11_discipline/components/4_Result/Table.vue
index 40efc64f6..259f2598e 100644
--- a/src/modules/11_discipline/components/4_Result/Table.vue
+++ b/src/modules/11_discipline/components/4_Result/Table.vue
@@ -1,22 +1,23 @@
 <script setup lang="ts">
-import { ref, useAttrs, watch } from "vue";
+import { ref, useAttrs } from "vue";
 
 import { useDisciplineResultStore } from "@/modules/11_discipline/store/ResultStore";
 import { checkPermission } from "@/utils/permissions";
 
+import type { PropsTable } from "@/interface/index/PropsTable";
+import type { DataOption } from "@/modules/11_discipline/interface/index/Main";
+
 import DialogSearchAdvanced from "@/modules/11_discipline/components/DialogSearchAdvanced.vue";
 
-const total = defineModel<number>("total", { required: true });
-const totalList = defineModel<number>("totalList", { required: true });
-const pagination = defineModel<any>("pagination", { required: true });
+const pagination = defineModel<PropsTable.Pagination>("pagination", {
+  required: true,
+});
 
 const store = useDisciplineResultStore();
-const table = ref<any>(null);
-const filterRef = ref<any>(null);
 const attrs = ref<any>(useAttrs());
 const statusFilter = ref<string>("DONE");
 
-const option = ref<any[]>(store.statusOptions);
+const option = ref<DataOption[]>(store.statusOptions);
 
 /** รับ props มาจากหน้าหลัก */
 const props = defineProps({
@@ -57,9 +58,12 @@ const props = defineProps({
     type: Boolean,
     defualt: false,
   },
+  onRequest: {
+    type: Function,
+    required: true,
+  },
 });
 
-const filter = ref<string>("");
 const emit = defineEmits([
   "update:inputfilter",
   "update:inputvisible",
@@ -71,17 +75,6 @@ function updateVisible(value: []) {
   emit("update:inputvisible", value);
 }
 
-function resetFilter() {
-  // reset ค่าที่ค้นหาเมื่อกดปุ่ม X ในกล่องค้นหา
-  emit("update:inputfilter", "");
-  filterRef.value.focus();
-  props.getSearch?.();
-}
-
-function updatePaging(p: number, pS: number, key: string) {
-  emit("update:queryString", p, pS, key);
-}
-
 function dataUpdate() {
   props.filterStatus(statusFilter.value);
 }
@@ -105,215 +98,167 @@ function filterOptionFn(val: string, update: Function) {
     );
   });
 }
-
-function updatePagination(newPagination: any) {
-  pagination.value.page = 1;
-  pagination.value.rowsPerPage = newPagination.rowsPerPage;
-}
 </script>
 
 <template>
-  <div class="q-pb-sm row q-col-gutter-sm items-center">
-    <div class="q-gutter-sm" v-if="nornmalData == true"></div>
-
-    <q-select
-      v-model="statusFilter"
-      label="สถานะ"
-      dense
-      outlined
-      emit-value
-      map-options
-      hide-selected
-      fill-input
-      option-label="name"
-      option-value="id"
-      :options="option"
-      @update:model-value="dataUpdate"
-      use-input
-      @filter="filterOptionFn"
-    >
-      <template v-slot:no-option>
-        <q-item>
-          <q-item-section class="text-grey"> ไม่มีข้อมูล </q-item-section>
-        </q-item>
-      </template>
-      <template v-if="statusFilter !== 'ALL'" v-slot:append>
-        <q-icon
-          name="cancel"
-          @click.stop.prevent="
-            (option = store.statusOptions), (statusFilter = 'ALL'), dataUpdate()
-          "
-          class="cursor-pointer"
-        />
-      </template>
-    </q-select>
-
-    <q-space />
-    <DialogSearchAdvanced :get-data="(value:number)=> props.getSearch?.(value)" />
-    <q-input
-      standout
-      dense
-      :model-value="inputfilter"
-      ref="filterRef"
-      @keydown.enter.prevent="filterFn"
-      @update:model-value="updateInput"
-      outlined
-      placeholder="ค้นหา"
-      style="max-width: 200px"
-    >
-      <template v-slot:append>
-        <q-icon name="search" />
-      </template>
-      <q-tooltip
-        anchor="bottom left"
-        transition-show="scale"
-        transition-hide="scale"
-        class="text-body2"
+  <div class="row q-col-gutter-sm q-pa-md">
+    <div class="col-12">
+      <div class="row q-col-gutter-sm">
+        <div class="col-xs-12 col-sm-3 col-md-4 col-lg-2">
+          <q-select
+            v-model="statusFilter"
+            label="สถานะ"
+            dense
+            outlined
+            emit-value
+            map-options
+            hide-selected
+            fill-input
+            option-label="name"
+            option-value="id"
+            :options="option"
+            @update:model-value="dataUpdate"
+            use-input
+            @filter="filterOptionFn"
+          >
+            <template v-slot:no-option>
+              <q-item>
+                <q-item-section class="text-grey"> ไม่มีข้อมูล </q-item-section>
+              </q-item>
+            </template>
+            <template v-if="statusFilter !== 'ALL'" v-slot:append>
+              <q-icon
+                name="cancel"
+                @click.stop.prevent="
+                  (option = store.statusOptions),
+                    (statusFilter = 'ALL'),
+                    dataUpdate()
+                "
+                class="cursor-pointer"
+              />
+            </template>
+          </q-select>
+        </div>
+        <q-space />
+        <div class="col-xs-12 col-sm-8 col-md-6 col-lg-4">
+          <div class="row q-col-gutter-sm items-center">
+            <div class="col justify-center row">
+              <DialogSearchAdvanced :get-data="() => props.getSearch?.()" />
+            </div>
+            <div class="col-7">
+              <q-input
+                standout
+                dense
+                :model-value="inputfilter"
+                ref="filterRef"
+                @keydown.enter.prevent="filterFn"
+                @update:model-value="updateInput"
+                outlined
+                placeholder="ค้นหา"
+              >
+                <template v-slot:append>
+                  <q-icon name="search" />
+                </template>
+                <q-tooltip
+                  anchor="bottom left"
+                  transition-show="scale"
+                  transition-hide="scale"
+                  class="text-body2"
+                >
+                  หมายเหตุ: ค้นหาจากเรื่องร้องเรียน ประเภทวินัย ประเภทของเรื่อง
+                  หน่วนงาน/ส่วนราชการ หรือปีงบประมาณ</q-tooltip
+                >
+              </q-input>
+            </div>
+            <div class="col-4">
+              <q-select
+                :model-value="inputvisible"
+                @update:model-value="updateVisible"
+                :display-value="$q.lang.table.columns"
+                multiple
+                outlined
+                dense
+                :options="attrs.columns"
+                options-dense
+                option-value="name"
+                map-options
+                emit-value
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="col-12">
+      <p-table
+        ref="table"
+        flat
+        v-bind="attrs"
+        virtual-scroll
+        :virtual-scroll-sticky-size-start="48"
+        dense
+        :rows-per-page-options="[10, 25, 50, 100]"
+        v-model:pagination="pagination"
+        @request="props.onRequest"
       >
-        หมายเหตุ: ค้นหาจากเรื่องร้องเรียน ประเภทวินัย ประเภทของเรื่อง
-        หน่วนงาน/ส่วนราชการ หรือปีงบประมาณ</q-tooltip
-      >
-    </q-input>
-    <q-select
-      :model-value="inputvisible"
-      @update:model-value="updateVisible"
-      :display-value="$q.lang.table.columns"
-      multiple
-      outlined
-      dense
-      :options="attrs.columns"
-      options-dense
-      option-value="name"
-      map-options
-      emit-value
-      style="min-width: 140px"
-    >
-    </q-select>
+        <template v-slot:header="props">
+          <q-tr :props="props">
+            <q-th auto-width></q-th>
+            <q-th v-for="col in props.cols" :key="col.name" :props="props">
+              <span class="text-weight-medium" v-html="col.label" />
+            </q-th>
+          </q-tr>
+        </template>
+        <template v-slot:body="props">
+          <q-tr :props="props">
+            <q-td auto-width>
+              <q-btn
+                flat
+                round
+                dense
+                icon="mdi-eye"
+                color="info"
+                @click="openDetail(props.row.id)"
+                v-if="checkPermission($route)?.attrIsGet"
+              >
+                <q-tooltip>รายละเอียด</q-tooltip>
+              </q-btn>
+              <q-btn
+                v-if="
+                  checkPermission($route)?.attrIsUpdate &&
+                  checkPermission($route)?.attrIsGet
+                "
+                flat
+                round
+                dense
+                icon="edit"
+                color="edit"
+                @click="openEdit(props.row.id)"
+              >
+                <q-tooltip>แก้ไขข้อมูล</q-tooltip>
+              </q-btn>
+            </q-td>
+            <q-td v-for="col in props.cols" :key="col.name" :props="props">
+              <div v-if="col.name == 'no'">
+                {{ props.rowIndex + 1 }}
+              </div>
+
+              <div
+                v-else
+                :class="
+                  col.name === 'title' || col.name === 'disciplinaryCaseFault'
+                    ? 'table_ellipsis'
+                    : ''
+                "
+              >
+                {{ col.value ?? "-" }}
+              </div>
+            </q-td>
+          </q-tr>
+        </template>
+      </p-table>
+    </div>
   </div>
-  <d-table
-    ref="table"
-    flat
-    v-bind="attrs"
-    virtual-scroll
-    :virtual-scroll-sticky-size-start="48"
-    dense
-    :rows-per-page-options="[10, 25, 50, 100]"
-    @update:pagination="updatePagination"
-  >
-    <template v-slot:header="props">
-      <q-tr :props="props">
-        <q-th auto-width></q-th>
-        <q-th v-for="col in props.cols" :key="col.name" :props="props">
-          <span class="text-weight-medium" v-html="col.label" />
-        </q-th>
-      </q-tr>
-    </template>
-    <template v-slot:body="props">
-      <q-tr :props="props">
-        <q-td auto-width>
-          <q-btn
-            flat
-            round
-            dense
-            icon="mdi-eye"
-            color="info"
-            @click="openDetail(props.row.id)"
-            v-if="checkPermission($route)?.attrIsGet"
-          >
-            <q-tooltip>รายละเอียด</q-tooltip>
-          </q-btn>
-          <q-btn
-            v-if="
-              checkPermission($route)?.attrIsUpdate &&
-              checkPermission($route)?.attrIsGet
-            "
-            flat
-            round
-            dense
-            icon="edit"
-            color="edit"
-            @click="openEdit(props.row.id)"
-          >
-            <q-tooltip>แก้ไขข้อมูล</q-tooltip>
-          </q-btn>
-        </q-td>
-        <q-td v-for="col in props.cols" :key="col.name" :props="props">
-          <div v-if="col.name == 'no'">
-            {{
-              (pagination.page - 1) * pagination.rowsPerPage +
-              props.rowIndex +
-              1
-            }}
-          </div>
-          <div v-else-if="col.name === 'title'" class="table_ellipsis">
-            {{ props.row.title ?? "-" }}
-          </div>
-          <div v-else>
-            {{ col.value ?? "-" }}
-          </div>
-        </q-td>
-      </q-tr>
-    </template>
-    <template v-slot:pagination="scope">
-      ทั้งหมด {{ total }} รายการ
-      <q-pagination
-        v-model="pagination.page"
-        active-color="primary"
-        color="dark"
-        :max="Number(totalList)"
-        size="sm"
-        boundary-links
-        direction-links
-        :max-pages="5"
-        @update:model-value="props.fetchListResult?.()"
-      ></q-pagination>
-    </template>
-  </d-table>
 </template>
 
-<style lang="scss">
-.icon-color {
-  color: #4154b3;
-}
-
-.custom-table2 {
-  max-height: 64vh;
-
-  .q-table tr:nth-child(odd) td {
-    background: white;
-  }
-
-  .q-table tr:nth-child(even) td {
-    background: #f8f8f8;
-  }
-
-  .q-table thead tr {
-    background: #ecebeb;
-  }
-
-  .q-table thead tr th {
-    position: sticky;
-  }
-
-  .q-table td:nth-of-type(2) {
-    z-index: 3 !important;
-  }
-
-  .q-table th:nth-of-type(2),
-  .q-table td:nth-of-type(2) {
-    position: sticky;
-    left: 0;
-    z-index: 1;
-  }
-
-  /* this will be the loading indicator */
-  .q-table thead tr:last-child th {
-    /* height of all previous header rows */
-    top: 48px;
-  }
-
-  .q-table thead tr:first-child th {
-    top: 0;
-  }
-}
-</style>
+<style lang="scss"></style>
diff --git a/src/modules/11_discipline/store/ResultStore.ts b/src/modules/11_discipline/store/ResultStore.ts
index 54406a2fc..b7b4020c6 100644
--- a/src/modules/11_discipline/store/ResultStore.ts
+++ b/src/modules/11_discipline/store/ResultStore.ts
@@ -42,7 +42,7 @@ export const useDisciplineResultStore = defineStore(
       "offenseDetails",
       "disciplinaryFaultLevel",
       "disciplinaryCaseFault",
-      "disciplinaryDate",
+      "disciplinaryDateStart",
       "resultDisciplineType",
       "resultTitleType",
       "resultOc",
@@ -77,8 +77,6 @@ export const useDisciplineResultStore = defineStore(
         field: "respondentType",
         headerStyle: "font-size: 14px",
         style: "font-size: 14px",
-        sort: (a: string, b: string) =>
-          a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
       },
       {
         name: "offenseDetails",
@@ -88,8 +86,6 @@ export const useDisciplineResultStore = defineStore(
         field: "offenseDetails",
         headerStyle: "font-size: 14px",
         style: "font-size: 14px",
-        sort: (a: string, b: string) =>
-          a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
       },
       {
         name: "disciplinaryFaultLevel",
@@ -99,8 +95,6 @@ export const useDisciplineResultStore = defineStore(
         field: "disciplinaryFaultLevel",
         headerStyle: "font-size: 14px",
         style: "font-size: 14px",
-        sort: (a: string, b: string) =>
-          a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
       },
       {
         name: "disciplinaryCaseFault",
@@ -110,11 +104,9 @@ export const useDisciplineResultStore = defineStore(
         field: "disciplinaryCaseFault",
         headerStyle: "font-size: 14px",
         style: "font-size: 14px",
-        sort: (a: string, b: string) =>
-          a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
       },
       {
-        name: "disciplinaryDate",
+        name: "disciplinaryDateStart",
         align: "left",
         label: "วันที่สอบสวน",
         sortable: true,
@@ -162,7 +154,7 @@ export const useDisciplineResultStore = defineStore(
         name: "status",
         align: "left",
         label: "สถานะ",
-        sortable: true,
+        sortable: false,
         field: "status",
         headerStyle: "font-size: 14px",
         style: "font-size: 14px",

From dc3989acae2ac3ad5a98abaebf88584abd64dd1b Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Thu, 9 Oct 2025 11:53:45 +0700
Subject: [PATCH 5/7] fix(startDateSuspend):sort

---
 src/api/11_discipline/api.discipline.ts       |   9 +-
 .../components/7_ListSuspend/ListsPage.vue    | 515 ++++++++----------
 2 files changed, 236 insertions(+), 288 deletions(-)

diff --git a/src/api/11_discipline/api.discipline.ts b/src/api/11_discipline/api.discipline.ts
index 4bb3f94a2..a1a0e2bc9 100644
--- a/src/api/11_discipline/api.discipline.ts
+++ b/src/api/11_discipline/api.discipline.ts
@@ -82,13 +82,8 @@ export default {
     `${discipline}/director/${disciplineId}/${id}`,
 
   /** ผู้ถูกพักราชการ */
-  suspendMain: (
-    page: number,
-    pageSize: number,
-    keyword: string,
-    type: string
-  ) =>
-    `${suspend}?page=${page}&pageSize=${pageSize}&keyword=${keyword}&profileType=${type}`,
+  suspendMain: suspend,
+
   suspendById: (id: string) => `${suspend}/${id}`,
 
   suspendReport: () => `${suspend}/report`,
diff --git a/src/modules/11_discipline/components/7_ListSuspend/ListsPage.vue b/src/modules/11_discipline/components/7_ListSuspend/ListsPage.vue
index bb391a6a0..bb73d2036 100644
--- a/src/modules/11_discipline/components/7_ListSuspend/ListsPage.vue
+++ b/src/modules/11_discipline/components/7_ListSuspend/ListsPage.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, onMounted, watch } from "vue";
+import { ref, onMounted } from "vue";
 import { useQuasar } from "quasar";
 import { useRouter } from "vue-router";
 
@@ -7,33 +7,28 @@ import http from "@/plugins/http";
 import config from "@/app.config";
 import { useCounterMixin } from "@/stores/mixin";
 import { useDisciplineSuspendStore } from "@/modules/11_discipline/store/SuspendStore";
-
-import type {
-  dataType,
-  DataOption,
-} from "@/modules/11_discipline/interface/response/suspend";
-import type { QTableProps } from "quasar";
-
-import DialogSendToCommand from "@/modules/11_discipline/components/7_ListSuspend/DialogSendToCommand.vue";
+import { usePagination } from "@/composables/usePagination";
 import {
   checkPermission,
   checkPermissionList,
   checkPermissionCreate,
 } from "@/utils/permissions";
 
+import type { QTableProps } from "quasar";
+import type {
+  dataType,
+  DataOption,
+} from "@/modules/11_discipline/interface/response/suspend";
+
+import DialogSendToCommand from "@/modules/11_discipline/components/7_ListSuspend/DialogSendToCommand.vue";
+
 /** use */
 const dataStore = useDisciplineSuspendStore();
 const $q = useQuasar();
 const router = useRouter();
-const mixin = useCounterMixin();
-const {
-  messageError,
-  showLoader,
-  hideLoader,
-  success,
-  date2Thai,
-  convertDateToAPI,
-} = mixin;
+const { messageError, showLoader, hideLoader, date2Thai, convertDateToAPI } =
+  useCounterMixin();
+const { pagination, params, onRequest } = usePagination("", getList);
 
 const date = ref<any>(null);
 const employeeClass = ref<string>("");
@@ -49,19 +44,18 @@ const visibleColumns = ref<string[]>([
   "no",
   "profileType",
   "title",
-  "name",
+  "firstName",
   "position",
   "positionType",
   "positionLevel",
   "organization",
-  "dateTotal",
+  "startDateSuspend",
   "descriptionSuspend",
   "status",
 ]);
 
 //ค้นหา คอลัมน์ คอลัมน์ที่แสดง
 const filterKeyword = ref<string>("");
-const filterRef = ref<any>(null);
 
 //ค้นหา คอลัมน์ คอลัมน์ที่แสดง
 const rows2 = ref<dataType[]>([]);
@@ -79,7 +73,7 @@ const columns = ref<QTableProps["columns"]>([
     name: "profileType",
     align: "left",
     label: "ประเภทตำแหน่ง",
-    sortable: true,
+    sortable: false,
     field: "profileType",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
@@ -94,7 +88,7 @@ const columns = ref<QTableProps["columns"]>([
     style: "font-size: 14px",
   },
   {
-    name: "name",
+    name: "firstName",
     align: "left",
     label: "ชื่อ - นามสกุล",
     sortable: true,
@@ -135,7 +129,7 @@ const columns = ref<QTableProps["columns"]>([
     style: "font-size: 14px",
   },
   {
-    name: "dateTotal",
+    name: "startDateSuspend",
     align: "left",
     label: "วันที่เริ่มต้น-สิ้นสุดคำสั่ง",
     sortable: true,
@@ -156,28 +150,15 @@ const columns = ref<QTableProps["columns"]>([
     name: "status",
     align: "left",
     label: "สถานะ",
-    sortable: true,
+    sortable: false,
     field: "status",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
 ]);
 
-const openModal = () => (modal.value = true);
-
-const total = ref<number>(0);
-const totalList = ref<number>(1);
-const pagination = ref({
-  sortBy: "createdAt",
-  descending: true,
-  page: 1,
-  rowsPerPage: 10,
-});
-
-function resetFilter() {
-  filterKeyword.value = "";
-  filterRef.value.focus();
-  getSearch();
+function openModal() {
+  modal.value = true;
 }
 
 /** เปิด popup ส่งไปออกคำสั่ง โดย PENDING*/
@@ -201,28 +182,22 @@ function openModalOrder() {
 /** ดึงข้อมูลหน้าหลัก */
 async function getList() {
   showLoader();
-  const params: Record<string, any> = {};
-  if (date.value && date.value.length === 2) {
-    params.startDate = convertDateToAPI(date.value[0]);
-    params.endDate = convertDateToAPI(date.value[1]);
-  }
+  const paramsNew = {
+    ...params.value,
+    keyword: filterKeyword.value.trim(),
+    profileType: employeeClass.value,
+    ...(date.value?.length === 2 && {
+      startDate: convertDateToAPI(date.value[0]),
+      endDate: convertDateToAPI(date.value[1]),
+    }),
+  };
+
   await http
-    .get(
-      config.API.suspendMain(
-        pagination.value.page,
-        pagination.value.rowsPerPage,
-        filterKeyword.value.trim(),
-        employeeClass.value
-      ),
-      { params }
-    )
+    .get(config.API.suspendMain, { params: paramsNew })
     .then(async (res) => {
-      const data = await res.data.result.data;
-      totalList.value = Math.ceil(
-        res.data.result.total / pagination.value.rowsPerPage
-      );
-      total.value = res.data.result.total;
-      await dataStore.getData(data);
+      const result = await res.data.result;
+      pagination.value.rowsNumber = result.total;
+      await dataStore.getData(result.data);
     })
     .catch((e) => {
       messageError($q, e);
@@ -232,27 +207,11 @@ async function getList() {
     });
 }
 
-function filterFn() {
-  getSearch();
-}
-
-function updatePagination(newPagination: any) {
-  pagination.value.page = 1;
-  pagination.value.rowsPerPage = newPagination.rowsPerPage;
-}
-
 function getSearch() {
   pagination.value.page = 1;
   getList();
 }
 
-watch(
-  () => pagination.value.rowsPerPage,
-  async () => {
-    getSearch();
-  }
-);
-
 function convertType(val: string) {
   const data = val?.toLocaleUpperCase();
   switch (data) {
@@ -275,221 +234,215 @@ onMounted(async () => {
   <div class="toptitle text-dark col-12 row items-center">
     รายชื่อผู้ถูกพักราชการ
   </div>
-  <q-card flat bordered class="col-12 q-mt-sm">
-    <q-separator />
-    <div class="row q-pa-md">
+  <q-card flat bordered>
+    <div class="row q-pa-md q-col-gutter-sm">
       <div class="col-12">
-        <div class="row col-12 q-col-gutter-sm items-center">
-          <div>
-            <q-select
-              v-model="employeeClass"
-              outlined
-              dense
-              options-dense
-              emit-value
-              map-options
-              :options="employeeClassOption"
-              option-value="id"
-              option-label="name"
-              label="ประเภทตำแหน่ง"
-              style="min-width: 200px"
-              @update:model-value="getList"
-            />
-          </div>
-          <div>
-            <datepicker
-              v-model="date"
-              :locale="'th'"
-              autoApply
-              range
-              :enableTimePicker="false"
-              @update:model-value="getList()"
-              style="min-width: 280px"
-            >
-              <template #year="{ year }">{{ year + 543 }}</template>
-              <template #year-overlay-value="{ value }">{{
-                parseInt(value + 543)
-              }}</template>
-              <template #trigger>
-                <q-input
-                  class="bg-white"
-                  dense
+        <div class="row q-col-gutter-sm">
+          <div class="col-xs-12 col-sm-7 col-md-6 col-lg-5">
+            <div class="row col-12 q-col-gutter-sm items-center">
+              <div class="col-xs-12 col-sm-4 col-md-4 col-lg-4">
+                <q-select
+                  v-model="employeeClass"
                   outlined
-                  :label="`${'วันที่เริ่มต้น-สิ้นสุดคำสั่ง'}`"
-                  :model-value="
-                    date ? `${date2Thai(date[0])} - ${date2Thai(date[1])}` : ''
-                  "
+                  dense
+                  options-dense
+                  emit-value
+                  map-options
+                  :options="employeeClassOption"
+                  option-value="id"
+                  option-label="name"
+                  label="ประเภทตำแหน่ง"
+                  @update:model-value="getList"
+                />
+              </div>
+              <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6">
+                <datepicker
+                  v-model="date"
+                  :locale="'th'"
+                  autoApply
+                  range
+                  :enableTimePicker="false"
+                  @update:model-value="getList()"
                 >
-                  <template v-slot:prepend>
-                    <q-icon
-                      size="18px"
-                      name="event"
-                      class="cursor-pointer"
-                      color="primary"
-                    ></q-icon>
+                  <template #year="{ year }">{{ year + 543 }}</template>
+                  <template #year-overlay-value="{ value }">{{
+                    parseInt(value + 543)
+                  }}</template>
+                  <template #trigger>
+                    <q-input
+                      class="bg-white"
+                      dense
+                      outlined
+                      :label="`${'วันที่เริ่มต้น-สิ้นสุดคำสั่ง'}`"
+                      :model-value="
+                        date
+                          ? `${date2Thai(date[0])} - ${date2Thai(date[1])}`
+                          : ''
+                      "
+                    >
+                      <template v-slot:prepend>
+                        <q-icon
+                          size="18px"
+                          name="event"
+                          class="cursor-pointer"
+                          color="primary"
+                        ></q-icon>
+                      </template>
+                      <template v-slot:append>
+                        <q-icon
+                          v-if="date !== null"
+                          name="clear"
+                          class="cursor-pointer"
+                          @click.prevent.stop="(date = null), getList()"
+                        />
+                      </template>
+                    </q-input>
                   </template>
+                </datepicker>
+              </div>
+              <div class="col-1 row justify-center">
+                <q-btn
+                  v-if="
+                    checkPermission($route)?.attrIsUpdate &&
+                    checkPermissionList(['COMMAND']) &&
+                    checkPermissionCreate('COMMAND')
+                  "
+                  @click="openModalOrder"
+                  flat
+                  round
+                  dense
+                  color="primary"
+                  icon="mdi-account-arrow-right"
+                >
+                  <q-tooltip>ส่งไปออกคำสั่ง</q-tooltip>
+                </q-btn>
+              </div>
+            </div>
+          </div>
+
+          <q-space />
+          <div class="col-xs-12 col-sm-4 col-md-5 col-lg-4">
+            <div class="row q-col-gutter-sm items-center">
+              <div class="col-7">
+                <q-input
+                  for="#search"
+                  standout
+                  dense
+                  v-model="filterKeyword"
+                  ref="filterRef"
+                  outlined
+                  placeholder="ค้นหา"
+                  @keydown.enter.prevent="getSearch"
+                >
                   <template v-slot:append>
-                    <q-icon
-                      v-if="date !== null"
-                      name="clear"
-                      class="cursor-pointer"
-                      @click.prevent.stop="(date = null), getList()"
-                    />
+                    <q-icon name="search" />
                   </template>
                 </q-input>
-              </template>
-            </datepicker>
+              </div>
+              <div class="col-5">
+                <q-select
+                  v-model="dataStore.visibleColumns"
+                  multiple
+                  outlined
+                  dense
+                  options-dense
+                  :display-value="$q.lang.table.columns"
+                  emit-value
+                  map-options
+                  :options="columns"
+                  option-value="name"
+                />
+              </div>
+            </div>
           </div>
-          <div>
-            <q-btn
-              v-if="
-                checkPermission($route)?.attrIsUpdate &&
-                checkPermissionList(['COMMAND']) &&
-                checkPermissionCreate('COMMAND')
-              "
-              @click="openModalOrder"
-              flat
-              round
-              dense
-              color="primary"
-              icon="mdi-account-arrow-right"
-            >
-              <q-tooltip>ส่งไปออกคำสั่ง</q-tooltip>
-            </q-btn>
-          </div>
-          <q-space />
-
-          <q-input
-            for="#search"
-            standout
-            dense
-            v-model="filterKeyword"
-            ref="filterRef"
-            outlined
-            placeholder="ค้นหา"
-            @keydown.enter.prevent="filterFn"
-          >
-            <template v-slot:append>
-              <q-icon name="search" />
-            </template>
-          </q-input>
-
-          <q-select
-            v-model="dataStore.visibleColumns"
-            multiple
-            outlined
-            dense
-            options-dense
-            :display-value="$q.lang.table.columns"
-            emit-value
-            map-options
-            :options="columns"
-            option-value="name"
-            style="min-width: 140px"
-          />
         </div>
+      </div>
 
-        <div class="col-12 q-pt-sm">
-          <d-table
-            :columns="dataStore.columns"
-            :rows="dataStore.rows"
-            row-key="id"
-            :visible-columns="dataStore.visibleColumns"
-            :rows-per-page-options="[10, 25, 50, 100]"
-            @update:pagination="updatePagination"
-          >
-            <template v-slot:pagination="scope">
-              ทั้งหมด {{ total }} รายการ
-              <q-pagination
-                v-model="pagination.page"
-                active-color="primary"
-                color="dark"
-                :max="Number(totalList)"
-                size="sm"
-                boundary-links
-                direction-links
-                :max-pages="5"
-                @update:model-value="getList"
-              ></q-pagination>
-            </template>
-            <template v-slot:header="props">
-              <q-tr :props="props">
-                <q-th auto-width />
-                <q-th v-for="col in props.cols" :key="col.name" :props="props">
-                  <span class="text-weight-medium">{{ col.label }}</span>
-                </q-th>
-                <!-- <q-th auto-width /> -->
-              </q-tr>
-            </template>
-            <template v-slot:body="props">
-              <q-tr :props="props">
-                <q-td auto-width>
-                  <q-btn
-                    v-if="checkPermission($route)?.attrIsGet"
-                    @click="
-                      router.push(`/discipline-suspend-detail/${props.row.id}`)
-                    "
-                    flat
-                    dense
-                    round
-                    color="info"
-                    icon="mdi-eye"
-                  >
-                    <q-tooltip>รายละเอียด</q-tooltip>
-                  </q-btn>
-                  <q-btn
-                    v-if="
-                      checkPermission($route)?.attrIsUpdate &&
-                      checkPermission($route)?.attrIsGet
-                    "
-                    @click="router.push(`/discipline-suspend/${props.row.id}`)"
-                    flat
-                    dense
-                    round
-                    color="edit"
-                    icon="edit"
-                  >
-                    <q-tooltip>แก้ไขข้อมูลเพื่อลงบัญชีแนบท้าย</q-tooltip>
-                  </q-btn>
-                </q-td>
-                <q-td v-for="col in props.cols" :key="col.name" :props="props">
-                  <div v-if="col.name == 'no'">
-                    {{
-                      (pagination.page - 1) * pagination.rowsPerPage +
-                      props.rowIndex +
-                      1
-                    }}
-                  </div>
-                  <div v-else-if="col.name === 'name'" class="table_ellipsis">
-                    {{ props.row.prefix ? props.row.prefix : ""
-                    }}{{ props.row.firstName ? props.row.firstName : "" }}
-                    {{ props.row.lastName ? props.row.lastName : "" }}
-                  </div>
-                  <div v-else-if="col.name === 'title'" class="table_ellipsis">
-                    {{ props.row.title ? props.row.title : "-" }}
-                  </div>
-                  <div v-else-if="col.name === 'profileType'">
-                    {{
-                      props.row.profileType
-                        ? convertType(props.row.profileType.toUpperCase())
-                        : "-"
-                    }}
-                  </div>
-                  <div
-                    v-else-if="col.name === 'organization'"
-                    class="text-html"
-                    style="width: 250px"
-                  >
-                    {{ props.row.organization ? props.row.organization : "-" }}
-                  </div>
-                  <div v-else>
-                    {{ col.value ?? "-" }}
-                  </div>
-                </q-td>
-              </q-tr>
-            </template>
-          </d-table>
-        </div>
+      <div class="col-12">
+        <p-table
+          :columns="dataStore.columns"
+          :rows="dataStore.rows"
+          row-key="id"
+          :visible-columns="dataStore.visibleColumns"
+          :rows-per-page-options="[10, 25, 50, 100]"
+          v-model:pagination="pagination"
+          @request="onRequest"
+        >
+          <template v-slot:header="props">
+            <q-tr :props="props">
+              <q-th auto-width />
+              <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">
+              <q-td auto-width>
+                <q-btn
+                  v-if="checkPermission($route)?.attrIsGet"
+                  @click="
+                    router.push(`/discipline-suspend-detail/${props.row.id}`)
+                  "
+                  flat
+                  dense
+                  round
+                  color="info"
+                  icon="mdi-eye"
+                >
+                  <q-tooltip>รายละเอียด</q-tooltip>
+                </q-btn>
+                <q-btn
+                  v-if="
+                    checkPermission($route)?.attrIsUpdate &&
+                    checkPermission($route)?.attrIsGet
+                  "
+                  @click="router.push(`/discipline-suspend/${props.row.id}`)"
+                  flat
+                  dense
+                  round
+                  color="edit"
+                  icon="edit"
+                >
+                  <q-tooltip>แก้ไขข้อมูลเพื่อลงบัญชีแนบท้าย</q-tooltip>
+                </q-btn>
+              </q-td>
+              <q-td v-for="col in props.cols" :key="col.name" :props="props">
+                <div v-if="col.name == 'no'">
+                  {{ props.rowIndex + 1 }}
+                </div>
+                <div
+                  v-else-if="col.name === 'firstName'"
+                  class="table_ellipsis"
+                >
+                  {{ props.row.prefix ? props.row.prefix : ""
+                  }}{{ props.row.firstName ? props.row.firstName : "" }}
+                  {{ props.row.lastName ? props.row.lastName : "" }}
+                </div>
+                <div v-else-if="col.name === 'title'" class="table_ellipsis">
+                  {{ props.row.title ? props.row.title : "-" }}
+                </div>
+                <div v-else-if="col.name === 'profileType'">
+                  {{
+                    props.row.profileType
+                      ? convertType(props.row.profileType.toUpperCase())
+                      : "-"
+                  }}
+                </div>
+                <div
+                  v-else-if="col.name === 'organization'"
+                  class="text-html"
+                  style="width: 250px"
+                >
+                  {{ props.row.organization ? props.row.organization : "-" }}
+                </div>
+                <div v-else>
+                  {{ col.value ?? "-" }}
+                </div>
+              </q-td>
+            </q-tr>
+          </template>
+        </p-table>
       </div>
     </div>
   </q-card>

From 629efe5abfd556fa2bfab804123f55f654620f13 Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Thu, 9 Oct 2025 14:10:40 +0700
Subject: [PATCH 6/7] fix(discipline-appealcomplain):sort

---
 src/api/11_discipline/api.discipline.ts       |  10 +-
 .../components/4_Result/Table.vue             |   2 +-
 .../components/8_AppealComplain/MainPage.vue  | 627 ++++++++----------
 .../store/AppealComplainStore.ts              |   2 +-
 4 files changed, 286 insertions(+), 355 deletions(-)

diff --git a/src/api/11_discipline/api.discipline.ts b/src/api/11_discipline/api.discipline.ts
index a1a0e2bc9..a30cbfcb5 100644
--- a/src/api/11_discipline/api.discipline.ts
+++ b/src/api/11_discipline/api.discipline.ts
@@ -96,15 +96,7 @@ export default {
   deleteFileResult: (id: string, docId: string) =>
     `${disciplineMain}/result/file/${id}/${docId}`,
 
-  appealMainList: (
-    status: string,
-    type: string,
-    year: number,
-    page: number,
-    pageSize: number,
-    keyword: string
-  ) =>
-    `${appeal}/admin?status=${status}&type=${type}&year=${year}&page=${page}&pageSize=${pageSize}&keyword=${keyword}`,
+  appealMainList: `${appeal}/admin?`,
   appealAdd: () => `${appeal}`,
   appealByID: (id: string) => `${appeal}/${id}`,
   appealByIDGet: (id: string) => `${appeal}/admin/${id}`,
diff --git a/src/modules/11_discipline/components/4_Result/Table.vue b/src/modules/11_discipline/components/4_Result/Table.vue
index 259f2598e..bb6ea694b 100644
--- a/src/modules/11_discipline/components/4_Result/Table.vue
+++ b/src/modules/11_discipline/components/4_Result/Table.vue
@@ -94,7 +94,7 @@ function filterFn() {
 function filterOptionFn(val: string, update: Function) {
   update(() => {
     option.value = store.statusOptions.filter(
-      (e: any) => e.name.search(val) !== -1
+      (e: DataOption) => e.name.search(val) !== -1
     );
   });
 }
diff --git a/src/modules/11_discipline/components/8_AppealComplain/MainPage.vue b/src/modules/11_discipline/components/8_AppealComplain/MainPage.vue
index b19836225..a5ce6c2c0 100644
--- a/src/modules/11_discipline/components/8_AppealComplain/MainPage.vue
+++ b/src/modules/11_discipline/components/8_AppealComplain/MainPage.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, onMounted, watch, reactive } from "vue";
+import { ref, onMounted, reactive } from "vue";
 
 import http from "@/plugins/http";
 import config from "@/app.config";
@@ -9,6 +9,7 @@ import { useCounterMixin } from "@/stores/mixin";
 import { useAppealComplainStore } from "@/modules/11_discipline/store/AppealComplainStore";
 import { checkPermission } from "@/utils/permissions";
 import { calculateFiscalYear } from "@/utils/function";
+import { usePagination } from "@/composables/usePagination";
 
 import type { QTableProps } from "quasar";
 import type { RowList } from "@/modules/11_discipline/interface/response/appealComplain";
@@ -20,35 +21,26 @@ import { useDisciplineMainStore } from "@/modules/11_discipline/store/Main";
 const $q = useQuasar();
 const router = useRouter();
 const mixin = useCounterMixin();
-const { showLoader, messageError, hideLoader, dialogConfirm } = mixin;
+const { showLoader, messageError, hideLoader } = mixin;
 const mainStore = useDisciplineMainStore();
-const modalStatusEdit = ref<boolean>(false);
-/** stoer */
 const dataStore = useAppealComplainStore();
+const { pagination, params, onRequest } = usePagination("", getData);
 const { fetchAppealComplain } = dataStore;
+
+/** store */
+const modalStatusEdit = ref<boolean>(false);
 const type = ref<DataOption[]>([
   { id: "ALL", name: "ทั้งหมด" },
   ...dataStore.typeOptions,
 ]);
-
 const filterKeyword = ref<string>("");
 const dataRow = ref<RowList[]>([]);
-
 const formData = reactive<any>({
   type: "ALL",
   status: "NEW",
   year: calculateFiscalYear(new Date()).toString(),
 });
 
-const total = ref<number>(0);
-const totalList = ref<number>(1);
-const pagination = ref({
-  sortBy: "createdAt",
-  descending: true,
-  page: 1,
-  rowsPerPage: 10,
-});
-
 const visibleColumns = ref<string[]>([
   "no",
   "profileType",
@@ -63,8 +55,6 @@ const visibleColumns = ref<string[]>([
   "lastUpdatedAt",
   "status",
 ]);
-
-// หัวตาราง
 const columns = ref<QTableProps["columns"]>([
   {
     name: "no",
@@ -79,7 +69,7 @@ const columns = ref<QTableProps["columns"]>([
     name: "profileType",
     align: "left",
     label: "ประเภทตำแหน่ง",
-    sortable: true,
+    sortable: false,
     field: "profileType",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
@@ -88,7 +78,7 @@ const columns = ref<QTableProps["columns"]>([
     name: "type",
     align: "left",
     label: "ประเภท",
-    sortable: true,
+    sortable: false,
     field: "type",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
@@ -110,8 +100,6 @@ const columns = ref<QTableProps["columns"]>([
     field: "fullname",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
   {
     name: "citizenId",
@@ -121,8 +109,6 @@ const columns = ref<QTableProps["columns"]>([
     field: "citizenId",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
   {
     name: "year",
@@ -132,8 +118,6 @@ const columns = ref<QTableProps["columns"]>([
     field: "year",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
   {
     name: "caseType",
@@ -143,8 +127,6 @@ const columns = ref<QTableProps["columns"]>([
     field: "caseType",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
   {
     name: "caseNumber",
@@ -154,8 +136,6 @@ const columns = ref<QTableProps["columns"]>([
     field: "caseNumber",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
   {
     name: "description",
@@ -165,8 +145,6 @@ const columns = ref<QTableProps["columns"]>([
     field: "description",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
   {
     name: "lastUpdatedAt",
@@ -176,8 +154,6 @@ const columns = ref<QTableProps["columns"]>([
     field: "lastUpdatedAt",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
   {
     name: "status",
@@ -207,11 +183,6 @@ function editPage(id: string) {
   router.push(`/discipline-appealcomplain/${id}`);
 }
 
-/** ดึงข้อมูลเมื่อ กด enter */
-function filterFn() {
-  getSearch();
-}
-
 /** ปิด pop up */
 function close() {
   modalStatusEdit.value = false;
@@ -221,22 +192,19 @@ function close() {
 async function getData() {
   showLoader();
   await http
-    .get(
-      config.API.appealMainList(
-        formData.status,
-        formData.type,
-        formData.year,
-        pagination.value.page,
-        pagination.value.rowsPerPage,
-        filterKeyword.value
-      )
-    )
-    .then((res) => {
-      totalList.value = Math.ceil(
-        res.data.result.total / pagination.value.rowsPerPage
-      );
-      total.value = res.data.result.total;
-      fetchAppealComplain(res.data.result.data);
+    .get(config.API.appealMainList, {
+      params: {
+        ...params.value,
+        status: formData.status,
+        type: formData.type,
+        year: formData.year,
+        keyword: filterKeyword.value,
+      },
+    })
+    .then(async (res) => {
+      const result = res.data.result;
+      pagination.value.rowsNumber = result.total;
+      await fetchAppealComplain(result.data);
     })
     .catch((e) => {
       messageError($q, e);
@@ -257,13 +225,8 @@ function yearAll() {
   getSearch();
 }
 
-/** ฟังชั่น เคลียฟิลเตอร์ */
-function resetFilter() {
-  filterKeyword.value = "";
-  getSearch();
-}
-const option = ref<any[]>(dataStore.statusOptions);
-const optionType = ref<any[]>(type.value);
+const option = ref<DataOption[]>(dataStore.statusOptions);
+const optionType = ref<DataOption[]>(type.value);
 /**
  * function ค้นหาข้อมูลใน option
  * @param val คำค้นหา
@@ -272,7 +235,7 @@ const optionType = ref<any[]>(type.value);
 function filterOptionFn(val: string, update: Function) {
   update(() => {
     option.value = dataStore.statusOptions.filter(
-      (e: any) => e.name.search(val) !== -1
+      (e: DataOption) => e.name.search(val) !== -1
     );
   });
 }
@@ -284,27 +247,17 @@ function filterOptionFn(val: string, update: Function) {
  */
 function filterOptionFnType(val: string, update: Function) {
   update(() => {
-    optionType.value = type.value.filter((e: any) => e.name.search(val) !== -1);
+    optionType.value = type.value.filter(
+      (e: DataOption) => e.name.search(val) !== -1
+    );
   });
 }
 
-function updatePagination(newPagination: any) {
-  pagination.value.page = 1;
-  pagination.value.rowsPerPage = newPagination.rowsPerPage;
-}
-
 function getSearch() {
   pagination.value.page = 1;
   getData();
 }
 
-watch(
-  () => pagination.value.rowsPerPage,
-  async () => {
-    getSearch();
-  }
-);
-
 /** เรียกใช้งาน ฟังชั่น ตอนเริ่มโหลดหน้า */
 onMounted(async () => {
   getData();
@@ -317,283 +270,269 @@ onMounted(async () => {
   <div class="toptitle text-dark col-12 row items-center">
     รายการอุทธรณ์/ร้องทุกข์
   </div>
-  <q-card flat bordered class="col-12 q-mt-sm q-pa-md">
-    <div class="row q-mb-sm q-col-gutter-sm">
-      <div>
-        <q-btn
-          v-if="checkPermission($route)?.attrIsCreate"
-          id="addComplaints"
-          for="addComplaints"
-          dense
-          flat
-          round
-          color="primary"
-          icon="mdi-plus"
-          @click="redirectToPageadd()"
-          ><q-tooltip>เพิ่มการอุทธรณ์/ร้องทุกข์</q-tooltip></q-btn
-        >
-      </div>
-      <q-space />
-      <q-input
-        for="#search"
-        class="col-xs-12 col-sm-3 col-md-2"
-        standout
-        dense
-        v-model="filterKeyword"
-        ref="filterRef"
-        outlined
-        placeholder="ค้นหา"
-        @keydown.enter.prevent="filterFn"
-      >
-        <template v-slot:append>
-          <q-icon name="search" />
-        </template>
-      </q-input>
 
-      <q-select
-        id="visibleColumns"
-        for="visibleColumns"
-        v-model="dataStore.visibleColumns"
-        multiple
-        outlined
-        dense
-        options-dense
-        :display-value="$q.lang.table.columns"
-        emit-value
-        map-options
-        :options="dataStore.columns"
-        option-value="name"
-        style="min-width: 140px"
-        class="col-xs-12 col-sm-3 col-md-2"
-      />
-    </div>
-    <div class="col-12 row q-mb-sm">
-      <q-card bordered class="col-12 filter-card q-pa-sm">
-        <div class="row col-12 q-col-gutter-sm">
-          <div class="col-2">
-            <datepicker
-              v-model="formData.year"
-              class="col-2"
-              :locale="'th'"
-              autoApply
-              year-picker
-              :enableTimePicker="false"
-              @update:model-value="dataUpdate"
-            >
-              <template #year="{ year }">{{ year + 543 }}</template>
-              <template #year-overlay-value="{ value }">{{
-                parseInt(value + 543)
-              }}</template>
-              <template #trigger>
-                <q-input
-                  dense
-                  outlined
-                  :model-value="
-                    formData.year === 0
-                      ? 'ทั้งหมด'
-                      : Number(formData.year) + 543
-                  "
-                  :label="`${'ปีงบประมาณ'}`"
-                >
-                  <template v-if="formData.year" v-slot:append>
-                    <q-icon
-                      name="cancel"
-                      @click.stop.prevent="yearAll"
-                      class="cursor-pointer"
-                    />
-                  </template>
-                  <template v-slot:prepend>
-                    <q-icon
-                      name="event"
-                      class="cursor-pointer"
-                      style="color: var(--q-primary)"
-                    >
-                    </q-icon>
-                  </template>
-                </q-input>
-              </template>
-            </datepicker>
-          </div>
-          <div class="col-2">
-            <q-select
-              v-model="formData.type"
-              label="ประเภท"
-              dense
-              outlined
-              emit-value
-              map-options
-              hide-selected
-              fill-input
-              option-label="name"
-              option-value="id"
-              :options="optionType"
-              @update:model-value="dataUpdate"
-              use-input
-              @filter="filterOptionFnType"
-            >
-              <template v-if="formData.type !== 'ALL'" v-slot:append>
-                <q-icon
-                  name="cancel"
-                  @click.stop.prevent="
-                    (optionType = type), (formData.type = 'ALL'), dataUpdate()
-                  "
-                  class="cursor-pointer"
-                />
-              </template>
-              <template v-slot:no-option>
-                <q-item>
-                  <q-item-section class="text-grey">
-                    ไม่มีข้อมูล
-                  </q-item-section>
-                </q-item>
-              </template>
-            </q-select>
-          </div>
-          <div class="col-3">
-            <q-select
-              v-model="formData.status"
-              label="สถานะ"
-              dense
-              outlined
-              emit-value
-              hide-selected
-              fill-input
-              map-options
-              option-label="name"
-              option-value="id"
-              :options="option"
-              @update:model-value="dataUpdate"
-              use-input
-              @filter="filterOptionFn"
-            >
-              <template v-if="formData.status !== 'ALL'" v-slot:append>
-                <q-icon
-                  name="cancel"
-                  @click.stop.prevent="
-                    (option = dataStore.statusOptions),
-                      (formData.status = 'ALL'),
-                      dataUpdate()
-                  "
-                  class="cursor-pointer"
-                />
-              </template>
-              <template v-slot:no-option>
-                <q-item>
-                  <q-item-section class="text-grey">
-                    ไม่มีข้อมูล
-                  </q-item-section>
-                </q-item>
-              </template>
-            </q-select>
-          </div>
+  <q-card flat bordered>
+    <div class="col-12 q-pa-md q-col-gutter-sm">
+      <div class="row q-col-gutter-sm">
+        <div>
+          <q-btn
+            v-if="checkPermission($route)?.attrIsCreate"
+            id="addComplaints"
+            for="addComplaints"
+            dense
+            flat
+            round
+            color="primary"
+            icon="mdi-plus"
+            @click="redirectToPageadd()"
+            ><q-tooltip>เพิ่มการอุทธรณ์/ร้องทุกข์</q-tooltip></q-btn
+          >
         </div>
-      </q-card>
-    </div>
+        <q-space />
+        <q-input
+          for="#search"
+          class="col-xs-12 col-sm-3 col-md-2"
+          standout
+          dense
+          v-model="filterKeyword"
+          ref="filterRef"
+          outlined
+          placeholder="ค้นหา"
+          @keydown.enter.prevent="getSearch"
+        >
+          <template v-slot:append>
+            <q-icon name="search" />
+          </template>
+        </q-input>
 
-    <div class="col-12">
-      <d-table
-        ref="table"
-        :columns="dataStore.columns"
-        :rows="dataStore.rows"
-        row-key="id"
-        flat
-        bordered
-        :paging="true"
-        dense
-        class="custom-header-table"
-        :visible-columns="dataStore.visibleColumns"
-        :rows-per-page-options="[10, 25, 50, 100]"
-        @update:pagination="updatePagination"
-      >
-        <template v-slot:pagination="scope">
-          ทั้งหมด {{ total }} รายการ
-          <q-pagination
-            v-model="pagination.page"
-            active-color="primary"
-            color="dark"
-            :max="Number(totalList)"
-            size="sm"
-            boundary-links
-            direction-links
-            :max-pages="5"
-            @update:model-value="getData"
-          ></q-pagination>
-        </template>
-        <template v-slot:header="props">
-          <q-tr :props="props">
-            <q-th auto-width></q-th>
-            <q-th
-              v-for="col in props.cols"
-              :key="col.name"
-              :props="props"
-              style="color: #000000; font-weight: 500"
-            >
-              <span class="text-weight-medium">{{ col.label }}</span>
-            </q-th>
-          </q-tr>
-        </template>
-        <template v-slot:body="props">
-          <q-tr :props="props">
-            <q-td auto-width>
-              <q-btn
-                v-if="checkPermission($route)?.attrIsGet"
-                id="addComplaints"
-                for="addComplaints"
+        <q-select
+          id="visibleColumns"
+          for="visibleColumns"
+          v-model="dataStore.visibleColumns"
+          multiple
+          outlined
+          dense
+          options-dense
+          :display-value="$q.lang.table.columns"
+          emit-value
+          map-options
+          :options="dataStore.columns"
+          option-value="name"
+          style="min-width: 140px"
+          class="col-xs-12 col-sm-3 col-md-2"
+        />
+      </div>
+      <div class="col-12 row">
+        <q-card bordered class="col-12 filter-card q-pa-sm">
+          <div class="row col-12 q-col-gutter-sm">
+            <div class="col-xs-12 col-sm-4 col-md-4 col-lg-2">
+              <datepicker
+                v-model="formData.year"
+                class="col-2"
+                :locale="'th'"
+                autoApply
+                year-picker
+                :enableTimePicker="false"
+                @update:model-value="dataUpdate"
+              >
+                <template #year="{ year }">{{ year + 543 }}</template>
+                <template #year-overlay-value="{ value }">{{
+                  parseInt(value + 543)
+                }}</template>
+                <template #trigger>
+                  <q-input
+                    dense
+                    outlined
+                    :model-value="
+                      formData.year === 0
+                        ? 'ทั้งหมด'
+                        : Number(formData.year) + 543
+                    "
+                    :label="`${'ปีงบประมาณ'}`"
+                  >
+                    <template v-if="formData.year" v-slot:append>
+                      <q-icon
+                        name="cancel"
+                        @click.stop.prevent="yearAll"
+                        class="cursor-pointer"
+                      />
+                    </template>
+                    <template v-slot:prepend>
+                      <q-icon
+                        name="event"
+                        class="cursor-pointer"
+                        style="color: var(--q-primary)"
+                      >
+                      </q-icon>
+                    </template>
+                  </q-input>
+                </template>
+              </datepicker>
+            </div>
+            <div class="col-xs-12 col-sm-4 col-md-4 col-lg-2">
+              <q-select
+                v-model="formData.type"
+                label="ประเภท"
                 dense
-                flat
-                round
-                color="info"
-                icon="mdi-eye"
-                @click="redirectToPageDetail(props.row.id)"
-                ><q-tooltip>รายละเอียดการอุทธรณ์/ร้องทุกข์</q-tooltip></q-btn
+                outlined
+                emit-value
+                map-options
+                hide-selected
+                fill-input
+                option-label="name"
+                option-value="id"
+                :options="optionType"
+                @update:model-value="dataUpdate"
+                use-input
+                @filter="filterOptionFnType"
               >
-              <q-btn
-                v-if="
-                  checkPermission($route)?.attrIsUpdate &&
-                  checkPermission($route)?.attrIsGet
-                "
-                id="addComplaints"
-                for="addComplaints"
-                flat
+                <template v-if="formData.type !== 'ALL'" v-slot:append>
+                  <q-icon
+                    name="cancel"
+                    @click.stop.prevent="
+                      (optionType = type), (formData.type = 'ALL'), dataUpdate()
+                    "
+                    class="cursor-pointer"
+                  />
+                </template>
+                <template v-slot:no-option>
+                  <q-item>
+                    <q-item-section class="text-grey">
+                      ไม่มีข้อมูล
+                    </q-item-section>
+                  </q-item>
+                </template>
+              </q-select>
+            </div>
+            <div class="col-xs-12 col-sm-4 col-md-4 col-lg-2">
+              <q-select
+                v-model="formData.status"
+                label="สถานะ"
                 dense
-                round
-                color="edit"
-                icon="edit"
-                @click="editPage(props.row.id)"
-                ><q-tooltip>แก้ไขการอุทธรณ์/ร้องทุกข์</q-tooltip></q-btn
+                outlined
+                emit-value
+                hide-selected
+                fill-input
+                map-options
+                option-label="name"
+                option-value="id"
+                :options="option"
+                @update:model-value="dataUpdate"
+                use-input
+                @filter="filterOptionFn"
               >
-            </q-td>
-            <q-td v-for="col in props.cols" :key="col.name" :props="props">
-              <div v-if="col.name == 'no'">
-                {{
-                  (pagination.page - 1) * pagination.rowsPerPage +
-                  props.rowIndex +
-                  1
-                }}
-              </div>
-              <div v-else-if="col.name === 'title'" class="table_ellipsis">
-                {{ props.row.title }}
-              </div>
-              <div v-else-if="col.name === 'profileType'">
-                {{
-                  props.row.profileType
-                    ? mainStore.convertType(props.row.profileType)
-                    : "-"
-                }}
-              </div>
-              <div
-                v-else-if="col.name === 'description'"
-                class="table_ellipsis"
+                <template v-if="formData.status !== 'ALL'" v-slot:append>
+                  <q-icon
+                    name="cancel"
+                    @click.stop.prevent="
+                      (option = dataStore.statusOptions),
+                        (formData.status = 'ALL'),
+                        dataUpdate()
+                    "
+                    class="cursor-pointer"
+                  />
+                </template>
+                <template v-slot:no-option>
+                  <q-item>
+                    <q-item-section class="text-grey">
+                      ไม่มีข้อมูล
+                    </q-item-section>
+                  </q-item>
+                </template>
+              </q-select>
+            </div>
+          </div>
+        </q-card>
+      </div>
+
+      <div class="col-12">
+        <p-table
+          ref="table"
+          :columns="dataStore.columns"
+          :rows="dataStore.rows"
+          row-key="id"
+          flat
+          bordered
+          :paging="true"
+          dense
+          class="custom-header-table"
+          :visible-columns="dataStore.visibleColumns"
+          :rows-per-page-options="[10, 25, 50, 100]"
+          v-model:pagination="pagination"
+          @request="onRequest"
+        >
+          <template v-slot:header="props">
+            <q-tr :props="props">
+              <q-th auto-width></q-th>
+              <q-th
+                v-for="col in props.cols"
+                :key="col.name"
+                :props="props"
+                style="color: #000000; font-weight: 500"
               >
-                {{ props.row.description ? props.row.description : "-" }}
-              </div>
-              <div v-else>
-                {{ col.value ?? "-" }}
-              </div>
-            </q-td>
-          </q-tr>
-        </template>
-      </d-table>
+                <span class="text-weight-medium">{{ col.label }}</span>
+              </q-th>
+            </q-tr>
+          </template>
+          <template v-slot:body="props">
+            <q-tr :props="props">
+              <q-td auto-width>
+                <q-btn
+                  v-if="checkPermission($route)?.attrIsGet"
+                  id="addComplaints"
+                  for="addComplaints"
+                  dense
+                  flat
+                  round
+                  color="info"
+                  icon="mdi-eye"
+                  @click="redirectToPageDetail(props.row.id)"
+                  ><q-tooltip>รายละเอียดการอุทธรณ์/ร้องทุกข์</q-tooltip></q-btn
+                >
+                <q-btn
+                  v-if="
+                    checkPermission($route)?.attrIsUpdate &&
+                    checkPermission($route)?.attrIsGet
+                  "
+                  id="addComplaints"
+                  for="addComplaints"
+                  flat
+                  dense
+                  round
+                  color="edit"
+                  icon="edit"
+                  @click="editPage(props.row.id)"
+                  ><q-tooltip>แก้ไขการอุทธรณ์/ร้องทุกข์</q-tooltip></q-btn
+                >
+              </q-td>
+              <q-td v-for="col in props.cols" :key="col.name" :props="props">
+                <div v-if="col.name == 'no'">
+                  {{ props.rowIndex + 1 }}
+                </div>
+                <div v-else-if="col.name === 'title'" class="table_ellipsis">
+                  {{ props.row.title }}
+                </div>
+                <div v-else-if="col.name === 'profileType'">
+                  {{
+                    props.row.profileType
+                      ? mainStore.convertType(props.row.profileType)
+                      : "-"
+                  }}
+                </div>
+                <div
+                  v-else-if="col.name === 'description'"
+                  class="table_ellipsis"
+                >
+                  {{ props.row.description ? props.row.description : "-" }}
+                </div>
+                <div v-else>
+                  {{ col.value ?? "-" }}
+                </div>
+              </q-td>
+            </q-tr>
+          </template>
+        </p-table>
+      </div>
     </div>
   </q-card>
 
diff --git a/src/modules/11_discipline/store/AppealComplainStore.ts b/src/modules/11_discipline/store/AppealComplainStore.ts
index 33602437c..d4a346349 100644
--- a/src/modules/11_discipline/store/AppealComplainStore.ts
+++ b/src/modules/11_discipline/store/AppealComplainStore.ts
@@ -63,7 +63,7 @@ export const useAppealComplainStore = defineStore("AppealComplainStore", () => {
    * จัดเรียงข้อมูล
    * @param data ข้อมูลที่รับมาจาก API
    */
-  function fetchAppealComplain(data: MainList[]) {
+  async function fetchAppealComplain(data: MainList[]) {
     let dataList: RowList[] = data.map((e: MainList) => ({
       id: e.id,
       profileId: e.profileId,

From 0bec7d1dbc7f2bf6cb6d79d8d0a77541fee26b52 Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Thu, 9 Oct 2025 14:50:02 +0700
Subject: [PATCH 7/7] fix(director):sort

---
 src/api/11_discipline/api.discipline.ts       |   1 +
 .../6_BasicInformation/Director/AddPage.vue   |  51 +--
 .../6_BasicInformation/Director/Form.vue      | 149 ++----
 .../6_BasicInformation/Director/MainPage.vue  | 433 ++++++++----------
 .../11_discipline/store/DirectorStore.ts      |   4 +-
 5 files changed, 270 insertions(+), 368 deletions(-)

diff --git a/src/api/11_discipline/api.discipline.ts b/src/api/11_discipline/api.discipline.ts
index a30cbfcb5..d8b2ff9d2 100644
--- a/src/api/11_discipline/api.discipline.ts
+++ b/src/api/11_discipline/api.discipline.ts
@@ -7,6 +7,7 @@ const appeal = `${env.API_URI}/discipline/complaint_appeal`;
 const disciplineReport = `${env.API_URI}/discipline/report`;
 
 export default {
+  directorListMain: `${disciplineMain}/director/`,
   directorList: (
     page: number,
     pageSize: number,
diff --git a/src/modules/11_discipline/components/6_BasicInformation/Director/AddPage.vue b/src/modules/11_discipline/components/6_BasicInformation/Director/AddPage.vue
index 8c2dcd239..6fbc4ecb0 100644
--- a/src/modules/11_discipline/components/6_BasicInformation/Director/AddPage.vue
+++ b/src/modules/11_discipline/components/6_BasicInformation/Director/AddPage.vue
@@ -19,32 +19,31 @@ const router = useRouter();
  * @param id ระบุ บุคคล
  */
 function onSubmit(formData: FormDataPost) {
-  dialogConfirm($q, () => addData(formData));
-}
-
-function addData(formData: FormDataPost) {
-  showLoader();
-  http
-    .post(config.API.director(), {
-      personalId: formData.personalId ?? "",
-      prefix: formData.prefix,
-      firstName: formData.firstname,
-      lastName: formData.lastname,
-      position: formData.position,
-      email: formData.email,
-      phone: formData.phone,
-      qualification: formData.qualification,
-      rootDnaId: formData.rootDnaId,
-    })
-    .then((res) => {
-      success($q, "บันทึกข้อมูลสำเร็จ");
-    })
-    .catch((e) => {
-      messageError($q, e);
-    })
-    .finally(async () => {
-      router.push(`/discipline/director`);
-    });
+  dialogConfirm($q, async () => {
+    showLoader();
+    await http
+      .post(config.API.director(), {
+        personalId: formData.personalId ?? "",
+        prefix: formData.prefix,
+        firstName: formData.firstname,
+        lastName: formData.lastname,
+        position: formData.position,
+        email: formData.email,
+        phone: formData.phone,
+        qualification: formData.qualification,
+        rootDnaId: formData.rootDnaId,
+      })
+      .then(async () => {
+        await success($q, "บันทึกข้อมูลสำเร็จ");
+        await router.push(`/discipline/director`);
+      })
+      .catch((e) => {
+        messageError($q, e);
+      })
+      .finally(() => {
+        hideLoader();
+      });
+  });
 }
 </script>
 <template>
diff --git a/src/modules/11_discipline/components/6_BasicInformation/Director/Form.vue b/src/modules/11_discipline/components/6_BasicInformation/Director/Form.vue
index 45f32dc17..c5cf71505 100644
--- a/src/modules/11_discipline/components/6_BasicInformation/Director/Form.vue
+++ b/src/modules/11_discipline/components/6_BasicInformation/Director/Form.vue
@@ -7,6 +7,7 @@ import { useRoute } from "vue-router";
 import http from "@/plugins/http";
 import config from "@/app.config";
 import { useCounterMixin } from "@/stores/mixin";
+import { usePagination } from "@/composables/usePagination";
 
 import type {
   FormData,
@@ -18,15 +19,6 @@ import type {
 
 import PopupPersonal from "@/components/Dialogs/PopupPersonalNew.vue";
 
-const total = ref<number>(0);
-const totalList = ref<number>(1);
-const pagination = ref({
-  sortBy: "createdAt",
-  descending: true,
-  page: 1,
-  rowsPerPage: 10,
-});
-
 const route = useRoute();
 const modalPersonal = ref<boolean>(false);
 const personId = ref<string>("");
@@ -36,6 +28,7 @@ const search = ref<string>("");
 const $q = useQuasar();
 const mixin = useCounterMixin();
 const { messageError, showLoader, hideLoader } = mixin;
+const { pagination, params, onRequest } = usePagination("", getSearch);
 
 /** รับ props มาจาก page หลัก */
 const props = defineProps({
@@ -56,16 +49,8 @@ const typeOps = ref<typeOp[]>([
 ]);
 const isReadonly = ref<boolean>(false); // อ่านได้อย่างเดียว
 const emit = defineEmits(["formDataReturn"]);
-/**
- * ข้อมูลเลขประจำตัวประชาชน
- */
-//
-const idCard = ref<string>("");
-const idCardRef = ref<any>(null);
 
-/**
- * ข้อมูลทั้งก้อน form
- */
+/** ข้อมูลทั้งก้อน form*/
 const formData = reactive<FormData>({
   personalId: "",
   prefix: "",
@@ -78,9 +63,7 @@ const formData = reactive<FormData>({
   rootDnaId: "",
 });
 
-/**
- * ตรวจสอบข้อมูลก่อนส่งไปยัง api
- */
+/** ตรวจสอบข้อมูลก่อนส่งไปยัง api*/
 const prefixRef = ref<object | null>(null);
 const firstnameRef = ref<object | null>(null);
 const lastnameRef = ref<object | null>(null);
@@ -183,11 +166,8 @@ function updateSelect() {
 
 /** ค้าหาข้อมูล */
 async function searchInput() {
-  searchRef.value.validate();
-  if (!searchRef.value.hasError) {
-    pagination.value.page = 1;
-    await getSearch();
-  }
+  pagination.value.page = 1;
+  await getSearch();
 }
 
 /** ดึงข้อมูล */
@@ -195,44 +175,40 @@ async function getSearch() {
   showLoader();
   const body = {
     fieldName: type.value,
-    keyword: search.value,
+    keyword: search.value ? search.value.trim() : "",
     system: (route.meta?.Key as string) || undefined,
   };
   await http
-    .post(
-      config.API.orgSearchPersonal() +
-        `?page=${pagination.value.page}&pageSize=${pagination.value.rowsPerPage}&searchKeyword=${search.value}`,
-      body
-    )
+    .post(config.API.orgSearchPersonal(), body, { params: params.value })
     .then((res) => {
-      totalList.value = Math.ceil(
-        res.data.result.total / pagination.value.rowsPerPage
-      );
-      total.value = res.data.result.total;
-      const data = res.data.result.data;
-      const list = data.map((e: ResponsePreson) => ({
-        personId: e.id,
-        idcard: e.citizenId,
-        prefix: e.prefix,
-        firstName: e.firstName,
-        lastName: e.lastName,
-        name: `${e.prefix ? e.prefix : ""}${e.firstName ? e.firstName : ""}  ${
-          e.lastName ? e.lastName : ""
-        }`,
-        posNo: e.posNo ?? "-",
-        position: e.position ?? "-",
-        positionLevel: e.positionLevel ?? "-",
-        salary: e.salaries ?? "-",
-        organization: e.organization ?? "-",
-        phone: e.phone ?? "-",
-        email: e.email ?? "-",
-        rootDnaId: e.rootDnaId ?? "-",
-      }));
-
-      rows.value = list;
+      const result = res.data.result;
+      pagination.value.rowsNumber = result.total;
+      if (result.data.length > 0) {
+        rows.value = result.data.map((e: ResponsePreson) => ({
+          personId: e.id,
+          idcard: e.citizenId,
+          prefix: e.prefix,
+          firstName: e.firstName,
+          lastName: e.lastName,
+          name: `${e.prefix ? e.prefix : ""}${
+            e.firstName ? e.firstName : ""
+          }  ${e.lastName ? e.lastName : ""}`,
+          posNo: e.posNo ?? "-",
+          position: e.position ?? "-",
+          positionLevel: e.positionLevel ?? "-",
+          salary: e.salaries ?? "-",
+          organization: e.organization ?? "-",
+          phone: e.phone ?? "-",
+          email: e.email ?? "-",
+          rootDnaId: e.rootDnaId ?? "-",
+        }));
+      } else {
+        rows.value = [];
+      }
     })
     .catch((err) => {
       messageError($q, err);
+      rows.value = [];
     })
     .finally(() => {
       hideLoader();
@@ -267,31 +243,23 @@ function updatemodalPersonal(modal: boolean) {
   modalPersonal.value = modal;
 }
 
-function updatePagination(newPagination: any) {
-  pagination.value.page = 1;
-  pagination.value.rowsPerPage = newPagination.rowsPerPage;
-}
-
 /**
  * เช็คข้อมูลจาก props
  * เมื่อมีข้อมูล
  * เก็บข้อมูลลง formData
  */
-watch(props.data, async () => {
-  formData.prefix = props.data.prefix;
-  formData.firstname = props.data.firstname;
-  formData.lastname = props.data.lastname;
-  formData.position = props.data.position;
-  formData.phone = props.data.phone;
-  formData.email = props.data.email;
-  formData.qualification = props.data.qualification;
-});
-
 watch(
-  () => pagination.value.rowsPerPage,
+  () => props.data,
   async () => {
-    await getSearch();
-  }
+    formData.prefix = props.data.prefix;
+    formData.firstname = props.data.firstname;
+    formData.lastname = props.data.lastname;
+    formData.position = props.data.position;
+    formData.phone = props.data.phone;
+    formData.email = props.data.email;
+    formData.qualification = props.data.qualification;
+  },
+  { deep: true }
 );
 </script>
 
@@ -343,7 +311,7 @@ watch(
             </div>
 
             <div class="col-12 q-pt-sm">
-              <d-table
+              <p-table
                 ref="table"
                 :columns="columnsRespondent"
                 :rows="rows"
@@ -352,26 +320,11 @@ watch(
                 bordered
                 :paging="true"
                 dense
-                class="custom-header-table"
                 :visible-columns="visibleColumnsRespondent"
                 :rows-per-page-options="[10, 25, 50, 100]"
-                @update:pagination="updatePagination"
+                v-model:pagination="pagination"
+                @request="onRequest"
               >
-                <template v-slot:pagination="scope">
-                  ทั้งหมด {{ total }} รายการ
-                  <q-pagination
-                    v-model="pagination.page"
-                    active-color="primary"
-                    color="dark"
-                    :max="Number(totalList)"
-                    size="sm"
-                    boundary-links
-                    direction-links
-                    :max-pages="5"
-                    @update:model-value="getSearch"
-                  ></q-pagination>
-                </template>
-
                 <template v-slot:header="props">
                   <q-tr :props="props">
                     <q-th
@@ -393,11 +346,7 @@ watch(
                       @click="returnDetail(props.row)"
                     >
                       <div v-if="col.name == 'no'">
-                        {{
-                          (pagination.page - 1) * pagination.rowsPerPage +
-                          props.rowIndex +
-                          1
-                        }}
+                        {{ props.rowIndex + 1 }}
                       </div>
                       <div v-else-if="col.name == 'info'">
                         <q-btn
@@ -413,12 +362,12 @@ watch(
                       </div>
 
                       <div v-else>
-                        {{ col.value }}
+                        {{ col.value ?? "-" }}
                       </div>
                     </q-td>
                   </q-tr>
                 </template>
-              </d-table>
+              </p-table>
             </div>
           </div>
 
diff --git a/src/modules/11_discipline/components/6_BasicInformation/Director/MainPage.vue b/src/modules/11_discipline/components/6_BasicInformation/Director/MainPage.vue
index 143567a8d..bb8773bd9 100644
--- a/src/modules/11_discipline/components/6_BasicInformation/Director/MainPage.vue
+++ b/src/modules/11_discipline/components/6_BasicInformation/Director/MainPage.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, onMounted, watch } from "vue";
+import { ref, onMounted } from "vue";
 import { useQuasar } from "quasar";
 
 import config from "@/app.config";
@@ -9,6 +9,7 @@ import { checkPermission } from "@/utils/permissions";
 import { useCounterMixin } from "@/stores/mixin";
 import { useDisciplineDirectorDataStore } from "@/modules/11_discipline/store/DirectorStore";
 import { useDisciplineMainStore } from "@/modules/11_discipline/store/Main";
+import { usePagination } from "@/composables/usePagination";
 
 import type { DirectorRowsResponse } from "@/modules/11_discipline/interface/response/director";
 
@@ -21,6 +22,7 @@ const mainStore = useDisciplineMainStore();
 const route = useRoute();
 const mixin = useCounterMixin();
 const { messageError, showLoader, hideLoader, dialogRemove, success } = mixin;
+const { pagination, params, onRequest } = usePagination("", getList);
 
 const titleInvestigate = ref<string>("");
 const personalId = ref<string>("");
@@ -36,33 +38,23 @@ const dataPopUp = ref<DirectorRowsResponse>();
 const filterKeyword = ref<string>("");
 const filterRef = ref<HTMLInputElement | null>(null);
 
-const total = ref<number>(0);
-const totalList = ref<number>(1);
-const pagination = ref({
-  sortBy: "createdAt",
-  descending: true,
-  page: 1,
-  rowsPerPage: 10,
-});
-
 async function getList() {
   showLoader();
   await http
     .get(
-      config.API.directorList(
-        pagination.value.page,
-        pagination.value.rowsPerPage,
-        filterKeyword.value.trim(),
-        mainStore.pathDirector(route.name as string)
-      )
+      config.API.directorListMain +
+        `${mainStore.pathDirector(route.name as string)}`,
+      {
+        params: {
+          ...params.value,
+          keyword: filterKeyword.value.trim(),
+        },
+      }
     )
     .then((res) => {
-      const data = res.data.result.data;
-      totalList.value = Math.ceil(
-        res.data.result.total / pagination.value.rowsPerPage
-      );
-      total.value = res.data.result.total;
-      dataStore.fetchData(data);
+      const result = res.data.result;
+      pagination.value.rowsNumber = result.total;
+      dataStore.fetchData(result.data);
     })
     .catch((e) => {
       messageError($q, e);
@@ -77,38 +69,21 @@ async function getList() {
  * @param id ไอดีของข้อมูล
  */
 function clickDelete(id: string) {
-  dialogRemove($q, async () => deleteData(id), `ลบข้อมูล`);
-}
-
-/**
- * ลบข้อมูล
- * @param id type
- */
-async function deleteData(id: string) {
-  showLoader();
-  await http
-    .delete(config.API.directorbyId(id))
-    .then((res) => {
-      success($q, "ลบข้อมูลสำเร็จ");
-    })
-    .catch((e) => {
-      messageError($q, e);
-    })
-    .finally(async () => {
-      await getList();
-    });
-}
-
-function resetFilter() {
-  filterKeyword.value = "";
-  if (filterRef.value) {
-    filterRef.value.focus();
-    getSearch();
-  }
-}
-
-function filterFn() {
-  getSearch();
+  dialogRemove($q, async () => {
+    showLoader();
+    await http
+      .delete(config.API.directorbyId(id))
+      .then(async () => {
+        await getList();
+        success($q, "ลบข้อมูลสำเร็จ");
+      })
+      .catch((e) => {
+        messageError($q, e);
+      })
+      .finally(async () => {
+        hideLoader();
+      });
+  });
 }
 
 function openDetail(data: DirectorRowsResponse, typeChange: string) {
@@ -132,210 +107,188 @@ function onEdit(id: string, check: boolean) {
   isEdit.value = check;
 }
 
-function updatePagination(newPagination: any) {
-  pagination.value.page = 1;
-  pagination.value.rowsPerPage = newPagination.rowsPerPage;
-}
-
 function getSearch() {
   pagination.value.page = 1;
   getList();
 }
 
-watch(
-  () => pagination.value.rowsPerPage,
-  async () => {
-    getSearch();
-  }
-);
-
 /**เมื่อเริ่มโหลดหน้า
  * ส่งข้อมูลจำลองไปยัง store
  */
 onMounted(() => {
   getList();
-  // get ข้อมูลแล้วโยนใส่ store
 });
 </script>
 <template>
   <div class="toptitle text-dark col-12 row items-center">
     รายการชื่อกรรมการ
   </div>
-  <q-card flat bordered class="col-12 q-mt-sm q-pa-md">
-    <div class="row col-12 q-col-gutter-sm q-mb-sm">
-      <div>
-        <q-btn
-          v-if="checkPermission($route)?.attrIsCreate"
-          @click="$router.push(`/discipline/director/add`)"
-          flat
-          dense
-          round
-          color="primary"
-          icon="mdi-plus"
-        >
-          <q-tooltip>เพิ่มรายชื่อกรรมการ</q-tooltip>
-        </q-btn>
+  <q-card flat bordered>
+    <div class="col-12 q-pa-md q-col-gutter-sm">
+      <div class="col-12">
+        <div class="row q-col-gutter-sm">
+          <div class="col-xs-12 col-sm-3 col-md-4 col-lg-2">
+            <div class="row items-center">
+              <q-btn
+                v-if="checkPermission($route)?.attrIsCreate"
+                @click="$router.push(`/discipline/director/add`)"
+                flat
+                dense
+                round
+                color="primary"
+                icon="mdi-plus"
+              >
+                <q-tooltip>เพิ่มรายชื่อกรรมการ</q-tooltip>
+              </q-btn>
+            </div>
+          </div>
+          <q-space />
+          <div class="col-xs-12 col-sm-8 col-md-6 col-lg-4">
+            <div class="row q-col-gutter-sm items-center">
+              <div class="col-7">
+                <q-input
+                  standout
+                  dense
+                  v-model="filterKeyword"
+                  ref="filterRef"
+                  outlined
+                  placeholder="ค้นหา"
+                  @keydown.enter.prevent="getSearch"
+                >
+                  <template v-slot:append>
+                    <q-icon name="search" />
+                  </template>
+                </q-input>
+              </div>
+              <div class="col-5">
+                <q-select
+                  v-model="dataStore.visibleColumns"
+                  multiple
+                  outlined
+                  dense
+                  options-dense
+                  :display-value="$q.lang.table.columns"
+                  emit-value
+                  map-options
+                  :options="dataStore.columns"
+                  option-value="name"
+                />
+              </div>
+            </div>
+          </div>
+        </div>
       </div>
-      <q-space />
 
-      <q-input
-        class="col-xs-12 col-sm-3 col-md-2"
-        standout
-        dense
-        v-model="filterKeyword"
-        ref="filterRef"
-        outlined
-        placeholder="ค้นหา"
-        @keydown.enter.prevent="filterFn"
-      >
-        <template v-slot:append>
-          <q-icon name="search" />
-        </template>
-      </q-input>
-
-      <q-select
-        v-model="dataStore.visibleColumns"
-        multiple
-        outlined
-        dense
-        options-dense
-        :display-value="$q.lang.table.columns"
-        emit-value
-        map-options
-        :options="dataStore.columns"
-        option-value="name"
-        
-        style="min-width: 140px"
-        class="col-xs-12 col-sm-3 col-md-2"
-      />
-    </div>
-
-    <div class="col-12">
-      <d-table
-        :columns="dataStore.columns"
-        :rows="dataStore.rows"
-        row-key="tb-list"
-        flat
-        bordered
-        :paging="true"
-        dense
-        :rows-per-page-options="[10, 25, 50, 100]"
-        @update:pagination="updatePagination"
-        :visible-columns="dataStore.visibleColumns"
-      >
-        <template v-slot:pagination="scope">
-          ทั้งหมด {{ total }} รายการ
-          <q-pagination
-            v-model="pagination.page"
-            active-color="primary"
-            color="dark"
-            :max="Number(totalList)"
-            size="sm"
-            boundary-links
-            direction-links
-            :max-pages="5"
-            @update:model-value="getList"
-          ></q-pagination>
-        </template>
-        <template v-slot:header="props">
-          <q-tr :props="props">
-            <q-th auto-width />
-            <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">
-            <q-td auto-width>
-              <q-btn
-                v-if="checkPermission($route)?.attrIsGet"
-                dense
-                flat
-                round
-                color="info"
-                @click="onEdit(props.row.id, false)"
-                icon="mdi-eye"
-              >
-                <q-tooltip>รายละเอียด</q-tooltip>
-              </q-btn>
-              <q-btn
-                v-if="
-                  checkPermission($route)?.attrIsUpdate &&
-                  checkPermission($route)?.attrIsGet
-                "
-                dense
-                flat
-                round
-                color="edit"
-                @click="onEdit(props.row.id, true)"
-                icon="edit"
-              >
-                <q-tooltip>แก้ไขข้อมูล</q-tooltip>
-              </q-btn>
-              <q-btn
-                v-if="checkPermission($route)?.attrIsDelete"
-                dense
-                flat
-                round
-                color="red"
-                @click="clickDelete(props.row.id)"
-                icon="mdi-delete"
-              >
-                <q-tooltip>ลบข้อมูล</q-tooltip>
-              </q-btn>
-            </q-td>
-            <q-td v-for="col in props.cols" :key="col.name" :props="props">
-              <div v-if="col.name == 'no'">
-                {{
-                  (pagination.page - 1) * pagination.rowsPerPage +
-                  props.rowIndex +
-                  1
-                }}
-              </div>
-              <div
-                v-else-if="
-                  col.name == 'totalInvestigate' &&
-                  props.row.totalInvestigate > 0
-                "
-                :class="
-                  checkPermission($route)?.attrIsGet
-                    ? 'text-blue cursor-pointer'
-                    : ''
-                "
-                @click="
-                  checkPermission($route)?.attrIsGet
-                    ? openDetail(props.row, 'investigate')
-                    : ''
-                "
-              >
-                {{ props.row.totalInvestigate }}
-              </div>
-              <div
-                v-else-if="
-                  col.name == 'totalDisciplinary' &&
-                  props.row.totalDisciplinary > 0
-                "
-                :class="
-                  checkPermission($route)?.attrIsGet
-                    ? 'text-blue cursor-pointer'
-                    : ''
-                "
-                @click="
-                  checkPermission($route)?.attrIsGet
-                    ? openDetail(props.row, 'disciplinary')
-                    : ''
-                "
-              >
-                {{ props.row.totalDisciplinary }}
-              </div>
-              <div v-else>
-                {{ col.value ?? "-" }}
-              </div>
-            </q-td>
-          </q-tr>
-        </template>
-      </d-table>
+      <div class="col-12">
+        <p-table
+          :columns="dataStore.columns"
+          :rows="dataStore.rows"
+          row-key="tb-list"
+          flat
+          bordered
+          :paging="true"
+          dense
+          :rows-per-page-options="[10, 25, 50, 100]"
+          :visible-columns="dataStore.visibleColumns"
+          v-model:pagination="pagination"
+          @request="onRequest"
+        >
+          <template v-slot:header="props">
+            <q-tr :props="props">
+              <q-th auto-width />
+              <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">
+              <q-td auto-width>
+                <q-btn
+                  v-if="checkPermission($route)?.attrIsGet"
+                  dense
+                  flat
+                  round
+                  color="info"
+                  @click="onEdit(props.row.id, false)"
+                  icon="mdi-eye"
+                >
+                  <q-tooltip>รายละเอียด</q-tooltip>
+                </q-btn>
+                <q-btn
+                  v-if="
+                    checkPermission($route)?.attrIsUpdate &&
+                    checkPermission($route)?.attrIsGet
+                  "
+                  dense
+                  flat
+                  round
+                  color="edit"
+                  @click="onEdit(props.row.id, true)"
+                  icon="edit"
+                >
+                  <q-tooltip>แก้ไขข้อมูล</q-tooltip>
+                </q-btn>
+                <q-btn
+                  v-if="checkPermission($route)?.attrIsDelete"
+                  dense
+                  flat
+                  round
+                  color="red"
+                  @click="clickDelete(props.row.id)"
+                  icon="mdi-delete"
+                >
+                  <q-tooltip>ลบข้อมูล</q-tooltip>
+                </q-btn>
+              </q-td>
+              <q-td v-for="col in props.cols" :key="col.name" :props="props">
+                <div v-if="col.name == 'no'">
+                  {{ props.rowIndex + 1 }}
+                </div>
+                <div
+                  v-else-if="
+                    col.name == 'totalInvestigate' &&
+                    props.row.totalInvestigate > 0
+                  "
+                  :class="
+                    checkPermission($route)?.attrIsGet
+                      ? 'text-blue cursor-pointer'
+                      : ''
+                  "
+                  @click="
+                    checkPermission($route)?.attrIsGet
+                      ? openDetail(props.row, 'investigate')
+                      : ''
+                  "
+                >
+                  {{ props.row.totalInvestigate }}
+                </div>
+                <div
+                  v-else-if="
+                    col.name == 'totalDisciplinary' &&
+                    props.row.totalDisciplinary > 0
+                  "
+                  :class="
+                    checkPermission($route)?.attrIsGet
+                      ? 'text-blue cursor-pointer'
+                      : ''
+                  "
+                  @click="
+                    checkPermission($route)?.attrIsGet
+                      ? openDetail(props.row, 'disciplinary')
+                      : ''
+                  "
+                >
+                  {{ props.row.totalDisciplinary }}
+                </div>
+                <div v-else>
+                  {{ col.value ?? "-" }}
+                </div>
+              </q-td>
+            </q-tr>
+          </template>
+        </p-table>
+      </div>
     </div>
   </q-card>
 
diff --git a/src/modules/11_discipline/store/DirectorStore.ts b/src/modules/11_discipline/store/DirectorStore.ts
index 446b251cf..2fe690146 100644
--- a/src/modules/11_discipline/store/DirectorStore.ts
+++ b/src/modules/11_discipline/store/DirectorStore.ts
@@ -14,7 +14,7 @@ export const useDisciplineDirectorDataStore = defineStore(
     const rows = ref<DirectorRowsResponse[]>([]);
     const visibleColumns = ref<string[]>([
       "no",
-      "fullName",
+      "firstName",
       "position",
       "email",
       "phone",
@@ -34,7 +34,7 @@ export const useDisciplineDirectorDataStore = defineStore(
         style: "font-size: 14px",
       },
       {
-        name: "fullName",
+        name: "firstName",
         align: "left",
         label: "ชื่อ-นามสกุล",
         sortable: true,