รายการลงเวลาปฏิบัติงานที่ประมวลผลแล้ว
This commit is contained in:
DESKTOP-1R2VSQH\Lenovo ThinkPad E490
parent
ee2eba56a1
commit
54e45a719c
4 changed files with 139 additions and 98 deletions
|
|
@ -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<string>("");
|
||||
const page = ref<number>(1);
|
||||
const rowsPerPage = ref<number>(2);
|
||||
const maxPage = ref<number>(7);
|
||||
const rowsPerPage = ref<number>(10);
|
||||
const maxPage = ref<number>(1);
|
||||
const filetStatus = ref<string>("");
|
||||
|
||||
/** ข้อมูลหัวตาราง*/
|
||||
const columns = ref<QTableProps["columns"]>([
|
||||
|
|
@ -64,6 +65,15 @@ const columns = ref<QTableProps["columns"]>([
|
|||
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<QTableProps["columns"]>([
|
|||
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<string[]>([
|
|||
"fullName",
|
||||
"checkInTime",
|
||||
"checkInLocation",
|
||||
"checkInStatus",
|
||||
"checkOutTime",
|
||||
"checkOutLocation",
|
||||
"checkStatus",
|
||||
"checkOutStatus",
|
||||
]);
|
||||
const rows = ref<TableRows[]>([]);
|
||||
const optionStatusMain = ref<DataOption[]>([]);
|
||||
const optionStatus = ref<DataOption[]>([]);
|
||||
const filetStatus = ref<string>("");
|
||||
const rows = ref<TableRowsTime[]>([]);
|
||||
|
||||
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(() => {});
|
||||
</script>
|
||||
<template>
|
||||
<ToolBar :option="optionStatus" :filetStatus="filetStatus" />
|
||||
<ToolBar :filetStatus="filetStatus" @update:pagination="updatePaging" />
|
||||
<TableList
|
||||
:rows="rows.length > 0 ? rows : []"
|
||||
:page="page"
|
||||
:rowsPerPage="rowsPerPage"
|
||||
:maxPage="maxPage"
|
||||
@update:pagination="updatePaging"
|
||||
/>
|
||||
</template>
|
||||
|
||||
|
|
|
|||
|
|
@ -94,7 +94,7 @@ const rows = ref<TableRows[]>([]);
|
|||
/** QueryString*/
|
||||
const keyword = ref<string>("");
|
||||
const page = ref<number>(1);
|
||||
const rowsPerPage = ref<number>(5);
|
||||
const rowsPerPage = ref<number>(10);
|
||||
const maxPage = ref<number>(1);
|
||||
|
||||
/** เรียกข้อมูลรายการลงเวลาปฏิบัติงาน (รายการลงเวลา) */
|
||||
|
|
|
|||
|
|
@ -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<any[]>([
|
||||
{ id: "", name: "ทั้งหมด" },
|
||||
{ id: "normal", name: "ปกติ" },
|
||||
{ id: "late", name: "สาย" },
|
||||
{ id: "absent", name: "ขาดราชการ" },
|
||||
]);
|
||||
const filetStatus = ref<string>("");
|
||||
const keyword = ref<string>("");
|
||||
|
||||
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"
|
||||
>
|
||||
<template #year="{ year }">{{ year + 543 }}</template>
|
||||
<template #year-overlay-value="{ value }">{{
|
||||
|
|
@ -77,7 +87,8 @@ function calculateMaxDate() {
|
|||
label="สถานะ"
|
||||
use-input
|
||||
v-model="filetStatus"
|
||||
:options="props.option as readonly any[] || undefined"
|
||||
:options="option"
|
||||
@update:model-value="filterFn"
|
||||
>
|
||||
<template v-slot:no-option>
|
||||
<q-item>
|
||||
|
|
@ -95,6 +106,7 @@ function calculateMaxDate() {
|
|||
v-model="keyword"
|
||||
label="ค้นหา"
|
||||
debounce="300"
|
||||
@keydown.enter.prevent="filterFn"
|
||||
>
|
||||
<template v-slot:append>
|
||||
<q-icon name="search" />
|
||||
|
|
|
|||
|
|
@ -1,29 +1,48 @@
|
|||
interface TableRows {
|
||||
id: string; //id รายการลงเวลาปฏิบัติงาน
|
||||
fullName: String; //ชื่อ-นามสกุล
|
||||
fullName: string; //ชื่อ-นามสกุล
|
||||
checkDate: string | null; //วันที่เข้างาน
|
||||
checkInTime: string; //เวลาเข้างาน
|
||||
checkInLocation: String; //พิกัดเข้างาน
|
||||
checkInLat: String; //อัลติจูดเข้างาน
|
||||
checkInLon: String; //ละติจูดเข้างาน
|
||||
checkOutLocation: String; //พิกัดออกงาน
|
||||
checkInLocation: string; //พิกัดเข้างาน
|
||||
checkInLat: string; //อัลติจูดเข้างาน
|
||||
checkInLon: string; //ละติจูดเข้างาน
|
||||
checkOutLocation: string; //พิกัดออกงาน
|
||||
checkOutTime: string; //เวลาออกงาน
|
||||
checkOutLat: String; //อัลติจูดออกงาน
|
||||
checkOutLon: String; //ละติจูดออกงาน
|
||||
checkOutLat: string; //อัลติจูดออกงาน
|
||||
checkOutLon: string; //ละติจูดออกงาน
|
||||
}
|
||||
|
||||
interface TableRowsTime {
|
||||
id: string; //id รายการลงเวลาปฏิบัติงาน
|
||||
fullName: string; //ชื่อ-นามสกุล
|
||||
checkInDate: string | null; //วันที่เข้างาน
|
||||
checkInTime: string; //เวลาเข้างาน
|
||||
checkInLocation: string; //พิกัดเข้างาน
|
||||
checkInLat: string; //อัลติจูดเข้างาน
|
||||
checkInLon: string; //ละติจูดเข้างาน
|
||||
checkInStatus: string | undefined; //สถานะการลงเวลาเข้างาน
|
||||
checkOutDate: string | null;
|
||||
checkOutLocation: string; //พิกัดออกงาน
|
||||
checkOutTime: string; //เวลาออกงาน
|
||||
checkOutLat: string; //อัลติจูดออกงาน
|
||||
checkOutLon: string; //ละติจูดออกงาน
|
||||
checkOutStatus: string | undefined; //สถานะการลงเวลาออกงาน
|
||||
}
|
||||
interface DataResTime {
|
||||
id: string; //id รายการลงเวลาปฏิบัติงาน
|
||||
fullName: String; //ชื่อ-นามสกุล
|
||||
checkDate: Date | null; //วันที่เข้างาน
|
||||
fullName: string; //ชื่อ-นามสกุล
|
||||
checkInDate: Date | null; //วันที่เข้างาน
|
||||
checkInTime: string; //เวลาเข้างาน
|
||||
checkInLocation: String; //พิกัดเข้างาน
|
||||
checkInLat: String; //อัลติจูดเข้างาน
|
||||
checkInLon: String; //ละติจูดเข้างาน
|
||||
checkOutLocation: String; //พิกัดออกงาน
|
||||
checkInLocation: string; //พิกัดเข้างาน
|
||||
checkInLat: string; //อัลติจูดเข้างาน
|
||||
checkInLon: string; //ละติจูดเข้างาน
|
||||
checkInStatus: string; //สถานะการลงเวลาเข้างาน
|
||||
checkOutDate: Date | null; //วันที่ออกงาน
|
||||
checkOutLocation: string; //พิกัดออกงาน
|
||||
checkOutTime: string; //เวลาออกงาน
|
||||
checkOutLat: String; //อัลติจูดออกงาน
|
||||
checkOutLon: String; //ละติจูดออกงาน
|
||||
checkStatus: string;
|
||||
checkOutLat: string; //อัลติจูดออกงาน
|
||||
checkOutLon: string; //ละติจูดออกงาน
|
||||
checkOutStatus: string; //สถานะการลงเวลาออกงาน
|
||||
}
|
||||
interface DataResLog {
|
||||
id: string; //id รายการลงเวลาปฏิบัติงาน
|
||||
|
|
@ -38,4 +57,4 @@ interface DataResLog {
|
|||
checkOutLat: String; //อัลติจูดออกงาน
|
||||
checkOutLon: String; //ละติจูดออกงาน
|
||||
}
|
||||
export type { TableRows, DataResLog, DataResTime };
|
||||
export type { TableRows, DataResLog, DataResTime, TableRowsTime };
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue