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
|
|
@ -39,9 +39,16 @@ export function usePagination(
|
|||
}
|
||||
}
|
||||
|
||||
async function checkAndUpdatePage(totalRows: number) {
|
||||
if (totalRows === 1 && pagination.value.page > 1) {
|
||||
pagination.value.page = pagination.value.page - 1;
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
pagination,
|
||||
params,
|
||||
onRequest,
|
||||
checkAndUpdatePage,
|
||||
};
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
|
|
|
|||
|
|
@ -12,8 +12,8 @@ interface DataListsObject {
|
|||
}
|
||||
|
||||
interface FormListMainByRole {
|
||||
page: number;
|
||||
pageSize: number;
|
||||
page?: number;
|
||||
pageSize?: number;
|
||||
position: string;
|
||||
round: string;
|
||||
keyword: string;
|
||||
|
|
@ -60,8 +60,8 @@ interface FormFilterAssignment {
|
|||
keyword: string;
|
||||
period: string;
|
||||
year: number | string | null;
|
||||
pageSize: number;
|
||||
page: number;
|
||||
pageSize?: number;
|
||||
page?: number;
|
||||
}
|
||||
|
||||
export type {
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<script setup lang="ts">
|
||||
import { ref, onMounted, reactive, watch } from "vue";
|
||||
import { ref, onMounted, reactive } from "vue";
|
||||
import { useQuasar, type QTableProps } from "quasar";
|
||||
|
||||
import http from "@/plugins/http";
|
||||
|
|
@ -7,24 +7,27 @@ import config from "@/app.config";
|
|||
import { useRouter } from "vue-router";
|
||||
import { useCounterMixin } from "@/stores/mixin";
|
||||
import { checkPermission } from "@/utils/permissions";
|
||||
import { updateCurrentPage } from "@/utils/function";
|
||||
import { usePagination } from "@/composables/usePagination";
|
||||
|
||||
/** importType*/
|
||||
import type {
|
||||
DataOption,
|
||||
NewPagination,
|
||||
DataAssignment,
|
||||
} from "@/modules/01_masterdata/interface/index/Main";
|
||||
import type { FormFilterAssignment } from "@/modules/01_masterdata/interface/request/Main";
|
||||
import type { ResAssignment } from "@/modules/01_masterdata/interface/response/Main";
|
||||
|
||||
/** importStore*/
|
||||
|
||||
/** importComponents*/
|
||||
import Summary from "@/modules/01_masterdata/components/Indicators/Summary.vue";
|
||||
|
||||
const $q = useQuasar();
|
||||
const router = useRouter();
|
||||
const { showLoader, hideLoader, dialogRemove, success, messageError } =
|
||||
useCounterMixin();
|
||||
const { pagination, params, onRequest, checkAndUpdatePage } = usePagination(
|
||||
"",
|
||||
fetchList
|
||||
);
|
||||
|
||||
/** table*/
|
||||
const columns = ref<QTableProps["columns"]>([
|
||||
|
|
@ -61,26 +64,22 @@ const formFilter = reactive<FormFilterAssignment>({
|
|||
keyword: "",
|
||||
period: "",
|
||||
year: new Date().getFullYear(),
|
||||
pageSize: 10,
|
||||
page: 1,
|
||||
});
|
||||
const totalList = ref<number>(0); //จำนวนข้อมูลรายการ
|
||||
const maxPage = ref<number>(1);
|
||||
|
||||
/** ฟังก์ชันดึงข้อมูลรายการงานอื่นๆ ที่ได้รับมอบหมาย*/
|
||||
async function fetchList() {
|
||||
showLoader();
|
||||
rows.value = [];
|
||||
formFilter.year = formFilter.year ? formFilter.year.toString() : null;
|
||||
await http
|
||||
.post(config.API.kpiSpecial + `/search-edit`, {
|
||||
...formFilter,
|
||||
...params.value,
|
||||
keyword: formFilter.keyword.trim(),
|
||||
})
|
||||
.then((res: ResAssignment) => {
|
||||
maxPage.value = Math.ceil(res.data.result.total / formFilter.pageSize);
|
||||
totalList.value = res.data.result.total;
|
||||
rows.value = res.data.result.data;
|
||||
const result = res.data.result;
|
||||
pagination.value.rowsNumber = result.total;
|
||||
rows.value = result.data;
|
||||
})
|
||||
.catch((err) => {
|
||||
messageError($q, err);
|
||||
|
|
@ -108,11 +107,7 @@ function onClickDelete(id: string) {
|
|||
await http
|
||||
.delete(config.API.kpiSpecial + `/${id}`)
|
||||
.then(async () => {
|
||||
formFilter.page = await updateCurrentPage(
|
||||
formFilter.page,
|
||||
maxPage.value,
|
||||
rows.value.length
|
||||
);
|
||||
await checkAndUpdatePage(rows.value.length);
|
||||
await fetchList();
|
||||
success($q, "ลบข้อมูลสำเร็จ");
|
||||
})
|
||||
|
|
@ -126,22 +121,10 @@ function onClickDelete(id: string) {
|
|||
}
|
||||
|
||||
function fetchNewList() {
|
||||
formFilter.page = 1;
|
||||
pagination.value.page = 1;
|
||||
fetchList();
|
||||
}
|
||||
|
||||
function updatePageSize(newPagination: NewPagination) {
|
||||
formFilter.page = 1;
|
||||
formFilter.pageSize = newPagination.rowsPerPage;
|
||||
}
|
||||
|
||||
watch(
|
||||
() => formFilter.pageSize,
|
||||
() => {
|
||||
fetchList();
|
||||
}
|
||||
);
|
||||
|
||||
onMounted(async () => {
|
||||
await fetchList();
|
||||
});
|
||||
|
|
@ -266,7 +249,8 @@ onMounted(async () => {
|
|||
class="custom-header-table"
|
||||
:rows-per-page-options="[10, 25, 50, 100]"
|
||||
:visible-columns="visibleColumns"
|
||||
@update:pagination="updatePageSize"
|
||||
v-model:pagination="pagination"
|
||||
@request="onRequest"
|
||||
>
|
||||
<template v-slot:header="props">
|
||||
<q-tr :props="props">
|
||||
|
|
@ -309,20 +293,6 @@ onMounted(async () => {
|
|||
</q-td>
|
||||
</q-tr>
|
||||
</template>
|
||||
<template v-slot:pagination="scope">
|
||||
ทั้งหมด {{ totalList }} รายการ
|
||||
<q-pagination
|
||||
v-model="formFilter.page"
|
||||
active-color="primary"
|
||||
color="dark"
|
||||
:max="maxPage"
|
||||
:max-pages="5"
|
||||
size="sm"
|
||||
boundary-links
|
||||
direction-links
|
||||
@update:model-value="fetchList"
|
||||
></q-pagination>
|
||||
</template>
|
||||
</d-table>
|
||||
</div>
|
||||
</q-card>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<script setup lang="ts">
|
||||
import { ref, reactive, onMounted, watch } from "vue";
|
||||
import { ref, reactive, onMounted } from "vue";
|
||||
import { useQuasar, type QTableProps } from "quasar";
|
||||
import { useRouter, useRoute } from "vue-router";
|
||||
|
||||
|
|
@ -8,7 +8,7 @@ import config from "@/app.config";
|
|||
import { useCounterMixin } from "@/stores/mixin";
|
||||
import { checkPermission } from "@/utils/permissions";
|
||||
import { useStructureTree } from "@/stores/structureTree";
|
||||
import { updateCurrentPage } from "@/utils/function";
|
||||
import { usePagination } from "@/composables/usePagination";
|
||||
|
||||
import type {
|
||||
DataOption,
|
||||
|
|
@ -16,7 +16,6 @@ import type {
|
|||
OrgTreeNode,
|
||||
DataHistory,
|
||||
FormDataNodeData,
|
||||
NewPagination,
|
||||
} from "@/modules/01_masterdata/interface/index/Main";
|
||||
|
||||
import DialogHistory from "@/modules/01_masterdata/components/Indicators/DialogHistory.vue";
|
||||
|
|
@ -28,14 +27,15 @@ const route = useRoute();
|
|||
const { fetchStructureTree } = useStructureTree();
|
||||
const { showLoader, hideLoader, dialogRemove, success, messageError } =
|
||||
useCounterMixin();
|
||||
const { pagination, params, onRequest, checkAndUpdatePage } = usePagination(
|
||||
"",
|
||||
() => fetchList()
|
||||
);
|
||||
|
||||
const dataHistory = ref<DataHistory[]>([]);
|
||||
const modalHistory = ref<boolean>(false);
|
||||
const isAll = ref<boolean>(false);
|
||||
|
||||
const total = ref<number>(0);
|
||||
const totalList = ref<number>(1);
|
||||
|
||||
/** หัวตาราง */
|
||||
const rows = ref<IndicatorType[]>([]);
|
||||
const columns = ref<QTableProps["columns"]>([
|
||||
|
|
@ -59,12 +59,6 @@ const columns = ref<QTableProps["columns"]>([
|
|||
},
|
||||
]);
|
||||
const visibleColumns = ref<string[]>(["including", "includingName"]);
|
||||
const pagination = ref({
|
||||
sortBy: "createdAt",
|
||||
descending: true,
|
||||
page: 1,
|
||||
rowsPerPage: 10,
|
||||
});
|
||||
|
||||
const node = ref<OrgTreeNode[]>([]);
|
||||
const expanded = ref<string[]>([]);
|
||||
|
|
@ -96,16 +90,12 @@ async function fetchList() {
|
|||
nodeId: nodeData.nodeId,
|
||||
period: nodeData.round,
|
||||
year: year.value?.toString(),
|
||||
pageSize: pagination.value.rowsPerPage,
|
||||
page: pagination.value.page,
|
||||
...params.value,
|
||||
})
|
||||
.then((res) => {
|
||||
const data = res.data.result.data;
|
||||
totalList.value = Math.ceil(
|
||||
res.data.result.total / pagination.value.rowsPerPage
|
||||
);
|
||||
total.value = res.data.result.total;
|
||||
rows.value = data;
|
||||
const result = res.data.result;
|
||||
pagination.value.rowsNumber = result.total;
|
||||
rows.value = result.data;
|
||||
})
|
||||
.catch((err) => {
|
||||
messageError($q, err);
|
||||
|
|
@ -162,11 +152,7 @@ async function deleteData(idData: string) {
|
|||
await http
|
||||
.delete(config.API.kpiPlanById(idData))
|
||||
.then(async () => {
|
||||
pagination.value.page = await updateCurrentPage(
|
||||
pagination.value.page,
|
||||
totalList.value,
|
||||
rows.value.length
|
||||
);
|
||||
await checkAndUpdatePage(rows.value.length);
|
||||
await fetchList();
|
||||
success($q, "ลบข้อมูลสำเร็จ");
|
||||
})
|
||||
|
|
@ -200,23 +186,11 @@ function onClickHistory(id: string) {
|
|||
});
|
||||
}
|
||||
|
||||
function updatePagination(newPagination: NewPagination) {
|
||||
pagination.value.page = 1;
|
||||
pagination.value.rowsPerPage = newPagination.rowsPerPage;
|
||||
}
|
||||
|
||||
function getSearch() {
|
||||
pagination.value.page = 1;
|
||||
fetchList();
|
||||
}
|
||||
|
||||
watch(
|
||||
() => pagination.value.rowsPerPage,
|
||||
async () => {
|
||||
getSearch();
|
||||
}
|
||||
);
|
||||
|
||||
onMounted(() => {
|
||||
fetchTree();
|
||||
});
|
||||
|
|
@ -403,7 +377,7 @@ onMounted(() => {
|
|||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<d-table
|
||||
<p-table
|
||||
for="table"
|
||||
ref="table"
|
||||
:columns="columns"
|
||||
|
|
@ -414,8 +388,9 @@ onMounted(() => {
|
|||
dense
|
||||
class="custom-header-table"
|
||||
:rows-per-page-options="[10, 25, 50, 100]"
|
||||
@update:pagination="updatePagination"
|
||||
:visible-columns="visibleColumns"
|
||||
@request="onRequest"
|
||||
v-model:pagination="pagination"
|
||||
>
|
||||
<template v-slot:header="props">
|
||||
<q-tr :props="props">
|
||||
|
|
@ -532,21 +507,7 @@ onMounted(() => {
|
|||
</q-td>
|
||||
</q-tr>
|
||||
</template>
|
||||
<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="fetchList"
|
||||
></q-pagination>
|
||||
</template>
|
||||
</d-table>
|
||||
</p-table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<script setup lang="ts">
|
||||
import { ref, reactive, onMounted, watch } from "vue";
|
||||
import { ref, reactive, onMounted } from "vue";
|
||||
import { useQuasar, type QTableProps } from "quasar";
|
||||
import { useRouter } from "vue-router";
|
||||
|
||||
|
|
@ -7,12 +7,11 @@ import http from "@/plugins/http";
|
|||
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 { FormListMainByRole } from "@/modules/01_masterdata/interface/request/Main";
|
||||
import type {
|
||||
DataOption,
|
||||
NewPagination,
|
||||
KpiRoleData,
|
||||
IndicatorType,
|
||||
IndicatorTotal,
|
||||
|
|
@ -26,17 +25,18 @@ const $q = useQuasar();
|
|||
const router = useRouter();
|
||||
const { showLoader, hideLoader, dialogRemove, success, messageError } =
|
||||
useCounterMixin();
|
||||
const { pagination, params, onRequest, checkAndUpdatePage } = usePagination(
|
||||
"",
|
||||
fetchList
|
||||
);
|
||||
|
||||
/** use*/
|
||||
const dataHistory = ref<KpiRoleData[]>([]);
|
||||
const modalHistory = ref<boolean>(false);
|
||||
const total = ref<number>(0);
|
||||
|
||||
const positionOp = ref<DataOption[]>([{ id: "", name: "ทั้งหมด" }]);
|
||||
const positionMainOp = ref<DataOption[]>([{ id: "", name: "ทั้งหมด" }]);
|
||||
|
||||
const maxPage = ref<number>(1);
|
||||
|
||||
/** หัวตาราง */
|
||||
const rows = ref<IndicatorType[]>([]);
|
||||
const columns = ref<QTableProps["columns"]>([
|
||||
|
|
@ -62,17 +62,11 @@ const columns = ref<QTableProps["columns"]>([
|
|||
const visibleColumns = ref<string[]>(["including", "includingName"]);
|
||||
|
||||
const formFilter = reactive<FormListMainByRole>({
|
||||
page: 1,
|
||||
pageSize: 10,
|
||||
position: "",
|
||||
round: "",
|
||||
keyword: "",
|
||||
year: new Date().getFullYear(),
|
||||
});
|
||||
const pagination = ref({
|
||||
page: formFilter.page,
|
||||
rowsPerPage: formFilter.pageSize,
|
||||
});
|
||||
|
||||
const indicatorTotal = ref<IndicatorTotal[]>([
|
||||
{
|
||||
|
|
@ -105,7 +99,7 @@ const roundOp = ref<DataOption[]>([
|
|||
]);
|
||||
|
||||
async function fetchList() {
|
||||
rows.value = [];
|
||||
showLoader();
|
||||
await http
|
||||
.post(config.API.kpiRoleMainList + `/search-edit`, {
|
||||
keyword: formFilter.keyword.trim(),
|
||||
|
|
@ -114,17 +108,18 @@ async function fetchList() {
|
|||
node: 0,
|
||||
nodeId: "",
|
||||
year: formFilter.year?.toString(),
|
||||
pageSize: formFilter.pageSize,
|
||||
page: formFilter.page,
|
||||
...params.value,
|
||||
})
|
||||
.then(async (res) => {
|
||||
const data = await res.data.result.data;
|
||||
total.value = res.data.result.total;
|
||||
maxPage.value = Math.ceil(res.data.result.total / formFilter.pageSize);
|
||||
rows.value = data;
|
||||
const result = await res.data.result;
|
||||
pagination.value.rowsNumber = result.total;
|
||||
rows.value = result.data;
|
||||
})
|
||||
.catch((err) => {
|
||||
messageError($q, err);
|
||||
})
|
||||
.finally(() => {
|
||||
hideLoader();
|
||||
});
|
||||
}
|
||||
|
||||
|
|
@ -144,11 +139,7 @@ function onClickDelete(id: number) {
|
|||
await http
|
||||
.delete(config.API.kpiRoleMainList + `/${id}`)
|
||||
.then(async () => {
|
||||
formFilter.page = await updateCurrentPage(
|
||||
formFilter.page,
|
||||
maxPage.value,
|
||||
rows.value.length
|
||||
);
|
||||
await checkAndUpdatePage(rows.value.length);
|
||||
await fetchList();
|
||||
success($q, "ลบข้อมูลสำเร็จ");
|
||||
})
|
||||
|
|
@ -161,33 +152,6 @@ function onClickDelete(id: number) {
|
|||
});
|
||||
}
|
||||
|
||||
async function updatePage(val: number) {
|
||||
showLoader();
|
||||
try {
|
||||
formFilter.page = val;
|
||||
await fetchList();
|
||||
} finally {
|
||||
hideLoader();
|
||||
}
|
||||
}
|
||||
|
||||
function updatePageSize(newPagination: NewPagination) {
|
||||
formFilter.page = 1;
|
||||
formFilter.pageSize = newPagination.rowsPerPage;
|
||||
}
|
||||
|
||||
watch(
|
||||
() => formFilter.pageSize,
|
||||
async () => {
|
||||
showLoader();
|
||||
try {
|
||||
await fetchList();
|
||||
} finally {
|
||||
hideLoader();
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
/**
|
||||
* function ต้นหาข้อมูลของ Option
|
||||
* @param val ค่าที่ต้องการฟิลเตอร์
|
||||
|
|
@ -282,7 +246,7 @@ onMounted(async () => {
|
|||
|
||||
<template>
|
||||
<div class="toptitle text-dark col-12 row items-center">
|
||||
รายการตัวชี้วัดตามตำแหน่ง
|
||||
รายการตัวชี้วัดตามตำแหน่งasdassd
|
||||
</div>
|
||||
|
||||
<Summary />
|
||||
|
|
@ -304,7 +268,7 @@ onMounted(async () => {
|
|||
:options="positionOp"
|
||||
use-input
|
||||
@filter="(inputValue:any,doneFn:Function) => filterOption(inputValue, doneFn) "
|
||||
@update:model-value="(formFilter.page = 1), fetchList()"
|
||||
@update:model-value="(pagination.page = 1), fetchList()"
|
||||
>
|
||||
<template v-slot:no-option>
|
||||
<q-item>
|
||||
|
|
@ -315,7 +279,7 @@ onMounted(async () => {
|
|||
<q-icon
|
||||
name="cancel"
|
||||
@click.stop.prevent="
|
||||
(formFilter.position = ''), (formFilter.page = 1), fetchList()
|
||||
(formFilter.position = ''), (pagination.page = 1), fetchList()
|
||||
"
|
||||
class="cursor-pointer"
|
||||
/>
|
||||
|
|
@ -329,7 +293,7 @@ onMounted(async () => {
|
|||
autoApply
|
||||
year-picker
|
||||
:enableTimePicker="false"
|
||||
@update:model-value="(formFilter.page = 1), fetchList()"
|
||||
@update:model-value="(pagination.page = 1), fetchList()"
|
||||
>
|
||||
<template #year="{ year }">{{ year + 543 }}</template>
|
||||
<template #year-overlay-value="{ value }">{{
|
||||
|
|
@ -358,7 +322,7 @@ onMounted(async () => {
|
|||
<q-icon
|
||||
name="cancel"
|
||||
@click.stop.prevent="
|
||||
(formFilter.year = null), (formFilter.page = 1), fetchList()
|
||||
(formFilter.year = null), (pagination.page = 1), fetchList()
|
||||
"
|
||||
class="cursor-pointer"
|
||||
/>
|
||||
|
|
@ -377,14 +341,14 @@ onMounted(async () => {
|
|||
option-value="id"
|
||||
emit-value
|
||||
map-options
|
||||
@update:model-value="(formFilter.page = 1), fetchList()"
|
||||
@update:model-value="(pagination.page = 1), fetchList()"
|
||||
style="width: 160px"
|
||||
>
|
||||
<template v-if="formFilter.round !== ''" v-slot:append>
|
||||
<q-icon
|
||||
name="cancel"
|
||||
@click.stop.prevent="
|
||||
(formFilter.round = ''), (formFilter.page = 1), fetchList()
|
||||
(formFilter.round = ''), (pagination.page = 1), fetchList()
|
||||
"
|
||||
class="cursor-pointer"
|
||||
/>
|
||||
|
|
@ -411,7 +375,7 @@ onMounted(async () => {
|
|||
ref="filterRef"
|
||||
outlined
|
||||
placeholder="ค้นหา"
|
||||
@keyup.enter="(formFilter.page = 1), fetchList()"
|
||||
@keyup.enter="(pagination.page = 1), fetchList()"
|
||||
>
|
||||
<template v-slot:append>
|
||||
<q-icon name="search" />
|
||||
|
|
@ -434,7 +398,7 @@ onMounted(async () => {
|
|||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<d-table
|
||||
<p-table
|
||||
for="table"
|
||||
ref="table"
|
||||
:columns="columns"
|
||||
|
|
@ -446,22 +410,9 @@ onMounted(async () => {
|
|||
class="custom-header-table"
|
||||
:visible-columns="visibleColumns"
|
||||
:rows-per-page-options="[10, 20, 50, 100]"
|
||||
@update:pagination="updatePageSize"
|
||||
v-model:pagination="pagination"
|
||||
@request="onRequest"
|
||||
>
|
||||
<template v-slot:pagination="scope">
|
||||
ทั้งหมด {{ total }} รายการ
|
||||
<q-pagination
|
||||
v-model="formFilter.page"
|
||||
active-color="primary"
|
||||
color="dark"
|
||||
:max="maxPage"
|
||||
:max-pages="5"
|
||||
size="sm"
|
||||
boundary-links
|
||||
direction-links
|
||||
@update:model-value="updatePage"
|
||||
></q-pagination>
|
||||
</template>
|
||||
<template v-slot:header="props">
|
||||
<q-tr :props="props">
|
||||
<q-th auto-width />
|
||||
|
|
@ -570,21 +521,13 @@ 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'">
|
||||
{{
|
||||
(formFilter.page - 1) * Number(pagination.rowsPerPage) +
|
||||
props.rowIndex +
|
||||
1
|
||||
}}
|
||||
</div>
|
||||
|
||||
<div v-else>
|
||||
<div>
|
||||
{{ col.value ? col.value : "-" }}
|
||||
</div>
|
||||
</q-td>
|
||||
</q-tr>
|
||||
</template>
|
||||
</d-table>
|
||||
</p-table>
|
||||
</div>
|
||||
</q-card>
|
||||
|
||||
|
|
|
|||
|
|
@ -37,7 +37,10 @@ const {
|
|||
findOrgNameHtml,
|
||||
} = useCounterMixin();
|
||||
const { statusText } = useRegistryEmp();
|
||||
const { pagination, params, onRequest } = usePagination("", fetchList);
|
||||
const { pagination, params, onRequest, checkAndUpdatePage } = usePagination(
|
||||
"",
|
||||
fetchList
|
||||
);
|
||||
|
||||
const modalAddEmployee = ref<boolean>(false); // popup เพิ่มข้อมูลลูกจ้างชั่วคราว
|
||||
const modalPos = ref<boolean>(false); //popup กำหนดตำแหน่ง
|
||||
|
|
@ -224,9 +227,7 @@ function onClickDelete(id: string) {
|
|||
await http
|
||||
.delete(config.API.registryNew("-employee") + `/${id}`)
|
||||
.then(async () => {
|
||||
if (rows.value.length === 1 && pagination.value.page > 1) {
|
||||
pagination.value.page = pagination.value.page - 1;
|
||||
}
|
||||
await checkAndUpdatePage(rows.value.length);
|
||||
await fetchList();
|
||||
await success($q, "ลบข้อมูลสำเร็จ");
|
||||
})
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue