人力资源智能化管理项目(day05:角色管理)

学习源码可以看我的个人前端学习笔记 (github.com):qdxzw/humanResourceIntelligentManagementProject

搭建页面结构

分页组件:设置layout,表示需要显示的内容,用逗号分隔,布局元素会依次显示。prev表示上一页,next为下一页,pager表示页码列表(字母不要写错了)

<!-- 角色管理的内容 --><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>

获取数据

/**** 获取-分页查询角色列表**/
export function getRoleList (params) {return request({url: '/sys/role',method: 'GET',params // 查询参数,会拼接到url地址上})
}
<el-table :data="roleList"><!-- 放置列 --><el-table-column align="center" width="200" prop="name" label="角色" /><el-table-column align="center" width="200" prop="state" label="启用" /><el-table-column align="center" prop="description" label="描述" /><el-table-column align="center" label="操作" />
</el-table>data () {return {roleList: [] // 角色列表}},created () {this.getRoleList()},methods: {async getRoleList () {const { rows } = await getRoleList()this.roleList = rows // 赋值数据}}

表格自定义结构

启动列

<el-table-column align="center" width="200" prop="state" label="启用"><!-- 自定义列结构 --><template v-slot="{ row }"><span>{{row.state === 1 ? '已启用' : row.state === 0 ? '未启用' : '无'}}</span></template></el-table-column>

操作列

<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>

分页功能

<!-- 放置分页组件 --><el-pagination:page-size="pageParams.pagesize":current-page="pageParams.page":total="pageParams.total"layout="prev,pager,next"@current-change="changePage"/>// 将分页信息放到一个对象中pageParams: {page: 1, // 第几页pagesize: 5, // 每页多少条total: 0}async getRoleList () {const { rows, total } = await getRoleList(this.pageParams)this.roleList = rows // 赋值数据this.pageParams.total = total},// 切换分页时,请求新的数据changePage (newPage) {this.pageParams.page = newPage // 赋值当前页码this.getRoleList()}

新增功能弹层

<el-button size="mini" type="primary" @click="showDialog = true">添加角色</el-button><!-- 放置弹层 --><el-dialog title="新增角色" width="500px" :visible.sync="showDialog"><!-- 表单内容 --><el-formlabel-width="120px"><el-form-item label="角色名称"><el-input style="width: 300px" size="mini" /></el-form-item><el-form-item label="启用"><el-switchsize="mini"/></el-form-item><el-form-item label="角色描述" ><el-inputtype="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>showDialog: false, // 控制弹层显示隐藏

表单数据校验

    <!-- 放置弹层 --><el-dialog title="新增角色" width="500px" :visible.sync="showDialog"><!-- 表单内容 --><el-formref="roleForm":model="roleForm":rules="rules"label-width="120px"><el-form-item label="角色名称" prop="name"><el-input v-model="roleForm.name" style="width: 300px" size="mini" /></el-form-item><!-- 如果不需要校验,就不需要写prop属性 --><el-form-item label="启用"><el-switchv-model="roleForm.state":active-value="1":inactive-value="0"size="mini"/></el-form-item><el-form-item label="角色描述" prop="description"><el-inputv-model="roleForm.description"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>roleForm: {name: '',state: 0,description: ''},rules: {name: [{ required: true, message: '角色名称不能为空', trigger: 'blur' }],description: [{ required: true, message: '角色描述不能为空', trigger: 'blur' }]}

新增角色-确定取消

/**** 新增-角色**/
export function addRole (data) {return request({url: '/sys/role',method: 'POST',data})
}<!-- 如果不需要校验,就不需要写prop属性 --><!-- 重置表单数据,需要prop属性 --><el-form-item label="启用" prop="state"><el-switchv-model="roleForm.state":active-value="1":inactive-value="0"size="mini"/></el-form-item>btnOk () {this.$refs.roleForm.validate(async isOk => {if (isOk) {// 调用新增接口await addRole(this.roleForm)// 重新渲染页面并关闭弹层this.getRoleList()this.btnCancel()this.$message.success('添加成功')}})},btnCancel () {this.$refs.roleForm.resetFields() // 将数据重置this.showDialog = false}

编辑角色-行内编辑

this.$set(目标对象, 属性名称, 初始值 )

等价于 Vue.set(目标对象, 属性名称, 初始值 )

向响应式对象中添加一个属性,并确保这个新属性同样是响应式的,且触发视图更新

  <!-- 放置列 --><el-table-column align="center" width="200" prop="name" label="角色"><template v-slot="{ row }"><!-- 条件判断 --><el-input v-if="row.isEdit" size="mini" /><span v-else>{{ row.name }}</span></template></el-table-column><el-table-column align="center" width="200" prop="state" label="启用"><!-- 自定义列结构 --><template v-slot="{ row }"><el-switch v-if="row.isEdit" /><span v-else>{{row.state === 1 ? '已启用' : row.state === 0 ? '未启用' : '无'}}</span></template></el-table-column><el-table-column align="center" prop="description" label="描述"><template v-slot="{ row }"><el-input v-if="row.isEdit" size="mini" /><span v-else>{{ row.description }}</span></template></el-table-column><el-table-column align="center" label="操作"><!-- 放置操作按钮 --><template v-slot="{ row }"><!-- 编辑状态 --><template v-if="row.isEdit"><el-button type="primary" size="mini">确定</el-button><el-button size="mini">取消</el-button></template><!-- 非编辑状态 --><template v-else><el-button size="mini" type="text">分配权限</el-button><el-button size="mini" type="text" @click="btnEditRow(row)">编辑</el-button><el-button size="mini" type="text">删除</el-button></template></template></el-table-column>// 针对每一行数据添加一个编辑标记this.roleList.forEach(item => {// item.isEdit = false // 添加一个属性 初始值为false// 数据响应式的问题 数据变化 视图更新// 添加的动态属性 不具备响应式特点// this.$set(目标对象,属性名称,初始值)可以针对目标对象 添加的属性 添加响应式this.$set(item, 'isEdit', false)})// 点击编辑行btnEditRow (row) {console.log(row)row.isEdit = true}

编辑角色-行内数据缓存

            <el-inputv-if="row.isEdit"v-model="row.editRow.name"size="mini"/><!-- 开 1  关 0 --><el-switchv-if="row.isEdit"v-model="row.editRow.state":active-value="1":inactive-value="0"/><el-inputv-if="row.isEdit"v-model="row.editRow.description"size="mini"/>// 初始化定义缓存数据this.$set(item, 'editRow', {name: item.name,state: item.state,description: item.description}// 点击编辑行btnEditRow (row) {row.isEdit = true// 更新缓存数据row.editRow.name = row.namerow.editRow.state = row.staterow.editRow.description = row.description},

编辑角色-确定取消

/**** 修改-角色**/
export function updateRole (data) {return request({url: `/sys/role/${data.id}`,method: 'PUT',data})
}<el-button type="primary" size="mini" @click="btnEditOk(row)">确定</el-button><el-button size="mini" @click="row.isEdit = false">取消</el-button>async btnEditOk (row) {// 检查必填if (row.editRow.name && row.editRow.description) {// 调用更新接口await updateRole({ ...row.editRow, id: row.id })this.$message.success('更新数据成功')// 更新显示数据 退出编辑状态// row.name=row.editRow.name //eslint的校验(误判)// Object.assign(target,source)Object.assign(row, {...row.editRow,isEdit: false // 退出编辑模式}) // 规避eslint的误判} else {this.$message.warning('角色和描述不能为空')}}

角色管理-删除角色

/**** 删除-角色**/
export function deleteRole (id) {return request({url: `/sys/role/${id}`,method: 'DELETE'})
}<el-popconfirmtitle="这是一段内容确定删除吗?"@onConfirm="confirmDel(row.id)"><el-buttonslot="reference"style="margin-left: 10px"size="mini"type="text">删除</el-button></el-popconfirm>// 点击了确定触发的async confirmDel (id) {await deleteRole(id) // 后端删除this.$message.success('删除数据成功')// 删除的如果是最后一个if (this.roleList.length === 1) this.pageParams.page--this.getRoleList()}

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

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

相关文章

【GO语言卵细胞级别教程】04.GO函数介绍

【GO语言卵细胞级别教程】04.GO函数介绍 目录&#xff1a; 【GO语言卵细胞级别教程】04.GO函数介绍0.创建项目1.函数的引入2.注意事项3.详细介绍3.1 形参介绍 0.创建项目 创建目录 执行命令加载模块 cd 02.gostudy目录下 1.进入目录下 cd 02.gostudy 2.初始化模块变量 go …

Linux网络编程——tcp套接字

文章目录 主要代码关于构造listen监听accepttelnet测试读取信息掉线重连翻译服务器演示 本章Gitee仓库&#xff1a;tcp套接字 主要代码 客户端&#xff1a; #pragma once#include"Log.hpp"#include<iostream> #include<cstring>#include<sys/wait.h…

【java】11:IDEA常用快捷键+包

1. IDEA 常用快捷键 删除当前行, 默认是 ctrl Y 自己配置 ctrl d复制当前行, 自己配置 ctrl alt 向下光标补全代码 alt /添加注释和取消注释 ctrl / 【第一次是添加注释&#xff0c;第二次是取消注释】导入该行需要的类 先配置 auto import , 然后使用 altenter 即可快速…

AlmaLinux右键菜单(基于GNOME桌面)

文章目录 前言前提说明在文件上右键在文件夹上右键 前言 在使用VSCode的过程中&#xff0c;AlmaLinux没能像Windows一样在右键菜单上显示打开方式&#xff0c;所以找了一下解决方案&#xff0c;罗列出来 前提说明 虽然说无论是media还是StackOverflow都推荐使用这条命令&…

PLC在物联网中位置—承上启下,与上位机下位机的关联。

谈到物联网&#xff0c;就绕不开PLC&#xff0c;本文着重介绍PLC的定义、与单片机的区分&#xff0c;价值、物联网中的位置&#xff0c;以及和上位机、下位机的关联&#xff0c;让友友们对PLC有个全面的认知。 一、什么是PLC PLC是可编程逻辑控制器&#xff08;Programmable L…

「递归算法」:反转链表

一、题目 给你单链表的头节点 head &#xff0c;请你反转链表&#xff0c;并返回反转后的链表。 示例 1&#xff1a; 输入&#xff1a;head [1,2,3,4,5] 输出&#xff1a;[5,4,3,2,1]示例 2&#xff1a; 输入&#xff1a;head [1,2] 输出&#xff1a;[2,1]示例 3&#xff1a…

springboot集成elasticsearch

一、依赖下载 创建好一个springboot项目&#xff0c;需要集成es&#xff1a; 因为springboot默认集成了es&#xff0c;但是版本号需要与本地或者服务器es的版本号一致&#xff0c;我本地es版本是7.14.0&#xff0c;所以需要在<properties></properties>中指定es版…

12.状态模式

文章目录 状态模式总结 状态模式 介绍 状态模式它允许一个对象在其内部状态改变时改变其行为&#xff0c;使对象看起来似乎修改了其类。状态模式的主要目的是将对象的状态封装成不同的类&#xff0c;并将对象的行为委托给当前状态。 组成 Context&#xff08;环境&#xff09;&…

开启Android学习之旅-1

最近在学习《第一行代码 Android》&#xff0c;两天看书把所有代码都敲了一遍。由于之前没有接触过 Kotlin&#xff0c;导致了囫囵吞枣&#xff0c;跟着书会敲&#xff0c;离开就忘了。Android 大佬开发的各种框架、控件好像大部分都用了 Kotlin。看他们的源码&#xff0c;理解…

UnityShader——01Shader和渲染管线

Shader和渲染管线 什么是Shader Shader中文翻译为着色器&#xff0c;是一种较为短小的程序片段&#xff0c;用于告诉图形硬件如何计算和输出图像&#xff0c;过去由汇编语言编写&#xff0c;现在也可以使用高级语言进行编写。 即&#xff0c;Shader是一种可编程图形管线的算法…

第五篇:MySQL常见数据类型

MySQL中的数据类型有很多&#xff0c;主要分为三类:数值类型、字符串类型、日期时间类型 三个表格都在此网盘中&#xff0c;需要者可移步自取&#xff0c;如果觉得有帮助希望点个赞~ MySQL常见数据类型表 数值类型 &#xff08;注&#xff1a;decimal类型举例&#xff0c;如1…

从左值和右值的角度分析a++和++a

摘自牛客上的一个题目&#xff1a; int a5,则 (a)的值是? 答案是会编译报错。 原因&#xff1a; a返回的是右值(rvalue)&#xff0c;而我们不能对一个右值进行自增操作。所以(a)会报错。 怎么理解呢&#xff1f; &#xff08;a)返回的是a在1之前的值&#xff0c;这个值是一个…