diff --git a/src/components/TablePagination.vue b/src/components/TablePagination.vue index 02ed5960a..5c8b2d1ca 100644 --- a/src/components/TablePagination.vue +++ b/src/components/TablePagination.vue @@ -11,7 +11,6 @@ :pagination-label="paginationLabel" v-model:pagination="pagination" @request="onRequest" - :grid="!$q.screen.gt.xs" :rows-per-page-options="[10, 25, 50, 100]" :loading="loading" > diff --git a/src/composables/usePagination.ts b/src/composables/usePagination.ts index 6cdb1b521..e5558f97c 100644 --- a/src/composables/usePagination.ts +++ b/src/composables/usePagination.ts @@ -34,7 +34,11 @@ export function usePagination( if (!newPagination?.page || !newPagination?.rowsPerPage) return; pagination.value = { ...newPagination }; - if (fetchFunction) { + if ( + fetchFunction && + pagination.value.rowsNumber && + pagination.value.rowsNumber > 0 + ) { await fetchFunction(); // เรียกฟังก์ชันที่ส่งเข้ามา } } diff --git a/src/modules/09_leave/components/07_LeaveHistory/DialogForm.vue b/src/modules/09_leave/components/07_LeaveHistory/DialogForm.vue index 70621f169..384253293 100644 --- a/src/modules/09_leave/components/07_LeaveHistory/DialogForm.vue +++ b/src/modules/09_leave/components/07_LeaveHistory/DialogForm.vue @@ -5,29 +5,32 @@ import { useQuasar } from "quasar"; import http from "@/plugins/http"; import config from "@/app.config"; +import { useRoute } from "vue-router"; import { useCounterMixin } from "@/stores/mixin"; import { useLeaveHistoryDataStore } from "@/modules/09_leave/stores/LeaveHistoryStore"; import { calculateFiscalYear } from "@/utils/function"; +import { usePagination } from "@/composables/usePagination"; import type { QTableColumn } from "quasar"; -import type { - DataOption, - DataPagination, -} from "@/modules/09_leave/interface/index/Main"; +import type { DataOption } from "@/modules/09_leave/interface/index/Main"; import type { DataLeaveType, DataLeaveBeginning, } from "@/modules/09_leave/interface/response/leaveHistory"; import DialogHeader from "@/components/DialogHeader.vue"; -import { max } from "moment"; /** useStore*/ const $q = useQuasar(); +const route = useRoute(); const { leaveTypeData } = storeToRefs(useLeaveHistoryDataStore()); -const { findYear } = useLeaveHistoryDataStore(); const { dialogConfirm, showLoader, success, messageError, hideLoader } = useCounterMixin(); + +const { pagination, params, onRequest } = usePagination("", () => + onSearchData(false) +); + const modal = defineModel("modal", { required: true }); const isStatusEdit = defineModel("isStatusEdit", { required: true }); const rowData = defineModel("rowData", { @@ -42,18 +45,13 @@ const formFilter = reactive({ citizenId: "", type: "citizenId", keyword: "", - page: 1, - pageSize: 10, }); const searchTypeOption = ref([ { id: "citizenId", name: "เลขประจำตัวประชาชน" }, - { id: "firstName", name: "ชื่อ" }, - { id: "lastName", name: "นามสกุล" }, + { id: "fullName", name: "ชื่อ-นามสกุล" }, ]); const rows = ref([]); const selected = ref([]); -const total = ref(0); -const maxPage = ref(0); const columns = ref([ { name: "citizenId", @@ -65,13 +63,16 @@ const columns = ref([ style: "font-size: 14px", }, { - name: "fullName", + name: "firstName", align: "left", label: "ชื่อ-นามสกุล", sortable: true, field: "fullName", headerStyle: "font-size: 14px", style: "font-size: 14px", + format(val, row) { + return `${row.prefix || ""}${row.firstName || ""} ${row.lastName || ""}`; + }, }, ]); @@ -96,9 +97,7 @@ async function onSubmit() { : `${config.API.leaveBeginning}/${rowId.value}`; const method = !isStatusEdit.value ? "post" : "put"; await http[method](pathAPI, { - profileId: !isStatusEdit.value - ? selected.value[0].profileId - : profileId.value, + profileId: !isStatusEdit.value ? selected.value[0].id : profileId.value, leaveTypeId: formData.leaveTypeId, leaveYear: formData.leaveYear, leaveDays: formData.leaveDays ? Number(formData.leaveDays) : 0, @@ -123,25 +122,24 @@ async function onSubmit() { /** ฟังก์ชันเรียกรายชื่อคน*/ async function fetchDataPerson() { - await http - .post(config.API.leaveSearch(), { - citizenId: - formFilter.type === "citizenId" ? formFilter.keyword.trim() : "", //เลขประจำตัวประชาชน - firstname: - formFilter.type === "firstName" ? formFilter.keyword.trim() : "", //ชื่อจริง - lastname: formFilter.type === "lastName" ? formFilter.keyword.trim() : "", //นามสกุล - page: formFilter.page, //หน้า - pageSize: formFilter.pageSize || 10, //จำนวนแถวต่อหน้า - }) - .then((res) => { - const data = res.data.result; - rows.value = data.data; - total.value = data.total; - maxPage.value = Math.ceil(data.total / formFilter.pageSize); - }) - .catch((e) => { - messageError($q, e); - }); + try { + const res = await http.post( + config.API.orgSearchPersonal(), + { + fieldName: formFilter.type, + keyword: formFilter.keyword.trim(), + system: (route.meta?.Key as string) || undefined, + }, + { + params: params.value, + } + ); + const result = res.data.result; + pagination.value.rowsNumber = result.total; + rows.value = result.data; + } catch (e) { + messageError($q, e); + } } /** @@ -168,7 +166,7 @@ async function onSearchData(newSearch: boolean) { try { showLoader(); if (newSearch) { - formFilter.page = 1; + pagination.value.page = 1; } await fetchDataPerson(); } finally { @@ -176,28 +174,25 @@ async function onSearchData(newSearch: boolean) { } } -/** - * ฟังก์ชันอัปเดทรายการแถวต่อหน้า - * @param newPagination ข้อมูล Pagination ใหม่ - */ -function updatePagination(newPagination: DataPagination) { - formFilter.pageSize = newPagination.rowsPerPage; -} - /** ฟังก์ชันปิด Dialog*/ function onClose() { modal.value = false; formFilter.citizenId = ""; formFilter.type = "citizenId"; formFilter.keyword = ""; - formFilter.page = 1; - formFilter.pageSize = 10; formData.leaveTypeId = ""; formData.leaveYear = calculateFiscalYear(new Date()); formData.leaveDays = ""; formData.leaveDaysUsed = ""; rows.value = []; selected.value = []; + pagination.value = { + page: 1, + rowsPerPage: 10, + rowsNumber: 0, + sortBy: "", + descending: false, + }; } /** @@ -243,14 +238,6 @@ function classInput(val: boolean) { }; } -/** Hook*/ -watch( - () => formFilter.pageSize, - () => { - modal.value && onSearchData(true); - } -); - watch(modal, async (val) => { if (val) { try { @@ -259,8 +246,6 @@ watch(modal, async (val) => { filterLeaveTypeData(), isStatusEdit.value && defineDataLeaveBeginning(rowData.value), ]); - } catch (error) { - console.log(error); } finally { hideLoader(); } @@ -278,10 +263,14 @@ watch(modal, async (val) => { /> - -
+ +
-
+
{
- { :rows-per-page-options="[10, 25, 50, 100]" selection="single" v-model:selected="selected" - @update:pagination="updatePagination" + v-model:pagination="pagination" + @request="onRequest" > - - - +
-
+
-import { reactive, ref, onMounted, watch } from "vue"; +import { reactive, ref, onMounted } from "vue"; import { storeToRefs } from "pinia"; import { useQuasar } from "quasar"; import http from "@/plugins/http"; import config from "@/app.config"; import { checkPermission } from "@/utils/permissions"; -import { updateCurrentPage } from "@/utils/function"; import { useCounterMixin } from "@/stores/mixin"; import { useLeaveHistoryDataStore } from "@/modules/09_leave/stores/LeaveHistoryStore"; import { calculateFiscalYear } from "@/utils/function"; +import { usePagination } from "@/composables/usePagination"; import type { QTableColumn } from "quasar"; -import type { DataPagination } from "@/modules/09_leave/interface/index/Main"; import type { DataLeaveType, DataLeaveBeginning, @@ -22,22 +21,21 @@ import DialogForm from "@/modules/09_leave/components/07_LeaveHistory/DialogForm const $q = useQuasar(); const { leaveTypeData } = storeToRefs(useLeaveHistoryDataStore()); -const { findYear } = useLeaveHistoryDataStore(); const { showLoader, hideLoader, messageError, dialogRemove, success } = useCounterMixin(); +const { pagination, params, onRequest, checkAndUpdatePage } = usePagination( + "", + () => onSearchData(false) +); const formFilter = reactive({ year: calculateFiscalYear(new Date()), type: "00000000-0000-0000-0000-000000000000", - page: 1, - pageSize: 10, keyword: "", }); const leaveTypeOptions = ref([]); const rows = ref([]); -const total = ref(0); -const maxPage = ref(0); const columns = ref([ { name: "fullName", @@ -122,13 +120,13 @@ async function fetchDataLeaveBeginning() { await http .post(config.API.leaveBeginning + `/list`, { ...formFilter, + ...params.value, keyword: formFilter.keyword.trim(), }) .then((res) => { - const data = res.data.result; - rows.value = data.data; - total.value = data.total; - maxPage.value = Math.ceil(data.total / formFilter.pageSize); + const result = res.data.result; + pagination.value.rowsNumber = result.total; + rows.value = result.data; }) .catch((err) => { messageError($q, err); @@ -143,7 +141,7 @@ async function onSearchData(newSearch: boolean = true) { try { showLoader(); if (newSearch) { - formFilter.page = 1; + pagination.value.page = 1; } await fetchDataLeaveBeginning(); } finally { @@ -188,11 +186,7 @@ function onDeleteLeaveBeginning(id: string) { await http .delete(config.API.leaveBeginning + `/${id}`) .then(async () => { - formFilter.page = await updateCurrentPage( - formFilter.page, - maxPage.value, - rows.value.length - ); + await checkAndUpdatePage(rows.value.length); await fetchDataLeaveBeginning(); success($q, "ลบข้อมูลสำเร็จ"); }) @@ -205,29 +199,11 @@ function onDeleteLeaveBeginning(id: string) { }); } -/** - * ฟังก์ชันอัปเดทรายการแถวต่อหน้า - * @param newPagination ข้อมูล Pagination ใหม่ - */ -function updatePagination(newPagination: DataPagination) { - formFilter.pageSize = newPagination.rowsPerPage; -} - -/** Hook*/ -watch( - () => formFilter.pageSize, - () => { - onSearchData(true); - } -); - onMounted(async () => { try { showLoader(); await fetchLeaveType(); await fetchDataLeaveBeginning(); - } catch (error) { - console.log(error); } finally { hideLoader(); } @@ -242,67 +218,69 @@ onMounted(async () => {
-
-
- - - - - - - - - -
+
+
+
+ + + + + +
+
+ + + +
+
{
-
- - - - - +
+
+ + + +
+
+ +
- { dense class="custom-header-table" :visible-columns="visibleColumns" - @update:pagination="updatePagination" + v-model:pagination="pagination" + @request="onRequest" > - - +