From 51e544c25951e683c232cf0a41dda466de9fc944 Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Fri, 1 Mar 2024 11:58:09 +0700
Subject: [PATCH] =?UTF-8?q?=E0=B9=82=E0=B8=84=E0=B8=A3=E0=B8=87=E0=B8=AA?=
 =?UTF-8?q?=E0=B8=A3=E0=B9=89=E0=B8=B2=E0=B8=87=E0=B8=81=E0=B8=B3=E0=B8=A5?=
 =?UTF-8?q?=E0=B8=B1=E0=B8=87=20=3D>=20=E0=B8=9B=E0=B8=A3=E0=B8=B1?=
 =?UTF-8?q?=E0=B8=9A=E0=B8=81=E0=B8=B2=E0=B8=A3=E0=B8=84=E0=B9=89=E0=B8=99?=
 =?UTF-8?q?=E0=B8=AB=E0=B8=B2=20Tree?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/TreeMain.vue                   |  2 +-
 src/modules/13_salary/views/salaryLists.vue   | 57 ++++++++++++++++---
 2 files changed, 51 insertions(+), 8 deletions(-)

diff --git a/src/modules/02_organizationalNew/components/TreeMain.vue b/src/modules/02_organizationalNew/components/TreeMain.vue
index a3a395e99..a3fb420e8 100644
--- a/src/modules/02_organizationalNew/components/TreeMain.vue
+++ b/src/modules/02_organizationalNew/components/TreeMain.vue
@@ -418,7 +418,7 @@ watch(
           default-expand-all
           :nodes="lazy"
           node-key="orgTreeId"
-          label-key="orgTreeName"
+          label-key="labelName"
           :filter="filter"
           :no-results-label="notFound"
           :no-nodes-label="noData"
diff --git a/src/modules/13_salary/views/salaryLists.vue b/src/modules/13_salary/views/salaryLists.vue
index 0f1286e5d..005c98762 100644
--- a/src/modules/13_salary/views/salaryLists.vue
+++ b/src/modules/13_salary/views/salaryLists.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { onMounted, ref } from "vue";
+import { onMounted, ref, computed, nextTick } from "vue";
 import { useQuasar } from "quasar";
 import config from "@/app.config";
 import http from "@/plugins/http";
@@ -38,14 +38,47 @@ const periodLatest = ref<DataPeriodLatest>();
 
 const isLoad = ref<boolean>(false);
 
+const page = ref<number>(1);
+const pageSize = ref<number>(50);
+const lastPage = ref<number>(0);
+const loading = ref(false);
+const nextPage = ref<number>(1);
+
+function onScroll({ to, ref }: { to: number; ref: any }) {
+  const lastIndex = roundOptions.value.length - 1;
+
+  if (
+    loading.value !== true &&
+    nextPage.value < lastPage.value &&
+    to === lastIndex
+  ) {
+    loading.value = true;
+
+    setTimeout(() => {
+      nextPage.value++;
+      page.value = nextPage.value;
+      getRound();
+      nextTick(() => {
+        ref.refresh();
+        loading.value = false;
+      });
+    }, 500);
+  }
+}
+
 /**function เรียกข้อมูลรอบการขึ้นเงินเดือน*/
 async function getRound() {
   showLoader();
   http
-    .get(config.API.salaryPeriod() + `?page=1&pageSise=10&keyword=&year=0`)
+    .get(
+      config.API.salaryPeriod() +
+        `?page=${page.value}&pageSize=${pageSize.value}&keyword=&year=0`
+    )
     .then(async (res) => {
       const data = res.data.result.data;
-      roundOptions.value = await data.map((x: DataRound) => ({
+      lastPage.value = Math.ceil(res.data.result.total / pageSize.value);
+
+      const optionMain = await data.map((x: DataRound) => ({
         id: x.id,
         revisionId: x.revisionId,
         shortCode: x.period,
@@ -53,12 +86,11 @@ async function getRound() {
           (x.period === "OCT"
             ? "รอบตุลาคม "
             : x.period === "SPECIAL"
-            ? "รอบพิเศษ"
+            ? "รอบพิเศษ "
             : "รอบเมษายน ") +
           (Number(x.year) + 543),
       }));
-
-      console.log(roundOptions.value);
+      roundOptions.value.push(...optionMain);
 
       roundFilter.value = await (roundOptions.value
         ? roundOptions.value[0]
@@ -257,6 +289,7 @@ onMounted(async () => {
       รายการเงินเดือน
     </div>
     <q-space />
+    <!-- @virtual-scroll="onScroll" -->
     <q-select
       v-model="roundFilter"
       label="รอบการขึ้นเงินเดือน"
@@ -270,7 +303,17 @@ onMounted(async () => {
       hide-bottom-space
       bg-color="white"
       @update:model-value="onChangeRound"
-    />
+      :loading="loading"
+      @virtual-scroll="onScroll"
+    >
+      <template v-slot:option="scope">
+        <q-item v-bind="scope.itemProps">
+          <q-item-section>
+            <q-item-label>{{ scope.opt.name }}</q-item-label>
+          </q-item-section>
+        </q-item>
+      </template>
+    </q-select>
     <q-select
       class="q-ml-xs"
       v-model="snapFilter"