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

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

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

/** importComponents */
import ToolBar from "@/modules/09_leave/components/1_Work/ToolBar.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, messageError } = mixin;

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

/** ตัวแปร querySting*/
const keyword = ref<string>("");
const page = ref<number>(1);
const rowsPerPage = ref<number>(10);
const maxPage = ref<number>(1);
const filetStatus = ref<string>("ALL");

/** ข้อมูลตาราง*/
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: "checkInStatus",
    align: "left",
    label: "สถานะ",
    sortable: true,
    field: "checkInStatus",
    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",
  },
  {
    name: "checkOutStatus",
    align: "left",
    label: "สถานะ",
    sortable: true,
    field: "checkOutStatus",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
  },
]);
const visibleColumns = ref<string[]>([
  "no",
  "fullName",
  "checkInTime",
  "checkInLocation",
  "checkInStatus",
  "checkOutTime",
  "checkOutLocation",
  "checkOutStatus",
]);
const rows = ref<TableRowsTime[]>([]);

/** function เรียกข้อมูล รายการลงเวลาที่ประมวลผลแล้ว*/
async function fetchListTimeRecord() {
  const date = new Date(workStore.selectDate as string | Date);
  const querySting = {
    startDate: dateToISO(date), //*วันที่เริ่ม
    endDate: dateToISO(date), //*วันที่สิ้นสุด
    status: filetStatus.value, //*สถานะ
    page: page.value, //*หน้า
    pageSize: rowsPerPage.value, //*จำนวนแถวต่อหน้า
    keyword: keyword.value, //keyword ค้นหา
  };
  showLoader();
  await http
    .get(
      config.API.timeRecord() +
        `?startDate=${querySting.startDate}&endDate=${querySting.startDate}&status=${querySting.status}&page=${querySting.page}&pageSize=${querySting.pageSize}&keyword=${querySting.keyword}`
    )
    .then((res) => {
      maxPage.value = Math.ceil(res.data.result.total / rowsPerPage.value);
      const datalist: TableRowsTime[] = res.data.result.data.map(
        (e: DataResTime) => ({
          id: e.id,
          fullName: e.fullName,
          checkInDate: e.checkInDate ? date2Thai(e.checkInDate) : "-",
          checkInTime: e.checkInTime,
          checkInLocation: e.checkInLocation,
          checkInLat: e.checkInLat,
          checkInLon: e.checkInLon,
          checkInStatus: e.checkInStatus
            ? workStore.convertSatatus(e.checkInStatus)
            : "-",
          checkOutDate: e.checkOutDate ? date2Thai(e.checkOutDate) : "-",
          checkOutLocation: e.checkOutLocation ? e.checkOutLocation : "-",
          checkOutTime: e.checkOutTime ? e.checkOutTime : "-",
          checkOutLat: e.checkOutLocation ? e.checkOutLat : "",
          checkOutLon: e.checkOutLocation ? e.checkOutLon : "",
          checkOutStatus: e.checkOutStatus
            ? workStore.convertSatatus(e.checkOutStatus)
            : "-",
        })
      );
      rows.value = datalist;
    })
    .catch((err) => {
      messageError($q, err);
    })
    .finally(() => {
      hideLoader();
    });
}

/**
 * function updatePaging และเรียกข้อมูลอีกรอบ
 * @param params pagin
 * @param currentPage page
 * @param key คำค้นหา
 * @param status สถานะ
 */
async function updatePaging(
  params: any,
  currentPage: number,
  key: string,
  status: string
) {
  page.value = currentPage;
  rowsPerPage.value = params.rowsPerPage ?? rowsPerPage.value;
  keyword.value = key ?? keyword.value;
  filetStatus.value = status ?? filetStatus.value;
  await fetchListTimeRecord();
}

/** Hook*/
onMounted(async () => {
  workStore.columns = columns.value;
  workStore.visibleColumns = visibleColumns.value;
  await fetchListTimeRecord();
});
</script>
<template>
  <ToolBar :filetStatus="filetStatus" @update:pagination="updatePaging" />
  <TableList
    :rows="rows.length > 0 ? rows : []"
    :page="page"
    :rowsPerPage="rowsPerPage"
    :maxPage="maxPage"
    @update:pagination="updatePaging"
    :tab="'time-record'"
  />
</template>

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