From 45df38b0df7216465f77ce31bcb3509d142ecb1d Mon Sep 17 00:00:00 2001
From: oat_dev <nattapon@frappet.com>
Date: Tue, 2 Apr 2024 12:03:53 +0700
Subject: [PATCH] =?UTF-8?q?=E0=B8=97=E0=B8=B0=E0=B9=80=E0=B8=9A=E0=B8=B5?=
 =?UTF-8?q?=E0=B8=A2=E0=B8=99=E0=B8=9B=E0=B8=A3=E0=B8=B0=E0=B8=A7=E0=B8=B1?=
 =?UTF-8?q?=E0=B8=95=E0=B8=B4:=20=E0=B8=9B=E0=B8=A3=E0=B8=B1=E0=B8=9A?=
 =?UTF-8?q?=E0=B9=81=E0=B8=97=E0=B9=87=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/?=
 =?UTF-8?q?=E0=B8=84=E0=B9=88=E0=B8=B2=E0=B8=88=E0=B9=89=E0=B8=B2=E0=B8=87?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../detail/Salary/01_PositionSalary.vue       | 579 +++++++++---------
 .../Salary/01_PositionSalaryHistory.vue       | 160 ++---
 .../detail/Salary/02_NotReceiveSalary.vue     | 332 +++++-----
 .../Salary/02_NotReceiveSalaryHistory.vue     | 158 ++---
 4 files changed, 635 insertions(+), 594 deletions(-)

diff --git a/src/modules/04_registryNew/components/detail/Salary/01_PositionSalary.vue b/src/modules/04_registryNew/components/detail/Salary/01_PositionSalary.vue
index 066dd2e15..9d4946df6 100644
--- a/src/modules/04_registryNew/components/detail/Salary/01_PositionSalary.vue
+++ b/src/modules/04_registryNew/components/detail/Salary/01_PositionSalary.vue
@@ -521,136 +521,135 @@ onMounted(() => {
         </q-td>
       </q-tr>
     </template>
-    <template v-slot:pagination="scope">
-      <q-pagination
-        v-model="formFilter.page"
-        active-color="primary"
-        color="dark"
-        :max="Number(maxPage)"
-        :max-pages="5"
-        size="sm"
-        boundary-links
-        direction-links
-      ></q-pagination>
-    </template>
   </d-table>
 
-  <q-dialog v-model="modalDialogSalary" persistent full-width>
-    <q-card>
+  <q-dialog v-model="modalDialogSalary" persistent>
+    <q-layout
+      view="lHh lpr lFf"
+      container
+      style="height: 80vh; min-width: 80%"
+      class="bg-white"
+    >
       <q-form greedy @submit.prevent @validation-success="onSubmit">
-        <DialogHeader
-          :tittle="
-            isStatusEdit ? 'แก้ไขตำแหน่งเงินเดือน' : 'เพิ่มตำแหน่งเงินเดือน'
-          "
-          :close="onClickCloseDialog"
-        />
-        <q-separator />
-        <q-card-section class="q-pa-md bg-grey-1">
-          <div class="row col-12 q-col-gutter-sm">
-            <q-card flat bordered class="row fit q-pa-sm q-col-gutter-sm">
-              <div class="col-xs-6 col-sm-6 col-md-6">
-                <datepicker
-                  v-model="formDataSalary.date"
-                  :locale="'th'"
-                  autoApply
-                  :enableTimePicker="false"
-                  week-start="0"
-                >
-                  <template #year="{ year }">{{ year + 543 }}</template>
-                  <template #year-overlay-value="{ value }">{{
-                    parseInt(value + 543)
-                  }}</template>
-                  <template #trigger>
-                    <q-input
-                      outlined
-                      dense
-                      borderless
-                      :model-value="date2Thai(formDataSalary.date)"
-                      :rules="[
+        <q-header>
+          <q-toolbar>
+            <DialogHeader
+              :tittle="
+                isStatusEdit ? 'แก้ไขตำแหน่งเงินเดือน' : 'เพิ่มตำแหน่งเงินเดือน'
+              "
+              :close="onClickCloseDialog"
+            />
+          </q-toolbar>
+          <q-separator color="grey-4" />
+        </q-header>
+
+        <q-page-container>
+          <q-page class="q-pa-md">
+            <div class="row col-12 q-col-gutter-sm">
+              <q-card flat bordered class="row fit q-pa-sm q-col-gutter-sm">
+                <div class="col-xs-6 col-sm-6 col-md-6">
+                  <datepicker
+                    v-model="formDataSalary.date"
+                    :locale="'th'"
+                    autoApply
+                    :enableTimePicker="false"
+                    week-start="0"
+                  >
+                    <template #year="{ year }">{{ year + 543 }}</template>
+                    <template #year-overlay-value="{ value }">{{
+                      parseInt(value + 543)
+                    }}</template>
+                    <template #trigger>
+                      <q-input
+                        outlined
+                        dense
+                        borderless
+                        :model-value="date2Thai(formDataSalary.date)"
+                        :rules="[
                             (val: string) =>
                               !!val ||
                               `${'กรุณาเลือก วัน/เดือน/ปี'}`,
                           ]"
-                      :label="`${'วัน/เดือน/ปี'}`"
-                      hide-bottom-space
-                    >
-                      <template v-slot:prepend>
-                        <q-icon
-                          name="event"
-                          color="primary"
-                          class="cursor-pointer"
-                        >
-                        </q-icon>
-                      </template>
-                    </q-input>
-                  </template>
-                </datepicker>
-              </div>
+                        :label="`${'วัน/เดือน/ปี'}`"
+                        hide-bottom-space
+                      >
+                        <template v-slot:prepend>
+                          <q-icon
+                            name="event"
+                            color="primary"
+                            class="cursor-pointer"
+                          >
+                          </q-icon>
+                        </template>
+                      </q-input>
+                    </template>
+                  </datepicker>
+                </div>
 
-              <div class="col-xs-6 col-sm-6 col-md-6">
-                <q-input
-                  ref="posNoRef"
-                  outlined
-                  dense
-                  lazy-rules
-                  borderless
-                  v-model="formDataSalary.posNo"
-                  hide-bottom-space
-                  :label="`${'เลขที่ตำแหน่ง'}`"
-                  :rules="[(val: string) => !!val || `${'กรุณากรอกเลขที่ตำแหน่ง'}`]"
-                >
-                </q-input>
-              </div>
+                <div class="col-xs-6 col-sm-6 col-md-6">
+                  <q-input
+                    ref="posNoRef"
+                    outlined
+                    dense
+                    lazy-rules
+                    borderless
+                    v-model="formDataSalary.posNo"
+                    hide-bottom-space
+                    :label="`${'เลขที่ตำแหน่ง'}`"
+                    :rules="[(val: string) => !!val || `${'กรุณากรอกเลขที่ตำแหน่ง'}`]"
+                  >
+                  </q-input>
+                </div>
 
-              <div class="col-xs-12 col-sm-12 col-md-12">
-                <q-select
-                  ref="templatePosRef"
-                  outlined
-                  dense
-                  lazy-rules
-                  borderless
-                  clearable
-                  v-model="formDataSalary.templatePos"
-                  :label="`${'ต้นแบบ (template) ตำแหน่ง'}`"
-                  option-label="name"
-                  :options="posNoOptions"
-                  option-value="name"
-                  hide-bottom-space
-                  emit-value
-                  use-input
-                  input-debounce="0"
-                  @update:modelValue="updatePos"
-                  @filter="(inputValue: any,
+                <div class="col-xs-12 col-sm-12 col-md-12">
+                  <q-select
+                    ref="templatePosRef"
+                    outlined
+                    dense
+                    lazy-rules
+                    borderless
+                    clearable
+                    v-model="formDataSalary.templatePos"
+                    :label="`${'ต้นแบบ (template) ตำแหน่ง'}`"
+                    option-label="name"
+                    :options="posNoOptions"
+                    option-value="name"
+                    hide-bottom-space
+                    emit-value
+                    use-input
+                    input-debounce="0"
+                    @update:modelValue="updatePos"
+                    @filter="(inputValue: any,
                         doneFn: Function) => filterSelector(inputValue, doneFn, 'pos'
                         )"
-                />
-              </div>
+                  />
+                </div>
 
-              <div class="col-xs-12 col-sm-12 col-md-12">
-                <q-input
-                  ref="positionRef"
-                  outlined
-                  dense
-                  lazy-rules
-                  borderless
-                  v-model="formDataSalary.position"
-                  :label="`${'ตำแหน่ง'}`"
-                  type="textarea"
-                  hide-bottom-space
-                  :rules="[(val: string) => !!val || `${'กรุณากรอกตำแหน่ง'}`]"
-                />
-              </div>
+                <div class="col-xs-12 col-sm-12 col-md-12">
+                  <q-input
+                    ref="positionRef"
+                    outlined
+                    dense
+                    lazy-rules
+                    borderless
+                    v-model="formDataSalary.position"
+                    :label="`${'ตำแหน่ง'}`"
+                    type="textarea"
+                    hide-bottom-space
+                    :rules="[(val: string) => !!val || `${'กรุณากรอกตำแหน่ง'}`]"
+                  />
+                </div>
 
-              <div class="col-xs-6 col-sm-6 col-md-4">
-                <q-input
-                  outlined
-                  dense
-                  lazy-rules
-                  v-model="formDataSalary.positionLine"
-                  hide-bottom-space
-                  :label="`${'สายงาน'}`"
-                />
-                <!-- <q-select
+                <div class="col-xs-6 col-sm-6 col-md-4">
+                  <q-input
+                    outlined
+                    dense
+                    lazy-rules
+                    v-model="formDataSalary.positionLine"
+                    hide-bottom-space
+                    :label="`${'สายงาน'}`"
+                  />
+                  <!-- <q-select
                   outlined
                   dense
                   lazy-rules
