พัฒนาบุคคล => แสดงรายการทั้งหมด
This commit is contained in:
DESKTOP-1R2VSQH\Lenovo ThinkPad E490
parent
6eebb6c255
commit
9a8f414092
4 changed files with 70 additions and 31 deletions
|
|
@ -1,11 +1,13 @@
|
|||
<script setup lang="ts">
|
||||
import { ref, onMounted, reactive } from "vue";
|
||||
import { ref, onMounted, reactive, watch } from "vue";
|
||||
import { useQuasar, type QTableProps } from "quasar";
|
||||
import http from "@/plugins/http";
|
||||
import config from "@/app.config";
|
||||
import genReportXLSX from "@/plugins/genreportxlsx";
|
||||
import { useRouter } from "vue-router";
|
||||
|
||||
import type { NewPagination } from "@/modules/15_development/interface/index/Main";
|
||||
|
||||
/** importStore*/
|
||||
import { useDevelopmentDataStore } from "@/modules/15_development/store/developmentStore";
|
||||
import { useCounterMixin } from "@/stores/mixin";
|
||||
|
|
@ -21,6 +23,8 @@ const pagination = ref({
|
|||
rowsPerPage: 10,
|
||||
});
|
||||
const maxPage = ref<number>(1);
|
||||
const totalList = ref<number>(0); //จำนวนข้อมูลรายการ
|
||||
|
||||
const formFilter = reactive({
|
||||
root: null,
|
||||
page: 1,
|
||||
|
|
@ -147,8 +151,9 @@ function getData() {
|
|||
http
|
||||
.post(config.API.developmentHistoryList("employee"), formFilter)
|
||||
.then((res) => {
|
||||
console.log(res.data.result.data);
|
||||
const data = res.data.result.data;
|
||||
maxPage.value = Math.ceil(res.data.result.total / formFilter.pageSize);
|
||||
totalList.value = res.data.result.total;
|
||||
rows.value = data.map((item: any) => ({
|
||||
id: item.id ? item.id : null,
|
||||
citizenId: item.citizenId ? item.citizenId : null,
|
||||
|
|
@ -171,6 +176,23 @@ function getData() {
|
|||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* function updatePagination
|
||||
* @param newPagination ข้อมูล Pagination ใหม่
|
||||
*/
|
||||
function updatePagination(newPagination: NewPagination) {
|
||||
formFilter.page = 1;
|
||||
formFilter.pageSize = newPagination.rowsPerPage;
|
||||
}
|
||||
|
||||
/** callbackFunction ทำเมื่อมีการอัปเดท pageSize*/
|
||||
watch(
|
||||
() => formFilter.pageSize,
|
||||
() => {
|
||||
getData();
|
||||
}
|
||||
);
|
||||
|
||||
onMounted(() => {
|
||||
fetchListOrg();
|
||||
});
|
||||
|
|
@ -267,7 +289,7 @@ onMounted(() => {
|
|||
outlined
|
||||
debounce="300"
|
||||
placeholder="ค้นหา"
|
||||
@keydown.enter.prevent="getData()"
|
||||
@keydown.enter.prevent="(formFilter.page = 1), getData()"
|
||||
>
|
||||
<template v-slot:append>
|
||||
<q-icon v-if="formFilter.keyword == ''" name="search" />
|
||||
|
|
@ -316,8 +338,10 @@ onMounted(() => {
|
|||
:visible-columns="visibleColumns"
|
||||
v-model:pagination="pagination"
|
||||
:rows-per-page-options="[10, 25, 50, 100]"
|
||||
@update:pagination="updatePagination"
|
||||
>
|
||||
<template v-slot:pagination="scope">
|
||||
ทั้งหมด {{ totalList }} รายการ
|
||||
<q-pagination
|
||||
v-model="formFilter.page"
|
||||
active-color="primary"
|
||||
|
|
@ -327,6 +351,7 @@ onMounted(() => {
|
|||
size="sm"
|
||||
boundary-links
|
||||
direction-links
|
||||
@update:model-value="getData"
|
||||
></q-pagination>
|
||||
</template>
|
||||
<template v-slot:header="props">
|
||||
|
|
|
|||
|
|
@ -1,11 +1,14 @@
|
|||
<script setup lang="ts">
|
||||
import { ref, onMounted, reactive } from "vue";
|
||||
import { ref, onMounted, reactive, watch } from "vue";
|
||||
import { useRouter } from "vue-router";
|
||||
import { useQuasar, type QTableProps } from "quasar";
|
||||
import http from "@/plugins/http";
|
||||
import config from "@/app.config";
|
||||
import genReportXLSX from "@/plugins/genreportxlsx";
|
||||
|
||||
/**importType*/
|
||||
import type { NewPagination } from "@/modules/15_development/interface/index/Main";
|
||||
|
||||
/** importStore*/
|
||||
import { useDevelopmentDataStore } from "@/modules/15_development/store/developmentStore";
|
||||
import { useCounterMixin } from "@/stores/mixin";
|
||||
|
|
@ -23,6 +26,7 @@ const formFilter = reactive({
|
|||
year: new Date().getFullYear(),
|
||||
});
|
||||
const maxPage = ref<number>(1);
|
||||
const totalList = ref<number>(0); //จำนวนข้อมูลรายการ
|
||||
|
||||
/** use*/
|
||||
const router = useRouter();
|
||||
|
|
@ -110,12 +114,14 @@ const columns = ref<QTableProps["columns"]>([
|
|||
]);
|
||||
|
||||
const agencyOp = ref<[]>([]);
|
||||
|
||||
function fetchListOrg() {
|
||||
showLoader();
|
||||
http
|
||||
.get(config.API.developmentHistoryListOrg("officer", formFilter.year))
|
||||
.then((res) => {
|
||||
formFilter.root = null;
|
||||
formFilter.page = 1;
|
||||
rows.value = [];
|
||||
agencyOp.value = res.data.result;
|
||||
getData();
|
||||
|
|
@ -135,6 +141,8 @@ function getData() {
|
|||
.then((res) => {
|
||||
console.log(res.data.result.data);
|
||||
const data = res.data.result.data;
|
||||
maxPage.value = Math.ceil(res.data.result.total / formFilter.pageSize);
|
||||
totalList.value = res.data.result.total;
|
||||
rows.value = data.map((item: any) => ({
|
||||
id: item.id ? item.id : null,
|
||||
citizenId: item.citizenId ? item.citizenId : null,
|
||||
|
|
@ -181,6 +189,23 @@ function onEdit(id: string) {
|
|||
router.push(`/development/history/${id}`);
|
||||
}
|
||||
|
||||
/**
|
||||
* function updatePagination
|
||||
* @param newPagination ข้อมูล Pagination ใหม่
|
||||
*/
|
||||
function updatePagination(newPagination: NewPagination) {
|
||||
formFilter.page = 1;
|
||||
formFilter.pageSize = newPagination.rowsPerPage;
|
||||
}
|
||||
|
||||
/** callbackFunction ทำเมื่อมีการอัปเดท pageSize*/
|
||||
watch(
|
||||
() => formFilter.pageSize,
|
||||
() => {
|
||||
getData();
|
||||
}
|
||||
);
|
||||
|
||||
onMounted(() => {
|
||||
fetchListOrg();
|
||||
});
|
||||
|
|
@ -275,9 +300,8 @@ onMounted(() => {
|
|||
v-model="formFilter.keyword"
|
||||
ref="filterRef"
|
||||
outlined
|
||||
debounce="300"
|
||||
placeholder="ค้นหา"
|
||||
@keydown.enter.prevent="getData()"
|
||||
@keydown.enter.prevent="(formFilter.page = 1), getData()"
|
||||
>
|
||||
<template v-slot:append>
|
||||
<q-icon v-if="formFilter.keyword == ''" name="search" />
|
||||
|
|
@ -324,8 +348,10 @@ onMounted(() => {
|
|||
:visible-columns="visibleColumns"
|
||||
v-model:pagination="pagination"
|
||||
:rows-per-page-options="[10, 25, 50, 100]"
|
||||
@update:pagination="updatePagination"
|
||||
>
|
||||
<template v-slot:pagination="scope">
|
||||
ทั้งหมด {{ totalList }} รายการ
|
||||
<q-pagination
|
||||
v-model="formFilter.page"
|
||||
active-color="primary"
|
||||
|
|
@ -335,6 +361,7 @@ onMounted(() => {
|
|||
size="sm"
|
||||
boundary-links
|
||||
direction-links
|
||||
@update:model-value="getData"
|
||||
></q-pagination>
|
||||
</template>
|
||||
<template v-slot:header="props">
|
||||
|
|
|
|||
|
|
@ -98,7 +98,8 @@ const formQuery = reactive<FormQueryListProject>({
|
|||
node: null,
|
||||
nodeId: null,
|
||||
});
|
||||
const totalList = ref<number>(1); //จำนวนข้อมูลรายการ
|
||||
const totalList = ref<number>(0); //จำนวนข้อมูลรายการ
|
||||
const totalPage = ref<number>(1);
|
||||
|
||||
/** funciton fetch รายการโครงการ*/
|
||||
function fetchListProject() {
|
||||
|
|
@ -110,7 +111,8 @@ function fetchListProject() {
|
|||
)
|
||||
.then((res) => {
|
||||
const data = res.data.result.data;
|
||||
totalList.value = Math.ceil(res.data.result.total / formQuery.pageSize);
|
||||
totalPage.value = Math.ceil(res.data.result.total / formQuery.pageSize);
|
||||
totalList.value = res.data.result.total;
|
||||
rows.value = data;
|
||||
})
|
||||
.catch((err) => {
|
||||
|
|
@ -499,11 +501,12 @@ onMounted(() => {
|
|||
</q-tr>
|
||||
</template>
|
||||
<template v-slot:pagination="scope">
|
||||
ทั้งหมด {{ totalList }} รายการ
|
||||
<q-pagination
|
||||
v-model="formQuery.page"
|
||||
active-color="primary"
|
||||
color="dark"
|
||||
:max="Number(totalList)"
|
||||
:max="Number(totalPage)"
|
||||
size="sm"
|
||||
boundary-links
|
||||
direction-links
|
||||
|
|
|
|||
|
|
@ -108,26 +108,6 @@ const scholarshipTypeOp = ref<DataOption[]>([
|
|||
name: "ศึกษา ฝึกอบรม ประชุม ดูงาน และปฏิบัติการวิจัย ณ ต่างประเทศ",
|
||||
},
|
||||
]);
|
||||
const itemDownload = ref<ItemsDownload[]>([
|
||||
{
|
||||
label: "ดาวน์โหลด 1",
|
||||
value: "",
|
||||
icon: "mdi-file-pdf-box",
|
||||
color: "green",
|
||||
},
|
||||
{
|
||||
label: "ดาวน์โหลด 2",
|
||||
value: "",
|
||||
icon: "mdi-file-table",
|
||||
color: "red",
|
||||
},
|
||||
{
|
||||
label: "ดาวน์โหลด 3",
|
||||
value: "",
|
||||
icon: "mdi-file-word",
|
||||
color: "blue",
|
||||
},
|
||||
]);
|
||||
|
||||
const formQuery = reactive({
|
||||
page: 1,
|
||||
|
|
@ -137,6 +117,7 @@ const formQuery = reactive({
|
|||
keyword: "",
|
||||
});
|
||||
const totalList = ref<number>(1); //จำนวนข้อมูลรายการ
|
||||
const maxPage = ref<number>(1);
|
||||
|
||||
function fetchList() {
|
||||
showLoader();
|
||||
|
|
@ -147,7 +128,9 @@ function fetchList() {
|
|||
)
|
||||
.then((res) => {
|
||||
const data = res.data.result.data;
|
||||
totalList.value = Math.ceil(res.data.result.total / formQuery.pageSize);
|
||||
maxPage.value = Math.ceil(res.data.result.total / formQuery.pageSize);
|
||||
totalList.value = res.data.result.total;
|
||||
|
||||
rows.value = data;
|
||||
})
|
||||
.catch((err) => {
|
||||
|
|
@ -369,11 +352,12 @@ onMounted(() => {
|
|||
</q-tr>
|
||||
</template>
|
||||
<template v-slot:pagination="scope">
|
||||
ทั้งหมด {{ totalList }} รายการ
|
||||
<q-pagination
|
||||
v-model="formQuery.page"
|
||||
active-color="primary"
|
||||
color="dark"
|
||||
:max="Number(totalList)"
|
||||
:max="Number(maxPage)"
|
||||
size="sm"
|
||||
boundary-links
|
||||
direction-links
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue