hrms-mgt/src/modules/04_registryPerson/components/detail/GovernmentInformation/Main.vue

<script setup lang="ts">
import { ref } from "vue";
import { useCounterMixin } from "@/stores/mixin";
import { useRoute } from "vue-router";

const { pathRegistryEmp } = useCounterMixin();
const route = useRoute();

/** importComponents*/
import Info from "@/modules/04_registryPerson/components/detail/GovernmentInformation/01_Info.vue"; //ข้อมูลราชการ
import Discipline from "@/modules/04_registryPerson/components/detail/GovernmentInformation/02_Discipline.vue"; //วินัย
import Leave from "@/modules/04_registryPerson/components/detail/GovernmentInformation/03_Leave.vue"; //การลา
import PerformSpecialWork from "@/modules/04_registryPerson/components/detail/GovernmentInformation/04_PerformSpecialWork.vue"; //ปฏิบัติราชการพิเศษ
import ActingPos from "@/modules/04_registryPerson/components/detail/GovernmentInformation/05_ActingPos.vue"; //รักษาการในตำแหน่ง
import HelpGovernmentDetail from "@/modules/04_registryPerson/components/detail/GovernmentInformation/06_HelpGovernment.vue"; //ช่วยราชการ
import Postion from "@/modules/04_registryPerson/components/detail/GovernmentInformation/07_Position.vue";
import AbsentLate from "@/modules/04_registryPerson/components/detail/GovernmentInformation/08_AbsentLate.vue";
import { useRegistryNewDataStore } from "@/modules/04_registryPerson/store";

const empType = ref<string>(pathRegistryEmp(route.name?.toString() ?? ""));

const tab = ref<string>("1");
const storeRegistry = useRegistryNewDataStore();
</script>

<template>
  <div class="row items-center q-my-md">
    <div class="text-dark row items-center q-px-md">
      <q-icon name="mdi-account" class="q-mr-md" size="22px" />
      <div class="text-subtitle1 text-weight-bold">ข้อมูลราชการ</div>
    </div>
  </div>

  <q-separator />
  <q-tabs
    v-model="tab"
    active-color="blue-8"
    align="left"
    bordered
    narrow-indicator
    indicator-color="transparent"
    dense
    class="text-grey q-pl-sm"
  >
    <q-tab name="1" label="ข้อมูลราชการ" />
    <q-tab name="7" label="ตำแหน่ง" />
    <q-tab v-if="empType != '-employee'" name="5" label="รักษาการในตำแหน่ง" />
    <q-tab v-if="empType != '-employee'" name="6" label="ช่วยราชการ" />
    <q-tab name="2" label="วินัย" />
    <q-tab name="3" label="การลา" />
    <q-tab name="8" label="ขาดราชการ/มาสาย" />
    <q-tab name="4" label="ปฏิบัติราชการพิเศษ" />
  </q-tabs>
  <q-separator />

  <q-tab-panels v-model="tab" animated>
    <q-tab-panel name="1">
      <Info :is-leave="storeRegistry.isLeave" />
    </q-tab-panel>
    <q-tab-panel name="2">
      <Discipline :is-leave="storeRegistry.isLeave" />
    </q-tab-panel>
    <q-tab-panel name="3">
      <Leave :is-leave="storeRegistry.isLeave" />
    </q-tab-panel>
    <q-tab-panel name="4">
      <PerformSpecialWork :is-leave="storeRegistry.isLeave" />
    </q-tab-panel>
    <q-tab-panel v-if="empType != '-employee'" name="5">
      <ActingPos
        :is-leave="storeRegistry.isLeave"
        :citizen-id="storeRegistry.citizenId"
      />
    </q-tab-panel>
    <q-tab-panel v-if="empType != '-employee'" name="6">
      <HelpGovernmentDetail
        :is-leave="storeRegistry.isLeave"
        :citizen-id="storeRegistry.citizenId"
      />
    </q-tab-panel>
    <q-tab-panel name="8">
      <AbsentLate :is-leave="storeRegistry.isLeave" />
    </q-tab-panel>
    <q-tab-panel name="7">
      <Postion
        :is-leave="storeRegistry.isLeave"
        :citizen-id="storeRegistry.citizenId"
      />
    </q-tab-panel>
  </q-tab-panels>
</template>

<style scoped></style>