hrms-user/src/modules/08_KPI/components/Tab/TabMain.vue

<script setup lang="ts">
import { ref } from "vue";
import { useKpiDataStore } from "@/modules/08_KPI/store";

import Assessment from "@/modules/08_KPI/components/Tab/01_Assessment.vue";
import CommanderAbove from "@/modules/08_KPI/components/Tab/02_CommanderAbove.vue";
import CommanderAboveOneStep from "@/modules/08_KPI/components/Tab/03_CommanderAboveOneStep.vue";
import File from "@/modules/08_KPI/components/Tab/04_File.vue";

const store = useKpiDataStore();

const itemsTab = ref<any>([
  {
    name: "1",
    label: "ผู้ขอรับการประเมิน",
  },
  {
    name: "2",
    label: "ผู้บังคับบัญชาเหนือขึ้นไป",
  },
  {
    name: "3",
    label: "ผู้บังคับบัญชาเหนือขึ้นไปอีกหนึ่งขั้น",
  },
  {
    name: "4",
    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-grey-7 text-weight-light"
        active-class="bg-blue-1 text-blue-8 text-weight-bold"
      >
        <!-- <q-tab
          class="hover-tab"
          v-for="(tab, index) in itemsTab"
          :key="index"
          :name="tab.name"
          :icon="tab.icon"
          :label="tab.label"
        /> -->
        <q-tab name="1" label="ผู้ขอรับการประเมิน" />
        <q-tab name="2" label="ผู้บังคับบัญชา">
          <div class="text-caption">เหนือขึ้นไป</div>
        </q-tab>
        <q-tab name="3" label="ผู้บังคับบัญชา">
          <div class="text-caption">เหนือขึ้นไปอีกหนึ่งขั้น</div>
        </q-tab>
        <q-tab name="4" 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"
          class="q-pa-none"
        >
          <Assessment v-if="store.tabMain === '1'" />
          <CommanderAbove v-if="store.tabMain === '2'" />
          <CommanderAboveOneStep v-if="store.tabMain === '3'" />
          <File v-if="store.tabMain === '4'" />
        </q-tab-panel>
      </q-tab-panels>
    </template>
  </q-splitter>
</template>

<style scoped>
.hover-tab:hover {
  background-color: #0793f1;
  color: white !important;
  opacity: 1 !important;
}
</style>