hrms-mgt/src/modules/12_evaluatePersonal/components/Detail/Tab2.vue

<script setup lang="ts">
import { ref, onMounted } from "vue";
import { useQuasar } from "quasar";

import { useRoute } from "vue-router";
import { useCounterMixin } from "@/stores/mixin";
import http from "@/plugins/http";
import config from "@/app.config";

import type {
  Directors,
  Meetings,
} from "@/modules/12_evaluatePersonal/interface/response/Main";

/** importComponents*/
import CardDirector from "@/modules/12_evaluatePersonal/components/Detail/viewTab2/CardDirector.vue";
import CardMeet from "@/modules/12_evaluatePersonal/components/Detail/viewTab2/CardMeet.vue";

/** use*/
const $q = useQuasar();
const route = useRoute();
const mixin = useCounterMixin();
const { showLoader, hideLoader, messageError } = mixin;

const id = ref<string>(route.params.id as string); //id ประเมิน
const director = ref<Directors[]>([]); //รายการข้อมูลกรรมการ
const meeting = ref<Meetings[]>([]); //รายการข้อมูลการประชุม

/**
 * function เรียกข้อมูลกรรมการ
 */
async function getList() {
  showLoader();
  await http
    .get(config.API.evaluationListData(id.value))
    .then(async (res) => {
      const data = await res.data.result;
      director.value = data.directors;
      meeting.value = data.meetings;
    })
    .catch((e) => {
      messageError($q, e);
    })
    .finally(() => {
      hideLoader();
    });
}

onMounted(async () => {
  await getList();
});
</script>

<template>
  <div class="row col-12 q-pa-md">
    <div class="toptitle">กรรมการและการประชุม</div>

    <div class="row col-12 q-gutter-md">
      <CardDirector :data="director" :fetch-data="getList" />
      <CardMeet :data="meeting" :fetch-data="getList" />
    </div>
  </div>
</template>

<style>
.q-stepper--vertical .q-stepper__step-inner {
  padding: 0;
}
</style>