Ant Design vue 多层for循环form表单自定义校验

news2024/11/17 0:54:15

数据结构如下:三维数组。

 

注意:<a-form-model>一定得写在for外面!!!!

<!-- 弹出框 -->
<a-modal
      :title="title"
      :dialog-style="{ top: '20px' }"
      :visible="visible"
      :confirmLoading="confirmLoading"
      :width="1450"
      @ok="() => handleSubmit()"
      @cancel="() => handleCancel()"
    > 

<a-form-model ref="formRef" :model="model" class="dialogMaxHeight" :rules="rules">  
     <div v-for="(item, lIndx) in model.result" :key="item.id" v-show="curTabId === item.id">
        <div class="group-item"  v-for="(con, cIndx) in item.contentList" :key="con.id">
            <!-- 两层for写法-->
            <div class="inner"> 
                 <a-row style="padding: 8px 0"> 
                    <a-col :span="12">
                      <a-form-model-item label="自评分" :labelCol="labelCol" :wrapperCol="wrapperCol" 
                       :prop="'result.' + lIndx + '.contentList.' + cIndx + '.selfScore'"
                       :rules="[{ required: parseInt(item.typeId) == 2 ? true : false, validator: validateSelfScore, trigger: ['change', 'blur'] }]" > 
                        <a-input-number  :disabled="isDisabledAuth('selfScore')" placeholder="" :min="getMinScore(con.scoringStandard)" :max="getMaxScore(con.scoringStandard)" v-model="con.selfScore"  style="width: 10rem" />
                                  <span style="padding: 0 5px">分</span>
                       </a-form-model-item>
                     </a-col>  
                 </a-row>
            </div> 

            <!-- 三层for写法-->
             <div class="con">
                  <a-row style="padding: 8px 0"> 
                      <a-col :span="12">
                         <a-form-model-item label="自评分" :labelCol="labelCol" :wrapperCol="wrapperCol" 
                           :prop="'result.' + lIndx + '.contentList.' + cIndx + '.list.' + gIndex +  '.selfScore'"
                           :rules="[{ required: parseInt(item.id) === 2 ? true : false, validator: validateSelfScoreLev2, trigger: ['change', 'blur'] }]"   > 
                                            
                           <a-input-number :disabled="isDisabledAuth('selfScore')" placeholder="" :min="getMinScore(group.scoringStandard)" :max="getMaxScore(group.scoringStandard)" v-model="group.selfScore" style="width: 10rem" />
                            <span style="padding: 0 5px">分</span>
                         </a-form-model-item>
                      </a-col>  
                  </a-row>
            </div> 

        </div>  
    </div> 
</a-form-model>   
</a-modal>                       

export default {
methods: { 
    /* 原始未重构写法 和prop里数据结构一致  */
    validateSelfScore (rule, value, callback) {
        // 校验自评分
        const oneIndex = rule.field.split('.')[1]
        const twoIndex = rule.field.split('.')[3]
        const rowData = this.model.result[oneIndex].contentList[twoIndex]

        const rowData2 = this.model.result[oneIndex].contentList[twoIndex].list[threeIndex]
        if(!value && value === '' || value === null) {
          callback(new Error(`请输入${rowData.content ? rowData.content: ''}自评分!`))
        } else {
          callback()
        }
    }, 
    // 重构后
    validateSelfScore (rule, value, callback) {
        // 校验自评分(仅一级信用)
        // const oneIndex = rule.field.split('.')[1]
        // const twoIndex = rule.field.split('.')[3]
        // const rowData = this.model.result[oneIndex].contentList[twoIndex]
        if(this.isDisabledAuth('selfScore') === false) { // 物业btn未禁用
            this.getValidRowCall(rule).then(res => {
                const rowData = this.model.result[res.oneIndex].contentList[res.twoIndex] 
                // typeId诚信信息必校验
                if(parseInt(rowData.typeId) == 2) {
                    if(!value && (value === '' || value === null)) {
                        // if(rowData.content) this.$message.warning(`请输入${rowData.content ? rowData.content: ''}自评分!`)
                        callback(new Error(`请输入${rowData.content ? rowData.content: ''}自评分!`))
                    } else {
                        callback()
                    }    
                } else {
                    callback()
                }
            })
        } else {
            callback()
        }
    },
    // 三维数组校验 和prop里数据结构一致threeIndex 
    validateSelfScoreLev2 (rule, value, callback) {
        // 校验自评分(二级信用)
        // const rowData = this.model.result[oneIndex].contentList[twoIndex].list[threeIndex]
        if(this.isDisabledAuth('selfScore') === false) { // 物业btn未禁用
            this.getValidRowCall(rule).then(res => {
                const rowData = this.model.result[res.oneIndex].contentList[res.twoIndex].list[res.threeIndex]
                // typeId诚信信息必校验
                if(parseInt(rowData.typeId) == 2) {
                    if(!value && (value === '' || value === null)) {
                        callback(new Error(`请输入${rowData.content ? rowData.content: ''}自评分!`))
                    } else {
                        callback()
                    }
                } else {
                    callback()
                }
            })
        } else {
            callback()
        }
    },
    handleSubmit () { // form表单提交
         this.$refs.formRef.validate(valid => { 
            if (valid) { 
                this.$message.warning('验证通过。。。');    
            } else{
                this.$message.warning('验证未通过。。。');
                return false;
            }
        })
    },
 } 
}
      

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

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

