tab

src/views/MainLayout.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, onMounted, onUnmounted } from "vue";
+import { ref, onMounted, onUnmounted, watch } from "vue";
 import keycloak from "@/plugins/keycloak";
 import { useRoute, useRouter } from "vue-router";
 import { useDataStore } from "@/stores/data";
@@ -20,6 +20,8 @@ import {
   tabListLogin,
   tabListDatamain,
   tabStructuremain,
+  tabRegistration,
+  tabRecruit,
   tabList,
   // tabListPlacement,
 } from "../interface/request/main/main";
@@ -91,8 +93,6 @@ const tabScroll = () => {
   return route.name == "registryDetail";
 };
 const tabLogin = async () => {
-  await setListTab();
-
   let namePath = menuList[1].children.find((e: any) => e.path === route.path);
   if (namePath) {
     return true;
@@ -135,7 +135,7 @@ const onScroll = (scroll: ScrollType) => {
  * updateScroll เป็น function active แทปด้านขวา
  */
 const updateScroll = (position: number) => {
-  console.log(position);
+  // console.log(position);
 
   // เมื่อ position เป็น undifind ให้ position เป็น ตำแหน่ง top ที่ scroll
   if (position === void 0) {
@@ -149,6 +149,29 @@ const updateScroll = (position: number) => {
   for (const i in listTab.value) {
     const section = listTab.value[i];
     const item = document.getElementById(section.tag);
+    // console.log(section.childern);
+    if (section.childern) {
+      for (const x in section.childern) {
+        const sectionchildern = section.childern[x];
+        const itemchildern = document.getElementById(sectionchildern.tag);
+        console.log(sectionchildern);
+
+        if (itemchildern === null) {
+          continue;
+        }
+
+        if (itemchildern.offsetTop >= position + 155) {
+          console.log(last);
+          if (last === void 0) {
+            last = sectionchildern.tag;
+          }
+          break;
+        } else {
+          last = sectionchildern.tag;
+        }
+      }
+    }
+
     /**
      * วนหา id ของ div หน้านั้น
      * เมื่อหาไม่เจอให้ไปต่อตัวต่อไป
@@ -174,6 +197,7 @@ const updateScroll = (position: number) => {
    * ใช้ เซ็ท active ให้เป็นแทปสีฟ้า
    * และใช้ scrollIntoView ย้ายตำแหน่ง activeโดยการเลื่อนไปหา
    */
+
   if (last !== void 0) {
     changeTab(last);
     const tocEl = document.getElementById("tab--" + last);
@@ -204,14 +228,23 @@ onMounted(async () => {
 });
 
 const setListTab = () => {
+  console.log(route.name);
+
   if (route.name == "manual") {
     listTab.value = tabListLogin;
   } else if (route.name == "datamain") {
     listTab.value = tabListDatamain;
   } else if (route.name == "structuremain") {
     listTab.value = tabStructuremain;
+  } else if (route.name == "registmain") {
+    listTab.value = tabRegistration;
+  } else if (route.name == "recruitmain") {
+    listTab.value = tabRecruit;
   }
 };
+watch(route, () => {
+  setListTab();
+});
 
 /**
  * เมื่อออกจากโปรแกรม ให้ ยกเลิกการฟัง event resize
@@ -866,26 +899,49 @@ const clickTag = (val: string) => {
     >
       <q-scroll-area class="fit">
         <q-list padding>
-          <q-item
-            v-for="(tabItem, index) in listTab"
-            :key="index"
-            :id="'tab--' + tabItem.tag"
-            class="tabNative"
-            active-class="text-blue-7 active-item text-weight-medium tabActive"
-            :active="activeTab(tabItem.tag)"
-            clickable
-            v-ripple
-            dense
-            exact
-            @click="tagClick(tabItem.tag)"
-          >
-            <q-item-section>
-              <q-item-label
-                ><q-icon size="11px" name="mdi-circle-medium" />
-                <span class="q-pl-xs">{{ tabItem.label }}</span>
-              </q-item-label>
-            </q-item-section>
-          </q-item>
+          <div v-for="(tabItem, index) in listTab" :key="index">
+            <q-item
+              :id="'tab--' + tabItem.tag"
+              class="tabNative"
+              active-class="text-blue-7 active-item text-weight-medium tabActive"
+              :active="activeTab(tabItem.tag)"
+              clickable
+              v-ripple
+              dense
+              exact
+              @click="tagClick(tabItem.tag)"
+            >
+              <q-item-section>
+                <q-item-label
+                  ><q-icon size="11px" name="mdi-circle-medium" />
+                  <span class="q-pl-xs">{{ tabItem.label }}</span>
+                </q-item-label>
+              </q-item-section>
+            </q-item>
+            <div v-if="route.name == 'recruitmain'">
+              <q-item
+                v-if="route.name == 'recruitmain'"
+                v-for="(childItem, childIndex) in tabItem.childern"
+                :key="'child-' + childIndex"
+                :id="'tab--' + childItem.tag"
+                class="tabNative child-tab"
+                active-class="text-blue-7 active-item text-weight-medium tabActive"
+                :active="activeTab(childItem.tag)"
+                clickable
+                v-ripple
+                dense
+                exact
+                @click="tagClick(childItem.tag)"
+              >
+                <q-item-section>
+                  <q-item-label>
+                    <!-- <q-icon size="11px" name="mdi-circle-small" /> -->
+                    <span class="q-pl-xl">{{ childItem.label }}</span>
+                  </q-item-label>
+                </q-item-section>
+              </q-item>
+            </div>
+          </div>
         </q-list>
       </q-scroll-area>
     </q-drawer>