vue2人力资源项目10静态路由和动态路由拆分

静态路由：固定的路由

动态路由：需要根据权限访问的路由

1.拆分了静态路由和动态路由，分别放在不同的数组里

const asyncRoute = [
  departmentRouter,
  roleRouter,
  employeeRouter,
  permissionRouter,
  attendanceRouter,
  approvalRouter,
  salaryRouter,
  socialRouter
]

export const constantRoutes = [
  {
    path: '/login',
    component: () => import('@/views/login/index'),
    hidden: true
  },

  {
    path: '/404',
    component: () => import('@/views/404'),
    hidden: true
  },

  {
    path: '/',
    component: Layout,
    redirect: '/dashboard',
    children: [{
      path: 'dashboard',
      name: 'Dashboard',
      component: () => import('@/views/dashboard/index'),
      meta: { title: '首页', icon: 'dashboard' }
    }]
  },

  // 404 page must be placed at the end !!!
  { path: '*', redirect: '/404', hidden: true }
]

2.根据用户权限添加动态路由

user.js里返回数据

  async getUserInfo(context) {
    // 获取接口信息
    const result = await getUserInfo()
    context.commit('setUserInfo', result)
    return result// 返回数据
  },

给每一个路由模块都加一个name

eg:

筛选动态路由，再添加

 if (!store.getters.userId) {
        const { roles } = await store.dispatch('user/getUserInfo')
        //  console.log(roles.menus)//数组 不确定 可能是8个
        //  console.log(asyncRoutes)
        // 对打印出的结果进行筛选
        const filterRouters = asyncRoutes.filter(item => {
          // 筛选之后的路由
          return roles.menus.includes(item.name)
        })
        router.addRoutes(filterRouters)// 添加动态路由信息到路由表
        // router添加动态路由之后，需要转发一下
        next(to.path)
      } else {
        next() // 放过
      }
    }

一定要再最后添加404

 router.addRoutes(...filterRouters, { path: '*', redirect: '404', hidden: true })// 添加动态路由信息到路由表

根据权限渲染左侧菜单

退出登录（重置路由）

自定义指令

注：使用需要线上代码与线下的配合

1.在main.js里自定义注册指令

// 注册自定义指令，控制功能权限
// 两个参数：1.指令名称（不用写v-,它会自动补足）2.空对象
Vue.directive('permission', {
  inserted(el, binding) {
    // el是当前指令作用dom元素的对象
    // binding 是v-permission=“表达式” 表达式的信息
    const points = store.state.user.userInfo?.roles?.points || []
    // 拿到了points
    // points中是否有add-employee
    // binding.value :v-permission=“表达式” 中的表达式的值
    if (!points.includes(binding.value)) {
      // 删除或禁用
      el.remove()
      // el.disabled = true //禁用
    }
  }
})

2,绑定给按钮

 首页

1.粘贴页面结构

2.安装插件并引入，在注册组件

import CountTo from 'vue-count-to'
export default {
  components: {
    CountTo
  }
}

3.利用插件让数字从0滚到目标值

<div class="todo-item">
              <span>组织总人数</span>
              <!-- 起始值 终点值  滚动时间 -->

              <count-to
                :start-val="0"
                :end-val="228"
                :duration="1000"
              />
           
            </div>

展示首页数据

1.向外导出这四个属性

const getters = {
  sidebar: state => state.app.sidebar,
  device: state => state.app.device,
  token: state => state.user.token,
  userId: state => state.user.userInfo.userId,
  avatar: state => state.user.userInfo.avatar, // 用户头像
  name: state => state.user.userInfo.name, // 用户名称
  company: state => state.user.userInfo.company, // 公司名称
  department: state => state.user.userInfo.department// 部门名称
}
export default getters

2.引用

  computed: {
    // 把那四个属性导入到了computed中
    ...mapGetters(['name', 'avatar', 'company', 'departmentName'])
  }

3.使用，有头像显示头像，没有就显示第一个字,name后使用可选连，防止报错

 <div class="depart">{{ name }} ｜ {{ company }}-{{ departmentName }}</div>
<img v-if="avatar" class="avatar" :src="avatar" alt="">
            <span v-else class="username">{{ name?.charAt(0) }}</span>

获取企业信息

注意：如果有三层获取，需要使用可选链，防止报错

展示表格

注意引入时要根据文档按需引入

import CountTo from 'vue-count-to'
import { mapGetters } from 'vuex'
import { getHomeData, getMessageList } from '@/api/home'
// import * as echarts from 'echarts' // 引入所有的echarts
import * as echarts from 'echarts/core' // 引入核心包
import { LineChart } from 'echarts/charts' // 引入折线图
import { GridComponent } from 'echarts/components' // 引入组件
import { CanvasRenderer } from 'echarts/renderers'
echarts.use([
  LineChart,
  GridComponent,
  CanvasRenderer
])
export default {
  components: {
    CountTo
  },
  data() {
    return {
      homeData: {},
      list: []
    }
  },
  // 计算属性
  computed: {
    // 将getters中的四个属性映射到计算属性中- 指向
    ...mapGetters(['avatar', 'name', 'company', 'departmentName'])
  },
  watch: {
    homeData() {
      console.log(this.homeData)
      // 设置图表
      this.social.setOption({
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: this.homeData.socialInsurance?.xAxis
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: this.homeData.socialInsurance?.yAxis,
            type: 'line',
            areaStyle: {
              color: '#04c9be' // 填充颜色
            },
            lineStyle: {
              color: '#04c9be' // 线的颜色
            }
          }
        ]
      })
      this.provident.setOption({
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: this.homeData.providentFund?.xAxis
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: this.homeData.providentFund?.yAxis,
            type: 'line',
            areaStyle: {
              color: '#04c9be' // 填充颜色
            },
            lineStyle: {
              color: '#04c9be' // 线的颜色
            }
          }
        ]
      })
    }
  },

  created() {
    this.getHomeData()
    this.getMessageList()
  },
  mounted() {
    // 获取展示的数据 设置给图表
    // 监听homeData的变化
    this.social = echarts.init(this.$refs.social) // 初始化echart
    // data中没有声明 不是响应式
    this.provident = echarts.init(this.$refs.provident)
  },
  methods: {
    async getHomeData() {
      this.homeData = await getHomeData()
    },
    async getMessageList() {
      this.list = await getMessageList()
    }
  }
}

更改为history 模式

之后是关于打包的内容