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 Result from "@/modules/08_KPI/components/Tab/04_Result.vue";
import File from "@/modules/08_KPI/components/Tab/05_File.vue";

const store = useKpiDataStore();

const itemsTab = ref<any>([
  {
    name: "1",
    label: "จัดทำแบบฟอร์มการประเมิน",
  },
  {
    name: "2",
    label: "รายงานความก้าวหน้า",
  },
  {
    name: "3",
    label: "รายงานผลสำเร็จของงาน",
  },
  {
    name: "4",
    label: "สรุปผลการประเมิน",
  },
  {
    name: "5",
    label: "ไฟล์เอกสาร",
  },
]);

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

<template>
  <q-splitter
    v-if="$q.screen.gt.xs"
    v-model="splitterModel"
    :horizontal="!$q.screen.gt.xs"
    disable
  >
    <template v-slot:before>
      <q-tabs
        v-model="store.tabMain"
        :vertical="$q.screen.gt.xs"
        class="text-grey-7 text-weight-light"
        active-class="bg-blue-1 text-blue-8 text-weight-bold"
      >
        <q-tab name="1" label="จัดทำข้อตกลง" :disable="store.tabOpen != 1" />
        <q-tab
          name="2"
          label="รายงานความก้าวหน้า"
          :disable="store.tabOpen != 2"
        />
        <q-tab
          name="3"
          label="รายงานผลสำเร็จของงาน"
          :disable="store.tabOpen < 3"
        />
        <q-tab
          name="4"
          label="สรุปผลการประเมิน"
          :disable="
            store.tabOpen < 4 ||
            (store.tabOpen == 4 &&
              store.rolePerson === 'USER' &&
              store.dataEvaluation.evaluationStatus != 'COMPLETE')
          "
        />
        <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'" />
          <Assessment v-if="store.tabMain === '2'" :type="'evaluator'" />
          <Assessment v-if="store.tabMain === '3'" :type="'commander'" />
          <Result v-if="store.tabMain === '4'" :type="'result'" />
          <File v-if="store.tabMain === '5'" />
        </q-tab-panel>
      </q-tab-panels>
    </template>
  </q-splitter>

  <q-list bordered class="rounded-borders" v-else>
    <q-expansion-item
      expand-separator
      label="จัดทำข้อตกลง"
      @click="store.tabMain = '1'"
    >
      <Assessment v-if="store.tabMain === '1'" />
    </q-expansion-item>

    <q-expansion-item
      expand-separator
      label="รายงานความก้าวหน้า"
      @click="store.tabMain = '2'"
      :disable="store.tabOpen < 2"
    >
      <Assessment v-if="store.tabMain === '2'" :type="'evaluator'" />
    </q-expansion-item>

    <q-expansion-item
      expand-separator
      label="รายงานผลสำเร็จของงาน"
      @click="store.tabMain = '3'"
      :disable="store.tabOpen < 3"
    >
      <Assessment v-if="store.tabMain === '3'" :type="'commander'" />
    </q-expansion-item>

    <q-expansion-item
      expand-separator
      label="ไฟล์เอกสาร"
      @click="store.tabMain = '5'"
    >
      <File v-if="store.tabMain === '5'" />
    </q-expansion-item>
  </q-list>
</template>

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