hrms-mgt/src/modules/01_metadataNew/views/position.vue

div
<script setup lang="ts">
import { ref, onMounted } from "vue";
import ListPosition from "@/modules/01_metadataNew/components/position/01ListPosition.vue";
import ListType from "@/modules/01_metadataNew/components/position/02ListType.vue";
import ListExecutive from "@/modules/01_metadataNew/components/position/04ListExecutive.vue";
import { usePositionDataStore } from "../stores/positionListStore";
// const store.pathLocation = ref<string>("list_position");
const tabs = ref<Array<any>>([]);
const store = usePositionDataStore();

onMounted(() => {
  const tabsPerson = [
    { label: "ตำแหน่ง", value: "list_position" },
    { label: "รายการประเภทตำแหน่ง", value: "list_type" },
    { label: "ตำแหน่งทางการบริหาร", value: "list_executive" },
  ];
  tabs.value = tabsPerson;
});
</script>

<template>
  <div class="toptitle text-dark col-12 row items-center">ข้อมูลตำแหน่ง</div>

  <q-card flat bordered>
    <q-tabs
      dense
      v-model="store.pathLocation"
      align="left"
      indicator-color="primary"
      active-color="primary bg-teal-1"
      inline-label
      class="text-body2 text-grey-7"
    >
      <q-tab
        v-for="tab in tabs"
        :key="tab.value"
        v-on:click="store.pathLocation = tab.value"
        :label="tab.label"
        :name="tab.value"
        class="q-py-xs"
      />
    </q-tabs>
    <q-separator size="2px" />
    <div class="q-pa-md">
      <ListPosition v-if="store.pathLocation == 'list_position'" />
      <ListType v-if="store.pathLocation == 'list_type'" />
      <ListExecutive v-if="store.pathLocation == 'list_executive'" />
    </div>
  </q-card>
</template>

<style scoped></style>