相关文章

日历显示项目

日历显示&#xff1a; //头文件#ifndef __HEAD_DALY_H__ #define __HEAD_DALY_H__#include <stdio.h> #include <stdlib.h> #include <string.h> #include <stdbool.h> #include <stdint.h>uint32_t months[12]; extern bool is_leap(uint32_t …

02.标准化编程规范

1. 前言 在日常开发中&#xff0c;随着团队人员的变更&#xff0c;功能迭代&#xff0c;如果没有一套规范约束大家&#xff0c;就会导致项目中的代码充斥着各种代码风格&#xff0c;会导致后期维护起来十分困难&#xff0c;所以有必要去制定一套规范。互联网发展到今天&#x…

九月更新|用这个方法,小白在国内也能轻松使用ChatGPT,GPT新手使用手册(编程代码)

一、 ChatGPT可以做什么&#xff1f; ChatGPT能做的事情非常多&#xff01;它不仅仅是一个对话AI。以下是一些主要功能&#xff1a; 1. 回答问题&#xff1a;无论是学术问题、技术问题&#xff0c;还是生活琐事&#xff0c;ChatGPT都能提供帮助。 2. 写作助手&#xff1a;可以…

html+css 实现 带射灯的浮雕按钮

前言:哈喽,大家好,今天给大家分享html+css 实现 带射灯的浮雕按钮!并提供具体代码帮助大家深入理解,彻底掌握!创作不易,如果能帮助到大家或者给大家一些灵感和启发,欢迎点赞、收藏+关注哦 💕 文章目录 效果原理解析1.此按钮效果主要是运用了==css3属性的box-shadow和…

用实时计算释放当下企业大数据潜能

摘要&#xff1a;本文整理自阿里云高级产品解决方案架构师王启华&#xff08;敖北&#xff09;老师在 Flink Forward Asia 2023 中闭门会的分享。内容分为以下五个部分&#xff1a; 1. 实时计算在大数据计算发展中的趋势 2. 实时计算对于企业生产的意义 3. 阿里云飞天大数据产品…

Nginx实验-2

Nginx中的变量 变量可以分为内置变量和自定义变量 内置变量是由nginx模块自带&#xff0c;通过变量可以获取到众多的与客户端访问相关的值 [rootnginx ~]# cd /usr/local/nginx/ [rootnginx nginx]# cd conf.d/ [rootnginx conf.d]# ls status.conf vhost.conf [rootngin…

五种多目标优化算法(NSGA3、MOPSO、MOGWO、NGSA2、SPEA2)性能对比,包含47个多目标测试函数,6种评价指标,MATLAB代码

一、五种多目标算法及六种评价指标简介 多目标灰狼优化算法&#xff08;MOGWO&#xff09;&#xff1a; MOGWO是由Mirjalili等人在2016年提出的&#xff0c;基于灰狼优化算法&#xff08;GWO&#xff09;的多目标版本。它引入了存档机制和改进的头狼选择方式&#xff0c;以处理…

【Python报错已解决】`TypeError: an integer is required (got type bytes)`

&#x1f3ac; 鸽芷咕&#xff1a;个人主页 &#x1f525; 个人专栏: 《C干货基地》《粉丝福利》 ⛺️生活的理想&#xff0c;就是为了理想的生活! 文章目录 引言一、问题描述1.1 报错示例1.2 报错分析1.3 解决思路 二、解决方法&#xff1a;2.1 方法一2.2 步骤二 三、其他解决…

39次8.29(了解docker-compose,docker-compose编排容器,配置harbor服务)

1.使用使用docker-compose编排容器 1.YAML ⽂件的格式和语法 1&#xff09;YAML ⽂件格式 yaml 是⼀种标记语⾔很直观的数据序列化格式&#xff0c;可读性很⾼。 类似于 xml 描述性语⾔&#xff0c;语法⽐xml简单的很多。 yaml 数据结构通过缩进进⾏表示&#xff0c;连续的…

