人力资源管理后台 === 权限应用

目录

1.权限应用-拆分静态路由-动态路由

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

3.权限应用-根据权限显示左侧菜单

4.权限应用-退出登录重置路由

5.权限应用-功能权限-按钮权限标识

6.权限应用-自定义指令应用功能权限

7.其他模块-集成

8.首页-基本结构和数字滚动

9.首页-个人信息展示

10.首页-企业数据获取

11.首页-通知消息获取

1.权限应用-拆分静态路由-动态路由

image.png

  • 将静态路由和动态路由进行拆分-代码位置(src/router/index.js)
import Vue from 'vue'
import Router from 'vue-router'Vue.use(Router)/* Layout */
import Layout from '@/layout'
import departmentRouter from './modules/department'
import approvalRouter from './modules/approval'
import attendanceRouter from './modules/attendance'
import employeeRouter from './modules/employee'
import permissionRouter from './modules/permission'
import roleRouter from './modules/role'
import salaryRouter from './modules/salary'
import socialRouter from './modules/social'/*** Note: sub-menu only appear when route children.length >= 1* Detail see: https://panjiachen.github.io/vue-element-admin-site/guide/essentials/router-and-nav.html** hidden: true                   if set true, item will not show in the sidebar(default is false)* alwaysShow: true               if set true, will always show the root menu*                                if not set alwaysShow, when item has more than one children route,*                                it will becomes nested mode, otherwise not show the root menu* redirect: noRedirect           if set noRedirect will no redirect in the breadcrumb* name:'router-name'             the name is used by <keep-alive> (must set!!!)* meta : {roles: ['admin','editor']    control the page roles (you can set multiple roles)title: 'title'               the name show in sidebar and breadcrumb (recommend set)icon: 'svg-name'/'el-icon-x' the icon show in the sidebarbreadcrumb: false            if set false, the item will hidden in breadcrumb(default is true)activeMenu: '/example/list'  if set path, the sidebar will highlight the path you set}*//*** constantRoutes* a base page that does not have permission requirements* all roles can be accessed*/
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 }
]
// 动态路由
export const asyncRoutes = [departmentRouter,roleRouter,employeeRouter,permissionRouter,attendanceRouter,approvalRouter,salaryRouter,socialRouter]
const createRouter = () => new Router({// mode: 'history', // require service supportscrollBehavior: () => ({ y: 0 }),routes: constantRoutes // 默认引入静态路由
})const router = createRouter()// Detail see: https://github.com/vuejs/vue-router/issues/1234#issuecomment-357941465
export function resetRouter() {const newRouter = createRouter()router.matcher = newRouter.matcher // reset router
}export default router

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

image.png


 

image.png


怎么匹配?

image.png

  • Vuex用户模块action中返回result信息
async getUserInfo(context) {const result = await getUserInfo()context.commit('setUserInfo', result)return result // 返回数据
}
  • 权限拦截处筛选-添加路由-代码位置(src/permission.js)
import router from '@/router'
import nprogress from 'nprogress'
import 'nprogress/nprogress.css'
import store from '@/store'
import { asyncRoutes } from '@/router'/***前置守卫*
*/const whiteList = ['/login', '/404']
router.beforeEach(async(to, from, next) => {nprogress.start()if (store.getters.token) {// 存在tokenif (to.path === '/login') {// 跳转到主页next('/') // 中转到主页// next（地址）并没有执行后置守卫nprogress.done()} else {// 判断是否获取过资料if (!store.getters.userId) {const { roles } = await store.dispatch('user/getUserInfo')// console.log(roles.menus) // 数组 不确定 可能是8个 1个 0个// console.log(asyncRoutes) // 数组 8个const filterRoutes = asyncRoutes.filter(item => {// return true/falsereturn roles.menus.includes(item.name)}) // 筛选后的路由router.addRoutes([...filterRoutes, { path: '*', redirect: '/404', hidden: true }]) // 添加动态路由信息到路由表// router添加动态路由之后 需要转发一下next(to.path) // 目的是让路由拥有信息 router的已知缺陷} else {next() // 放过}}} else {// 没有tokenif (whiteList.includes(to.path)) {next()} else {next('/login') // 中转到登录页nprogress.done()}}
})/** ** 后置守卫* **/
router.afterEach(() => {console.log('123')nprogress.done()
})
  • 删除静态路由中的404-代码位置(src/router/index.js)
/*** constantRoutes* a base page that does not have permission requirements* all roles can be accessed*/
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' }}]}
]
  • 针对每个路由模块的配置文件添加name属性，和权限的数据进行对应。

image.png

3.权限应用-根据权限显示左侧菜单

image.png

image.png

  • Vuex中的user模块添加state管理-代码位置(src/store/modules/user.js)
import { getToken, setToken, removeToken } from '@/utils/auth'
import { login, getUserInfo } from '@/api/user'
import { constantRoutes } from '@/router'
const state = {token: getToken(), // 从缓存中读取初始值userInfo: {}, // 存储用户基本资料状态routes: constantRoutes // 静态路由的数组
}const mutations = {setToken(state, token) {state.token = token// 同步到缓存setToken(token)},removeToken(state) {// 删除Vuex的tokenstate.token = nullremoveToken()},setUserInfo(state, userInfo) {state.userInfo = userInfo},setRoutes(state, newRoutes) {state.routes = [...constantRoutes, ...newRoutes] // 静态路由 + 动态路由}
}const actions = {// context上下文，传入参数async login(context, data) {console.log(data)// todo: 调用登录接口const token = await login(data)// 返回一个token 123456context.commit('setToken', token)},// 获取用户的基本资料async getUserInfo(context) {const result = await getUserInfo()context.commit('setUserInfo', result)return result // 返回数据},// 退出登录的actionlogout(context) {context.commit('removeToken') // 删除tokencontext.commit('setUserInfo', {}) // 设置用户信息为空对象}
}export default {namespaced: true, // 开启命名空间state,mutations,actions
}
  • 筛选路由后，更新state信息-代码位置(src/permission.js)
import router from '@/router'
import nprogress from 'nprogress'
import 'nprogress/nprogress.css'
import store from '@/store'
import { asyncRoutes } from '@/router'/***前置守卫*
*/const whiteList = ['/login', '/404']
router.beforeEach(async(to, from, next) => {nprogress.start()if (store.getters.token) {// 存在tokenif (to.path === '/login') {// 跳转到主页next('/') // 中转到主页// next（地址）并没有执行后置守卫nprogress.done()} else {// 判断是否获取过资料if (!store.getters.userId) {const { roles } = await store.dispatch('user/getUserInfo')// console.log(roles.menus) // 数组 不确定 可能是8个 1个 0个// console.log(asyncRoutes) // 数组 8个const filterRoutes = asyncRoutes.filter(item => {// return true/falsereturn roles.menus.includes(item.name)}) // 筛选后的路由store.commit('user/setRoutes', filterRoutes)router.addRoutes([...filterRoutes, { path: '*', redirect: '/404', hidden: true }]) // 添加动态路由信息到路由表// router添加动态路由之后 需要转发一下next(to.path) // 目的是让路由拥有信息 router的已知缺陷} else {next() // 放过}}} else {// 没有tokenif (whiteList.includes(to.path)) {next()} else {next('/login') // 中转到登录页nprogress.done()}}
})/** ** 后置守卫* **/
router.afterEach(() => {console.log('123')nprogress.done()
})
  • 使用getters开放路由的访问信息-代码位置(src/store/getters.js)
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.staffPhoto, // 头像name: state => state.user.userInfo.username, // 用户名称routes: state => state.user.routes
}
export default getters
  • 左侧菜单组件读取Vuex中的路由信息-代码位置(src/layout/components/Sidebar/index.vue)
export default {components: { SidebarItem, Logo },computed: {...mapGetters(['sidebar', 'routes']),// 路由信息的计算属性// routes() {//   // 返回所有的路由信息//   return this.$router.options.routes// },}
}

4.权限应用-退出登录重置路由

image.png

  • 退出登录时-重置路由-代码位置(src/store/modules/user.js)
import { resetRouter } from '@/router'// 退出登录的actionlogout(context) {context.commit('removeToken') // 删除tokencontext.commit('setUserInfo', {}) // 设置用户信息为空对象// 重置路由resetRouter()}

5.权限应用-功能权限-按钮权限标识

image.png


 

image.png

image.png

6.权限应用-自定义指令应用功能权限

  • 自定义指令- 作用在按钮上-所有的按钮都可以直接使用

image.png

  • 封装自定义指令-代码位置(src/main.js)
// 封装自定义指令 用来控制操作权
Vue.directive('permission', {// 会在指令作用的元素插入到页面完成以后触发inserted(el, binding) {// el 指令作用的元素的dom对象console.log(el)const points = store.state.user.userInfo?.roles?.points || [] // 当前用户信息的操作权if (!points.includes(binding.value)) {// 不存在就要删除或者禁用el.remove() // 删除元素// el.disabled = true// 线上的权限数据和线下的代码进行对应}}})
  • 应用自定义指令-代码位置(src/views/employee/index.vue)
<el-button v-permission="'add-employee'" size="mini" type="primary" @click="$router.push('/employee/detail')">添加员工</el-button>

7.其他模块-集成

素材中，已经给大家提供了 其他模块的请求/路由/组件，只需要拷贝到src即可

image.png

8.首页-基本结构和数字滚动

image.png

image.png

  • 基本结构-代码位置(src/views/dashboard/index.vue)
<template><div class="dashboard"><div class="container"><!-- 左侧内容 --><div class="left"><div class="panel"><!-- 个人信息 --><div class="user-info"><img class="avatar" src="../../assets/common/defaultHead.png" alt=""><div class="company-info"><div class="title">江苏传智播客教育科技股份有限公司<span>体验版</span></div><div class="depart">庆山 ｜ 传智播客-总裁办</div></div></div><!-- 代办 --><div class="todo-list"><div class="todo-item"><span>组织总人数</span><!-- 起始值 终点值  滚动时间 --><span>228</span></div><div class="todo-item"><span>正式员工</span><span>334</span></div><div class="todo-item"><span>合同待签署</span><span>345</span></div><div class="todo-item"><span>待入职</span><span>890</span></div><div class="todo-item"><span>本月待转正</span><span>117</span></div><div class="todo-item"><span>本月待离职</span><span>234</span></div><div class="todo-item"><span>接口总访问</span><span>789</span></div></div></div><!-- 快捷入口 --><div class="panel"><div class="panel-title">快捷入口</div><div class="quick-entry"><div class="entry-item"><div class="entry-icon approval" /><span>假期审批</span></div><div class="entry-item"><div class="entry-icon social" /><span>社保管理</span></div><div class="entry-item"><div class="entry-icon role" /><span>角色管理</span></div><div class="entry-item"><div class="entry-icon salary" /><span>薪资设置</span></div><div class="entry-item"><div class="entry-icon bpm" /><span>流程设置</span></div></div></div><!-- 图表数据 --><div class="panel"><div class="panel-title">社保申报数据</div><div class="chart-container"><div class="chart-info"><div class="info-main"><span>申报人数</span><span>223</span></div><div class="info-list"><div class="info-list-item"><span>待申报(人)</span><span>117</span></div><div class="info-list-item"><span>申报中(人)</span><span>167</span></div><div class="info-list-item"><span>已申报(人)</span><span>24</span></div></div></div><div class="chart"><!-- 图表 --></div></div></div><!-- 图表数据 --><div class="panel"><div class="panel-title">公积金申报数据</div><div class="chart-container"><div class="chart-info"><div class="info-main"><span>申报人数</span><span>335</span></div><div class="info-list"><div class="info-list-item"><span>待申报(人)</span><span>345</span></div><div class="info-list-item"><span>申报中(人)</span><span>109</span></div><div class="info-list-item"><span>已申报(人)</span><span>77</span></div></div></div><div class="chart"><!-- 图表 --></div></div></div></div><!-- 右侧内容 --><div class="right"><!-- 帮助链接 --><div class="panel"><div class="help"><div class="help-left"><div class="panel-title">帮助链接</div><div class="help-list"><div class="help-block"><i class="icon-entry" />入门指南</div><div class="help-block"><i class="icon-help" />在线帮助手册</div><div class="help-block"><i class="icon-support" />联系技术支持</div><div class="help-block"><i class="icon-add" />添加链接</div></div></div><div class="help-right"><div class="calendar"><!-- <el-calendar /> --><el-calendar /></div></div></div></div><!-- 通知公告 --><div class="panel"><div class="panel-title">通知公告</div><div class="information-list"><div class="information-list-item"><img src="@/assets/common/img.jpeg" alt=""><div><p><span class="col">朱继柳</span> 发布了第1期“传智大讲堂”互动讨论获奖名单公布</p><p>2018-07-21 15:21:38</p></div></div><div class="information-list-item"><img src="@/assets/common/img.jpeg" alt=""><div><p><span class="col">朱继柳</span> 发布了第1期“传智大讲堂”互动讨论获奖名单公布</p><p>2018-07-21 15:21:38</p></div></div><div class="information-list-item"><img src="@/assets/common/img.jpeg" alt=""><div><p><span class="col">朱继柳</span> 发布了第1期“传智大讲堂”互动讨论获奖名单公布</p><p>2018-07-21 15:21:38</p></div></div></div></div></div></div></div>
</template><script>
import CountTo from 'vue-count-to'
export default {components: {CountTo}
}
</script><style scoped lang="scss">
.dashboard {background: #f5f6f8;width: 100%;min-height: calc(100vh - 80px);::v-deep .el-calendar-day {height:  40px;}::v-deep .el-calendar-table__row td,::v-deep .el-calendar-table tr td:first-child, ::v-deep .el-calendar-table__row td.prev{border:none;}
.date-content {height: 40px;text-align: center;line-height: 40px;font-size: 14px;
}
.date-content .rest {color: #fff;border-radius: 50%;background: rgb(250, 124, 77);width: 20px;height: 20px;line-height: 20px;display: inline-block;font-size: 12px;margin-left: 10px;
}
.date-content .text{width: 20px;height: 20px;line-height: 20px;display: inline-block;}
::v-deep .el-calendar-table td.is-selected .text{background: #409eff;color: #fff;border-radius: 50%;}::v-deep .el-calendar__header {display: none}.container {display: flex;.right {width: 40%;.panel {margin-left: 8px;}:nth-child(1) {margin-top: 0;}}.left {flex: 1;:nth-child(1) {margin-top: 0;}}.panel {background-color: #fff;margin-top: 8px;padding: 20px;.panel-title {font-size: 16px;color: #383c4e;font-weight: 500;}// 用户信息样式.user-info {display: flex;.avatar {width: 48px;height: 48px;border-radius: 12px;background-color: #d9d9d9;line-height: 48px;text-align: center;}.username {width: 30px;height: 30px;text-align: center;line-height: 30px;border-radius: 50%;background: #04c9be;color: #fff;margin-right: 4px;}.company-info {margin-left: 10px;height: 48px;display: flex;flex-direction: column;justify-content: space-around;.title {color: #383c4e;font-weight: 500;font-size: 16px;font-family: PingFang SC, PingFang SC-Medium;span {font-size: 12px;background: #f5f6f8;text-align: center;padding: 2px 8px;border-radius: 2px;color: #697086;}}.depart {font-size: 14px;color: #697086;font-weight: 400;}}}// 代办样式.todo-list {margin-top: 10px;display: flex;flex-wrap: wrap;.todo-item {width: 18%;height: 90px;display: flex;flex-direction: column;padding: 10px;justify-content: space-around;:nth-child(1) {color: #697086;font-size: 14px;}:nth-child(2) {color: #383c4e;font-size: 30px;font-weight: 500;}}}// 快捷入口.quick-entry {margin-top: 16px;display: flex;.entry-item {display: flex;flex-direction: column;align-items: center;margin-left: 60px;&:nth-child(1) {margin-left: 0px;}.entry-icon {width: 40px;height: 40px;border-radius: 10px;background: #f5f6f8;background-size: cover;&.approval {background-image: url('~@/assets/common/approval.png');}&.social {background-image: url('~@/assets/common/social.png');}&.salary {background-image: url('~@/assets/common/salary.png');}&.role {background-image: url('~@/assets/common/role.png');}&.bpm {background-image: url('~@/assets/common/bpm.png');}}span {color: #697086;font-size: 14px;margin-top: 8px;}}}// 图表数据.chart-container {display: flex;.chart-info {width: 240px;margin-top: 10px;.info-main {padding: 10px;display: flex;flex-direction: column;:nth-child(1) {font-size: 14px;color: #697086;}:nth-child(2) {margin-top: 10px;font-size: 30px;color: #04c9be;font-weight: 500;}}.info-list {background: #f5f6f8;border-radius: 4px;padding: 12px 15px;display: flex;flex-wrap: wrap;align-items: center;.info-list-item {width: 50%;margin-top: 10px;display: flex;flex-direction: column;:nth-child(1) {font-size: 14px;color: #697086;}:nth-child(2) {margin-top: 10px;font-size: 30px;color: #383c4e;font-weight: 500;}}}}.chart {flex:1}}// 帮助链接.help {display: flex;.help-left {width: 40%;}.help-right {flex: 1;}.help-list {.help-block {background: #f5f6f8;border-radius: 4px;width: 264px;height: 54px;padding: 17px 10px;font-size: 14px;color: #697086;margin-top: 10px;i {width: 14px;height: 14px;display: inline-block;background-size: cover;vertical-align: middle;}i.icon-help {background-image: url("~@/assets/common/help.png");}i.icon-support {background-image: url("~@/assets/common/support.png");}i.icon-add {background-image: url("~@/assets/common/add.png");}i.icon-entry {background-image: url("~@/assets/common/entry.png");}}}}// 通知公告.information-list {margin-top: 20px;.information-list-item {display: flex;align-items: center;margin:15px 0;img {width: 40px;height: 40px;border: 50%;}.col {color: #8a97f8;}div :nth-child(2) {color: #697086;font-size: 14px;}}}}}
}
</style>
  • 安装数字滚动插件-vue-count-to
$ npm i vue-count-to
  • 首页基本结构-代码位置(src/views/dashboard/index.vue)
<template><div class="dashboard"><div class="container"><!-- 左侧内容 --><div class="left"><div class="panel"><!-- 个人信息 --><div class="user-info"><img class="avatar" src="../../assets/common/defaultHead.png" alt=""><div class="company-info"><div class="title">江苏传智播客教育科技股份有限公司<span>体验版</span></div><div class="depart">庆山 ｜ 传智播客-总裁办</div></div></div><!-- 代办 --><div class="todo-list"><div class="todo-item"><span>组织总人数</span><!-- 起始值 终点值  滚动时间 --><count-to:start-val="0":end-val="228":duration="1000"/></div><div class="todo-item"><span>正式员工</span><count-to:start-val="0":end-val="334":duration="1000"/></div><div class="todo-item"><span>合同待签署</span><count-to:start-val="0":end-val="345":duration="1000"/></div><div class="todo-item"><span>待入职</span><count-to:start-val="0":end-val="890":duration="1000"/>            </div><div class="todo-item"><span>本月待转正</span><count-to:start-val="0":end-val="117":duration="1000"/></div><div class="todo-item"><span>本月待离职</span><count-to:start-val="0":end-val="234":duration="1000"/></div><div class="todo-item"><span>接口总访问</span><count-to:start-val="0":end-val="789":duration="1000"/></div></div></div><!-- 快捷入口 --><div class="panel"><div class="panel-title">快捷入口</div><div class="quick-entry"><div class="entry-item"><div class="entry-icon approval" /><span>假期审批</span></div><div class="entry-item"><div class="entry-icon social" /><span>社保管理</span></div><div class="entry-item"><div class="entry-icon role" /><span>角色管理</span></div><div class="entry-item"><div class="entry-icon salary" /><span>薪资设置</span></div><div class="entry-item"><div class="entry-icon bpm" /><span>流程设置</span></div></div></div><!-- 图表数据 --><div class="panel"><div class="panel-title">社保申报数据</div><div class="chart-container"><div class="chart-info"><div class="info-main"><span>申报人数</span><count-to:start-val="0":end-val="223":duration="1000"/></div><div class="info-list"><div class="info-list-item"><span>待申报(人)</span><count-to:start-val="0":end-val="117":duration="1000"/></div><div class="info-list-item"><span>申报中(人)</span><count-to:start-val="0":end-val="167":duration="1000"/></div><div class="info-list-item"><span>已申报(人)</span><count-to:start-val="0":end-val="24":duration="1000"/></div></div></div><div class="chart"><!-- 图表 --></div></div></div><!-- 图表数据 --><div class="panel"><div class="panel-title">公积金申报数据</div><div class="chart-container"><div class="chart-info"><div class="info-main"><span>申报人数</span><count-to:start-val="0":end-val="335":duration="1000"/></div><div class="info-list"><div class="info-list-item"><span>待申报(人)</span><count-to:start-val="0":end-val="345":duration="1000"/></div><div class="info-list-item"><span>申报中(人)</span><count-to:start-val="0":end-val="109":duration="1000"/></div><div class="info-list-item"><span>已申报(人)</span><count-to:start-val="0":end-val="77":duration="1000"/></div></div></div><div class="chart"><!-- 图表 --></div></div></div></div><!-- 右侧内容 --><div class="right"><!-- 帮助链接 --><div class="panel"><div class="help"><div class="help-left"><div class="panel-title">帮助链接</div><div class="help-list"><div class="help-block"><i class="icon-entry" />入门指南</div><div class="help-block"><i class="icon-help" />在线帮助手册</div><div class="help-block"><i class="icon-support" />联系技术支持</div><div class="help-block"><i class="icon-add" />添加链接</div></div></div><div class="help-right"><div class="calendar"><!-- <el-calendar /> --><el-calendar /></div></div></div></div><!-- 通知公告 --><div class="panel"><div class="panel-title">通知公告</div><div class="information-list"><div class="information-list-item"><img src="@/assets/common/img.jpeg" alt=""><div><p><span class="col">朱继柳</span> 发布了第1期“传智大讲堂”互动讨论获奖名单公布</p><p>2018-07-21 15:21:38</p></div></div><div class="information-list-item"><img src="@/assets/common/img.jpeg" alt=""><div><p><span class="col">朱继柳</span> 发布了第1期“传智大讲堂”互动讨论获奖名单公布</p><p>2018-07-21 15:21:38</p></div></div><div class="information-list-item"><img src="@/assets/common/img.jpeg" alt=""><div><p><span class="col">朱继柳</span> 发布了第1期“传智大讲堂”互动讨论获奖名单公布</p><p>2018-07-21 15:21:38</p></div></div></div></div></div></div></div>
</template><script>
import CountTo from 'vue-count-to'
export default {components: {CountTo}
}
</script><style scoped lang="scss">
.dashboard {background: #f5f6f8;width: 100%;min-height: calc(100vh - 80px);::v-deep .el-calendar-day {height:  40px;}::v-deep .el-calendar-table__row td,::v-deep .el-calendar-table tr td:first-child, ::v-deep .el-calendar-table__row td.prev{border:none;}
.date-content {height: 40px;text-align: center;line-height: 40px;font-size: 14px;
}
.date-content .rest {color: #fff;border-radius: 50%;background: rgb(250, 124, 77);width: 20px;height: 20px;line-height: 20px;display: inline-block;font-size: 12px;margin-left: 10px;
}
.date-content .text{width: 20px;height: 20px;line-height: 20px;display: inline-block;}
::v-deep .el-calendar-table td.is-selected .text{background: #409eff;color: #fff;border-radius: 50%;}::v-deep .el-calendar__header {display: none}.container {display: flex;.right {width: 40%;.panel {margin-left: 8px;}:nth-child(1) {margin-top: 0;}}.left {flex: 1;:nth-child(1) {margin-top: 0;}}.panel {background-color: #fff;margin-top: 8px;padding: 20px;.panel-title {font-size: 16px;color: #383c4e;font-weight: 500;}// 用户信息样式.user-info {display: flex;.avatar {width: 48px;height: 48px;border-radius: 12px;background-color: #d9d9d9;line-height: 48px;text-align: center;}.username {width: 30px;height: 30px;text-align: center;line-height: 30px;border-radius: 50%;background: #04c9be;color: #fff;margin-right: 4px;}.company-info {margin-left: 10px;height: 48px;display: flex;flex-direction: column;justify-content: space-around;.title {color: #383c4e;font-weight: 500;font-size: 16px;font-family: PingFang SC, PingFang SC-Medium;span {font-size: 12px;background: #f5f6f8;text-align: center;padding: 2px 8px;border-radius: 2px;color: #697086;}}.depart {font-size: 14px;color: #697086;font-weight: 400;}}}// 代办样式.todo-list {margin-top: 10px;display: flex;flex-wrap: wrap;.todo-item {width: 18%;height: 90px;display: flex;flex-direction: column;padding: 10px;justify-content: space-around;:nth-child(1) {color: #697086;font-size: 14px;}:nth-child(2) {color: #383c4e;font-size: 30px;font-weight: 500;}}}// 快捷入口.quick-entry {margin-top: 16px;display: flex;.entry-item {display: flex;flex-direction: column;align-items: center;margin-left: 60px;&:nth-child(1) {margin-left: 0px;}.entry-icon {width: 40px;height: 40px;border-radius: 10px;background: #f5f6f8;background-size: cover;&.approval {background-image: url('~@/assets/common/approval.png');}&.social {background-image: url('~@/assets/common/social.png');}&.salary {background-image: url('~@/assets/common/salary.png');}&.role {background-image: url('~@/assets/common/role.png');}&.bpm {background-image: url('~@/assets/common/bpm.png');}}span {color: #697086;font-size: 14px;margin-top: 8px;}}}// 图表数据.chart-container {display: flex;.chart-info {width: 240px;margin-top: 10px;.info-main {padding: 10px;display: flex;flex-direction: column;:nth-child(1) {font-size: 14px;color: #697086;}:nth-child(2) {margin-top: 10px;font-size: 30px;color: #04c9be;font-weight: 500;}}.info-list {background: #f5f6f8;border-radius: 4px;padding: 12px 15px;display: flex;flex-wrap: wrap;align-items: center;.info-list-item {width: 50%;margin-top: 10px;display: flex;flex-direction: column;:nth-child(1) {font-size: 14px;color: #697086;}:nth-child(2) {margin-top: 10px;font-size: 30px;color: #383c4e;font-weight: 500;}}}}.chart {flex:1}}// 帮助链接.help {display: flex;.help-left {width: 40%;}.help-right {flex: 1;}.help-list {.help-block {background: #f5f6f8;border-radius: 4px;width: 264px;height: 54px;padding: 17px 10px;font-size: 14px;color: #697086;margin-top: 10px;i {width: 14px;height: 14px;display: inline-block;background-size: cover;vertical-align: middle;}i.icon-help {background-image: url("~@/assets/common/help.png");}i.icon-support {background-image: url("~@/assets/common/support.png");}i.icon-add {background-image: url("~@/assets/common/add.png");}i.icon-entry {background-image: url("~@/assets/common/entry.png");}}}}// 通知公告.information-list {margin-top: 20px;.information-list-item {display: flex;align-items: center;margin:15px 0;img {width: 40px;height: 40px;border: 50%;}.col {color: #8a97f8;}div :nth-child(2) {color: #697086;font-size: 14px;}}}}}
}
</style>

9.首页-个人信息展示

image.png

image.png

  • 在getters中开放公司名称和所在部门属性-代码位置(src/store/getters.js)
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.staffPhoto, // 头像name: state => state.user.userInfo.username, // 用户名称routes: state => state.user.routes,company: state => state.user.userInfo.company, // 公司名称departmentName: state => state.user.userInfo.departmentName // 部门名称
}
export default getters
  • 在首页将个人信息的数据替换成Vuex中的数据-代码位置(src/views/dashboard/index.vue)
<template><div class="dashboard"><div class="container"><!-- 左侧内容 --><div class="left"><div class="panel"><!-- 个人信息 --><div class="user-info"><img v-if="avatar" class="avatar" :src="avatar" alt=""><span v-else class="username">{{ name?.charAt(0) }}</span><div class="company-info"><div class="title">江苏传智播客教育科技股份有限公司<span>体验版</span></div><div class="depart">{{ name }} ｜ {{ company }}-{{ departmentName }}</div></div></div><!-- 代办 --><div class="todo-list"><div class="todo-item"><span>组织总人数</span><!-- 起始值 终点值 动画时间 --><count-to:start-val="0":end-val="228":duration="1000"/></div><div class="todo-item"><span>正式员工</span><count-to:start-val="0":end-val="334":duration="1000"/></div><div class="todo-item"><span>合同待签署</span><count-to:start-val="0":end-val="345":duration="1000"/></div><div class="todo-item"><span>待入职</span><count-to:start-val="0":end-val="890":duration="1000"/></div><div class="todo-item"><span>本月待转正</span><count-to:start-val="0":end-val="117":duration="1000"/></div><div class="todo-item"><span>本月待离职</span><count-to:start-val="0":end-val="234":duration="1000"/></div><div class="todo-item"><span>接口总访问</span><count-to:start-val="0":end-val="789":duration="1000"/></div></div></div><!-- 快捷入口 --><div class="panel"><div class="panel-title">快捷入口</div><div class="quick-entry"><div class="entry-item"><div class="entry-icon approval" /><span>假期审批</span></div><div class="entry-item"><div class="entry-icon social" /><span>社保管理</span></div><div class="entry-item"><div class="entry-icon role" /><span>角色管理</span></div><div class="entry-item"><div class="entry-icon salary" /><span>薪资设置</span></div><div class="entry-item"><div class="entry-icon bpm" /><span>流程设置</span></div></div></div><!-- 图表数据 --><div class="panel"><div class="panel-title">社保申报数据</div><div class="chart-container"><div class="chart-info"><div class="info-main"><span>申报人数</span><count-to:start-val="0":end-val="223":duration="1000"/></div><div class="info-list"><div class="info-list-item"><span>待申报(人)</span><count-to:start-val="0":end-val="117":duration="1000"/></div><div class="info-list-item"><span>申报中(人)</span><count-to:start-val="0":end-val="167":duration="1000"/></div><div class="info-list-item"><span>已申报(人)</span><count-to:start-val="0":end-val="24":duration="1000"/></div></div></div><div class="chart"><!-- 图表 --></div></div></div><!-- 图表数据 --><div class="panel"><div class="panel-title">公积金申报数据</div><div class="chart-container"><div class="chart-info"><div class="info-main"><span>申报人数</span><count-to:start-val="0":end-val="335":duration="1000"/></div><div class="info-list"><div class="info-list-item"><span>待申报(人)</span><count-to:start-val="0":end-val="345":duration="1000"/></div><div class="info-list-item"><span>申报中(人)</span><count-to:start-val="0":end-val="109":duration="1000"/></div><div class="info-list-item"><span>已申报(人)</span><count-to:start-val="0":end-val="77":duration="1000"/></div></div></div><div class="chart"><!-- 图表 --></div></div></div></div><!-- 右侧内容 --><div class="right"><!-- 帮助链接 --><div class="panel"><div class="help"><div class="help-left"><div class="panel-title">帮助链接</div><div class="help-list"><div class="help-block"><i class="icon-entry" />入门指南</div><div class="help-block"><i class="icon-help" />在线帮助手册</div><div class="help-block"><i class="icon-support" />联系技术支持</div><div class="help-block"><i class="icon-add" />添加链接</div></div></div><div class="help-right"><div class="calendar"><!-- <el-calendar /> --><el-calendar /></div></div></div></div><!-- 通知公告 --><div class="panel"><div class="panel-title">通知公告</div><div class="information-list"><div class="information-list-item"><img src="@/assets/common/img.jpeg" alt=""><div><p><span class="col">朱继柳</span> 发布了第1期“传智大讲堂”互动讨论获奖名单公布</p><p>2018-07-21 15:21:38</p></div></div><div class="information-list-item"><img src="@/assets/common/img.jpeg" alt=""><div><p><span class="col">朱继柳</span> 发布了第1期“传智大讲堂”互动讨论获奖名单公布</p><p>2018-07-21 15:21:38</p></div></div><div class="information-list-item"><img src="@/assets/common/img.jpeg" alt=""><div><p><span class="col">朱继柳</span> 发布了第1期“传智大讲堂”互动讨论获奖名单公布</p><p>2018-07-21 15:21:38</p></div></div></div></div></div></div></div>
</template><script>
import CountTo from 'vue-count-to'
import { mapGetters } from 'vuex'
export default {components: {CountTo},// 计算属性computed: {...mapGetters(['name', 'avatar', 'company', 'departmentName']) // 映射给了计算属性}
}
</script><style scoped lang="scss">
.dashboard {background: #f5f6f8;width: 100%;min-height: calc(100vh - 80px);::v-deep .el-calendar-day {height:  40px;}::v-deep .el-calendar-table__row td,::v-deep .el-calendar-table tr td:first-child, ::v-deep .el-calendar-table__row td.prev{border:none;}.date-content {height: 40px;text-align: center;line-height: 40px;font-size: 14px;
}
.date-content .rest {color: #fff;border-radius: 50%;background: rgb(250, 124, 77);width: 20px;height: 20px;line-height: 20px;display: inline-block;font-size: 12px;margin-left: 10px;
}
.date-content .text{width: 20px;height: 20px;line-height: 20px;display: inline-block;}
::v-deep .el-calendar-table td.is-selected .text{background: #409eff;color: #fff;border-radius: 50%;}::v-deep .el-calendar__header {display: none}.container {display: flex;.right {width: 40%;.panel {margin-left: 8px;}:nth-child(1) {margin-top: 0;}}.left {flex: 1;:nth-child(1) {margin-top: 0;}}.panel {background-color: #fff;margin-top: 8px;padding: 20px;.panel-title {font-size: 16px;color: #383c4e;font-weight: 500;}// 用户信息样式.user-info {display: flex;.avatar {width: 48px;height: 48px;border-radius: 12px;background-color: #d9d9d9;line-height: 48px;text-align: center;}.username {width: 30px;height: 30px;text-align: center;line-height: 30px;border-radius: 50%;background: #04c9be;color: #fff;margin-right: 4px;}.company-info {margin-left: 10px;height: 48px;display: flex;flex-direction: column;justify-content: space-around;.title {color: #383c4e;font-weight: 500;font-size: 16px;font-family: PingFang SC, PingFang SC-Medium;span {font-size: 12px;background: #f5f6f8;text-align: center;padding: 2px 8px;border-radius: 2px;color: #697086;}}.depart {font-size: 14px;color: #697086;font-weight: 400;}}}// 代办样式.todo-list {margin-top: 10px;display: flex;flex-wrap: wrap;.todo-item {width: 18%;height: 90px;display: flex;flex-direction: column;padding: 10px;justify-content: space-around;:nth-child(1) {color: #697086;font-size: 14px;}:nth-child(2) {color: #383c4e;font-size: 30px;font-weight: 500;}}}// 快捷入口.quick-entry {margin-top: 16px;display: flex;.entry-item {display: flex;flex-direction: column;align-items: center;margin-left: 60px;&:nth-child(1) {margin-left: 0px;}.entry-icon {width: 40px;height: 40px;border-radius: 10px;background: #f5f6f8;background-size: cover;&.approval {background-image: url('~@/assets/common/approval.png');}&.social {background-image: url('~@/assets/common/social.png');}&.salary {background-image: url('~@/assets/common/salary.png');}&.role {background-image: url('~@/assets/common/role.png');}&.bpm {background-image: url('~@/assets/common/bpm.png');}}span {color: #697086;font-size: 14px;margin-top: 8px;}}}// 图表数据.chart-container {display: flex;.chart-info {width: 240px;margin-top: 10px;.info-main {padding: 10px;display: flex;flex-direction: column;:nth-child(1) {font-size: 14px;color: #697086;}:nth-child(2) {margin-top: 10px;font-size: 30px;color: #04c9be;font-weight: 500;}}.info-list {background: #f5f6f8;border-radius: 4px;padding: 12px 15px;display: flex;flex-wrap: wrap;align-items: center;.info-list-item {width: 50%;margin-top: 10px;display: flex;flex-direction: column;:nth-child(1) {font-size: 14px;color: #697086;}:nth-child(2) {margin-top: 10px;font-size: 30px;color: #383c4e;font-weight: 500;}}}}.chart {flex:1}}// 帮助链接.help {display: flex;.help-left {width: 40%;}.help-right {flex: 1;}.help-list {.help-block {background: #f5f6f8;border-radius: 4px;width: 264px;height: 54px;padding: 17px 10px;font-size: 14px;color: #697086;margin-top: 10px;i {width: 14px;height: 14px;display: inline-block;background-size: cover;vertical-align: middle;}i.icon-help {background-image: url("~@/assets/common/help.png");}i.icon-support {background-image: url("~@/assets/common/support.png");}i.icon-add {background-image: url("~@/assets/common/add.png");}i.icon-entry {background-image: url("~@/assets/common/entry.png");}}}}// 通知公告.information-list {margin-top: 20px;.information-list-item {display: flex;align-items: center;margin:15px 0;img {width: 40px;height: 40px;border: 50%;}.col {color: #8a97f8;}div :nth-child(2) {color: #697086;font-size: 14px;}}}}}
}
</style>

10.首页-企业数据获取

image.png

image.png

  • 封装获取数据的API-代码位置(src/api/home.js)
import request from '@/utils/request'/*** 获取首页数据*
*/
export function getHomeData() {return request({url: '/home/data'})
}
  • 初始化时获取数据，并替换企业数据-代码位置(src/views/dashboard/index.vue)
<template><div class="dashboard"><div class="container"><!-- 左侧内容 --><div class="left"><div class="panel"><!-- 个人信息 --><div class="user-info"><img v-if="avatar" class="avatar" :src="avatar" alt=""><span v-else class="username">{{ name?.charAt(0) }}</span><div class="company-info"><div class="title">江苏传智播客教育科技股份有限公司<span>体验版</span></div><div class="depart">{{ name }} ｜ {{ company }}-{{ departmentName }}</div></div></div><!-- 代办 --><div class="todo-list"><div class="todo-item"><span>组织总人数</span><!-- 起始值 终点值 动画时间 --><count-to:start-val="0":end-val="homeData.employeeTotal":duration="1000"/></div><div class="todo-item"><span>正式员工</span><count-to:start-val="0":end-val="homeData.regularEmployeeTotal":duration="1000"/></div><div class="todo-item"><span>合同待签署</span><count-to:start-val="0":end-val="homeData.contractSignTotal":duration="1000"/></div><div class="todo-item"><span>待入职</span><count-to:start-val="0":end-val="homeData.toBeEmployed":duration="1000"/></div><div class="todo-item"><span>本月待转正</span><count-to:start-val="0":end-val="homeData.toBeConfirmed":duration="1000"/></div><div class="todo-item"><span>本月待离职</span><count-to:start-val="0":end-val="homeData.toBeDismissed":duration="1000"/></div><div class="todo-item"><span>接口总访问</span><count-to:start-val="0":end-val="homeData.interfaceAccessTotal":duration="1000"/></div></div></div><!-- 快捷入口 --><div class="panel"><div class="panel-title">快捷入口</div><div class="quick-entry"><div class="entry-item"><div class="entry-icon approval" /><span>假期审批</span></div><div class="entry-item"><div class="entry-icon social" /><span>社保管理</span></div><div class="entry-item"><div class="entry-icon role" /><span>角色管理</span></div><div class="entry-item"><div class="entry-icon salary" /><span>薪资设置</span></div><div class="entry-item"><div class="entry-icon bpm" /><span>流程设置</span></div></div></div><!-- 图表数据 --><div class="panel"><div class="panel-title">社保申报数据</div><div class="chart-container"><div class="chart-info"><div class="info-main"><span>申报人数</span><!-- homeData: {} --><count-to:start-val="0":end-val="homeData.socialInsurance?.declarationTotal":duration="1000"/></div><div class="info-list"><div class="info-list-item"><span>待申报(人)</span><count-to:start-val="0":end-val="homeData.socialInsurance?.toDeclareTotal":duration="1000"/></div><div class="info-list-item"><span>申报中(人)</span><count-to:start-val="0":end-val="homeData.socialInsurance?.declaringTotal":duration="1000"/></div><div class="info-list-item"><span>已申报(人)</span><count-to:start-val="0":end-val="homeData.socialInsurance?.declaredTotal":duration="1000"/></div></div></div><div class="chart"><!-- 图表 --></div></div></div><!-- 图表数据 --><div class="panel"><div class="panel-title">公积金申报数据</div><div class="chart-container"><div class="chart-info"><div class="info-main"><span>申报人数</span><count-to:start-val="0":end-val="homeData.providentFund?.declarationTotal":duration="1000"/></div><div class="info-list"><div class="info-list-item"><span>待申报(人)</span><count-to:start-val="0":end-val="homeData.providentFund?.toDeclareTotal":duration="1000"/></div><div class="info-list-item"><span>申报中(人)</span><count-to:start-val="0":end-val="homeData.providentFund?.declaringTotal":duration="1000"/></div><div class="info-list-item"><span>已申报(人)</span><count-to:start-val="0":end-val="homeData.providentFund?.declaredTotal":duration="1000"/></div></div></div><div class="chart"><!-- 图表 --></div></div></div></div><!-- 右侧内容 --><div class="right"><!-- 帮助链接 --><div class="panel"><div class="help"><div class="help-left"><div class="panel-title">帮助链接</div><div class="help-list"><div class="help-block"><i class="icon-entry" />入门指南</div><div class="help-block"><i class="icon-help" />在线帮助手册</div><div class="help-block"><i class="icon-support" />联系技术支持</div><div class="help-block"><i class="icon-add" />添加链接</div></div></div><div class="help-right"><div class="calendar"><!-- <el-calendar /> --><el-calendar /></div></div></div></div><!-- 通知公告 --><div class="panel"><div class="panel-title">通知公告</div><div class="information-list"><div class="information-list-item"><img src="@/assets/common/img.jpeg" alt=""><div><p><span class="col">朱继柳</span> 发布了第1期“传智大讲堂”互动讨论获奖名单公布</p><p>2018-07-21 15:21:38</p></div></div><div class="information-list-item"><img src="@/assets/common/img.jpeg" alt=""><div><p><span class="col">朱继柳</span> 发布了第1期“传智大讲堂”互动讨论获奖名单公布</p><p>2018-07-21 15:21:38</p></div></div><div class="information-list-item"><img src="@/assets/common/img.jpeg" alt=""><div><p><span class="col">朱继柳</span> 发布了第1期“传智大讲堂”互动讨论获奖名单公布</p><p>2018-07-21 15:21:38</p></div></div></div></div></div></div></div>
</template><script>
import CountTo from 'vue-count-to'
import { mapGetters } from 'vuex'
import { getHomeData } from '@/api/home'
export default {components: {CountTo},data() {return {homeData: {} // 存放首页数据的对象}},// 计算属性computed: {...mapGetters(['name', 'avatar', 'company', 'departmentName']) // 映射给了计算属性},created() {this.getHomeData()},methods: {async getHomeData() {this.homeData = await getHomeData()}}
}
</script><style scoped lang="scss">
.dashboard {background: #f5f6f8;width: 100%;min-height: calc(100vh - 80px);::v-deep .el-calendar-day {height:  40px;}::v-deep .el-calendar-table__row td,::v-deep .el-calendar-table tr td:first-child, ::v-deep .el-calendar-table__row td.prev{border:none;}.date-content {height: 40px;text-align: center;line-height: 40px;font-size: 14px;
}
.date-content .rest {color: #fff;border-radius: 50%;background: rgb(250, 124, 77);width: 20px;height: 20px;line-height: 20px;display: inline-block;font-size: 12px;margin-left: 10px;
}
.date-content .text{width: 20px;height: 20px;line-height: 20px;display: inline-block;}
::v-deep .el-calendar-table td.is-selected .text{background: #409eff;color: #fff;border-radius: 50%;}::v-deep .el-calendar__header {display: none}.container {display: flex;.right {width: 40%;.panel {margin-left: 8px;}:nth-child(1) {margin-top: 0;}}.left {flex: 1;:nth-child(1) {margin-top: 0;}}.panel {background-color: #fff;margin-top: 8px;padding: 20px;.panel-title {font-size: 16px;color: #383c4e;font-weight: 500;}// 用户信息样式.user-info {display: flex;.avatar {width: 48px;height: 48px;border-radius: 12px;background-color: #d9d9d9;line-height: 48px;text-align: center;}.username {width: 30px;height: 30px;text-align: center;line-height: 30px;border-radius: 50%;background: #04c9be;color: #fff;margin-right: 4px;}.company-info {margin-left: 10px;height: 48px;display: flex;flex-direction: column;justify-content: space-around;.title {color: #383c4e;font-weight: 500;font-size: 16px;font-family: PingFang SC, PingFang SC-Medium;span {font-size: 12px;background: #f5f6f8;text-align: center;padding: 2px 8px;border-radius: 2px;color: #697086;}}.depart {font-size: 14px;color: #697086;font-weight: 400;}}}// 代办样式.todo-list {margin-top: 10px;display: flex;flex-wrap: wrap;.todo-item {width: 18%;height: 90px;display: flex;flex-direction: column;padding: 10px;justify-content: space-around;:nth-child(1) {color: #697086;font-size: 14px;}:nth-child(2) {color: #383c4e;font-size: 30px;font-weight: 500;}}}// 快捷入口.quick-entry {margin-top: 16px;display: flex;.entry-item {display: flex;flex-direction: column;align-items: center;margin-left: 60px;&:nth-child(1) {margin-left: 0px;}.entry-icon {width: 40px;height: 40px;border-radius: 10px;background: #f5f6f8;background-size: cover;&.approval {background-image: url('~@/assets/common/approval.png');}&.social {background-image: url('~@/assets/common/social.png');}&.salary {background-image: url('~@/assets/common/salary.png');}&.role {background-image: url('~@/assets/common/role.png');}&.bpm {background-image: url('~@/assets/common/bpm.png');}}span {color: #697086;font-size: 14px;margin-top: 8px;}}}// 图表数据.chart-container {display: flex;.chart-info {width: 240px;margin-top: 10px;.info-main {padding: 10px;display: flex;flex-direction: column;:nth-child(1) {font-size: 14px;color: #697086;}:nth-child(2) {margin-top: 10px;font-size: 30px;color: #04c9be;font-weight: 500;}}.info-list {background: #f5f6f8;border-radius: 4px;padding: 12px 15px;display: flex;flex-wrap: wrap;align-items: center;.info-list-item {width: 50%;margin-top: 10px;display: flex;flex-direction: column;:nth-child(1) {font-size: 14px;color: #697086;}:nth-child(2) {margin-top: 10px;font-size: 30px;color: #383c4e;font-weight: 500;}}}}.chart {flex:1}}// 帮助链接.help {display: flex;.help-left {width: 40%;}.help-right {flex: 1;}.help-list {.help-block {background: #f5f6f8;border-radius: 4px;width: 264px;height: 54px;padding: 17px 10px;font-size: 14px;color: #697086;margin-top: 10px;i {width: 14px;height: 14px;display: inline-block;background-size: cover;vertical-align: middle;}i.icon-help {background-image: url("~@/assets/common/help.png");}i.icon-support {background-image: url("~@/assets/common/support.png");}i.icon-add {background-image: url("~@/assets/common/add.png");}i.icon-entry {background-image: url("~@/assets/common/entry.png");}}}}// 通知公告.information-list {margin-top: 20px;.information-list-item {display: flex;align-items: center;margin:15px 0;img {width: 40px;height: 40px;border: 50%;}.col {color: #8a97f8;}div :nth-child(2) {color: #697086;font-size: 14px;}}}}}
}
</style>

11.首页-通知消息获取

image.png

image.png

  • 封装获取消息的API-代码位置(src/api/home.js)
export function getMessageList() {return request({url: '/home/notice'})
}
  • 初始化时获取消息列表-代码位置(src/views/dashboard/index.vue)
<template><div class="dashboard"><div class="container"><!-- 左侧内容 --><div class="left"><div class="panel"><!-- 个人信息 --><div class="user-info"><img v-if="avatar" class="avatar" :src="avatar" alt=""><span v-else class="username">{{ name?.charAt(0) }}</span><div class="company-info"><div class="title">江苏传智播客教育科技股份有限公司<span>体验版</span></div><div class="depart">{{ name }} ｜ {{ company }}-{{ departmentName }}</div></div></div><!-- 代办 --><div class="todo-list"><div class="todo-item"><span>组织总人数</span><!-- 起始值 终点值 动画时间 --><count-to:start-val="0":end-val="homeData.employeeTotal":duration="1000"/></div><div class="todo-item"><span>正式员工</span><count-to:start-val="0":end-val="homeData.regularEmployeeTotal":duration="1000"/></div><div class="todo-item"><span>合同待签署</span><count-to:start-val="0":end-val="homeData.contractSignTotal":duration="1000"/></div><div class="todo-item"><span>待入职</span><count-to:start-val="0":end-val="homeData.toBeEmployed":duration="1000"/></div><div class="todo-item"><span>本月待转正</span><count-to:start-val="0":end-val="homeData.toBeConfirmed":duration="1000"/></div><div class="todo-item"><span>本月待离职</span><count-to:start-val="0":end-val="homeData.toBeDismissed":duration="1000"/></div><div class="todo-item"><span>接口总访问</span><count-to:start-val="0":end-val="homeData.interfaceAccessTotal":duration="1000"/></div></div></div><!-- 快捷入口 --><div class="panel"><div class="panel-title">快捷入口</div><div class="quick-entry"><div class="entry-item"><div class="entry-icon approval" /><span>假期审批</span></div><div class="entry-item"><div class="entry-icon social" /><span>社保管理</span></div><div class="entry-item"><div class="entry-icon role" /><span>角色管理</span></div><div class="entry-item"><div class="entry-icon salary" /><span>薪资设置</span></div><div class="entry-item"><div class="entry-icon bpm" /><span>流程设置</span></div></div></div><!-- 图表数据 --><div class="panel"><div class="panel-title">社保申报数据</div><div class="chart-container"><div class="chart-info"><div class="info-main"><span>申报人数</span><!-- homeData: {} --><count-to:start-val="0":end-val="homeData.socialInsurance?.declarationTotal":duration="1000"/></div><div class="info-list"><div class="info-list-item"><span>待申报(人)</span><count-to:start-val="0":end-val="homeData.socialInsurance?.toDeclareTotal":duration="1000"/></div><div class="info-list-item"><span>申报中(人)</span><count-to:start-val="0":end-val="homeData.socialInsurance?.declaringTotal":duration="1000"/></div><div class="info-list-item"><span>已申报(人)</span><count-to:start-val="0":end-val="homeData.socialInsurance?.declaredTotal":duration="1000"/></div></div></div><div class="chart"><!-- 图表 --></div></div></div><!-- 图表数据 --><div class="panel"><div class="panel-title">公积金申报数据</div><div class="chart-container"><div class="chart-info"><div class="info-main"><span>申报人数</span><count-to:start-val="0":end-val="homeData.providentFund?.declarationTotal":duration="1000"/></div><div class="info-list"><div class="info-list-item"><span>待申报(人)</span><count-to:start-val="0":end-val="homeData.providentFund?.toDeclareTotal":duration="1000"/></div><div class="info-list-item"><span>申报中(人)</span><count-to:start-val="0":end-val="homeData.providentFund?.declaringTotal":duration="1000"/></div><div class="info-list-item"><span>已申报(人)</span><count-to:start-val="0":end-val="homeData.providentFund?.declaredTotal":duration="1000"/></div></div></div><div class="chart"><!-- 图表 --></div></div></div></div><!-- 右侧内容 --><div class="right"><!-- 帮助链接 --><div class="panel"><div class="help"><div class="help-left"><div class="panel-title">帮助链接</div><div class="help-list"><div class="help-block"><i class="icon-entry" />入门指南</div><div class="help-block"><i class="icon-help" />在线帮助手册</div><div class="help-block"><i class="icon-support" />联系技术支持</div><div class="help-block"><i class="icon-add" />添加链接</div></div></div><div class="help-right"><div class="calendar"><!-- <el-calendar /> --><el-calendar /></div></div></div></div><!-- 通知公告 --><div class="panel"><div class="panel-title">通知公告</div><div class="information-list"><div v-for="(item,index) in list" :key="index" class="information-list-item"><img :src="item.icon" alt=""><div><p>{{ item.notice }}</p><p>{{ item.createTime }}</p></div></div></div></div></div></div></div>
</template><script>
import CountTo from 'vue-count-to'
import { mapGetters } from 'vuex'
import { getHomeData, getMessageList } from '@/api/home'
export default {components: {CountTo},data() {return {homeData: {}, // 存放首页数据的对象list: []}},// 计算属性computed: {...mapGetters(['name', 'avatar', 'company', 'departmentName']) // 映射给了计算属性},created() {this.getHomeData()this.getMessageList()},methods: {async getHomeData() {this.homeData = await getHomeData()},async getMessageList() {this.list = await getMessageList()}}
}
</script><style scoped lang="scss">
.dashboard {background: #f5f6f8;width: 100%;min-height: calc(100vh - 80px);::v-deep .el-calendar-day {height:  40px;}::v-deep .el-calendar-table__row td,::v-deep .el-calendar-table tr td:first-child, ::v-deep .el-calendar-table__row td.prev{border:none;}.date-content {height: 40px;text-align: center;line-height: 40px;font-size: 14px;
}
.date-content .rest {color: #fff;border-radius: 50%;background: rgb(250, 124, 77);width: 20px;height: 20px;line-height: 20px;display: inline-block;font-size: 12px;margin-left: 10px;
}
.date-content .text{width: 20px;height: 20px;line-height: 20px;display: inline-block;}
::v-deep .el-calendar-table td.is-selected .text{background: #409eff;color: #fff;border-radius: 50%;}::v-deep .el-calendar__header {display: none}.container {display: flex;.right {width: 40%;.panel {margin-left: 8px;}:nth-child(1) {margin-top: 0;}}.left {flex: 1;:nth-child(1) {margin-top: 0;}}.panel {background-color: #fff;margin-top: 8px;padding: 20px;.panel-title {font-size: 16px;color: #383c4e;font-weight: 500;}// 用户信息样式.user-info {display: flex;.avatar {width: 48px;height: 48px;border-radius: 12px;background-color: #d9d9d9;line-height: 48px;text-align: center;}.username {width: 30px;height: 30px;text-align: center;line-height: 30px;border-radius: 50%;background: #04c9be;color: #fff;margin-right: 4px;}.company-info {margin-left: 10px;height: 48px;display: flex;flex-direction: column;justify-content: space-around;.title {color: #383c4e;font-weight: 500;font-size: 16px;font-family: PingFang SC, PingFang SC-Medium;span {font-size: 12px;background: #f5f6f8;text-align: center;padding: 2px 8px;border-radius: 2px;color: #697086;}}.depart {font-size: 14px;color: #697086;font-weight: 400;}}}// 代办样式.todo-list {margin-top: 10px;display: flex;flex-wrap: wrap;.todo-item {width: 18%;height: 90px;display: flex;flex-direction: column;padding: 10px;justify-content: space-around;:nth-child(1) {color: #697086;font-size: 14px;}:nth-child(2) {color: #383c4e;font-size: 30px;font-weight: 500;}}}// 快捷入口.quick-entry {margin-top: 16px;display: flex;.entry-item {display: flex;flex-direction: column;align-items: center;margin-left: 60px;&:nth-child(1) {margin-left: 0px;}.entry-icon {width: 40px;height: 40px;border-radius: 10px;background: #f5f6f8;background-size: cover;&.approval {background-image: url('~@/assets/common/approval.png');}&.social {background-image: url('~@/assets/common/social.png');}&.salary {background-image: url('~@/assets/common/salary.png');}&.role {background-image: url('~@/assets/common/role.png');}&.bpm {background-image: url('~@/assets/common/bpm.png');}}span {color: #697086;font-size: 14px;margin-top: 8px;}}}// 图表数据.chart-container {display: flex;.chart-info {width: 240px;margin-top: 10px;.info-main {padding: 10px;display: flex;flex-direction: column;:nth-child(1) {font-size: 14px;color: #697086;}:nth-child(2) {margin-top: 10px;font-size: 30px;color: #04c9be;font-weight: 500;}}.info-list {background: #f5f6f8;border-radius: 4px;padding: 12px 15px;display: flex;flex-wrap: wrap;align-items: center;.info-list-item {width: 50%;margin-top: 10px;display: flex;flex-direction: column;:nth-child(1) {font-size: 14px;color: #697086;}:nth-child(2) {margin-top: 10px;font-size: 30px;color: #383c4e;font-weight: 500;}}}}.chart {flex:1}}// 帮助链接.help {display: flex;.help-left {width: 40%;}.help-right {flex: 1;}.help-list {.help-block {background: #f5f6f8;border-radius: 4px;width: 264px;height: 54px;padding: 17px 10px;font-size: 14px;color: #697086;margin-top: 10px;i {width: 14px;height: 14px;display: inline-block;background-size: cover;vertical-align: middle;}i.icon-help {background-image: url("~@/assets/common/help.png");}i.icon-support {background-image: url("~@/assets/common/support.png");}i.icon-add {background-image: url("~@/assets/common/add.png");}i.icon-entry {background-image: url("~@/assets/common/entry.png");}}}}// 通知公告.information-list {margin-top: 20px;.information-list-item {display: flex;align-items: center;margin:15px 0;img {width: 40px;height: 40px;border: 50%;}.col {color: #8a97f8;}div :nth-child(2) {color: #697086;font-size: 14px;}}}}}
}
</style>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/171620.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

17.找出1000之内的所有完数。

17.找出1000之内的所有完数。

文章目录 前言一、题目描述 二、题目分析 三、解题 程序运行代码 前言 本系列为循环结构编程题&#xff0c;点滴成长&#xff0c;一起逆袭。 一、题目描述 一个数如果恰好等于它的因子之和&#xff0c;这个数就称为“完数”。例如&#xff0c;⑥的因子为1、2、3&#xff0c;而…
阅读更多...
vue3+ts mitt的使用

vue3+ts mitt的使用

安装mitt :npm i mitt -Smain.ts: import mitt from mittconst Mit mitt();declare module vue {export interface ComponentCustomProperties{$Bus:typeof Mit} } app.config.globalProperties.$BusMit在A组件中使用 <template><div><h1>我是A<…
阅读更多...
【深度学习】如何找到最优学习率

【深度学习】如何找到最优学习率

经过了大量炼丹的同学都知道&#xff0c;超参数是一个非常玄乎的东西&#xff0c;比如batch size&#xff0c;学习率等&#xff0c;这些东西的设定并没有什么规律和原因&#xff0c;论文中设定的超参数一般都是靠经验决定的。但是超参数往往又特别重要&#xff0c;比如学习率&a…
阅读更多...
建造者模式-C语言实现

建造者模式-C语言实现

UML类图&#xff1a; 代码实现&#xff1a; #include <stdio.h> #include <stdlib.h>// 产品类 typedef struct {char* part1;char* part2;char* part3; } Product;// 抽象建造者类 typedef struct {void (*buildPart1)(void*, const char*);void (*buildPart2)(v…
阅读更多...
RabbitMQ之延迟消息实战

RabbitMQ之延迟消息实战

RabbitMQ之延迟消息实战 使用死信交换机实现延迟消息 使用死信交换机的过期时间以及没有消费者进行消费&#xff0c;时间到了就会到死信队列中&#xff0c;由此可以实现延迟消息使用延迟消息插件 前提&#xff1a;需要mq配置插件 延时信息案例实战 把一个30分钟的延迟消息可以…
阅读更多...
前端review

前端review

关于实时预览vs code中的颜色代码需要安装的插件&#xff0c;包括html文件格式中的颜色代码安装Flutter Color插件 VSCode 前端常用插件集合 1.Auto Close Tag自动闭合HTML/XML标签 2.Auto Rename Tag自动完成另一侧标签的同步修改 3.Beautify格式化代码&#xff0c;值得注…
阅读更多...
【高可用架构】Haproxy 和 Keepalived 的区别

【高可用架构】Haproxy 和 Keepalived 的区别

Haproxy 和 Keepalived 的区别 1.负载均衡器介绍2.Haproxy 和 Keepalived 的基本概念和特点2.1 Haproxy2.2 Keepalived 3.Haproxy 和 Keepalived 的区别3.1 功能上的区别3.2 架构上的区别3.3 配置上的区别 4.总结 1.负载均衡器介绍 负载均衡器是一种解决高并发和高可用的常用的…
阅读更多...
【开源】基于Vue和SpringBoot的农家乐订餐系统

【开源】基于Vue和SpringBoot的农家乐订餐系统

项目编号&#xff1a; S 043 &#xff0c;文末获取源码。 \color{red}{项目编号&#xff1a;S043&#xff0c;文末获取源码。} 项目编号&#xff1a;S043&#xff0c;文末获取源码。 目录 一、摘要1.1 项目介绍1.2 项目录屏 二、功能模块2.1 用户2.2 管理员 三、系统展示四、核…
阅读更多...
C/C++内存管理,malloc,realloc,calloc,new,delete详解！！！

C/C++内存管理,malloc,realloc,calloc,new,delete详解！！！

1.初步了解内存中各个区间存储的数据特征 1.栈区&#xff1a;存储一些局部变量、函数参数、返回值等&#xff0c;跟函数栈振有关&#xff0c;出了作用域&#xff0c;生命周期结束。 2.堆区&#xff1a;用于动态开辟空间&#xff0c;如果不主动销毁空间&#xff0c;则程序运行结…
阅读更多...
因式分解的几何意义

因式分解的几何意义

本来准备和女儿一起玩一道几何题&#xff0c;想想还是算了&#xff0c;不如讲点更有趣的。 任何因式分解都是在堆积木&#xff0c;不信你看&#xff1a; 二项式定理&#xff0c;洋灰三角&#xff0c;都是面积&#xff0c;体积&#xff0c;超维体积的拼接&#xff0c;一个大超…
阅读更多...
Python 安装django-cors-headers解决跨域问题

Python 安装django-cors-headers解决跨域问题

一、PythonCorsHeaders概念 PythonCorsHeaders是一个轻量级的Python工具&#xff0c;用于解决跨域HTTP请求的问题。它允许你指定哪些网站或IP地址可以访问你的站点&#xff0c;并控制这些站点可以访问哪些内容。 现代网站越来越多地使用Ajax技术&#xff0c;使得浏览器能够从不…
阅读更多...
【人工智能】Chatgpt的训练原理

【人工智能】Chatgpt的训练原理

前言 前不久&#xff0c;在学习C语言的我写了一段三子棋的代码&#xff0c;但是与我对抗的电脑是没有任何思考的&#xff0c;你看了这段代码就理解为什么了&#xff1a; void computerMove(char Board[ROW][COL], int row, int col) {while (1){unsigned int i rand() % ROW, …
阅读更多...
设计模式之十二：复合模式

设计模式之十二：复合模式

模式通常被一起使用&#xff0c;并被组合在同一个解决方案中。 复合模式在一个解决方案中结合两个或多个模式&#xff0c;以解决一般或重复发生的问题。 首先重新构建鸭子模拟器&#xff1a; package headfirst.designpatterns.combining.ducks;public interface Quackable …
阅读更多...
【网络】传输层 --- 详解TCP协议

【网络】传输层 --- 详解TCP协议

目录 一、协议段格式及其策略确认应答(ACK)机制6个标志位超时重传流量控制滑动窗口1、先谈滑动窗口一般情况2、再谈特殊窗口 拥塞控制拥塞窗口 延迟应答&&捎带应答面向字节流粘包问题 二、三次握手和四次挥手三次握手为什么是3次&#xff1f;不是2、4、5、6次呢 四次挥…
阅读更多...
NoSQL基础知识小结

NoSQL基础知识小结

NoSQL 基础知识 什么是 NoSQL? NoSQL&#xff08;Not Only SQL 的缩写&#xff09;泛指非关系型的数据库&#xff0c;主要针对的是键值、文档以及图形类型数据存储。 NoSQL 数据库天生支持分布式&#xff0c;数据冗余和数据分片等特性&#xff0c;旨在提供可扩展的高可用高…
阅读更多...
【代码】基于VMD（变分模态分解）-SSA（麻雀搜索算法优化）-LSTM的光伏功率预测模型（完美复现）matlab代码

【代码】基于VMD（变分模态分解）-SSA（麻雀搜索算法优化）-LSTM的光伏功率预测模型（完美复现）matlab代码

程序名称&#xff1a;基于VMD&#xff08;变分模态分解&#xff09;-SSA&#xff08;麻雀搜索算法优化&#xff09;-LSTM的光伏功率预测模型 实现平台&#xff1a;matlab 代码简介&#xff1a;提出了变分模态分解(VMD)和麻雀搜索算法(SSA)与长短期记忆神经网络 (LSTM)相耦合,…
阅读更多...
Spark-06：Spark 共享变量

Spark-06：Spark 共享变量

目录 1.广播变量&#xff08;broadcast variables&#xff09; 2.累加器&#xff08;accumulators&#xff09; 在分布式计算中&#xff0c;当在集群的多个节点上并行运行函数时&#xff0c;默认情况下&#xff0c;每个任务都会获得函数中使用到的变量的一个副本。如果变量很…
阅读更多...
Android 相机库CameraView源码解析 (一) : 预览

Android 相机库CameraView源码解析 (一) : 预览

1. 前言 这段时间&#xff0c;在使用 natario1/CameraView 来实现带滤镜的预览、拍照、录像功能。 由于CameraView封装的比较到位&#xff0c;在项目前期&#xff0c;的确为我们节省了不少时间。 但随着项目持续深入&#xff0c;对于CameraView的使用进入深水区&#xff0c;逐…
阅读更多...
【LeetCode】挑战100天 Day17（热题+面试经典150题）

【LeetCode】挑战100天 Day17（热题+面试经典150题）

【LeetCode】挑战100天 Day17&#xff08;热题面试经典150题&#xff09; 一、LeetCode介绍二、LeetCode 热题 HOT 100-192.1 题目2.2 题解 三、面试经典 150 题-193.1 题目3.2 题解 一、LeetCode介绍 LeetCode是一个在线编程网站&#xff0c;提供各种算法和数据结构的题目&…
阅读更多...
[建议收藏] 一个网站集合所有最新最全的AI工具

[建议收藏] 一个网站集合所有最新最全的AI工具

今天给大家推荐一个宝藏的AI工具合集网站&#xff0c;有了这个网站&#xff0c;你们再也不用去其他地方找AI工具了。 名称&#xff1a;AI-BOT工具集 这个网站精选1000AI工具&#xff0c;并持续每天更新添加&#xff0c;包括AI写作、AI绘画、AI音视频处理、AI平面设计、AI自动编…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023