ทะเบียนประวัติ == > TableSort

src/modules/04_registryPerson/components/detail/Salary/01_PositionSalary.vue

@@ -68,6 +68,10 @@ const baseColumns = ref<QTableProps["columns"]>([
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
     format: (v) => date2Thai(v),
+    sort: (a: string, b: string) =>
+      a
+        .toString()
+        .localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
   {
     name: "amount",
@@ -78,6 +82,10 @@ const baseColumns = ref<QTableProps["columns"]>([
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
     format: (v) => Number(v).toLocaleString(),
+    sort: (a: string, b: string) =>
+      a
+        .toString()
+        .localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
   {
     name: "positionSalaryAmount",
@@ -88,6 +96,10 @@ const baseColumns = ref<QTableProps["columns"]>([
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
     format: (v) => Number(v).toLocaleString(),
+    sort: (a: string, b: string) =>
+      a
+        .toString()
+        .localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
   {
     name: "mouthSalaryAmount",
@@ -98,6 +110,10 @@ const baseColumns = ref<QTableProps["columns"]>([
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
     format: (v) => Number(v).toLocaleString(),
+    sort: (a: string, b: string) =>
+      a
+        .toString()
+        .localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
 
   {
@@ -115,6 +131,10 @@ const baseColumns = ref<QTableProps["columns"]>([
         ? row.posNo
         : "-";
     },
+    sort: (a: string, b: string) =>
+      a
+        .toString()
+        .localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
   {
     name: "positionName",
@@ -124,6 +144,10 @@ const baseColumns = ref<QTableProps["columns"]>([
     field: "positionName",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a
+        .toString()
+        .localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
   {
     name: "positionType",
@@ -133,6 +157,10 @@ const baseColumns = ref<QTableProps["columns"]>([
     field: "positionType",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a
+        .toString()
+        .localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
   {
     name: "positionLevel",
@@ -151,6 +179,10 @@ const baseColumns = ref<QTableProps["columns"]>([
     },
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a
+        .toString()
+        .localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
   {
     name: "commandName",
@@ -160,6 +192,10 @@ const baseColumns = ref<QTableProps["columns"]>([
     field: "commandName",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a
+        .toString()
+        .localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
   {
     name: "refCommandNo",
@@ -174,6 +210,10 @@ const baseColumns = ref<QTableProps["columns"]>([
     },
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a
+        .toString()
+        .localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
   {
     name: "remark",
@@ -183,6 +223,10 @@ const baseColumns = ref<QTableProps["columns"]>([
     field: "remark",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a
+        .toString()
+        .localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
 ]);
 const columns = computed(() => {
@@ -211,8 +255,7 @@ const visibleColumns = ref<string[]>([
   "remark",
 ]);
 const pagination = ref({
-  page: 1,
-  rowsPerPage: 10,
+  sortBy: "",
 });
 
 const formDataSalary = reactive<FormSalaryNew>({
@@ -727,9 +770,7 @@ onMounted(() => {
     dense
     :columns="columns"
     :rows="rows"
-    :paging="true"
     v-model:pagination="pagination"
-    :rows-per-page-options="[10, 20, 50, 100]"
     :visible-columns="visibleColumns"
   >
     <template v-slot:header="props">

src/modules/04_registryPerson/components/detail/Salary/01_PositionSalaryHistory.vue

@@ -42,6 +42,10 @@ const baseColumns = ref<QTableProps["columns"]>([
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
     format: (v) => date2Thai(v),
+    sort: (a: string, b: string) =>
+      a
+        .toString()
+        .localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
   {
     name: "amount",
@@ -52,6 +56,10 @@ const baseColumns = ref<QTableProps["columns"]>([
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
     format: (v) => Number(v).toLocaleString(),
+    sort: (a: string, b: string) =>
+      a
+        .toString()
+        .localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
   {
     name: "positionSalaryAmount",
@@ -62,6 +70,10 @@ const baseColumns = ref<QTableProps["columns"]>([
     headerStyle: "font-size: 14px",
     format: (v) => Number(v).toLocaleString(),
     style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a
+        .toString()
+        .localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
   {
     name: "mouthSalaryAmount",
@@ -72,6 +84,10 @@ const baseColumns = ref<QTableProps["columns"]>([
     headerStyle: "font-size: 14px",
     format: (v) => Number(v).toLocaleString(),
     style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a
+        .toString()
+        .localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
   {
     name: "oc",
@@ -81,6 +97,10 @@ const baseColumns = ref<QTableProps["columns"]>([
     field: "oc",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a
+        .toString()
+        .localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
   {
     name: "positionName",
@@ -90,6 +110,10 @@ const baseColumns = ref<QTableProps["columns"]>([
     field: "positionName",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a
+        .toString()
+        .localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
   {
     name: "posNo",
@@ -106,6 +130,10 @@ const baseColumns = ref<QTableProps["columns"]>([
         ? row.posNo
         : "-";
     },
+    sort: (a: string, b: string) =>
+      a
+        .toString()
+        .localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
   {
     name: "positionLine",
@@ -115,6 +143,10 @@ const baseColumns = ref<QTableProps["columns"]>([
     field: "positionLine",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a
+        .toString()
+        .localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
   {
     name: "positionPathSide",
@@ -124,6 +156,10 @@ const baseColumns = ref<QTableProps["columns"]>([
     field: "positionPathSide",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a
+        .toString()
+        .localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
   {
     name: "positionType",
@@ -133,6 +169,10 @@ const baseColumns = ref<QTableProps["columns"]>([
     field: "positionType",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a
+        .toString()
+        .localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
   {
     name: "positionLevel",
@@ -151,6 +191,10 @@ const baseColumns = ref<QTableProps["columns"]>([
     },
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a
+        .toString()
+        .localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
   {
     name: "positionExecutive",
@@ -160,6 +204,10 @@ const baseColumns = ref<QTableProps["columns"]>([
     field: "positionExecutive",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a
+        .toString()
+        .localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
   {
     name: "positionExecutiveSide",
@@ -169,6 +217,10 @@ const baseColumns = ref<QTableProps["columns"]>([
     field: "positionExecutiveSide",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a
+        .toString()
+        .localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
   {
     name: "salaryClass",
@@ -178,6 +230,10 @@ const baseColumns = ref<QTableProps["columns"]>([
     field: "salaryClass",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a
+        .toString()
+        .localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
   {
     name: "commandName",
@@ -187,6 +243,10 @@ const baseColumns = ref<QTableProps["columns"]>([
     field: "commandName",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a
+        .toString()
+        .localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
   {
     name: "refCommandNo",
@@ -201,6 +261,10 @@ const baseColumns = ref<QTableProps["columns"]>([
     },
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a
+        .toString()
+        .localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
   {
     name: "remark",
@@ -210,6 +274,10 @@ const baseColumns = ref<QTableProps["columns"]>([
     field: "remark",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a
+        .toString()
+        .localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
   {
     name: "lastUpdateFullName",
@@ -219,6 +287,10 @@ const baseColumns = ref<QTableProps["columns"]>([
     field: "lastUpdateFullName",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a
+        .toString()
+        .localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
   {
     name: "lastUpdatedAt",
@@ -229,6 +301,10 @@ const baseColumns = ref<QTableProps["columns"]>([
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
     format: (v) => date2Thai(v, false, true),
+    sort: (a: string, b: string) =>
+      a
+        .toString()
+        .localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
 ]);
 const visibleColumns = ref<string[]>([
@@ -265,8 +341,7 @@ const columns = computed(() => {
   return baseColumns.value;
 });
 const pagination = ref({
-  page: 1,
-  rowsPerPage: 10,
+  sortBy: "lastUpdatedAt",
 });
 
 /** function fetch ข้อมูลประวัติการแก้ไข*/
@@ -359,9 +434,7 @@ watch(
           dense
           :columns="columns"
           :rows="rows"
-          :paging="true"
           v-model:pagination="pagination"
-          :rows-per-page-options="[10, 20, 50, 100]"
           :visible-columns="visibleColumns"
         >
           <template v-slot:header="props">

src/modules/04_registryPerson/components/detail/Salary/02_NotReceiveSalary.vue

@@ -115,6 +115,18 @@ const columns = ref<QTableProps["columns"]>([
     sort: (a: string, b: string) =>
       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
+  {
+    name: "lastUpdatedAt",
+    align: "left",
+    label: "วันที่แก้ไข",
+    sortable: true,
+    field: "lastUpdatedAt",
+    format: (v) => date2Thai(v, false, true),
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
 ]);
 const visibleColumns = ref<string[]>([
   "date",
@@ -122,10 +134,10 @@ const visibleColumns = ref<string[]>([
   "reference",
   "refCommandNo",
   "refCommandDate",
+  "lastUpdatedAt",
 ]);
 const pagination = ref({
-  page: 1,
-  rowsPerPage: 10,
+  sortBy: "lastUpdatedAt",
 });
 
 /** funciton ยืนยันการบันทึกข้อมูล*/
@@ -315,13 +327,11 @@ onMounted(() => {
     flat
     bordered
     dense
+    :grid="modelView === 'card'"
     :columns="columns"
     :rows="rows"
-    :paging="true"
     v-model:pagination="pagination"
-    :rows-per-page-options="[20, 50, 100]"
     :visible-columns="visibleColumns"
-    :grid="modelView === 'card'"
   >
     <template v-slot:header="props">
       <q-tr :props="props">

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

@@ -124,8 +124,7 @@ const visibleColumns = ref<string[]>([
   "lastUpdatedAt",
 ]);
 const pagination = ref({
-  page: 1,
-  rowsPerPage: 10,
+  sortBy: "lastUpdatedAt",
 });
 
 /** fetch รายการข้อมูลประวัติการแก้ไช*/
@@ -219,9 +218,7 @@ watch(modal, (status) => {
           dense
           :columns="columns"
           :rows="rows"
-          :paging="true"
           v-model:pagination="pagination"
-          :rows-per-page-options="[20, 50, 100]"
           :visible-columns="visibleColumns"
         >
           <template v-slot:header="props">