Selaa lähdekoodia

feat: indent模块增加路由主导航菜单.

peter 1 kuukausi sitten
vanhempi
commit
8334d399d4
1 muutettua tiedostoa jossa 58 lisäystä ja 2 poistoa
  1. 58 2
      src/pages/indent-manage/index.vue

+ 58 - 2
src/pages/indent-manage/index.vue

@@ -1,8 +1,32 @@
 <template>
-  <router-view class="bg-white" />
+  <div :class="{ 'pt-[48px]': currentPath !== '' }">
+    <div
+      v-if="currentPath !== ''"
+      class="fixed z-50 top-0 left-0 shadow-sm w-[100vw]"
+    >
+      <div class="max-w-[1800px] mx-auto h-[48px] flex bg-sky-600">
+        <div class="leading-[48px] px-8 font-black text-white">Indent APP</div>
+        <div class="flex">
+          <div
+            v-for="item in navList"
+            :key="item.key"
+            @click="$router.push(item.path)"
+            class="cursor-pointer h-[100%] w-[100px] leading-[48px] px-4 no-underline text-white hover:font-bold flex justify-center"
+            :class="{
+              'font-bold': currentPath === item.key,
+              'bg-sky-900': currentPath === item.key,
+            }"
+          >
+            {{ item.key }}
+          </div>
+        </div>
+      </div>
+    </div>
+    <router-view class="bg-white" />
+  </div>
 </template>
 <script lang="ts" setup>
-import { defineComponent, provide } from 'vue'
+import { defineComponent, provide, computed } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import Cookie from 'js-cookie'
 defineComponent({
@@ -43,6 +67,38 @@ if (!token && $route.path !== '/indent-manage/login') {
   console.log('已登录')
   $router.replace({ path: $route.path })
 }
+const navList = [
+  {
+    key: 'indent',
+    path: '/indent-manage/indent/list',
+  },
+  {
+    key: 'product',
+    path: '/indent-manage/product/list',
+  },
+  {
+    key: 'supplier',
+    path: '/indent-manage/supplier/list',
+  },
+  {
+    key: 'user',
+    path: '/indent-manage/user',
+  },
+]
+let currentPath = computed(() => {
+  let result = ''
+
+  if (/indent-manage\/indent/.test($route.path)) {
+    result = 'indent'
+  } else if (/indent-manage\/product/.test($route.path)) {
+    result = 'product'
+  } else if (/indent-manage\/user/.test($route.path)) {
+    result = 'user'
+  } else if (/indent-manage\/supplier/.test($route.path)) {
+    result = 'supplier'
+  }
+  return result
+})
 </script>
 <style>
 .bg-white {