hrms-mgt/src/modules/12_evaluatePersonal/views/MainPage.vue

<script setup lang="ts">
import { onMounted, ref, watch, computed } from "vue";
import { useQuasar } from "quasar";
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";
import { usePagination } from "@/composables/usePagination";

/** importType*/
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;
const { pagination, params, onRequest } = usePagination("", fetchEvaluteList);

/** 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 filter = ref<string>(""); //คำค้นหา

//ค้นหาตามสถานะ
const selectedStatus = ref<string[]>([
  "CHECK_SPEC",
  "PREPARE_DOC_V1",
  "CHECK_DOC_V1",
  "WAIT_CHECK_DOC_V1",
  "ANNOUNCE_WEB",
  "PREPARE_DOC_V2",
  "WAIT_CHECK_DOC_V2",
  "CHECK_DOC_V2",
]);
//ข้อมูลค้นหาตามสถานะ
const optionsMain = ref<OptionStatus[]>([
  { val: "CHECK_SPEC", label: "ตรวจสอบคุณสมบัติด้วยตนเอง" },
  { val: "PREPARE_DOC_V1", label: "จัดเตรียมเอกสารเล่ม 1" },
  { val: "CHECK_DOC_V1", label: "ตรวจสอบเอกสารเล่ม 1" },
  { val: "WAIT_CHECK_DOC_V1", label: "รอตรวจสอบคุณสมบัติ" },
  { val: "ANNOUNCE_WEB", label: "ประกาศบนเว็บไซต์" },
  { val: "PREPARE_DOC_V2", label: "จัดเตรียมเอกสารเล่ม 2" },
  { val: "WAIT_CHECK_DOC_V2", label: "ตรวจสอบเอกสารเล่ม 2" },
  { val: "CHECK_DOC_V2", label: "รอพิจารณาผลการประเมิน" },
  { val: "DONE", label: "เสร็จสิ้น" },
]);
const options = ref<OptionStatus[]>([]); //ตัวเลือกค้นหาตามสถานะ

/** ชื่อค่าที่ค้นหาสภานะ*/
const label = computed(() => {
  const filterOption = optionsMain.value.filter((option) =>
    selectedStatus.value.includes(option.val)
  );
  const labelval = filterOption.map((e) => e.label);
  if (labelval.length !== 0) {
    return labelval.length <= 2
      ? `${labelval.slice(0, 2).join(", ")}`
      : `${labelval.slice(0, 2).join(", ")}, อื่นๆ (${labelval.length - 2})`;
  } else return "";
});

/** function ค้นหาตาม keyword*/
function filterFn() {
  pagination.value.page = 1;
  fetchEvaluteList();
}

/** function เรียกรายการคำขอประเมิน*/
async function fetchEvaluteList() {
  showLoader();
  const body = {
    ...params.value,
    keyword: filter.value.trim(),
    status: selectedStatus.value,
  };
  await http
    .post(config.API.evaluationMain(), body)
    .then(async (res) => {
      const result = res.data.result;
      pagination.value.rowsNumber = result.total;
      store.fetchData(result.data);
    })
    .catch((e) => {
      messageError($q, e);
    })
    .finally(() => {
      hideLoader();
    });
}

/**
 * funcition redirectToDetail
 * @param id รายการคำขอประเมิน
 */
function Detailpage(id: string, type: string) {
  //เชี่ยวชาญ
  if (type === "EXPERTISE") {
    router.push(`/evaluate/detail-expertise/${id}`);
  } else {
    router.push(`/evaluate/detail/${id}`);
  }
}

/**
 * function ต้นหาข้อมูลของ Option
 * @param val ค่าที่ต้องการฟิลเตอร์
 * @param update  อัพเดทค่า
 * @param refData ดาต้าที่ต้องการฟิลเตอร์
 */
function filterOption(val: string, update: Function) {
  update(() => {
    options.value = optionsMain.value.filter(
      (v: OptionStatus) => v.label.indexOf(val) > -1
    );
  });
}

/** เปิด 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.orgTreeDnaId,
              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
    );
  });
}

/** HookLifecycle */
onMounted(async () => {
  await fetchEvaluteList(); // เรียกข้อมูลรายการปรัเมิน
});
</script>

<template>
  <div class="toptitle text-dark col-12 row items-center">
    รายการคำขอประเมิน
  </div>

  <q-card flat bordered class="col-12 q-mt-sm q-pt-sm q-pa-md">
    <div class="row col-12 q-col-gutter-sm q-mb-sm">
      <q-select
        dense
        outlined
        multiple
        v-model="selectedStatus"
        emit-value
        map-options
        :options="options"
        option-value="val"
        label="ค้นหาสถานะ"
        style="width: 35vw"
        @update:model-value="fetchEvaluteList"
        use-input
        @filter="(inputValue:string,doneFn:Function) => filterOption(inputValue, doneFn) "
      >
        <template v-slot:selected>
          <div>
            {{ label }}
          </div>
        </template>
        <template v-slot:no-option>
          <q-item>
            <q-item-section class="text-grey"> ไม่มีข้อมูล </q-item-section>
          </q-item>
        </template>
      </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"
        for="filterTable"
        dense
        outlined
        v-model="filter"
        label="ค้นหา"
        @keydown.enter.prevent="filterFn"
      >
        <template v-slot:append>
          <q-icon name="search" />
        </template>
      </q-input>

      <q-select
        id="visibleColumns"
        for="visibleColumns"
        v-model="store.visibleColumns"
        multiple
        outlined
        dense
        options-dense
        :display-value="$q.lang.table.columns"
        emit-value
        map-options
        :options="store.columns"
        option-value="name"
        style="min-width: 140px"
        class="col-xs-12 col-sm-3 col-md-2"
      />
    </div>
    <div>
      <p-table
        ref="table"
        :columns="store.columns"
        :rows="store.rows"
        row-key="id"
        flat
        bordered
        :paging="false"
        dense
        class="custom-header-table"
        :visible-columns="store.visibleColumns"
        :rows-per-page-options="[10, 25, 50, 100]"
        v-model:pagination="pagination"
        @request="onRequest"
      >
        <template v-slot:header="props">
          <q-tr :props="props">
            <q-th auto-width />
            <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>
        </template>

        <template v-slot:body="props">
          <q-tr :props="props">
            <q-td auto-width>
              <q-btn
                v-if="checkPermission($route)?.attrIsGet"
                flat
                dense
                round
                color="info"
                icon="mdi-eye"
                @click.stop.prevent="Detailpage(props.row.id, props.row.type)"
              >
                <q-tooltip>รายละเอียด</q-tooltip>
              </q-btn>
            </q-td>
            <q-td v-for="col in props.cols" :key="col.name" :props="props">
              <div v-if="col.name == 'no'">
                {{ props.rowIndex + 1 }}
              </div>

              <div v-else-if="col.name === 'agency'">
                <div class="text-html">
                  {{ !props.row.agency ? "-" : props.row.agency }}
                </div>
              </div>
              <div v-else>
                {{ !col.value ? "-" : col.value }}
              </div>
            </q-td>
          </q-tr>
        </template>
      </p-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>