hrms-bangkok/hrms-mgt
7
0
Fork 0
Code Issues Pull requests Projects Releases Packages 1 Wiki Activity Actions

Merge branch 'develop' into devTee

Browse source
This commit is contained in:
setthawutttty 2023-11-15 17:44:28 +07:00
commit 8403cd82bc
9 changed files with 557 additions and 295 deletions
Download patch file Download diff file Expand all files Collapse all files

3
src/api/09_leave/api.leave.ts
View file

@ -3,4 +3,7 @@ const leave = `${env.API_URI}/leave`;
export default {
roundDutytime: () => `${leave}/duty-time`,
roundDutytimeByid: (id: string) => `${leave}/duty-time/${id}`,
/**รายการลงเวลาปฏิบัติงาน */
logRecord: () => `${leave}/log-record`,
};

212
src/modules/09_leave/components/1_Work/Tab1.vue Normal file
View file

@ -0,0 +1,212 @@
<script setup lang="ts">
import { ref, onMounted, onUnmounted } from "vue";
/** importType*/
import type { QTableProps } from "quasar";
import type {
DataResTime,
TableRows,
} from "@/modules/09_leave/interface/response/work";
import type { DataOption } from "@/modules/09_leave/interface/index/Main";
/** 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, showLoader, hideLoader } = mixin;
const keyword = ref<string>("");
const page = ref<number>(1);
const rowsPerPage = ref<number>(2);
const maxPage = ref<number>(7);
/** ข้อมูลหัวตาราง*/
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",
},
{
name: "checkStatus",
align: "left",
label: "สถานะ",
sortable: true,
field: "checkStatus",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
]);
const visibleColumns = ref<string[]>([
"no",
"fullName",
"checkInTime",
"checkInLocation",
"checkOutTime",
"checkOutLocation",
"checkStatus",
]);
const rows = ref<TableRows[]>([]);
const optionStatusMain = ref<DataOption[]>([]);
const optionStatus = ref<DataOption[]>([]);
const filetStatus = ref<string>("");
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",
// },
];
let datalist: TableRows[] = listData.map((e: DataResTime) => ({
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,
checkStatus: e.checkStatus && workStore.convertSatatus(e.checkStatus),
}));
rows.value = datalist;
fetchOption(datalist);
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;
}
}
}
/** Hook*/
onMounted(async () => {
console.log("TAB1");
workStore.columns = columns.value;
workStore.visibleColumns = visibleColumns.value;
await fetchListTimeRecord();
});
onUnmounted(() => {});
</script>
<template>
<ToolBar :option="optionStatus" :filetStatus="filetStatus" />
<TableList
:rows="rows.length > 0 ? rows : []"
:page="page"
:rowsPerPage="rowsPerPage"
:maxPage="maxPage"
/>
</template>
<style lang="sass" scoped></style>

168
src/modules/09_leave/components/1_Work/Tab2.vue Normal file
View file

@ -0,0 +1,168 @@
<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>(7 / 3);
/** เรียกข้อมูลรายการลงเวลาปฏิบัติงาน (รายการลงเวลา) */
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) => {
console.log(res);
let datalist: TableRows[] = res.data.result.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);
})
.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>

132
src/modules/09_leave/components/1_Work/TableList.vue
View file

@ -1,5 +1,5 @@
<script setup lang="ts">
import { ref, onMounted } from "vue";
import { ref, onMounted, watch } from "vue";
/** importType*/
import type { QTableProps } from "quasar";
@ -15,83 +15,40 @@ import { useWorklistDataStore } from "@/modules/09_leave/stores/WorkStore";
const mixin = useCounterMixin();
const workStore = useWorklistDataStore();
const { date2Thai } = mixin;
const { searchDataFn, filterFn } = workStore;
// const { searchDataFn, filterFn } = workStore;
/** ข้อมูลหัวตาราง*/
const columns = ref<QTableProps["columns"]>([
{
name: "no",
align: "left",
label: "ลำดับ",
sortable: false,
field: "no",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
const props = defineProps({
rows: {
type: Object,
require: true,
},
{
name: "fullName",
align: "left",
label: "ชื่อ-นามสกุล",
sortable: true,
field: "fullName",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
page: {
type: Number,
require: true,
},
{
name: "timeIn",
align: "left",
label: "เวลาเข้างาน",
sortable: true,
field: "timeIn",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
rowsPerPage: {
type: Number,
require: true,
},
{
name: "coordinatesIn",
align: "left",
label: "พิกัด",
sortable: true,
field: "coordinatesIn",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
maxPage: {
type: Number,
require: true,
},
{
name: "timeOut",
align: "left",
label: "เวลาออกงาน",
sortable: true,
field: "timeOut",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "coordinatesOut",
align: "left",
label: "พิกัด",
sortable: true,
field: "coordinatesOut",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
]);
const visibleColumns = ref<string[]>([
"no",
"fullName",
"timeIn",
"coordinatesIn",
"timeOut",
"coordinatesOut",
]);
});
const emit = defineEmits(["update:pagination"]);
const updateProp = (newPagination: any, page: number) => {
// ส่ง event ไปยัง parent component เพื่ออัพเดทค่า props
emit("update:pagination", newPagination, page);
};
/** Hook */
onMounted(() => {
workStore.columns = columns.value;
workStore.visibleColumns = visibleColumns.value;
});
onMounted(() => {});
/** ข้อมูล popup */
const modal = ref<boolean>(false);
const dataDetail = ref<any>([]);
/**
* Function openPopup และแสดงรายละเอียด
* @param data ข้อมูลรายละเอียด
@ -100,6 +57,7 @@ function clickDetail(data: any) {
modal.value = true;
dataDetail.value = data;
}
/** Function ปิด popup */
function colseDeyail() {
modal.value = false;
@ -107,22 +65,25 @@ function colseDeyail() {
/** pagination */
const pagination = ref({
descending: true,
page: 1,
rowsPerPage: 10,
descending: false,
page: Number(props.page),
rowsPerPage: props.rowsPerPage,
});
const currentPage = ref<number>(1);
watch([() => currentPage.value, () => pagination.value.rowsPerPage], () => {
updateProp(pagination.value, currentPage.value);
});
</script>
<template>
<d-table
ref="table"
:columns="columns"
:rows="workStore.rows"
:filter="workStore.filterTable"
:columns="workStore.columns"
:rows="props.rows"
row-key="id"
flat
bordered
:paging="true"
dense
class="custom-header-table"
:visible-columns="workStore.visibleColumns"
@ -146,22 +107,22 @@ const pagination = ref({
<div v-if="col.name == 'no'">
{{ props.rowIndex + 1 }}
</div>
<div v-else-if="col.name == 'coordinatesIn'">
<div v-else-if="col.name == 'checkInLocation'">
<q-item style="padding: 0">
<q-item-section>
<q-item-label> {{ props.row.coordinatesIn }}</q-item-label>
<q-item-label> {{ props.row.checkInLocation }}</q-item-label>
<q-item-label caption lines="2">{{
props.row.latIn + " " + props.row.longIn
props.row.checkInLat + " " + props.row.checkInLon
}}</q-item-label>
</q-item-section>
</q-item>
</div>
<div v-else-if="col.name == 'coordinatesOut'">
<div v-else-if="col.name == 'checkOutLocation'">
<q-item style="padding: 0">
<q-item-section>
<q-item-label> {{ props.row.coordinatesOut }}</q-item-label>
<q-item-label> {{ props.row.checkOutLocation }}</q-item-label>
<q-item-label caption lines="2">{{
props.row.latOut + " " + props.row.longOut
props.row.checkOutLat + " " + props.row.checkOutLon
}}</q-item-label>
</q-item-section>
</q-item>
@ -172,6 +133,17 @@ const pagination = ref({
</q-td>
</q-tr>
</template>
<template v-slot:pagination="scope">
<q-pagination
v-model="currentPage"
active-color="primary"
color="dark"
:max="Number(props.maxPage)"
size="sm"
boundary-links
direction-links
></q-pagination>
</template>
</d-table>
<DialogDetail :modal="modal" :detail="dataDetail" :colse="colseDeyail" />

26
src/modules/09_leave/components/1_Work/ToolBar.vue
View file

@ -1,4 +1,6 @@
<script setup lang="ts">
import { ref } from "vue";
/** importStores */
import { useCounterMixin } from "@/stores/mixin";
import { useWorklistDataStore } from "@/modules/09_leave/stores/WorkStore";
@ -6,7 +8,16 @@ import { useWorklistDataStore } from "@/modules/09_leave/stores/WorkStore";
const workStore = useWorklistDataStore();
const mixin = useCounterMixin();
const { date2Thai } = mixin;
const { filterFn, searchDataFn } = workStore;
const props = defineProps({
option: {
type: Object,
require: true,
},
});
const filetStatus = ref<string>("");
const keyword = ref<string>("");
/** Functicon หาค่ามากสุดและปิดวันที่ไม่ให้เลือกวันล่วงหน้า*/
function calculateMaxDate() {
@ -27,9 +38,6 @@ function calculateMaxDate() {
:enableTimePicker="false"
week-start="0"
:max-date="calculateMaxDate()"
@update:model-value="
searchDataFn(workStore.selectDate, workStore.selectStatus)
"
>
<template #year="{ year }">{{ year + 543 }}</template>
<template #year-overlay-value="{ value }">{{
@ -64,16 +72,12 @@ function calculateMaxDate() {
map-options
outlined
dense
v-model="workStore.selectStatus"
:options="workStore.optionStatus"
option-value="id"
option-label="name"
label="สถานะ"
@update:model-value="
searchDataFn(workStore.selectDate, workStore.selectStatus)
"
use-input
@filter="filterFn"
v-model="filetStatus"
:options="props.option as readonly any[] || undefined"
>
<template v-slot:no-option>
<q-item>
@ -88,7 +92,7 @@ function calculateMaxDate() {
for="filterTable"
dense
outlined
v-model="workStore.filterTable"
v-model="keyword"
label="ค้นหา"
debounce="300"
>

27
src/modules/09_leave/components/1_Work/ToolBarDate.vue
View file

@ -1,4 +1,6 @@
<script setup lang="ts">
import { ref } from "vue";
/** importStores */
import { useCounterMixin } from "@/stores/mixin";
import { useWorklistDataStore } from "@/modules/09_leave/stores/WorkStore";
@ -6,7 +8,15 @@ import { useWorklistDataStore } from "@/modules/09_leave/stores/WorkStore";
const workStore = useWorklistDataStore();
const mixin = useCounterMixin();
const { date2Thai } = mixin;
const { searchDataFn } = workStore;
/** คำค้นหา*/
const keyword = ref<string>("");
const emit = defineEmits(["update:pagination"]);
const updateProp = (newPagination: any, keyword: string) => {
// ส่ง event ไปยัง parent component เพื่ออัพเดทค่า props
emit("update:pagination", newPagination, 1, keyword);
};
/** Functicon หาค่ามากสุดและปิดวันที่ไม่ให้เลือกวันล่วงหน้า*/
function calculateMaxDate() {
@ -14,6 +24,14 @@ function calculateMaxDate() {
today.setDate(today.getDate());
return today;
}
/** pagination */
const pagination = ref({
page: 1,
});
function filterFn() {
updateProp(pagination.value, keyword.value);
}
</script>
<template>
@ -27,9 +45,7 @@ function calculateMaxDate() {
:enableTimePicker="false"
week-start="0"
:max-date="calculateMaxDate()"
@update:model-value="
searchDataFn(workStore.selectDate, workStore.selectStatus)
"
@update:model-value="filterFn"
>
<template #year="{ year }">{{ year + 543 }}</template>
<template #year-overlay-value="{ value }">{{
@ -63,9 +79,10 @@ function calculateMaxDate() {
for="filterTable"
dense
outlined
v-model="workStore.filterTable"
v-model="keyword"
label="ค้นหา"
debounce="300"
@keydown.enter.prevent="filterFn"
>
<template v-slot:append>
<q-icon name="search" />

66
src/modules/09_leave/interface/response/work.ts
View file

@ -1,31 +1,41 @@
interface TableRows {
fullName: string
timeIn: string
coordinatesIn: string
latIn: string
longIn: string
timeOut: string
coordinatesOut: string
latOut: string
longOut: string
status: string | undefined
date: string | null
id: string; //id รายการลงเวลาปฏิบัติงาน
fullName: String; //ชื่อ-นามสกุล
checkDate: string | null; //วันที่เข้างาน
checkInTime: string; //เวลาเข้างาน
checkInLocation: String; //พิกัดเข้างาน
checkInLat: String; //อัลติจูดเข้างาน
checkInLon: String; //ละติจูดเข้างาน
checkOutLocation: String; //พิกัดออกงาน
checkOutTime: string; //เวลาออกงาน
checkOutLat: String; //อัลติจูดออกงาน
checkOutLon: String; //ละติจูดออกงาน
}
interface DataRes {
fullName: string
timeIn: string
coordinatesIn: string
latIn: string
longIn: string
timeOut: string
coordinatesOut: string
latOut: string
longOut: string
status: string
date: Date
interface DataResTime {
id: string; //id รายการลงเวลาปฏิบัติงาน
fullName: String; //ชื่อ-นามสกุล
checkDate: Date | null; //วันที่เข้างาน
checkInTime: string; //เวลาเข้างาน
checkInLocation: String; //พิกัดเข้างาน
checkInLat: String; //อัลติจูดเข้างาน
checkInLon: String; //ละติจูดเข้างาน
checkOutLocation: String; //พิกัดออกงาน
checkOutTime: string; //เวลาออกงาน
checkOutLat: String; //อัลติจูดออกงาน
checkOutLon: String; //ละติจูดออกงาน
checkStatus: string;
}
export type {
TableRows,
DataRes
}
interface DataResLog {
id: string; //id รายการลงเวลาปฏิบัติงาน
fullName: String; //ชื่อ-นามสกุล
checkDate: Date | null; //วันที่เข้างาน
checkInTime: string; //เวลาเข้างาน
checkInLocation: String; //พิกัดเข้างาน
checkInLat: String; //อัลติจูดเข้างาน
checkInLon: String; //ละติจูดเข้างาน
checkOutLocation: String; //พิกัดออกงาน
checkOutTime: string; //เวลาออกงาน
checkOutLat: String; //อัลติจูดออกงาน
checkOutLon: String; //ละติจูดออกงาน
}
export type { TableRows, DataResLog, DataResTime };

118
src/modules/09_leave/stores/WorkStore.ts
View file

@ -1,95 +1,36 @@
import { defineStore } from "pinia";
import { ref } from "vue";
import { useCounterMixin } from "@/stores/mixin";
/** import Type */
import type { QTableProps } from "quasar";
import type { DataOption } from "@/modules/09_leave/interface/index/Main";
import type {
TableRows,
DataRes,
} from "@/modules/09_leave/interface/response/work";
const mixin = useCounterMixin();
const { date2Thai } = mixin;
export const useWorklistDataStore = defineStore("work", () => {
// ข้อมูลในตาราง
const rows = ref<TableRows[]>([]);
/** ข้อมูล Table */
const columns = ref<QTableProps["columns"]>([]);
const visibleColumns = ref<string[]>([]);
const dataMain = ref<TableRows[]>([]);
function fetchList(data: DataRes[]) {
let datalist: TableRows[] = data.map((e: DataRes) => ({
fullName: e.fullName,
timeIn: e.timeIn,
coordinatesIn: e.coordinatesIn,
latIn: e.latIn,
longIn: e.longIn,
timeOut: e.timeOut,
coordinatesOut: e.coordinatesOut,
latOut: e.latOut,
longOut: e.longOut,
status: convertSatatus(e.status),
date: date2Thai(e.date),
}));
dataMain.value = datalist;
fetchOption();
searchDataFn(selectDate.value, selectStatus.value);
}
//ค้นหาข้อมูล
const filterTable = ref<string>("");
/** ค้นหาวัน ข้อมูล Table */
const selectDate = ref<Date | null>(new Date());
const selectStatus = ref<String>("all");
const optionStatusMain = ref<DataOption[]>([]);
const optionStatus = ref<DataOption[]>([]);
function searchDataFn(searchDate: any, searchStatus: any) {
searchStatus = searchStatus || "all";
if (searchDate == null && searchStatus == "all") {
rows.value = dataMain.value;
} else if (searchDate == null && searchStatus !== "all") {
rows.value = dataMain.value.filter((e: any) => e.status === searchStatus);
} else if (searchDate !== null && searchStatus == "all") {
rows.value = dataMain.value.filter(
(e: any) => e.date === date2Thai(searchDate)
);
} else {
rows.value = dataMain.value.filter(
(e: any) =>
e.date === date2Thai(searchDate) && e.status === searchStatus
);
}
}
//
function fetchOption() {
const double_status = [
...new Set(dataMain.value.map((item: any) => item.status)),
];
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;
}
}
}
function filterFn(val: string, update: Function) {
if (val == "") {
update(() => {
optionStatus.value = optionStatusMain.value;
});
} else {
update(() => {
optionStatus.value = optionStatusMain.value.filter(
(e: any) => e.name.search(val) !== -1
);
});
}
}
// function filterFn(val: string, update: Function) {
// if (val == "") {
// update(() => {
// optionStatus.value = optionStatusMain.value;
// });
// } else {
// update(() => {
// optionStatus.value = optionStatusMain.value.filter(
// (e: any) => e.name.search(val) !== -1
// );
// });
// }
// }
// convertSatatus
/**
* function แปลงค่าสถานะ
* @param val ค่าสถานนะ
*/
function convertSatatus(val: string) {
switch (val) {
case "normal":
@ -102,17 +43,16 @@ export const useWorklistDataStore = defineStore("work", () => {
}
return {
//ข้อมูลในตาราง
rows,
columns,
visibleColumns,
fetchList,
// fetchListLog,
// fetchListTime,
//ค้นหาข้อมูล
filterTable,
selectDate,
selectStatus,
optionStatus,
searchDataFn,
filterFn,
// filterFn,
convertSatatus,
};
});

100
src/modules/09_leave/views/WorkingMain.vue
View file

@ -1,89 +1,23 @@
<script setup lang="ts">
import { ref, onMounted } from "vue";
/** importStores */
import { useCounterMixin } from "@/stores/mixin";
import { useWorklistDataStore } from "@/modules/09_leave/stores/WorkStore";
import { ref, onMounted, watch } from "vue";
import http from "@/plugins/http";
import config from "@/app.config";
/** import Components */
import TableList from "@/modules/09_leave/components/1_Work/TableList.vue";
import ToolBar from "@/modules/09_leave/components/1_Work/ToolBar.vue";
import ToolBarDate from "../components/1_Work/ToolBarDate.vue";
import Tab1 from "@/modules/09_leave/components/1_Work/Tab1.vue";
import Tab2 from "@/modules/09_leave/components/1_Work/Tab2.vue";
/** import Type */
import type { DataRes } from "@/modules/09_leave/interface/response/work";
// /** importStores */
// import { useCounterMixin } from "@/stores/mixin";
// import { useWorklistDataStore } from "@/modules/09_leave/stores/WorkStore";
/** use Store */
const mixin = useCounterMixin();
const workStore = useWorklistDataStore();
const { date2Thai } = mixin;
const { fetchList } = workStore;
// const mixin = useCounterMixin();
// const workStore = useWorklistDataStore();
// const { dateToISO, date2Thai, showLoader, hideLoader } = mixin;
// const { fetchListLog, fetchListTime } = workStore;
const tab = ref("1");
/** Hook */
onMounted(() => {
fecthWorkList();
});
/** เรียกข้อมูลรายการลงเวลาปฏิบัติงาน */
function fecthWorkList() {
const listData: DataRes[] = [
{
fullName: "นายกัณฐิมา กาฬสินธ์ุ",
timeIn: "8:04",
coordinatesIn: "สำนักงาน",
latIn: "18.7903",
longIn: "99.0029",
timeOut: "18:04",
coordinatesOut: "สำนักงาน",
latOut: "18.7903",
longOut: "99.0029",
status: "normal",
date: new Date(new Date()),
},
{
fullName: "นายนครชัย วันดี",
timeIn: "8:04",
coordinatesIn: "สำนักงาน",
latIn: "18.7903",
longIn: "99.0029",
timeOut: "18:04",
coordinatesOut: "สำนักงาน",
latOut: "18.7903",
longOut: "99.0029",
status: "late",
date: new Date(new Date()),
},
{
fullName: "นายปิยรมย์ ศิริธาราฟ",
timeIn: "8:04",
coordinatesIn: "สำนักงาน",
latIn: "18.7903",
longIn: "99.0029",
timeOut: "18:04",
coordinatesOut: "สำนักงาน",
latOut: "18.7903",
longOut: "99.0029",
status: "absent",
date: new Date("2023-10-27"),
},
{
fullName: "นางสาวปลาทอง ใจกล้า",
timeIn: "8:04",
coordinatesIn: "สำนักงาน",
latIn: "18.7903",
longIn: "99.0029",
timeOut: "18:04",
coordinatesOut: "สำนักงาน",
latOut: "18.7903",
longOut: "99.0029",
status: "normal",
date: new Date("2023-10-27"),
},
];
fetchList(listData); // ส่งข้อมูลไปยัง stores
}
</script>
<template>
<div class="toptitle text-dark col-12 row items-center">
@ -110,14 +44,16 @@ function fecthWorkList() {
<q-tab-panels v-model="tab" animated>
<q-tab-panel name="1">
<!-- <TableList1 /> -->
<ToolBar />
<TableList />
<!-- <ToolBar /> -->
<Tab1 />
<!-- <TableList /> -->
</q-tab-panel>
<q-tab-panel name="2">
<!-- <TabList2Vue /> -->
<ToolBarDate />
<TableList />
<!-- <ToolBarDate /> -->
<Tab2 />
<!-- <TableList /> -->
</q-tab-panel>
</q-tab-panels>
<!-- </q-card> -->