Merge branch 'develop' into devTee
This commit is contained in:
setthawutttty
commit
cec870c8d1
7 changed files with 452 additions and 461 deletions
|
|
@ -409,7 +409,7 @@ const menuList = readonly<any[]>([
|
|||
{
|
||||
key: 9.6,
|
||||
label: "รายงานสถิติ",
|
||||
path: "/statistics-report",
|
||||
path: "/leave-report",
|
||||
role: "leave",
|
||||
},
|
||||
],
|
||||
|
|
|
|||
297
src/modules/09_leave/components/1_Work/DialogReport.vue
Normal file
297
src/modules/09_leave/components/1_Work/DialogReport.vue
Normal file
|
|
@ -0,0 +1,297 @@
|
|||
<script setup lang="ts">
|
||||
import { ref, watch } from "vue";
|
||||
import { useQuasar } from "quasar";
|
||||
import http from "@/plugins/http";
|
||||
import config from "@/app.config";
|
||||
import axios from "axios";
|
||||
|
||||
/** importType*/
|
||||
import type {
|
||||
DataOption,
|
||||
DataDateMonthObject,
|
||||
} from "@/modules/09_leave/interface/index/Main";
|
||||
|
||||
/** importComponents*/
|
||||
import Header from "@/components/DialogHeader.vue";
|
||||
|
||||
/** importStore*/
|
||||
import { useCounterMixin } from "@/stores/mixin";
|
||||
|
||||
/** use*/
|
||||
const mixin = useCounterMixin();
|
||||
const $q = useQuasar();
|
||||
const { date2Thai, monthYear2Thai, dateToISO, messageError } = mixin;
|
||||
|
||||
const apiGenReport =
|
||||
"https://report-server.frappet.synology.me/api/v1/report-template/xlsx";
|
||||
|
||||
const props = defineProps({
|
||||
modal: {
|
||||
type: Boolean,
|
||||
requier: true,
|
||||
default: false,
|
||||
},
|
||||
close: {
|
||||
type: Function,
|
||||
requier: true,
|
||||
},
|
||||
});
|
||||
|
||||
const loadingBtn = ref<boolean>(true);
|
||||
const filterType = ref<string>("daily");
|
||||
const filterTypeMain = ref<DataOption[]>([
|
||||
{ id: "daily", name: "รายวัน" },
|
||||
{ id: "monthly", name: "รายเดือน" },
|
||||
]);
|
||||
const filterTypeOption = ref<DataOption[]>(filterTypeMain.value);
|
||||
const date = ref<Date>(new Date());
|
||||
const dateMonth = ref<DataDateMonthObject>({
|
||||
month: new Date().getMonth(),
|
||||
year: new Date().getFullYear(),
|
||||
});
|
||||
|
||||
const detailReport = ref<any>();
|
||||
|
||||
/** function อัปเดทรายงานสถิติการลา*/
|
||||
async function updateFilterType() {
|
||||
filterType.value === "daily"
|
||||
? updateDte()
|
||||
: filterType.value === "monthly"
|
||||
? updateMonth()
|
||||
: false;
|
||||
}
|
||||
|
||||
/** function อัปเดทวัน*/
|
||||
async function updateDte() {
|
||||
const body = {
|
||||
startDate: dateToISO(date.value),
|
||||
endDate: dateToISO(date.value),
|
||||
};
|
||||
fetchReportTimeRecords(body);
|
||||
}
|
||||
|
||||
/** function อัปเดทเดือน*/
|
||||
async function updateMonth() {
|
||||
const mount = dateMonth.value.month + 1;
|
||||
// วันเริ่มต้นของเดือน
|
||||
const firstDay = new Date(dateMonth.value.year, mount - 1, 1);
|
||||
// วันสิ้นสุดของเดือนถัดไป
|
||||
const lastDay = new Date(dateMonth.value.year, mount, 0);
|
||||
const body = {
|
||||
startDate: dateToISO(firstDay),
|
||||
endDate: dateToISO(lastDay),
|
||||
};
|
||||
fetchReportTimeRecords(body);
|
||||
}
|
||||
|
||||
/**
|
||||
* function เรียกข้อมูลรายงานสถิติการลา
|
||||
* @param body วันเรื่มต้นและสิ้นสุด
|
||||
*/
|
||||
async function fetchReportTimeRecords(body: any) {
|
||||
loadingBtn.value = true;
|
||||
await http
|
||||
.post(config.API.leaveReportTimeRecords(), body)
|
||||
.then((res) => {
|
||||
const data = res.data.result;
|
||||
detailReport.value = data;
|
||||
})
|
||||
.catch((err) => {
|
||||
messageError($q, err);
|
||||
})
|
||||
.finally(() => {
|
||||
setTimeout(() => {
|
||||
loadingBtn.value = false;
|
||||
}, 500);
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* function filterOption
|
||||
* @param val คำค้นหา
|
||||
* @param update functoin
|
||||
*/
|
||||
function filterFnOptions(val: any, update: Function) {
|
||||
update(() => {
|
||||
filterTypeOption.value = filterTypeMain.value.filter(
|
||||
(v: DataOption) => v.name.indexOf(val) > -1
|
||||
);
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* function เรียกไฟล์ XLSX
|
||||
* @param data ข้อมูลรายงานสถิติการลา
|
||||
*/
|
||||
async function genReportXLSX(data: any) {
|
||||
await axios
|
||||
.post(apiGenReport, data, {
|
||||
headers: {
|
||||
accept:
|
||||
"application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
|
||||
"content-Type": "application/json",
|
||||
},
|
||||
responseType: "blob",
|
||||
})
|
||||
.then(async (res) => {
|
||||
const blob = new Blob([res.data]);
|
||||
downloadReport(blob, "xlsx");
|
||||
})
|
||||
.catch((err) => {
|
||||
messageError($q, err);
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
*
|
||||
* @param data ข้อมูลรายงานสถิติการลา
|
||||
* @param type นามสกุลไฟล์
|
||||
*/
|
||||
async function downloadReport(data: any, type: string) {
|
||||
const link = document.createElement("a");
|
||||
var fileName = "รายงานสรุปบันทึกการลงเวลาปฏิบัติงาน";
|
||||
link.href = window.URL.createObjectURL(new Blob([data]));
|
||||
link.setAttribute("download", `${fileName}.${type}`);
|
||||
document.body.appendChild(link);
|
||||
link.click();
|
||||
document.body.removeChild(link);
|
||||
}
|
||||
|
||||
function monthYearThai(val: DataDateMonthObject) {
|
||||
if (val == null) return "";
|
||||
else return monthYear2Thai(val.month, val.year);
|
||||
}
|
||||
|
||||
watch(
|
||||
() => props.modal,
|
||||
() => {
|
||||
filterType.value = "daily";
|
||||
date.value = new Date();
|
||||
props.modal && updateFilterType();
|
||||
}
|
||||
);
|
||||
</script>
|
||||
<template>
|
||||
<q-dialog v-model="props.modal">
|
||||
<q-card style="width: 800px; max-width: 80vw">
|
||||
<Header :close="props.close" :tittle="'รายงานสถิติการลา'" />
|
||||
|
||||
<q-separator />
|
||||
|
||||
<q-card-section class="q-pt-none">
|
||||
<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">
|
||||
<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"
|
||||
@update:model-value="updateFilterType"
|
||||
@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>
|
||||
<div class="q-pr-xs" v-if="filterType === 'daily'">
|
||||
<datepicker
|
||||
menu-class-name="modalfix"
|
||||
v-model="date"
|
||||
:locale="'th'"
|
||||
autoApply
|
||||
:enableTimePicker="false"
|
||||
week-start="0"
|
||||
@update:model-value="updateDte"
|
||||
>
|
||||
<template #year="{ year }">{{ year + 543 }}</template>
|
||||
<template #year-overlay-value="{ value }">{{
|
||||
parseInt(value + 543)
|
||||
}}</template>
|
||||
<template #trigger>
|
||||
<q-input
|
||||
class="bg-white"
|
||||
outlined
|
||||
dense
|
||||
lazy-rules
|
||||
borderless
|
||||
:model-value="date ? date2Thai(date) : null"
|
||||
:label="`${'วันที่'}`"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon
|
||||
name="event"
|
||||
class="cursor-pointer"
|
||||
color="primary"
|
||||
>
|
||||
</q-icon>
|
||||
</template>
|
||||
</q-input>
|
||||
</template>
|
||||
</datepicker>
|
||||
</div>
|
||||
<div class="q-pr-xs" v-if="filterType === 'monthly'">
|
||||
<datepicker
|
||||
v-model="dateMonth"
|
||||
:locale="'th'"
|
||||
autoApply
|
||||
month-picker
|
||||
:enableTimePicker="false"
|
||||
@update:model-value="updateMonth"
|
||||
>
|
||||
<template #year="{ year }">{{ year + 543 }}</template>
|
||||
<template #year-overlay-value="{ value }">{{
|
||||
parseInt(value + 543)
|
||||
}}</template>
|
||||
<template #trigger>
|
||||
<q-input
|
||||
class="bg-white"
|
||||
outlined
|
||||
dense
|
||||
lazy-rules
|
||||
borderless
|
||||
:label="`${'เดือน'}`"
|
||||
:model-value="monthYearThai(dateMonth)"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon
|
||||
name="event"
|
||||
class="cursor-pointer"
|
||||
color="primary"
|
||||
></q-icon>
|
||||
</template>
|
||||
</q-input>
|
||||
</template>
|
||||
</datepicker>
|
||||
</div>
|
||||
<q-space />
|
||||
<q-btn
|
||||
:loading="loadingBtn"
|
||||
:disable="loadingBtn"
|
||||
color="primary"
|
||||
icon="download"
|
||||
label="ดาวน์โหลดรายงาน"
|
||||
@click="genReportXLSX(detailReport)"
|
||||
>
|
||||
<q-tooltip>ดาวน์โหลดรายงาน</q-tooltip>
|
||||
</q-btn>
|
||||
</q-toolbar>
|
||||
</div>
|
||||
</q-card-section>
|
||||
</q-card>
|
||||
</q-dialog>
|
||||
</template>
|
||||
|
||||
<style scoped></style>
|
||||
|
|
@ -1,67 +1,31 @@
|
|||
<script setup lang="ts">
|
||||
import { ref, computed, onMounted } from "vue";
|
||||
import { ref, onMounted } from "vue";
|
||||
import { VuePDF, usePDF } from "@tato30/vue-pdf";
|
||||
import { useRoute } from "vue-router";
|
||||
import { useQuasar } from "quasar";
|
||||
import http from "@/plugins/http";
|
||||
import config from "@/app.config";
|
||||
import axios from "axios";
|
||||
|
||||
import type {
|
||||
DataDateMonthObject,
|
||||
DataOption,
|
||||
} from "@/modules/09_leave/interface/index/Main";
|
||||
/** importType*/
|
||||
import type { DataOption } from "@/modules/09_leave/interface/index/Main";
|
||||
|
||||
/** importStore*/
|
||||
import { useCounterMixin } from "@/stores/mixin";
|
||||
|
||||
const route = useRoute();
|
||||
/** use*/
|
||||
const mixin = useCounterMixin();
|
||||
const $q = useQuasar();
|
||||
const {
|
||||
showLoader,
|
||||
hideLoader,
|
||||
date2Thai,
|
||||
monthYear2Thai,
|
||||
dateToISO,
|
||||
messageError,
|
||||
} = mixin;
|
||||
const { showLoader, hideLoader, date2Thai, dateToISO, messageError } = mixin;
|
||||
|
||||
const apiGenReport =
|
||||
"https://report-server.frappet.synology.me/api/v1/report-template/xlsx";
|
||||
|
||||
const typeReport = route.params.type.toString();
|
||||
const titleReport = computed(() => {
|
||||
const title =
|
||||
typeReport === "time-records"
|
||||
? "รายงานสรุปบันทึกการลงเวลาปฏิบัติงาน"
|
||||
: typeReport === "leaveday"
|
||||
? "บัญชีแสดงวันลา"
|
||||
: "";
|
||||
return title;
|
||||
});
|
||||
|
||||
const date = ref<Date>(new Date());
|
||||
const dateMonth = ref<DataDateMonthObject>({
|
||||
month: new Date().getMonth(),
|
||||
year: new Date().getFullYear(),
|
||||
});
|
||||
const year = ref<number>(new Date().getFullYear());
|
||||
const dateStart = ref<Date>(new Date(year.value, 9, 1));
|
||||
const dateEnd = ref<Date>(new Date(year.value + 1, 8, 30));
|
||||
|
||||
const employeeClass = ref<string>("employee");
|
||||
const yearType = ref<string>("FULL");
|
||||
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: "officer", name: "ข้าราชการ" },
|
||||
|
|
@ -73,79 +37,37 @@ const yearTypeOptionMain = ref<DataOption[]>([
|
|||
]);
|
||||
const employeeClassOption = ref<DataOption[]>(employeeClassMain.value);
|
||||
const yearTypeOptionOption = ref<DataOption[]>(yearTypeOptionMain.value);
|
||||
const filterTypeOption = ref<DataOption[]>(filterTypeMain.value);
|
||||
|
||||
const detailReport = ref<any>();
|
||||
|
||||
/** function อัปเดทบัญชีแสดงวันลา */
|
||||
async function updateLeaveday() {
|
||||
if (yearType.value === "FULL") {
|
||||
dateStart.value = new Date(year.value, 9, 1);
|
||||
dateEnd.value = new Date(year.value + 1, 8, 30);
|
||||
} else if (yearType.value === "FIRSTHAFT") {
|
||||
dateStart.value = new Date(year.value, 9, 1);
|
||||
dateEnd.value = new Date(year.value + 1, 2, 31);
|
||||
} else if (yearType.value === "SECONDHAFT") {
|
||||
dateStart.value = new Date(year.value + 1, 3, 1);
|
||||
dateEnd.value = new Date(year.value + 1, 8, 30);
|
||||
}
|
||||
|
||||
fetchLeaveday(
|
||||
employeeClass.value,
|
||||
yearType.value,
|
||||
dateStart.value,
|
||||
dateEnd.value
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* function ค้นหาข้อมูล Option
|
||||
* @param val คำค้นหา
|
||||
* @param update function
|
||||
* @param type ประเภท option
|
||||
* function เรียกข้อมูลบัญชีแสดงวันลา
|
||||
* @param type สถานภาพ
|
||||
* @param year ปั
|
||||
* @param startDate วันเริ่มต้น
|
||||
* @param endDate วันสิ้นสุด
|
||||
*/
|
||||
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);
|
||||
const numOfPages = ref<number>(0);
|
||||
const page = ref<number>(1);
|
||||
const pdfSrc = ref<any>();
|
||||
const modalFull = ref<boolean>(false);
|
||||
const fileBlob = ref<any>();
|
||||
/** ไปหน้าต่อไปของรายงาน */
|
||||
function nextPage() {
|
||||
if (page.value < numOfPages.value) {
|
||||
page.value++;
|
||||
}
|
||||
}
|
||||
|
||||
/** กลับหน้าก่อนหน้าของรายงาน */
|
||||
function backPage() {
|
||||
if (page.value !== 1) {
|
||||
page.value--;
|
||||
}
|
||||
}
|
||||
|
||||
/** กลับหน้าหลัก */
|
||||
function backHistory() {
|
||||
window.history.back();
|
||||
}
|
||||
|
||||
async function fetchReportTimeRecords(body: any) {
|
||||
showLoader();
|
||||
await http
|
||||
.post(config.API.leaveReportTimeRecords(), body)
|
||||
.then((res) => {
|
||||
const data = res.data.result;
|
||||
data && genReport(data);
|
||||
dataDetail.value = data;
|
||||
})
|
||||
.catch((err) => {
|
||||
messageError($q, err);
|
||||
});
|
||||
}
|
||||
|
||||
async function fetchLeaveday(
|
||||
type: string,
|
||||
year: string,
|
||||
|
|
@ -153,7 +75,6 @@ async function fetchLeaveday(
|
|||
endDate: Date
|
||||
) {
|
||||
showLoader();
|
||||
|
||||
const body = {
|
||||
type: year === "FULL" ? "FULL" : "HAFT",
|
||||
startDate: dateToISO(startDate),
|
||||
|
|
@ -165,59 +86,17 @@ async function fetchLeaveday(
|
|||
.then((res) => {
|
||||
const data = res.data.result;
|
||||
data && genReport(data);
|
||||
dataDetail.value = data;
|
||||
detailReport.value = data;
|
||||
})
|
||||
.catch((err) => {
|
||||
messageError($q, err);
|
||||
});
|
||||
}
|
||||
|
||||
async function updateFilterType() {
|
||||
// console.log(filterType.value);
|
||||
filterType.value === "daily"
|
||||
? updateDte()
|
||||
: filterType.value === "monthly"
|
||||
? updateMonth()
|
||||
: updateYear();
|
||||
}
|
||||
|
||||
async function updateDte() {
|
||||
const body = {
|
||||
startDate: dateToISO(date.value),
|
||||
endDate: dateToISO(date.value),
|
||||
};
|
||||
fetchReportTimeRecords(body);
|
||||
}
|
||||
|
||||
async function updateMonth() {
|
||||
const mount = dateMonth.value.month + 1;
|
||||
|
||||
// วันเริ่มต้นของเดือน
|
||||
const firstDay = new Date(dateMonth.value.year, mount - 1, 1);
|
||||
|
||||
// วันสิ้นสุดของเดือนถัดไป
|
||||
const lastDay = new Date(dateMonth.value.year, mount, 0);
|
||||
|
||||
const body = {
|
||||
startDate: dateToISO(firstDay),
|
||||
endDate: dateToISO(lastDay),
|
||||
};
|
||||
fetchReportTimeRecords(body);
|
||||
}
|
||||
|
||||
async function updateYear() {
|
||||
// วันเริ่มต้นของปี
|
||||
const firstDay = new Date(year.value, 0, 1);
|
||||
// วันสิ้นสุดของปี
|
||||
const lastDay = new Date(year.value, 11, 31);
|
||||
|
||||
const body = {
|
||||
startDate: dateToISO(firstDay),
|
||||
endDate: dateToISO(lastDay),
|
||||
};
|
||||
fetchReportTimeRecords(body);
|
||||
}
|
||||
|
||||
/**
|
||||
* function เรียกไฟล์ PDF
|
||||
* @param data ข้อมูลบัญชีวันลา
|
||||
*/
|
||||
async function genReport(data: any) {
|
||||
await axios
|
||||
.post(apiGenReport, data, {
|
||||
|
|
@ -247,7 +126,10 @@ async function genReport(data: any) {
|
|||
});
|
||||
}
|
||||
|
||||
const dataDetail = ref<any>([]);
|
||||
/**
|
||||
* function เรียกไฟล์ XLSX
|
||||
* @param data ข้อมูลบัญชีวันลา
|
||||
*/
|
||||
async function genReportXLSX(data: any) {
|
||||
await axios
|
||||
.post(apiGenReport, data, {
|
||||
|
|
@ -270,29 +152,14 @@ async function genReportXLSX(data: any) {
|
|||
});
|
||||
}
|
||||
|
||||
async function updateLeaveday() {
|
||||
if (yearType.value === "FULL") {
|
||||
dateStart.value = new Date(year.value, 9, 1);
|
||||
dateEnd.value = new Date(year.value + 1, 8, 30);
|
||||
} else if (yearType.value === "FIRSTHAFT") {
|
||||
dateStart.value = new Date(year.value, 9, 1);
|
||||
dateEnd.value = new Date(year.value + 1, 2, 31);
|
||||
} else if (yearType.value === "SECONDHAFT") {
|
||||
dateStart.value = new Date(year.value + 1, 3, 1);
|
||||
dateEnd.value = new Date(year.value + 1, 8, 30);
|
||||
}
|
||||
|
||||
fetchLeaveday(
|
||||
employeeClass.value,
|
||||
yearType.value,
|
||||
dateStart.value,
|
||||
dateEnd.value
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* function Download ไฟล์
|
||||
* @param data ข้อมูลบัญชีวันลา
|
||||
* @param type นามสกุลไฟล์
|
||||
*/
|
||||
async function downloadReport(data: any, type: string) {
|
||||
const link = document.createElement("a");
|
||||
var fileName = titleReport.value;
|
||||
var fileName = "บัญชีแสดงวันลา";
|
||||
link.href = window.URL.createObjectURL(new Blob([data]));
|
||||
link.setAttribute("download", `${fileName}.${type}`);
|
||||
document.body.appendChild(link);
|
||||
|
|
@ -300,64 +167,62 @@ async function downloadReport(data: any, type: string) {
|
|||
document.body.removeChild(link);
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
const body = {
|
||||
startDate: dateToISO(date.value),
|
||||
endDate: dateToISO(date.value),
|
||||
};
|
||||
const splitterModel = ref(14);
|
||||
const numOfPages = ref<number>(0);
|
||||
const page = ref<number>(1);
|
||||
const pdfSrc = ref<any>();
|
||||
// const modalFull = ref<boolean>(false);
|
||||
const fileBlob = ref<any>();
|
||||
/** ไปหน้าต่อไปของรายงาน */
|
||||
function nextPage() {
|
||||
if (page.value < numOfPages.value) {
|
||||
page.value++;
|
||||
}
|
||||
}
|
||||
|
||||
typeReport === "time-records"
|
||||
? fetchReportTimeRecords(body)
|
||||
: fetchLeaveday(
|
||||
employeeClass.value,
|
||||
yearType.value,
|
||||
dateStart.value,
|
||||
dateEnd.value
|
||||
);
|
||||
/** กลับหน้าก่อนหน้าของรายงาน */
|
||||
function backPage() {
|
||||
if (page.value !== 1) {
|
||||
page.value--;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* function ค้นหาข้อมูล Option
|
||||
* @param val คำค้นหา
|
||||
* @param update function
|
||||
* @param type ประเภท option
|
||||
*/
|
||||
function filterFnOptions(val: any, update: Function, type: string) {
|
||||
switch (type) {
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
updateLeaveday();
|
||||
});
|
||||
</script>
|
||||
<template>
|
||||
<div class="toptitle">
|
||||
<q-btn
|
||||
icon="mdi-arrow-left"
|
||||
unelevated
|
||||
round
|
||||
dense
|
||||
flat
|
||||
color="primary"
|
||||
class="q-mr-sm"
|
||||
@click="backHistory"
|
||||
/>
|
||||
{{ titleReport }}
|
||||
</div>
|
||||
<div class="toptitle text-dark col-12 row items-center">บัญชีแสดงวันลา</div>
|
||||
|
||||
<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 === '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"
|
||||
@update:model-value="updateFilterType"
|
||||
@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'">
|
||||
<div class="q-pr-xs">
|
||||
<q-select
|
||||
outlined
|
||||
dense
|
||||
|
|
@ -372,7 +237,7 @@ onMounted(() => {
|
|||
style="width: 230px"
|
||||
@update:model-value="updateLeaveday"
|
||||
@filter="(inputValue: any,
|
||||
doneFn: Function) => filterFnOptions(inputValue, doneFn,'employeeClass')"
|
||||
doneFn: Function) => filterFnOptions(inputValue, doneFn,'employeeClass')"
|
||||
><template v-slot:no-option>
|
||||
<q-item>
|
||||
<q-item-section class="text-grey"> ไม่มีข้อมูล </q-item-section>
|
||||
|
|
@ -380,7 +245,7 @@ onMounted(() => {
|
|||
</template>
|
||||
</q-select>
|
||||
</div>
|
||||
<div class="q-pr-xs" v-if="typeReport === 'leaveday'">
|
||||
<div class="q-pr-xs">
|
||||
<q-select
|
||||
outlined
|
||||
dense
|
||||
|
|
@ -394,7 +259,7 @@ onMounted(() => {
|
|||
style="width: 230px"
|
||||
@update:model-value="updateLeaveday"
|
||||
@filter="(inputValue: any,
|
||||
doneFn: Function) => filterFnOptions(inputValue, doneFn,'yearType')"
|
||||
doneFn: Function) => filterFnOptions(inputValue, doneFn,'yearType')"
|
||||
><template v-slot:no-option>
|
||||
<q-item>
|
||||
<q-item-section class="text-grey"> ไม่มีข้อมูล </q-item-section>
|
||||
|
|
@ -402,7 +267,6 @@ onMounted(() => {
|
|||
</template>
|
||||
</q-select>
|
||||
</div>
|
||||
|
||||
<q-space />
|
||||
<div class="q-py-xs">
|
||||
<q-btn flat round color="primary" icon="download">
|
||||
|
|
@ -421,7 +285,7 @@ onMounted(() => {
|
|||
<q-item
|
||||
clickable
|
||||
v-close-popup
|
||||
@click="genReportXLSX(dataDetail)"
|
||||
@click="genReportXLSX(detailReport)"
|
||||
>
|
||||
<q-item-section avatar
|
||||
><q-icon color="green" name="mdi-file-excel"
|
||||
|
|
@ -431,126 +295,10 @@ onMounted(() => {
|
|||
</q-list>
|
||||
</q-menu>
|
||||
</q-btn>
|
||||
<!-- <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"
|
||||
:locale="'th'"
|
||||
autoApply
|
||||
:enableTimePicker="false"
|
||||
week-start="0"
|
||||
@update:model-value="updateDte"
|
||||
>
|
||||
<template #year="{ year }">{{ year + 543 }}</template>
|
||||
<template #year-overlay-value="{ value }">{{
|
||||
parseInt(value + 543)
|
||||
}}</template>
|
||||
<template #trigger>
|
||||
<q-input
|
||||
class="bg-white"
|
||||
outlined
|
||||
dense
|
||||
lazy-rules
|
||||
borderless
|
||||
:model-value="date ? date2Thai(date) : null"
|
||||
:label="`${'วันที่'}`"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon name="event" class="cursor-pointer" color="primary">
|
||||
</q-icon>
|
||||
</template>
|
||||
</q-input>
|
||||
</template>
|
||||
</datepicker>
|
||||
</div>
|
||||
<div class="q-pr-xs" v-if="filterType === 'monthly'">
|
||||
<datepicker
|
||||
v-model="dateMonth"
|
||||
:locale="'th'"
|
||||
autoApply
|
||||
month-picker
|
||||
:enableTimePicker="false"
|
||||
@update:model-value="updateMonth"
|
||||
>
|
||||
<template #year="{ year }">{{ year + 543 }}</template>
|
||||
<template #year-overlay-value="{ value }">{{
|
||||
parseInt(value + 543)
|
||||
}}</template>
|
||||
<template #trigger>
|
||||
<q-input
|
||||
class="bg-white"
|
||||
outlined
|
||||
dense
|
||||
lazy-rules
|
||||
borderless
|
||||
:label="`${'เดือน'}`"
|
||||
:model-value="monthYearThai(dateMonth)"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon
|
||||
name="event"
|
||||
class="cursor-pointer"
|
||||
color="primary"
|
||||
></q-icon>
|
||||
</template>
|
||||
</q-input>
|
||||
</template>
|
||||
</datepicker>
|
||||
</div>
|
||||
<div class="q-pr-xs" v-if="filterType === 'yearly'">
|
||||
<datepicker
|
||||
menu-class-name="modalfix"
|
||||
v-model="year"
|
||||
class="col-2"
|
||||
:locale="'th'"
|
||||
autoApply
|
||||
year-picker
|
||||
:enableTimePicker="false"
|
||||
@update:model-value="updateYear"
|
||||
>
|
||||
<template #year="{ year }">{{ year + 543 }}</template>
|
||||
<template #year-overlay-value="{ value }">{{
|
||||
parseInt(value + 543)
|
||||
}}</template>
|
||||
<template #trigger>
|
||||
<q-input
|
||||
class="bg-white"
|
||||
dense
|
||||
lazy-rules
|
||||
outlined
|
||||
:model-value="Number(year) + 543"
|
||||
: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>
|
||||
</q-toolbar>
|
||||
|
||||
<q-toolbar
|
||||
v-if="typeReport === 'leaveday'"
|
||||
class="q-pa-sm bg-grey-2"
|
||||
style="border-radius: 5px"
|
||||
>
|
||||
<q-toolbar class="q-pa-sm bg-grey-2" style="border-radius: 5px">
|
||||
<div class="q-pr-xs">
|
||||
<datepicker
|
||||
v-model="year"
|
||||
|
|
@ -584,35 +332,6 @@ onMounted(() => {
|
|||
</q-input>
|
||||
</template>
|
||||
</datepicker>
|
||||
<!-- <datepicker
|
||||
menu-class-name="modalfix"
|
||||
v-model="year"
|
||||
:locale="'th'"
|
||||
autoApply
|
||||
:enableTimePicker="false"
|
||||
year-picker
|
||||
>
|
||||
<template #year="{ year }">{{ year + 543 }}</template>
|
||||
<template #year-overlay-value="{ value }">{{
|
||||
parseInt(value + 543)
|
||||
}}</template>
|
||||
<template #trigger>
|
||||
<q-input
|
||||
class="bg-white"
|
||||
outlined
|
||||
dense
|
||||
lazy-rules
|
||||
borderless
|
||||
:model-value="dateEnd ? date2Thai(dateEnd) : null"
|
||||
:label="`${'ถึงวันที่'}`"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon name="event" class="cursor-pointer" color="primary">
|
||||
</q-icon>
|
||||
</template>
|
||||
</q-input>
|
||||
</template>
|
||||
</datepicker> -->
|
||||
</div>
|
||||
<div class="q-pr-xs">
|
||||
<datepicker
|
||||
|
|
@ -771,7 +490,7 @@ onMounted(() => {
|
|||
</q-card>
|
||||
|
||||
<!-- Dialog Full Screen -->
|
||||
<q-dialog
|
||||
<!-- <q-dialog
|
||||
v-model="modalFull"
|
||||
persistent
|
||||
:maximized="true"
|
||||
|
|
@ -856,7 +575,7 @@ onMounted(() => {
|
|||
</div>
|
||||
</div>
|
||||
</q-card>
|
||||
</q-dialog>
|
||||
</q-dialog> -->
|
||||
</template>
|
||||
|
||||
<style scoped></style>
|
||||
|
|
@ -1,8 +1,5 @@
|
|||
const workMain = () => import("@/modules/09_leave/views/WorkingMain.vue");
|
||||
const leaveMain = () => import("@/modules/09_leave/views/LeaveListMain.vue");
|
||||
const reportMain = () => import("@/modules/09_leave/views/ReportMain.vue");
|
||||
const reportDetail = () =>
|
||||
import("@/modules/09_leave/components/3_Report/DetailReport.vue");
|
||||
const leaveDetail = () =>
|
||||
import("@/modules/09_leave/components/2_Leave/DetailLeave.vue");
|
||||
const leaveDetailReject = () =>
|
||||
|
|
@ -12,7 +9,8 @@ const ChangeRoundMain = () =>
|
|||
import("@/modules/09_leave/views/ChangeRoundMain.vue");
|
||||
const SpecialTimeMain = () =>
|
||||
import("@/modules/09_leave/views/SpecialTimeMain.vue");
|
||||
|
||||
const leaveReport = () =>
|
||||
import("@/modules/09_leave/components/3_Report/LeaveReport.vue");
|
||||
export default [
|
||||
{
|
||||
path: "/round-time",
|
||||
|
|
@ -95,23 +93,33 @@ export default [
|
|||
},
|
||||
},
|
||||
{
|
||||
path: "/statistics-report",
|
||||
name: "/statistics-report",
|
||||
component: reportMain,
|
||||
meta: {
|
||||
Auth: true,
|
||||
Key: [9],
|
||||
Role: "coin",
|
||||
},
|
||||
},
|
||||
{
|
||||
path: "/statistics-report/:type",
|
||||
name: "/statistics-report-detail",
|
||||
component: reportDetail,
|
||||
path: "/leave-report",
|
||||
name: "/leave-report",
|
||||
component: leaveReport,
|
||||
meta: {
|
||||
Auth: true,
|
||||
Key: [9],
|
||||
Role: "coin",
|
||||
},
|
||||
},
|
||||
// {
|
||||
// path: "/statistics-report",
|
||||
// name: "/statistics-report",
|
||||
// component: reportMain,
|
||||
// meta: {
|
||||
// Auth: true,
|
||||
// Key: [9],
|
||||
// Role: "coin",
|
||||
// },
|
||||
// },
|
||||
// {
|
||||
// path: "/statistics-report/:type",
|
||||
// name: "/statistics-report-detail",
|
||||
// component: reportDetail,
|
||||
// meta: {
|
||||
// Auth: true,
|
||||
// Key: [9],
|
||||
// Role: "coin",
|
||||
// },
|
||||
// },
|
||||
];
|
||||
|
|
|
|||
|
|
@ -88,7 +88,7 @@ function closeDialog() {
|
|||
modalFix.value = false;
|
||||
}
|
||||
|
||||
function save() {
|
||||
function save() {
|
||||
dialogConfirm($q, async () => {
|
||||
showLoader();
|
||||
await http
|
||||
|
|
|
|||
|
|
@ -1,53 +0,0 @@
|
|||
<script setup lang="ts">
|
||||
import { useRouter } from "vue-router";
|
||||
|
||||
const router = useRouter();
|
||||
|
||||
function nextPage(type: string) {
|
||||
router.push(`/statistics-report/${type}`);
|
||||
}
|
||||
</script>
|
||||
<template>
|
||||
<div class="toptitle text-dark col-12 row items-center">รายงานสถิติ</div>
|
||||
<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('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
|
||||
clickable
|
||||
dense
|
||||
class="hover-green"
|
||||
@click="nextPage('leaveday')"
|
||||
>
|
||||
<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>
|
||||
</div>
|
||||
</q-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.q-item.hover-green:hover {
|
||||
background-color: #d5f1ee57;
|
||||
border-radius: 2px;
|
||||
}
|
||||
.q-item.hover-green {
|
||||
padding: 10px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -4,13 +4,31 @@ import { ref } from "vue";
|
|||
/** import Components */
|
||||
import Tab1 from "@/modules/09_leave/components/1_Work/Tab1.vue";
|
||||
import Tab2 from "@/modules/09_leave/components/1_Work/Tab2.vue";
|
||||
import DialogReport from "@/modules/09_leave/components/1_Work/DialogReport.vue";
|
||||
|
||||
const tab = ref("1");
|
||||
|
||||
const modalReport = ref<boolean>(false);
|
||||
|
||||
function onClickOpenDialog() {
|
||||
modalReport.value = !modalReport.value;
|
||||
}
|
||||
</script>
|
||||
<template>
|
||||
<div class="toptitle text-dark col-12 row items-center">
|
||||
รายการลงเวลาปฏิบัติงาน
|
||||
<div class="row">
|
||||
<span class="toptitle text-dark item-center">รายการลงเวลาปฏิบัติงาน</span>
|
||||
<q-space />
|
||||
<q-btn
|
||||
dense
|
||||
flat
|
||||
class="text-primary"
|
||||
label="รายงานสถิติการลา"
|
||||
@click="onClickOpenDialog"
|
||||
>
|
||||
<q-tooltip>รายงานสถิติการลา</q-tooltip>
|
||||
</q-btn>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<q-card bordered flat>
|
||||
<q-tabs
|
||||
|
|
@ -40,6 +58,8 @@ const tab = ref("1");
|
|||
</q-tab-panels>
|
||||
</q-card>
|
||||
</div>
|
||||
|
||||
<DialogReport :modal="modalReport" :close="onClickOpenDialog" />
|
||||
</template>
|
||||
|
||||
<style scoped></style>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue