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

<script setup lang="ts">
import { ref, defineAsyncComponent, onMounted } from "vue";
import http from "@/plugins/http";
import config from "@/app.config";
import { useQuasar } from "quasar";
import { useRoute, useRouter } from "vue-router";
import { useCounterMixin } from "@/stores/mixin";
const Header = defineAsyncComponent(
  () =>
    import(
      "@/modules/05_placement/components/probation/FormEvaluation/Header.vue"
    )
);
const FormEvaluate = defineAsyncComponent(
  () =>
    import(
      "@/modules/05_placement/components/probation/FormEvaluation/FormEvaluate.vue"
    )
);

const router = useRouter();
const route = useRoute();
const mixin = useCounterMixin();
const $q = useQuasar();
const { showLoader, hideLoader, messageError, success } = mixin;
const assignId = ref<string>(route.params.form.toString());
const personalId = ref<string>(route.params.personalId.toString());

const tab = ref<string>("save1");
const tabs = ref<any>([]);
const activeTab = ref<string>("tab2");

const changeTab = (tabVal: string) => {
  tab.value = tabVal;
};

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

const fecthAssign = async (id: string) => {
  showLoader();
  await http
    .get(config.API.evaluateCreate(id))
    .then((res: any) => {
      if (res.data.data.evaluate_no > 2) {
        tabs.value = res.data.data.evaluate;
      } else tabs.value.push({ no: 1 }, { no: 2 });
    })
    .catch((e: any) => {
      console.log(e);
      messageError($q, e);
    })
    .finally(() => {
      hideLoader();
    });
};
const addData = () => {
  router.push(`/probation/detail/addevalua/${personalId.value}/${assignId.value}`);
};
</script>

<template>
  <Header
    :change-tab="changeTab"
    :activeTab="activeTab"
    :loop="tabs.length"
    :add-data="addData"
  />

  <!-- <q-page-container>
    <q-tab-panels v-model="tab" animated>
      <q-tab-panel name="save1">
        <FormEvaluate :tab="tab" />
      </q-tab-panel>

      <q-tab-panel name="save2">
        <FormEvaluate :tab="tab"/>
      </q-tab-panel>
    </q-tab-panels>
  </q-page-container> -->
  <q-page-container>
    <q-tab-panels v-model="tab" animated>
      <q-tab-panel
        v-for="tabName in tabs"
        :key="tabName"
        :name="'save' + tabName.no"
      >
        <FormEvaluate :tab="tab" />
      </q-tab-panel>
    </q-tab-panels>
  </q-page-container>
</template>