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

<script setup lang="ts">
import { ref, onMounted, reactive, watch } 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";

/**
 * 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";

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

/**
 * importStore
 */
import { useCounterMixin } from "@/stores/mixin";
import { checkPermission } from "@/utils/permissions";
import { useRoute } from "vue-router";
/**
 * use
 */
const $q = useQuasar();
const { showLoader, hideLoader, messageError } = useCounterMixin();
const route = useRoute();

/**
 * ตัวแปรงาน
 */
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[]>([]); // รายการรายงานทั้งหมด

/**
 * funtion fetchข้อมูลรอบการประเมิน
 */
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: ResRoundEvaluate) => ({
          id: e.id,
          name:
            e.durationKPI === "OCT"
              ? "รอบที่ 2 ตุลาคม"
              : e.durationKPI === "APR"
              ? "รอบที่ 1 เมษายน"
              : "",
        }));
        roundOp.value = list;
      } else {
        roundOp.value = [];
        round.value = "";
        organization.value = "";
        dataDownload.value = null;
        pdfSrc.value = null;
      }
    })
    .catch((err) => {
      messageError($q, err);
    });
}

/**
 * function fetch ข้อมูลโครงสร้างปัจจุบัน
 */
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 fetch ข้อมูลหน่วยงาน
 * @param id โครงสร้างปัจจุบัน
 */
function fetchListOrg(id: string) {
  showLoader();
  http
    .get(config.API.orgByIdSystem(id, 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;
    })
    .catch((err) => {
      messageError($q, err);
    })
    .finally(() => {
      hideLoader();
    });
}

/**
 * function fetch รายงาน
 */
function fetchReport() {
  showLoader();
  const body = {
    type: typeReport.value,
    periodId: round.value,
    root: organization.value,
    profileId: persanalId.value ? persanalId.value : undefined,
  };
  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: ResReport) {
  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) => {
      hideLoader();
      messageError($q, e);
    });
}

/**
 * function เปลี่ยนประเภทรายงาน
 * @param val ประเภทรายงาน
 */
function changOption(val: string) {
  if (
    val === "KPI1" ||
    val === "KPI2" ||
    val === "KPI3" ||
    val === "KPI7" ||
    val === "KPI8" ||
    val === "KPI9"
  ) {
    persanalId.value = val === "KPI8" ? persanalId.value : "";
    organization.value = val === "KPI8" ? "" : organization.value;
    if (round.value && organization.value) {
      fetchReport();
    } else if (round.value && persanalId.value) {
      fetchReport();
    }
  } else {
    round.value = "";
    organization.value = "";
    if (persanalId.value) {
      fetchReport();
    }
  }
}

/**
 * function ค้นหาคำใน select
 * @param val คำค้นหา
 * @param update function
 * @param type ประเภท select
 */
function filterSelector(val: string, update: Function, type: string) {
  switch (type) {
    case "typereport":
      update(() => {
        typeReport.value = val ? "" : typeReport.value;
        listReport.value = listReportMain.value.filter(
          (v: DataOption) => v.name.toLowerCase().indexOf(val) > -1
        );
      });
      break;
    case "organization":
      update(() => {
        organization.value = val ? "" : organization.value;
        organizationOps.value = organizationOpsMain.value.filter(
          (v: DataOption) => v.name.toLowerCase().indexOf(val) > -1
        );
      });
      break;

    default:
      break;
  }
}

/**
 * ข้อมูล file
 */
const splitterModel = ref(14);
const numOfPages = ref<number>(0);
const page = ref<number>(1);
const pdfSrc = ref<any>();
const dataDownload = ref<ResReport | null>();

/**
 * 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 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 roundRef = ref<any>(null);

const rowsPerson = ref<ResPerson[]>([]);
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",
    format(val, row) {
      return `${row.prefix ?? ""}${row.firstName ?? ""}  ${row.lastName ?? ""}`;
    },
    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 เปิด popup เลือกราชชื่อ
 */
function onClickModal() {
  if (typeReport.value === "KPI8") {
    roundRef.value.validate();

    if (!roundRef.value.hasError) {
      modal.value = true;
      fetchListPerson();
    }
  } else {
    modal.value = true;
    fetchListPerson();
  }
}

/**
 * function ปิด popup เลือกราชชื่อ
 */
function onCloseModal() {
  modal.value = false;
  formFilter.page = 1;
  formFilter.searchField = "fullName";
  formFilter.searchKeyword = "";
}

/**
 * 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();
});
</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
            :readonly="!checkPermission($route)?.attrIsGet"
            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')"
          >
            <template v-slot:no-option>
              <q-item>
                <q-item-section class="text-grey"> ไม่มีข้อมูล </q-item-section>
              </q-item>
            </template></q-select
          >
        </div>

        <q-space />

        <q-btn
          v-if="checkPermission($route)?.attrIsGet"
          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 === 'KPI8' ||
            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
            ref="roundRef"
            class="bg-white"
            v-model="round"
            outlined
            label="รอบการประเมิน"
            dense
            hide-bottom-space
            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)"
            lazy-rules
            :rules="
              typeReport === 'KPI8'
                ? [(val:string) => !!val || 'กรุณาเลือกรอบการประเมิน']
                : []
            "
          />
          <q-select
            v-if="typeReport !== 'KPI8'"
            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' )"
          >
            <template v-slot:no-option>
              <q-item>
                <q-item-section class="text-grey"> ไม่มีข้อมูล </q-item-section>
              </q-item>
            </template></q-select
          >
        </div>

        <div
          class="q-pa-sm"
          v-if="
            typeReport === 'KPI4' ||
            typeReport === 'KPI5' ||
            typeReport === 'KPI6' ||
            typeReport === 'KPI8'
          "
        >
          <q-btn
            color="primary"
            label="เลือกรายชื่อ"
            @click="onClickModal"
            :disable="roundOp.length === 0 && typeReport === 'KPI8'"
          />
        </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: 1000px; max-width: 100vw">
      <DialogHeader :tittle="'เลือกราชชื่อ'" :close="onCloseModal" />
      <q-separator />
      <q-card-section class="q-col-gutter-sm">
        <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
            ref="table"
            :columns="columns"
            :rows="rowsPerson"
            :paging="true"
            row-key="id"
            flat
            bordered
            dense
            :rows-per-page-options="[10, 25, 50, 100]"
            @update:pagination="updatePageSizePagination"
          >
            <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">
              ทั้งหมด {{ 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>
    </q-card>
  </q-dialog>
</template>

<style scoped></style>