人力资源管理后台 === 角色管理

目录

1.组织架构-编辑部门-弹出层获取数据

2.组织架构-编辑部门-编辑表单校验

3.组织架构-编辑部门-确认取消

4.组织架构-删除部门

5.角色管理-搭建页面结构

6.角色管理-获取数据

7.角色管理-表格自定义结构

8.角色管理-分页功能

9.角色管理-新增功能弹层

10.角色管理-表单数据校验

11.角色管理-新增角色-确定取消


1.组织架构-编辑部门-弹出层获取数据

编辑部门和新增部门会共用一个组件,也就是add-dept组件要支持两种场景-新增场景-编辑场景

image.png

  • 封装获取部门详情的API-代码位置(src/api/department.js)
/*** 获取部门详情** ***/export function getDepartmentDetail(id) {return request({url: `/company/department/${id}`})
}
  • 点击编辑时,弹出层,通过ref获取组件实例,调用获取详情的方法-代码位置(src/views/department/index.vue)
    <add-dept ref="addDept" :current-node-id="currentNodeId" :show-dialog.sync="showDialog" @updateDepartment="getDepartment" />
  • 调用子组件方法-代码位置(src/views/department/index.vue)
 // 操作部门方法operateDept(type, id) {if (type === 'add') {// 添加子部门this.showDialog = true // 显示弹层this.currentNodeId = id} else if (type === 'edit') {// 编辑部门场景this.showDialog = truethis.currentNodeId = id // 记录id 要用它获取数据// 更新props- 异步动作// 直接调用了子组件的方法 同步的方法// 要在子组件获取数据// 父组件调用子组件的方法来获取数据this.$nextTick(() => {this.$refs.addDept.getDepartmentDetail() // this.$refs.addDept等同于子组件的this})} }

这里为什么要用$nextTick,因为弹出层之后紧接着要调用子组件方法,第一次弹出层时,里面的组件还未完成渲染,所以要等到showDialog这个属性设置的数据完成渲染之后才进行调用

  • 子组件提供获取详情的方法-代码位置(src/views/department/components/add-dept.vue)
 // 获取组织的详情async getDepartmentDetail() {this.formData = await getDepartmentDetail(this.currentNodeId)}

2.组织架构-编辑部门-编辑表单校验

image.png

编辑部门表单校验和新增部门表单校验的区别就是编辑的数据已经在数据库存在了,必然是存在重复的

image.png

  • 编辑场景下排出自身-

  • 检查部门编码-代码位置(src/views/department/components/add-dept.vue)