@@ -669,187 +668,201 @@ onMounted(() => {
                         doneFn: Function) => filterSelector(inputValue, doneFn, 'positionLine'
                         )"
                 /> -->
-              </div>
+                </div>
 
-              <div class="col-xs-6 col-sm-6 col-md-4">
-                <q-input
-                  outlined
-                  dense
-                  lazy-rules
-                  v-model="formDataSalary.positionPathSide"
-                  hide-bottom-space
-                  :label="`${'ด้าน/สาขา'}`"
-                />
-              </div>
-              <div class="col-xs-6 col-sm-6 col-md-4">
-                <q-input
-                  outlined
-                  dense
-                  lazy-rules
-                  borderless
-                  v-model="formDataSalary.positionExecutive"
-                  hide-bottom-space
-                  :label="`${'ตำแหน่งทางการบริหาร'}`"
-                >
-                </q-input>
-              </div>
+                <div class="col-xs-6 col-sm-6 col-md-4">
+                  <q-input
+                    outlined
+                    dense
+                    lazy-rules
+                    v-model="formDataSalary.positionPathSide"
+                    hide-bottom-space
+                    :label="`${'ด้าน/สาขา'}`"
+                  />
+                </div>
+                <div class="col-xs-6 col-sm-6 col-md-4">
+                  <q-input
+                    outlined
+                    dense
+                    lazy-rules
+                    borderless
+                    v-model="formDataSalary.positionExecutive"
+                    hide-bottom-space
+                    :label="`${'ตำแหน่งทางการบริหาร'}`"
+                  >
+                  </q-input>
+                </div>
 
-              <div class="col-xs-6 col-sm-6 col-md-4">
-                <q-select
-                  ref="positionType Ref"
-                  outlined
-                  dense
-                  lazy-rules
-                  borderless
-                  v-model="formDataSalary.positionType"
-                  :label="`${'ตำแหน่งประเภท'}`"
-                  emit-value
-                  map-options
-                  option-label="name"
-                  :options="posTypeOptions"
-                  option-value="name"
-                  hide-bottom-space
-                  use-input
-                  input-debounce="0"
-                  @update:model-value="updateSelectType"
-                  :rules="[(val: string) => !!val || `${'กรุณาเลือกตำแหน่งประเภท'}`]"
-                  @filter="(inputValue: any,
+                <div class="col-xs-6 col-sm-6 col-md-4">
+                  <q-select
+                    ref="positionType Ref"
+                    outlined
+                    dense
+                    lazy-rules
+                    borderless
+                    v-model="formDataSalary.positionType"
+                    :label="`${'ตำแหน่งประเภท'}`"
+                    emit-value
+                    map-options
+                    option-label="name"
+                    :options="posTypeOptions"
+                    option-value="name"
+                    hide-bottom-space
+                    use-input
+                    input-debounce="0"
+                    @update:model-value="updateSelectType"
+                    :rules="[(val: string) => !!val || `${'กรุณาเลือกตำแหน่งประเภท'}`]"
+                    @filter="(inputValue: any,
                         doneFn: Function) => filterSelector(inputValue, doneFn, 'posType'
                         )"
-                />
-              </div>
+                  />
+                </div>
 
-              <div class="col-xs-6 col-sm-6 col-md-4">
-                <q-select
-                  ref="positionLevel Ref"
-                  outlined
-                  dense
-                  lazy-rules
-                  borderless
-                  v-model="formDataSalary.positionLevel"
-                  :rules="[(val: string) => !!val || `${'กรุณาเลือกระดับตำแหน่ง'}`]"
-                  :label="`${'ระดับตำแหน่ง'}`"
-                  emit-value
-                  map-options
-                  option-label="name"
-                  :options="posLevelOption"
-                  option-value="name"
-                  hide-bottom-space
-                  use-input
-                  input-debounce="0"
-                  @filter="(inputValue: any,
+                <div class="col-xs-6 col-sm-6 col-md-4">
+                  <q-select
+                    ref="positionLevel Ref"
+                    outlined
+                    dense
+                    lazy-rules
+                    borderless
+                    v-model="formDataSalary.positionLevel"
+                    :rules="[(val: string) => !!val || `${'กรุณาเลือกระดับตำแหน่ง'}`]"
+                    :label="`${'ระดับตำแหน่ง'}`"
+                    emit-value
+                    map-options
+                    option-label="name"
+                    :options="posLevelOption"
+                    option-value="name"
+                    hide-bottom-space
+                    use-input
+                    input-debounce="0"
+                    @filter="(inputValue: any,
                           doneFn: Function) => filterSelector(inputValue, doneFn, 'posLevel'
                           )"
-                />
-              </div>
-              <div class="col-md-4"></div>
-              <div class="col-xs-6 col-sm-6 col-md-4">
-                <q-input
-                  ref="salaryRef"
-                  dense
-                  outlined
-                  v-model="formDataSalary.salary"
-                  label="เงินเดือน"
-                  mask="###,###,###,###"
-                  reverse-fill-mask
-                  :rules="[(val) => !!val || `${'กรุณากรอกเงินเดือน'}`]"
-                  lazy-rules
-                  hide-bottom-space
-                />
-              </div>
+                  />
+                </div>
+                <div class="col-md-4"></div>
+                <div class="col-xs-6 col-sm-6 col-md-4">
+                  <q-input
+                    ref="salaryRef"
+                    dense
+                    outlined
+                    v-model="formDataSalary.salary"
+                    label="เงินเดือน"
+                    mask="###,###,###,###"
+                    reverse-fill-mask
+                    :rules="[(val) => !!val || `${'กรุณากรอกเงินเดือน'}`]"
+                    lazy-rules
+                    hide-bottom-space
+                  />
+                </div>
 
-              <div class="col-xs-6 col-sm-6 col-md-4">
-                <q-input
-                  ref="amountRef"
-                  dense
-                  outlined
-                  v-model="formDataSalary.salaryPos"
-                  :rules="[(val) => !!val || `${'กรุณากรอกเงินประจำตำแหน่ง'}`]"
-                  label="เงินประจำตำแหน่ง"
-                  mask="###,###,###,###"
-                  reverse-fill-mask
-                  lazy-rules
-                  hide-bottom-space
-                />
-              </div>
-              <div class="col-xs-6 col-sm-6 col-md-4">
-                <q-input
-                  ref="amountRef"
-                  dense
-                  outlined
-                  v-model="formDataSalary.salaryCompensation"
-                  label="เงินค่าตอบแทนรายเดือน"
-                  mask="###,###,###,###"
-                  reverse-fill-mask
-                  lazy-rules
-                  hide-bottom-space
-                />
-              </div>
+                <div class="col-xs-6 col-sm-6 col-md-4">
+                  <q-input
+                    ref="amountRef"
+                    dense
+                    outlined
+                    v-model="formDataSalary.salaryPos"
+                    :rules="[
+                      (val) => !!val || `${'กรุณากรอกเงินประจำตำแหน่ง'}`,
+                    ]"
+                    label="เงินประจำตำแหน่ง"
+                    mask="###,###,###,###"
+                    reverse-fill-mask
+                    lazy-rules
+                    hide-bottom-space
+                  />
+                </div>
+                <div class="col-xs-6 col-sm-6 col-md-4">
+                  <q-input
+                    ref="amountRef"
+                    dense
+                    outlined
+                    v-model="formDataSalary.salaryCompensation"
+                    label="เงินค่าตอบแทนรายเดือน"
+                    mask="###,###,###,###"
+                    reverse-fill-mask
+                    lazy-rules
+                    hide-bottom-space
+                  />
+                </div>
 
-              <div class="col-xs-6 col-sm-6 col-md-12">
-                <q-input
-                  outlined
-                  dense
-                  lazy-rules
-                  borderless
-                  v-model="formDataSalary.refCommandNo"
-                  hide-bottom-space
-                  :label="`${'เลขที่คำสั่ง'}`"
-                  mask="#####################"
-                >
-                  <!-- :rules="[(val: string) => !!val || `${'กรุณากรอกเลขที่คำสั่ง'}`]" -->
-                </q-input>
-              </div>
+                <div class="col-xs-6 col-sm-6 col-md-12">
+                  <q-input
+                    outlined
+                    dense
+                    lazy-rules
+                    borderless
+                    v-model="formDataSalary.refCommandNo"
+                    hide-bottom-space
+                    :label="`${'เลขที่คำสั่ง'}`"
+                    mask="#####################"
+                  >
+                    <!-- :rules="[(val: string) => !!val || `${'กรุณากรอกเลขที่คำสั่ง'}`]" -->
+                  </q-input>
+                </div>
 
-              <div class="col-xs-12 col-sm-12 col-md-12">
-                <q-select
-                  ref="templateDocRef"
-                  outlined
-                  dense
-                  lazy-rules
-                  borderless
-                  clearable
-                  v-model="formDataSalary.templateDoc"
-                  :label="`${'ต้นแบบ (template) เอกสารอ้างอิง'}`"
-                  option-label="name"
-                  :options="docOption"
-                  option-value="name"
-                  emit-value
-                  hide-bottom-space
-                  use-input
-                  input-debounce="0"
-                  @update:modelValue="updateDoc"
-                  @filter="(inputValue: any,
+                <div class="col-xs-12 col-sm-12 col-md-12">
+                  <q-select
+                    ref="templateDocRef"
+                    outlined
+                    dense
+                    lazy-rules
+                    borderless
+                    clearable
+                    v-model="formDataSalary.templateDoc"
+                    :label="`${'ต้นแบบ (template) เอกสารอ้างอิง'}`"
+                    option-label="name"
+                    :options="docOption"
+                    option-value="name"
+                    emit-value
+                    hide-bottom-space
+                    use-input
+                    input-debounce="0"
+                    @update:modelValue="updateDoc"
+                    @filter="(inputValue: any,
                           doneFn: Function) => filterSelector(inputValue, doneFn, 'doc'
                           )"
-                />
-              </div>
+                  />
+                </div>
 
-              <div class="col-xs-12 col-sm-12 col-md-12">
-                <q-input
-                  ref="docRef"
-                  outlined
-                  dense
-                  lazy-rules
-                  borderless
-                  v-model="formDataSalary.doc"
-                  :label="`${'เอกสารอ้างอิง'}`"
-                  type="textarea"
-                  hide-bottom-space
-                  :rules="[(val: number) => !!val  || `${'กรุณากรอกเอกสารอ้างอิง'}`]"
-                />
-              </div>
-            </q-card>
-          </div>
-        </q-card-section>
+                <div class="col-xs-12 col-sm-12 col-md-12">
+                  <q-input
+                    ref="docRef"
+                    outlined
+                    dense
+                    lazy-rules
+                    borderless
+                    v-model="formDataSalary.doc"
+                    :label="`${'เอกสารอ้างอิง'}`"
+                    type="textarea"
+                    hide-bottom-space
+                    :rules="[(val: number) => !!val  || `${'กรุณากรอกเอกสารอ้างอิง'}`]"
+                  />
+                </div>
+              </q-card>
+            </div>
+          </q-page>
+        </q-page-container>
         <q-separator />
