From 556471f23c7cd38a7029910da936d163f30bb778 Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Thu, 17 Apr 2025 16:28:19 +0700
Subject: [PATCH] =?UTF-8?q?fix=20=E0=B9=80=E0=B8=A5=E0=B8=B7=E0=B9=88?=
 =?UTF-8?q?=E0=B8=AD=E0=B8=99=E0=B8=82=E0=B8=B1=E0=B9=89=E0=B8=99?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../04_salaryLists/DialogMoveLevelMulti.vue   | 129 +++++++++++-------
 .../04_salaryLists/TableTypePending.vue       |   4 +-
 2 files changed, 85 insertions(+), 48 deletions(-)

diff --git a/src/modules/13_salary/components/04_salaryLists/DialogMoveLevelMulti.vue b/src/modules/13_salary/components/04_salaryLists/DialogMoveLevelMulti.vue
index d9056ddd9..47d43f472 100644
--- a/src/modules/13_salary/components/04_salaryLists/DialogMoveLevelMulti.vue
+++ b/src/modules/13_salary/components/04_salaryLists/DialogMoveLevelMulti.vue
@@ -189,26 +189,53 @@ watch(
       <q-separator />
 
       <q-card-section class="scroll" style="max-height: 80vh">
-        <div class="q-gutter-y-sm">
-          <div class="row items-center q-gutter-x-sm q-pb-sm">
-            <q-select
-              class="inputgreen"
-              v-model="type"
-              label="เลื่อนขั้น"
-              dense
-              outlined
-              emit-value
-              map-options
-              option-label="name"
-              option-value="id"
-              :options="typeRangeOps"
-              :rules="[(val:string) => !!val || `${'กรุณาเลือก ขั้น'}`]"
-              lazy-rules
-              hide-bottom-space
-              @update:model-value="chengType()"
-              style="min-width: 140px"
-            />
-            <q-space />
+        <div class="q-col-gutter-sm">
+          <div class="row q-col-gutter-sm jus">
+            <div class="col-3">
+              <q-select
+                class="inputgreen"
+                v-model="type"
+                label="เลื่อนขั้น"
+                dense
+                outlined
+                emit-value
+                map-options
+                option-label="name"
+                option-value="id"
+                :options="typeRangeOps"
+                :rules="[(val:string) => !!val || `${'กรุณาเลือก ขั้น'}`]"
+                lazy-rules
+                hide-bottom-space
+                @update:model-value="chengType()"
+                style="min-width: 140px"
+              />
+            </div>
+
+            <div class="row col-9 items-center">
+              <q-checkbox
+                v-if="type === 'FULL'"
+                keep-color
+                label="สำรอง"
+                dense
+                v-model="isReserve"
+              />
+
+              <q-input
+                v-if="type === 'NONE'"
+                outlined
+                dense
+                v-model="note"
+                label="หมายเหตุ"
+                type="textarea"
+                :class="inputEdit(isReadonly)"
+              />
+            </div>
+          </div>
+          <div class="col-12">
+            <q-separator class="col-12" />
+          </div>
+
+          <div class="row justify-end q-col-gutter-sm">
             <q-input
               standout
               dense
@@ -237,20 +264,23 @@ watch(
             />
           </div>
 
-          <div class="col-12">
-            <d-table
+          <div class="row justify-end">ทั้งหมด {{ total }} รายการ</div>
+
+          <div class="col-12 q-mt-sm">
+            <q-table
+              class="custom-header-table"
               ref="table"
               :columns="columns"
               :rows="rows"
               row-key="id"
               flat
               bordered
-              :paging="true"
               dense
-              :rows-per-page-options="[10, 25, 50, 100]"
+              hide-pagination
               :visible-columns="visibleColumns"
               selection="multiple"
               v-model:selected="selectedData"
+              :pagination="{ page: 1, rowsPerPage: total }"
             >
               <template v-slot:header-selection="scope">
                 <q-checkbox
@@ -311,27 +341,7 @@ watch(
                   </q-td>
                 </q-tr>
               </template>
-            </d-table>
-          </div>
-
-          <div class="col-12">
-            <q-checkbox
-              v-if="type === 'FULL'"
-              keep-color
-              label="สำรอง"
-              dense
-              v-model="isReserve"
-            />
-
-            <q-input
-              v-if="type === 'NONE'"
-              outlined
-              dense
-              v-model="note"
-              label="หมายเหตุ"
-              type="textarea"
-              :class="inputEdit(isReadonly)"
-            />
+            </q-table>
           </div>
         </div>
       </q-card-section>
@@ -348,4 +358,31 @@ watch(
   </q-dialog>
 </template>
 
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+.custom-header-table {
+  height: auto;
+  .q-table tr:nth-child(odd) td {
+    background: white;
+  }
+  .q-table tr:nth-child(even) td {
+    background: #f8f8f8;
+  }
+
+  .q-table thead tr {
+    background: #ecebeb;
+  }
+
+  .q-table thead tr th {
+    position: sticky;
+    z-index: 1;
+  }
+  /* this will be the loading indicator */
+  .q-table thead tr:last-child th {
+    /* height of all previous header rows */
+    top: 48px;
+  }
+  .q-table thead tr:first-child th {
+    top: 0;
+  }
+}
+</style>
diff --git a/src/modules/13_salary/components/04_salaryLists/TableTypePending.vue b/src/modules/13_salary/components/04_salaryLists/TableTypePending.vue
index 48b203f32..76477f805 100644
--- a/src/modules/13_salary/components/04_salaryLists/TableTypePending.vue
+++ b/src/modules/13_salary/components/04_salaryLists/TableTypePending.vue
@@ -389,8 +389,8 @@ function onClickViewInfo(type: string, id: string) {
       flat
       round
       dense
-      color="public"
-      icon="mdi-stairs-up"
+      color="green-6"
+      icon="mdi-swap-vertical-bold"
       @click="onClickMoveLevelMulti"
     >
       <q-tooltip>เลื่อนขั้น</q-tooltip>