ทะเบียนประวัติ

src/modules/04_registryNew/components/detail/TabMain.vue

@@ -0,0 +1,76 @@
+<script setup lang="ts">
+import { ref } from "vue";
+
+import { useRegistryDetailNewDataStore } from "@/modules/04_registryNew/stores/DetailMain";
+
+import PersonalInformationMain from "@/modules/04_registryNew/components/detail/PersonalInformation/Main.vue";
+
+const store = useRegistryDetailNewDataStore();
+
+const itemsTab = ref<any>([
+  {
+    name: "1",
+    icon: "mdi-account",
+    label: "ข้อมูลส่วนตัว",
+  },
+  {
+    name: "2",
+    icon: "mdi-account-tie",
+    label: "ข้อมูลราชการ",
+  },
+  {
+    name: "3",
+    icon: "mail",
+    label: "ข้อมูลเงินเดือน/ค่าจ้าง",
+  },
+  {
+    name: "4",
+    icon: "mdi-cash",
+    label: "ข้อมูลเครื่องราช",
+  },
+  {
+    name: "5",
+    icon: "mdi-bookmark",
+    label: "ข้อมูลอื่นๆ",
+  },
+]);
+
+const splitterModel = ref<number>(12);
+</script>
+<template>
+  <q-splitter v-model="splitterModel" disable>
+    <template v-slot:before>
+      <q-tabs v-model="store.tabMain" vertical class="text-blue">
+        <q-tab
+          v-for="(tab, index) in itemsTab"
+          :key="index"
+          :name="tab.name"
+          :icon="tab.icon"
+          :label="tab.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"
+        >
+          <PersonalInformationMain v-if="store.tabMain === '1'" />
+          <!-- <div class="text-h4 q-mb-md">{{ tab.label }}</div> -->
+        </q-tab-panel>
+      </q-tab-panels>
+    </template>
+  </q-splitter>
+</template>
+
+<style scoped></style>