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

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

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

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

/**
 * ตัวแปร
 */
const tab = ref<string>("COMPLETE");
const tabItems = ref<ItemsTab[]>([
  { name: "COMPLETE", label: " รอประกาศผล" },
  { name: "KP7", 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>("");

/**
 * function fetch รายการประกาศผล
 */
function fetcDataList() {
  showLoader();
  http
    .post(config.API.evaluationUser, {
      status: tab.value,
      page: page.value,
      pageSize: pageSize.value,
      keyword: keyword.value,
    })
    .then((res) => {
      const data = 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;
  keyword.value = "";
  fetcDataList();
});

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

/**
 * HooK
 */
onMounted(() => {
  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"
          :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"
          :fetchData="fetcDataList"
        />
      </q-tab-panel>
    </q-tab-panels>
  </q-card>
</template>

<style scoped></style>