ยืม-คืนเครื่องราชฯ

src/modules/02_organization/components/DialogHistoryPos.vue

@@ -55,6 +55,8 @@ 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: "orgShortName",
@@ -64,6 +66,8 @@ const columns = ref<QTableProps["columns"]>([
     field: "orgShortName",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
   {
     name: "posMasterNoPrefix",
@@ -73,6 +77,8 @@ const columns = ref<QTableProps["columns"]>([
     field: "posMasterNoPrefix",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
   {
     name: "posMasterNo",
@@ -82,6 +88,10 @@ const columns = ref<QTableProps["columns"]>([
     field: "posMasterNo",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a
+        .toString()
+        .localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
   {
     name: "posMasterNoSuffix",
@@ -91,6 +101,8 @@ const columns = ref<QTableProps["columns"]>([
     field: "posMasterNoSuffix",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
   {
     name: "position",
@@ -100,6 +112,8 @@ const columns = ref<QTableProps["columns"]>([
     field: "position",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
   {
     name: "posType",
@@ -120,6 +134,8 @@ const columns = ref<QTableProps["columns"]>([
     },
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
 
   {
@@ -133,19 +149,27 @@ const columns = ref<QTableProps["columns"]>([
     format(val, row) {
       return !val ? "-" : val;
     },
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
   {
     name: "lastUpdatedAt",
     align: "left",
     label: "วันที่แก้ไข",
     field: "lastUpdatedAt",
+    sortable: true,
     format(val, row) {
       return date2Thai(val);
     },
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
 ]);
+const pagination = ref({
+  sortBy: "lastUpdatedAt",
+});
 
 /**
  *  function เรียกข้อมูลประวัติตำแหน่ง
@@ -167,9 +191,7 @@ function fetchHistoryPos(id: string) {
     });
 }
 
-/**
- * ดูการเปลี่ยนแปลง  modal เมื่อเป็น true จะเรียกเรียกข้อมูลประวัติตำแหน่ง
- */
+/** ดูการเปลี่ยนแปลง  modal เมื่อเป็น true จะเรียกเรียกข้อมูลประวัติตำแหน่ง*/
 watch(
   () => modal.value,
   () => {
@@ -198,6 +220,7 @@ watch(
           :columns="columns"
           row-key="id"
           no-data-label="ไม่มีข้อมูล"
+          v-model:pagination="pagination"
         >
           <template v-slot:header="props">
             <q-tr :props="props">