人力资源管理后台 vue
文章平均质量分 95
人力资源管理后台 vue
前端 贾公子
博主写了对element-plus的表格和表单的封装
[表格]https://gitee.com/childe-jia/table-vue3
[表单] https://gitee.com/childe-jia/form-render
大家支持一下
展开
-
人力资源管理后台 === 左树右表
为什么使用��������,因为我们设置完树形之后立刻选中首个节点,此时更新还没有完成,必须等待更新完成后,再去选中首个节点,所以需要使用nextTick,因为我们设置完树形之后立刻选中首个节点,此时更新还没有完成,必须等待更新完成后,再去选中首个节点,所以需要使用nextTick。这里监听的事件是input,有同学可能会问,为什么不用change事件,注意change事件是离开焦点触发,input是只要内容发生变化就会触发,所以这里使用input更符合使用场景。为什么要做数据缓存?原创 2023-11-26 16:09:25 · 728 阅读 · 0 评论 -
人力资源管理后台 === 组织架构
通过在el-tree中传入插槽内容,就可以渲染数据自定义树形结构-代码位置(-- 节点结构 -->-- v-slot="{ node, data }" 只能作用在template -->-- $event 实参 表示类型 -->-- 显示区域内容 -->操作-- 下拉菜单选项 -->原创 2023-11-26 16:06:05 · 432 阅读 · 0 评论 -
人力资源管理后台 === 员工新增修改
这里我们加了一个判断,就是只有当前节点有子节点时才添加children属性,否则会造成级联组件本身就已经是最末端了,但是发现它的children属性存在,就会呈现不同的表现形式。因为不论成功或者失败,再点击上传都会去选择一个新的excel,所以这里使用finally等到最后,将内容清空。因为新增时手机号已经注册成功,手机号如果修改了,用户就不能再成功登录。安装file-saver包,实现下载Blob文件 yarn add file-saver。姓名-必填-1-4个字符。手机号-必填-格式校验。原创 2023-11-26 16:17:16 · 220 阅读 · 0 评论 -
人力资源管理后台 === 登陆+主页鉴权
既然前端不能直接请求后端服务,那就搞个中间服务,中间服务刚好和我们的前端服务同源,前端和中间服务可以通信,而中间服务是node, node后台向后端发请求是不受同源策略影响的,因为。因为开发环境为了便利,我们将用户的账户信息和密码都默认写在了页面上,但是真正的项目我们不可能将数据进行暴露出去,所以在生产环境时应该将 用户的手机号和密码抹去。跨域有开发环境跨域和生产环境跨域,我们最后上线的时候要考虑生产环境跨域,目前只需要考虑开发环境。, 这样就是代理,中间层的服务将前端的请求代理给了后端接口。原创 2023-11-26 13:07:51 · 421 阅读 · 0 评论 -
人力资源管理后台 === 主页模块
可以直接关闭弹层,为何还要监听close事件,这是因为sync修饰符只能关闭弹层,我们还需要将表单进行重置,因为你之前打开弹层可能修改了一半或者残留一些校验信息,再打开的时候这些信息应该都被重置,所以这里用监听事件的方式再重置一下表单,保证功能的体验和完整性。之前在导航守卫的位置,可以确定已经有了token,这个位置获取资料更佳,因为导航守卫在页面发生跳转时出发,这时不论你从何时何地进来,如果发现你没获取资料,都可以非常清楚直观的获取资料。前面的变量为空时,它不会继续往下执行,防止报错,如。原创 2023-11-26 15:35:15 · 184 阅读 · 0 评论 -
人力资源管理后台 === 权限应用
自定义指令- 作用在按钮上-所有的按钮都可以直接使用封装自定义指令-代码位置(// 封装自定义指令 用来控制操作权// 会在指令作用的元素插入到页面完成以后触发// el 指令作用的元素的dom对象.roles?.points || [] // 当前用户信息的操作权if (!// 不存在就要删除或者禁用el.remove() // 删除元素// 线上的权限数据和线下的代码进行对应})应用自定义指令-代码位置(原创 2023-11-26 16:25:59 · 809 阅读 · 0 评论 -
人力资源管理后台 === 角色管理
自定义启用列和操作列的结构-代码位置(-- 自定义列结构 -->"已启用" : row.state === 0?"未启用" : "无" }} 自定义操作列结构-代码位置(-- 放置操作按钮 -->原创 2023-11-26 16:08:02 · 348 阅读 · 0 评论 -
人力资源管理后台 === 基础环境+登陆
演示地址:人力资源后台管理系统项目目录├── src # 源代码目录│ ├── api # 所有请求│ ├── assets # 主题 字体等静态资源│ ├── components # 全局公用组件│ ├── icons # 项目所有 svg icons│ ├── layout # 全局 layout│ ├── router # 路由│ ├── store # 全局 store管理│ ├── styles # 全局样式│ ├── utils # 全局公用方法。原创 2023-11-25 16:47:37 · 607 阅读 · 0 评论 -
人力资源管理后台 === 上传+权限数据
default-checked-keys的属性是设置当前选中的节点,但是必须配合node-key属性,因为permIds变量中存储的都是id,必须el-tree组件知道key是哪个字段,所以设置node-key="id"注意,这里我们特地调整了弹层的顺序,因为获取已经拥有的角色是一个异步的过程,如果弹层显示在前,会出现卡顿的效果,表现出缓慢的效果,所以等到获取所有数据之后再弹层。权限是通过角色这个中间人实现,首先员工拥有角色,角色拥有权限,那么员工自动拥有了角色所对应的权限。1.注册腾讯云账号-课前完成。原创 2023-11-26 16:22:52 · 937 阅读 · 0 评论 -
人力资源管理后台 === 首页+部署
这里为什么要用watch,因为获取数据在created,初始化图表在mounted,执行mouted时,数据并不能保证能够获取到,所以采用获取watch监听数据变化,只要数据变化,就设置图表的options。将几个比较大的多在打包时排除,这样可以缩小整体打包的大小,保证js的加载速度,排除的包采用cdn的方式用外链去引入,cdn本名为分发服务器,意为更近的访问区间更快的访问速度将所需要的文件返回给客户端。遇到这个错误,可以直接执行该命令,安装对应的工具,再安装nginx。windows配置文件。原创 2023-11-26 16:28:54 · 994 阅读 · 0 评论