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

fix:load skeleton

Browse source
This commit is contained in:
setthawutttty 2025-08-14 16:15:04 +07:00
parent 7cdff8d853
commit cacb84bb48
20 changed files with 894 additions and 309 deletions
Download patch file Download diff file Expand all files Collapse all files

84
src/modules/08_KPI/views/form.vue
View file

@ -66,6 +66,11 @@ const commanderHighId = ref<any>(null); // ตัวแปรเก็บ id ผ
const imgProfile = ref<string>(""); // ตัวแปรเก็บรูปโปรไฟล์
/** ตัวแปรโหลด */
const isLoad = ref<boolean>(false);
const isLoadCommander = ref<boolean>(false);
const isLoadAvatar = ref<boolean>(false); // เช็คโหลดรูปโปร์ไฟล์
const formProfile = reactive<FormProfile>({
fullName: "",
position: "",
@ -95,7 +100,10 @@ async function fetchEvaluation() {
}
async function getAvatar(id: string) {
isLoadAvatar.value = true;
await http
.get(config.API.orgCheckAvatar(id))
.then(async (res) => {
const data = await res.data.result;
@ -105,6 +113,7 @@ async function getAvatar(id: string) {
})
.catch((e) => {
messageError($q, e);
isLoadAvatar.value = false;
});
}
@ -115,6 +124,7 @@ async function fetchProfile(id: string, avatarName: string) {
.then(async (res) => {
store.dataEvaluation.avartar = res.data.downloadUrl;
imgProfile.value = res.data.downloadUrl;
isLoadAvatar.value = false;
});
}
@ -162,6 +172,7 @@ function onSubmit() {
/** ดึงข้อมูล ผู้ประเมิน */
async function getOrgOp() {
isLoadCommander.value = true;
http
.get(config.API.Kpiorg)
.then((res) => {
@ -199,9 +210,11 @@ async function getOrgOp() {
.find(
(i: EvaOptionType) => i.id == store.dataEvaluation.commanderHighId
);
isLoadCommander.value = false;
})
.catch((e) => {
messageError($q, e);
isLoadCommander.value = false;
})
.finally(() => {});
}
@ -453,8 +466,9 @@ const evaluator = ref<EvaluatorType>({
* ข้อมูลของผู้ประเมิน
* @param id ข้อมูลของผู้ประเมิน
*/
const isLoadModal = ref<boolean>(false);
async function fetchProfileEvaluator(id: string) {
showLoader();
isLoadModal.value = true;
http
.get(config.API.orgPosition + `/${id}`)
.then(async (res) => {
@ -467,12 +481,13 @@ async function fetchProfileEvaluator(id: string) {
evaluator.value.isPosmasterAct = data.isPosmasterAct;
evaluator.value.posmasterAct = data.posmasterAct;
evaluator.value.org = await findOrgNameHtml(data);
isLoadModal.value = false;
})
.catch((e) => {
messageError($q, e);
})
.finally(() => {
hideLoader();
isLoadModal.value = false;
});
}
@ -654,7 +669,6 @@ function onResize(size: { width: any; height: any }) {
}
onMounted(async () => {
showLoader();
store.isUpdate = false;
await getAll();
});
@ -689,7 +703,8 @@ onMounted(async () => {
<q-card bordered flat class="relative-position">
<div class="row justify-center q-pa-md" v-if="!$q.screen.gt.xs">
<q-avatar :size="sizeImg">
<q-img :src="imgProfile" v-if="imgProfile !== ''" />
<q-skeleton type="circle" size="100px" v-if="isLoadAvatar" />
<q-img :src="imgProfile" v-else-if="imgProfile !== ''" />
<q-img src="@/assets/avatar_user.jpg" v-else />
</q-avatar>
</div>
@ -699,7 +714,8 @@ onMounted(async () => {
style="left: 2%; top: 50%; transform: translateY(-50%)"
>
<q-avatar :size="sizeImg">
<q-img :src="imgProfile" v-if="imgProfile !== ''" />
<q-skeleton type="circle" size="100px" v-if="isLoadAvatar" />
<q-img :src="imgProfile" v-else-if="imgProfile !== ''" />
<q-img src="@/assets/avatar_user.jpg" v-else />
</q-avatar>
</div>
@ -1028,7 +1044,7 @@ onMounted(async () => {
/>
<q-separator />
<q-card-section>
<div class="column q-gutter-sm">
<div v-if="!isLoadCommander" class="column q-gutter-sm">
<div class="row">
<div class="col-10">
<q-select
@ -1179,6 +1195,18 @@ onMounted(async () => {
</div>
</div>
</div>
<div
v-else
class="row q-col-gutter-xs items-center"
v-for="item in 3"
>
<div class="col-10">
<q-skeleton type="QInput" height="40px" />
</div>
<div class="col-2 q-pa-sm text-right">
<q-skeleton type="QRadio" />
</div>
</div>
</q-card-section>
<q-separator />
<q-card-actions
@ -1219,23 +1247,42 @@ onMounted(async () => {
<div class="col-3">ตำแหน่งทางการบริหาร</div>
<div class="col-3">สังกัด</div>
</div>
<div class="row">
<div class="row q-col-gutter-x-sm">
<div class="col-3">
{{ evaluator.position ? evaluator.position : "-" }}
<div v-if="!isLoadModal">
{{ evaluator.position ? evaluator.position : "-" }}
</div>
<q-skeleton v-else type="text" />
</div>
<div class="col-3">
{{ evaluator.posTypeName ? evaluator.posTypeName : "-" }}
{{
evaluator.posLevelName ? ` (${evaluator.posLevelName})` : "-"
}}
<div v-if="!isLoadModal">
{{ evaluator.posTypeName ? evaluator.posTypeName : "-" }}
{{
evaluator.posLevelName
? ` (${evaluator.posLevelName})`
: "-"
}}
</div>
<q-skeleton v-else type="text" />
</div>
<div class="col-3">
{{
evaluator.posExecutiveName ? evaluator.posExecutiveName : "-"
}}
<div v-if="!isLoadModal">
{{
evaluator.posExecutiveName
? evaluator.posExecutiveName
: "-"
}}
</div>
<q-skeleton v-else type="text" />
</div>
<div class="col-3 text-html">
{{ evaluator.org ? evaluator.org : "-" }}
<div v-if="!isLoadModal">
{{ evaluator.org ? evaluator.org : "-" }}
</div>
<q-skeleton v-else type="text" />
</div>
</div>
@ -1243,9 +1290,12 @@ onMounted(async () => {
<div class="col-12">รักษาการในตำแหน่ง/การรักษาราชการแทน</div>
</div>
<div class="row">
<div v-if="isLoadModal" class="col-12">
<q-skeleton type="text" />
</div>
<div
class="col-12"
v-if="evaluator.isPosmasterAct"
v-else-if="evaluator.isPosmasterAct"
v-for="(data, index) in evaluator.posmasterAct"
:key="index"
>

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

@ -21,6 +21,7 @@ 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();
@ -30,6 +31,8 @@ const { showLoader, hideLoader, messageError, date2Thai, dialogConfirm } =
mixin;
/** Table*/
const isLoadOp = ref<boolean>(false);
const isLoad = ref<boolean>(false);
const rows = ref<MainListKpi[]>([]);
const visibleColumns = ref<string[]>([
"createdAt",
@ -161,7 +164,7 @@ const pagination = ref({
*/
async function fetchRoundOption(type: string) {
const y = type === "main" ? year.value : yearDialog.value;
showLoader();
isLoadOp.value = true;
await http
.get(
config.API.kpiPeriod + `?page=${1}&pageSize=${10}&keyword=${""}&year=${y}`
@ -196,7 +199,7 @@ async function fetchRoundOption(type: string) {
messageError($q, err);
})
.finally(() => {
hideLoader();
isLoadOp.value = false;
});
}
@ -204,7 +207,7 @@ async function fetchRoundOption(type: string) {
* fetch รายการขอรับประเมินผลการปฏิบัติราชการระดับบุคคล
*/
async function fetchList() {
showLoader();
isLoad.value = true
let queryParams = {
page: formQuery.page,
pageSize: formQuery.pageSize,
@ -222,13 +225,13 @@ async function fetchList() {
total.value = data.total;
totalList.value = Math.ceil(data.total / formQuery.pageSize);
rows.value = data.data;
isLoad.value = false
})
.catch((err) => {
isLoad.value = false
messageError($q, err);
})
.finally(() => {
hideLoader();
});
.finally(() => {});
}
/** เลือกรอบการประเมิน */
@ -520,6 +523,7 @@ onMounted(async () => {
<div class="items-center col-12 row q-col-gutter-sm">
<div class="col-xs-12 col-md-2">
<q-select
v-if="!isLoadOp"
v-model="round"
outlined
label="รอบการประเมิน"
@ -531,6 +535,7 @@ onMounted(async () => {
map-options
@update:model-value="changRound"
/>
<q-skeleton v-else type="QInput" height="40px" bordered />
</div>
<div class="col-xs-12 col-md-3">
@ -607,6 +612,7 @@ onMounted(async () => {
<div class="col-12">
<d-table
v-if="!isLoad"
ref="table"
:columns="columns"
:rows="rows"
@ -677,6 +683,7 @@ onMounted(async () => {
></q-pagination>
</template>
</d-table>
<SkeletonTable v-else :columns="columns" />
</div>
</div>
</q-card>

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

@ -93,8 +93,9 @@ const maxPage = ref<number>(1);
* ดึงข้อมูลรายการขอรับประเมินผลการปฏิบัติราชการระดับบุคคล
* @param type
*/
const isLoadOp = ref<boolean>(false);
async function fetchRoundOption() {
showLoader();
isLoadOp.value = true;
await http
.get(
config.API.kpiPeriod +
@ -120,18 +121,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(() => {
hideLoader();
});
.finally(() => {});
}
/** ดึงข้อมูล list */
const isLoad = ref<boolean>(false)
async function fetchList() {
showLoader();
isLoad.value = true
const body = {
page: store.formQuery.page,
pageSize: store.formQuery.pageSize,
@ -158,13 +160,13 @@ async function fetchList() {
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(() => {
hideLoader();
});
.finally(() => {});
}
/** เลือกรอบการประเมิน */
@ -221,7 +223,7 @@ onMounted(async () => {
<div class="col-12">
<q-card bordered class="q-pa-md">
<div class="items-center col-12 row q-col-gutter-sm q-mb-sm">
<div class="items-center col-12 row q-gutter-sm q-mb-sm">
<datepicker
class="col-md-1 col-xs-12"
v-model="store.yearRound"
@ -260,6 +262,7 @@ onMounted(async () => {
</template>
</datepicker>
<q-select
v-if="!isLoadOp"
class="col-md-2 col-xs-12"
v-model="store.formQuery.round"
outlined
@ -272,7 +275,12 @@ onMounted(async () => {
map-options
@update:model-value="changRound"
/>
<q-skeleton
v-else
class="col-md-2 col-xs-12"
type="QInput"
height="40px"
/>
<q-space />
<q-input
@ -342,6 +350,7 @@ onMounted(async () => {
:maxPage="maxPage"
:updatePagination="updatePagination"
:fetchList="fetchList"
:is-load="isLoad"
/>
</q-tab-panel>
@ -355,6 +364,7 @@ onMounted(async () => {
:maxPage="maxPage"
:updatePagination="updatePagination"
:fetchList="fetchList"
:is-load="isLoad"
/>
</q-tab-panel>
@ -368,6 +378,7 @@ onMounted(async () => {
:maxPage="maxPage"
:updatePagination="updatePagination"
:fetchList="fetchList"
:is-load="isLoad"
/>
</q-tab-panel>
@ -381,6 +392,7 @@ onMounted(async () => {
:maxPage="maxPage"
:updatePagination="updatePagination"
:fetchList="fetchList"
:is-load="isLoad"
/>
</q-tab-panel>
@ -394,6 +406,7 @@ onMounted(async () => {
:maxPage="maxPage"
:updatePagination="updatePagination"
:fetchList="fetchList"
:is-load="isLoad"
/>
</q-tab-panel>
</q-tab-panels>