hrms-mgt/src/modules/14_KPI/views/03_results.vue

<script setup lang="ts">
import { ref, watch } from "vue";
import { useQuasar } from "quasar";

import { useCounterMixin } from "@/stores/mixin";
import { useKpiDataStore } from "@/modules/14_KPI/store";
import http from "@/plugins/http";
import config from "@/app.config";

/** import type*/
import type { ItemsTab } from "@/modules/14_KPI/interface/index/Main";
import type { ResResults } from "@/modules/14_KPI/interface/response/Main";

/** import components*/
import TableResults from "@/modules/14_KPI/components/results/tableResults.vue";
import TableIndividual from "@/modules/14_KPI/components/results/tableIndividual.vue";

/** use*/
const store = useKpiDataStore();
const $q = useQuasar();
const { messageError, showLoader, hideLoader } = useCounterMixin();

const tab = ref<string>("COMPLETE");
const tabItems = ref<ItemsTab[]>([
  { name: "COMPLETE", label: " รอประกาศผล" },
  { name: "KP7", label: "ประกาศผลแล้ว" },
  { name: "IDP", label: "แผนพัฒนาการปฏิบัติราชการรายบุคคล" },
]);
const dataList = ref<ResResults[]>([]); // ข่อมูลรายการ
const page = ref<number>(1);
const pageSize = ref<number>(10);
const maxPage = ref<number>(1);
const total = ref<number>(1);
const keyword = ref<string>("");
const result = ref<string>("");

/** function fetch รายการประกาศผล*/
async function fetcDataList() {
  showLoader();
  await http
    .post(config.API.evaluationUser, {
      status: tab.value,
      page: page.value,
      pageSize: pageSize.value,
      keyword: keyword.value,
      kpiPeriodId: store.formQuery.round ? store.formQuery.round : "",
      results: result.value === "" ? undefined : result.value,
    })
    .then(async (res) => {
      const data = await res.data.result;
      dataList.value = data.data;
      total.value = data.total;
      maxPage.value = Math.ceil(total.value / pageSize.value);
    })
    .catch((err) => {
      messageError($q, err);
    })
    .finally(() => {
      hideLoader();
    });
}

/** ทำงานเมื่อมีการเปลี่ยน Tab */
watch(tab, () => {
  page.value = 1;
  result.value = "";
  keyword.value = "";
  dataList.value = [];
});

/** ทำงานเมื่อมีการเปลี่ยนแถวต่อหน้า*/
watch(pageSize, () => {
  fetcDataList();
});
</script>

<template>
  <div class="toptitle text-dark col-12 row items-center">ประกาศผล</div>

  <q-card flast bordered>
    <q-tabs
      v-model="tab"
      dense
      align="left"
      inline-label
      class="bg-white text-grey"
      active-color="primary"
      indicator-color="primary"
    >
      <div v-for="item in tabItems">
        <q-tab :name="item.name" :label="item.label" />
      </div>
    </q-tabs>
    <q-separator />
    <q-tab-panels v-model="tab" animated class="shadow-2 rounded-borders">
      <q-tab-panel name="COMPLETE" style="padding: 0px">
        <TableResults
          :tab="tab"
          :row="dataList"
          v-model:page="page"
          v-model:pageSize="pageSize"
          v-model:maxPage="maxPage"
          v-model:total="total"
          v-model:keyword="keyword"
          v-model:result="result"
          :fetchData="fetcDataList"
        />
      </q-tab-panel>

      <q-tab-panel name="KP7" style="padding: 0px">
        <TableResults
          :tab="tab"
          :row="dataList"
          v-model:page="page"
          v-model:pageSize="pageSize"
          v-model:maxPage="maxPage"
          v-model:total="total"
          v-model:keyword="keyword"
          v-model:result="result"
          :fetchData="fetcDataList"
        />
      </q-tab-panel>
      <q-tab-panel name="IDP" style="padding: 0px">
        <TableIndividual :tab="tab" />
      </q-tab-panel>
    </q-tab-panels>
  </q-card>
</template>

<style scoped></style>