hrms-user/src/modules/06_evaluate/components/step/step3.vue

<script setup lang="ts">
import { ref, onMounted } from "vue";
import http from "@/plugins/http";
import config from "@/app.config";
import { useQuasar } from "quasar";
import axios from "axios";

import { useCounterMixin } from "@/stores/mixin";
import { useEvaluateStore } from "@/modules/06_evaluate/store";

const $q = useQuasar();
const store = useEvaluateStore();
const mixin = useCounterMixin();
const { showLoader, hideLoader, messageError } = mixin;

const props = defineProps({
  evaluateId: {
    type: String,
  },
});
const emit = defineEmits(["update:file"]);

const selectedItem = ref(1);
const fileName = ref([
  "1-แบบพิจารณาคุณสมบัติบุคคล",
  "2-แบบแสดงรายละเอียดการเสนอผลงาน",
  "3-แบบตรวจสอบความถูกต้องครบถ้วนของข้อมูลเพื่อประกอบการคัดเลือกบุคคล (เอกสารแบบ ก.)",
  "4-แบบประเมินคุณลักษณะบุคคล",
  "5-แบบสรุปข้อมูลของผู้ขอรับการคัดเลือก (เอกสารหมายเลข 9)",
  "6-ผลงานที่จะส่งประเมิน (เอกสารหมายเลข 11)",
]);

function handleItemClick(itemNumber: number) {
  store.tabPanels = itemNumber.toString();
  selectedItem.value = itemNumber;
  fetchDocument(fileName.value[itemNumber - 1]);
}
async function fetchDocument(fileName: string) {
  // showLoader();
  props.evaluateId &&
    (await http
      .get(config.API.loadFileDocument("เล่ม 1", props.evaluateId, fileName))
      .then((res) => {
        downloadFile(res.data.downloadUrl);
      })
      .catch((err) => {
        messageError($q, err);
      }));
}

async function downloadFile(url: string) {
  await axios
    .get(url, {
      responseType: "blob",
      headers: {
        "Content-Type": "application/json",
      },
    })
    .then((res) => {
      const blob = new Blob([res.data]);
      const objectUrl = URL.createObjectURL(blob);

      emit("update:file", objectUrl);
    })
    .catch((err) => {
      messageError($q, err);
    })
    .finally(() => {
      hideLoader();
    });
}

onMounted(async () => {
  await fetchDocument(fileName.value[selectedItem.value - 1]);
});
</script>

<template>
  <q-list separator>
    <q-item
      clickable
      v-ripple
      :active="selectedItem === 1 ? true : false"
      active-class="text-primary"
      @click="handleItemClick(1)"
    >
      <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)"
    >
      <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)"
    >
      <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)"
    >
      <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)"
    >
      <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)"
    >
      <q-item-section> ผลงานที่จะส่งประเมิน (เอกสารหมายเลข 11) </q-item-section>
    </q-item>
  </q-list>
</template>

<style scoped></style>