-        <q-card-section align="right">
-          <q-btn label="บันทึก" type="submit" color="secondary">
-            <q-tooltip>บันทึกข้อมูล</q-tooltip></q-btn
-          >
-        </q-card-section>
+        <q-footer>
+          <q-separator color="grey-4" />
+          <q-toolbar class="fit row wrap justify-end items-start content-start">
+            <q-btn
+              dense
+              unelevated
+              label="บันทึก"
+              id="onSubmit"
+              type="submit"
+              color="public"
+              class="q-px-md"
+            >
+              <q-tooltip>บันทึกข้อมูล</q-tooltip>
+            </q-btn>
+          </q-toolbar>
+        </q-footer>
       </q-form>
-    </q-card>
+    </q-layout>
   </q-dialog>
 
   <DialogHistory v-model:modal="modalHistory" v-model:salaryId="salaryId" />
diff --git a/src/modules/04_registryNew/components/detail/Salary/01_PositionSalaryHistory.vue b/src/modules/04_registryNew/components/detail/Salary/01_PositionSalaryHistory.vue
index 06c4f0719..55866d91c 100644
--- a/src/modules/04_registryNew/components/detail/Salary/01_PositionSalaryHistory.vue
+++ b/src/modules/04_registryNew/components/detail/Salary/01_PositionSalaryHistory.vue
@@ -247,83 +247,95 @@ watch(
 );
 </script>
 <template>
-  <q-dialog v-model="modal" persistent full-width>
-    <q-card>
-      <DialogHeader
-        :tittle="'ประวัติแก้ไขตำแหน่ง/เงินเดือน'"
-        :close="closeDialog"
-      />
-      <q-separator />
-      <q-card-section class="q-pa-sm">
-        <q-toolbar style="padding: 0px" class="text-primary">
-          <q-space />
-          <q-input
-            dense
-            outlined
-            v-model="keyword"
-            label="ค้นหา"
-            class="q-mr-sm"
-          >
-            <template v-slot:append>
-              <q-icon v-if="keyword === ''" name="search" />
-              <q-icon
-                v-else
-                name="clear"
-                class="cursor-pointer"
-                @click="keyword = ''"
-              />
-            </template>
-          </q-input>
-
-          <q-select
-            v-model="visibleColumns"
-            multiple
-            outlined
-            dense
-            options-dense
-            :display-value="$q.lang.table.columns"
-            emit-value
-            map-options
-            :options="columns"
-            option-value="name"
-            options-cover
-            style="min-width: 150px"
+  <q-dialog v-model="modal" persistent>
+    <q-layout
+      view="lHh lpr lFf"
+      container
+      style="height: 80vh; min-width: 80%"
+      class="bg-white"
+    >
+      <q-header>
+        <q-toolbar>
+          <DialogHeader
+            :tittle="'ประวัติแก้ไขตำแหน่ง/เงินเดือน'"
+            :close="closeDialog"
           />
         </q-toolbar>
+        <q-separator color="grey-4" />
+      </q-header>
 
-        <d-table
-          ref="table"
-          row-key="id"
-          flat
-          bordered
-          dense
-          :filter="keyword"
-          :columns="columns"
-          :rows="rows"
-          :paging="true"
-          v-model:pagination="pagination"
-          :rows-per-page-options="[10, 20, 50, 100]"
-          :visible-columns="visibleColumns"
-        >
-          <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-tr>
-          </template>
-          <template v-slot:body="props">
-            <q-tr :props="props" class="cursor-pointer">
-              <q-td v-for="col in props.cols">
-                <div class="table_ellipsis">
-                  {{ col.value ? col.value : "-" }}
-                </div>
-              </q-td>
-            </q-tr>
-          </template>
-        </d-table>
-      </q-card-section>
-    </q-card>
+      <q-page-container>
+        <q-page class="q-pa-md">
+          <q-toolbar style="padding: 0px" class="text-primary">
+            <q-space />
+            <q-input
+              dense
+              outlined
+              v-model="keyword"
+              label="ค้นหา"
+              class="q-mr-sm"
+            >
+              <template v-slot:append>
+                <q-icon v-if="keyword === ''" name="search" />
+                <q-icon
+                  v-else
+                  name="clear"
+                  class="cursor-pointer"
+                  @click="keyword = ''"
+                />
+              </template>
+            </q-input>
+
+            <q-select
+              v-model="visibleColumns"
+              multiple
+              outlined
+              dense
+              options-dense
+              :display-value="$q.lang.table.columns"
+              emit-value
+              map-options
+              :options="columns"
+              option-value="name"
+              options-cover
+              style="min-width: 150px"
+            />
+          </q-toolbar>
+
+          <d-table
+            ref="table"
+            row-key="id"
+            flat
+            bordered
+            dense
+            :filter="keyword"
+            :columns="columns"
+            :rows="rows"
+            :paging="true"
+            v-model:pagination="pagination"
+            :rows-per-page-options="[10, 20, 50, 100]"
+            :visible-columns="visibleColumns"
+          >
+            <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-tr>
+            </template>
+            <template v-slot:body="props">
+              <q-tr :props="props" class="cursor-pointer">
+                <q-td v-for="col in props.cols">
+                  <div class="table_ellipsis">
+                    {{ col.value ? col.value : "-" }}
+                  </div>
+                </q-td>
+              </q-tr>
+            </template>
+          </d-table>
+        </q-page>
+      </q-page-container>
+    </q-layout>
   </q-dialog>
 </template>
 
diff --git a/src/modules/04_registryNew/components/detail/Salary/02_NotReceiveSalary.vue b/src/modules/04_registryNew/components/detail/Salary/02_NotReceiveSalary.vue
index 4c3621982..bc0d3fbec 100644
--- a/src/modules/04_registryNew/components/detail/Salary/02_NotReceiveSalary.vue
+++ b/src/modules/04_registryNew/components/detail/Salary/02_NotReceiveSalary.vue
@@ -115,8 +115,8 @@ const formFilter = reactive({
 });
 const maxPage = ref<number>(1);
 const pagination = ref({
-  page: formFilter.page,
-  rowsPerPage: formFilter.pageSize,
+  page: 1,
+  rowsPerPage: 10,
 });
 
 function onSubmit() {
@@ -128,14 +128,13 @@ function onSubmit() {
 
 function onClickOpenDialog(StatusEdit: boolean = false, data: any = []) {
   isStatusEdit.value = StatusEdit;
-  modalDialog.value = true;
-
   id.value = StatusEdit ? data.id : "";
   formData.date = StatusEdit ? data.date : null;
   formData.reference = StatusEdit ? data.reference : "";
   formData.detail = StatusEdit ? data.detail : "";
   formData.refCommandNo = StatusEdit ? data.refCommandNo : "";
   formData.refCommandDate = StatusEdit ? data.refCommandDate : null;
+  modalDialog.value = true;
 }
 
 function onClickCloseDialog() {
@@ -414,171 +413,188 @@ onMounted(() => {
         </q-card>
       </div>
     </template>
-    <template v-slot:pagination="scope">
-      <q-pagination
-        v-model="formFilter.page"
-        active-color="primary"
-        color="dark"
-        :max="Number(maxPage)"
-        :max-pages="5"
-        size="sm"
-        boundary-links
-        direction-links
-      ></q-pagination>
-    </template>
   </d-table>
 
   <q-dialog v-model="modalDialog" persistent>
-    <q-card style="width: 600px">
+    <q-layout
+      view="lHh lpr lFf"
+      container
+      style="height: 80vh; min-width: 80%"
+      class="bg-white"
+    >
       <q-form @submit.prevent greedy @validation-success="onSubmit">
-        <DialogHeader
-          tittle="บันทึกวันที่ไม่ได้รับเงินเดือนฯ"
-          :close="onClickCloseDialog"
-        />
-        <q-separator />
-        <q-card-section class="q-pa-sm bg-grey-1">
-          <div class="row col-12 q-col-gutter-sm">
-            <div class="col-xs-12 col-sm-12">
-              <q-card flat bordered class="fit q-pa-sm">
-                <div class="row col-12 q-col-gutter-xs">
-                  <div class="col-xs-6 col-sm-6 col-md-6">
-                    <datepicker
-                      menu-class-name="modalfix"
-                      v-model="formData.date"
-                      :locale="'th'"
-                      autoApply
-                      :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
-                          borderless
-                          class="inputgreen"
-                          :model-value="date2Thai(formData.date)"
-                          :rules="[
-                            (val) => !!val || `${'กรุณาเลือก วัน/เดือน/ปี'}`,
-                          ]"
-                          hide-bottom-space
-                          :label="`${'วัน/เดือน/ปี'}`"
-                        >
-                          <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-6">
-                    <q-input
-                      ref="referenceRef"
-                      outlined
-                      dense
-                      autogrow
-                      lazy-rules
-                      borderless
-                      v-model="formData.reference"
-                      class="inputgreen"
-                      :rules="[(val) => !!val || `${'กรุณากรอกเอกสารอ้างอิง'}`]"
-                      hide-bottom-space
-                      :label="`${'เอกสารอ้างอิง'}`"
-                    />
-                  </div>
-                  <div class="col-12">
-                    <q-input
-                      ref="detailRef"
-                      outlined
-                      dense
-                      autogrow
-                      lazy-rules
-                      borderless
-                      v-model="formData.detail"
-                      class="inputgreen"
-                      :rules="[(val) => !!val || `${'กรุณากรอกรายละเอียด'}`]"
-                      hide-bottom-space
-                      :label="`${'รายละเอียด'}`"
-                    />
-                  </div>
-                  <div class="col-xs-6 col-sm-6 col-md-6">
-                    <q-input
-                      outlined
-                      dense
-                      lazy-rules
-                      borderless
-                      v-model="formData.refCommandNo"
-                      class="inputgreen"
-                      hide-bottom-space
-                      :label="`${'เลขที่คำสั่ง'}`"
-                    >
-                      <template v-slot:append>
-                        <q-icon name="mdi-file" class="cursor-pointer" />
-                      </template>
-                    </q-input>
-                  </div>
-                  <div class="col-xs-6 col-sm-6 col-md-6">
-                    <datepicker
-                      menu-class-name="modalfix"
-                      v-model="formData.refCommandDate"
-                      :locale="'th'"
-                      autoApply
-                      :enableTimePicker="false"
-                      week-start="0"
-                    >
-                      <template #year="{ year }">{{ year + 543 }}</template>
-                      <template #year-overlay-value="{ value }">{{
-                        parseInt(value + 543)
-                      }}</template>
-                      <template #trigger>
-                        <q-input
-                          clearable
-                          outlined
-                          dense
-                          borderless
-                          class="inputgreen"
-                          :model-value="
+        <q-header>
+          <q-toolbar>
+            <DialogHeader
+              :tittle="
+                isStatusEdit
+                  ? 'แก้ไขบันทึกวันที่ไม่ได้รับเงินเดือนฯ'
+                  : 'เพิ่มบันทึกวันที่ไม่ได้รับเงินเดือนฯ'
+              "
+              :close="onClickCloseDialog"
+            />
+          </q-toolbar>
+          <q-separator color="grey-4" />
+        </q-header>
+
+        <q-page-container>
+          <q-page class="q-pa-md">
+            <div class="row col-12 q-col-gutter-sm">
+              <div class="col-xs-12 col-sm-12">
+                <q-card flat bordered class="fit q-pa-sm">
+                  <div class="row col-12 q-col-gutter-xs">
+                    <div class="col-xs-6 col-sm-6 col-md-6">
+                      <datepicker
+                        menu-class-name="modalfix"
+                        v-model="formData.date"
+                        :locale="'th'"
+                        autoApply
+                        :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
+                            borderless
+                            class="inputgreen"
+                            :model-value="date2Thai(formData.date)"
+                            :rules="[
+                              (val) => !!val || `${'กรุณาเลือก วัน/เดือน/ปี'}`,
+                            ]"
+                            hide-bottom-space
+                            :label="`${'วัน/เดือน/ปี'}`"
+                          >
+                            <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-6">
+                      <q-input
+                        ref="referenceRef"
+                        outlined
+                        dense
+                        autogrow
+                        lazy-rules
+                        borderless
+                        v-model="formData.reference"
+                        class="inputgreen"
+                        :rules="[
+                          (val) => !!val || `${'กรุณากรอกเอกสารอ้างอิง'}`,
+                        ]"
+                        hide-bottom-space
+                        :label="`${'เอกสารอ้างอิง'}`"
+                      />
+                    </div>
+                    <div class="col-12">
+                      <q-input
+                        ref="detailRef"
+                        outlined
+                        dense
+                        autogrow
+                        lazy-rules
+                        borderless
+                        v-model="formData.detail"
+                        class="inputgreen"
+                        :rules="[(val) => !!val || `${'กรุณากรอกรายละเอียด'}`]"
+                        hide-bottom-space
+                        :label="`${'รายละเอียด'}`"
+                      />
+                    </div>
+                    <div class="col-xs-6 col-sm-6 col-md-6">
+                      <q-input
+                        outlined
+                        dense
+                        lazy-rules
+                        borderless
+                        v-model="formData.refCommandNo"
+                        class="inputgreen"
+                        hide-bottom-space
+                        :label="`${'เลขที่คำสั่ง'}`"
+                      >
+                        <template v-slot:append>
+                          <q-icon name="mdi-file" class="cursor-pointer" />
+                        </template>
+                      </q-input>
+                    </div>
+                    <div class="col-xs-6 col-sm-6 col-md-6">
+                      <datepicker
+                        menu-class-name="modalfix"
+                        v-model="formData.refCommandDate"
+                        :locale="'th'"
+                        autoApply
+                        :enableTimePicker="false"
+                        week-start="0"
+                      >
+                        <template #year="{ year }">{{ year + 543 }}</template>
+                        <template #year-overlay-value="{ value }">{{
+                          parseInt(value + 543)
+                        }}</template>
+                        <template #trigger>
+                          <q-input
+                            clearable
+                            outlined
+                            dense
+                            borderless
+                            class="inputgreen"
+                            :model-value="
                         formData.refCommandDate == null ? null : date2Thai(formData.refCommandDate as Date)
                         "
-                          hide-bottom-space
-                          :label="`${'เอกสารอ้างอิง (ลงวันที่)'}`"
-                          @clear="formData.refCommandDate = null"
-                        >
-                          <template v-slot:prepend>
-                            <q-icon
-                              name="event"
-                              class="cursor-pointer"
-                              style="color: var(--q-primary)"
-                            >
-                            </q-icon>
-                          </template>
-                        </q-input>
-                      </template>
-                    </datepicker>
+                            hide-bottom-space
+                            :label="`${'เอกสารอ้างอิง (ลงวันที่)'}`"
+                            @clear="formData.refCommandDate = null"
+                          >
+                            <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>
-                </div>
-              </q-card>
+                </q-card>
+              </div>
             </div>
-          </div>
-        </q-card-section>
+          </q-page>
+        </q-page-container>
         <q-separator />
 
-        <q-card-section align="right">
-          <q-btn label="บันทึก" type="submit" color="secondary">
-            <q-tooltip>บันทึกข้อมูล</q-tooltip></q-btn
-          >
-        </q-card-section>
+        <q-footer>
+          <q-separator color="grey-4" />
+          <q-toolbar class="fit row wrap justify-end items-start content-start">
+            <q-btn
+              dense
+              unelevated
+              label="บันทึก"
+              id="onSubmit"
+              type="submit"
+              color="public"
+              class="q-px-md"
+            >
+              <q-tooltip>บันทึกข้อมูล</q-tooltip>
+            </q-btn>
+          </q-toolbar>
+        </q-footer>
       </q-form>
