hrms-bangkok/hrms-mgt
7
0
Fork 0
Code Issues Pull requests Projects Releases Packages 1 Wiki Activity Actions

ปรับ filter รายงานสถิติ

Browse source
This commit is contained in:
DESKTOP-1R2VSQH\Lenovo ThinkPad E490 2023-12-01 17:44:35 +07:00
parent 62c3435db6
commit 11e11933cc
2 changed files with 150 additions and 69 deletions
Download patch file Download diff file Expand all files Collapse all files

198
src/modules/09_leave/components/3_Report/DetailReport.vue
View file

@ -17,12 +17,8 @@ const { messageError, showLoader, hideLoader, date2Thai, monthYear2Thai } =
const typeReport = route.params.type.toString();
const titleReport = computed(() => {
const title =
typeReport === "daily"
? "รายงานสรุปบันทึกการลงเวลาปฏิบัติงานเป็นรายวัน"
: typeReport === "monthly"
? "รายงานสรุปบันทึกการลงเวลาปฏิบัติงานเป็นรายเดือน"
: typeReport === "yearly"
? "รายงานสรุปบันทึกการลงเวลาปฏิบัติงานเป็นรายปี"
typeReport === "time-records"
? "รายงานสรุปบันทึกการลงเวลาปฏิบัติงาน"
: typeReport === "leaveday"
? "บัญชีแสดงวันลา"
: "";
@ -37,25 +33,56 @@ const dateMonth = ref<DataDateMonthObject>({
const year = ref<number>(new Date().getFullYear());
const dateStart = ref<Date>(new Date());
const dateEnd = ref<Date>(new Date());
const employeeClass = ref<string>("");
const employeeClass = ref<string>("employee");
const yearType = ref<string>("fullyear");
const filterType = ref<string>("daily");
function monthYearThai(val: DataDateMonthObject) {
if (val == null) return "";
else return monthYear2Thai(val.month, val.year);
}
const filterTypeMain = ref<DataOption[]>([
{ id: "daily", name: "รายวัน" },
{ id: "monthly", name: "รายเดือน" },
{ id: "yearly", name: "รายปี" },
]);
const employeeClassMain = ref<DataOption[]>([
{ id: "employee", name: "ข้าราชการ" },
{ id: "perm", name: "ลูกจ้างประจำ" },
]);
const yearTypeOptionMain = ref<DataOption[]>([
{ id: "fullyear", name: "รายปี" },
{ id: "halfyear", name: "ครึ่งปี" },
]);
const employeeClassOption = ref<DataOption[]>(employeeClassMain.value);
const yearTypeOptionOption = ref<DataOption[]>(yearTypeOptionMain.value);
const filterTypeOption = ref<DataOption[]>(filterTypeMain.value);
function filterFnOptions(val: any, update: Function) {
update(() => {
employeeClassOption.value = employeeClassMain.value.filter(
(v: DataOption) => v.name.indexOf(val) > -1
);
});
function filterFnOptions(val: any, update: Function, type: string) {
switch (type) {
case "filterType":
update(() => {
filterTypeOption.value = filterTypeMain.value.filter(
(v: DataOption) => v.name.indexOf(val) > -1
);
});
break;
case "employeeClass":
update(() => {
employeeClassOption.value = employeeClassMain.value.filter(
(v: DataOption) => v.name.indexOf(val) > -1
);
});
break;
case "yearType":
update(() => {
yearTypeOptionOption.value = yearTypeOptionMain.value.filter(
(v: DataOption) => v.name.indexOf(val) > -1
);
});
break;
}
}
const splitterModel = ref(14);
@ -99,7 +126,87 @@ function backHistory() {
<q-card flat bordered class="col-12 q-mt-sm q-pa-md">
<div class="q-pa-md q-gutter-y-sm">
<q-toolbar style="padding: 0">
<div class="q-pr-xs" v-if="typeReport === 'daily'">
<div class="q-pr-xs" v-if="typeReport === 'time-records'">
<q-select
class="bg-white"
outlined
dense
v-model="filterType"
:options="filterTypeOption"
emit-value
map-options
option-label="name"
option-value="id"
use-input
style="width: 230px"
@filter="(inputValue: any,
doneFn: Function) => filterFnOptions(inputValue, doneFn,'filterType')"
><template v-slot:no-option>
<q-item>
<q-item-section class="text-grey"> ไม่มีข้อมูล </q-item-section>
</q-item>
</template>
</q-select>
</div>
<div class="q-pr-xs" v-if="typeReport === 'leaveday'">
<q-select
outlined
dense
v-model="employeeClass"
:options="employeeClassOption"
label="สถานภาพ"
emit-value
map-options
option-label="name"
option-value="id"
use-input
style="width: 230px"
@filter="(inputValue: any,
doneFn: Function) => filterFnOptions(inputValue, doneFn,'employeeClass')"
><template v-slot:no-option>
<q-item>
<q-item-section class="text-grey"> ไม่มีข้อมูล </q-item-section>
</q-item>
</template>
</q-select>
</div>
<div class="q-pr-xs" v-if="typeReport === 'leaveday'">
<q-select
outlined
dense
v-model="yearType"
:options="yearTypeOptionOption"
emit-value
map-options
option-label="name"
option-value="id"
use-input
style="width: 230px"
@filter="(inputValue: any,
doneFn: Function) => filterFnOptions(inputValue, doneFn,'yearType')"
><template v-slot:no-option>
<q-item>
<q-item-section class="text-grey"> ไม่มีข้อมูล </q-item-section>
</q-item>
</template>
</q-select>
</div>
<q-space />
<div class="q-py-xs">
<q-btn unelevated color="primary" @click="modalFull = true">
<q-icon left size="2em" name="mdi-eye-outline" />
<div>แสดงรายงาน</div>
</q-btn>
</div>
</q-toolbar>
<q-toolbar
v-if="typeReport === 'time-records'"
class="q-pa-sm bg-grey-2"
style="border-radius: 5px"
>
<div class="q-pr-xs" v-if="filterType === 'daily'">
<datepicker
menu-class-name="modalfix"
v-model="date"
@ -114,7 +221,7 @@ function backHistory() {
}}</template>
<template #trigger>
<q-input
class="full-width inputgreen cursor-pointer"
class="bg-white"
outlined
dense
lazy-rules
@ -130,7 +237,7 @@ function backHistory() {
</template>
</datepicker>
</div>
<div class="q-pr-xs" v-if="typeReport === 'monthly'">
<div class="q-pr-xs" v-if="filterType === 'monthly'">
<datepicker
v-model="dateMonth"
:locale="'th'"
@ -144,12 +251,12 @@ function backHistory() {
}}</template>
<template #trigger>
<q-input
class="full-width inputgreen cursor-pointer"
class="bg-white"
outlined
dense
lazy-rules
borderless
:label="`${'เดือนที่'}`"
:label="`${'เดือน'}`"
:model-value="monthYearThai(dateMonth)"
>
<template v-slot:prepend>
@ -163,7 +270,7 @@ function backHistory() {
</template>
</datepicker>
</div>
<div class="q-pr-xs" v-if="typeReport === 'yearly'">
<div class="q-pr-xs" v-if="filterType === 'yearly'">
<datepicker
menu-class-name="modalfix"
v-model="year"
@ -179,6 +286,7 @@ function backHistory() {
}}</template>
<template #trigger>
<q-input
class="bg-white"
dense
lazy-rules
outlined
@ -197,8 +305,14 @@ function backHistory() {
</template>
</datepicker>
</div>
</q-toolbar>
<div class="q-pl-xs" v-if="typeReport === 'leaveday'">
<q-toolbar
v-if="typeReport === 'leaveday'"
class="q-pa-sm bg-grey-2"
style="border-radius: 5px"
>
<div class="q-pr-xs">
<datepicker
menu-class-name="modalfix"
v-model="dateStart"
@ -213,7 +327,7 @@ function backHistory() {
}}</template>
<template #trigger>
<q-input
class="full-width inputgreen cursor-pointer"
class="bg-white"
outlined
dense
lazy-rules
@ -229,7 +343,7 @@ function backHistory() {
</template>
</datepicker>
</div>
<div class="q-pl-xs" v-if="typeReport === 'leaveday'">
<div class="q-pr-xs">
<datepicker
menu-class-name="modalfix"
v-model="dateEnd"
@ -244,7 +358,7 @@ function backHistory() {
}}</template>
<template #trigger>
<q-input
class="full-width inputgreen cursor-pointer"
class="bg-white"
outlined
dense
lazy-rules
@ -260,45 +374,7 @@ function backHistory() {
</template>
</datepicker>
</div>
<q-space />
<div class="q-py-xs">
<q-btn unelevated color="primary" @click="modalFull = true">
<q-icon left size="2em" name="mdi-eye-outline" />
<div>แสดงรายงาน</div>
</q-btn>
</div>
</q-toolbar>
<q-toolbar
v-if="typeReport === 'leaveday'"
class="q-pa-sm bg-grey-2"
style="border-radius: 5px"
>
<div class="q-pr-xs">
<q-select
class="bg-white"
outlined
dense
v-model="employeeClass"
:options="employeeClassOption"
label="สถานภาพ"
emit-value
map-options
option-label="name"
option-value="id"
use-input
style="width: 230px"
@filter="(inputValue: any,
doneFn: Function) => filterFnOptions(inputValue, doneFn)"
><template v-slot:no-option>
<q-item>
<q-item-section class="text-grey"> ไม่มีข้อมูล </q-item-section>
</q-item>
</template>
</q-select>
</div></q-toolbar
>
<q-splitter
v-model="splitterModel"
horizontal

21
src/modules/09_leave/views/ReportMain.vue
View file

@ -3,7 +3,7 @@ import { useRouter } from "vue-router";
const router = useRouter();
function nextPage(type: string,) {
function nextPage(type: string) {
router.push(`/statistics-report/${type}`);
}
</script>
@ -12,16 +12,16 @@ function nextPage(type: string,) {
<div>
<q-card flat bordered class="col-12 q-mt-sm">
<div class="q-pa-md">
<q-item clickable dense class="hover-green" @click="nextPage('daily')">
<q-item clickable dense class="hover-green" @click="nextPage('time-records')">
<q-item-section avatar>
<q-icon color="primary" name="mdi-file" size="xs" />
</q-item-section>
<q-item-section class="text-dark">
รายงานสรุปบันทึกการลงเวลาปฏิบัติงานเป็นรายวัน
รายงานสรุปบันทึกการลงเวลาปฏิบัติงาน
</q-item-section>
</q-item>
<q-item
<!-- <q-item
clickable
dense
class="hover-green"
@ -33,18 +33,23 @@ function nextPage(type: string,) {
<q-item-section class="text-dark">
รายงานสรุปบันทึกการลงเวลาปฏิบัติงานเป็นรายเดือน
</q-item-section>
</q-item>
</q-item> -->
<q-item clickable dense class="hover-green" @click="nextPage('yearly')">
<!-- <q-item clickable dense class="hover-green" @click="nextPage('yearly')">
<q-item-section avatar>
<q-icon color="primary" name="mdi-file" size="xs" />
</q-item-section>
<q-item-section class="text-dark">
รายงานสรุปบันทึกการลงเวลาปฏิบัติงานเป็นรายปี
</q-item-section>
</q-item>
</q-item> -->
<q-item clickable dense class="hover-green" @click="nextPage('leaveday')">
<q-item
clickable
dense
class="hover-green"
@click="nextPage('leaveday')"
>
<q-item-section avatar>
<q-icon color="primary" name="mdi-file" size="xs" />
</q-item-section>