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>