From 633d503bde516502925b8f1513ea2b30f43cb478 Mon Sep 17 00:00:00 2001
From: Tanyalak <tanyalak@frappet.com>
Date: Tue, 20 Feb 2024 10:55:31 +0700
Subject: [PATCH] =?UTF-8?q?=E0=B8=9B=E0=B8=A3=E0=B8=B1=E0=B8=9A=20css=20?=
 =?UTF-8?q?=E0=B8=A3=E0=B8=B0=E0=B8=9A=E0=B8=9A=E0=B9=80=E0=B8=87=E0=B8=B4?=
 =?UTF-8?q?=E0=B8=99=E0=B9=80=E0=B8=94=E0=B8=B7=E0=B8=AD=E0=B8=99?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/SalaryChart/DialogFormMain.vue | 628 +++++++++---------
 .../components/SalaryChart/DialogFormRate.vue |   4 +-
 src/modules/13_salary/views/salaryChart.vue   |  10 +-
 src/modules/13_salary/views/salaryRate.vue    | 283 ++++----
 4 files changed, 456 insertions(+), 469 deletions(-)

diff --git a/src/modules/13_salary/components/SalaryChart/DialogFormMain.vue b/src/modules/13_salary/components/SalaryChart/DialogFormMain.vue
index 0f3dbb862..04bea5fbb 100644
--- a/src/modules/13_salary/components/SalaryChart/DialogFormMain.vue
+++ b/src/modules/13_salary/components/SalaryChart/DialogFormMain.vue
@@ -363,342 +363,334 @@ async function downloadFile(url: string, type: string, fileName: string) {
 </script>
 
 <template>
-  <q-dialog v-model="modal" full-width persistent>
-    <q-card>
+  <q-dialog v-model="modal" persistent>
+    <q-card class="col-12" style="width: 80%">
       <Header :tittle="title" :close="closeDialog" />
       <q-separator />
 
-      <q-card-section class="q-pt-none">
-        <div class="row col-12 q-col-gutter-sm q-pa-md">
-          <div class="col-xs-12 col-md-9">
-            <div class="row col-12 q-col-gutter-sm">
-              <div class="col-xs-12 col-md-3">
-                <q-select
-                  ref="salaryTypeRef"
+      <q-card-section class="scroll" style="max-height: 70vh" >
+        <div class="row col-12 q-col-gutter-sm">
+          <div class="col-xs-12 col-md-4">
+            <q-select
+              ref="salaryTypeRef"
+              dense
+              hide-bottom-space
+              outlined
+              option-label="name"
+              option-value="id"
+              emit-value
+              map-options
+              v-model="formData.salaryType"
+              :options="salaryTypeOption"
+              label="ประเภทผังบัญชีเงินเดือน"
+              :rules="[
+                (val) => !!val || 'กรุณาเลือกประเภทผังบัญชีเงินเดือน',
+              ]"
+              lazy-rules
+            />
+          </div>
+
+          <div class="col-xs-12 col-md-3">
+            <q-select
+              ref="posTypeRef"
+              dense
+              hide-bottom-space
+              outlined
+              option-label="name"
+              option-value="id"
+              emit-value
+              map-options
+              v-model="formData.posTypeId"
+              :options="salaryPosTypeOption"
+              label="ประเภทตำแหน่ง/กลุ่ม"
+              :rules="[(val) => !!val || 'กรุณาเลือกประเภทตำแหน่ง/กลุ่ม']"
+              lazy-rules
+              @update:model-value="fetchPosLevel"
+            />
+          </div>
+
+          <div class="col-xs-12 col-md-3">
+            <q-select
+              ref="posLevelRef"
+              dense
+              hide-bottom-space
+              outlined
+              option-label="name"
+              option-value="id"
+              emit-value
+              map-options
+              v-model="formData.posLevelId"
+              :options="salaryPosLevelOption"
+              label="ระดับ"
+              :rules="[(val) => !!val || 'กรุณาเลือกระดับ']"
+              lazy-rules
+              :disable="formData.posTypeId === ''"
+            />
+          </div>
+
+          <div
+            class="col-xs-12 col-md-2"
+            style="display: flex; justify-content: flex-end"
+          >
+            <q-toggle
+              color="primary"
+              label="สถานะการใช้งาน"
+              v-model="formData.isActive"
+            />
+          </div>
+
+          <div class="col-xs-12 col-md-4">
+            <datepicker
+              menu-class-name="modalfix"
+              v-model="formData.date"
+              :locale="'th'"
+              autoApply
+              borderless
+              :enableTimePicker="false"
+              week-start="0"
+            >
+              <template #year="{ year }">
+                {{ year + 543 }}
+              </template>
+              <template #year-overlay-value="{ value }">
+                {{ parseInt(value + 543) }}
+              </template>
+              <template #trigger>
+                <q-input
+                  ref="dateRef"
+                  outlined
                   dense
                   hide-bottom-space
-                  outlined
-                  option-label="name"
-                  option-value="id"
-                  emit-value
-                  map-options
-                  v-model="formData.salaryType"
-                  :options="salaryTypeOption"
-                  label="ประเภทผังบัญชีเงินเดือน"
+                  :model-value="
+                    formData.date != null ? date2Thai(formData.date) : null
+                  "
+                  label="ให้ไว ณ วันที่"
                   :rules="[
-                    (val) => !!val || 'กรุณาเลือกประเภทผังบัญชีเงินเดือน',
+                    (val) =>
+                      !!val || `${'กรุณาเลือกวันที่ ให้ไว ณ วันที่'}`,
                   ]"
                   lazy-rules
-                />
-              </div>
-
-              <div class="col-xs-12 col-md-3">
-                <q-select
-                  ref="posTypeRef"
-                  dense
-                  hide-bottom-space
-                  outlined
-                  option-label="name"
-                  option-value="id"
-                  emit-value
-                  map-options
-                  v-model="formData.posTypeId"
-                  :options="salaryPosTypeOption"
-                  label="ประเภทตำแหน่ง/กลุ่ม"
-                  :rules="[(val) => !!val || 'กรุณาเลือกประเภทตำแหน่ง/กลุ่ม']"
-                  lazy-rules
-                  @update:model-value="fetchPosLevel"
-                />
-              </div>
-
-              <div class="col-xs-12 col-md-3">
-                <q-select
-                  ref="posLevelRef"
-                  dense
-                  hide-bottom-space
-                  outlined
-                  option-label="name"
-                  option-value="id"
-                  emit-value
-                  map-options
-                  v-model="formData.posLevelId"
-                  :options="salaryPosLevelOption"
-                  label="ระดับ"
-                  :rules="[(val) => !!val || 'กรุณาเลือกระดับ']"
-                  lazy-rules
-                  :disable="formData.posTypeId === ''"
-                />
-              </div>
-
-              <div
-                class="col-xs-12 col-md-3"
-                style="display: flex; justify-content: flex-end"
-              >
-                <q-toggle
-                  color="primary"
-                  label="สถานะการใช้งาน"
-                  v-model="formData.isActive"
-                />
-              </div>
-
-              <div class="col-xs-12 col-md-4">
-                <datepicker
-                  menu-class-name="modalfix"
-                  v-model="formData.date"
-                  :locale="'th'"
-                  autoApply
-                  borderless
-                  :enableTimePicker="false"
-                  week-start="0"
                 >
-                  <template #year="{ year }">
-                    {{ year + 543 }}
-                  </template>
-                  <template #year-overlay-value="{ value }">
-                    {{ parseInt(value + 543) }}
-                  </template>
-                  <template #trigger>
-                    <q-input
-                      ref="dateRef"
-                      outlined
-                      dense
-                      hide-bottom-space
-                      :model-value="
-                        formData.date != null ? date2Thai(formData.date) : null
-                      "
-                      label="ให้ไว ณ วันที่"
-                      :rules="[
-                        (val) =>
-                          !!val || `${'กรุณาเลือกวันที่ ให้ไว ณ วันที่'}`,
-                      ]"
-                      lazy-rules
+                  <template v-slot:prepend>
+                    <q-icon
+                      name="event"
+                      class="cursor-pointer"
+                      style="color: var(--q-primary)"
                     >
-                      <template v-slot:prepend>
-                        <q-icon
-                          name="event"
-                          class="cursor-pointer"
-                          style="color: var(--q-primary)"
-                        >
-                        </q-icon>
-                      </template>
-                    </q-input>
+                    </q-icon>
                   </template>
-                </datepicker>
-              </div>
-
-              <div class="col-xs-12 col-md-4">
-                <datepicker
-                  menu-class-name="modalfix"
-                  v-model="formData.startDate"
-                  :locale="'th'"
-                  autoApply
-                  borderless
-                  :enableTimePicker="false"
-                  week-start="0"
-                  @update:model-value="checkEndDate"
-                >
-                  <template #year="{ year }">
-                    {{ year + 543 }}
-                  </template>
-                  <template #year-overlay-value="{ value }">
-                    {{ parseInt(value + 543) }}
-                  </template>
-                  <template #trigger>
-                    <q-input
-                      ref="startDateRef"
-                      outlined
-                      dense
-                      hide-bottom-space
-                      :model-value="
-                        formData.startDate != null
-                          ? date2Thai(formData.startDate)
-                          : null
-                      "
-                      label="วันที่มีผลบังคับใช้"
-                      :rules="[
-                        (val) => !!val || `${'กรุณาเลือกวันที่มีผลบังคับใช้'}`,
-                      ]"
-                      lazy-rules
-                    >
-                      <template v-slot:prepend>
-                        <q-icon
-                          name="event"
-                          class="cursor-pointer"
-                          style="color: var(--q-primary)"
-                        >
-                        </q-icon>
-                      </template>
-                    </q-input>
-                  </template>
-                </datepicker>
-              </div>
-
-              <div class="col-xs-12 col-md-4">
-                <datepicker
-                  menu-class-name="modalfix"
-                  v-model="formData.endDate"
-                  :locale="'th'"
-                  autoApply
-                  borderless
-                  :enableTimePicker="false"
-                  week-start="0"
-                  :min-date="formData.startDate"
-                >
-                  <template #year="{ year }">
-                    {{ year + 543 }}
-                  </template>
-                  <template #year-overlay-value="{ value }">
-                    {{ parseInt(value + 543) }}
-                  </template>
-                  <template #trigger>
-                    <q-input
-                      ref="endDateRef"
-                      outlined
-                      dense
-                      hide-bottom-space
-                      :model-value="
-                        formData.endDate != null
-                          ? date2Thai(formData.endDate)
-                          : null
-                      "
-                      label="วันที่สิ้นสุดบังคับใช้"
-                      :rules="[
-                        (val) =>
-                          !!val || `${'กรุณาเลือกวันที่สิ้นสุดบังคับใช้'}`,
-                      ]"
-                      lazy-rules
-                    >
-                      <template v-slot:prepend>
-                        <q-icon
-                          name="event"
-                          class="cursor-pointer"
-                          style="color: var(--q-primary)"
-                        >
-                        </q-icon>
-                      </template>
-                    </q-input>
-                  </template>
-                </datepicker>
-              </div>
-
-              <div class="col-12">
-                <q-input
-                  v-model="formData.details"
-                  outlined
-                  dense
-                  type="textarea"
-                  label="คำอธิบาย"
-                />
-              </div>
-            </div>
-            <div
-              class="col-xs-12 col-md-3 q-mt-sm"
-              style="display: flex; justify-content: flex-end"
-            >
-              <q-btn label="บันทึก" color="secondary" @click="onClickSubmit"
-                ><q-tooltip>บันทึกข้อมูล</q-tooltip></q-btn
-              >
-            </div>
+                </q-input>
+              </template>
+            </datepicker>
           </div>
