diff --git a/src/modules/18_command/components/DialogCreateCommand.vue b/src/modules/18_command/components/DialogCreateCommand.vue
index 393a5e2b2..0c8d17e03 100644
--- a/src/modules/18_command/components/DialogCreateCommand.vue
+++ b/src/modules/18_command/components/DialogCreateCommand.vue
@@ -7,6 +7,7 @@ import config from "@/app.config";
 import { useRouter } from "vue-router";
 import { useCounterMixin } from "@/stores/mixin";
 import { useCommandMainStore } from "@/modules/18_command/store/Main";
+import { usePagination } from "@/composables/usePagination";
 
 import type { QTableProps } from "quasar";
 import type {
@@ -25,6 +26,7 @@ const $q = useQuasar();
 const mixin = useCounterMixin();
 const { showLoader, messageError, dialogConfirm, hideLoader, date2Thai } =
   mixin;
+const { pagination, params, onRequest } = usePagination("", getListCommandDraf);
 
 /** props*/
 const modal = defineModel<boolean>("modal", { required: true });
@@ -52,8 +54,6 @@ const commandChapter = ref<string>(""); //ตอนที่
 const rows = ref<DataListCommand[]>([]); // รายการคำสั่ง
 const selected = ref<DataOrder[]>([]); // id คำสั่งที่เลือก
 const filter = ref<string>(""); // คำค้นหา
-const total = ref<number>(0); //จำนวนรายการ
-const totalList = ref<number>(1); //จำนวนหน้า
 const visibleColumns = ref<string[]>([
   "commandNo",
   "issue",
@@ -67,7 +67,7 @@ const columns = ref<QTableProps["columns"]>([
     name: "commandNo",
     align: "left",
     label: "เลขที่คำสั่ง",
-    sortable: false,
+    sortable: true,
     field: "commandNo",
     format(val, row) {
       return val ? `${val}/${row.commandYear + 543}` : "-";
@@ -88,7 +88,7 @@ const columns = ref<QTableProps["columns"]>([
     name: "commandAffectDate",
     align: "left",
     label: "วันที่ลงนาม",
-    sortable: false,
+    sortable: true,
     field: "commandAffectDate",
     format(val) {
       return val ? date2Thai(val) : "-";
@@ -100,7 +100,7 @@ const columns = ref<QTableProps["columns"]>([
     name: "commandExcecuteDate",
     align: "left",
     label: "วันที่คำสั่งมีผล",
-    sortable: false,
+    sortable: true,
     field: "commandExcecuteDate",
     format(val) {
       return val ? date2Thai(val) : "-";
@@ -112,7 +112,7 @@ const columns = ref<QTableProps["columns"]>([
     name: "createdFullName",
     align: "left",
     label: "ผู้สร้าง",
-    sortable: false,
+    sortable: true,
     field: "createdFullName",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
@@ -127,12 +127,6 @@ const columns = ref<QTableProps["columns"]>([
     style: "font-size: 14px",
   },
 ]);
-const pagination = ref({
-  sortBy: "createdAt",
-  descending: true,
-  page: 1,
-  rowsPerPage: 10,
-});
 
 const selectCreate = ref<string | null>("NEW"); //ประเภทการออกคำสั่ง สร้างใหม่/คำสั่งแบบร่าง
 
@@ -140,16 +134,19 @@ const selectCreate = ref<string | null>("NEW"); //ประเภทการอ
 async function getListCommandDraf() {
   showLoader();
   await http
-    .get(
-      config.API.commandList +
-        `?page=${pagination.value.page}&pageSize=${pagination.value.rowsPerPage}&year=${commandYear.value}&keyword=${filter.value}&status=DRAFT&commandTypeId=${commandType.value}`
-    )
+    .get(config.API.commandList, {
+      params: {
+        ...params.value,
+        year: commandYear.value,
+        keyword: filter.value.trim(),
+        status: "DRAFT",
+        commandTypeId: commandType.value,
+      },
+    })
     .then(async (res) => {
-      totalList.value = Math.ceil(
-        res.data.result.total / pagination.value.rowsPerPage
-      );
-      total.value = res.data.result.total;
-      rows.value = res.data.result.data;
+      const result = res.data.result;
+      pagination.value.rowsNumber = result.total;
+      rows.value = result.data;
     })
     .catch((err) => {
       messageError($q, err);
@@ -179,19 +176,6 @@ function createCommand(isRedirect: boolean) {
       posLevel: e.posLevel,
       ...(e.remarkVertical ? { remarkVertical: e.remarkVertical } : {}),
       ...(e.remarkHorizontal ? { remarkHorizontal: e.remarkHorizontal } : {}),
-
-      // ...(props.commandTypeCode == "C-PM-01" ||
-      // props.commandTypeCode == "C-PM-02"
-      //   ? { position: e.position ? e.position : null }
-      //   : {}),
-      // ...(props.commandTypeCode == "C-PM-01" ||
-      // props.commandTypeCode == "C-PM-02"
-      //   ? { posType: e.posType ? e.posType : null }
-      //   : {}),
-      // ...(props.commandTypeCode == "C-PM-01" ||
-      // props.commandTypeCode == "C-PM-02"
-      //   ? { posLevel: e.posLevel ? e.posLevel : null }
-      //   : {}),
     }));
 
     const body = {
@@ -310,15 +294,6 @@ async function fetchCommandType() {
   commandCode.value = commandOp.value[0].code;
 }
 
-/**
- * ฟังก์ชันอัปเดทจำนวนแถวต่อหน้า
- * @param newPagination จำนวนแถวที่ต้องการ
- */
-function updatePagination(newPagination: Pagination) {
-  pagination.value.page = 1;
-  pagination.value.rowsPerPage = newPagination.rowsPerPage;
-}
-
 const isHold = ref<boolean>(true); // true คือแสดงปุ่มบันทึกและเลือกรายชื่อต่อ / false คือซ่อนปุ่มบันทึกและเลือกรายชื่อต่อ
 // tab สร้างคำสั่งใหม่ และเลือกคำสั่งที่เป็นแบบร่าง
 const tabOptions = ref<TabOptions[]>([
@@ -340,14 +315,6 @@ async function displayTab() {
     : [{ label: "สร้างคำสั่งใหม่", value: "NEW" }];
 }
 
-/** ดูการเปลี่ยนแปลงของจำนวนแถวต่อหน้า*/
-watch(
-  () => pagination.value.rowsPerPage,
-  async () => {
-    await getListCommandDraf();
-  }
-);
-
 /** ดูการเปลี่ยนแปลงของ modal*/
 watch(modal, () => {
   if (modal.value && props.persons?.length !== 0) {
@@ -561,7 +528,7 @@ watch(
             />
           </q-toolbar>
           <div class="col-12">
-            <d-table
+            <p-table
               :columns="columns"
               :rows="rows"
               row-key="id"
@@ -569,23 +536,9 @@ watch(
               selection="single"
               v-model:selected="selected"
               :rows-per-page-options="[10, 25, 50, 100]"
-              @update:pagination="updatePagination"
+              v-model:pagination="pagination"
+              @request="onRequest"
             >
-              <template v-slot:pagination="scope">
-                ทั้งหมด {{ total.toLocaleString() }} รายการ
-                <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="getListCommandDraf"
-                ></q-pagination>
-              </template>
-
               <template v-slot:body="props">
                 <q-tr :props="props" class="cursor-pointer">
                   <q-td>
@@ -607,7 +560,7 @@ watch(
                   </q-td>
                 </q-tr>
               </template>
-            </d-table>
+            </p-table>
           </div>
         </div>
       </q-card-section>
diff --git a/src/modules/18_command/components/DialogCreateCommandORG.vue b/src/modules/18_command/components/DialogCreateCommandORG.vue
index 8ef7b34bc..54f99f11e 100644
--- a/src/modules/18_command/components/DialogCreateCommandORG.vue
+++ b/src/modules/18_command/components/DialogCreateCommandORG.vue
@@ -633,18 +633,6 @@ watch(modal, async () => {
                     </q-td>
                   </q-tr>
                 </template>
-                <!-- <template v-slot:pagination="scope">
-                    <q-pagination
-                      v-model="reqMaster.page"
-                      active-color="primary"
-                      color="dark"
-                      :max="totalPage"
-                      :max-pages="5"
-                      size="sm"
-                      boundary-links
-                      direction-links
-                    ></q-pagination>
-                  </template> -->
               </d-table>
             </div>
           </div>
diff --git a/src/modules/18_command/components/Main/TableMain.vue b/src/modules/18_command/components/Main/TableMain.vue
index 53124e0eb..db61c7a70 100644
--- a/src/modules/18_command/components/Main/TableMain.vue
+++ b/src/modules/18_command/components/Main/TableMain.vue
@@ -6,7 +6,6 @@ import { useRouter } from "vue-router";
 import { checkPermission } from "@/utils/permissions";
 import { useCounterMixin } from "@/stores/mixin";
 import { useCommandListStore } from "@/modules/18_command/store/ListStore";
-import { updateCurrentPage } from "@/utils/function";
 import http from "@/plugins/http";
 import config from "@/app.config";
 
@@ -27,11 +26,11 @@ const {
   dialogConfirm,
 } = useCounterMixin();
 
-const page = defineModel<number>("page", { required: true });
-const pageSize = defineModel<number>("pageSize", { required: true });
-
+const pagination = defineModel<Pagination>("pagination", { required: true });
 const props = defineProps({
   fetchList: { type: Function, required: true },
+  onRequest: { type: Function, required: true },
+  checkAndUpdatePage: { type: Function, required: true },
 });
 
 const modalCopy = ref<boolean>(false);
@@ -82,11 +81,7 @@ function onReCommand(id: string) {
       await http
         .put(config.API.commandAction(id, "resume"))
         .then(async () => {
-          page.value = await updateCurrentPage(
-            page.value,
-            store.maxPage,
-            store.rows.length
-          );
+          await props.checkAndUpdatePage(store.rows.length);
           await fetchListCommand();
           success($q, "ดึงไปทำคำสั่งใหม่สำเร็จ");
         })
@@ -109,11 +104,7 @@ function onDeleteCommand(id: string) {
       await http
         .delete(config.API.command + `/${id}`)
         .then(async () => {
-          page.value = await updateCurrentPage(
-            page.value,
-            store.maxPage,
-            store.rows.length
-          );
+          await props.checkAndUpdatePage(store.rows.length);
           await fetchListCommand();
           success($q, "ลบรายการสำเร็จ");
         })
@@ -129,27 +120,13 @@ function onDeleteCommand(id: string) {
   );
 }
 
-/**
- * function updatePagination
- * @param newPagination ข้อมูล Pagination ใหม่
- */
-function updatePagination(newPagination: Pagination) {
-  page.value = 1;
-  pageSize.value = newPagination.rowsPerPage;
-}
-
-watch(pageSize, () => {
-  isCheckPageSize.value = true;
-  fetchListCommand();
-});
-
 onMounted(() => {
   !isCheckPageSize.value && fetchListCommand();
 });
 </script>
 
 <template>
-  <d-table
+  <p-table
     ref="table"
     :columns="store.columns"
     :visible-columns="store.visibleColumns"
@@ -160,7 +137,8 @@ onMounted(() => {
     bordered
     :paging="true"
     :rows-per-page-options="[10, 25, 50, 100]"
-    @update:pagination="updatePagination"
+    @request="onRequest"
+    v-model:pagination="pagination"
   >
     <template v-slot:header="props">
       <q-tr :props="props">
@@ -332,21 +310,7 @@ onMounted(() => {
         </q-td>
       </q-tr>
     </template>
-    <template v-slot:pagination="scope">
-      ทั้งหมด {{ store.total.toLocaleString() }} รายการ
-      <q-pagination
-        v-model="page"
-        active-color="primary"
-        color="dark"
-        :max="Number(store.maxPage)"
-        size="sm"
-        boundary-links
-        direction-links
-        :max-pages="5"
-        @update:model-value="fetchListCommand"
-      ></q-pagination>
-    </template>
-  </d-table>
+  </p-table>
 
   <DialogFormCommand
     v-model:modal="modalCopy"
diff --git a/src/modules/18_command/components/Step/PerviewPDF.vue b/src/modules/18_command/components/Step/PerviewPDF.vue
index a7ff8f43a..4f4b64e27 100644
--- a/src/modules/18_command/components/Step/PerviewPDF.vue
+++ b/src/modules/18_command/components/Step/PerviewPDF.vue
@@ -6,7 +6,6 @@ import axios from "axios";
 
 import { useCounterMixin } from "@/stores/mixin";
 
-import type { PDFDocumentLoadingTask } from "pdfjs-dist/types/src/display/api";
 import type { DataFileDownload } from "@/modules/18_command/interface/response/Main";
 
 import DialogHeader from "@/components/DialogHeader.vue";
@@ -15,9 +14,11 @@ const $q = useQuasar();
 const { messageError } = useCounterMixin();
 
 const modal = defineModel<boolean>("modal", { required: true });
-const dataFile = defineModel<DataFileDownload>("dataFile", { required: true });
+const dataFile = defineModel<DataFileDownload | undefined>("dataFile", {
+  required: false,
+});
 
-const pdfSrc = ref<PDFDocumentLoadingTask | undefined>();
+const pdfSrc = ref<any | undefined>();
 const numOfPages = ref<number>(0);
 const page = ref<number>(1);
 const vuePDFRef = ref<any>(null);
@@ -59,7 +60,7 @@ function onClose() {
 }
 
 watch(modal, (val) => {
-  if (val) {
+  if (val && dataFile.value) {
     fetchPDF(dataFile.value.downloadUrl, dataFile.value.fileType);
   } else {
     pdfSrc.value = undefined;
diff --git a/src/modules/18_command/components/Step/View0_Digital.vue b/src/modules/18_command/components/Step/View0_Digital.vue
index 851867b5d..fbff4569c 100644
--- a/src/modules/18_command/components/Step/View0_Digital.vue
+++ b/src/modules/18_command/components/Step/View0_Digital.vue
@@ -1,16 +1,16 @@
 <script setup lang="ts">
-import { onMounted, ref, watch } from "vue";
+import { onMounted, ref } from "vue";
 import { useQuasar } from "quasar";
 import axios from "axios";
 
 import { useRoute, useRouter } from "vue-router";
 import { useCounterMixin } from "@/stores/mixin";
 import { useCommandDetail } from "@/modules/18_command/store/DetailStore";
+import { usePagination } from "@/composables/usePagination";
 import http from "@/plugins/http";
 import config from "@/app.config";
 
 import type { QTableProps } from "quasar";
-import type { Pagination } from "@/modules/18_command/interface/index/Main";
 import type {
   DataFileDownload,
   DataDirector,
@@ -31,6 +31,7 @@ const {
   dialogConfirm,
   dialogMessageNotify,
 } = useCounterMixin();
+const { pagination, params, onRequest } = usePagination("", fetchListDirector);
 
 const commandId = ref<string>(route.params.id.toString()); //ID คำสั่ง
 
@@ -48,16 +49,13 @@ const fileUploadOrder = ref<any>(null); //ไฟล์คำสั่ง
 const fileUploadTailer = ref<any>(null); //ไฟล์เอกสารแนบท้าย
 const fileOrder = ref<any>(null); //ไฟล์คำสั่ง
 const fileTailer = ref<any>(null); //ไฟล์เอกสารแนบท้าย
-const isDirector = ref<boolean>(true);
-const isAct = ref<boolean>(false);
+const isDirector = ref<boolean>(true); //ผู้บังคับบัญชา
+const isAct = ref<boolean>(false); //รักษาการแทน
+const dataFile = ref<DataFileDownload>(); //ข้อมูลไฟล์คำสั่งที่ดาวน์โหลดมา
 
 const modalSelect = ref<boolean>(false); //popup เลือกผู้บังคับบัญชา/ผู้มีอำนาจออกคำสั่ง
 const search = ref<string>("");
 const rows = ref<DataDirector[]>([]); //รายชื่อผู้บังคับบัญชา/ผู้มีอำนาจออกคำสั่ง
-const page = ref<number>(1);
-const pageSize = ref<number>(10);
-const maxPaeg = ref<number>(1);
-const total = ref<number>(0);
 const selected = ref<DataDirector[]>([]); //เลือกผู้บังคับบัญชา/ผู้มีอำนาจออกคำสั่ง
 const columns = ref<QTableProps["columns"]>([
   {
@@ -80,7 +78,7 @@ const columns = ref<QTableProps["columns"]>([
   },
 
   {
-    name: "fullName",
+    name: "firstName",
     align: "left",
     label: "ชื่อ-นามสกุล",
     sortable: true,
@@ -133,14 +131,11 @@ const modalComment = ref<boolean>(false); //popup แสดงความเห
 const reason = ref<string>("");
 
 //รอออกคำสั่ง
-const isCheckOrder = ref<boolean>(true); //เช็ครอออกคำสั่ง
 const isLoad = ref<boolean>(false); //แสดงโหลด
 const isPersonSign = ref<boolean>(false); //ผู้มีอำนาจลงนาม
 const modalPerView = ref<boolean>(false);
 
-/**
- * ฟังก์ชันยืนยันการส่งให้ผู้มีอำนาจลงนามอนุมัติ
- */
+/** ฟังก์ชันยืนยันการส่งให้ผู้มีอำนาจลงนามอนุมัติ*/
 function onConfirmDraft() {
   if (
     store?.dataCommand?.commandNo !== "" &&
@@ -156,21 +151,20 @@ function onConfirmDraft() {
   }
 }
 
-function fetchListDirector() {
+/** ฟังก์ชันดึงข้อมูลผู้บังคับบัญชา/ผู้มีอำนาจออกคำสั่ง */
+async function fetchListDirector() {
   showLoader();
-  http
+  await http
     .post(config.API.commandDirector, {
       isDirector: isDirector.value, // fix ค่านี้เป็น true
       isAct: isAct.value,
       keyword: search.value,
-      page: page.value,
-      pageSize: pageSize.value,
+      ...params.value,
     })
     .then((res) => {
-      const data = res.data.result;
-      rows.value = data.data;
-      maxPaeg.value = Math.ceil(data.total / pageSize.value);
-      total.value = data.total;
+      const result = res.data.result;
+      pagination.value.rowsNumber = result.total;
+      rows.value = result.data;
     })
     .catch((err) => {
       messageError($q, err);
@@ -180,11 +174,13 @@ function fetchListDirector() {
     });
 }
 
+/** ฟังก์ชันค้นหาข้อมูล */
 function onSearchData() {
-  page.value = 1;
+  pagination.value.page = 1;
   fetchListDirector();
 }
 
+/** ฟังก์ชันยืนยันการส่งไปยังผู้บังคับบัญชา/ผู้มีอำนาจ */
 function onConfirmSendToCommander() {
   dialogConfirm(
     $q,
@@ -212,12 +208,14 @@ function onConfirmSendToCommander() {
   );
 }
 
+/** ฟังก์ชันแสดง popup แสดงความเห็น */
 function onComment(id: string, isStatus: boolean) {
   modalComment.value = true;
   commandSignId.value = id;
   isSignatory.value = isStatus;
 }
 
+/** ฟังก์ชันบันทึกความคิดเห็น */
 function onSubmitComment() {
   dialogConfirm($q, async () => {
     showLoader();
@@ -243,6 +241,7 @@ function onSubmitComment() {
   });
 }
 
+/** ฟังก์ชันปิด dialog และ reset ค่า */
 function onCloseDialog() {
   isAct.value = false;
   isDirector.value = true;
@@ -252,17 +251,21 @@ function onCloseDialog() {
   rows.value = [];
   selected.value = [];
   search.value = "";
-  page.value = 1;
-  pageSize.value = 10;
-  maxPaeg.value = 1;
-  total.value = 0;
+  pagination.value = {
+    page: 1,
+    rowsPerPage: 10,
+    rowsNumber: 0,
+    sortBy: "",
+    descending: false,
+  };
+
   reason.value = "";
 }
 
-function updatePagination(newPagination: Pagination) {
-  pageSize.value = newPagination.rowsPerPage;
-}
-
+/**
+ *  ฟังก์ชันดึงข้อมูลเอกสารคำสั่ง
+ * @param group ประเภทคำสั่ง order=คำสั่ง, tailer=เอกสารแนบท้าย
+ */
 async function fetchDoc(group: string) {
   showLoader();
   let type = group === "order" ? "คำสั่ง" : "แนบท้าย";
@@ -284,6 +287,10 @@ async function fetchDoc(group: string) {
     });
 }
 
+/**
+ * ฟังก์ชันอัพโหลดไฟล์คำสั่ง
+ * @param group ประเภทคำสั่ง order=คำสั่ง, tailer=เอกสารแนบท้าย
+ */
 function onUploadFile(group: string) {
   showLoader();
   let type = group === "order" ? "คำสั่ง" : "แนบท้าย";
@@ -312,7 +319,10 @@ function onUploadFile(group: string) {
 }
 
 /**
- * ฟังก์ชั่นสำหรับอัพโหลดไฟล์เอกสารหลักฐาน
+ * ฟังก์ชันอัพโหลดไฟล์คำสั่ง
+ * @param uploadUrl ลิงค์อัพโหลดไฟล์
+ * @param file ไฟล์ที่อัพโหลด
+ * @param group ประเภทคำสั่ง order=คำสั่ง, tailer=เอกสารแนบท้าย
  */
 async function uploadFileDoc(uploadUrl: string, file: any, group: string) {
   const formData = new FormData();
@@ -340,11 +350,11 @@ async function uploadFileDoc(uploadUrl: string, file: any, group: string) {
     });
 }
 
-const dataFile = ref<DataFileDownload>();
-
 /**
- * ดาวน์โหลดลิงก์ไฟล์
- * @param fileName file name
+ * ฟังก์ชันดาวน์โหลดไฟล์
+ * @param file ข้อมูลไฟล์
+ * @param group ประเภทคำสั่ง order=คำสั่ง, tailer=เอกสารแนบท้าย
+ * @param isView ดูไฟล์ในหน้าใหม่ไหม (default=false)
  */
 function downloadFile(file: any, group: string, isView: boolean = false) {
   let type = group === "order" ? "คำสั่ง" : "แนบท้าย";
@@ -375,6 +385,7 @@ function downloadFile(file: any, group: string, isView: boolean = false) {
     });
 }
 
+/** ฟังก์ชันดึงข้อมูลรายการผู้มีอำนาจ */
 async function fetchListAuthority() {
   await http
     .get(config.API.command + `/step/${commandId.value}`)
@@ -387,17 +398,11 @@ async function fetchListAuthority() {
     });
 }
 
+/** ฟังก์ชันแสดงเฉพาะรักษาการแทน */
 function onAct() {
   isDirector.value = !isDirector.value;
 }
 
-watch(
-  () => pageSize.value,
-  () => {
-    onSearchData();
-  }
-);
-
 onMounted(async () => {
   isLoad.value = false;
   let promises = [fetchDoc("order")];
@@ -742,7 +747,7 @@ onMounted(async () => {
           </div>
 
           <div class="col-12">
-            <d-table
+            <p-table
               flat
               :columns="columns"
               :rows="rows"
@@ -751,7 +756,8 @@ onMounted(async () => {
               selection="single"
               v-model:selected="selected"
               :rows-per-page-options="[10, 25, 50, 100]"
-              @update:pagination="updatePagination"
+              v-model:pagination="pagination"
+              @request="onRequest"
             >
               <template v-slot:header-selection="scope">
                 <q-checkbox
@@ -796,21 +802,7 @@ onMounted(async () => {
                   </q-td>
                 </q-tr>
               </template>
-              <template v-slot:pagination="scope">
-                ทั้งหมด {{ total.toLocaleString() }} รายการ
-                <q-pagination
-                  v-model="page"
-                  active-color="primary"
-                  color="dark"
-                  :max="Number(maxPaeg)"
-                  size="sm"
-                  boundary-links
-                  direction-links
-                  :max-pages="5"
-                  @update:model-value="fetchListDirector"
-                ></q-pagination>
-              </template>
-            </d-table>
+            </p-table>
           </div>
 
           <div class="col-12">
@@ -861,10 +853,7 @@ onMounted(async () => {
     </q-card>
   </q-dialog>
 
-  <PerviewPDF
-    v-model:modal="modalPerView"
-    v-model:data-file="dataFile as DataFileDownload"
-  />
+  <PerviewPDF v-model:modal="modalPerView" v-model:data-file="dataFile" />
 </template>
 
 <style lang="scss" scoped>
diff --git a/src/modules/18_command/interface/request/Main.ts b/src/modules/18_command/interface/request/Main.ts
index 20bc6c086..fa693b2ae 100644
--- a/src/modules/18_command/interface/request/Main.ts
+++ b/src/modules/18_command/interface/request/Main.ts
@@ -1,6 +1,6 @@
 interface FormQuery {
-  page: number;
-  pageSize: number;
+  page?: number;
+  pageSize?: number;
   year: number;
   keyword: string;
   commandTypeId: string;
diff --git a/src/modules/18_command/store/ListStore.ts b/src/modules/18_command/store/ListStore.ts
index 413d3e892..e76157e66 100644
--- a/src/modules/18_command/store/ListStore.ts
+++ b/src/modules/18_command/store/ListStore.ts
@@ -22,7 +22,7 @@ export const useCommandListStore = defineStore("commandListStore", () => {
       name: "commandNo",
       align: "left",
       label: "เลขที่คำสั่ง",
-      sortable: false,
+      sortable: true,
       field: "commandNo",
       format(val, row) {
         return val
@@ -47,7 +47,7 @@ export const useCommandListStore = defineStore("commandListStore", () => {
       name: "commandAffectDate",
       align: "left",
       label: "วันที่ลงนาม",
-      sortable: false,
+      sortable: true,
       field: "commandAffectDate",
       format(val) {
         return val ? date2Thai(val) : "-";
@@ -59,7 +59,7 @@ export const useCommandListStore = defineStore("commandListStore", () => {
       name: "commandExcecuteDate",
       align: "left",
       label: "วันที่คำสั่งมีผล",
-      sortable: false,
+      sortable: true,
       field: "commandExcecuteDate",
       format(val) {
         return val ? date2Thai(val) : "-";
@@ -71,7 +71,7 @@ export const useCommandListStore = defineStore("commandListStore", () => {
       name: "createdFullName",
       align: "left",
       label: "ผู้สร้าง",
-      sortable: false,
+      sortable: true,
       field: "createdFullName",
       headerStyle: "font-size: 14px",
       style: "font-size: 14px",
diff --git a/src/modules/18_command/views/lists.vue b/src/modules/18_command/views/lists.vue
index fc5f64f2e..afc20262d 100644
--- a/src/modules/18_command/views/lists.vue
+++ b/src/modules/18_command/views/lists.vue
@@ -1,10 +1,11 @@
 <script setup lang="ts">
-import { onMounted, reactive, ref, watch } from "vue";
+import { onMounted, reactive, ref } from "vue";
 import { useQuasar } from "quasar";
 
 import { checkPermission } from "@/utils/permissions";
 import { useCounterMixin } from "@/stores/mixin";
 import { useCommandListStore } from "@/modules/18_command/store/ListStore";
+import { usePagination } from "@/composables/usePagination";
 import http from "@/plugins/http";
 import config from "@/app.config";
 
@@ -20,6 +21,10 @@ import TableList from "@/modules/18_command/components/Main/TableMain.vue";
 const $q = useQuasar();
 const store = useCommandListStore();
 const { showLoader, hideLoader, messageError } = useCounterMixin();
+const { pagination, params, onRequest, checkAndUpdatePage } = usePagination(
+  "",
+  fetchListCommand
+);
 
 //รายการ Tab รายการคำสั่ง
 const tabsManu = ref<ItemTabs[]>([
@@ -31,8 +36,6 @@ const tabsManu = ref<ItemTabs[]>([
 ]);
 //ฟอร์มช้อมูลการค้นหา
 const queryParams = reactive<FormQuery>({
-  page: 1, //หน้า
-  pageSize: 10, //จำนวนต่อหน้า
   year: new Date().getFullYear(), //ปีงบประมาณ
   keyword: "", //คำค้นหา
   commandTypeId: "",
@@ -47,28 +50,26 @@ const commandOp = ref<DataOption[]>([]);
 
 const modalAdd = ref<boolean>(false); // เพิ่มคำสั่ง
 
-/**
- * ฟังก์ชันดึงข้อมูลรายการคำสั่ง
- */
+/** ฟังก์ชันดึงข้อมูลรายการคำสั่ง */
 async function fetchListCommand() {
-  store.rows = [];
   showLoader();
   await http
     .get(config.API.commandList, {
       params: {
         ...queryParams,
+        ...params.value,
         status: store.tabsMain,
         keyword: queryParams.keyword.trim(),
       },
     })
     .then(async (res) => {
-      const data = await res.data.result;
-      store.rows = data.data;
-      store.total = data.total;
-      store.maxPage = Math.ceil(data.total / queryParams.pageSize);
+      const result = await res.data.result;
+      pagination.value.rowsNumber = result.total;
+      store.rows = result.data;
     })
     .catch((err) => {
       messageError($q, err);
+      store.rows = [];
     })
     .finally(() => {
       hideLoader();
@@ -246,8 +247,9 @@ onMounted(async () => {
         >
           <TableList
             :fetch-list="fetchListCommand"
-            v-model:page="queryParams.page"
-            v-model:pageSize="queryParams.pageSize"
+            v-model:pagination="pagination"
+            @request="onRequest"
+            :checkAndUpdatePage="checkAndUpdatePage"
           />
         </q-tab-panel>
       </q-tab-panels>