From d206c19362cb9352f9d6eb5b3834b4ce4b16af74 Mon Sep 17 00:00:00 2001
From: setthawutttty <trx.setthawut@gmail.com>
Date: Tue, 10 Dec 2024 14:00:25 +0700
Subject: [PATCH] =?UTF-8?q?=E0=B8=9B=E0=B8=A3=E0=B8=B1=E0=B8=9A=20UI=20?=
 =?UTF-8?q?=E0=B8=A3=E0=B8=B2=E0=B8=A2=E0=B8=87=E0=B8=B2=E0=B8=99=E0=B8=AA?=
 =?UTF-8?q?=E0=B8=96=E0=B8=B4=E0=B8=95=E0=B8=B4=E0=B8=82=E0=B9=89=E0=B8=AD?=
 =?UTF-8?q?=E0=B8=A1=E0=B8=B9=E0=B8=A5=E0=B8=82=E0=B9=89=E0=B8=B2=E0=B8=A3?=
 =?UTF-8?q?=E0=B8=B2=E0=B8=8A=E0=B8=81=E0=B8=B2=E0=B8=A3=20=E0=B8=81?=
 =?UTF-8?q?=E0=B8=97=E0=B8=A1.=20=E0=B8=AA=E0=B8=B2=E0=B8=A1=E0=B8=B1?=
 =?UTF-8?q?=E0=B8=8D=20=E0=B9=81=E0=B8=A5=E0=B8=B0=E0=B8=A5=E0=B8=B9?=
 =?UTF-8?q?=E0=B8=81=E0=B8=88=E0=B9=89=E0=B8=B2=E0=B8=87=E0=B8=9B=E0=B8=A3?=
 =?UTF-8?q?=E0=B8=B0=E0=B8=88=E0=B8=B3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/TableView.vue                  | 117 +++++++++---------
 1 file changed, 57 insertions(+), 60 deletions(-)

diff --git a/src/modules/04_registryPerson/components/TableView.vue b/src/modules/04_registryPerson/components/TableView.vue
index 6de071b64..90b7a16ee 100644
--- a/src/modules/04_registryPerson/components/TableView.vue
+++ b/src/modules/04_registryPerson/components/TableView.vue
@@ -34,7 +34,7 @@ const rangeAge = ref<RangeAge>({
 });
 
 const objMarkerLabel = computed(() => {
-  return { 50: `ช่วงอายุ ${rangeAge.value.min}-${rangeAge.value.max} ปี` };
+  return { 50: `เลือกช่วงอายุ ${rangeAge.value.min}-${rangeAge.value.max} ปี` };
 });
 
 const loadingBtn = ref<boolean>(false);
@@ -626,7 +626,7 @@ watch(
   </d-table>
 
   <q-dialog v-model="modalReport" persistent>
-    <q-card class="col-12" style="width: 80%">
+    <q-card class="col-12" style="width: 40%">
       <DialogHeader
         :tittle="
           empType == 'officer'
@@ -637,71 +637,68 @@ watch(
       />
       <q-separator />
       <q-card-section class="q-pt-none" style="padding: 0px">
-        <div class="q-pa-sm q-gutter-y-sm">
-          <q-toolbar class="q-pa-sm bg-grey-2" style="border-radius: 5px">
-            <div class="q-pr-xs col-4">
-              <datepicker
-                menu-class-name="modalfix"
-                v-model="year"
-                :locale="'th'"
-                autoApply
-                year-picker
-                :enableTimePicker="false"
-              >
-                <template #year="{ year }">{{ year + 543 }}</template>
-                <template #year-overlay-value="{ value }">{{
-                  parseInt(value + 543)
-                }}</template>
-                <template #trigger>
-                  <q-input
-                    dense
-                    outlined
-                    :model-value="year === 0 ? 'ทั้งหมด' : Number(year) + 543"
-                    :label="`${'ปีงบประมาณ'}`"
-                    bg-color="white"
-                  >
-                    <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="q-pr-xs col-4">
-              <div class="q-px-sm q-mx-md">
-                <q-range
-                  v-model="rangeAge"
-                  :min="20"
-                  :max="80"
-                  label
-                  :marker-labels="objMarkerLabel"
-                  color="primary"
+        <div class="column q-pa-sm q-gutter-y-sm">
+
+            <datepicker
+              menu-class-name="modalfix"
+              v-model="year"
+              :locale="'th'"
+              autoApply
+              year-picker
+              :enableTimePicker="false"
+            >
+              <template #year="{ year }">{{ year + 543 }}</template>
+              <template #year-overlay-value="{ value }">{{
+                parseInt(value + 543)
+              }}</template>
+              <template #trigger>
+                <q-input
+                  dense
+                  outlined
+                  :model-value="year === 0 ? 'ทั้งหมด' : Number(year) + 543"
+                  :label="`${'ปีงบประมาณ'}`"
+                  bg-color="white"
                 >
-                </q-range>
-              </div>
-            </div>
-            <div class="q-pr-xs col-4">
-              <q-btn
-                :loading="loadingBtn"
-                :disable="loadingBtn"
+                  <template v-slot:prepend>
+                    <q-icon
+                      name="event"
+                      class="cursor-pointer"
+                      style="color: var(--q-primary)"
+                    >
+                    </q-icon>
+                  </template>
+                </q-input>
+              </template>
+            </datepicker>
+
+            <div class="q-px-sm q-mx-md q-py-lg">
+              <q-range
+                v-model="rangeAge"
+                :min="20"
+                :max="80"
+                label
+                :marker-labels="objMarkerLabel"
                 color="primary"
-                icon="download"
-                label="ดาวน์โหลดรายงาน"
-                @click="getReport"
-                style="width: 100%"
               >
-                <q-tooltip>ดาวน์โหลดรายงาน</q-tooltip>
-              </q-btn>
+              </q-range>
             </div>
-          </q-toolbar>
+
         </div>
       </q-card-section>
       <q-separator />
+      <q-card-actions align="right">
+        <q-btn
+          :loading="loadingBtn"
+          :disable="loadingBtn"
+          color="primary"
+          icon="download"
+          label="ดาวน์โหลดรายงาน"
+          @click="getReport"
+          style="width: 100%"
+        >
+          <q-tooltip>ดาวน์โหลดรายงาน</q-tooltip>
+        </q-btn>
+      </q-card-actions>
     </q-card>
   </q-dialog>