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

fix load Table

Browse source
This commit is contained in:
DESKTOP-1R2VSQH\Lenovo ThinkPad E490 2025-08-29 13:45:33 +07:00
parent 1ec4a97538
commit d39753fbde
56 changed files with 684 additions and 978 deletions
Download patch file Download diff file Expand all files Collapse all files

65
src/modules/08_KPI/components/Evaluator/01_TabAll.vue
View file

@ -1,18 +1,17 @@
<script setup lang="ts">
import { ref } from "vue";
import { ref, watch } from "vue";
import { useRouter } from "vue-router";
import type { QTableProps } from "quasar";
import { useKpiDataStore } from "@/modules/08_KPI/store";
import type { PropsTable } from "@/interface/PropsTable";
import type { ResEvaluatorAssessor } from "@/modules/08_KPI/interface/response/index";
import type { FormQuery } from "@/modules/08_KPI/interface/request/index";
import SkeletonTable from "@/components/SkeletonTable.vue";
const store = useKpiDataStore();
const router = useRouter();
const isLoad = defineModel<boolean>('isLoad',{required:true})
const isLoad = defineModel<boolean>("isLoad", { required: true });
const visibleColumns = defineModel<string[]>("visibleColumns", {
required: true,
});
@ -22,30 +21,53 @@ const columns = defineModel<QTableProps["columns"]>("columns", {
const rows = defineModel<ResEvaluatorAssessor[]>("rows", { required: true });
const formQuery = defineModel<FormQuery>("formQuery", { required: true });
const total = defineModel<number>("total", { required: true });
const maxPage = defineModel<number>("maxPage", { required: true });
const props = defineProps({
updatePagination: { type: Function },
fetchList: { type: Function },
});
const pagination = ref({
const pagination = ref<PropsTable.Pagination>({
sortBy: "desc",
descending: false,
page: 1,
rowsPerPage: 10,
page: formQuery.value.page,
rowsPerPage: formQuery.value.pageSize,
rowsNumber: total.value,
});
async function redirectViewDetail(id: string) {
store.tabMain = await "";
store.tabMain = "";
router.push(`/KPI-evaluator/${id}`);
}
/**
* ฟังก์ชันรับ request จากตาราง เมื่อมีการเปลี่ยน pagination
* @param requestProps ข้อมูลการร้องขอจากตาราง
*/
function onTableRequest(requestProps: PropsTable.RequestProps) {
const newPagination = requestProps?.pagination || requestProps;
if (!newPagination?.page || !newPagination?.rowsPerPage) return;
formQuery.value.page = newPagination.page;
formQuery.value.pageSize = newPagination.rowsPerPage;
props?.fetchList?.();
}
watch(
[
() => formQuery.value.page,
() => formQuery.value.pageSize,
() => total.value,
],
([page, pageSize, total]) => {
pagination.value.page = page;
pagination.value.rowsPerPage = pageSize;
pagination.value.rowsNumber = total;
}
);
</script>
<template>
<div class="col-12">
<d-table
v-if="!isLoad"
ref="table"
:columns="columns"
:rows="rows"
@ -54,11 +76,11 @@ async function redirectViewDetail(id: string) {
bordered
:paging="true"
dense
class="custom-table2"
:rows-per-page-options="[10, 25, 50, 100]"
:rows-per-page-options="[1, 10, 25, 50, 100]"
:visible-columns="visibleColumns"
v-model:pagination="pagination"
@update:pagination="props.updatePagination"
@request="onTableRequest"
:loading="isLoad"
>
<template v-slot:header="props">
<q-tr :props="props">
@ -109,22 +131,7 @@ async function redirectViewDetail(id: string) {
</q-card>
</div>
</template>
<template v-slot:pagination="scope">
ทั้งหมด {{ total }} รายการ
<q-pagination
v-model="formQuery.page"
active-color="primary"
color="dark"
:max="Number(maxPage)"
size="sm"
boundary-links
direction-links
:max-pages="5"
@update:model-value="props.fetchList?.()"
></q-pagination>
</template>
</d-table>
<SkeletonTable v-else :columns="columns"/>
</div>
</template>

68
src/modules/08_KPI/components/Evaluator/02_TabOther.vue
View file

@ -1,6 +1,6 @@
<script setup lang="ts">
import { ref } from "vue";
import { useQuasar } from "quasar";
import { ref, watch } from "vue";
import { Loading, useQuasar } from "quasar";
import { useRouter } from "vue-router";
import type { QTableProps } from "quasar";
@ -9,11 +9,10 @@ import http from "@/plugins/http";
import { useCounterMixin } from "@/stores/mixin";
import { useKpiDataStore } from "@/modules/08_KPI/store";
import type { PropsTable } from "@/interface/PropsTable";
import type { FormQuery } from "@/modules/08_KPI/interface/request/index";
import type { ResEvaluatorAssessor } from "@/modules/08_KPI/interface/response/index";
import SkeletonTable from "@/components/SkeletonTable.vue";
const $q = useQuasar();
const router = useRouter();
const store = useKpiDataStore();
@ -35,25 +34,24 @@ const columns = defineModel<QTableProps["columns"]>("columns", {
const rows = defineModel<ResEvaluatorAssessor[]>("rows", { required: true });
const formQuery = defineModel<FormQuery>("formQuery", { required: true });
const total = defineModel<number>("total", { required: true });
const maxPage = defineModel<number>("maxPage", { required: true });
const isLoad = defineModel<boolean>("isLoad", { required: true });
const props = defineProps({
updatePagination: { type: Function },
fetchList: { type: Function },
});
const pagination = ref<PropsTable.Pagination>({
sortBy: "desc",
descending: false,
page: formQuery.value.page,
rowsPerPage: formQuery.value.pageSize,
rowsNumber: total.value,
});
function redirectViewDetail(id: string) {
router.push(`/KPI-evaluator/${id}`);
}
const pagination = ref({
sortBy: "desc",
descending: false,
page: 1,
rowsPerPage: 10,
});
async function onClickApprove(type: string = "") {
if (store.selected.length !== 0) {
const userIds = await store.selected.map(
@ -107,12 +105,36 @@ async function onClickApprove(type: string = "") {
dialogMessageNotify($q, "เลือกอย่างน้อย 1 รายการ");
}
}
/**
* ฟังก์ชันรับ request จากตาราง เมื่อมีการเปลี่ยน pagination
* @param requestProps ข้อมูลการร้องขอจากตาราง
*/
function onTableRequest(requestProps: PropsTable.RequestProps) {
const newPagination = requestProps?.pagination || requestProps;
if (!newPagination?.page || !newPagination?.rowsPerPage) return;
formQuery.value.page = newPagination.page;
formQuery.value.pageSize = newPagination.rowsPerPage;
props?.fetchList?.();
}
watch(
[
() => formQuery.value.page,
() => formQuery.value.pageSize,
() => total.value,
],
([page, pageSize, total]) => {
pagination.value.page = page;
pagination.value.rowsPerPage = pageSize;
pagination.value.rowsNumber = total;
}
);
</script>
<template>
<div class="col-12">
<d-table
v-if="!isLoad"
ref="table"
:columns="columns"
:rows="rows"
@ -124,13 +146,14 @@ async function onClickApprove(type: string = "") {
:rows-per-page-options="[10, 25, 50, 100]"
:visible-columns="visibleColumns"
v-model:pagination="pagination"
@update:pagination="props.updatePagination"
:selection="
store.tabMainevaluator === '5' || store.tabMainevaluator === '6'
? 'none'
: 'multiple'
"
v-model:selected="store.selected"
@request="onTableRequest"
:loading="isLoad"
>
<template v-slot:header-selection="scope">
<q-checkbox keep-color color="primary" dense v-model="scope.selected" />
@ -211,22 +234,7 @@ async function onClickApprove(type: string = "") {
</q-card>
</div>
</template>
<template v-slot:pagination="scope">
ทั้งหมด {{ total }} รายการ
<q-pagination
v-model="formQuery.page"
active-color="primary"
color="dark"
:max="Number(maxPage)"
size="sm"
boundary-links
direction-links
:max-pages="5"
@update:model-value="props.fetchList?.()"
></q-pagination>
</template>
</d-table>
<SkeletonTable v-else :columns="columns" />
</div>
<div class="row justify-end q-mt-md q-gutter-sm" v-if="rows.length !== 0">

9
src/modules/08_KPI/components/Tab/Dialog/04_FormCompetency.vue
View file

@ -13,8 +13,6 @@ import type { ListCapacity } from "@/modules/08_KPI/interface/request/index";
import DialogHeader from "@/components/DialogHeader.vue";
import SkeletonTable from '@/components/SkeletonTable.vue'
const dataListCapacityDetails = ref<ListCapacity[]>([]);
const route = useRoute();
const idParam = ref<string>(route.params.id as string);
@ -483,7 +481,7 @@ watch(
</div>
<div class="col-xs-12 col-md-7">
<d-table
v-if="!isLoadById"
v-if="!isLoadById"
flat
bordered
dense
@ -491,10 +489,12 @@ watch(
row-key="level"
virtual-scroll
:rows="dataListCapacityDetails"
:rows-per-page-options="[100]"
hide-pagination
:columns="columns"
:visible-columns="visibleColumns"
v-model:pagination="pagination"
:pagination="pagination"
:loading="isLoadById"
>
<template v-slot:header="props">
<q-tr :props="props">
@ -558,7 +558,6 @@ watch(
</div>
</template>
</d-table>
<SkeletonTable v-else :columns="columns"/>
</div>
</div>
</div>

42
src/modules/08_KPI/components/Tab/Dialog/DialogGovernment.vue
View file

@ -10,20 +10,10 @@ import { useCounterMixin } from "@/stores/mixin";
import DialogHeader from "@/components/DialogHeader.vue";
import SkeletonTable from "@/components/SkeletonTable.vue";
const $q = useQuasar();
const store = useKpiDataStore();
const mixin = useCounterMixin();
const {
showLoader,
hideLoader,
messageError,
findPosMasterNoOld,
findOrgNameOld,
findOrgNameOldHtml,
date2Thai,
} = mixin;
const { messageError, findOrgNameOldHtml, date2Thai } = mixin;
const modal = defineModel<boolean>("modal", { required: true });
const filterKeyword = ref<string>("");
@ -138,29 +128,6 @@ const columns = ref<QTableProps["columns"]>([
},
]);
/** เเปลง status เป็น text */
function statusText(val: string) {
switch (val) {
case "WAITTING":
return "รอดำเนินการ";
case "PENDING":
return "เลือกตำแหน่งแล้ว";
case "APPROVE":
return "อนุมัติ";
case "REJECT":
return "ไม่อนุมัติ";
case "REPORT":
return "ส่งรายชื่อไปออกคำสั่ง";
case "WAITING":
return "รอออกคำสั่ง";
case "DONE":
return "ออกคำสั่งเสร็จแล้ว";
default:
return "-";
}
}
/** ปิด dialog */
function close() {
modal.value = false;
@ -174,7 +141,6 @@ function getData() {
.then((res) => {
const data = res.data.result;
rows.value = data;
isLoad.value = false;
})
.catch((e) => {
messageError($q, e);
@ -187,7 +153,7 @@ function getData() {
watch(
() => modal.value,
(n) => {
if (n == true) {
if (n) {
getData();
}
}
@ -202,7 +168,6 @@ watch(
<div class="row">
<div class="col-12">
<d-table
v-if="!isLoad"
ref="table"
:columns="columns"
:rows="rows"
@ -214,6 +179,8 @@ watch(
dense
:rows-per-page-options="[10, 25, 50, 100]"
:visible-columns="visibleColumns"
:loading="isLoad"
:pagination="{ page: 1, rowsPerPage: 10 }"
>
<template v-slot:header="props">
<q-tr :props="props">
@ -245,7 +212,6 @@ watch(
</q-tr>
</template>
</d-table>
<SkeletonTable v-else :columns="columns" />
</div>
</div>
</q-card-section>

18
src/modules/08_KPI/components/Tab/Topic/01_Indicator.vue
View file

@ -1,6 +1,6 @@
<script setup lang="ts">
import { computed, ref, watch } from "vue";
import { useQuasar } from "quasar";
import { Loading, useQuasar } from "quasar";
import config from "@/app.config";
import http from "@/plugins/http";
@ -15,19 +15,16 @@ import DialogViewInfo from "@/modules/08_KPI/components/Tab/Dialog/DialogViewInf
import DialogProgress from "@/modules/08_KPI/components/Tab/Dialog/DialogCommentProgress.vue";
import DialogProblem from "@/modules/08_KPI/components/Tab/Dialog/DialogCommentProblem.vue";
import SkeletonTable from "@/components/SkeletonTable.vue";
const $q = useQuasar();
const store = useKpiDataStore();
const { dialogRemove, showLoader, hideLoader, messageError, success } =
useCounterMixin();
const { dialogRemove, messageError, success } = useCounterMixin();
const checkDetail = ref<boolean>(false);
const title = defineModel<string>("title", { required: true });
const rows = defineModel<any>("data", { required: true });
const numpage = defineModel<number>("page", { required: true });
const isLoad = defineModel<boolean>('isLoad',{required:true})
const isLoad = defineModel<boolean>("isLoad", { required: true });
const props = defineProps({
fetchList: { type: Function, required: true },
});
@ -139,7 +136,7 @@ async function onEvaluate() {
function onDelete(id: string) {
dialogRemove($q, async () => {
try {
isLoad.value = true
isLoad.value = true;
const url =
numpage.value === 1
? config.API.kpiAchievement("planned") + `/${id}`
@ -243,12 +240,10 @@ const isEditStep3 = computed(() => {
</q-card-section>
<q-separator />
<q-card-section class="q-pa-sm">
<d-table
v-if="!isLoad"
ref="table"
:columns="columns"
:rows="rows"
:rows="rows || []"
:filter="filterKeyword"
row-key="id"
flat
@ -257,7 +252,7 @@ const isEditStep3 = computed(() => {
hide-pagination
:visible-columns="visibleColumns"
:rows-per-page-options="[20]"
no-data-label="ไม่มีข้อมูล"
:loading="isLoad"
>
<template v-slot:header="props">
<q-tr :props="props">
@ -464,7 +459,6 @@ const isEditStep3 = computed(() => {
</div>
</template>
</d-table>
<SkeletonTable v-else :columns="columns"/>
</q-card-section>
</q-card>

14
src/modules/08_KPI/components/Tab/Topic/02_Competency.vue
View file

@ -22,8 +22,6 @@ import DialogEvaluate from "@/modules/08_KPI/components/Tab/DialogEvaluate/02_Co
import DialogListCriteria from "@/modules/08_KPI/components/Tab/Dialog/DialogListCriteria.vue";
import DialogCompetncyByRow from "@/modules/08_KPI/components/Tab/Dialog/DialogCompetncyByRow.vue";
import SkeletonTable from "@/components/SkeletonTable.vue";
const modalLevel = ref<boolean>(false);
const modalCompetncyByRow = ref<boolean>(false);
const dataCompetncyByRow = ref<any[]>([]);
@ -160,15 +158,14 @@ function onAdd(type: string) {
/** ดึงข้อมูล */
function getData(type: string) {
isLoad.value[type] = true;
http
.get(config.API.kpiUserCapacity + `?id=${id.value}&type=${type}`)
.then(async (res) => {
const data = res.data.result.data;
isLoad.value[type] = data ? true : false;
rows.value[type] = data;
lists.value = await lists.value.filter((x: any) => x.type != type);
lists.value.push({ type: type, data });
isLoad.value[type] = false;
})
.catch((e) => {
messageError($q, e);
@ -220,6 +217,7 @@ function getData(type: string) {
: 0;
}
}
isLoad.value[type] = false;
});
}
@ -400,20 +398,21 @@ watch(
</q-btn>
</div>
</q-card-section>
<q-card-section class="q-pa-sm">
<d-table
v-if="!isLoad[item.id]"
ref="table"
:columns="columns"
:rows="rows[item.id]"
:rows="rows[item.id] || []"
row-key="id"
flat
bordered
:paging="true"
dense
hide-pagination
no-data-label="ไม่มีข้อมูล"
:visible-columns="visibleColumns"
:rows-per-page-options="[20]"
:loading="isLoad[item.id]"
>
<template v-slot:header="props">
<q-tr :props="props">
@ -634,7 +633,6 @@ watch(
</div>
</template>
</d-table>
<SkeletonTable v-else :columns="columns" />
</q-card-section>
</q-card>
</div>

17
src/modules/08_KPI/components/Tab/Topic/03_Develop.vue
View file

@ -13,8 +13,6 @@ import DialogEvalutionDevelop from "@/modules/08_KPI/components/Tab/DialogEvalua
import DialogProgress from "@/modules/08_KPI/components/Tab/Dialog/DialogCommentProgress.vue";
import DialogProblem from "@/modules/08_KPI/components/Tab/Dialog/DialogCommentProblem.vue";
import SkeletonTable from "@/components/SkeletonTable.vue";
const store = useKpiDataStore();
const route = useRoute();
const evaluationId = ref<string>(route.params.id.toString());
@ -26,14 +24,7 @@ const idEditDevelop = ref<string>("");
const $q = useQuasar();
const mixin = useCounterMixin();
const {
date2Thai,
messageError,
showLoader,
hideLoader,
dialogRemove,
success,
} = mixin;
const { date2Thai, messageError, dialogRemove, success } = mixin;
const isUpdate = defineModel("isUpdate", {
type: Boolean,
@ -248,7 +239,6 @@ onMounted(() => {
</q-card-section>
<q-card-section class="q-pa-sm">
<d-table
v-if="!isLoad"
ref="table"
:columns="columns"
:rows="rows"
@ -258,8 +248,9 @@ onMounted(() => {
:paging="true"
dense
hide-pagination
no-data-label="ไม่มีข้อมูล"
:rows-per-page-options="[20]"
:visible-columns="visibleColumns"
:loading="isLoad"
>
<template v-slot:header="props">
<q-tr :props="props">
@ -507,8 +498,6 @@ onMounted(() => {
</div>
</template>
</d-table>
<SkeletonTable v-else :columns="columns" />
</q-card-section>
</q-card>

90
src/modules/08_KPI/views/main.vue
View file

@ -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">

53
src/modules/08_KPI/views/mainEvaluator.vue
View file

@ -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"
/>