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

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

import { useRegistryDetailNewDataStore } from "@/modules/04_registryNew/stores/DetailMain";

import PersonalInformationMain from "@/modules/04_registryNew/components/detail/PersonalInformation/Main.vue";

const store = useRegistryDetailNewDataStore();

const itemsTab = ref<any>([
  {
    name: "1",
    icon: "mdi-account",
    label: "ข้อมูลส่วนตัว",
  },
  {
    name: "2",
    icon: "mdi-account-tie",
    label: "ข้อมูลราชการ",
  },
  {
    name: "3",
    icon: "mail",
    label: "ข้อมูลเงินเดือน/ค่าจ้าง",
  },
  {
    name: "4",
    icon: "mdi-cash",
    label: "ข้อมูลเครื่องราช",
  },
  {
    name: "5",
    icon: "mdi-bookmark",
    label: "ข้อมูลอื่นๆ",
  },
]);

const splitterModel = ref<number>(12);
</script>
<template>
  <q-splitter v-model="splitterModel" disable>
    <template v-slot:before>
      <q-tabs v-model="store.tabMain" vertical class="text-blue">
        <q-tab
          v-for="(tab, index) in itemsTab"
          :key="index"
          :name="tab.name"
          :icon="tab.icon"
          :label="tab.label"
        />
      </q-tabs>
    </template>

    <template v-slot:after>
      <q-tab-panels
        v-model="store.tabMain"
        animated
        swipeable
        vertical
        transition-prev="jump-up"
        transition-next="jump-up"
      >
        <q-tab-panel
          v-for="(tab, index) in itemsTab"
          :key="index"
          :name="tab.name"
        >
          <PersonalInformationMain v-if="store.tabMain === '1'" />
          <!-- <div class="text-h4 q-mb-md">{{ tab.label }}</div> -->
        </q-tab-panel>
      </q-tab-panels>
    </template>
  </q-splitter>
</template>

<style scoped></style>