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 dataArrayNumber = ref<number>(1);
const evaluate = ref<any>([]);

const changeTab = (tabVal: string) => {
  tab.value = tabVal;
  dataArrayNumber.value = Number(tabVal.charAt(4));
};

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

const fecthAssign = async (id: string) => {
  showLoader();
  await http
    .get(config.API.createformCommader(id))
    .then((res: any) => {
      evaluate.value = res.data.data.evaluate;
      tabs.value = evaluate.value;
      dataArrayNumber.value = 1;
    })
    .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 v-if="tabs.length > 0" :change-tab="changeTab" :loop="tabs.length" :add-data="addData" />

  <q-page-container v-if="tabs.length > 0">
    <FormEvaluate :tab="tab" :data="evaluate.find((x: any) => x.no === dataArrayNumber)" action="edit" />
  </q-page-container>

  <div v-else class="q-gutter-md">
    <div class="flex justify-center items-center q-my-md q-gutter-md">
      <q-btn outline color="primary" label="สร้างแบบประเมิน" @click="addData" />
    </div>
  </div>
</template>