update

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

@@ -0,0 +1,124 @@
+<script setup lang="ts">
+import { ref } from "vue";
+import { useRoute } from "vue-router";
+
+import { useRegistryDetailNewDataStore } from "@/modules/04_registryPerson/stores/DetailMain";
+
+import PersonalInformationMain from "@/modules/04_registryPerson/components/detail/PersonalInformation/Main.vue";
+import GovernmentInformationMain from "@/modules/04_registryPerson/components/detail/GovernmentInformation/Main.vue";
+import salaryMain from "@/modules/04_registryPerson/components/detail/Salary/Main.vue";
+import AchievementMain from "@/modules/04_registryPerson/components/detail/Achievement/Main.vue";
+import OtherMaim from "@/modules/04_registryPerson/components/detail/Other/Main.vue";
+import EmployeeMain from "@/modules/04_registryPerson/components/detail/Employee/Main.vue";
+
+const route = useRoute();
+
+const store = useRegistryDetailNewDataStore();
+const props = defineProps({
+  fetchDataPersonal: { type: Function, require: true },
+});
+
+const itemsTab = ref<any>([
+  {
+    name: "1",
+    icon: "mdi-account",
+    label: "ข้อมูลส่วนตัว",
+  },
+  {
+    name: "2",
+    icon: "mdi-account-tie",
+    label:
+      route.name === "registry-employeeId"
+        ? "ข้อมูลลูกจ้างชั่วคราว"
+        : "ข้อมูลราชการ",
+  },
+  {
+    name: "3",
+    icon: "mdi-cash",
+    label: "เงินเดือน/ค่าจ้าง",
+  },
+  {
+    name: "4",
+    icon: "mdi-medal",
+    label: "ข้อมูลผลงาน",
+  },
+  {
+    name: "5",
+    icon: "mdi-bookmark",
+    label: "ข้อมูลอื่นๆ",
+  },
+]);
+
+const splitterModel = ref<number>(12);
+</script>
+
+<template>
+  <q-splitter v-model="splitterModel" disable class="split">
+    <template v-slot:before>
+      <div class="">
+        <!--  bg-tab-regi  -->
+        <q-tabs
+          v-model="store.tabMain"
+          vertical
+          class="text-grey-6 text-weight-light"
+          active-class="bg-white text-blue-8 text-weight-bold bg-blue-1"
+          ><!-- indicator-color="transparent" -->
+          <q-tab
+            class="q-py-sm"
+            v-for="(tab, index) in itemsTab"
+            :key="index"
+            :name="tab.name"
+            :icon="tab.icon"
+            :label="tab.label"
+          /><!-- hover-tab  -->
+        </q-tabs>
+      </div>
+    </template>
+
+    <template v-slot:after>
+      <q-tab-panels
+        v-model="store.tabMain"
+        animated
+        swipeable
+        vertical
+        transition-prev="jump-up"
+        transition-next="jump-up"
+        class="q-pa-none"
+        ><!--  split -->
+        <q-tab-panel
+          v-for="(tab, index) in itemsTab"
+          :key="index"
+          :name="tab.name"
+          class="q-pa-none"
+        >
+          <PersonalInformationMain
+            v-if="store.tabMain === '1'"
+            :fetchDataPersonal="props.fetchDataPersonal"
+          />
+          <EmployeeMain
+            v-if="store.tabMain === '2' && route.name === 'registry-employeeId'"
+          />
+          <GovernmentInformationMain v-else-if="store.tabMain === '2'" />
+
+          <salaryMain v-if="store.tabMain === '3'" />
+          <AchievementMain v-if="store.tabMain === '4'" />
+          <OtherMaim v-if="store.tabMain === '5'" />
+        </q-tab-panel>
+      </q-tab-panels>
+    </template>
+  </q-splitter>
+</template>
+
+<style scoped>
+.hover-tab:hover {
+  background-color: #0793f1;
+  color: white !important;
+  opacity: 1 !important;
+}
+.bg-tab-regi {
+  background-color: #273238;
+}
+.split {
+  border-radius: 10px !important;
+}
+</style>