通过校验实现子表格不允许重复录入

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) {
      //如果输入的值与遍历的值相等
      if (item.name === value) {  
        //此时遍历的值与输入的值为同一个,需要跳过第一个匹配项
        if (firstMatchFound) {  
          // 如果已经找到过匹配项,再次找到则视为重复  
          return "数据重复!";  
        } else {  
          // 如果是第一个匹配项,设置标志并继续遍历  
          firstMatchFound = true;  
        }  
      }  
    }  
    return null; // 如果没有找到任何后续匹配项,返回 null  
  } else {  
    return null; // 如果 MaterialInfos不存在或 parentFormData为空,也返回 null  
  }

实现效果:

更多请参见EOS Low-Code Platform 8

  • 3
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
组件的表单未通过校验时,父组件可以通过监听组件的校验状态来禁用提交按钮或者显示错误提示信息,以避免不合法的数据提交到后台。一种常用的方法是在组件中定义一个事件,当组件表单校验状态发生改变时,触发该事件并传递校验状态给父组件。父组件通过监听该事件来更新提交按钮的状态或者显示错误提示信息。具体实现方法可以参考以下示例代码: 组件: ```html <template> <el-form ref="form" :model="formData" :rules="rules" @change="handleChange"> <!-- 表单项 --> </el-form> </template> <script> export default { data() { return { formData: {}, // 表单数据 rules: {}, // 表单校验规则 isFormValid: false, // 表单校验状态 }; }, methods: { handleChange() { // 表单校验状态发生改变,触发事件通知父组件 this.isFormValid = this.$refs.form.validate(); this.$emit('form-change', this.isFormValid); }, }, }; </script> ``` 父组件: ```html <template> <child-form @form-change="handleFormChange"></child-form> <el-button :disabled="!isFormValid" @click="handleSubmit">提交</el-button> </template> <script> import ChildForm from './ChildForm.vue'; export default { components: { ChildForm, }, data() { return { isFormValid: false, // 组件表单校验状态 }; }, methods: { handleFormChange(isValid) { // 组件表单校验状态发生改变,更新父组件状态 this.isFormValid = isValid; }, handleSubmit() { // 父组件提交逻辑 if (this.isFormValid) { // 提交表单数据 } else { // 显示错误提示信息 } }, }, }; </script> ``` 在上述示例中,组件通过 `handleChange` 方法监听表单项的变化,当表单校验状态发生改变时,触发 `form-change` 事件并传递校验状态给父组件。父组件通过监听 `form-change` 事件来更新 `isFormValid` 的状态,从而禁用或启用提交按钮。在提交表单时,父组件会检查表单的校验状态,如果校验通过则提交表单数据,否则显示错误提示信息。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值