-          <div class="col-xs-12 col-md-3">
-            <div class="row col-12 q-col-gutter-sm">
-              <div class="col-xs-12 col-md-12">
-                <q-card bordered style="border: 1px solid #d6dee1">
-                  <div
-                    class="col-12 text-weight-medium bg-grey-1 q-py-sm q-px-md"
-                  >
-                    อัปโหลดเอกสารอ้างอิง
-                  </div>
-                  <div class="col-12"><q-separator /></div>
-                  <div class="row col-12 q-col-gutter-y-sm q-pa-sm">
-                    <div class="col-12 row">
-                      <q-file
-                        v-if="props.typeAction === 'edit'"
-                        class="col-12"
-                        outlined
-                        dense
-                        v-model="documentFile"
-                        label="เอกสารอ้างอิง"
-                        hide-bottom-space
-                      >
-                        <template v-slot:prepend>
-                          <q-icon name="attach_file" color="primary" />
-                        </template>
-                        <template v-slot:after>
-                          <q-btn
-                            v-if="documentFile"
-                            size="14px"
-                            flat
-                            round
-                            dense
-                            color="add"
-                            icon="mdi-upload"
-                            @click="uploadDocumentFile"
-                            ><q-tooltip>อัปโหลดเอกสาร</q-tooltip></q-btn
-                          >
-                        </template>
-                      </q-file>
-                    </div>
 
-                    <div v-if="itemsDocument.length > 0" class="col-xs-12 row">
-                      <q-list
-                        class="full-width rounded-borders"
-                        bordered
-                        separator
-                      >
-                        <q-item
-                          v-for="file in itemsDocument"
-                          :key="file.id"
-                          clickable
-                          v-ripple
-                        >
-                          <q-item-section>{{ file.name }}</q-item-section>
-                          <q-item-section avatar>
-                            <div class="row">
-                              <div>
-                                <q-btn
-                                  dense
-                                  flat
-                                  round
-                                  size="12px"
-                                  color="blue"
-                                  icon="mdi-download-outline"
-                                  @click="onClickDonwload(file.name)"
-                                >
-                                  <q-tooltip>ดาวน์โหลดไฟล์</q-tooltip>
-                                </q-btn>
-                              </div>
-                              <div>
-                                <q-btn
-                                  dense
-                                  flat
-                                  round
-                                  size="12px"
-                                  color="red"
-                                  icon="mdi-delete-outline"
-                                  @click="onClickDeleteFile(file.name)"
-                                  ><q-tooltip>ลบไฟล์</q-tooltip></q-btn
-                                >
-                              </div>
-                            </div>
-                          </q-item-section>
-                        </q-item>
-                      </q-list>
-                    </div>
+          <div class="col-xs-12 col-md-4">
+            <datepicker
+              menu-class-name="modalfix"
+              v-model="formData.startDate"
+              :locale="'th'"
+              autoApply
+              borderless
+              :enableTimePicker="false"
+              week-start="0"
+              @update:model-value="checkEndDate"
+            >
+              <template #year="{ year }">
+                {{ year + 543 }}
+              </template>
+              <template #year-overlay-value="{ value }">
+                {{ parseInt(value + 543) }}
+              </template>
+              <template #trigger>
+                <q-input
+                  ref="startDateRef"
+                  outlined
+                  dense
+                  hide-bottom-space
+                  :model-value="
+                    formData.startDate != null
+                      ? date2Thai(formData.startDate)
+                      : null
+                  "
+                  label="วันที่มีผลบังคับใช้"
+                  :rules="[
+                    (val) => !!val || `${'กรุณาเลือกวันที่มีผลบังคับใช้'}`,
+                  ]"
+                  lazy-rules
+                >
+                  <template v-slot:prepend>
+                    <q-icon
+                      name="event"
+                      class="cursor-pointer"
+                      style="color: var(--q-primary)"
+                    >
+                    </q-icon>
+                  </template>
+                </q-input>
+              </template>
+            </datepicker>
+          </div>
 
