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

src/modules/04_registryNew/components/detail/GovernmentInformation/01_Info.vue

@@ -0,0 +1,6 @@
+<script setup lang="ts"></script>
+<template>
+  <div>ข้อมูลราชการ</div>
+</template>
+
+<style scoped></style>

src/modules/04_registryNew/components/detail/GovernmentInformation/02_Discipline.vue

@@ -0,0 +1,6 @@
+<script setup lang="ts"></script>
+<template>
+  <div>วินัย</div>
+</template>
+
+<style scoped></style>

src/modules/04_registryNew/components/detail/GovernmentInformation/03_Leave.vue

@@ -0,0 +1,6 @@
+<script setup lang="ts"></script>
+<template>
+  <div>การลา</div>
+</template>
+
+<style scoped></style>

src/modules/04_registryNew/components/detail/GovernmentInformation/04_PerformSpecialWork.vue

@@ -0,0 +1,6 @@
+<script setup lang="ts"></script>
+<template>
+  <div>ปฏิบัติราชการพิเศษ</div>
+</template>
+
+<style scoped></style>

src/modules/04_registryNew/components/detail/GovernmentInformation/Main.vue

@@ -0,0 +1,54 @@
+<script setup lang="ts">
+import { ref } from "vue";
+
+/** importComponents*/
+import Info from "@/modules/04_registryNew/components/detail/GovernmentInformation/01_Info.vue";
+import Discipline from "@/modules/04_registryNew/components/detail/GovernmentInformation/02_Discipline.vue";
+import Leave from "@/modules/04_registryNew/components/detail/GovernmentInformation/03_Leave.vue";
+import PerformSpecialWork from "@/modules/04_registryNew/components/detail/GovernmentInformation/04_PerformSpecialWork.vue";
+
+const tab = ref<string>("1");
+</script>
+<template>
+  <div class="row items-center q-mb-lg">
+    <div class="text-dark row items-center" style="font-size: 22px">
+      <q-icon name="mdi-account-tie" class="q-mr-md" />
+      <span>ข้อมูลราชการ</span>
+    </div>
+  </div>
+
+  <q-separator />
+  <q-tabs
+    v-model="tab"
+    dense
+    class="text-grey"
+    active-color="blue"
+    indicator-color="white"
+    align="justify"
+    narrow-indicator
+    bordered
+  >
+    <q-tab name="1" label="ข้อมูลราชการ" />
+    <q-tab name="2" label="วินัย" />
+    <q-tab name="3" label="การลา" />
+    <q-tab name="4" label="ปฏิบัติราชการพิเศษ" />
+  </q-tabs>
+  <q-separator />
+
+  <q-tab-panels v-model="tab" animated>
+    <q-tab-panel name="1">
+      <Info />
+    </q-tab-panel>
+    <q-tab-panel name="2">
+      <Discipline />
+    </q-tab-panel>
+    <q-tab-panel name="3">
+      <Leave />
+    </q-tab-panel>
+    <q-tab-panel name="4">
+      <PerformSpecialWork />
+    </q-tab-panel>
+  </q-tab-panels>
+</template>
+
+<style scoped></style>