子表格重复录入校验

1.场景介绍

供应商父表单中的物料子表单添加数据时，物料名称字段和物料类型字段的组合数据不允许重复。

本文以上述场景，讲解如何实现子表单内数据的重复校验。

2.效果预览

3.实现思路

在子表单中对物料名称字段和物料类型字段所在的组件添加自定义校验事件，从父表单中获取子表单的数据并遍历判断是否有重复数据，如果重复直接返回提示字样，未重复返回null。

4.操作步骤

4.1创建表单

初始化数据库，以MySQL为例，脚本如下：

    create table material_info (
        ID varchar(255) not null comment '主键',
        name varchar(255) comment '物料名称',
        type varchar(255) comment '物料类型',
        space varchar(255) comment '规格',
        prices varchar(255) comment '价格',
        supplier_id varchar(255),
        primary key (ID)
    );
    create table supplier_info (
        id varchar(255) not null,
        supplier_id varchar(255) comment '供应商编码',
        supplier_name varchar(255) comment '供应商名称',
        usci varchar(255) comment '统一社会信用代码',
        status varchar(255) comment '供应商审核状态',
        primary key (id)
    );

创建数据实体，拖拽material_info表和supplier_info表，并添加关联关系。

右键供应商实体生成表单，此时会自动生成物料子表单。

开启物料名称和物料类型的必填校验，保存数据的完整性，以便进行数据的重复录入校验

4.1自定义校验事件

在物料子表单中，点击物料名称字段所在的组件，校验-自定义校验事件，添加校验逻辑。

//判断父表单和子表单是否有数据
if (this.parentFormData && this.parentFormData.MaterialInfos) {  
    //设置标志
    let firstMatchFound = false;  
    //遍历物料对象数组
    for (const item of this.parentFormData.MaterialInfos) {
      //如果输入的值与遍历的值相等, value为当前输入的物料名称
      if (item.name === value && item.type === this.formData.type ) {  
        //此时遍历的值与输入的值为同一个，需要跳过第一个匹配项
        if (firstMatchFound) {  
          // 如果已经找到过匹配项，再次找到则视为重复  
          return "数据重复！";  
        } else {  
          // 如果是第一个匹配项，设置标志并继续遍历  
          firstMatchFound = true;  
        }  
      }  
    }  
    return null; // 如果没有找到任何后续匹配项，返回 null  
  } else {  
    return null; // 如果 MaterialInfos不存在或 parentFormData为空，也返回 null  
  }

在物料子表单中，点击物料类型字段所在的组件，校验-自定义校验事件，添加校验逻辑。

//判断父表单和子表单是否有数据
if (this.parentFormData && this.parentFormData.MaterialInfos) {  
    //设置标志
    let firstMatchFound = false;  
    //遍历物料对象数组
    for (const item of this.parentFormData.MaterialInfos) {
      //如果输入的值与遍历的值相等, value为当前输入的物料类型
      if (item.name === this.formData.name && item.type === value ) {  
        //此时遍历的值与输入的值为同一个，需要跳过第一个匹配项
        if (firstMatchFound) {  
          // 如果已经找到过匹配项，再次找到则视为重复  
          return "数据重复！";  
        } else {  
          // 如果是第一个匹配项，设置标志并继续遍历  
          firstMatchFound = true;  
        }  
      }  
    }  
    return null; // 如果没有找到任何后续匹配项，返回 null  
  } else {  
    return null; // 如果 MaterialInfos不存在或 parentFormData为空，也返回 null  
  }

实现效果：