khy_dzbc_ui/src/views/HomeView.vue

<script lang="ts" setup>
import {apiauthlogout} from '../request/api.js'
import { ElMessage } from 'element-plus'
import { RouterView,useRoute,useRouter   } from 'vue-router'
const route = useRoute();
const router = useRouter();
import {usenowrouteStore} from '../stores/nowroute.ts'
const routerStore=usenowrouteStore()
let {routename,setroute}=routerStore
import {ref,watch,computed } from 'vue'
import {
  BellFilled,
  ArrowRightBold,
  Menu as IconMenu,
  Location,
  Setting,
  Search
} from '@element-plus/icons-vue'
let searchWord=ref('')
const handleOpen = (key: string, keyPath: string[]) => {
  
  //setroute(key.path)
}


let filterName=computed(()=>{
  let res=''
  switch(routerStore.routename){
    case '/userman':
      res='用户管理'
      break;
    case '/areaman':
      res='区域管理'
      break;
    case '/stationman':
      res='站点管理'
      break;
    case '/carman':
      res='车辆管理'
      break;
    case '/routeman':
      res='路线管理'
      break;
    case '/carplanman':
      res='车辆排班'
      break;
    case '/orderman':
      res='订单管理'
      break;
    case '/passengerstation':
      res='客运站管理'
      break;
    case '/bannerman':
      res='小程序宣传图管理'
      break;
  }
  return res
})
const handleClose = (key: string, keyPath: string[]) => {
 
}
const clickUser=(type: string)=>{
  switch(type){
    case 'logout':
        apiauthlogout({}).then(res=>{
          ElMessage({
                message: '成功退出',
                type: 'success',
                duration: 3 * 1000
          });
          router.replace({
            path:'/login'
          })
        }).catch(err=>{
          console.log(err)
        })
        
      break;
  }
  console.log(type)
}


// 使用 watch 监听路由对象的变化
watch(() => route, (newRoute, oldRoute) => {
  console.log(newRoute)
  setroute(newRoute.path)
  // 在这里执行你想要的逻辑
}, { deep: true });
</script>


<template>
  <div class="common-layout">
    <el-container>
      <el-aside width="200px" style="background:#fff">
        <div class="reset-ipt">
          <!-- <el-input
          
          v-model="searchWord"
          style="width: 100%"
          placeholder="搜索菜单..."
          :suffix-icon="Search"
        /> -->
        车辆调度管理系统
        </div>
        <el-menu
       
        active-text-color="#ffd04b"
        background-color="#000000"
        class="el-menu-vertical-demo"
        default-active="1"
        router
        text-color="#fff"
        @open="handleOpen"
        @close="handleClose"
      >
      
        <el-menu-item index="userman">
          <div class="ima-icon">
            <img style="width:20px;height:auto" src="../../public/imgs/userman.png" alt="">
          </div>
          <span style="flex:1">用户管理</span>
          <div class="next-img">
            <el-icon><ArrowRightBold /></el-icon>
          </div>
        </el-menu-item>
        <el-menu-item index="areaman">
          <div class="ima-icon">
            <img style="width:18px;height:auto" src="../../public/imgs/areaman.png" alt="">
          </div>
          <span style="flex:1">区域管理</span>
          <div class="next-img">
            <el-icon><ArrowRightBold /></el-icon>
          </div>
        </el-menu-item>
        <el-menu-item index="stationman">
          <div class="ima-icon">
            <img style="width:9px;height:auto" src="../../public/imgs/stationman.png" alt="">
          </div>
          <span style="flex:1">站点管理</span>
          <div class="next-img">
            <el-icon><ArrowRightBold /></el-icon>
          </div>
        </el-menu-item>
        <el-menu-item index="carman">
          <div class="ima-icon">
            <img style="width:16px;height:auto" src="../../public/imgs/carman.png" alt="">
          </div>
          <span style="flex:1">车辆管理</span>
          <div class="next-img">
            <el-icon><ArrowRightBold /></el-icon>
          </div>
        </el-menu-item>
        <el-menu-item index="routeman">
          <div class="ima-icon">
            <img style="width:16px;height:auto" src="../../public/imgs/routeman.png" alt="">
          </div>
          <span style="flex:1">路线管理</span>
          <div class="next-img">
            <el-icon><ArrowRightBold /></el-icon>
          </div>
        </el-menu-item>
        <el-menu-item index="carplanman">
          <div class="ima-icon">
            <img style="width:14px;height:auto" src="../../public/imgs/carman.png" alt="">
          </div>
          <span style="flex:1">车辆排班</span>
          <div class="next-img">
            <el-icon><ArrowRightBold /></el-icon>
          </div>
        </el-menu-item>
        <el-menu-item index="orderman">
          <div class="ima-icon">
            <img style="width:12px;height:auto" src="../../public/imgs/orderman.png" alt="">
          </div>
          <span style="flex:1">订单管理</span>
          <div class="next-img">
            <el-icon><ArrowRightBold /></el-icon>
          </div>
        </el-menu-item>
        <el-menu-item index="passengerstation">
          <div class="ima-icon">
            <img style="width:12px;height:auto" src="../../public/imgs/orderman.png" alt="">
          </div>
          <span style="flex:1">客运站管理</span>
          <div class="next-img">
            <el-icon><ArrowRightBold /></el-icon>
          </div>
        </el-menu-item>
        <el-menu-item index="bannerman">
          <div class="ima-icon">
            <img style="width:12px;height:auto" src="../../public/imgs/orderman.png" alt="">
          </div>
          <span style="flex:1">banner管理</span>
          <div class="next-img">
            <el-icon><ArrowRightBold /></el-icon>
          </div>
        </el-menu-item>
      </el-menu>
      </el-aside>
      <el-container>
        <el-header>
          <div class="left-part">
            <el-breadcrumb separator="/">
              <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
           
              <el-breadcrumb-item v-if="routerStore.routename">{{ filterName }}</el-breadcrumb-item>
             
            </el-breadcrumb>
          </div>
          <div class="right-part">
            <el-icon :size="22"><BellFilled  /></el-icon>
           
            <el-dropdown @command="clickUser">
              <div style="display:flex;align-items:center">
                <div class="person-photo" style="cursor:pointer"></div>
               
                <div style="margin-right:24px;padding-left:6px;cursor:pointer">
                  管理员
                </div>

                <el-icon class="el-icon--right">
                  <arrow-down />
                </el-icon>
              </div>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item command="logout">退出登录</el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
           
          </div>
        </el-header>
        <el-main>
          <RouterView />
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<style lang="scss">
  .reset-ipt{
    box-sizing: border-box;
    color:#fff;
    background:#000;
    padding:12px 16px;
    .el-input__wrapper{
      box-shadow: none;
      background:#374151;
    }
  }
</style>

<style lang="scss"  scoped>
  
  .el-menu{
    height:calc(100% - 56px);
  }
  .common-layout{
    height:100%;
    .el-container{
      .el-menu-item{
        display:flex;
        align-items: center;
        justify-content: space-between;
      }
      .ima-icon{
        margin-right:8px;
        display:flex;
        align-items: center;
        justify-content: center;
      }
      height:100%;
      .el-header{
        background:#fff;
        height:72px;
        display:flex;
        justify-content: space-between;
        align-items: center;
        .right-part{
          display:flex;
          align-items: center;
          .person-photo{
            margin-left:24px;
            height:42px;
            width:42px;
            background:url(/imgs/userphoto.png) no-repeat;
            background-size:100% 100%;
            border-radius: 50%;
          }
        }
      }
      .el-main{
        background:#f3f4f6;
      }
    }
  }

</style>