Day05-组织架构-角色管理

提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档

文章目录

  • 1.组织架构-编辑部门-弹出层获取数据
  • 2.组织架构-编辑部门-编辑表单校验
  • 3.组织架构-编辑部门-确认取消
  • 4.组织架构-删除部门
  • 5.角色管理-搭建页面结构
  • 6.角色管理-获取数据
  • 7.角色管理-表格自定义结构
  • 8.角色管理-分页功能
  • 9.角色管理-新增
  • 10.角色管理-表单数据校验
  • 11.角色管理-新增角色-确定取消


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

  • 🍕🍕🍕编辑部门和新增部门会共用一个组件,也就是add-dept组件要支持两种场景-新增场景-编辑场景
    在这里插入图片描述
  • 获取部门详情的API-代码位置(src/api/department.js)
//获取部门详情
export function getDepartmentDetail(id){return request({url:`/company/department/${id}`})
}
  • 点击编辑时,弹出层,通过ref获取组件实例,调用获取详情的方法-代码位置(src/views/department/index.vue)
   <addDept ref="addDept" :current-node-id="currentNodeId"  :show-dialog.sync="showDialog" @updateDepartment="getDepartment" />
  • 调用子组件方法-代码位置(src/views/department/index.vue)
 //操作部门方法operateDept(type,id){// this.$message('click' + type)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})}}
  • 子组件提供方法-位置(src/views/department/components/add-dept.vue)
  async getDepartmentDetail(){this.formData = await  getDepartmentDetail(this.currentNodeId)}

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

在这里插入图片描述

  • 编辑部门表单校验和新增部门表单校验的区别就是编辑的数据已经在数据库存在了,必然是存在重复的
    在这里插入图片描述
  • 编辑场景下排除自身
  • 检查部门编码-代码位置(src/views/department/components/add-dept.vue)
 //部门编码code:[{required:true,message:'部门编码不能为空',trigger:'blur'},{min:2,max:10,message:'部门编码的长度为2-10个字符',trigger:'blur',//自定义校验模式validator:async(rule,value,callback)=>{//value是输入的编码let result =await getDepartment();console.log(result)//判断是否是编辑模式if(this.formData.id){//编辑场景result = result.filter(item=>item.id !== this.formData.id)console.log(result)}//result数组中是否存在value值if(result.some(item=>item.code === value)){callback(new Error('部门中已经有该编码了'))}else{callback()}}}],
  • 部门名称-位置(src/views/department/components/add-dept.vue)
 //部门名称name:[{required:true,message:'部门名称不能为空',trigger:'blur',validator:async(rule,value,callback)=>{//value就是输入的名称let result = await getDepartment();if(this.formData.id){//编辑 排除自身 id不相等说明不是自身result = result.filter(item=>{return item.id !== this.formData.id})}//result 数组中是否存在value值if(result.some(item=>item.name === value)){callback(new Error('部门中已经有该名称了'))}else{callback()}}}]

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

示例:pandas 是基于NumPy 的一种工具,该工具是为了解决数据分析任务而创建的。
在这里插入图片描述

  • 更新部门的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)
<el-dialog :title="showTitle" :visible="showDialog" @close="close">
computed:{
showTitle(){return this.formData.id ?'编辑部门':'新增部门'}
}

4.组织架构-删除部门

