ปรับ UI รายงานสถิติข้อมูลข้าราชการ กทม. สามัญ และลูกจ้างประจำ

This commit is contained in:
setthawutttty 2024-12-10 14:00:25 +07:00
parent 5f654f7567
commit d206c19362

View file

@ -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>