后台管理系统的业务校验,编码不重复,部门名称同级不重复实现
站长
· 阅读数 21
一、编码不重复
1.获取简略信息
使用数组的map方法,和解构,获得新的数组
// (2)加工数据originList,需要的简略信息为:code,id,pid,name
this.originList = res.data.depts.map(({ code, id, pid, name }) => { return { code, id, pid, name } })
2.自定义编码校验规则
思路：
- (1)传入的value编码不能和其他编码重复
- (2)得到一个编码数组,使用数组map方法获得单独编码数组
- (3)如果编码数组中没有value则校验通过,否则不通过,
- 使用数组的some或者includes方法判断是否有value
- 如果有则报错已经存在没有则继续执行
注意:自定义校验规则写的位置为位置1,不是位置2,
data() {
位置1
return {
位置2
}
},
// 自定义校验规则
var validCode = (rule, value, callback) => {
// (1)传入的value编码不能和其他编码重复
// (2)得到一个编码数组
const existCodeList = this.originList.map(item => item.code)
// (3)如果编码数组中没有value则校验通过,否则不通过
existCodeList.some(item => item === value) ? callback(new Error(`编码${value}已经存在`)) : callback()
// existCodeList.includes(value) ? callback(new Error('编码' + value + '已经存在')) : callback()
}
3.自定义校验规则使用
- 在data中的数据的校验规则的编码部分补充
{ validator: validCode, trigger: 'blur' }
rules: {
code: [
{ required: true, message: '部门编码不能为空', trigger: 'blur' },
{
min: 1,
max: 50,
message: '部门编码要求1-50个字符',
trigger: 'blur'
},
{ validator: validCode, trigger: 'blur' }
],
}
4.新增和编辑共用一个验证规则时的问题解决
- 新增时编码不能与其他编码相同
- 但是编辑时一般不修改编码,但是还是会报编码重复
- 解决方法:如果是编辑时,要在不能使用的部门编号中排除现在的部门编号
在编码校验时加入一个判断代码:
- 先用filter筛选出和编辑的id不同的部门信息,然后用map返回新的编码数组
// 自定义校验规则
var validCode = (rule, value, callback) => {
// (1)传入的value编码不能和其他编码重复
// (2)得到一个编码数组
let existCodeList = this.originList.map(item => item.code)
// (2.1)如果是编辑则去除本部门的编码
+ if (this.isEdit) {
+ existCodeList = this.originList.filter(item => item.id !== this.id).map(item => item.code)
+ }
// (3)如果编码数组中没有value则校验通过,否则不通过
existCodeList.some(item => item === value) ? callback(new Error(`编码${value}已经存在`)) : callback()
// existCodeList.includes(value) ? callback(new Error('编码' + value + '已经存在')) : callback()
}
二、部门名称同级不重复(新增和编辑)
1.自定义部门名校验规则
思路 :
- (1)传入的value编码不能和其他编码重复
- (2)筛选出当前选中部门的子部门,即部门pid和当前选中的id相同的部门
- (3)如果编码数组中没有value则校验通过,否则不通过
const validName = (rule, value, callback) => {
// (1)传入的value编码不能和其他编码重复
// (2)筛选出当前选中部门的子部门,即部门pid和当前选中的id相同的部门
let existName = this.originList.filter(item => item.pid === this.id).map(item => item.name)
// (3)如果编码数组中没有value则校验通过,否则不通过
existName.some(item => item === value) ? callback(new Error(`部门${value}已经存在`)) : callback()
// existCodeList.includes(value) ? callback(new Error('编码' + value + '已经存在')) : callback()
}
2.自定义部门名校验规则使用
rules: {
name: [
{ required: true, message: '部门名称不能为空', trigger: 'blur' },
{
min: 1,
max: 50,
message: '部门名称要求1-50个字符',
trigger: 'blur'
},
{ validator: validName, trigger: 'blur' }
]}
3.新增和编辑共用一个验证规则时的问题解决
增加编辑时的判断,如果是编辑情况:
如果是编辑筛选出同父部门的其他子部门name,即部门pid和当前选中的pid相同的部门,然后去除自己
- 1.先找到当前选中部门的pid :item.id===this.id
-
- filter和find方法,filter返回的是一个数组,即使只有一个元素,find返回的是一个元素
- 2.筛选出和当前选中部门pid相同pid的部门同时去除自身部门即当前部门兄弟部门
-
- item.id=pid && item.id !== this.id
增加代码部分在前面已经用+标出
const validName = (rule, value, callback) => {
// (1)传入的value编码不能和其他编码重复
// (2)筛选出当前选中部门的子部门,即部门pid和当前选中的id相同的部门
let existName = this.originList.filter(item => item.pid === this.id).map(item => item.name)
// (2.1)如果是编辑筛选出同父部门的其他子部门name,即部门pid和当前选中的pid相同的部门,然后去除自己
+ if (this.isEdit) {
// 先找到当前选中部门的pid filter和find方法,filter返回的是一个数组,即使只有一个元素,find返回的是一个元素
// const pid = this.originList.filter(item => item.id === this.id)[0].pid
+ const pid = this.originList.find(item => item.id === this.id).pid
+ // 筛选出和当前选中部门pid相同pid的部门同时去除自身部门即当前部门兄弟部门
+ existName = this.originList.filter(item => item.pid === pid && item.id !== this.id).map(item => item.name)
+ console.log(existName)
+ }
// (3)如果编码数组中没有value则校验通过,否则不通过
existName.some(item => item === value) ? callback(new Error(`部门${value}已经存在`)) : callback()
// existCodeList.includes(value) ? callback(new Error('编码' + value + '已经存在')) : callback()
}
三、总结
自定义校验规则validator
validator: function (rule, value, callback) {}
rule : 当前的规则 value : 被校验的值 callback : 回调
- 如果通过了规则检验，直接调用callback()
- 如果没有通过规则检验，调用callback(错误对象，在错误对象中说明原因)
- callback(new Error('错误说明')
数组的find和filter方法
- filter返回的是一个满足条件的所有元素组成的数组,即使只有一个元素,返回的也是一个元素的数组,要取到这个值则需要取数组下标为0的元素
- find返回的是一个元素,第一个满足条件的元素