{trigger: 'blur',// 自定义校验模式validator: async(rule, value, callback) => {// value就是输入的编码let result = await getDepartment()// 判断是否是编辑模式if (this.formData.id) {// 编辑场景result = result.filter(item => item.id !== this.formData.id)}// result数组中是否存在 value值if (result.some(item => item.code === value)) {callback(new Error('部门中已经有该编码了'))} else {callback()}}
  • 检查部门名称-代码位置(src/views/department/components/add-dept.vue)
{trigger: 'blur',// 自定义校验模式validator: async(rule, value, callback) => {// value就是输入的名称let result = await getDepartment()if (this.formData.id) {// 编辑场景 排除自身result = result.filter(item => item.id !== this.formData.id)}// result数组中是否存在 value值if (result.some(item => item.name === value)) {callback(new Error('部门中已经有该名称了'))} else {callback()}}

3.组织架构-编辑部门-确认取消

image.png

image.png

  • 封装更新部门的API-代码位置(src/api/department.js)
/** ** 更新部门* ***/
export function updateDepartment(data) {return request({method: 'put',url: `/company/department/${data.id}`,data})
}
  • 确认时区分当前时编辑还是新增场景-代码位置(src/views/department/components/add-dept.vue)
 // 点击确定时调用btnOK() {this.$refs.addDept.validate(async isOK => {if (isOK) {let msg = '新增'// 通过formData中idif (this.formData.id) {// 编辑场景msg = '更新'await updateDepartment(this.formData)} else {// 新增场景await addDepartment({ ...this.formData, pid: this.currentNodeId })}// 通知父组件更新this.$emit('updateDepartment')// 提示消息this.$message.success(`${msg}部门成功`)this.close()}})},
  • 取消时重置数据-代码位置(src/views/department/components/add-dept.vue)
 close() {// 修改父组件的值 子传父// resetFields 只能重置在模板中绑定的数据this.formData = {code: '', // 部门编码introduce: '', // 部门介绍managerId: '', // 部门负责人idname: '', // 部门名称pid: '' // 父级部门的id}this.$refs.addDept.resetFields() // 重置表单this.$emit('update:showDialog', false)},
  • 使用计算属性生成当前显示的弹层标题-代码位置(src/views/department/components/add-dept.vue)
  computed: {showTitle() {return this.formData.id ? '编辑部门' : '新增部门'}}
  • 弹层标题使用计算属性-代码位置(src/views/department/components/add-dept.vue)
<el-dialog :title="showTitle" :visible="showDialog" @close="close">

4.组织架构-删除部门

image.png

  • 封装删除部门的API-代码位置(src/api/department.js)
/*** 删除部门*
*/export function delDepartment(id) {return request({method: 'delete',url: `/company/department/${id}`})
}
  • 在删除场景下调用API删除-代码位置(src/views/department/index.vue)
  // 操作部门方法operateDept(type, id) {if (type === 'add') {// 添加子部门this.showDialog = true // 显示弹层this.currentNodeId = id} else if (type === 'edit') {// 编辑部门场景this.showDialog = truethis.currentNodeId = id // 记录id 要用它获取数据// 更新props- 异步动作// 直接调用了子组件的方法 同步的方法// 要在子组件获取数据// 父组件调用子组件的方法来获取数据this.$nextTick(() => {this.$refs.addDept.getDepartmentDetail() // this.$refs.addDept等同于子组件的this})} else {// 删除部门this.$confirm('您确认要删除该部门吗').then(async() => {await delDepartment(id)// 提示消息this.$message.success('删除部门成功')this.getDepartment()})}}

5.角色管理-搭建页面结构

image.png

  • 搭建角色管理的页面结构-代码位置(src/views/role/index.vue)
<template><div class="container"><div class="app-container"><!-- 角色管理内容 --><div class="role-operate"><el-button size="mini" type="primary">添加角色</el-button></div><!-- 放置table组件 --><el-table><!-- 放置列 --><el-table-column align="center" width="200" label="角色" /><el-table-column align="center" width="200" label="启用" /><el-table-column align="center" label="描述" /><el-table-column align="center" label="操作" /></el-table><!-- 放置分页组件 --><el-row type="flex" style="height:60px" align="middle" justify="end"><!-- 放置分页组件 --><el-pagination layout="prev, pager, next" /></el-row></div></div>
</template>
  • 样式-代码位置(src/views/role/index.vue)
<style scoped>
.role-operate {padding: 10px;
}
</style>

6.角色管理-获取数据

image.png

  • 封装获取角色API-代码位置(src/api/role.js)
import request from '@/utils/request'/** ** 获取角色列表* **/
export function getRoleList(params) {return request({url: '/sys/role',params // 查询参数})
}
  • 在初始化时调用API-赋值给数据-代码位置(src/views/role/index.vue)
import { getRoleList } from '@/api/role'
export default {name: 'Role'name: 'Role',data() {return {list: []}},created() {this.getRoleList()},methods: {async getRoleList() {const { rows } = await getRoleList()this.list = rows // 赋值数据}}
}
  • 绑定表格属性-代码位置(src/views/role/index.vue)
<el-table :data="list"><!-- 放置列 --><el-table-column prop="name" align="center" width="200" label="角色" /><el-table-column prop="state" align="center" width="200" label="启用" /><el-table-column prop="description" align="center" label="描述" /><el-table-column align="center" label="操作" />
</el-table>

7.角色管理-表格自定义结构

image.png

  • 自定义启用列和操作列的结构-代码位置(src/views/role/index.vue)
<el-table-column prop="state" align="center" width="200" label="启用"><!-- 自定义列结构 --><template v-slot="{ row }"><span>  {{ row.state === 1 ? "已启用" : row.state === 0 ? "未启用" : "无" }} </span></template>
</el-table-column>
  • 自定义操作列结构-代码位置(src/views/role/index.vue)
<el-table-column align="center" label="操作"><!-- 放置操作按钮 --><template><el-button size="mini" type="text">分配权限</el-button><el-button size="mini" type="text">编辑</el-button><el-button size="mini" type="text">删除</el-button></template>
</el-table-column>

8.角色管理-分页功能

image.png


分页功能

  • 展示页码
  • 切换分页获取数据

分页组件属性

  • 当前页码
  • 每页条数
  • 总数

image.png

  • 定义分页信息-代码位置(src/views/role/index.vue)
export default {data () {return  {pageParams: {page: 1, // 第几页pagesize: 5, // 每页多少条total: 0}}}
}
  • 绑定分页信息-代码位置(src/views/role/index.vue)
 <el-pagination:page-size="pageParams.pagesize":current-page="pageParams.page":total="pageParams.total"layout="prev, pager, next"@current-change="changePage"
/>
  • 初始化时将总数赋值-代码位置(src/views/role/index.vue)
async getRoleList() {const { rows, total } = await getRoleList(this.pageParams)this.list = rows // 赋值数据this.pageParams.total = total
},
  • 切换分页时,获取对应页码的数据-代码位置(src/views/role/index.vue)
    // 切换分页时 请求新的数据changePage(newPage) {this.pageParams.page = newPage // 赋值当前页码this.getRoleList()}

9.角色管理-新增功能弹层

image.png

image.png

  • 放置弹层组件-代码位置(src/views/role/index.vue)
<el-dialog width="500px" title="新增角色" :visible.sync="showDialog"><!-- 表单内容 --><el-form label-width="120px"><el-form-item label="角色名称"><el-input style="width:300px" size="mini" /></el-form-item><el-form-item label="启用"><el-switch size="mini" /></el-form-item><el-form-item label="角色描述"><el-input type="textarea" :rows="3" style="width:300px" size="mini" /></el-form-item><el-form-item><el-row type="flex" justify="center"><el-col :span="12"><el-button type="primary" size="mini">确定</el-button><el-button size="mini">取消</el-button></el-col></el-row></el-form-item></el-form></el-dialog>
  • 声明变量控制弹层显示-代码位置(src/views/role/index.vue)
export default {data () {return  {showDialog: false}}
}
  • 点击按钮弹出层-代码位置(src/views/role/index.vue)
<el-button size="mini" type="primary" @click="showDialog = true">添加角色</el-button>

有同学可能会问,为啥组织架构要新增和编辑要单独封装一个组件,而角色管理不用呢?这里面有什么原因和讲究吗? 其实在企业开发过程中,封装组件并不是必须的,当一个业务或者需求明确,并且会有复用的场景下,封装组件会更佳规范一些,而有的企业为了提升开发效率,速度优先, 不封装组件的情况也是很常见的。

10.角色管理-表单数据校验

image.png

  • 声明数据和规则-代码位置(src/views/role/index.vue)
export default  {data () {return {roleForm: {name: '',description: '',state: 0 // 默认未1启用 关闭 0 打开1},rules: {name: [{ required: true, message: '角色名称不能为空', trigger: 'blur' }],description: [{ required: true, message: '角色描述不能为空', trigger: 'blur' }]}}}
}
  • 绑定表单校验和数据-代码位置(src/views/role/index.vue)
<el-form ref="roleForm" :model="roleForm" :rules="rules" label-width="120px"><el-form-item prop="name" label="角色名称"><el-input v-model="roleForm.name" style="width:300px" size="mini" /></el-form-item><el-form-item label="启用"><!-- 如果不需要校验 就不需要写 prop属性 --><el-switch v-model="roleForm.state" :active-value="1" :inactive-value="0" size="mini" /></el-form-item><el-form-item prop="description" label="角色描述"><el-input v-model="roleForm.description" type="textarea" :rows="3" style="width:300px" size="mini" /></el-form-item>

11.角色管理-新增角色-确定取消

image.png

  • 封装新增角色的API-代码位置(src/api/role.js)
/** *** 新增角色* ***/export function addRole(data) {return request({url: '/sys/role',method: 'post',data})
}
  • 确定和取消方法
btnOK() {this.$refs.roleForm.validate(async isOK => {if (isOK) {await addRole(this.roleForm)this.$message.success('新增角色成功')this.getRoleList()this.btnCancel()}})},
btnCancel() {this.$refs.roleForm.resetFields() // 重置表单数据this.showDialog = false // 关闭弹层
},
  • 弹层绑定关闭方法
  <el-dialog width="500px" title="新增角色" :visible.sync="showDialog" @close="btnCancel">

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

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

相关文章

2024年天津天狮学院市场营销专业《管理学》考试大纲

2024年天津天狮学院专升本市场营销专业高职升本入学考试《管理学》考试大纲 一、考试性质 《管理学》专业课程考试是天津天狮学院市场营销专业高职升本入学考试的必考科 目之一&#xff0c;其性质是考核学生是否达到了升入本科继续学习的要求而进行的选拔性考试。《管理学》考…

5、Hydra与Crunch基本使用

文章目录 一、关于Hydra与Crunch二、在操作机上使用Crunch生成用户名和密码字典三、在操作机上使用Hydra对靶机FTP登录密码进行字典攻击 一、关于Hydra与Crunch Hydra&#xff08;九头蛇&#xff09;是一个相当强大的暴力密码破解工具。该工具支持几乎所有协议的在线密码破解&…

目录树自动生成器 golang+fyne

go tree 代码实现请看 gitee 仓库链接 有很多生成目录树的工具&#xff0c;比如windows自带的tree命令&#xff0c;nodejs的treer&#xff0c;tree-cli等等。这些工具都很成熟、很好用&#xff0c;有较完善的功能。 但是&#xff0c;这些工具全部是命令式的&#xff0c;如果…

解密 sqli靶场第一关:一步一步学习 SQL 注入技术

目录 一、判断是否存在注入点 二、构造类似?id1 --的语句 三、判断数据表中的列数 四、使用union联合查询 五、使用group_concat()函数 六、爆出数据库中的表名 七、爆出users表中的列名 八、爆出users表中的数据 &#x1f308;嗨&#xff01;我是Filotimo__&#x1f308;。很…

Matlab数学建模算法详解之混合整数线性规划 (MILP) 算法(附完整实现代码)

&#x1f517; 运行环境&#xff1a;Matlab &#x1f6a9; 撰写作者&#xff1a;左手の明天 &#x1f947; 精选专栏&#xff1a;《python》 &#x1f525; 推荐专栏&#xff1a;《算法研究》 #### 防伪水印——左手の明天 #### &#x1f497; 大家好&#x1f917;&#x1f91…

每天一点python——day76

#每天一点Python——76 #函数的返回值 函数的返回值&#xff1a; 如果函数的运行结果需要在其他函数中使用&#xff0c;那么这个函数就应该被定义为带返回值的函数 函数的运行结果使用return关键字进行返回 返回到函数的调用处 例子 def a(a,b):cabreturn c a(10,20)return可以…

java多线程一

1、什么是线程 线程&#xff08;Thread&#xff09;是一条程序内部的一条执行流程。 程序中如果只有一条执行流程&#xff0c;那这个程序就是单线程的程序。 2、什么是多线程 多线程&#xff08;multithreading&#xff09;&#xff0c;是指从软件或者硬件上实现多个线程并发执…

Flask Paginate实现表格分页

flask_paginate 是 Flask 框架的一个分页扩展&#xff0c;用于处理分页相关的功能。它可以帮助你在 Flask Web 应用程序中实现分页功能&#xff0c;让用户可以浏览大量数据的不同部分。本篇博文重点讲述在Web开发中&#xff0c;用paginate把所有数据进行分页展示&#xff0c;首…

【SAS Planet 下载地图瓦片-读取】

SAS Planet下载地图瓦片请看上一篇 详细介绍了下载方法 【SAS Planet 下载地图瓦片】-CSDN博客 准备工作&#xff1a; 1.提前下载好地图瓦片数据 SAS Planet下载地图瓦片默认存储路径如下 默认存储格式为 .sqlitedb 2.提前准备好 java开发环境和开发工具&#xff0c;新建 一个…

第五题-kotori和素因子【第六届传智杯程序设计挑战赛解题分析详解复盘】(JavaPythonC++实现)

🚀 欢迎来到 ACM 算法题库专栏 🚀 在ACM算法题库专栏,热情推崇算法之美,精心整理了各类比赛题目的详细解法,包括但不限于ICPC、CCPC、蓝桥杯、LeetCode周赛、传智杯等等。无论您是刚刚踏入算法领域,还是经验丰富的竞赛选手,这里都是提升技能和知识的理想之地。 ✨ 经典…

安卓吸顶效果

当列表滑动时&#xff0c;图片逐渐消失&#xff0c;toolBar悬停在头部。 <?xml version"1.0" encoding"utf-8"?><androidx.coordinatorlayout.widget.CoordinatorLayoutxmlns:android"http://schemas.android.com/apk/res/android"x…

网络运维与网络安全 学习笔记2023.11.26

网络运维与网络安全 学习笔记 第二十七天 今日目标 NAT场景与原理、静态NAT、动态NAT PAT原理与配置、动态PAT之EasyIP、静态PAT之NAT Server NAT场景与原理 项目背景 为节省IP地址和费用&#xff0c;企业内网使用的都是“私有IP地址” Internet网络的组成设备&#xff0c…

Python自动化测试学习路线【进阶必看】

软件自动化测试的学习步骤 大概步骤如下&#xff1a; 1. 做好手工测试&#xff08;了解各种测试的知识&#xff09;-> 2. 学习编程语言-> 3. 学习Web基础&#xff08;HTML,HTTP,CSS,DOM,Javascript&#xff09;或者 学习Winform -> 4. 学习自动化测试工具 ->5.…

Cisco Packet Tracer配置命令——路由器篇

路由基础 路由器用于互联两个或多个网络&#xff0c;具有两项功能&#xff1a;为要转发的数据包选择最佳路径以及将数据包交换到正确的端口&#xff0c;概括为路由选择和分组转发。 路由选择 路由选择就是路由器根据目的IP地址的网络地址部分&#xff0c;通过路由选择算法确…

java多线程任务并发问题:任务并行和任务并发有什么区别?

1.什么是任务并行&#xff1f; 多个任务在同一时刻同时运行&#xff0c;通常需要多个处理器或者多核处理器来实现。例如一个计算机可以同时执行多个程序、多个线程、多个进程时&#xff0c;就是采用并行的方式来处理任务的&#xff0c;有效提高计算机处理效率&#xff1b; 2.…

C++中在什么情况下使用共用体

C中在什么情况下使用共用体 在结构中&#xff0c;常使用共用体来模拟复杂的数据类型。共用体可将固定的内存空间解释为另一种类型&#xff0c;有些实现利用这一点进行类型转换或重新解释内存&#xff0c;但这种做法存在争议&#xff0c;而且可采用其他替代方式。如下示例程序演…

公司人事管理系统

1.问题描述 一个小公司包含四类人员&#xff1a;经理&#xff0c;技术人员&#xff0c;销售人员和销售经理&#xff0c;各类人员的工资计算方法如下&#xff1a;经理&#xff1a;固定月薪&#xff08;8000&#xff09;&#xff1b;技术人员&#xff1a;月薪按技术等级&#xf…

类与对象——(1)初识对象——C++中的string

归纳编程学习的感悟&#xff0c; 记录奋斗路上的点滴&#xff0c; 希望能帮到一样刻苦的你&#xff01; 如有不足欢迎指正&#xff01; 共同学习交流&#xff01; &#x1f30e;欢迎各位→点赞 &#x1f44d; 收藏⭐ 留言​&#x1f4dd; 或许不安或许迷惑&#xff0c;但…

Python与设计模式--解释器模式

20-Python与设计模式–解释器模式 一、模拟吉他 要开发一个自动识别谱子的吉他模拟器&#xff0c;达到录入谱即可按照谱发声的效果。除了发声设备外&#xff08;假设已完成&#xff09;&#xff0c; 最重要的就是读谱和译谱能力了。分析其需求&#xff0c;整个过程大致上分可…

Factory 工厂模式-C语言实现

说明&#xff1a; 均由 chatgpt生成&#xff0c;实例可以看出无法运行&#xff0c;仅供参考~ UML图&#xff1a; ‘ 表示public, - 表示private,“# 表示protected.” 一文掌握14种UML图-腾讯云开发者社区-腾讯云 (tencent.com) 五分钟带你读懂UML类图 - 知乎 (zhihu.com)…