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

news2024/11/27 0:17:07

目录

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 = true
        this.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中id
          if (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: '', // 部门负责人id
        name: '', // 部门名称
        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 = true
        this.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.coloradmin.cn/o/1254890.html

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

相关文章

C语言实现万年历

C语言实现万年历

C语言实现万年历 一、项目介绍 需求和功能是用纯C语言实现一个可以属于年份&#xff0c;属于一个年份就可以显示该年各个月份的日历&#xff0c;如同日历一般&#xff0c;每个月当中每天对应的星期均可查看&#xff0c;即万年历&#xff0c;要求格式整齐&#xff0c;星期对照直…
阅读更多...
5、Hydra与Crunch基本使用

5、Hydra与Crunch基本使用

文章目录 一、关于Hydra与Crunch二、在操作机上使用Crunch生成用户名和密码字典三、在操作机上使用Hydra对靶机FTP登录密码进行字典攻击 一、关于Hydra与Crunch Hydra&#xff08;九头蛇&#xff09;是一个相当强大的暴力密码破解工具。该工具支持几乎所有协议的在线密码破解&…
阅读更多...
基于驾驶训练算法优化概率神经网络PNN的分类预测 - 附代码

基于驾驶训练算法优化概率神经网络PNN的分类预测 - 附代码

基于驾驶训练算法优化概率神经网络PNN的分类预测 - 附代码 文章目录 基于驾驶训练算法优化概率神经网络PNN的分类预测 - 附代码1.PNN网络概述2.变压器故障诊街系统相关背景2.1 模型建立 3.基于驾驶训练优化的PNN网络5.测试结果6.参考文献7.Matlab代码 摘要&#xff1a;针对PNN神…
阅读更多...
Spring Boot 项目中读取 YAML 文件中的数组、集合和 HashMap

Spring Boot 项目中读取 YAML 文件中的数组、集合和 HashMap

在 Spring Boot 项目中&#xff0c;我们经常使用 YAML 文件来配置应用程序的属性。在这篇博客中&#xff0c;我将模拟如何在 Java 的 Spring Boot 项目中读取 YAML 文件中的数组、集合和 HashMap。 1. 介绍 YAML&#xff08;YAML Aint Markup Language&#xff09;是一种人类…
阅读更多...
《数据结构与算法之美》读书笔记2

《数据结构与算法之美》读书笔记2

链表操作的技巧 1.理解指针 将摸个变量赋值给指针&#xff0c;实际上就是将这个变量的地址赋给指针&#xff0c;或者&#xff0c;指针中存储了这个变量的地址&#xff0c;指向了这个变量&#xff0c;所以可以通过指针找到这个变量。 2.内存泄漏或指针丢失 删除链表节点时&a…
阅读更多...
对称加密与非对称加密的区别是什么？

对称加密与非对称加密的区别是什么？

对称加密与非对称加密的区别是什么&#xff1f; 对称加密概念&#xff1a;好处和坏处&#xff1a;基本原理 非对称加密概念&#xff1a;工作原理&#xff1a; 两者区别安全性处理速度密钥管理通信双方数量 对称加密 概念&#xff1a; 同一个密钥可以同时用来对信息进行加密和…
阅读更多...
Rust UI开发（三）：iced如何打开图片（对话框）并在窗口显示图片？

Rust UI开发（三）：iced如何打开图片（对话框）并在窗口显示图片？

注&#xff1a;此文适合于对rust有一些了解的朋友 iced是一个跨平台的GUI库&#xff0c;用于为rust语言程序构建UI界面。 这是一个系列博文&#xff0c;本文是第三篇&#xff0c;前两篇的链接&#xff1a; 1、Rust UI开发&#xff08;一&#xff09;&#xff1a;使用iced构建…
阅读更多...
老师应具备什么样的心理素质

老师应具备什么样的心理素质

老师&#xff0c;一个充满智慧与挑战的职业&#xff0c;就像园丁&#xff0c;用无私的爱和耐心&#xff0c;滋养着每一颗渴望知识的幼苗。那么&#xff0c;作为教育从业者&#xff0c;要具备哪些心理素质呢&#xff1f; 强大的情绪管理能力 老师的工作绝非一帆风顺。在教育学生…
阅读更多...
JAVA - 阻塞队列

JAVA - 阻塞队列

一、什么是堵塞队列 堵塞队列&#xff08;Blocking Queue&#xff09;是一种特殊类型的队列&#xff0c;它具有一些特定的行为和限制。在堵塞队列中&#xff0c;当队列为空时&#xff0c;尝试从队列中取出元素的操作将会被阻塞&#xff0c;直到队列中有可用元素&#xff1b;当…
阅读更多...
【社会网络分析第6期】Ucient实操

【社会网络分析第6期】Ucient实操

一、导入数据处理二、核心——边缘分析三、聚类分析四、网络密度 一、导入数据处理 将数据导入Ucinet首先需要对数据进行处理。 承接上一期的数据格式&#xff1a;【社会网络分析第5期】gephi使用指南 原先得到的数据格式如下&#xff1a; 接下来打开ucinet&#xff1a; 之后…
阅读更多...
免费 2 个月！ChatGPT-4 和 Claude 2 都能用

免费 2 个月！ChatGPT-4 和 Claude 2 都能用

你好&#xff0c;我是 EarlGrey&#xff0c;一名双语学习者&#xff0c;会一点编程&#xff0c;目前已翻译出版《Python 无师自通》、《Python 并行编程手册》等书籍。 点击上方蓝字关注我&#xff0c;获取最新编程及AI干货、高赞工具和项目分享。 在后台回复“books”&#xf…
阅读更多...
10、鸿蒙组件的实现语法

10、鸿蒙组件的实现语法

1、查看在线开发文档 在开发工具的右边有API帮助&#xff0c;打开后可以查阅需要的内容 2、创建组件的语法 组件名(options) options组件初始化参数。比如创建Text文本组件&#xff0c;options是显示的文本内容。 Text(我是一个文本) 3、配置组件属性 组件的属性一般用于…
阅读更多...
【数据库基础】

【数据库基础】

目录&#xff1a; 前言什么是数据库主流数据库服务器&#xff0c;数据库&#xff0c;表关系MySQL架构SQL分类存储引擎 前言 剑指offer&#xff1a;一年又1天 什么是数据库 存储数据用文件就可以了&#xff0c;为什么还要弄个数据库? 文件保存数据有以下几个缺点&#xff1a;…
阅读更多...
npm中的npx命令

npm中的npx命令

1.概念 npx是一个执行npm软件包的二进制文件&#xff0c;通俗的讲&#xff0c;他可以执行npm的一些指令。 2.示例 用babel将ES6语法转为ES5语法 npx babel src/js -d dist/js会执行babel的相关功能&#xff0c;如果没有安装&#xff0c;也会自动安装。 当在执行npx <co…
阅读更多...
单片机学习3——数码管

单片机学习3——数码管

数码管&#xff0c;根据内部结构&#xff0c;可分为共阴极数码管和共阳极数码管。七段发光管加上一个小数点&#xff0c;共计8段。因此&#xff0c;我们对它编程的时候&#xff0c;刚好是用一个字节。 数码管的显示方式&#xff1a; 1&#xff09;静态显示&#xff1b; 2&…
阅读更多...
【刷题笔记】数组-双指针||覆盖||重复元素

【刷题笔记】数组-双指针||覆盖||重复元素

【刷题笔记】数组-双指针||覆盖||重复元素 目录 移除元素删除有序数组中的重复项删除有序数组中的重复项 II分析 移除元素 https://leetcode.cn/problems/remove-element/ 给你一个数组 nums 和一个值 val&#xff0c;你需要 原地 移除所有数值等于 val 的元素&#xff0c;并…
阅读更多...
90. 打家劫舍II （房子围成一圈）

90. 打家劫舍II （房子围成一圈）

题目 题解 class Solution:def rob(self, nums: List[int]) -> int:def dp(nums: List[int]) -> int:N len(nums)# 定义状态&#xff1a;dp[i]表示从第i个房屋开始偷窃&#xff0c;能够偷到的最高金额dp [0 for i in range(N)]for i in range(N-1, -1, -1):if i N-1:…
阅读更多...
软件工程期末复习（选择+填空+判断）

软件工程期末复习（选择+填空+判断）

文章目录 软件工程期末复习一、 选择题 软件工程期末复习 一、 选择题 1.“软件危机”的表现不包括&#xff1a;&#xff08;c&#xff09; A、软件产品不能按期交付 B、用户对“已完成的”软件产品时常不满意 C、程序员越来越供不应求 D、软件项目难以管理&#xff0c;维护困…
阅读更多...
各平台chatGPT使用体验（国内外）

各平台chatGPT使用体验（国内外）

首推&#xff1a;openAI 地址&#xff1a;https://chat.openai.com/ 这个真的很好用&#xff0c;而且回复的结果也基本让让人满意&#xff0c;个人首推&#xff0c;而且对比国内的除了回答更令人满意外&#xff0c;它更连贯&#xff0c;不像国内的gpt一句一问&#xff0c;跟进…
阅读更多...
RabbitMQ之延迟消息实战

RabbitMQ之延迟消息实战

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

Copyright @ 2022~2023