แก้ การลา paging
This commit is contained in:
setthawutttty
parent
9080d52504
commit
ac355cb843
4 changed files with 94 additions and 123 deletions
|
|
@ -23,16 +23,17 @@ const leaveStore = useLeavelistDataStore();
|
|||
const dataToobar = ref<any[]>([]);
|
||||
const { showLoader, hideLoader, messageError } = mixin;
|
||||
|
||||
const total = ref<number>(0);
|
||||
const totalList = ref<number>(1);
|
||||
|
||||
const querySting = reactive<QuerySting>({
|
||||
year: leaveStore.filter.year, //*ปีในการยื่นขอใบลา(ใช้เป็น คศ.)
|
||||
type: leaveStore.filter.type, //*Id ประเภทการลา
|
||||
status: leaveStore.filter.status, //*สถานะการของลา
|
||||
page: 1, //*หน้า
|
||||
pageSize: 10, //*จำนวนแถวต่อหน้า
|
||||
page: 1, //*สถานะการของลา
|
||||
pageSize: 10, //*สถานะการของลา
|
||||
keyword: leaveStore.filter.keyword, //keyword ค้นหา
|
||||
});
|
||||
const maxPage = ref<number>(1);
|
||||
const totalList = ref<number>(0);
|
||||
|
||||
//** เรียกข้อมูลจาก API*/
|
||||
async function fecthLeaveList() {
|
||||
|
|
@ -50,8 +51,10 @@ async function fecthLeaveList() {
|
|||
.post(config.API.leaveList(), querySting)
|
||||
.then((res) => {
|
||||
const data = res.data.result;
|
||||
maxPage.value = Math.ceil(data.total / querySting.pageSize);
|
||||
totalList.value = data.total;
|
||||
totalList.value = Math.ceil(
|
||||
res.data.result.total / querySting.pageSize
|
||||
);
|
||||
total.value = res.data.result.total;
|
||||
leaveStore.fetchListLeave(data.data); /** ส่งข้อมูลไป stores*/
|
||||
})
|
||||
.catch((err) => {
|
||||
|
|
@ -63,27 +66,6 @@ async function fecthLeaveList() {
|
|||
}
|
||||
}
|
||||
|
||||
/**
|
||||
*
|
||||
* @param newPage หน้า
|
||||
* @param pageSize จำนวนต่อแถว
|
||||
* @param dateFilter ข้อมูลค้นหา
|
||||
*/
|
||||
async function updatePaging(
|
||||
newPage: number,
|
||||
pageSize: number,
|
||||
dateFilter: DateFilter
|
||||
) {
|
||||
querySting.year = dateFilter ? dateFilter.year : querySting.year;
|
||||
querySting.type = dateFilter ? dateFilter.type : querySting.type;
|
||||
querySting.status = dateFilter ? dateFilter.status : querySting.status;
|
||||
querySting.page = newPage;
|
||||
querySting.pageSize = pageSize ? pageSize : querySting.pageSize;
|
||||
querySting.keyword = dateFilter ? dateFilter.keyword : querySting.keyword;
|
||||
|
||||
await fecthLeaveList();
|
||||
}
|
||||
|
||||
/** function เรียกข้อมูลสถานะ*/
|
||||
async function fetchOption() {
|
||||
await http
|
||||
|
|
@ -97,6 +79,18 @@ async function fetchOption() {
|
|||
.finally(() => {});
|
||||
}
|
||||
|
||||
function getSearch() {
|
||||
querySting.page = 1;
|
||||
fecthLeaveList();
|
||||
}
|
||||
|
||||
watch(
|
||||
() => querySting.pageSize,
|
||||
async () => {
|
||||
getSearch();
|
||||
}
|
||||
);
|
||||
|
||||
watch(
|
||||
() => leaveStore.tabView,
|
||||
async () => {
|
||||
|
|
@ -150,18 +144,13 @@ onMounted(async () => {
|
|||
</q-tabs>
|
||||
</q-toolbar>
|
||||
<div v-if="leaveStore.tabView === 'list'">
|
||||
<ToolBar
|
||||
:rowsPerPage="querySting.pageSize"
|
||||
@update:querySting="updatePaging"
|
||||
:dataToobar="dataToobar"
|
||||
/>
|
||||
<ToolBar :dataToobar="dataToobar" v-model:query-sting="querySting" :get-list="fecthLeaveList" :get-search="getSearch"/>
|
||||
<TableList
|
||||
:page="querySting.page"
|
||||
:rowsPerPage="querySting.pageSize"
|
||||
:maxPage="maxPage"
|
||||
:totalList="totalList"
|
||||
@update:querySting="updatePaging"
|
||||
v-model:total="total"
|
||||
v-model:total-list="totalList"
|
||||
v-model:pagination="querySting"
|
||||
:dataToobar="dataToobar"
|
||||
:getList="fecthLeaveList"
|
||||
/>
|
||||
</div>
|
||||
<div v-if="leaveStore.tabView === 'calendar'"><CalendarView /></div>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<script setup lang="ts">
|
||||
import { ref, reactive, onMounted } from "vue";
|
||||
import { ref, reactive, onMounted,watch } from "vue";
|
||||
import { useQuasar } from "quasar";
|
||||
|
||||
import http from "@/plugins/http";
|
||||
|
|
@ -23,17 +23,17 @@ const { fetchListLeaveReject } = leaveStore;
|
|||
const dataToobar = ref<any[]>([]);
|
||||
const $q = useQuasar(); //ใช้ noti quasar
|
||||
|
||||
const total = ref<number>(0);
|
||||
const totalList = ref<number>(1);
|
||||
|
||||
const querySting = reactive<QuerySting>({
|
||||
year: leaveStore.filter.year, //*ปีในการยื่นขอใบลา(ใช้เป็น คศ.)
|
||||
type: leaveStore.filter.type, //*Id ประเภทการลา
|
||||
status: leaveStore.filter.status, //*สถานะการของลา
|
||||
page: 1, //*หน้า
|
||||
pageSize: 10, //*จำนวนแถวต่อหน้า
|
||||
page: 1, //*สถานะการของลา
|
||||
pageSize: 10, //*สถานะการของลา
|
||||
keyword: leaveStore.filter.keyword, //keyword ค้นหา
|
||||
});
|
||||
const maxPage = ref<number>(1);
|
||||
const totalList = ref<number>(0);
|
||||
|
||||
//** เรียกข้อมูลจาก API*/
|
||||
async function fecthLeaveList() {
|
||||
leaveStore.rows = [];
|
||||
|
|
@ -50,8 +50,10 @@ async function fecthLeaveList() {
|
|||
.post(config.API.leaveListDelete(), querySting)
|
||||
.then((res) => {
|
||||
const data = res.data.result;
|
||||
maxPage.value = Math.ceil(data.total / querySting.pageSize);
|
||||
totalList.value = data.tatol;
|
||||
totalList.value = Math.ceil(
|
||||
res.data.result.total / querySting.pageSize
|
||||
);
|
||||
total.value = res.data.result.total;
|
||||
fetchListLeaveReject(data.data); /** ส่งข้อมูลไป stores*/
|
||||
})
|
||||
.catch((err) => {
|
||||
|
|
@ -98,6 +100,18 @@ async function fetchOption() {
|
|||
.finally(() => {});
|
||||
}
|
||||
|
||||
function getSearch() {
|
||||
querySting.page = 1;
|
||||
fecthLeaveList();
|
||||
}
|
||||
|
||||
watch(
|
||||
() => querySting.pageSize,
|
||||
async () => {
|
||||
getSearch();
|
||||
}
|
||||
);
|
||||
|
||||
onMounted(async () => {
|
||||
await fetchOption();
|
||||
await fecthLeaveList();
|
||||
|
|
@ -105,17 +119,17 @@ onMounted(async () => {
|
|||
</script>
|
||||
<template>
|
||||
<ToolBar
|
||||
:rowsPerPage="querySting.pageSize"
|
||||
@update:querySting="updatePaging"
|
||||
:dataToobar="dataToobar"
|
||||
v-model:query-sting="querySting"
|
||||
:get-list="fecthLeaveList"
|
||||
:get-search="getSearch"
|
||||
/>
|
||||
<TableList
|
||||
:page="querySting.page"
|
||||
:rowsPerPage="querySting.pageSize"
|
||||
:maxPage="maxPage"
|
||||
:totalList="totalList"
|
||||
@update:querySting="updatePaging"
|
||||
v-model:total="total"
|
||||
v-model:total-list="totalList"
|
||||
v-model:pagination="querySting"
|
||||
:dataToobar="dataToobar"
|
||||
:getList="fecthLeaveList"
|
||||
/>
|
||||
</template>
|
||||
|
||||
|
|
|
|||
|
|
@ -9,6 +9,10 @@ import { useLeavelistDataStore } from "@/modules/09_leave/stores/LeaveStore";
|
|||
const leaveStore = useLeavelistDataStore();
|
||||
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 columnsLeave = ref<QTableProps["columns"]>([
|
||||
{
|
||||
|
|
@ -180,6 +184,7 @@ const visibleReject = ref<string[]>([
|
|||
]);
|
||||
|
||||
const props = defineProps({
|
||||
getList: Function,
|
||||
rows: {
|
||||
type: Object,
|
||||
require: true,
|
||||
|
|
@ -203,29 +208,15 @@ const props = defineProps({
|
|||
dataToobar: Object,
|
||||
});
|
||||
|
||||
const emit = defineEmits(["update:querySting"]);
|
||||
|
||||
const currentPage = ref<number>(1);
|
||||
const pagination = ref({
|
||||
descending: true,
|
||||
page: props.page,
|
||||
rowsPerPage: props.rowsPerPage,
|
||||
});
|
||||
|
||||
function updateQuerySting(newPage: number, pageSize: number) {
|
||||
// ส่ง event ไปยัง parent component เพื่ออัพเดทค่า props
|
||||
emit("update:querySting", newPage, pageSize);
|
||||
}
|
||||
|
||||
/** ไปหน้ารายละเอียด */
|
||||
function redirectToDetail(id: string) {
|
||||
const routePrefix = leaveStore.tabMenu === "1" ? "/leave" : "/leave-reject";
|
||||
router.push(`${routePrefix}/detail/${id}`);
|
||||
}
|
||||
|
||||
function updatedPagination(newPageZize: any) {
|
||||
currentPage.value = 1;
|
||||
pagination.value.rowsPerPage = newPageZize.rowsPerPage;
|
||||
function updatePagination(newPagination: any) {
|
||||
pagination.value.page = 1;
|
||||
pagination.value.pageSize = newPagination.rowsPerPage;
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -246,12 +237,6 @@ function convert(val: any) {
|
|||
}
|
||||
}
|
||||
|
||||
watch([() => currentPage.value, () => pagination.value.rowsPerPage], () => {
|
||||
currentPage.value &&
|
||||
pagination.value.rowsPerPage &&
|
||||
updateQuerySting(currentPage.value, pagination.value.rowsPerPage);
|
||||
});
|
||||
|
||||
/** Hook*/
|
||||
onMounted(() => {
|
||||
if (leaveStore.tabMenu === "1") {
|
||||
|
|
@ -275,10 +260,9 @@ onMounted(() => {
|
|||
:paging="true"
|
||||
dense
|
||||
class="custom-header-table"
|
||||
:rows-per-page-options="[10, 25, 50, 100]"
|
||||
:visible-columns="leaveStore.visibleColumns"
|
||||
:pagination="pagination"
|
||||
@update:pagination="updatedPagination"
|
||||
:rows-per-page-options="[1, 25, 50, 100]"
|
||||
@update:pagination="updatePagination"
|
||||
>
|
||||
<template v-slot:header="props">
|
||||
<q-tr :props="props">
|
||||
|
|
@ -306,7 +290,7 @@ onMounted(() => {
|
|||
<q-td v-for="col in props.cols" :key="col.name" :props="props">
|
||||
<div v-if="col.name == 'no'">
|
||||
{{
|
||||
(currentPage - 1) * Number(pagination.rowsPerPage) +
|
||||
(pagination.page - 1) * pagination.pageSize +
|
||||
props.rowIndex +
|
||||
1
|
||||
}}
|
||||
|
|
@ -322,15 +306,17 @@ onMounted(() => {
|
|||
</q-tr>
|
||||
</template>
|
||||
<template v-slot:pagination="scope">
|
||||
ทั้งหมด {{ totalList }} รายการ
|
||||
ทั้งหมด {{ total }} รายการ
|
||||
<q-pagination
|
||||
v-model="currentPage"
|
||||
v-model="pagination.page"
|
||||
active-color="primary"
|
||||
color="dark"
|
||||
:max="Number(props.maxPage)"
|
||||
:max="Number(totalList)"
|
||||
size="sm"
|
||||
boundary-links
|
||||
direction-links
|
||||
:max-pages="5"
|
||||
@update:model-value="props.getList?.()"
|
||||
></q-pagination>
|
||||
</template>
|
||||
</d-table>
|
||||
|
|
|
|||
|
|
@ -2,44 +2,26 @@
|
|||
import { ref, watch } from "vue";
|
||||
import { useQuasar } from "quasar";
|
||||
|
||||
import type { DateFilter } from "@/modules/09_leave/interface/request/leave";
|
||||
import type {
|
||||
DateFilter,
|
||||
QuerySting,
|
||||
} from "@/modules/09_leave/interface/request/leave";
|
||||
import type { DataOption } from "@/modules/09_leave/interface/index/Main";
|
||||
|
||||
/** importStores*/
|
||||
import { useLeavelistDataStore } from "@/modules/09_leave/stores/LeaveStore";
|
||||
|
||||
const querySting = defineModel<QuerySting>("querySting", { required: true });
|
||||
|
||||
const $q = useQuasar();
|
||||
const leaveStore = useLeavelistDataStore();
|
||||
|
||||
const props = defineProps({
|
||||
rowsPerPage: {
|
||||
type: Number,
|
||||
require: true,
|
||||
},
|
||||
dataToobar: Array,
|
||||
getSearch: Function,
|
||||
getList: Function,
|
||||
});
|
||||
|
||||
const emit = defineEmits(["update:querySting"]);
|
||||
|
||||
/**
|
||||
* function update ข้อมูลการค้นหา (QuerySting)
|
||||
* @param newPage หน้า
|
||||
* @param pageSize ข้อมูลต่อแถว
|
||||
* @param dateFilter ข้อมูล Filter
|
||||
*/
|
||||
function updateQuerySting(
|
||||
newPage: number,
|
||||
pageSize: number,
|
||||
dateFilter: DateFilter
|
||||
) {
|
||||
// ส่ง event ไปยัง parent component เพื่ออัพเดทค่า props
|
||||
emit("update:querySting", newPage, pageSize, dateFilter);
|
||||
}
|
||||
|
||||
/** function ค้นหาข้อมูลใน Table*/
|
||||
async function filterListLeave() {
|
||||
updateQuerySting(1, 0, leaveStore.filter);
|
||||
}
|
||||
|
||||
/** Option*/
|
||||
const optionTypeMain = ref<DataOption[]>([]);
|
||||
|
|
@ -137,13 +119,13 @@ watch(
|
|||
<div class="col-xs-12 col-sm-3 col-md-2">
|
||||
<datepicker
|
||||
menu-class-name="modalfix"
|
||||
v-model="leaveStore.filter.year"
|
||||
v-model="querySting.year"
|
||||
class="col-2"
|
||||
:locale="'th'"
|
||||
autoApply
|
||||
year-picker
|
||||
:enableTimePicker="false"
|
||||
@update:model-value="filterListLeave"
|
||||
@update:model-value="props.getSearch?.()"
|
||||
>
|
||||
<template #year="{ year }">{{ year + 543 }}</template>
|
||||
<template #year-overlay-value="{ value }">{{
|
||||
|
|
@ -153,7 +135,7 @@ watch(
|
|||
<q-input
|
||||
dense
|
||||
outlined
|
||||
:model-value="Number(leaveStore.filter.year) + 543"
|
||||
:model-value="Number(querySting.year) + 543"
|
||||
:label="`${'ปีงบประมาณ'}`"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
|
|
@ -175,12 +157,12 @@ watch(
|
|||
map-options
|
||||
outlined
|
||||
dense
|
||||
v-model="leaveStore.filter.type"
|
||||
v-model="querySting.type"
|
||||
:options="optionType"
|
||||
option-value="id"
|
||||
option-label="name"
|
||||
label="ประเภทการลา"
|
||||
@update:model-value="filterListLeave"
|
||||
@update:model-value="props.getSearch?.()"
|
||||
use-input
|
||||
@filter="
|
||||
(inputValue:any, doneFn:Function) =>
|
||||
|
|
@ -194,7 +176,7 @@ watch(
|
|||
</template>
|
||||
<template
|
||||
v-if="
|
||||
leaveStore.filter.type !== '00000000-0000-0000-0000-000000000000'
|
||||
querySting.type !== '00000000-0000-0000-0000-000000000000'
|
||||
"
|
||||
v-slot:append
|
||||
>
|
||||
|
|
@ -202,9 +184,9 @@ watch(
|
|||
name="cancel"
|
||||
@click.stop.prevent="
|
||||
(optionType = optionTypeMain),
|
||||
(leaveStore.filter.type =
|
||||
(querySting.type =
|
||||
'00000000-0000-0000-0000-000000000000'),
|
||||
filterListLeave()
|
||||
props.getSearch?.()
|
||||
"
|
||||
class="cursor-pointer"
|
||||
/>
|
||||
|
|
@ -218,12 +200,12 @@ watch(
|
|||
map-options
|
||||
outlined
|
||||
dense
|
||||
v-model="leaveStore.filter.status"
|
||||
v-model="querySting.status"
|
||||
:options="optionStatus"
|
||||
option-value="id"
|
||||
option-label="name"
|
||||
label="สถานะ"
|
||||
@update:model-value="filterListLeave"
|
||||
@update:model-value="props.getSearch?.()"
|
||||
use-input
|
||||
@filter="
|
||||
(inputValue:any, doneFn:Function) =>
|
||||
|
|
@ -235,13 +217,13 @@ watch(
|
|||
<q-item-section class="text-grey"> ไม่มีข้อมูล </q-item-section>
|
||||
</q-item>
|
||||
</template>
|
||||
<template v-if="leaveStore.filter.status !== 'ALL'" v-slot:append>
|
||||
<template v-if="querySting.status !== 'ALL'" v-slot:append>
|
||||
<q-icon
|
||||
name="cancel"
|
||||
@click.stop.prevent="
|
||||
(optionStatus = optionStatusMain),
|
||||
(leaveStore.filter.status = 'ALL'),
|
||||
filterListLeave()
|
||||
(querySting.status = 'ALL'),
|
||||
props.getSearch?.()
|
||||
"
|
||||
class="cursor-pointer"
|
||||
/>
|
||||
|
|
@ -254,9 +236,9 @@ watch(
|
|||
for="filterTable"
|
||||
dense
|
||||
outlined
|
||||
v-model="leaveStore.filter.keyword"
|
||||
v-model="querySting.keyword"
|
||||
label="ค้นหา"
|
||||
@keydown.enter.prevent="filterListLeave"
|
||||
@keydown.enter.prevent="props.getSearch?.()"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-xs-12 col-sm-3 col-md-2">
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue