KIP => report
This commit is contained in:
DESKTOP-1R2VSQH\Lenovo ThinkPad E490
parent
120a435ea3
commit
e45aadbf6c
2 changed files with 291 additions and 88 deletions
|
|
@ -54,4 +54,86 @@ interface ResResults {
|
|||
profileId: string;
|
||||
}
|
||||
|
||||
export type { ResRound, ResDataCapacity, ResEvaluator, ResResults };
|
||||
interface ResRoundEvaluate {
|
||||
createdAt: string;
|
||||
createdFullName: string;
|
||||
createdUserId: string;
|
||||
durationKPI: string;
|
||||
endDate: string;
|
||||
id: string;
|
||||
isActive: boolean;
|
||||
lastUpdateFullName: string;
|
||||
lastUpdateUserId: string;
|
||||
lastUpdatedAt: string;
|
||||
startDate: string;
|
||||
year: number;
|
||||
}
|
||||
|
||||
interface ResOrg {
|
||||
labelName: string;
|
||||
orgCode: string;
|
||||
orgLevel: number;
|
||||
orgName: string;
|
||||
orgRevisionId: string;
|
||||
orgRootName: string;
|
||||
orgTreeCode: string;
|
||||
orgTreeFax: string;
|
||||
orgTreeId: string;
|
||||
orgTreeName: string;
|
||||
orgTreeOrder: number;
|
||||
orgTreePhoneEx: string;
|
||||
orgTreePhoneIn: string;
|
||||
orgTreeRank: string;
|
||||
orgTreeRankSub: string;
|
||||
orgTreeShortName: string;
|
||||
responsibility: string;
|
||||
totalPosition: number;
|
||||
totalPositionCurrentUse: number;
|
||||
totalPositionCurrentVacant: number;
|
||||
totalPositionNextUse: number;
|
||||
totalPositionNextVacant: number;
|
||||
totalRootPosition: number;
|
||||
totalRootPositionCurrentUse: number;
|
||||
totalRootPositionCurrentVacant: number;
|
||||
totalRootPositionNextUse: number;
|
||||
totalRootPositionNextVacant: number;
|
||||
children: ResOrg[];
|
||||
}
|
||||
interface ResReport {
|
||||
reportName: string;
|
||||
template: string;
|
||||
}
|
||||
|
||||
interface ResPerson {
|
||||
avatar: string;
|
||||
avatarName: string;
|
||||
citizenId: string;
|
||||
firstName: string;
|
||||
id: string;
|
||||
lastName: string;
|
||||
org: string;
|
||||
orgRevisionId: string;
|
||||
orgRootShortName: string;
|
||||
posExecutive: string;
|
||||
posLevel: string;
|
||||
posLevelId: string;
|
||||
posNo: string;
|
||||
posType: string;
|
||||
posTypeId: string;
|
||||
position: string;
|
||||
prefix: string;
|
||||
rank: string;
|
||||
root: string;
|
||||
rootId: string;
|
||||
}
|
||||
|
||||
export type {
|
||||
ResRound,
|
||||
ResDataCapacity,
|
||||
ResEvaluator,
|
||||
ResResults,
|
||||
ResRoundEvaluate,
|
||||
ResOrg,
|
||||
ResReport,
|
||||
ResPerson,
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<script setup lang="ts">
|
||||
import { ref, onMounted } from "vue";
|
||||
import { ref, onMounted, reactive, watch } from "vue";
|
||||
import { useQuasar } from "quasar";
|
||||
import { VuePDF, usePDF } from "@tato30/vue-pdf";
|
||||
import config from "@/app.config";
|
||||
|
|
@ -7,18 +7,40 @@ import http from "@/plugins/http";
|
|||
import axios from "axios";
|
||||
import genReport from "@/plugins/genreport";
|
||||
|
||||
import type { DataOption } from "@/modules/14_KPI/interface/index/Main";
|
||||
/**
|
||||
* importType
|
||||
*/
|
||||
import type { QTableProps } from "quasar";
|
||||
import type {
|
||||
DataOption,
|
||||
NewPagination,
|
||||
} from "@/modules/14_KPI/interface/index/Main";
|
||||
import type {
|
||||
ResRoundEvaluate,
|
||||
ResOrg,
|
||||
ResReport,
|
||||
ResPerson,
|
||||
} from "@/modules/14_KPI/interface/response/Main";
|
||||
|
||||
import { useCounterMixin } from "@/stores/mixin";
|
||||
|
||||
/**
|
||||
* importComponents
|
||||
*/
|
||||
import DialogHeader from "@/components/DialogHeader.vue";
|
||||
|
||||
/**
|
||||
* importStore
|
||||
*/
|
||||
import { useCounterMixin } from "@/stores/mixin";
|
||||
|
||||
/**
|
||||
* use
|
||||
*/
|
||||
const $q = useQuasar();
|
||||
const { showLoader, hideLoader, messageError } = useCounterMixin();
|
||||
|
||||
const { showLoader, hideLoader, messageError, date2Thai, dialogConfirm } =
|
||||
useCounterMixin();
|
||||
|
||||
/**
|
||||
* ตัวแปรงาน
|
||||
*/
|
||||
const year = ref<number | null>(new Date().getFullYear());
|
||||
const round = ref<string>("");
|
||||
const organization = ref<string>("");
|
||||
|
|
@ -66,6 +88,9 @@ const listReportMain = ref<DataOption[]>([
|
|||
]);
|
||||
const listReport = ref<DataOption[]>([]);
|
||||
|
||||
/**
|
||||
* funtion fetchข้อมูลรอบการประเมิน
|
||||
*/
|
||||
function fetchRoundOption() {
|
||||
http
|
||||
.get(
|
||||
|
|
@ -74,8 +99,9 @@ function fetchRoundOption() {
|
|||
)
|
||||
.then(async (res) => {
|
||||
const data = await res.data.result.data;
|
||||
|
||||
if (res.data.result.data.length > 0) {
|
||||
const list = await data.map((e: any) => ({
|
||||
const list = await data.map((e: ResRoundEvaluate) => ({
|
||||
id: e.id,
|
||||
name:
|
||||
e.durationKPI === "OCT"
|
||||
|
|
@ -98,6 +124,9 @@ function fetchRoundOption() {
|
|||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* function fetch ข้อมูลโครงสร้างปัจจุบัน
|
||||
*/
|
||||
function fetchActiveId() {
|
||||
showLoader();
|
||||
http
|
||||
|
|
@ -112,12 +141,16 @@ function fetchActiveId() {
|
|||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* function fetch ข้อมูลหน่วยงาน
|
||||
* @param id โครงสร้างปัจจุบัน
|
||||
*/
|
||||
function fetchListOrg(id: string) {
|
||||
showLoader();
|
||||
http
|
||||
.get(config.API.orgByid(id))
|
||||
.then(async (res) => {
|
||||
const data = await res.data.result.map((item: any) => ({
|
||||
const data = await res.data.result.map((item: ResOrg) => ({
|
||||
id: item.orgTreeId,
|
||||
name: item.orgName,
|
||||
}));
|
||||
|
|
@ -131,13 +164,16 @@ function fetchListOrg(id: string) {
|
|||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* function fetch รายงาน
|
||||
*/
|
||||
function fetchReport() {
|
||||
showLoader();
|
||||
const body = {
|
||||
type: typeReport.value,
|
||||
periodId: round.value,
|
||||
root: organization.value,
|
||||
// persanalId: persanalId.value,
|
||||
profileId: persanalId.value ? persanalId.value : undefined,
|
||||
};
|
||||
http
|
||||
.post(config.API.kpiReport(), body)
|
||||
|
|
@ -149,6 +185,9 @@ function fetchReport() {
|
|||
.catch((err) => {
|
||||
messageError($q, err);
|
||||
hideLoader();
|
||||
})
|
||||
.finally(() => {
|
||||
persanalId.value = "";
|
||||
});
|
||||
}
|
||||
|
||||
|
|
@ -156,7 +195,7 @@ function fetchReport() {
|
|||
* function เรียกไฟล์ PDF
|
||||
* @param data ข้อมูลบัญชีวันลา
|
||||
*/
|
||||
function genPDf(data: any) {
|
||||
function genPDf(data: ResReport) {
|
||||
showLoader();
|
||||
axios
|
||||
.post(config.API.reportTemplate + `/docx`, data, {
|
||||
|
|
@ -184,6 +223,10 @@ function genPDf(data: any) {
|
|||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* function เปลี่ยนประเภทรายงาน
|
||||
* @param val ประเภทรายงาน
|
||||
*/
|
||||
function changOption(val: string) {
|
||||
if (
|
||||
val === "KPI1" ||
|
||||
|
|
@ -202,6 +245,12 @@ function changOption(val: string) {
|
|||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* function ค้นหาคำใน select
|
||||
* @param val คำค้นหา
|
||||
* @param update function
|
||||
* @param type ประเภท select
|
||||
*/
|
||||
function filterSelector(val: string, update: Function, type: string) {
|
||||
switch (type) {
|
||||
case "typereport":
|
||||
|
|
@ -224,48 +273,64 @@ function filterSelector(val: string, update: Function, type: string) {
|
|||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* ข้อมูล file
|
||||
*/
|
||||
const splitterModel = ref(14);
|
||||
const numOfPages = ref<number>(0);
|
||||
const page = ref<number>(1);
|
||||
const pdfSrc = ref<any>();
|
||||
const dataDownload = ref<any>();
|
||||
const dataDownload = ref<ResReport | null>();
|
||||
|
||||
async function downloadReport(data: any, type: string) {
|
||||
/**
|
||||
* function โหลดไฟล์
|
||||
* @param data ข่อมูลไฟล์
|
||||
* @param type นามสกุลไฟล์
|
||||
*/
|
||||
function downloadReport(data: ResReport | null | undefined, type: string) {
|
||||
const name =
|
||||
listReportMain.value.find((e) => e.id === typeReport.value)?.name ?? "";
|
||||
var fileName = name;
|
||||
genReport(data, fileName, type);
|
||||
}
|
||||
|
||||
/** ไปหน้าต่อไปของรายงาน */
|
||||
/**
|
||||
* ไปหน้าต่อไปของรายงาน
|
||||
*/
|
||||
function nextPage() {
|
||||
if (page.value < numOfPages.value) {
|
||||
page.value++;
|
||||
}
|
||||
}
|
||||
|
||||
/** กลับหน้าก่อนหน้าของรายงาน */
|
||||
/**
|
||||
* กลับหน้าก่อนหน้าของรายงาน ฏ
|
||||
*/
|
||||
function backPage() {
|
||||
if (page.value !== 1) {
|
||||
page.value--;
|
||||
}
|
||||
}
|
||||
|
||||
/*******/
|
||||
/**
|
||||
* popup เลือกราชชื่อ
|
||||
*/
|
||||
const modal = ref<boolean>(false);
|
||||
const persanalId = ref<string>("");
|
||||
const filter = ref<string>("");
|
||||
const rowsPerson = ref<any[]>([
|
||||
{
|
||||
id: "1",
|
||||
citizenId: "12345678910123",
|
||||
name: "tset,",
|
||||
posNo: "1",
|
||||
position: "ตำแหน่งในสายงาน",
|
||||
posType: "ตำแหน่งประเภท",
|
||||
posLevel: "ระดับ",
|
||||
},
|
||||
const typeFilter = ref<DataOption[]>([
|
||||
{ id: "fullName", name: "ชื่อ-นามสกุล" },
|
||||
{ id: "citizenId", name: "เลขประจำตัวประชาชน" },
|
||||
]);
|
||||
const formFilter = reactive({
|
||||
page: 1,
|
||||
pageSize: 10,
|
||||
searchField: "fullName",
|
||||
searchKeyword: "",
|
||||
});
|
||||
const maxPage = ref<number>(1);
|
||||
const total = ref<number>(0);
|
||||
|
||||
const rowsPerson = ref<ResPerson[]>([]);
|
||||
const columns = ref<QTableProps["columns"]>([
|
||||
{
|
||||
name: "citizenId",
|
||||
|
|
@ -281,6 +346,9 @@ const columns = ref<QTableProps["columns"]>([
|
|||
align: "left",
|
||||
label: "ชื่อ-นามสกุล",
|
||||
field: "name",
|
||||
format(val, row) {
|
||||
return `${row.prefix ?? ""}${row.firstName ?? ""} ${row.lastName ?? ""}`;
|
||||
},
|
||||
sortable: false,
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
|
|
@ -323,25 +391,80 @@ const columns = ref<QTableProps["columns"]>([
|
|||
},
|
||||
]);
|
||||
|
||||
/**
|
||||
* function เปิด popup เลือกราชชื่อ
|
||||
*/
|
||||
function onClickModal() {
|
||||
modal.value = true;
|
||||
if ((modal.value = true)) {
|
||||
fetchListPerson();
|
||||
}
|
||||
fetchListPerson();
|
||||
}
|
||||
|
||||
/**
|
||||
* function ปิด popup เลือกราชชื่อ
|
||||
*/
|
||||
function onCloseModal() {
|
||||
modal.value = false;
|
||||
formFilter.page = 1;
|
||||
formFilter.searchField = "fullName";
|
||||
formFilter.searchKeyword = "";
|
||||
}
|
||||
|
||||
function fetchListPerson() {}
|
||||
/**
|
||||
* function fetch รายชื่อข้อมูลทะเบียนประวัติ
|
||||
*/
|
||||
function fetchListPerson() {
|
||||
showLoader();
|
||||
let queryParams = {
|
||||
page: formFilter.page,
|
||||
pageSize: formFilter.pageSize,
|
||||
};
|
||||
if (formFilter.searchKeyword) {
|
||||
queryParams = Object.assign({}, queryParams, {
|
||||
searchField: formFilter.searchField,
|
||||
searchKeyword: formFilter.searchKeyword,
|
||||
});
|
||||
}
|
||||
http
|
||||
.get(config.API.registryNew(""), { params: queryParams })
|
||||
.then((res) => {
|
||||
maxPage.value = Math.ceil(res.data.result.total / formFilter.pageSize);
|
||||
rowsPerson.value = res.data.result.data;
|
||||
total.value = res.data.result.total;
|
||||
})
|
||||
.catch((err) => {
|
||||
messageError($q, err);
|
||||
})
|
||||
.finally(() => {
|
||||
hideLoader();
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* functiuon เลือกราชชื่อ
|
||||
* @param id profile ID
|
||||
*/
|
||||
function onSelectPerson(id: string) {
|
||||
persanalId.value = id;
|
||||
onCloseModal();
|
||||
fetchReport();
|
||||
}
|
||||
|
||||
/**
|
||||
* function เปลี่ยนแถวต่อหน้า
|
||||
* @param newPagination ข้อมูล Paging
|
||||
*/
|
||||
function updatePageSizePagination(newPagination: NewPagination) {
|
||||
formFilter.page = 1;
|
||||
formFilter.pageSize = newPagination.rowsPerPage;
|
||||
}
|
||||
|
||||
watch(
|
||||
() => formFilter.pageSize,
|
||||
() => {
|
||||
fetchListPerson();
|
||||
}
|
||||
);
|
||||
|
||||
onMounted(() => {
|
||||
fetchRoundOption();
|
||||
fetchActiveId();
|
||||
|
|
@ -497,43 +620,6 @@ onMounted(() => {
|
|||
|
||||
<div class="q-pa-sm" v-else>
|
||||
<q-btn color="primary" label="เลือกรายชื่อ" @click="onClickModal" />
|
||||
|
||||
<!-- <q-select
|
||||
class="bg-white"
|
||||
style="width: 200px"
|
||||
dense
|
||||
hide-bottom-space
|
||||
outlined
|
||||
option-label="name"
|
||||
option-value="id"
|
||||
emit-value
|
||||
map-options
|
||||
v-model="searchField"
|
||||
:options="typeFilter"
|
||||
label="ค้นหาจาก"
|
||||
/>
|
||||
|
||||
<q-input
|
||||
class="bg-white"
|
||||
v-model="search"
|
||||
outlined
|
||||
clearable
|
||||
hide-bottom-space
|
||||
dense
|
||||
label="คำค้น"
|
||||
style="width: 350px"
|
||||
>
|
||||
<template v-slot:after>
|
||||
<q-btn
|
||||
color="primary"
|
||||
icon="search"
|
||||
label="ค้นหา"
|
||||
class="full-width q-py-sm q-px-md"
|
||||
@click="fetchReport"
|
||||
>
|
||||
</q-btn>
|
||||
</template>
|
||||
</q-input> -->
|
||||
</div>
|
||||
</q-toolbar>
|
||||
|
||||
|
|
@ -627,16 +713,48 @@ onMounted(() => {
|
|||
</q-card>
|
||||
|
||||
<q-dialog v-model="modal" persistent>
|
||||
<q-card style="width: 900px; max-width: 80vw">
|
||||
<q-card style="width: 1000px; max-width: 100vw">
|
||||
<DialogHeader :tittle="'เลือกราชชื่อ'" :close="onCloseModal" />
|
||||
<q-separator />
|
||||
<q-card-section class="q-col-gutter-sm">
|
||||
<div class="col-12">
|
||||
<q-input outlined dense v-model="filter" label="ค้นหา">
|
||||
<template v-slot:append>
|
||||
<q-icon name="search" color="grey-5" />
|
||||
</template>
|
||||
</q-input>
|
||||
<div class="row col-12 q-col-gutter-sm">
|
||||
<div class="col-3">
|
||||
<q-select
|
||||
class="bg-white"
|
||||
dense
|
||||
hide-bottom-space
|
||||
outlined
|
||||
option-label="name"
|
||||
option-value="id"
|
||||
emit-value
|
||||
map-options
|
||||
v-model="formFilter.searchField"
|
||||
:options="typeFilter"
|
||||
label="ค้นหาจาก"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-9">
|
||||
<q-input
|
||||
class="bg-white"
|
||||
v-model="formFilter.searchKeyword"
|
||||
outlined
|
||||
clearable
|
||||
hide-bottom-space
|
||||
dense
|
||||
label="คำค้น"
|
||||
>
|
||||
<template v-slot:after>
|
||||
<q-btn
|
||||
color="primary"
|
||||
icon="search"
|
||||
label="ค้นหา"
|
||||
class="full-width q-py-sm q-px-md"
|
||||
@click="(formFilter.page = 1), fetchListPerson()"
|
||||
>
|
||||
</q-btn>
|
||||
</template>
|
||||
</q-input>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<d-table
|
||||
|
|
@ -649,6 +767,7 @@ onMounted(() => {
|
|||
bordered
|
||||
dense
|
||||
:rows-per-page-options="[10, 25, 50, 100]"
|
||||
@update:pagination="updatePageSizePagination"
|
||||
>
|
||||
<template v-slot:header="props">
|
||||
<q-tr :props="props">
|
||||
|
|
@ -675,18 +794,20 @@ onMounted(() => {
|
|||
</q-td>
|
||||
</q-tr>
|
||||
</template>
|
||||
<!-- <template v-slot:pagination="scope">
|
||||
<q-pagination
|
||||
v-model="reqMaster.page"
|
||||
active-color="primary"
|
||||
color="dark"
|
||||
:max="totalPage"
|
||||
:max-pages="5"
|
||||
size="sm"
|
||||
boundary-links
|
||||
direction-links
|
||||
></q-pagination>
|
||||
</template> -->
|
||||
<template v-slot:pagination="scope">
|
||||
ทั้งหมด {{ total }} รายการ
|
||||
<q-pagination
|
||||
v-model="formFilter.page"
|
||||
active-color="primary"
|
||||
color="dark"
|
||||
:max="maxPage"
|
||||
:max-pages="5"
|
||||
size="sm"
|
||||
boundary-links
|
||||
direction-links
|
||||
@update:model-value="fetchListPerson()"
|
||||
></q-pagination>
|
||||
</template>
|
||||
</d-table>
|
||||
</div>
|
||||
</q-card-section>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue