manHourHousekeeper/fhKeeper/formulahousekeeper/customerBuler-crm/src/pages/home copy.vue

<template>
  <div class="w-full h-full">
    <el-container>
      <el-header class="bg-sky-800 leading-10 flex flex-row justify-between">
        <div class=" flex flex-row justify-start items-center text-white flex-1">
          <div v-for="routerItem in routerList"
            :class="`border-b-2 border-transparent hover:border-white p-2 mr-4 multipleyHeader ${activeRouter?.path === routerItem.path ? 'border-white' : ''}`"
            :key="routerItem.path">
            <div v-if="!routerItem.children" @click="setCurrentRouter(routerItem)">
              {{ routerItem.name }}
            </div>
            <div v-else class="flex justify-center items-center">
              <el-dropdown>
                <div class="text-white w-full h-full headerText">
                  {{ routerItem.name }}
                  <el-icon class="el-icon--right">
                    <arrow-down />
                  </el-icon>
                </div>
                <template #dropdown>
                  <el-dropdown-menu>
                    <el-dropdown-item v-for="child in routerItem.children"
                      :key="child.path"
                      @click="setCurrentRouter(child)">
                      {{ child.name }}
                    </el-dropdown-item>
                  </el-dropdown-menu>
                </template>
              </el-dropdown>
            </div>
          </div>
        </div>
        <div class="flex flex-row justify-start items-center text-white">
          <el-icon :size="26" class="ml-4 cursor-pointer">
            <Bell />
          </el-icon>
          <div>
            <img class="w-8 h-8 rounded-full ml-4 cursor-pointer" :src="defaultCover" alt="" @click="logout()">
          </div>
          <el-icon :size="26" class="ml-4 cursor-pointer">
            <Grid />
          </el-icon>
        </div>
      </el-header>
      <el-main>
        <router-view />
      </el-main>
    </el-container>
  </div>
</template>

<script lang="ts" setup>
import { onMounted, ref } from 'vue';
import { RouteRecordRaw, useRouter } from 'vue-router';
import { useStore } from "@/store"
import defaultCover from "@/assets/defaultCover.png";
const { getRoutersList } = useStore()
const router = useRouter();
const routerList = ref<RouteRecordRaw[]>([]);
const activeRouter = ref<RouteRecordRaw>();
const setCurrentRouter = (item: RouteRecordRaw) => {
  activeRouter.value = item;
  if (item.children && item.children.length > 0) {
    router.push({ path: item.children[0].path });
    return
  }
  router.push({ path: item.path });
};
const logout = () => {
  router.push({ path: '/login' });
};
onMounted(() => {
  routerList.value = getRoutersList;
  activeRouter.value = routerList.value.find((item) => item.path === router.currentRoute.value.path);
  console.log("routerList", routerList);
})

</script>

<style scoped lang="scss">
.multipleyHeader {
  height: 96%;
  display: flex;
  align-items: center;
  .headerText {
    font-size: 16px;
  }
}
</style>