tab ข้อมูลตำแหน่ง

src/modules/01_metadataNew/views/position.vue

@@ -1,11 +1,49 @@
-<script setup lang="ts"></script>
+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/03ListExecutive.vue";
+const currentTab = ref<string>("list_position");
+const tabs = ref<Array<any>>([]);
+
+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>
+  <div class="toptitle text-dark col-12 row items-center">ข้อมูลตำแหน่ง</div>
 
-  <q-card flat bordered class="q-pa-md"> ตำแหน่ง </q-card>
+  <q-card flat bordered class="q-pa-md">
+    <q-tabs
+      dense
+      v-model="currentTab"
+      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="currentTab = tab.value"
+        :label="tab.label"
+        :name="tab.value"
+        class="q-py-xs"
+      />
+    </q-tabs>
+    <q-separator size="2px" />
+    <ListPosition v-if="currentTab == 'list_position'"/>
+    <ListType v-if="currentTab == 'list_type'"/>
+    <ListExecutive v-if="currentTab == 'list_executive'"/>
+  </q-card>
 </template>
 
 <style scoped></style>