ปรับ Eva

src/modules/06_evaluate/components/step/step3.vue

@@ -22,13 +22,23 @@ const evaluateId = ref<string>(route.params.id.toString());
 const emit = defineEmits(["update:file"]);
 
 const selectedItem = ref(1);
-const fileName = ref([
-  "1-แบบพิจารณาคุณสมบัติบุคคล",
-  "2-แบบแสดงรายละเอียดการเสนอผลงาน",
-  "3-แบบตรวจสอบความถูกต้องครบถ้วนของข้อมูลเพื่อประกอบการคัดเลือกบุคคล (เอกสารแบบ ก)",
-  "4-แบบประเมินคุณลักษณะบุคคล",
-  "5-แบบสรุปข้อมูลของผู้ขอรับการคัดเลือก (เอกสารหมายเลข 9)",
-  "6-ผลงานที่จะส่งประเมิน (เอกสารหมายเลข 11)",
+const formTemplates = ref([
+  {
+    title: "แบบพิจารณาคุณสมบัติบุคคล",
+    fileName: "1-แบบพิจารณาคุณสมบัติบุคคล",
+  },
+  {
+    title: "แบบแสดงรายละเอียดการเสนอผลงาน",
+    fileName: "2-แบบแสดงรายละเอียดการเสนอผลงาน",
+  },
+  {
+    title: "แบบประเมินคุณลักษณะบุคคล",
+    fileName: "4-แบบประเมินคุณลักษณะบุคคล",
+  },
+  {
+    title: "ผลงานที่จะส่งประเมิน (เอกสารหมายเลข 11)",
+    fileName: "6-ผลงานที่จะส่งประเมิน (เอกสารหมายเลข 11)",
+  },
 ]);
 
 /**
@@ -38,7 +48,7 @@ const fileName = ref([
 function handleItemClick(itemNumber: number) {
   store.tabPanels = itemNumber.toString();
   selectedItem.value = itemNumber;
-  fetchDocument(fileName.value[itemNumber - 1]);
+  fetchDocument(formTemplates.value[itemNumber - 1].fileName);
 }
 
 /**
@@ -50,14 +60,14 @@ async function fetchDocument(fileName: string) {
   evaluateId.value &&
     (await http
       .get(config.API.loadFileDocument("เล่ม 1", evaluateId.value, fileName))
-      .then((res) => {
-        downloadFile(res.data.downloadUrl);
+      .then(async (res) => {
+        await downloadFile(res.data.downloadUrl);
       })
       .catch((err) => {
         messageError($q, err);
       })
       .finally(() => {
-        showLoader();
+        hideLoader();
       }));
 }
 
@@ -66,7 +76,6 @@ async function fetchDocument(fileName: string) {
  * @param url ลิงก์ดาวน์โหลดไฟล์
  */
 async function downloadFile(url: string) {
-  showLoader();
   await axios
     .get(url, {
       responseType: "blob",
@@ -81,84 +90,28 @@ async function downloadFile(url: string) {
     })
     .catch((err) => {
       messageError($q, err);
-    })
-    .finally(() => {
-      hideLoader();
     });
 }
 
 /** HooK lifecycle*/
 onMounted(async () => {
-  await fetchDocument(fileName.value[selectedItem.value - 1]);
+  await fetchDocument(formTemplates.value[selectedItem.value - 1].fileName);
 });
 </script>
 
 <template>
   <q-list separator>
     <q-item
+      v-for="(item, index) in formTemplates"
+      :key="index"
       clickable
       v-ripple
-      :active="selectedItem === 1 ? true : false"
+      :active="selectedItem === index + 1 ? true : false"
       active-class="text-primary"
-      @click="handleItemClick(1)"
+      @click="handleItemClick(index + 1)"
       class="cursor-pointer"
     >
-      <q-item-section>แบบพิจารณาคุณสมบัติบุคคล</q-item-section>
-    </q-item>
-    <q-item
-      clickable
-      v-ripple
-      :active="selectedItem === 2 ? true : false"
-      active-class="text-primary"
-      @click="handleItemClick(2)"
-      class="cursor-pointer"
-    >
-      <q-item-section>แบบแสดงรายละเอียดการเสนอผลงาน</q-item-section>
-    </q-item>
-    <q-item
-      clickable
-      v-ripple
-      :active="selectedItem === 3 ? true : false"
-      active-class="text-primary"
-      @click="handleItemClick(3)"
-      class="cursor-pointer"
-    >
-      <q-item-section
-        >แบบตรวจสอบความถูกต้องครบถ้วนของข้อมูลเพื่อประกอบการคัดเลือกบุคคล
-        (เอกสารแบบ ก)</q-item-section
-      >
-    </q-item>
-    <q-item
-      clickable
-      v-ripple
-      :active="selectedItem === 4 ? true : false"
-      active-class="text-primary"
-      @click="handleItemClick(4)"
-      class="cursor-pointer"
-    >
-      <q-item-section> แบบประเมินคุณลักษณะบุคคล </q-item-section>
-    </q-item>
-    <q-item
-      clickable
-      v-ripple
-      :active="selectedItem === 5 ? true : false"
-      active-class="text-primary"
-      @click="handleItemClick(5)"
-      class="cursor-pointer"
-    >
-      <q-item-section>
-        แบบสรุปข้อมูลของผู้ขอรับการคัดเลือก (เอกสารหมายเลข 9)
-      </q-item-section>
-    </q-item>
-    <q-item
-      clickable
-      v-ripple
-      :active="selectedItem === 6 ? true : false"
-      active-class="text-primary"
-      @click="handleItemClick(6)"
-      class="cursor-pointer"
-    >
-      <q-item-section> ผลงานที่จะส่งประเมิน (เอกสารหมายเลข 11) </q-item-section>
+      <q-item-section>{{ item.title }}</q-item-section>
     </q-item>
   </q-list>
 </template>