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

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

@ -8,8 +8,11 @@ import { useKpiDataStore } from "@/modules/08_KPI/store";
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 visibleColumns = defineModel<string[]>("visibleColumns", {
required: true,
});
@ -42,6 +45,7 @@ async function redirectViewDetail(id: string) {
<template>
<div class="col-12">
<d-table
v-if="!isLoad"
ref="table"
:columns="columns"
:rows="rows"
@ -120,6 +124,7 @@ async function redirectViewDetail(id: string) {
></q-pagination>
</template>
</d-table>
<SkeletonTable v-else :columns="columns"/>
</div>
</template>

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

@ -12,6 +12,8 @@ import { useKpiDataStore } from "@/modules/08_KPI/store";
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();
@ -34,6 +36,7 @@ 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 },
@ -109,6 +112,7 @@ async function onClickApprove(type: string = "") {
<template>
<div class="col-12">
<d-table
v-if="!isLoad"
ref="table"
:columns="columns"
:rows="rows"
@ -187,10 +191,7 @@ async function onClickApprove(type: string = "") {
</q-card-section>
<q-separator />
<q-list @click="redirectViewDetail(props.row.id)">
<q-item
v-for="col in props.cols"
:key="col.name"
>
<q-item v-for="col in props.cols" :key="col.name">
<q-item-section>
<q-item-label caption>{{ col.label }}</q-item-label>
@ -225,6 +226,7 @@ async function onClickApprove(type: string = "") {
></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">

38
src/modules/08_KPI/components/Tab/01_Assessment.vue
View file

@ -37,6 +37,10 @@ const store = useKpiDataStore();
const evaluationId = ref<string>(route.params.id.toString());
const isLoad01 = ref<boolean>(false);
const isLoad02 = ref<boolean>(false);
const isLoad03 = ref<boolean>(false);
const rows_01 = ref<EvaluationIndicatorType[]>();
const rows_02 = ref<EvaluationIndicatorType[]>();
const rows_03 = ref<EvaluationIndicatorType[]>();
@ -53,6 +57,7 @@ const resultRole = ref<number>(0);
const resultAssigned = ref<number>(0);
function fetchListPlanned() {
isLoad01.value = true;
http
.get(config.API.kpiAchievement("planned") + `?id=${evaluationId.value}`)
.then((res) => {
@ -62,6 +67,7 @@ function fetchListPlanned() {
evaluationResults: (e.point / 5) * e.weight,
}));
rows_01.value = newRow;
isLoad01.value = false;
if (newRow.length > 0) {
resultPlanned.value = newRow.reduce(
@ -89,6 +95,7 @@ function fetchListPlanned() {
}
function fetchListRole() {
isLoad02.value = true;
http
.get(config.API.kpiAchievement("role") + `?id=${evaluationId.value}`)
.then((res) => {
@ -98,7 +105,7 @@ function fetchListRole() {
evaluationResults: (e.point / 5) * e.weight,
}));
rows_02.value = newRow;
isLoad02.value = false;
if (newRow.length > 0) {
resultRole.value = newRow.reduce(
(sum: number, e: any) => sum + e.evaluationResults,
@ -119,6 +126,7 @@ function fetchListRole() {
}
function fetchAssigned() {
isLoad03.value = true;
http
.get(config.API.kpiAchievement("special") + `?id=${evaluationId.value}`)
.then((res) => {
@ -129,7 +137,7 @@ function fetchAssigned() {
}));
rows_03.value = newRow;
isLoad03.value = false;
if (newRow.length > 0) {
resultAssigned.value = newRow.reduce(
(sum: number, e: any) => sum + e.evaluationResults,
@ -345,6 +353,7 @@ onMounted(() => {
<div v-if="groupNo == 1">
<Work
v-model:data="rows_01"
v-model:isLoad="isLoad01"
:title="`มิติที่ 1 ภารกิจตามนโยบายและยุทธศาสตร์ของกรุงเทพมหานคร`"
:page="1"
:fetchList="fetchListPlanned"
@ -391,6 +400,7 @@ onMounted(() => {
<Work
v-model:data="rows_03"
v-model:isLoad="isLoad03"
:title="`มิติที่ 2 วาระเร่งด่วนที่ได้รับมอบหมายพิเศษ (ถ้ามี)`"
:page="3"
:fetchList="fetchAssigned"
@ -437,12 +447,16 @@ onMounted(() => {
คะแนน)</span
>
<div class="text-primary q-pl-md">
{{
(
store.excusiveIndicator1ScoreVal +
store.excusiveIndicator2ScoreVal
).toFixed(2)
}}
<div v-if="!isLoad01">
{{
(
store.excusiveIndicator1ScoreVal +
store.excusiveIndicator2ScoreVal
).toFixed(2)
}}
</div>
<q-skeleton v-else type="text" />
</div>
</div>
</div>
@ -452,6 +466,7 @@ onMounted(() => {
<div v-else>
<Work
v-model:data="rows_01"
v-model:isLoad="isLoad01"
:title="`1. งานตามแผนปฏิบัติราชการประจำปี`"
:page="1"
:fetchList="fetchListPlanned"
@ -459,6 +474,7 @@ onMounted(() => {
/>
<Work
v-model:data="rows_02"
v-model:isLoad="isLoad02"
:title="`2. งานตามหน้าที่ความรับผิดชอบหลัก`"
:page="2"
:fetchList="fetchListRole"
@ -466,6 +482,7 @@ onMounted(() => {
/>
<Work
v-model:data="rows_03"
v-model:isLoad="isLoad03"
:title="`3. งานอื่น ๆ ที่ได้รับมอบหมาย`"
:page="3"
:fetchList="fetchAssigned"
@ -517,7 +534,10 @@ onMounted(() => {
คะแนน)</span
>
<div class="text-primary q-pl-md">
{{ store.indicatorScoreVal.toFixed(2) }}
<div v-if="!isLoad01">
{{ store.indicatorScoreVal.toFixed(2) }}
</div>
<q-skeleton v-else type="text" />
</div>
</div>
</div>

61
src/modules/08_KPI/components/Tab/04_Result.vue
View file

@ -192,7 +192,9 @@ function userOpen() {
});
}
const isLoad = ref<boolean>(false);
function getData() {
isLoad.value = true;
http
.get(config.API.kpiSendToGet(id.value))
.then((res) => {
@ -220,9 +222,11 @@ function getData() {
sumWeight.value = data.weightPoint1 + data.weightPoint2;
sumResult.value = data.summaryPoint;
result.value = data.evaluationResults;
isLoad.value = false;
})
.catch((e) => {
messageError($q, e);
isLoad.value = false;
})
.finally(() => {});
}
@ -306,22 +310,47 @@ onMounted(() => {
<tbody>
<tr>
<td class="text-left">องค์ประกอบที่ 1 ผลสัมฤทธิ์ของงาน</td>
<td class="text-left">{{ weight1 }}</td>
<td class="text-left">{{ result1 }}</td>
<td class="text-left">
<div v-if="!isLoad">
{{ weight1 }}
</div>
<q-skeleton v-else type="text" />
</td>
<td class="text-left">
<div v-if="!isLoad">{{ result1 }}</div>
<q-skeleton v-else type="text" />
</td>
</tr>
<tr>
<td class="text-left">
องค์ประกอบที่ 2 พฤติกรรมการปฎิบัติราชการ (สมรรถนะ)
</td>
<td class="text-left">{{ weight2 }}</td>
<td class="text-left">{{ result2 }}</td>
<td class="text-left">
<div v-if="!isLoad">{{ weight2 }}</div>
<q-skeleton v-else type="text" />
</td>
<td class="text-left">
<div v-if="!isLoad">{{ result2 }}</div>
<q-skeleton v-else type="text" />
</td>
</tr>
<tr>
<td class="text-right text-bold" style="font-size: 16px">
รวม
</td>
<td class="text-left">{{ sumWeight }}</td>
<td class="text-left">{{ sumResult }}</td>
<td class="text-left">
<div v-if="!isLoad">{{ sumWeight }}</div>
<q-skeleton v-else type="text" />
</td>
<td class="text-left">
<div v-if="!isLoad">{{ sumResult }}</div>
<q-skeleton v-else type="text" />
</td>
</tr>
</tbody>
</q-markup-table>
@ -332,7 +361,7 @@ onMounted(() => {
</div>
</div>
<div class="col-12 no-pointer">
<div class="column">
<div class="column" v-if="!isLoad">
<q-radio
v-model="result"
checked-icon="task_alt"
@ -369,6 +398,12 @@ onMounted(() => {
label="ต้องปรับปรุง (คะแนนต่ำกว่าร้อยละ 60.00)"
/>
</div>
<q-item v-else dense v-for="item in 5" style="max-width: 300px;">
<q-item-section class="q-pa-none">
<q-skeleton type="text" />
</q-item-section>
</q-item>
</div>
<div class="col-12">
<div class="text-weight-bold text-body2">
@ -378,6 +413,7 @@ onMounted(() => {
<div class="col-12">
<q-input
v-if="!isLoad"
v-model="title"
outlined
lazy-rules
@ -390,9 +426,11 @@ onMounted(() => {
"
:rules="[(val:string) => !!val || `${'กรุณากรอกชื่อเรื่อง/เนื้อหา/หัวข้อการพัฒนา'}`,]"
/>
<q-skeleton v-else type="QInput" height="150px" />
</div>
<div class="col-12">
<q-input
v-if="!isLoad"
v-model="developmentMethod"
outlined
lazy-rules
@ -405,9 +443,11 @@ onMounted(() => {
"
:rules="[(val:string) => !!val || `${'กรุณากรอกวิธีการพัฒนา'}`,]"
/>
<q-skeleton v-else type="QInput" height="150px" />
</div>
<div class="col-12">
<q-input
v-if="!isLoad"
v-model="developmentPeriod"
outlined
hide-bottom-space
@ -420,6 +460,7 @@ onMounted(() => {
"
:rules="[(val:string) => !!val || `${'กรุณากรอกช่วงเวลาการพัฒนา'}`,]"
/>
<q-skeleton v-else type="QInput" height="150px" />
</div>
<div class="col-12">
<div class="text-weight-bold text-body2">
@ -428,6 +469,7 @@ onMounted(() => {
</div>
<div class="col-12">
<q-input
v-if="!isLoad"
v-model="evaluatorComment"
outlined
lazy-rules
@ -440,6 +482,7 @@ onMounted(() => {
"
:rules="[(val:string) => !!val || `${'กรุณากรอกความเห็นของ'}`,]"
/>
<q-skeleton v-else type="QInput" height="150px" />
</div>
</div>
</q-card-section>
@ -519,6 +562,7 @@ onMounted(() => {
<div class="col-12">
<q-input
v-if="!isLoad"
lazy-rules
v-model="superiorComment"
outlined
@ -538,6 +582,7 @@ onMounted(() => {
ref="superiorCommentRef"
:rules="[(val:string) => superiorCommentCheck !== 'false'||!!val || `${'กรุณากรอกความเห็น'}`,]"
/>
<q-skeleton v-else type="QInput" height="150px" />
</div>
</div>
</q-card-section>
@ -621,6 +666,7 @@ onMounted(() => {
</div>
<div class="col-12">
<q-input
v-if="!isLoad"
lazy-rules
ref="additionalSuperiorCommentRef"
v-model="additionalSuperiorComment"
@ -641,6 +687,7 @@ onMounted(() => {
"
:rules="[(val:string) => additionalSuperiorCheck !== 'false'||!!val || `${'กรุณากรอกความเห็น'}`,]"
/>
<q-skeleton v-else type="QInput" height="150px" />
</div>
</div>
</q-card-section>

12
src/modules/08_KPI/components/Tab/05_File.vue
View file

@ -32,18 +32,20 @@ const isReadonly = ref<boolean>(
const documentFile = ref<any>(null);
const fileList = ref<ArrayFileList[]>([]);
const isLoad = ref<boolean>(false);
async function getData() {
showLoader();
isLoad.value = true;
await http
.get(config.API.file("ไฟล์เอกสาร", "KPI", id.value))
.then((res) => {
fileList.value = res.data;
isLoad.value = false;
})
.catch((e) => {
messageError($q, e);
})
.finally(() => {
hideLoader();
isLoad.value = false;
});
}
@ -190,7 +192,11 @@ onMounted(() => {
<!-- <div class="col-1 self-center" v-if="formData.documentFile"></div> -->
</div>
<div v-if="fileList.length > 0" class="col-xs-12 row">
<div v-if="isLoad" class="col-12">
<q-skeleton />
</div>
<div v-else-if="fileList.length > 0" class="col-xs-12 row">
<q-list class="full-width rounded-borders" bordered separator>
<q-item
clickable

114
src/modules/08_KPI/components/Tab/Dialog/01_FormIndicator.vue
View file

@ -36,6 +36,8 @@ const search = ref<string>("");
const listCheckID = ref<string | null>(null);
const listTarget = ref<any>([]);
const isLoad = ref<boolean>(false);
const isLoadList = ref<boolean>(false);
const formFilter = reactive<any>({
isAll: false,
keyword: "",
@ -91,20 +93,20 @@ function fetchListPlan() {
: store.dataProfile.nodeDnaId;
formFilter.node = formFilter.isAll ? 0 : store.dataProfile.node;
formFilter.year = formFilter?.year ? formFilter.year.toString() : "";
showLoader();
isLoadList.value = true;
http
.post(config.API.kpiPlan + `/search`, formFilter)
.then((res) => {
listTarget.value = res.data.result.data;
maxPage.value = Math.ceil(res.data.result.total / formFilter.pageSize);
totalList.value = res.data.result.total;
isLoadList.value = false;
})
.catch((err) => {
messageError($q, err);
})
.finally(() => {
hideLoader();
isLoadList.value = false;
});
}
@ -113,7 +115,7 @@ function fetchListPlan() {
* @param id id
*/
function fetchListPlanByid(id: string) {
showLoader();
isLoad.value = true;
http
.get(config.API.kpiAchievement("planned") + `/${id}`)
.then((res) => {
@ -138,12 +140,13 @@ function fetchListPlanByid(id: string) {
formDetail.endDate = data.endDate;
listCheckID.value = data.kpiPlanId;
isLoad.value = false;
})
.catch((err) => {
messageError($q, err);
})
.finally(() => {
hideLoader();
isLoad.value = false;
});
}
@ -154,24 +157,25 @@ function fetchListRole() {
formFilter.node = formFilter.isAll ? 0 : store.dataProfile.node;
formFilter.year = formFilter?.year ? formFilter.year.toString() : "";
formFilter.position = store.dataProfile.position;
isLoadList.value = true;
http
.post(config.API.kpiRole + `/search`, formFilter)
.then((res) => {
listTarget.value = res.data.result.data;
maxPage.value = Math.ceil(res.data.result.total / formFilter.pageSize);
totalList.value = res.data.result.total;
isLoadList.value = false;
})
.catch((err) => {
messageError($q, err);
})
.finally(() => {
hideLoader();
isLoadList.value = false;
});
}
function fetchRoleByid(id: string) {
showLoader();
isLoad.value = true;
http
.get(config.API.kpiAchievement("role") + `/${id}`)
.then((res) => {
@ -193,12 +197,13 @@ function fetchRoleByid(id: string) {
formDetail.includingName = data.includingName;
formDetail.including = data.including;
listCheckID.value = data.kpiRoleId;
isLoad.value = false;
})
.catch((err) => {
messageError($q, err);
})
.finally(() => {
hideLoader();
isLoad.value = false;
});
}
@ -212,25 +217,25 @@ function fetchListSpecial() {
pageSize: formFilter.pageSize,
page: formFilter.page,
};
showLoader();
isLoadList.value = true;
http
.post(config.API.kpiSpecial + `/search`, body)
.then((res) => {
listTarget.value = res.data.result.data;
maxPage.value = Math.ceil(res.data.result.total / formFilter.pageSize);
totalList.value = res.data.result.total;
isLoadList.value = false;
})
.catch((err) => {
messageError($q, err);
})
.finally(() => {
hideLoader();
isLoadList.value = false;
});
}
function fetchspecialByid(id: string) {
showLoader();
isLoad.value = true;
http
.get(config.API.kpiAchievement("special") + `/${id}`)
.then((res) => {
@ -252,18 +257,19 @@ function fetchspecialByid(id: string) {
formDetail.endDate = data.endDate;
listCheckID.value = data.kpiSpecialId;
isLoad.value = false;
})
.catch((err) => {
messageError($q, err);
})
.finally(() => {
hideLoader();
isLoad.value = false;
});
}
function clickList(id: string, isData: boolean = false) {
if (!checkDetail.value) {
showLoader();
isLoad.value=true
const url =
numpage.value === 1
? config.API.kpiPlan
@ -301,12 +307,13 @@ function clickList(id: string, isData: boolean = false) {
formDetail.strategyId = data.strategyId;
formDetail.strategyName = data.strategyName;
formDetail.documentInfoEvidence = data.documentInfoEvidence;
isLoad.value=false
})
.catch((err) => {
messageError($q, err);
})
.finally(() => {
hideLoader();
isLoad.value=false
});
}
}
@ -595,7 +602,7 @@ const title = computed(() => {
<q-separator />
<q-card-section class="q-pa-none">
<q-list separator>
<q-list separator v-if="!isLoadList">
<q-item
dense
v-for="(item, index) in listTarget"
@ -622,6 +629,25 @@ const title = computed(() => {
</q-item-section>
</q-item>
</q-list>
<q-list v-else separator>
<q-item dense v-for="item in 2">
<q-item-section class="q-pa-none">
<div
class="row items-center"
style="min-height: 50px"
>
<div class="col-5">
<q-skeleton type="text" width="50px" />
</div>
<div class="col-7">
<q-skeleton type="text" />
</div>
</div>
</q-item-section>
</q-item>
</q-list>
<q-separator />
<div
class="q-pa-lg flex justify-end"
@ -662,18 +688,33 @@ const title = computed(() => {
<div class="q-pa-sm q-col-gutter-lg">
<div class="col-12 row" v-if="numpage !== 3">
<div class="col-4 text-grey-6">หน่วยงาน/ส่วนราชการ</div>
<div class="col-8">{{ formDetail.nodeName }}</div>
<div v-if="!isLoad" class="col-8">
{{ formDetail.nodeName }}
</div>
<div class="col-8" v-else>
<q-skeleton type="text" />
</div>
</div>
<div class="col-12 row" v-if="numpage === 1">
<div class="col-4 text-grey-6">ยุทธศาสตร์ / แผน</div>
<div class="col-8">{{ formDetail.strategyName }}</div>
<div v-if="!isLoad" class="col-8">
{{ formDetail.strategyName }}
</div>
<div class="col-8" v-else>
<q-skeleton type="text" />
</div>
</div>
<div class="col-12 row">
<div class="col-4 text-grey-6">ลำดับ/รหัสตัวชี้วัด</div>
<div class="col-8">
<q-skeleton
v-if="isLoad"
type="QInput"
height="40px"
/>
<q-input
v-if="numpage === 3"
v-else-if="numpage === 3"
outlined
:readonly="checkDetail"
v-model="formDetail.including"
@ -694,8 +735,13 @@ const title = computed(() => {
<div class="col-12 row">
<div class="col-4 text-grey-6">ชื่อตัวชี้วัด</div>
<div class="col-8">
<q-skeleton
v-if="isLoad"
type="QInput"
height="40px"
/>
<q-input
v-if="numpage === 3"
v-else-if="numpage === 3"
outlined
:readonly="checkDetail"
v-model="formDetail.includingName"
@ -715,6 +761,7 @@ const title = computed(() => {
<div class="col-4 text-grey-6">ค่าเป้าหมาย</div>
<div class="col-8">
<q-input
v-if="!isLoad"
outlined
v-model="formDetail.target"
bg-color="white"
@ -727,12 +774,14 @@ const title = computed(() => {
hide-bottom-space
lazy-rules
/>
<q-skeleton v-else type="QInput" height="40px" />
</div>
</div>
<div class="col-12 row">
<div class="col-4 text-grey-6">หน่วยนับ</div>
<div class="col-8">
<q-input
v-if="!isLoad"
outlined
v-model="formDetail.unit"
bg-color="white"
@ -746,12 +795,14 @@ const title = computed(() => {
hide-bottom-space
reverse-fill-mask
/>
<q-skeleton v-else type="QInput" height="40px" />
</div>
</div>
<div class="col-12 row">
<div class="col-4 text-grey-6">น้ำหนัก (ร้อยละ)</div>
<div class="col-8">
<q-input
v-if="!isLoad"
outlined
v-model="formDetail.weight"
bg-color="white"
@ -766,6 +817,7 @@ const title = computed(() => {
lazy-rules
mask="###"
/>
<q-skeleton v-else type="QInput" height="40px" />
</div>
</div>
</div>
@ -784,6 +836,7 @@ const title = computed(() => {
<div class="col-6 text-center text-body2">5</div>
<div class="col-6">
<q-input
v-if="!isLoad"
v-model="formDetail.achievement5"
outlined
dense
@ -793,6 +846,7 @@ const title = computed(() => {
class="inputgreen"
lazy-rules
/>
<q-skeleton v-else type="QInput" height="40px" />
</div>
</div>
<q-separator />
@ -800,6 +854,7 @@ const title = computed(() => {
<div class="col-6 text-center text-body2">4</div>
<div class="col-6 text-center text-primary">
<q-input
v-if="!isLoad"
v-model="formDetail.achievement4"
outlined
:readonly="checkDetail"
@ -809,6 +864,7 @@ const title = computed(() => {
class="inputgreen"
lazy-rules
/>
<q-skeleton v-else type="QInput" height="40px" />
</div>
</div>
<q-separator />
@ -816,6 +872,7 @@ const title = computed(() => {
<div class="col-6 text-center text-body2">3</div>
<div class="col-6 text-center text-primary">
<q-input
v-if="!isLoad"
v-model="formDetail.achievement3"
outlined
:readonly="checkDetail"
@ -825,6 +882,7 @@ const title = computed(() => {
class="inputgreen"
lazy-rules
/>
<q-skeleton v-else type="QInput" height="40px" />
</div>
</div>
<q-separator />
@ -832,6 +890,7 @@ const title = computed(() => {
<div class="col-6 text-center text-body2">2</div>
<div class="col-6 text-center text-primary">
<q-input
v-if="!isLoad"
v-model="formDetail.achievement2"
outlined
:readonly="checkDetail"
@ -841,6 +900,7 @@ const title = computed(() => {
class="inputgreen"
lazy-rules
/>
<q-skeleton v-else type="QInput" height="40px" />
</div>
</div>
<q-separator />
@ -848,6 +908,7 @@ const title = computed(() => {
<div class="col-6 text-center text-body2">1</div>
<div class="col-6 text-center text-primary">
<q-input
v-if="!isLoad"
v-model="formDetail.achievement1"
outlined
:readonly="checkDetail"
@ -857,12 +918,14 @@ const title = computed(() => {
class="inputgreen"
lazy-rules
/>
<q-skeleton v-else type="QInput" height="40px" />
</div>
</div>
</q-card>
</div>
<div class="col-12">
<q-input
v-if="!isLoad"
v-model="formDetail.meaning"
label="นิยามหรือความหมายของตัวชี้วัด"
type="textarea"
@ -874,10 +937,12 @@ const title = computed(() => {
class="inputgreen"
lazy-rules
/>
<q-skeleton v-else type="QInput" height="150px" />
</div>
<div class="col-12">
<q-input
v-if="!isLoad"
v-model="formDetail.formula"
label="สูตรคำนวณ"
:readonly="checkDetail"
@ -889,10 +954,12 @@ const title = computed(() => {
class="inputgreen"
lazy-rules
/>
<q-skeleton v-else type="QInput" height="150px" />
</div>
<div class="col-12">
<q-input
v-if="!isLoad"
v-model="formDetail.documentInfoEvidence"
label="ข้อมูลเอกสารหลักฐาน"
type="textarea"
@ -904,9 +971,11 @@ const title = computed(() => {
class="inputgreen"
lazy-rules
/>
<q-skeleton v-else type="QInput" height="150px" />
</div>
<div class="col-3">
<datepicker
v-if="!isLoad"
v-model="formDetail.startDate"
:locale="'th'"
:readonly="checkDetail"
@ -952,9 +1021,11 @@ const title = computed(() => {
</q-input>
</template>
</datepicker>
<q-skeleton v-else type="QInput" height="40px" />
</div>
<div class="col-3">
<datepicker
v-if="!isLoad"
v-model="formDetail.endDate"
:locale="'th'"
:readonly="checkDetail"
@ -1000,6 +1071,7 @@ const title = computed(() => {
</q-input>
</template>
</datepicker>
<q-skeleton v-else type="QInput" height="40px" />
</div>
</div>
</div>

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

@ -13,6 +13,8 @@ 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);
@ -195,9 +197,10 @@ function onSubmit() {
}
}
const isLoadCapacity = ref<boolean>(false);
/** ดึงข้อมูล สมรรถนะ */
function getData() {
showLoader();
isLoadCapacity.value = true;
http
.get(config.API.KpiCapacity + `?type=${type.value}&pageSize=100`)
.then((res) => {
@ -213,7 +216,7 @@ function getData() {
}
})
.finally(() => {
hideLoader();
isLoadCapacity.value = false;
});
}
@ -228,7 +231,9 @@ function filterTxt(val: any) {
}
/** ดึงข้อมูลตามไอดี */
const isLoadById = ref<boolean>(false);
function getDataById() {
isLoadById.value = true;
http
.get(config.API.kpiUserCapacity + `/${idProps.value}`)
.then((res) => {
@ -252,6 +257,7 @@ function getDataById() {
formDetail.definition = target.description;
dataListCapacityDetails.value = dataListCriteria;
isLoadById.value = false;
})
.catch((e) => {})
.finally(() => {});
@ -262,8 +268,10 @@ watch(
() => {
if (modal.value) {
type.value = competencyType.value;
getData();
if (idProps.value) {
isLoadById.value = true;
setTimeout(() => {
getDataById();
}, 500);
@ -407,18 +415,32 @@ watch(
}}
</div>
<div class="col-8">
<span v-if="field == 'type'">{{
formDetail[field]
? store.convertCompetencyType(formDetail[field])
: "-"
}}</span>
<span
v-else-if="field == 'definition'"
v-html="formDetail[field]"
></span>
<span v-else>{{
formDetail[field] ? formDetail[field] : "-"
}}</span>
<span v-if="field == 'type'">
<div v-if="!isLoadById">
{{
formDetail[field]
? store.convertCompetencyType(
formDetail[field]
)
: "-"
}}
</div>
<q-skeleton v-else type="text" />
</span>
<span v-else-if="field == 'definition'">
<div
v-if="!isLoadById"
v-html="formDetail[field]"
></div>
<q-skeleton v-else type="text" />
</span>
<span v-else>
<div v-if="!isLoadById">
{{ formDetail[field] ? formDetail[field] : "-" }}
</div>
<q-skeleton v-else type="text"
/></span>
</div>
</div>
</div>
@ -426,6 +448,7 @@ watch(
<div class="col-4 text-grey-6">น้ำหนัก (ร้อยละ)</div>
<div class="col-8">
<q-input
v-if="!isLoadById"
readonly
v-model="weight"
dense
@ -436,10 +459,12 @@ watch(
class="inputgreen"
mask="###"
/>
<q-skeleton v-else type="QInput" height="40px" />
</div>
<div class="col-4 text-grey-6">ระดับที่คาดหวัง</div>
<div class="col-8">
<q-select
v-if="!isLoadById"
:readonly="type == 'HEAD' || type == 'GROUP'"
v-model="expectedLevel"
:options="expectedLevelOp"
@ -451,12 +476,14 @@ watch(
hide-bottom-space
class="inputgreen"
/>
<q-skeleton v-else type="QInput" height="40px" />
</div>
</div>
</q-card>
</div>
<div class="col-xs-12 col-md-7">
<d-table
v-if="!isLoadById"
flat
bordered
dense
@ -531,6 +558,7 @@ watch(
</div>
</template>
</d-table>
<SkeletonTable v-else :columns="columns"/>
</div>
</div>
</div>

55
src/modules/08_KPI/components/Tab/Dialog/DialogCommentProblem.vue
View file

@ -60,7 +60,9 @@ let count = ref<number>(0);
* @param index id หัวข้อ
* @param data ข้อมูล
*/
const isLoadDetail = ref<boolean>(false);
function clickList(index: string, data: any) {
isLoadDetail.value = true;
listCheck.value = index as string;
formDataView.id = data.id;
@ -76,13 +78,13 @@ function clickList(index: string, data: any) {
reasonCommanderHigh.value = data.reasonCommanderHigh ?? "";
if (count.value >= 1) {
reasonEvaluatorRef.value.reset();
reasonCommanderRef.value.reset();
reasonCommanderHighRef.value.reset();
reasonEvaluatorRef.value && reasonEvaluatorRef.value.reset();
reasonCommanderRef.value && reasonCommanderRef.value.reset();
reasonCommanderHighRef.value && reasonCommanderHighRef.value.reset();
}
showLoader();
count.value++;
setTimeout(() => {
hideLoader();
isLoadDetail.value = false;
}, 100);
}
@ -157,8 +159,9 @@ function closeAdd() {
getList();
}
const isLoad = ref<boolean>(false);
function getList() {
showLoader();
isLoad.value = true;
http
.get(
config.API.kpiCommentP(
@ -171,13 +174,13 @@ function getList() {
.then((res) => {
const data = res.data.result;
listTarget.value = data;
isLoad.value = false;
})
.catch((e) => {
messageError($q, e);
isLoad.value = false;
})
.finally(() => {
hideLoader();
});
.finally(() => {});
}
/**
@ -288,7 +291,19 @@ watch(
<q-separator />
<q-card-section class="q-pa-none">
<div v-if="listTarget.length > 0">
<q-list v-if="isLoad" separator>
<q-item dense v-for="item in 2">
<q-item-section class="q-pa-none">
<div class="row items-center" style="min-height: 50px">
<div class="col-12">
<q-skeleton type="text" />
</div>
</div>
</q-item-section>
</q-item>
</q-list>
<div v-else-if="listTarget.length > 0">
<q-list separator dense>
<q-item
v-for="(item, index) in listTarget"
@ -348,11 +363,21 @@ watch(
<div class="row q-pa-md q-col-gutter-sm">
<div class="row col-12 text-weight-medium">
<div class="col-4 text-grey-6">หัวข้อปัญหา</div>
<div class="col-8">{{ formDataView.topic }}</div>
<div class="col-8">
<div v-if="!isLoadDetail">
{{ formDataView.topic }}
</div>
<q-skeleton v-else type="text" />
</div>
</div>
<div class="row col-12 text-weight-medium">
<div class="col-4 text-grey-6">รายละเอียดปัญหา</div>
<div class="col-8">{{ formDataView.reason }}</div>
<div class="col-8">
<div v-if="!isLoadDetail">
{{ formDataView.reason }}
</div>
<q-skeleton v-else type="text" />
</div>
</div>
<div class="col-12">
<q-separator />
@ -375,6 +400,7 @@ watch(
</div>
<div class="col-12">
<q-input
v-if="!isLoadDetail"
outlined
dense
:readonly="
@ -390,6 +416,7 @@ watch(
hide-bottom-space
:rules="[(val:string) => !!val || `${'กรุณากรอกความคิดเห็นของผู้ประเมิน'}`,]"
></q-input>
<q-skeleton v-else type="QInput" height="150px" />
</div>
<div
@ -429,6 +456,7 @@ watch(
</div>
<div class="col-12">
<q-input
v-if="!isLoadDetail"
outlined
dense
label="ความคิดเห็นของผู้บังคับบัญชาเหนือขึ้นไป"
@ -444,6 +472,7 @@ watch(
hide-bottom-space
:rules="[(val:string) => !!val || `${'กรุณากรอกความคิดเห็นของผู้บังคับบัญชาเหนือขึ้นไป'}`,]"
></q-input>
<q-skeleton v-else type="QInput" height="150px" />
</div>
<div
@ -482,6 +511,7 @@ watch(
</div>
<div class="col-12">
<q-input
v-if="!isLoadDetail"
outlined
dense
label="ความคิดเห็นของผู้บังคับบัญชาเหนือขึ้นไปอีกขั้นหนึ่ง"
@ -497,6 +527,7 @@ watch(
hide-bottom-space
:rules="[(val:string) => !!val || `${'กรุณากรอกความคิดเห็นของผู้บังคับบัญชาเหนือขึ้นไปอีกขั้นหนึ่ง'}`,]"
></q-input>
<q-skeleton v-else type="QInput" height="150px" />
</div>
<div

67
src/modules/08_KPI/components/Tab/Dialog/DialogCommentProgress.vue
View file

@ -62,7 +62,10 @@ const formDataView = reactive<FormCommentByRole>({
});
let count = ref<number>(0);
const isLoadDetail = ref<boolean>(false);
function clickList(index: string, data: any) {
isLoadDetail.value = true;
listCheck.value = index as string;
formDataView.id = data.id;
@ -80,14 +83,13 @@ function clickList(index: string, data: any) {
reasonCommanderHigh.value = data.reasonCommanderHigh ?? "";
if (count.value >= 1) {
reasonEvaluatorRef.value.reset();
reasonCommanderRef.value.reset();
reasonCommanderHighRef.value.reset();
reasonEvaluatorRef.value && reasonEvaluatorRef.value.reset();
reasonCommanderRef.value && reasonCommanderRef.value.reset();
reasonCommanderHighRef.value && reasonCommanderHighRef.value.reset();
}
count.value++;
showLoader();
setTimeout(() => {
hideLoader();
isLoadDetail.value = false;
}, 100);
}
@ -147,8 +149,9 @@ function closeAdd() {
numLevel.value = "";
}
const isLoad = ref<boolean>(false);
function getList() {
showLoader();
isLoad.value = true;
http
.get(
config.API.kpiCommentP(
@ -161,13 +164,13 @@ function getList() {
.then((res) => {
const data = res.data.result;
listTarget.value = data;
isLoad.value = false;
})
.catch((e) => {
messageError($q, e);
isLoad.value = false;
})
.finally(() => {
hideLoader();
});
.finally(() => {});
}
function onSubmitComment(role: string) {
@ -313,7 +316,21 @@ watch(
<q-separator />
<q-card-section class="q-pa-none">
<div v-if="listTarget.length > 0">
<q-list v-if="isLoad" separator>
<q-item dense v-for="item in 2">
<q-item-section class="q-pa-none">
<div
class="row items-center"
style="min-height: 50px"
>
<div class="col-12">
<q-skeleton type="text" />
</div>
</div>
</q-item-section>
</q-item>
</q-list>
<div v-else-if="listTarget.length > 0">
<q-list separator dense>
<q-item
v-for="(item, index) in listTarget"
@ -373,7 +390,12 @@ watch(
: "หัวข้อความก้าวหน้า"
}}
</div>
<div class="col-8">{{ formDataView.topic }}</div>
<div class="col-8">
<div v-if="!isLoadDetail">
{{ formDataView.topic }}
</div>
<q-skeleton v-else type="text" />
</div>
</div>
<div class="row col-12 text-weight-medium">
<div class="col-4 text-grey-6">
@ -383,18 +405,29 @@ watch(
: "รายละเอียดความก้าวหน้า"
}}
</div>
<div class="col-8">{{ formDataView.reason }}</div>
<div class="col-8">
<div v-if="!isLoadDetail">{{ formDataView.reason }}</div>
<q-skeleton v-else type="text" />
</div>
</div>
<div
class="row col-12 text-weight-medium"
v-if="type !== 'capacity' && type !== 'development'"
>
<div class="col-4 text-grey-6">คะแนน</div>
<div class="col-8">{{ formDataView.score }}</div>
<div class="col-8">
<div v-if="!isLoadDetail">{{ formDataView.score }}</div>
<q-skeleton v-else type="text" />
</div>
</div>
<div class="row col-12 text-weight-medium">
<div class="col-4 text-grey-6">ผู้สร้าง</div>
<div class="col-8">{{ formDataView.createdFullName }}</div>
<div class="col-8">
<div v-if="!isLoadDetail">
{{ formDataView.createdFullName }}
</div>
<q-skeleton v-else type="text" />
</div>
</div>
<div
@ -422,6 +455,7 @@ watch(
</div>
<div class="col-12">
<q-input
v-if="!isLoadDetail"
outlined
dense
:readonly="
@ -437,6 +471,7 @@ watch(
hide-bottom-space
:rules="[(val:string) => !!val || `${'กรุณากรอกความคิดเห็นของผู้ประเมิน'}`,]"
></q-input>
<q-skeleton v-else type="QInput" height="150px" />
</div>
<div
@ -475,6 +510,7 @@ watch(
</div>
<div class="col-12">
<q-input
v-if="!isLoadDetail"
outlined
dense
label="ความคิดเห็นของผู้บังคับบัญชาเหนือขึ้นไป"
@ -490,6 +526,7 @@ watch(
hide-bottom-space
:rules="[(val:string) => !!val || `${'กรุณากรอกความคิดเห็นของผู้บังคับบัญชาเหนือขึ้นไป'}`,]"
></q-input>
<q-skeleton v-else type="QInput" height="150px" />
</div>
<div
@ -527,6 +564,7 @@ watch(
</div>
<div class="col-12">
<q-input
v-if="!isLoadDetail"
outlined
dense
label="ความคิดเห็นของผู้บังคับบัญชาเหนือขึ้นไปอีกขั้นหนึ่ง"
@ -542,6 +580,7 @@ watch(
hide-bottom-space
:rules="[(val:string) => !!val || `${'กรุณากรอกความคิดเห็นของผู้บังคับบัญชาเหนือขึ้นไปอีกขั้นหนึ่ง'}`,]"
></q-input>
<q-skeleton v-else type="QInput" height="150px" />
</div>
<div

68
src/modules/08_KPI/components/Tab/Dialog/DialogDevelop.vue
View file

@ -30,6 +30,8 @@ const props = defineProps({
const route = useRoute();
const idKpi = ref<string>(route.params.id.toLocaleString());
const isLoadMain = defineModel<boolean>('isLoadMain',{required:true})
const isLoad = ref<boolean>(false);
const development = ref<string[]>([]); //ตัวแปรเก็บ ตัวเลือกการพัฒนา
const reasonDevelopment70 = ref<string>(""); //อื่นๆ การลงมือปฏิบัติ (โดยผู้บังคับบัญชามอบหมาย)
const reasonDevelopment20 = ref<string>(""); //อื่นๆ การเรียนรู้จากผู้อื่น (Coach/Mentor/Consulting)
@ -220,11 +222,11 @@ function onSubmit() {
selectTypeYear: formData.year ? formData.year.toString() : null,
selectTypeId: projectName.value ? projectName.value.id : null,
};
showLoader();
isLoadMain.value = true
http[id.value ? "put" : "post"](url, body)
.then((res) => {
success($q, "บันทึกข้อมูลสำเร็จ");
close();
success($q, "บันทึกข้อมูลสำเร็จ");
})
.catch((e) => {
messageError($q, e);
@ -305,7 +307,7 @@ watch(
() => id.value,
(i) => {
if (i) {
showLoader();
isLoad.value = true;
http
.get(config.API.kpiAchievementDevelop + `/${id.value}`)
.then(async (res) => {
@ -342,13 +344,14 @@ watch(
)
? data.reasonDevelopment10
: "";
isLoad.value = false;
}, 500);
})
.catch((e) => {
messageError($q, e);
})
.finally(() => {
hideLoader();
isLoad.value = false;
});
}
}
@ -367,6 +370,7 @@ watch(
<div class="row q-col-gutter-sm">
<div class="col-3">
<q-select
v-if="!isLoad"
class="inputgreen"
outlined
dense
@ -379,9 +383,11 @@ watch(
v-model="choice"
>
</q-select>
<q-skeleton v-else type="QInput" height="40px" />
</div>
<div class="col-3" v-if="choice == 'PROJECT'">
<datepicker
v-if="!isLoad"
menu-class-name="modalfix"
v-model="formData.year"
:locale="'th'"
@ -419,9 +425,11 @@ watch(
</q-input>
</template>
</datepicker>
<q-skeleton v-else type="QInput" height="40px" />
</div>
<div class="col-3" v-if="choice == 'PROJECT'">
<q-select
v-if="!isLoad"
outlined
dense
:rules="[(val:string) => !!val || `${'กรุณาเลือกโครงการ/หลักสูตรการฝึกอบรม'}`,]"
@ -446,9 +454,11 @@ watch(
</q-item>
</template>
</q-select>
<q-skeleton v-else type="QInput" height="40px" />
</div>
<div class="col-12">
<q-input
v-if="!isLoad"
v-model="formData.name"
outlined
dense
@ -459,6 +469,7 @@ watch(
label="ชื่อเรื่อง/เนื้อเรื่อง/หัวข้อการพัฒนา"
>
</q-input>
<q-skeleton v-else type="QInput" height="40px" />
</div>
<div class="col-12">
<span class="text-weight-medium">วิธีการพัฒนา</span>
@ -469,6 +480,7 @@ watch(
>70 การลงมือปฏิบัติ (โดยผู้บังคับบัญชามอบหมาย)</span
>
<q-option-group
v-if="!isLoad"
class="check_box q-mt-sm"
keep-color
color="primary"
@ -477,16 +489,30 @@ watch(
:options="projectTechniquesOp1"
type="checkbox"
/>
<q-item
v-else
class="q-pa-none"
style="max-width: 300px; height: 30px"
v-for="item in 11"
>
<q-item-section>
<q-skeleton type="text" />
</q-item-section>
</q-item>
<div class="row q-pb-md" v-if="checkOtherBox11">
<div class="offset-4 col-8 q-mt-sm relative-position">
<div class="other_custom_input">
<q-input
v-if="!isLoad"
v-model="reasonDevelopment70"
dense
outlined
class="inputgreen"
label="กรุณาระบุ"
></q-input>
<q-skeleton v-else type="QInput" height="40px" />
</div>
</div>
</div>
@ -496,6 +522,7 @@ watch(
>20 การเรียนรู้จากผู้อื่น (Coach/Mentor/Consulting)</span
>
<q-option-group
v-if="!isLoad"
class="check_box q-mt-sm"
keep-color
color="primary"
@ -504,16 +531,28 @@ watch(
:options="projectTechniquesOp2"
type="checkbox"
/>
<q-item
v-else
class="q-pa-none"
style="max-width: 300px; height: 30px"
v-for="item in 5"
>
<q-item-section>
<q-skeleton type="text" />
</q-item-section>
</q-item>
<div class="row q-pb-md" v-if="checkOtherBox12">
<div class="offset-4 col-8 q-mt-sm relative-position">
<div class="other_custom_input">
<q-input
v-if="!isLoad"
v-model="reasonDevelopment20"
dense
outlined
class="inputgreen"
label="กรุณาระบุ"
></q-input>
<q-skeleton v-else type="QInput" height="40px" />
</div>
</div>
</div>
@ -521,6 +560,7 @@ watch(
<div class="col-12 col-sm-6 col-md-6 col-lg-4">
<span class="text-weight-medium">10 การฝึกอบรมอื่นๆ</span>
<q-option-group
v-if="!isLoad"
class="check_box q-mt-sm"
keep-color
color="primary"
@ -529,16 +569,28 @@ watch(
:options="projectTechniquesOp3"
type="checkbox"
/>
<q-item
v-else
class="q-pa-none"
style="max-width: 300px; height: 30px"
v-for="item in 7"
>
<q-item-section>
<q-skeleton type="text" />
</q-item-section>
</q-item>
<div class="row q-pb-md" v-if="checkOtherBox13">
<div class="offset-4 col-8 q-mt-sm relative-position">
<div class="other_custom_input">
<q-input
v-if="!isLoad"
v-model="reasonDevelopment10"
dense
outlined
class="inputgreen"
label="กรุณาระบุ"
></q-input>
<q-skeleton v-else type="QInput" height="40px" />
</div>
</div>
</div>
@ -546,6 +598,7 @@ watch(
</div>
<div class="col-12">
<q-input
v-if="!isLoad"
label="เป้าหมายการนำไปพัฒนางาน"
v-model="formData.target"
outlined
@ -556,6 +609,7 @@ watch(
lazy-rules
hide-bottom-space
></q-input>
<q-skeleton v-else type="QInput" height="150px" />
</div>
<div class="col-12">
<q-card bordered>
@ -573,6 +627,7 @@ watch(
</div>
<div class="col-8">
<q-input
v-if="!isLoad"
class="inputgreen"
v-model="formData.achievement10"
outlined
@ -582,6 +637,7 @@ watch(
lazy-rules
hide-bottom-space
></q-input>
<q-skeleton v-else type="QInput" height="40px" />
</div>
</div>
<q-separator />
@ -591,6 +647,7 @@ watch(
</div>
<div class="col-8">
<q-input
v-if="!isLoad"
class="inputgreen"
v-model="formData.achievement5"
outlined
@ -600,6 +657,7 @@ watch(
lazy-rules
hide-bottom-space
></q-input>
<q-skeleton v-else type="QInput" height="40px" />
</div>
</div>
<q-separator />
@ -609,6 +667,7 @@ watch(
</div>
<div class="col-8">
<q-input
v-if="!isLoad"
class="inputgreen"
v-model="formData.achievement0"
outlined
@ -618,6 +677,7 @@ watch(
lazy-rules
hide-bottom-space
></q-input>
<q-skeleton v-else type="QInput" height="40px" />
</div>
</div>
</q-card>

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

@ -10,6 +10,8 @@ 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();
@ -27,6 +29,8 @@ const modal = defineModel<boolean>("modal", { required: true });
const filterKeyword = ref<string>("");
const rows = ref<any[]>([]);
const isLoad = ref<boolean>(false);
const visibleColumns = ref<string[]>([
"commandName",
"agency",
@ -164,18 +168,19 @@ function close() {
/** ดึงข้อมูล */
function getData() {
showLoader();
isLoad.value = true;
http
.get(config.API.orgAssistance(store.dataEvaluation.profileId))
.then((res) => {
const data = res.data.result;
rows.value = data;
isLoad.value = false;
})
.catch((e) => {
messageError($q, e);
})
.finally(() => {
hideLoader();
isLoad.value = false;
});
}
@ -197,6 +202,7 @@ watch(
<div class="row">
<div class="col-12">
<d-table
v-if="!isLoad"
ref="table"
:columns="columns"
:rows="rows"
@ -239,6 +245,7 @@ watch(
</q-tr>
</template>
</d-table>
<SkeletonTable v-else :columns="columns" />
</div>
</div>
</q-card-section>

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

@ -15,6 +15,8 @@ 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 } =
@ -25,6 +27,7 @@ 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 props = defineProps({
fetchList: { type: Function, required: true },
});
@ -136,7 +139,7 @@ async function onEvaluate() {
function onDelete(id: string) {
dialogRemove($q, async () => {
try {
showLoader();
isLoad.value = true
const url =
numpage.value === 1
? config.API.kpiAchievement("planned") + `/${id}`
@ -151,7 +154,6 @@ function onDelete(id: string) {
} catch (err) {
messageError($q, err);
} finally {
hideLoader();
}
});
}
@ -241,7 +243,9 @@ 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"
@ -460,6 +464,7 @@ const isEditStep3 = computed(() => {
</div>
</template>
</d-table>
<SkeletonTable v-else :columns="columns"/>
</q-card-section>
</q-card>

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

@ -22,6 +22,8 @@ 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[]>([]);
@ -123,6 +125,7 @@ const visibleColumns = ref<string[]>(
const typeCompetency = ref<string>("");
const rows = ref<any>([]);
const isLoad = ref<any>([]);
const lists = ref<any>([]);
const modalProgress = ref<boolean>(false);
const modalProblem = ref<boolean>(false);
@ -161,9 +164,11 @@ function getData(type: string) {
.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);
@ -232,7 +237,7 @@ function onEdit(data: FormCapacityList, type: string) {
*/
function onDelete(id: string, type: string) {
dialogRemove($q, () => {
showLoader();
isLoad.value[type] = true;
http
.delete(config.API.kpiUserCapacity + `/${id}`)
.then((res) => {
@ -293,7 +298,12 @@ function onLevel(num: number, list: any) {
}
watch(
() => [store.dataEvaluation.posTypeName, store.dataEvaluation.posExecutiveName, store.dataEvaluation.position, store.dataEvaluation.posLevelName], // ตรวจจับค่า posTypeName และ posExecutiveName
() => [
store.dataEvaluation.posTypeName,
store.dataEvaluation.posExecutiveName,
store.dataEvaluation.position,
store.dataEvaluation.posLevelName,
], // ตรวจจับค่า posTypeName และ posExecutiveName
(newValue) => {
if (!newValue) return; // ถ้ายังไม่มีค่า ไม่ต้องทำอะไร
const posTypeName = newValue[0];
@ -326,26 +336,25 @@ watch(
competencyType.value =
position === "ผู้ตรวจราชการกรุงเทพมหานคร" || position === "ผู้ตรวจราชการ"
? competencyTypeList.filter(
(x: DataOptions) => x.id === "HEAD" || x.id === "INSPECTOR"
)
: posExecutiveName === "ผู้อำนวยการเขต"
? competencyTypeList.filter(
(x: DataOptions) => x.id === "HEAD" || x.id === "DIRECTOR"
)
: posTypeName === "อำนวยการ" ||
posTypeName === "บริหาร" ||
(posTypeName === "ทั่วไป" &&
posLevelName === "อาวุโส" &&
posExecutiveName != null) ||
(posTypeName === "วิชาการ" &&
posExecutiveName != null)
? competencyTypeList.filter(
(x: DataOptions) => x.id === "HEAD" || x.id === "EXECUTIVE"
)
: competencyTypeList.filter(
(x: DataOptions) => x.id === "HEAD" || x.id === "GROUP"
);
? competencyTypeList.filter(
(x: DataOptions) => x.id === "HEAD" || x.id === "INSPECTOR"
)
: posExecutiveName === "ผู้อำนวยการเขต"
? competencyTypeList.filter(
(x: DataOptions) => x.id === "HEAD" || x.id === "DIRECTOR"
)
: posTypeName === "อำนวยการ" ||
posTypeName === "บริหาร" ||
(posTypeName === "ทั่วไป" &&
posLevelName === "อาวุโส" &&
posExecutiveName != null) ||
(posTypeName === "วิชาการ" && posExecutiveName != null)
? competencyTypeList.filter(
(x: DataOptions) => x.id === "HEAD" || x.id === "EXECUTIVE"
)
: competencyTypeList.filter(
(x: DataOptions) => x.id === "HEAD" || x.id === "GROUP"
);
for (let index = 0; index < competencyType.value.length; index++) {
const element = competencyType.value[index];
@ -393,6 +402,7 @@ watch(
</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]"
@ -624,6 +634,7 @@ watch(
</div>
</template>
</d-table>
<SkeletonTable v-else :columns="columns" />
</q-card-section>
</q-card>
</div>

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

@ -13,6 +13,8 @@ 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());
@ -38,15 +40,16 @@ const isUpdate = defineModel("isUpdate", {
default: false,
});
const isLoad = ref<boolean>(false);
const modalProgress = ref<boolean>(false);
const modalProblem = ref<boolean>(false);
const type = ref<string>("");
const idList = ref<string>("");
const isEditStep1 = computed(() => {
return (
(store.dataEvaluation.evaluationStatus === "NEW" &&
store.rolePerson === "USER" &&
store.tabMain === "1")
store.dataEvaluation.evaluationStatus === "NEW" &&
store.rolePerson === "USER" &&
store.tabMain === "1"
);
});
@ -148,6 +151,7 @@ function onEdit(id: string) {
/** ดึงข้อมูลพัฒนา */
function getDevelop() {
isLoad.value = true;
http
.get(config.API.kpiAchievementDevelop + `?id=${evaluationId.value}`)
.then((res) => {
@ -159,6 +163,7 @@ function getDevelop() {
0
);
isLoad.value = false;
store.devScoreVal =
data.length !== 0 ? totalSummary / rows.value.length : 0;
});
@ -173,7 +178,7 @@ function onEvaluate() {
*/
function onDelete(id: string) {
dialogRemove($q, () => {
showLoader();
isLoad.value = true;
http
.delete(config.API.kpiAchievementDevelop + `/${id}`)
.then((res) => {
@ -182,10 +187,9 @@ function onDelete(id: string) {
})
.catch((e) => {
messageError($q, e);
isLoad.value = false;
})
.finally(() => {
hideLoader();
});
.finally(() => {});
});
}
@ -244,6 +248,7 @@ onMounted(() => {
</q-card-section>
<q-card-section class="q-pa-sm">
<d-table
v-if="!isLoad"
ref="table"
:columns="columns"
:rows="rows"
@ -341,7 +346,11 @@ onMounted(() => {
dense
@click="openPopupProgress(props.row.id)"
>
<q-tooltip>{{store.tabMain == '3' ? `บันทึกเหตุการณ์/พฤติกรรม/เหตุผล` :'บันทึกเหตุการณ์/พฤติกรรม'}}</q-tooltip>
<q-tooltip>{{
store.tabMain == "3"
? `บันทึกเหตุการณ์/พฤติกรรม/เหตุผล`
: "บันทึกเหตุการณ์/พฤติกรรม"
}}</q-tooltip>
</q-btn>
</div>
@ -498,6 +507,8 @@ onMounted(() => {
</div>
</template>
</d-table>
<SkeletonTable v-else :columns="columns" />
</q-card-section>
</q-card>
@ -505,6 +516,7 @@ onMounted(() => {
v-model:modal="modalDevelop"
v-model:id="idEditDevelop"
:get-all="getDevelop"
v-model:isLoadMain="isLoad"
/>
<DialogEvalutionDevelop

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>

360
src/modules/09_scholarship/views/detail.vue
View file

File diff suppressed because it is too large Load diff

10
src/modules/09_scholarship/views/main.vue
View file

@ -13,6 +13,8 @@ import type {
Scholarship,
} from "@/modules/09_scholarship/interface/index/Main";
import SkeletonTable from "@/components/SkeletonTable.vue";
const mixin = useCounterMixin();
const { showLoader, hideLoader, messageError } = mixin;
const router = useRouter();
@ -24,6 +26,7 @@ const currentPage = ref<number>(1);
const page = ref<number>(1);
const rowsPerPage = ref<number>(10);
const isLoad = ref<boolean>(false);
const rows = ref<Scholarship[]>([]);
const year = ref<number>(0);
const type = ref<string>("DOMESTICE");
@ -127,15 +130,16 @@ async function getProfileId() {
if (dataStore.profileId) {
profilId.value = dataStore.profileId;
} else {
showLoader();
isLoad.value = true;
try {
const res = await http.get(config.API.profilePosition());
dataStore.profileId = res.data.result.profileId;
profilId.value = dataStore.profileId;
isLoad.value = false;
} catch (e) {
messageError($q, e);
} finally {
hideLoader();
isLoad.value = false;
}
}
@ -255,6 +259,7 @@ onMounted(async () => {
<div>
<d-table
v-if="!isLoad"
flat
bordered
dense
@ -339,6 +344,7 @@ onMounted(async () => {
</div>
</template>
</d-table>
<SkeletonTable v-else :columns="columns" />
</div>
</q-card>
</div>

108
src/modules/11_probation/views/mainDetail.vue
View file

@ -14,6 +14,8 @@ import type {
ProbationFormType,
} from "@/modules/11_probation/interface/index/main";
import SkeletonTable from "@/components/SkeletonTable.vue";
const $q = useQuasar();
const mixin = useCounterMixin();
const {
@ -29,6 +31,7 @@ const profileId = ref<string>("");
const rows = ref<ListMain[]>([]);
const rowsData = ref<ListMain[]>([]);
const isLoad = ref<boolean>(false);
const mode = ref<boolean>($q.screen.gt.xs);
const profileImg = ref<string>("");
const router = useRouter();
@ -112,7 +115,7 @@ function onResize(size: any) {
}
function getMain() {
showLoader();
isLoad.value = true;
http
.get(config.API.kpiEvaluation + `/${route.params.id.toString()}`)
// .get(config.API.profilePosition())
@ -134,11 +137,11 @@ function getMain() {
promises.push(getAvatar(data.profileId));
await Promise.all(promises);
hideLoader();
isLoad.value = false;
})
.catch((e) => {
messageError($q, e);
hideLoader();
isLoad.value = false;
})
.finally(() => {});
}
@ -221,22 +224,31 @@ onMounted(async () => {
<div v-if="$q.screen.gt.xs" class="col-12">
<q-card>
<div class="bg-grey-1 row q-pa-sm items-center">
<span class="text-teal text-weight-bold text-body2">{{
formData.firstName
? `${formData.prefix}${formData.firstName} ${formData.lastName}`
: "-"
}}</span>
<span class="text-teal text-weight-bold text-body2">
<div v-if="!isLoad">
{{
formData.firstName
? `${formData.prefix}${formData.firstName} ${formData.lastName}`
: "-"
}}
</div>
<q-skeleton v-else type="text" />
</span>
</div>
<q-resize-observer @resize="onResize" />
<q-card-section class="q-pa-md">
<div class="row">
<div class="col-2 text-center self-center">
<q-avatar :size="sizeImg" rounded>
<div
class="col-2 text-center self-center"
style="display: flex; justify-content: center"
>
<q-avatar v-if="!isLoad" :size="sizeImg" rounded>
<q-img
:src="profileImg"
style="border-radius: 10px; object-fit: cover"
/>
</q-avatar>
<q-skeleton v-else type="QRadio" size="70px" />
</div>
<div class="col-10 column justify-center no-wrap">
<div class="row text-grey-6">
@ -247,7 +259,10 @@ onMounted(async () => {
<div class="row">
<div class="col-4 column">
<span>
{{ formData.position ? formData.position : "-" }}
<div v-if="!isLoad">
{{ formData.position ? formData.position : "-" }}
</div>
<q-skeleton v-else type="text" width="90px" />
</span>
<span>
{{
@ -258,16 +273,22 @@ onMounted(async () => {
</span>
</div>
<div class="col-4">
{{
formData.posTypeName
? formData.posLevelName
? `${formData.posTypeName}(${formData.posLevelName})`
: formData.posTypeName
: "-"
}}
<div v-if="!isLoad">
{{
formData.posTypeName
? formData.posLevelName
? `${formData.posTypeName}(${formData.posLevelName})`
: formData.posTypeName
: "-"
}}
</div>
<q-skeleton v-else type="text" width="90px" />
</div>
<div class="col-4">
{{ formData.org ? formData.org : "-" }}
<div v-if="!isLoad">
{{ formData.org ? formData.org : "-" }}
</div>
<q-skeleton v-else type="text" width="90px" />
</div>
</div>
</div>
@ -278,21 +299,27 @@ onMounted(async () => {
<div v-else class="col-12">
<q-card bordered>
<div class="bg-grey-1 row q-pa-sm items-center">
<span class="text-teal text-weight-bold text-body2">{{
formData.firstName
? `${formData.prefix}${formData.firstName} ${formData.lastName}`
: "-"
}}</span>
<span class="text-teal text-weight-bold text-body2">
<div v-if="!isLoad">
{{
formData.firstName
? `${formData.prefix}${formData.firstName} ${formData.lastName}`
: "-"
}}
</div>
<q-skeleton v-else type="text" />
</span>
</div>
<q-resize-observer @resize="onResize" />
<q-card-section>
<div class="text-center q-mt-md">
<q-avatar :size="sizeImg" rounded>
<div class="text-center q-mt-md" style="display: flex;justify-content: center;">
<q-avatar v-if="!isLoad" :size="sizeImg" rounded>
<img
:src="profileImg"
style="border-radius: 10px; object-fit: cover"
/>
</q-avatar>
<q-skeleton v-else type="QRadio" size="70px" />
</div>
</q-card-section>
@ -302,25 +329,34 @@ onMounted(async () => {
<q-item-label class="text-grey-6"
>ตำแหน่งในสายงาน</q-item-label
>
<q-item-label>{{
formData.position ? formData.position : "-"
}}</q-item-label>
<q-item-label>
<div v-if="!isLoad">
{{ formData.position ? formData.position : "-" }}
</div>
<q-skeleton v-else type="text" />
</q-item-label>
</q-item-section>
</q-item>
<q-item>
<q-item-section>
<q-item-label class="text-grey-6">ระดับ</q-item-label>
<q-item-label>{{
formData.posLevelName ? formData.posLevelName : "-"
}}</q-item-label>
<q-item-label>
<div v-if="!isLoad">
{{ formData.posLevelName ? formData.posLevelName : "-" }}
</div>
<q-skeleton v-else type="text" />
</q-item-label>
</q-item-section>
</q-item>
<q-item>
<q-item-section>
<q-item-label class="text-grey-6">สังกัด</q-item-label>
<q-item-label>{{
formData.org ? formData.org : "-"
}}</q-item-label>
<q-item-label>
<div v-if="!isLoad">
{{ formData.org ? formData.org : "-" }}
</div>
<q-skeleton v-else type="text" />
</q-item-label>
</q-item-section>
</q-item>
</q-list>
@ -361,6 +397,7 @@ onMounted(async () => {
</div>
<div class="q-mt-sm">
<d-table
v-if="!isLoad"
flat
dense
bordered
@ -442,6 +479,7 @@ onMounted(async () => {
</div>
</template>
</d-table>
<SkeletonTable v-else :columns="columns" />
</div>
</q-card>
</div>