diff --git a/src/modules/09_leave/components/1_Work/Tab1.vue b/src/modules/09_leave/components/1_Work/Tab1.vue index b7e9c24cf..ed16da718 100644 --- a/src/modules/09_leave/components/1_Work/Tab1.vue +++ b/src/modules/09_leave/components/1_Work/Tab1.vue @@ -5,7 +5,7 @@ import { ref, onMounted, onUnmounted } from "vue"; import type { QTableProps } from "quasar"; import type { DataResTime, - TableRows, + TableRowsTime, } from "@/modules/09_leave/interface/response/work"; import type { DataOption } from "@/modules/09_leave/interface/index/Main"; @@ -19,12 +19,13 @@ import { useWorklistDataStore } from "@/modules/09_leave/stores/WorkStore"; /** useStore */ const mixin = useCounterMixin(); const workStore = useWorklistDataStore(); -const { date2Thai, showLoader, hideLoader } = mixin; +const { date2Thai, dateToISO, showLoader, hideLoader } = mixin; const keyword = ref(""); const page = ref(1); -const rowsPerPage = ref(2); -const maxPage = ref(7); +const rowsPerPage = ref(10); +const maxPage = ref(1); +const filetStatus = ref(""); /** ข้อมูลหัวตาราง*/ const columns = ref([ @@ -64,6 +65,15 @@ const columns = ref([ 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", @@ -83,11 +93,11 @@ const columns = ref([ style: "font-size: 14px", }, { - name: "checkStatus", + name: "checkOutStatus", align: "left", label: "สถานะ", sortable: true, - field: "checkStatus", + field: "checkOutStatus", headerStyle: "font-size: 14px", style: "font-size: 14px", }, @@ -97,96 +107,95 @@ const visibleColumns = ref([ "fullName", "checkInTime", "checkInLocation", + "checkInStatus", "checkOutTime", "checkOutLocation", - "checkStatus", + "checkOutStatus", ]); -const rows = ref([]); -const optionStatusMain = ref([]); -const optionStatus = ref([]); -const filetStatus = ref(""); +const rows = ref([]); async function fetchListTimeRecord() { showLoader(); const listData: DataResTime[] = [ - // { - // id: "00000000-0000-0000-0000-000000000000", - // fullName: "นางอมร ใจดี", - // checkDate: new Date(), - // checkInTime: "08:30", - // checkInLocation: "สำนักงงาน", - // checkInLat: "18.7903", - // checkInLon: "99.0029", - // checkOutLocation: "สำนักงงาน", - // checkOutTime: "18:04", - // checkOutLat: "18.7903", - // checkOutLon: "99.0029", - // checkStatus: "normal", - // }, - // { - // id: "00000000-0000-0000-0000-000000000000", - // fullName: "นางอมร ใจดี", - // checkDate: new Date(), - // checkInTime: "08:30", - // checkInLocation: "สำนักงงาน", - // checkInLat: "18.7903", - // checkInLon: "99.0029", - // checkOutLocation: "สำนักงงาน", - // checkOutTime: "18:04", - // checkOutLat: "18.7903", - // checkOutLon: "99.0029", - // checkStatus: "normal", - // }, - // { - // id: "00000000-0000-0000-0000-000000000000", - // fullName: "นางอมร ใจดี", - // checkDate: new Date(), - // checkInTime: "08:30", - // checkInLocation: "สำนักงงาน", - // checkInLat: "18.7903", - // checkInLon: "99.0029", - // checkOutLocation: "สำนักงงาน", - // checkOutTime: "18:04", - // checkOutLat: "18.7903", - // checkOutLon: "99.0029", - // checkStatus: "normal", - // }, + { + id: "00000000-0000-0000-0000-000000000000", + fullName: "นางอมร ใจดี", + checkInDate: new Date(), + checkInTime: "08:30", + checkInLocation: "สำนักงงาน", + checkInLat: "18.7903", + checkInLon: "99.0029", + checkInStatus: "normal", + checkOutDate: new Date(), + checkOutLocation: "สำนักงงาน", + checkOutTime: "18:04", + checkOutLat: "18.7903", + checkOutLon: "99.0029", + checkOutStatus: "late", + }, + { + id: "00000000-0000-0000-0000-000000000000", + fullName: "นางอมร ใจดี", + checkInDate: new Date(), + checkInTime: "08:30", + checkInLocation: "สำนักงงาน", + checkInLat: "18.7903", + checkInLon: "99.0029", + checkInStatus: "normal", + checkOutDate: new Date(), + checkOutLocation: "สำนักงงาน", + checkOutTime: "18:04", + checkOutLat: "18.7903", + checkOutLon: "99.0029", + checkOutStatus: "late", + }, ]; - let datalist: TableRows[] = listData.map((e: DataResTime) => ({ + 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 ค้นหา + }; + + console.log(querySting); + + const datalist: TableRowsTime[] = listData.map((e: DataResTime) => ({ id: e.id, fullName: e.fullName, - checkDate: e.checkDate && date2Thai(e.checkDate), + 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, checkOutTime: e.checkOutTime, checkOutLat: e.checkOutLat, checkOutLon: e.checkOutLon, - checkStatus: e.checkStatus && workStore.convertSatatus(e.checkStatus), + checkOutStatus: + e.checkOutStatus && workStore.convertSatatus(e.checkOutStatus), })); rows.value = datalist; - fetchOption(datalist); + maxPage.value = Math.ceil(rows.value.length / rowsPerPage.value); hideLoader(); } -// -function fetchOption(data: TableRows[]) { - const double_status = [...new Set(data.map((item: any) => item.checkStatus))]; - optionStatusMain.value = [{ id: "all", name: "ทั้งหมด" }]; - for (let i = 1; i <= double_status.length; i++) { - const status = double_status[i - 1]; - if (typeof status === "string") { - const listtype: DataOption = { - id: status, - name: status, - }; - optionStatusMain.value.push(listtype); - optionStatus.value = optionStatusMain.value; - } - } +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; + await fetchListTimeRecord(); } /** Hook*/ @@ -200,12 +209,13 @@ onMounted(async () => { onUnmounted(() => {}); diff --git a/src/modules/09_leave/components/1_Work/Tab2.vue b/src/modules/09_leave/components/1_Work/Tab2.vue index f3aa9eae0..25bacbcc9 100644 --- a/src/modules/09_leave/components/1_Work/Tab2.vue +++ b/src/modules/09_leave/components/1_Work/Tab2.vue @@ -94,7 +94,7 @@ const rows = ref([]); /** QueryString*/ const keyword = ref(""); const page = ref(1); -const rowsPerPage = ref(5); +const rowsPerPage = ref(10); const maxPage = ref(1); /** เรียกข้อมูลรายการลงเวลาปฏิบัติงาน (รายการลงเวลา) */ diff --git a/src/modules/09_leave/components/1_Work/ToolBar.vue b/src/modules/09_leave/components/1_Work/ToolBar.vue index d8afb175c..55a305e1f 100644 --- a/src/modules/09_leave/components/1_Work/ToolBar.vue +++ b/src/modules/09_leave/components/1_Work/ToolBar.vue @@ -9,16 +9,25 @@ const workStore = useWorklistDataStore(); const mixin = useCounterMixin(); const { date2Thai } = mixin; -const props = defineProps({ - option: { - type: Object, - require: true, - }, -}); +const emit = defineEmits(["update:pagination"]); +const updateProp = (newPagination: any, keyword: string, status: string) => { + // ส่ง event ไปยัง parent component เพื่ออัพเดทค่า props + emit("update:pagination", newPagination, 1, keyword, status); +}; +const option = ref([ + { id: "", name: "ทั้งหมด" }, + { id: "normal", name: "ปกติ" }, + { id: "late", name: "สาย" }, + { id: "absent", name: "ขาดราชการ" }, +]); const filetStatus = ref(""); const keyword = ref(""); +function filterFn() { + updateProp([], keyword.value, filetStatus.value); +} + /** Functicon หาค่ามากสุดและปิดวันที่ไม่ให้เลือกวันล่วงหน้า*/ function calculateMaxDate() { const today = new Date(); @@ -38,6 +47,7 @@ function calculateMaxDate() { :enableTimePicker="false" week-start="0" :max-date="calculateMaxDate()" + @update:model-value="filterFn" >