hrms-mgt/src/modules/05_placement/components/probation/FormEvaluation/Template1Commader.vue

<script setup lang="ts">
import { ref, defineAsyncComponent, watch, onMounted, onUpdated } from "vue";
import { useCounterMixin } from "@/stores/mixin";
import { useQuasar } from "quasar";
import { useRoute, useRouter } from "vue-router";
import { useProbationDataStore } from "@/modules/05_placement/storeProbation";
import http from "@/plugins/http";
import config from "@/app.config";

const Header = defineAsyncComponent(
  () =>
    import(
      "@/modules/05_placement/components/probation/FormEvaluation/Header.vue"
    )
);
const FormSaveResultCommader = defineAsyncComponent(
  () =>
    import(
      "@/modules/05_placement/components/probation/FormEvaluation/FormSaveResultCommader.vue"
    )
);

const router = useRouter();
const route = useRoute();
const $q = useQuasar();
const probationStore = useProbationDataStore();
const { fecthdataAssign } = probationStore;
const mixin = useCounterMixin();
const { showLoader, hideLoader, messageError } = mixin;
const assignId = ref<string>(route.params.form.toString());
const personalId = ref<string>(route.params.personalId.toString());
const fullname = ref<string>("");
const tab = ref<string>("save1");
const dataArrayNumber = ref<number>();
const dataRole = ref<string>("mentor");

onMounted(async () => {
  await fecthAssign(assignId.value);
});

/**
 * get data
 * @param id person id 
 */
async function fecthAssign(id: string){
  showLoader();
  await http
    .get(config.API.formevaluateCommander(id))
    .then(async (res: any) => {
      await fecthdataAssign(res.data.data);
      fullname.value = res.data.data.experimentee
        ? res.data.data.experimentee.name
        : "";
      dataArrayNumber.value = 1;
    })
    .catch((e: any) => {
      messageError($q, e);
    })
    .finally(() => {
      hideLoader();
    });
};

/**
 * เปลี่ยน tab
 * @param tabVal type 
 */
function changeTab(tabVal: string){
  tab.value = tabVal;
  dataArrayNumber.value = Number(tabVal.charAt(4));
};

/** เปลี่ยน type file */
function downloadFile(response: any, filename: string){
  const link = document.createElement("a");
  var fileName = filename;
  link.href = window.URL.createObjectURL(new Blob([response.data]));
  link.setAttribute("download", fileName);
  document.body.appendChild(link);
  link.click();
  document.body.removeChild(link);
};

/**
 * download file
 * @param type type
 */
async function FileDownload(type: string){
  let numTab = probationStore.evaluate.find(
    (e: any) => e.no === dataArrayNumber.value
  );
  //ผู้ดูเเล
  if (dataRole.value == "mentor") {
    showLoader();
    await http
      .get(config.API.reportEvaluateRecord1(type, numTab.id), {
        responseType: "blob",
      })
      .then(async (res) => {
        downloadFile(
          res,
          `แบบบันทึกผล(ผู้บังคับบัญชา)_${fullname.value}_ครั้งที่${numTab.no}.${type}`
        );
      })
      .catch((e) => {
        messageError($q, e);
      })
      .finally(() => {
        hideLoader();
      });
  } else {
    //ผุ้บังคับ
    showLoader();
    await http
      .get(config.API.reportEvaluateRecord1(type, numTab.id), {
        responseType: "blob",
      })
      .then(async (res) => {
        downloadFile(
          res,
          `แบบบันทึกผล(ผู้บังคับบัญชา)_${fullname.value}_ครั้งที่${numTab.no}.${type}`
        );
      })
      .catch((e) => {
        messageError($q, e);
      })
      .finally(() => {
        hideLoader();
      });
  }
};

/** เปลี่ยนหน้า เพิ่ม */
function addData(){
  router.push(
    `/probation/detail/addevaluacommander/${personalId.value}/${assignId.value}`
  );
};
</script>

<template>
  <Header
    v-if="probationStore.tabs.length > 0"
    :change-tab="changeTab"
    :add-data="addData"
    :loop="probationStore.tabs.length"
    :FileDownload="FileDownload"
  />
  <q-tab-panels
    v-model="tab"
    animated
    swipeable
    vertical
    transition-prev="jump-up"
    transition-next="jump-up"
    v-if="probationStore.tabs.length > 0"
    class="mt"
  >
    <q-tab-panel
      v-for="item in probationStore.evaluate"
      :name="`save${item.no}`"
      :key="item.no"
    >
      <FormSaveResultCommader
        :fecthAssign="fecthAssign"
        :tab="tab"
        :data="probationStore.evaluate.find((x: any) => x.no === dataArrayNumber)"
        action="edit"
      />
    </q-tab-panel>
  </q-tab-panels>

  <div class="q-gutter-md" v-else-if="probationStore.tabs.length == 0">
    <div class="flex justify-center items-center q-my-md q-gutter-md">
      <q-btn
        outline
        color="primary"
        label="สร้างแบบบันทึกผล"
        @click="addData"
      />
    </div>
  </div>
</template>
<style lang="scss" scoped>
.mt {
  margin-top: 25px;
}
</style>