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

แก้ paging

Browse source
This commit is contained in:
setthawutttty 2024-10-30 14:40:02 +07:00
parent ce0c2fef3f
commit 91d3c417d6
7 changed files with 88 additions and 97 deletions
Download patch file Download diff file Expand all files Collapse all files

38
src/modules/06_evaluate/components/TableListEvaluate.vue
View file

@ -15,6 +15,9 @@ const store = useEvaluateStore();
const mixin = useCounterMixin();
const router = useRouter();
const total = defineModel<number>("total", { required: true });
const totalList = defineModel<number>("totalList", { required: true });
const pagination = defineModel<any>("pagination", { required: true });
const { dialogRemove, showLoader, hideLoader, success, messageError } = mixin;
const props = defineProps({
@ -79,15 +82,6 @@ const columns = ref<QTableProps["columns"]>([
},
]);
/** paging*/
const pagination = ref({
descending: false,
page: props.page,
rowsPerPage: props.pageSize,
});
const currentPage = ref<number>(1);
/**
* function ส่งข้อมูลไป Update Paging
* @param newPagination ข้อมูล Paging ใหม่
@ -97,13 +91,9 @@ function updateProp(newPagination: any, page: number) {
emit("update:pagination", newPagination, page);
}
/**
* function updatePageSize
* @param newPagination PageSize
*/
function updateRowsPerPagen(newPagination: any) {
function updatePagination(newPagination: any) {
pagination.value.page = 1;
pagination.value.rowsPerPage = newPagination.rowsPerPage;
currentPage.value = 1;
}
/**
@ -137,11 +127,6 @@ function redirectToDetail(data: any) {
router.push(`/evaluate/detail/${data.typeparam.toLowerCase()}/${data.id}`);
}
/** function Callblck ทำงานเมื่อ pagination มีการเปลี่ยนแปลง */
watch([() => currentPage.value, () => pagination.value.rowsPerPage], () => {
updateProp(pagination.value, currentPage.value);
});
/** Hook lifecycle*/
onMounted(() => {
store.columns = columns.value;
@ -158,10 +143,9 @@ onMounted(() => {
:columns="columns"
:rows="store.row"
dense
:rows-per-page-options="[10, 25, 50, 100]"
:visible-columns="store.visibleColumns"
v-model:pagination="pagination"
@update:pagination="updateRowsPerPagen"
:rows-per-page-options="[1, 25, 50, 100]"
@update:pagination="updatePagination"
>
<template v-slot:header="props">
<q-tr :props="props">
@ -252,15 +236,17 @@ onMounted(() => {
</div>
</template>
<template v-slot:pagination="scope">
ทั้งหมด {{ store.row.length }} รายการ
ทั้งหมด {{ total }} รายการ
<q-pagination
v-model="currentPage"
v-model="pagination.page"
active-color="primary"
color="dark"
:max="Number(totalList)"
size="sm"
boundary-links
direction-links
:max="Number(props.maxPage)"
:max-pages="5"
@update:model-value="props.fetchData?.()"
></q-pagination>
</template>
</d-table>

64
src/modules/06_evaluate/views/EvaluateMain.vue
View file

@ -47,6 +47,15 @@ const listMenu = ref<ListMenu[]>([
},
]);
const total = ref<number>(0);
const totalList = ref<number>(1);
const pagination = ref({
sortBy: "createdAt",
descending: true,
page: 1,
rowsPerPage: 10,
});
/**
* function เปืด popup เพิ่มการประเมิน
* @param data
@ -60,24 +69,22 @@ function openExpert() {
router.push("/evaluate/expert");
}
/** ตัวแปร Paging*/
const page = ref<number>(1);
const pageSize = ref<number>(25);
const maxPage = ref<number>(10);
/** function เรียกรายการประเมิน*/
async function fetchEvaluteList() {
showLoader();
const body = {
page: page.value,
pageSize: pageSize.value,
page: pagination.value.page,
pageSize: pagination.value.rowsPerPage,
keyword: store.filterKeyword,
status: selectedStatus.value,
};
await http
.put(config.API.evaluationList(), body)
.then(async (res) => {
maxPage.value = Math.ceil(res.data.result.total / pageSize.value);
totalList.value = Math.ceil(
res.data.result.total / pagination.value.rowsPerPage
);
total.value = res.data.result.total;
store.fetchEvaluateList(res.data.result.data);
await getProfileCheck();
})
@ -112,24 +119,6 @@ async function getProfileCheck() {
});
}
/**
* function updatePaging
* @param newPagination ข้อมูลใหม่ของ Paging
* @param currentPage หน้า Page
*/
async function updatePaging(newPagination: any, currentPage: number) {
page.value = currentPage;
pageSize.value = newPagination.rowsPerPage;
await fetchEvaluteList();
}
async function filterFn() {
page.value = 1;
pageSize.value = pageSize.value;
await fetchEvaluteList();
}
const selectedStatus = ref<string[]>([
"CHECK_SPEC",
"PREPARE_DOC_V1",
@ -187,6 +176,18 @@ watch(
}
);
function getSearch() {
pagination.value.page = 1;
fetchEvaluteList();
}
watch(
() => pagination.value.rowsPerPage,
async () => {
getSearch();
}
);
/** hook lifecycle*/
onMounted(async () => {
await fetchEvaluteList();
@ -260,7 +261,7 @@ onMounted(async () => {
option-value="val"
label="ค้นหาสถานะ"
:style="!$q.screen.gt.xs ? '' : 'width: 35vw'"
@update:model-value="fetchEvaluteList"
@update:model-value="getSearch"
use-input
@filter="(inputValue:any,doneFn:Function) => filterOption(inputValue, doneFn) "
>
@ -286,7 +287,7 @@ onMounted(async () => {
v-model="store.filterKeyword"
label="ค้นหา"
debounce="300"
@keydown.enter.prevent="filterFn"
@keydown.enter.prevent="getSearch"
>
<template v-slot:append>
<q-icon name="search" />
@ -311,11 +312,10 @@ onMounted(async () => {
</div>
<div class="col-12">
<TableListEvaluate
:page="page"
:pageSize="pageSize"
:maxPage="maxPage"
@update:pagination="updatePaging"
:fetchData="fetchEvaluteList"
v-model:total="total"
v-model:total-list="totalList"
v-model:pagination="pagination"
/>
</div>
</q-card>

73
src/modules/07_appealComplain/views/Main.vue
View file

@ -13,12 +13,6 @@ import { useAppealComplainStore } from "@/modules/07_appealComplain/store";
import type { FormType } from "@/modules/07_appealComplain/interface/response/mainType";
import type { DataOption } from "@/modules/07_appealComplain/interface/index/main";
const total = ref<number>(0);
const currentPage = ref<number>(1);
const maxPage = ref<number>(1);
const page = ref<number>(1);
const rowsPerPage = ref<number>(10);
const $q = useQuasar();
const router = useRouter();
const mixin = useCounterMixin();
@ -31,14 +25,13 @@ const type = ref<DataOption[]>([
...dataStore.typeOptions,
]);
/**
* ตั้งค่า pagination
*/
const total = ref<number>(0);
const totalList = ref<number>(1);
const pagination = ref({
sortBy: "lastUpdatedAt",
sortBy: "createdAt",
descending: true,
page: page.value,
rowsPerPage: rowsPerPage.value,
page: 1,
rowsPerPage: 10,
});
/**
@ -168,14 +161,16 @@ async function getData() {
formData.status,
formData.type,
formData.year,
currentPage.value,
rowsPerPage.value,
pagination.value.page,
pagination.value.rowsPerPage,
filterKeyword.value
)
)
.then((res) => {
totalList.value = Math.ceil(
res.data.result.total / pagination.value.rowsPerPage
);
total.value = res.data.result.total;
maxPage.value = Math.ceil(res.data.result.total / rowsPerPage.value);
let data = res.data.result.data;
dataStore.fetchAppealComplain(data);
})
@ -196,12 +191,12 @@ function clickBack() {
/** ดึงข้อมูลเมื่อมีการปรับฟิลเตอร์ */
function dataUpdate() {
getData();
getSearch();
}
/** ดึงข้อมูลจาก keyword*/
function filterFn() {
getData();
getSearch();
}
/**
@ -216,20 +211,20 @@ function redirectToPageadd() {
router.push(`/appeal-complain/add`);
}
watch(
() => currentPage.value,
() => {
rowsPerPage.value = pagination.value.rowsPerPage;
getData();
}
);
function updatePagination(newPagination: any) {
pagination.value.page = 1;
pagination.value.rowsPerPage = newPagination.rowsPerPage;
}
function getSearch() {
pagination.value.page = 1;
getData();
}
watch(
() => pagination.value.rowsPerPage,
() => {
rowsPerPage.value = pagination.value.rowsPerPage;
currentPage.value = 1;
getData();
async () => {
getSearch();
}
);
@ -335,7 +330,7 @@ onMounted(async () => {
option-label="name"
option-value="id"
:options="dataStore.statusOptions"
@update:model-value="dataUpdate"
@update:model-value="getSearch"
/>
</div>
<q-space />
@ -352,7 +347,13 @@ onMounted(async () => {
@keydown.enter.prevent="filterFn"
>
<template v-slot:append>
<q-icon name="search" />
<q-icon v-if="filterKeyword == ''" name="search" />
<q-icon
v-if="filterKeyword !== ''"
name="clear"
class="cursor-pointer"
@click="(filterKeyword = ''), getSearch()"
/>
</template>
</q-input>
@ -383,21 +384,24 @@ onMounted(async () => {
:rows="dataStore.rows"
:columns="dataStore.columns"
:visible-columns="dataStore.visibleColumns"
v-model:pagination="pagination"
:rows-per-page-options="[10, 25, 50, 100]"
@update:pagination="updatePagination"
>
<template v-slot:pagination="scope">
ทั้งหมด {{ total }} รายการ
<q-pagination
v-model="currentPage"
v-model="pagination.page"
active-color="primary"
color="dark"
:max="Number(maxPage)"
:max="Number(totalList)"
size="sm"
boundary-links
direction-links
:max-pages="5"
@update:model-value="getData()"
></q-pagination>
</template>
<template v-slot:header="props">
<q-tr :props="props">
<q-th
@ -420,11 +424,12 @@ onMounted(async () => {
>
<div v-if="col.name == 'no'">
{{
(currentPage - 1) * Number(pagination.rowsPerPage) +
(pagination.page - 1) * pagination.rowsPerPage +
props.rowIndex +
1
}}
</div>
<div v-else>
{{ col.value ? col.value : "-" }}
</div>

2
src/modules/08_KPI/components/Evaluator/01_TabAll.vue
View file

@ -51,7 +51,7 @@ async function redirectViewDetail(id: string) {
:paging="true"
dense
class="custom-table2"
:rows-per-page-options="[10, 25, 50, 100]"
:rows-per-page-options="[1, 25, 50, 100]"
:visible-columns="visibleColumns"
v-model:pagination="pagination"
@update:pagination="props.updatePagination"

2
src/modules/08_KPI/views/main.vue
View file

@ -414,7 +414,7 @@ onMounted(async () => {
autoApply
year-picker
:enableTimePicker="false"
@update:model-value="fetchRoundOption('main')"
@update:model-value=" formQuery.page = 1,fetchRoundOption('main')"
>
<template #year="{ year }">{{ year + 543 }}</template>
<template #year-overlay-value="{ value }">{{

2
src/modules/08_KPI/views/mainEvaluator.vue
View file

@ -225,7 +225,7 @@ onMounted(async () => {
autoApply
year-picker
:enableTimePicker="false"
@update:model-value="fetchRoundOption(true)"
@update:model-value=" store.formQuery.page = 1,fetchRoundOption(true)"
>
<template #year="{ year }">{{ year + 543 }}</template>
<template #year-overlay-value="{ value }">{{

4
src/modules/14_IDP/views/main.vue
View file

@ -331,7 +331,7 @@ onMounted(async () => {
<template v-if="status !== 'ALL'" v-slot:append>
<q-icon
name="cancel"
@click.stop.prevent="(status = 'ALL'), getListData()"
@click.stop.prevent="(status = 'ALL'), getSerach()"
class="cursor-pointer"
/>
</template>
@ -382,7 +382,7 @@ onMounted(async () => {
row-key="id"
:paging="true"
:visible-columns="visibleColumns"
:rows-per-page-options="[10, 25, 50, 100]"
:rows-per-page-options="[1, 25, 50, 100]"
@update:pagination="updatePagination"
>
<template v-slot:header="props">