-                    <div class="col-12" v-else>
-                      <q-card class="q-pa-md" bordered>
-                        ไม่มีรายการเอกสาร
-                      </q-card>
-                    </div>
-                  </div>
-                </q-card>
+          <div class="col-xs-12 col-md-4">
+            <datepicker
+              menu-class-name="modalfix"
+              v-model="formData.endDate"
+              :locale="'th'"
+              autoApply
+              borderless
+              :enableTimePicker="false"
+              week-start="0"
+              :min-date="formData.startDate"
+            >
+              <template #year="{ year }">
+                {{ year + 543 }}
+              </template>
+              <template #year-overlay-value="{ value }">
+                {{ parseInt(value + 543) }}
+              </template>
+              <template #trigger>
+                <q-input
+                  ref="endDateRef"
+                  outlined
+                  dense
+                  hide-bottom-space
+                  :model-value="
+                    formData.endDate != null
+                      ? date2Thai(formData.endDate)
+                      : null
+                  "
+                  label="วันที่สิ้นสุดบังคับใช้"
+                  :rules="[
+                    (val) =>
+                      !!val || `${'กรุณาเลือกวันที่สิ้นสุดบังคับใช้'}`,
+                  ]"
+                  lazy-rules
+                >
+                  <template v-slot:prepend>
+                    <q-icon
+                      name="event"
+                      class="cursor-pointer"
+                      style="color: var(--q-primary)"
+                    >
+                    </q-icon>
+                  </template>
+                </q-input>
+              </template>
+            </datepicker>
+          </div>
+
+          <div class="col-12">
+            <q-input
+              v-model="formData.details"
+              outlined
+              dense
+              type="textarea"
+              label="คำอธิบาย"
+            />
+          </div>
+          
+          <div class="col-xs-12 col-md-12">
+            <q-card bordered style="border: 1px solid #d6dee1">
+              <div
+                class="col-12 text-weight-medium bg-grey-1 q-py-sm q-px-md"
+              >
+                อัปโหลดเอกสารอ้างอิง
               </div>
-            </div>
+              <div class="col-12"><q-separator /></div>
+              <div class="row col-12 q-col-gutter-y-sm q-pa-sm">
+                <div class="col-12 row">
+                  <q-file
+                    v-if="props.typeAction === 'edit'"
+                    class="col-12"
+                    outlined
+                    dense
+                    v-model="documentFile"
+                    label="เอกสารอ้างอิง"
+                    hide-bottom-space
+                  >
+                    <template v-slot:prepend>
+                      <q-icon name="attach_file" color="primary" />
+                    </template>
+                    <template v-slot:after>
+                      <q-btn
+                        v-if="documentFile"
+                        size="14px"
+                        flat
+                        round
+                        dense
+                        color="add"
+                        icon="mdi-upload"
+                        @click="uploadDocumentFile"
+                        ><q-tooltip>อัปโหลดเอกสาร</q-tooltip></q-btn
+                      >
+                    </template>
+                  </q-file>
+                </div>
+
+                <div v-if="itemsDocument.length > 0" class="col-xs-12 row">
+                  <q-list
+                    class="full-width rounded-borders"
+                    bordered
+                    separator
+                  >
+                    <q-item
+                      v-for="file in itemsDocument"
+                      :key="file.id"
+                      clickable
+                      v-ripple
+                    >
+                      <q-item-section>{{ file.name }}</q-item-section>
+                      <q-item-section avatar>
+                        <div class="row q-col-gutter-md">
+                          <div>
+                            <q-btn
+                              dense
+                              flat
+                              round
+                              size="12px"
+                              color="blue"
+                              icon="mdi-download-outline"
+                              @click="onClickDonwload(file.name)"
+                            >
+                              <q-tooltip>ดาวน์โหลดไฟล์</q-tooltip>
+                            </q-btn>
+                          </div>
+                          <div>
+                            <q-btn
+                              dense
+                              flat
+                              round
+                              size="12px"
+                              color="red"
+                              icon="mdi-delete-outline"
+                              @click="onClickDeleteFile(file.name)"
+                              ><q-tooltip>ลบไฟล์</q-tooltip></q-btn
+                            >
+                          </div>
+                        </div>
+                      </q-item-section>
+                    </q-item>
+                  </q-list>
+                </div>
+
+                <div class="col-12" v-else>
+                  <q-card class="q-pa-md" bordered>
+                    ไม่มีรายการเอกสาร
+                  </q-card>
+                </div>
+              </div>
+            </q-card>
           </div>
         </div>
       </q-card-section>
-      <q-separator />
+      <q-separator/>
+      <q-card-section class="text-right">
+        <q-btn label="บันทึก" color="secondary" @click="onClickSubmit">
+          <q-tooltip>บันทึกข้อมูล</q-tooltip>
+        </q-btn>
+      </q-card-section>
+
+      
     </q-card>
   </q-dialog>
 </template>
diff --git a/src/modules/13_salary/components/SalaryChart/DialogFormRate.vue b/src/modules/13_salary/components/SalaryChart/DialogFormRate.vue
index 24bef00a4..48753596b 100644
--- a/src/modules/13_salary/components/SalaryChart/DialogFormRate.vue
+++ b/src/modules/13_salary/components/SalaryChart/DialogFormRate.vue
@@ -210,8 +210,8 @@ watch(
       <Header :tittle="title" :close="closeDialog" />
       <q-separator />
 
-      <q-card-section class="q-pt-none">
-        <div class="row q-gutter-sm q-pa-md">
+      <q-card-section >
+        <div class="row q-gutter-sm q-pa-sm">
           <div class="row col-xs-12 col-md-12 q-col-gutter-sm">
             <div class="col-6">
               <q-input
diff --git a/src/modules/13_salary/views/salaryChart.vue b/src/modules/13_salary/views/salaryChart.vue
index abe3d7983..739311e65 100644
--- a/src/modules/13_salary/views/salaryChart.vue
+++ b/src/modules/13_salary/views/salaryChart.vue
@@ -75,7 +75,7 @@ const columns = ref<QTableProps["columns"]>([
   },
   {
     name: "isActive",
-    align: "left",
+    align: "center",
     label: "สถานะการใช้งาน",
     sortable: true,
     field: "isActive",
@@ -224,7 +224,7 @@ async function filterFn(page: number) {
   </div>
 
   <q-card flat bordered class="q-pa-md">
-    <q-toolbar class="text-primary q-gutter-sm" style="padding: 0px">
+    <div class="col-12 row text-primary">
       <q-btn flat round dense icon="add" @click="onClickSalary('add', null)">
         <q-tooltip>เพิ่มผังบัญชีเงินเดือน </q-tooltip>
       </q-btn>
@@ -257,11 +257,11 @@ async function filterFn(page: number) {
         option-value="name"
         options-cover
         style="min-width: 150px"
-        class="col-xs-12 col-sm-3 col-md-2"
+        class="col-xs-12 col-sm-3 col-md-2 q-ml-sm"
       />
-    </q-toolbar>
+    </div>
 
-    <div class="col-12 q-pa-sm">
+    <div class="col-12 q-pt-sm">
       <d-table
         ref="table"
         :columns="columns"
diff --git a/src/modules/13_salary/views/salaryRate.vue b/src/modules/13_salary/views/salaryRate.vue
index 56988af7f..4bfd32b29 100644
--- a/src/modules/13_salary/views/salaryRate.vue
+++ b/src/modules/13_salary/views/salaryRate.vue
@@ -218,154 +218,149 @@ watch([() => formQuery.page, () => formQuery.pageSize], async () => {
     </div>
   </div>
   <q-card flat bordered class="q-pa-md">
-    <q-card bordered class="row col-12" style="border: 1px solid #d6dee1">
-      <div class="col-12 text-weight-medium bg-grey-1 q-py-sm q-px-md">
-        <q-toolbar class="text-primary q-gutter-sm" style="padding: 0px">
-          <q-btn
-            flat
-            round
-            dense
-            icon="add"
-            color="primary"
-            @click="onClickSalaryRate('add', null)"
-          >
-            <q-tooltip>เพิ่มอัตราเงินเดือน </q-tooltip>
-          </q-btn>
-          <q-space />
-          <!-- <q-btn outline label="พิมพ์เอกสาร" icon="print" color="green" /> -->
-          <q-btn outline label="ดาวน์โหลด" icon="download" color="blue" @click="clickDownload()"/>
-        </q-toolbar>
-      </div>
-      <div class="col-12"><q-separator /></div>
+    <div class="col-12 row">
+      <q-btn
+        flat
+        round
+        dense
+        icon="add"
+        color="primary"
+        @click="onClickSalaryRate('add', null)"
+      >
+        <q-tooltip>เพิ่มอัตราเงินเดือน </q-tooltip>
+      </q-btn>
+      <q-space />
+      <!-- <q-btn outline label="พิมพ์เอกสาร" icon="print" color="green" /> -->
+      <q-btn outline label="ดาวน์โหลด" icon="download" color="blue" @click="clickDownload()"/>
+    </div>
 
-      <div class="col-12 q-pa-md">
-        <d-table
-          ref="table"
-          :columns="columns"
-          :rows="rows"
-          row-key="id"
-          flat
-          bordered
-          :paging="true"
-          dense
-          :rows-per-page-options="[10, 25, 50, 100]"
-          @update:pagination="updatePagination"
-        >
-          <template v-slot:header="props">
-            <q-tr :props="props">
-              <q-th v-for="col in props.cols" :key="col.name" :props="props">
-                <span class="text-weight-medium">{{ col.label }}</span>
-              </q-th>
-              <q-th auto-width></q-th>
-            </q-tr>
-          </template>
-          <template v-slot:body="props">
-            <q-tr :props="props" class="cursor-pointer">
-              <q-td v-for="col in props.cols" :key="col.name" :props="props">
-                <div v-if="col.name == 'no'">
-                  {{
-                    (formQuery.page - 1) * formQuery.pageSize +
-                    props.rowIndex +
-                    1
-                  }}
-                </div>
-                <div v-else-if="col.name === 'salaryHalf'">
-                  {{
-                    props.row.salaryHalfSpecial
-                      ? col.value.toLocaleString() +
-                        " " +
-                        `(${props.row.salaryHalfSpecial.toLocaleString()})`
-                      : col.value.toLocaleString()
-                  }}
-                </div>
+    <div class="col-12 q-pt-sm">
+      <d-table
+        ref="table"
+        :columns="columns"
+        :rows="rows"
+        row-key="id"
+        flat
+        bordered
+        :paging="true"
+        dense
+        :rows-per-page-options="[10, 25, 50, 100]"
+        @update:pagination="updatePagination"
+      >
+        <template v-slot:header="props">
+          <q-tr :props="props">
+            <q-th v-for="col in props.cols" :key="col.name" :props="props">
+              <span class="text-weight-medium">{{ col.label }}</span>
+            </q-th>
+            <q-th auto-width></q-th>
+          </q-tr>
+        </template>
+        <template v-slot:body="props">
+          <q-tr :props="props" class="cursor-pointer">
+            <q-td v-for="col in props.cols" :key="col.name" :props="props">
+              <div v-if="col.name == 'no'">
+                {{
+                  (formQuery.page - 1) * formQuery.pageSize +
+                  props.rowIndex +
+                  1
+                }}
+              </div>
+              <div v-else-if="col.name === 'salaryHalf'">
+                {{
+                  props.row.salaryHalfSpecial
+                    ? col.value.toLocaleString() +
+                      " " +
+                      `(${props.row.salaryHalfSpecial.toLocaleString()})`
+                    : col.value.toLocaleString()
+                }}
+              </div>
 
-                <div v-else-if="col.name === 'salaryFull'">
-                  {{
-                    props.row.salaryFullSpecial
-                      ? col.value.toLocaleString() +
-                        " " +
-                        `(${props.row.salaryFullSpecial.toLocaleString()})`
-                      : col.value.toLocaleString()
-                  }}
-                </div>
+              <div v-else-if="col.name === 'salaryFull'">
+                {{
+                  props.row.salaryFullSpecial
+                    ? col.value.toLocaleString() +
+                      " " +
+                      `(${props.row.salaryFullSpecial.toLocaleString()})`
+                    : col.value.toLocaleString()
+                }}
+              </div>
 
-                <div v-else-if="col.name === 'salaryFullHalf'">
-                  {{
-                    props.row.salaryFullHalfSpecial
-                      ? col.value.toLocaleString() +
-                        " " +
-                        `(${props.row.salaryFullHalfSpecial.toLocaleString()})`
-                      : col.value.toLocaleString()
-                  }}
-                </div>
-                <div v-else-if="col.name === 'isNext'">
-                  <q-icon
-                    v-if="col.value"
-                    name="done"
-                    color="primary"
-                    size="24px"
-                  />
-                </div>
+              <div v-else-if="col.name === 'salaryFullHalf'">
+                {{
+                  props.row.salaryFullHalfSpecial
+                    ? col.value.toLocaleString() +
+                      " " +
+                      `(${props.row.salaryFullHalfSpecial.toLocaleString()})`
+                    : col.value.toLocaleString()
+                }}
+              </div>
+              <div v-else-if="col.name === 'isNext'">
+                <q-icon
+                  v-if="col.value"
+                  name="done"
+                  color="primary"
+                  size="24px"
+                />
+              </div>
 
-                <div v-else>
-                  {{ col.value ? col.value.toLocaleString() : "-" }}
-                </div>
-              </q-td>
-              <q-td>
-                <q-btn
-                  flat
-                  dense
-                  icon="mdi-dots-vertical"
-                  class="q-pa-none q-ml-xs"
-                  color="grey-13"
-                  size="12px"
-                >
-                  <q-menu>
-                    <q-list dense style="min-width: 150px">
-                      <q-item
-                        v-for="(item, index) in itemMenu"
-                        :key="index"
-                        clickable
-                        v-close-popup
-                        @click.stop="
-                          item.type === 'edit'
-                            ? onClickSalaryRate('edit', props.row)
-                            : item.type === 'delete'
-                            ? onClickDelete(props.row.id)
-                            : null
-                        "
-                      >
-                        <q-item-section>
-                          <div class="row items-center">
-                            <q-icon
-                              :color="item.color"
-                              size="17px"
-                              :name="item.icon"
-                            />
-                            <div class="q-pl-md">{{ item.label }}</div>
-                          </div>
-                        </q-item-section>
-                      </q-item>
-                    </q-list>
-                  </q-menu>
-                </q-btn>
-              </q-td>
-            </q-tr>
-          </template>
-          <template v-slot:pagination="scope">
-            <q-pagination
-              v-model="formQuery.page"
-              active-color="primary"
-              color="dark"
-              :max="totalRow"
-              size="sm"
-              boundary-links
-              direction-links
-            ></q-pagination>
-          </template>
-        </d-table>
-      </div>
-    </q-card>
+              <div v-else>
+                {{ col.value ? col.value.toLocaleString() : "-" }}
+              </div>
+            </q-td>
+            <q-td>
+              <q-btn
+                flat
+                dense
+                icon="mdi-dots-vertical"
+                class="q-pa-none q-ml-xs"
+                color="grey-13"
+                size="12px"
+              >
+                <q-menu>
+                  <q-list dense style="min-width: 150px">
+                    <q-item
+                      v-for="(item, index) in itemMenu"
+                      :key="index"
+                      clickable
+                      v-close-popup
+                      @click.stop="
+                        item.type === 'edit'
+                          ? onClickSalaryRate('edit', props.row)
+                          : item.type === 'delete'
+                          ? onClickDelete(props.row.id)
+                          : null
+                      "
+                    >
+                      <q-item-section>
+                        <div class="row items-center">
+                          <q-icon
+                            :color="item.color"
+                            size="17px"
+                            :name="item.icon"
+                          />
+                          <div class="q-pl-md">{{ item.label }}</div>
+                        </div>
+                      </q-item-section>
+                    </q-item>
+                  </q-list>
+                </q-menu>
+              </q-btn>
+            </q-td>
+          </q-tr>
+        </template>
+        <template v-slot:pagination="scope">
+          <q-pagination
+            v-model="formQuery.page"
+            active-color="primary"
+            color="dark"
+            :max="totalRow"
+            size="sm"
+            boundary-links
+            direction-links
+          ></q-pagination>
+        </template>
+      </d-table>
+    </div>
   </q-card>
 
   <DialogFormRate