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

แก้ ส่ง id เเละ paging

Browse source
This commit is contained in:
setthawutttty 2024-10-30 17:50:58 +07:00
parent be5a4bcd53
commit d335cdb7bf
8 changed files with 277 additions and 86 deletions
Download patch file Download diff file Expand all files Collapse all files

80
src/modules/01_masterdata/views/indicatorByPlan.vue
View file

@ -1,5 +1,5 @@
<script setup lang="ts">
import { ref, reactive, onMounted } from "vue";
import { ref, reactive, onMounted,watch } from "vue";
import { useQuasar, type QTableProps } from "quasar";
import { useRouter, useRoute } from "vue-router";
@ -30,6 +30,15 @@ const dataHistory = ref<DataHistory[]>([]);
const modalHistory = ref<boolean>(false);
const isAll = ref<boolean>(false);
const total = ref<number>(0);
const totalList = ref<number>(1);
const pagination = ref({
sortBy: "createdAt",
descending: true,
page: 1,
rowsPerPage: 10,
});
/** หัวตาราง */
const rows = ref<IndicatorType[]>([]);
const columns = ref<QTableProps["columns"]>([
@ -63,12 +72,8 @@ const roundOp = ref<DataOption[]>([
{ id: "OCT", name: "รอบตุลาคม" },
]);
const totalList = ref<number>(1);
const year = ref<number | null>(new Date().getFullYear());
const nodeData = reactive<any>({
page: 1,
pageSize: 10,
round: "",
nodeId: null,
node: null,
@ -87,12 +92,15 @@ function fetchList() {
nodeId: nodeData.nodeId,
period: nodeData.round,
year: year.value?.toString(),
pageSize: nodeData.pageSize,
page: nodeData.page,
pageSize: pagination.value.rowsPerPage,
page: pagination.value.page,
})
.then((res) => {
const data = res.data.result.data;
totalList.value = Math.ceil(res.data.result.total / nodeData.pageSize);
totalList.value = Math.ceil(
res.data.result.total / pagination.value.rowsPerPage
);
total.value = res.data.result.total;
rows.value = data;
})
.catch((err) => {
@ -147,13 +155,7 @@ function updateSelectedTreeMain(data: any) {
nodeData.node = data.orgLevel;
nodeData.nodeId = data.orgTreeId;
}
fetchListProjectNew();
}
/** ดึงรายละเอียดโครงสร้าง */
function fetchListProjectNew() {
nodeData.page = 1;
fetchList();
getSearch();
}
/** delete */
@ -177,7 +179,7 @@ async function deleteData(idData: string) {
/** clear input filter */
function clearFilter() {
nodeData.keyword = "";
fetchListProjectNew();
getSearch();
}
/**
@ -200,6 +202,25 @@ function onClickHistory(id: string) {
hideLoader();
});
}
function updatePagination(newPagination: any) {
pagination.value.page = 1;
pagination.value.rowsPerPage = newPagination.rowsPerPage;
}
function getSearch() {
pagination.value.page = 1;
fetchList();
}
watch(
() => pagination.value.rowsPerPage,
async () => {
getSearch();
}
);
onMounted(() => {
fetchTree();
});
@ -284,7 +305,7 @@ onMounted(() => {
year-picker
:enableTimePicker="false"
style="width: 150px"
@update:model-value="fetchListProjectNew"
@update:model-value="getSearch"
>
<template #year="{ year }">{{ year + 543 }}</template>
<template #year-overlay-value="{ value }">{{
@ -309,7 +330,7 @@ onMounted(() => {
<q-icon
name="cancel"
@click.stop.prevent="
(year = null), (nodeData.page = 1), fetchListProjectNew()
(year = null),getSearch()
"
class="cursor-pointer"
/>
@ -327,14 +348,14 @@ onMounted(() => {
option-value="id"
emit-value
map-options
@update:model-value="fetchListProjectNew"
@update:model-value="getSearch"
style="min-width: 120px"
>
<template v-if="nodeData.round" v-slot:append>
<q-icon
name="cancel"
@click.stop.prevent="
(nodeData.round = ''), fetchListProjectNew()
(nodeData.round = ''), getSearch()
"
class="cursor-pointer"
/>
@ -360,7 +381,7 @@ onMounted(() => {
v-model="isAll"
label="แสดงทั้งหมด"
color="primary"
@update:model-value="fetchListProjectNew"
@update:model-value="getSearch"
>
<q-tooltip
>แสดงตำแหน่งทั้งหมดภายใต้หน่วยงาน/ส่วนราชการที่เลือก</q-tooltip
@ -374,7 +395,7 @@ onMounted(() => {
outlined
style="width: 150px"
placeholder="ค้นหา"
@keydown.enter.prevent="fetchListProjectNew"
@keydown.enter.prevent="getSearch"
>
<template v-slot:append>
<q-icon v-if="nodeData.keyword == ''" name="search" />
@ -414,6 +435,7 @@ onMounted(() => {
dense
class="custom-header-table"
:rows-per-page-options="[10, 25, 50, 100]"
@update:pagination="updatePagination"
:visible-columns="visibleColumns"
>
<template v-slot:header="props">
@ -531,6 +553,20 @@ onMounted(() => {
</q-td>
</q-tr>
</template>
<template v-slot:pagination="scope">
ทั้งหมด {{ total }} รายการ
<q-pagination
v-model="pagination.page"
active-color="primary"
color="dark"
:max="Number(totalList)"
size="sm"
boundary-links
direction-links
:max-pages="5"
@update:model-value="fetchList"
></q-pagination>
</template>
</d-table>
</div>
</div>

13
src/modules/04_registryPerson/views/listView.vue
View file

@ -342,6 +342,11 @@ watch(selectNode, () => {
/**
* hook เมื่อมีการเรียกใช้ Components
*/
function getSearch() {
store.formFilter.page = 1;
fetchDataPerson();
}
onMounted(async () => {
await Promise.all([selectType(), fetchTree()]);
});
@ -543,7 +548,7 @@ onMounted(async () => {
v-model="store.formFilter.isAll"
color="primary"
label="แสดงตำแหน่งทั้งหมด"
@update:model-value="fetchDataPerson"
@update:model-value="getSearch"
/>
</div>
@ -555,20 +560,20 @@ onMounted(async () => {
v-model="store.formFilter.isProbation"
color="primary"
label="ทดลองปฏิบัติหน้าที่ราชการ"
@update:model-value="fetchDataPerson"
@update:model-value="getSearch"
/>
<q-toggle
v-model="store.formFilter.isShowRetire"
color="primary"
label="แสดงข้อมูลผู้พ้นจากราชการ"
@update:model-value="fetchDataPerson"
@update:model-value="getSearch"
/>
<q-toggle
v-if="store.formFilter.nodeId"
v-model="store.formFilter.isAll"
color="primary"
label="แสดงตำแหน่งทั้งหมด"
@update:model-value="fetchDataPerson"
@update:model-value="getSearch"
/>
</div>
</div>

2
src/modules/05_placement/components/PersonalList/Table.vue
View file

@ -1170,7 +1170,7 @@ onMounted(async () => {
color="info"
icon="info"
size="sm"
@click="onclickViewinfo(props.row.personalId)"
@click="onclickViewinfo(props.row.profileId)"
><q-tooltip>ดูข้อมูลทะเบียนประวัติ</q-tooltip></q-btn
>
</div>

2
src/modules/05_placement/components/probation/MainProbation.vue
View file

@ -593,7 +593,7 @@ onMounted(async () => {
dense
class="custom-header-table"
:visible-columns="visibleColumns"
:rows-per-page-options="[10, 25, 50, 100]"
:rows-per-page-options="[1, 25, 50, 100]"
@update:pagination="updatePaginationMain"
>
<template v-slot:header="props">

2
src/modules/09_leave/stores/SpecialTimeStore.ts
View file

@ -57,7 +57,6 @@ export const useSpecialTimeStore = defineStore("LeaveSpecialTime", () => {
let data = res.data.result.data;
total.value = res.data.result.total;
maxPage.value = await Math.ceil(total.value / pageSize.value);
maxPage.value = maxPage.value < 1 ? 1 : maxPage.value;
rows.value = [];
data.map((e: any) => {
rows.value.push({
@ -255,6 +254,7 @@ export const useSpecialTimeStore = defineStore("LeaveSpecialTime", () => {
pageSize,
month,
filter,
convertStatus
// changeMonth,
};
});

242
src/modules/09_leave/views/SpecialTimeMain.vue
View file

@ -1,6 +1,7 @@
<script setup lang="ts">
import { onMounted, ref, watch } from "vue";
import { useQuasar } from "quasar";
import type { QTableProps } from "quasar";
import http from "@/plugins/http";
import config from "@/app.config";
@ -17,11 +18,25 @@ import type {
import DialogReason from "@/components/Dialogs/PopupReason.vue";
import DialogApprove from "@/modules/09_leave/components/4_specialTime/DialogApprove.vue";
const dataSpecialTime = useSpecialTimeStore();
const $q = useQuasar(); // show dialog
const mixin = useCounterMixin();
const { hideLoader, monthYear2Thai, messageError, showLoader, success } = mixin;
const store = useSpecialTimeStore();
const {
hideLoader,
monthYear2Thai,
messageError,
showLoader,
success,
date2Thai,
} = mixin;
const emit = defineEmits(["update:change-page"]);
const rows = ref<any[]>([]);
const toDay = ref<Date>(new Date());
const monthToday = toDay.value.getMonth();
const yearToday = toDay.value.getFullYear();
const month = ref<number>(monthToday + 1);
const year = ref<number>(yearToday);
/**ตัวแปรที่ใช้ */
const modalUnapprove = ref<boolean>(false);
@ -42,14 +57,13 @@ const dateMonth = ref<DataDateMonthObject>({
year: new Date().getFullYear(),
});
// paging
const currentPage = ref<number>(1);
const pageSize = ref<number>(10);
const initialPagination = ref<Pagination>({
sortBy: null,
descending: false,
const total = ref<number>(0);
const totalList = ref<number>(1);
const pagination = ref({
sortBy: "createdAt",
descending: true,
page: 1,
rowsPerPage: pageSize.value, // set ตาม page หลักส่งมา
rowsPerPage: 10,
});
// ค้นหาในตาราง
@ -57,13 +71,88 @@ const filterKeyword = ref<string>("");
const filterRef = ref<HTMLInputElement | null>(null);
const resetFilter = () => {
filterKeyword.value = "";
dataSpecialTime.filter = filterKeyword.value;
dataSpecialTime.fetchData();
fetchData();
if (filterRef.value) {
filterRef.value.focus();
}
};
const visibleColumns = ref<String[]>([
"no",
"fullname",
"date",
"dateFix",
"timeMorning",
"timeAfternoon",
"description",
]);
const columns = ref<QTableProps["columns"]>([
{
name: "no",
align: "center",
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: "date",
align: "left",
label: "วันที่ยื่นเรื่อง",
sortable: true,
field: "date",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "dateFix",
align: "left",
label: "วันที่ขอแก้ไข",
sortable: true,
field: "dateFix",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "timeMorning",
align: "left",
label: "ช่วงเช้า",
sortable: true,
field: "timeMorning",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "timeAfternoon",
align: "left",
label: "ช่วงบ่าย",
sortable: true,
field: "timeAfternoon",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "description",
align: "left",
label: "เหตุผล",
sortable: true,
field: "description",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
]);
/**
* ฟังก์ชั่นไม่อนุมัติ
* @param fullname ชื่อ
@ -117,26 +206,11 @@ async function clickSave(reason: string) {
messageError($q, e);
})
.finally(async () => {
await dataSpecialTime.fetchData();
await fetchData();
hideLoader();
});
}
async function updatePagination(initialPagination: any) {
currentPage.value = 1;
dataSpecialTime.pageSize = initialPagination.rowsPerPage;
dataSpecialTime.page = 1; // set current page เป็น 1 เสมอเมื่อเปลี่ยน per row
}
/** function ค้นหาข้อมูลแล้วอัปเดท*/
function filterFn() {
updatePagination(filterKeyword.value);
console.log(filterKeyword.value);
dataSpecialTime.filter = filterKeyword.value;
dataSpecialTime.pageSize = pageSize.value;
dataSpecialTime.fetchData();
}
/**
* ดึงข้อมูลตามปี
* @param e ปี
@ -144,10 +218,10 @@ function filterFn() {
async function updateMonth(e: DataDateMonthObject) {
if (e != null) {
dateYear.value = e.year;
dateYear.value = dataSpecialTime.year;
dataSpecialTime.month = dateMonth.value.month + 1;
dataSpecialTime.year = dateMonth.value.year;
await dataSpecialTime.fetchData();
dateYear.value = year.value;
month.value = dateMonth.value.month + 1;
year.value = dateMonth.value.year;
getSearch();
}
}
@ -157,23 +231,93 @@ function monthYearThai(val: any) {
else return monthYear2Thai(val.month, val.year);
}
function updatePagination(newPagination: any) {
pagination.value.page = 1;
pagination.value.rowsPerPage = newPagination.rowsPerPage;
}
function getSearch() {
pagination.value.page = 1;
fetchData();
}
watch(
[() => currentPage.value, () => initialPagination.value.rowsPerPage],
() => pagination.value.rowsPerPage,
async () => {
dataSpecialTime.page = currentPage.value;
await dataSpecialTime.fetchData();
getSearch();
}
);
/**
* ฟังชั้นเรียกดูข้อมูล
*/
async function fetchData() {
showLoader();
await http
.get(
config.API.specialTime() +
`?year=${year.value}&month=${month.value}&page=${pagination.value.page}&pageSize=${pagination.value.rowsPerPage}&keyword=${filterKeyword.value}`
)
.then(async (res) => {
let data = res.data.result.data;
total.value = res.data.result.total;
totalList.value = Math.ceil(
res.data.result.total / pagination.value.rowsPerPage
);
total.value = res.data.result.total;
rows.value = [];
data.map((e: any) => {
rows.value.push({
id: e.id,
fullname: e.fullName,
date: date2Thai(new Date(e.createdAt), false, true),
dateFix: date2Thai(new Date(e.checkDate)),
timeMorning:
e.startTimeMorning == null
? "-"
: e.checkInEdit == true
? e.startTimeMorning + " - " + e.endTimeMorning
: "-",
timeAfternoon:
e.startTimeAfternoon == null
? "-"
: e.checkOutEdit == true
? e.startTimeAfternoon + " - " + e.endTimeAfternoon
: "-",
startTimeMorning: e.startTimeMorning,
endTimeMorning: e.endTimeMorning,
startTimeAfternoon: e.startTimeAfternoon,
endTimeAfternoon: e.endTimeAfternoon,
checkIn: e.checkInTime,
checkOut: e.checkOutTime,
status: e.status,
checkInStatus: store.convertStatus(e.checkInStatus),
checkOutStatus: store.convertStatus(e.checkOutStatus),
reason: e.reason,
description: e.description,
checkInEdit: e.checkInEdit,
checkOutEdit: e.checkOutEdit,
});
});
})
.catch((e) => {
messageError($q, e);
})
.finally(() => {
hideLoader();
console.log(month.value);
});
}
/**Hook */
onMounted(async () => {
//อัพเดทเป็นวันปัจจุบันเมื่อเข้าหน้านี้
const toDay = ref<Date>(new Date());
const monthToday = toDay.value.getMonth();
const yearToday = toDay.value.getFullYear();
dataSpecialTime.month = monthToday + 1;
dataSpecialTime.year = yearToday;
await dataSpecialTime.fetchData();
month.value = monthToday + 1;
year.value = yearToday;
await fetchData();
});
</script>
@ -228,7 +372,7 @@ onMounted(async () => {
outlined
debounce="300"
placeholder="ค้นหาชื่อ-นามสกุล"
@keydown.enter.prevent="filterFn"
@keydown.enter.prevent="getSearch()"
>
<template v-slot:append>
<q-icon v-if="filterKeyword == ''" name="search" />
@ -242,7 +386,7 @@ onMounted(async () => {
</q-input>
<q-select
v-model="dataSpecialTime.visibleColumns"
v-model="visibleColumns"
multiple
outlined
dense
@ -250,7 +394,7 @@ onMounted(async () => {
:display-value="$q.lang.table.columns"
emit-value
map-options
:options="dataSpecialTime.columns"
:options="columns"
option-value="name"
options-cover
style="min-width: 150px"
@ -260,29 +404,29 @@ onMounted(async () => {
<div class="col-12">
<d-table
:columns="dataSpecialTime.columns"
:rows="dataSpecialTime.rows"
:columns="columns"
:rows="rows"
row-key="tb-list"
flat
bordered
:paging="false"
dense
:visible-columns="dataSpecialTime.visibleColumns"
:visible-columns="visibleColumns"
:rows-per-page-options="[10, 25, 50, 100]"
v-model:pagination="initialPagination"
@update:pagination="updatePagination"
>
<template v-slot:pagination="scope">
ทั้งหมด {{ dataSpecialTime.total }} รายการ
ทั้งหมด {{ total }} รายการ
<q-pagination
v-model="currentPage"
v-model="pagination.page"
active-color="primary"
color="dark"
:max-pages="5"
:max="Number(totalList)"
size="sm"
boundary-links
direction-links
:max="Number(dataSpecialTime.maxPage)"
:max-pages="5"
@update:model-value="fetchData()"
></q-pagination>
</template>
<template v-slot:header="props">
@ -349,7 +493,7 @@ onMounted(async () => {
<q-td v-for="col in props.cols" :key="col.name" :props="props">
<div v-if="col.name == 'no'">
{{
(dataSpecialTime.page - 1) * dataSpecialTime.pageSize +
(pagination.page - 1) * pagination.rowsPerPage +
props.rowIndex +
1
}}

20
src/modules/16_positionEmployee/components/DialogSelectPerson.vue
View file

@ -337,6 +337,11 @@ function searchData() {
});
}
function getSearch() {
page.value = 1;
searchData();
}
/**
* function update PageSize
*/
@ -405,12 +410,12 @@ watch(
}
);
/**
* callback function ทำงานการค้นหาข้อมุลคนครองเมื่อมีการ update Pagination
*/
watch([() => page.value, () => pageSize.value], () => {
searchData();
});
watch(
() => pageSize.value,
async () => {
getSearch();
}
);
</script>
<template>
@ -600,7 +605,7 @@ watch([() => page.value, () => pageSize.value], () => {
color="teal-5"
class="full-height"
icon="search"
@click="searchData"
@click="getSearch()"
/>
</div>
@ -689,6 +694,7 @@ watch([() => page.value, () => pageSize.value], () => {
size="sm"
boundary-links
direction-links
@update:model-value="searchData"
></q-pagination>
</template>
</d-table>

2
src/modules/19_condition/view/Main.vue
View file

@ -403,7 +403,7 @@ onMounted(async () => {
flat
bordered
dense
:rows-per-page-options="[10, 25, 50, 100]"
:rows-per-page-options="[1, 25, 50, 100]"
:loading="isLoadTable"
v-model:pagination="pagination"
@update:pagination="updatePagination"