From 1757de73ff2bc1e708fc1bd4eb26277ad141ab42 Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Mon, 22 Apr 2024 09:55:17 +0700
Subject: [PATCH] =?UTF-8?q?=E0=B8=A3=E0=B8=B2=E0=B8=A2=E0=B8=81=E0=B8=B2?=
 =?UTF-8?q?=E0=B8=A3=E0=B9=82=E0=B8=84=E0=B8=A3=E0=B8=87=E0=B8=81=E0=B8=B2?=
 =?UTF-8?q?=E0=B8=A3=20=3D>=20=E0=B8=9B=E0=B8=A3=E0=B8=B1=E0=B8=9A=20inter?=
 =?UTF-8?q?face?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../15_development/components/BasicInfo.vue   |  88 +++----
 .../15_development/components/MainTab.vue     | 234 ++----------------
 .../15_development/interface/response/Main.ts |  31 +++
 src/modules/15_development/views/MainPage.vue |  78 +++---
 4 files changed, 141 insertions(+), 290 deletions(-)

diff --git a/src/modules/15_development/components/BasicInfo.vue b/src/modules/15_development/components/BasicInfo.vue
index 0ae8749a7..d8e5c314f 100644
--- a/src/modules/15_development/components/BasicInfo.vue
+++ b/src/modules/15_development/components/BasicInfo.vue
@@ -2,30 +2,22 @@
 import { reactive, ref, onMounted } from "vue";
 import { useQuasar } from "quasar";
 import { useRoute } from "vue-router";
-
-import type { FormBasicinfo } from "@/modules/15_development/interface/request/Main";
-
-import DialogSelectAgency from "@/modules/15_development/components/DialogSelectAgency.vue";
-
-import { useCounterMixin } from "@/stores/mixin";
-import { useDevelopmentDataStore } from "@/modules/15_development/store/developmentStore";
 import http from "@/plugins/http";
 import config from "@/app.config";
 
-const $q = useQuasar();
-const store = useDevelopmentDataStore();
-const mixin = useCounterMixin();
+/** importType*/
+import type { FormBasicinfo } from "@/modules/15_development/interface/request/Main";
+import type { DataTree } from "@/modules/15_development/interface/response/Main";
 
-const {
-  dialogRemove,
-  dialogConfirm,
-  showLoader,
-  hideLoader,
-  messageError,
-  success,
-  date2Thai,
-} = mixin;
+/** importStore*/
+import { useCounterMixin } from "@/stores/mixin";
+
+/** use*/
+const $q = useQuasar();
 const route = useRoute();
+const mixin = useCounterMixin();
+const { dialogConfirm, showLoader, hideLoader, messageError, success } = mixin;
+
 const projectId = ref<string>(route.params.id.toLocaleString());
 
 const formData = reactive<FormBasicinfo>({
@@ -41,8 +33,12 @@ const formData = reactive<FormBasicinfo>({
 const orgName = ref<string>("");
 const node = ref<any>([]);
 const filter = ref<string>("");
-const expanded = ref<any>([]);
+const expanded = ref<string[]>([]);
 
+/**
+ * function fetch ข้อมูลเบื้องต้น
+ * @param id ProjectId
+ */
 function fetchData(id: string) {
   showLoader();
   http
@@ -76,29 +72,26 @@ function fetchData(id: string) {
     });
 }
 
-async function editData(id: string) {
-  await http
-    .put(config.API.developmentMainTab("tab1", id), formData)
-    .then(() => {
-      fetchData(id);
-      success($q, "บันทึกข้อมูลสำเร็จ");
-    })
-    .catch((err) => {
-      messageError($q, err);
-    })
-    .finally(() => {
-      hideLoader();
-    });
-}
-
+/** function บันทึกข้อมูล*/
 function onSubmit() {
-  dialogConfirm($q, async () => {
+  dialogConfirm($q, () => {
     showLoader();
-    editData(projectId.value);
-    hideLoader();
+    http
+      .put(config.API.developmentMainTab("tab1", projectId.value), formData)
+      .then(() => {
+        fetchData(projectId.value);
+        success($q, "บันทึกข้อมูลสำเร็จ");
+      })
+      .catch((err) => {
+        messageError($q, err);
+      })
+      .finally(() => {
+        hideLoader();
+      });
   });
 }
 
+/** function fetch หา Id หน่วยงานที่ Active*/
 function fetchActive() {
   showLoader();
   http
@@ -113,11 +106,15 @@ function fetchActive() {
     });
 }
 
-async function fetchTree(id: string) {
+/**
+ * function fetch โครงสร้างปจุบัน
+ * @param id โครงสร้างปจุบัน
+ */
+function fetchTree(id: string) {
   showLoader();
   http
     .get(config.API.orgByid(id.toString()))
-    .then(async (res) => {
+    .then((res) => {
       const data = res.data.result;
       node.value = data;
       fetchData(projectId.value);
@@ -130,13 +127,19 @@ async function fetchTree(id: string) {
     });
 }
 
-function updateSelected(data: any) {
+/** function เลือกหน่วยงาน*/
+function updateSelected(data: DataTree) {
   orgName.value = data.orgTreeName;
   formData.node = data.orgLevel;
   formData.nodeId = data.orgTreeId;
   formData.orgRevisionId = data.orgRevisionId;
 }
 
+/**
+ * function หาหน่วยงานที่รับผิดชอบ
+ * @param orgTreeData ข้อมูล  nodeTree
+ * @param treeId tree ID
+ */
 async function searchAndReplace(orgTreeData: any, treeId: string | null) {
   if (orgTreeData) {
     for (let orgTree of orgTreeData) {
@@ -154,9 +157,6 @@ async function searchAndReplace(orgTreeData: any, treeId: string | null) {
 
 onMounted(async () => {
   fetchActive();
-  // setTimeout(() => {
-  //   fetchData(projectId.value);
-  // }, 500);
 });
 </script>
 
diff --git a/src/modules/15_development/components/MainTab.vue b/src/modules/15_development/components/MainTab.vue
index b2e3889c8..57fcf039e 100644
--- a/src/modules/15_development/components/MainTab.vue
+++ b/src/modules/15_development/components/MainTab.vue
@@ -1,220 +1,43 @@
 <script setup lang="ts">
-import { ref, onMounted, onUnmounted } from "vue";
+import { ref, onMounted } from "vue";
 import { useQuasar } from "quasar";
 import { useRouter, useRoute } from "vue-router";
 import http from "@/plugins/http";
 import config from "@/app.config";
 
-import type {
-  ResDataProject,
-  ResPlannedGoals,
-  ResActualGoals,
-  ResPeople,
-} from "@/modules/15_development/interface/response/Main";
-
-import BasicInfo from "@/modules/15_development/components/BasicInfo.vue";
-import Target from "@/modules/15_development/components/Target.vue";
-import ProjectDetail from "@/modules/15_development/components/ProjectDetail.vue";
-import FollowResult from "@/modules/15_development/components/FollowResult.vue";
-import Other from "@/modules/15_development/components/Other.vue";
-import Record from "@/modules/15_development/components/Record.vue";
+/** importComponents*/
+import BasicInfo from "@/modules/15_development/components/BasicInfo.vue"; // ข้อมูลเบื้องต้น
+import Target from "@/modules/15_development/components/Target.vue"; // เป้าหมาย
+import ProjectDetail from "@/modules/15_development/components/ProjectDetail.vue"; // ลักษณะโครงการ
+import FollowResult from "@/modules/15_development/components/FollowResult.vue"; // การติดตามประเมินผล
+import Other from "@/modules/15_development/components/Other.vue"; // อื่นๆ
+import Record from "@/modules/15_development/components/Record.vue"; // บันทึกผล
 
+/** importStore*/
 import { useCounterMixin } from "@/stores/mixin";
 import { useDevelopmentDataStore } from "@/modules/15_development/store/developmentStore";
 
+/** use*/
 const $q = useQuasar();
 const router = useRouter();
 const route = useRoute();
 const store = useDevelopmentDataStore();
-const {
-  success,
-  showLoader,
-  hideLoader,
-  messageError,
-  dialogConfirm,
-  dialogMessageNotify,
-} = useCounterMixin();
+const { success, showLoader, hideLoader, messageError, dialogConfirm } =
+  useCounterMixin();
 
 const title = ref<string>(route.params.id ? "แก้ไข" : "เพิ่ม");
 const projectId = ref<string>(route.params.id.toLocaleString());
 const tab = ref<string>("BasicInfo");
-
 const status = ref<string>("ONGOING");
-// function fetchDataProject(id: string) {
-//   showLoader();
-//   http
-//     .get(config.API.developmentMainById(id))
-//     .then((res) => {
-//       const data: ResDataProject = res.data.result;
-//       /** ข้อมูลเบื้องต้น*/
-//       status.value = data.status ? data.status : "ONGOING";
-//       store.formAddProject.year = data.year;
-//       store.formAddProject.projectName = data.projectName;
-//       store.formAddProject.reason = data.reason;
-//       store.formAddProject.objective = data.objective;
-//       /**เป้าหมาย*/
-//       const plannedGoals = data.plannedGoals.map((e: any) => ({
-//         groupTarget: e.groupTarget,
-//         groupTargetSub: e.groupTargetSub,
-//         positions: e.plannedGoalPositions.map((v: any) => ({
-//           position: v.position,
-//           posTypePlannedId: v.posTypePlannedId,
-//           posLevelPlannedId: v.posLevelPlannedId,
-//         })),
-//         type: e.type ? e.type : null,
-//         amount: e.amount,
-//       }));
-//       const plannedPeoples = data.plannedPeoples.map((e: ResPeople) => ({
-//         groupTarget: e.groupTarget,
-//         amount: e.amount,
-//       }));
-//       store.formAddProject.plannedGoals = plannedGoals;
-//       store.formAddProject.plannedPeoples = plannedPeoples;
-
-//       const actualGoals = data.actualGoals.map((e: ResActualGoals) => ({
-//         groupTarget: e.groupTarget,
-//         groupTargetSub: e.groupTargetSub,
-//         position: e.position,
-//         posTypeActualId: e.posTypeActualId,
-//         posLevelActualId: e.posLevelActualId,
-//         type: e.type,
-//         amount: e.amount,
-//       }));
-//       const actualPeoples = data.actualPeoples.map((e: ResPeople) => ({
-//         groupTarget: e.groupTarget,
-//         amount: e.amount,
-//       }));
-//       store.formAddProject.actualGoals = actualGoals;
-//       store.formAddProject.actualPeoples = actualPeoples;
-
-//       // ลักษณะโครงการ
-//       store.formAddProject.projectType = data.projectType;
-//       store.formAddProject.projectCharacteristics = data.projectCharacteristics;
-//       store.formAddProject.projectDay = data.projectDay;
-//       store.formAddProject.projectNigth = data.projectNigth;
-//       store.formAddProject.projectTechniques = data.projectTechniques;
-//       store.formAddProject.projectModal = data.projectModal;
-
-//       /** การติดตามผลดารประเมิน*/
-//       store.formAddProject.metricType = data.metricType;
-//       store.formAddProject.indicators = data.indicators;
-//       store.formAddProject.target = data.target;
-//       store.formAddProject.calculation = data.calculation;
-//       store.formAddProject.measuRement = data.measuRement;
-//       store.formAddProject.results = data.results;
-//       store.formAddProject.obstacles = data.obstacles;
-//       store.formAddProject.suggestions = data.suggestions;
-//       store.formAddProject.project = data.project;
-//       store.formAddProject.isPassAllocate = data.isPassAllocate;
-//       store.formAddProject.isPassNoAllocate = data.isPassNoAllocate;
-//       store.formAddProject.isNoPass = data.isNoPass;
-//       store.formAddProject.isBudget = data.isBudget;
-//       store.formAddProject.isOutBudget = data.isOutBudget;
-
-//       /** อื่นๆ*/
-//       store.formAddProject.dateStart = data.dateStart;
-//       store.formAddProject.dateEnd = data.dateEnd;
-//       store.formAddProject.totalDate = data.totalDate;
-//       store.formAddProject.address = data.address;
-
-//       const provinces = data.provinces.map((e: any) => e.id);
-//       const provincesId = [...provinces];
-//       store.formAddProject.provinceIds = provincesId;
-
-//       store.formAddProject.budget = data.budget;
-//       store.formAddProject.accept = data.accept;
-//       store.formAddProject.receive = data.receive;
-//       store.formAddProject.approved = data.approved;
-//       store.formAddProject.budgetPay = data.budgetPay;
-//       store.formAddProject.issues = data.issues;
-//       store.formAddProject.chance = Number(data.chance);
-//       store.formAddProject.effects = Number(data.effects);
-//       store.formAddProject.riskLevel = data.riskLevel;
-//       store.formAddProject.riskManagement = data.riskManagement;
-//       store.formAddProject.expect = data.expect;
-//       store.formAddProject.topicAcademic = data.topicAcademic;
-//       store.formAddProject.addressAcademic = data.addressAcademic;
-//       store.formAddProject.provinceActualId = data.provinceActualId;
-//     })
-//     .catch((err) => {
-//       messageError($q, err);
-//     })
-//     .finally(() => {
-//       setTimeout(() => {
-//         hideLoader();
-//       }, 1000);
-//     });
-// }
-
-// function onSubmit() {
-//   if (store.formAddProject.projectName === "" && tab.value !== "BasicInfo") {
-//     dialogMessageNotify($q, "ชื่อโครงการ/กิจกรรม/หลักสูตร");
-//     tab.value = "BasicInfo";
-//   } else {
-//     dialogConfirm($q, async () => {
-//       showLoader();
-//       /** การติดตามผลดารประเมิน*/
-//       if (store.formAddProject.project === "OFFER") {
-//         store.formAddProject.isBudget = false;
-//         store.formAddProject.isOutBudget = false;
-//       } else {
-//         store.formAddProject.isPassAllocate = false;
-//         store.formAddProject.isPassNoAllocate = false;
-//         store.formAddProject.isNoPass = false;
-//       }
-
-//       // ลักษณะโครงการ;
-//       store.formAddProject.projectDay = store.formAddProject.projectDay
-//         ? Number(store.formAddProject.projectDay)
-//         : null;
-//       store.formAddProject.projectNigth = store.formAddProject.projectNigth
-//         ? Number(store.formAddProject.projectNigth)
-//         : null;
-//       store.formAddProject.projectModal = store.formAddProject.projectModal
-//         ? Number(store.formAddProject.projectModal)
-//         : null;
-
-//       /** อื่นๆ*/
-//       store.formAddProject.totalDate = Number(store.formAddProject.totalDate);
-//       store.formAddProject.accept =
-//         typeof store.formAddProject.accept === "string"
-//           ? Number(store.formAddProject.accept.replace(/,/g, ""))
-//           : store.formAddProject.accept;
-//       store.formAddProject.receive =
-//         typeof store.formAddProject.receive === "string"
-//           ? Number(store.formAddProject.receive.replace(/,/g, ""))
-//           : store.formAddProject.receive;
-//       store.formAddProject.approved =
-//         typeof store.formAddProject.approved === "string"
-//           ? Number(store.formAddProject.approved.replace(/,/g, ""))
-//           : store.formAddProject.approved;
-//       store.formAddProject.budgetPay =
-//         typeof store.formAddProject.budgetPay === "string"
-//           ? Number(store.formAddProject.budgetPay.replace(/,/g, ""))
-//           : store.formAddProject.budgetPay;
-
-//       const url = projectId.value
-//         ? config.API.developmentMainById(projectId.value)
-//         : config.API.developmentMain;
-//       const method = projectId.value ? "put" : "post";
-//       try {
-//         const res = await http[method](url, store.formAddProject);
-//         success($q, "บันทึกข้อมูลสำเร็จ");
-//         !projectId.value && router.push(`/development/${res.data.result}`);
-//         projectId.value && fetchDataProject(projectId.value);
-//       } catch (e) {
-//         messageError($q, e);
-//       } finally {
-//         hideLoader();
-//       }
-//     });
-//   }
-// }
 
+/**
+ * function fetch สถานะ Project
+ * @param id projectId
+ */
 function getStatus(id: string) {
   showLoader();
   http
-    .get(config.API.developmentMainStatus(id)) // change path
+    .get(config.API.developmentMainStatus(id))
     .then((res) => {
       status.value = res.data.result.status;
       store.projectStatus = res.data.result.status;
@@ -227,14 +50,15 @@ function getStatus(id: string) {
     });
 }
 
+/** function ยืนยันการเสร็จสิ้นโครงการ*/
 function onFinish(id: string) {
   dialogConfirm(
     $q,
     async () => {
       showLoader();
       http
-        .get(config.API.developmentMainFinish(id)) // change path
-        .then((res) => {
+        .get(config.API.developmentMainFinish(id))
+        .then(() => {
           getStatus(id);
           success($q, "บันทึกข้อมูลสำเร็จ");
         })
@@ -250,16 +74,12 @@ function onFinish(id: string) {
   );
 }
 
+/** hooklifecycle*/
 onMounted(() => {
   projectId.value && getStatus(projectId.value);
 });
-
-onUnmounted(() => {
-  store.clearFormAddProject();
-});
 </script>
 <template>
-  <!-- <q-form greedy @submit.prevent @validation-success="onSubmit"> -->
   <div class="toptitle text-dark col-12 row items-center">
     <q-btn
       flat
@@ -272,17 +92,6 @@ onUnmounted(() => {
     />
     {{ `${title}โครงการ/หลักสูตรการฝึกอบรม` }}
     <q-space />
-    <!-- <q-btn
-      dense
-      unelevated
-      label="บันทึก"
-      id="onSubmit"
-      type="submit"
-      color="public"
-      class="q-px-md"
-    >
-      <q-tooltip>บันทึกข้อมูล</q-tooltip>
-    </q-btn> -->
     <q-btn
       v-if="status === 'ONGOING'"
       unelevated
@@ -329,7 +138,6 @@ onUnmounted(() => {
       </q-tab-panels>
     </div>
   </q-card>
-  <!-- </q-form> -->
 </template>
 
 <style scoped></style>
diff --git a/src/modules/15_development/interface/response/Main.ts b/src/modules/15_development/interface/response/Main.ts
index 469a5b279..21835f09a 100644
--- a/src/modules/15_development/interface/response/Main.ts
+++ b/src/modules/15_development/interface/response/Main.ts
@@ -135,6 +135,36 @@ interface DataStrategic {
   children: DataStrategic;
 }
 
+interface DataTree {
+  labelName: string;
+  orgCode: string;
+  orgLevel: number | null;
+  orgName: string;
+  orgRevisionId: string;
+  orgRootName: string;
+  orgTreeCode: string;
+  orgTreeFax: string;
+  orgTreeId: string;
+  orgTreeName: string;
+  orgTreeOrder: number | null;
+  orgTreePhoneEx: string;
+  orgTreePhoneIn: string;
+  orgTreeRank: string;
+  orgTreeRankSub: string | null;
+  orgTreeShortName: string;
+  totalPosition: number | null;
+  totalPositionCurrentUse: number | null;
+  totalPositionCurrentVacant: number | null;
+  totalPositionNextUse: number | null;
+  totalPositionNextVacant: number | null;
+  totalRootPosition: number | null;
+  totalRootPositionCurrentUse: number | null;
+  totalRootPositionCurrentVacant: number | null;
+  totalRootPositionNextUse: number | null;
+  totalRootPositionNextVacant: number | null;
+  children: DataTree;
+}
+
 export type {
   ResGroup,
   ResLevel,
@@ -145,4 +175,5 @@ export type {
   ResPlannedGoals,
   ResRecord,
   DataStrategic,
+  DataTree,
 };
diff --git a/src/modules/15_development/views/MainPage.vue b/src/modules/15_development/views/MainPage.vue
index 06a0042f4..79fd0cba6 100644
--- a/src/modules/15_development/views/MainPage.vue
+++ b/src/modules/15_development/views/MainPage.vue
@@ -17,7 +17,10 @@ import type {
   FormQueryListProject,
   FormProject,
 } from "@/modules/15_development/interface/request/Main";
-import type { ResListProject } from "@/modules/15_development/interface/response/Main";
+import type {
+  ResListProject,
+  DataTree,
+} from "@/modules/15_development/interface/response/Main";
 
 /** importStore*/
 import { useCounterMixin } from "@/stores/mixin";
@@ -28,9 +31,8 @@ const router = useRouter();
 const { showLoader, hideLoader, messageError, dialogMessageNotify } =
   useCounterMixin();
 
-const ticked = ref<any>([]);
 const node = ref<any>([]);
-const expanded = ref<any>([]);
+const expanded = ref<string[]>([]);
 const filter = ref<string>("");
 const filterMain = ref<string>("");
 const splitterModel = ref<number>(60);
@@ -77,6 +79,14 @@ const statusOpt = ref<DataOption[]>([
   { id: "ONGOING", name: "กำลังดำเนินการ" },
   { id: "FINISH", name: "เสร็จสิ้นโครงการ" },
 ]);
+
+const formProject = reactive<FormProject>({
+  year: null,
+  projectName: "",
+  node: null,
+  nodeId: null,
+  orgRevisionId: null,
+});
 /** formQuery*/
 const formQuery = reactive<FormQueryListProject>({
   year: new Date().getFullYear(),
@@ -88,7 +98,6 @@ const formQuery = reactive<FormQueryListProject>({
   node: null,
   nodeId: null,
 });
-
 const totalList = ref<number>(1); //จำนวนข้อมูลรายการ
 
 /** funciton  fetch รายการโครงการ*/
@@ -121,31 +130,18 @@ function onClickAddOrView(status: boolean = false, id: string = "") {
   status ? router.push(`/development/${id}`) : router.push("/development/add");
 }
 
+/** function เปิด Dialog เพิ่มโครงการ/หลักสูตรการฝึกอบรม*/
 function onAdd() {
   modal.value = true;
 }
-/**
- * function updatePagination
- * @param newPagination ข้อมูล Pagination ใหม่
- */
-function updatePagination(newPagination: NewPagination) {
-  formQuery.page = 1;
-  formQuery.pageSize = newPagination.rowsPerPage;
-}
-
-/** callbackFunction ทำเมื่อมีการอัปเดท pageSize*/
-watch(
-  () => formQuery.pageSize,
-  () => {
-    fetchListProject();
-  }
-);
 
+/** function fetchข้อมูลหน้าแรกใหม่*/
 function fetchListProjectNew() {
   formQuery.page = 1;
   fetchListProject();
 }
 
+/** function Download รายการโครงการ*/
 function onDownload() {
   showLoader();
   http
@@ -165,6 +161,7 @@ function onDownload() {
     });
 }
 
+/** function ปิด Dialog เพิ่มโครงการ/หลักสูตรการฝึกอบรม*/
 function closeDialog() {
   modal.value = false;
   year.value = 0;
@@ -172,14 +169,6 @@ function closeDialog() {
   projectName.value = "";
 }
 
-const formProject = reactive<FormProject>({
-  year: null,
-  projectName: "",
-  node: null,
-  nodeId: null,
-  orgRevisionId: null,
-});
-
 /** dialog submit */
 function onSubmit() {
   if (formProject.nodeId) {
@@ -198,6 +187,7 @@ function onSubmit() {
   }
 }
 
+/** function fetch หา Id หน่วยงานที่ Active*/
 function fetchActive() {
   showLoader();
   http
@@ -212,7 +202,11 @@ function fetchActive() {
     });
 }
 
-async function fetchTree(id: string) {
+/**
+ * function fetch โครงสร้างปจุบัน
+ * @param id โครงสร้างปจุบัน
+ */
+function fetchTree(id: string) {
   showLoader();
   http
     .get(config.API.orgByid(id.toString()))
@@ -228,13 +222,15 @@ async function fetchTree(id: string) {
     });
 }
 
-function updateSelected(data: any) {
+/** function เลือกหน่วยงานที่รับผิดชอบ*/
+function updateSelected(data: DataTree) {
   formProject.node = data.orgLevel;
   formProject.nodeId = data.orgTreeId;
   formProject.orgRevisionId = data.orgRevisionId;
 }
 
-function updateSelectedTreeMain(data: any) {
+/** function เลือกหน่วยงานที่จะค้นหาโครงการ */
+function updateSelectedTreeMain(data: DataTree) {
   if (formQuery.node === data.orgLevel && formQuery.nodeId === data.orgTreeId) {
     formQuery.node = null;
     formQuery.nodeId = null;
@@ -242,10 +238,26 @@ function updateSelectedTreeMain(data: any) {
     formQuery.node = data.orgLevel;
     formQuery.nodeId = data.orgTreeId;
   }
-
-  fetchListProjectNew();
+  fetchListProjectNew(); //  fetch โครงการ
 }
 
+/**
+ * function updatePagination
+ * @param newPagination ข้อมูล Pagination ใหม่
+ */
+function updatePagination(newPagination: NewPagination) {
+  formQuery.page = 1;
+  formQuery.pageSize = newPagination.rowsPerPage;
+}
+
+/** callbackFunction ทำเมื่อมีการอัปเดท pageSize*/
+watch(
+  () => formQuery.pageSize,
+  () => {
+    fetchListProject();
+  }
+);
+
 onMounted(() => {
   fetchActive();
   fetchListProject();