UI รายงานสรุปจำนวนผลงานการประเมิน

src/modules/12_evaluatePersonal/interface/index/Main.ts

@@ -93,6 +93,37 @@ interface Pagination {
   rowsPerPage: 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[];
+}
+
 export type {
   DataOption,
   InvestigatefactsDataRowType,
@@ -106,4 +137,5 @@ export type {
   OptionStatus,
   Meeting,
   Pagination,
+  ResOrg
 };

src/modules/12_evaluatePersonal/views/MainPage.vue

@@ -1,26 +1,42 @@
 <script setup lang="ts">
 import { onMounted, ref, watch, computed } from "vue";
 import { useQuasar } from "quasar";
-import { useRouter } from "vue-router";
+import { useRouter, useRoute } from "vue-router";
 import { checkPermission } from "@/utils/permissions";
+import genReportXLSX from "@/plugins/genreportxlsx";
+
 import http from "@/plugins/http";
 import config from "@/app.config";
 
 /** importType*/
-import type { OptionStatus } from "@/modules/12_evaluatePersonal/interface/index/Main";
+import type {
+  OptionStatus,
+  DataOption,
+  ResOrg,
+} from "@/modules/12_evaluatePersonal/interface/index/Main";
 
 /** importStore*/
 import { useCounterMixin } from "@/stores/mixin";
 import { useEvalutuonStore } from "@/modules/12_evaluatePersonal/store/Evaluate";
 
+import DialogHeader from "@/components/DialogHeader.vue";
+
 /** use*/
 const $q = useQuasar();
 const router = useRouter();
+const route = useRoute();
 const mixin = useCounterMixin();
 const store = useEvalutuonStore();
 const { showLoader, hideLoader, messageError } = mixin;
 
 /** request body*/
+const organization = ref<string>("");
+const organizationOpsMain = ref<DataOption[]>([]);
+const organizationOps = ref<DataOption[]>([]);
+
+const year = ref<number>(new Date().getFullYear());
+const modalReport = ref<boolean>(false); //ตัวแปร popup report
+const loadingBtn = ref<boolean>(false); //ตัวแปร popup report
 const currentPage = ref<number>(1); //หน้าปัจจุบัน
 const maxPage = ref<number>(0); //จำนวนหน่า
 const page = ref<number>(1); //หน้า
@@ -154,6 +170,94 @@ function filterOption(val: string, update: Function) {
   });
 }
 
+/** เปิด popup reort */
+function onReport() {
+  modalReport.value = true;
+  if (organizationOpsMain.value.length == 0) {
+    getActiveId();
+  }
+}
+
+function closeDialog() {
+  modalReport.value = false;
+  organization.value = "";
+}
+
+async function getReport() {
+  loadingBtn.value = true;
+  await http
+    .get(
+      config.API.evaluationReport +
+        `?year=${year.value + 543}&rootId=${organization.value}`
+    )
+    .then((res) => {
+      const data = res.data.result;
+      const org = organizationOpsMain.value.find((item: DataOption) => {
+        item.id == organization.value;
+      });
+      genReportXLSX(
+        data,
+        org
+          ? `รายงานสรุปจำนวนผลงานการประเมิน_${org.name ? org.name : "ทั้งหมด"}`
+          : "รายงานสรุปจำนวนผลงานการประเมิน",
+        "pdf"
+      );
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      setTimeout(() => {
+        loadingBtn.value = false;
+      }, 500);
+    });
+}
+
+/**
+ * function fetch ข้อมูลโครงสร้างปัจจุบัน
+ */
+async function getActiveId() {
+  showLoader();
+  await http
+    .get(config.API.activeOrganization)
+    .then(async (res) => {
+      const data = await res.data.result;
+      if (data) {
+        await http
+          .get(
+            config.API.orgByIdSystem(data.activeId, route.meta.Key as string)
+          )
+          .then(async (res) => {
+            const data = await res.data.result.map((item: ResOrg) => ({
+              id: item.orgTreeId,
+              name: item.orgName,
+            }));
+            organizationOpsMain.value = data;
+            hideLoader();
+          });
+      }
+    })
+    .catch((e) => {
+      messageError($q, e);
+      hideLoader();
+    })
+    .finally(() => {});
+}
+
+/**
+ * function ค้นหาคำใน select
+ * @param val คำค้นหา
+ * @param update function
+ * @param type ประเภท select
+ */
+function filterSelector(val: string, update: Function) {
+  update(() => {
+    organizationOps.value = organizationOpsMain.value.filter(
+      (v: DataOption) => v.name.toLowerCase().indexOf(val) > -1
+    );
+  });
+}
+
 /** function callback เมื่อมีการเปลี่ยนหน้า*/
 watch(
   () => pageSize.value,
@@ -203,6 +307,11 @@ onMounted(async () => {
       </q-select>
 
       <q-space />
+      <div>
+        <q-btn flat icon="download" round color="primary" @click="onReport">
+          <q-tooltip>รายงานสรุปจำนวนผลงานการประเมิน</q-tooltip>
+        </q-btn>
+      </div>
       <q-input
         class="col-xs-12 col-sm-3 col-md-2"
         id="filterTable"
@@ -305,6 +414,93 @@ onMounted(async () => {
       </d-table>
     </div>
   </q-card>
+
+  <q-dialog v-model="modalReport" persistent>
+    <q-card class="col-12" style="width: 40%">
+      <DialogHeader
+        tittle="รายงานสรุปจำนวนผลงานการประเมิน
+        "
+        :close="closeDialog"
+      />
+      <q-separator />
+      <q-card-section>
+        <div class="column q-gutter-y-sm">
+          <datepicker
+            menu-class-name="modalfix"
+            v-model="year"
+            :locale="'th'"
+            autoApply
+            year-picker
+            :enableTimePicker="false"
+          >
+            <template #year="{ year }">{{ year + 543 }}</template>
+            <template #year-overlay-value="{ value }">{{
+              parseInt(value + 543)
+            }}</template>
+            <template #trigger>
+              <q-input
+                dense
+                outlined
+                :model-value="year === 0 ? 'ทั้งหมด' : Number(year) + 543"
+                :label="`${'ปีงบประมาณ'}`"
+                bg-color="white"
+              >
+                <template v-slot:prepend>
+                  <q-icon
+                    name="event"
+                    class="cursor-pointer"
+                    style="color: var(--q-primary)"
+                  >
+                  </q-icon>
+                </template>
+              </q-input>
+            </template>
+          </datepicker>
+
+          <q-select
+            class="bg-white"
+            style="min-width: 100px"
+            dense
+            hide-selected
+            fill-input
+            hide-bottom-space
+            outlined
+            option-label="name"
+            option-value="id"
+            emit-value
+            map-options
+            v-model="organization"
+            :options="organizationOps"
+            label="หน่วยงาน"
+            use-input
+            @filter="(inputValue: string,
+            
+            doneFn: Function) => filterSelector(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-card-section>
+      <q-separator />
+      <q-card-actions align="right" class="q-ma-xs">
+        <q-btn
+          :loading="loadingBtn"
+          :disable="loadingBtn"
+          color="primary"
+          icon="download"
+          label="ดาวน์โหลดรายงาน"
+          @click="getReport"
+          style="width: 200px"
+        >
+          <q-tooltip>ดาวน์โหลดรายงาน</q-tooltip>
+        </q-btn>
+      </q-card-actions>
+    </q-card>
+  </q-dialog>
 </template>
 
 <style></style>