fix load Table
This commit is contained in:
DESKTOP-1R2VSQH\Lenovo ThinkPad E490
parent
1ec4a97538
commit
d39753fbde
56 changed files with 684 additions and 978 deletions
|
|
@ -1,5 +1,5 @@
|
|||
<script setup lang="ts">
|
||||
import { onMounted, ref, watch } from "vue";
|
||||
import { ref } from "vue";
|
||||
import { useQuasar, type QTableProps } from "quasar";
|
||||
|
||||
import http from "@/plugins/http";
|
||||
|
|
@ -8,15 +8,16 @@ import { useCounterMixin } from "@/stores/mixin";
|
|||
import { useLeaveStore } from "@/modules/05_leave/store";
|
||||
import { useDataStore } from "@/stores/data";
|
||||
|
||||
import DialogHeader from "@/components/DialogHeader.vue";
|
||||
import SkeletonTable from "@/components/SkeletonTable.vue";
|
||||
import type { PropsTable } from "@/interface/PropsTable";
|
||||
import type { DataCommander } from "@/modules/05_leave/interface/response/main";
|
||||
|
||||
const mixin = useCounterMixin();
|
||||
import DialogHeader from "@/components/DialogHeader.vue";
|
||||
|
||||
const $q = useQuasar();
|
||||
const dataStore = useLeaveStore();
|
||||
const storeData = useDataStore();
|
||||
const { date2Thai, showLoader, hideLoader, messageError } = mixin;
|
||||
const { date2Thai, messageError } = useCounterMixin();
|
||||
|
||||
const modal = ref<boolean>(false);
|
||||
/** รับ props มาจากหน้าหลัก */
|
||||
const props = defineProps({
|
||||
model: {
|
||||
|
|
@ -25,21 +26,13 @@ const props = defineProps({
|
|||
},
|
||||
});
|
||||
|
||||
const $q = useQuasar();
|
||||
const isAct = ref<boolean>(false);
|
||||
const search = ref<string>("");
|
||||
const total = ref<number>(0);
|
||||
const totalList = ref<number>(1);
|
||||
const pagination = ref({
|
||||
sortBy: "createdAt",
|
||||
descending: true,
|
||||
page: 1,
|
||||
rowsPerPage: 10,
|
||||
});
|
||||
const modal = ref<boolean>(false);
|
||||
|
||||
const selected = ref<any[]>([]);
|
||||
const isAct = ref<boolean>(false);
|
||||
const selected = ref<DataCommander[]>([]);
|
||||
const search = ref<string>("");
|
||||
const isLoading = ref<boolean>(false);
|
||||
const rows = ref<any[]>([]);
|
||||
const rows = ref<DataCommander[]>([]);
|
||||
const columns = ref<QTableProps["columns"]>([
|
||||
{
|
||||
name: "posNo",
|
||||
|
|
@ -72,28 +65,15 @@ const columns = ref<QTableProps["columns"]>([
|
|||
style: "font-size: 14px",
|
||||
},
|
||||
]);
|
||||
const pagination = ref<PropsTable.Pagination>({
|
||||
sortBy: "createdAt",
|
||||
descending: true,
|
||||
page: 1,
|
||||
rowsPerPage: 10,
|
||||
rowsNumber: 0,
|
||||
});
|
||||
|
||||
function onPerson() {
|
||||
modal.value = true;
|
||||
getCommander();
|
||||
}
|
||||
|
||||
function onSubmit() {
|
||||
modal.value = false;
|
||||
dataStore.dear = selected.value[0].firstName
|
||||
? `${selected.value[0].prefix}${selected.value[0].firstName} ${selected.value[0].lastName}`
|
||||
: "";
|
||||
|
||||
dataStore.commanderPosition = selected.value[0].posExecutiveName;
|
||||
}
|
||||
|
||||
function closeDialog() {
|
||||
modal.value = false;
|
||||
search.value = "";
|
||||
rows.value = [];
|
||||
selected.value = [];
|
||||
}
|
||||
|
||||
/** ฟังก์ชันสำหรับดึงข้อมูลผู้บังคับบัญชา */
|
||||
async function getCommander() {
|
||||
isLoading.value = true;
|
||||
await http
|
||||
|
|
@ -109,11 +89,12 @@ async function getCommander() {
|
|||
: "employee",
|
||||
})
|
||||
.then((res) => {
|
||||
rows.value = res.data.result.data;
|
||||
total.value = res.data.result.total;
|
||||
totalList.value = Math.ceil(
|
||||
res.data.result.total / pagination.value.rowsPerPage
|
||||
);
|
||||
const result = res.data.result;
|
||||
rows.value = result.data;
|
||||
pagination.value = {
|
||||
...pagination.value,
|
||||
rowsNumber: result.total,
|
||||
};
|
||||
})
|
||||
.catch((e) => {
|
||||
messageError($q, e);
|
||||
|
|
@ -123,25 +104,53 @@ async function getCommander() {
|
|||
});
|
||||
}
|
||||
|
||||
function updatePagination(newPagination: any) {
|
||||
pagination.value.rowsPerPage = newPagination.rowsPerPage;
|
||||
/*** ฟังก์ชันสำหรับเปิด Modal และดึงข้อมูลผู้บังคับบัญชา */
|
||||
function onPerson() {
|
||||
modal.value = true;
|
||||
getCommander();
|
||||
}
|
||||
|
||||
/*** ฟังก์ชันสำหรับปิด Modal และล้างข้อมูล */
|
||||
function closeDialog() {
|
||||
modal.value = false;
|
||||
search.value = "";
|
||||
rows.value = [];
|
||||
selected.value = [];
|
||||
pagination.value = {
|
||||
sortBy: "createdAt",
|
||||
descending: true,
|
||||
page: 1,
|
||||
rowsPerPage: 10,
|
||||
rowsNumber: 0,
|
||||
};
|
||||
}
|
||||
|
||||
/** ฟังก์ชันสำหรับยืนยันการเลือกผู้บังคับบัญชา */
|
||||
function onSubmit() {
|
||||
modal.value = false;
|
||||
dataStore.dear = selected.value[0].firstName
|
||||
? `${selected.value[0].prefix}${selected.value[0].firstName} ${selected.value[0].lastName}`
|
||||
: "";
|
||||
|
||||
dataStore.commanderPosition = selected.value[0].posExecutiveName;
|
||||
}
|
||||
|
||||
/**
|
||||
* ฟังก์ชันรับ request จากตาราง เมื่อมีการเปลี่ยน pagination
|
||||
* @param requestProps ข้อมูลการร้องขอจากตาราง
|
||||
*/
|
||||
function onTableRequest(requestProps: PropsTable.RequestProps) {
|
||||
const newPagination = requestProps?.pagination || requestProps;
|
||||
if (!newPagination?.page || !newPagination?.rowsPerPage) return;
|
||||
pagination.value = { ...newPagination };
|
||||
getCommander();
|
||||
}
|
||||
|
||||
/** ฟังก์ชันสำหรับค้นหาข้อมูล*/
|
||||
function getSearch() {
|
||||
pagination.value.page = 1;
|
||||
getCommander();
|
||||
}
|
||||
|
||||
watch(
|
||||
() => pagination.value.rowsPerPage,
|
||||
async () => {
|
||||
getSearch();
|
||||
}
|
||||
);
|
||||
|
||||
/**Hook */
|
||||
onMounted(() => {
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
|
@ -227,15 +236,6 @@ onMounted(() => {
|
|||
v-model="dataStore.typeLeave"
|
||||
label="เรื่อง"
|
||||
/>
|
||||
<!-- <q-input
|
||||
class="col-12 col-sm-4"
|
||||
dense
|
||||
outlined
|
||||
readonly
|
||||
bg-color="white"
|
||||
v-model="dataStore.commanderPosition"
|
||||
label="เรียน"
|
||||
/> -->
|
||||
|
||||
<q-input
|
||||
class="col-12 col-sm-4"
|
||||
|
|
@ -315,7 +315,7 @@ onMounted(() => {
|
|||
<div class="row q-col-gutter-sm">
|
||||
<div class="col-12">
|
||||
<div class="row q-col-gutter-md items-start">
|
||||
<div class="col-12 col-sm-4 col-md-4">
|
||||
<div class="col-12 col-sm-6 col-md-4">
|
||||
<q-input
|
||||
v-model="search"
|
||||
outlined
|
||||
|
|
@ -325,17 +325,20 @@ onMounted(() => {
|
|||
@keydown.enter.prevent="getSearch()"
|
||||
/>
|
||||
</div>
|
||||
<q-checkbox
|
||||
keep-color
|
||||
v-model="isAct"
|
||||
label="แสดงเฉพาะรักษาการแทน"
|
||||
color="primary"
|
||||
>
|
||||
<q-tooltip>แสดงเฉพาะรักษาการแทน </q-tooltip>
|
||||
</q-checkbox>
|
||||
<q-space />
|
||||
<div class="col-12 col-sm-6 col-md-4">
|
||||
<q-checkbox
|
||||
keep-color
|
||||
v-model="isAct"
|
||||
label="แสดงเฉพาะรักษาการแทน"
|
||||
color="primary"
|
||||
@update:model-value="getSearch()"
|
||||
>
|
||||
<q-tooltip>แสดงเฉพาะรักษาการแทน </q-tooltip>
|
||||
</q-checkbox>
|
||||
</div>
|
||||
<q-space v-if="$q.screen.gt.sm" />
|
||||
|
||||
<div class="col-12 col-sm-6 col-md-3">
|
||||
<div class="col-12 col-md-3">
|
||||
<q-btn
|
||||
color="primary"
|
||||
icon="search"
|
||||
|
|
@ -349,9 +352,7 @@ onMounted(() => {
|
|||
</div>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<SkeletonTable v-if="isLoading" :columns="columns" />
|
||||
<d-table
|
||||
v-else
|
||||
ref="table"
|
||||
:columns="columns"
|
||||
:rows="rows"
|
||||
|
|
@ -362,25 +363,11 @@ onMounted(() => {
|
|||
dense
|
||||
:rows-per-page-options="[10, 25, 50, 100]"
|
||||
selection="single"
|
||||
@update:pagination="updatePagination"
|
||||
v-model:pagination="pagination"
|
||||
v-model:selected="selected"
|
||||
:loading="isLoading"
|
||||
@request="onTableRequest"
|
||||
>
|
||||
<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="getSearch"
|
||||
></q-pagination>
|
||||
</template>
|
||||
|
||||
<template v-slot:header-selection="scope">
|
||||
<q-checkbox
|
||||
keep-color
|
||||
|
|
|
|||
|
|
@ -2,8 +2,8 @@
|
|||
import { ref, useAttrs, watch } from "vue";
|
||||
import { useQuasar } from "quasar";
|
||||
|
||||
import type { PropsTable } from "@/interface/PropsTable";
|
||||
import { useLeaveStore } from "@/modules/05_leave/store";
|
||||
import SkeletonTable from "@/components/SkeletonTable.vue";
|
||||
|
||||
const $q = useQuasar();
|
||||
const attrs = ref<any>(useAttrs());
|
||||
|
|
@ -54,13 +54,26 @@ const table = ref<any>(null);
|
|||
|
||||
/** ตั้งค่า pagination*/
|
||||
const currentPage = ref<number>(1);
|
||||
const pagination = ref({
|
||||
|
||||
const pagination = ref<PropsTable.Pagination>({
|
||||
sortBy: "dateSendLeave",
|
||||
descending: true,
|
||||
page: 1,
|
||||
rowsPerPage: Number(props.pageSize),
|
||||
|
||||
rowsNumber: Number(props.total),
|
||||
});
|
||||
|
||||
// Watch props เพื่ออัปเดต pagination เมื่อค่าเปลี่ยน (เฉพาะ props)
|
||||
watch(
|
||||
() => [props.pageSize, props.total],
|
||||
([newPageSize, newTotal]) => {
|
||||
pagination.value.rowsPerPage = Number(newPageSize);
|
||||
pagination.value.rowsNumber = Number(newTotal);
|
||||
},
|
||||
{ immediate: true }
|
||||
);
|
||||
|
||||
/** filter */
|
||||
const year = ref<number>(new Date().getFullYear());
|
||||
const filter = ref<string>("");
|
||||
|
|
@ -86,18 +99,17 @@ function updatePagination(p: number, ps: number) {
|
|||
emit("update:Pagination", p, ps);
|
||||
}
|
||||
|
||||
/** function updatePageSize*/
|
||||
function updatePageSize(newPageSize: any) {
|
||||
pagination.value.rowsPerPage = newPageSize.rowsPerPage;
|
||||
/**
|
||||
* ฟังก์ชันรับ request จากตาราง เมื่อมีการเปลี่ยน pagination
|
||||
* @param requestProps ข้อมูลการร้องขอจากตาราง
|
||||
*/
|
||||
function onTableRequest(requestProps: PropsTable.RequestProps) {
|
||||
const newPagination = requestProps?.pagination || requestProps;
|
||||
if (!newPagination?.page || !newPagination?.rowsPerPage) return;
|
||||
currentPage.value = newPagination.page;
|
||||
pagination.value = { ...newPagination };
|
||||
updatePagination(newPagination.page, newPagination.rowsPerPage);
|
||||
}
|
||||
|
||||
watch(
|
||||
() => pagination.value.rowsPerPage,
|
||||
() => {
|
||||
currentPage.value = 1;
|
||||
updatePagination(currentPage.value, pagination.value.rowsPerPage);
|
||||
}
|
||||
);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
|
@ -240,9 +252,7 @@ watch(
|
|||
</q-card>
|
||||
</div>
|
||||
<div>
|
||||
<SkeletonTable v-if="isloadingData" :columns="leaveStore.columns" />
|
||||
<d-table
|
||||
v-else
|
||||
ref="table"
|
||||
flat
|
||||
bordered
|
||||
|
|
@ -251,9 +261,11 @@ watch(
|
|||
:virtual-scroll-sticky-size-start="48"
|
||||
dense
|
||||
:rows-per-page-options="[10, 25, 50, 100]"
|
||||
D
|
||||
v-model:pagination="pagination"
|
||||
@update:pagination="updatePageSize"
|
||||
@request="onTableRequest"
|
||||
:grid="$q.screen.gt.xs ? false : true"
|
||||
:loading="isloadingData"
|
||||
>
|
||||
<template v-slot:header="props">
|
||||
<q-tr :props="props">
|
||||
|
|
@ -262,21 +274,6 @@ watch(
|
|||
</q-th>
|
||||
</q-tr>
|
||||
</template>
|
||||
<template v-slot:pagination="scope">
|
||||
ทั้งหมด {{ props.total }} รายการ
|
||||
<q-pagination
|
||||
v-model="currentPage"
|
||||
active-color="primary"
|
||||
color="dark"
|
||||
:max="Number(props.maxPage)"
|
||||
size="sm"
|
||||
boundary-links
|
||||
direction-links
|
||||
@update:model-value="
|
||||
updatePagination(currentPage, pagination.rowsPerPage)
|
||||
"
|
||||
></q-pagination>
|
||||
</template>
|
||||
<template #body="props">
|
||||
<slot v-bind="props" name="columns"></slot>
|
||||
</template>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue