fix: load skeleton

2025-08-15 11:00:12 +07:00 · 2025-08-15 11:00:12 +07:00 · 01dc0ad348
commit 01dc0ad348
parent 016f9f0642
5 changed files with 85 additions and 66 deletions
--- a/src/modules/08_KPI/components/Tab/01_Assessment.vue
+++ b/src/modules/08_KPI/components/Tab/01_Assessment.vue
@ -270,6 +270,7 @@ const groupNo = computed(() => {
 });

 onMounted(() => {
+  store.indicatorWeightTotal = 0
  getCriteria();
  fetchListPlanned();
  fetchListRole();
--- a/src/modules/08_KPI/components/Tab/Dialog/DialogDevelop.vue
+++ b/src/modules/08_KPI/components/Tab/Dialog/DialogDevelop.vue
@ -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;
--- a/src/modules/08_KPI/views/form.vue
+++ b/src/modules/08_KPI/views/form.vue
@ -598,19 +598,20 @@ async function uploadFileDoc(uploadUrl: string, file: any) {
 }

 /** ดึงข้อมูล */
+const isLoadUpload = ref<boolean>(false);
 async function getData() {
-  showLoader();
+  isLoadUpload.value = true;
  await http
    .get(config.API.file("แบบกำหนดข้อตกลง", "KPI", id.value))
    .then((res) => {
      fileList.value = res.data;
+      isLoadUpload.value = false;
    })
    .catch((e) => {
      messageError($q, e);
+      isLoadUpload.value = false;
    })
-    .finally(() => {
-      hideLoader();
-    });
+    .finally(() => {});
 }

 /**
@ -1355,7 +1356,11 @@ onMounted(async () => {
            </q-file>
          </div>

-          <div v-if="fileList.length > 0" class="col-xs-12 row">
+          <div class="col-12" v-if="isLoadUpload">
+            <q-skeleton height="50px" />
+          </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
--- a/src/modules/08_KPI/views/main.vue
+++ b/src/modules/08_KPI/views/main.vue
@ -162,9 +162,11 @@ const pagination = ref({
 * ดึงข้อมูลรอบการประเมิน
 * @param type
 */
+const isLoadDialog = ref<boolean>(false);
 async function fetchRoundOption(type: string) {
  const y = type === "main" ? year.value : yearDialog.value;
-  isLoadOp.value = true;
+  type == "main" && (isLoadOp.value = true);
+  type == "dialog" && (isLoadDialog.value = true);
  await http
    .get(
      config.API.kpiPeriod + `?page=${1}&pageSize=${10}&keyword=${""}&year=${y}`
@ -199,7 +201,8 @@ async function fetchRoundOption(type: string) {
      messageError($q, err);
    })
    .finally(() => {
-      isLoadOp.value = false;
+      type == "main" && (isLoadOp.value = false);
+      type == "dialog" && (isLoadDialog.value = false);
    });
 }

@ -207,7 +210,7 @@ async function fetchRoundOption(type: string) {
 *  fetch รายการขอรับประเมินผลการปฏิบัติราชการระดับบุคคล
 */
 async function fetchList() {
-  isLoad.value = true
+  isLoad.value = true;
  let queryParams = {
    page: formQuery.page,
    pageSize: formQuery.pageSize,
@ -225,10 +228,10 @@ async function fetchList() {
      total.value = data.total;
      totalList.value = Math.ceil(data.total / formQuery.pageSize);
      rows.value = data.data;
-      isLoad.value = false
+      isLoad.value = false;
    })
    .catch((err) => {
-      isLoad.value = false
+      isLoad.value = false;
      messageError($q, err);
    })
    .finally(() => {});
@ -612,7 +615,7 @@ onMounted(async () => {

            <div class="col-12">
              <d-table
-              v-if="!isLoad"
+                v-if="!isLoad"
                ref="table"
                :columns="columns"
                :rows="rows"
@ -743,6 +746,7 @@ onMounted(async () => {

            <div class="col-12">
              <q-select
+              v-if="!isLoadDialog"
                :readonly="yearDialog === null"
                v-model="formRound.kpiPeriodId"
                outlined
@ -756,6 +760,7 @@ onMounted(async () => {
                :rules="[(val:DataOptions) => !!val.id || `${'กรุณาเลือกรอบการประเมิน'}`]"
                @update:model-value="checkClosed"
              />
+              <q-skeleton type="QInput" height="40px" v-else/>
            </div>

            <div class="col-12">
--- a/src/modules/09_scholarship/views/main.vue
+++ b/src/modules/09_scholarship/views/main.vue
@ -88,7 +88,7 @@ const visibleColumns = ref<string[]>(["scholarshipYear", "scholarshipType"]);

 /** ดึงข้อมูล */
 async function getData() {
-  showLoader();
+  
  await http
    .get(
      config.API.developmentScholarship +
@ -96,12 +96,13 @@ async function getData() {
    )
    .then(async (res) => {
      rows.value = res.data.result;
+      isLoad.value = false
    })
    .catch((e) => {
      messageError($q, e);
    })
    .finally(() => {
-      hideLoader();
+      isLoad.value = false
    });
 }

@ -127,19 +128,20 @@ function onEdit(id: string) {
 // );

 async function getProfileId() {
+  isLoad.value = true
  if (dataStore.profileId) {
    profilId.value = dataStore.profileId;
  } else {
-    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 {
-      isLoad.value = false;
+      
    }
  }