fix(ข้อมูลการประเมิน):sort Pagination
This commit is contained in:
DESKTOP-1R2VSQH\Lenovo ThinkPad E490
parent
73d03def0b
commit
27622b86a9
9 changed files with 150 additions and 390 deletions
|
|
@ -1,5 +1,5 @@
|
|||
<script setup lang="ts">
|
||||
import { ref, onMounted, reactive, watch } from "vue";
|
||||
import { ref, onMounted } from "vue";
|
||||
import type { QTableProps } from "quasar";
|
||||
import { useQuasar } from "quasar";
|
||||
import { useRouter } from "vue-router";
|
||||
|
|
@ -9,13 +9,11 @@ import config from "@/app.config";
|
|||
import { useCounterMixin } from "@/stores/mixin";
|
||||
import { useKPIDataStore } from "@/modules/01_masterdata/stores/KPIStore";
|
||||
import { checkPermission } from "@/utils/permissions";
|
||||
import { updateCurrentPage } from "@/utils/function";
|
||||
import { usePagination } from "@/composables/usePagination";
|
||||
|
||||
|
||||
import type { DataOption } from "@/modules/01_masterdata/interface/index/Main";
|
||||
|
||||
import type {
|
||||
DataOption,
|
||||
NewPagination,
|
||||
} from "@/modules/01_masterdata/interface/index/Main";
|
||||
import type { FormQueryCapacity } from "@/modules/01_masterdata/interface/request/Main";
|
||||
import type { ResDataCapacity } from "@/modules/01_masterdata/interface/response/Main";
|
||||
|
||||
import CompetencyTotal from "@/modules/01_masterdata/components/competency/Summary.vue";
|
||||
|
|
@ -23,6 +21,10 @@ import CompetencyTotal from "@/modules/01_masterdata/components/competency/Summa
|
|||
const $q = useQuasar();
|
||||
const mixin = useCounterMixin();
|
||||
const { dialogRemove, messageError, showLoader, hideLoader, success } = mixin;
|
||||
const { pagination, params, onRequest, checkAndUpdatePage } = usePagination(
|
||||
"",
|
||||
fetchList
|
||||
);
|
||||
|
||||
const store = useKPIDataStore();
|
||||
const router = useRouter();
|
||||
|
|
@ -36,20 +38,12 @@ const columns = ref<QTableProps["columns"]>([
|
|||
field: "name",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
sort: (a: string, b: string) =>
|
||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||
},
|
||||
]);
|
||||
const visibleColumns = ref<string[]>(["name"]);
|
||||
|
||||
const rows = ref<ResDataCapacity[]>([]); // ข้อมูลสมรรถนะ
|
||||
const total = ref<number>(0); // จำนวนรายการทั้งหมด
|
||||
const totalList = ref<number>(1); // จำนวนหน้าทั้งหมด
|
||||
const formQuery = reactive<FormQueryCapacity>({
|
||||
page: 1,
|
||||
pageSize: 10,
|
||||
keyword: "",
|
||||
}); // form query สำหรับการค้นหา
|
||||
const keyword = ref<string>(""); // คำค้นหา
|
||||
const competencyTypeOp = ref<DataOption[]>([
|
||||
{
|
||||
id: "HEAD",
|
||||
|
|
@ -76,18 +70,17 @@ const competencyTypeOp = ref<DataOption[]>([
|
|||
/** ฟังก์ชันดึงข้อมูลรายการสมรรถนะ */
|
||||
async function fetchList() {
|
||||
showLoader();
|
||||
const queryParams = {
|
||||
...params.value,
|
||||
keyword: keyword.value.trim(),
|
||||
type: store.competencyTypeVal,
|
||||
};
|
||||
await http
|
||||
.get(
|
||||
config.API.kpiCapacity +
|
||||
`/edit?page=${formQuery.page}&pageSize=${
|
||||
formQuery.pageSize
|
||||
}&keyword=${formQuery.keyword.trim()}&type=${store.competencyTypeVal}`
|
||||
)
|
||||
.get(config.API.kpiCapacity + "/edit", { params: queryParams })
|
||||
.then(async (res) => {
|
||||
total.value = res.data.result.total;
|
||||
const data: ResDataCapacity[] = res.data.result.data;
|
||||
totalList.value = Math.ceil(res.data.result.total / formQuery.pageSize);
|
||||
rows.value = data;
|
||||
const result = res.data.result;
|
||||
pagination.value.rowsNumber = result.total;
|
||||
rows.value = result.data;
|
||||
})
|
||||
.catch((err) => {
|
||||
messageError($q, err);
|
||||
|
|
@ -123,11 +116,7 @@ function deleteData(id: string) {
|
|||
await http
|
||||
.delete(config.API.kpiCapacity + `/${id}`)
|
||||
.then(async () => {
|
||||
formQuery.page = await updateCurrentPage(
|
||||
formQuery.page,
|
||||
totalList.value,
|
||||
rows.value.length
|
||||
);
|
||||
await checkAndUpdatePage(rows.value.length);
|
||||
await fetchList();
|
||||
success($q, "ลบข้อมูลสำเร็จ");
|
||||
})
|
||||
|
|
@ -146,26 +135,10 @@ function onAdd() {
|
|||
}
|
||||
|
||||
function fetchNewList() {
|
||||
formQuery.page = 1;
|
||||
pagination.value.page = 1;
|
||||
fetchList();
|
||||
}
|
||||
|
||||
/**
|
||||
* function updatePagination
|
||||
* @param newPagination ข้อมูล Pagination ใหม่
|
||||
*/
|
||||
function updatePagination(newPagination: NewPagination) {
|
||||
formQuery.page = 1;
|
||||
formQuery.pageSize = newPagination.rowsPerPage;
|
||||
}
|
||||
|
||||
watch(
|
||||
() => formQuery.pageSize,
|
||||
() => {
|
||||
fetchNewList();
|
||||
}
|
||||
);
|
||||
|
||||
onMounted(() => {
|
||||
fetchList();
|
||||
});
|
||||
|
|
@ -206,7 +179,7 @@ onMounted(() => {
|
|||
<q-input
|
||||
outlined
|
||||
dense
|
||||
v-model="formQuery.keyword"
|
||||
v-model="keyword"
|
||||
label="ค้นหา"
|
||||
@keyup.enter="fetchNewList()"
|
||||
>
|
||||
|
|
@ -230,7 +203,7 @@ onMounted(() => {
|
|||
</div>
|
||||
</q-toolbar>
|
||||
|
||||
<d-table
|
||||
<p-table
|
||||
ref="table"
|
||||
:columns="columns"
|
||||
:rows="rows"
|
||||
|
|
@ -242,7 +215,8 @@ onMounted(() => {
|
|||
:rows-per-page-options="[10, 25, 50, 100]"
|
||||
class="custom-header-table"
|
||||
:visible-columns="visibleColumns"
|
||||
@update:pagination="updatePagination"
|
||||
@request="onRequest"
|
||||
v-model:pagination="pagination"
|
||||
>
|
||||
<template v-slot:header="props">
|
||||
<q-tr :props="props">
|
||||
|
|
@ -303,19 +277,5 @@ onMounted(() => {
|
|||
</q-td>
|
||||
</q-tr>
|
||||
</template>
|
||||
<template v-slot:pagination="scope">
|
||||
ทั้งหมด {{ total }} รายการ
|
||||
<q-pagination
|
||||
v-model="formQuery.page"
|
||||
active-color="primary"
|
||||
color="dark"
|
||||
:max="Number(totalList)"
|
||||
size="sm"
|
||||
boundary-links
|
||||
direction-links
|
||||
:max-pages="5"
|
||||
@update:model-value="fetchList"
|
||||
></q-pagination>
|
||||
</template>
|
||||
</d-table>
|
||||
</p-table>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -7,10 +7,9 @@ import http from "@/plugins/http";
|
|||
import config from "@/app.config";
|
||||
import { checkPermission } from "@/utils/permissions";
|
||||
import { useCounterMixin } from "@/stores/mixin";
|
||||
import { updateCurrentPage } from "@/utils/function";
|
||||
import { usePagination } from "@/composables/usePagination";
|
||||
|
||||
import type { DataKPIGroup } from "@/modules/01_masterdata/interface/response/Main";
|
||||
import type { NewPagination } from "@/modules/14_KPI/interface/index/Main";
|
||||
|
||||
import dialogHeader from "@/components/DialogHeader.vue";
|
||||
|
||||
|
|
@ -24,6 +23,10 @@ const {
|
|||
messageError,
|
||||
success,
|
||||
} = mixin;
|
||||
const { pagination, params, onRequest, checkAndUpdatePage } = usePagination(
|
||||
"",
|
||||
fetchData
|
||||
);
|
||||
|
||||
const columns = ref<QTableProps["columns"]>([
|
||||
{
|
||||
|
|
@ -34,21 +37,13 @@ const columns = ref<QTableProps["columns"]>([
|
|||
field: "nameGroupKPI",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
sort: (a: string, b: string) =>
|
||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||
},
|
||||
]);
|
||||
const visibleColumns = ref<string[]>(["nameGroupKPI"]);
|
||||
|
||||
const formQuery = reactive({
|
||||
page: 1,
|
||||
pageSize: 10,
|
||||
keyword: "",
|
||||
});
|
||||
const totalList = ref<number>(1); //จำนวนหน้าทั้งหมด
|
||||
const total = ref<number>(0); // จำนวนรายการทั้งหมด
|
||||
const modal = ref<boolean>(false); // เปิด/ปิด dialog
|
||||
const rows = ref<DataKPIGroup[]>([]); // ข้อมูลกลุ่มงาน
|
||||
const keyword = ref<string>(""); // คำค้นหา
|
||||
const groupName = ref<string>(""); // ชื่อกลุ่มงาน
|
||||
const editStatus = ref<boolean>(false); // สถานะการแก้ไข
|
||||
const editId = ref<string>(""); // รหัสกลุ่มงานที่ต้องการแก้ไข
|
||||
|
|
@ -57,17 +52,16 @@ const editId = ref<string>(""); // รหัสกลุ่มงานที่
|
|||
async function fetchData() {
|
||||
showLoader();
|
||||
await http
|
||||
.get(
|
||||
config.API.kpiGroup +
|
||||
`/edit?page=${formQuery.page}&pageSize=${
|
||||
formQuery.pageSize
|
||||
}&keyword=${formQuery.keyword.trim()}`
|
||||
)
|
||||
.get(config.API.kpiGroup + "/edit", {
|
||||
params: {
|
||||
...params.value,
|
||||
keyword: keyword.value.trim(),
|
||||
},
|
||||
})
|
||||
.then(async (res) => {
|
||||
total.value = res.data.result.total;
|
||||
const data = res.data.result;
|
||||
totalList.value = Math.ceil(res.data.result.total / formQuery.pageSize);
|
||||
rows.value = data.data;
|
||||
const result = res.data.result;
|
||||
pagination.value.rowsNumber = result.total;
|
||||
rows.value = result.data;
|
||||
})
|
||||
.catch((err) => {
|
||||
messageError($q, err);
|
||||
|
|
@ -127,11 +121,7 @@ async function deleteData(id: string) {
|
|||
await http
|
||||
.delete(config.API.kpiGroupById(id))
|
||||
.then(async () => {
|
||||
formQuery.page = await updateCurrentPage(
|
||||
formQuery.page,
|
||||
totalList.value,
|
||||
rows.value.length
|
||||
);
|
||||
await checkAndUpdatePage(rows.value.length);
|
||||
await fetchData();
|
||||
success($q, "ลบข้อมูลสำเร็จ");
|
||||
})
|
||||
|
|
@ -179,29 +169,12 @@ async function onSubmit() {
|
|||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* ฟังก์ชันอัปเดตข้อมูล Pagination
|
||||
* @param newPagination ข้อมูล Pagination ใหม่
|
||||
*/
|
||||
function updatePagination(newPagination: NewPagination) {
|
||||
formQuery.page = 1;
|
||||
formQuery.pageSize = newPagination.rowsPerPage;
|
||||
}
|
||||
|
||||
/** ฟังก์ชันดึงข้อมูลกลุ่มงานใหม่ */
|
||||
function fetchNewList() {
|
||||
formQuery.page = 1;
|
||||
pagination.value.page = 1;
|
||||
fetchData();
|
||||
}
|
||||
|
||||
/** ฟังก์ชันติดตามการเปลี่ยนแปลงจำนวนแถวต่อหน้า */
|
||||
watch(
|
||||
() => formQuery.pageSize,
|
||||
() => {
|
||||
fetchNewList();
|
||||
}
|
||||
);
|
||||
|
||||
/** lifecycle hook */
|
||||
onMounted(() => {
|
||||
fetchData();
|
||||
|
|
@ -225,7 +198,7 @@ onMounted(() => {
|
|||
<q-input
|
||||
outlined
|
||||
dense
|
||||
v-model="formQuery.keyword"
|
||||
v-model="keyword"
|
||||
label="ค้นหา"
|
||||
@keyup.enter="fetchNewList()"
|
||||
>
|
||||
|
|
@ -247,7 +220,7 @@ onMounted(() => {
|
|||
</div>
|
||||
</q-toolbar>
|
||||
|
||||
<d-table
|
||||
<p-table
|
||||
ref="table"
|
||||
:columns="columns"
|
||||
:rows="rows"
|
||||
|
|
@ -257,9 +230,10 @@ onMounted(() => {
|
|||
:paging="true"
|
||||
dense
|
||||
class="custom-header-table"
|
||||
:rows-per-page-options="[10, 25, 50, 100]"
|
||||
:rows-per-page-options="[1, 10, 25, 50, 100]"
|
||||
:visible-columns="visibleColumns"
|
||||
@update:pagination="updatePagination"
|
||||
@request="onRequest"
|
||||
v-model:pagination="pagination"
|
||||
>
|
||||
<template v-slot:header="props">
|
||||
<q-tr :props="props">
|
||||
|
|
@ -309,21 +283,7 @@ onMounted(() => {
|
|||
</q-td>
|
||||
</q-tr>
|
||||
</template>
|
||||
<template v-slot:pagination="scope">
|
||||
ทั้งหมด {{ total }} รายการ
|
||||
<q-pagination
|
||||
v-model="formQuery.page"
|
||||
active-color="primary"
|
||||
color="dark"
|
||||
:max="Number(totalList)"
|
||||
size="sm"
|
||||
boundary-links
|
||||
direction-links
|
||||
:max-pages="5"
|
||||
@update:model-value="fetchData"
|
||||
></q-pagination>
|
||||
</template>
|
||||
</d-table>
|
||||
</p-table>
|
||||
|
||||
<q-dialog v-model="modal" persistent>
|
||||
<q-card flat bordered style="min-width: 50vh">
|
||||
|
|
|
|||
|
|
@ -9,6 +9,7 @@ import config from "@/app.config";
|
|||
import { useCounterMixin } from "@/stores/mixin";
|
||||
import { checkPermission } from "@/utils/permissions";
|
||||
import { updateCurrentPage } from "@/utils/function";
|
||||
import { usePagination } from "@/composables/usePagination";
|
||||
|
||||
import type {
|
||||
DataOption,
|
||||
|
|
@ -34,6 +35,10 @@ const {
|
|||
success,
|
||||
dialogConfirm,
|
||||
} = mixin;
|
||||
const { pagination, params, onRequest, checkAndUpdatePage } = usePagination(
|
||||
"",
|
||||
getData
|
||||
);
|
||||
|
||||
const id = ref<string>(""); // รหัสกลุ่มงานที่ต้องการแก้ไข
|
||||
const modal = ref<boolean>(false); // เปิด/ปิด dialog
|
||||
|
|
@ -49,14 +54,8 @@ const positionMainOp = ref<DataOption[]>([]); // ตำแหน่งหลั
|
|||
const competencyOp = ref<DataOption[]>([]); // สมรรถนะ
|
||||
const competencyOpMain = ref<DataOption[]>([]); // สมรรถนะหลัก
|
||||
|
||||
const formQuery = reactive({
|
||||
page: 1,
|
||||
pageSize: 10,
|
||||
keyword: "",
|
||||
});
|
||||
const totalList = ref<number>(1); // จำนวนหน้าทั้งหมด
|
||||
const total = ref<number>(0); // จำนวนรายการทั้งหมด
|
||||
const rows = ref<ListLinkGroup[]>([]); // ข้อมูลเชื่อมโยงกับกลุ่มงานและตำแหน่ง
|
||||
const keyword = ref<string>(""); // คำค้นหา
|
||||
const columns = ref<QTableProps["columns"]>([
|
||||
{
|
||||
name: "groupName",
|
||||
|
|
@ -66,30 +65,24 @@ const columns = ref<QTableProps["columns"]>([
|
|||
field: "groupName",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
sort: (a: string, b: string) =>
|
||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||
},
|
||||
{
|
||||
name: "positions",
|
||||
align: "left",
|
||||
label: "ตำแหน่ง",
|
||||
sortable: true,
|
||||
sortable: false,
|
||||
field: "positions",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
sort: (a: string, b: string) =>
|
||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||
},
|
||||
{
|
||||
name: "capacitys",
|
||||
align: "left",
|
||||
label: "สมรรถนะประจำกลุ่มงาน",
|
||||
sortable: true,
|
||||
sortable: false,
|
||||
field: "capacitys",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
sort: (a: string, b: string) =>
|
||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||
},
|
||||
]);
|
||||
const visibleColumns = ref<string[]>(["groupName", "positions", "capacitys"]);
|
||||
|
|
@ -97,18 +90,17 @@ const visibleColumns = ref<string[]>(["groupName", "positions", "capacitys"]);
|
|||
/** ฟังก์ชันดึงข้อมูลรายการเชื่อมโยงกับกลุ่มงานและตำแหน่ง */
|
||||
async function getData() {
|
||||
showLoader();
|
||||
http
|
||||
.get(
|
||||
config.API.kpiLink +
|
||||
`/edit?page=${formQuery.page}&pageSize=${
|
||||
formQuery.pageSize
|
||||
}&keyword=${formQuery.keyword.trim()}`
|
||||
)
|
||||
await http
|
||||
.get(config.API.kpiLink + "/edit", {
|
||||
params: {
|
||||
...params.value,
|
||||
keyword: keyword.value.trim(),
|
||||
},
|
||||
})
|
||||
.then((res) => {
|
||||
total.value = res.data.result.total;
|
||||
const data = res.data.result;
|
||||
totalList.value = Math.ceil(res.data.result.total / formQuery.pageSize);
|
||||
rows.value = data.data;
|
||||
const result = res.data.result;
|
||||
pagination.value.rowsNumber = result.total;
|
||||
rows.value = result.data;
|
||||
})
|
||||
.catch((err) => {
|
||||
messageError($q, err);
|
||||
|
|
@ -127,11 +119,7 @@ async function deleteData(id: string) {
|
|||
await http
|
||||
.delete(config.API.kpiLink + `/${id}`)
|
||||
.then(async () => {
|
||||
formQuery.page = await updateCurrentPage(
|
||||
formQuery.page,
|
||||
totalList.value,
|
||||
rows.value.length
|
||||
);
|
||||
await checkAndUpdatePage(rows.value.length);
|
||||
await getData();
|
||||
success($q, "ลบข้อมูลสำเร็จ");
|
||||
})
|
||||
|
|
@ -346,29 +334,12 @@ function filterOptionSelect(val: string, update: Function, type: string) {
|
|||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* ฟังก์ชันอัปเดต Pagination
|
||||
* @param newPagination ข้อมูล Pagination ใหม่
|
||||
*/
|
||||
function updatePagination(newPagination: NewPagination) {
|
||||
formQuery.page = 1;
|
||||
formQuery.pageSize = newPagination.rowsPerPage;
|
||||
}
|
||||
|
||||
/** ฟังก์ชันดึงข้อมูลใหม่ */
|
||||
function fetchNewList() {
|
||||
formQuery.page = 1;
|
||||
pagination.value.page = 1;
|
||||
getData();
|
||||
}
|
||||
|
||||
/** ฟังก์ชันติดตามการเปลี่ยนแปลงจำนวนแถวต่อหน้า */
|
||||
watch(
|
||||
() => formQuery.pageSize,
|
||||
() => {
|
||||
fetchNewList();
|
||||
}
|
||||
);
|
||||
|
||||
/** lifecycle hook */
|
||||
onMounted(() => {
|
||||
getData();
|
||||
|
|
@ -392,7 +363,7 @@ onMounted(() => {
|
|||
<q-input
|
||||
outlined
|
||||
dense
|
||||
v-model="formQuery.keyword"
|
||||
v-model="keyword"
|
||||
label="ค้นหา"
|
||||
@keyup.enter="fetchNewList()"
|
||||
>
|
||||
|
|
@ -415,7 +386,7 @@ onMounted(() => {
|
|||
</div>
|
||||
</q-toolbar>
|
||||
|
||||
<d-table
|
||||
<p-table
|
||||
ref="table"
|
||||
:columns="columns"
|
||||
:rows="rows"
|
||||
|
|
@ -426,8 +397,9 @@ onMounted(() => {
|
|||
class="custom-header-table"
|
||||
:visible-columns="visibleColumns"
|
||||
:separator="'cell'"
|
||||
:rows-per-page-options="[1, 10, 25, 50, 100]"
|
||||
@update:pagination="updatePagination"
|
||||
:rows-per-page-options="[10, 25, 50, 100]"
|
||||
@request="onRequest"
|
||||
v-model:pagination="pagination"
|
||||
>
|
||||
<template v-slot:header="props">
|
||||
<q-tr :props="props">
|
||||
|
|
@ -495,21 +467,7 @@ onMounted(() => {
|
|||
</q-td>
|
||||
</q-tr>
|
||||
</template>
|
||||
<template v-slot:pagination="scope">
|
||||
ทั้งหมด {{ total }} รายการ
|
||||
<q-pagination
|
||||
v-model="formQuery.page"
|
||||
active-color="primary"
|
||||
color="dark"
|
||||
:max="Number(totalList)"
|
||||
size="sm"
|
||||
boundary-links
|
||||
direction-links
|
||||
:max-pages="5"
|
||||
@update:model-value="getData"
|
||||
></q-pagination>
|
||||
</template>
|
||||
</d-table>
|
||||
</p-table>
|
||||
|
||||
<q-dialog v-model="modal" persistent>
|
||||
<q-card flat bordered style="min-width: 80vh">
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue