hrms-bangkok/hrms-mgt
7
0
Fork 0
Code Issues Pull requests Projects Releases Packages 1 Wiki Activity Actions

fix(registry): sort data

Browse source
This commit is contained in:
DESKTOP-1R2VSQH\Lenovo ThinkPad E490 2025-09-23 17:24:54 +07:00
parent 8d9059ad32
commit e3345d7be3
8 changed files with 444 additions and 266 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -6,6 +6,7 @@ import { useRoute } from "vue-router";
import { checkPermission } from "@/utils/permissions";
import { useCounterMixin } from "@/stores/mixin";
import { useResultsPerformDataStore } from "@/modules/04_registryPerson/stores/ResultsPerformance";
import { usePagination } from "@/composables/usePagination";
import http from "@/plugins/http";
import config from "@/app.config";
@ -24,6 +25,9 @@ const $q = useQuasar();
const route = useRoute();
const store = useResultsPerformDataStore();
const { textRangePoint, textPoint } = store;
const { pagination, params, onRequest } = usePagination("", () =>
getDevelop(true)
);
const mixin = useCounterMixin();
const {
date2Thai,
@ -61,15 +65,6 @@ const isLeave = defineModel<boolean>("isLeave", {
required: true,
});
const totalIdp = ref<number>(0);
const totalListIdp = ref<number>(1);
const paginationIdp = ref({
sortBy: "createdAt",
descending: true,
page: 1,
rowsPerPage: 10,
});
const resPerformForm = reactive<RequestItemsObject>({
name: "",
point1Total: 0, //ส่วนที่1 (น้ำหนัก)
@ -273,9 +268,6 @@ const columns = ref<QTableColumn[]>(
const visibleColumns = ref<string[]>(
baseVisibleColumns.value.filter((e: string) => e !== "lastUpdateFullName")
);
const pagination = ref({
sortBy: "lastUpdatedAt",
});
//Table การพัฒนารายบุคคล (Individual Development Plan)
const rowsPlan = ref<any[]>([]);
@ -295,12 +287,10 @@ const columnsPlan = ref<QTableColumn[]>([
name: "name",
align: "left",
label: "ความรู้/ทักษะ/สมรรถนะที่ต้องได้รับการพัฒนา",
sortable: false,
sortable: true,
field: "name",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "developmentProjects",
@ -310,44 +300,36 @@ const columnsPlan = ref<QTableColumn[]>([
field: "developmentProjects",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "developmentTarget",
align: "left",
label: "เป้าหมายการพัฒนา",
sortable: false,
sortable: true,
field: "developmentTarget",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "developmentResults",
align: "left",
label: "วิธีการวัดผลการพัฒนา",
sortable: false,
sortable: true,
field: "developmentResults",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "developmentReport",
align: "left",
label: "รายงานผลการพัฒนา",
sortable: false,
sortable: true,
field: "developmentReport",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
]);
const visibleColumnsPlan = ref<String[]>([
const visibleColumnsPlan = ref<string[]>([
"no",
"name",
"developmentProjects",
@ -357,8 +339,6 @@ const visibleColumnsPlan = ref<String[]>([
]);
//Table ประวัติแก้ไข
const rowsHistory = ref<ResponseObject[]>([]);
const rowsHistoryMain = ref<ResponseObject[]>([]);
const historyId = ref<string>("");
const columnsHistory = ref<QTableColumn[]>(baseColumns.value);
const visibleColumnsHistory = ref<string[]>(baseVisibleColumns.value);
@ -378,8 +358,8 @@ async function fetchData() {
rowsMain.value = res.data.result;
} catch (error) {
messageError($q, error);
hideLoader();
} finally {
hideLoader();
}
}
@ -387,29 +367,25 @@ async function fetchData() {
async function getDevelop(isLoad?: boolean) {
if (!profileId.value) return;
isLoad && showLoader();
const queryParams = {
...params.value,
searchKeyword: filterSearchPlan.value.trim(),
};
await http
.get(
config.API.developMentPlan(empType.value) +
`/${profileId.value}?page=${paginationIdp.value.page}&pageSize=${
paginationIdp.value.rowsPerPage
}&searchKeyword=${filterSearchPlan.value.trim()}
`
)
.get(config.API.developMentPlan(empType.value) + `/${profileId.value}`, {
params: queryParams,
})
.then((res) => {
const data = res.data.result.data;
totalListIdp.value = Math.ceil(
res.data.result.total / paginationIdp.value.rowsPerPage
);
totalIdp.value = res.data.result.total;
rowsPlan.value = data;
isLoad && hideLoader();
const data = res.data.result;
pagination.value.rowsNumber = data.total;
rowsPlan.value = data.data;
})
.catch((e) => {
messageError($q, e);
hideLoader();
})
.finally(() => {});
.finally(() => {
isLoad && hideLoader();
});
}
/**
@ -531,11 +507,6 @@ function openDialogDevelop(data: any) {
typeIDP.value = data.type;
}
function updatePaginationIdp(newPagination: any) {
paginationIdp.value.page = 1;
paginationIdp.value.rowsPerPage = newPagination.rowsPerPage;
}
function serchDataTable() {
rows.value = onSearchDataTable(
filterSearch.value,
@ -544,13 +515,6 @@ function serchDataTable() {
);
}
watch(
() => paginationIdp.value.rowsPerPage,
async () => {
await getDevelop(true);
}
);
onMounted(async () => {
await fetchData();
empType.value !== "-temp" && (await getDevelop());
@ -647,7 +611,6 @@ onMounted(async () => {
bordered
:rows="rows"
:columns="columns"
v-model:pagination="pagination"
:grid="modeView === 'card'"
:visible-columns="visibleColumns"
>
@ -769,9 +732,7 @@ onMounted(async () => {
ref="filterPlanRef"
outlined
placeholder="ค้นหา"
@keydown.enter.prevent="
(paginationIdp.page = 1), getDevelop(true)
"
@keydown.enter.prevent="(pagination.page = 1), getDevelop(true)"
>
<template v-slot:append>
<q-icon name="search" />
@ -825,7 +786,7 @@ onMounted(async () => {
</div>
<div class="col-12">
<d-table
<p-table
flat
dense
bordered
@ -837,23 +798,9 @@ onMounted(async () => {
:card-container-class="
modeViewPlan === 'card' ? 'q-col-gutter-md' : ''
"
@update:pagination="updatePaginationIdp"
@request="onRequest"
v-model:pagination="pagination"
>
<template v-slot:pagination="scope">
ทั้งหมด {{ totalIdp.toLocaleString() }} รายการ
<q-pagination
v-model="paginationIdp.page"
active-color="primary"
color="dark"
:max="Number(totalListIdp)"
size="sm"
boundary-links
direction-links
:max-pages="5"
@update:model-value="getDevelop"
></q-pagination>
</template>
<template v-slot:header="props">
<q-tr :props="props">
<q-th auto-width />
@ -880,11 +827,7 @@ onMounted(async () => {
>
<q-td v-for="col in props.cols" :key="col.name" :props="props">
<div v-if="col.name == 'no'">
{{
(paginationIdp.page - 1) * paginationIdp.rowsPerPage +
props.rowIndex +
1
}}
{{ props.rowIndex + 1 }}
</div>
<div v-else-if="col.name == 'developmentProjects'">
<div class="column">
@ -996,7 +939,7 @@ onMounted(async () => {
</q-card>
</div>
</template>
</d-table>
</p-table>
</div>
</q-card>
</div>

66
src/modules/04_registryPerson/components/requestEdit/01_TabInformation.vue
View file

@ -1,10 +1,11 @@
<script setup lang="ts">
import { ref, onMounted, watch } from "vue";
import { ref, onMounted } from "vue";
import { useQuasar } from "quasar";
import { useRequestEditStore } from "@/modules/04_registryPerson/stores/RequestEdit";
import { useCounterMixin } from "@/stores/mixin";
import { useRouter, useRoute } from "vue-router";
import { usePagination } from "@/composables/usePagination";
import config from "@/app.config";
import http from "@/plugins/http";
@ -12,7 +13,6 @@ import http from "@/plugins/http";
import type { QTableProps } from "quasar";
import type {
DataOption,
Pagination,
Request,
} from "@/modules/04_registryPerson/interface/index/Main";
import type { DataRequest } from "@/modules/04_registryPerson/interface/response/Main";
@ -22,14 +22,11 @@ const router = useRouter();
const route = useRoute();
const store = useRequestEditStore();
const { showLoader, hideLoader, messageError, date2Thai } = useCounterMixin();
const { pagination, params, onRequest } = usePagination("", fetchListRequset);
const routerName = ref<string>(route.name as string);
//Table
const rows = ref<DataRequest[]>([]); //รายการข้อมูลคำร้องขอแก้ไขทะเบียนประวัติ
const page = ref<number>(1); //หน้า
const pageSize = ref<number>(10); //จำนวนต่อหน้า
const rowsTotal = ref<number>(0); //จำนวนรายการ
const maxPage = ref<number>(0); //จำนวนหน้า
const columns = ref<QTableProps["columns"]>([
{
name: "createdAt",
@ -45,7 +42,7 @@ const columns = ref<QTableProps["columns"]>([
name: "fullname",
align: "left",
label: "ชื่อ-นามสกุล",
sortable: false,
sortable: true,
field: "fullname",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
@ -54,7 +51,7 @@ const columns = ref<QTableProps["columns"]>([
name: "topic",
align: "left",
label: "ชื่อเรื่อง",
sortable: false,
sortable: true,
field: "topic",
format: (v) => (v ? v : "-"),
headerStyle: "font-size: 14px",
@ -64,7 +61,7 @@ const columns = ref<QTableProps["columns"]>([
name: "detail",
align: "left",
label: "รายละเอียด",
sortable: false,
sortable: true,
field: "detail",
format: (v) => (v ? v : "-"),
headerStyle: "font-size: 14px",
@ -84,7 +81,7 @@ const columns = ref<QTableProps["columns"]>([
name: "remark",
align: "left",
label: "หมายเหตุ",
sortable: false,
sortable: true,
field: "remark",
format: (v) => (v ? v : "-"),
headerStyle: "font-size: 14px",
@ -116,8 +113,7 @@ async function fetchListRequset() {
) + `admin`,
{
params: {
page: page.value,
pageSize: pageSize.value,
...params.value,
status: status.value,
keyword: keyword.value.trim(),
},
@ -125,8 +121,7 @@ async function fetchListRequset() {
)
.then((res) => {
const data = res.data.result;
maxPage.value = Math.ceil(data.total / pageSize.value);
rowsTotal.value = data.total;
pagination.value.rowsNumber = data.total;
rows.value = data.data;
})
.catch((err) => {
@ -139,7 +134,7 @@ async function fetchListRequset() {
/** function เลือกสถานะคำร้อง*/
function updateStatusValue() {
page.value = 1;
pagination.value.page = 1;
// fetch รายการคำร้องขอแก้ไขทะเบียนประวัติ
fetchListRequset();
}
@ -177,26 +172,6 @@ function onclickEdit(data: Request) {
}
}
/**
* function เลือกแถวต่อหน้า
* @param newPagination
*/
function updatePageSizePagination(newPagination: Pagination) {
page.value = 1;
pageSize.value = newPagination.rowsPerPage;
}
/**
* ดูการเปลี่ยนแปลงของ pageSize
* เมื่อมีการเปลี่ยนแปลงจำทำการ ดึงช้อมูลรายการคำร้องขอแก้ไขทะเบียนประวัติตามจำนวน pageSize
*/
watch(
() => pageSize.value,
() => {
fetchListRequset();
}
);
/** HooK lifecycle ทำงานเมื่อมีการเรียกใช้งาน Componenets */
onMounted(() => {
fetchListRequset();
@ -265,14 +240,15 @@ onMounted(() => {
</div>
<div class="col-12">
<d-table
<p-table
:columns="columns"
:rows="rows"
row-key="id"
:rows-per-page-options="[10, 25, 50, 100]"
:paging="true"
:visible-columns="visibleColumns"
@update:pagination="updatePageSizePagination"
@request="onRequest"
v-model:pagination="pagination"
>
<template v-slot:header="props">
<q-tr :props="props">
@ -302,21 +278,7 @@ onMounted(() => {
</q-td>
</q-tr>
</template>
<template v-slot:pagination="scope">
ทั้งหมด {{ rowsTotal.toLocaleString() }} รายการ
<q-pagination
v-model="page"
active-color="primary"
color="dark"
:max="Number(maxPage)"
:max-pages="5"
size="sm"
boundary-links
direction-links
@update:model-value="fetchListRequset()"
></q-pagination>
</template>
</d-table>
</p-table>
</div>
</q-card>
</template>

77
src/modules/04_registryPerson/components/requestEdit/02_TabIDP.vue
View file

@ -1,17 +1,18 @@
<script setup lang="ts">
import { ref, onMounted, watch } from "vue";
import { ref, onMounted, } from "vue";
import { useRoute, useRouter } from "vue-router";
import { useQuasar } from "quasar";
import { useCounterMixin } from "@/stores/mixin";
import { useRequestEditStore } from "@/modules/04_registryPerson/stores/RequestEdit";
import { usePagination } from "@/composables/usePagination";
import config from "@/app.config";
import http from "@/plugins/http";
import type { QTableProps } from "quasar";
import type {
DataOption,
Pagination,
} from "@/modules/04_registryPerson/interface/index/Main";
import type { DataListsIDP } from "@/modules/04_registryPerson/interface/response/Main";
@ -22,6 +23,7 @@ const route = useRoute();
const store = useRequestEditStore();
const { showLoader, hideLoader, messageError, date2Thai } = useCounterMixin();
const routerName = ref<string>(route.name as string);
const { pagination, params, onRequest } = usePagination("", fetchData);
//ตัวแปร
const status = ref<string>("PENDING"); //ค้นหาตามสถานะ
const keyword = ref<string>(""); //คำค้นหา
@ -29,16 +31,12 @@ const statusOption = ref<DataOption[]>(store.optionStatusIDP); //รายกา
//Table
const rows = ref<DataListsIDP[]>([]); //รายการข้อมูลการพัฒนารายบุคคล
const page = ref<number>(1); //หน้า
const pageSize = ref<number>(10); //จำนวนต่อหน้า
const rowsTotal = ref<number>(0); //จำนวนรายการ
const maxPage = ref<number>(0); //จำนวนหน้า
const columns = ref<QTableProps["columns"]>([
{
name: "createdAt",
align: "left",
label: "วันที่ยื่นขอ",
sortable: false,
sortable: true,
field: "createdAt",
format: (v) => (v ? date2Thai(v, false, true) : "-"),
headerStyle: "font-size: 14px",
@ -48,7 +46,7 @@ const columns = ref<QTableProps["columns"]>([
name: "createdFullName",
align: "left",
label: "ผู้ยื่นขอ",
sortable: false,
sortable: true,
field: "createdFullName",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
@ -57,7 +55,7 @@ const columns = ref<QTableProps["columns"]>([
name: "name",
align: "left",
label: "ความรู้/ทักษะ/สมรรถนะที่ต้องได้รับการพัฒนา",
sortable: false,
sortable: true,
field: "name",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
@ -75,7 +73,7 @@ const columns = ref<QTableProps["columns"]>([
name: "developmentTarget",
align: "left",
label: "เป้าหมายการพัฒนา",
sortable: false,
sortable: true,
field: "developmentTarget",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
@ -84,7 +82,7 @@ const columns = ref<QTableProps["columns"]>([
name: "developmentResults",
align: "left",
label: "วิธีการวัดผลการพัฒนา",
sortable: false,
sortable: true,
field: "developmentResults",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
@ -93,7 +91,7 @@ const columns = ref<QTableProps["columns"]>([
name: "developmentReport",
align: "left",
label: "รายงานผลการพัฒนา",
sortable: false,
sortable: true,
field: "developmentReport",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
@ -121,7 +119,7 @@ const columns = ref<QTableProps["columns"]>([
name: "reason",
align: "left",
label: "หมายเหตุ",
sortable: false,
sortable: true,
field: "reason",
format: (v) => (v ? v : "-"),
headerStyle: "font-size: 14px",
@ -151,17 +149,15 @@ async function fetchData() {
) + `admin`,
{
params: {
page: page.value,
pageSize: pageSize.value,
...params.value,
status: status.value ? status.value : "",
keyword: keyword.value,
keyword: keyword.value.trim(),
},
}
)
.then(async (res) => {
const data = await res.data.result;
maxPage.value = Math.ceil(data.total / pageSize.value);
rowsTotal.value = data.total;
pagination.value.rowsNumber = data.total;
rows.value = data.data;
})
.catch((err) => {
@ -174,7 +170,7 @@ async function fetchData() {
/** function เลือกสถานะคำร้อง */
function updateStatusValue() {
page.value = 1;
pagination.value.page = 1;
// fetch รายการคำร้องขอแก้ไขทะเบียนประวัติ
fetchData();
}
@ -199,16 +195,7 @@ function filterOption(val: string, update: Function) {
}
/**
* function เลือกแถวต่อหน้า
* @param newPagination
*/
function updatePageSizePagination(newPagination: Pagination) {
page.value = 1;
pageSize.value = newPagination.rowsPerPage;
}
/**
* funciton แก่ไขคำร้อง
* function แก้ไขคำร้อง
* @param id รายการคำร้อง
*/
function onclickEdit(id: string) {
@ -266,17 +253,6 @@ async function downloadUrl(id: string, fileName: string) {
});
}
/**
* ดูการเปลี่ยนแปลงของ pageSize
* เมื่อมีการเปลี่ยนแปลงจำทำการ ดึงช้อมูลรายการคำร้องขอแก้ไขทะเบียนประวัติตามจำนวน pageSize
*/
watch(
() => pageSize.value,
() => {
fetchData();
}
);
/** HooK lifecycle ทำงานเมื่อมีการเรียกใช้งาน Componenets */
onMounted(() => {
props.isIdp && fetchData();
@ -344,14 +320,15 @@ onMounted(() => {
</div>
<div class="col-12">
<d-table
<p-table
:columns="columns"
:rows="rows"
row-key="id"
:rows-per-page-options="[10, 25, 50, 100]"
:paging="true"
:visible-columns="visibleColumns"
@update:pagination="updatePageSizePagination"
@request="onRequest"
v-model:pagination="pagination"
>
<template v-slot:header="props">
<q-tr :props="props">
@ -413,21 +390,7 @@ onMounted(() => {
</q-td>
</q-tr>
</template>
<template v-slot:pagination="scope">
ทั้งหมด {{ rowsTotal.toLocaleString() }} รายการ
<q-pagination
v-model="page"
active-color="primary"
color="dark"
:max="Number(maxPage)"
:max-pages="5"
size="sm"
boundary-links
direction-links
@update:model-value="fetchData"
></q-pagination>
</template>
</d-table>
</p-table>
</div>
</q-card>
</template>