ผูก API รายลงเวลาปฏิบัติงานของ Admin (รายการลงเวลา)
This commit is contained in:
DESKTOP-1R2VSQH\Lenovo ThinkPad E490
parent
c76af202de
commit
e693e024e6
9 changed files with 557 additions and 295 deletions
212
src/modules/09_leave/components/1_Work/Tab1.vue
Normal file
212
src/modules/09_leave/components/1_Work/Tab1.vue
Normal 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
168
src/modules/09_leave/components/1_Work/Tab2.vue
Normal 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>
|
||||
|
|
@ -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" />
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
>
|
||||
|
|
|
|||
|
|
@ -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" />
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue