3.2 iHRM人力资源 - 组织架构 - 编辑及删除

iHRM人力资源 - 组织架构

文章目录

  • iHRM人力资源 - 组织架构
  • 一、编辑功能
    • 1.1 表单弹层并数据回显
    • 1.2 编辑校验
    • 1.3 编辑
  • 二、删除功能

一、编辑功能

编辑功能和新增功能用的组件其实是一个,结构几乎是一样的,其实是复用了组件,我们也省去了很多的开发过程

image-20240324163748425

在如下所示的位置进行编写

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

1.1 表单弹层并数据回显

首先在index页面的下拉结构不会改变

当点击下拉菜单中的某个选项的时候,就会执行operateDept方法

 <!--下拉菜单组件--><!--@command是下拉菜单的执行方法,当点击下拉菜单中的某一项的时候,就会执行operateDept方法--><!--$event实参表示类型,也就是下面command中的值,表示事件所携带的默认参数,如果不传data.id的话,默认传入的就是$event实参--><el-dropdown @command="operateDept($event,data.id)"><!--显示区域内容--><span class="el-dropdown-link">操作<i class="el-icon-arrow-down el-icon--right"></i>
</span><!--下拉菜单的选项--><el-dropdown-menu slot="dropdown"><el-dropdown-item command="add">添加子部门</el-dropdown-item><el-dropdown-item command="edit">编辑部门</el-dropdown-item><el-dropdown-item command="del">删除</el-dropdown-item></el-dropdown-menu></el-dropdown>

image-20240324164243423

弹层

<!--放置弹层-->
<!--:show-dialog 是我们在add-dept组件中定义的props-->
<!--sync修饰,表示会接受子组件的事件,也就是update:showDialog这个事件,然后会把值赋值给下面的showDialog-->
<!--自定义事件updateDepartment,子组件触发,父组件执行getDepartment方法,刷新组织结构-->
<!--ref可以获取dom的实例对象,也可以获取自定义组件的实例对象-->
<add-dept ref="addDept" @updateDepartment="getDepartment" :current-node-id="currentNodeId":show-dialog.sync="showDialog"
></add-dept>

方法

methods: {operateDept($event, id) {if ($event === 'add') {// 添加子部门// 显示弹层组件this.showDialog = true// 当前点击节点的idthis.currentNodeId = id} else if ($event === 'edit') {// 编辑部门的场景this.showDialog = true// 当前点击节点的id,后面要用他获取数据,获取数据的最终目的就是数据回显// 下面的代码存在问题:// 我们点击编辑的时候,会提示我们“找不到对应的部门”,然后我们发现下面传到add-dept组件中的id为null// 下面这行代码更新了子组件add-dept中的props,然后又直接调用了子组件add-dept中的getDepartmentDetail方法(同步方法)// 但是我们的更新props是一个异步的方法,所以存在一种可能,先执行了getDepartmentDetail方法又刷新的propsthis.currentNodeId = id// 要在子组件获取数据// 父组件调用子组件的方法来获取数据// 此时this.$refs.addDept等同于子组件的this// this.$refs.addDept.getDepartmentDetail() 在这里调用会和props产生同步异步的问题// 有没有办法等到props更新之后再去调用getDepartmentDetail方法呢?// this.$nextTick会等到我们数据更新完毕,执行回调函数this.$nextTick(() => {this.$refs.addDept.getDepartmentDetail()})}}........
}

add-dept组件方法中的方法

methods: {// 获取组织的详情async getDepartmentDetail() {const result = await getDepartmentDetail(this.currentNodeId)// 完成数据回显this.formDara = result}......
}

获取部门详情的api方法

/*** 获取部门详情*/
export function getDepartmentDetail(id) {// 不写请求方式的话,默认为get类型// 这个地方使用了一个模板字符串return request({url: `/company/department/${id}`})
}

1.2 编辑校验

首先说明,修改的表单校验和新增的表单校验是一个样子的,所以说表单校验规则可以复用

  • 表单项必填/表单项长度限制
  • 部门名称和已有部门不重复
  • 部门编码和已有编码不重复

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

但是目前有下面这个问题,当我们点击“编辑”后,会出现下面的情况,所以我们应该把“编辑”功能和“新增”功能的校验区别开

如果是编辑模式下,我们应该把当前的这条数据排除掉,不要和自己去比

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传那我们怎么区别新增还是编辑场景呢

很好判断,当时新增操作的时候,formData中没有id字段

image-20240326210535432

当时编辑操作的时候,formData中有id字段

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

修改编辑的校验

rules: {// 部门编码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()// 判断此时是编辑模式还是新增模式if (this.formDara.id) {// 存在id,说明是编辑状态,我们要将自身排除掉result = result.filter(item => item.id !== this.formDara.id)}// result实际是一个数组,然后查看数组中是否存在用户输入的value值// 我们可以使用some()方法,如果存在就返回true,不存在就返回falseif (result.some(item => item.code === value)) {// 校验失败时的错误对象callback(new Error('部门中已经有该编码'))} else {// 校验成功时的对象callback()}}}],// 部门介绍introduce: [{ required: true, message: '部门介绍不能为空', trigger: 'blur' },{ min: 2, max: 10, message: '部门名称的长度1-100个字符' }],// 部门负责人idmanagerId:[{ required: true, message: '部门负责人id不能为空', trigger: 'blur' }],// 部门名称name:[{ required: true, message: '部门名称不能为空', trigger: 'blur' },{ min: 2, max: 10, message: '部门名称的长度2-10个字符' },{trigger: 'blur', validator: async(rule, value, callback) => {// value值是输入的编码值let result = await getDepartment()// 判断此时是编辑模式还是新增模式if (this.formDara.id) {// 存在id,说明是编辑状态,我们要将自身排除掉result = result.filter(item => item.id !== this.formDara.id)}// result实际是一个数组,然后查看数组中是否存在用户输入的value值// 我们可以使用some()方法,如果存在就返回true,不存在就返回falseif (result.some(item => item.name === value)) {// 校验失败时的错误对象callback(new Error('部门中已经有该名称'))} else {// 校验成功时的对象callback()}}}]// pid: '' // 父级部门的id
}

上面那么多的代码,其实有用的就是下面这个

image-20240326215858928

1.3 编辑

其实“添加”功能的“确认”和“取消”在这里差不多就能复用

因为我们“添加”和“编辑”功能公用的一个组件,所以我们需要区分一下是编辑下的文本框还是增加下的文本框

image-20240326220312926

api接口

/*** 更新部门接口*/
export function updateDepartment(data) {return request(({url: `/company/department/${data.id}`,method: 'PUT',data: data}))
}

方法内容

// 点击确定时调用此方法
btnOK() {this.$refs.addDept.validate(async isOK => {if (isOK) {let msg = '新增'// 通过formData中是否有id来确认是“编辑”环境还是“增加”环境if (this.formDara.id) {// 编辑场景msg = '编辑'await updateDepartment(this.formDara)} else {// 新增场景// ...this.formDara 表示相当于把formDara数据进行了拷贝,考到了一个新对象里面// pid: this.currentNodeId表示将formDara中的pid赋值上currentNodeIdawait addDepartment({ ...this.formDara, pid: this.currentNodeId })}// 校验已经通过// 此时可以通知父组件更新,也就是子传父,可以选择触发一个自定义事件(父组件要监听这个事件)this.$emit('updateDepartment')// 提示消息this.$message.success(+`${msg}部门成功`)// 关闭this.close()}})
},

再写一个计算属性,当我们点击“编辑”的时候,弹层会显示“编辑部门”,同理我们点击“新增”时,弹层会显示“新增部门”

<!--:visible用来控制显示和隐藏,由于我们是一个组件,所以我们需要外部传入一个参数来控制显示还是隐藏-->
<!--@close用于监视关闭弹层(点击右上角×号的时候,就会执行此函数)-->
<el-dialog :title="showTitle" :visible="showDialog" @close="close">
computed: {showTitle() {return this.formData.id ? '编辑部门' : '新增部门'}
}

但是现在还有一个问题,当我们点击“编辑”后,关闭,再点击“新增”,我们发现弹层左上角显示“编辑部门”,而不是“新增部门”,原因就是this.$refs.addDept.resetFields()重置表单时有问题,并没有把id给清空

image-20240326222640127

其实我们可以手动置空

close() {// 重置表单this.formData ={code: '', // 部门编码introduce: '', // 部门介绍managerId: '', // 部门负责人idname: '', // 部门名称,pid: '' // 父级部门的id}// resetFields重置表单有一个局限性,只能重置在模板中绑定的数据(假如说没有绑定某个字段,那这个字段肯定不能重置)this.$refs.addDept.resetFields()// 修改父组件的值,子传给父亲// this.$emit可以触发一个自定义事件(父组件需要接收这个时间),然后把false这个值传出去// this.$emit('',false) 但是我们先不用这个方法// 这里我们使用了 sync修饰,表示会接受子组件的事件,也就是update:showDialog这个事件,然后会把值赋值给showDialogthis.$emit('update:showDialog', false)
},

二、删除功能

流程图

image-20240326223105126

async getDepartment() {// 下面这个方法是import导入的api请求方法const result = await getDepartment()// 但是我们获取到的数据是列表的形式,没有层级结构,我们要使用递归的方式完成树形结构this.depts = transListToTreeData(result, 0)
},
operateDept($event, id) {if ($event === 'add') {// 添加子部门// 显示弹层组件this.showDialog = true// 当前点击节点的idthis.currentNodeId = id} else if ($event === 'edit') {// 编辑部门的场景this.showDialog = true// 当前点击节点的id,后面要用他获取数据,获取数据的最终目的就是数据回显// 下面的代码存在问题:// 我们点击编辑的时候,会提示我们“找不到对应的部门”,然后我们发现下面传到add-dept组件中的id为null// 下面这行代码更新了子组件add-dept中的props,然后又直接调用了子组件add-dept中的getDepartmentDetail方法(同步方法)// 但是我们的更新props是一个异步的方法,所以存在一种可能,先执行了getDepartmentDetail方法又刷新的propsthis.currentNodeId = id// 要在子组件获取数据// 父组件调用子组件的方法来获取数据// 此时this.$refs.addDept等同于子组件的this// this.$refs.addDept.getDepartmentDetail() 在这里调用会和props产生同步异步的问题// 有没有办法等到props更新之后再去调用getDepartmentDetail方法呢?// this.$nextTick会等到我们数据更新完毕,执行回调函数this.$nextTick(() => {this.$refs.addDept.getDepartmentDetail()})} else if ($event === 'del') {// 删除部门// 假如用户点击了“取消”,我们这里是不需要管的this.$confirm('您确定要删除该部门吗?').then(async() => {// 进入到这里,说明用户点击了确认按钮await delDepartment(id)// 提示消息this.$message.success('删除部门成功')// 重新拉取数据getDepartment()})}
}

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

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

相关文章

Hive-Sql复杂面试题

参考链接&#xff1a;hive sql面试题及答案 - 知乎 1、编写sql实现每个用户截止到每月为止的最大单月访问次数和累计到该月的总访问次数 数据&#xff1a; userid,month,visits A,2015-01,5 A,2015-01,15 B,2015-01,5 A,2015-01,8 B,2015-01,25 A,2015-01,5 A,2015-02,4 A,20…

vite项目创建和打包编译

Vite&#xff08;法语中“快速”的意思&#xff09;是一个现代化的前端构建工具&#xff0c;它提供了快速的冷启动、即时的模块热更新&#xff08;HMR&#xff09;以及真正的按需编译&#xff0c;从而大幅提升了开发体验。Vite 通过原生 ES 模块&#xff08;ESM&#xff09;的优…

用于密集视觉冲击的紧凑三维高斯散射Compact 3D Gaussian Splatting For Dense Visual SLAM

Compact 3D Gaussian Splatting For Dense Visual SLAM 用于密集视觉冲击的紧凑三维高斯散射 Tianchen Deng 邓天辰11Yaohui Chen 陈耀辉11Leyan Zhang 张乐妍11Jianfei Yang 杨健飞22Shenghai Yuan 圣海元22Danwei Wang 王丹伟22Weidong Chen 陈卫东11 Abstract 摘要 …

基于Python的招聘信息爬虫系统的设计与实现

基于Python的招聘信息爬虫系统的设计与实现 Design and Implementation of a Python-based Recruitment Information Crawler System 完整下载链接:基于Python的招聘信息爬虫系统的设计与实现 文章目录 基于Python的招聘信息爬虫系统的设计与实现摘要第一章 绪论1.1 研究背景…

淘宝API商品详情数据在数据分析行业中具有不可忽视的重要性

淘宝商品详情数据在数据分析行业中具有不可忽视的重要性。这些数据为商家、市场分析师以及数据科学家提供了丰富的信息&#xff0c;有助于他们更深入地理解市场动态、消费者行为以及商品竞争态势。以下是淘宝商品详情数据在数据分析行业中的重要性体现&#xff1a; 请求示例&a…

ArcGIS三维景观分层显示

今天将向大家介绍的事在ArcGIS中如何创建多层三维显示。 地表为影像的 地表为地形晕渲的 在土壤分层、油气分层等都有着十分重要的应用。下面我们具体来看看实现过程 一、 准备数据及提取栅格范围 我们这次准备的数据是之前GIS100例-30讲的案例数据。《ArcGIS三维影像图剖面图…

基于栈求解迷宫的单条路径和所有路径

数据结构与算法课的一个实验&#xff0c;记录一下。 单纯想要了解利用栈求解迷宫的算法可以直接跳转到相应的小标题。 完整代码链接code_2024/mazeLab LeePlace_OUC/code - 码云 - 开源中国 (gitee.com) 文章目录 要求栈的实现MazeType类型的组织迷宫的初始化和销毁打印路径…

AIGC实战——VQ-GAN(Vector Quantized Generative Adversarial Network)

AIGC实战——VQ-GAN 0. 前言1. VQ-GAN2. ViT VQ-GAN小结系列链接 0. 前言 本节中&#xff0c;我们将介绍 VQ-GAN (Vector Quantized Generative Adversarial Network) 和 ViT VQ-GAN&#xff0c;它们融合了变分自编码器 (Variational Autoencoder, VAE)、Transformer 和生成对…

数字孪生与机械运行监控

随着信息技术的快速发展&#xff0c;传统装备正在向智能化和信息化方向转变。装备特别是关键装备持续良好运行对客户来说特别重要&#xff0c;这样装备运行状态的监控十分必要。将装备监控技术与网络通信技术、传感器技术深度融合&#xff0c;可以加速装备向智能化迈进&#xf…

C# 创建Bitmap位图中的PixelFormat如何影响stride步幅的计算

创建位图的方法 // // 摘要: // 用指定的大小、像素格式和像素数据初始化 System.Drawing.Bitmap 类的新实例。 // // 参数: // width: // 新 System.Drawing.Bitmap 的宽度&#xff08;以像素为单位&#xff09;。 // // height: // 新 System.Drawing.Bitma…

Vue加载glb / gltf模型(如何在vue中使用Three.js,vue使用threejs加载glb模型)

简介&#xff1a;Three.js 是一个用于在 Web 上创建和显示 3D 图形的 JavaScript 库。它提供了丰富的功能和灵活的 API&#xff0c;使开发者可以轻松地在网页中创建各种 3D 场景、模型和动画效果。可以用来展示产品模型、建立交互式场景、游戏开发、数据可视化、教育和培训等等…

在redhat7/8平台上部署ELK7.17.18的技术方案

部署环境说明 为节省资源直接使用1台测试机模拟3节点elasticsearch服务集群做部署&#xff0c;在该主机上同时部署了3个elasticsearch实例、1个logstash实例、1个kibana实例、1个filebeat实例。对于生产环境&#xff0c;以上实例服务应该做分布式部署。 ELK-TEST1 192.168.10…

嵌入式4-16

tftpd #include <myhead.h> #define SER_IP "192.168.125.243" //服务器IP地址 #define SER_PORT 69 //服务器端口号 #define CLI_IP "192.168.125.244" //客户端IP地址 #define CLI_PORT 8889 //客户端端…

解读科技智慧公厕改变生活的革命性创新之路

公共厕所&#xff0c;作为城市基础设施的一部分&#xff0c;一直以来都备受人们诟病。脏乱差、设施老旧、管理混乱&#xff0c;成为公共厕所长期存在的问题。然而&#xff0c;随着科技的不断进步&#xff0c;智慧公厕应运而生&#xff0c;为解决公厕难题&#xff0c;智慧公厕源…

目标检测YOLO实战应用案例100讲-自动驾驶场景下的三维目标检测技术研究(续)

目录 知识储备 自动驾驶中多模态三维目标检测 3D目标检测是什么? 1、定义

【ElasticSearch】安装(bug篇)

以下解决办法参考自网友们的分享 1. JDK绑定问题 但其实这样也没有问题&#xff0c;因为内嵌的jdk版本与当前的es版本是适配的 但是&#xff0c;如果内嵌的jdk与当前es不适配&#xff0c;那就要修改配置文件 / 添加环境变量&#xff0c;让es启动的时候能扫描到我们本地的jdk …

安全地创建一个临时文件 - mkstemp

安全地创建一个临时文件 - mkstemp 在我们处理一些敏感数据的时候&#xff0c;可能必须要临时存储在文件中&#xff0c;这个时候就需要创建临时文件&#xff1b; 在我们需要临时创建一些大量的中间数据&#xff0c;并且在程序结束时删除这些文件时&#xff0c;我们就需要创建临…

知识点static、事务的特性、接口

2024-4-16杂记 今日没有学习新的知识&#xff0c;但是学习了一些知识点 事务特性&#xff1a;ACID 1.原子性【Atomicity】&#xff1a;表示事务要么全部完成&#xff0c;要么全部不完成 2.一致性【Consistency】&#xff1a;表示事务处理后数据库&#xff0c;从一个一致性状…

蓝桥杯刷题-货币系统

1371. 货币系统 - AcWing题库 #include <bits/stdc.h>using namespace std;typedef long long LL; const int N 30; LL v , n; LL f[10010]; LL ways 0;int main() {cin >> v >> n;f[0] 1; //初始化 f[0][0] 1 for(int i 1; i < v; i){int v;cin&g…

校园水电能源智能化管理系统

校园作为大量人员集聚的场所&#xff0c;水电能源的高效管理对于降低运营成本、保障安全稳定供应以及推动可持续发展至关重要。校园水电能源智能化管理系统应运而生&#xff0c;通过先进技术的应用&#xff0c;实现了对校园水电资源的智能监控、计量和管理。本文将从系统背景、…