From 9a8f4140929a9653c80c2b676e20e7e8853469b0 Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Fri, 26 Apr 2024 10:21:36 +0700
Subject: [PATCH] =?UTF-8?q?=E0=B8=9E=E0=B8=B1=E0=B8=92=E0=B8=99=E0=B8=B2?=
 =?UTF-8?q?=E0=B8=9A=E0=B8=B8=E0=B8=84=E0=B8=84=E0=B8=A5=20=3D>=20?=
 =?UTF-8?q?=E0=B9=81=E0=B8=AA=E0=B8=94=E0=B8=87=E0=B8=A3=E0=B8=B2=E0=B8=A2?=
 =?UTF-8?q?=E0=B8=81=E0=B8=B2=E0=B8=A3=E0=B8=97=E0=B8=B1=E0=B9=89=E0=B8=87?=
 =?UTF-8?q?=E0=B8=AB=E0=B8=A1=E0=B8=94?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../15_development/views/EmployeeHistory.vue  | 31 +++++++++++++++--
 src/modules/15_development/views/History.vue  | 33 +++++++++++++++++--
 src/modules/15_development/views/MainPage.vue |  9 +++--
 .../15_development/views/Scholarship.vue      | 28 ++++------------
 4 files changed, 70 insertions(+), 31 deletions(-)

diff --git a/src/modules/15_development/views/EmployeeHistory.vue b/src/modules/15_development/views/EmployeeHistory.vue
index 105e6cf85..a7307a9e0 100644
--- a/src/modules/15_development/views/EmployeeHistory.vue
+++ b/src/modules/15_development/views/EmployeeHistory.vue
@@ -1,11 +1,13 @@
 <script setup lang="ts">
-import { ref, onMounted, reactive } from "vue";
+import { ref, onMounted, reactive, watch } from "vue";
 import { useQuasar, type QTableProps } from "quasar";
 import http from "@/plugins/http";
 import config from "@/app.config";
 import genReportXLSX from "@/plugins/genreportxlsx";
 import { useRouter } from "vue-router";
 
+import type { NewPagination } from "@/modules/15_development/interface/index/Main";
+
 /** importStore*/
 import { useDevelopmentDataStore } from "@/modules/15_development/store/developmentStore";
 import { useCounterMixin } from "@/stores/mixin";
@@ -21,6 +23,8 @@ const pagination = ref({
   rowsPerPage: 10,
 });
 const maxPage = ref<number>(1);
+const totalList = ref<number>(0); //จำนวนข้อมูลรายการ
+
 const formFilter = reactive({
   root: null,
   page: 1,
@@ -147,8 +151,9 @@ function getData() {
   http
     .post(config.API.developmentHistoryList("employee"), formFilter)
     .then((res) => {
-      console.log(res.data.result.data);
       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,
@@ -171,6 +176,23 @@ function getData() {
     });
 }
 
+/**
+ * function updatePagination
+ * @param newPagination ข้อมูล Pagination ใหม่
+ */
+function updatePagination(newPagination: NewPagination) {
+  formFilter.page = 1;
+  formFilter.pageSize = newPagination.rowsPerPage;
+}
+
+/** callbackFunction ทำเมื่อมีการอัปเดท pageSize*/
+watch(
+  () => formFilter.pageSize,
+  () => {
+    getData();
+  }
+);
+
 onMounted(() => {
   fetchListOrg();
 });
@@ -267,7 +289,7 @@ onMounted(() => {
             outlined
             debounce="300"
             placeholder="ค้นหา"
-            @keydown.enter.prevent="getData()"
+            @keydown.enter.prevent="(formFilter.page = 1), getData()"
           >
             <template v-slot:append>
               <q-icon v-if="formFilter.keyword == ''" name="search" />
@@ -316,8 +338,10 @@ onMounted(() => {
         :visible-columns="visibleColumns"
         v-model:pagination="pagination"
         :rows-per-page-options="[10, 25, 50, 100]"
+        @update:pagination="updatePagination"
       >
         <template v-slot:pagination="scope">
+          ทั้งหมด {{ totalList }} รายการ
           <q-pagination
             v-model="formFilter.page"
             active-color="primary"
@@ -327,6 +351,7 @@ onMounted(() => {
             size="sm"
             boundary-links
             direction-links
+            @update:model-value="getData"
           ></q-pagination>
         </template>
         <template v-slot:header="props">
diff --git a/src/modules/15_development/views/History.vue b/src/modules/15_development/views/History.vue
index 033785c87..6f0d43816 100644
--- a/src/modules/15_development/views/History.vue
+++ b/src/modules/15_development/views/History.vue
@@ -1,11 +1,14 @@
 <script setup lang="ts">
-import { ref, onMounted, reactive } from "vue";
+import { ref, onMounted, reactive, watch } from "vue";
 import { useRouter } from "vue-router";
 import { useQuasar, type QTableProps } from "quasar";
 import http from "@/plugins/http";
 import config from "@/app.config";
 import genReportXLSX from "@/plugins/genreportxlsx";
 
+/**importType*/
+import type { NewPagination } from "@/modules/15_development/interface/index/Main";
+
 /** importStore*/
 import { useDevelopmentDataStore } from "@/modules/15_development/store/developmentStore";
 import { useCounterMixin } from "@/stores/mixin";
@@ -23,6 +26,7 @@ const formFilter = reactive({
   year: new Date().getFullYear(),
 });
 const maxPage = ref<number>(1);
+const totalList = ref<number>(0); //จำนวนข้อมูลรายการ
 
 /** use*/
 const router = useRouter();
@@ -110,12 +114,14 @@ const columns = ref<QTableProps["columns"]>([
 ]);
 
 const agencyOp = ref<[]>([]);
+
 function fetchListOrg() {
   showLoader();
   http
     .get(config.API.developmentHistoryListOrg("officer", formFilter.year))
     .then((res) => {
       formFilter.root = null;
+      formFilter.page = 1;
       rows.value = [];
       agencyOp.value = res.data.result;
       getData();
@@ -135,6 +141,8 @@ function getData() {
     .then((res) => {
       console.log(res.data.result.data);
       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,
@@ -181,6 +189,23 @@ function onEdit(id: string) {
   router.push(`/development/history/${id}`);
 }
 
+/**
+ * function updatePagination
+ * @param newPagination ข้อมูล Pagination ใหม่
+ */
+function updatePagination(newPagination: NewPagination) {
+  formFilter.page = 1;
+  formFilter.pageSize = newPagination.rowsPerPage;
+}
+
+/** callbackFunction ทำเมื่อมีการอัปเดท pageSize*/
+watch(
+  () => formFilter.pageSize,
+  () => {
+    getData();
+  }
+);
+
 onMounted(() => {
   fetchListOrg();
 });
@@ -275,9 +300,8 @@ onMounted(() => {
             v-model="formFilter.keyword"
             ref="filterRef"
             outlined
-            debounce="300"
             placeholder="ค้นหา"
-            @keydown.enter.prevent="getData()"
+            @keydown.enter.prevent="(formFilter.page = 1), getData()"
           >
             <template v-slot:append>
               <q-icon v-if="formFilter.keyword == ''" name="search" />
@@ -324,8 +348,10 @@ onMounted(() => {
         :visible-columns="visibleColumns"
         v-model:pagination="pagination"
         :rows-per-page-options="[10, 25, 50, 100]"
+        @update:pagination="updatePagination"
       >
         <template v-slot:pagination="scope">
+          ทั้งหมด {{ totalList }} รายการ
           <q-pagination
             v-model="formFilter.page"
             active-color="primary"
@@ -335,6 +361,7 @@ onMounted(() => {
             size="sm"
             boundary-links
             direction-links
+            @update:model-value="getData"
           ></q-pagination>
         </template>
         <template v-slot:header="props">
diff --git a/src/modules/15_development/views/MainPage.vue b/src/modules/15_development/views/MainPage.vue
index 397965756..d92bdd2e5 100644
--- a/src/modules/15_development/views/MainPage.vue
+++ b/src/modules/15_development/views/MainPage.vue
@@ -98,7 +98,8 @@ const formQuery = reactive<FormQueryListProject>({
   node: null,
   nodeId: null,
 });
-const totalList = ref<number>(1); //จำนวนข้อมูลรายการ
+const totalList = ref<number>(0); //จำนวนข้อมูลรายการ
+const totalPage = ref<number>(1);
 
 /** funciton  fetch รายการโครงการ*/
 function fetchListProject() {
@@ -110,7 +111,8 @@ function fetchListProject() {
     )
     .then((res) => {
       const data = res.data.result.data;
-      totalList.value = Math.ceil(res.data.result.total / formQuery.pageSize);
+      totalPage.value = Math.ceil(res.data.result.total / formQuery.pageSize);
+      totalList.value = res.data.result.total;
       rows.value = data;
     })
     .catch((err) => {
@@ -499,11 +501,12 @@ onMounted(() => {
               </q-tr>
             </template>
             <template v-slot:pagination="scope">
+              ทั้งหมด {{ totalList }} รายการ
               <q-pagination
                 v-model="formQuery.page"
                 active-color="primary"
                 color="dark"
-                :max="Number(totalList)"
+                :max="Number(totalPage)"
                 size="sm"
                 boundary-links
                 direction-links
diff --git a/src/modules/15_development/views/Scholarship.vue b/src/modules/15_development/views/Scholarship.vue
index 3b303bc28..958433baa 100644
--- a/src/modules/15_development/views/Scholarship.vue
+++ b/src/modules/15_development/views/Scholarship.vue
@@ -108,26 +108,6 @@ const scholarshipTypeOp = ref<DataOption[]>([
     name: "ศึกษา ฝึกอบรม ประชุม ดูงาน และปฏิบัติการวิจัย ณ ต่างประเทศ",
   },
 ]);
-const itemDownload = ref<ItemsDownload[]>([
-  {
-    label: "ดาวน์โหลด 1",
-    value: "",
-    icon: "mdi-file-pdf-box",
-    color: "green",
-  },
-  {
-    label: "ดาวน์โหลด 2",
-    value: "",
-    icon: "mdi-file-table",
-    color: "red",
-  },
-  {
-    label: "ดาวน์โหลด 3",
-    value: "",
-    icon: "mdi-file-word",
-    color: "blue",
-  },
-]);
 
 const formQuery = reactive({
   page: 1,
@@ -137,6 +117,7 @@ const formQuery = reactive({
   keyword: "",
 });
 const totalList = ref<number>(1); //จำนวนข้อมูลรายการ
+const maxPage = ref<number>(1);
 
 function fetchList() {
   showLoader();
@@ -147,7 +128,9 @@ function fetchList() {
     )
     .then((res) => {
       const data = res.data.result.data;
-      totalList.value = Math.ceil(res.data.result.total / formQuery.pageSize);
+      maxPage.value = Math.ceil(res.data.result.total / formQuery.pageSize);
+      totalList.value = res.data.result.total;
+
       rows.value = data;
     })
     .catch((err) => {
@@ -369,11 +352,12 @@ onMounted(() => {
           </q-tr>
         </template>
         <template v-slot:pagination="scope">
+          ทั้งหมด {{ totalList }} รายการ
           <q-pagination
             v-model="formQuery.page"
             active-color="primary"
             color="dark"
-            :max="Number(totalList)"
+            :max="Number(maxPage)"
             size="sm"
             boundary-links
             direction-links