hrms-bangkok/hrms-mgt
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-29 17:04:33 +07:00
parent 92333b3545
commit ab6c7abcbb
17 changed files with 407 additions and 401 deletions
Download patch file Download diff file Expand all files Collapse all files

2
src/modules/04_registryPerson/components/detail/Achievement/05_ResultsPerformance.vue
View file

@ -881,7 +881,7 @@ onMounted(async () => {
:card-container-class="
modeViewPlan === 'card' ? 'q-col-gutter-md' : ''
"
:rows-per-page-options="[1, 25, 50, 100]"
:rows-per-page-options="[10, 25, 50, 100]"
@update:pagination="updatePaginationIdp"
>
<template v-slot:pagination="scope">

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

@ -625,7 +625,7 @@ onMounted(async () => {
: 'multiple'
"
v-model:selected="selected"
:rows-per-page-options="[1, 25, 50, 100]"
:rows-per-page-options="[10, 25, 50, 100]"
@update:pagination="updatePagination"
>
<template v-slot:pagination="scope">

54
src/modules/11_discipline/components/1_Complaint/MainPage.vue
View file

@ -26,18 +26,19 @@ const { fetchComplainst } = complainstStore;
const filterRef = ref<HTMLInputElement | null>(null);
const filterTable = ref<string>("");
const filterKeyword = ref<string>("");
const maxPage = ref<number>(1);
const page = ref<number>(1);
const rowsPerPage = ref<number>(10);
const toptitle = ref<number>(0);
const statusFilter = ref<string>("NEW");
const option = ref<any[]>(complainstStore.statusOptions);
async function updatePagingProp(rowPerpage: number, pageCurrent: number) {
rowsPerPage.value = rowPerpage;
page.value = pageCurrent;
await getList();
}
const total = ref<number>(0);
const totalList = ref<number>(1);
const pagination = ref({
sortBy: "createdAt",
descending: true,
page: 1,
rowsPerPage: 10,
});
/** ดึงข้อมูล เรื่องร้องเรียน */
async function getList() {
@ -45,15 +46,18 @@ async function getList() {
await http
.get(
config.API.complaintList(
page.value,
rowsPerPage.value,
pagination.value.page,
pagination.value.rowsPerPage,
filterKeyword.value,
statusFilter.value
)
)
//
.then((res) => {
maxPage.value = Math.ceil(res.data.result.total / rowsPerPage.value);
totalList.value = Math.ceil(
res.data.result.total / pagination.value.rowsPerPage
);
total.value = res.data.result.total;
toptitle.value = res.data.result.total;
const data = res.data.result.data;
fetchComplainst(data);
@ -74,7 +78,7 @@ function redirectToPageadd() {
/** ล้างค่าใน input */
function resetFilter() {
filterKeyword.value = "";
page.value = 1
pagination.value.page = 1;
if (filterRef.value) {
filterRef.value.focus();
getList();
@ -95,6 +99,18 @@ function filterOptionFn(val: string, update: Function) {
});
}
function getSearch() {
pagination.value.page = 1;
getList();
}
watch(
() => pagination.value.rowsPerPage,
async () => {
await getSearch();
}
);
/** เรียกใช้งาน ฟังชั่น ตอนเริ่มโหลดหน้า */
onMounted(async () => {
await getList();
@ -118,7 +134,7 @@ onMounted(async () => {
option-label="name"
option-value="id"
:options="option"
@update:model-value="getList()"
@update:model-value="getSearch()"
use-input
@filter="filterOptionFn"
>
@ -133,7 +149,7 @@ onMounted(async () => {
@click.stop.prevent="
(option = complainstStore.statusOptions),
(statusFilter = 'ALL'),
getList()
getSearch()
"
class="cursor-pointer"
/>
@ -165,7 +181,7 @@ onMounted(async () => {
ref="filterRef"
outlined
placeholder="ค้นหา"
@keydown.enter.prevent="getList()"
@keydown.enter.prevent="getSearch()"
>
<template v-slot:append>
<q-icon v-if="filterKeyword == ''" name="search" />
@ -199,11 +215,11 @@ onMounted(async () => {
<div class="col-12">
<TableComplaint
:filter-table="filterTable"
:rows-per-page="rowsPerPage"
:page="page"
:max-page="maxPage"
@update:pagination="updatePagingProp"
v-model:pagination="pagination"
v-model:total="total"
v-model:total-list="totalList"
:toptitle="toptitle"
:get-list="getList"
/>
</div>
</q-card>

56
src/modules/11_discipline/components/1_Complaint/TableComplaint.vue
View file

@ -6,29 +6,21 @@ import { useRouter } from "vue-router";
import { checkPermission } from "@/utils/permissions";
const currentPage = ref<number>(1);
const router = useRouter();
const complainstStore = useComplainstDataStore();
const total = defineModel<number>("total", { required: true });
const totalList = defineModel<number>("totalList", { required: true });
const pagination = defineModel<any>("pagination", { required: true });
const emit = defineEmits(["update:pagination"]);
/** รับ props มาจากหน้าหลัก */
const props = defineProps({
getList: Function,
filterTable: {
type: String,
default: "",
},
maxPage: {
type: Number,
require: true,
},
rowsPerPage: {
type: Number,
require: true,
},
page: {
type: Number,
require: true,
},
toptitle: {
type: Number,
require: true,
@ -124,13 +116,6 @@ const columns = ref<QTableProps["columns"]>([
},
]);
/** แสดงจำนวนในตาราง */
const pagination = ref({
descending: true,
page: Number(props.page),
rowsPerPage: props.rowsPerPage,
});
/**
* ฟังชั่นสำหรับ เปลี่ยน route ตาม id ที่รับมา
* @param id ไอดีระบุ
@ -153,20 +138,10 @@ function onDetail(id: string) {
router.push(`/discipline/complaints-detail/${id}`);
}
watch(
() => currentPage.value,
() => {
updateProp(pagination.value.rowsPerPage, currentPage.value);
}
);
watch(
() => pagination.value.rowsPerPage,
() => {
currentPage.value = 1;
updateProp(pagination.value.rowsPerPage, currentPage.value);
}
);
function updatePagination(newPagination: any) {
pagination.value.page = 1;
pagination.value.rowsPerPage = newPagination.rowsPerPage;
}
/** เริ่มโหลดหน้า page เอาข้อมูลไปเก็บ ใน store*/
onMounted(() => {
@ -181,7 +156,6 @@ onMounted(() => {
ref="table"
:columns="columns"
:rows="complainstStore.rows"
:filter="props.filterTable"
row-key="subject"
flat
bordered
@ -189,8 +163,8 @@ onMounted(() => {
dense
class="custom-header-table"
:visible-columns="complainstStore.visibleColumns"
v-model:pagination="pagination"
:rows-per-page-options="[10, 25, 50, 100]"
@update:pagination="updatePagination"
>
<template v-slot:header="props">
<q-tr :props="props">
@ -234,7 +208,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.rowsPerPage +
props.rowIndex +
1
}}
@ -249,15 +223,17 @@ onMounted(() => {
</q-tr>
</template>
<template v-slot:pagination="scope">
ทั้งหมด {{ props.toptitle }}รายการ
ทั้งหมด {{ 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>

49
src/modules/11_discipline/components/2_InvestigateFacts/Form.vue
View file

@ -61,13 +61,19 @@ const editDirectorId = ref<string>();
const dutyVal = ref<string>();
const commandNoVal = ref<string>();
const total = ref<number>(0);
const totalList = ref<number>(1);
const pagination = ref({
sortBy: "createdAt",
descending: true,
page: 1,
rowsPerPage: 10,
});
const filter = ref<string>("");
const isUpdate = ref<boolean>(false);
const filterTable = ref<string>("");
const filterKeyword = ref<string>("");
const maxPage = ref<number>(1);
const page = ref<number>(1);
const rowsPerPage = ref<number>(10);
const investigationExtendStatus = ref<boolean>(false);
@ -359,28 +365,25 @@ async function getOc(activeId: string) {
});
}
async function updatePagingProp(rowPerpage: number, pageCurrent: number) {
rowsPerPage.value = rowPerpage;
page.value = pageCurrent;
await getList();
}
/** ดึงข้อมูลรายละเอียดสืบสวน */
async function getList() {
showLoader();
await http
.get(
config.API.directorList(
page.value,
rowsPerPage.value,
filterKeyword.value,
pagination.value.page,
pagination.value.rowsPerPage,
filterKeyword2.value,
mainStore.pathDirector(route.name as string)
)
)
//
.then((res) => {
maxPage.value = Math.ceil(res.data.result.total / rowsPerPage.value);
const data = res.data.result.data;
totalList.value = Math.ceil(
res.data.result.total / pagination.value.rowsPerPage
);
total.value = res.data.result.total;
investigateDis.fecthDirector(data);
})
.catch((e) => {
@ -600,6 +603,18 @@ function filterOptionFnCauseText(val: string, update: Function) {
});
}
function getSearch() {
pagination.value.page = 1;
getList();
}
watch(
() => pagination.value.rowsPerPage,
async () => {
getSearch();
}
);
/**
* เช็คข้อมูลจาก props
* เมื่อมีข้อมูล
@ -1744,17 +1759,17 @@ onMounted(async () => {
<DialogDirector
:get-list="getList"
:get-search="getSearch"
v-model:Modal="modal"
:click-close="clickClose"
:rows2="investigateDis.rows2"
v-model:filterKeyword2="filterKeyword2"
v-model:type="type"
:filter-table="filterTable"
:rows-per-page="rowsPerPage"
:page="page"
:max-page="maxPage"
v-model:pagination="pagination"
v-model:total="total"
v-model:total-list="totalList"
:selected-row="rows"
@update:pagination="updatePagingProp"
@returnDirector="returnDirector"
/>

65
src/modules/11_discipline/components/2_InvestigateFacts/MainPage.vue
View file

@ -20,19 +20,15 @@ const option = ref<any[]>(dataInvestigate.statusOptions);
const filterKeyword = ref<string>("");
const filterRef = ref<HTMLInputElement | null>(null);
const statusFilter = ref<string>("NEW");
const currentPage = ref<number>(1);
const maxPage = ref<number>(1);
const page = ref<number>(1);
const rowsPerPage = ref<number>(10);
const toptitle = ref<number>(0);
/**
*pagination ของตาราง
*/
const total = ref<number>(0);
const totalList = ref<number>(1);
const pagination = ref({
descending: false,
page: page.value,
rowsPerPage: rowsPerPage.value,
sortBy: "createdAt",
descending: true,
page: 1,
rowsPerPage: 10,
});
const attrs = ref<any>(useAttrs());
@ -52,14 +48,17 @@ async function getList() {
await http
.get(
config.API.investigateMain(
currentPage.value,
rowsPerPage.value,
pagination.value.page,
pagination.value.rowsPerPage,
filterKeyword.value,
statusFilter.value
)
)
.then((res) => {
maxPage.value = Math.ceil(res.data.result.total / rowsPerPage.value);
totalList.value = Math.ceil(
res.data.result.total / pagination.value.rowsPerPage
);
total.value = res.data.result.total;
toptitle.value = res.data.result.total;
const data = res.data.result.data;
@ -104,20 +103,20 @@ function filterOptionFn(val: string, update: Function) {
});
}
watch(
() => currentPage.value,
() => {
rowsPerPage.value = pagination.value.rowsPerPage;
getList();
}
);
function updatePagination(newPagination: any) {
pagination.value.page = 1;
pagination.value.rowsPerPage = newPagination.rowsPerPage;
}
function getSerach() {
pagination.value.page = 1;
getList();
}
watch(
() => pagination.value.rowsPerPage,
() => {
rowsPerPage.value = pagination.value.rowsPerPage;
currentPage.value = 1;
getList();
async () => {
getSerach();
}
);
@ -145,7 +144,7 @@ onMounted(async () => {
option-label="name"
option-value="id"
:options="option"
@update:model-value="getList()"
@update:model-value="getSerach()"
use-input
@filter="filterOptionFn"
>
@ -160,7 +159,7 @@ onMounted(async () => {
@click.stop.prevent="
(option = dataInvestigate.statusOptions),
(statusFilter = 'ALL'),
getList()
getSerach()
"
class="cursor-pointer"
/>
@ -178,7 +177,7 @@ onMounted(async () => {
ref="filterRef"
outlined
placeholder="ค้นหา"
@keydown.enter.prevent="getList()"
@keydown.enter.prevent="getSerach()"
>
<template v-slot:append>
<q-icon v-if="filterKeyword == ''" name="search" />
@ -222,8 +221,8 @@ onMounted(async () => {
class="custom-header-table"
v-bind="attrs"
:visible-columns="dataInvestigate.visibleColumns"
v-model:pagination="pagination"
:rows-per-page-options="[10, 25, 50, 100]"
@update:pagination="updatePagination"
>
<template v-slot:header="props">
<q-tr :props="props">
@ -271,7 +270,7 @@ onMounted(async () => {
<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.rowsPerPage +
props.rowIndex +
1
}}
@ -293,15 +292,17 @@ onMounted(async () => {
</q-tr>
</template>
<template v-slot:pagination="scope">
ทั้งหมด {{ toptitle }}รายการ
ทั้งหมด {{ 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="getList()"
></q-pagination>
</template>
</d-table>

54
src/modules/11_discipline/components/3_InvestigateDisciplinary/Form.vue
View file

@ -61,9 +61,7 @@ const checkRoutePermisson = ref<boolean>(
);
const organizationOption = ref<DataOption[]>([]);
/** query string*/
const page = ref<number>(1);
const rowsPerPage = ref<number>(10);
const maxPage = ref<number>(1);
const filterKeyword2 = ref<string>("");
const listDirector = ref<any>([]);
const modalEditDirector = ref<boolean>(false);
@ -79,6 +77,15 @@ const modalPerson = ref<boolean>(false);
/** search data table*/
const filter = ref<string>("");
const total = ref<number>(0);
const totalList = ref<number>(1);
const pagination = ref({
sortBy: "createdAt",
descending: true,
page: 1,
rowsPerPage: 10,
});
const isSave = ref<boolean>(false); // มีการแก้ไขรอบันทึก
const isReadonly = ref<boolean>(false); // อ่านได้อย่างเดียว
const extendStatus = ref<boolean>(false);
@ -233,7 +240,7 @@ async function deleteDirector(id: string) {
async function fetchDatadetail() {
if (props.data) {
if (countNum.value === 1) {
isReadonly.value = props.data.status != "NEW" ?? true;
isReadonly.value = props.data.status != "NEW" ? true : false;
isSave.value = false;
isSaveInfo.value = false;
formData.respondentType = props.data.respondentType;
@ -444,14 +451,18 @@ async function fetchDListDirector() {
await http
.get(
config.API.directorList(
page.value,
rowsPerPage.value,
pagination.value.page,
pagination.value.rowsPerPage,
filterKeyword2.value,
mainStore.pathDirector(route.name as string)
)
)
.then((res) => {
maxPage.value = Math.ceil(res.data.result.total / rowsPerPage.value);
total.value = res.data.result.total;
totalList.value = Math.ceil(
res.data.result.total / pagination.value.rowsPerPage
);
const data = res.data.result.data;
let datalistDirector: responseType[] = data.map((e: directorType) => ({
id: e.id,
@ -480,15 +491,6 @@ async function fetchDListDirector() {
});
}
/**
* function อัดเดท Paging กรรมการ
* @param rpp ต่อหน้า
* @param p หน้า
*/
async function updatePaging(rpp: number, p: number) {
page.value = p;
rowsPerPage.value = rpp;
}
/**
* function return รายชื่อกรรมการที่เลือก
@ -709,6 +711,18 @@ function filterOptionFnCauseText(val: string, update: Function) {
});
}
function getSearch() {
pagination.value.page = 1;
fetchDListDirector();
}
watch(
() => pagination.value.rowsPerPage,
async () => {
getSearch();
}
);
watch(
() => formData.disciplinaryFaultLevel,
() => {
@ -1935,16 +1949,16 @@ onMounted(async () => {
<DialogDirector
v-model:Modal="modal"
:get-search="getSearch"
:clickClose="clickClose"
:rows2="listDirector"
v-model:filterKeyword2="filterKeyword2"
v-model:type="type"
:get-list="fetchDListDirector"
:rowsPerPage="rowsPerPage"
:page="page"
:maxPage="maxPage"
v-model:pagination="pagination"
v-model:total="total"
v-model:total-list="totalList"
:selected-row="rows"
@update:pagination="updatePaging"
@returnDirector="returnDirector"
/>

51
src/modules/11_discipline/components/3_InvestigateDisciplinary/MainPage.vue
View file

@ -1,5 +1,5 @@
<script setup lang="ts">
import { onMounted, ref } from "vue";
import { onMounted, ref, watch } from "vue";
import { useQuasar } from "quasar";
import { useRouter } from "vue-router";
@ -10,17 +10,22 @@ import { useInvestigateDisStore } from "@/modules/11_discipline/store/Investigat
import Table from "@/modules/11_discipline/components/3_InvestigateDisciplinary/Table.vue";
const total = ref<number>(0);
const totalList = ref<number>(1);
const pagination = ref({
sortBy: "createdAt",
descending: true,
page: 1,
rowsPerPage: 10,
});
const router = useRouter();
const mixin = useCounterMixin();
const dataInvestigateDis = useInvestigateDisStore();
const { showLoader, hideLoader } = mixin;
const { fetchList } = dataInvestigateDis;
const rowsPerPage = ref<number>(10);
const filter = ref<string>(""); //search data table
const page = ref<number>(1);
const maxPage = ref<number>(1);
const totalList = ref<number>();
const status = ref<string>("NEW");
async function fetchListDisciplinary() {
@ -28,12 +33,14 @@ async function fetchListDisciplinary() {
await http
.get(
config.API.disciplineDisciplinary() +
`?page=${page.value}&pageSize=${rowsPerPage.value}&keyword=${filter.value}&status=${status.value}`
`?page=${pagination.value.page}&pageSize=${pagination.value.rowsPerPage}&keyword=${filter.value}&status=${status.value}`
)
.then((res) => {
const data = res.data.result.data;
maxPage.value = Math.ceil(res.data.result.total / rowsPerPage.value);
totalList.value = res.data.result.total;
totalList.value = Math.ceil(
res.data.result.total / pagination.value.rowsPerPage
);
total.value = res.data.result.total;
fetchList(data);
})
.catch((err) => {})
@ -57,17 +64,23 @@ function openDetail(id: string) {
router.push(`/discipline-detail/disciplinary/${id}`);
}
async function updatePagingProp(rowPerpage: number, pageCurrent: number) {
rowsPerPage.value = rowPerpage;
page.value = pageCurrent;
await fetchListDisciplinary();
}
function filterStatus(statusReturn: string) {
status.value = statusReturn;
getSearch()
}
function getSearch() {
pagination.value.page = 1;
fetchListDisciplinary();
}
watch(
() => pagination.value.rowsPerPage,
async () => {
getSearch();
}
);
/**เมื่อเริ่มโหลดหน้า
* ส่งข้อมูลจำลองไปยัง store
*/
@ -89,19 +102,17 @@ onMounted(async () => {
:visible-columns="dataInvestigateDis.visibleColumns"
v-model:inputfilter="filter"
v-model:inputvisible="dataInvestigateDis.visibleColumns"
:pagination="rowsPerPage"
:nornmalData="true"
:paging="true"
:titleText="''"
:rowsPerPage="rowsPerPage"
:page="page"
:maxPage="maxPage"
:totalList="totalList"
v-model:pagination="pagination"
v-model:total="total"
v-model:total-list="totalList"
:fetchListDisciplinary="fetchListDisciplinary"
@update:pagination="updatePagingProp"
v-model:open-edit="openEdit"
:open-detail="openDetail"
:filterStatus="filterStatus"
:get-search="getSearch"
>
</Table>
</div>

43
src/modules/11_discipline/components/3_InvestigateDisciplinary/Table.vue
View file

@ -4,6 +4,10 @@ import { ref, useAttrs, watch } from "vue";
import { useInvestigateDisStore } from "@/modules/11_discipline/store/InvestigateDisStore";
import { checkPermission } from "@/utils/permissions";
const total = defineModel<number>("total", { required: true });
const totalList = defineModel<number>("totalList", { required: true });
const pagination = defineModel<any>("pagination", { required: true });
const dataInvestigateDis = useInvestigateDisStore();
const table = ref<any>(null);
const filterRef = ref<any>(null);
@ -22,6 +26,7 @@ const props = defineProps({
icon: String,
inputvisible: Array,
editvisible: Boolean,
getSearch: Function,
validate: {
type: Function,
default: () => console.log("not function"),
@ -79,13 +84,6 @@ const emit = defineEmits([
"update:pagination",
]);
/** แสดงจำนวนในตาราง */
const pagination = ref({
descending: true,
page: Number(props.page),
rowsPerPage: props.rowsPerPage,
});
function paginationLabel(start: string, end: string, total: string) {
if (paging.value == true) return " " + start + "-" + end + " ใน " + total;
else return start + "-" + end + " ใน " + total;
@ -116,7 +114,7 @@ function dataUpdate() {
}
function filterFn() {
props.fetchListDisciplinary?.();
props.getSearch?.();
}
/**
@ -133,20 +131,10 @@ function filterOptionFn(val: string, update: Function) {
});
}
watch(
() => currentPage.value,
() => {
updateProp(pagination.value.rowsPerPage, currentPage.value);
}
);
watch(
() => pagination.value.rowsPerPage,
() => {
currentPage.value = 1;
updateProp(pagination.value.rowsPerPage, currentPage.value);
}
);
function updatePagination(newPagination: any) {
pagination.value.page = 1;
pagination.value.rowsPerPage = newPagination.rowsPerPage;
}
</script>
<template>
@ -232,20 +220,21 @@ watch(
virtual-scroll
:virtual-scroll-sticky-size-start="48"
dense
:pagination-label="paginationLabel"
v-model:pagination="pagination"
:rows-per-page-options="[10, 25, 50, 100]"
@update:pagination="updatePagination"
>
<template v-slot:pagination="scope">
ทั้งหมด {{ props.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.fetchListDisciplinary?.()"
></q-pagination>
</template>
<template v-slot:header="props">

55
src/modules/11_discipline/components/4_Result/MainPage.vue
View file

@ -1,5 +1,5 @@
<script setup lang="ts">
import { onMounted, ref } from "vue";
import { onMounted, ref, watch } from "vue";
import { useQuasar } from "quasar";
import { useRouter } from "vue-router";
@ -19,16 +19,16 @@ const store = useDisciplineResultStore();
const { showLoader, hideLoader, messageError } = mixin;
const { fetchList } = store;
const initialPagination = ref<Pagination>({
rowsPerPage: 0,
});
const page = ref<number>(1);
const pageSize = ref<number>(10);
const maxPage = ref<number>(1);
const totalList = ref<number>(0);
const filter = ref<string>("");
const status = ref<string>("DONE");
const total = ref<number>(0);
const totalList = ref<number>(1);
const pagination = ref({
sortBy: "createdAt",
descending: true,
page: 1,
rowsPerPage: 10,
});
/** function เรียกรายการสรุปผลการพิจารณาทางวินัย*/
async function fetchListResult() {
@ -36,12 +36,14 @@ async function fetchListResult() {
await http
.get(
config.API.listResult() +
`?page=${page.value}&pageSize=${pageSize.value}&keyword=${filter.value}&status=${status.value}`
`?page=${pagination.value.page}&pageSize=${pagination.value.rowsPerPage}&keyword=${filter.value}&status=${status.value}`
)
.then(async (res) => {
const data = res.data.result.data;
maxPage.value = Math.ceil(res.data.result.total / pageSize.value);
totalList.value = res.data.result.total;
totalList.value = Math.ceil(
res.data.result.total / pagination.value.rowsPerPage
);
total.value = res.data.result.total;
await fetchList(data);
})
.catch((err) => {
@ -52,13 +54,6 @@ async function fetchListResult() {
});
}
async function updateQueryString(p: number, pS: number, key: string) {
page.value = pS === pageSize.value ? p : 1;
pageSize.value = pS;
filter.value = key;
await fetchListResult();
}
/**
* ไปหน้าแก้ไข
* @param id ไอดีเฉพาะ รายบุคคล
@ -76,9 +71,21 @@ function openDetail(id: string) {
function filterStatus(statusReturn: string) {
status.value = statusReturn;
getSearch();
}
function getSearch() {
pagination.value.page = 1;
fetchListResult();
}
watch(
() => pagination.value.rowsPerPage,
async () => {
getSearch();
}
);
/**เมื่อเริ่มโหลดหน้า
* ส่งข้อมูลจำลองไปยัง store
*/
@ -100,19 +107,17 @@ onMounted(async () => {
:visible-columns="store.visibleColumns"
v-model:inputfilter="filter"
v-model:inputvisible="store.visibleColumns"
:pagination="initialPagination"
:nornmalData="true"
:paging="true"
:titleText="''"
:page="page"
:fetchListResult="fetchListResult"
:pageSize="pageSize"
:maxPage="maxPage"
:totalList="totalList"
@update:queryString="updateQueryString"
:get-search="getSearch"
v-model:open-edit="openEdit"
v-model:open-detail="openDetail"
:filterStatus="filterStatus"
v-model:pagination="pagination"
v-model:total="total"
v-model:total-list="totalList"
>
</Table>
</div>

59
src/modules/11_discipline/components/4_Result/Table.vue
View file

@ -4,6 +4,10 @@ import { ref, useAttrs, watch } from "vue";
import { useDisciplineResultStore } from "@/modules/11_discipline/store/ResultStore";
import { checkPermission } from "@/utils/permissions";
const total = defineModel<number>("total", { required: true });
const totalList = defineModel<number>("totalList", { required: true });
const pagination = defineModel<any>("pagination", { required: true });
const store = useDisciplineResultStore();
const table = ref<any>(null);
const filterRef = ref<any>(null);
@ -22,6 +26,7 @@ const props = defineProps({
icon: String,
inputvisible: Array,
editvisible: Boolean,
getSearch: Function,
validate: {
type: Function,
default: () => console.log("not function"),
@ -50,28 +55,9 @@ const props = defineProps({
type: Boolean,
defualt: false,
},
page: {
type: Number,
},
pageSize: {
type: Number,
},
maxPage: {
type: Number,
},
totalList: {
type: Number,
},
});
const currentPage = ref<number>(1);
const filter = ref<string>("");
const pagination = ref({
descending: false,
page: props.page,
rowsPerPage: props.pageSize,
});
const emit = defineEmits([
"update:inputfilter",
"update:inputvisible",
@ -87,26 +73,13 @@ function resetFilter() {
// reset ค่าที่ค้นหาเมื่อกดปุ่ม X ในกล่องค้นหา
emit("update:inputfilter", "");
filterRef.value.focus();
props.fetchListResult?.();
}
function updateRowsPerPage(newPagination: any) {
pagination.value = newPagination;
currentPage.value = 1;
props.getSearch?.();
}
function updatePaging(p: number, pS: number, key: string) {
emit("update:queryString", p, pS, key);
}
watch([() => currentPage.value, () => pagination.value.rowsPerPage], () => {
emit(
"update:queryString",
currentPage.value,
Number(pagination.value.rowsPerPage),
filter.value
);
});
function dataUpdate() {
props.filterStatus(statusFilter.value);
@ -116,7 +89,7 @@ function updateInput(value: string | number | null) {
emit("update:inputfilter", value);
}
function filterFn() {
props.fetchListResult?.();
props.getSearch?.();
}
/**
@ -132,6 +105,11 @@ function filterOptionFn(val: string, update: Function) {
);
});
}
function updatePagination(newPagination: any) {
pagination.value.page = 1;
pagination.value.rowsPerPage = newPagination.rowsPerPage;
}
</script>
<template>
@ -217,8 +195,7 @@ function filterOptionFn(val: string, update: Function) {
:virtual-scroll-sticky-size-start="48"
dense
:rows-per-page-options="[10, 25, 50, 100]"
:pagination="pagination"
@update:pagination="updateRowsPerPage"
@update:pagination="updatePagination"
>
<template v-slot:header="props">
<q-tr :props="props">
@ -260,7 +237,7 @@ function filterOptionFn(val: string, update: Function) {
<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.rowsPerPage +
props.rowIndex +
1
}}
@ -275,15 +252,17 @@ function filterOptionFn(val: string, update: Function) {
</q-tr>
</template>
<template v-slot:pagination="scope">
ทั้งหมด {{ props.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.fetchListResult?.()"
></q-pagination>
</template>
</d-table>

3
src/modules/11_discipline/components/6_BasicInformation/Director/Form.vue
View file

@ -183,6 +183,7 @@ function updateSelect() {
async function searchInput() {
searchRef.value.validate();
if (!searchRef.value.hasError) {
pagination.value.page = 1;
await getSearch();
}
}
@ -348,7 +349,7 @@ watch(
dense
class="custom-header-table"
:visible-columns="visibleColumnsRespondent"
:rows-per-page-options="[1, 25, 50, 100]"
:rows-per-page-options="[10, 25, 50, 100]"
@update:pagination="updatePagination"
>
<template v-slot:pagination="scope">

70
src/modules/11_discipline/components/6_BasicInformation/Director/MainPage.vue
View file

@ -24,11 +24,6 @@ const { messageError, showLoader, hideLoader, dialogRemove, success } = mixin;
const titleInvestigate = ref<string>("");
const personalId = ref<string>("");
const currentPage = ref<number>(1);
const maxPage = ref<number>(1);
const page = ref<number>(1);
const rowsPerPage = ref<number>(10);
const totalList = ref<number>(0);
const modalDetail = ref<boolean>(false);
const isEdit = ref<boolean>(false);
@ -41,13 +36,13 @@ const dataPopUp = ref<DirectorRowsResponse>();
const filterKeyword = ref<string>("");
const filterRef = ref<HTMLInputElement | null>(null);
/**
*pagination ของตาราง
*/
const total = ref<number>(0);
const totalList = ref<number>(1);
const pagination = ref({
descending: false,
page: page.value,
rowsPerPage: rowsPerPage.value,
sortBy: "createdAt",
descending: true,
page: 1,
rowsPerPage: 10,
});
async function getList() {
@ -55,16 +50,18 @@ async function getList() {
await http
.get(
config.API.directorList(
currentPage.value,
rowsPerPage.value,
pagination.value.page,
pagination.value.rowsPerPage,
filterKeyword.value,
mainStore.pathDirector(route.name as string)
)
)
.then((res) => {
maxPage.value = Math.ceil(res.data.result.total / rowsPerPage.value);
totalList.value = res.data.result.total;
const data = res.data.result.data;
totalList.value = Math.ceil(
res.data.result.total / pagination.value.rowsPerPage
);
total.value = res.data.result.total;
dataStore.fetchData(data);
})
.catch((e) => {
@ -106,12 +103,12 @@ function resetFilter() {
filterKeyword.value = "";
if (filterRef.value) {
filterRef.value.focus();
getList();
getSearch();
}
}
function filterFn() {
getList();
getSearch();
}
function openDetail(data: DirectorRowsResponse, typeChange: string) {
@ -135,20 +132,20 @@ function onEdit(id: string, check: boolean) {
isEdit.value = check;
}
watch(
() => currentPage.value,
() => {
rowsPerPage.value = pagination.value.rowsPerPage;
getList();
}
);
function updatePagination(newPagination: any) {
pagination.value.page = 1;
pagination.value.rowsPerPage = newPagination.rowsPerPage;
}
function getSearch() {
pagination.value.page = 1;
getList();
}
watch(
() => pagination.value.rowsPerPage,
() => {
rowsPerPage.value = pagination.value.rowsPerPage;
currentPage.value = 1;
getList();
async () => {
getSearch();
}
);
@ -228,19 +225,22 @@ onMounted(() => {
bordered
:paging="true"
dense
v-model:pagination="pagination"
:rows-per-page-options="[10, 25, 50, 100]"
@update:pagination="updatePagination"
:visible-columns="dataStore.visibleColumns"
>
<template v-slot:pagination="scope">
ทั้งหมด {{ totalList }} รายการ
ทั้งหมด {{ 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="getList"
></q-pagination>
</template>
<template v-slot:header="props">
@ -293,7 +293,11 @@ onMounted(() => {
</q-td>
<q-td v-for="col in props.cols" :key="col.name" :props="props">
<div v-if="col.name == 'no'">
{{ props.rowIndex + 1 }}
{{
(pagination.page - 1) * pagination.rowsPerPage +
props.rowIndex +
1
}}
</div>
<div
v-else-if="

69
src/modules/11_discipline/components/7_ListSuspend/ListsPage.vue
View file

@ -124,26 +124,19 @@ const columns = ref<QTableProps["columns"]>([
const openModal = () => (modal.value = true);
const currentPage = ref<number>(1);
const maxPage = ref<number>(1);
const page = ref<number>(1);
const rowsPerPage = ref<number>(10);
const totalList = ref<number>(0);
/**
*pagination ของตาราง
*/
const total = ref<number>(0);
const totalList = ref<number>(1);
const pagination = ref({
descending: false,
page: page.value,
rowsPerPage: rowsPerPage.value,
sortBy: "createdAt",
descending: true,
page: 1,
rowsPerPage: 10,
});
function resetFilter() {
filterKeyword.value = "";
filterRef.value.focus();
getList();
getSearch();
}
/** เปิด popup ส่งไปออกคำสั่ง โดย PENDING*/
@ -170,15 +163,17 @@ async function getList() {
await http
.get(
config.API.suspendMain(
currentPage.value,
rowsPerPage.value,
pagination.value.page,
pagination.value.rowsPerPage,
filterKeyword.value
)
)
.then(async (res) => {
maxPage.value = Math.ceil(res.data.result.total / rowsPerPage.value);
const data = await res.data.result.data;
totalList.value = res.data.result.total;
totalList.value = Math.ceil(
res.data.result.total / pagination.value.rowsPerPage
);
total.value = res.data.result.total;
await dataStore.getData(data);
hideLoader();
})
@ -190,23 +185,23 @@ async function getList() {
}
function filterFn() {
getSearch();
}
function updatePagination(newPagination: any) {
pagination.value.page = 1;
pagination.value.rowsPerPage = newPagination.rowsPerPage;
}
function getSearch() {
pagination.value.page = 1;
getList();
}
watch(
() => currentPage.value,
() => {
rowsPerPage.value = pagination.value.rowsPerPage;
getList();
}
);
watch(
() => pagination.value.rowsPerPage,
() => {
rowsPerPage.value = pagination.value.rowsPerPage;
currentPage.value = 1;
getList();
async () => {
getSearch();
}
);
@ -285,19 +280,21 @@ onMounted(async () => {
:rows="dataStore.rows"
row-key="id"
:visible-columns="dataStore.visibleColumns"
v-model:pagination="pagination"
:rows-per-page-options="[10, 25, 50, 100]"
@update:pagination="updatePagination"
>
<template v-slot:pagination="scope">
ทั้งหมด {{ totalList }} รายการ
ทั้งหมด {{ 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="getList"
></q-pagination>
</template>
<template v-slot:header="props">
@ -341,9 +338,9 @@ onMounted(async () => {
</q-btn>
</q-td>
<q-td v-for="col in props.cols" :key="col.name" :props="props">
<div v-if="col.name === 'no'">
<div v-if="col.name == 'no'">
{{
(currentPage - 1) * Number(pagination.rowsPerPage) +
(pagination.page - 1) * pagination.rowsPerPage +
props.rowIndex +
1
}}

89
src/modules/11_discipline/components/8_AppealComplain/MainPage.vue
View file

@ -31,21 +31,6 @@ const type = ref<DataOption[]>([
const filterKeyword = ref<string>("");
const dataRow = ref<RowList[]>([]);
const currentPage = ref<number>(1);
const maxPage = ref<number>(1);
const page = ref<number>(1);
const totalList = ref<number>(0);
const rowsPerPage = ref<number>(10);
/**
*pagination ของตาราง
*/
const pagination = ref({
descending: false,
page: page.value,
rowsPerPage: rowsPerPage.value,
});
const formData = reactive<any>({
type: "ALL",
@ -53,6 +38,15 @@ const formData = reactive<any>({
year: new Date().getFullYear().toString(),
});
const total = ref<number>(0);
const totalList = ref<number>(1);
const pagination = ref({
sortBy: "createdAt",
descending: true,
page: 1,
rowsPerPage: 10,
});
const visibleColumns = ref<string[]>([
"no",
"type",
@ -184,23 +178,6 @@ const columns = ref<QTableProps["columns"]>([
},
]);
watch(
() => currentPage.value,
() => {
rowsPerPage.value = pagination.value.rowsPerPage;
getData();
}
);
watch(
() => pagination.value.rowsPerPage,
() => {
rowsPerPage.value = pagination.value.rowsPerPage;
currentPage.value = 1;
getData();
}
);
/** ไปยังหน้าเพิ่มข้อมูล */
function redirectToPageDetail(id: string) {
dataStore.rowsAdd = [];
@ -220,7 +197,7 @@ function editPage(id: string) {
/** ดึงข้อมูลเมื่อ กด enter */
function filterFn() {
getData();
getSearch();
}
/** ปิด pop up */
@ -237,14 +214,16 @@ async function getData() {
formData.status,
formData.type,
formData.year,
currentPage.value,
rowsPerPage.value,
pagination.value.page,
pagination.value.rowsPerPage,
filterKeyword.value
)
)
.then((res) => {
maxPage.value = Math.ceil(res.data.result.total / rowsPerPage.value);
totalList.value = res.data.result.total;
totalList.value = Math.ceil(
res.data.result.total / pagination.value.rowsPerPage
);
total.value = res.data.result.total;
fetchAppealComplain(res.data.result.data);
})
.catch((e) => {
@ -257,19 +236,19 @@ async function getData() {
/** update status */
function dataUpdate() {
getData();
getSearch();
}
/** set ปี ทั้งหมด */
function yearAll() {
formData.year = 0;
getData();
getSearch();
}
/** ฟังชั่น เคลียฟิลเตอร์ */
function resetFilter() {
filterKeyword.value = "";
getData();
getSearch();
}
const option = ref<any[]>(dataStore.statusOptions);
const optionType = ref<any[]>(type.value);
@ -297,6 +276,24 @@ function filterOptionFnType(val: string, update: Function) {
});
}
function updatePagination(newPagination: any) {
pagination.value.page = 1;
pagination.value.rowsPerPage = newPagination.rowsPerPage;
}
function getSearch() {
pagination.value.page = 1;
getData();
}
watch(
() => pagination.value.rowsPerPage,
async () => {
getSearch();
}
);
/** เรียกใช้งาน ฟังชั่น ตอนเริ่มโหลดหน้า */
onMounted(async () => {
getData();
@ -496,19 +493,21 @@ onMounted(async () => {
dense
class="custom-header-table"
:visible-columns="dataStore.visibleColumns"
v-model:pagination="pagination"
:rows-per-page-options="[10, 25, 50, 100]"
@update:pagination="updatePagination"
>
<template v-slot:pagination="scope">
ทั้งหมด {{ totalList }} รายการ
ทั้งหมด {{ 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">
@ -558,7 +557,7 @@ onMounted(async () => {
<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.rowsPerPage +
props.rowIndex +
1
}}

86
src/modules/11_discipline/components/DialogDirector.vue
View file

@ -7,8 +7,13 @@ import type { directorType } from "@/modules/11_discipline/interface/index/Main"
import DialogHeader from "@/components/DialogHeader.vue";
const total = defineModel<number>("total", { required: true });
const totalList = defineModel<number>("totalList", { required: true });
const pagination = defineModel<any>("pagination", { required: true });
const filterKeyword2 = defineModel<string>("filterKeyword2", {
required: true,
});
const selected = ref<directorType[]>([]);
const currentPage = ref<number>(1);
/** ค้นหาคอลัม */
const visibleColumns2 = ref<string[]>([
"no",
@ -84,9 +89,8 @@ const columns2 = ref<QTableProps["columns"]>([
const props = defineProps({
Modal: Boolean,
clickClose: Function,
getData: Function,
getSearch: Function,
rows2: Array,
filterKeyword2: String,
filterTable: {
type: String,
default: "",
@ -113,13 +117,6 @@ const props = defineProps({
},
});
/** แสดงจำนวนในตาราง */
const pagination = ref({
descending: true,
page: Number(props.page),
rowsPerPage: props.rowsPerPage,
});
const checkSelected = computed(() => {
if (selected.value.length === 0) {
return true;
@ -127,7 +124,6 @@ const checkSelected = computed(() => {
});
const emit = defineEmits([
"update:filterKeyword2",
"update:selected",
"update:pagination",
"returnDirector",
@ -142,45 +138,29 @@ async function directorSave() {
* ส่งค่า input กลับไปหน้าหลัก
* @param value ค่าจาก input ฟิลเตอร์
*/
function updateInput(value: any) {
emit("update:filterKeyword2", value);
function updateInput() {
props.getSearch?.();
}
/**รีเซ็ตค่าในช่องค้นหา */
function Reset() {
emit("update:filterKeyword2", "");
filterKeyword2.value = ''
props.getSearch?.();
}
/**
* ส่งเลขหน้า กลับไปหน้าหลัก
* @param newPagination จำนวนข้อมูลที่ต้องการแสดง
* @param page เลขหน้าปัจจุบัน
*/
function updateProp(newPagination: any, page: number) {
// ส่ง event ไปยัง parent component เพื่ออัพเดทค่า props
emit("update:pagination", newPagination, page);
function updatePagination(newPagination: any) {
pagination.value.page = 1;
pagination.value.rowsPerPage = newPagination.rowsPerPage;
}
/** เช็คค่า props.Modal === true */
watchEffect(() => {
if (props.Modal === true) {
selected.value = props.selectedRow;
props.getList();
}
});
watch(
() => currentPage.value,
() => props.Modal,
() => {
updateProp(pagination.value.rowsPerPage, currentPage.value);
}
);
watch(
() => pagination.value.rowsPerPage,
() => {
currentPage.value = 1;
updateProp(pagination.value.rowsPerPage, currentPage.value);
if (props.Modal === true) {
selected.value = props.selectedRow;
props.getList();
}
}
);
</script>
@ -197,8 +177,8 @@ watch(
dense
class="col-12 q-mb-sm"
debounce="300"
:model-value="filterKeyword2"
@update:model-value="updateInput"
v-model="filterKeyword2"
@keydown.enter.prevent="updateInput"
placeholder="ค้นหารายชื่อ"
style="max-width: 100%"
>
@ -216,14 +196,28 @@ watch(
<d-table
:columns="columns2"
:rows="rows2"
:filter="filterKeyword2"
row-key="id"
:visible-columns="visibleColumns2"
selection="multiple"
v-model:selected="selected"
:rows-per-page-options="[10, 25, 50, 100]"
v-model:pagination="pagination"
@update:pagination="updatePagination"
>
<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="props.getList?.()"
></q-pagination>
</template>
<template v-slot:header-selection="scope">
<q-checkbox
keep-color
@ -244,7 +238,11 @@ watch(
</q-td>
<q-td v-for="col in props.cols" :key="col.name" :props="props">
<div v-if="col.name == 'no'">
{{ props.rowIndex + 1 }}
{{
(pagination.page - 1) * pagination.rowsPerPage +
props.rowIndex +
1
}}
</div>
<div v-else>
{{ col.value }}