fix load Table
This commit is contained in:
DESKTOP-1R2VSQH\Lenovo ThinkPad E490
parent
1ec4a97538
commit
d39753fbde
56 changed files with 684 additions and 978 deletions
|
|
@ -1,19 +1,19 @@
|
|||
<script setup lang="ts">
|
||||
import { ref, onMounted, reactive, watch } from "vue";
|
||||
import { ref, onMounted, reactive } from "vue";
|
||||
import { useRouter } from "vue-router";
|
||||
import { useQuasar } from "quasar";
|
||||
import type { QTableProps } from "quasar";
|
||||
|
||||
import config from "@/app.config";
|
||||
import http from "@/plugins/http";
|
||||
import { useCounterMixin } from "@/stores/mixin";
|
||||
import { useKpiDataStore } from "@/modules/08_KPI/store";
|
||||
|
||||
import type { QTableProps } from "quasar";
|
||||
import type { DataProfile } from "@/interface/Main";
|
||||
import type { PropsTable } from "@/interface/PropsTable";
|
||||
import type {
|
||||
DataOptions,
|
||||
MainListKpi,
|
||||
PaginationType,
|
||||
} from "@/modules/08_KPI/interface/index/Main";
|
||||
import type {
|
||||
RoundKpiResponse,
|
||||
|
|
@ -21,7 +21,6 @@ import type {
|
|||
} from "@/modules/08_KPI/interface/response/index";
|
||||
|
||||
import DialogHeader from "@/components/DialogHeader.vue";
|
||||
import SkeletonTable from "@/components/SkeletonTable.vue";
|
||||
|
||||
const $q = useQuasar();
|
||||
const mixin = useCounterMixin();
|
||||
|
|
@ -107,7 +106,6 @@ const columns = ref<QTableProps["columns"]>([
|
|||
/** List*/
|
||||
const year = ref<number>(new Date().getFullYear());
|
||||
const round = ref<string>("");
|
||||
const filterKeyword = ref<string>("");
|
||||
const roundMainOp = ref<DataOptions[]>([]);
|
||||
const roundDialgOp = ref<DataOptions[]>([]);
|
||||
|
||||
|
|
@ -142,20 +140,18 @@ const formRound = reactive({
|
|||
|
||||
/** pagetion*/
|
||||
const formQuery = reactive({
|
||||
page: 1,
|
||||
pageSize: 10,
|
||||
status: "",
|
||||
results: "",
|
||||
});
|
||||
const total = ref<number>(0);
|
||||
const totalList = ref<number>(1);
|
||||
|
||||
const isRoundClose = ref<boolean>(false);
|
||||
|
||||
const pagination = ref({
|
||||
const pagination = ref<PropsTable.Pagination>({
|
||||
sortBy: "desc",
|
||||
descending: false,
|
||||
page: 1,
|
||||
rowsPerPage: 10,
|
||||
rowsNumber: 0,
|
||||
});
|
||||
|
||||
/**
|
||||
|
|
@ -206,14 +202,12 @@ async function fetchRoundOption(type: string) {
|
|||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* fetch รายการขอรับประเมินผลการปฏิบัติราชการระดับบุคคล
|
||||
*/
|
||||
/** ฟังก์ชันดึงข้อมูลรายการขอรับประเมินผลการปฏิบัติราชการระดับบุคคล*/
|
||||
async function fetchList() {
|
||||
isLoad.value = true;
|
||||
let queryParams = {
|
||||
page: formQuery.page,
|
||||
pageSize: formQuery.pageSize,
|
||||
page: pagination.value.page,
|
||||
pageSize: pagination.value.rowsPerPage,
|
||||
kpiPeriodId: round.value,
|
||||
status: formQuery.status === "" ? undefined : formQuery.status,
|
||||
results: formQuery.results === "" ? undefined : formQuery.results,
|
||||
|
|
@ -225,21 +219,20 @@ async function fetchList() {
|
|||
})
|
||||
.then(async (res) => {
|
||||
const data = await res.data.result;
|
||||
total.value = data.total;
|
||||
totalList.value = Math.ceil(data.total / formQuery.pageSize);
|
||||
pagination.value.rowsNumber = data.total;
|
||||
rows.value = data.data;
|
||||
isLoad.value = false;
|
||||
})
|
||||
.catch((err) => {
|
||||
isLoad.value = false;
|
||||
messageError($q, err);
|
||||
})
|
||||
.finally(() => {});
|
||||
.finally(() => {
|
||||
isLoad.value = false;
|
||||
});
|
||||
}
|
||||
|
||||
/** เลือกรอบการประเมิน */
|
||||
function changRound() {
|
||||
formQuery.page = 1;
|
||||
pagination.value.page = 1;
|
||||
fetchList();
|
||||
}
|
||||
|
||||
|
|
@ -333,15 +326,6 @@ function checkClosed() {
|
|||
isRoundClose.value = formRound.kpiPeriodId.isClosed;
|
||||
}
|
||||
|
||||
/**
|
||||
* function updatePagination
|
||||
* @param newPagination ข้อมูล Pagination ใหม่
|
||||
*/
|
||||
function updatePagination(newPagination: PaginationType) {
|
||||
formQuery.page = 1;
|
||||
formQuery.pageSize = newPagination.rowsPerPage;
|
||||
}
|
||||
|
||||
/** ดึงข้อมูล option */
|
||||
function getOrgOp() {
|
||||
http
|
||||
|
|
@ -421,12 +405,16 @@ function filterOption(val: string, update: Function, refData: string) {
|
|||
}
|
||||
}
|
||||
|
||||
watch(
|
||||
() => formQuery.pageSize,
|
||||
() => {
|
||||
fetchList();
|
||||
}
|
||||
);
|
||||
/**
|
||||
* ฟังก์ชันรับ request จากตาราง เมื่อมีการเปลี่ยน pagination
|
||||
* @param requestProps ข้อมูลการร้องขอจากตาราง
|
||||
*/
|
||||
function onTableRequest(requestProps: PropsTable.RequestProps) {
|
||||
const newPagination = requestProps?.pagination || requestProps;
|
||||
if (!newPagination?.page || !newPagination?.rowsPerPage) return;
|
||||
pagination.value = { ...newPagination };
|
||||
fetchList();
|
||||
}
|
||||
|
||||
onMounted(async () => {
|
||||
await Promise.all([fetchRoundOption("main"), getOrgOp()]);
|
||||
|
|
@ -462,7 +450,7 @@ onMounted(async () => {
|
|||
year-picker
|
||||
:enableTimePicker="false"
|
||||
@update:model-value="
|
||||
(formQuery.page = 1), fetchRoundOption('main')
|
||||
(pagination.page = 1), fetchRoundOption('main')
|
||||
"
|
||||
>
|
||||
<template #year="{ year }">{{ year + 543 }}</template>
|
||||
|
|
@ -557,7 +545,7 @@ onMounted(async () => {
|
|||
outlined
|
||||
use-input
|
||||
input-debounce="0"
|
||||
@update:model-value="(formQuery.page = 1), fetchList()"
|
||||
@update:model-value="(pagination.page = 1), fetchList()"
|
||||
:clearable="formQuery.status !== ''"
|
||||
@clear="
|
||||
(formQuery.status = ''),
|
||||
|
|
@ -589,7 +577,7 @@ onMounted(async () => {
|
|||
lazy-rules
|
||||
hide-bottom-space
|
||||
outlined
|
||||
@update:model-value="(formQuery.page = 1), fetchList()"
|
||||
@update:model-value="(pagination.page = 1), fetchList()"
|
||||
use-input
|
||||
@clear="
|
||||
(formQuery.results = ''),
|
||||
|
|
@ -615,11 +603,9 @@ onMounted(async () => {
|
|||
|
||||
<div class="col-12">
|
||||
<d-table
|
||||
v-if="!isLoad"
|
||||
ref="table"
|
||||
:columns="columns"
|
||||
:rows="rows"
|
||||
:filter="filterKeyword"
|
||||
row-key="id"
|
||||
flat
|
||||
bordered
|
||||
|
|
@ -627,8 +613,9 @@ onMounted(async () => {
|
|||
dense
|
||||
:rows-per-page-options="[10, 25, 50, 100]"
|
||||
:visible-columns="visibleColumns"
|
||||
@request="onTableRequest"
|
||||
v-model:pagination="pagination"
|
||||
@update:pagination="updatePagination"
|
||||
:loading="isLoad"
|
||||
>
|
||||
<template v-slot:header="props">
|
||||
<q-tr :props="props">
|
||||
|
|
@ -671,22 +658,7 @@ onMounted(async () => {
|
|||
</q-card>
|
||||
</div>
|
||||
</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>
|
||||
<SkeletonTable v-else :columns="columns" />
|
||||
</div>
|
||||
</div>
|
||||
</q-card>
|
||||
|
|
@ -746,7 +718,7 @@ onMounted(async () => {
|
|||
|
||||
<div class="col-12">
|
||||
<q-select
|
||||
v-if="!isLoadDialog"
|
||||
v-if="!isLoadDialog"
|
||||
:readonly="yearDialog === null"
|
||||
v-model="formRound.kpiPeriodId"
|
||||
outlined
|
||||
|
|
@ -760,7 +732,7 @@ onMounted(async () => {
|
|||
:rules="[(val:DataOptions) => !!val.id || `${'กรุณาเลือกรอบการประเมิน'}`]"
|
||||
@update:model-value="checkClosed"
|
||||
/>
|
||||
<q-skeleton type="QInput" height="40px" v-else/>
|
||||
<q-skeleton type="QInput" height="40px" v-else />
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<script setup lang="ts">
|
||||
import { ref, onMounted, watch } from "vue";
|
||||
import { ref, onMounted } from "vue";
|
||||
import { useRouter } from "vue-router";
|
||||
import { useQuasar } from "quasar";
|
||||
import type { QTableProps } from "quasar";
|
||||
|
|
@ -9,10 +9,7 @@ import http from "@/plugins/http";
|
|||
import { useCounterMixin } from "@/stores/mixin";
|
||||
import { useKpiDataStore } from "@/modules/08_KPI/store";
|
||||
|
||||
import type {
|
||||
DataOptions,
|
||||
Pagination,
|
||||
} from "@/modules/08_KPI/interface/index/Main";
|
||||
import type { DataOptions } from "@/modules/08_KPI/interface/index/Main";
|
||||
import type {
|
||||
ResRound,
|
||||
ResEvaluatorAssessor,
|
||||
|
|
@ -24,7 +21,7 @@ import TabOther from "@/modules/08_KPI/components/Evaluator/02_TabOther.vue";
|
|||
const $q = useQuasar();
|
||||
const router = useRouter();
|
||||
const store = useKpiDataStore();
|
||||
const { showLoader, hideLoader, messageError, date2Thai } = useCounterMixin();
|
||||
const { messageError, date2Thai } = useCounterMixin();
|
||||
|
||||
const dataListMain = ref<ResEvaluatorAssessor[]>([]);
|
||||
|
||||
|
|
@ -87,7 +84,6 @@ const columns = ref<QTableProps["columns"]>([
|
|||
]);
|
||||
|
||||
const totalList = ref<number>(0);
|
||||
const maxPage = ref<number>(1);
|
||||
|
||||
/**
|
||||
* ดึงข้อมูลรายการขอรับประเมินผลการปฏิบัติราชการระดับบุคคล
|
||||
|
|
@ -121,19 +117,19 @@ async function fetchRoundOption() {
|
|||
store.formQuery.round = roundOp.value[0].id;
|
||||
await fetchList();
|
||||
}
|
||||
isLoadOp.value = false;
|
||||
})
|
||||
.catch((err) => {
|
||||
messageError($q, err);
|
||||
isLoadOp.value = false;
|
||||
})
|
||||
.finally(() => {});
|
||||
.finally(() => {
|
||||
isLoadOp.value = false;
|
||||
});
|
||||
}
|
||||
|
||||
/** ดึงข้อมูล list */
|
||||
const isLoad = ref<boolean>(false)
|
||||
const isLoad = ref<boolean>(false);
|
||||
async function fetchList() {
|
||||
isLoad.value = true
|
||||
isLoad.value = true;
|
||||
const body = {
|
||||
page: store.formQuery.page,
|
||||
pageSize: store.formQuery.pageSize,
|
||||
|
|
@ -157,16 +153,15 @@ async function fetchList() {
|
|||
.post(config.API.kpiEvaluation + `/admin`, body)
|
||||
.then(async (res) => {
|
||||
const data = await res.data.result;
|
||||
maxPage.value = Math.ceil(data.total / store.formQuery.pageSize);
|
||||
totalList.value = data.total;
|
||||
dataListMain.value = data.data;
|
||||
isLoad.value = false
|
||||
})
|
||||
.catch((err) => {
|
||||
messageError($q, err);
|
||||
isLoad.value = false
|
||||
})
|
||||
.finally(() => {});
|
||||
.finally(() => {
|
||||
isLoad.value = false;
|
||||
});
|
||||
}
|
||||
|
||||
/** เลือกรอบการประเมิน */
|
||||
|
|
@ -175,15 +170,6 @@ function changRound() {
|
|||
fetchList();
|
||||
}
|
||||
|
||||
/**
|
||||
* function updatePagination
|
||||
* @param newPagination ข้อมูล Pagination ใหม่
|
||||
*/
|
||||
function updatePagination(newPagination: Pagination) {
|
||||
store.formQuery.page = 1;
|
||||
store.formQuery.pageSize = newPagination.rowsPerPage;
|
||||
}
|
||||
|
||||
/** เปลี่ยน tab */
|
||||
async function onChangTab() {
|
||||
store.formQuery.page = 1;
|
||||
|
|
@ -192,13 +178,6 @@ async function onChangTab() {
|
|||
await fetchList();
|
||||
}
|
||||
|
||||
watch(
|
||||
() => store.formQuery.pageSize,
|
||||
() => {
|
||||
fetchList();
|
||||
}
|
||||
);
|
||||
|
||||
onMounted(async () => {
|
||||
await fetchRoundOption();
|
||||
});
|
||||
|
|
@ -347,8 +326,6 @@ onMounted(async () => {
|
|||
:rows="dataListMain"
|
||||
:formQuery="store.formQuery"
|
||||
:total="totalList"
|
||||
:maxPage="maxPage"
|
||||
:updatePagination="updatePagination"
|
||||
:fetchList="fetchList"
|
||||
:is-load="isLoad"
|
||||
/>
|
||||
|
|
@ -361,8 +338,6 @@ onMounted(async () => {
|
|||
:rows="dataListMain"
|
||||
:formQuery="store.formQuery"
|
||||
:total="totalList"
|
||||
:maxPage="maxPage"
|
||||
:updatePagination="updatePagination"
|
||||
:fetchList="fetchList"
|
||||
:is-load="isLoad"
|
||||
/>
|
||||
|
|
@ -375,8 +350,6 @@ onMounted(async () => {
|
|||
:rows="dataListMain"
|
||||
:formQuery="store.formQuery"
|
||||
:total="totalList"
|
||||
:maxPage="maxPage"
|
||||
:updatePagination="updatePagination"
|
||||
:fetchList="fetchList"
|
||||
:is-load="isLoad"
|
||||
/>
|
||||
|
|
@ -389,8 +362,6 @@ onMounted(async () => {
|
|||
:rows="dataListMain"
|
||||
:formQuery="store.formQuery"
|
||||
:total="totalList"
|
||||
:maxPage="maxPage"
|
||||
:updatePagination="updatePagination"
|
||||
:fetchList="fetchList"
|
||||
:is-load="isLoad"
|
||||
/>
|
||||
|
|
@ -403,8 +374,6 @@ onMounted(async () => {
|
|||
:rows="dataListMain"
|
||||
:formQuery="store.formQuery"
|
||||
:total="totalList"
|
||||
:maxPage="maxPage"
|
||||
:updatePagination="updatePagination"
|
||||
:fetchList="fetchList"
|
||||
:is-load="isLoad"
|
||||
/>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue