hrms-mgt/src/modules/14_KPI/views/report.vue

<script setup lang="ts">
import { ref, onMounted } from "vue";
import { useQuasar } from "quasar";
import { VuePDF, usePDF } from "@tato30/vue-pdf";
import config from "@/app.config";
import http from "@/plugins/http";
import axios from "axios";
import genReport from "@/plugins/genreport";

import type { DataOption } from "@/modules/14_KPI/interface/index/Main";
import type { QTableProps } from "quasar";

import { useCounterMixin } from "@/stores/mixin";

import DialogHeader from "@/components/DialogHeader.vue";

const $q = useQuasar();

const { showLoader, hideLoader, messageError, date2Thai, dialogConfirm } =
  useCounterMixin();

const year = ref<number | null>(new Date().getFullYear());
const round = ref<string>("");
const organization = ref<string>("");
const roundOp = ref<DataOption[]>([]);
const organizationOpsMain = ref<DataOption[]>([]);
const organizationOps = ref<DataOption[]>([]);
const typeReport = ref<string>("");
const listReportMain = ref<DataOption[]>([
  {
    id: "KPI1",
    name: "รายงานสรุปผลการประเมินผลการปฏิบัติราชการระดับบุคคล แสดงจำนวนผู้มีผลการประเมินระดับต่างๆ ในแต่ละรอบการประเมินรายหน่วยงาน/ส่วนราชการ",
  },
  {
    id: "KPI2",
    name: "รายงานสรุปผลการประเมินผลการปฏิบัติราชการระดับบุคคล แสดงรายละเอียดผู้มีผลการประเมินระดับต่างๆ รายหน่วยงาน/ส่วนราชการ ",
  },
  {
    id: "KPI3",
    name: "รายงานสรุปผลการประเมินผลการปฏิบัติราชการระดับบุคคล แสดงรายละเอียดผลการประเมินของผู้ใต้บังคับบัญชา",
  },
  {
    id: "KPI4",
    name: "แบบสรุปผลการประเมินผลการปฏิบัติราชการระดับบุคคล (รายบุคคล)",
  },
  {
    id: "KPI5",
    name: "รายงานผลการประเมินผลการปฏิบัติราชการย้อนหลัง ๕ ปี",
  },
  {
    id: "KPI6",
    name: "รายงานผลการประเมินผลการปฏิบัติราชการย้อนหลัง ๓ ปี",
  },
  {
    id: "KPI7",
    name: "รายงานสรุปแผนพัฒนาการปฏิบัติราชการรายบุคคล",
  },
  {
    id: "KPI8",
    name: "รายงานแผนพัฒนาการปฏิบัติราชการรายบุคคล",
  },
  {
    id: "KPI9",
    name: "จัดทำประกาศผู้มีผลการปฏิบัติราชการระดับดีเด่นและดีมาก",
  },
]);
const listReport = ref<DataOption[]>([]);

function fetchRoundOption() {
  http
    .get(
      config.API.kpiPeriod +
        `?page=${1}&pageSize=${10}&keyword=${""}&year=${year.value}`
    )
    .then(async (res) => {
      const data = await res.data.result.data;
      if (res.data.result.data.length > 0) {
        const list = await data.map((e: any) => ({
          id: e.id,
          name:
            e.durationKPI === "OCT"
              ? "รอบตุลาคม"
              : e.durationKPI === "APR"
              ? "รอบเมษายน"
              : "",
        }));
        roundOp.value = list;
      } else {
        roundOp.value = [];
        round.value = "";
        organization.value = "";
        dataDownload.value = null;
        pdfSrc.value = null;
      }
    })
    .catch((err) => {
      messageError($q, err);
    });
}

function fetchActiveId() {
  showLoader();
  http
    .get(config.API.activeOrganization)
    .then((res) => {
      const data = res.data.result;
      fetchListOrg(data.activeId);
    })
    .catch((err) => {
      messageError($q, err);
      hideLoader();
    });
}

function fetchListOrg(id: string) {
  showLoader();
  http
    .get(config.API.orgByid(id))
    .then(async (res) => {
      const data = await res.data.result.map((item: any) => ({
        id: item.orgTreeId,
        name: item.orgName,
      }));
      organizationOpsMain.value = data;
    })
    .catch((err) => {
      messageError($q, err);
    })
    .finally(() => {
      hideLoader();
    });
}

function fetchReport() {
  showLoader();
  const body = {
    type: typeReport.value,
    periodId: round.value,
    root: organization.value,
    // persanalId: persanalId.value,
  };
  http
    .post(config.API.kpiReport(), body)
    .then((res) => {
      dataDownload.value = res.data.result;
      page.value = 1;
      genPDf(res.data.result);
    })
    .catch((err) => {
      messageError($q, err);
      hideLoader();
    });
}

/**
 * function เรียกไฟล์ PDF
 * @param data  ข้อมูลบัญชีวันลา
 */
function genPDf(data: any) {
  showLoader();
  axios
    .post(config.API.reportTemplate + `/docx`, data, {
      headers: {
        accept: "application/pdf",
        "content-Type": "application/json",
      },
      responseType: "blob",
    })
    .then(async (res) => {
      const blob = new Blob([res.data]);
      const objectUrl = URL.createObjectURL(blob);

      const pdfData = await usePDF(`${objectUrl}`);
      showLoader();
      setTimeout(() => {
        pdfSrc.value = pdfData.pdf.value;
        numOfPages.value = pdfData.pages.value;
        hideLoader();
      }, 1500);
    })
    .catch(async (e) => {
      messageError($q, JSON.parse(await e.response.data.text()));
      hideLoader();
    });
}

function changOption(val: string) {
  if (
    val === "KPI1" ||
    val === "KPI2" ||
    val === "KPI3" ||
    val === "KPI7" ||
    val === "KPI9"
  ) {
    persanalId.value = "";
    if (round.value !== "" && organization.value !== "") {
      fetchReport();
    }
  } else {
    round.value = "";
    organization.value = "";
  }
}

function filterSelector(val: string, update: Function, type: string) {
  switch (type) {
    case "typereport":
      update(() => {
        listReport.value = listReportMain.value.filter(
          (v: DataOption) => v.name.toLowerCase().indexOf(val) > -1
        );
      });
      break;
    case "organization":
      update(() => {
        organizationOps.value = organizationOpsMain.value.filter(
          (v: DataOption) => v.name.toLowerCase().indexOf(val) > -1
        );
      });
      break;

    default:
      break;
  }
}

const splitterModel = ref(14);
const numOfPages = ref<number>(0);
const page = ref<number>(1);
const pdfSrc = ref<any>();
const dataDownload = ref<any>();

async function downloadReport(data: any, 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--;
  }
}

/*******/
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 columns = ref<QTableProps["columns"]>([
  {
    name: "citizenId",
    align: "left",
    label: "เลขประจำตัวประชาชน",
    sortable: false,
    field: "citizenId",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
  },
  {
    name: "name",
    align: "left",
    label: "ชื่อ-นามสกุล",
    field: "name",
    sortable: false,
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
  },
  {
    name: "posNo",
    align: "left",
    label: "ตำแหน่งเลขที่",
    sortable: false,
    field: "posNo",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
  },
  {
    name: "position",
    align: "left",
    label: "ตำแหน่งในสายงาน",
    sortable: false,
    field: "position",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
  },
  {
    name: "posType",
    align: "left",
    label: "ตำแหน่งประเภท",
    sortable: false,
    field: "posType",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
  },
  {
    name: "posLevel",
    align: "left",
    label: "ระดับ",
    sortable: false,
    field: "posLevel",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
  },
]);

function onClickModal() {
  modal.value = !modal.value;
  if ((modal.value = true)) {
    fetchListPerson();
  }
}

function fetchListPerson() {}

function onSelectPerson(id: string) {
  persanalId.value = id;
  modal.value = false;
  fetchReport();
}

onMounted(() => {
  fetchRoundOption();
  fetchActiveId();
});
</script>

<template>
  <div class="toptitle text-dark col-12 row items-center">รายงาน</div>
  <q-card flat bordered>
    <q-card-section class="q-gutter-y-sm">
      <q-toolbar style="padding: 0">
        <div class="row q-gutter-sm">
          <q-select
            style="min-width: 100px"
            dense
            hide-bottom-space
            outlined
            option-label="name"
            option-value="id"
            emit-value
            map-options
            v-model="typeReport"
            :options="listReport"
            label="รายงาน"
            use-input
            @update:model-value="changOption"
            @filter="(inputValue: string,
            doneFn: Function) => filterSelector(inputValue, doneFn ,'typereport')"
          />
        </div>

        <q-space />

        <q-btn
          flat
          round
          color="primary"
          icon="download"
          :disable="!dataDownload"
        >
          <q-menu>
            <q-list style="min-width: 150px">
              <q-item
                clickable
                v-close-popup
                @click="downloadReport(dataDownload, 'pdf')"
              >
                <q-item-section avatar
                  ><q-icon color="red" name="mdi-file-pdf"
                /></q-item-section>
                <q-item-section>ไฟล์ .PDF</q-item-section>
              </q-item>
              <q-item
                clickable
                v-close-popup
                @click="downloadReport(dataDownload, 'docx')"
              >
                <q-item-section avatar
                  ><q-icon color="blue" name="mdi-file-word"
                /></q-item-section>
                <q-item-section>ไฟล์ .docx</q-item-section>
              </q-item>
            </q-list>
          </q-menu>
        </q-btn>
      </q-toolbar>

      <q-toolbar
        class="q-pa-sm bg-grey-2"
        style="padding: 0; border-radius: 5px"
        v-if="typeReport"
      >
        <div
          class="row q-gutter-sm"
          v-if="
            typeReport === 'KPI1' ||
            typeReport === 'KPI2' ||
            typeReport === 'KPI3' ||
            typeReport === 'KPI7' ||
            typeReport === 'KPI9'
          "
        >
          <datepicker
            menu-class-name="modalfix"
            v-model="year"
            style="width: 150px"
            :locale="'th'"
            autoApply
            year-picker
            :enableTimePicker="false"
            @update:model-value="fetchRoundOption()"
          >
            <template #year="{ year }">{{ year + 543 }}</template>
            <template #year-overlay-value="{ value }">{{
              parseInt(value + 543)
            }}</template>
            <template #trigger>
              <q-input
                dense
                outlined
                hide-bottom-space
                :model-value="!!year ? year + 543 : null"
                :label="`${'ปีงบประมาณ'}`"
                class="bg-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"
            v-model="round"
            outlined
            label="รอบการประเมิน"
            dense
            option-label="name"
            option-value="id"
            :options="roundOp"
            style="min-width: 150px"
            emit-value
            map-options
            :disable="roundOp.length === 0"
            @update:model-value="changOption(typeReport)"
          />
          <q-select
            class="bg-white"
            :disable="roundOp.length === 0"
            style="min-width: 100px"
            dense
            hide-bottom-space
            outlined
            option-label="name"
            option-value="id"
            emit-value
            map-options
            v-model="organization"
            :options="organizationOps"
            label="หน่วยงาน"
            use-input
            @update:model-value="changOption(typeReport)"
            @filter="(inputValue: string,
            
            doneFn: Function) => filterSelector(inputValue, doneFn,'organization' )"
          />
        </div>

        <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>

      <q-splitter
        v-model="splitterModel"
        horizontal
        style="
          height: 70vh;
          border: 1px solid rgb(210, 210, 210);
          border-radius: 5px;
        "
        before-class="overflow-hidden disable"
        separator-class="bg-white disabled"
      >
        <template v-slot:before v-if="pdfSrc">
          <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 v-if="pdfSrc">
          <div class="q-pa-md">
            <VuePDF ref="vuePDFRef" :pdf="pdfSrc" :page="page" fit-parent />
          </div>
        </template>
        <template v-slot:default v-if="pdfSrc">
          <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>

  <q-dialog v-model="modal" persistent>
    <q-card style="width: 900px; max-width: 80vw">
      <DialogHeader :tittle="'เลือกราชชื่อ'" :close="onClickModal" />
      <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>
        <div class="col-12">
          <d-table
            ref="table"
            :columns="columns"
            :rows="rowsPerson"
            :paging="true"
            row-key="id"
            flat
            bordered
            dense
            :rows-per-page-options="[10, 25, 50, 100]"
          >
            <template v-slot:header="props">
              <q-tr :props="props">
                <q-th v-for="col in props.cols" :key="col.name" :props="props">
                  <span class="text-weight-medium">{{ col.label }}</span>
                </q-th>
                <q-tr auto-width />
              </q-tr>
            </template>
            <template v-slot:body="props">
              <q-tr :props="props" class="cursor-pointer">
                <q-td v-for="col in props.cols" :key="col.name" :props="props">
                  <div>
                    {{ col.value ? col.value : "-" }}
                  </div>
                </q-td>
                <q-td>
                  <q-btn
                    outline
                    color="primary"
                    label="เลือก"
                    @click="onSelectPerson(props.row.id)"
                  />
                </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> -->
          </d-table>
        </div>
      </q-card-section>
    </q-card>
  </q-dialog>
</template>

<style scoped></style>