scrolltab

src/views/MainLayout.vue

@@ -17,6 +17,9 @@ import type {
 } from "../interface/request/main/main";
 import {
   menuList,
+  tabListLogin,
+  tabListDatamain,
+  tabStructuremain,
   tabList,
   // tabListPlacement,
 } from "../interface/request/main/main";
@@ -50,6 +53,8 @@ const role = ref<string[]>([]);
 const notiTrigger = ref<boolean>(false);
 const text = ref<string>("");
 
+const listTab = ref<any>([]);
+
 const notiList = ref<notiType[]>([
   {
     id: "1",
@@ -85,20 +90,13 @@ const options = ref<optionType[]>([
 const tabScroll = () => {
   return route.name == "registryDetail";
 };
+const tabLogin = async () => {
+  await setListTab();
 
-const tabScroll2 = () => {
-  let pathName = "";
-  // let childernName: any = [];
-  // tabList.forEach((e: any) => {
-  //   childernName = e.childern;
-  // });
-  // console.log(childernName);
-
-  pathName = tabList.find((e: any) => e.path === route.path);
-  if (pathName) {
+  let namePath = menuList[1].children.find((e: any) => e.path === route.path);
+  if (namePath) {
     return true;
   }
-  // return route.name == "manual";
 };
 
 /**
@@ -137,6 +135,8 @@ const onScroll = (scroll: ScrollType) => {
  * updateScroll เป็น function active แทปด้านขวา
  */
 const updateScroll = (position: number) => {
+  console.log(position);
+
   // เมื่อ position เป็น undifind ให้ position เป็น ตำแหน่ง top ที่ scroll
   if (position === void 0) {
     position = document.documentElement.scrollTop || document.body.scrollTop;
@@ -146,8 +146,8 @@ const updateScroll = (position: number) => {
   /**
    * วนหา id ของ div นั้น
    */
-  for (const i in tabList) {
-    const section = tabList[i];
+  for (const i in listTab.value) {
+    const section = listTab.value[i];
     const item = document.getElementById(section.tag);
     /**
      * วนหา id ของ div หน้านั้น
@@ -187,9 +187,8 @@ const updateScroll = (position: number) => {
  * ให้แสดง แทปด้านขวา เมื่อเข้าหน้า รายละเอียดทะเบียนประวัติ และ rightActive เท่ากับ true
  */
 const activeBtn = () => {
-  return route.name == "registryDetail" && rightActive.value;
+  return route.name == "manual" && rightActive.value;
 };
-
 /**
  * เมื่อเริ่มต้นโปรแกรมให้ฟัง event resize และ function myEventHandler
  * set function myEventHandler เพราะ state ยังไม่เซ็ท , state เซ็ทเมื่อ หน้าจอเริ่ม ขยับหน้าจอ
@@ -197,14 +196,23 @@ const activeBtn = () => {
  * ยังจับ boolean ผิด จึงต้อง set
  */
 onMounted(async () => {
-  console.log(tabList);
-
   myEventHandler(null, false);
   window.addEventListener("resize", (e: any) => {
     myEventHandler(e, true);
   });
+  await setListTab();
 });
 
+const setListTab = () => {
+  if (route.name == "manual") {
+    listTab.value = tabListLogin;
+  } else if (route.name == "datamain") {
+    listTab.value = tabListDatamain;
+  } else if (route.name == "structuremain") {
+    listTab.value = tabStructuremain;
+  }
+};
+
 /**
  * เมื่อออกจากโปรแกรม ให้ ยกเลิกการฟัง event resize
  */
@@ -271,9 +279,6 @@ const activeMenu = (path: string) => {
 const activeTab = (tag: string) => {
   return tabData.value == tag;
 };
-const activeTab2 = (tag: string) => {
-  return tabData.value == tag;
-};
 
 /**
  * คลิกเพื่อให้ router หรือ scroll ไปยังตำแหน่งนั้นๆ
@@ -343,27 +348,27 @@ const activeBtnPlacement = () => {
   return route.name == "PlacementPersonalDetail" && rightActive.value;
 };
 
-const activeTabPlacement = (tag: string) => {
-  return tabData.value == tag;
-};
+// const activeTabPlacement = (tag: string) => {
+//   return tabData.value == tag;
+// };
 
-const tagClickPlacement = (tag: string) => {
-  const hash = `#${tag}`;
-  const items = document.getElementById(tag);
-  const offset = Math.max(0, items == null ? 0 : items.offsetTop + 50);
-  //   router.replace({ hash });
-  if (route.hash !== hash) {
-    const checkPlacement = activeBtnPlacement();
-    if (checkPlacement) {
-      drawerR.value = !drawerR.value;
-      setVerticalScrollPosition(window, offset, 300);
-    } else {
-      setVerticalScrollPosition(window, offset, 300);
-    }
-  } else {
-    setVerticalScrollPosition(window, offset, 300);
-  }
-};
+// const tagClickPlacement = (tag: string) => {
+//   const hash = `#${tag}`;
+//   const items = document.getElementById(tag);
+//   const offset = Math.max(0, items == null ? 0 : items.offsetTop + 50);
+//   //   router.replace({ hash });
+//   if (route.hash !== hash) {
+//     const checkPlacement = activeBtnPlacement();
+//     if (checkPlacement) {
+//       drawerR.value = !drawerR.value;
+//       setVerticalScrollPosition(window, offset, 300);
+//     } else {
+//       setVerticalScrollPosition(window, offset, 300);
+//     }
+//   } else {
+//     setVerticalScrollPosition(window, offset, 300);
+//   }
+// };
 //**** End Tab Right หน้าจอแก้ไขข้อมูลส่วนตัวของผู้สอบผ่าน ****\\
 
 /**
@@ -704,13 +709,7 @@ const clickTag = (val: string) => {
                 class="menuSub"
                 expand-icon="mdi-chevron-down"
                 expanded-icon="mdi-chevron-up"
-                v-if="
-                  menuItem.key == 3 ||
-                  menuItem.key == 5 ||
-                  menuItem.key == 6 ||
-                  menuItem.key == 7 ||
-                  menuItem.key == 8
-                "
+                v-if="menuItem.key == 2"
               >
                 <template v-slot:header>
                   <q-item-section avatar>
@@ -773,7 +772,7 @@ const clickTag = (val: string) => {
                   clickable
                   v-for="(subMenu, j) in menuItem.children"
                   :key="j"
-                  :to="{ name: `${subMenu.path}` }"
+                  :to="subMenu.path"
                 >
                   <q-item-section>
                     <q-item-label class="font-400">{{
@@ -830,7 +829,7 @@ const clickTag = (val: string) => {
       <q-scroll-area class="fit">
         <q-list padding>
           <q-item
-            v-for="(tabItem, index) in tabList"
+            v-for="(tabItem, index) in tabListLogin"
             :key="index"
             :id="'tab--' + tabItem.tag"
             class="tabNative"
@@ -860,7 +859,7 @@ const clickTag = (val: string) => {
       side="right"
       class="bg-grey-2"
       show-if-above
-      v-if="tabScroll2()"
+      v-if="tabLogin()"
       v-model="drawerR"
       :width="250"
       :breakpoint="1023"
@@ -868,17 +867,17 @@ const clickTag = (val: string) => {
       <q-scroll-area class="fit">
         <q-list padding>
           <q-item
-            v-for="(tabItem, index) in tabList"
+            v-for="(tabItem, index) in listTab"
             :key="index"
-            :id="'tab--' + tabItem.no"
+            :id="'tab--' + tabItem.tag"
             class="tabNative"
             active-class="text-blue-7 active-item text-weight-medium tabActive"
-            :active="activeTab2(tabItem.no)"
+            :active="activeTab(tabItem.tag)"
             clickable
             v-ripple
             dense
             exact
-            @click="clickTag(tabItem.path)"
+            @click="tagClick(tabItem.tag)"
           >
             <q-item-section>
               <q-item-label
@@ -890,6 +889,7 @@ const clickTag = (val: string) => {
         </q-list>
       </q-scroll-area>
     </q-drawer>
+
     <!-- drawer page placement2/detail/:id -->
     <!-- <q-drawer
       side="right"