Tab

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

@@ -1,10 +1,26 @@
 <script setup lang="ts">
+import { ref, onMounted } from "vue";
 import ListPrefix from "@/modules/01_metadataNew/components/personal/01ListPrefix.vue";
 import ListRank from "@/modules/01_metadataNew/components/personal/02ListRank.vue";
 import ListBloodGroup from "@/modules/01_metadataNew/components/personal/03ListBloodGroup.vue";
 import ListGender from "@/modules/01_metadataNew/components/personal/04ListGender.vue";
 import ListReligion from "@/modules/01_metadataNew/components/personal/05ListReligion.vue";
 import ListRelationship from "@/modules/01_metadataNew/components/personal/06ListRelationship.vue";
+
+const currentTab = ref<string>("list_prefix");
+const tabs = ref<Array<any>>([]);
+
+onMounted(() => {
+  const tabsPerson = [
+    { label: "คำนำหน้าชื่อ", value: "list_prefix" },
+    { label: "ยศ", value: "list_rank" },
+    { label: "กลุ่มเลือด", value: "list_bloodGroup" },
+    { label: "เพศ", value: "list_gender" },
+    { label: "ศาสนา", value: "list_religion" },
+    { label: "สถานภาพ", value: "list_relationship" },
+  ];
+  tabs.value = tabsPerson;
+});
 </script>
 
 <template>
@@ -13,12 +29,34 @@ import ListRelationship from "@/modules/01_metadataNew/components/personal/06Lis
   </div>
 
   <q-card flat bordered class="q-pa-md">
-    <ListPrefix />
-    <ListRank />
-    <ListBloodGroup />
-    <ListGender />
-    <ListReligion />
-    <ListRelationship />
+    <div class="text-subtitle1 text-grey-9">
+      <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" />
+      <!-- person -->
+      <ListPrefix v-if="currentTab == 'list_prefix'" />
+      <ListRank v-if="currentTab == 'list_rank'" />
+      <ListBloodGroup v-if="currentTab == 'list_bloodGroup'" />
+      <ListGender v-if="currentTab == 'list_gender'" />
+      <ListReligion v-if="currentTab == 'list_religion'" />
+      <ListRelationship v-if="currentTab == 'list_relationship'" />
+    </div>
   </q-card>
 </template>