From e45aadbf6c781f0e6f84fda248c5631903bcef2c Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Wed, 10 Jul 2024 10:40:48 +0700
Subject: [PATCH] KIP => report

---
 src/modules/14_KPI/interface/response/Main.ts |  84 ++++-
 src/modules/14_KPI/views/report.vue           | 295 ++++++++++++------
 2 files changed, 291 insertions(+), 88 deletions(-)

diff --git a/src/modules/14_KPI/interface/response/Main.ts b/src/modules/14_KPI/interface/response/Main.ts
index cc702b947..a2179300b 100644
--- a/src/modules/14_KPI/interface/response/Main.ts
+++ b/src/modules/14_KPI/interface/response/Main.ts
@@ -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,
+};
diff --git a/src/modules/14_KPI/views/report.vue b/src/modules/14_KPI/views/report.vue
index e6af5db28..8a1f962dd 100644
--- a/src/modules/14_KPI/views/report.vue
+++ b/src/modules/14_KPI/views/report.vue
@@ -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>