hrms-mgt/src/modules/09_leave/components/2_Leave/Tab2.vue

<script setup lang="ts">
import { ref, reactive, onMounted } from "vue";
import { useQuasar } from "quasar";
import http from "@/plugins/http";
import config from "@/app.config";

/**importType*/
import type {
  QuerySting,
  DateFilter,
} from "@/modules/09_leave/interface/request/leave";

import TableList from "@/modules/09_leave/components/2_Leave/TableList.vue";
import ToolBar from "@/modules/09_leave/components/2_Leave/ToolBarLeave.vue";

/**importStroe*/
import { useCounterMixin } from "@/stores/mixin";
import { useLeavelistDataStore } from "@/modules/09_leave/stores/LeaveStore";
import { useLeavelistDataStoreTest } from "@/modules/09_leave/stores/ListLeave";

const mixin = useCounterMixin();
const leaveStore = useLeavelistDataStore();
const APIDATA = useLeavelistDataStoreTest();
const { date2Thai, dateToISO, showLoader, hideLoader, messageError } = mixin;
const { fetchListLeaveReject } = leaveStore;

const $q = useQuasar(); //ใช้ noti quasar

const querySting = reactive<QuerySting>({
  year: leaveStore.filter.year, //*ปีในการยื่นขอใบลา(ใช้เป็น คศ.)
  type: leaveStore.filter.type, //*Id ประเภทการลา
  status: leaveStore.filter.status, //*สถานะการของลา
  page: 1, //*หน้า
  pageSize: 5, //*จำนวนแถวต่อหน้า
  keyword: leaveStore.filter.keyword, //keyword ค้นหา
});
const maxPage = ref<number>(1);

//** เรียกข้อมูลจาก API*/
async function fecthLeaveList() {
  showLoader();
  await http
    .post(config.API.leaveListDelete(), querySting)
    .then((res) => {
      console.log(res);

      maxPage.value = Math.ceil(data.length / querySting.pageSize);
    })
    .catch((err) => {
      messageError($q, err);
    })
    .finally(() => {
      hideLoader();
    });
  const data = APIDATA.data;

  fetchListLeaveReject(data); /** ส่งข้อมูลไป stores*/
}

/**
 *
 * @param newPage หน้า
 * @param pageSize จำนวนต่อแถว
 * @param dateFilter ข้อมูลค้นหา
 */
async function updatePaging(
  newPage: number,
  pageSize: number,
  dateFilter: DateFilter
) {
  querySting.year = dateFilter ? dateFilter.year : querySting.year;
  querySting.type = dateFilter ? dateFilter.type : querySting.type;
  querySting.status = dateFilter ? dateFilter.status : querySting.status;
  querySting.page = newPage;
  querySting.pageSize = pageSize;
  querySting.keyword = dateFilter ? dateFilter.keyword : querySting.keyword;

  console.log(querySting);
  await fecthLeaveList();
}

onMounted(async () => {
  await fecthLeaveList();
});
</script>
<template>
  <ToolBar />
  <TableList
    :page="querySting.page"
    :rowsPerPage="querySting.pageSize"
    :maxPage="maxPage"
    @update:querySting="updatePaging"
  />
</template>

<style scoped></style>