fix(registry): sort data
This commit is contained in:
DESKTOP-1R2VSQH\Lenovo ThinkPad E490
parent
8d9059ad32
commit
e3345d7be3
8 changed files with 444 additions and 266 deletions
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue