fix(development):sort

src/modules/15_development/views/EmployeeHistory.vue

@@ -10,9 +10,12 @@ import { useDevelopmentDataStore } from "@/modules/15_development/store/developm
 import { useCounterMixin } from "@/stores/mixin";
 import { checkPermission } from "@/utils/permissions";
 import { calculateFiscalYear } from "@/utils/function";
+import { usePagination } from "@/composables/usePagination";
 
 import type {
   NewPagination,
+  DataHistory,
+  DataOption,
   ItemsMenu,
 } from "@/modules/15_development/interface/index/Main";
 
@@ -22,24 +25,16 @@ const router = useRouter();
 const route = useRoute();
 const store = useDevelopmentDataStore();
 const { showLoader, hideLoader, messageError } = useCounterMixin();
+const { pagination, params, onRequest } = usePagination("", getData);
 
-const maxPage = ref<number>(1); // จำนวนหน้า
-const totalList = ref<number>(0); //จำนวนข้อมูลรายการ
 const formFilter = reactive({
   root: null,
-  page: 1,
-  pageSize: 10,
   keyword: "",
   year: calculateFiscalYear(new Date()), //ปีงบประมาณ
 });
 
-const pagination = ref({
-  page: formFilter.page,
-  rowsPerPage: formFilter.pageSize,
-});
-
-const rows = ref<any[]>([]);
-const agencyOp = ref<any[]>([]);
+const rows = ref<DataHistory[]>([]);
+const agencyOp = ref<DataOption[]>([]);
 const itemMenu = ref<ItemsMenu[]>([
   {
     label: "ไฟล์ .xlsx",
@@ -54,18 +49,15 @@ const itemMenu = ref<ItemsMenu[]>([
     color: "red",
   },
 ]);
-
 const visibleColumns = ref<string[]>([
   "year",
   "citizenId",
-  "name",
+  "fullName",
   "position",
-  "type",
-  "level",
-  "positionSide",
+  "posType",
+  "posLevel",
   "projectName",
 ]);
-
 const columns = ref<QTableProps["columns"]>([
   {
     name: "year",
@@ -87,11 +79,11 @@ const columns = ref<QTableProps["columns"]>([
     style: "font-size: 14px",
   },
   {
-    name: "name",
+    name: "fullName",
     align: "left",
     label: "ชื่อ-นามสกุล",
     sortable: true,
-    field: "name",
+    field: "fullName",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
@@ -106,20 +98,20 @@ const columns = ref<QTableProps["columns"]>([
     style: "font-size: 14px",
   },
   {
-    name: "type",
+    name: "posType",
     align: "left",
     label: "กลุ่มงาน",
     sortable: true,
-    field: "type",
+    field: "posType",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
   {
-    name: "level",
+    name: "posLevel",
     align: "left",
     label: "ระดับชั้นงาน",
     sortable: true,
-    field: "level",
+    field: "posLevel",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
@@ -141,7 +133,7 @@ async function fetchListOrg() {
     .get(config.API.developmentHistoryListOrg("employee", formFilter.year))
     .then(async (res) => {
       formFilter.root = null;
-      formFilter.page = 1;
+      pagination.value.page = 1;
       rows.value = [];
       const option = [{ name: "ทั้งหมด", id: null }];
       const optionNew = await res.data.result.map((e: string) => ({
@@ -150,7 +142,6 @@ async function fetchListOrg() {
       }));
       option.push(...optionNew);
       agencyOp.value = option;
-      // agencyOp.value = res.data.result;
       await getData();
     })
     .catch((err) => {
@@ -171,9 +162,9 @@ function onDownload(type: string) {
       year: formFilter.year,
       root: formFilter.root,
     })
-    .then((res) => {
+    .then(async (res) => {
       const dataList = res.data.result;
-      genReportXLSX(dataList, "รายการประวัติฝึกอบรม/ดูงาน ลูกจ้าง", type);
+      await genReportXLSX(dataList, "รายการประวัติฝึกอบรม/ดูงาน ลูกจ้าง", type);
     })
     .catch((e) => {
       messageError($q, e);
@@ -183,7 +174,7 @@ function onDownload(type: string) {
     });
 }
 
-/** edit page
+/** ฟังก์ชันแก้ไขข้อมูล
  * @param id id ของ row
  */
 function onEdit(id: string) {
@@ -193,30 +184,20 @@ function onEdit(id: string) {
   }
 }
 
-/** ดึงข้อมูล */
+/** ฟังก์ชันดึงข้อมูลรายการประวัติฝึกอบรม/ดูงาน */
 async function getData() {
   showLoader();
   formFilter.keyword = formFilter.keyword.trim();
   await http
-    .post(config.API.developmentHistoryList("employee"), formFilter)
+    .post(config.API.developmentHistoryList("employee"), {
+      ...params.value,
+      ...formFilter,
+      keyword: formFilter.keyword.trim(),
+    })
     .then((res) => {
-      const data = res.data.result.data;
-      maxPage.value = Math.ceil(res.data.result.total / formFilter.pageSize);
-      totalList.value = res.data.result.total;
-      rows.value = data.map((item: any) => ({
-        id: item.id ? item.id : null,
-        citizenId: item.citizenId ? item.citizenId : null,
-        name: item.fullName ? item.fullName : null,
-        prefix: item.prefix ? item.prefix : null,
-        firstName: item.firstName ? item.firstName : null,
-        lastName: item.lastName ? item.lastName : null,
-        position: item.position ? item.position : null,
-        type: item.posType ? item.posType : null,
-        level: item.posLevel ? item.posLevel : null,
-        positionSide: item.posExecutive ? item.posExecutive : null,
-        projectName: item.projectName ? item.projectName : null,
-        year: item.year ? item.year : null,
-      }));
+      const result = res.data.result;
+      pagination.value.rowsNumber = result.total;
+      rows.value = result.data;
     })
     .catch((e) => {
       messageError($q, e);
@@ -226,23 +207,12 @@ async function getData() {
     });
 }
 
-/**
- * function updatePagination
- * @param newPagination ข้อมูล Pagination ใหม่
- */
-function updatePagination(newPagination: NewPagination) {
-  formFilter.page = 1;
-  formFilter.pageSize = newPagination.rowsPerPage;
+/** ฟังก์ชันดึงข้อมูลใหม่ */
+function onfetchNewData() {
+  pagination.value.page = 1;
+  getData();
 }
 
-/** callbackFunction ทำเมื่อมีการอัปเดท pageSize*/
-watch(
-  () => formFilter.pageSize,
-  () => {
-    getData();
-  }
-);
-
 /** ดึงข้อมูลเมื่อโหลดหน้าเสร็จสิ้น */
 onMounted(async () => {
   await fetchListOrg();
@@ -253,6 +223,7 @@ onMounted(async () => {
   <div class="toptitle text-dark col-12 row items-center">
     รายการประวัติฝึกอบรม/ดูงาน ลูกจ้าง
   </div>
+
   <q-card flat bordered class="q-pa-md">
     <div class="row no-wrap shadow-1 justify-between">
       <q-toolbar class="row col-8 q-pa-none q-gutter-x-sm">
@@ -307,7 +278,7 @@ onMounted(async () => {
           :options="agencyOp"
           option-value="id"
           option-label="name"
-          @update:model-value="(formFilter.page = 1), getData()"
+          @update:model-value="onfetchNewData()"
           style="min-width: 150px"
           map-options
           emit-value
@@ -359,7 +330,7 @@ onMounted(async () => {
             ref="filterRef"
             outlined
             placeholder="ค้นหา"
-            @keydown.enter.prevent="(formFilter.page = 1), getData()"
+            @keydown.enter.prevent="onfetchNewData()"
           >
             <template v-slot:append>
               <q-icon name="search" />
@@ -385,7 +356,7 @@ onMounted(async () => {
     </div>
 
     <div class="col-12">
-      <d-table
+      <p-table
         for="table"
         ref="table"
         :columns="columns"
@@ -396,24 +367,10 @@ onMounted(async () => {
         dense
         class="custom-header-table"
         :visible-columns="visibleColumns"
-        v-model:pagination="pagination"
         :rows-per-page-options="[10, 25, 50, 100]"
-        @update:pagination="updatePagination"
+        v-model:pagination="pagination"
+        @request="onRequest"
       >
-        <template v-slot:pagination="scope">
-          ทั้งหมด {{ totalList }} รายการ
-          <q-pagination
-            v-model="formFilter.page"
-            active-color="primary"
-            color="dark"
-            :max="Number(maxPage)"
-            :max-pages="5"
-            size="sm"
-            boundary-links
-            direction-links
-            @update:model-value="getData"
-          ></q-pagination>
-        </template>
         <template v-slot:header="props">
           <q-tr :props="props">
             <q-th auto-width></q-th>
@@ -444,7 +401,7 @@ onMounted(async () => {
             </q-td>
           </q-tr>
         </template>
-      </d-table>
+      </p-table>
     </div>
   </q-card>
 </template>