在这里插入图片描述

  • 删除部门的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 this.$nextTick(()=>{this.$refs.addDept.getDepartmentDetail();//this.$refs.addDept等同于子组件的this }) }else{//删除部门this.$confirm('确认要删除该部门吗?').then(async()=>{await delDepartment(id)//提示信息this.$message.success('删除部门成功')this.getDepartment()})}
}

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

在这里插入图片描述

  • 角色管理对应的路由-位置(src/router/modules/role.js)
import layout from '@/layout'
export default{path:'/role',component:layout,children:[{path:'',name:'role',component:()=>import('@/views/role'),meta:{title:'角色',icon:'tree'}}]
}
  • 根路由文件(src/router/index.js)
import roleRouter from '@/router/modules/role'
export const constantRoutes = [departmentRouter,roleRouter,
]
  • 搭建角色管理的页面结构-代码位置(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>
<style scoped>.role-operate{padding:10px;}
</style>

6.角色管理-获取数据

在这里插入图片描述

  • 封装获取角色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'
data() {return {list:[]}},components: {},created(){this.getRoleList()},methods:{async getRoleList(){const {rows} = await getRoleList()this.list = rows;//赋值}}
  • 绑定表格属性-代码位置(src/views/role/index.vue)
 <!-- 放置table组件 --><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.角色管理-表格自定义结构

在这里插入图片描述

  • 自定义启用列和操作列的结构-代码位置(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.角色管理-分页功能

  • 分页
  • 展示页面
  • 切换分页获取数据
  • 分页组件属性
  • 当前页码
  • 每页条数
  • 总数
    在这里插入图片描述
  • 定义分页信息-代码位置(src/views/role/index.vue)
 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" @current-change="changePage" layout="prev,pager,next" /></el-row>
  • 初始化时将总数赋值-(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.角色管理-新增

在这里插入图片描述
在这里插入图片描述

  • 放置弹层组件-代码位置(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-input></el-form-item><el-form-item label="启用"><el-switch size="mini"></el-switch></el-form-item>><el-form-item label="角色描述"><el-input type="textarea" :rows="3" style="width:300px;" size="mini"></el-input></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

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

在这里插入图片描述

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

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

在这里插入图片描述

  • 新增角色的api-(src/api/role.js)
export function addRole{data}{return request({url:'/sys/role',method:'post',data })
}
  • 确定和取消
btnOK(){this.$refs.roleForm.validate(async valid=>{if(valid){await addRole(this.roleForm) this.$message.success('新增角色成功')this.getRoleList()this.btnCancel()}})
},
btnCancel(){this.$refs.roleForm.resetFields();this.showDialog = false;
}

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

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

相关文章

MySQL中的DDL语句

第一题 输入密码登录mysql&#xff0c;创建数据库zoo&#xff0c;转换到zoo数据库&#xff0c; mysql> create database zoo character set gbk; mysql> use zoo查看创建数据库zoo信息 mysql> show create database zoo;删除数据库zoo mysql> drop database zo…

【后端面试题】【中间件】【NoSQL】MongoDB查询优化2(优化排序、mongos优化)

优化排序 在MongoDB里面&#xff0c;如果能够利用索引来排序的话&#xff0c;直接按照索引顺序加载数据就可以了。如果不能利用索引来排序的话&#xff0c;就必须在加载了数据之后&#xff0c;再次进行排序&#xff0c;也就是进行内存排序。 可想而知&#xff0c;如果内存排序…

【居家养老实训室】:看中医保健在养老中的应用

本文以居家养老实训室为视角&#xff0c;深入探讨了中医保健在养老中的应用。通过对中医保健理念、常用方法以及在居家养老中的具体实践进行分析&#xff0c;阐述了其在改善老年人健康状况、提高生活质量方面的重要作用。同时&#xff0c;也指出了目前应用中存在的问题&#xf…

Apache Kylin模型构建全解析:深入理解大数据的多维分析

引言 Apache Kylin是一个开源的分布式分析引擎&#xff0c;旨在为大数据提供快速的多维分析能力。它通过预计算技术&#xff0c;将数据转化为立方体模型&#xff08;Cube&#xff09;&#xff0c;从而实现对Hadoop大数据集的秒级查询响应。本文将详细介绍Kylin中模型构建的全过…

Windchill的Debug配置

在windchillshell中运行以下命令 xconfmanager -s "wt.manager.cmd.MethodServer.debug.args- agentlib:jdwptransportdt_socket,servery,suspendn,address0.0.0.0:{19}" -p - t codebase/wt.properties xconfmanager -s "wt.manager.cmd.MethodServer.param.19…

2024暑假集训第三次考试

3004. Sleepy Cow Sorting 思路分析 这道题是一道思维题。 这个就要结合之前学习过的算法&#xff0c;看这个题目的排序方式&#xff0c;我们就理所当然的想到了插入排序&#xff0c;也是这道题的正解。只需要看看前面有几个数是无序的就是需要排的次数。转换一下&#xff0c;也…

【第19章】MyBatis-Plus自定义ID生成器

文章目录 前言一、如何自定义二、Spring Boot 集成1. 方式一&#xff1a;声明为Bean供Spring扫描注入2. 方式二&#xff1a;使用配置类3. 方式三&#xff1a;通过MybatisPlusPropertiesCustomizer自定义 三、Spring 集成1. 方式一&#xff1a;XML配置2. 方式二&#xff1a;注解…

【CUDA】 矩阵乘法 matMatMul

矩阵乘法 matMatMul 矩阵乘法是基本线性代数子程序&#xff08;BLAS&#xff09;的重要组成部分&#xff0c;而且线性代数中许多其他操作以此为基础。 图1是两个矩阵的乘法。 基础方法&#xff0c;正方形tile和长方形tile 基础方法 执行矩阵乘法的基础方法是使用单个线程执…

Linux上web服务器搭建(Apache、Nginx)

第五章 web服务器 第一节 DNS&#xff1a;对域名进行解析&#xff0c;查询对应的地址 1.1 web服务器简介 www是world wide web的缩写&#xff0c;也就是全球信息广播的意思 1.2.网址及HTTP简介 web服务器提供的这些数据大部分都是文件&#xff0c;那么我们需要在服务器端…

传统视觉Transformer的替代者:交叉注意力Transformer(CAT)

传统视觉Transformer的替代者:交叉注意力Transformer(CAT) 在深度学习的世界里,Transformer架构以其在自然语言处理(NLP)领域的卓越表现而闻名。然而,当它进入计算机视觉(CV)领域时,却面临着计算成本高昂和推理速度慢的双重挑战。现在,一项革命性的创新——交叉注意…

Qualcomm QCS6490 开发板运行高通AI Hub图像分类程序

相关代码可以在如下链接下载&#xff1a; ai-hub-models/apps/android/ImageClassification at main quic/ai-hub-models GitHub 所用硬件有&#xff1a; 1. UBUNTU20.04 2. 高通QCS6490 开发板 对下载下来的代码进行编译 1. ubuntu环境配置 1. python环境配置 如果你…

[SAP ABAP] 子例程

子例程 示例1 主程序(Z437_TEST_2024) INCLUDE文件(Z437_TEST_2024_F01) 输出结果如下所示 示例2 主程序(Z437_TEST_2024) INCLUDE文件(Z437_TEST_2024_F01) 输出结果如下所示 补充扩展练习 主程序(Z437_TEST_2024) INCLUDE文件(Z437_TEST_2024_F01) 输出结果如下所示 提示…

验证图像传感器性能

文章目录 验证图像传感器性能 验证图像传感器性能 测试类别测试项目具体方法与描述图像质量测试分辨率测试使用分辨率测试卡&#xff08;如1951 USAF分辨率测试卡&#xff09;拍摄图像&#xff0c;分析成像的清晰度。动态范围测试测试传感器在高对比度场景中的表现&#xff0c…

odoo 物联网 设备数据采集方案

图一 架构手稿(许老师专属) 图二 架构简图 部署 方案一&#xff1a; odoo业务数据库与设备采集数据库使用一个instance。 缺点&#xff1a;重启pg服务相互影响。 方案二&#xff1a; odoo业务数据库与设备采集数据库独立部署&#xff0c;使用两个instance。 优点&#xff1a;…

RedHat / CentOS安装FTP服务

本章教程,记录在RedHat / CentOS中安装FTP的具体步骤。FTP默认端口:21 1、安装 epel 源 yum install -y epel-release2、安装 pure-ftpd yum -y install pure-ftpd3、修改默认配置 # 默认配置位于 /etc/pure-ftpd/pure-ftpd.conf,在配置文件中找到下面几个参数进行修改:#…

AI视频生成技术爆发 引领虚拟数字人产业新潮流

2024年刚开局&#xff0c;先有OpenAI的AI视频生成模型Sora惊艳全网&#xff0c;随后阿里巴巴发布EMO&#xff0c;一张照片音频&#xff0c;就能生成具有生动表情和各种头部姿势、口型完全匹配高保真的人声头像动态视频。 技术的革新不仅为内容创作者打开了新世界的大门&#xf…

数据结构——队列练习题

在C语言中&#xff0c;.和->运算符用于访问结构体的成员变量。它们之间的区别在于&#xff1a;.运算符用于访问结构体变量的成员。->运算符用于访问结构体指针变量的成员 1a&#xff08;rear指向队尾元素后一位&#xff0c;判空判满时牺牲一个存储单元&#xff09; 首先…

小抄 20240703

1 “这么多年&#xff0c;什么都没有变化。” 同样看到这句话&#xff0c;有人会觉得幸福&#xff0c;有人会觉得悲伤。 好的事没变&#xff0c;就觉得幸福。 坏的事没变&#xff0c;会觉得悲伤。 2 人类预测不到的大趋势&#xff0c;只有技术大爆炸&#xff0c;关于人的那…

PEFT - 安装及简单使用

LLM、AIGC、RAG 开发交流裙&#xff1a;377891973 文章目录 一、关于 PEFT二、安装1、使用 PyPI 安装2、使用源码安装 三、快速开始1、训练2、保存模型3、推理4、后续步骤 本文翻译整理自&#xff1a;https://huggingface.co/docs/peft/index 一、关于 PEFT &#x1f917;PEFT…

算力共享解决方案

目录 算力共享解决方案 一、引言 二、目标 三、技术架构 一、基础设施层 二、服务层 三、应用层 四、实施步骤 五、安全与隐私保护 六、经济模型(信用评估-博弈论) 算力共享解决方案 一、引言 背景分析&#xff1a; 随着大数据、人工智能、区块链等技术的飞速发展&…