Cold_erp_web/src/views/Index.vue

<script setup lang="ts">
import SubMenu from '@/layouts/Menu/SubMenu.vue'
import Main from '@/layouts/Main/index.vue'
import Header from '@/layouts/Header/index.vue'
import { Menu_User_List } from '@/api/role/index'
import { GlobalStore } from '@/stores/index'
// import md5 from 'js-md5'
// console.log(md5('123456'))
const globalStore = GlobalStore()
const getMenu = async () => {
  const res = await Menu_User_List({ User_tokey: globalStore.GET_User_tokey })
}
getMenu()
const routerList = [
  {
    path: '/home',
    name: 'Home',
    meta: {
      icon: 'HomeFilled',
      title: '首页',
      isKeepAlive: true
    }
  },
  {
    path: '/account',
    name: 'Account',
    meta: {
      icon: 'HomeFilled',
      title: '账户管理',
      isKeepAlive: true
    },
    children: [
      {
        path: '/users',
        name: 'Users',
        meta: {
          icon: 'Memo',
          title: '账户管理',
          isKeepAlive: true
        }
      },
      {
        path: '/roles',
        name: 'Roles',
        meta: {
          icon: 'UserFilled',
          title: '角色管理',
          isKeepAlive: true
        }
      }
    ]
  },
  {
    path: '',
    name: '仓库管理',
    iocn: '',
    meta: {
      icon: 'HomeFilled',
      title: '首页',
      isKeepAlive: true
    }
  },
  {
    path: '/salary',
    name: '薪资管理',
    meta: {
      icon: 'HomeFilled',
      title: '薪资管理',
      isKeepAlive: true
    },
    children: [
      {
        path: '/salary',
        name: '薪资管理',
        meta: {
          icon: 'HomeFilled',
          title: '薪资管理',
          isKeepAlive: true
        }
      },
      {
        path: '/salaryCount',
        name: '薪资统计',
        meta: {
          icon: 'HomeFilled',
          title: '薪资统计',
          isKeepAlive: true
        }
      },
      {
        path: '/salaryMy',
        name: '我的薪资',
        meta: {
          icon: 'HomeFilled',
          title: '我的薪资',
          isKeepAlive: true
        }
      }
    ]
  },
  {
    path: '',
    name: '薪资管理',
    iocn: '',
    meta: {
      icon: 'HomeFilled',
      title: '首页',
      isKeepAlive: true
    },
    children: [
      {
        path: '',
        name: '统筹管理',
        meta: {
          icon: 'HomeFilled',
          title: '首页',
          isKeepAlive: true
        }
      },
      {
        path: '',
        name: '统筹管理(财务)',
        meta: {
          icon: 'HomeFilled',
          title: '首页',
          isKeepAlive: true
        }
      }
      // { index: '5-3', path: '', name: '加班审批', iocn: '' },
      // { index: '5-4', path: '', name: '请假审批', iocn: '' },
      // { index: '5-5', path: '', name: '我的加班', iocn: '' },
      // { index: '5-6', path: '', name: '我的请假', iocn: '' }
    ]
  }
]
</script>

<template>
  <el-container class="home-container">
    <el-aside width="210px">
      <!-- <h1 style="color: #fff; text-align: center; margin: 20px; font-size: 32px">ERP系统</h1> -->
      <el-scrollbar class="scrollbar">
        <!-- text-color="#303133" -->
        <el-menu
          :unique-opened="true"
          :collapse-transition="false"
          active-text-color="#ffd04b"
          text-color="#fff"
          background-color="#091215"
        >
          <SubMenu :menu-list="routerList"></SubMenu>
        </el-menu>
      </el-scrollbar>
    </el-aside>
    <el-container>
      <el-header>
        <Header />
      </el-header>
      <Main />
    </el-container>
  </el-container>
</template>

<style scoped lang="scss">
.home-container {
  height: 100%;
  .scrollbar {
    border-right: solid 1px var(--el-menu-border-color);
    :deep(.el-menu) {
      border-right: none;
    }
  }
  .el-aside {
    background-color: #091215;
  }
  .el-header {
    display: flex;
    align-items: center;
    border-bottom: solid 1px var(--el-menu-border-color);
  }
}
/* fade-transform */
.fade-transform-leave-active,
.fade-transform-enter-active {
  transition: all 0.2s;
}
.fade-transform-enter-from {
  opacity: 0;
  transition: all 0.2s;
  transform: translateX(-30px);
}
.fade-transform-leave-to {
  opacity: 0;
  transition: all 0.2s;
  transform: translateX(30px);
}
</style>