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-15 11:00:12 +07:00
parent 016f9f0642
commit 01dc0ad348
5 changed files with 85 additions and 66 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -30,7 +30,7 @@ const props = defineProps({
const route = useRoute();
const idKpi = ref<string>(route.params.id.toLocaleString());
const isLoadMain = defineModel<boolean>('isLoadMain',{required:true})
const isLoadMain = defineModel<boolean>("isLoadMain", { required: true });
const isLoad = ref<boolean>(false);
const development = ref<string[]>([]); //ตัวแปรเก็บ ตัวเลือกการพัฒนา
const reasonDevelopment70 = ref<string>(""); //อื่นๆ การลงมือปฏิบัติ (โดยผู้บังคับบัญชามอบหมาย)
@ -187,8 +187,6 @@ function close() {
reasonDevelopment20.value = "";
reasonDevelopment10.value = "";
development.value = [];
props.getAll?.();
}
/** บันทึกข้อมูลการพัฒนาตน */
@ -222,7 +220,7 @@ function onSubmit() {
selectTypeYear: formData.year ? formData.year.toString() : null,
selectTypeId: projectName.value ? projectName.value.id : null,
};
isLoadMain.value = true
isLoadMain.value = true;
http[id.value ? "put" : "post"](url, body)
.then((res) => {
close();
@ -238,9 +236,10 @@ function onSubmit() {
}
}
const isLoadYear = ref<boolean>(false);
async function getDataByYear() {
if (formData.year) {
showLoader();
isLoadYear.value = true;
http
.get(config.API.developmentMain + `/done?year=${formData.year}`)
.then(async (res) => {
@ -251,13 +250,14 @@ async function getDataByYear() {
messageError($q, e);
})
.finally(() => {
hideLoader();
isLoadYear.value = false;
});
}
}
const isLoadProject = ref<boolean>(false);
function getProjectDetail(val: any) {
showLoader();
isLoadProject.value = true;
http
.get(config.API.developmentMain + `/tab3_1/${val.id}`)
.then((res) => {
@ -285,7 +285,7 @@ function getProjectDetail(val: any) {
messageError($q, e);
})
.finally(() => {
hideLoader();
isLoadProject.value = false;
});
}
@ -429,7 +429,7 @@ watch(
</div>
<div class="col-3" v-if="choice == 'PROJECT'">
<q-select
v-if="!isLoad"
v-if="!isLoadYear"
outlined
dense
:rules="[(val:string) => !!val || `${'กรุณาเลือกโครงการ/หลักสูตรการฝึกอบรม'}`,]"
@ -458,7 +458,7 @@ watch(
</div>
<div class="col-12">
<q-input
v-if="!isLoad"
v-if="!isLoad && !isLoadProject"
v-model="formData.name"
outlined
dense
@ -480,7 +480,7 @@ watch(
>70 การลงมือปฏิบัติ (โดยผู้บังคับบัญชามอบหมาย)</span
>
<q-option-group
v-if="!isLoad"
v-if="!isLoad && !isLoadProject"
class="check_box q-mt-sm"
keep-color
color="primary"
@ -490,22 +490,23 @@ watch(
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>
<q-list v-else class="list-c">
<q-item
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>
</q-list>
<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-if="!isLoad && !isLoadProject"
v-model="reasonDevelopment70"
dense
outlined
@ -522,7 +523,7 @@ watch(
>20 การเรียนรู้จากผู้อื่น (Coach/Mentor/Consulting)</span
>
<q-option-group
v-if="!isLoad"
v-if="!isLoad && !isLoadProject"
class="check_box q-mt-sm"
keep-color
color="primary"
@ -531,21 +532,22 @@ 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>
<q-list v-else class="list-c">
<q-item
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>
</q-list>
<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-if="!isLoad && !isLoadProject"
v-model="reasonDevelopment20"
dense
outlined
@ -560,7 +562,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"
v-if="!isLoad && !isLoadProject"
class="check_box q-mt-sm"
keep-color
color="primary"
@ -569,21 +571,22 @@ 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>
<q-list v-else class="list-c">
<q-item
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>
</q-list>
<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-if="!isLoad && !isLoadProject"
v-model="reasonDevelopment10"
dense
outlined
@ -598,7 +601,7 @@ watch(
</div>
<div class="col-12">
<q-input
v-if="!isLoad"
v-if="!isLoad && !isLoadProject"
label="เป้าหมายการนำไปพัฒนางาน"
v-model="formData.target"
outlined
@ -627,7 +630,7 @@ watch(
</div>
<div class="col-8">
<q-input
v-if="!isLoad"
v-if="!isLoad && !isLoadProject"
class="inputgreen"
v-model="formData.achievement10"
outlined
@ -647,7 +650,7 @@ watch(
</div>
<div class="col-8">
<q-input
v-if="!isLoad"
v-if="!isLoad && !isLoadProject"
class="inputgreen"
v-model="formData.achievement5"
outlined
@ -667,7 +670,7 @@ watch(
</div>
<div class="col-8">
<q-input
v-if="!isLoad"
v-if="!isLoad && !isLoadProject"
class="inputgreen"
v-model="formData.achievement0"
outlined
@ -700,6 +703,9 @@ watch(
:deep(.check_box .q-checkbox) {
align-items: start;
}
:deep(.list-c .q-item) {
min-height: 30px;
}
.other_custom_input {
position: absolute;