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 { useRoute } from "vue-router";

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

const store = useKpiDataStore();
const route = useRoute();
const isReadonly = ref<boolean>(route.name === "KPIEditEvaluator" ? true : false);
const step = ref<number>(1); // 1 = จัดทำข้อตกลง, 2 = รายงานความก้าวหน้า, 3 = รายงานผลสำเร็จของงาน
const indicatorScore = defineModel("indicatorScore", {
  type: Number,
  default: 0,
});
const competencyScore = defineModel("competencyScore", {
  type: Number,
  default: 0,
});
const itemsTab = ref<any>([
  {
    name: "1",
    label: "จัดทำแบบฟอร์มการประเมิน",
  },
  {
    name: "2",
    label: "รายงานความก้าวหน้า",
  },
  {
    name: "3",
    label: "รายงานผลสำเร็จของงาน",
  },
  // {
  //   name: "3",
  //   label: "ผู้บังคับบัญชาเหนือขึ้นไป",
  // },
  // {
  //   name: "4",
  //   label: "ผู้บังคับบัญชาเหนือขึ้นไปอีกชั้นหนึ่ง",
  // },
  {
    name: "5",
    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="รายงานความก้าวหน้า" :disable="step < 2" />
        <q-tab name="3" label="รายงานผลสำเร็จของงาน" :disable="step < 3" />
        <!-- <q-tab name="3" label="ผู้บังคับบัญชา">
          <div class="text-caption">เหนือขึ้นไป</div>
        </q-tab>
        <q-tab name="4" label="ผู้บังคับบัญชา">
          <div class="text-caption">เหนือขึ้นไปอีกชั้นหนึ่ง</div>
        </q-tab> -->
        <q-tab name="5" 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'"
            v-model:indicatorScore="indicatorScore"
            v-model:competencyScore="competencyScore"
          />
          <Evaluator v-if="store.tabMain === '2'" :type="'evaluator'" />
          <Evaluator v-if="store.tabMain === '3'" :type="'commander'" />
          <Evaluator v-if="store.tabMain === '4'" :type="'commanderHigh'" />
          <File 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;
}
</style>