ประเมินบุคคล ==> ปรับ load

2024-08-26 16:37:16 +07:00 · 2024-08-26 16:37:16 +07:00 · e09d0afe73
commit e09d0afe73
parent eac2fd5878
10 changed files with 223 additions and 180 deletions
--- a/src/modules/12_evaluatePersonal/components/Detail/Tab1.vue
+++ b/src/modules/12_evaluatePersonal/components/Detail/Tab1.vue
@ -44,6 +44,7 @@ const props = defineProps({
 });

 const id = ref<string>(route.params.id as string); // id รายการประเมิน
+const isLoadView = ref<boolean>(false);

 const modalHistory = ref<boolean>(false);
 const formCommand = reactive<FormCommand>({
@ -72,6 +73,7 @@ function updateformCommand(val: any, ref: any) {

 /** function เช็คขั้นตอน*/
 async function fetchCheckStep() {
+  isLoadView.value = false;
  showLoader();
  await http
    .get(config.API.evaluateGetStep(id.value))
@ -100,12 +102,15 @@ async function fetchCheckStep() {

      store.currentStep = step;
      store.step = step;
+      isLoadView.value = true;
    })
    .catch((e) => {
      messageError($q, e);
    })
    .finally(() => {
-      hideLoader();
+      setTimeout(() => {
+        hideLoader();
+      }, 3000);
    });
 }

@ -132,7 +137,7 @@ onMounted(async () => {
                  : "ประเมินชำนาญการ"
              }}
            </div>
-            <q-space/>
+            <q-space />
            <div>
              <q-btn
                flat
@ -156,7 +161,7 @@ onMounted(async () => {
      </div>
    </div>

-    <div class="col-xs-12 col-sm-9 q-pa-md">
+    <div class="col-xs-12 col-sm-9 q-pa-md" v-if="isLoadView">
      <div class="col-12 row q-pt-md">
        <div class="toptitle2">
          {{ store.step }}.{{ store.titel[store.step - 1] }}
@ -176,15 +181,15 @@ onMounted(async () => {
          "
        >
          <q-card flat bordered class="col-12">
-              <Step1 v-if="store.step === 1" :data="props.data" />
-              <Step2 v-if="store.step === 2" @update:form="updateformCommand" />
-              <Step3 v-if="store.step === 3" :step="store.step" />
-              <Step4 v-if="store.step === 4" />
-              <Step5 v-if="store.step === 5" />
-              <Step6 v-if="store.step === 6" />
-              <Step7 v-if="store.step === 7" />
-              <Step8 v-if="store.step === 8" />
-              <Step9 v-if="store.step === 9" />
+            <Step1 v-if="store.step === 1" :data="props.data" />
+            <Step2 v-if="store.step === 2" @update:form="updateformCommand" />
+            <Step3 v-if="store.step === 3" :step="store.step" />
+            <Step4 v-if="store.step === 4" />
+            <Step5 v-if="store.step === 5" />
+            <Step6 v-if="store.step === 6" />
+            <Step7 v-if="store.step === 7" />
+            <Step8 v-if="store.step === 8" />
+            <Step9 v-if="store.step === 9" />
          </q-card>
        </div>
        <div
--- a/src/modules/12_evaluatePersonal/components/Detail/step/step2.vue
+++ b/src/modules/12_evaluatePersonal/components/Detail/step/step2.vue
@ -49,7 +49,9 @@ async function fetchSigner() {
      messageError($q, e);
    })
    .finally(() => {
-      hideLoader();
+      setTimeout(() => {
+        hideLoader();
+      }, 1000);
    });
 }
 onMounted(async () => {
--- a/src/modules/12_evaluatePersonal/components/Detail/step/step4.vue
+++ b/src/modules/12_evaluatePersonal/components/Detail/step/step4.vue
@ -333,21 +333,23 @@ async function checkDoc10() {
        "10-ประกาศผลการคัดเลือกบุคคล (เอกสารหมายเลข 10)"
      )
    )
-    .then((res: any) => {
+    .then(async (res) => {
      download10Url.value = res.data.downloadUrl;
-      fetchProfile();
+      await fetchProfile();
    })
    .catch(() => {
      //   messageError($q, e);
    })
    .finally(() => {
-      hideLoader();
+      setTimeout(() => {
+        hideLoader();
+      }, 2000);
    });
 }

 /** function เรียกข้แมูลคุณสมบัติ*/
 async function fetchProfile() {
-  // showLoader();
+  showLoader();
  await http
    .get(config.API.evaluateGetDetail(id.value))
    .then((res) => {
@ -358,7 +360,9 @@ async function fetchProfile() {
      messageError($q, err);
    })
    .finally(() => {
-      // hideLoader();
+      setTimeout(() => {
+        hideLoader();
+      }, 1500);
    });
 }

@ -379,13 +383,14 @@ async function fetchDataSigner() {
      messageError($q, e);
    })
    .finally(() => {
-      hideLoader();
+      setTimeout(() => {
+        hideLoader();
+      }, 1500);
    });
 }

 onMounted(async () => {
-  await checkDoc10();
-  await fetchDataSigner();
+  await Promise.all([checkDoc10(), fetchDataSigner()]);
 });
 </script>

--- a/src/modules/12_evaluatePersonal/components/Detail/step/step5.vue
+++ b/src/modules/12_evaluatePersonal/components/Detail/step/step5.vue
@ -189,14 +189,16 @@ async function getDate() {
      messageError($q, e);
    })
    .finally(() => {
-      hideLoader();
+      setTimeout(() => {
+        hideLoader();
+      }, 1500);
    });
 }

 const download10Url = ref<string>("");
 /** function เช็คไฟล์อัปโหลด*/
 async function checkDocResult() {
-  // showLoader();
+  showLoader();
  await http
    .get(
      config.API.evaluationPatchData(
@ -208,11 +210,10 @@ async function checkDocResult() {
    .then((res: any) => {
      download10Url.value = res.data.downloadUrl;
    })
-    .catch(() => {
-      //   messageError($q, e);
-    })
    .finally(() => {
-      // hideLoader();
+      setTimeout(() => {
+        hideLoader();
+      }, 1500);
    });
 }

@ -234,14 +235,14 @@ async function fetchDataSigner() {
      messageError($q, e);
    })
    .finally(() => {
-      hideLoader();
+      setTimeout(() => {
+        hideLoader();
+      }, 1500);
    });
 }

 onMounted(async () => {
-  await getDate();
-  await checkDocResult();
-  await fetchDataSigner();
+  await Promise.all([getDate(), checkDocResult(), fetchDataSigner()]);
 });
 </script>

--- a/src/modules/12_evaluatePersonal/components/Detail/step/step6.vue
+++ b/src/modules/12_evaluatePersonal/components/Detail/step/step6.vue
@ -45,7 +45,9 @@ async function getDate() {
      messageError($q, e);
    })
    .finally(() => {
-      hideLoader();
+      setTimeout(() => {
+        hideLoader();
+      }, 1500);
    });
 }

@ -67,23 +69,26 @@ async function getSigner() {
      }
    })
    .catch((e) => {
-      // messageError($q, e);
+      messageError($q, e);
    })
    .finally(() => {
-      hideLoader();
+      setTimeout(() => {
+        hideLoader();
+      }, 1500);
    });
 }

 onMounted(async () => {
-  await getSigner();
-  await getDate();
+  await Promise.all([getSigner(), getDate()]);
 });
 </script>

 <template>
  <div class="row q-col-gutter-sm q-pa-sm">
    <div class="col-12">
-      <q-banner class="text-weight-bold text-red-14 bg-red-1 text-center rounded-borders">
+      <q-banner
+        class="text-weight-bold text-red-14 bg-red-1 text-center rounded-borders"
+      >
        <div class="text-weight-bold">
          <q-icon name="info_outline" color="red-14" size="24px" />
          วันสุดท้ายของการส่งผลงานคือวันที่ {{ dateEndPrepareDoc2 }}
--- a/src/modules/12_evaluatePersonal/components/Detail/step/step8.vue
+++ b/src/modules/12_evaluatePersonal/components/Detail/step/step8.vue
@ -191,7 +191,7 @@ async function confirmApprove() {
    if (hasError.every((result) => result === true)) {
      dialogConfirm(
        $q,
-        () => {
+        async () => {
          showLoader();
          const data = {
            metadata: {
@ -200,7 +200,7 @@ async function confirmApprove() {
              additionalProp3: position.value,
            },
          };
-          http
+          await http
            .patch(
              config.API.evaluationPatchData(
                "เล่ม 2",
@ -258,7 +258,9 @@ async function fetchProfile() {
      messageError($q, err);
    })
    .finally(() => {
-      hideLoader();
+      setTimeout(() => {
+        hideLoader();
+      }, 2000);
    });
 }

@ -280,7 +282,9 @@ async function checkDocEdit() {
      // messageError($q, e);
    })
    .finally(() => {
-      hideLoader();
+      setTimeout(() => {
+        hideLoader();
+      }, 2000);
    });
 }

@ -296,7 +300,7 @@ const downloadFile6 = ref<string>("");
 * @param fileName ชื่อไฟล์
 */
 async function downloadFileList(fileName: string) {
-  // showLoader();
+  showLoader();
  await http
    .get(config.API.evaluationFilebyId("เล่ม 2", id.value, fileName))
    .then((res) => {
@ -316,10 +320,12 @@ async function downloadFileList(fileName: string) {
      } else if (fileName === "แบบสรุปผลการประเมิน (เอกสารแบบ ง)") {
        downloadFile6.value = res.data.downloadUrl;
      }
+    })
+    .finally(() => {
+      setTimeout(() => {
+        hideLoader();
+      }, 2000);
    });
-  // .finally(() => {
-  //   hideLoader();
-  // });
 }

 const author = ref<string>("");
@ -347,22 +353,26 @@ async function fetchDataSigner() {
      messageError($q, e);
    })
    .finally(() => {
-      hideLoader();
+      setTimeout(() => {
+        hideLoader();
+      }, 2000);
    });
 }

 onMounted(async () => {
-  fetchProfile();
-  fetchDataSigner();
-  downloadFileList(
-    "แบบตรวจสอบความถูกต้องครบถ้วนของข้อมูลประกอบการประเมินผลงาน (เอกสารแบบ ค)"
-  );
-  downloadFileList("บัญชีแสดงการรับ-ส่งผลงาน (เอกสารหมายเลข 15)");
-  downloadFileList("แบบประเมินผลงาน (เอกสารหมายเลข 16)");
-  downloadFileList("แบบแสดงการประเมินผลงาน (เอกสารหมายเลข 17)");
-  downloadFileList("แบบรายงานผลการประเมินบุคคล (เอกสารหมายเลข 18)");
-  downloadFileList("แบบสรุปผลการประเมิน (เอกสารแบบ ง)");
-  checkDocEdit();
+  await Promise.all([
+    fetchProfile(),
+    fetchDataSigner(),
+    downloadFileList(
+      "แบบตรวจสอบความถูกต้องครบถ้วนของข้อมูลประกอบการประเมินผลงาน (เอกสารแบบ ค)"
+    ),
+    downloadFileList("บัญชีแสดงการรับ-ส่งผลงาน (เอกสารหมายเลข 15)"),
+    downloadFileList("แบบประเมินผลงาน (เอกสารหมายเลข 16)"),
+    downloadFileList("แบบแสดงการประเมินผลงาน (เอกสารหมายเลข 17)"),
+    downloadFileList("แบบรายงานผลการประเมินบุคคล (เอกสารหมายเลข 18)"),
+    downloadFileList("แบบสรุปผลการประเมิน (เอกสารแบบ ง)"),
+    checkDocEdit(),
+  ]);
 });
 </script>

--- a/src/modules/12_evaluatePersonal/components/Detail/viewTab2/CardDirector.vue
+++ b/src/modules/12_evaluatePersonal/components/Detail/viewTab2/CardDirector.vue
@ -99,7 +99,6 @@ async function onClickAdd() {

 function onClickClose() {
  modalAddDirector.value = false;
-  props.fetchdata();
 }

 /**
@ -124,14 +123,15 @@ function returnDirector(data: any) {
      .put(config.API.evaluationChooseDirectors(id.value), {
        directors: dataList,
      })
-      .then(() => {
-        success($q, "บันทึกสำเร็จ");
+      .then(async () => {
+        await props.fetchdata();
+        await success($q, "บันทึกสำเร็จ");
+        await onClickClose();
      })
      .catch((e) => {
        messageError($q, e);
      })
      .finally(() => {
-        onClickClose();
        hideLoader();
      });
  });
--- a/src/modules/12_evaluatePersonal/components/Detail/viewTab2/CardMeet.vue
+++ b/src/modules/12_evaluatePersonal/components/Detail/viewTab2/CardMeet.vue
@ -125,7 +125,6 @@ function onClickAdd() {

 function onClickClose() {
  modalAdd.value = false;
-  props.fetchdata();
 }

 /**
@ -150,14 +149,15 @@ function returnData(data: any) {
      .put(config.API.evaluationChooseMeeting(id.value), {
        meetings: dataList,
      })
-      .then((res) => {
-        success($q, "บันทึกสำเร็จ");
+      .then(async () => {
+        await props.fetchdata();
+        await success($q, "บันทึกสำเร็จ");
+        await onClickClose();
      })
      .catch((e) => {
        messageError($q, e);
      })
      .finally(() => {
-        onClickClose();
        hideLoader();
      });
  });
@ -260,7 +260,7 @@ watch(
          </q-tr>
        </template>
        <template v-slot:body="props">
-          <q-tr :props="props" class="cursor-pointer">
+          <q-tr :props="props">
            <q-td v-for="col in props.cols" :key="col.name" :props="props">
              <div v-if="col.name == 'no'">
                {{ props.rowIndex + 1 }}
--- a/src/modules/12_evaluatePersonal/components/Detail/viewstep/viewStep1.vue
+++ b/src/modules/12_evaluatePersonal/components/Detail/viewstep/viewStep1.vue
@ -24,7 +24,7 @@ const {
  columnTraining,
  columnProjectsProposed,
 } = store;
-const { date2Thai } = mixin;
+const { date2Thai, showLoader, hideLoader } = mixin;

 const props = defineProps({
  data: {
@ -57,6 +57,7 @@ function formattedNumber(x: number) {

 onMounted(() => {
  if (props.data) {
+    showLoader();
    formDetail.prefix = props.data.prefix;
    formDetail.fullName = props.data.fullName;
    formDetail.position = props.data.position;
@ -123,14 +124,21 @@ onMounted(() => {
        }))
      : [];
    formDetail.assessments = props.data.assessments;
+    setTimeout(() => {
+      hideLoader();
+    }, 1000);
  }
 });
 </script>

 <template>
-  <q-card bordered class="col-12 row shadow-0 q-pa-sm" :style="$q.screen.lt.sm ? '' : 'max-height: 64vh; overflow: scroll;' ">
+  <q-card
+    bordered
+    class="col-12 row shadow-0 q-pa-sm"
+    :style="$q.screen.lt.sm ? '' : 'max-height: 64vh; overflow: scroll;'"
+  >
    <div class="row col-12">
-      <q-card class="col-12  cardSp1" bordered>
+      <q-card class="col-12 cardSp1" bordered>
        <div class="text-weight-bold row items-center bg-grey-2 col-12">
          <span class="q-ml-lg q-my-sm">ข้อมูลส่วนตัว</span>
        </div>
@ -227,122 +235,125 @@ onMounted(() => {
        </div>
      </q-card>

-      <q-card class="col-12  cardSp1" bordered>
+      <q-card class="col-12 cardSp1" bordered>
        <div class="text-weight-bold row items-center bg-grey-2 col-12">
          <span class="q-ml-lg q-my-sm">ประวัติการศึกษา </span>
        </div>
        <div class="col-12"><q-separator /></div>
-        <div class="row col-12 q-pa-sm" v-if="formDetail.educations && formDetail.educations.length > 0">
-            <div
-              class="row q-col-gutter-sm"
-              v-for="(education, index) in formDetail.educations"
-              :key="index"
-            >
-              <div class="col-xs-6 col-sm-4 col-md-3">
-                <q-input
-                  borderless
-                  readonly
-                  :model-value="education.educationLevel"
-                  label="ระดับศึกษา"
-                />
-              </div>
+        <div
+          class="row col-12 q-pa-sm"
+          v-if="formDetail.educations && formDetail.educations.length > 0"
+        >
+          <div
+            class="row q-col-gutter-sm"
+            v-for="(education, index) in formDetail.educations"
+            :key="index"
+          >
+            <div class="col-xs-6 col-sm-4 col-md-3">
+              <q-input
+                borderless
+                readonly
+                :model-value="education.educationLevel"
+                label="ระดับศึกษา"
+              />
+            </div>

-              <div class="col-xs-6 col-sm-4 col-md-3">
-                <q-input
-                  borderless
-                  readonly
-                  :model-value="education.institute"
-                  label="สถานศึกษา"
-                />
-              </div>
+            <div class="col-xs-6 col-sm-4 col-md-3">
+              <q-input
+                borderless
+                readonly
+                :model-value="education.institute"
+                label="สถานศึกษา"
+              />
+            </div>

-              <div class="col-xs-6 col-sm-4 col-md-3">
-                <q-input
-                  borderless
-                  :model-value="date2Thai(education.startDate)"
-                  readonly
-                  label="ตั้งแต่"
-                >
-                </q-input>
-              </div>
+            <div class="col-xs-6 col-sm-4 col-md-3">
+              <q-input
+                borderless
+                :model-value="date2Thai(education.startDate)"
+                readonly
+                label="ตั้งแต่"
+              >
+              </q-input>
+            </div>

-              <div class="col-xs-6 col-sm-4 col-md-3">
-                <q-input
-                  borderless
-                  :model-value="date2Thai(education.endDate)"
-                  readonly
-                  label="ถึง"
-                >
-                </q-input>
-              </div>
-              <div class="col-xs-6 col-sm-4 col-md-3">
-                <q-input
-                  borderless
-                  :model-value="date2Thai(education.finishDate)"
-                  readonly
-                  label="วันที่สำเร็จการศึกษา"
-                >
-                </q-input>
-              </div>
+            <div class="col-xs-6 col-sm-4 col-md-3">
+              <q-input
+                borderless
+                :model-value="date2Thai(education.endDate)"
+                readonly
+                label="ถึง"
+              >
+              </q-input>
+            </div>
+            <div class="col-xs-6 col-sm-4 col-md-3">
+              <q-input
+                borderless
+                :model-value="date2Thai(education.finishDate)"
+                readonly
+                label="วันที่สำเร็จการศึกษา"
+              >
+              </q-input>
+            </div>

-              <div class="col-xs-6 col-sm-4 col-md-3">
-                <q-input
-                  borderless
-                  readonly
-                  :model-value="education.isEducation ? 'ใช่' : 'ไม่ใช่'"
-                  label="วุฒิการศึกษาในตําแหน่ง"
-                />
-              </div>
+            <div class="col-xs-6 col-sm-4 col-md-3">
+              <q-input
+                borderless
+                readonly
+                :model-value="education.isEducation ? 'ใช่' : 'ไม่ใช่'"
+                label="วุฒิการศึกษาในตําแหน่ง"
+              />
+            </div>

-              <div class="col-xs-6 col-sm-4 col-md-3">
-                <q-input
-                  borderless
-                  readonly
-                  :model-value="education.degree"
-                  label="วุฒิการศึกษา"
-                />
-              </div>
+            <div class="col-xs-6 col-sm-4 col-md-3">
+              <q-input
+                borderless
+                readonly
+                :model-value="education.degree"
+                label="วุฒิการศึกษา"
+              />
+            </div>

-              <div class="col-xs-6 col-sm-4 col-md-3">
-                <q-input
-                  borderless
-                  readonly
-                  :model-value="education.field"
-                  label="สาขาวิชา/ทาง"
-                />
-              </div>
-              <div class="col-xs-6 col-sm-4 col-md-3">
-                <q-input
-                  borderless
-                  readonly
-                  :model-value="education.fundName"
-                  label="ทุน"
-                />
-              </div>
+            <div class="col-xs-6 col-sm-4 col-md-3">
+              <q-input
+                borderless
+                readonly
+                :model-value="education.field"
+                label="สาขาวิชา/ทาง"
+              />
+            </div>
+            <div class="col-xs-6 col-sm-4 col-md-3">
+              <q-input
+                borderless
+                readonly
+                :model-value="education.fundName"
+                label="ทุน"
+              />
+            </div>

-              <div class="col-xs-6 col-sm-4 col-md-3">
-                <q-input
-                  borderless
-                  readonly
-                  :model-value="education.gpa"
-                  label="เกรดเฉลี่ย"
-                />
-              </div>
+            <div class="col-xs-6 col-sm-4 col-md-3">
+              <q-input
+                borderless
+                readonly
+                :model-value="education.gpa"
+                label="เกรดเฉลี่ย"
+              />
+            </div>

-              <div class="col-xs-6 col-sm-4 col-md-6">
-                <q-input
-                  borderless
-                  readonly
-                  :model-value="education.country"
-                  label="ประเทศ"
-                />
-              </div>
+            <div class="col-xs-6 col-sm-4 col-md-6">
+              <q-input
+                borderless
+                readonly
+                :model-value="education.country"
+                label="ประเทศ"
+              />
+            </div>
          </div>
        </div>
        <div v-else class="row col-12 q-pa-md">ไม่มีประวัติการศึกษา</div>
      </q-card>

-      <q-card class="col-12  cardSp1" bordered>
+      <q-card class="col-12 cardSp1" bordered>
        <div class="text-weight-bold row items-center bg-grey-2 col-12">
          <span class="q-ml-lg q-my-sm">ใบอนุญาตประกอบวิชาชีพ</span>
        </div>
@ -354,7 +365,7 @@ onMounted(() => {
        />
      </q-card>

-      <q-card class="col-12  cardSp1" bordered>
+      <q-card class="col-12 cardSp1" bordered>
        <div class="text-weight-bold row items-center bg-grey-2 col-12">
          <span class="q-ml-lg q-my-sm">ประวัติการรับราชการ</span>
        </div>
@ -363,26 +374,28 @@ onMounted(() => {
          <TableData :columns="columnSalaries" :row="formDetail.salaries" />
        </div>
      </q-card>
-      
+
      <q-card class="col-12 cardSp1" bordered>
        <div class="text-weight-bold row items-center bg-grey-2 col-12">
          <span class="q-ml-lg q-my-sm">ประวัติการฝึกอบรมดูงาน</span>
        </div>
        <div class="col-12"><q-separator /></div>
-        <TableData class="col-12" :columns="columnTraining" :row="formDetail.trainings"/>
+        <TableData
+          class="col-12"
+          :columns="columnTraining"
+          :row="formDetail.trainings"
+        />
      </q-card>

-      <q-card class="col-12  cardSp1" bordered>
+      <q-card class="col-12 cardSp1" bordered>
        <div class="text-weight-bold row items-center bg-grey-2 col-12">
          <span class="q-ml-lg q-my-sm">ประสบการณ์ในการปฏิบัติงาน </span>
        </div>
        <div class="col-12"><q-separator /></div>
-        <div class="col-12 q-pa-sm">
-          -
-        </div>
+        <div class="col-12 q-pa-sm">-</div>
      </q-card>

-      <q-card class="col-12  cardSp1" bordered>
+      <q-card class="col-12 cardSp1" bordered>
        <div class="text-weight-bold row items-center bg-grey-2 col-12">
          <span class="q-ml-lg q-my-sm">ผลงานที่เคยเสนอขอประเมิน (ถ้ามี)</span>
        </div>
@ -395,9 +408,9 @@ onMounted(() => {
  </q-card>
 </template>
 <style scoped>
-.cardSp1{
+.cardSp1 {
  border: 1px solid #d6dee1;
-  margin-bottom: 10px ;
+  margin-bottom: 10px;
  box-shadow: none !important;
 }
-</style>
+</style>
--- a/src/modules/12_evaluatePersonal/views/DetailPage.vue
+++ b/src/modules/12_evaluatePersonal/views/DetailPage.vue
@ -48,7 +48,9 @@ async function fetchFeature() {
      messageError($q, e);
    })
    .finally(() => {
-      hideLoader();
+      setTimeout(() => {
+        hideLoader();
+      }, 2000);
    });
 }