-    </q-card>
+    </q-layout>
   </q-dialog>
 
   <DialogHisotory v-model:modal="modalHistory" v-model:id="id" />
diff --git a/src/modules/04_registryNew/components/detail/Salary/02_NotReceiveSalaryHistory.vue b/src/modules/04_registryNew/components/detail/Salary/02_NotReceiveSalaryHistory.vue
index 51d24ab5e..b719ef1a8 100644
--- a/src/modules/04_registryNew/components/detail/Salary/02_NotReceiveSalaryHistory.vue
+++ b/src/modules/04_registryNew/components/detail/Salary/02_NotReceiveSalaryHistory.vue
@@ -144,87 +144,87 @@ watch(modal, (status) => {
 </script>
 <template>
   <q-dialog v-model="modal" persistent full-width>
-    <q-card>
-      <DialogHeader
-        :tittle="'ประวัติแก้ไขตำแหน่ง/เงินเดือน'"
-        :close="closeDialog"
-      />
-      <q-separator />
-      <q-card-section class="q-pa-sm">
-        <q-toolbar style="padding: 0px" class="text-primary q-mb-sm">
-          <q-space />
-          <q-input
-            dense
-            outlined
-            v-model="filter"
-            label="ค้นหา"
-            class="q-mr-sm"
-          >
-            <template v-slot:append>
-              <q-icon name="search" />
-            </template>
-          </q-input>
-
-          <q-select
-            v-model="visibleColumns"
-            multiple
-            outlined
-            dense
-            options-dense
-            :display-value="$q.lang.table.columns"
-            emit-value
-            map-options
-            :options="columns"
-            option-value="name"
-            options-cover
-            style="min-width: 150px"
+    <q-layout
+      view="lHh lpr lFf"
+      container
+      style="height: 80vh; min-width: 80%"
+      class="bg-white"
+    >
+      <q-header>
+        <q-toolbar>
+          <DialogHeader
+            :tittle="'ประวัติแก้ไขตำแหน่ง/เงินเดือน'"
+            :close="closeDialog"
           />
         </q-toolbar>
-        <d-table
-          ref="table"
-          row-key="id"
-          flat
-          bordered
-          dense
-          :filter="filter"
-          :columns="columns"
-          :rows="rows"
-          :paging="true"
-          v-model:pagination="pagination"
-          :rows-per-page-options="[20, 50, 100]"
-          :visible-columns="visibleColumns"
-        >
-          <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-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 class="table_ellipsis">
-                  {{ col.value ? col.value : "-" }}
-                </div>
-              </q-td>
-            </q-tr>
-          </template>
-          <!-- <template v-slot:pagination="scope">
-          <q-pagination
-            v-model="formFilter.page"
-            active-color="primary"
-            color="dark"
-            :max="Number(maxPage)"
-            :max-pages="5"
-            size="sm"
-            boundary-links
-            direction-links
-          ></q-pagination>
-        </template> -->
-        </d-table>
-      </q-card-section>
-    </q-card>
+        <q-separator color="grey-4" />
+      </q-header>
+
+      <q-page-container>
+        <q-page class="q-pa-md">
+          <q-toolbar style="padding: 0px" class="text-primary q-mb-sm">
+            <q-space />
+            <q-input
+              dense
+              outlined
+              v-model="filter"
+              label="ค้นหา"
+              class="q-mr-sm"
+            >
+              <template v-slot:append>
+                <q-icon name="search" />
+              </template>
+            </q-input>
+
+            <q-select
+              v-model="visibleColumns"
+              multiple
+              outlined
+              dense
+              options-dense
+              :display-value="$q.lang.table.columns"
+              emit-value
+              map-options
+              :options="columns"
+              option-value="name"
+              options-cover
+              style="min-width: 150px"
+            />
+          </q-toolbar>
+          <d-table
+            ref="table"
+            row-key="id"
+            flat
+            bordered
+            dense
+            :filter="filter"
+            :columns="columns"
+            :rows="rows"
+            :paging="true"
+            v-model:pagination="pagination"
+            :rows-per-page-options="[20, 50, 100]"
+            :visible-columns="visibleColumns"
+          >
+            <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-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 class="table_ellipsis">
+                    {{ col.value ? col.value : "-" }}
+                  </div>
+                </q-td>
+              </q-tr>
+            </template>
+          </d-table>
+        </q-page>
+      </q-page-container>
+    </q-layout>
   </q-dialog>
 </template>