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

Merge branch 'nice' into develop

Browse source
This commit is contained in:
DESKTOP-1R2VSQH\Lenovo ThinkPad E490 2024-12-11 10:37:53 +07:00
commit ff7610e60d
2 changed files with 194 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

16
src/modules/05_placement/router.ts
View file

@ -89,6 +89,10 @@ const FormAppointPage = () =>
import("./components/probation/FormAppoint/FormAppoint.vue");
const FormAppointPageDetail = () =>
import("./components/probation/FormAppoint/FormAppoint.vue");
//Report
const ReportPage = () => import("./views/09_reportMain.vue");
export default [
{
path: "/placement",
@ -412,4 +416,16 @@ export default [
Role: "STAFF",
},
},
// รายงาน
{
path: "/placement/report",
name: "placementReport",
component: ReportPage,
meta: {
Auth: true,
Key: "SYS_PLACEMENT_REPORT",
Role: "STAFF",
},
},
];

178
src/modules/05_placement/views/09_reportMain.vue Normal file
View file

@ -0,0 +1,178 @@
<script setup lang="ts">
import { ref } from "vue";
import { VuePDF, usePDF } from "@tato30/vue-pdf";
import type { optionData } from "@/modules/05_placement/interface/index/Main";
import LoadView from "@/components/LoadView.vue";
/** Filter*/
const reportType = ref<string>("");
const optionReport = ref<optionData[]>([
{
id: "1",
name: "จำนวนข้าราชการ กทม. สามัญที่ได้รับการบรรจุ แต่งตั้ง ย้าย และโอน",
},
{
id: "2",
name: "จำนวนลูกจ้างประจำ กทม. ที่ได้รับการจ้าง แต่งตั้งและย้าย",
},
]);
/** View*/
const isLoadPDF = ref<boolean>(false);
const numOfPages = ref<number>(0);
const page = ref<number>(1);
const pdfSrc = ref<any>();
/** ไปหน้าต่อไปของรายงาน */
function nextPage() {
if (page.value < numOfPages.value) {
page.value++;
}
}
/** กลับหน้าก่อนหน้าของรายงาน */
function backPage() {
if (page.value !== 1) {
page.value--;
}
}
</script>
<template>
<div class="toptitle text-dark col-12 row items-center">
รายงานบรรจุ แต่งตั้ง ย้าย โอน
</div>
<div class="q-pa-sm q-gutter-sm">
<q-card flat bordered class="col-12">
<div class="row q-col-gutter-sm q-pa-sm">
<div class="row col-12">
<q-select
outlined
dense
v-model="reportType"
:options="optionReport"
label="รายงาน"
emit-value
map-options
option-label="name"
option-value="id"
style="width: 500px"
>
</q-select>
<q-space />
<q-btn
flat
round
color="primary"
icon="download"
:disable="!reportType"
>
</q-btn>
</div>
</div>
</q-card>
<q-card flat bordered class="col-12">
<q-card-section class="col-lg-9 col-md-8 col-xs-12 scroll">
<q-splitter
horizontal
style="
height: 75vh;
border: 1px solid rgb(210, 210, 210);
border-radius: 5px;
"
before-class="overflow-hidden disable"
separator-class="bg-white disabled"
>
<template v-slot:before>
<div class="q-px-sm">
<div class="row items-start items-center">
<div class="col">
<q-btn
padding="xs"
icon="mdi-chevron-left"
color="grey-2"
text-color="grey-5"
size="md"
class="my-auto"
@click="backPage"
:disable="page == 1"
/>
</div>
<div class="col-12 col-md-auto">
<div class="q-pa-md flex">
หน้าที่ {{ page }} จาก {{ numOfPages }}
</div>
</div>
<div class="col text-right">
<q-btn
padding="xs"
icon="mdi-chevron-right"
color="grey-2"
text-color="grey-5"
size="md"
@click="nextPage"
:disable="page === numOfPages"
/>
</div>
</div>
</div>
</template>
<template v-slot:after>
<div class="q-pa-md">
<LoadView v-if="isLoadPDF" />
<VuePDF
v-else
ref="vuePDFRef"
:pdf="pdfSrc"
:page="page"
fit-parent
/>
</div>
</template>
<template v-slot:default>
<div class="q-pa-md">
<div class="row items-start items-center">
<div class="col">
<q-btn
padding="xs"
icon="mdi-chevron-left"
color="grey-2"
text-color="grey-5"
size="md"
class="my-auto"
@click="backPage"
:disable="page == 1"
/>
</div>
<div class="col-12 col-md-auto">
<div class="q-pa-md flex">
หน้าที่ {{ page }} จาก {{ numOfPages }}
</div>
</div>
<div class="col text-right">
<q-btn
padding="xs"
icon="mdi-chevron-right"
color="grey-2"
text-color="grey-5"
size="md"
@click="nextPage"
:disable="page === numOfPages"
/>
</div>
</div>
</div>
</template>
</q-splitter>
</q-card-section>
</q-card>
</div>
</template>
<style scoped></style>