hrms-mgt/src/modules/09_leave/components/1_Work/Tab2.vue

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

/** importType*/
import type { QTableProps } from "quasar";
/** import Type */
import type {
  DataResLog,
  TableRows,
} from "@/modules/09_leave/interface/response/work";

/** importComponents */
import ToolBarDate from "@/modules/09_leave/components/1_Work/ToolBarDate.vue";
import TableList from "@/modules/09_leave/components/1_Work/TableList.vue";

/** importStores */
import { useCounterMixin } from "@/stores/mixin";
import { useWorklistDataStore } from "@/modules/09_leave/stores/WorkStore";
/** useStore */
const mixin = useCounterMixin();
const workStore = useWorklistDataStore();
const { date2Thai, dateToISO, showLoader, hideLoader } = mixin;

/** ข้อมูลหัวตาราง*/
const columns = ref<QTableProps["columns"]>([
  {
    name: "no",
    align: "left",
    label: "ลำดับ",
    sortable: false,
    field: "no",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
  },
  {
    name: "fullName",
    align: "left",
    label: "ชื่อ-นามสกุล",
    sortable: true,
    field: "fullName",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
  },
  {
    name: "checkInTime",
    align: "left",
    label: "เวลาเข้างาน",
    sortable: true,
    field: "checkInTime",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
  },
  {
    name: "checkInLocation",
    align: "left",
    label: "พิกัด",
    sortable: true,
    field: "checkInLocation",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
  },
  {
    name: "checkOutTime",
    align: "left",
    label: "เวลาออกงาน",
    sortable: true,
    field: "checkOutTime",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
  },
  {
    name: "checkOutLocation",
    align: "left",
    label: "พิกัด",
    sortable: true,
    field: "checkOutLocation",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
  },
]);
const visibleColumns = ref<string[]>([
  "no",
  "fullName",
  "checkInTime",
  "checkInLocation",
  "checkOutTime",
  "checkOutLocation",
]);

const rows = ref<TableRows[]>([]);

/** QueryString*/
const keyword = ref<string>("");
const page = ref<number>(1);
const rowsPerPage = ref<number>(5);
const maxPage = ref<number>(1);

/** เรียกข้อมูลรายการลงเวลาปฏิบัติงาน (รายการลงเวลา) */
async function fetchListLogRecord() {
  showLoader();
  const date = new Date(workStore.selectDate as string | Date);
  await http
    .get(
      config.API.logRecord() +
        `?startDate=${dateToISO(date)}&endDate=${dateToISO(date)}&page=${
          page.value
        }&pageSize=${rowsPerPage.value}&keyword=${keyword.value}`
    )
    .then((res) => {
      maxPage.value = Math.ceil(res.data.result.total / rowsPerPage.value);
      let datalist: TableRows[] = res.data.result.data.map((e: DataResLog) => ({
        id: e.id,
        fullName: e.fullName,
        checkDate: e.checkDate && date2Thai(e.checkDate),
        checkInTime: e.checkInTime,
        checkInLocation: e.checkInLocation,
        checkInLat: e.checkInLat,
        checkInLon: e.checkInLon,
        checkOutLocation: e.checkOutLocation,
        checkOutTime: e.checkOutTime,
        checkOutLat: e.checkOutLat,
        checkOutLon: e.checkOutLon,
      }));
      rows.value = datalist;
    })
    .catch((err) => {
      console.log(err);
      rows.value = [];
    })
    .finally(() => {
      hideLoader();
    });
}

/**
 * function ค้นหาตามหน้าที่เลือก
 * @param params pagination
 * @param currentPage page
 * @param key keyword ค้นหา
 */
async function updatePagingProp(params: any, currentPage: number, key: string) {
  page.value = currentPage;
  rowsPerPage.value = params.rowsPerPage ?? rowsPerPage.value;
  keyword.value = key ?? keyword.value;
  await fetchListLogRecord();
}

/** Hook*/
onMounted(async () => {
  workStore.columns = columns.value;
  workStore.visibleColumns = visibleColumns.value;
  await fetchListLogRecord();
});
</script>
<template>
  <ToolBarDate :keyword="keyword" @update:pagination="updatePagingProp" />

  <TableList
    :rows="rows.length > 0 ? rows : []"
    :page="page"
    :rowsPerPage="rowsPerPage"
    :maxPage="maxPage"
    @update:pagination="updatePagingProp"
  />
</template>

<style lang="sass" scoped></style>