需求:新增 或 编辑 的时候校验同一类型下的字典代码不能重复
注:(当前数据类型是树结构,需要判断根节点(字典选择)下的字典类型是否重复,树节点(性别)下的字典类型是否重复)
思路:写 if 判断,当我选择的是根节点(字典选择)的时候,拿我输入的值去和字典选择里面的数据的字典代码去做判断,(有校验的接口,false 表示不存在,true 表示存在)看是否重复。重复则提示;选择树节点(性别)思路与前面相似
父组件:
<Drawer :visible.sync="visible" :dictcode="dictcode" :dictCheck="dictCheck" ref="dictDrawer" :selectKeys="selectKeys" :treeKeys="treeKeys">
</Drawer>
data(){
retuen{
visible: false, //遮罩层
treeKeys: '789',
dictcode: '' //编辑回显的code
}
}
//新增按钮
async addBtn() {
//选择根节点或者不选任何节点,点击新增,只传字典代码,选择树节点,传字典代码和字典类型
(this.treeKeys == '789' || this.treeKeys == undefined) ? this.dictCheck = {
dictPcode: this.searchForm.pcode
} : this.dictCheck = {
dictType: this.searchForm.type,
dictPcode: this.searchForm.pcode
}
this.getTree();
this.visible = true;
}
//编辑按钮
async handleEdit(record) {
this.dictcode = record.dictCode
this.$refs.dictDrawer.handleEdit(record);
this.visible = true;
}
子组件 :
props:{
visible: {
type: Boolean,
default: false,
},
dictCheck: {
type: Object
},
treeKeys: {
type: String
},
dictcode: {
type: String
},
},
async verifyCode (rule, value, callback) {
// 选中树节点进行校验
if(this.treeKeys !== '789'){
if(rule.field == "dictCode" && (value !== this.dictcode)){
const checkCode = {
dictType: this.formData.dictType,
dictCode: this.formData.dictCode
}
const { data } = await dictVerify(checkCode)
data.entity ? callback(new Error("字典代码重复,请重新输入!")) : callback();
}
// 未选择节点或者选中根节点进行校验
}else if (this.treeKeys == '789'){
if(rule.field == "dictCode" && (value !== this.dictcode)){
const checkCode = {
dictType: this.formData.dictType1 = '',
dictCode: this.formData.dictCode
}
const { data } = await dictVerify(checkCode)
data.entity ? callback(new Error("字典代码重复,请重新输入!")) : callback();
}
}
}
效果: