连肝了两天,终于完成需求了,谈谈最近项目遇到的需求

96 阅读3分钟

持续创作,加速成长!这是我参与「掘金日新计划 · 6 月更文挑战」的第19天,点击查看活动详情

某个标签选中但是不能点击问题

image.png

类这种,加了[disabled]以后,其他选项都变灰了,在网上找了好久,发现其实可以通过css样式去控制,下面就将代码交给大家吧

  .el-radio-group,
  .el-checkbox-group {
    pointer-events: none;
  }
  

这个选择器就相当于标签名啦,找到对应的设置一下,完美解决

说说自己负责的吧!

登录=>主页=>路由配置=>组织架构=>公司角色设置=>员工管理=>权限设计和管理=>多语言tab页全屏主题等模块,本人主要负责组织架构,公司角色设置,员工管理,权限设计模块

组织架构:在设计这一块主要采用el-tree标签,将主体和头部内容部分封装为组件,利用传值不同控制页面显示不同。在数据方面,ajax请求信息为平铺数组,封装递归算法转换数据,通过类名设置展开和收拢样式

角色设置:建立公司页面的基本结构,请求读取公司角色信息,用于后面权限设计,实现角色的增删改查

员工管理:主要分为员工信息展示,员工详情页面,角色设置,头部组件样式

1搭建员工页面的基本结构,读取员工信息并渲染到页面

2封装通用工具,作为公共组件,通过$slots属性,判断是否有值,在控制组件插槽元素上使用v-if来控制显示与隐藏

3使用el-Pagination实现员工页面的分页展示,封装组件分别实现,员工的增删改查和角色分配

3利用xlsx实现Excel导入,file-saver和script-loader实现员工信息Excel导出

4配置配置腾讯云Cos,单独上传图片的服务器,封装上传图片组件,后台服务器储存腾讯云服务器的图片地址

权限设计:主要采用RBAC的权限设计思想基于角色的权限分配解决方案

三个关键点: 员工, 角色, 权限;我们要做的就是给员工分配角色,给角色分配权限

给员工分配角色:在角色设计就已经埋下伏笔,我们只需要在用户点击分配角色时,通过dialog的open属性获取到员工有的角色,进行分配

给角色分配权限:给一级权限设定一个唯一的标识,标识对应路由中name属性的值,便于实现路由的展现。给二级路由分配标识,可以设置按钮的使用权限

在vux中单独设置一个模块,用于路由的管理,有关逻辑处理的都封装在模块中,便于维护