AI绘画与《黑神话:悟空》的碰撞,擦出不一样的火花!

在当今数字时代&#xff0c;利用人工智能技术创造艺术作品已成为一种引人注目的趋势。 特别是在社交媒体平台上&#xff0c;如小红书&#xff0c;通过展示AI绘画作品可以吸引大量关注&#xff0c;增加曝光率&#xff0c;并且为自己带来潜在的商业机会。 如果你是《黑神话&…

sql-labs31-35关通关攻略

第三十一关 一.判断闭合 1“” 二.查询数据库 http://127.0.0.1/Less-31/?id-1%22)%20union%20select%201,2,database()--http://127.0.0.1/Less-31/?id-1%22)%20union%20select%201,2,database()-- 三.查表 http://127.0.0.1/Less-31/?id-1%22)%20union%20select%201,…

java实现ocr功能(Tesseract OCR)

1、pom文件中引入依赖 <dependency><groupId>net.sourceforge.tess4j</groupId><artifactId>tess4j</artifactId><version>4.5.4</version> </dependency> 2、下载语言库文件&#xff08;不要放到resources下&#xff0c;可…

Python TensorFlow 实战指南

引言 TensorFlow 是一个功能强大的开源库&#xff0c;被广泛应用于数值计算和机器学习任务。本指南旨在帮助读者理解如何使用 Python 和 TensorFlow 构建机器学习模型。我们将从基础开始&#xff0c;逐步深入到更复杂的主题。 第一部分&#xff1a;入门 第1章&#xff1a;T…

基于vue框架的仓库物流信息管理系统设计和实现0a6d7(程序+源码+数据库+调试部署+开发环境)系统界面在最后面。

系统程序文件列表 项目功能&#xff1a;供应商,商品分类,商品信息,商品入库,车辆信息,订单出库,订单发货,订单抵达,用户 开题报告内容 基于Vue框架的仓库物流信息管理系统设计和实现 开题报告 一、研究背景与意义 随着全球电子商务的蓬勃发展和物流行业的迅速崛起&#xff…

电子设备网络新航向:SEO携手新媒体,打造强势品牌曝光

电子设备企业怎么有效地进行网络推广&#xff0c;把业务越做越好呢&#xff1f;根据湖南竑图网络13年从事互联网优化经验来看&#xff0c;可以给大家分享几点&#xff0c;希望对各位企业老板和高管有一定作用&#xff01; 一、关键词优化。搜索关键词依旧是传统企业获取精准流量…

Three.js Cesium.js 案例聚集地

对于大多数的开发者来言&#xff0c;看了很多文档可能遇见不到什么有用的&#xff0c;就算有用从文档上看&#xff0c;把代码复制到自己的本地大多数也是不能用的&#xff0c;非常浪费时间和学习成本&#xff0c; 尤其是three.js &#xff0c; cesium.js 这种难度较高&#xff…

kubesphere-devops环境-修改maven源到阿里云

文章目录 前言一、maven配置文件在kubesphere中的位置二、修改configmap&#xff0c;增加阿里源信息总结 前言 使用kubesphere搭建了devops环境&#xff0c;但是在构建maven的时候&#xff0c;发现使用的是官方的镜像&#xff0c;修改为阿里云的mirrors 一、maven配置文件在ku…

用Django框架+爬虫技术实现自动获取可画(Canva)团队会员资格的方法

可画(canva)是一个非常流行的在线平面设计平台,因为它无需专业训练和技能就可以利用其丰富的资源设计出美观、酷炫的作品,这些作品可以是视频、广告、演示文稿、网站页面、社交媒体界面、商业标识等等,因而它受到了极其广泛的设计专业和非专业人群的喜爱。在可画平台上,不…

PHP房产管理多终端系统灵活应对各种管理需求系统小程序源码

房产管理多终端系统&#xff0c;灵活应对万变管理需求&#x1f3e0;&#x1f4bc; &#x1f308; 开篇&#xff1a;房产管理的挑战与机遇 在房产行业日益繁荣的今天&#xff0c;管理需求也变得复杂多样。&#x1f914; 无论是大型房企还是小型中介&#xff0c;都面临着房源信息…

前端Vue使用AES的GCM模式加密

文章目录 前端加密测试Java加解密代码 写了个新的前端项目&#xff0c;公司要求&#xff0c;账号密码这些必须是加密传输的&#xff1b;后端使用了GCM模式加密&#xff0c;前端是复制的一个以前项目的代码&#xff0c;原来是有写加密的&#xff0c;使用的是CryptoJS组件CTR模式…