Merge branch 'Nice' into develop

src/modules/04_registryPerson/interface/request/Edit.ts

@@ -2,8 +2,8 @@ interface DataFilter {
   status: string;
   empType: string;
   keyword: string;
-  page: number;
-  pageSize: number;
+  page?: number;
+  pageSize?: number;
 }
 
 interface FormDataSalary {

src/modules/04_registryPerson/views/edit/list.vue

@@ -7,6 +7,7 @@ import config from "@/app.config";
 import { useCounterMixin } from "@/stores/mixin";
 import { useRoute, useRouter } from "vue-router";
 import { useEditPosDataStore } from "@/modules/04_registryPerson/stores/Edit";
+import { usePagination } from "@/composables/usePagination";
 
 /** importType*/
 import type { QTableColumn } from "quasar";
@@ -23,6 +24,7 @@ const route = useRoute();
 const router = useRouter();
 const store = useEditPosDataStore();
 const { showLoader, hideLoader, messageError } = useCounterMixin();
+const { pagination, params, onRequest } = usePagination("", fetchData);
 
 const organizationOps = ref<DataOption[]>([]);
 const organizationOpsMain = ref<DataOption[]>([]);
@@ -57,11 +59,7 @@ const filter = reactive<DataFilter>({
   status: store.status,
   empType: store.empType,
   keyword: store.keyword,
-  page: store.page,
-  pageSize: store.pageSize,
 });
-const total = ref<number>(0);
-const maxPage = ref<number>(0);
 const rows = ref<DataSalaryPos[]>([]);
 const columns = ref<QTableColumn[]>([
   {
@@ -83,7 +81,7 @@ const columns = ref<QTableColumn[]>([
     style: "font-size: 14px",
   },
   {
-    name: "fullName",
+    name: "firstName",
     align: "left",
     label: "ชื่อ-นามสกุล",
     sortable: true,
@@ -130,7 +128,7 @@ const columns = ref<QTableColumn[]>([
     name: "org",
     align: "left",
     label: "สังกัด",
-    sortable: true,
+    sortable: false,
     field: "org",
     headerStyle: "font-size: 14px;min-width: 280px",
     style: "font-size: 14px",
@@ -151,7 +149,7 @@ const columns = ref<QTableColumn[]>([
 const visibleColumns = ref<string[]>([
   "posNo",
   "citizenId",
-  "fullName",
+  "firstName",
   "position",
   "posType",
   "posLevel",
@@ -240,10 +238,9 @@ function filterSelector(val: string, update: Function, type: string) {
 }
 
 /** function fetch รายการแก้ไขทะเบียนประวัติ ตำแหน่ง/เงินเดือน*/
-function fetchData() {
+async function fetchData() {
   let queryParams = {
-    page: filter.page,
-    pageSize: filter.pageSize,
+    ...params.value,
     type: filter.empType?.toLocaleUpperCase(),
     searchKeyword: filter.keyword,
     statusCheckEdit: filter.status?.toLocaleUpperCase(),
@@ -253,18 +250,17 @@ function fetchData() {
   store.status = filter.status;
   store.empType = filter.empType;
   store.keyword = filter.keyword;
-  store.page = filter.page;
-  store.pageSize = filter.pageSize;
+  store.page = pagination.value.page;
+  store.pageSize = pagination.value.rowsPerPage;
 
   if (organization.value !== "" && filter.empType !== "") {
     rows.value = [];
     showLoader();
-    http
+    await http
       .get(config.API.salaryTemp, { params: queryParams })
       .then((res) => {
         const data = res.data.result;
-        total.value = data.total;
-        maxPage.value = Math.ceil(data.total / filter.pageSize);
+        pagination.value.rowsNumber = data.total;
         rows.value = data.data;
       })
       .catch((err) => {
@@ -283,21 +279,12 @@ function fetchData() {
 function onSearchData(val: boolean = true) {
   store.orgId = organization.value;
   if (val) {
-    filter.page = 1;
+    pagination.value.page = 1;
   }
 
   fetchData();
 }
 
-/**
- * function เปลี่ยนแถวต่อหน้า
- * @param newPagination ข้อมูล Pagination
- */
-function updatePageSize(newPagination: Pagination) {
-  filter.pageSize = newPagination.rowsPerPage;
-  onSearchData();
-}
-
 /**
  * function ไปหน้ารายการประวัติตำแหน่ง/เงินเดือน
  * @param id ProfileID
@@ -315,6 +302,9 @@ onMounted(async () => {
   } else {
     organizationOpsMain.value = store.orgData;
     organizationOps.value = store.orgData;
+    pagination.value.page = store.page;
+    pagination.value.rowsPerPage = store.pageSize;
+    fetchData();
   }
 });
 </script>
@@ -436,7 +426,7 @@ onMounted(async () => {
     </div>
 
     <div class="col-12">
-      <d-table
+      <p-table
         ref="table"
         row-key="id"
         flat
@@ -447,7 +437,8 @@ onMounted(async () => {
         :paging="true"
         :rows-per-page-options="[20, 50, 100]"
         :visible-columns="visibleColumns"
-        @update:pagination="updatePageSize"
+        @request="onRequest"
+        v-model:pagination="pagination"
       >
         >
         <template v-slot:header="props">
@@ -490,21 +481,7 @@ onMounted(async () => {
             </q-td>
           </q-tr>
         </template>
-        <template v-slot:pagination="scope">
-          ทั้งหมด {{ total.toLocaleString() }} รายการ
-          <q-pagination
-            v-model="filter.page"
-            active-color="primary"
-            color="dark"
-            :max="Number(maxPage)"
-            :max-pages="5"
-            size="sm"
-            boundary-links
-            direction-links
-            @update:model-value="onSearchData(false)"
-          ></q-pagination>
-        </template>
-      </d-table>
+      </p-table>
     </div>
   </q-card>
 </template>