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";
import GovernmentInformationMain from "@/modules/04_registryNew/components/detail/GovernmentInformation/Main.vue";
import salaryMain from "@/modules/04_registryNew/components/detail/Salary/Main.vue";
import AchievementMain from "@/modules/04_registryNew/components/detail/Achievement/Main.vue";
import OtherMaim from "@/modules/04_registryNew/components/detail/Other/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: "mdi-cash",
    label: "เงินเดือน/ค่าจ้าง",
  },
  {
    name: "4",
    icon: "mdi-medal",
    label: "ข้อมูลผลงาน",
  },
  {
    name: "5",
    icon: "mdi-bookmark",
    label: "ข้อมูลอื่นๆ",
  },
]);

const splitterModel = ref<number>(12);
</script>

<template>
  <q-splitter v-model="splitterModel" disable class="split">
    <template v-slot:before>
      <div class="">
        <!--  bg-tab-regi  -->
        <q-tabs
          v-model="store.tabMain"
          vertical
          class="text-grey-6 text-weight-light"
          active-class="bg-white text-blue-8 text-weight-bold bg-blue-1"
          ><!-- indicator-color="transparent" -->
          <q-tab
            class="q-py-sm"
            v-for="(tab, index) in itemsTab"
            :key="index"
            :name="tab.name"
            :icon="tab.icon"
            :label="tab.label"
          /><!-- hover-tab  -->
        </q-tabs>
      </div>
    </template>

    <template v-slot:after>
      <q-tab-panels
        v-model="store.tabMain"
        animated
        swipeable
        vertical
        transition-prev="jump-up"
        transition-next="jump-up"
        class="q-pa-none"
        ><!--  split -->
        <q-tab-panel
          v-for="(tab, index) in itemsTab"
          :key="index"
          :name="tab.name"
          class="q-pa-none"
        >
          <PersonalInformationMain v-if="store.tabMain === '1'" />
          <GovernmentInformationMain v-if="store.tabMain === '2'" />
          <salaryMain v-if="store.tabMain === '3'" />
          <AchievementMain v-if="store.tabMain === '4'" />
          <OtherMaim v-if="store.tabMain === '5'" />
        </q-tab-panel>
      </q-tab-panels>
    </template>
  </q-splitter>
</template>

<style scoped>
.hover-tab:hover {
  background-color: #0793f1;
  color: white !important;
  opacity: 1 !important;
}
.bg-tab-regi {
  background-color: #273238;
}
.split {
  border-radius: 10px !important;
}
</style>