hrms-mgt/src/modules/04_registryNew/components/detail/Achievement/Main.vue

<script setup lang="ts">
import { ref } from "vue";

/** importComponents*/
import ProfessionalLicense from "@/modules/04_registryNew/components/detail/Achievement/01_ProfessionalLicense.vue";
import Train from "@/modules/04_registryNew/components/detail/Achievement/02_Train.vue";
import Insignia from "@/modules/04_registryNew/components/detail/Achievement/03_Insignia.vue";
import DeclarationHonor from "@/modules/04_registryNew/components/detail/Achievement/04_DeclarationHonor.vue";
import ResultsPerformance from "@/modules/04_registryNew/components/detail/Achievement/05_ResultsPerformance.vue";

const tab = ref<string>("1");
</script>
<template>
  <div class="row items-center q-mb-lg">
    <div class="text-dark row items-center" style="font-size: 22px">
      <q-icon name="mdi-medal" class="q-mr-md" />
      <span>ข้อมูลผลงานและเครื่องราชฯ</span>
    </div>
  </div>

  <q-separator />
  <q-tabs
    v-model="tab"
    dense
    class="text-grey"
    active-color="blue"
    indicator-color="white"
    align="left"
    narrow-indicator
    bordered
  >
    <q-tab name="1" label="ใบอนุญาตประกอบวิชาชีพ" />
    <q-tab name="2" label="การฝึกอบรม/ดูงาน" />
    <q-tab name="3" label="เครื่องราชอิสริยาภรณ์" />
    <q-tab name="4" label="ประกาศเกียรติคุณ" />
    <q-tab name="5" label="ผลการประเมินการปฏิบัติราชการ" />
  </q-tabs>
  <q-separator />

  <q-tab-panels v-model="tab" animated>
    <q-tab-panel name="1">
      <ProfessionalLicense />
    </q-tab-panel>
    <q-tab-panel name="2">
      <Train />
    </q-tab-panel>
    <q-tab-panel name="3">
      <Insignia />
    </q-tab-panel>
    <q-tab-panel name="4">
      <DeclarationHonor />
    </q-tab-panel>
    <q-tab-panel name="4">
      <PerformSpecialWork />
    </q-tab-panel>
    <q-tab-panel name="5">
      <ResultsPerformance />
    </q-tab-panel>
  </q-tab-panels>
</template>

<style scoped></style>