hrms-mgt/src/modules/09_leave/views/LeaveListMain.vue

<script setup lang="ts">
import { ref, reactive, onMounted } from "vue";

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

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

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

const leaveStore = useLeavelistDataStore();
const APIDATA = useLeavelistDataStoreTest();
const { fetchList } = leaveStore;

/** เรียกข้อมูลจาก API*/
function fecthLeaveList() {
  const data = APIDATA.data;
  maxPage.value = Math.ceil(data.length / querySting.pageSize);
  fetchList(data); /** ส่งข้อมูลไป stores*/
}

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);
}

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

onMounted(() => {
  fecthLeaveList();
});
</script>
<template>
  <div class="toptitle text-dark col-12 row items-center">รายการลา</div>
  <div>
    <q-card flat bordered class="col-12 q-mt-sm q-pt-sm q-pa-md">
      <ToolBar @update:querySting="updatePaging" />
      <TableList
        :page="querySting.page"
        :rowsPerPage="querySting.pageSize"
        :maxPage="maxPage"
        @update:querySting="updatePaging"
      />
    </q-card>
  </div>
</template>