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

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

@@ -13,7 +13,6 @@ import config from "@/app.config";
 import type { QTableProps } from "quasar";
 import type {
   DataOption,
-  DataOptionInsignia,
   InsigniaOps,
   InsigniasType,
   InsigniasTypeSub,
@@ -76,19 +75,11 @@ const isEdit = ref<boolean>(false); //สถานะการแก้ไขข
 const modal = ref<boolean>(false); //แสดง popup ข้อมูลเครื่องราชอิสริยาภรณ์
 const modeView = ref<string>("table"); //การแสดงผล Table,Card
 const modalHistory = ref<boolean>(false); //แสดง popup ประวัติแก้ไข
-//ข้อมูลเครื่องราช
-const OpsFilter = ref<InsigniaOps>({
-  insigniaOptions: [],
-});
 
 const insigniaOptions = ref<InsigniasType[]>([]);
 const insigniaOptionsMain = ref<InsigniasType[]>([]);
 const insigniaOptionsName = ref<InsigniasTypeSub[]>([]);
 const insigniaOptionsNameMain = ref<InsigniasTypeSub[]>([]);
-//ต้วลือกรายการครื่องราช
-const Ops = ref<InsigniaOps>({
-  insigniaOptions: [],
-});
 
 //Table Main
 const rows = ref<ResponseObject[]>([]);
@@ -104,6 +95,11 @@ const columns = ref<QTableProps["columns"]>([
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
     format: (v) => v + 543,
+    sort: (a: string, b: string) =>
+      a.toString().localeCompare(b, undefined, {
+        numeric: true,
+        sensitivity: "base",
+      }),
   },
   {
     name: "receiveDate",
@@ -255,6 +251,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[]>([
   "insignia",
@@ -271,10 +279,10 @@ const visibleColumns = ref<String[]>([
   "refCommandNo",
   "refCommandDate",
   "note",
+  "lastUpdatedAt",
 ]);
 const pagination = ref({
-  page: 1,
-  rowsPerPage: 10,
+  sortBy: "lastUpdatedAt",
 });
 
 //Table ประวัติแก้ไข
@@ -291,6 +299,10 @@ const columnsHistory = ref<QTableProps["columns"]>([
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
     format: (v) => v + 543,
+    sort: (a: string, b: string) =>
+      a
+        .toString()
+        .localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
   {
     name: "receiveDate",
@@ -473,8 +485,7 @@ const visibleColumnsHistory = ref<String[]>([
   "lastUpdatedAt",
 ]);
 const historyPagination = ref({
-  page: 1,
-  rowsPerPage: 10,
+  sortBy: "lastUpdatedAt",
 });
 
 /** fetch ข้อมูลรายการเครื่องราชอิสริยาภรณ์*/
@@ -527,15 +538,14 @@ async function addEditData(editStatus: boolean = false) {
     isUpload: !isEdit.value ? undefined : isUpload.value,
     profileEmployeeId:
       !editStatus && empType.value !== "" ? profileId.value : undefined,
-      
+
     profileId:
       !editStatus && empType.value === "" ? profileId.value : undefined,
-      
   };
   try {
     await http[method](url, reqBody).then(async (res) => {
       if ((fileUpload.value && id.value) || res.data.result) {
-        await uploadProfile(editStatus ? id.value:res.data.result);
+        await uploadProfile(editStatus ? id.value : res.data.result);
       }
     });
 
@@ -568,7 +578,7 @@ async function uploadProfile(id: string) {
     )
     .then(async (res) => {
       uploadUrl.value = res.data["เอกสารหลักฐาน"].uploadUrl;
-      await uploadFileURL(uploadUrl.value, fileUpload.value,id);
+      await uploadFileURL(uploadUrl.value, fileUpload.value, id);
     })
     .catch((err) => {
       messageError($q, err);
@@ -580,7 +590,7 @@ async function uploadProfile(id: string) {
  * @param uploadUrl Path อัปโหลดไฟล์
  * @param file ไฟล์เอกสาร
  */
-async function uploadFileURL(uploadUrl: string, file: any,id:string) {
+async function uploadFileURL(uploadUrl: string, file: any, id: string) {
   await axios
     .put(uploadUrl, file, {
       headers: {
@@ -598,7 +608,7 @@ async function uploadFileURL(uploadUrl: string, file: any,id:string) {
     });
 }
 
-async function isUploadFn(id:string) {
+async function isUploadFn(id: string) {
   await http
     .patch(config.API.profileNewInsignById(id, empType.value), {
       isUpload: fileUpload.value ? true : false,
@@ -904,12 +914,10 @@ onMounted(async () => {
     dense
     bordered
     :rows="rows"
-    :paging="true"
     :columns="columns"
     v-model:pagination="pagination"
     :grid="modeView === 'card'"
     :visible-columns="visibleColumns"
-    :rows-per-page-options="[20, 50, 100]"
     :card-container-class="modeView === 'card' ? 'q-col-gutter-md' : ''"
   >
     <template v-slot:header="props">
@@ -1517,8 +1525,6 @@ onMounted(async () => {
           dense
           :columns="columnsHistory"
           :rows="rowsHistory"
-          :paging="true"
-          :rows-per-page-options="[10, 25, 50, 100]"
           :visible-columns="visibleColumnsHistory"
         >
           >