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

src/modules/04_registryNew/components/detail/Salary/01_PositionSalary.vue

@@ -0,0 +1,6 @@
+<script setup lang="ts"></script>
+<template>
+  <div>ตำแหน่ง/เงินเดือน</div>
+</template>
+
+<style scoped></style>

src/modules/04_registryNew/components/detail/Salary/02_NotReceiveSalary.vue

@@ -0,0 +1,6 @@
+<script setup lang="ts"></script>
+<template>
+  <div>บันทึกวันที่ไม่ได้รับเงินเดือนฯ</div>
+</template>
+
+<style scoped></style>

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

@@ -0,0 +1,44 @@
+<script setup lang="ts">
+import { ref } from "vue";
+
+/** importComponents*/
+import PositionSalary from "@/modules/04_registryNew/components/detail/Salary/01_PositionSalary.vue";
+import NotReceiveSalary from "@/modules/04_registryNew/components/detail/Salary/02_NotReceiveSalary.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" 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-tabs>
+  <q-separator />
+
+  <q-tab-panels v-model="tab" animated>
+    <q-tab-panel name="1">
+      <PositionSalary />
+    </q-tab-panel>
+    <q-tab-panel name="2">
+      <NotReceiveSalary />
+    </q-tab-panel>
+  </q-tab-panels>
+</template>
+
+<style scoped></style>