รายงานสถิติข้อมูลข้าราชการ กทม. สามัญ

src/modules/04_registryPerson/components/TableView.vue

@@ -29,12 +29,12 @@ const router = useRouter();
 
 const detailReport = ref<any>();
 const rangeAge = ref<RangeAge>({
-  min: 20,
-  max: 80,
+  min: 18,
+  max: 60,
 });
 
 const objMarkerLabel = computed(() => {
-  return { 50: `เลือกช่วงอายุ ${rangeAge.value.min}-${rangeAge.value.max} ปี` };
+  return { 39: `ช่วงอายุ ${rangeAge.value.min}-${rangeAge.value.max} ปี` };
 });
 
 const loadingBtn = ref<boolean>(false);
@@ -636,57 +636,58 @@ watch(
         :close="closeDialog"
       />
       <q-separator />
-      <q-card-section class="q-pt-none" style="padding: 0px">
+      <q-card-section class="q-pa-lg">
         <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"
-                >
-                  <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"
+          <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>
+                <template v-slot:prepend>
+                  <q-icon
+                    name="event"
+                    class="cursor-pointer"
+                    style="color: var(--q-primary)"
+                  >
+                  </q-icon>
+                </template>
+              </q-input>
+            </template>
+          </datepicker>
 
+          <span class="text-body1 q-pt-sm text-weight-medium"
+            >เลือกช่วงอายุ</span
+          >
+          <div class="q-px-lg q-pt-lg">
+            <q-range
+              v-model="rangeAge"
+              :min="18"
+              :max="60"
+              label
+              :marker-labels="objMarkerLabel"
+              color="primary"
+            >
+            </q-range>
+          </div>
         </div>
       </q-card-section>
       <q-separator />
-      <q-card-actions align="right">
+      <q-card-actions align="right" class="q-ma-xs">
         <q-btn
           :loading="loadingBtn"
           :disable="loadingBtn"
@@ -694,7 +695,7 @@ watch(
           icon="download"
           label="ดาวน์โหลดรายงาน"
           @click="getReport"
-          style="width: 100%"
+          style="width: 200px"
         >
           <q-tooltip>ดาวน์โหลดรายงาน</q-tooltip>
         </q-btn>